actual-css 0.1.0

package/src/css/components/index.css

@@ -0,0 +1,41 @@
+/* Controls */
+@import "button.css";
+@import "badge.css";
+@import "alert.css";
+@import "actions.css";
+
+/* Surfaces */
+@import "card.css";
+@import "surface.css";
+@import "modal.css";
+@import "drawer.css";
+
+/* Overlays */
+@import "flyout.css";
+@import "tooltip.css";
+
+/* Disclosure */
+@import "accordion.css";
+
+/* Feedback */
+@import "spinner.css";
+@import "skeleton.css";
+@import "busy.css";
+@import "progress.css";
+@import "status-bar.css";
+
+/* Display */
+@import "avatar.css";
+@import "key.css";
+@import "overline.css";
+
+/* Navigation */
+@import "navbar.css";
+@import "breadcrumb.css";
+@import "pagination.css";
+@import "tab.css";
+@import "scrollspy.css";
+
+/* Data */
+@import "table.css";
+@import "meter.css";

package/src/css/components/join.css

@@ -0,0 +1,106 @@
+/*
+ * Join — visually groups adjacent controls into a single unit.
+ *
+ * This is a cross-cutting control primitive, not a forms-only component:
+ * it applies equally to inputs, selects, buttons, and button-like links.
+ *
+ * Cascade note: .join writes border-radius longhands on its direct children.
+ * Keep this file loaded after control/component styles so those corners win at
+ * equal specificity.
+ */
+.join {
+  --join-radius: var(--radius);
+  --join-ss: 0;
+  --join-se: 0;
+  --join-es: 0;
+  --join-ee: 0;
+
+  align-items: stretch;
+  display: inline-flex;
+}
+
+/* The .circle utility cannot round a join: corners are written as longhands
+   on the children below, so the group radius must flow through the token. */
+.join.circle {
+  --join-radius: var(--radius-full);
+}
+
+.join-addon {
+  --control-border: var(--border);
+  --control-bg: var(--surface-subtle);
+  --control-fg: var(--text-muted);
+
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  min-block-size: var(--control-size);
+  padding-inline: var(--space-3);
+  border: var(--border-width) solid var(--control-border);
+  border-radius: var(--radius);
+  background: var(--control-bg);
+  color: var(--control-fg);
+  font-size: var(--control-font-size);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.join > * {
+  border-start-start-radius: var(--join-ss);
+  border-start-end-radius: var(--join-se);
+  border-end-end-radius: var(--join-ee);
+  border-end-start-radius: var(--join-es);
+}
+
+.join > :first-child {
+  --join-ss: var(--join-radius);
+  --join-es: var(--join-radius);
+}
+
+.join > :last-child {
+  --join-se: var(--join-radius);
+  --join-ee: var(--join-radius);
+}
+
+.join > :only-child {
+  --join-ss: var(--join-radius);
+  --join-se: var(--join-radius);
+  --join-es: var(--join-radius);
+  --join-ee: var(--join-radius);
+}
+
+.join > * + * {
+  margin-inline-start: calc(var(--border-width) * -1);
+}
+
+.join > :is(:hover, :focus, :focus-within) {
+  z-index: 1;
+}
+
+/* Keep an active focus ring above an adjacent hovered control. This matters
+   on platforms where clicking a button does not move focus from the input. */
+.join > :is(:focus, :focus-within) {
+  z-index: 2;
+}
+
+/* An input's border must read as the "primary" edge against an attached
+   action (e.g. a password-reveal button) at all times, not only while
+   hovered or focused — otherwise the shared edge flips ownership as the
+   user's pointer moves, which reads as a rendering glitch. */
+.join > :is(.input, .textarea, .select) {
+  z-index: 3;
+}
+
+/* An input/select with an attached action reads as one composite field. Move
+   its outer focus treatment to the join; button-only groups keep per-button
+   focus, and unsupported :has() browsers retain the control's normal ring. */
+.join:has(> :is(.input, .textarea, .select):focus-visible) {
+  border-radius: var(--join-radius);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.join:has(> :is(.input, .textarea, .select)) > :is(.input, .textarea, .select):focus-visible {
+  outline: none;
+  box-shadow: none;
+}

package/src/css/components/key.css

@@ -0,0 +1,25 @@
+/*
+ * Key — keyboard keys and shortcut tokens for UI chrome.
+ *
+ * Use .key outside prose. Plain kbd inside .prose gets the same visual
+ * treatment from prose.css so authored content stays convenient.
+ */
+.key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.75em;
+  min-block-size: 1.6em;
+  padding-inline: 0.45em;
+  border: var(--border-width) solid var(--border);
+  border-block-end-width: calc(var(--border-width) * 2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-raised);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: 0.08em;
+}

package/src/css/components/meter.css

@@ -0,0 +1,81 @@
+/*
+ * Meter — native gauge for known-range values.
+ *
+ * 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;
+  -webkit-appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--bar-height);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--surface-subtle);
+}
+
+.meter::-webkit-meter-bar {
+  -webkit-appearance: none;
+  block-size: var(--bar-height);
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--surface-subtle);
+}
+
+.meter::-webkit-meter-optimum-value {
+  block-size: var(--bar-height);
+  border-radius: var(--radius-full);
+  background: var(--success);
+}
+
+.meter::-webkit-meter-suboptimum-value {
+  block-size: var(--bar-height);
+  border-radius: var(--radius-full);
+  background: var(--warning);
+}
+
+.meter::-webkit-meter-even-less-good-value {
+  block-size: var(--bar-height);
+  border-radius: var(--radius-full);
+  background: var(--danger);
+}
+
+.meter::-moz-meter-bar {
+  block-size: var(--bar-height);
+  border-radius: var(--radius-full);
+}
+
+@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

@@ -0,0 +1,162 @@
+/*
+ * Modal shell styling for native dialog elements.
+ *
+ * Spacing, radius, transitions, and focus treatment come from shared tokens.
+ * Opening behavior and intent-specific decisions stay outside this component.
+ */
+dialog.modal {
+  --modal-size: 32rem;
+
+  max-inline-size: min(100% - 2rem, var(--modal-size));
+  max-block-size: calc(var(--viewport-block) - 2rem);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  padding: 0;
+  overflow: visible;
+  opacity: 0;
+  /*
+   * Keep the open dialog root untransformed. Fixed overlays mounted 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.
+   */
+  transform: translateY(0.35rem) scale(0.98);
+  transition:
+    opacity var(--duration),
+    transform var(--duration);
+}
+
+dialog.modal > form,
+dialog.modal > .stack {
+  display: grid;
+  gap: var(--space-4);
+  max-block-size: calc(var(--viewport-block) - 2rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--space-4);
+}
+
+dialog.modal.scrollable > form,
+dialog.modal.scrollable > .stack {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+dialog.modal.scrollable > form > :not(header, footer),
+dialog.modal.scrollable > .stack > :not(header, footer) {
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+dialog.modal header > :first-child,
+dialog.modal footer > :first-child {
+  margin-block-start: 0;
+}
+
+dialog.modal header > :last-child,
+dialog.modal footer > :last-child {
+  margin-block-end: 0;
+}
+
+dialog.modal footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--gap);
+}
+
+dialog.modal[open] {
+  opacity: 1;
+  transform: none;
+}
+
+@starting-style {
+  dialog.modal[open] {
+    opacity: 0;
+    transform: translateY(0.35rem) scale(0.98);
+  }
+}
+
+dialog.modal::backdrop {
+  background: var(--backdrop-fill);
+  opacity: 0;
+  transition: opacity var(--duration);
+}
+
+@supports (transition-behavior: allow-discrete) {
+  dialog.modal {
+    transition:
+      opacity var(--duration),
+      transform var(--duration),
+      overlay var(--duration) allow-discrete,
+      display var(--duration) allow-discrete;
+  }
+
+  dialog.modal::backdrop {
+    transition:
+      opacity var(--duration),
+      overlay var(--duration) allow-discrete,
+      display var(--duration) allow-discrete;
+  }
+}
+
+dialog.modal[open]::backdrop {
+  opacity: 1;
+}
+
+html.has-modal-open {
+  overflow: hidden;
+}
+
+html.has-modal-open.had-scrollbar {
+  scrollbar-gutter: stable;
+}
+
+@starting-style {
+  dialog.modal[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  dialog.modal.is-static {
+    animation: actual-modal-static 180ms var(--ease);
+  }
+
+  ::view-transition-group(actual-dialog) {
+    animation-duration: var(--duration);
+    animation-timing-function: var(--ease);
+  }
+}
+
+@keyframes actual-modal-static {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  35% {
+    transform: translateX(-0.35rem);
+  }
+
+  70% {
+    transform: translateX(0.35rem);
+  }
+}
+
+@media (forced-colors: active) {
+  dialog.modal {
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  dialog.modal::backdrop {
+    background: Canvas;
+  }
+}

package/src/css/components/navbar.css

@@ -0,0 +1,98 @@
+/*
+ * Navbar — top-level navigation bar.
+ *
+ * .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.
+ */
+.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);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  color: var(--text);
+}
+
+.navbar-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text);
+  font-weight: var(--font-weight-bold);
+  text-decoration: none;
+}
+
+.navbar-brand:focus-visible {
+  border-radius: var(--radius-sm);
+}
+
+.navbar-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--control-size-sm);
+  padding-inline: var(--space-2);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+}
+
+.nav-link:where([aria-current]:not([aria-current="false"])) {
+  background: var(--surface-subtle);
+  color: var(--text);
+}
+
+@media (hover: hover) {
+  .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(--gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  --gap: var(--space-2);
+}
+
+.nav-list > li {
+  margin: 0;
+}
+
+@media (forced-colors: active) {
+  .nav-link:where([aria-current]:not([aria-current="false"])) {
+    outline: var(--border-width) solid Highlight;
+    background: Highlight;
+    color: HighlightText;
+    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;
+    }
+  }
+}

package/src/css/components/overline.css

@@ -0,0 +1,49 @@
+/*
+ * Overline — editorial small-cap label for section openers.
+ *
+ * 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.
+ */
+/* 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);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.overline.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  padding-inline: 0.6em;
+  padding-block: 0.25em;
+  color: var(--intent, var(--text-muted));
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--surface);
+}
+
+/* Tinted pill surface where color-mix is available; the flat fallback above
+   keeps a readable bordered pill everywhere else. */
+@supports (color: color-mix(in oklch, red, white)) {
+  .overline.pill {
+    border-color: color-mix(in oklch, var(--intent, var(--border)) 35%, var(--border));
+    background: color-mix(in oklch, var(--intent, transparent) 6%, var(--surface));
+  }
+}

package/src/css/components/pagination.css

@@ -0,0 +1,30 @@
+/*
+ * Pagination — page navigation for paginated lists.
+ *
+ * Render .btn elements inside a .pagination list. The active page is marked
+ * with aria-current="page"; .btn owns the active state styling.
+ *
+ * Truncated ranges are plain text (`.muted`, `aria-hidden="true"`), not .btn
+ * — they are decorative, not actionable. They still get the same box sizing
+ * as .btn below so the row stays visually aligned.
+ */
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pagination .btn {
+  min-inline-size: var(--control-size);
+}
+
+.pagination > li > [aria-hidden="true"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--control-size);
+}