nitro_kit 0.9.0 → 2.0.0.alpha.2

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

@@ -0,0 +1,8 @@
+@layer nitro-kit.base {
+  :where([data-nk="auth-shell"]) {
+    width: 100%;
+    min-width: 0;
+    padding-block: calc(var(--nk-space) * 8);
+    padding-inline: calc(var(--nk-space) * 4);
+  }
+}

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

@@ -0,0 +1,81 @@
+@layer nitro-kit.base {
+  :where([data-nk="avatar"]) {
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: var(--_nk-avatar-size);
+    height: var(--_nk-avatar-size);
+    overflow: hidden;
+    font-size: var(--_nk-avatar-font-size);
+    font-weight: var(--nk-font-weight-medium);
+    line-height: 1;
+    color: var(--nk-color-muted-foreground);
+    vertical-align: middle;
+    background-color: var(--nk-color-muted);
+    border-radius: var(--nk-radius-full);
+  }
+
+  :where([data-nk="avatar"])::after {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+    content: "";
+    border: var(--nk-border-width) solid
+      color-mix(in oklab, var(--nk-color-foreground) 10%, transparent);
+    border-radius: inherit;
+  }
+
+  :where(
+    [data-nk="avatar"] > [data-slot="avatar-fallback"],
+    [data-nk="avatar"] > [data-slot="avatar-image"]
+  ) {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  :where([data-nk="avatar"] > [data-slot="avatar-fallback"]) {
+    display: grid;
+    place-items: center;
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  :where([data-nk="avatar"] > [data-slot="avatar-image"]) {
+    z-index: 1;
+    object-fit: cover;
+  }
+}
+
+@layer nitro-kit.state {
+  /* A failed image is removed so the initials underneath stay visible
+     instead of a broken-image glyph covering them. */
+  :where([data-nk="avatar"][data-state="error"] > [data-slot="avatar-image"]) {
+    display: none;
+  }
+}
+
+@layer nitro-kit.size {
+  :where([data-nk="avatar"][data-size="xs"]) {
+    --_nk-avatar-size: 1.5rem;
+    --_nk-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
+  }
+
+  :where([data-nk="avatar"][data-size="sm"]) {
+    --_nk-avatar-size: 2rem;
+    --_nk-avatar-font-size: var(--nk-text-xs);
+  }
+
+  :where([data-nk="avatar"][data-size="md"]) {
+    --_nk-avatar-size: 3rem;
+    --_nk-avatar-font-size: var(--nk-text-sm);
+  }
+
+  :where([data-nk="avatar"][data-size="lg"]) {
+    --_nk-avatar-size: 4rem;
+    --_nk-avatar-font-size: var(--nk-text-lg);
+  }
+}

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

@@ -0,0 +1,80 @@
+@layer nitro-kit.compound {
+  :where([data-nk="avatar-stack"]) {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  /* Stacked items overlap the ring of the item behind them, so a translucent
+     fill would let that ring show through. Each item paints its own fill as a
+     background image over an opaque surface underlay. */
+  :where(
+    [data-nk="avatar-stack"] > [data-slot="avatar-stack-avatar"],
+    [data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]
+  ) {
+    --_nk-avatar-stack-fill: var(--nk-color-muted);
+
+    flex: none;
+    margin-inline-start: calc(var(--nk-space) * -3);
+    background-color: var(--nk-color-surface);
+    background-image: linear-gradient(
+      var(--_nk-avatar-stack-fill),
+      var(--_nk-avatar-stack-fill)
+    );
+    box-shadow: 0 0 0 calc(var(--nk-border-width) * 2) var(--nk-color-surface);
+  }
+
+  :where(
+    [data-nk="avatar-stack"] > [data-slot="avatar-stack-avatar"]:first-child,
+    [data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]:first-child
+  ) {
+    margin-inline-start: 0;
+  }
+
+  :where([data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]) {
+    --_nk-avatar-stack-fill: var(--nk-color-elevated);
+
+    display: inline-grid;
+    place-items: center;
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: 1;
+    color: var(--nk-color-muted-foreground);
+    border-radius: var(--nk-radius-full);
+  }
+
+  :where(
+    [data-nk="avatar-stack"][data-size="xs"]
+      > [data-slot="avatar-stack-overflow"]
+  ) {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: calc(var(--nk-text-xs) * 0.875);
+  }
+
+  :where(
+    [data-nk="avatar-stack"][data-size="sm"]
+      > [data-slot="avatar-stack-overflow"]
+  ) {
+    width: 2rem;
+    height: 2rem;
+    font-size: var(--nk-text-xs);
+  }
+
+  :where(
+    [data-nk="avatar-stack"][data-size="md"]
+      > [data-slot="avatar-stack-overflow"]
+  ) {
+    width: 3rem;
+    height: 3rem;
+    font-size: var(--nk-text-sm);
+  }
+
+  :where(
+    [data-nk="avatar-stack"][data-size="lg"]
+      > [data-slot="avatar-stack-overflow"]
+  ) {
+    width: 4rem;
+    height: 4rem;
+    font-size: var(--nk-text-base);
+  }
+}

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

@@ -0,0 +1,76 @@
+@layer nitro-kit.base {
+  :where([data-nk="badge"]) {
+    --_nk-badge-color: var(--_nk-palette-light);
+    --_nk-badge-tint-strength: 20%;
+
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    font-weight: var(--nk-font-weight-medium);
+    line-height: var(--nk-leading-tight);
+    color: var(--_nk-badge-color);
+    white-space: nowrap;
+    vertical-align: middle;
+    background-color: color-mix(
+      in oklab,
+      var(--_nk-palette-tint) var(--_nk-badge-tint-strength),
+      transparent
+    );
+    border: var(--nk-border-width) solid transparent;
+    border-radius: var(--nk-radius-md);
+  }
+
+  :where([data-nk="badge"] > [data-slot="badge-label"]) {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+@layer nitro-kit.variant {
+  :where([data-nk="badge"][data-variant="outline"]) {
+    background-color: transparent;
+    border-color: color-mix(in oklab, var(--_nk-palette-tint) 50%, transparent);
+  }
+
+  :where([data-theme="dark"] [data-nk="badge"]) {
+    --_nk-badge-color: var(--_nk-palette-dark);
+    --_nk-badge-tint-strength: 40%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(:root:not([data-theme]) [data-nk="badge"]) {
+      --_nk-badge-color: var(--_nk-palette-dark);
+      --_nk-badge-tint-strength: 40%;
+    }
+  }
+}
+
+@layer nitro-kit.compound {
+  /* An Icon is block-level on its own, which would push the rest of the label
+     onto a second line. Inside a badge it joins the text line and never
+     shrinks, so a badge with an icon stays on one line like any other. */
+  :where([data-nk="badge"] [data-nk="icon"]) {
+    display: inline-block;
+    flex: none;
+    vertical-align: -0.125em;
+  }
+}
+
+@layer nitro-kit.size {
+  :where([data-nk="badge"][data-size="xs"]) {
+    padding: 0 calc(var(--nk-space) * 1.25);
+    font-size: var(--nk-text-xs);
+  }
+
+  :where([data-nk="badge"][data-size="sm"]) {
+    padding: calc(var(--nk-space) * 0.5) calc(var(--nk-space) * 1.5);
+    font-size: var(--nk-text-xs);
+  }
+
+  :where([data-nk="badge"][data-size="md"]) {
+    padding: calc(var(--nk-space) * 0.5) calc(var(--nk-space) * 2);
+    font-size: var(--nk-text-sm);
+  }
+}

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

@@ -0,0 +1,283 @@
+@layer nitro-kit.base {
+  :where([data-nk="button"]) {
+    --_nk-button-height: var(--nk-control-height-md);
+    --_nk-button-padding: calc(var(--nk-space) * 4);
+    --_nk-button-icon-padding: calc(var(--nk-space) * 3);
+    --_nk-button-radius: var(--nk-radius-lg);
+    --_nk-button-font-size: var(--nk-text-sm);
+    --_nk-button-line-height: 1.25rem;
+    --_nk-button-background: var(--nk-button-default-background);
+    --_nk-button-hover-background: var(--nk-button-default-hover-background);
+    --_nk-button-foreground: var(--nk-button-default-foreground);
+    --_nk-button-border-width: var(--nk-border-width);
+    --_nk-button-border: var(--nk-button-default-border);
+    --_nk-button-border-bottom: light-dark(
+      color-mix(
+        in oklab,
+        var(--nk-button-default-border) 93%,
+        var(--nk-button-default-foreground)
+      ),
+      var(--nk-button-default-border)
+    );
+    --_nk-button-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    max-inline-size: 100%;
+    block-size: var(--_nk-button-height);
+    gap: calc(var(--nk-space) * 2);
+    padding-inline: var(--_nk-button-padding);
+    color: var(--_nk-button-foreground);
+    font-size: var(--_nk-button-font-size);
+    font-weight: var(--nk-font-weight-medium);
+    line-height: var(--_nk-button-line-height);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    user-select: none;
+    background: var(--_nk-button-background);
+    border-color: var(--_nk-button-border);
+    border-style: solid;
+    border-width: var(--_nk-button-border-width);
+    border-block-end-color: var(--_nk-button-border-bottom);
+    border-radius: var(--_nk-button-radius);
+    box-shadow: var(--_nk-button-shadow);
+  }
+
+  :where(button[data-nk="button"]) {
+    cursor: default;
+  }
+
+  :where(
+    [data-nk="button"] > [data-slot="button-icon-start"],
+    [data-nk="button"] > [data-slot="button-icon-end"],
+    [data-nk="button"] > [data-slot="button-spinner"]
+  ) {
+    display: inline-flex;
+    flex: none;
+  }
+
+  :where([data-nk="button"] > [data-slot="button-submission-spinner"]) {
+    display: none;
+    flex: none;
+  }
+
+  :where([data-nk="button"] > [data-slot="button-label"]) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :where(
+    [data-nk="button"]:has(> [data-slot="button-icon-start"]),
+    [data-nk="button"]:has(> [data-slot="button-spinner"]),
+    [data-nk="button"]:has(
+      > [data-slot="button-submission-spinner"][data-state="visible"]
+    )
+  ) {
+    padding-inline-start: var(--_nk-button-icon-padding);
+  }
+
+  :where([data-nk="button"]:has(> [data-slot="button-icon-end"])) {
+    padding-inline-end: var(--_nk-button-icon-padding);
+  }
+
+  :where(
+    [data-nk="button"]:not(:has(> [data-slot="button-label"])):has(
+        > [data-slot="button-icon-start"],
+        > [data-slot="button-icon-end"],
+        > [data-slot="button-spinner"]
+      )
+  ) {
+    inline-size: var(--_nk-button-height);
+    padding-inline: 0;
+  }
+}
+
+@layer nitro-kit.variant {
+  :where([data-nk="button"][data-variant="primary"]) {
+    --_nk-button-background: var(--nk-color-primary);
+    --_nk-button-hover-background: var(--nk-color-primary-hover);
+    --_nk-button-foreground: var(--nk-color-primary-foreground);
+    --_nk-button-border: light-dark(oklch(0 0 0 / 0.1), transparent);
+    --_nk-button-border-bottom: var(--_nk-button-border);
+    --_nk-button-shadow: inset 0 1px oklch(1 0 0 / 0.2);
+  }
+
+  :where([data-nk="button"][data-variant="destructive"]) {
+    --_nk-button-background: var(--nk-color-danger);
+    --_nk-button-hover-background: var(--nk-color-danger-hover);
+    --_nk-button-foreground: var(--nk-color-danger-foreground);
+    --_nk-button-border-width: 0;
+    --_nk-button-border: transparent;
+    --_nk-button-border-bottom: transparent;
+    --_nk-button-shadow:
+      inset 0 1px var(--nk-color-danger), inset 0 2px oklch(1 0 0 / 0.15);
+  }
+
+  :where([data-nk="button"][data-variant="ghost"]) {
+    --_nk-button-background: transparent;
+    --_nk-button-hover-background: light-dark(
+      oklch(0.274 0.006 286.033 / 0.05),
+      oklch(1 0 0 / 0.15)
+    );
+    --_nk-button-foreground: light-dark(
+      oklch(0.274 0.006 286.033),
+      oklch(1 0 0)
+    );
+    --_nk-button-border-width: 0;
+    --_nk-button-border: transparent;
+    --_nk-button-border-bottom: transparent;
+    --_nk-button-shadow: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(
+      :root:not([data-theme])
+        [data-nk="button"]:is(
+          [data-variant="primary"],
+          [data-variant="destructive"]
+        )
+    ) {
+      --_nk-button-border-width: 0;
+    }
+
+    :where(
+      :root:not([data-theme]) [data-nk="button"][data-variant="destructive"]
+    ) {
+      --_nk-button-shadow: none;
+    }
+  }
+
+  :where([data-theme="dark"] [data-nk="button"][data-variant="primary"]) {
+    --_nk-button-border-width: 0;
+  }
+
+  :where([data-theme="dark"] [data-nk="button"][data-variant="destructive"]) {
+    --_nk-button-shadow: none;
+  }
+}
+
+@layer nitro-kit.size {
+  :where([data-nk="button"][data-size="xs"]) {
+    --_nk-button-height: var(--nk-control-height-xs);
+    --_nk-button-padding: calc(var(--nk-space) * 2);
+    --_nk-button-icon-padding: var(--nk-space);
+    --_nk-button-radius: var(--nk-radius-md);
+    --_nk-button-font-size: var(--nk-text-xs);
+    --_nk-button-line-height: 1rem;
+    --_nk-button-avatar-size: 1rem;
+    --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.75);
+  }
+
+  :where([data-nk="button"][data-size="sm"]) {
+    --_nk-button-height: calc(var(--nk-space) * 8);
+    --_nk-button-padding: calc(var(--nk-space) * 3);
+    --_nk-button-icon-padding: calc(var(--nk-space) * 2);
+    --_nk-button-radius: var(--nk-radius-md);
+    --_nk-button-avatar-size: 1.25rem;
+    --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
+  }
+
+  :where([data-nk="button"][data-size="md"]) {
+    --_nk-button-avatar-size: 1.5rem;
+    --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
+  }
+
+  :where([data-nk="button"][data-size="lg"]) {
+    --_nk-button-height: var(--nk-control-height-lg);
+    --_nk-button-padding: calc(var(--nk-space) * 5);
+    --_nk-button-icon-padding: calc(var(--nk-space) * 4);
+    --_nk-button-avatar-size: 1.75rem;
+    --_nk-button-avatar-font-size: var(--nk-text-xs);
+  }
+
+  :where([data-nk="button"][data-size="xl"]) {
+    --_nk-button-height: var(--nk-control-height-xl);
+    --_nk-button-padding: calc(var(--nk-space) * 8);
+    --_nk-button-icon-padding: calc(var(--nk-space) * 7);
+    --_nk-button-radius: var(--nk-radius-xl);
+    --_nk-button-font-size: var(--nk-text-base);
+    --_nk-button-line-height: 1.5rem;
+    --_nk-button-avatar-size: 2rem;
+    --_nk-button-avatar-font-size: var(--nk-text-xs);
+    gap: calc(var(--nk-space) * 4);
+  }
+}
+
+@layer nitro-kit.state {
+  @media (hover: hover) {
+    :where([data-nk="button"]:hover:not(:disabled, [aria-disabled="true"])) {
+      background: var(--_nk-button-hover-background);
+    }
+  }
+
+  :where([data-nk="button"]:focus-visible) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  :where(
+    [data-nk="button"]:disabled,
+    [data-nk="button"][aria-disabled="true"]
+  ) {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.75;
+  }
+
+  :where([data-nk="button"][aria-busy="true"] > [data-slot="button-spinner"]) {
+    animation: nk-button-spin 1s linear infinite;
+  }
+
+  :where(
+    [data-nk="button"]
+      > [data-slot="button-submission-spinner"][data-state="visible"]
+  ) {
+    display: inline-flex;
+    animation: nk-button-spin 1s linear infinite;
+  }
+
+  @keyframes nk-button-spin {
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+      [data-nk="button"][aria-busy="true"] > [data-slot="button-spinner"],
+      [data-nk="button"]
+        > [data-slot="button-submission-spinner"][data-state="visible"]
+    ) {
+      animation: none;
+    }
+  }
+}
+
+@layer nitro-kit.compound {
+  :where(
+    [data-nk="button"]
+      > [data-slot="button-label"]:has(> [data-nk="avatar"])
+  ) {
+    display: inline-flex;
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
+  }
+
+  :where(
+    [data-nk="button"]
+      > [data-slot="button-label"]
+      > [data-nk="avatar"]
+  ) {
+    width: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+    height: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+    font-size: min(
+      var(--_nk-avatar-font-size),
+      var(--_nk-button-avatar-font-size)
+    );
+  }
+}

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

@@ -0,0 +1,53 @@
+@layer nitro-kit.compound {
+  :where([data-nk="button-group"]) {
+    display: inline-flex;
+    isolation: isolate;
+    align-items: stretch;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    vertical-align: middle;
+  }
+
+  :where([data-nk="button-group"] > [data-slot="button-group-button"]) {
+    position: relative;
+    /* The group handles pressure by scrolling, so members keep their
+       intrinsic width instead of truncating their labels. */
+    max-inline-size: none;
+  }
+
+  :where(
+    [data-nk="button-group"]
+      > [data-slot="button-group-button"]:not(:first-child)
+  ) {
+    margin-inline-start: calc(var(--nk-border-width) * -1);
+  }
+
+  :where(
+    [data-nk="button-group"]
+      > [data-slot="button-group-button"]:not(:only-child)
+  ) {
+    border-radius: 0;
+  }
+
+  :where(
+    [data-nk="button-group"]
+      > [data-slot="button-group-button"]:first-child:not(:only-child)
+  ) {
+    border-start-start-radius: var(--_nk-button-radius);
+    border-end-start-radius: var(--_nk-button-radius);
+  }
+
+  :where(
+    [data-nk="button-group"]
+      > [data-slot="button-group-button"]:last-child:not(:only-child)
+  ) {
+    border-start-end-radius: var(--_nk-button-radius);
+    border-end-end-radius: var(--_nk-button-radius);
+  }
+
+  :where(
+    [data-nk="button-group"] > [data-slot="button-group-button"]:focus-visible
+  ) {
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,6 @@
+@layer nitro-kit.base {
+  /* A Rails mutation form should not add a layout box around its Button. */
+  :where([data-nk="button-to"]) {
+    display: contents;
+  }
+}

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

@@ -0,0 +1,70 @@
+@layer nitro-kit.base {
+  :where([data-nk="card"]) {
+    --_nk-card-padding: calc(var(--nk-space) * 6);
+
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--nk-space) * 4);
+    padding: var(--_nk-card-padding);
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
+    box-shadow: var(--nk-shadow-sm);
+  }
+
+  :where([data-nk="card"] > [data-slot="card-title"]) {
+    font-size: var(--nk-text-lg);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="card"] > [data-slot="card-body"]) {
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-relaxed);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="card"] > [data-slot="card-footer"]) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.compound {
+  /* Only the region that bleeds to the edge clips, never the card itself, so
+     an edge-to-edge image cannot break the card's corners while tooltips,
+     dropdowns, and other overlays inside a card stay free to escape its box. */
+  :where([data-nk="card"] > [data-slot="card-full"]) {
+    overflow: hidden;
+    margin-inline: calc(var(--_nk-card-padding) * -1);
+  }
+
+  :where([data-nk="card"] > [data-slot="card-full"]:first-child) {
+    margin-block-start: calc(var(--_nk-card-padding) * -1);
+    border-start-start-radius: calc(
+      var(--nk-radius-lg) - var(--nk-border-width)
+    );
+    border-start-end-radius: calc(var(--nk-radius-lg) - var(--nk-border-width));
+  }
+
+  /* Full-width media fills the card edge to edge, so the card owns the corner
+     radius and the media drops its own. */
+  :where(
+    [data-nk="card"]
+      > [data-slot="card-full"]
+      :is(img, [data-nk="progressive-image"])
+  ) {
+    border-radius: 0;
+  }
+
+  :where([data-nk="card"] > [data-slot="card-divider"]) {
+    margin-inline: calc(var(--_nk-card-padding) * -1);
+    border-block-start: var(--nk-border-width) solid var(--nk-color-border);
+  }
+}