nitro_kit 0.9.0 → 2.0.0.alpha.2

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

@@ -0,0 +1,113 @@
+@layer nitro-kit.variant {
+  :where(
+    [data-nk="badge"][data-color="zinc"],
+    [data-nk="badge"][data-color="neutral"],
+    [data-nk="alert"][data-variant="default"]
+  ) {
+    --_nk-palette-light: oklch(37% 0.013 285.805);
+    --_nk-palette-dark: oklch(92% 0.004 286.32);
+    --_nk-palette-tint: oklch(70.5% 0.015 286.067);
+  }
+
+  :where(
+    [data-nk="badge"][data-color="red"],
+    [data-nk="badge"][data-color="danger"],
+    [data-nk="alert"][data-variant="error"]
+  ) {
+    --_nk-palette-light: oklch(50.5% 0.213 27.518);
+    --_nk-palette-dark: oklch(88.5% 0.062 18.334);
+    --_nk-palette-tint: oklch(70.4% 0.191 22.216);
+  }
+  :where([data-nk="badge"][data-color="orange"]) {
+    --_nk-palette-light: oklch(55.3% 0.195 38.402);
+    --_nk-palette-dark: oklch(90.1% 0.076 70.697);
+    --_nk-palette-tint: oklch(75% 0.183 55.934);
+  }
+  :where(
+    [data-nk="badge"][data-color="amber"],
+    [data-nk="badge"][data-color="warning"],
+    [data-nk="alert"][data-variant="warning"]
+  ) {
+    --_nk-palette-light: oklch(55% 0.163 48.998);
+    --_nk-palette-dark: oklch(92.4% 0.12 95.746);
+    --_nk-palette-tint: oklch(82.8% 0.189 84.429);
+  }
+  :where([data-nk="badge"][data-color="yellow"]) {
+    --_nk-palette-light: oklch(47.6% 0.114 61.907);
+    --_nk-palette-dark: oklch(94.5% 0.129 101.54);
+    --_nk-palette-tint: oklch(85.2% 0.199 91.936);
+  }
+  :where([data-nk="badge"][data-color="lime"]) {
+    --_nk-palette-light: oklch(45.3% 0.124 130.933);
+    --_nk-palette-dark: oklch(93.8% 0.127 124.321);
+    --_nk-palette-tint: oklch(84.1% 0.238 128.85);
+  }
+  :where(
+    [data-nk="badge"][data-color="green"],
+    [data-nk="badge"][data-color="success"],
+    [data-nk="alert"][data-variant="success"]
+  ) {
+    --_nk-palette-light: oklch(44.8% 0.119 151.328);
+    --_nk-palette-dark: oklch(92.5% 0.084 155.995);
+    --_nk-palette-tint: oklch(79.2% 0.209 151.711);
+  }
+  :where([data-nk="badge"][data-color="emerald"]) {
+    --_nk-palette-light: oklch(43.2% 0.095 166.913);
+    --_nk-palette-dark: oklch(90.5% 0.093 164.15);
+    --_nk-palette-tint: oklch(76.5% 0.177 163.223);
+  }
+  :where([data-nk="badge"][data-color="teal"]) {
+    --_nk-palette-light: oklch(43.7% 0.078 188.216);
+    --_nk-palette-dark: oklch(91% 0.096 180.426);
+    --_nk-palette-tint: oklch(77.7% 0.152 181.912);
+  }
+  :where([data-nk="badge"][data-color="cyan"]) {
+    --_nk-palette-light: oklch(45% 0.085 224.283);
+    --_nk-palette-dark: oklch(91.7% 0.08 205.041);
+    --_nk-palette-tint: oklch(78.9% 0.154 211.53);
+  }
+  :where([data-nk="badge"][data-color="sky"]) {
+    --_nk-palette-light: oklch(44.3% 0.11 240.79);
+    --_nk-palette-dark: oklch(90.1% 0.058 230.902);
+    --_nk-palette-tint: oklch(74.6% 0.16 232.661);
+  }
+  :where(
+    [data-nk="badge"][data-color="blue"],
+    [data-nk="badge"][data-color="info"],
+    [data-nk="alert"][data-variant="info"]
+  ) {
+    --_nk-palette-light: oklch(42.4% 0.199 265.638);
+    --_nk-palette-dark: oklch(88.2% 0.059 254.128);
+    --_nk-palette-tint: oklch(70.7% 0.165 254.624);
+  }
+  :where([data-nk="badge"][data-color="indigo"]) {
+    --_nk-palette-light: oklch(45.7% 0.24 277.023);
+    --_nk-palette-dark: oklch(87% 0.065 274.039);
+    --_nk-palette-tint: oklch(67.3% 0.182 276.935);
+  }
+  :where([data-nk="badge"][data-color="violet"]) {
+    --_nk-palette-light: oklch(49.1% 0.27 292.581);
+    --_nk-palette-dark: oklch(89.4% 0.057 293.283);
+    --_nk-palette-tint: oklch(70.2% 0.183 293.541);
+  }
+  :where([data-nk="badge"][data-color="purple"]) {
+    --_nk-palette-light: oklch(49.6% 0.265 301.924);
+    --_nk-palette-dark: oklch(90.2% 0.063 306.703);
+    --_nk-palette-tint: oklch(71.4% 0.203 305.504);
+  }
+  :where([data-nk="badge"][data-color="fuchsia"]) {
+    --_nk-palette-light: oklch(51.8% 0.253 323.949);
+    --_nk-palette-dark: oklch(90.3% 0.076 319.62);
+    --_nk-palette-tint: oklch(74% 0.238 322.16);
+  }
+  :where([data-nk="badge"][data-color="pink"]) {
+    --_nk-palette-light: oklch(52.5% 0.223 3.958);
+    --_nk-palette-dark: oklch(89.9% 0.061 343.231);
+    --_nk-palette-tint: oklch(71.8% 0.202 349.761);
+  }
+  :where([data-nk="badge"][data-color="rose"]) {
+    --_nk-palette-light: oklch(51.4% 0.222 16.935);
+    --_nk-palette-dark: oklch(89.2% 0.058 10.001);
+    --_nk-palette-tint: oklch(71.2% 0.194 13.428);
+  }
+}

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

@@ -0,0 +1,139 @@
+@layer nitro-kit.base {
+  :where([data-nk="progressive-image"]) {
+    position: relative;
+    display: grid;
+    inline-size: 100%;
+    overflow: hidden;
+    color: var(--nk-color-muted-foreground);
+    background-color: var(--nk-color-muted);
+    border-radius: var(--nk-radius-lg);
+    isolation: isolate;
+  }
+
+  :where([data-nk="progressive-image"])::after {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    pointer-events: none;
+    content: "";
+    border-radius: inherit;
+    outline: 1px solid oklch(0 0 0 / 10%);
+    outline-offset: -1px;
+  }
+
+  :where(
+    [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"],
+    [data-nk="progressive-image"] > [data-slot="progressive-image-image"],
+    [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
+  ) {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: inherit;
+  }
+
+  :where(
+    [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"],
+    [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
+  ) {
+    object-fit: cover;
+  }
+
+  :where(
+    [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"]
+  ) {
+    z-index: 1;
+    filter: blur(1rem);
+    opacity: 0;
+    transform: scale(1.05);
+  }
+
+  :where(
+    [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
+  ) {
+    z-index: 2;
+    opacity: 1;
+  }
+
+  :where(
+    [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
+  ) {
+    display: grid;
+    min-block-size: 10rem;
+    padding: calc(var(--nk-space) * 6);
+    place-items: center;
+    aspect-ratio: 4 / 3;
+    font-size: var(--nk-text-sm);
+    text-align: center;
+    text-wrap: pretty;
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="progressive-image"][data-enhanced="true"]
+      > [data-slot="progressive-image-placeholder"],
+    [data-nk="progressive-image"][data-enhanced="true"]
+      > [data-slot="progressive-image-image"]
+  ) {
+    transition: opacity var(--nk-duration-slow) var(--nk-ease);
+  }
+
+  :where(
+    [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
+      > [data-slot="progressive-image-placeholder"]
+  ) {
+    opacity: 1;
+  }
+
+  :where(
+    [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
+      > [data-slot="progressive-image-image"]
+  ) {
+    opacity: 0;
+  }
+
+  :where(
+    [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
+      > [data-slot="progressive-image-image"]
+  ) {
+    opacity: 1;
+  }
+
+  :where(
+    [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
+      > [data-slot="progressive-image-placeholder"],
+    [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
+      > [data-slot="progressive-image-placeholder"],
+    [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
+      > [data-slot="progressive-image-image"]
+  ) {
+    opacity: 0;
+  }
+}
+
+@layer nitro-kit.state {
+  :where([data-theme="dark"] [data-nk="progressive-image"])::after {
+    outline-color: oklch(1 0 0 / 10%);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(
+      :root:not([data-theme="light"]) [data-nk="progressive-image"]
+    )::after {
+      outline-color: oklch(1 0 0 / 10%);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @layer nitro-kit.state {
+    :where(
+      [data-nk="progressive-image"]
+        > [data-slot="progressive-image-placeholder"],
+      [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
+    ) {
+      transition-duration: 0s;
+    }
+  }
+}

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

@@ -0,0 +1,127 @@
+@layer nitro-kit.base {
+  :where([data-nk="radio-button"]) {
+    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-slot="radio-button-label"]) {
+    display: grid;
+    grid-template-columns: 1.125rem minmax(0, 1fr);
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
+    min-block-size: var(--nk-control-height-md);
+    cursor: pointer;
+  }
+
+  :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"]
+  ) {
+    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;
+  }
+
+  :where([data-nk="radio-button"] [data-slot="radio-button-control"]) {
+    z-index: 1;
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+    opacity: 0;
+  }
+
+  :where([data-nk="radio-button"] [data-slot="radio-button-indicator"]) {
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-full);
+  }
+
+  :where([data-nk="radio-button"] [data-slot="radio-button-indicator"])::after {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    content: "";
+    background: var(--nk-color-primary);
+    border-radius: inherit;
+    opacity: 0;
+  }
+
+  :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"]) {
+    display: block;
+    margin-block-start: var(--nk-space);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    text-wrap: pretty;
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [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 {
+    opacity: 1;
+  }
+
+  :where(
+    [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;
+  }
+
+  /* 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
+     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/src/stylesheets/nitro_kit/components/radio_button_group.css

@@ -0,0 +1,143 @@
+@layer nitro-kit.base {
+  :where([data-nk="radio-button-group"]) {
+    min-inline-size: 0;
+    padding: 0;
+    color: var(--nk-color-foreground);
+    border: 0;
+  }
+
+  :where(
+    [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"]
+  ) {
+    margin-block-start: var(--nk-space);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    text-wrap: pretty;
+  }
+
+  :where(
+    [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"]
+  ) {
+    gap: 0;
+  }
+
+  :where(
+    [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"]
+  ) {
+    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);
+  }
+
+  :where(
+    [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);
+  }
+
+  :where(
+    [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"]
+  ) {
+    display: none;
+  }
+
+  /* A segment has no indicator, so the label must not keep the column the
+     indicator would have occupied: the hidden native radio covers the whole
+     segment instead of sitting inside it, which leaves the label optically
+     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"]
+  ) {
+    position: relative;
+    display: flex;
+    gap: 0;
+    align-items: center;
+    justify-content: center;
+    min-block-size: calc(var(--nk-control-height-md) - var(--nk-space) * 2);
+  }
+
+  :where(
+    [data-nk="radio-button-group"][data-presentation="segmented"]
+      [data-slot="radio-button-control"]
+  ) {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
+@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)
+  ) {
+    background: var(--nk-color-surface);
+    border-color: var(--nk-color-primary);
+    box-shadow: var(--nk-shadow-sm);
+  }
+
+  /* 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));
+    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

@@ -0,0 +1,21 @@
+@layer nitro-kit.base {
+  :where([data-nk="rich-text-area"]) {
+    --lexxy-color-canvas: var(--nk-color-surface);
+    --lexxy-color-text: var(--nk-color-foreground);
+    --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-lighter: var(--nk-color-border);
+    --lexxy-color-ink-lightest: var(--nk-color-muted);
+    --lexxy-radius: var(--nk-radius-md);
+    display: block;
+    inline-size: 100%;
+  }
+
+  /* The editor upgrades asynchronously, so the region reserves a multiline
+     control height instead of collapsing to zero. */
+  :where([data-nk="rich-text-area"]) > [data-slot="rich-text-area-editor"] {
+    display: block;
+    min-block-size: calc(var(--nk-space) * 24);
+  }
+}

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

@@ -0,0 +1,70 @@
+@layer nitro-kit.base {
+  :where([data-nk="select"]) {
+    display: inline-grid;
+    min-inline-size: 10rem;
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="select"] > [data-slot="select-control"]) {
+    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);
+    color: inherit;
+    font: inherit;
+    appearance: none;
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-md);
+    transition:
+      border-color var(--nk-duration-normal) var(--nk-ease),
+      box-shadow var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where([data-nk="select"] > [data-slot="select-icon"]) {
+    grid-area: 1 / 1;
+    align-self: center;
+    justify-self: end;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin-inline-end: calc(var(--nk-space) * 3);
+    color: var(--nk-color-muted-foreground);
+    pointer-events: none;
+  }
+
+  :where([data-nk="select"]:has(> [data-slot="select-control"][multiple])) {
+    display: block;
+    inline-size: 100%;
+  }
+
+  :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);
+    appearance: auto;
+  }
+
+  :where(
+    [data-nk="select"]:has(> [data-slot="select-control"][multiple])
+      > [data-slot="select-icon"]
+  ) {
+    display: none;
+  }
+}
+
+@layer nitro-kit.state {
+  :where([data-nk="select"] > [data-slot="select-control"]:focus-visible) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  :where([data-nk="select"] > [data-slot="select-control"]:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :where(
+    [data-nk="select"] > [data-slot="select-control"][aria-invalid="true"]
+  ) {
+    border-color: var(--nk-color-danger);
+  }
+}