actual-css 0.6.0 → 0.8.0

package/src/css/components/drawer.css

@@ -62,8 +62,18 @@ dialog.drawer[open] {
     transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
-/* Backdrop color sourced from components/surface.css so it matches .modal
-   and .surface-backdrop across the dialog family. */
+/* 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 {
+  display: grid;
+  grid-row: 1 / -1;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: var(--space-40);
+  min-block-size: 100%;
+}
+
+/* The shared backdrop token keeps drawer and modal scrims consistent. */
 dialog.drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
@@ -128,33 +138,33 @@ dialog.drawer nav {
 }
 
 /* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
-   path as the Minimal-tier fallback. */
+   path as the Degraded-tier fallback. The :dir() rules are dropped on their
+   own there, so they need no wrapper. :dir() follows inherited HTML
+   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 {
   --drawer-closed-translate: 100%;
 }
 
-[dir="rtl"] dialog.drawer[data-side="end"] {
+dialog.drawer:dir(ltr) {
   --drawer-closed-translate: -100%;
 }
 
-/* :dir() follows inherited HTML directionality and handles nested direction
-   changes. Explicit ltr rules neutralize an outer RTL fallback selector. */
-@supports selector(:dir(rtl)) {
-  dialog.drawer:dir(ltr) {
-    --drawer-closed-translate: -100%;
-  }
+dialog.drawer:dir(rtl) {
+  --drawer-closed-translate: 100%;
+}
 
-  dialog.drawer[data-side="end"]:dir(ltr) {
-    --drawer-closed-translate: 100%;
-  }
+[dir="rtl"] dialog.drawer[data-side="end"] {
+  --drawer-closed-translate: -100%;
+}
 
-  dialog.drawer:dir(rtl) {
-    --drawer-closed-translate: 100%;
-  }
+dialog.drawer[data-side="end"]:dir(ltr) {
+  --drawer-closed-translate: 100%;
+}
 
-  dialog.drawer[data-side="end"]:dir(rtl) {
-    --drawer-closed-translate: -100%;
-  }
+dialog.drawer[data-side="end"]:dir(rtl) {
+  --drawer-closed-translate: -100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -163,15 +173,59 @@ dialog.drawer nav {
   }
 }
 
-/* The close button shares the modal's interior placement (modal.css): absolute
-   at the panel's top inline-end, out of the content flow. The header reserves
-   inline room so the title never runs under it. */
+/* The header reserves inline room so the title never runs under the close
+   control. */
 dialog.drawer > header,
 dialog.drawer > form > header {
   padding-inline-end: calc(var(--control-size) + var(--space-30));
 }
-@media print {
-  dialog.drawer[open] {
-    display: none !important;
+
+/* Close control, owned here so a drawer-only build does not depend on
+   modal.css. Mirrors the modal's .dialog-close placement: absolute at the
+   panel's top inline-end, out of the content flow. */
+.drawer-close {
+  --drawer-close-icon-size: 1rem;
+
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  cursor: pointer;
+
+  position: absolute;
+  z-index: 1;
+  inset-block-start: var(--space-20);
+  inset-inline-end: var(--space-20);
+
+  inline-size: var(--control-size);
+  block-size: var(--control-size);
+
+  background: var(--surface-subtle);
+}
+
+.drawer-close::before {
+  content: "";
+  inline-size: var(--drawer-close-icon-size);
+  block-size: var(--drawer-close-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
+@media (hover: hover) {
+  .drawer-close:hover {
+    box-shadow: inset 0 0 0 999px var(--hover-overlay);
+    color: var(--text);
   }
 }
+
+.drawer-close:active {
+  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+}
+
+.drawer-close:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--focus-ring-shadow);
+}

package/src/css/components/fab.css

@@ -126,9 +126,3 @@
   opacity: 1;
   transform: none;
 }
-
-@media print {
-  .fab {
-    display: none;
-  }
-}

package/src/css/components/flyout.css

@@ -1,14 +1,12 @@
 /*
  * Flyout — floating panel for actions and links.
  *
- * JavaScript owns positioning (position: fixed + left/top), state
- * (hidden + .is-open), focus, and keyboard behavior. CSS owns the surfaced
- * panel appearance, item styles, and animation.
+ * 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,
+ * and animation.
  *
- * Runtime markers (managed by surface.js): .is-open marks an open flyout,
- * .is-sheet marks "auto" resolved to bottom-sheet presentation on coarse
- * pointers. Authors opt into mobile behavior with
- * [data-flyout-mobile="sheet|auto|none|anchored"].
+ * Runtime marker (managed by surface.js): .is-open marks an open flyout.
  * --surface-anchor-width is set by surface.js while an open flyout is positioned.
  *
  * Public hooks:
@@ -17,7 +15,7 @@
  *
  * Internal:
  * --menu-item-size (derived from --control-size for menu rows)
- * --available-height (measured by floating.js)
+ * --available-height (measured by the positioner)
  * --surface-anchor-width (measured by surface.js)
  */
 
@@ -44,8 +42,8 @@
   --menu-item-size: var(--control-size);
   z-index: var(--z-menu);
   /* No-JS fallback: below the trigger inside the relative .flyout-trigger.
-     surface.js switches an open flyout to position: fixed with measured
-     coordinates; this only covers a flyout revealed without the runtime. */
+     surface.js replaces this with the anchor's coupled position/coordinate
+     mode; this only covers a flyout revealed without the runtime. */
   position: absolute;
   inset-block-start: calc(100% + var(--space-10));
   inset-inline-start: 0;
@@ -73,73 +71,63 @@
   box-shadow: var(--shadow-popout);
   list-style: none;
   opacity: 1;
-  /* Anchored flyouts fade in and out; scaling around the center would detach
-     the anchored edge from its trigger on wide panels. The sheet presentation
-     below adds its own translate motion. */
+  /* Flyouts fade in and out; scaling around the center would detach the
+     anchored edge from its trigger on wide panels. */
   transition: opacity var(--duration-fast) ease;
 }
 
-.flyout.is-open:not(.is-sheet) {
-  inset: auto;
-}
-
-@starting-style {
-  .flyout.is-open {
-    opacity: 0;
-  }
-}
-
-/* Bottom-sheet presentation. surface.js toggles .is-sheet when the flyout is
-   opened on coarse pointer / narrow viewports. */
-.flyout.is-sheet {
-  --menu-item-size: var(--control-size-lg);
+/* A popover enters the top layer with UA geometry that conflicts with anchored
+   positioning. surface.js sets popover="manual" on every surface it manages,
+   so this is the transport's own geometry rather than an opt-in. Kept scoped to
+   Actual surfaces so bare [popover] elements retain their platform
+   presentation. */
+.flyout[popover] {
   position: fixed;
-  inset-inline: 0;
-  inset-block-start: auto;
-  inset-block-end: 0;
-  inline-size: auto;
-  min-inline-size: 0;
-  max-inline-size: none;
-  max-block-size: min(calc(var(--viewport-block) * 0.75), 32rem);
-  overflow: auto;
-  grid-template-columns: 1fr;
-  padding: max(var(--space-30), env(safe-area-inset-top)) var(--space-30)
-    max(var(--space-30), env(safe-area-inset-bottom));
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-  /* Sheet motion is a directional slide from the viewport edge; it replaces
-     the base fade-only recipe. */
-  transition:
-    opacity var(--duration-fast) ease,
-    translate var(--duration-fast) ease;
+  inset: auto;
+  margin: 0;
 }
 
-.flyout[hidden] {
+/* A presentation class may own its *visible* display type, but must not
+   override the platform's hidden state. The UA closes a popover with
+   display: none, and an author declaration beats the UA origin whatever the
+   specificity — so .flyout's own display: grid would leave a closed popover
+   painted at its static position. The opacity is the exit target: with nothing
+   to animate, the overlay/display allow-discrete transition below would hold a
+   fully opaque panel in the top layer and then snap it away. */
+.flyout[popover]:not(:popover-open) {
   display: none;
   opacity: 0;
 }
 
-.flyout.is-sheet[hidden] {
-  translate: 0 var(--space-30);
+/* Both lifecycles in one rule: .is-open for a surface.js panel, :popover-open
+   for one an author drives natively with popovertarget. */
+.flyout:is(.is-open, :popover-open) {
+  inset: auto;
 }
 
+/* @starting-style is above the floor (Safari 17.5), so where it is missing the
+   entry simply has no animated origin and the panel appears at full opacity. */
 @starting-style {
-  .flyout.is-sheet.is-open {
-    translate: 0 var(--space-30);
+  .flyout:is(.is-open, :popover-open) {
+    opacity: 0;
   }
 }
 
+.flyout[hidden] {
+  display: none;
+  opacity: 0;
+}
+
+/* display keeps the exit transition alive for the [hidden] path; overlay does
+   the same for the native popover path, where hidePopover() would otherwise
+   drop the panel out of the top layer on the first frame and let a parent
+   overflow or a dialog clip the fade. An engine that cannot transition either
+   property ignores it and the exit is instant. */
 @supports (transition-behavior: allow-discrete) {
   .flyout {
     transition:
       opacity var(--duration-fast) ease,
-      display var(--duration-fast) allow-discrete;
-  }
-
-  .flyout.is-sheet {
-    transition:
-      opacity var(--duration-fast) ease,
-      translate var(--duration-fast) ease,
+      overlay var(--duration-fast) allow-discrete,
       display var(--duration-fast) allow-discrete;
   }
 }
@@ -157,7 +145,7 @@
   margin: 0;
   color: var(--text-muted);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .flyout > section > ul {
@@ -175,8 +163,3 @@
 /* Vertical dividers — .menu-separator (menu.css) is the canonical way to
    separate menu items. Flyout panels that are not menus use auto grid gap
    declared on .flyout itself. */
-@media print {
-  .flyout {
-    display: none !important;
-  }
-}

package/src/css/components/index.css

@@ -6,7 +6,6 @@
 
 /* Surfaces */
 @import "./card.css";
-@import "./surface.css";
 @import "./modal.css";
 @import "./drawer.css";
 

package/src/css/components/indicator.css

@@ -38,10 +38,31 @@
   inset-block-end: 0;
 }
 
+/* Safari before 16.4 has no :dir(); the ancestor-attribute path is the
+   Degraded-tier fallback and the :dir() rules are dropped on their own there.
+   :dir() follows inherited directionality, so the explicit ltr rules
+   neutralize an outer RTL fallback for a nested direction change. The rules
+   stay grouped by specificity so the fallback never follows the :dir() rules. */
+[dir="rtl"] .indicator-item {
+  --indicator-translate-x: -50%;
+}
+
+.indicator-item:dir(ltr) {
+  --indicator-translate-x: 50%;
+}
+
 .indicator-item:dir(rtl) {
   --indicator-translate-x: -50%;
 }
 
+[dir="rtl"] .indicator-item.start {
+  --indicator-translate-x: 50%;
+}
+
+.indicator-item.start:dir(ltr) {
+  --indicator-translate-x: -50%;
+}
+
 .indicator-item.start:dir(rtl) {
   --indicator-translate-x: 50%;
 }

package/src/css/components/join.css

@@ -63,6 +63,13 @@
   border-end-start-radius: var(--join-es);
 }
 
+/* A square icon button has an explicit block size, which otherwise prevents
+   align-items: stretch from matching a taller labelled sibling. The button's
+   existing min-block-size keeps the standalone square-size invariant intact. */
+.join > .btn.icon-only {
+  block-size: auto;
+}
+
 .join > :first-child {
   --join-ss: var(--join-radius);
   --join-es: var(--join-radius);

package/src/css/components/key.css

@@ -27,3 +27,13 @@
   vertical-align: 0.08em;
 }
 /* @sync key-recipe */
+
+/* .key has a compact typographic default of its own, so its local size roles
+   step around that default instead of inheriting the generic mapping. */
+.key.sm {
+  font-size: var(--font-size-xs);
+}
+
+.key.lg {
+  font-size: var(--font-size-md);
+}

package/src/css/components/list.css

@@ -18,6 +18,7 @@
   --list-divider: var(--border-width) solid var(--border);
 
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 0;
   margin: 0;
   padding: 0;
@@ -29,10 +30,17 @@
   margin: 0;
 }
 
+/*
+ * Flex, not a three-track grid: the leading and trailing regions are optional,
+ * and a fixed `auto minmax(0, 1fr) auto` template gives an absent region a
+ * track anyway — the content of a row with no leading region lands in the
+ * leading track and the trailing control inherits the flexible one, which is
+ * the opposite of the intent. Flex drops both the track and its gap when a
+ * region is not there, so all four shapes work off one rule.
+ */
 .list > :where(.list-item),
 .list > li > .list-item {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  display: flex;
   /* Regions align to the first line, so leading, title, and trailing controls
      share one horizontal line while supporting text wraps beneath. */
   align-items: start;
@@ -48,6 +56,7 @@
 }
 
 a.list-item {
+  position: relative;
   color: inherit;
   text-decoration: none;
 }
@@ -56,7 +65,31 @@ a.list-item:hover {
   background: var(--surface-subtle);
 }
 
+/* Current row in a navigational list (master/detail). Generic by design: the
+   visual treatment only cares that the row is current, so presence is the
+   contract — the attribute is set on the current row and removed everywhere
+   else, never serialized as aria-current="false". The value (page, location,
+   …) stays free for assistive technology.
+   Calm by design: the row keeps its normal text metrics and color on a subtle
+   surface, and the selected accent lives on an inset inline-start trait only.
+   The trait is a real border, so it survives forced colors without a repaint
+   block. The positioning context lives on every row link, so becoming current
+   never moves an app-positioned decoration to a new containing block. */
+a.list-item[aria-current] {
+  background: var(--surface-subtle);
+}
+
+a.list-item[aria-current]::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--list-item-pad-block);
+  inset-inline-start: 0;
+  border-inline-start: 2px solid var(--state-selected);
+}
+
+/* The content region is the one that flexes, whichever position it holds. */
 .list-item-content {
+  flex: 1 1 0;
   min-inline-size: 0;
 }
 
@@ -64,16 +97,19 @@ a.list-item:hover {
 .list-item-text {
   display: block;
   margin: 0;
+  overflow-wrap: anywhere;
 }
 
 .list-item-text {
   color: var(--text-muted);
   font-size: var(--font-size-sm);
-  overflow-wrap: anywhere;
 }
 
+/* The auto margin keeps the trailing region at the row's end even in a row
+   with no content region to absorb the free space. */
 .list-item-trailing {
-  justify-self: end;
+  flex: none;
+  margin-inline-start: auto;
   min-inline-size: 0;
 }
 

package/src/css/components/menu.css

@@ -44,6 +44,7 @@
   background: transparent;
   color: var(--intent, var(--text));
   font: inherit;
+  font-size: var(--control-font-size);
   text-align: start;
   text-decoration: none;
   white-space: nowrap;
@@ -75,30 +76,36 @@
 /* Checkable menu items are one command with one accessible state. Their
    indicator is generated so authors do not add a second interactive input. */
 .menu-item:is([role="menuitemcheckbox"], [role="menuitemradio"])::before {
-  display: grid;
+  content: "";
+  display: block;
   flex: 0 0 var(--menu-item-icon-size);
   inline-size: var(--menu-item-icon-size);
-  place-items: center;
-}
-
-.menu-item[role="menuitemcheckbox"]::before {
-  content: "";
+  block-size: var(--menu-item-icon-size);
 }
 
 .menu-item[role="menuitemcheckbox"][aria-checked="true"]::before {
-  content: "✓";
+  background: currentColor;
+  -webkit-mask: var(--icon-check) center / contain no-repeat;
+  mask: var(--icon-check) center / contain no-repeat;
 }
 
 .menu-item[role="menuitemcheckbox"][aria-checked="mixed"]::before {
-  content: "−";
+  background:
+    linear-gradient(currentColor 0 0) center / 60% max(var(--border-width), 0.125em) no-repeat;
 }
 
 .menu-item[role="menuitemradio"]::before {
-  content: "○";
+  background: radial-gradient(circle, transparent 0 46%, currentColor 48% 58%, transparent 60%);
 }
 
 .menu-item[role="menuitemradio"][aria-checked="true"]::before {
-  content: "●";
+  background: radial-gradient(
+    circle,
+    currentColor 0 25%,
+    transparent 27% 46%,
+    currentColor 48% 58%,
+    transparent 60%
+  );
 }
 
 .menu-item:focus-visible {
@@ -118,7 +125,7 @@
   padding: var(--space-20);
   color: var(--text-muted);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .menu-separator {