actual-css 0.1.0

package/src/css/components/progress.css

@@ -0,0 +1,126 @@
+/*
+ * Progress — native progress bar with theme-aware track and value.
+ *
+ * Consumes the shared --intent/--primary for the value bar and --bar-height
+ * for thickness. Indeterminate state animates a shimmer using --duration-shimmer.
+ */
+/* 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;
+  inline-size: 100%;
+  block-size: var(--bar-height);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--progress-track);
+}
+
+.progress::-webkit-progress-bar {
+  block-size: var(--bar-height);
+  border-radius: var(--radius-full);
+  background: var(--progress-track);
+}
+
+.progress::-webkit-progress-value {
+  block-size: var(--bar-height);
+  border-radius: var(--radius-full);
+  background: var(--progress-value);
+}
+
+.progress::-moz-progress-bar {
+  block-size: var(--bar-height);
+  border-radius: var(--radius-full);
+  background: var(--progress-value);
+}
+
+/* Indeterminate progress */
+.progress:indeterminate {
+  background:
+    linear-gradient(to right, var(--progress-value) 30%, var(--progress-track) 30%) top left / 150%
+    150% no-repeat,
+    var(--progress-track);
+}
+
+.progress:indeterminate::-webkit-progress-bar {
+  background: transparent;
+}
+
+.progress:indeterminate::-webkit-progress-value {
+  background: transparent;
+}
+
+.progress:indeterminate::-moz-progress-bar {
+  background: transparent;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .progress:indeterminate {
+    animation: actual-progress-indeterminate var(--duration-shimmer) ease-in-out infinite;
+  }
+
+  :where([dir="rtl"] .progress:indeterminate) {
+    animation-direction: reverse;
+  }
+}
+
+@keyframes actual-progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+
+  20% {
+    background-position: 100% 0;
+  }
+
+  80% {
+    background-position: -100% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (forced-colors: active) {
+  .progress {
+    border: var(--border-width) solid ButtonText;
+    background: Canvas;
+  }
+
+  .progress::-webkit-progress-bar {
+    background: Canvas;
+  }
+
+  .progress::-webkit-progress-value {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .progress::-moz-progress-bar {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .progress:indeterminate {
+    background: Canvas;
+  }
+}

package/src/css/components/scrollspy.css

@@ -0,0 +1,27 @@
+/*
+ * Scrollspy — behavior hook for navigation that marks the active section
+ * while the page scrolls.
+ *
+ * Does not add visual styles by itself. scrollspy.js watches
+ * <nav class="scrollspy">
+ * containing <a href="#section"> links and toggles aria-current="location" on
+ * the link whose target is in view. Pair with .nav-list and .nav-link, or style
+ * [aria-current] yourself.
+ *
+ * Progressive enhancement: on browsers that support :target-current,
+ * this file enables the native target group and marks the active link.
+ *
+ * Falls back gracefully: links still work when IntersectionObserver or
+ * :target-current is unavailable.
+ */
+
+@supports selector(.scrollspy a:target-current) {
+  .scrollspy {
+    scroll-target-group: auto;
+  }
+
+  .scrollspy a:target-current {
+    color: var(--text);
+    font-weight: var(--font-weight-medium);
+  }
+}

package/src/css/components/skeleton.css

@@ -0,0 +1,67 @@
+/*
+ * Skeleton placeholders for loading states.
+ *
+ * Shows approximate loading structure without implying real content hierarchy.
+ * Geometry, animation, and color stay theme-aware.
+ */
+.skeleton {
+  --skeleton-size: 1rem;
+  --skeleton-width: 100%;
+  --skeleton-radius: var(--radius);
+  --skeleton-track: var(--surface-subtle);
+  --skeleton-highlight: var(--surface-raised);
+
+  display: block;
+  inline-size: var(--skeleton-width);
+  max-inline-size: 100%;
+  block-size: var(--skeleton-size);
+  border-radius: var(--skeleton-radius);
+  background:
+    linear-gradient(90deg, var(--skeleton-track), var(--skeleton-highlight), var(--skeleton-track))
+    0 0 / 200% 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .skeleton {
+    animation: actual-skeleton var(--duration-shimmer) ease-in-out infinite;
+  }
+}
+
+.skeleton[data-shape="text"] {
+  --skeleton-size: 0.85rem;
+  --skeleton-width: 32rem;
+}
+
+.skeleton[data-shape="title"] {
+  --skeleton-size: 1.4rem;
+  --skeleton-width: 18rem;
+}
+
+.skeleton[data-shape="avatar"] {
+  --skeleton-size: var(--avatar-size, 2.25rem);
+  --skeleton-width: var(--skeleton-size);
+  --skeleton-radius: var(--radius-full);
+
+  flex: 0 0 auto;
+}
+
+.skeleton[data-shape="box"] {
+  --skeleton-size: 8rem;
+}
+
+@media (forced-colors: active) {
+  .skeleton {
+    border: var(--border-width) solid ButtonText;
+    background: GrayText;
+  }
+}
+
+@keyframes actual-skeleton {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}

package/src/css/components/spinner.css

@@ -0,0 +1,60 @@
+/*
+ * Spinner — compact loading feedback.
+ *
+ * Uses currentColor so it adapts to buttons, alerts, badges, and text. The
+ * [aria-busy] overlay composition lives in components/busy.css.
+ */
+/* 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 {
+  --spinner-size: 1.5rem;
+  --spinner-width: 2px;
+  --spinner-track: currentColor;
+  --spinner-value: transparent;
+
+  color: var(--intent, currentColor);
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: var(--spinner-size);
+  block-size: var(--spinner-size);
+  border: var(--spinner-width) solid var(--spinner-track);
+  border-inline-end-color: var(--spinner-value);
+  border-radius: var(--radius-full);
+  opacity: 0.85;
+  animation: actual-spin var(--duration-spin) linear infinite;
+  vertical-align: text-bottom;
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .spinner {
+    --spinner-track: color-mix(in oklch, currentColor, transparent 70%);
+    --spinner-value: currentColor;
+    opacity: 1;
+  }
+}
+
+.spinner.sm {
+  --spinner-size: 1rem;
+}
+
+.spinner.lg {
+  --spinner-size: 3rem;
+  --spinner-width: 3px;
+}
+
+@keyframes actual-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/css/components/status-bar.css

@@ -0,0 +1,82 @@
+/*
+ * Status bar — singleton floating status area.
+ *
+ * One element in the HTML, empty by default, hidden when :empty but kept in the
+ * accessibility tree so it stays a reliable live region. JavaScript only sets
+ * text content; the visual shows and hides with the content.
+ *
+ * Consumes intent like badge or alert. No need for status-bar-specific modifier
+ * classes — .danger / .success / .warning / .neutral from intents.css drive
+ * the coloring via --intent / --intent-fg. status.js applies these as plain
+ * classes on the target; it does not know their names or that they exist.
+ *
+ * Public API: .status-bar + [data-status], both required — status.js reads
+ * the class name from js/selectors.js rather than hardcoding it, but still
+ * needs it to scope its document-wide lookup away from unrelated elements
+ * that carry their own generic `data-status`.
+ */
+
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.status-bar) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.status-bar {
+  --status-bg: var(--intent, var(--text));
+  --status-fg: var(--intent-fg, var(--surface));
+
+  position: fixed;
+  inset-block-end: var(--space-4);
+  inset-inline: var(--space-4);
+  z-index: var(--z-status, 60);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+
+  inline-size: fit-content;
+  max-inline-size: min(calc(100vw - var(--space-6)), 32rem);
+  margin-inline: auto;
+  overflow-wrap: anywhere;
+
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+
+  border-radius: var(--radius-full);
+  background: var(--status-bg);
+  color: var(--status-fg);
+  box-shadow: var(--shadow-popout);
+
+  opacity: 1;
+  scale: 1;
+  translate: 0 0;
+  pointer-events: none;
+
+  transition:
+    opacity var(--duration-slow) var(--ease, ease),
+    scale var(--duration-slow) var(--ease, ease),
+    translate var(--duration-slow) var(--ease, ease);
+}
+
+.status-bar:empty {
+  opacity: 0;
+  scale: 0.96;
+  translate: 0 var(--space-2);
+  pointer-events: none;
+}
+
+@media (forced-colors: active) {
+  .status-bar {
+    border: var(--border-width) solid ButtonText;
+    box-shadow: none;
+  }
+}

package/src/css/components/surface.css

@@ -0,0 +1,48 @@
+/*
+ * Surface — shared modal scrim and backdrop for flyout and drawer.
+ *
+ * Drawn by .drawer::backdrop (native dialog top-layer) and .surface-backdrop
+ * (custom fixed div for flyout sheets on coarse pointers). The native
+ * .modal::backdrop uses the same fill and animates opacity from 0 to 1
+ * (modal.css), so the scrim strength stays consistent across the dialog
+ * family.
+ *
+ * .surface-backdrop, .is-sheet, and .is-open are runtime markers set by
+ * surface.js. Authors opt in via [data-flyout-mobile="sheet|auto|none|anchored"]
+ * — the JS resolves "auto" into .is-sheet at run time.
+ */
+/* Custom backdrop for overlays that do not use the native dialog top-layer.
+ * Its z-index sits just below the flyout it accompanies. */
+.surface-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--z-menu) - 1);
+  background: var(--backdrop-fill);
+  opacity: 1;
+  transition: opacity var(--duration) var(--ease, ease);
+}
+
+.surface-backdrop[hidden] {
+  display: none;
+  opacity: 0;
+}
+
+@starting-style {
+  .surface-backdrop:not([hidden]) {
+    opacity: 0;
+  }
+}
+
+@supports (transition-behavior: allow-discrete) {
+  .surface-backdrop {
+    transition:
+      opacity var(--duration) var(--ease, ease),
+      display var(--duration) allow-discrete;
+  }
+}
+
+@media (forced-colors: active) {
+  .surface-backdrop {
+    background: Canvas;
+  }
+}

package/src/css/components/tab.css

@@ -0,0 +1,128 @@
+/*
+ * Tabs — in-place panel switcher with real tab semantics.
+ *
+ * JavaScript owns roving tabindex, aria-selected, panel visibility,
+ * and arrow-key navigation. CSS owns the tab strip appearance and
+ * active indicator.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.tab) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  border-block-end: var(--border-width) solid var(--border);
+  list-style: none;
+}
+
+.tabs[aria-orientation="vertical"] {
+  display: grid;
+  align-content: start;
+  justify-items: stretch;
+  border-block-end: 0;
+  border-inline-end: var(--border-width) solid var(--border);
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--control-size);
+  padding-inline: var(--space-3);
+  border: 0;
+  border-block-end: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  font-weight: var(--font-weight-strong);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.tabs[aria-orientation="vertical"] .tab {
+  justify-content: flex-start;
+  border-block-end: 0;
+  border-inline-end: 2px solid transparent;
+  padding-inline-end: var(--space-4);
+}
+
+.tab:is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+@media (hover: hover) {
+  .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
+    color: var(--text);
+  }
+}
+
+.tab:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+}
+
+.tab[aria-selected="true"],
+.tab[aria-current]:not([aria-current="false"]),
+.tab[aria-pressed="true"] {
+  border-block-end-color: var(--intent, var(--primary));
+  color: var(--intent, var(--primary));
+}
+
+.tabs[aria-orientation="vertical"] .tab[aria-selected="true"],
+.tabs[aria-orientation="vertical"] .tab[aria-current]:not([aria-current="false"]),
+.tabs[aria-orientation="vertical"] .tab[aria-pressed="true"] {
+  border-block-end-color: transparent;
+  border-inline-end-color: var(--intent, var(--primary));
+}
+
+@media (forced-colors: active) {
+  .tabs {
+    border-block-end-color: ButtonText;
+  }
+
+  .tabs[aria-orientation="vertical"] {
+    border-block-end-color: transparent;
+    border-inline-end-color: ButtonText;
+  }
+
+  .tab {
+    color: ButtonText;
+  }
+
+  @media (hover: hover) {
+    .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
+      color: ButtonText;
+      text-decoration: underline;
+      text-underline-offset: 0.18em;
+    }
+  }
+
+  .tab[aria-selected="true"],
+  .tab[aria-current]:not([aria-current="false"]),
+  .tab[aria-pressed="true"] {
+    border-block-end-color: Highlight;
+    color: Highlight;
+  }
+
+  .tabs[aria-orientation="vertical"] .tab[aria-selected="true"],
+  .tabs[aria-orientation="vertical"] .tab[aria-current]:not([aria-current="false"]),
+  .tabs[aria-orientation="vertical"] .tab[aria-pressed="true"] {
+    border-block-end-color: transparent;
+    border-inline-end-color: Highlight;
+  }
+}

package/src/css/components/table.css

@@ -0,0 +1,64 @@
+/*
+ * Table — structured tabular data.
+ *
+ * .table-wrap provides the scroll container and outer chrome; .table owns row
+ * and cell rules. Tokens are sourced from the shared scale.
+ */
+.table-wrap {
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+}
+
+.table {
+  --table-min: 100%;
+  --table-cell-pad: var(--space-3);
+
+  inline-size: max(var(--table-min), 100%);
+  border-collapse: collapse;
+  background: transparent;
+  color: var(--text);
+  font-size: var(--font-size-md);
+}
+
+.table caption {
+  padding: var(--table-cell-pad);
+  color: var(--text-muted);
+  text-align: var(--text-align, start);
+}
+
+.table th,
+.table td {
+  padding: var(--table-cell-pad);
+  border-block-end: var(--border-width) solid var(--border);
+  text-align: var(--text-align, start);
+  vertical-align: baseline;
+}
+
+.table thead th {
+  vertical-align: bottom;
+}
+
+.table th {
+  color: var(--text-muted);
+  font-weight: var(--font-weight-strong);
+}
+
+.table thead {
+  background: var(--surface-subtle);
+}
+
+@media (hover: hover) {
+  .table tbody tr:hover {
+    background-color: var(--hover-overlay);
+  }
+}
+
+.table > tr:last-child > *,
+.table > :last-child > tr:last-child > * {
+  border-block-end: 0;
+}

package/src/css/components/tooltip.css

@@ -0,0 +1,107 @@
+/*
+ * Tooltip — supplemental label overlaid near a trigger.
+ *
+ * Position, placement, and arrow position are managed by JavaScript
+ * via position: fixed, left, top, data-placement, and --arrow-x.
+ * Visibility is managed with hidden; CSS owns entry and exit animation.
+ */
+.tooltip {
+  --tooltip-bg: var(--surface-solid);
+  --tooltip-fg: var(--surface);
+  --tooltip-arrow-size: 5px;
+
+  position: fixed;
+  z-index: var(--z-tooltip);
+  max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem));
+  padding: 0.25em 0.6em;
+  border-radius: var(--radius-sm);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-fg);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-tight);
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  user-select: none;
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity var(--duration-fast, var(--duration)) var(--ease, ease),
+    scale var(--duration-fast, var(--duration)) var(--ease, ease);
+}
+
+.tooltip[hidden] {
+  display: none;
+  opacity: 0;
+  scale: 0.96;
+}
+
+@starting-style {
+  .tooltip:not([hidden]) {
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+@supports (transition-behavior: allow-discrete) {
+  .tooltip {
+    transition:
+      opacity var(--duration-fast, var(--duration)) var(--ease, ease),
+      scale var(--duration-fast, var(--duration)) var(--ease, ease),
+      display var(--duration-fast, var(--duration)) allow-discrete;
+  }
+}
+
+/* ── Arrow — clipped triangle ──────────────────────── */
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  inline-size: calc(var(--tooltip-arrow-size) * 2);
+  block-size: var(--tooltip-arrow-size);
+  background: var(--tooltip-bg);
+}
+
+.tooltip[data-placement^="top"]::before {
+  bottom: calc(-0.98 * var(--tooltip-arrow-size));
+  left: var(--arrow-x, 50%);
+  translate: -50% 0;
+  clip-path: polygon(50% 100%, 0 0, 100% 0);
+}
+
+.tooltip[data-placement^="bottom"]::before {
+  top: calc(-0.98 * var(--tooltip-arrow-size));
+  left: var(--arrow-x, 50%);
+  translate: -50% 0;
+  clip-path: polygon(50% 0, 0 100%, 100% 100%);
+}
+
+.tooltip[data-placement^="left"]::before {
+  right: calc(-0.98 * var(--tooltip-arrow-size));
+  top: var(--arrow-y, 50%);
+  inline-size: var(--tooltip-arrow-size);
+  block-size: calc(var(--tooltip-arrow-size) * 2);
+  translate: 0 -50%;
+  clip-path: polygon(100% 50%, 0 0, 0 100%);
+}
+
+.tooltip[data-placement^="right"]::before {
+  left: calc(-0.98 * var(--tooltip-arrow-size));
+  top: var(--arrow-y, 50%);
+  inline-size: var(--tooltip-arrow-size);
+  block-size: calc(var(--tooltip-arrow-size) * 2);
+  translate: 0 -50%;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}
+
+@media (forced-colors: active) {
+  .tooltip {
+    --tooltip-bg: Canvas;
+    --tooltip-fg: CanvasText;
+
+    border: var(--border-width) solid ButtonText;
+  }
+
+  .tooltip::before {
+    display: none;
+  }
+}