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

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

@@ -7,16 +7,16 @@
   }
 
   :where(
-    [data-nk="appearance-picker"] > [data-slot="appearance-picker-legend"]
-  ) {
+      [data-nk="appearance-picker"] > [data-slot="appearance-picker-legend"]
+    ) {
     padding: 0;
     font-size: var(--nk-text-sm);
     font-weight: var(--nk-font-weight-semibold);
   }
 
   :where(
-    [data-nk="appearance-picker"] > [data-slot="appearance-picker-options"]
-  ) {
+      [data-nk="appearance-picker"] > [data-slot="appearance-picker-options"]
+    ) {
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--nk-space) * 3);
@@ -24,16 +24,16 @@
   }
 
   :where(
-    [data-nk="appearance-picker"][data-presentation="radios"]
-      > [data-slot="appearance-picker-options"]
-  ) {
+      [data-nk="appearance-picker"][data-presentation="radios"]
+        > [data-slot="appearance-picker-options"]
+    ) {
     display: grid;
   }
 
   :where(
-    [data-nk="appearance-picker"][data-presentation="segmented"]
-      > [data-slot="appearance-picker-options"]
-  ) {
+      [data-nk="appearance-picker"][data-presentation="segmented"]
+        > [data-slot="appearance-picker-options"]
+    ) {
     display: inline-flex;
     gap: 0;
     padding: var(--nk-space);
@@ -51,8 +51,8 @@
   }
 
   :where(
-    [data-nk="appearance-picker"] [data-slot="appearance-picker-control"]
-  ) {
+      [data-nk="appearance-picker"] [data-slot="appearance-picker-control"]
+    ) {
     inline-size: 1.125rem;
     block-size: 1.125rem;
     margin: 0;
@@ -61,26 +61,26 @@
   }
 
   :where(
-    [data-nk="appearance-picker"][data-presentation="segmented"]
-      [data-slot="appearance-picker-option"]
-  ) {
+      [data-nk="appearance-picker"][data-presentation="segmented"]
+        [data-slot="appearance-picker-option"]
+    ) {
     position: relative;
     padding-inline: calc(var(--nk-space) * 3);
     border-radius: calc(var(--nk-radius-md) - var(--nk-space));
   }
 
   :where(
-    [data-nk="appearance-picker"][data-presentation="segmented"]
-      [data-slot="appearance-picker-control"]
-  ) {
+      [data-nk="appearance-picker"][data-presentation="segmented"]
+        [data-slot="appearance-picker-control"]
+    ) {
     position: absolute;
     opacity: 0;
   }
 
   :where(
-    [data-nk="appearance-picker"][data-presentation="select"]
-      > [data-slot="appearance-picker-select"]
-  ) {
+      [data-nk="appearance-picker"][data-presentation="select"]
+        > [data-slot="appearance-picker-select"]
+    ) {
     display: block;
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
@@ -96,21 +96,31 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="appearance-picker"][data-presentation="segmented"][data-state="light"]
-      [data-slot="appearance-picker-option"]:has([value="light"]),
-    [data-nk="appearance-picker"][data-presentation="segmented"][data-state="dark"]
-      [data-slot="appearance-picker-option"]:has([value="dark"]),
-    [data-nk="appearance-picker"][data-presentation="segmented"][data-state="system"]
-      [data-slot="appearance-picker-option"]:has([value="system"])
-  ) {
+      [data-nk="appearance-picker"][data-presentation="segmented"]
+        [data-slot="appearance-picker-option"]:has(
+          [data-slot="appearance-picker-control"]:checked
+        )
+    ) {
     background: var(--nk-color-surface);
     box-shadow: var(--nk-shadow-sm);
   }
 
   :where(
-    [data-nk="appearance-picker"]
-      [data-slot="appearance-picker-control"]:focus-visible
-  ) {
+      [data-nk="appearance-picker"]
+        [data-slot="appearance-picker-control"]:focus-visible
+    ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  /* The segmented control is visually hidden, so its focus ring must show on
+     the segment that contains it. */
+  :where(
+      [data-nk="appearance-picker"][data-presentation="segmented"]
+        [data-slot="appearance-picker-option"]:has(
+          [data-slot="appearance-picker-control"]:focus-visible
+        )
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: var(--nk-focus-offset);
   }

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

@@ -28,9 +28,9 @@
   }
 
   :where(
-    [data-nk="avatar"] > [data-slot="avatar-fallback"],
-    [data-nk="avatar"] > [data-slot="avatar-image"]
-  ) {
+      [data-nk="avatar"] > [data-slot="avatar-fallback"],
+      [data-nk="avatar"] > [data-slot="avatar-image"]
+    ) {
     grid-area: 1 / 1;
     width: 100%;
     height: 100%;

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

@@ -1,21 +1,35 @@
 @layer nitro-kit.compound {
   :where([data-nk="avatar-stack"]) {
+    --_nk-avatar-stack-overlap: calc(var(--nk-space) * -3);
+
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
   }
 
+  :where([data-nk="avatar-stack"][data-size="xs"]) {
+    --_nk-avatar-stack-overlap: calc(var(--nk-space) * -1.5);
+  }
+
+  :where([data-nk="avatar-stack"][data-size="sm"]) {
+    --_nk-avatar-stack-overlap: calc(var(--nk-space) * -2);
+  }
+
+  :where([data-nk="avatar-stack"][data-size="lg"]) {
+    --_nk-avatar-stack-overlap: calc(var(--nk-space) * -4);
+  }
+
   /* Stacked items overlap the ring of the item behind them, so a translucent
      fill would let that ring show through. Each item paints its own fill as a
      background image over an opaque surface underlay. */
   :where(
-    [data-nk="avatar-stack"] > [data-slot="avatar-stack-avatar"],
-    [data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]
-  ) {
+      [data-nk="avatar-stack"] > [data-slot="avatar-stack-avatar"],
+      [data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]
+    ) {
     --_nk-avatar-stack-fill: var(--nk-color-muted);
 
     flex: none;
-    margin-inline-start: calc(var(--nk-space) * -3);
+    margin-inline-start: var(--_nk-avatar-stack-overlap);
     background-color: var(--nk-color-surface);
     background-image: linear-gradient(
       var(--_nk-avatar-stack-fill),
@@ -25,15 +39,18 @@
   }
 
   :where(
-    [data-nk="avatar-stack"] > [data-slot="avatar-stack-avatar"]:first-child,
-    [data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]:first-child
-  ) {
+      [data-nk="avatar-stack"] > [data-slot="avatar-stack-avatar"]:first-child,
+      [data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]:first-child
+    ) {
     margin-inline-start: 0;
   }
 
   :where([data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]) {
     --_nk-avatar-stack-fill: var(--nk-color-elevated);
 
+    /* Preceding avatars are positioned, so the overflow chip must be too or
+       their paint order covers its leading "+". */
+    position: relative;
     display: inline-grid;
     place-items: center;
     font-weight: var(--nk-font-weight-semibold);
@@ -43,36 +60,36 @@
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="xs"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
+      [data-nk="avatar-stack"][data-size="xs"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
     width: 1.5rem;
     height: 1.5rem;
     font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="sm"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
+      [data-nk="avatar-stack"][data-size="sm"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
     width: 2rem;
     height: 2rem;
     font-size: var(--nk-text-xs);
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="md"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
+      [data-nk="avatar-stack"][data-size="md"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
     width: 3rem;
     height: 3rem;
     font-size: var(--nk-text-sm);
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="lg"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
+      [data-nk="avatar-stack"][data-size="lg"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
     width: 4rem;
     height: 4rem;
     font-size: var(--nk-text-base);

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

@@ -3,7 +3,7 @@
     --_nk-button-height: var(--nk-control-height-md);
     --_nk-button-padding: calc(var(--nk-space) * 4);
     --_nk-button-icon-padding: calc(var(--nk-space) * 3);
-    --_nk-button-radius: var(--nk-radius-lg);
+    --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-lg));
     --_nk-button-font-size: var(--nk-text-sm);
     --_nk-button-line-height: 1.25rem;
     --_nk-button-background: var(--nk-button-default-background);
@@ -52,10 +52,10 @@
   }
 
   :where(
-    [data-nk="button"] > [data-slot="button-icon-start"],
-    [data-nk="button"] > [data-slot="button-icon-end"],
-    [data-nk="button"] > [data-slot="button-spinner"]
-  ) {
+      [data-nk="button"] > [data-slot="button-icon-start"],
+      [data-nk="button"] > [data-slot="button-icon-end"],
+      [data-nk="button"] > [data-slot="button-spinner"]
+    ) {
     display: inline-flex;
     flex: none;
   }
@@ -66,18 +66,27 @@
   }
 
   :where([data-nk="button"] > [data-slot="button-label"]) {
+    display: inline-flex;
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
+  /* text-overflow never applies inside a flex container, so text-only labels
+     become blocks to keep a visible ellipsis under pressure. */
+  :where([data-nk="button"] > [data-slot="button-label"]:not(:has(*))) {
+    display: block;
+  }
+
   :where(
-    [data-nk="button"]:has(> [data-slot="button-icon-start"]),
-    [data-nk="button"]:has(> [data-slot="button-spinner"]),
-    [data-nk="button"]:has(
-      > [data-slot="button-submission-spinner"][data-state="visible"]
-    )
-  ) {
+      [data-nk="button"]:has(> [data-slot="button-icon-start"]),
+      [data-nk="button"]:has(> [data-slot="button-spinner"]),
+      [data-nk="button"]:has(
+          > [data-slot="button-submission-spinner"][data-state="visible"]
+        )
+    ) {
     padding-inline-start: var(--_nk-button-icon-padding);
   }
 
@@ -86,12 +95,12 @@
   }
 
   :where(
-    [data-nk="button"]:not(:has(> [data-slot="button-label"])):has(
-        > [data-slot="button-icon-start"],
-        > [data-slot="button-icon-end"],
-        > [data-slot="button-spinner"]
-      )
-  ) {
+      [data-nk="button"]:not(:has(> [data-slot="button-label"])):has(
+          > [data-slot="button-icon-start"],
+          > [data-slot="button-icon-end"],
+          > [data-slot="button-spinner"]
+        )
+    ) {
     inline-size: var(--_nk-button-height);
     padding-inline: 0;
   }
@@ -114,8 +123,8 @@
     --_nk-button-border-width: 0;
     --_nk-button-border: transparent;
     --_nk-button-border-bottom: transparent;
-    --_nk-button-shadow:
-      inset 0 1px var(--nk-color-danger), inset 0 2px oklch(1 0 0 / 0.15);
+    --_nk-button-shadow: inset 0 1px var(--nk-color-danger),
+      inset 0 2px oklch(1 0 0 / 0.15);
   }
 
   :where([data-nk="button"][data-variant="ghost"]) {
@@ -124,10 +133,7 @@
       oklch(0.274 0.006 286.033 / 0.05),
       oklch(1 0 0 / 0.15)
     );
-    --_nk-button-foreground: light-dark(
-      oklch(0.274 0.006 286.033),
-      oklch(1 0 0)
-    );
+    --_nk-button-foreground: var(--nk-color-foreground);
     --_nk-button-border-width: 0;
     --_nk-button-border: transparent;
     --_nk-button-border-bottom: transparent;
@@ -136,18 +142,18 @@
 
   @media (prefers-color-scheme: dark) {
     :where(
-      :root:not([data-theme])
-        [data-nk="button"]:is(
-          [data-variant="primary"],
-          [data-variant="destructive"]
-        )
-    ) {
+        :root:not([data-theme])
+          [data-nk="button"]:is(
+            [data-variant="primary"],
+            [data-variant="destructive"]
+          )
+      ) {
       --_nk-button-border-width: 0;
     }
 
     :where(
-      :root:not([data-theme]) [data-nk="button"][data-variant="destructive"]
-    ) {
+        :root:not([data-theme]) [data-nk="button"][data-variant="destructive"]
+      ) {
       --_nk-button-shadow: none;
     }
   }
@@ -166,7 +172,7 @@
     --_nk-button-height: var(--nk-control-height-xs);
     --_nk-button-padding: calc(var(--nk-space) * 2);
     --_nk-button-icon-padding: var(--nk-space);
-    --_nk-button-radius: var(--nk-radius-md);
+    --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-md));
     --_nk-button-font-size: var(--nk-text-xs);
     --_nk-button-line-height: 1rem;
     --_nk-button-avatar-size: 1rem;
@@ -177,7 +183,7 @@
     --_nk-button-height: calc(var(--nk-space) * 8);
     --_nk-button-padding: calc(var(--nk-space) * 3);
     --_nk-button-icon-padding: calc(var(--nk-space) * 2);
-    --_nk-button-radius: var(--nk-radius-md);
+    --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-md));
     --_nk-button-avatar-size: 1.25rem;
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
@@ -199,7 +205,7 @@
     --_nk-button-height: var(--nk-control-height-xl);
     --_nk-button-padding: calc(var(--nk-space) * 8);
     --_nk-button-icon-padding: calc(var(--nk-space) * 7);
-    --_nk-button-radius: var(--nk-radius-xl);
+    --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-xl));
     --_nk-button-font-size: var(--nk-text-base);
     --_nk-button-line-height: 1.5rem;
     --_nk-button-avatar-size: 2rem;
@@ -221,22 +227,54 @@
   }
 
   :where(
-    [data-nk="button"]:disabled,
-    [data-nk="button"][aria-disabled="true"]
-  ) {
+      [data-nk="button"]:disabled,
+      [data-nk="button"][aria-disabled="true"]
+    ) {
     pointer-events: none;
     cursor: default;
     opacity: 0.75;
   }
 
+  /* Dark surfaces need more than reduced opacity to read a saturated
+     destructive control as disabled. */
+  @media (prefers-color-scheme: dark) {
+    :where(
+        :root:not([data-theme])
+          [data-nk="button"][data-variant="destructive"]:is(
+            :disabled,
+            [aria-disabled="true"]
+          )
+      ) {
+      --_nk-button-background: color-mix(
+        in oklab,
+        var(--nk-color-danger) 40%,
+        var(--nk-color-surface)
+      );
+    }
+  }
+
+  :where(
+      [data-theme="dark"]
+        [data-nk="button"][data-variant="destructive"]:is(
+          :disabled,
+          [aria-disabled="true"]
+        )
+    ) {
+    --_nk-button-background: color-mix(
+      in oklab,
+      var(--nk-color-danger) 40%,
+      var(--nk-color-surface)
+    );
+  }
+
   :where([data-nk="button"][aria-busy="true"] > [data-slot="button-spinner"]) {
     animation: nk-button-spin 1s linear infinite;
   }
 
   :where(
-    [data-nk="button"]
-      > [data-slot="button-submission-spinner"][data-state="visible"]
-  ) {
+      [data-nk="button"]
+        > [data-slot="button-submission-spinner"][data-state="visible"]
+    ) {
     display: inline-flex;
     animation: nk-button-spin 1s linear infinite;
   }
@@ -249,30 +287,17 @@
 
   @media (prefers-reduced-motion: reduce) {
     :where(
-      [data-nk="button"][aria-busy="true"] > [data-slot="button-spinner"],
-      [data-nk="button"]
-        > [data-slot="button-submission-spinner"][data-state="visible"]
-    ) {
+        [data-nk="button"][aria-busy="true"] > [data-slot="button-spinner"],
+        [data-nk="button"]
+          > [data-slot="button-submission-spinner"][data-state="visible"]
+      ) {
       animation: none;
     }
   }
 }
 
 @layer nitro-kit.compound {
-  :where(
-    [data-nk="button"]
-      > [data-slot="button-label"]:has(> [data-nk="avatar"])
-  ) {
-    display: inline-flex;
-    gap: calc(var(--nk-space) * 2);
-    align-items: center;
-  }
-
-  :where(
-    [data-nk="button"]
-      > [data-slot="button-label"]
-      > [data-nk="avatar"]
-  ) {
+  :where([data-nk="button"] > [data-slot="button-label"] > [data-nk="avatar"]) {
     width: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
     height: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
     font-size: min(

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

@@ -5,6 +5,8 @@
     align-items: stretch;
     max-inline-size: 100%;
     overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--nk-color-border) transparent;
     vertical-align: middle;
   }
 
@@ -16,38 +18,41 @@
   }
 
   :where(
-    [data-nk="button-group"]
-      > [data-slot="button-group-button"]:not(:first-child)
-  ) {
+      [data-nk="button-group"]
+        > [data-slot="button-group-button"]:not(:first-child)
+    ) {
     margin-inline-start: calc(var(--nk-border-width) * -1);
   }
 
   :where(
-    [data-nk="button-group"]
-      > [data-slot="button-group-button"]:not(:only-child)
-  ) {
+      [data-nk="button-group"]
+        > [data-slot="button-group-button"]:not(:only-child)
+    ) {
     border-radius: 0;
   }
 
   :where(
-    [data-nk="button-group"]
-      > [data-slot="button-group-button"]:first-child:not(:only-child)
-  ) {
+      [data-nk="button-group"]
+        > [data-slot="button-group-button"]:first-child:not(:only-child)
+    ) {
     border-start-start-radius: var(--_nk-button-radius);
     border-end-start-radius: var(--_nk-button-radius);
   }
 
   :where(
-    [data-nk="button-group"]
-      > [data-slot="button-group-button"]:last-child:not(:only-child)
-  ) {
+      [data-nk="button-group"]
+        > [data-slot="button-group-button"]:last-child:not(:only-child)
+    ) {
     border-start-end-radius: var(--_nk-button-radius);
     border-end-end-radius: var(--_nk-button-radius);
   }
 
   :where(
-    [data-nk="button-group"] > [data-slot="button-group-button"]:focus-visible
-  ) {
+      [data-nk="button-group"] > [data-slot="button-group-button"]:focus-visible
+    ) {
     z-index: 1;
+    /* The scroll container would clip an offset ring at its edges, so member
+       focus rings draw inside the member. */
+    outline-offset: calc(var(--nk-focus-offset) * -1);
   }
 }

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

@@ -16,7 +16,7 @@
 
   :where([data-nk="card"] > [data-slot="card-title"]) {
     font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    font-weight: var(--nk-font-weight-bold);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -53,13 +53,19 @@
     border-start-end-radius: calc(var(--nk-radius-lg) - var(--nk-border-width));
   }
 
+  :where([data-nk="card"] > [data-slot="card-full"]:last-child) {
+    margin-block-end: calc(var(--_nk-card-padding) * -1);
+    border-end-start-radius: calc(var(--nk-radius-lg) - var(--nk-border-width));
+    border-end-end-radius: calc(var(--nk-radius-lg) - var(--nk-border-width));
+  }
+
   /* Full-width media fills the card edge to edge, so the card owns the corner
      radius and the media drops its own. */
   :where(
-    [data-nk="card"]
-      > [data-slot="card-full"]
-      :is(img, [data-nk="progressive-image"])
-  ) {
+      [data-nk="card"]
+        > [data-slot="card-full"]
+        :is(img, [data-nk="progressive-image"])
+    ) {
     border-radius: 0;
   }