actual-css 0.7.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,101 +71,53 @@
   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;
 }
 
-/* Native popovers enter the top layer with UA geometry that conflicts with
-   anchored positioning. The reset is gated on real Popover support because an
-   attribute selector matches whether or not the engine implements Popover:
-   without it the UA neither hides nor promotes the element, so an ungated
-   reset would strand a permanently visible panel at inset: auto. Popover is
-   not part of Actual's Minimal contract — engines inside the Minimal range
-   may lack it — so the gate is about the capability, not the floor. Kept
-   scoped to Actual surfaces so bare [popover] elements retain their platform
+/* 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. */
-@supports selector(:popover-open) {
-  .flyout[popover] {
-    position: fixed;
-    inset: auto;
-    margin: 0;
-  }
+.flyout[popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
 
-  /* 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. Restoring both properties here also gives
-     the native path the exit target the runtime path already has in
-     .flyout[hidden]: without an opacity 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;
-  }
+/* 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;
 }
 
-/* compat-ok: :popover-open rides in a forgiving :is(), where an engine without
-   Popover discards just that member and .is-open alone keeps driving the open
-   state. This is a property of the forgiving list, not of the pseudo-class: in
-   a plain selector list an unsupported member would invalidate the whole rule.
-   Keep it inside :is()/:where() or gate it. */
-.flyout:is(.is-open, :popover-open):not(.is-sheet) {
+/* 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;
 }
 
-/* compat-ok: forgiving :is() again, and @starting-style is itself unsupported
-   across part of the Minimal range, so the rule simply does not exist there. */
+/* @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(.is-open, :popover-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);
-  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;
-}
-
 .flyout[hidden] {
   display: none;
   opacity: 0;
 }
 
-.flyout.is-sheet[hidden] {
-  translate: 0 var(--space-30);
-}
-
-/* compat-ok: forgiving :is() inside @starting-style, as above. */
-@starting-style {
-  .flyout.is-sheet:is(.is-open, :popover-open) {
-    translate: 0 var(--space-30);
-  }
-}
-
 /* 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
@@ -180,14 +130,6 @@
       overlay var(--duration-fast) allow-discrete,
       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;
-  }
 }
 
 .flyout > li {
@@ -203,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 {
@@ -221,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/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;
@@ -124,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 {

package/src/css/components/modal.css

@@ -12,21 +12,40 @@
  *
  * Internal:
  * --dialog-close-icon-size
+ * --dialog-viewport-block
+ * --dialog-viewport-gap-default
  * --dialog-viewport-gap-2x
  */
 dialog.modal {
-  --modal-size: 32rem;
-  --dialog-viewport-gap: var(--space-40);
-  /* calc() multiplication is not in the supported browser range, so the
+  /* --dialog-viewport-gap stays fallback-only for the same reason as
+     --modal-size below: declaring the public hook here would give it
+     type+class specificity that a single author class cannot outrank. The
+     responsive default lives in an internal token instead, so a media query
+     can still move it without closing the hook.
+
+     calc() multiplication is not in the supported browser range, so the
      doubled gap is spelled out with an additive calc. */
-  --dialog-viewport-gap-2x: calc(var(--dialog-viewport-gap) + var(--dialog-viewport-gap));
+  --dialog-viewport-gap-default: var(--space-40);
+  --dialog-viewport-gap-2x: calc(
+    var(--dialog-viewport-gap, var(--dialog-viewport-gap-default)) +
+    var(--dialog-viewport-gap, var(--dialog-viewport-gap-default))
+  );
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button. */
   position: fixed;
 
-  max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size));
-  max-block-size: calc(var(--viewport-block) - var(--dialog-viewport-gap-2x));
+  /* --modal-size stays fallback-only: declaring it on dialog.modal gives it
+     type+class specificity, which a single author class cannot outrank, so the
+     public hook would silently keep this default. Same reason choice.css never
+     declares --choice-control-offset. */
+  max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size, 32rem));
+
+  /* Stable viewport cap for the panel: dvh tracks the dynamic browser toolbar
+     and makes the dialog reflow on mobile, svh does not. App shells keep the
+     dynamic token; only the modal pins the small viewport. */
+  --dialog-viewport-block: var(--viewport-block);
+  max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
@@ -36,7 +55,7 @@ dialog.modal {
   overflow: visible;
   opacity: 0;
   /*
-   * Keep the open dialog root untransformed. Fixed overlays mounted inside a
+   * Keep the open dialog root untransformed. Fixed overlays authored inside a
    * modal dialog use viewport coordinates; transform/translate/scale on this
    * element would make them position against the dialog instead. The closed
    * state can still carry a small transform for enter/exit motion. The lift
@@ -53,16 +72,23 @@ dialog.modal > form,
 dialog.modal > .stack {
   display: grid;
   gap: var(--space-40);
-  max-block-size: calc(var(--viewport-block) - var(--dialog-viewport-gap-2x));
+  max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
   overflow: auto;
   overscroll-behavior: contain;
   padding: var(--space-40);
 }
 
-/* Keep the dialog off the viewport edges on small screens. */
+@supports (block-size: 100svh) {
+  dialog.modal {
+    --dialog-viewport-block: 100svh;
+  }
+}
+
+/* Keep the dialog off the viewport edges on small screens. Moves the internal
+   default, not the public hook, so an author override still wins here too. */
 @media (max-width: 30rem) {
   dialog.modal {
-    --dialog-viewport-gap: var(--space-30);
+    --dialog-viewport-gap-default: var(--space-30);
   }
 }
 
@@ -72,8 +98,8 @@ dialog.modal.scrollable > .stack {
   overflow: hidden;
 }
 
-dialog.modal.scrollable > form > :not(header, footer),
-dialog.modal.scrollable > .stack > :not(header, footer) {
+dialog.modal.scrollable > form > :not(:is(header, footer)),
+dialog.modal.scrollable > .stack > :not(:is(header, footer)) {
   min-block-size: 0;
   overflow: auto;
   overscroll-behavior: contain;
@@ -128,6 +154,7 @@ dialog.modal.dialog-confirmation > form > footer {
 :where(.dialog-icon) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
 }
@@ -256,14 +283,11 @@ html.has-modal-open.had-scrollbar {
   }
 }
 
-/* Close controls. A close button is an action attached to a surface, so it
-   never participates in the content flow. The modal and the drawer share the
-   same simple placement — absolute at the panel's top inline-end, inside the
-   surface — so both close buttons look and behave identically. The glyph comes
-   from --icon-close, masked to currentColor, so no icon font or text glyph is
-   required in the markup. */
-.dialog-close,
-.drawer-close {
+/* Close control. A close button is an action attached to a surface, so it
+   never participates in the content flow — absolute at the panel's top
+   inline-end, inside the surface. The glyph comes from --icon-close, masked to
+   currentColor, so no icon font or text glyph is required in the markup. */
+.dialog-close {
   --dialog-close-icon-size: 1rem;
 
   display: inline-grid;
@@ -287,8 +311,7 @@ html.has-modal-open.had-scrollbar {
   background: var(--surface-subtle);
 }
 
-.dialog-close::before,
-.drawer-close::before {
+.dialog-close::before {
   content: "";
   inline-size: var(--dialog-close-icon-size);
   block-size: var(--dialog-close-icon-size);
@@ -298,25 +321,17 @@ html.has-modal-open.had-scrollbar {
 }
 
 @media (hover: hover) {
-  .dialog-close:hover,
-  .drawer-close:hover {
+  .dialog-close:hover {
     box-shadow: inset 0 0 0 999px var(--hover-overlay);
     color: var(--text);
   }
 }
 
-.dialog-close:active,
-.drawer-close:active {
+.dialog-close:active {
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
 
-.dialog-close:focus-visible,
-.drawer-close:focus-visible {
+.dialog-close:focus-visible {
   outline: 2px solid transparent;
   box-shadow: var(--focus-ring-shadow);
 }
-@media print {
-  dialog.modal[open] {
-    display: none !important;
-  }
-}