actual-css 0.9.0 → 0.9.2

package/package.json

@@ -1,159 +1,160 @@
-{
-  "name": "actual-css",
-  "version": "0.9.0",
-  "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
-  "type": "module",
-  "packageManager": "bun@1.4.2",
-  "license": "MIT",
-  "author": "Thomas <thomas@lekoala.be>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lekoala/actual-css.git"
-  },
-  "homepage": "https://github.com/lekoala/actual-css",
-  "bugs": {
-    "url": "https://github.com/lekoala/actual-css/issues"
-  },
-  "keywords": [
-    "css",
-    "css-framework",
-    "component-library",
-    "semantic",
-    "accessibility",
-    "dark-mode",
-    "themable",
-    "no-build",
-    "progressive-enhancement"
-  ],
-  "exports": {
-    ".": "./dist/actual.min.css",
-    "./full": "./dist/actual.full.min.css",
-    "./css": "./src/css/actual.css",
-    "./css/components": "./src/css/components/index.css",
-    "./css/components/*": "./src/css/components/*.css",
-    "./css/effects": "./src/css/effects/index.css",
-    "./css/effects/*": "./src/css/effects/*.css",
-    "./css/forms": "./src/css/forms/base.css",
-    "./css/forms/all": "./src/css/forms/index.css",
-    "./css/forms/*": "./src/css/forms/*.css",
-    "./css/full": "./src/css/actual.full.css",
-    "./css/layer": "./src/css/actual.layer.css",
-    "./css/layout": "./src/css/layout/index.css",
-    "./css/layout/*": "./src/css/layout/*.css",
-    "./css/themes": null,
-    "./css/themes/*": null,
-    "./css/typography": "./src/css/typography/index.css",
-    "./css/typography/*": "./src/css/typography/*.css",
-    "./css/utilities": "./src/css/utilities/index.css",
-    "./css/utilities/*": "./src/css/utilities/*.css",
-    "./js": "./src/js/index.js",
-    "./js/full": "./src/js/full.js",
-    "./js/command": "./src/js/command.js",
-    "./js/context-menu": "./src/js/context-menu.js",
-    "./js/dialog": "./src/js/dialog.js",
-    "./js/dismiss": "./src/js/dismiss.js",
-    "./js/escape": "./src/js/escape.js",
-    "./js/enhance": "./src/js/enhance.js",
-    "./js/enhancement-loader": "./src/js/enhancement-loader.js",
-    "./js/parse-config": "./src/js/parse-config.js",
-    "./js/events": "./src/js/events.js",
-    "./js/filter": "./src/js/filter.js",
-    "./js/flyout": "./src/js/flyout.js",
-    "./js/focus": "./src/js/focus.js",
-    "./js/focus-group": "./src/js/focus-group.js",
-    "./js/input": "./src/js/input.js",
-    "./js/keys": "./src/js/keys.js",
-    "./js/mask": "./src/js/mask.js",
-    "./js/menu": "./src/js/menu.js",
-    "./js/password": "./src/js/password.js",
-    "./js/scrollspy": "./src/js/scrollspy.js",
-    "./js/selectors": "./src/js/selectors.js",
-    "./js/tab": "./src/js/tab.js",
-    "./js/tooltip": "./src/js/tooltip.js",
-    "./js/validation": "./src/js/validation.js",
-    "./js/status": "./src/js/status.js",
-    "./js/surface": "./src/js/surface.js",
-    "./reserved-classes.json": "./reserved-classes.json",
-    "./components.json": "./components.json",
-    "./package.json": "./package.json"
-  },
-  "bin": {
-    "actual-css": "./src/cli/actual-css.js"
-  },
-  "main": "./dist/actual.js",
-  "style": "./dist/actual.min.css",
-  "unpkg": "./dist/actual.min.css",
-  "jsdelivr": "./dist/actual.min.css",
-  "sideEffects": true,
-  "files": [
-    "dist",
-    "src/css/*.css",
-    "src/css/core",
-    "src/css/layout",
-    "src/css/typography",
-    "src/css/forms",
-    "src/css/components",
-    "src/css/effects",
-    "src/css/utilities",
-    "src/cli",
-    "src/js",
-    "src/tooling",
-    "reserved-classes.json",
-    "components.json",
-    "docs",
-    "CHANGELOG.md",
-    "llms.txt",
-    "LICENSE",
-    "README.md"
-  ],
-  "engines": {
-    "bun": ">=1.4.0",
-    "node": ">=18"
-  },
-  "scripts": {
-    "lint": "biome check",
-    "lint:fix": "biome check --write",
-    "build:docs": "bun run build:themes && bun scripts/build-docs.js",
-    "watch:docs": "bun run build:themes && bun scripts/build-docs.js --watch",
-    "check:docs": "bun scripts/check-docs.js",
-    "format:docs": "bun scripts/format-doc-tables.js",
-    "check:doc-classes": "bun scripts/check-doc-classes.js",
-    "check:compat": "bun scripts/check-compat.js",
-    "check:css-api": "bun scripts/check-css-api.js",
-    "check:color-space": "bun scripts/check-color-space.js",
-    "report:theme-contrast": "bun scripts/report-theme-contrast.js",
-    "report:neutral-ramp": "bun scripts/report-neutral-ramp.js",
-    "report:dead-css": "bun scripts/report-dead-css.js",
-    "report:overflow": "bun scripts/report-overflow.js",
-    "check:architecture": "bun scripts/check-css-architecture.js",
-    "build:dist": "bun scripts/build-dist.js",
-    "build:js": "bun scripts/build-js.js",
-    "build:themes": "bun scripts/build-themes.js",
-    "build:size": "bun scripts/build-size.js",
-    "check:enhance": "bun run scripts/check-enhance.js",
-    "generate:reserved": "bun scripts/generate-reserved-classes.js",
-    "check:reserved": "bun scripts/check-reserved.js",
-    "generate:catalog": "bun scripts/build-catalog.js",
-    "check:catalog": "bun scripts/check-catalog.js",
-    "check:links": "bun scripts/check-doc-links.js",
-    "check:templates": "bun scripts/check-templates.js",
-    "check:markup": "bun scripts/check-markup.js",
-    "shot:forced": "bun scripts/forced-colors-shot.js",
-    "shot:multi": "bun scripts/multi-shot.js",
-    "shot:page": "bun scripts/page-shot.js",
-    "probe": "bun scripts/probe.js",
-    "serve": "bun scripts/serve.js",
-    "check:sync": "bun scripts/check-sync.js",
-    "test": "bun test",
-    "test:changed": "bun test --changed=master",
-    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:size && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run generate:catalog && bun run check:catalog && bun run check:sync && bun run check:links && bun run check:templates && bun run check:markup && bun run test",
-    "prepublishOnly": "bun run build:all"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.5.12",
-    "happy-dom": "^20.14.0"
-  },
-  "dependencies": {
-    "@lekoala/floating": "^0.2.0"
-  }
-}
+{
+  "name": "actual-css",
+  "version": "0.9.2",
+  "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
+  "type": "module",
+  "packageManager": "bun@1.4.2",
+  "license": "MIT",
+  "author": "Thomas <thomas@lekoala.be>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lekoala/actual-css.git"
+  },
+  "homepage": "https://github.com/lekoala/actual-css",
+  "bugs": {
+    "url": "https://github.com/lekoala/actual-css/issues"
+  },
+  "keywords": [
+    "css",
+    "css-framework",
+    "component-library",
+    "semantic",
+    "accessibility",
+    "dark-mode",
+    "themable",
+    "no-build",
+    "progressive-enhancement"
+  ],
+  "exports": {
+    ".": "./dist/actual.min.css",
+    "./full": "./dist/actual.full.min.css",
+    "./css": "./src/css/actual.css",
+    "./css/components": "./src/css/components/index.css",
+    "./css/components/*": "./src/css/components/*.css",
+    "./css/effects": "./src/css/effects/index.css",
+    "./css/effects/*": "./src/css/effects/*.css",
+    "./css/forms": "./src/css/forms/base.css",
+    "./css/forms/all": "./src/css/forms/index.css",
+    "./css/forms/*": "./src/css/forms/*.css",
+    "./css/full": "./src/css/actual.full.css",
+    "./css/layer": "./src/css/actual.layer.css",
+    "./css/layout": "./src/css/layout/index.css",
+    "./css/layout/*": "./src/css/layout/*.css",
+    "./css/themes": null,
+    "./css/themes/*": null,
+    "./css/typography": "./src/css/typography/index.css",
+    "./css/typography/*": "./src/css/typography/*.css",
+    "./css/utilities": "./src/css/utilities/index.css",
+    "./css/utilities/*": "./src/css/utilities/*.css",
+    "./js": "./src/js/index.js",
+    "./js/full": "./src/js/full.js",
+    "./js/command": "./src/js/command.js",
+    "./js/context-menu": "./src/js/context-menu.js",
+    "./js/dialog": "./src/js/dialog.js",
+    "./js/dismiss": "./src/js/dismiss.js",
+    "./js/escape": "./src/js/escape.js",
+    "./js/enhance": "./src/js/enhance.js",
+    "./js/enhancement-loader": "./src/js/enhancement-loader.js",
+    "./js/parse-config": "./src/js/parse-config.js",
+    "./js/events": "./src/js/events.js",
+    "./js/filter": "./src/js/filter.js",
+    "./js/flyout": "./src/js/flyout.js",
+    "./js/focus": "./src/js/focus.js",
+    "./js/focus-group": "./src/js/focus-group.js",
+    "./js/input": "./src/js/input.js",
+    "./js/keys": "./src/js/keys.js",
+    "./js/mask": "./src/js/mask.js",
+    "./js/menu": "./src/js/menu.js",
+    "./js/password": "./src/js/password.js",
+    "./js/scrollspy": "./src/js/scrollspy.js",
+    "./js/selectors": "./src/js/selectors.js",
+    "./js/tab": "./src/js/tab.js",
+    "./js/tooltip": "./src/js/tooltip.js",
+    "./js/validation": "./src/js/validation.js",
+    "./js/status": "./src/js/status.js",
+    "./js/surface": "./src/js/surface.js",
+    "./reserved-classes.json": "./reserved-classes.json",
+    "./components.json": "./components.json",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "actual-css": "./src/cli/actual-css.js"
+  },
+  "main": "./dist/actual.js",
+  "style": "./dist/actual.min.css",
+  "unpkg": "./dist/actual.min.css",
+  "jsdelivr": "./dist/actual.min.css",
+  "sideEffects": true,
+  "files": [
+    "dist",
+    "src/css/*.css",
+    "src/css/core",
+    "src/css/layout",
+    "src/css/typography",
+    "src/css/forms",
+    "src/css/components",
+    "src/css/effects",
+    "src/css/utilities",
+    "src/cli",
+    "src/js",
+    "src/tooling",
+    "reserved-classes.json",
+    "components.json",
+    "docs",
+    "CHANGELOG.md",
+    "llms.txt",
+    "LICENSE",
+    "README.md"
+  ],
+  "engines": {
+    "bun": ">=1.4.0",
+    "node": ">=18"
+  },
+  "scripts": {
+    "lint": "biome check",
+    "lint:fix": "biome check --write",
+    "build:docs": "bun run build:themes && bun scripts/build-docs.js",
+    "watch:docs": "bun run build:themes && bun scripts/build-docs.js --watch",
+    "check:docs": "bun scripts/check-docs.js",
+    "format:docs": "bun scripts/format-doc-tables.js",
+    "check:doc-classes": "bun scripts/check-doc-classes.js",
+    "check:compat": "bun scripts/check-compat.js",
+    "check:css-api": "bun scripts/check-css-api.js",
+    "check:color-space": "bun scripts/check-color-space.js",
+    "report:theme-contrast": "bun scripts/report-theme-contrast.js",
+    "report:neutral-ramp": "bun scripts/report-neutral-ramp.js",
+    "report:dead-css": "bun scripts/report-dead-css.js",
+    "report:overflow": "bun scripts/report-overflow.js",
+    "check:architecture": "bun scripts/check-css-architecture.js",
+    "build:dist": "bun scripts/build-dist.js",
+    "build:js": "bun scripts/build-js.js",
+    "build:themes": "bun scripts/build-themes.js",
+    "build:size": "bun scripts/build-size.js",
+    "check:enhance": "bun run scripts/check-enhance.js",
+    "generate:reserved": "bun scripts/generate-reserved-classes.js",
+    "check:reserved": "bun scripts/check-reserved.js",
+    "generate:catalog": "bun scripts/build-catalog.js",
+    "check:catalog": "bun scripts/check-catalog.js",
+    "check:links": "bun scripts/check-doc-links.js",
+    "check:templates": "bun scripts/check-templates.js",
+    "check:markup": "bun scripts/check-markup.js",
+    "shot:forced": "bun scripts/forced-colors-shot.js",
+    "shot:multi": "bun scripts/multi-shot.js",
+    "shot:page": "bun scripts/page-shot.js",
+    "probe": "bun scripts/probe.js",
+    "serve": "bun scripts/serve.js",
+    "check:sync": "bun scripts/check-sync.js",
+    "release:notes": "bun scripts/release-notes.js",
+    "test": "bun test",
+    "test:changed": "bun test --changed=master",
+    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:size && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run generate:catalog && bun run check:catalog && bun run check:sync && bun run check:links && bun run check:templates && bun run check:markup && bun run test",
+    "prepublishOnly": "bun run build:all"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.12",
+    "happy-dom": "^20.14.0"
+  },
+  "dependencies": {
+    "@lekoala/floating": "^0.2.0"
+  }
+}

package/src/css/components/accordion.css

@@ -1,6 +1,8 @@
 /*
  * Accordion disclosures built on native details and summary.
  *
+ * Docs: docs/pages/components/accordion.md
+ *
  * Keeps the clickable summary affordance aligned and usable without JavaScript
  * or demo styles. Decorative palettes and custom markers belong outside the
  * base component.

package/src/css/components/actions.css

@@ -1,6 +1,8 @@
 /*
  * Actions — a horizontal action-button cluster.
  *
+ * Docs: docs/pages/patterns/actions.md
+ *
  * Composes with .btn (or any inline element) and feeds layout via the shared
  * --gap token.
  *

package/src/css/components/alert.css

@@ -1,6 +1,8 @@
 /*
  * Alerts for inline feedback and status messages.
  *
+ * Docs: docs/pages/components/alert.md
+ *
  * Keeps alert defaults local while consuming the shared --ui-* variant
  * plumbing for emphasis.
  *

package/src/css/components/app-nav.css

@@ -3,6 +3,8 @@
  * and item states; app-layout owns whether that surface is a bottom bar or
  * labelled side navigation.
  *
+ * Docs: docs/pages/components/app-navigation.md
+ *
  * Public hooks:
  * --app-nav-size
  * --app-nav-gap

package/src/css/components/avatar.css

@@ -1,6 +1,8 @@
 /*
  * Avatars for initials, images, links, and buttons.
  *
+ * Docs: docs/pages/components/avatar.md
+ *
  * The visual box stays the same across semantic elements. Grouping and status
  * dots (an empty .badge child) compose around the avatar without changing its
  * meaning.

package/src/css/components/badge.css

@@ -1,6 +1,8 @@
 /*
  * Badges for compact labels, counts, and state hints.
  *
+ * Docs: docs/pages/components/badge.md
+ *
  * Soft by default. .solid for counters and notification badges. The dot
  * (.badge:empty) stays solid regardless — a soft dot is pointless.
  * Shared .outline variant stays available.

package/src/css/components/breadcrumb.css

@@ -1,6 +1,8 @@
 /*
  * Breadcrumb — current-location trail from the site root.
  *
+ * Docs: docs/pages/components/breadcrumb.md
+ *
  * Inline list separated by "/". Mark the current page with `aria-current="page"`
  * either on the item or on the current link.
  */

package/src/css/components/busy.css

@@ -1,6 +1,8 @@
 /*
  * Busy overlay — non-button loading state.
  *
+ * Docs: docs/pages/components/spinner.md
+ *
  * A non-button element with aria-busy="true" and a direct last-child .spinner
  * shows that spinner as a centered overlay over a faded surface. Buttons keep
  * their spinners inline (e.g. .btn[aria-busy] > .spinner stays inline-flex).

package/src/css/components/button.css

@@ -1,6 +1,8 @@
 /*
  * Buttons for actions and button-like links.
  *
+ * Docs: docs/pages/components/button.md
+ *
  * .btn is primarily for actionable elements: <button>, <a href>,
  * input[type="button"|"submit"|"reset"].
  *

package/src/css/components/card.css

@@ -1,6 +1,8 @@
 /*
  * Cards provide a neutral raised surface for grouped content.
  *
+ * Docs: docs/pages/components/card.md
+ *
  * Surface, border, radius, padding, density, and elevation stay local here.
  * Direct header/footer children are structural slots; a direct footer is
  * anchored to the card's bottom edge when extra block space is available (so

package/src/css/components/chat.css

@@ -1,6 +1,8 @@
 /*
  * Message rows composed from an optional avatar, metadata, and bubble.
  *
+ * Docs: docs/pages/components/chat.md
+ *
  * Public hooks:
  * --chat-gap
  * --chat-max-size

package/src/css/components/data-list.css

@@ -1,6 +1,8 @@
 /*
  * Data list — term/value pairs for the properties of a single object.
  *
+ * Docs: docs/pages/components/data-list.md
+ *
  * Expects alternating <dt>/<dd> children: one term, one value per property.
  * A plain <dl> handles richer relationships (several terms or descriptions)
  * and stays untouched by this component.

package/src/css/components/drawer.css

@@ -1,6 +1,12 @@
 /*
  * Drawer — modal side-sheet built on the native dialog element.
  *
+ * Docs: docs/pages/components/drawer.md
+ *
+ * Open with a native command button:
+ * command="show-modal" commandfor="<drawer-id>".
+ * For stacked navigation, compose with .nav-list from navbar.css.
+ *
  * Top-layer rendering, ::backdrop, Escape, and modal focus come from the
  * native dialog. CSS owns progressive enter/exit motion where browsers support
  * discrete display/overlay transitions. The drawer is a layout shell only —
@@ -13,10 +19,11 @@
  *
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
+ * --drawer-focus-bleed
  * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
  *   changes in one place; entry state redefines it longer)
  */
-dialog.drawer {
+:where(dialog).drawer {
   --drawer-size: 20rem;
   --drawer-pad: var(--space-40);
   --drawer-closed-translate: -100%;
@@ -59,7 +66,7 @@ dialog.drawer {
     transform var(--drawer-motion-duration) var(--ease-exit);
 }
 
-dialog.drawer[open] {
+:where(dialog).drawer[open] {
   --drawer-motion-duration: var(--duration-slow);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -74,7 +81,7 @@ dialog.drawer[open] {
 /* A form is the drawer's content wrapper when actions need method="dialog".
    Span the drawer tracks so the form can keep the header at the top, let the
    body absorb the available height, and keep the footer at the bottom. */
-dialog.drawer > form {
+:where(dialog).drawer > form {
   display: grid;
   grid-row: 1 / -1;
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -83,7 +90,7 @@ dialog.drawer > form {
 }
 
 /* The shared backdrop token keeps drawer and modal scrims consistent. */
-dialog.drawer::backdrop {
+:where(dialog).drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel's character curves
@@ -91,7 +98,7 @@ dialog.drawer::backdrop {
   transition: opacity var(--drawer-motion-duration) ease;
 }
 
-dialog.drawer[data-side="end"] {
+:where(dialog).drawer[data-side="end"] {
   --drawer-closed-translate: 100%;
 
   margin-inline-start: auto;
@@ -100,17 +107,17 @@ dialog.drawer[data-side="end"] {
   border-inline-start: var(--border-width) solid var(--border);
 }
 
-dialog.drawer[open]::backdrop {
+:where(dialog).drawer[open]::backdrop {
   opacity: 1;
 }
 
 @starting-style {
-  dialog.drawer[open] {
+  :where(dialog).drawer[open] {
     opacity: 0;
     transform: translateX(var(--drawer-closed-translate));
   }
 
-  dialog.drawer[open]::backdrop {
+  :where(dialog).drawer[open]::backdrop {
     opacity: 0;
   }
 }
@@ -120,15 +127,21 @@ dialog.drawer[open]::backdrop {
    modal, which sizes to its content and opts in with .scrollable. Header and
    footer keep their own tracks; .drawer-close is named because a generic
    exclusion list is easier to trust than its `position: absolute`. */
-dialog.drawer > :not(:is(header, footer, form, .drawer-close)),
-dialog.drawer > form > :not(:is(header, footer, .drawer-close)) {
+:where(dialog).drawer > :not(:is(header, footer, form, .drawer-close)),
+:where(dialog).drawer > form > :not(:is(header, footer, .drawer-close)) {
+  --drawer-focus-bleed: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+
   min-block-size: 0;
+  /* Keep focus paint inside the clip without moving the body off the fixed
+     header and footer edges. */
+  margin-inline: calc(var(--drawer-focus-bleed) * -1);
+  padding-inline: var(--drawer-focus-bleed);
   overflow: auto;
   overscroll-behavior: contain;
 }
 
 @supports (transition-behavior: allow-discrete) {
-  dialog.drawer {
+  :where(dialog).drawer {
     transition:
       opacity var(--drawer-motion-duration) var(--ease-exit),
       transform var(--drawer-motion-duration) var(--ease-exit),
@@ -136,7 +149,7 @@ dialog.drawer > form > :not(:is(header, footer, .drawer-close)) {
       display var(--drawer-motion-duration) allow-discrete;
   }
 
-  dialog.drawer[open] {
+  :where(dialog).drawer[open] {
     transition:
       opacity var(--drawer-motion-duration) var(--ease-enter),
       transform var(--drawer-motion-duration) var(--ease-enter),
@@ -144,7 +157,7 @@ dialog.drawer > form > :not(:is(header, footer, .drawer-close)) {
       display var(--drawer-motion-duration) allow-discrete;
   }
 
-  dialog.drawer::backdrop {
+  :where(dialog).drawer::backdrop {
     transition:
       opacity var(--drawer-motion-duration) ease,
       overlay var(--drawer-motion-duration) allow-discrete,
@@ -158,40 +171,40 @@ dialog.drawer > form > :not(:is(header, footer, .drawer-close)) {
    directionality and handles nested direction changes; the explicit ltr rules
    neutralize an outer RTL fallback selector. Each specificity group keeps the
    fallback before the :dir() rules. */
-[dir="rtl"] dialog.drawer {
+[dir="rtl"] :where(dialog).drawer {
   --drawer-closed-translate: 100%;
 }
 
-dialog.drawer:dir(ltr) {
+:where(dialog).drawer:dir(ltr) {
   --drawer-closed-translate: -100%;
 }
 
-dialog.drawer:dir(rtl) {
+:where(dialog).drawer:dir(rtl) {
   --drawer-closed-translate: 100%;
 }
 
-[dir="rtl"] dialog.drawer[data-side="end"] {
+[dir="rtl"] :where(dialog).drawer[data-side="end"] {
   --drawer-closed-translate: -100%;
 }
 
-dialog.drawer[data-side="end"]:dir(ltr) {
+:where(dialog).drawer[data-side="end"]:dir(ltr) {
   --drawer-closed-translate: 100%;
 }
 
-dialog.drawer[data-side="end"]:dir(rtl) {
+:where(dialog).drawer[data-side="end"]:dir(rtl) {
   --drawer-closed-translate: -100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  dialog.drawer.is-static {
+  :where(dialog).drawer.is-static {
     animation: actual-dialog-static var(--duration-slow) ease;
   }
 }
 
 /* The header reserves inline room so the title never runs under the close
    control. */
-dialog.drawer > header,
-dialog.drawer > form > header {
+:where(dialog).drawer > header,
+:where(dialog).drawer > form > header {
   padding-inline-end: calc(var(--control-size) + var(--space-30));
 }
 

package/src/css/components/fab.css

@@ -3,6 +3,8 @@
  * Button owns the trigger's size, shape, and intent; FAB owns placement and
  * the speed dial's structural open/close markers (--icon-plus / --icon-close).
  *
+ * Docs: docs/pages/components/fab.md
+ *
  * Public hooks:
  * --fab-offset
  * --fab-gap

package/src/css/components/flyout.css

@@ -1,6 +1,8 @@
 /*
  * Flyout — floating panel for actions and links.
  *
+ * Docs: docs/pages/enhancements/flyout.md
+ *
  * JavaScript promotes the panel to the top layer and chooses viewport or
  * document coordinates from its anchor. It also owns state (.is-open), focus,
  * and keyboard behavior. CSS owns the surfaced panel appearance, item styles,

package/src/css/components/indicator.css

@@ -1,6 +1,8 @@
 /*
  * Indicator — generic corner positioning for overlaid component content.
  *
+ * Docs: docs/pages/components/indicator.md
+ *
  * The container only establishes the containing block. The item owns no
  * paint, size, or ring so badges and other components keep their own visual
  * contract.