[6.x] Feature/slideouts

[brianjhanson]

Implementing slideouts in this brave new world.

I had originally wanted to have Slideouts live as a web component in the @craftcms/cp package, but the nesting created issues with the shadow DOM. The nested slideout would be trapped by the shadow DOM, which meant we had to eject from the shadow DOM entirely and gave me a lot of "what's the point" vibes.

In the end, Vue has already solved this problem with <Teleport/>, so it made more sense to implement slideouts at that level.

The other big addition here is a separate Storybook for the Vue components used within the CP. I know, I know what you're thinking, "Brian, you've gone storybook crazy! What do you think this is, story time at the library?!". Two storybooks is a bit much, but because we have both Web Components and Vue components, it's kind of necessary at the moment. Getting both of those to play nice in a single storybook isn't worth it today.

I'm hoping one storybook can become the canonical one (likely the Vue one) so we don't have to deal with maintaining two, but I need to ruminate a bit more on what that would look like.

CleanShot.2026-03-11.at.13.56.38.mp4

[Copilot]

Pull request overview

This PR continues the CP modernization by moving more UI concerns into Vue/Inertia (including nested slideouts) while expanding the design token system and adding a separate Storybook for Vue-based CP components.

Changes:

• Add Inertia rendering support to CpScreenResponse and migrate Sections create/edit screens to an Inertia page with new props builders.
• Introduce new Vue composables/components (UI layer/slideout management, editable tables, input generator) and update multiple CP pages to use new token names and component paths.
• Expand @craftcms/cp token/variant system, add Tailwind v4 theme integration, and add/extend Storybook stories and build scripts.

Reviewed changes

Copilot reviewed 165 out of 169 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
yii2-adapter/tests-laravel/Legacy/web/twig/variables/CpTest.php	Adds legacy-format expectations for template suggestions.
tests/Feature/Http/Controllers/Settings/SectionsControllerTest.php	Updates sections tests for Inertia/readOnly behavior and JSON delete response.
src/Twig/NodeVisitors/SinglePreloader.php	Casts node keys to string for Twig node assignment.
src/Http/Responses/CpScreenResponse.php	Adds Inertia page rendering support and nullable crumb URLs.
src/Http/RespondsWithFlash.php	Ensures success/error keys are set in session flashes.
src/Http/Controllers/Settings/SectionsController.php	Migrates Sections create/edit to Inertia and introduces sectionProps() builder.
src/Cp/SelectOptions.php	Adds template suggestion discovery for autocomplete inputs.
resources/js/types/keys.ts	Updates service type import paths to new @craftcms/cp exports.
resources/js/types/index.ts	Adds new TS types for sections/site settings and table spacing.
resources/js/types/globals.d.ts	Extends TanStack table column meta for header/cell options.
resources/js/pages/Updater.vue	Updates styling to new semantic tokens.
resources/js/pages/SettingsSitesIndex.vue	Improves table column ID and spacing usage; token updates.
resources/js/pages/SettingsSitesEdit.vue	Token updates and border class updates.
resources/js/pages/SettingsSectionsIndexPage.vue	Uses new Pane path and replaces <a> with CpLink button rendering.
resources/js/pages/SettingsIndexPage.vue	Token updates for settings grid styling.
resources/js/pages/SettingsGeneralPage.vue	Token updates and swaps numeric size for maxlength.
resources/js/pages/Install.vue	Uses new Pane path and token updates.
resources/js/layout/IndexLayout.vue	Token/class updates for pane borders.
resources/js/layout/AppLayout.vue	Minor import ordering and token/class updates for breadcrumb border.
resources/js/composables/useUiLayerManager.ts	Adds global UI layer stack for slideout/modal/dialog positioning and width.
resources/js/composables/useReorderableRows.ts	Adds composable wrapper around table drag/drop registration.
resources/js/composables/useInputGenerator.ts	Adds Vue replacement for legacy input generators.
resources/js/composables/useFetch.ts	Updates apiClient import path.
resources/js/composables/useAssetIndexer.ts	Updates AssetIndexer import path.
resources/js/components/utilities/Updates/Updates.vue	Token updates for update utility styling.
resources/js/components/utilities/Updates/Update.vue	Token updates for update utility styling.
resources/js/components/utilities/Updates/Release.vue	Token updates for release card styling.
resources/js/components/utilities/SystemMessages/SystemMessages.vue	Uses new Pane path.
resources/js/components/utilities/QueueManager/RetryJobButton.vue	Updates type imports to new @craftcms/cp export paths.
resources/js/components/utilities/QueueManager/ReleaseJobButton.vue	Updates type imports to new @craftcms/cp export paths.
resources/js/components/utilities/QueueManager/QueueManagerToolbar.vue	Updates type imports to new @craftcms/cp export paths.
resources/js/components/utilities/QueueManager/QueueManagerShow.vue	Updates type imports and token usage.
resources/js/components/utilities/QueueManager/QueueManagerIndex.vue	Uses new Pane path; updates type imports.
resources/js/components/utilities/QueueManager/QueueManager.vue	Updates type imports.
resources/js/components/utilities/ProjectConfig/ProjectConfigDiff.vue	Uses new Pane path and token updates.
resources/js/components/utilities/ProjectConfig/ProjectConfig.vue	Uses new Pane path and token updates.
resources/js/components/utilities/DeprecationErrors/StackTrace.vue	Uses new Pane path.
resources/js/components/utilities/AssetIndexes/SessionProgress.vue	Token updates for progress styling.
resources/js/components/utilities/AssetIndexes/ReviewSessionModal.vue	Updates escapeHtml/AssetIndexer imports.
resources/js/components/utilities/AssetIndexes/IndexingSessions.vue	Updates AssetIndexer imports and token usage.
resources/js/components/utilities/AssetIndexes/AssetIndexes.vue	Updates AssetIndexer imports.
resources/js/components/sites/SiteFields.vue	Migrates handle/baseUrl auto-generation to useInputGenerator.
resources/js/components/sections/SiteSettingsTable.vue	Adds editable site settings table for section editing (Inertia props driven).
resources/js/components/sections/PreviewTargetsTable.vue	Adds editable preview targets table component.
resources/js/components/install/InstallingScreen.vue	Uses new Pane path and token updates.
resources/js/components/form/Select.vue	Switches to Vue wrapper CraftSelect.
resources/js/components/form/EntryTypeSelect.vue	Adds entry-type chooser UI (action menu + create link).
resources/js/components/form/CheckboxGroup.vue	Updates CraftCheckbox type import path.
resources/js/components/Slideout/Slideout.mdx	Adds basic Slideout docs page for Vue storybook.
resources/js/components/ReorderButton.vue	Passes through attributes for better integration.
resources/js/components/Pane/Pane.vue	Adds slideout appearance and updates pane token variables/border handling.
resources/js/components/ModalForm.vue	Uses new Pane path.
resources/js/components/Modal.vue	Uses separated modal border tokens.
resources/js/components/InputCombobox.vue	Adds class passthrough and token updates; removes debug logging.
resources/js/components/Entry/EntryTypeChip.vue	Adds chip UI with slideout-powered settings panel.
resources/js/components/DropIndicator.vue	Updates accent token usage.
resources/js/components/CpSidebar.vue	Token updates for sidebar surface.
resources/js/components/CpQueueIndicator.ts	Updates service/type import paths.
resources/js/components/CpLink.vue	Updates button token variable names and variant mapping.
resources/js/components/CalloutReadOnly.vue	Token/class update for border.
resources/js/components/Callout.vue	Updates callout token variable names.
resources/js/components/AdminTable/DeleteButton.vue	Adds reusable delete button component.
resources/js/components/ActionMenu.vue	Adds Vue wrapper for action menu grouping safe/danger actions.
resources/js/bootstrap/cp.ts	Updates service imports to dist paths.
resources/js/Craft.d.ts	Updates CpServices import path.
resources/css/cp.css	Imports @craftcms/cp/tailwind.css and removes local @theme snippet.
resources/build/manifest.json	Updates built manifest entries (new pages, composables, removed css chunk).
resources/build/legacy.js	Updates build output hashes/import bindings.
resources/build/assets/SettingsSitesIndex.css	Built CSS output update.
resources/build/assets/SettingsSectionsEditPage.css	Adds built CSS output for new edit page.
resources/build/assets/InputCombobox.css	Built CSS output update.
resources/build/assets/AppLayout.css	Built CSS output update.
resources/build/UtilitiesShowPage.js	Built JS output update.
resources/build/Updater.js	Built JS output update.
resources/build/SettingsSectionsIndexPage.js	Built JS output update.
resources/build/SettingsIndexPage.js	Built JS output update.
resources/build/SectionsController.js	Adds built routes/actions helper output.
resources/build/IndexLayout.js	Built JS output update.
resources/build/CpQueueIndicator.js	Built JS output update.
resources/build/CpGlobalSidebar.js	Built JS output update.
resources/build/CalloutReadOnly.vue_vue_type_script_setup_true_lang.js	Built JS output update.
packages/craftcms-cp/tailwind.css	Adds Tailwind v4 token mapping via @theme inline.
packages/craftcms-cp/src/utilities/string.ts	Adds toUriFormat() helper.
packages/craftcms-cp/src/utilities/string.test.ts	Adds tests for toUriFormat().
packages/craftcms-cp/src/types/index.ts	Reorders Appearance enum values.
packages/craftcms-cp/src/styles/variants.styles.ts	Renames variant token mapping from bg/on/emphasis to fill/border tiers.
packages/craftcms-cp/src/styles/shared/base.css	Updates base tokens and refactors cp-table styling.
packages/craftcms-cp/src/styles/form.styles.ts	Updates input token variables and group prefix/suffix layout.
packages/craftcms-cp/src/styles/cp.css	Imports generated colorable.css.
packages/craftcms-cp/src/stories/tokens/variants.stories.ts	Adds comprehensive variant/appearance matrix stories.
packages/craftcms-cp/src/stories/tokens/text.stories.ts	Adds token showcase for text tokens.
packages/craftcms-cp/src/stories/tokens/surface.stories.ts	Adds token showcase for surfaces and shadows.
packages/craftcms-cp/src/stories/tokens/spacing.stories.ts	Adds token showcase for spacing scale.
packages/craftcms-cp/src/stories/tokens/helpers.ts	Shared helpers for token story rendering.
packages/craftcms-cp/src/stories/tokens/colors.stories.ts	Adds semantic color group token showcase.
packages/craftcms-cp/src/stories/tokens/colorable.stories.ts	Adds colorable showcase for [data-color] elements.
packages/craftcms-cp/src/stories/tokens/Docs.mdx	Adds docs explaining variants/appearances system.
packages/craftcms-cp/src/constants/colors.ts	Adds shared Color constants for colorable system.
packages/craftcms-cp/src/components/tooltip/tooltip.ts	Updates tooltip surface/border/text tokens.
packages/craftcms-cp/src/components/tabs/tabs.styles.ts	Updates border token usage.
packages/craftcms-cp/src/components/tab/tab.styles.ts	Updates active border token usage.
packages/craftcms-cp/src/components/switch/switch.ts	Adds size prop and forwards it to switch-button.
packages/craftcms-cp/src/components/switch/switch.styles.ts	Adjusts switch host layout styles.
packages/craftcms-cp/src/components/switch/switch.stories.ts	Adds switch stories (sizes, states).
packages/craftcms-cp/src/components/switch-button/switch-button.ts	Updates size tokens and fill/border token usage.
packages/craftcms-cp/src/components/status/status.styles.ts	Renames status bg tokens to fill tokens.
packages/craftcms-cp/src/components/slideout/slideout.stories.ts	Adds slideout web component stories including nested slideouts.
packages/craftcms-cp/src/components/shortcut/shortcut.ts	Updates shortcut token usage.
packages/craftcms-cp/src/components/progress-bar/progress-bar.ts	Updates docs for new progress bar token defaults.
packages/craftcms-cp/src/components/progress-bar/progress-bar.styles.ts	Updates default track color token usage.
packages/craftcms-cp/src/components/popover/popover.ts	Updates surface/border token usage.
packages/craftcms-cp/src/components/option/option.styles.ts	Updates hover/active/checked token usage.
packages/craftcms-cp/src/components/nav-item/nav-item.ts	Updates subnav toggle button appearance and template formatting.
packages/craftcms-cp/src/components/input/input.ts	Changes CraftInput sizing/max-length API surface.
packages/craftcms-cp/src/components/input/input.styles.ts	Updates styles tied to maxlength and token names.
packages/craftcms-cp/src/components/input/input.stories.ts	Updates input stories for new API and adds prefix/suffix examples.
packages/craftcms-cp/src/components/input-file/selected-file-list.ts	Updates surface/border token usage.
packages/craftcms-cp/src/components/indicator/indicator.ts	Updates indicator token usage.
packages/craftcms-cp/src/components/dropdown/dropdown.ts	Updates surface/border token usage.
packages/craftcms-cp/src/components/drawer/drawer.ts	Updates surface token usage.
packages/craftcms-cp/src/components/copy-attribute/copy-attribute.styles.ts	Renames bg/fg tokens to fill/text.
packages/craftcms-cp/src/components/combobox/combobox.styles.ts	Updates surface/border token usage.
packages/craftcms-cp/src/components/chip/chip.ts	Adds icon prop and exposes parts for styling.
packages/craftcms-cp/src/components/chip/chip.styles.ts	Updates chip layout and integrates colorable token usage.
packages/craftcms-cp/src/components/chip/chip.stories.ts	Adds chip color stories using new Color constants.
packages/craftcms-cp/src/components/checkbox/checkbox.ts	Updates checkbox token usage.
packages/craftcms-cp/src/components/card/card.styles.ts	Updates card token usage and bar styling tokens.
packages/craftcms-cp/src/components/callout/callout.styles.ts	Updates callout variant/appearance token usage.
packages/craftcms-cp/src/components/button/button.ts	Expands button appearances and adds inherit variant.
packages/craftcms-cp/src/components/button/button.stories.ts	Expands button appearance demos and adds chip/inherit examples.
packages/craftcms-cp/src/components/breadcrumb-item/breadcrumb-item.ts	Updates muted text token usage.
packages/craftcms-cp/src/components/badge-indicator/badge-indicator.styles.ts	Updates badge tokens and white text token usage.
packages/craftcms-cp/src/components/action-menu/action-menu.ts	Updates action menu surface/border tokens and sizing constraints.
packages/craftcms-cp/src/components/action-item/action-item.ts	Adds checkbox-style items and class-based rendering variants.
packages/craftcms-cp/src/components/action-item/action-item.styles.ts	Refactors action-item layout and token usage.
packages/craftcms-cp/src/components/action-item/action-item.stories.ts	Adds action-item story decorators, checkbox examples, and colorable demos.
packages/craftcms-cp/scripts/generate-colors.js	Adds generator for colorable.css.
packages/craftcms-cp/scripts/build.js	Hooks Vue wrapper generation into build flow.
packages/craftcms-cp/package.json	Updates exports and adds wrapper/color generation scripts.
packages/craftcms-cp/.storybook/preview.css	Adds shared stage/swatch utility styles for stories.
package.json	Adds root-level Vue Storybook commands and Storybook deps.
AGENTS.md	Documents Twig→Inertia migration and CP component usage guidance.
.storybook/preview.ts	Adds Vue Storybook preview setup (styles + web components).
.storybook/main.ts	Adds Vue Storybook config, addons, and Vite aliases.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.