opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/table.css

@@ -1,120 +1,130 @@
 @layer components.root {
   :where(.ui-table) {
-    --_table-border-radius: var(--border-radius);
+    --_radius: var(--ui-radius);
 
+    border: var(--ui-border-width) solid var(--ui-border-color);
     border-collapse: separate;
+    border-radius: var(--_radius);
     border-spacing: 0;
-    border: 1px solid var(--border-color);
-    border-radius: var(--_table-border-radius);
-    overflow: hidden;
     inline-size: 100%;
-    margin: var(--size-3) 0;
+    margin-block: var(--ui-space-3);
+    margin-inline: 0;
+    overflow: clip;
+    overflow-clip-margin: calc(
+      (var(--ui-focus-ring-width) + var(--ui-focus-ring-offset)) * 1.5
+    );
     position: relative;
 
     /* Rows */
-    tr {
-      &:hover {
-        background-color: oklch(from var(--surface-filled) l c h / 75%);
+    @media (hover: hover) {
+      tbody > tr:hover > :is(td, th) {
+        background-color: oklch(from var(--ui-surface-filled) l c h / 75%);
       }
     }
 
     /* Cells */
     th,
     td {
-      background-color: var(--surface-default);
-      border-inline-end: var(--border-width) solid var(--border-color);
-      border-block-end: var(--border-width) solid var(--border-color);
-      padding: var(--size-1) var(--size-2);
+      background-color: var(--ui-surface);
+      border-block-end: var(--ui-border-width) solid var(--ui-border-color);
+      border-inline-end: var(--ui-border-width) solid var(--ui-border-color);
+      font-size: var(--ui-font-size-small);
+      padding-block: var(--ui-space-1);
+      padding-inline: var(--ui-space-2);
 
       &:last-child {
         border-inline-end: none;
       }
     }
 
-    /* Remove bottom border only on the last row of the table */
-    & > *:last-child tr:last-child {
-      th,
-      td {
-        border-block-end: none;
-      }
-    }
-
     th {
-      background-color: var(--surface-filled);
-      color: var(--text-primary);
-      font-size: var(--font-size-05);
-      font-weight: 600;
+      --ui-border-color: var(--ui-border-color-on-filled);
+      --ui-field-border-color: var(--ui-field-border-color-on-filled);
+
+      background-color: var(--ui-surface-filled);
+      color: var(--ui-text-strong);
+      font-weight: var(--ui-font-weight-semibold);
       text-align: start;
     }
 
-    td {
-      font-size: var(--font-size-05);
+    :is(th, td):has(> .ui-checkbox:only-child) {
+      inline-size: 0;
+      text-align: center;
+      vertical-align: middle;
+
+      & > .ui-checkbox {
+        display: flex;
+        margin-inline: auto;
+      }
+    }
+
+    tbody :is(th[scope="row"], tr:has(> td) > th) {
+      --ui-border-color: inherit;
+
+      background-color: var(--ui-surface);
     }
 
     /* Round corner cells  */
     & > thead:first-of-type tr:first-child {
       th:first-child {
-        border-start-start-radius: var(--_table-border-radius);
+        border-start-start-radius: var(--_radius);
       }
 
       th:last-child {
-        border-start-end-radius: var(--_table-border-radius);
+        border-start-end-radius: var(--_radius);
       }
     }
 
     /* Logic for tables without thead */
     & > tbody:first-of-type:not(thead ~ tbody) tr:first-child {
-      td:first-child {
-        border-start-start-radius: var(--_table-border-radius);
+      :where(th, td):first-child {
+        border-start-start-radius: var(--_radius);
       }
 
-      td:last-child {
-        border-start-end-radius: var(--_table-border-radius);
+      :where(th, td):last-child {
+        border-start-end-radius: var(--_radius);
       }
     }
 
+    /* Remove bottom border only on the last row of the table */
     /* Logic for bottom corners (whether in tbody or tfoot) */
     & > *:last-child tr:last-child {
+      th,
+      td {
+        border-block-end: none;
+      }
+
       :where(th, td):first-child {
-        border-end-start-radius: var(--_table-border-radius);
+        border-end-start-radius: var(--_radius);
       }
 
       :where(th, td):last-child {
-        border-end-end-radius: var(--_table-border-radius);
+        border-end-end-radius: var(--_radius);
       }
     }
 
     /* Footer */
-    tfoot {
-      tr td {
-        background-color: var(--surface-filled);
-        padding-block: var(--size-2);
-      }
-
-      td {
-        color: var(--text-primary);
-        font-weight: 600;
-        border-top: var(--border-width) solid var(--border-color);
-      }
+    tfoot :where(th, td) {
+      background-color: var(--ui-surface-filled);
+      border-block-start: var(--ui-border-width) solid var(--ui-border-color);
+      color: var(--ui-text-strong);
+      font-weight: var(--ui-font-weight-semibold);
+      padding-block: var(--ui-space-2);
     }
 
     /* Caption */
     caption {
       caption-side: bottom;
-      color: var(--text-muted);
-      font-size: var(--font-size-05);
-      margin-inline-start: var(--size-2);
-      padding: var(--size-2) 0;
+      color: var(--ui-text-subtle);
+      font-size: var(--ui-font-size-small);
+      margin-inline-start: var(--ui-space-2);
+      padding-block: var(--ui-space-2);
+      padding-inline: 0;
       text-align: start;
     }
 
-    /* Header */
-    thead {
-      z-index: 1;
-    }
-
     /* Remove bottom border of the row above the footer to stay single-line */
-    tbody:has(+ tfoot) tr:last-child td {
+    tbody:has(+ tfoot) tr:last-child :where(th, td) {
       border-block-end: none;
     }
 
@@ -123,10 +133,54 @@
       border: none;
     }
 
-    @container (width < 60ch) {
-      th,
-      td {
-        padding: var(--size-1) 0.875rem;
+    /* Numbers */
+    .ui-numeric {
+      font-variant-numeric: tabular-nums;
+      text-align: end;
+    }
+
+    &.ui-flush {
+      margin-block: 0;
+    }
+
+    &.ui-overflow-scroll {
+      display: block;
+      overflow-inline: auto;
+      overscroll-behavior-inline: contain;
+      scrollbar-width: thin;
+
+      :where(th, td) {
+        white-space: nowrap;
+
+        &:last-child {
+          inline-size: 100%;
+        }
+      }
+    }
+
+    &.ui-sticky-header {
+      --_motion: var(--ui-motion);
+      --_duration: calc(var(--ui-duration) * var(--_motion));
+      --_ease: var(--ui-ease);
+      --_scroll-shadow: var(--ui-shadow-scroll);
+      --_sticky-offset: 0;
+
+      & > thead {
+        container-type: scroll-state;
+        inset-block-start: var(--_sticky-offset);
+        position: sticky;
+        z-index: 1;
+
+        th {
+          transition: box-shadow var(--_duration) var(--_ease);
+        }
+      }
+
+      @container scroll-state(stuck: block-start) {
+        & > thead th {
+          box-shadow: var(--_scroll-shadow);
+          clip-path: inset(0 0 calc(-1 * var(--ui-space-6)));
+        }
       }
     }
 
@@ -134,19 +188,11 @@
     &.ui-spacious {
       th,
       td {
-        padding: var(--size-3);
+        padding: var(--ui-space-3);
       }
 
       caption {
-        margin-inline-start: var(--size-3);
-        padding: var(--size-2) 0;
-      }
-
-      @container (width < 60ch) {
-        th,
-        td {
-          padding: var(--size-3);
-        }
+        margin-inline-start: var(--ui-space-3);
       }
     }
 
@@ -154,19 +200,14 @@
     &.ui-dense {
       th,
       td {
-        padding: var(--size-1);
+        line-height: var(--ui-line-height-tight);
+        padding-block: calc(var(--ui-space-1) / 2);
+        padding-inline: var(--ui-space-1);
       }
 
       caption {
-        margin-inline-start: var(--size-1);
-        padding: var(--size-1) 0;
-      }
-
-      @container (width < 60ch) {
-        th,
-        td {
-          padding: var(--size-1);
-        }
+        margin-inline-start: var(--ui-space-1);
+        padding-block: var(--ui-space-1);
       }
     }
   }

package/css/components/tabs.css

@@ -1,84 +1,278 @@
 @layer components.root {
   :where(.ui-tabs) {
-    --_accent-color: var(--primary);
-    --_bg-color: transparent;
+    --_motion: var(--ui-motion);
+    --_duration: calc(var(--ui-duration-fast) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_focus-ring-duration: calc(var(--ui-duration) * var(--_motion));
+    --_indicator-bg-color: transparent;
+    --_indicator-size: var(--ui-border-width-thick);
+    --_inset: calc(var(--ui-space-1) - var(--_track-border-width));
+    --_radius: var(--ui-radius);
+    --_selected-bg-color: light-dark(
+      var(--ui-surface),
+      oklch(100% 0 0 / var(--ui-state-hover-alpha-dark))
+    );
+    --_selected-border-color: var(
+      --ui-control-border-color,
+      var(--ui-field-border-color)
+    );
+    --_selected-shadow: var(--ui-shadow-selected);
+    --_selected-text-color: var(--ui-tabs-accent, var(--ui-text-strong));
+    --_text-color: var(--ui-text-subtle);
+    --_track-bg-color: var(--ui-surface-tonal);
+    --_track-border-color: transparent;
+    --_track-border-width: var(--ui-border-width);
 
     align-items: flex-start;
     display: flex;
     flex-wrap: wrap;
-    gap: 0 var(--size-1);
+    gap: 0;
     position: relative;
 
-    & > .ui-tab-input[type="radio"] {
-      /* utils > .ui-sr-only */
+    & > .ui-input[type="radio"] {
       /* TODO: use mixin for this when available */
-      block-size: 1px;
+      block-size: 1lh;
       clip-path: inset(50%);
-      inline-size: 1px;
+      inline-size: 1ch;
       overflow: hidden;
       position: absolute;
       white-space: nowrap;
 
       &:checked {
         /* Checked Tab */
-        & + [role="tab"],
-        & + .ui-tab-label {
-          border-block-end-color: var(--_accent-color);
-          color: var(--_accent-color);
+        & + .ui-label {
+          color: var(--_selected-text-color);
+
+          &::before {
+            background-color: var(--_selected-bg-color);
+            border-color: var(--_selected-border-color);
+            box-shadow: var(--_selected-shadow);
+          }
+
+          &::after {
+            opacity: 1;
+          }
 
           /* Checked Panel */
-          & + [role="tabpanel"],
-          & + .ui-tab-panel {
+          & + .ui-panel {
             display: block;
           }
         }
       }
 
       &:focus-visible {
-        & + [role="tab"],
-        & + .ui-tab-label {
-          --focus-ring-color: var(--text-muted);
-          --focus-ring-offset: calc(-1 * var(--size-2));
-          outline: var(--focus-ring-width) var(--focus-ring-style)
-            var(--focus-ring-color);
-          outline-offset: var(--focus-ring-offset);
+        & + .ui-label {
+          z-index: 1;
+
+          &::before {
+            animation: ui-focus-ring var(--_focus-ring-duration) var(--_ease);
+            outline: var(--ui-focus-ring-width) var(--ui-focus-ring-style)
+              var(--ui-focus-ring-color);
+            outline-offset: var(--ui-focus-ring-offset);
+          }
         }
       }
     }
 
     /* Tab */
-    & > [role="tab"],
-    & > .ui-tab-label {
+    & > .ui-label {
       align-items: center;
-      background-color: transparent;
-      border-bottom: 2px solid transparent;
-      border-radius: 0;
-      color: var(--text-muted);
+      background-color: var(--_track-bg-color);
+      border-block: var(--_track-border-width) solid var(--_track-border-color);
+      color: var(--_text-color);
       cursor: pointer;
       display: inline-flex;
-      font-weight: 600;
+      font-size: var(--ui-font-size-control);
+      font-weight: var(--ui-font-weight-medium);
+      gap: var(--ui-space-2);
+      isolation: isolate;
       justify-content: center;
-      line-height: var(--font-lineheight-4);
+      line-height: var(--ui-line-height-relaxed);
       order: 1;
-      padding: var(--size-2) var(--size-3);
+      padding-block: calc(
+        var(--ui-space-1) + var(--_inset) - var(--_track-border-width)
+      );
+      padding-inline: var(--ui-space-3);
       position: relative;
-      transition: color 0.1s;
+      transition: color var(--_duration) var(--_ease);
+      -webkit-user-select: none;
       user-select: none;
+      white-space: nowrap;
 
-      &:hover {
-        background-color: light-dark(
-          oklch(from var(--_accent-color) calc(l * 0.75) none h / 5%),
-          oklch(from var(--_accent-color) calc(l * 1.25) none h / 5%)
+      &::before {
+        border: var(--ui-border-width) solid transparent;
+        border-radius: calc(
+          var(--_radius) - var(--_inset) - var(--_track-border-width)
         );
+        content: "";
+        inset-block: var(--_inset);
+        inset-inline: 0;
+        position: absolute;
+        transition:
+          background-color var(--_duration) var(--_ease),
+          box-shadow var(--_duration) var(--_ease);
+        z-index: -1;
+      }
+
+      &::after {
+        background-color: var(--_indicator-bg-color);
+        block-size: var(--_indicator-size);
+        border-radius: var(--_indicator-size);
+        content: "";
+        inset-block-end: 0;
+        inset-inline: 0;
+        opacity: 0;
+        position: absolute;
+        transition: opacity var(--_duration) var(--_ease);
+      }
+
+      &:nth-child(1 of .ui-label) {
+        border-end-start-radius: var(--_radius);
+        border-inline-start: var(--_track-border-width) solid
+          var(--_track-border-color);
+        border-start-start-radius: var(--_radius);
+        padding-inline-start: calc(
+          var(--ui-space-3) + var(--_inset) - var(--_track-border-width)
+        );
+
+        &::before {
+          inset-inline-start: var(--_inset);
+        }
+      }
+
+      &:nth-last-child(1 of .ui-label) {
+        border-end-end-radius: var(--_radius);
+        border-inline-end: var(--_track-border-width) solid
+          var(--_track-border-color);
+        border-start-end-radius: var(--_radius);
+        padding-inline-end: calc(
+          var(--ui-space-3) + var(--_inset) - var(--_track-border-width)
+        );
+
+        &::before {
+          inset-inline-end: var(--_inset);
+        }
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          color: var(--ui-text-strong);
+        }
       }
     }
 
     /* Tab Panel */
-    & > [role="tabpanel"],
-    & > .ui-tab-panel {
+    & > .ui-panel {
       display: none;
       inline-size: 100%;
+      margin-block-start: var(--ui-space-2);
       order: 2;
     }
+
+    &.ui-filled {
+      --_selected-bg-color: var(--ui-selected-strong);
+      --_selected-border-color: transparent;
+      --_selected-text-color: var(--ui-on-selected-strong);
+    }
+
+    &.ui-line {
+      --_indicator-bg-color: var(--ui-tabs-accent, var(--ui-text-strong));
+      --_inset: 0px;
+      --_selected-bg-color: transparent;
+      --_selected-border-color: transparent;
+      --_selected-shadow: none;
+      --_track-bg-color: transparent;
+      --_track-border-width: 0px;
+
+      column-gap: var(--ui-space-1);
+    }
+
+    &.ui-outlined {
+      --_selected-bg-color: var(--ui-surface-tonal);
+      --_selected-border-color: transparent;
+      --_selected-shadow: none;
+      --_track-bg-color: transparent;
+      --_track-border-color: var(
+        --ui-control-border-color,
+        var(--ui-border-color)
+      );
+    }
+
+    :where(.ui-accordion, .ui-card, .ui-dialog) > & {
+      & > .ui-input[type="radio"]:focus-visible + .ui-label::before {
+        outline-offset: var(--ui-focus-ring-inset);
+      }
+
+      &.ui-filled > .ui-input:checked + .ui-label::before {
+        --ui-focus-ring-color: var(--ui-on-selected-strong);
+      }
+    }
+
+    &.ui-overflow-scroll {
+      column-gap: 0;
+      container-type: inline-size;
+      display: grid;
+      grid-auto-columns: max-content;
+      overflow-inline: auto;
+      overscroll-behavior-inline: contain;
+      scrollbar-width: thin;
+
+      & > .ui-input[type="radio"] {
+        grid-column: calc((sibling-index() + 2) / 3) / span 1;
+        grid-row: 1 / span 1;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        margin: 0;
+
+        &:focus-visible {
+          & + .ui-label::before {
+            outline-offset: var(--ui-focus-ring-inset);
+          }
+        }
+      }
+
+      &.ui-filled > .ui-input:checked + .ui-label::before {
+        --ui-focus-ring-color: var(--ui-on-selected-strong);
+      }
+
+      & > .ui-label {
+        grid-row: 1;
+      }
+
+      & > .ui-panel {
+        grid-column: 1 / span calc(sibling-count() / 3);
+        grid-row: 2;
+        inline-size: 100cqi;
+        inset-inline-start: 0;
+        margin-inline-end: -100cqi;
+        position: sticky;
+      }
+
+      &.ui-line {
+        & > .ui-label {
+          &:not(:nth-last-child(1 of .ui-label)) {
+            margin-inline-end: var(--ui-space-1);
+          }
+        }
+      }
+    }
+
+    @media (forced-colors: active) {
+      & > .ui-label::before {
+        border-color: Canvas;
+      }
+
+      & > .ui-input:checked + .ui-label {
+        --_indicator-bg-color: SelectedItem;
+        --_selected-bg-color: SelectedItem;
+        --_selected-border-color: SelectedItem;
+        --_selected-text-color: SelectedItemText;
+        --_track-bg-color: Canvas;
+        --ui-focus-ring-color: CanvasText;
+
+        border-color: CanvasText;
+        forced-color-adjust: none;
+      }
+    }
   }
 }