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

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

@@ -7,111 +7,109 @@
     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;
   }
 
   :where([data-nk="control-group"] > [data-nk="select"] > select) {
-    height: 100%;
+    block-size: 100%;
     border-radius: 0;
   }
 
   /* 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
-  ) {
-    border-start-start-radius: var(--nk-radius-md);
-    border-end-start-radius: var(--nk-radius-md);
+      [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-lg);
+    border-end-start-radius: var(--nk-radius-lg);
   }
 
   :where(
-    [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);
+      [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-lg);
+    border-end-end-radius: var(--nk-radius-lg);
   }
 
   :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,17 +131,13 @@
     border: var(--nk-border-width) solid var(--nk-color-border);
   }
 
-  :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"]:first-child > select) {
+    border-start-start-radius: var(--nk-radius-lg);
+    border-end-start-radius: var(--nk-radius-lg);
   }
 
-  :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);
+  :where([data-nk="control-group"] > [data-nk="select"]:last-child > select) {
+    border-start-end-radius: var(--nk-radius-lg);
+    border-end-end-radius: var(--nk-radius-lg);
   }
 }

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

@@ -5,14 +5,14 @@
     align-items: end;
     gap: calc(var(--nk-space) * 5);
     padding: calc(var(--nk-space) * 6);
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     background: color-mix(
       in oklab,
-      var(--nk-color-danger) 8%,
+      var(--nk-color-destructive) 8%,
       var(--nk-color-surface)
     );
     border: var(--nk-border-width) solid
-      color-mix(in oklab, var(--nk-color-danger) 50%, transparent);
+      color-mix(in oklab, var(--nk-color-destructive) 50%, transparent);
     border-radius: var(--nk-radius-lg);
   }
 
@@ -23,14 +23,14 @@
   }
 
   :where([data-nk="danger-zone"] [data-slot="danger-zone-title"]) {
-    font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-section-size);
+    font-weight: var(--nk-title-section-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="danger-zone"] [data-slot="danger-zone-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
     text-wrap: pretty;
@@ -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;

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

@@ -19,14 +19,14 @@
   }
 
   :where([data-nk="data-section"] [data-slot="data-section-title"]) {
-    font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-section-size);
+    font-weight: var(--nk-title-section-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="data-section"] [data-slot="data-section-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
@@ -35,6 +35,6 @@
 
   :where([data-nk="data-section"] > [data-slot="data-section-table"]),
   :where([data-nk="data-section"] > [data-slot="data-section-empty-state"]) {
-    width: 100%;
+    inline-size: 100%;
   }
 }

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

@@ -5,7 +5,7 @@
   }
 
   :where([data-nk="details-table"] [data-slot="table-header"][scope="row"]) {
-    inline-size: clamp(8rem, 28%, 16rem);
+    inline-size: 40%;
     vertical-align: top;
   }
 
@@ -14,27 +14,29 @@
   }
 
   :where(
-    [data-nk="details-table"] [data-slot="details-table-number"],
-    [data-nk="details-table"] [data-slot="details-table-time"]
-  ) {
+      [data-nk="details-table"] [data-slot="details-table-number"],
+      [data-nk="details-table"] [data-slot="details-table-time"]
+    ) {
     font-variant-numeric: tabular-nums;
   }
 
   :where(
-    [data-nk="details-table"] [data-slot="details-table-link"],
-    [data-nk="details-table"] [data-slot="details-table-record"]
-  ) {
+      [data-nk="details-table"] [data-slot="details-table-link"],
+      [data-nk="details-table"] [data-slot="details-table-record"]
+    ) {
     color: var(--nk-color-info-content);
     text-decoration-line: underline;
     text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
     text-underline-offset: 0.16em;
   }
 
-  :where(
-    [data-nk="details-table"] [data-slot="details-table-link"]:hover,
-    [data-nk="details-table"] [data-slot="details-table-record"]:hover
-  ) {
-    text-decoration-color: currentcolor;
+  @media (hover: hover) {
+    :where(
+        [data-nk="details-table"] [data-slot="details-table-link"]:hover,
+        [data-nk="details-table"] [data-slot="details-table-record"]:hover
+      ) {
+      text-decoration-color: currentcolor;
+    }
   }
 
   :where([data-nk="details-table"] [data-slot="details-table-file"]) {
@@ -44,10 +46,10 @@
   }
 }
 
-@media (max-width: 36rem) {
-  @layer nitro-kit.compound {
+@media (min-width: 40rem) {
+  @layer nitro-kit.base {
     :where([data-nk="details-table"] [data-slot="table-header"][scope="row"]) {
-      inline-size: 40%;
+      inline-size: clamp(8rem, 28%, 16rem);
     }
   }
 }

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

@@ -28,14 +28,15 @@
   }
 
   :where([data-nk="dialog"] [data-slot="dialog-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;
   }
 
   :where([data-nk="dialog"] [data-slot="dialog-description"]) {
     margin-block-start: calc(var(--nk-space) * 2);
+    margin-block-end: calc(var(--nk-space) * 4);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
@@ -45,8 +46,10 @@
   /* The close control precedes the panel content and sticks to the top of the
      scrolling panel so long content never scrolls it out of reach. */
   :where(
-    [data-nk="dialog"] > [data-slot="dialog-panel"] > [data-slot="dialog-close"]
-  ) {
+      [data-nk="dialog"]
+        > [data-slot="dialog-panel"]
+        > [data-slot="dialog-close"]
+    ) {
     position: sticky;
     z-index: 1;
     float: inline-end;
@@ -64,7 +67,7 @@
   @keyframes nk-dialog-enter {
     from {
       opacity: 0;
-      transform: translateY(0.5rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * 2)) scale(0.98);
     }
     to {
       opacity: 1;

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

@@ -9,9 +9,11 @@
     z-index: 50;
     display: none;
     min-inline-size: 12rem;
-    max-inline-size: min(24rem, calc(100vw - (var(--nk-space) * 8)));
+    max-inline-size: min(24rem, calc(100% - (var(--nk-space) * 8)));
     max-block-size: min(24rem, calc(100dvh - (var(--nk-space) * 8)));
-    inset: var(--_nk-overlay-top, 50%) auto auto var(--_nk-overlay-left, 50%);
+    inset: var(--nk-space);
+    inset: var(--_nk-overlay-top, var(--nk-space)) auto auto
+      var(--_nk-overlay-left, var(--nk-space));
     margin: 0;
     padding: var(--nk-space);
     overflow: auto;
@@ -54,17 +56,17 @@
     cursor: pointer;
     background: transparent;
     border: 0;
-    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);
   }
 
   :where(
-    [data-nk="dropdown"]
-      [data-slot="dropdown-item"]
-      > [data-slot="dropdown-item-icon"]
-  ) {
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"]
+        > [data-slot="dropdown-item-icon"]
+    ) {
     display: inline-flex;
     flex: none;
     margin-inline-end: calc(var(--nk-space) * 2);
@@ -81,16 +83,17 @@
 
 @layer nitro-kit.variant {
   :where(
-    [data-nk="dropdown"] [data-slot="dropdown-item"][data-variant="destructive"]
-  ) {
-    color: var(--nk-color-danger-content);
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"][data-variant="destructive"]
+    ) {
+    color: var(--nk-color-destructive-content);
   }
 
   :where(
-    [data-nk="dropdown"]
-      [data-slot="dropdown-item"][data-variant="destructive"]
-      > [data-slot="dropdown-item-icon"]
-  ) {
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"][data-variant="destructive"]
+        > [data-slot="dropdown-item-icon"]
+    ) {
     color: inherit;
   }
 }
@@ -98,21 +101,24 @@
 @layer nitro-kit.state {
   @media (hover: hover) {
     :where(
-      [data-nk="dropdown"]
-        [data-slot="dropdown-item"]:hover:not(:disabled, [aria-disabled="true"])
-    ) {
+        [data-nk="dropdown"]
+          [data-slot="dropdown-item"]:hover:not(
+            :disabled,
+            [aria-disabled="true"]
+          )
+      ) {
       background: var(--nk-color-muted);
     }
 
     :where(
-      [data-nk="dropdown"]
-        [data-slot="dropdown-item"][data-variant="destructive"]:hover:not(
-          :disabled,
-          [aria-disabled="true"]
-        )
-    ) {
-      color: var(--nk-color-danger-foreground);
-      background: var(--nk-color-danger);
+        [data-nk="dropdown"]
+          [data-slot="dropdown-item"][data-variant="destructive"]:hover:not(
+            :disabled,
+            [aria-disabled="true"]
+          )
+      ) {
+      color: var(--nk-color-destructive-foreground);
+      background: var(--nk-color-destructive);
     }
   }
 
@@ -122,11 +128,11 @@
   }
 
   :where(
-    [data-nk="dropdown"]
-      [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
-  ) {
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
+    ) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="dropdown"] > [data-slot="dropdown-content"]:popover-open) {
@@ -136,7 +142,7 @@
   @keyframes nk-dropdown-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.25rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * -1)) scale(0.98);
     }
     to {
       opacity: 1;