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

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

@@ -1,14 +1,24 @@
 @layer nitro-kit.base {
+  /* Every dimension derives from one choice size, matching Checkbox: the two
+     sizes are one rule apart and the dot keeps its proportion at either. The
+     dot previously stayed at its medium size inside a large radio; deriving it
+     scales it with the control. */
   :where([data-nk="radio-button"]) {
+    --_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="radio-button"][data-size="lg"]) {
+    --_nk-choice-size: var(--nk-choice-size-lg);
+  }
+
   :where([data-nk="radio-button"] > [data-slot="radio-button-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);
@@ -16,27 +26,12 @@
   }
 
   :where(
-    [data-nk="radio-button"][data-size="lg"] > [data-slot="radio-button-label"]
-  ) {
-    grid-template-columns: 1.5rem minmax(0, 1fr);
-  }
-
-  :where(
-    [data-nk="radio-button"] [data-slot="radio-button-control"],
-    [data-nk="radio-button"] [data-slot="radio-button-indicator"]
-  ) {
+      [data-nk="radio-button"] [data-slot="radio-button-control"],
+      [data-nk="radio-button"] [data-slot="radio-button-indicator"]
+    ) {
     grid-area: 1 / 1;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-  }
-
-  :where(
-    [data-nk="radio-button"][data-size="lg"] [data-slot="radio-button-control"],
-    [data-nk="radio-button"][data-size="lg"]
-      [data-slot="radio-button-indicator"]
-  ) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-choice-size);
+    block-size: var(--_nk-choice-size);
   }
 
   :where([data-nk="radio-button"] [data-slot="radio-button-control"]) {
@@ -54,11 +49,14 @@
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
     border-radius: var(--nk-radius-full);
+    transition:
+      background-color var(--nk-duration-fast) var(--nk-ease),
+      border-color var(--nk-duration-fast) var(--nk-ease);
   }
 
   :where([data-nk="radio-button"] [data-slot="radio-button-indicator"])::after {
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.44);
+    block-size: calc(var(--_nk-choice-size) * 0.44);
     content: "";
     background: var(--nk-color-primary);
     border-radius: inherit;
@@ -67,15 +65,13 @@
 
   :where([data-nk="radio-button"] [data-slot="radio-button-label-text"]) {
     display: block;
-  }
-
-  :where([data-nk="radio-button"] [data-slot="radio-button-content"]) {
     grid-column: 2;
   }
 
-  :where([data-nk="radio-button"] [data-slot="radio-button-description"]) {
+  :where([data-nk="radio-button"] > [data-slot="radio-button-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;
@@ -84,44 +80,50 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="radio-button"]
-      [data-slot="radio-button-control"]:checked
-      + [data-slot="radio-button-indicator"]
-  ) {
+      [data-nk="radio-button"]
+        [data-slot="radio-button-control"]:checked
+        + [data-slot="radio-button-indicator"]
+    ) {
     border-color: var(--nk-color-primary);
   }
 
   :where(
-    [data-nk="radio-button"]
-      [data-slot="radio-button-control"]:checked
-      + [data-slot="radio-button-indicator"]
-  )::after {
+      [data-nk="radio-button"]
+        [data-slot="radio-button-control"]:checked
+        + [data-slot="radio-button-indicator"]
+    )::after {
     opacity: 1;
   }
 
   :where(
-    [data-nk="radio-button"]
-      [data-slot="radio-button-control"]:focus-visible
-      + [data-slot="radio-button-indicator"]
-  ) {
+      [data-nk="radio-button"]
+        [data-slot="radio-button-control"]:focus-visible
+        + [data-slot="radio-button-indicator"]
+    ) {
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: var(--nk-focus-offset);
   }
 
   :where([data-nk="radio-button"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* The server error describes the submitted value. Once the user picks a
      value that satisfies the control's own constraints the error is stale, so
-     the danger border stands down. `:user-valid` never matches before the user
+     the destructive border stands down. `:user-valid` never matches before the user
      touches the control, so an untouched invalid radio keeps its border. */
   :where(
-    [data-nk="radio-button"]
-      [data-slot="radio-button-control"][aria-invalid="true"]:not(:user-valid)
-      + [data-slot="radio-button-indicator"]
-  ) {
-    border-color: var(--nk-color-danger);
+      [data-nk="radio-button"]
+        [data-slot="radio-button-control"][aria-invalid="true"]:not(:user-valid)
+        + [data-slot="radio-button-indicator"]
+    ) {
+    border-color: var(--nk-color-destructive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="radio-button"] [data-slot="radio-button-indicator"]) {
+      transition-duration: 0.01ms;
+    }
   }
 }

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);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
   }
 
   :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,66 +25,66 @@
   }
 
   :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);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :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);
     background: var(--nk-color-muted);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :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));
+    border-radius: calc(var(--nk-radius-lg) - 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,10 +133,10 @@
   /* 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
-  ) {
-    border-radius: calc(var(--nk-radius-md) - var(--nk-space));
+      [data-nk="radio-button-group"][data-presentation="segmented"]
+        [data-slot="radio-button-control"]:focus-visible
+    ) {
+    border-radius: calc(var(--nk-radius-lg) - 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,9 +5,14 @@
     --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-radius: var(--nk-radius-md);
+    --lexxy-color-selected: var(--nk-color-muted);
+    --lexxy-color-selected-hover: var(--nk-color-border);
+    --lexxy-radius: var(--nk-radius-lg);
     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-destructive);
+  }
+}

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

@@ -9,13 +9,15 @@
     grid-area: 1 / 1;
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
-    padding-inline: calc(var(--nk-space) * 3) calc(var(--nk-space) * 9);
+    padding-inline: var(--nk-control-padding-inline)
+      calc(var(--nk-control-padding-inline) * 2 + var(--nk-space) * 4);
     color: inherit;
     font: inherit;
+    font-size: var(--nk-text-base);
     appearance: none;
     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);
     transition:
       border-color var(--nk-duration-normal) var(--nk-ease),
       box-shadow var(--nk-duration-normal) var(--nk-ease);
@@ -25,9 +27,9 @@
     grid-area: 1 / 1;
     align-self: center;
     justify-self: end;
-    inline-size: 1rem;
-    block-size: 1rem;
-    margin-inline-end: calc(var(--nk-space) * 3);
+    inline-size: calc(var(--nk-space) * 4);
+    block-size: calc(var(--nk-space) * 4);
+    margin-inline-end: var(--nk-control-padding-inline);
     color: var(--nk-color-muted-foreground);
     pointer-events: none;
   }
@@ -39,15 +41,22 @@
 
   :where([data-nk="select"] > [data-slot="select-control"][multiple]) {
     min-block-size: calc(var(--nk-control-height-md) * 3);
-    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    padding-block: calc(var(--nk-space) * 2);
+    padding-inline: var(--nk-control-padding-inline);
     appearance: auto;
   }
 
-  :where(
-    [data-nk="select"]:has(> [data-slot="select-control"][multiple])
-      > [data-slot="select-icon"]
-  ) {
-    display: none;
+  /* Matches the Input width split. */
+  @media (min-width: 48rem) {
+    :where([data-nk="select"] > [data-slot="select-control"]) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="select"] > [data-slot="select-control"]) {
+      transition-duration: 0.01ms;
+    }
   }
 }
 
@@ -59,12 +68,12 @@
 
   :where([data-nk="select"] > [data-slot="select-control"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
-    [data-nk="select"] > [data-slot="select-control"][aria-invalid="true"]
-  ) {
-    border-color: var(--nk-color-danger);
+      [data-nk="select"] > [data-slot="select-control"][aria-invalid="true"]
+    ) {
+    border-color: var(--nk-color-destructive);
   }
 }

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

@@ -4,25 +4,25 @@
     grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
     gap: calc(var(--nk-space) * 6);
     align-items: start;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where(
-    [data-nk="settings-layout"] > [data-slot="settings-layout-navigation"],
-    [data-nk="settings-layout"] > [data-slot="settings-layout-content"]
-  ) {
-    min-width: 0;
+      [data-nk="settings-layout"] > [data-slot="settings-layout-navigation"],
+      [data-nk="settings-layout"] > [data-slot="settings-layout-content"]
+    ) {
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-items"]) {
     display: flex;
     flex-direction: column;
     gap: var(--nk-space);
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-item"]) {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-item-link"]) {
@@ -36,7 +36,7 @@
     font-weight: var(--nk-font-weight-medium);
     line-height: var(--nk-leading-tight);
     text-decoration: none;
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -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-title-section-size);
+    font-weight: var(--nk-title-section-weight);
+    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;
+    }
+  }
+}