web: User Wizard, Modal Revisions Merge Branch (#21336)

* web/elements: rename hasSlotted to findSlotted and refactor host styles

Rename the slot-inspection helper on `AKElement` from `hasSlotted` to
`findSlotted` and return the first matching element rather than a
boolean, so callers can both check for presence and reach the node.
Update every call site in the tree (default callers pass no argument
instead of `null`).

Along the way, tidy `AKElement`'s host-style plumbing: expose
`hostStyles` as a getter/setter backed by a `CSSStyleSheet` cache and
move the adoption logic into `attachHostStyles` / `detachHostStyles`
class methods, so subclasses can share the lifecycle. Drop the now
unused `@localized` decorator import.

Also add a `findAssignedSlot` helper in `elements/utils/slots.ts` for
light-DOM → slot lookups, and give `EmptyState` an explicit
`display: block` so empty-state placement doesn't collapse when
wrapped.

* web/chips: tighten chip group rendering and add placeholder class

Make `ChipGroup` generic over its chip value type, expose a
`placeholder` property that renders an inline placeholder when the
default slot is empty, and intercept clicks that land on child chips
so outer handlers can tell "clicked the group" apart from "clicked a
chip". Give the host an explicit `display: block` so the group
participates in layout correctly.

Move the removal tooltip on `Chip` to the right so it doesn't clip at
the top of the row.

In `base/common.css`, add the `ak-m-placeholder` class used by the
new chip-group placeholder and extend `.ak-fade-in` with an opt-in
`ak-m-delayed` modifier that animates height alongside the fade via
`interpolate-size`, so loading cards can slide in without jank.

* web/elements: add scrollbar helpers and polish table styles

Introduce `elements/utils/scrollbars.ts` with `measureScrollbarWidth`
and `applyScrollbarClass`, and call it from `Interface` so the root
document picks up `ak-m-visible-scrollbars` / `ak-m-overlay-scrollbars`
depending on the platform. Add an `ak-m-thin-scrollbar` selector to
the thin-scrollbar rule in `base/scrollbars.css` so ad-hoc containers
can opt in.

Refresh `Table.css`: expose `search-form`, `search-input`,
`pagination-bottom`, and `table` parts; introduce
`--ak-c-table--expandable-overlay--Color` theming for expandable rows
(including a nested-table background pass); add an
`ak-c-table__actions` helper so per-row action buttons wrap
consistently; and teach the host to honor `display-box="contents"` so
tables embedded in `display: contents` parents still participate in
layout checks.

Drop the unused `elements/utils/isVisible.ts`; the only live
`isVisible` helpers live beside their callers under SearchSelect.

* web/buttons: support split-button Dropdown layout

Teach `ak-dropdown` to recognize a PatternFly split-button toggle —
look for `.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button:last-child`
first and fall back to the single-button selector — so a primary
action and a menu trigger can coexist in one dropdown. Drop the
workaround that skipped wiring menu-item click handlers: now that
dropdowns live inside native dialogs, letting a menu-item click
bubble no longer closes the parent modal. Switch the private fields
to `protected` so subclasses can reach them, and anchor the
AKRefreshEvent and outside-click listeners at `window` explicitly
(matching the new `@listen` default).

In `@listen`, flip the default target from `window` to `this`. A
component's own element is the more intuitive default for a decorator
attached to an instance method, and call sites that want the window
now opt in explicitly.

Extend `Dropdown/dropdown.css` with `--pf-c-dropdown__toggle--*`
padding variables so split-button variants get consistent spacing.

* web/forms: improve form ARIA scaffolding and tighten group styles

Add a sticky `ak-c-form__header` row to `Form.css` with a
`form-actions` part so form headers can host an inline title and
action cluster without each form reinventing the layout.

In `Form/form.css`, add a `.ak-m-content-center` variant for forms
that center their body inside a fixed-size container, and introduce a
PatternFly-compatible grid-based Radio label so the input and its
description align cleanly and the whole row is clickable.

Tighten the `FormGroup` summary spacing (use `spacer--sm` inline and
`spacer-xs` block) and hoist the high-contrast overrides onto the
open group so the details marker stays aligned.

Make `AKControlElement` abstract (requiring a `name`), rename
`isValid` → `valid`, declare it as implementing the new
`FormField<T>` interface, and mark it deprecated in favor of
`FormAssociatedElement`. Make `FormField` generic over the JSON
value type, extend `HTMLElement`, and drop the `Jsonifiable` runtime
import in favor of a type-only import. `HorizontalFormElement` now
searches for either legacy control elements or the new `FormField`
shape when picking its focus target.

* web/elements: migrate modal plumbing to the native <dialog> element

Replace the bespoke modal stack with an `<ak-modal>` built on the
browser's native `<dialog>`, and collect every piece of the new
infrastructure under `#elements/dialogs`:

 * `ak-modal.ts` / `ak-modal.css` — the element + its PatternFly
   compatible styles.
 * `dialog.css` — the global `ak-c-dialog` token and backdrop rules,
   imported via the new `components/Modal/modal.css` entry point
   (replacing the old `base/modal.css` import in `base.css` and
   `interface.global.css`).
 * `shared.ts` — the `TransclusionChildElement` /
   `TransclusionChildSymbol` contract plus the parent-side helpers
   (`isTransclusionParentElement`, `slottedElementUpdatedAt`), so
   forms and tables hosted inside a modal can signal re-render hints
   to the dialog wrapper.
 * `directives.ts` / `invokers.ts` / `utils.ts` — the
   `modalInvoker`, `renderModal`, and `DialogInit` helpers that
   declarative call sites use to open a modal from a button without
   imperatively mounting the element.
 * `components/` — the ready-made invoker buttons
   (`ModalInvokerButton`, `IconEditButton`, `IconEditButtonByTagName`,
   `IconPermissionButton`) and the `components.ts` barrel.
 * `components/Modal/modal.css` — the short host wrapper that pulls
   `dialog.css` into the bundled base stylesheet chain.

Rewire the existing modal consumers to use the new contract:

 * `Form` now implements `TransclusionChildElement`, exposes
   `verboseName`/`verboseNamePlural`/`createLabel`/`submitVerb`
   statics, tracks visibility via `intersectionObserver`, and
   forwards `asModalInvoker` / `showModal` through the new
   `modalInvoker` / `renderModal` helpers. `ModalForm` and
   `ModelForm` follow the same shape. `ModalButton` drops its own
   `pf-c-modal-box` padding fix (the dialog handles it).
 * `Table` implements `TransclusionChildElement`, dispatches refresh
   via `AKRefreshEvent`, and exposes `display-box="contents"` so
   tables embedded in dialogs participate in layout checks.
   `TablePage` / `TableSearch` widen types and surface `search-form`
   / `search-input` parts for dialog-scoped styling.
 * `ak-about-modal`, `ObjectPermissionModal`,
   `RACLaunchEndpointModal`, the command palette, and the admin/user
   interface roots all move off `#elements/modals` and onto
   `#elements/dialogs`.
 * `AdminSettingsForm` / `AdminSettingsPage` render their header /
   actions through the new `ak-c-form__header` + `form-actions`
   slots introduced in the prior Form CSS commit, and swap the
   outermost `<section>` for `<main>` for better landmark semantics.
 * `elements/utils/render-roots.ts` and
   `elements/utils/unsafe.ts` gain dialog-aware helpers (notably a
   directive-based replacement for the old `unsafe` builder).
 * `base/globals.css` disables overscroll while any dialog is open
   via `html[data-dialog-count]`; `package.json` adds the
   `#elements/dialogs` barrel alias.

Delete the old `elements/modals/` directory (`ak-modal.ts`,
`shared.ts`, `styles.css`, `utils.ts`) and `styles/authentik/base/modal.css`
now that nothing imports them.

* web/wizards: refactor wizards to dialog-based flow

Rebuild the shared Wizard primitives on top of the new <dialog> contract:
split CreateWizard/utils out of Wizard, rename admin *Wizard.ts entry
points to ak-*-wizard.ts (Policy, Provider, Source, Stage,
PropertyMapping, ServiceConnection), and port the Application wizard
steps to the new WizardStep base. Adds the user wizard and recovery
invoker plus the refreshed Wizard component styles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* web/admin: migrate forms and list pages to dialog-based modals

Port every admin form, list page, and RBAC surface to the new
TransclusionChildElement / asModalInvoker contract introduced with the
native <dialog> migration. Replace the old ModalButton-driven helpers
with the new modalInvoker/renderModal flow, add the shared
IconCopyButton/IconTokenCopyButton/IconEnrollmentTokenCopyButton
components (with .ak-c-button--icon__progress styling), and refresh
messages, notifications, flow inspector, and user portal consumers to
match. Includes small common/element utility updates picked up along
the way.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* web/test: update browser e2e tests for dialog-based flow

Adjust application, group, session, and user browser tests to the new
wizard and modal selectors introduced by the <dialog> migration and
relax a handful of timeouts that were tight against the old
ModalButton animation sequence.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix visibility detection.

* Fix layout, behavior.

* Fix type.

* Flesh out test revisions.

* Fix type.

* Format.

* Use plural path.

* Fix strict selector in Safari.

* Remove unused.

* Spellcheck.

* Partial type fix.

* Fix translation.

---------

Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Fletcher Heisler
2026-04-11 00:00:49 -07:00
committed by GitHub
parent 1858125d3d
commit 03e67aea34
279 changed files with 8163 additions and 5554 deletions

View File

@@ -115,7 +115,7 @@ export class DeleteBulkForm<T> extends ModalButton {
@property({ type: String, attribute: "object-label" })
public objectLabel: string | null = null;
@property({ type: String, attribute: "action-label" })
@property({ type: String, attribute: "submit-label" })
public submitLabel: string | null = null;
@property({ type: String, attribute: "action-subtext" })