@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Slotted contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,11 @@
-# Temporary Holding Version
+# @slotted/styles
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Per-family stylesheets and component token declarations of Slotted.
+
+This package is a `0.x` beta. Its public API changes between beta releases without deprecation.
+
+`@slotted/react` bundles these stylesheets into `@slotted/react/styles.css`, and `@slotted/angular` bundles them into its components. An application that uses either binding does not install this package.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,279 @@
 {
   "name": "@slotted/styles",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-beta.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andrelopes-code/slotted.git",
+    "directory": "packages/styles"
+  },
+  "type": "module",
+  "files": [
+    "src",
+    "!src/**/*.test.mjs",
+    "!src/**/*.harness.html"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./accordion/accordion.css": "./src/accordion/accordion.css",
+    "./accordion/tokens.json": "./src/accordion/accordion.tokens.json",
+    "./action-bar/action-bar.css": "./src/action-bar/action-bar.css",
+    "./action-bar/tokens.json": "./src/action-bar/action-bar.tokens.json",
+    "./action-sheet/action-sheet.css": "./src/action-sheet/action-sheet.css",
+    "./action-sheet/tokens.json": "./src/action-sheet/action-sheet.tokens.json",
+    "./alert/alert.css": "./src/alert/alert.css",
+    "./alert/tokens.json": "./src/alert/alert.tokens.json",
+    "./app-shell/app-shell.css": "./src/app-shell/app-shell.css",
+    "./app-shell/tokens.json": "./src/app-shell/app-shell.tokens.json",
+    "./aspect-ratio/aspect-ratio.css": "./src/aspect-ratio/aspect-ratio.css",
+    "./aspect-ratio/tokens.json": "./src/aspect-ratio/aspect-ratio.tokens.json",
+    "./attachment/attachment.css": "./src/attachment/attachment.css",
+    "./attachment/tokens.json": "./src/attachment/attachment.tokens.json",
+    "./message/message.css": "./src/message/message.css",
+    "./message/tokens.json": "./src/message/message.tokens.json",
+    "./message-scroller/message-scroller.css": "./src/message-scroller/message-scroller.css",
+    "./message-scroller/tokens.json": "./src/message-scroller/message-scroller.tokens.json",
+    "./avatar-group/avatar-group.css": "./src/avatar-group/avatar-group.css",
+    "./avatar-group/tokens.json": "./src/avatar-group/avatar-group.tokens.json",
+    "./avatar/avatar.css": "./src/avatar/avatar.css",
+    "./avatar/tokens.json": "./src/avatar/avatar.tokens.json",
+    "./badge/badge.css": "./src/badge/badge.css",
+    "./badge/tokens.json": "./src/badge/badge.tokens.json",
+    "./breadcrumb/breadcrumb.css": "./src/breadcrumb/breadcrumb.css",
+    "./breadcrumb/tokens.json": "./src/breadcrumb/breadcrumb.tokens.json",
+    "./button-group/button-group.css": "./src/button-group/button-group.css",
+    "./button-group/tokens.json": "./src/button-group/button-group.tokens.json",
+    "./button/button.css": "./src/button/button.css",
+    "./button/tokens.json": "./src/button/button.tokens.json",
+    "./calendar/calendar.css": "./src/calendar/calendar.css",
+    "./calendar/tokens.json": "./src/calendar/calendar.tokens.json",
+    "./card/card.css": "./src/card/card.css",
+    "./card/tokens.json": "./src/card/card.tokens.json",
+    "./chart/chart.css": "./src/chart/chart.css",
+    "./chart/tokens.json": "./src/chart/chart.tokens.json",
+    "./checkbox-group/checkbox-group.css": "./src/checkbox-group/checkbox-group.css",
+    "./checkbox-group/tokens.json": "./src/checkbox-group/checkbox-group.tokens.json",
+    "./cascader/cascader.css": "./src/cascader/cascader.css",
+    "./cascader/tokens.json": "./src/cascader/cascader.tokens.json",
+    "./carousel/carousel.css": "./src/carousel/carousel.css",
+    "./carousel/tokens.json": "./src/carousel/carousel.tokens.json",
+    "./checkbox/checkbox.css": "./src/checkbox/checkbox.css",
+    "./checkbox/tokens.json": "./src/checkbox/checkbox.tokens.json",
+    "./code-block/code-block.css": "./src/code-block/code-block.css",
+    "./code-block/tokens.json": "./src/code-block/code-block.tokens.json",
+    "./collapsible/collapsible.css": "./src/collapsible/collapsible.css",
+    "./collapsible/tokens.json": "./src/collapsible/collapsible.tokens.json",
+    "./color-picker/color-picker.css": "./src/color-picker/color-picker.css",
+    "./color-picker/tokens.json": "./src/color-picker/color-picker.tokens.json",
+    "./combobox/combobox.css": "./src/combobox/combobox.css",
+    "./combobox/tokens.json": "./src/combobox/combobox.tokens.json",
+    "./column-manager/column-manager.css": "./src/column-manager/column-manager.css",
+    "./column-manager/tokens.json": "./src/column-manager/column-manager.tokens.json",
+    "./command-palette/command-palette.css": "./src/command-palette/command-palette.css",
+    "./command-palette/tokens.json": "./src/command-palette/command-palette.tokens.json",
+    "./container/container.css": "./src/container/container.css",
+    "./container/tokens.json": "./src/container/container.tokens.json",
+    "./context-menu/context-menu.css": "./src/context-menu/context-menu.css",
+    "./context-menu/tokens.json": "./src/context-menu/context-menu.tokens.json",
+    "./currency-field/currency-field.css": "./src/currency-field/currency-field.css",
+    "./currency-field/tokens.json": "./src/currency-field/currency-field.tokens.json",
+    "./data-grid/data-grid.css": "./src/data-grid/data-grid.css",
+    "./data-grid/tokens.json": "./src/data-grid/data-grid.tokens.json",
+    "./data-list/data-list.css": "./src/data-list/data-list.css",
+    "./data-list/tokens.json": "./src/data-list/data-list.tokens.json",
+    "./date-field/date-field.css": "./src/date-field/date-field.css",
+    "./date-field/tokens.json": "./src/date-field/date-field.tokens.json",
+    "./date-picker/date-picker.css": "./src/date-picker/date-picker.css",
+    "./date-picker/tokens.json": "./src/date-picker/date-picker.tokens.json",
+    "./date-range-picker/date-range-picker.css": "./src/date-range-picker/date-range-picker.css",
+    "./date-range-picker/tokens.json": "./src/date-range-picker/date-range-picker.tokens.json",
+    "./datetime-field/datetime-field.css": "./src/datetime-field/datetime-field.css",
+    "./datetime-field/tokens.json": "./src/datetime-field/datetime-field.tokens.json",
+    "./datetime-picker/datetime-picker.css": "./src/datetime-picker/datetime-picker.css",
+    "./datetime-picker/tokens.json": "./src/datetime-picker/datetime-picker.tokens.json",
+    "./datetime-range-picker/datetime-range-picker.css": "./src/datetime-range-picker/datetime-range-picker.css",
+    "./datetime-range-picker/tokens.json": "./src/datetime-range-picker/datetime-range-picker.tokens.json",
+    "./description-list/description-list.css": "./src/description-list/description-list.css",
+    "./description-list/tokens.json": "./src/description-list/description-list.tokens.json",
+    "./detail-panel/detail-panel.css": "./src/detail-panel/detail-panel.css",
+    "./detail-panel/tokens.json": "./src/detail-panel/detail-panel.tokens.json",
+    "./dialog/dialog.css": "./src/dialog/dialog.css",
+    "./dialog/tokens.json": "./src/dialog/dialog.tokens.json",
+    "./divider/divider.css": "./src/divider/divider.css",
+    "./divider/tokens.json": "./src/divider/divider.tokens.json",
+    "./drawer/drawer.css": "./src/drawer/drawer.css",
+    "./drawer/tokens.json": "./src/drawer/drawer.tokens.json",
+    "./entity-picker/entity-picker.css": "./src/entity-picker/entity-picker.css",
+    "./entity-picker/tokens.json": "./src/entity-picker/entity-picker.tokens.json",
+    "./event-calendar/event-calendar.css": "./src/event-calendar/event-calendar.css",
+    "./event-calendar/tokens.json": "./src/event-calendar/event-calendar.tokens.json",
+    "./field-group/field-group.css": "./src/field-group/field-group.css",
+    "./field-group/tokens.json": "./src/field-group/field-group.tokens.json",
+    "./field/field.css": "./src/field/field.css",
+    "./field/tokens.json": "./src/field/field.tokens.json",
+    "./filter-bar/filter-bar.css": "./src/filter-bar/filter-bar.css",
+    "./filter-bar/tokens.json": "./src/filter-bar/filter-bar.tokens.json",
+    "./form/form.css": "./src/form/form.css",
+    "./form/tokens.json": "./src/form/form.tokens.json",
+    "./fullscreen/fullscreen.css": "./src/fullscreen/fullscreen.css",
+    "./fullscreen/tokens.json": "./src/fullscreen/fullscreen.tokens.json",
+    "./grid/grid.css": "./src/grid/grid.css",
+    "./grid/tokens.json": "./src/grid/grid.tokens.json",
+    "./highlight/highlight.css": "./src/highlight/highlight.css",
+    "./highlight/tokens.json": "./src/highlight/highlight.tokens.json",
+    "./hover-card/hover-card.css": "./src/hover-card/hover-card.css",
+    "./hover-card/tokens.json": "./src/hover-card/hover-card.tokens.json",
+    "./icon/icon.css": "./src/icon/icon.css",
+    "./icon/tokens.json": "./src/icon/icon.tokens.json",
+    "./image/image.css": "./src/image/image.css",
+    "./image/tokens.json": "./src/image/image.tokens.json",
+    "./import-export-center/import-export-center.css": "./src/import-export-center/import-export-center.css",
+    "./import-export-center/tokens.json": "./src/import-export-center/import-export-center.tokens.json",
+    "./inline-message/inline-message.css": "./src/inline-message/inline-message.css",
+    "./inline-message/tokens.json": "./src/inline-message/inline-message.tokens.json",
+    "./inline/inline.css": "./src/inline/inline.css",
+    "./inline/tokens.json": "./src/inline/inline.tokens.json",
+    "./kbd/kbd.css": "./src/kbd/kbd.css",
+    "./kbd/tokens.json": "./src/kbd/kbd.tokens.json",
+    "./link/link.css": "./src/link/link.css",
+    "./link/tokens.json": "./src/link/link.tokens.json",
+    "./list-item/list-item.css": "./src/list-item/list-item.css",
+    "./list-item/tokens.json": "./src/list-item/list-item.tokens.json",
+    "./list/list.css": "./src/list/list.css",
+    "./list/tokens.json": "./src/list/list.tokens.json",
+    "./listbox/listbox.css": "./src/listbox/listbox.css",
+    "./listbox/tokens.json": "./src/listbox/listbox.tokens.json",
+    "./loading-overlay/loading-overlay.css": "./src/loading-overlay/loading-overlay.css",
+    "./loading-overlay/tokens.json": "./src/loading-overlay/loading-overlay.tokens.json",
+    "./markdown/markdown.css": "./src/markdown/markdown.css",
+    "./markdown/tokens.json": "./src/markdown/markdown.tokens.json",
+    "./menu/menu.css": "./src/menu/menu.css",
+    "./menu/tokens.json": "./src/menu/menu.tokens.json",
+    "./menubar/menubar.css": "./src/menubar/menubar.css",
+    "./menubar/tokens.json": "./src/menubar/menubar.tokens.json",
+    "./multi-select/multi-select.css": "./src/multi-select/multi-select.css",
+    "./multi-select/tokens.json": "./src/multi-select/multi-select.tokens.json",
+    "./navigation-menu/navigation-menu.css": "./src/navigation-menu/navigation-menu.css",
+    "./navigation-menu/tokens.json": "./src/navigation-menu/navigation-menu.tokens.json",
+    "./number-field/number-field.css": "./src/number-field/number-field.css",
+    "./number-field/tokens.json": "./src/number-field/number-field.tokens.json",
+    "./notification-center/notification-center.css": "./src/notification-center/notification-center.css",
+    "./notification-center/tokens.json": "./src/notification-center/notification-center.tokens.json",
+    "./otp-input/otp-input.css": "./src/otp-input/otp-input.css",
+    "./otp-input/tokens.json": "./src/otp-input/otp-input.tokens.json",
+    "./page/page.css": "./src/page/page.css",
+    "./page/tokens.json": "./src/page/page.tokens.json",
+    "./page-header/page-header.css": "./src/page-header/page-header.css",
+    "./page-header/tokens.json": "./src/page-header/page-header.tokens.json",
+    "./pagination/pagination.css": "./src/pagination/pagination.css",
+    "./pagination/tokens.json": "./src/pagination/pagination.tokens.json",
+    "./popover/popover.css": "./src/popover/popover.css",
+    "./popover/tokens.json": "./src/popover/popover.tokens.json",
+    "./progress-indicator/progress-indicator.css": "./src/progress-indicator/progress-indicator.css",
+    "./progress-indicator/tokens.json": "./src/progress-indicator/progress-indicator.tokens.json",
+    "./prompt-composer/prompt-composer.css": "./src/prompt-composer/prompt-composer.css",
+    "./prompt-composer/tokens.json": "./src/prompt-composer/prompt-composer.tokens.json",
+    "./prose/prose.css": "./src/prose/prose.css",
+    "./prose/tokens.json": "./src/prose/prose.tokens.json",
+    "./radio-group/radio-group.css": "./src/radio-group/radio-group.css",
+    "./radio-group/tokens.json": "./src/radio-group/radio-group.tokens.json",
+    "./rating/rating.css": "./src/rating/rating.css",
+    "./rating/tokens.json": "./src/rating/rating.tokens.json",
+    "./result-state/result-state.css": "./src/result-state/result-state.css",
+    "./result-state/tokens.json": "./src/result-state/result-state.tokens.json",
+    "./saved-views/saved-views.css": "./src/saved-views/saved-views.css",
+    "./saved-views/tokens.json": "./src/saved-views/saved-views.tokens.json",
+    "./scroll-area/scroll-area.css": "./src/scroll-area/scroll-area.css",
+    "./scroll-area/tokens.json": "./src/scroll-area/scroll-area.tokens.json",
+    "./section/section.css": "./src/section/section.css",
+    "./section/tokens.json": "./src/section/section.tokens.json",
+    "./segmented-control/segmented-control.css": "./src/segmented-control/segmented-control.css",
+    "./segmented-control/tokens.json": "./src/segmented-control/segmented-control.tokens.json",
+    "./select/select.css": "./src/select/select.css",
+    "./select/tokens.json": "./src/select/select.tokens.json",
+    "./side-navigation/side-navigation.css": "./src/side-navigation/side-navigation.css",
+    "./side-navigation/tokens.json": "./src/side-navigation/side-navigation.tokens.json",
+    "./skeleton/skeleton.css": "./src/skeleton/skeleton.css",
+    "./skeleton/tokens.json": "./src/skeleton/skeleton.tokens.json",
+    "./slider/slider.css": "./src/slider/slider.css",
+    "./slider/tokens.json": "./src/slider/slider.tokens.json",
+    "./sparkline/sparkline.css": "./src/sparkline/sparkline.css",
+    "./sparkline/tokens.json": "./src/sparkline/sparkline.tokens.json",
+    "./spinner/spinner.css": "./src/spinner/spinner.css",
+    "./spinner/tokens.json": "./src/spinner/spinner.tokens.json",
+    "./splitter/splitter.css": "./src/splitter/splitter.css",
+    "./splitter/tokens.json": "./src/splitter/splitter.tokens.json",
+    "./split-button/split-button.css": "./src/split-button/split-button.css",
+    "./split-button/tokens.json": "./src/split-button/split-button.tokens.json",
+    "./stack/stack.css": "./src/stack/stack.css",
+    "./stack/tokens.json": "./src/stack/stack.tokens.json",
+    "./stat-card/stat-card.css": "./src/stat-card/stat-card.css",
+    "./stat-card/tokens.json": "./src/stat-card/stat-card.tokens.json",
+    "./status-indicator/status-indicator.css": "./src/status-indicator/status-indicator.css",
+    "./status-indicator/tokens.json": "./src/status-indicator/status-indicator.tokens.json",
+    "./stepper/stepper.css": "./src/stepper/stepper.css",
+    "./stepper/tokens.json": "./src/stepper/stepper.tokens.json",
+    "./switch/switch.css": "./src/switch/switch.css",
+    "./switch/tokens.json": "./src/switch/switch.tokens.json",
+    "./table/table.css": "./src/table/table.css",
+    "./table/tokens.json": "./src/table/table.tokens.json",
+    "./table-of-contents/table-of-contents.css": "./src/table-of-contents/table-of-contents.css",
+    "./table-of-contents/tokens.json": "./src/table-of-contents/table-of-contents.tokens.json",
+    "./tabs/tabs.css": "./src/tabs/tabs.css",
+    "./tabs/tokens.json": "./src/tabs/tabs.tokens.json",
+    "./tag/tag.css": "./src/tag/tag.css",
+    "./tag/tokens.json": "./src/tag/tag.tokens.json",
+    "./tags-input/tags-input.css": "./src/tags-input/tags-input.css",
+    "./tags-input/tokens.json": "./src/tags-input/tags-input.tokens.json",
+    "./text-field/text-field.css": "./src/text-field/text-field.css",
+    "./text-field/tokens.json": "./src/text-field/text-field.tokens.json",
+    "./textarea/textarea.css": "./src/textarea/textarea.css",
+    "./textarea/tokens.json": "./src/textarea/textarea.tokens.json",
+    "./time-field/time-field.css": "./src/time-field/time-field.css",
+    "./time-field/tokens.json": "./src/time-field/time-field.tokens.json",
+    "./time-picker/time-picker.css": "./src/time-picker/time-picker.css",
+    "./time-picker/tokens.json": "./src/time-picker/time-picker.tokens.json",
+    "./time-range-picker/time-range-picker.css": "./src/time-range-picker/time-range-picker.css",
+    "./time-range-picker/tokens.json": "./src/time-range-picker/time-range-picker.tokens.json",
+    "./timeline/timeline.css": "./src/timeline/timeline.css",
+    "./timeline/tokens.json": "./src/timeline/timeline.tokens.json",
+    "./toast/toast.css": "./src/toast/toast.css",
+    "./toast/tokens.json": "./src/toast/toast.tokens.json",
+    "./toggle-group/toggle-group.css": "./src/toggle-group/toggle-group.css",
+    "./toggle-group/tokens.json": "./src/toggle-group/toggle-group.tokens.json",
+    "./toggle/toggle.css": "./src/toggle/toggle.css",
+    "./toggle/tokens.json": "./src/toggle/toggle.tokens.json",
+    "./toolbar/tokens.json": "./src/toolbar/toolbar.tokens.json",
+    "./transfer/transfer.css": "./src/transfer/transfer.css",
+    "./transfer/tokens.json": "./src/transfer/transfer.tokens.json",
+    "./dashboard-grid/dashboard-grid.css": "./src/dashboard-grid/dashboard-grid.css",
+    "./dashboard-grid/tokens.json": "./src/dashboard-grid/dashboard-grid.tokens.json",
+    "./tour/tour.css": "./src/tour/tour.css",
+    "./tour/tokens.json": "./src/tour/tour.tokens.json",
+    "./toolbar/toolbar.css": "./src/toolbar/toolbar.css",
+    "./tooltip/tokens.json": "./src/tooltip/tooltip.tokens.json",
+    "./tooltip/tooltip.css": "./src/tooltip/tooltip.css",
+    "./top-navigation/tokens.json": "./src/top-navigation/top-navigation.tokens.json",
+    "./top-navigation/top-navigation.css": "./src/top-navigation/top-navigation.css",
+    "./tree/tokens.json": "./src/tree/tree.tokens.json",
+    "./tree/tree.css": "./src/tree/tree.css",
+    "./typography/tokens.json": "./src/typography/typography.tokens.json",
+    "./typography/typography.css": "./src/typography/typography.css",
+    "./upload/tokens.json": "./src/upload/upload.tokens.json",
+    "./upload/upload.css": "./src/upload/upload.css",
+    "./visually-hidden/tokens.json": "./src/visually-hidden/visually-hidden.tokens.json",
+    "./visually-hidden/visually-hidden.css": "./src/visually-hidden/visually-hidden.css",
+    "./wizard/tokens.json": "./src/wizard/wizard.tokens.json",
+    "./wizard/wizard.css": "./src/wizard/wizard.css"
+  },
+  "devDependencies": {
+    "jsdom": "30.0.1"
+  },
+  "scripts": {
+    "test": "node --test \"src/**/*.test.mjs\"",
+    "typecheck": "find src -name '*.test.mjs' -print0 | xargs -0 -n1 node --check",
+    "verify": "pnpm test && pnpm typecheck"
+  }
 }

package/src/accordion/accordion.css

@@ -0,0 +1,96 @@
+@layer slotted.components {
+  /**
+   * A set of disclosures that share a value.
+   *
+   * Nothing here selects into `collapsible`. A rule reaching
+   * `[data-ui='collapsible']` from this stylesheet would make one family's DOM
+   * part of another's contract, so moving an item inside a wrapper would change
+   * its appearance with no test to notice — the rule `checkbox-group` set for
+   * every group family in the library. The group arranges its items and draws
+   * the chrome that belongs to the set; the appearance of one item is handed to
+   * it through the binding, as a value, and the item draws itself.
+   *
+   * The set is a single column. A horizontally stacked set of sections of which
+   * one is open is a tab list, and `tabs` owns it.
+   */
+  [data-ui='accordion'] {
+    --_rule-size: var(--slotted-border-width-thin, 1px);
+    /**
+     * The distance between two cards under `separated`. Every other variant
+     * stacks its items against each other, because a hairline between two rows
+     * is the thing that says they are one list.
+     */
+    --_gap: var(--slotted-space-4, 0.5rem);
+
+    display: grid;
+    grid-auto-flow: row;
+    grid-auto-rows: min-content;
+    min-inline-size: 0;
+  }
+
+  [data-ui='accordion'][data-size='sm'] {
+    --_gap: var(--slotted-space-3, 0.375rem);
+  }
+
+  [data-ui='accordion'][data-size='lg'] {
+    --_gap: var(--slotted-space-5, 0.75rem);
+  }
+
+  /**
+   * ── The rule under the last item ───────────────────────────────────────
+   *
+   * Each item draws a rule above itself, which is what makes the stack read as
+   * one list and what keeps an item from having to know whether it is the last
+   * one. The bottom of the stack is the set's own edge, so the set draws it.
+   */
+  [data-ui='accordion'][data-variant='ruled'] {
+    border-block-end: var(--_rule-size) solid
+      var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));
+  }
+
+  /**
+   * One frame around the whole set. The items are still ruled, so the frame's
+   * own edge is the rule above the first item and below the last, and `clip` is
+   * what makes the corner an item's hover fill meets the corner the frame drew.
+   */
+  [data-ui='accordion'][data-variant='framed'] {
+    background-color: var(--slotted-accordion-surface, var(--slotted-surface-raised, Canvas));
+    border: var(--_rule-size) solid
+      var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));
+    border-radius: var(--slotted-accordion-radius, var(--slotted-radius-md, 6px));
+    overflow: clip;
+  }
+
+  /**
+   * The frame's own edge is the line above the first item, so that item must
+   * not draw a second one a pixel below it. The `high-contrast` capture is what
+   * found it: two hairlines a pixel apart read as one thick line, and the top
+   * of the set came out heavier than its sides.
+   *
+   * The child is reached structurally rather than by its identity. Which
+   * element is first is the group's own layout fact; what that element is
+   * inside remains the item family's, which is why nothing here names
+   * `[data-ui='collapsible']` or one of its parts.
+   */
+  [data-ui='accordion'][data-variant='framed'] > :first-child {
+    border-block-start-color: transparent;
+  }
+
+  /**
+   * A card each. The items are handed `framed`, so every one draws its own
+   * border and radius, and the only thing left for the set is the air between
+   * them.
+   */
+  [data-ui='accordion'][data-variant='separated'] {
+    row-gap: var(--slotted-accordion-gap, var(--_gap));
+  }
+
+  /**
+   * A set taken out of action. The attribute reaches every trigger as the
+   * native one, which is what actually stops the press; this is the colour that
+   * says so for the words the set draws itself, if a consumer puts any in it.
+   */
+  [data-ui='accordion'][data-disabled] {
+    color: var(--slotted-disabled-foreground, GrayText);
+  }
+}

package/src/accordion/accordion.tokens.json

@@ -0,0 +1,14 @@
+[
+  "--slotted-accordion-gap",
+  "--slotted-accordion-radius",
+  "--slotted-accordion-rule-color",
+  "--slotted-accordion-surface",
+  "--slotted-border-subtle",
+  "--slotted-border-width-thin",
+  "--slotted-disabled-foreground",
+  "--slotted-radius-md",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-surface-raised"
+]