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

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

@@ -8,13 +8,13 @@
 
   :where([data-nk="checkbox-group"] > [data-slot="checkbox-group-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);
   }
 
   :where(
-    [data-nk="checkbox-group"] > [data-slot="checkbox-group-description"]
-  ) {
+      [data-nk="checkbox-group"] > [data-slot="checkbox-group-description"]
+    ) {
     margin-block-start: var(--nk-space);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
@@ -28,33 +28,33 @@
   }
 
   :where(
-    [data-nk="checkbox-group"][data-orientation="horizontal"]
-      > [data-slot="checkbox-group-choices"]
-  ) {
+      [data-nk="checkbox-group"][data-orientation="horizontal"]
+        > [data-slot="checkbox-group-choices"]
+    ) {
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--nk-space) * 4);
   }
 
   :where(
-    [data-nk="checkbox-group"][data-presentation="cards"]
-      > [data-slot="checkbox-group-choices"]
-      > [data-slot="checkbox-group-choice"]
-  ) {
+      [data-nk="checkbox-group"][data-presentation="cards"]
+        > [data-slot="checkbox-group-choices"]
+        > [data-slot="checkbox-group-choice"]
+    ) {
     inline-size: 100%;
     padding: calc(var(--nk-space) * 3);
     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="checkbox-group"][data-presentation="cards"]
-      > [data-slot="checkbox-group-choices"]
-      > [data-slot="checkbox-group-choice"]:has(input:checked)
-  ) {
+      [data-nk="checkbox-group"][data-presentation="cards"]
+        > [data-slot="checkbox-group-choices"]
+        > [data-slot="checkbox-group-choice"]:has(input:checked)
+    ) {
     border-color: var(--nk-color-primary);
     box-shadow: 0 0 0 var(--nk-border-width) var(--nk-color-primary);
   }

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

@@ -29,8 +29,8 @@
 
   :where([data-nk="combobox"] > [data-slot="combobox-status"]) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -44,7 +44,7 @@
     position: fixed;
     z-index: 50;
     inline-size: max(var(--_nk-combobox-width, 12rem), 12rem);
-    max-inline-size: min(28rem, calc(100vw - (var(--nk-space) * 8)));
+    max-inline-size: min(28rem, calc(100% - (var(--nk-space) * 8)));
     max-block-size: 15rem;
     margin-block: var(--nk-space);
     padding: var(--nk-space);
@@ -69,7 +69,7 @@
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-normal);
     cursor: pointer;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -79,12 +79,22 @@
     display: block;
   }
 
+  :where([data-nk="combobox"] [data-slot="combobox-empty"]) {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--nk-control-height-md);
+    padding-block: var(--nk-space);
+    padding-inline: calc(var(--nk-space) * 3);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+  }
+
   :where(
-    [data-nk="combobox"]
-      > [data-slot="combobox-listbox"]
-      > [data-slot="combobox-option"]
-      > [data-slot="combobox-option-description"]
-  ) {
+      [data-nk="combobox"]
+        > [data-slot="combobox-listbox"]
+        > [data-slot="combobox-option"]
+        > [data-slot="combobox-option-description"]
+    ) {
     display: block;
     margin-block-start: calc(var(--nk-space) * 0.5);
     color: var(--nk-color-muted-foreground);
@@ -95,44 +105,44 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="combobox"]
-      [data-slot="combobox-option"]:is(
-        [data-active="true"],
-        [aria-selected="true"]
-      )
-  ) {
+      [data-nk="combobox"]
+        [data-slot="combobox-option"]:is(
+          [data-active="true"],
+          [aria-selected="true"]
+        )
+    ) {
     background: var(--nk-color-muted);
   }
 
   :where(
-    [data-nk="combobox"]
-      > [data-slot="combobox-listbox"]
-      > [data-slot="combobox-option"]:is(
-        [data-active="true"],
-        [aria-selected="true"]
-      )
-      > [data-slot="combobox-option-description"]
-  ) {
+      [data-nk="combobox"]
+        > [data-slot="combobox-listbox"]
+        > [data-slot="combobox-option"]:is(
+          [data-active="true"],
+          [aria-selected="true"]
+        )
+        > [data-slot="combobox-option-description"]
+    ) {
     color: var(--nk-color-foreground);
   }
 
   :where(
-    [data-nk="combobox"] [data-slot="combobox-option"][aria-disabled="true"]
-  ) {
+      [data-nk="combobox"] [data-slot="combobox-option"][aria-disabled="true"]
+    ) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
-    [data-nk="combobox"] > [data-slot="combobox-listbox"][data-state="open"]
-  ) {
+      [data-nk="combobox"] > [data-slot="combobox-listbox"][data-state="open"]
+    ) {
     animation: nk-combobox-enter var(--nk-duration-normal) var(--nk-ease);
   }
 
   @keyframes nk-combobox-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.25rem);
+      transform: translateY(calc(var(--nk-space) * -1));
     }
     to {
       opacity: 1;

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

@@ -3,20 +3,25 @@
     inline-size: 100%;
   }
 
+  /* The trigger reads as the search input it opens: Input's plain border,
+     radius, and surface instead of Button's raised treatment. */
   :where([data-nk="command-palette"] > [data-slot="command-palette-trigger"]) {
     justify-content: start;
     inline-size: 100%;
     color: var(--nk-color-muted-foreground);
     font-weight: var(--nk-font-weight-normal);
     background: var(--nk-color-surface);
+    border-color: var(--nk-color-border);
+    border-block-end-color: var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
     box-shadow: none;
   }
 
   :where(
-    [data-nk="command-palette"]
-      > [data-slot="command-palette-trigger"]
-      > [data-slot="button-label"]
-  ) {
+      [data-nk="command-palette"]
+        > [data-slot="command-palette-trigger"]
+        > [data-slot="button-label"]
+    ) {
     display: flex;
     flex: 1 1 auto;
     gap: calc(var(--nk-space) * 2);
@@ -25,13 +30,24 @@
   }
 
   :where(
-    [data-nk="command-palette"] [data-slot="command-palette-trigger-label"]
-  ) {
+      [data-nk="command-palette"] [data-slot="command-palette-trigger-label"]
+    ) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  /* The chip floats at the trigger's end with the same inset on its top,
+     end, and bottom sides, so the trigger's text padding stands down. */
+  :where(
+      [data-nk="command-palette"]
+        > [data-slot="command-palette-trigger"]:has(
+          [data-slot="command-palette-shortcut"]
+        )
+    ) {
+    padding-inline-end: calc(var(--nk-space) * 2 - var(--nk-border-width));
+  }
+
   :where([data-nk="command-palette"] [data-slot="command-palette-shortcut"]) {
     flex: 0 0 auto;
     margin-inline-start: auto;
@@ -46,6 +62,16 @@
     border-radius: var(--nk-radius-sm);
   }
 
+  /* The panel hugs its results and stops growing at the cap; past it, the
+     shrinkable list scrolls. The flex display applies only while open, so
+     the closed dialog keeps the user-agent's display: none. */
+  :where(
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"][open]
+    ) {
+    display: flex;
+    flex-direction: column;
+  }
+
   :where([data-nk="command-palette"] > [data-slot="command-palette-panel"]) {
     inline-size: min(calc(100% - (var(--nk-space) * 8)), var(--nk-content-md));
     max-block-size: min(36rem, calc(100dvh - (var(--nk-space) * 8)));
@@ -59,19 +85,29 @@
     box-shadow: var(--nk-shadow-lg);
   }
 
+  /* The modal palette anchors near the viewport top, so hugging grows and
+     shrinks downward and the top edge never jumps while filtering. The
+     non-enhanced fallback keeps the centered default. */
+  :where(
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"]:modal
+    ) {
+    margin-block: 12dvh auto;
+    max-block-size: min(36rem, calc(88dvh - var(--nk-space) * 4));
+  }
+
   :where(
-    [data-nk="command-palette"] > [data-slot="command-palette-panel"]
-  )::backdrop {
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"]
+    )::backdrop {
     background: var(--nk-color-overlay);
   }
 
   :where(
-    [data-nk="command-palette"] [data-slot="command-palette-title"],
-    [data-nk="command-palette"] [data-slot="command-palette-status"]
-  ) {
+      [data-nk="command-palette"] [data-slot="command-palette-title"],
+      [data-nk="command-palette"] [data-slot="command-palette-status"]
+    ) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -83,6 +119,7 @@
 
   :where([data-nk="command-palette"] [data-slot="command-palette-search"]) {
     display: flex;
+    flex: 0 0 auto;
     gap: calc(var(--nk-space) * 2);
     align-items: center;
     padding: calc(var(--nk-space) * 2);
@@ -90,19 +127,19 @@
   }
 
   :where(
-    [data-nk="command-palette"]
-      > [data-slot="command-palette-panel"]
-      > [data-slot="command-palette-close"]
-  ) {
+      [data-nk="command-palette"]
+        > [data-slot="command-palette-panel"]
+        > [data-slot="command-palette-close"]
+    ) {
     margin-block: calc(var(--nk-space) * 2);
     margin-inline: auto calc(var(--nk-space) * 2);
   }
 
   :where(
-    [data-nk="command-palette"][data-enhanced]
-      > [data-slot="command-palette-panel"]
-      > [data-slot="command-palette-close"]
-  ) {
+      [data-nk="command-palette"][data-enhanced]
+        > [data-slot="command-palette-panel"]
+        > [data-slot="command-palette-close"]
+    ) {
     position: absolute;
     z-index: 1;
     inset-block-start: calc(var(--nk-space) * 2);
@@ -111,23 +148,23 @@
   }
 
   :where(
-    [data-nk="command-palette"][data-enhanced]
-      [data-slot="command-palette-search"]
-  ) {
+      [data-nk="command-palette"][data-enhanced]
+        [data-slot="command-palette-search"]
+    ) {
     padding-inline-end: calc(
       var(--nk-control-height-md) + (var(--nk-space) * 4)
     );
   }
 
   :where(
-    [data-nk="command-palette"] [data-slot="command-palette-search"][hidden]
-  ) {
+      [data-nk="command-palette"] [data-slot="command-palette-search"][hidden]
+    ) {
     display: none;
   }
 
   :where(
-    [data-nk="command-palette"] [data-slot="command-palette-search-icon"]
-  ) {
+      [data-nk="command-palette"] [data-slot="command-palette-search-icon"]
+    ) {
     flex: 0 0 auto;
     margin-inline-start: calc(var(--nk-space) * 2);
     color: var(--nk-color-muted-foreground);
@@ -138,15 +175,18 @@
     min-inline-size: 0;
   }
 
-  :where([data-nk="command-palette"])
-    [data-slot="command-palette-input"]::-webkit-search-cancel-button {
+  :where(
+      [data-nk="command-palette"] [data-slot="command-palette-input"]
+    )::-webkit-search-cancel-button {
     appearance: none;
   }
 
   :where([data-nk="command-palette"] [data-slot="command-palette-results"]) {
     display: grid;
+    flex: 0 1 auto;
     gap: var(--nk-space);
     max-block-size: 26rem;
+    min-block-size: 0;
     padding: calc(var(--nk-space) * 2);
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -158,8 +198,8 @@
   }
 
   :where(
-    [data-nk="command-palette"] [data-slot="command-palette-destination"]
-  ) {
+      [data-nk="command-palette"] [data-slot="command-palette-destination"]
+    ) {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -170,16 +210,16 @@
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-normal);
     text-decoration: none;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-xl) - var(--nk-space) * 2);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
   }
 
   :where(
-    [data-nk="command-palette"]
-      [data-slot="command-palette-destination-description"]
-  ) {
+      [data-nk="command-palette"]
+        [data-slot="command-palette-destination-description"]
+    ) {
     margin-block-start: calc(var(--nk-space) * 0.5);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-xs);
@@ -195,21 +235,40 @@
   }
 }
 
+@layer nitro-kit.compound {
+  /* The search strip is the field: the icon sits inside it and the nested
+     Input drops its own chrome, so the row reads as one input bounded by
+     the hairline below. The caret is the focus indicator, matching every
+     command palette — a ring on a borderless strip would show permanently,
+     because text inputs are always focus-visible. */
+  :where([data-nk="command-palette"] [data-slot="command-palette-input"]) {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  :where(
+      [data-nk="command-palette"]
+        [data-slot="command-palette-input"]:focus-visible
+    ) {
+    outline: none;
+  }
+}
+
 @layer nitro-kit.state {
   @media (hover: hover) {
     :where(
-      [data-nk="command-palette"]
-        [data-slot="command-palette-destination"]:hover
-    ) {
+        [data-nk="command-palette"]
+          [data-slot="command-palette-destination"]:hover
+      ) {
       color: var(--nk-color-foreground);
       background: var(--nk-color-muted);
     }
   }
 
   :where(
-    [data-nk="command-palette"]
-      [data-slot="command-palette-destination"]:focus-visible
-  ) {
+      [data-nk="command-palette"]
+        [data-slot="command-palette-destination"]:focus-visible
+    ) {
     color: var(--nk-color-foreground);
     background: var(--nk-color-muted);
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
@@ -217,23 +276,23 @@
   }
 
   :where(
-    [data-nk="command-palette"]
-      [data-slot="command-palette-destination"]:is(:hover, :focus-visible)
-      [data-slot="command-palette-destination-description"]
-  ) {
+      [data-nk="command-palette"]
+        [data-slot="command-palette-destination"]:is(:hover, :focus-visible)
+        [data-slot="command-palette-destination-description"]
+    ) {
     color: var(--nk-color-foreground);
   }
 
   :where(
-    [data-nk="command-palette"] > [data-slot="command-palette-panel"][open]
-  ) {
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"][open]
+    ) {
     animation: nk-command-palette-enter var(--nk-duration-slow) var(--nk-ease);
   }
 
   @keyframes nk-command-palette-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.5rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * -2)) scale(0.98);
     }
     to {
       opacity: 1;
@@ -247,8 +306,8 @@
     }
 
     :where(
-      [data-nk="command-palette"] [data-slot="command-palette-destination"]
-    ) {
+        [data-nk="command-palette"] [data-slot="command-palette-destination"]
+      ) {
       transition-duration: 0.01ms;
     }
   }

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

@@ -1,25 +1,25 @@
 @layer nitro-kit.base {
   :where([data-nk="container"]) {
-    width: 100%;
-    min-width: 0;
+    inline-size: 100%;
+    min-inline-size: 0;
     margin-inline: auto;
   }
 }
 
 @layer nitro-kit.size {
   :where([data-nk="container"][data-size="sm"]) {
-    max-width: var(--nk-content-sm);
+    max-inline-size: var(--nk-content-sm);
   }
 
   :where([data-nk="container"][data-size="md"]) {
-    max-width: var(--nk-content-md);
+    max-inline-size: var(--nk-content-md);
   }
 
   :where([data-nk="container"][data-size="lg"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
   }
 
   :where([data-nk="container"][data-size="xl"]) {
-    max-width: var(--nk-content-xl);
+    max-inline-size: var(--nk-content-xl);
   }
 }