@fluid-theme/core 0.4.3 → 2.1.0

package/src/components/search-input.css

@@ -45,7 +45,7 @@
 
   .search-input__clear {
     --_btn-bg: transparent;
-    --_btn-shadow: none;
+    --_btn-bg-hover: var(--color-surface);
 
     position: absolute;
     inset-inline-end: var(--space-2);
@@ -71,7 +71,8 @@
 
   .search-input__clear:focus-visible {
     color: var(--color-text);
-    box-shadow: var(--shadow-glow);
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 1px;
   }
 
   /* Hidden by default, shown via JS when input has value */
@@ -113,6 +114,7 @@
   }
 
 
+
   /* ========================================
      REDUCED MOTION
      ======================================== */

package/src/components/step-indicator.css

@@ -38,6 +38,7 @@
   }
 
   .steps__item {
+    --_steps-marker: 2.5rem;
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -48,19 +49,28 @@
     margin: 0;
   }
 
-  /* Connector line between steps */
-  .steps__item:not(:last-child)::after {
+  /* Connector line between steps: half on each side of the boundary, so
+     neither half leaves its own item (visual-scan TEXT, 2026-10-29). */
+  .steps__item:not(:last-child)::after,
+  .steps__item:not(:first-child)::before {
     content: "";
     position: absolute;
-    inset-block-start: calc(1.25rem / 2);
-    inset-inline-start: calc(50% + 1rem);
-    inline-size: calc(100% - 2rem);
+    inset-block-start: calc(var(--_steps-marker) / 2 - 1px);
     block-size: 2px;
     background: var(--color-border);
     z-index: 0;
   }
 
-  .steps__item[data-status="complete"]:not(:last-child)::after {
+  .steps__item:not(:last-child)::after {
+    inset-inline: calc(50% + var(--_steps-marker) / 2 + 0.25rem) 0;
+  }
+
+  .steps__item:not(:first-child)::before {
+    inset-inline: 0 calc(50% + var(--_steps-marker) / 2 + 0.25rem);
+  }
+
+  .steps__item[data-status="complete"]:not(:last-child)::after,
+  .steps__item[data-status="complete"] + .steps__item::before {
     background: var(--accent);
   }
 
@@ -69,10 +79,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: 2.5rem;
-    block-size: 2.5rem;
+    inline-size: var(--_steps-marker);
+    block-size: var(--_steps-marker);
     border-radius: var(--radius-full);
-    border: 2px solid var(--color-border);
+    border: var(--border-width-thick) solid var(--color-border);
     background: var(--color-background);
     font-size: var(--font-size-sm);
     font-weight: var(--weight-semibold);
@@ -89,7 +99,7 @@
   .steps__item[data-status="current"] .steps__marker {
     border-color: var(--accent);
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
     box-shadow: 0 0 0 3px var(--accent-subtle);
   }
 
@@ -97,7 +107,7 @@
   .steps__item[data-status="complete"] .steps__marker {
     border-color: var(--accent);
     background: var(--accent);
-    color: var(--white);
+    color: var(--on-accent);
   }
 
   /* Checkmark for completed steps */
@@ -136,18 +146,12 @@
      SMALL VARIANT
      ======================================== */
 
+  .steps[data-size="sm"] .steps__item { --_steps-marker: 1.75rem; }
+
   .steps[data-size="sm"] .steps__marker {
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
     font-size: var(--font-size-xs);
   }
 
-  .steps[data-size="sm"] .steps__item:not(:last-child)::after {
-    inset-block-start: calc(1.75rem / 2 - 1px);
-    inset-inline-start: calc(50% + 0.75rem);
-    inline-size: calc(100% - 1.5rem);
-  }
-
   .steps[data-size="sm"] .steps__label {
     font-size: var(--font-size-xs);
   }
@@ -162,20 +166,15 @@
       font-size: var(--font-size-xs);
     }
 
+    .steps__item:not(.steps[data-size="sm"] *) { --_steps-marker: 2rem; }
+
     .steps__marker {
-      inline-size: 2rem;
-      block-size: 2rem;
       font-size: var(--font-size-xs);
     }
-
-    .steps__item:not(:last-child)::after {
-      inset-block-start: calc(1rem - 1px);
-      inset-inline-start: calc(50% + 0.75rem);
-      inline-size: calc(100% - 1.5rem);
-    }
   }
 
 
+
   /* ========================================
      REDUCED MOTION
      ======================================== */

package/src/components/table.css

@@ -33,158 +33,76 @@
  * Features:
  *   data-hover      — highlight rows on hover
  *   data-sticky-col — sticky first column
+ *   data-responsive — below 40rem each row becomes a card: a body <th> is its
+ *                     title, <td data-label="Price"> shows "Price … value", and a
+ *                     <td> without data-label (a name, actions) spans the card
  */
 
 @layer components {
-  /* ========================================
-     TABLE WRAPPER
-     Provides horizontal scroll overflow
-     ======================================== */
-
+  /* The wrap only scrolls: no wrapper card. */
   .table-wrap {
     overflow-x: auto;
     overscroll-behavior-x: contain;
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
-
-    /* Scrollbar styling */
     scrollbar-width: thin;
     scrollbar-color: var(--color-border) transparent;
   }
 
-  .table-wrap::-webkit-scrollbar {
-    block-size: 6px;
-  }
-
-  .table-wrap::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .table-wrap::-webkit-scrollbar-thumb {
-    background: var(--color-border);
-    border-radius: var(--radius-full);
-  }
-
-
-  /* ========================================
-     BASE TABLE
-     ======================================== */
-
+  /* The base table (base.css) carries the look: label-voice head over a
+     2px ink rule, hairline rows, tabular lining figures, no zebra, no hover. */
   .table {
     inline-size: 100%;
-    border-collapse: collapse;
-    font-size: var(--font-size-sm);
-    line-height: var(--leading-normal);
-    text-align: start;
+    line-height: 1.45;
   }
 
-  /* Header cells */
-  .table th {
-    padding: var(--space-3) var(--space-4);
-    font-weight: var(--weight-semibold);
-    font-size: var(--font-size-xs);
-    text-transform: uppercase;
-    letter-spacing: var(--tracking-wider);
-    color: var(--color-text-muted);
-    background: var(--color-surface);
-    border-block-end: var(--border-width-thick) solid var(--color-border-subtle);
-    white-space: nowrap;
+  .table thead th {
     position: relative;
+    white-space: nowrap;
   }
 
-  /* Body cells */
-  .table td {
-    padding: var(--space-3) var(--space-4);
-    border-block-end: var(--border-width) solid var(--color-border-subtle);
-    vertical-align: middle;
-  }
-
-  /* Last row: no bottom border */
-  .table tbody tr:last-child td {
-    border-block-end: none;
-  }
+  /* Row headers (a <th> in the body) wrap; only column headers stay on one
+     line, so a long name cannot push the table off a phone. */
+  .table tbody th { white-space: normal; }
 
-  /* Alignment via data attribute */
-  .table [data-align="end"],
-  .table [data-align="right"] {
-    text-align: end;
-  }
-
-  .table [data-align="center"] {
-    text-align: center;
-  }
+  .table td { vertical-align: middle; }
 
-  /* Numeric data: tabular-nums for alignment */
-  .table [data-type="numeric"] {
-    font-variant-numeric: tabular-nums;
-    text-align: end;
-  }
+  .table :is([data-align="end"], [data-align="right"], [data-type="numeric"]) { text-align: end; }
+  .table [data-align="center"] { text-align: center; }
 
 
   /* ========================================
-     TABLE VARIANTS
+     VARIANTS
      ======================================== */
 
-  /* Striped: alternating row backgrounds */
-  .table[data-variant="striped"] tbody tr:nth-child(even) {
-    background: var(--color-surface);
-  }
+  .table[data-variant="striped"] tbody tr:nth-child(even) { background: var(--color-surface); }
 
-  /* Bordered: all cell borders */
-  .table[data-variant="bordered"] th,
-  .table[data-variant="bordered"] td {
-    border: var(--border-width) solid var(--color-border-subtle);
+  .table[data-variant="bordered"] :is(th, td) {
+    border: var(--border-width) solid var(--color-border);
+    padding-inline: var(--space-3);
   }
 
-  /* Compact: tighter spacing */
-  .table[data-variant="compact"] th,
-  .table[data-variant="compact"] td {
-    padding: var(--space-2) var(--space-3);
-  }
+  .table[data-variant="compact"] :is(th, td) { padding-block: var(--space-2); }
 
+  .table[data-hover] tbody tr:hover { background: var(--color-surface); }
 
-  /* ========================================
-     INTERACTIVE FEATURES
-     ======================================== */
-
-  /* Hover highlight */
-  .table[data-hover] tbody tr {
-    transition: background-color var(--duration-fast) var(--ease-fluid);
-  }
-
-  .table[data-hover] tbody tr:hover {
-    background: color-mix(in oklch, var(--accent) 5%, var(--color-background));
-  }
+  .table[data-selectable] tbody tr { cursor: pointer; }
+  .table[data-selectable] tbody tr[aria-selected="true"] { background: var(--accent-subtle); }
 
-  /* Selectable rows */
-  .table[data-selectable] tbody tr {
-    cursor: pointer;
-  }
-
-  .table[data-selectable] tbody tr[aria-selected="true"] {
-    background: color-mix(in oklch, var(--accent) 10%, var(--color-background));
-  }
-
-  /* Sticky first column */
-  .table[data-sticky-col] th:first-child,
-  .table[data-sticky-col] td:first-child {
+  /* Sticky first column: its edge is a logical hairline (RTL-safe). */
+  .table[data-sticky-col] :is(th, td):first-child {
     position: sticky;
     inset-inline-start: 0;
     z-index: var(--z-raised);
-    background: var(--color-surface-raised);
-    box-shadow: 2px 0 4px oklch(from var(--shadow-color) l c h / 0.06);
+    background: var(--color-background);
+    border-inline-end: var(--border-width) solid var(--color-border);
   }
 
-  .table[data-sticky-col] th:first-child {
-    background: var(--color-surface);
-    z-index: calc(var(--z-raised) + 1);
-  }
+  .table[data-sticky-col] th:first-child { z-index: calc(var(--z-raised) + 1); }
 
-  /* Sticky header */
   .table[data-sticky-header] thead th {
     position: sticky;
     inset-block-start: 0;
     z-index: var(--z-raised);
+    background: var(--color-background);
   }
 
 
@@ -198,9 +116,7 @@
     padding-inline-end: var(--space-6);
   }
 
-  .table th[data-sortable]:hover {
-    background: color-mix(in oklch, var(--accent) 8%, var(--color-surface));
-  }
+  .table th[data-sortable]:hover { color: var(--color-text); }
 
   .table th[data-sortable]::after {
     content: "";
@@ -230,28 +146,17 @@
   }
 
 
-  /* ========================================
-     EMPTY STATE
-     ======================================== */
-
   .table__empty {
     text-align: center;
-    padding: var(--space-10) var(--space-5);
-    color: var(--color-text-subtle);
-  }
-
-  .table__empty td {
-    border: none;
+    padding-block: var(--space-xl);
+    color: var(--color-text-muted);
   }
 
-
-  /* ========================================
-     TABLE CAPTION & FOOTER
-     ======================================== */
+  .table__empty td { border: none; }
 
   .table caption {
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--font-size-sm);
+    padding-block: var(--space-s);
+    font-size: var(--step--1);
     color: var(--color-text-muted);
     text-align: start;
     caption-side: bottom;
@@ -259,39 +164,12 @@
 
   .table tfoot td {
     font-weight: var(--weight-semibold);
-    background: var(--color-surface);
-    border-block-start: var(--border-width-thick) solid var(--color-border-subtle);
-  }
-
-
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Still: crisp borders */
-  [data-motion="still"] .table-wrap {
-    border-radius: 0;
-  }
-
-  /* Serene: soft rounded */
-  [data-motion="serene"] .table-wrap {
-    border-radius: var(--radius-xl);
-  }
-
-  /* Rapids: hard offset shadow */
-  [data-motion="rapids"] .table-wrap {
-    box-shadow: var(--shadow-offset);
-  }
-
-  /* Tsunami: asymmetric corners */
-  [data-motion="tsunami"] .table-wrap {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+    border-block-start: var(--border-width-thick) solid var(--color-border-strong);
   }
 
 
   /* ========================================
-     RESPONSIVE: Stacked layout on mobile
-     Apply data-responsive to enable
+     RESPONSIVE: stacked rows on phones (data-responsive)
      ======================================== */
 
   @media (max-width: 40rem) {
@@ -306,8 +184,8 @@
 
     .table[data-responsive] tbody tr {
       display: block;
-      padding: var(--space-4);
-      border-block-end: var(--border-width) solid var(--color-border-subtle);
+      padding-block: var(--space-4);
+      border-block-end: var(--border-width) solid var(--color-border);
     }
 
     .table[data-responsive] tbody tr:last-child {
@@ -322,11 +200,35 @@
       padding: var(--space-2) 0;
       border: none;
       text-align: end;
+      overflow-wrap: anywhere; /* hostnames, URLs and codes wrap instead of widening the page */
+    }
+
+    /* A row header (the item's or page's name) is the card's title */
+    .table[data-responsive] tbody th {
+      display: block;
+      padding: 0;
+      padding-block-end: var(--space-2);
+      font-size: var(--step-0);
+      text-transform: none;
+      letter-spacing: normal;
+      color: var(--color-text);
+      background: none;
+      border: none;
+      overflow-wrap: anywhere;
+    }
+
+    /* A cell with no data-label (a name, a row of actions) takes the full width,
+       start-aligned, instead of being pushed to the end beside an empty label */
+    .table[data-responsive] td:not([data-label]) {
+      display: block;
+      text-align: start;
     }
 
     /* Use data-label for row headers on mobile */
     .table[data-responsive] td::before {
       content: attr(data-label);
+      flex-shrink: 0; /* the label keeps its width; the value wraps */
+      overflow-wrap: normal;
       font-weight: var(--weight-semibold);
       color: var(--color-text);
       text-align: start;
@@ -338,13 +240,4 @@
   }
 
 
-  /* ========================================
-     REDUCED MOTION
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .table[data-hover] tbody tr {
-      transition: none;
-    }
-  }
 }