@fluid-theme/core 0.4.3

package/src/components/step-indicator.css

@@ -0,0 +1,188 @@
+/**
+ * Fluid Framework - Step Indicator Component
+ * @layer components
+ *
+ * Discrete labeled steps for multi-step forms and onboarding flows.
+ *
+ * Usage:
+ *   <nav class="steps" aria-label="Progress">
+ *     <ol class="steps__list">
+ *       <li class="steps__item" data-status="complete">
+ *         <span class="steps__marker">1</span>
+ *         <span class="steps__label">Account</span>
+ *       </li>
+ *       <li class="steps__item" data-status="current" aria-current="step">
+ *         <span class="steps__marker">2</span>
+ *         <span class="steps__label">Details</span>
+ *       </li>
+ *       <li class="steps__item">
+ *         <span class="steps__marker">3</span>
+ *         <span class="steps__label">Review</span>
+ *       </li>
+ *     </ol>
+ *   </nav>
+ *
+ * Statuses: data-status="complete|current" (default: upcoming)
+ * Variants: data-size="sm"
+ */
+
+@layer components {
+  .steps__list {
+    display: flex;
+    align-items: flex-start;
+    gap: 0;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    counter-reset: step;
+  }
+
+  .steps__item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    position: relative;
+    text-align: center;
+    margin: 0;
+  }
+
+  /* Connector line between steps */
+  .steps__item:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    inset-block-start: calc(1.25rem / 2);
+    inset-inline-start: calc(50% + 1rem);
+    inline-size: calc(100% - 2rem);
+    block-size: 2px;
+    background: var(--color-border);
+    z-index: 0;
+  }
+
+  .steps__item[data-status="complete"]:not(:last-child)::after {
+    background: var(--accent);
+  }
+
+  /* Step marker (circle) */
+  .steps__marker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--radius-full);
+    border: 2px solid var(--color-border);
+    background: var(--color-background);
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-muted);
+    position: relative;
+    z-index: var(--z-raised);
+    transition:
+      background-color var(--duration-normal) var(--ease-fluid),
+      border-color var(--duration-normal) var(--ease-fluid),
+      color var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Current step */
+  .steps__item[data-status="current"] .steps__marker {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: var(--white);
+    box-shadow: 0 0 0 3px var(--accent-subtle);
+  }
+
+  /* Completed step */
+  .steps__item[data-status="complete"] .steps__marker {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: var(--white);
+  }
+
+  /* Checkmark for completed steps */
+  .steps__item[data-status="complete"] .steps__marker::after {
+    content: "✓";
+    font-size: var(--font-size-base);
+  }
+
+  /* Hide the number text when showing checkmark */
+  .steps__item[data-status="complete"] .steps__marker {
+    font-size: 0;
+  }
+
+  .steps__item[data-status="complete"] .steps__marker::after {
+    font-size: var(--font-size-base);
+  }
+
+  /* Step label */
+  .steps__label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    font-weight: var(--weight-medium);
+  }
+
+  .steps__item[data-status="current"] .steps__label {
+    color: var(--color-text);
+    font-weight: var(--weight-semibold);
+  }
+
+  .steps__item[data-status="complete"] .steps__label {
+    color: var(--color-text);
+  }
+
+
+  /* ========================================
+     SMALL VARIANT
+     ======================================== */
+
+  .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);
+  }
+
+
+  /* ========================================
+     RESPONSIVE
+     ======================================== */
+
+  @media (max-width: 40rem) {
+    .steps__label {
+      font-size: var(--font-size-xs);
+    }
+
+    .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
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .steps__marker {
+      transition: none;
+    }
+  }
+}

package/src/components/table.css

@@ -0,0 +1,350 @@
+/**
+ * Fluid Framework - Responsive Table Component
+ * @layer components
+ *
+ * Tables that adapt to their container.
+ * Responsive strategies: horizontal scroll, stacked on mobile.
+ *
+ * Usage:
+ *   <div class="table-wrap">
+ *     <table class="table">
+ *       <thead>
+ *         <tr>
+ *           <th>Name</th>
+ *           <th>Status</th>
+ *           <th data-align="end">Amount</th>
+ *         </tr>
+ *       </thead>
+ *       <tbody>
+ *         <tr>
+ *           <td>Item</td>
+ *           <td><span class="badge" data-status="good">Active</span></td>
+ *           <td data-align="end">$99.00</td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </div>
+ *
+ * Variants:
+ *   data-variant="striped"  — alternating row backgrounds
+ *   data-variant="bordered" — all cell borders
+ *   data-variant="compact"  — reduced padding
+ *
+ * Features:
+ *   data-hover      — highlight rows on hover
+ *   data-sticky-col — sticky first column
+ */
+
+@layer components {
+  /* ========================================
+     TABLE WRAPPER
+     Provides horizontal scroll overflow
+     ======================================== */
+
+  .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
+     ======================================== */
+
+  .table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+    line-height: var(--leading-normal);
+    text-align: start;
+  }
+
+  /* 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;
+    position: relative;
+  }
+
+  /* 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;
+  }
+
+  /* Alignment via data attribute */
+  .table [data-align="end"],
+  .table [data-align="right"] {
+    text-align: end;
+  }
+
+  .table [data-align="center"] {
+    text-align: center;
+  }
+
+  /* Numeric data: tabular-nums for alignment */
+  .table [data-type="numeric"] {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+
+
+  /* ========================================
+     TABLE VARIANTS
+     ======================================== */
+
+  /* Striped: alternating row backgrounds */
+  .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);
+  }
+
+  /* Compact: tighter spacing */
+  .table[data-variant="compact"] th,
+  .table[data-variant="compact"] td {
+    padding: var(--space-2) var(--space-3);
+  }
+
+
+  /* ========================================
+     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));
+  }
+
+  /* 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 {
+    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);
+  }
+
+  .table[data-sticky-col] th:first-child {
+    background: var(--color-surface);
+    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);
+  }
+
+
+  /* ========================================
+     SORTABLE HEADERS
+     ======================================== */
+
+  .table th[data-sortable] {
+    cursor: pointer;
+    user-select: none;
+    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]::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: var(--space-3);
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    background: var(--color-text-subtle);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    opacity: 0.4;
+  }
+
+  .table th[data-sort="asc"]::after {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M8 14l4-4 4 4'/%3E%3C/svg%3E");
+    opacity: 1;
+    background: var(--accent);
+  }
+
+  .table th[data-sort="desc"]::after {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E");
+    opacity: 1;
+    background: var(--accent);
+  }
+
+
+  /* ========================================
+     EMPTY STATE
+     ======================================== */
+
+  .table__empty {
+    text-align: center;
+    padding: var(--space-10) var(--space-5);
+    color: var(--color-text-subtle);
+  }
+
+  .table__empty td {
+    border: none;
+  }
+
+
+  /* ========================================
+     TABLE CAPTION & FOOTER
+     ======================================== */
+
+  .table caption {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    text-align: start;
+    caption-side: bottom;
+  }
+
+  .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);
+  }
+
+
+  /* ========================================
+     RESPONSIVE: Stacked layout on mobile
+     Apply data-responsive to enable
+     ======================================== */
+
+  @media (max-width: 40rem) {
+    .table[data-responsive] thead {
+      /* Visually hide header but keep accessible */
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+    }
+
+    .table[data-responsive] tbody tr {
+      display: block;
+      padding: var(--space-4);
+      border-block-end: var(--border-width) solid var(--color-border-subtle);
+    }
+
+    .table[data-responsive] tbody tr:last-child {
+      border-block-end: none;
+    }
+
+    .table[data-responsive] td {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--space-3);
+      padding: var(--space-2) 0;
+      border: none;
+      text-align: end;
+    }
+
+    /* Use data-label for row headers on mobile */
+    .table[data-responsive] td::before {
+      content: attr(data-label);
+      font-weight: var(--weight-semibold);
+      color: var(--color-text);
+      text-align: start;
+    }
+
+    .table[data-responsive] td[data-align] {
+      text-align: end;
+    }
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .table[data-hover] tbody tr {
+      transition: none;
+    }
+  }
+}