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

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

@@ -20,18 +20,18 @@
   }
 
   :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"]
-  ) {
+      [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;
   }
@@ -68,53 +68,57 @@
   }
 
   :where(
-    [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
-  )::after {
+      [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
+    )::after {
     inline-size: 0.625rem;
     block-size: 0.375rem;
   }
 
   :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(1.125rem + (var(--nk-space) * 2));
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     text-wrap: pretty;
   }
+
+  :where(
+      [data-nk="checkbox"][data-size="lg"] > [data-slot="checkbox-description"]
+    ) {
+    padding-inline-start: calc(1.5rem + (var(--nk-space) * 2));
+  }
 }
 
 @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 {
+      [data-nk="checkbox"][data-state="indeterminate"]
+        [data-slot="checkbox-indicator"]
+    )::after {
     inline-size: 0.55rem;
     block-size: 0;
     border-block-end: 0.125rem solid currentcolor;
@@ -124,17 +128,17 @@
   }
 
   :where(
-    [data-nk="checkbox"][data-size="lg"][data-state="indeterminate"]
-      [data-slot="checkbox-indicator"]
-  )::after {
+      [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);
   }
@@ -151,10 +155,10 @@
      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"]
-  ) {
+      [data-nk="checkbox"]
+        [data-slot="checkbox-control"][aria-invalid="true"]:not(:user-valid)
+        + [data-slot="checkbox-indicator"]
+    ) {
     border-color: var(--nk-color-danger);
   }
 }

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

@@ -13,8 +13,8 @@
   }
 
   :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,19 +28,19 @@
   }
 
   :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);
@@ -51,10 +51,10 @@
 
 @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

@@ -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,37 +105,37 @@
 
 @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;
   }
 
   :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);
   }
 

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

@@ -13,10 +13,10 @@
   }
 
   :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,8 +25,8 @@
   }
 
   :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;
@@ -60,15 +60,15 @@
   }
 
   :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;
@@ -90,19 +90,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 +111,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,8 +138,9 @@
     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;
   }
 
@@ -158,8 +159,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;
@@ -177,9 +178,9 @@
   }
 
   :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);
@@ -198,18 +199,18 @@
 @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,16 +218,16 @@
   }
 
   :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);
   }
 
@@ -247,8 +248,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/control_group.css

@@ -7,47 +7,47 @@
     min-inline-size: 0;
   }
 
-  :where(
-    [data-nk="control-group"]:has(> [data-nk="button"][data-size="lg"])
-  ) {
+  :where([data-nk="control-group"]:has(> [data-nk="button"][data-size="lg"])) {
     --_nk-control-group-height: var(--nk-control-height-lg);
   }
 
-  :where(
-    [data-nk="control-group"]:has(> [data-nk="button"][data-size="xl"])
-  ) {
+  :where([data-nk="control-group"]:has(> [data-nk="button"][data-size="xl"])) {
     --_nk-control-group-height: var(--nk-control-height-xl);
   }
 
   :where(
-    [data-nk="control-group"]
-      > :is(
-        [data-nk="input"],
-        [data-nk="select"],
-        [data-nk="button"],
-        span[data-slot="control-group-addon"]
-      )
-  ) {
+      [data-nk="control-group"]
+        > :is(
+          [data-nk="input"],
+          [data-nk="select"],
+          [data-nk="button"],
+          span[data-slot="control-group-addon"]
+        )
+    ) {
     position: relative;
     block-size: var(--_nk-control-group-height);
     min-block-size: var(--_nk-control-group-height);
   }
 
   :where(
-    [data-nk="control-group"]
-      > :is([data-nk="input"], [data-nk="select"], [data-nk="button"]):focus-within
-  ) {
+      [data-nk="control-group"]
+        > :is(
+          [data-nk="input"],
+          [data-nk="select"],
+          [data-nk="button"]
+        ):focus-within
+    ) {
     z-index: 1;
   }
 
   :where(
-    [data-nk="control-group"]
-      > :is(
-        [data-nk="input"],
-        [data-nk="button"],
-        span[data-slot="control-group-addon"]
-      )
-  ) {
+      [data-nk="control-group"]
+        > :is(
+          [data-nk="input"],
+          [data-nk="button"],
+          span[data-slot="control-group-addon"]
+        )
+    ) {
     border-radius: 0;
   }
 
@@ -59,59 +59,57 @@
   /* Safari positions its native date editor from the line box's top edge.
      Give the grouped editor the same explicit line-box treatment as a
      standalone date Input, using the compound control's resolved height. */
-  :where(
-    [data-nk="control-group"] > [data-nk="input"][type="date"]
-  ) {
+  :where([data-nk="control-group"] > [data-nk="input"][type="date"]) {
     line-height: calc(
       var(--_nk-control-group-height) - (var(--nk-border-width) * 2)
     );
   }
 
   :where(
-    [data-nk="control-group"]
-      > :is(
-        [data-nk="input"],
-        [data-nk="button"],
-        span[data-slot="control-group-addon"]
-      ):first-child
-  ) {
+      [data-nk="control-group"]
+        > :is(
+          [data-nk="input"],
+          [data-nk="button"],
+          span[data-slot="control-group-addon"]
+        ):first-child
+    ) {
     border-start-start-radius: var(--nk-radius-md);
     border-end-start-radius: var(--nk-radius-md);
   }
 
   :where(
-    [data-nk="control-group"]
-      > :is(
-        [data-nk="input"],
-        [data-nk="button"],
-        span[data-slot="control-group-addon"]
-      ):last-child
-  ) {
+      [data-nk="control-group"]
+        > :is(
+          [data-nk="input"],
+          [data-nk="button"],
+          span[data-slot="control-group-addon"]
+        ):last-child
+    ) {
     border-start-end-radius: var(--nk-radius-md);
     border-end-end-radius: var(--nk-radius-md);
   }
 
   :where(
-    [data-nk="control-group"]
-      > :is(
+      [data-nk="control-group"]
+        > :is(
           [data-nk="input"],
           [data-nk="select"],
           [data-nk="button"],
           span[data-slot="control-group-addon"]
         )
-      + :is(
-        [data-nk="input"],
-        [data-nk="select"],
-        [data-nk="button"],
-        span[data-slot="control-group-addon"]
-      )
-  ) {
+        + :is(
+          [data-nk="input"],
+          [data-nk="select"],
+          [data-nk="button"],
+          span[data-slot="control-group-addon"]
+        )
+    ) {
     margin-inline-start: calc(var(--nk-border-width) * -1);
   }
 
   :where(
-    [data-nk="control-group"] > :is([data-nk="input"], [data-nk="select"])
-  ) {
+      [data-nk="control-group"] > :is([data-nk="input"], [data-nk="select"])
+    ) {
     min-inline-size: 0;
     flex: 1 1 auto;
   }
@@ -133,16 +131,12 @@
     border: var(--nk-border-width) solid var(--nk-color-border);
   }
 
-  :where(
-    [data-nk="control-group"] > [data-nk="select"]:first-child > select
-  ) {
+  :where([data-nk="control-group"] > [data-nk="select"]:first-child > select) {
     border-start-start-radius: var(--nk-radius-md);
     border-end-start-radius: var(--nk-radius-md);
   }
 
-  :where(
-    [data-nk="control-group"] > [data-nk="select"]:last-child > select
-  ) {
+  :where([data-nk="control-group"] > [data-nk="select"]:last-child > select) {
     border-start-end-radius: var(--nk-radius-md);
     border-end-end-radius: var(--nk-radius-md);
   }

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

@@ -24,7 +24,7 @@
 
   :where([data-nk="danger-zone"] [data-slot="danger-zone-title"]) {
     font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-semibold);
+    font-weight: var(--nk-font-weight-bold);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -44,8 +44,8 @@
   }
 }
 
-@layer nitro-kit.state {
-  @media (max-width: 48rem) {
+@layer nitro-kit.compound {
+  @media (width < 48rem) {
     :where([data-nk="danger-zone"]) {
       grid-template-columns: minmax(0, 1fr);
       align-items: stretch;