actual-css 0.2.0 → 0.3.1

package/src/css/components/menu.css

@@ -0,0 +1,125 @@
+/*
+ * Menu — action list primitive consumed by flyout and context-menu.
+ *
+ * Strict anatomy: .menu > li > .menu-item. Separators and section labels
+ * sit directly under .menu as siblings of <li>.
+ *
+ * Public hooks:
+ * --menu-item-icon-size
+ */
+
+.menu {
+  display: grid;
+  gap: var(--space-10);
+  margin: 0;
+  padding: var(--space-10);
+  list-style: none;
+}
+
+.menu > li {
+  margin: 0;
+}
+
+.menu-item {
+  --menu-item-icon-size: 1.25em;
+
+  display: flex;
+  align-items: center;
+  gap: var(--space-20);
+  inline-size: 100%;
+  min-block-size: var(--menu-item-size, var(--control-size));
+  padding-inline: var(--space-20);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.menu-item-icon {
+  display: grid;
+  flex: 0 0 var(--menu-item-icon-size);
+  inline-size: var(--menu-item-icon-size);
+  place-items: center;
+}
+
+.menu-item-text {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.menu-item-end {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-10);
+  margin-inline-start: auto;
+  color: var(--text-muted);
+}
+
+/* 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;
+  flex: 0 0 var(--menu-item-icon-size);
+  inline-size: var(--menu-item-icon-size);
+  place-items: center;
+}
+
+.menu-item[role="menuitemcheckbox"]::before {
+  content: "";
+}
+
+.menu-item[role="menuitemcheckbox"][aria-checked="true"]::before {
+  content: "✓";
+}
+
+.menu-item[role="menuitemcheckbox"][aria-checked="mixed"]::before {
+  content: "−";
+}
+
+.menu-item[role="menuitemradio"]::before {
+  content: "○";
+}
+
+.menu-item[role="menuitemradio"][aria-checked="true"]::before {
+  content: "●";
+}
+
+.menu-item:focus-visible {
+  background: var(--surface-subtle);
+}
+
+.menu-item:hover:not(:where(:disabled, [aria-disabled="true"])) {
+  background: var(--surface-subtle);
+}
+
+.menu-item:is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+.menu-label {
+  padding: var(--space-20);
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-strong);
+}
+
+.menu-separator {
+  margin: 0;
+  border: 0;
+  border-block-start: var(--border-width) solid var(--border);
+}
+
+@media (forced-colors: active) {
+  .menu-item:focus-visible {
+    outline: var(--border-width) solid ButtonText;
+    outline-offset: -1px;
+  }
+}

package/src/css/components/meter.css

@@ -4,18 +4,6 @@
  * Maps the three standard meter zones (optimum / suboptimum / even-less-good)
  * to the shared success / warning / danger intent colors.
  */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.meter) {
-  /* @sync intent-boundary */
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
-}
 
 .meter {
   appearance: none;
@@ -61,21 +49,10 @@
 }
 
 @media (forced-colors: active) {
-  .meter {
-    border: var(--border-width) solid ButtonText;
-    background: Canvas;
-  }
-
-  .meter::-webkit-meter-bar {
-    border: 0;
-    background: Canvas;
-  }
-
   .meter::-webkit-meter-optimum-value,
   .meter::-webkit-meter-suboptimum-value,
   .meter::-webkit-meter-even-less-good-value,
   .meter::-moz-meter-bar {
     background: Highlight;
-    forced-color-adjust: none;
   }
 }

package/src/css/components/modal.css

@@ -3,12 +3,30 @@
  *
  * Spacing, radius, transitions, and focus treatment come from shared tokens.
  * Opening behavior and intent-specific decisions stay outside this component.
+ *
+ * Public hooks:
+ * --modal-size
+ * --dialog-viewport-gap
+ * --dialog-icon-size
+ * --dialog-icon-glyph-size
+ *
+ * Internal:
+ * --dialog-close-icon-size
+ * --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
+     doubled gap is spelled out with an additive calc. */
+  --dialog-viewport-gap-2x: calc(var(--dialog-viewport-gap) + var(--dialog-viewport-gap));
+
+  /* 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(100% - 2rem, var(--modal-size));
-  max-block-size: calc(var(--viewport-block) - 2rem);
+  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));
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
@@ -32,11 +50,18 @@ dialog.modal {
 dialog.modal > form,
 dialog.modal > .stack {
   display: grid;
-  gap: var(--space-4);
-  max-block-size: calc(var(--viewport-block) - 2rem);
+  gap: var(--space-40);
+  max-block-size: calc(var(--viewport-block) - var(--dialog-viewport-gap-2x));
   overflow: auto;
   overscroll-behavior: contain;
-  padding: var(--space-4);
+  padding: var(--space-40);
+}
+
+/* Keep the dialog off the viewport edges on small screens. */
+@media (max-width: 30rem) {
+  dialog.modal {
+    --dialog-viewport-gap: var(--space-30);
+  }
 }
 
 dialog.modal.scrollable > form,
@@ -62,6 +87,13 @@ dialog.modal footer > :last-child {
   margin-block-end: 0;
 }
 
+/* The close button is anchored to the dialog at top inline-end, out of the
+   content flow; headers reserve inline room so titles never run under it. */
+dialog.modal > form > header,
+dialog.modal > .stack > header {
+  padding-inline-end: calc(var(--control-size) + var(--space-30));
+}
+
 dialog.modal footer {
   display: flex;
   flex-wrap: wrap;
@@ -69,6 +101,65 @@ dialog.modal footer {
   gap: var(--gap);
 }
 
+/* Confirmation layout — a focused message followed by a visually distinct
+   action band. The media primitive owns icon/content alignment; this variant
+   only removes the standard form inset so both regions can own their padding. */
+dialog.modal.dialog-confirmation > form {
+  gap: 0;
+  padding: 0;
+}
+
+dialog.modal.dialog-confirmation > form > .media {
+  gap: var(--space-40);
+  padding: var(--space-50);
+}
+
+dialog.modal.dialog-confirmation > form > footer {
+  padding: var(--space-40) var(--space-50);
+  border-end-start-radius: calc(var(--radius-lg) - var(--border-width));
+  border-end-end-radius: calc(var(--radius-lg) - var(--border-width));
+  background: var(--surface-subtle);
+}
+
+/* Intent boundary — inherited intents do not tint the icon well. A local
+   intent plus .soft opts into the shared soft-variant recipe. */
+:where(.dialog-icon) {
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+}
+
+.dialog-icon {
+  --dialog-icon-size: 3rem;
+  --dialog-icon-glyph-size: 1.5rem;
+
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--dialog-icon-size);
+  block-size: var(--dialog-icon-size);
+  flex: none;
+  border-radius: var(--radius-full);
+  background: var(--ui-bg, var(--surface-subtle));
+  color: var(--ui-fg, var(--intent, var(--text-muted)));
+}
+
+.dialog-icon > * {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--dialog-icon-glyph-size);
+  block-size: var(--dialog-icon-glyph-size);
+  font-size: var(--dialog-icon-glyph-size);
+  line-height: 1;
+}
+
+@media (max-width: 30rem) {
+  dialog.modal.dialog-confirmation > form > .media,
+  dialog.modal.dialog-confirmation > form > footer {
+    padding: var(--space-40);
+  }
+}
+
 dialog.modal[open] {
   opacity: 1;
   transform: none;
@@ -124,7 +215,7 @@ html.has-modal-open.had-scrollbar {
 
 @media (prefers-reduced-motion: no-preference) {
   dialog.modal.is-static {
-    animation: actual-modal-static 180ms var(--ease);
+    animation: actual-dialog-static var(--duration-slow) var(--ease);
   }
 
   ::view-transition-group(actual-dialog) {
@@ -133,7 +224,7 @@ html.has-modal-open.had-scrollbar {
   }
 }
 
-@keyframes actual-modal-static {
+@keyframes actual-dialog-static {
   0%,
   100% {
     transform: none;
@@ -159,4 +250,68 @@ html.has-modal-open.had-scrollbar {
   dialog.modal::backdrop {
     background: Canvas;
   }
+
+  .dialog-icon {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
+/* 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 {
+  --dialog-close-icon-size: 1rem;
+
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  cursor: pointer;
+
+  /* Out of flow, anchored to the positioned dialog surface, not the header or
+     any scroll container inside it. */
+  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);
+}
+
+.dialog-close::before,
+.drawer-close::before {
+  content: "";
+  inline-size: var(--dialog-close-icon-size);
+  block-size: var(--dialog-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) {
+  .dialog-close:hover,
+  .drawer-close:hover {
+    box-shadow: inset 0 0 0 999px var(--hover-overlay);
+    color: var(--text);
+  }
+}
+
+.dialog-close:active,
+.drawer-close:active {
+  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+}
+
+.dialog-close:focus-visible,
+.drawer-close:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--focus-ring-shadow);
 }

package/src/css/components/navbar.css

@@ -4,26 +4,37 @@
  * .navbar is a horizontal bar; .navbar-brand is the brand link; .navbar-nav is
  * the inline link list using .nav-link items. .nav-list is the vertical nav
  * list shared with .drawer, fed by the shared --gap token.
+ *
+ * Internal:
+ * --gap (local value for the shared gap token)
  */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.navbar) {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
 .navbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap);
-  padding-block: var(--space-3);
-  padding-inline: var(--space-4);
-  border: var(--border-width) solid var(--border);
+  padding-block: var(--space-30);
+  padding-inline: var(--space-40);
+  border: var(--border-width) solid var(--ui-border, var(--border));
   border-radius: var(--radius-lg);
-  background: var(--surface-raised);
-  color: var(--text);
+  background: var(--ui-bg, var(--surface-raised));
+  color: var(--ui-fg, var(--text));
 }
 
 .navbar-brand {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-2);
-  color: var(--text);
+  gap: var(--space-20);
+  color: var(--ui-fg, var(--text));
   font-weight: var(--font-weight-bold);
   text-decoration: none;
 }
@@ -36,7 +47,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-10);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -46,9 +57,9 @@
   display: inline-flex;
   align-items: center;
   min-block-size: var(--control-size-sm);
-  padding-inline: var(--space-2);
+  padding-inline: var(--space-20);
   border-radius: var(--radius);
-  color: var(--text-muted);
+  color: var(--ui-fg, var(--text-muted));
   font-weight: var(--font-weight-medium);
   text-decoration: none;
 }
@@ -58,21 +69,19 @@
   color: var(--text);
 }
 
-@media (hover: hover) {
-  .nav-link:hover {
-    background: var(--surface-subtle);
-    color: var(--text);
-  }
+.nav-link:hover {
+  background: var(--surface-subtle);
+  color: var(--text);
 }
 
 /* Nav list — a vertical navigation list. Used by .drawer for stacked links. */
 .nav-list {
   display: grid;
+  --gap: var(--space-20);
   gap: var(--gap);
   margin: 0;
   padding: 0;
   list-style: none;
-  --gap: var(--space-2);
 }
 
 .nav-list > li {
@@ -87,12 +96,10 @@
     forced-color-adjust: none;
   }
 
-  @media (hover: hover) {
-    .nav-link:hover:not(:where([aria-current]:not([aria-current="false"]))) {
-      outline: var(--border-width) solid ButtonText;
-      outline-offset: 2px;
-      background: Canvas;
-      color: CanvasText;
-    }
+  .nav-link:hover:not(:where([aria-current]:not([aria-current="false"]))) {
+    outline: var(--border-width) solid ButtonText;
+    outline-offset: 2px;
+    background: Canvas;
+    color: CanvasText;
   }
 }

package/src/css/components/overline.css

@@ -4,22 +4,17 @@
  * Base form is unstyled chrome that takes its surrounding color. Add .pill for
  * the bordered rounded shape, and combine with an intent class (.primary,
  * .success, etc.) to tint the text, border, and background.
+ *
+ * Public hooks:
+ * --overline-radius
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
 :where(.overline) {
-  /* @sync intent-boundary */
   --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
 }
 
 .overline {
-  align-self: flex-start;
   color: var(--text-muted);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
@@ -28,14 +23,18 @@
 }
 
 .overline.pill {
+  --overline-radius: var(--radius-full);
+
   display: inline-flex;
   align-items: center;
   gap: 0.5em;
   padding-inline: 0.6em;
   padding-block: 0.25em;
+  inline-size: fit-content;
+  max-inline-size: 100%;
   color: var(--intent, var(--text-muted));
   border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-full);
+  border-radius: var(--overline-radius);
   background: var(--surface);
 }
 

package/src/css/components/pagination.css

@@ -12,7 +12,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-10);
   margin: 0;
   padding: 0;
   list-style: none;

package/src/css/components/progress.css

@@ -3,26 +3,21 @@
  *
  * Consumes the shared --intent/--primary for the value bar and --bar-height
  * for thickness. Indeterminate state animates a shimmer using --duration-shimmer.
+ *
+ * Public hooks:
+ * --progress-track
+ * --progress-value
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
 :where(.progress) {
-  /* @sync intent-boundary */
   --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
 }
 
 .progress {
   --progress-track: var(--surface-subtle);
   --progress-value: var(--intent, var(--primary));
-}
 
-.progress {
   appearance: none;
   -webkit-appearance: none;
   display: block;
@@ -101,26 +96,13 @@
 }
 
 @media (forced-colors: active) {
-  .progress {
-    border: var(--border-width) solid ButtonText;
-    background: Canvas;
-  }
-
-  .progress::-webkit-progress-bar {
-    background: Canvas;
-  }
-
-  .progress::-webkit-progress-value {
+  .progress::-webkit-progress-value,
+  .progress:indeterminate::-webkit-progress-value {
     background: Highlight;
-    forced-color-adjust: none;
   }
 
-  .progress::-moz-progress-bar {
+  .progress::-moz-progress-bar,
+  .progress:indeterminate::-moz-progress-bar {
     background: Highlight;
-    forced-color-adjust: none;
-  }
-
-  .progress:indeterminate {
-    background: Canvas;
   }
 }

package/src/css/components/skeleton.css

@@ -3,6 +3,13 @@
  *
  * Shows approximate loading structure without implying real content hierarchy.
  * Geometry, animation, and color stay theme-aware.
+ *
+ * Public hooks:
+ * --skeleton-size
+ * --skeleton-width
+ * --skeleton-radius
+ * --skeleton-track
+ * --skeleton-highlight
  */
 .skeleton {
   --skeleton-size: 1rem;

package/src/css/components/spinner.css

@@ -3,18 +3,17 @@
  *
  * Uses currentColor so it adapts to buttons, alerts, badges, and text. The
  * [aria-busy] overlay composition lives in components/busy.css.
+ *
+ * Public hooks:
+ * --spinner-size
+ * --spinner-width
+ * --spinner-track
+ * --spinner-value
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
 :where(.spinner) {
-  /* @sync intent-boundary */
   --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
 }
 
 .spinner {