nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.4

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

@@ -7,38 +7,48 @@
   }
 
   :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);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
   }
 
+  /* The gap below the label exists only when there is a label. */
   :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);
+  }
+
+  :where(
+      [data-nk="appearance-picker"]
+        > [data-slot="appearance-picker-legend"]
+        + [data-slot="appearance-picker-options"]
+    ) {
     margin-block-start: calc(var(--nk-space) * 2);
   }
 
   :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;
   }
 
+  /* Like every other control, the segmented row fills its container and the
+     parent owns the available width; the segments share it equally. */
   :where(
-    [data-nk="appearance-picker"][data-presentation="segmented"]
-      > [data-slot="appearance-picker-options"]
-  ) {
-    display: inline-flex;
+      [data-nk="appearance-picker"][data-presentation="segmented"]
+        > [data-slot="appearance-picker-options"]
+    ) {
+    display: flex;
     gap: 0;
     padding: var(--nk-space);
     background: var(--nk-color-muted);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where([data-nk="appearance-picker"] [data-slot="appearance-picker-option"]) {
@@ -51,36 +61,38 @@
   }
 
   :where(
-    [data-nk="appearance-picker"] [data-slot="appearance-picker-control"]
-  ) {
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+      [data-nk="appearance-picker"] [data-slot="appearance-picker-control"]
+    ) {
+    inline-size: var(--nk-choice-size-md);
+    block-size: var(--nk-choice-size-md);
     margin: 0;
     accent-color: var(--nk-color-primary);
     cursor: pointer;
   }
 
   :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;
+    flex: 1 1 0;
+    justify-content: center;
     padding-inline: calc(var(--nk-space) * 3);
-    border-radius: calc(var(--nk-radius-md) - var(--nk-space));
+    border-radius: calc(var(--nk-radius-lg) - 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);
@@ -90,27 +102,37 @@
     font: inherit;
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 }
 
 @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/auth_shell.css

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="auth-shell"]) {
-    width: 100%;
-    min-width: 0;
+    inline-size: 100%;
+    min-inline-size: 0;
     padding-block: calc(var(--nk-space) * 8);
     padding-inline: calc(var(--nk-space) * 4);
   }

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

@@ -1,11 +1,15 @@
 @layer nitro-kit.base {
   :where([data-nk="avatar"]) {
     position: relative;
+    /* The ring below carries a z-index, so without a stacking context it
+       would paint above overlapping siblings — in a stack, every ring showed
+       through the avatar covering it. Isolation keeps each avatar atomic. */
+    isolation: isolate;
     display: inline-grid;
     flex: none;
     place-items: center;
-    width: var(--_nk-avatar-size);
-    height: var(--_nk-avatar-size);
+    inline-size: var(--_nk-avatar-size);
+    block-size: var(--_nk-avatar-size);
     overflow: hidden;
     font-size: var(--_nk-avatar-font-size);
     font-weight: var(--nk-font-weight-medium);
@@ -28,12 +32,12 @@
   }
 
   :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%;
+    inline-size: 100%;
+    block-size: 100%;
     border-radius: inherit;
   }
 
@@ -60,22 +64,22 @@
 
 @layer nitro-kit.size {
   :where([data-nk="avatar"][data-size="xs"]) {
-    --_nk-avatar-size: 1.5rem;
+    --_nk-avatar-size: var(--nk-avatar-size-xs);
     --_nk-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
   :where([data-nk="avatar"][data-size="sm"]) {
-    --_nk-avatar-size: 2rem;
+    --_nk-avatar-size: var(--nk-avatar-size-sm);
     --_nk-avatar-font-size: var(--nk-text-xs);
   }
 
   :where([data-nk="avatar"][data-size="md"]) {
-    --_nk-avatar-size: 3rem;
+    --_nk-avatar-size: var(--nk-avatar-size-md);
     --_nk-avatar-font-size: var(--nk-text-sm);
   }
 
   :where([data-nk="avatar"][data-size="lg"]) {
-    --_nk-avatar-size: 4rem;
+    --_nk-avatar-size: var(--nk-avatar-size-lg);
     --_nk-avatar-font-size: var(--nk-text-lg);
   }
 }

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,56 +39,61 @@
   }
 
   :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;
   }
 
+  /* The chip is one of the heads: same fill as the avatar fallbacks and the
+     same hairline ring, drawn as a real border since nothing overlaps it. */
   :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);
     line-height: 1;
     color: var(--nk-color-muted-foreground);
+    border: var(--nk-border-width) solid
+      color-mix(in oklab, var(--nk-color-foreground) 10%, transparent);
     border-radius: var(--nk-radius-full);
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="xs"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
-    width: 1.5rem;
-    height: 1.5rem;
+      [data-nk="avatar-stack"][data-size="xs"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
+    inline-size: var(--nk-avatar-size-xs);
+    block-size: var(--nk-avatar-size-xs);
     font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="sm"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
-    width: 2rem;
-    height: 2rem;
+      [data-nk="avatar-stack"][data-size="sm"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
+    inline-size: var(--nk-avatar-size-sm);
+    block-size: var(--nk-avatar-size-sm);
     font-size: var(--nk-text-xs);
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="md"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
-    width: 3rem;
-    height: 3rem;
+      [data-nk="avatar-stack"][data-size="md"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
+    inline-size: var(--nk-avatar-size-md);
+    block-size: var(--nk-avatar-size-md);
     font-size: var(--nk-text-sm);
   }
 
   :where(
-    [data-nk="avatar-stack"][data-size="lg"]
-      > [data-slot="avatar-stack-overflow"]
-  ) {
-    width: 4rem;
-    height: 4rem;
+      [data-nk="avatar-stack"][data-size="lg"]
+        > [data-slot="avatar-stack-overflow"]
+    ) {
+    inline-size: var(--nk-avatar-size-lg);
+    block-size: var(--nk-avatar-size-lg);
     font-size: var(--nk-text-base);
   }
 }

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

@@ -1,19 +1,18 @@
 @layer nitro-kit.base {
   :where([data-nk="badge"]) {
-    --_nk-badge-color: var(--_nk-palette-light);
     --_nk-badge-tint-strength: 20%;
 
     display: inline-flex;
     align-items: center;
-    max-width: 100%;
+    max-inline-size: 100%;
     font-weight: var(--nk-font-weight-medium);
     line-height: var(--nk-leading-tight);
-    color: var(--_nk-badge-color);
+    color: var(--_nk-semantic-content);
     white-space: nowrap;
     vertical-align: middle;
     background-color: color-mix(
       in oklab,
-      var(--_nk-palette-tint) var(--_nk-badge-tint-strength),
+      var(--_nk-semantic-accent) var(--_nk-badge-tint-strength),
       transparent
     );
     border: var(--nk-border-width) solid transparent;
@@ -21,7 +20,7 @@
   }
 
   :where([data-nk="badge"] > [data-slot="badge-label"]) {
-    min-width: 0;
+    min-inline-size: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -31,17 +30,22 @@
 @layer nitro-kit.variant {
   :where([data-nk="badge"][data-variant="outline"]) {
     background-color: transparent;
-    border-color: color-mix(in oklab, var(--_nk-palette-tint) 50%, transparent);
+    border-color: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) 50%,
+      transparent
+    );
   }
 
+  /* Only the tint strength changes with appearance. The colours themselves come
+     from the `--nk-palette-*` roles, whose `-content` half already resolves per
+     appearance. */
   :where([data-theme="dark"] [data-nk="badge"]) {
-    --_nk-badge-color: var(--_nk-palette-dark);
     --_nk-badge-tint-strength: 40%;
   }
 
   @media (prefers-color-scheme: dark) {
     :where(:root:not([data-theme]) [data-nk="badge"]) {
-      --_nk-badge-color: var(--_nk-palette-dark);
       --_nk-badge-tint-strength: 40%;
     }
   }
@@ -60,7 +64,7 @@
 
 @layer nitro-kit.size {
   :where([data-nk="badge"][data-size="xs"]) {
-    padding: 0 calc(var(--nk-space) * 1.25);
+    padding: 0 var(--nk-space);
     font-size: var(--nk-text-xs);
   }