nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.3

data/src/stylesheets/nitro_kit/components/table.css

@@ -3,6 +3,8 @@
     inline-size: 100%;
     overflow-x: auto;
     color: var(--nk-color-foreground);
+    scrollbar-width: thin;
+    scrollbar-color: var(--nk-color-border) transparent;
     -webkit-overflow-scrolling: touch;
   }
 
@@ -22,12 +24,14 @@
     border-block-end: var(--nk-border-width) solid var(--nk-color-border);
   }
 
+  /* min-block-size is undefined on table cells, so the 40px minimum comes
+     from padding around a single line box instead. */
   :where(
-    [data-nk="table"] [data-slot="table-header"],
-    [data-nk="table"] [data-slot="table-cell"]
-  ) {
-    min-block-size: var(--nk-control-height-md);
-    padding: calc(var(--nk-space) * 2);
+      [data-nk="table"] [data-slot="table-header"],
+      [data-nk="table"] [data-slot="table-cell"]
+    ) {
+    padding-block: calc((var(--nk-control-height-md) - 1lh) / 2);
+    padding-inline: calc(var(--nk-space) * 2);
     text-align: start;
     vertical-align: middle;
   }
@@ -42,8 +46,8 @@
     align-items: center;
     min-block-size: var(--nk-control-height-md);
     gap: calc(var(--nk-space) * 1.5);
-    margin-block: calc(var(--nk-space) * -2);
-    padding-block: calc(var(--nk-space) * 2);
+    margin-block: calc((var(--nk-control-height-md) - 1lh) / -2);
+    padding-block: calc((var(--nk-control-height-md) - 1lh) / 2);
     color: inherit;
     text-decoration: none;
   }
@@ -56,25 +60,25 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="table"]
-      [data-slot="table-header"]:is(
-        [aria-sort="ascending"],
-        [aria-sort="descending"]
-      )
-      [data-slot="table-sort"]
-  ) {
+      [data-nk="table"]
+        [data-slot="table-header"]:is(
+          [aria-sort="ascending"],
+          [aria-sort="descending"]
+        )
+        [data-slot="table-sort"]
+    ) {
     color: var(--nk-color-foreground);
     font-weight: var(--nk-font-weight-semibold);
   }
 
   :where(
-    [data-nk="table"]
-      [data-slot="table-header"]:is(
-        [aria-sort="ascending"],
-        [aria-sort="descending"]
-      )
-      [data-slot="table-sort-indicator"]
-  ) {
+      [data-nk="table"]
+        [data-slot="table-header"]:is(
+          [aria-sort="ascending"],
+          [aria-sort="descending"]
+        )
+        [data-slot="table-sort-indicator"]
+    ) {
     color: var(--nk-color-primary);
     opacity: 1;
   }
@@ -85,10 +89,10 @@
     }
 
     :where(
-      [data-nk="table"]
-        [data-slot="table-sort"]:hover
-        [data-slot="table-sort-indicator"]
-    ) {
+        [data-nk="table"]
+          [data-slot="table-sort"]:hover
+          [data-slot="table-sort-indicator"]
+      ) {
       opacity: 1;
     }
   }
@@ -101,15 +105,15 @@
 
 @layer nitro-kit.compound {
   :where(
-    [data-nk="table"] [data-slot="table-header"][data-align="center"],
-    [data-nk="table"] [data-slot="table-cell"][data-align="center"]
-  ) {
+      [data-nk="table"] [data-slot="table-header"][data-align="center"],
+      [data-nk="table"] [data-slot="table-cell"][data-align="center"]
+    ) {
     text-align: center;
   }
   :where(
-    [data-nk="table"] [data-slot="table-header"][data-align="right"],
-    [data-nk="table"] [data-slot="table-cell"][data-align="right"]
-  ) {
+      [data-nk="table"] [data-slot="table-header"][data-align="right"],
+      [data-nk="table"] [data-slot="table-cell"][data-align="right"]
+    ) {
     font-variant-numeric: tabular-nums;
     text-align: right;
   }

data/src/stylesheets/nitro_kit/components/tabs.css

@@ -1,26 +1,29 @@
 @layer nitro-kit.base {
   :where([data-nk="tabs"]) {
-    width: 100%;
+    inline-size: 100%;
     color: var(--nk-color-foreground);
   }
 
   :where([data-nk="tabs"] > [data-slot="tabs-list"]) {
     display: flex;
-    max-width: 100%;
+    max-inline-size: 100%;
     overflow-x: auto;
     border-block-end: var(--nk-border-width) solid var(--nk-color-border);
   }
 
   :where([data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]) {
-    display: flex;
-    min-height: 2.5rem;
-    align-items: center;
-    justify-content: center;
+    display: block;
+    min-inline-size: 0;
+    min-block-size: var(--nk-control-height-md);
+    align-content: center;
     padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
     font: inherit;
     font-weight: var(--nk-font-weight-medium);
     color: var(--nk-color-muted-foreground);
+    text-align: center;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     cursor: pointer;
     background: transparent;
     border: 0;
@@ -44,8 +47,8 @@
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"]
+    ) {
     flex-direction: column;
     grid-column: 1;
     grid-row: 1;
@@ -56,27 +59,26 @@
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"]
-  ) {
-    justify-content: flex-start;
+      [data-nk="tabs"][data-orientation="vertical"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"]
+    ) {
     text-align: start;
     border-block-end: 0;
     border-inline-end: var(--nk-focus-width) solid transparent;
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"][aria-selected="true"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"][aria-selected="true"]
+    ) {
     border-inline-end-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-panel"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-panel"]
+    ) {
     grid-column: 2;
     grid-row: 1;
     padding-block-start: calc(var(--nk-space) * 2);
@@ -86,43 +88,45 @@
 @layer nitro-kit.state {
   @media (hover: hover) {
     :where(
-      [data-nk="tabs"]
-        > [data-slot="tabs-list"]
-        > [data-slot="tabs-tab"]:hover:not(:disabled)
-    ) {
+        [data-nk="tabs"]
+          > [data-slot="tabs-list"]
+          > [data-slot="tabs-tab"]:hover:not(:disabled)
+      ) {
       color: var(--nk-color-foreground);
     }
   }
 
   :where(
-    [data-nk="tabs"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"][aria-selected="true"]
-  ) {
+      [data-nk="tabs"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"][aria-selected="true"]
+    ) {
     color: var(--nk-color-foreground);
     border-block-end-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="tabs"][data-orientation="vertical"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"][aria-selected="true"]
-  ) {
+      [data-nk="tabs"][data-orientation="vertical"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"][aria-selected="true"]
+    ) {
     border-block-end-color: transparent;
   }
 
   :where(
-    [data-nk="tabs"]
-      > [data-slot="tabs-list"]
-      > [data-slot="tabs-tab"]:focus-visible
-  ) {
+      [data-nk="tabs"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"]:focus-visible
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: calc(var(--nk-focus-offset) * -1);
   }
 
   :where(
-    [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]:disabled
-  ) {
+      [data-nk="tabs"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"]:disabled
+    ) {
     color: var(--nk-color-muted-foreground);
     cursor: not-allowed;
     opacity: 0.55;
@@ -130,8 +134,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     :where(
-      [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]
-    ) {
+        [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]
+      ) {
       transition-duration: 0.01ms;
     }
   }

data/src/stylesheets/nitro_kit/components/toast.css

@@ -73,7 +73,11 @@
       var(--nk-color-surface)
     );
     --_nk-toast-foreground: var(--nk-color-info-content);
-    --_nk-toast-border: var(--nk-color-info);
+    --_nk-toast-border: color-mix(
+      in oklab,
+      var(--nk-color-info) 45%,
+      transparent
+    );
   }
 
   :where([data-nk="toast-item"][data-variant="success"]) {
@@ -83,7 +87,11 @@
       var(--nk-color-surface)
     );
     --_nk-toast-foreground: var(--nk-color-success-content);
-    --_nk-toast-border: var(--nk-color-success);
+    --_nk-toast-border: color-mix(
+      in oklab,
+      var(--nk-color-success) 45%,
+      transparent
+    );
   }
 
   :where([data-nk="toast-item"][data-variant="warning"]) {
@@ -93,7 +101,11 @@
       var(--nk-color-surface)
     );
     --_nk-toast-foreground: var(--nk-color-warning-content);
-    --_nk-toast-border: var(--nk-color-warning);
+    --_nk-toast-border: color-mix(
+      in oklab,
+      var(--nk-color-warning) 45%,
+      transparent
+    );
   }
 
   :where([data-nk="toast-item"][data-variant="error"]) {
@@ -103,7 +115,11 @@
       var(--nk-color-surface)
     );
     --_nk-toast-foreground: var(--nk-color-danger-content);
-    --_nk-toast-border: var(--nk-color-danger);
+    --_nk-toast-border: color-mix(
+      in oklab,
+      var(--nk-color-danger) 45%,
+      transparent
+    );
   }
 }
 
@@ -118,11 +134,6 @@
     transform: translateY(calc(var(--nk-space) * 3));
   }
 
-  :where([data-nk="toast-item"]:focus-visible) {
-    outline: var(--nk-focus-width) solid var(--nk-color-focus);
-    outline-offset: var(--nk-focus-offset);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     :where([data-nk="toast-item"]) {
       transition-duration: 0.01ms;

data/src/stylesheets/nitro_kit/components/toolbar.css

@@ -9,9 +9,9 @@
   }
 
   :where(
-    [data-nk="toolbar"] > [data-slot="toolbar-leading"],
-    [data-nk="toolbar"] > [data-slot="toolbar-trailing"]
-  ) {
+      [data-nk="toolbar"] > [data-slot="toolbar-leading"],
+      [data-nk="toolbar"] > [data-slot="toolbar-trailing"]
+    ) {
     display: flex;
     min-width: 0;
     /* Regions never exceed the toolbar, so nested content such as a
@@ -26,10 +26,20 @@
     justify-content: flex-end;
     margin-inline-start: auto;
   }
+
+  /* Nested scroll regions such as a clipped ButtonGroup keep a visible
+     scrollbar so cropped actions read as scrollable. */
+  :where(
+      [data-nk="toolbar"] > [data-slot="toolbar-leading"] > *,
+      [data-nk="toolbar"] > [data-slot="toolbar-trailing"] > *
+    ) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--nk-color-border) transparent;
+  }
 }
 
 @layer nitro-kit.state {
-  @media (max-width: 48rem) {
+  @media (width < 48rem) {
     :where([data-nk="toolbar"]) {
       flex-direction: column;
       align-items: stretch;
@@ -39,40 +49,5 @@
       justify-content: flex-start;
       margin-inline-start: 0;
     }
-
-    :where(
-      [data-nk="app-shell"]
-        > [data-slot="app-shell-header"]
-        > [data-slot="app-shell-topbar"]
-        > [data-nk="toolbar"]
-    ) {
-      flex-direction: row;
-      flex-wrap: nowrap;
-      align-items: center;
-    }
-
-    :where(
-      [data-nk="app-shell"]
-        > [data-slot="app-shell-header"]
-        > [data-slot="app-shell-topbar"]
-        > [data-nk="toolbar"]
-        > [data-slot="toolbar-leading"]
-    ) {
-      flex: 1 1 auto;
-      flex-wrap: nowrap;
-      overflow: hidden;
-    }
-
-    :where(
-      [data-nk="app-shell"]
-        > [data-slot="app-shell-header"]
-        > [data-slot="app-shell-topbar"]
-        > [data-nk="toolbar"]
-        > [data-slot="toolbar-trailing"]
-    ) {
-      flex: 0 0 auto;
-      justify-content: flex-end;
-      margin-inline-start: auto;
-    }
   }
 }

data/src/stylesheets/nitro_kit/components/tooltip.css

@@ -10,17 +10,20 @@
     inline-size: max-content;
     max-inline-size: min(20rem, calc(100vw - (var(--nk-space) * 8)));
     padding: calc(var(--nk-space) * 1.5) calc(var(--nk-space) * 2.5);
-    color: var(--nk-color-primary-foreground);
+    color: var(--nk-color-foreground);
     font-size: var(--nk-text-xs);
     line-height: var(--nk-leading-normal);
     text-wrap: pretty;
     pointer-events: auto;
     visibility: hidden;
-    background: var(--nk-color-primary);
+    background: var(--nk-color-elevated);
+    border: var(--nk-border-width) solid var(--nk-color-border);
     border-radius: var(--nk-radius-md);
     box-shadow: var(--nk-shadow-sm);
     opacity: 0;
-    transition: opacity var(--nk-duration-fast) var(--nk-ease);
+    transition:
+      opacity var(--nk-duration-fast) var(--nk-ease),
+      visibility var(--nk-duration-fast) var(--nk-ease) allow-discrete;
   }
 
   :where([data-nk="tooltip"] > [data-slot="tooltip-content"]::before) {
@@ -29,68 +32,70 @@
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="top"] > [data-slot="tooltip-content"]
-  ) {
+      [data-nk="tooltip"][data-placement="top"] > [data-slot="tooltip-content"]
+    ) {
     inset-block-end: calc(100% + (var(--nk-space) * 2));
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="top"]
-      > [data-slot="tooltip-content"]::before
-  ) {
+      [data-nk="tooltip"][data-placement="top"]
+        > [data-slot="tooltip-content"]::before
+    ) {
     inset-block-start: 100%;
     inset-inline: 0;
     block-size: calc(var(--nk-space) * 2);
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="right"] > [data-slot="tooltip-content"]
-  ) {
+      [data-nk="tooltip"][data-placement="right"]
+        > [data-slot="tooltip-content"]
+    ) {
     inset-block-start: 50%;
     inset-inline-start: calc(100% + (var(--nk-space) * 2));
     transform: translateY(-50%);
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="right"]
-      > [data-slot="tooltip-content"]::before
-  ) {
+      [data-nk="tooltip"][data-placement="right"]
+        > [data-slot="tooltip-content"]::before
+    ) {
     inset-block: 0;
     inset-inline-end: 100%;
     inline-size: calc(var(--nk-space) * 2);
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="bottom"] > [data-slot="tooltip-content"]
-  ) {
+      [data-nk="tooltip"][data-placement="bottom"]
+        > [data-slot="tooltip-content"]
+    ) {
     inset-block-start: calc(100% + (var(--nk-space) * 2));
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="bottom"]
-      > [data-slot="tooltip-content"]::before
-  ) {
+      [data-nk="tooltip"][data-placement="bottom"]
+        > [data-slot="tooltip-content"]::before
+    ) {
     inset-block-end: 100%;
     inset-inline: 0;
     block-size: calc(var(--nk-space) * 2);
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="left"] > [data-slot="tooltip-content"]
-  ) {
+      [data-nk="tooltip"][data-placement="left"] > [data-slot="tooltip-content"]
+    ) {
     inset-block-start: 50%;
     inset-inline-end: calc(100% + (var(--nk-space) * 2));
     transform: translateY(-50%);
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="left"]
-      > [data-slot="tooltip-content"]::before
-  ) {
+      [data-nk="tooltip"][data-placement="left"]
+        > [data-slot="tooltip-content"]::before
+    ) {
     inset-block: 0;
     inset-inline-start: 100%;
     inline-size: calc(var(--nk-space) * 2);
@@ -99,18 +104,18 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="tooltip"]:not([data-dismissed]):focus-within
-      > [data-slot="tooltip-content"]
-  ) {
+      [data-nk="tooltip"]:not([data-dismissed]):focus-within
+        > [data-slot="tooltip-content"]
+    ) {
     visibility: visible;
     opacity: 1;
   }
 
   @media (hover: hover) {
     :where(
-      [data-nk="tooltip"]:not([data-dismissed]):hover
-        > [data-slot="tooltip-content"]
-    ) {
+        [data-nk="tooltip"]:not([data-dismissed]):hover
+          > [data-slot="tooltip-content"]
+      ) {
       visibility: visible;
       opacity: 1;
     }