web: User Wizard, Modal Revisions Merge Branch#21336
Merged
GirlBossRush merged 22 commits intomainfrom Apr 11, 2026
Merged
Conversation
✅ Deploy Preview for authentik-integrations ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for authentik-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for authentik-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21336 +/- ##
=======================================
Coverage 92.26% 92.26%
=======================================
Files 1032 1032
Lines 59658 59658
Branches 2537 2537
=======================================
+ Hits 55045 55046 +1
+ Misses 4548 4547 -1
Partials 65 65
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
BeryJu
changed the title
Contributor
|
authentik PR Installation instructions Instructions for docker-composeAdd the following block to your AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-9b32bde07d16ea2827e507219966792bf36980ce
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)sAfterwards, run the upgrade commands from the latest release notes. Instructions for KubernetesAdd the following block to your authentik:
outposts:
container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
image:
repository: ghcr.io/goauthentik/dev-server
tag: gh-9b32bde07d16ea2827e507219966792bf36980ceAfterwards, run the upgrade commands from the latest release notes. |
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.
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.
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.
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.
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.
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.
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>
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>
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>
GirlBossRush
changed the title
GirlBossRush
added
a11y
GirlBossRush
force-pushed
the
admin/new-user-creation-wizard
branch
from
dbfa637 to
847c5da
Compare
GirlBossRush
approved these changes
Apr 11, 2026
kensternberg-authentik
added a commit
that referenced
this pull request
Apr 13, 2026
* main: core: bump ruff from 0.15.9 to 0.15.10 (#21559) core: bump types-jwcrypto from 1.5.0.20260408 to 1.5.7.20260409 (#21561) core: bump lxml from 6.0.3 to 6.0.4 (#21560) ci: bump peter-evans/create-pull-request from 8.1.0 to 8.1.1 (#21566) ci: bump docker/build-push-action from 7.0.0 to 7.1.0 (#21563) ci: bump actions/upload-artifact from 7.0.0 to 7.0.1 (#21565) core: bump library/golang from `da39430` to `c0074c7` in /lifecycle/container (#21567) ci: bump taiki-e/install-action from 2.75.1 to 2.75.5 in /.github/actions/setup (#21569) web: bump mermaid from 11.13.0 to 11.14.0 in /web (#21527) core, web: update translations (#21552) web: bump basic-ftp from 5.2.1 to 5.2.2 in /web (#21543) web: User Wizard, Modal Revisions Merge Branch (#21336) web/elements: default @listen target to host element and add split-button Dropdown (#21512)
3 tasks
kensternberg-authentik
added a commit
that referenced
this pull request
Apr 13, 2026
* main: web: build system had some legacy stuff that I found confusing while working on the CSS ordering (#20698) core: bump ruff from 0.15.9 to 0.15.10 (#21559) core: bump types-jwcrypto from 1.5.0.20260408 to 1.5.7.20260409 (#21561) core: bump lxml from 6.0.3 to 6.0.4 (#21560) ci: bump peter-evans/create-pull-request from 8.1.0 to 8.1.1 (#21566) ci: bump docker/build-push-action from 7.0.0 to 7.1.0 (#21563) ci: bump actions/upload-artifact from 7.0.0 to 7.0.1 (#21565) core: bump library/golang from `da39430` to `c0074c7` in /lifecycle/container (#21567) ci: bump taiki-e/install-action from 2.75.1 to 2.75.5 in /.github/actions/setup (#21569) web: bump mermaid from 11.13.0 to 11.14.0 in /web (#21527) core, web: update translations (#21552) web: bump basic-ftp from 5.2.1 to 5.2.2 in /web (#21543) web: User Wizard, Modal Revisions Merge Branch (#21336) web/elements: default @listen target to host element and add split-button Dropdown (#21512) ci: parallel tests (#21515) website/docs: add another sentence to First Steps about restricting access to apps (#21517) web/elements: add scrollbar helpers and apply to Interface (#21511) web/elements: add viewport helpers and extend intersection observer (#21508)
davepgreene
pushed a commit
to davepgreene/authentik
that referenced
this pull request
Apr 13, 2026
* 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>
davepgreene
pushed a commit
to davepgreene/authentik
that referenced
this pull request
Apr 13, 2026
* 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 was referenced Apr 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
We have two ways to create service accounts - through "New User" and "Create Service Account" - with different options. This combines new user creation into a single wizard with three user options (internal, external, service account).
Docs will need to be updated: