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

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

@@ -1,11 +1,11 @@
 @layer nitro-kit.base {
   :where([data-nk="button"]) {
     --_nk-button-height: var(--nk-control-height-md);
-    --_nk-button-padding: calc(var(--nk-space) * 4);
+    --_nk-button-padding: var(--nk-control-padding-inline);
     --_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-line-height: var(--nk-leading-normal);
     --_nk-button-background: var(--nk-button-default-background);
     --_nk-button-hover-background: var(--nk-button-default-hover-background);
     --_nk-button-foreground: var(--nk-button-default-foreground);
@@ -19,7 +19,7 @@
       ),
       var(--nk-button-default-border)
     );
-    --_nk-button-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+    --_nk-button-shadow: var(--nk-shadow-xs);
 
     position: relative;
     display: inline-flex;
@@ -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,15 +95,30 @@
   }
 
   :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;
   }
+
+  /* Touch guidance wants a 44px minimum target. The rendered button keeps
+     its size; an invisible extension expands the tappable area to the large
+     control step on coarse pointers. */
+  @media (pointer: coarse) {
+    :where([data-nk="button"])::after {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      inline-size: max(100%, var(--nk-control-height-lg));
+      block-size: max(100%, var(--nk-control-height-lg));
+      content: "";
+      translate: -50% -50%;
+    }
+  }
 }
 
 @layer nitro-kit.variant {
@@ -102,32 +126,33 @@
     --_nk-button-background: var(--nk-color-primary);
     --_nk-button-hover-background: var(--nk-color-primary-hover);
     --_nk-button-foreground: var(--nk-color-primary-foreground);
-    --_nk-button-border: light-dark(oklch(0 0 0 / 0.1), transparent);
+    --_nk-button-border: light-dark(
+      color-mix(in oklab, var(--nk-black) 10%, transparent),
+      transparent
+    );
     --_nk-button-border-bottom: var(--_nk-button-border);
-    --_nk-button-shadow: inset 0 1px oklch(1 0 0 / 0.2);
+    --_nk-button-shadow: inset 0 1px
+      color-mix(in oklab, var(--nk-white) 20%, transparent);
   }
 
   :where([data-nk="button"][data-variant="destructive"]) {
-    --_nk-button-background: var(--nk-color-danger);
-    --_nk-button-hover-background: var(--nk-color-danger-hover);
-    --_nk-button-foreground: var(--nk-color-danger-foreground);
+    --_nk-button-background: var(--nk-color-destructive);
+    --_nk-button-hover-background: var(--nk-color-destructive-hover);
+    --_nk-button-foreground: var(--nk-color-destructive-foreground);
     --_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-destructive),
+      inset 0 2px color-mix(in oklab, var(--nk-white) 15%, transparent);
   }
 
   :where([data-nk="button"][data-variant="ghost"]) {
     --_nk-button-background: transparent;
     --_nk-button-hover-background: light-dark(
-      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)
+      color-mix(in oklab, var(--nk-zinc-800) 5%, transparent),
+      color-mix(in oklab, var(--nk-white) 15%, transparent)
     );
+    --_nk-button-foreground: var(--nk-color-foreground);
     --_nk-button-border-width: 0;
     --_nk-button-border: transparent;
     --_nk-button-border-bottom: transparent;
@@ -136,18 +161,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,24 +191,23 @@
     --_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;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 4);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.75);
   }
 
   :where([data-nk="button"][data-size="sm"]) {
-    --_nk-button-height: calc(var(--nk-space) * 8);
+    --_nk-button-height: var(--nk-control-height-sm);
     --_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-avatar-size: 1.25rem;
+    --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-md));
+    --_nk-button-avatar-size: calc(var(--nk-space) * 5);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
   :where([data-nk="button"][data-size="md"]) {
-    --_nk-button-avatar-size: 1.5rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 6);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
@@ -191,7 +215,7 @@
     --_nk-button-height: var(--nk-control-height-lg);
     --_nk-button-padding: calc(var(--nk-space) * 5);
     --_nk-button-icon-padding: calc(var(--nk-space) * 4);
-    --_nk-button-avatar-size: 1.75rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 7);
     --_nk-button-avatar-font-size: var(--nk-text-xs);
   }
 
@@ -199,10 +223,9 @@
     --_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;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 8);
     --_nk-button-avatar-font-size: var(--nk-text-xs);
     gap: calc(var(--nk-space) * 4);
   }
@@ -221,12 +244,44 @@
   }
 
   :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;
+    opacity: var(--nk-disabled-opacity);
+  }
+
+  /* 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-destructive) 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-destructive) 40%,
+      var(--nk-color-surface)
+    );
   }
 
   :where([data-nk="button"][aria-busy="true"] > [data-slot="button-spinner"]) {
@@ -234,9 +289,9 @@
   }
 
   :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,32 +304,19 @@
 
   @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"]
-  ) {
-    width: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
-    height: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+  :where([data-nk="button"] > [data-slot="button-label"] > [data-nk="avatar"]) {
+    inline-size: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+    block-size: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
     font-size: min(
       var(--_nk-avatar-font-size),
       var(--_nk-button-avatar-font-size)

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

@@ -15,8 +15,8 @@
   }
 
   :where([data-nk="card"] > [data-slot="card-title"]) {
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     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;
   }
 

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

@@ -1,39 +1,36 @@
 @layer nitro-kit.base {
+  /* Every box dimension derives from one choice size, so the two sizes are one
+     rule apart and the glyph keeps its proportions at either. The check stroke
+     is two border widths and its optical nudge is one, at every size. */
   :where([data-nk="checkbox"]) {
+    --_nk-choice-size: var(--nk-choice-size-md);
+
     display: inline-grid;
     min-inline-size: var(--nk-control-height-md);
     min-block-size: var(--nk-control-height-md);
     color: var(--nk-color-foreground);
   }
 
+  :where([data-nk="checkbox"][data-size="lg"]) {
+    --_nk-choice-size: var(--nk-choice-size-lg);
+  }
+
   :where([data-nk="checkbox"] > [data-slot="checkbox-label"]) {
     display: grid;
-    grid-template-columns: 1.125rem minmax(0, 1fr);
+    grid-template-columns: var(--_nk-choice-size) minmax(0, 1fr);
     gap: calc(var(--nk-space) * 2);
     align-items: center;
     min-block-size: var(--nk-control-height-md);
     cursor: pointer;
   }
 
-  :where([data-nk="checkbox"][data-size="lg"] > [data-slot="checkbox-label"]) {
-    grid-template-columns: 1.5rem minmax(0, 1fr);
-  }
-
   :where(
-    [data-nk="checkbox"] [data-slot="checkbox-control"],
-    [data-nk="checkbox"] [data-slot="checkbox-indicator"]
-  ) {
+      [data-nk="checkbox"] [data-slot="checkbox-control"],
+      [data-nk="checkbox"] [data-slot="checkbox-indicator"]
+    ) {
     grid-area: 1 / 1;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-  }
-
-  :where(
-    [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-control"],
-    [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
-  ) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-choice-size);
+    block-size: var(--_nk-choice-size);
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-control"]) {
@@ -58,33 +55,24 @@
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-indicator"])::after {
-    inline-size: 0.5rem;
-    block-size: 0.3rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.44);
+    block-size: calc(var(--_nk-choice-size) * 0.27);
     content: "";
-    border-block-end: 0.125rem solid currentcolor;
-    border-inline-start: 0.125rem solid currentcolor;
+    border-block-end: calc(var(--nk-border-width) * 2) solid currentcolor;
+    border-inline-start: calc(var(--nk-border-width) * 2) solid currentcolor;
     opacity: 0;
-    transform: translateY(-0.0625rem) rotate(-45deg);
-  }
-
-  :where(
-    [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
-  )::after {
-    inline-size: 0.625rem;
-    block-size: 0.375rem;
+    transform: translateY(calc(var(--nk-border-width) * -1)) rotate(-45deg);
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-label-text"]) {
     display: block;
-  }
-
-  :where([data-nk="checkbox"] [data-slot="checkbox-content"]) {
     grid-column: 2;
   }
 
-  :where([data-nk="checkbox"] [data-slot="checkbox-description"]) {
+  :where([data-nk="checkbox"] > [data-slot="checkbox-description"]) {
     display: block;
     margin-block-start: var(--nk-space);
+    padding-inline-start: calc(var(--_nk-choice-size) + (var(--nk-space) * 2));
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     text-wrap: pretty;
@@ -93,68 +81,67 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="checkbox"]
-      [data-slot="checkbox-control"]:checked
-      + [data-slot="checkbox-indicator"],
-    [data-nk="checkbox"][data-state="indeterminate"]
-      [data-slot="checkbox-indicator"]
-  ) {
+      [data-nk="checkbox"]
+        [data-slot="checkbox-control"]:checked
+        + [data-slot="checkbox-indicator"],
+      [data-nk="checkbox"][data-state="indeterminate"]
+        [data-slot="checkbox-indicator"]
+    ) {
     background: var(--nk-color-primary);
     border-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="checkbox"]
-      [data-slot="checkbox-control"]:checked
-      + [data-slot="checkbox-indicator"]
-  )::after {
+      [data-nk="checkbox"]
+        [data-slot="checkbox-control"]:checked
+        + [data-slot="checkbox-indicator"]
+    )::after {
     opacity: 1;
   }
 
   :where(
-    [data-nk="checkbox"][data-state="indeterminate"]
-      [data-slot="checkbox-indicator"]
-  )::after {
-    inline-size: 0.55rem;
+      [data-nk="checkbox"][data-state="indeterminate"]
+        [data-slot="checkbox-indicator"]
+    )::after {
+    inline-size: calc(var(--_nk-choice-size) * 0.49);
     block-size: 0;
-    border-block-end: 0.125rem solid currentcolor;
+    border-block-end: calc(var(--nk-border-width) * 2) solid currentcolor;
     border-inline-start: 0;
     opacity: 1;
     transform: none;
   }
 
   :where(
-    [data-nk="checkbox"][data-size="lg"][data-state="indeterminate"]
-      [data-slot="checkbox-indicator"]
-  )::after {
-    inline-size: 0.7rem;
-  }
-
-  :where(
-    [data-nk="checkbox"]
-      [data-slot="checkbox-control"]:focus-visible
-      + [data-slot="checkbox-indicator"]
-  ) {
+      [data-nk="checkbox"]
+        [data-slot="checkbox-control"]:focus-visible
+        + [data-slot="checkbox-indicator"]
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: var(--nk-focus-offset);
   }
 
   :where([data-nk="checkbox"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* A server-rendered error describes the value that was submitted. Once the
      user has interacted with the control and it satisfies its own constraints,
-     that error is stale, so the danger border stands down and the native
+     that error is stale, so the destructive border stands down and the native
      checked treatment takes over again. `:user-valid` never matches before the
      user touches the control, so an untouched invalid checkbox keeps its
      border. */
   :where(
-    [data-nk="checkbox"]
-      [data-slot="checkbox-control"][aria-invalid="true"]:not(:user-valid)
-      + [data-slot="checkbox-indicator"]
-  ) {
-    border-color: var(--nk-color-danger);
+      [data-nk="checkbox"]
+        [data-slot="checkbox-control"][aria-invalid="true"]:not(:user-valid)
+        + [data-slot="checkbox-indicator"]
+    ) {
+    border-color: var(--nk-color-destructive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="checkbox"] [data-slot="checkbox-indicator"]) {
+      transition-duration: 0.01ms;
+    }
   }
 }