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

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

@@ -7,17 +7,17 @@
   }
 
   :where(
-    [data-nk="radio-button-group"] > [data-slot="radio-button-group-legend"]
-  ) {
+      [data-nk="radio-button-group"] > [data-slot="radio-button-group-legend"]
+    ) {
     padding: 0;
     font-size: var(--nk-text-sm);
     font-weight: var(--nk-font-weight-semibold);
   }
 
   :where(
-    [data-nk="radio-button-group"]
-      > [data-slot="radio-button-group-description"]
-  ) {
+      [data-nk="radio-button-group"]
+        > [data-slot="radio-button-group-description"]
+    ) {
     margin-block-start: var(--nk-space);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
@@ -25,34 +25,34 @@
   }
 
   :where(
-    [data-nk="radio-button-group"] > [data-slot="radio-button-group-choices"]
-  ) {
+      [data-nk="radio-button-group"] > [data-slot="radio-button-group-choices"]
+    ) {
     display: grid;
     gap: var(--nk-space);
     margin-block-start: calc(var(--nk-space) * 2);
   }
 
   :where(
-    [data-nk="radio-button-group"][data-presentation="list"][data-orientation="vertical"]
-      > [data-slot="radio-button-group-choices"]
-  ) {
+      [data-nk="radio-button-group"][data-presentation="list"][data-orientation="vertical"]
+        > [data-slot="radio-button-group-choices"]
+    ) {
     gap: 0;
   }
 
   :where(
-    [data-nk="radio-button-group"][data-orientation="horizontal"]
-      > [data-slot="radio-button-group-choices"]
-  ) {
+      [data-nk="radio-button-group"][data-orientation="horizontal"]
+        > [data-slot="radio-button-group-choices"]
+    ) {
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--nk-space) * 4);
   }
 
   :where(
-    [data-nk="radio-button-group"][data-presentation="cards"]
-      > [data-slot="radio-button-group-choices"]
-      > [data-slot="radio-button-group-choice"]
-  ) {
+      [data-nk="radio-button-group"][data-presentation="cards"]
+        > [data-slot="radio-button-group-choices"]
+        > [data-slot="radio-button-group-choice"]
+    ) {
     inline-size: 100%;
     padding: calc(var(--nk-space) * 3);
     background: var(--nk-color-surface);
@@ -61,9 +61,9 @@
   }
 
   :where(
-    [data-nk="radio-button-group"][data-presentation="segmented"]
-      > [data-slot="radio-button-group-choices"]
-  ) {
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        > [data-slot="radio-button-group-choices"]
+    ) {
     display: inline-flex;
     gap: 0;
     padding: var(--nk-space);
@@ -72,19 +72,19 @@
   }
 
   :where(
-    [data-nk="radio-button-group"][data-presentation="segmented"]
-      > [data-slot="radio-button-group-choices"]
-      > [data-slot="radio-button-group-choice"]
-  ) {
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        > [data-slot="radio-button-group-choices"]
+        > [data-slot="radio-button-group-choice"]
+    ) {
     min-inline-size: 0;
     padding-inline: calc(var(--nk-space) * 3);
     border-radius: calc(var(--nk-radius-md) - var(--nk-space));
   }
 
   :where(
-    [data-nk="radio-button-group"][data-presentation="segmented"]
-      [data-slot="radio-button-indicator"]
-  ) {
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        [data-slot="radio-button-indicator"]
+    ) {
     display: none;
   }
 
@@ -94,9 +94,9 @@
      centred between the segment's own paddings and makes the entire segment
      clickable. */
   :where(
-    [data-nk="radio-button-group"][data-presentation="segmented"]
-      [data-slot="radio-button-label"]
-  ) {
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        [data-slot="radio-button-label"]
+    ) {
     position: relative;
     display: flex;
     gap: 0;
@@ -106,9 +106,9 @@
   }
 
   :where(
-    [data-nk="radio-button-group"][data-presentation="segmented"]
-      [data-slot="radio-button-control"]
-  ) {
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        [data-slot="radio-button-control"]
+    ) {
     position: absolute;
     inset: 0;
     inline-size: 100%;
@@ -118,13 +118,13 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="radio-button-group"][data-presentation="cards"]
-      > [data-slot="radio-button-group-choices"]
-      > [data-slot="radio-button-group-choice"]:has(input:checked),
-    [data-nk="radio-button-group"][data-presentation="segmented"]
-      > [data-slot="radio-button-group-choices"]
-      > [data-slot="radio-button-group-choice"]:has(input:checked)
-  ) {
+      [data-nk="radio-button-group"][data-presentation="cards"]
+        > [data-slot="radio-button-group-choices"]
+        > [data-slot="radio-button-group-choice"]:has(input:checked),
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        > [data-slot="radio-button-group-choices"]
+        > [data-slot="radio-button-group-choice"]:has(input:checked)
+    ) {
     background: var(--nk-color-surface);
     border-color: var(--nk-color-primary);
     box-shadow: var(--nk-shadow-sm);
@@ -133,9 +133,9 @@
   /* The segmented indicator is hidden, so the focus ring belongs to the native
      radio that now covers the segment. */
   :where(
-    [data-nk="radio-button-group"][data-presentation="segmented"]
-      [data-slot="radio-button-control"]:focus-visible
-  ) {
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        [data-slot="radio-button-control"]:focus-visible
+    ) {
     border-radius: calc(var(--nk-radius-md) - var(--nk-space));
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: calc(var(--nk-focus-offset) * -1);

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

@@ -5,8 +5,13 @@
     --lexxy-color-text-subtle: var(--nk-color-muted-foreground);
     --lexxy-color-link: var(--nk-color-primary);
     --lexxy-color-accent-dark: var(--nk-color-primary);
+    --lexxy-color-ink: var(--nk-color-foreground);
+    --lexxy-color-ink-medium: var(--nk-color-muted-foreground);
+    --lexxy-color-ink-inverted: var(--nk-color-primary-foreground);
     --lexxy-color-ink-lighter: var(--nk-color-border);
     --lexxy-color-ink-lightest: var(--nk-color-muted);
+    --lexxy-color-selected: var(--nk-color-muted);
+    --lexxy-color-selected-hover: var(--nk-color-border);
     --lexxy-radius: var(--nk-radius-md);
     display: block;
     inline-size: 100%;
@@ -19,3 +24,13 @@
     min-block-size: calc(var(--nk-space) * 24);
   }
 }
+
+@layer nitro-kit.state {
+  :where(
+      [data-nk="rich-text-area"]
+        > [data-slot="rich-text-area-editor"]
+        > [aria-invalid="true"]
+    ) {
+    border-color: var(--nk-color-danger);
+  }
+}

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

@@ -42,13 +42,6 @@
     padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
     appearance: auto;
   }
-
-  :where(
-    [data-nk="select"]:has(> [data-slot="select-control"][multiple])
-      > [data-slot="select-icon"]
-  ) {
-    display: none;
-  }
 }
 
 @layer nitro-kit.state {
@@ -63,8 +56,8 @@
   }
 
   :where(
-    [data-nk="select"] > [data-slot="select-control"][aria-invalid="true"]
-  ) {
+      [data-nk="select"] > [data-slot="select-control"][aria-invalid="true"]
+    ) {
     border-color: var(--nk-color-danger);
   }
 }

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

@@ -8,9 +8,9 @@
   }
 
   :where(
-    [data-nk="settings-layout"] > [data-slot="settings-layout-navigation"],
-    [data-nk="settings-layout"] > [data-slot="settings-layout-content"]
-  ) {
+      [data-nk="settings-layout"] > [data-slot="settings-layout-navigation"],
+      [data-nk="settings-layout"] > [data-slot="settings-layout-content"]
+    ) {
     min-width: 0;
   }
 
@@ -52,47 +52,50 @@
   /* Emphasis alone marks the current destination without adding a decorative
      edge or a filled block that would outweigh the content beside it. */
   :where(
-    [data-nk="settings-layout"]
-      [data-slot="settings-layout-item-link"][data-state="current"]
-  ) {
+      [data-nk="settings-layout"]
+        [data-slot="settings-layout-item-link"][data-state="current"]
+    ) {
     color: var(--nk-color-foreground);
     font-weight: var(--nk-font-weight-semibold);
   }
 
   :where(
-    [data-nk="settings-layout"]
-      [data-slot="settings-layout-item-link"][data-state="current"]
-      [data-slot="settings-layout-item-icon"]
-  ) {
+      [data-nk="settings-layout"]
+        [data-slot="settings-layout-item-link"][data-state="current"]
+        [data-slot="settings-layout-item-icon"]
+    ) {
     color: var(--nk-color-foreground);
   }
 
   @media (hover: hover) {
     :where(
-      [data-nk="settings-layout"] [data-slot="settings-layout-item-link"]:hover
-    ) {
+        [data-nk="settings-layout"]
+          [data-slot="settings-layout-item-link"]:hover
+      ) {
       color: var(--nk-color-foreground);
       background: color-mix(in oklab, var(--nk-color-muted) 60%, transparent);
     }
   }
 
   :where(
-    [data-nk="settings-layout"]
-      [data-slot="settings-layout-item-link"]:focus-visible
-  ) {
+      [data-nk="settings-layout"]
+        [data-slot="settings-layout-item-link"]:focus-visible
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: calc(var(--nk-focus-offset) * -1);
   }
 
   @media (prefers-reduced-motion: reduce) {
     :where(
-      [data-nk="settings-layout"] [data-slot="settings-layout-item-link"]
-    ) {
+        [data-nk="settings-layout"] [data-slot="settings-layout-item-link"]
+      ) {
       transition-duration: 0.01ms;
     }
   }
+}
 
-  @media (max-width: 48rem) {
+@layer nitro-kit.compound {
+  @media (width < 48rem) {
     :where([data-nk="settings-layout"]) {
       grid-template-columns: minmax(0, 1fr);
     }

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

@@ -0,0 +1,84 @@
+@layer nitro-kit.base {
+  :where([data-nk="settings-section"]) {
+    display: grid;
+    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
+    column-gap: calc(var(--nk-space) * 8);
+    row-gap: calc(var(--nk-space) * 5);
+    align-items: start;
+    min-inline-size: 0;
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="settings-section"] > [data-slot="settings-section-header"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 2);
+  }
+
+  :where([data-nk="settings-section"] [data-slot="settings-section-title"]) {
+    font-size: var(--nk-text-xl);
+    font-weight: var(--nk-font-weight-bold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where(
+      [data-nk="settings-section"] [data-slot="settings-section-description"]
+    ) {
+    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);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="settings-section"] > [data-slot="settings-section-form"]) {
+    display: grid;
+    grid-column: 2;
+    gap: calc(var(--nk-space) * 4);
+    inline-size: 100%;
+    max-inline-size: var(--nk-content-lg);
+  }
+
+  :where([data-nk="settings-section"] > [data-slot="settings-section-status"]) {
+    grid-column: 2;
+    inline-size: 100%;
+    max-inline-size: var(--nk-content-lg);
+  }
+
+  :where(
+      [data-nk="settings-section"] > [data-slot="settings-section-form"] > form
+    ) {
+    display: grid;
+    gap: calc(var(--nk-space) * 5);
+  }
+
+  :where(
+      [data-nk="settings-section"]
+        > [data-slot="settings-section-form"]
+        > form
+        > [data-nk="button"]
+    ) {
+    justify-self: start;
+  }
+
+  :where([data-nk="settings-section"] + [data-nk="settings-section"]) {
+    padding-block-start: calc(var(--nk-space) * 8);
+    border-block-start: var(--nk-border-width) solid var(--nk-color-border);
+  }
+}
+
+@layer nitro-kit.compound {
+  @media (width < 48rem) {
+    :where([data-nk="settings-section"]) {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: calc(var(--nk-space) * 4);
+    }
+
+    :where(
+        [data-nk="settings-section"] > [data-slot="settings-section-status"],
+        [data-nk="settings-section"] > [data-slot="settings-section-form"]
+      ) {
+      grid-column: 1;
+    }
+  }
+}

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

@@ -53,7 +53,7 @@
   :where([data-nk="sheet"] [data-slot="sheet-title"]) {
     padding-inline-end: calc(var(--nk-space) * 10);
     font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    font-weight: var(--nk-font-weight-bold);
     line-height: var(--nk-leading-tight);
   }
 
@@ -73,14 +73,34 @@
     animation: nk-sheet-enter var(--nk-duration-slow) var(--nk-ease);
   }
 
-  :where([data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"][open]) {
+  :where(
+      [data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"][open]
+    ) {
     --_nk-sheet-from: -1rem;
   }
 
-  :where([data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"][open]) {
+  :where(
+      [data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"][open]
+    ) {
     --_nk-sheet-from: 1rem;
   }
 
+  /* Sides are logical, but translateX is physical; RTL flips the slide so the
+     panel still enters from its own edge. */
+  :where(
+      [data-nk="sheet"][data-side="left"]:dir(rtl)
+        > [data-slot="sheet-panel"][open]
+    ) {
+    --_nk-sheet-from: 1rem;
+  }
+
+  :where(
+      [data-nk="sheet"][data-side="right"]:dir(rtl)
+        > [data-slot="sheet-panel"][open]
+    ) {
+    --_nk-sheet-from: -1rem;
+  }
+
   @keyframes nk-sheet-enter {
     from {
       opacity: 0;

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

@@ -1,22 +1,23 @@
 @layer nitro-kit.base {
   :where([data-nk="stat-grid"]) {
+    inline-size: 100%;
     color: var(--nk-color-foreground);
   }
 
   :where(
-    [data-nk="stat-grid"]
-      > [data-slot="stat-grid-grid"]
-      > [data-slot="stat-grid-list"]
-  ) {
+      [data-nk="stat-grid"]
+        > [data-slot="stat-grid-grid"]
+        > [data-slot="stat-grid-list"]
+    ) {
     display: contents;
   }
 
   :where(
-    [data-nk="stat-grid"]
-      > [data-slot="stat-grid-grid"]
-      > [data-slot="stat-grid-list"]
-      > [data-slot="stat-grid-stat"]
-  ) {
+      [data-nk="stat-grid"]
+        > [data-slot="stat-grid-grid"]
+        > [data-slot="stat-grid-list"]
+        > [data-slot="stat-grid-stat"]
+    ) {
     display: grid;
     align-content: start;
     gap: calc(var(--nk-space) * 2);

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

@@ -14,9 +14,9 @@
   }
 
   :where(
-    [data-nk="switch"] [data-slot="switch-control"],
-    [data-nk="switch"] [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"] [data-slot="switch-control"],
+      [data-nk="switch"] [data-slot="switch-track"]
+    ) {
     grid-area: 1 / 1;
   }
 
@@ -46,9 +46,9 @@
   }
 
   :where(
-    [data-nk="switch"][data-size="lg"] [data-slot="switch-control"],
-    [data-nk="switch"][data-size="lg"] [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"][data-size="lg"] [data-slot="switch-control"],
+      [data-nk="switch"][data-size="lg"] [data-slot="switch-track"]
+    ) {
     inline-size: 3.25rem;
     block-size: 2rem;
   }
@@ -83,45 +83,45 @@
   }
 
   :where(
-    [data-nk="switch"][data-size="lg"] > [data-slot="switch-description"]
-  ) {
+      [data-nk="switch"][data-size="lg"] > [data-slot="switch-description"]
+    ) {
     padding-inline-start: calc(3.25rem + (var(--nk-space) * 3));
   }
 }
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="switch"]
-      [data-slot="switch-control"]:checked
-      + [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"]
+        [data-slot="switch-control"]:checked
+        + [data-slot="switch-track"]
+    ) {
     background: var(--nk-color-primary);
     border-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="switch"]
-      [data-slot="switch-control"]:checked
-      + [data-slot="switch-track"]
-      > [data-slot="switch-handle"]
-  ) {
+      [data-nk="switch"]
+        [data-slot="switch-control"]:checked
+        + [data-slot="switch-track"]
+        > [data-slot="switch-handle"]
+    ) {
     transform: translateX(1rem);
   }
 
   :where(
-    [data-nk="switch"][data-size="lg"]
-      [data-slot="switch-control"]:checked
-      + [data-slot="switch-track"]
-      > [data-slot="switch-handle"]
-  ) {
+      [data-nk="switch"][data-size="lg"]
+        [data-slot="switch-control"]:checked
+        + [data-slot="switch-track"]
+        > [data-slot="switch-handle"]
+    ) {
     transform: translateX(1.25rem);
   }
 
   :where(
-    [data-nk="switch"]
-      [data-slot="switch-control"]:focus-visible
-      + [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"]
+        [data-slot="switch-control"]:focus-visible
+        + [data-slot="switch-track"]
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: var(--nk-focus-offset);
   }
@@ -131,11 +131,15 @@
     opacity: 0.6;
   }
 
+  /* The server error describes the submitted value. Once the user toggles the
+     control and it satisfies its own constraints the error is stale, so the
+     danger border stands down. `:user-valid` never matches before the user
+     touches the control, so an untouched invalid switch keeps its border. */
   :where(
-    [data-nk="switch"]
-      [data-slot="switch-control"][aria-invalid="true"]
-      + [data-slot="switch-track"]
-  ) {
+      [data-nk="switch"]
+        [data-slot="switch-control"][aria-invalid="true"]:not(:user-valid)
+        + [data-slot="switch-track"]
+    ) {
     border-color: var(--nk-color-danger);
   }
 }
@@ -143,9 +147,9 @@
 @media (prefers-reduced-motion: reduce) {
   @layer nitro-kit.base {
     :where(
-      [data-nk="switch"] [data-slot="switch-track"],
-      [data-nk="switch"] [data-slot="switch-handle"]
-    ) {
+        [data-nk="switch"] [data-slot="switch-track"],
+        [data-nk="switch"] [data-slot="switch-handle"]
+      ) {
       transition-duration: 0.01ms;
     }
   }