nitro_kit 0.9.0 → 2.0.0.alpha.2

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

@@ -0,0 +1,131 @@
+@layer nitro-kit.base {
+  :where([data-nk="toast"]) {
+    pointer-events: none;
+  }
+
+  :where([data-nk="toast"] > [data-slot="toast-list"]) {
+    position: fixed;
+    z-index: 100;
+    inset-inline-end: calc(var(--nk-space) * 5);
+    inset-block-end: calc(var(--nk-space) * 5);
+    display: flex;
+    flex-direction: column;
+    inline-size: min(26rem, calc(100vw - (var(--nk-space) * 10)));
+    gap: calc(var(--nk-space) * 3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where([data-nk="toast-item"]) {
+    --_nk-toast-background: var(--nk-color-surface);
+    --_nk-toast-foreground: var(--nk-color-foreground);
+    --_nk-toast-border: var(--nk-color-border);
+
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    inline-size: 100%;
+    gap: calc(var(--nk-space) * 3);
+    padding: calc(var(--nk-space) * 4);
+    color: var(--_nk-toast-foreground);
+    pointer-events: auto;
+    background: var(--_nk-toast-background);
+    border: var(--nk-border-width) solid var(--_nk-toast-border);
+    border-radius: var(--nk-radius-lg);
+    box-shadow: var(--nk-shadow-lg);
+    transition:
+      opacity var(--nk-duration-normal) var(--nk-ease),
+      transform var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where([data-nk="toast-item"] > [data-slot="toast-item-content"]) {
+    display: grid;
+    flex: 1;
+    gap: var(--nk-space);
+    min-inline-size: 0;
+  }
+
+  :where([data-nk="toast-item"] [data-slot="toast-item-title"]) {
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="toast-item"] [data-slot="toast-item-description"]) {
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-normal);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="toast-item"] > [data-slot="toast-item-dismiss"]) {
+    flex: none;
+    margin: calc(var(--nk-space) * -2) calc(var(--nk-space) * -2) 0 0;
+  }
+}
+
+@layer nitro-kit.variant {
+  :where([data-nk="toast-item"][data-variant="info"]) {
+    --_nk-toast-background: color-mix(
+      in oklab,
+      var(--nk-color-info) 10%,
+      var(--nk-color-surface)
+    );
+    --_nk-toast-foreground: var(--nk-color-info-content);
+    --_nk-toast-border: var(--nk-color-info);
+  }
+
+  :where([data-nk="toast-item"][data-variant="success"]) {
+    --_nk-toast-background: color-mix(
+      in oklab,
+      var(--nk-color-success) 10%,
+      var(--nk-color-surface)
+    );
+    --_nk-toast-foreground: var(--nk-color-success-content);
+    --_nk-toast-border: var(--nk-color-success);
+  }
+
+  :where([data-nk="toast-item"][data-variant="warning"]) {
+    --_nk-toast-background: color-mix(
+      in oklab,
+      var(--nk-color-warning) 10%,
+      var(--nk-color-surface)
+    );
+    --_nk-toast-foreground: var(--nk-color-warning-content);
+    --_nk-toast-border: var(--nk-color-warning);
+  }
+
+  :where([data-nk="toast-item"][data-variant="error"]) {
+    --_nk-toast-background: color-mix(
+      in oklab,
+      var(--nk-color-danger) 10%,
+      var(--nk-color-surface)
+    );
+    --_nk-toast-foreground: var(--nk-color-danger-content);
+    --_nk-toast-border: var(--nk-color-danger);
+  }
+}
+
+@layer nitro-kit.state {
+  :where([data-nk="toast-item"][data-state="open"]) {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  :where([data-nk="toast-item"][data-state="closed"]) {
+    opacity: 0;
+    transform: translateY(calc(var(--nk-space) * 3));
+  }
+
+  :where([data-nk="toast-item"]:focus-visible) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="toast-item"]) {
+      transition-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+@layer nitro-kit.base {
+  :where([data-nk="toolbar"]) {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--nk-space) * 4);
+  }
+
+  :where(
+    [data-nk="toolbar"] > [data-slot="toolbar-leading"],
+    [data-nk="toolbar"] > [data-slot="toolbar-trailing"]
+  ) {
+    display: flex;
+    min-width: 0;
+    /* Regions never exceed the toolbar, so nested content such as a
+       scrolling ButtonGroup receives real width pressure when stacked. */
+    max-inline-size: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--nk-space) * 2);
+  }
+
+  :where([data-nk="toolbar"] > [data-slot="toolbar-trailing"]) {
+    justify-content: flex-end;
+    margin-inline-start: auto;
+  }
+}
+
+@layer nitro-kit.state {
+  @media (max-width: 48rem) {
+    :where([data-nk="toolbar"]) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    :where([data-nk="toolbar"] > [data-slot="toolbar-trailing"]) {
+      justify-content: flex-start;
+      margin-inline-start: 0;
+    }
+
+    :where(
+      [data-nk="app-shell"]
+        > [data-slot="app-shell-header"]
+        > [data-slot="app-shell-topbar"]
+        > [data-nk="toolbar"]
+    ) {
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+    }
+
+    :where(
+      [data-nk="app-shell"]
+        > [data-slot="app-shell-header"]
+        > [data-slot="app-shell-topbar"]
+        > [data-nk="toolbar"]
+        > [data-slot="toolbar-leading"]
+    ) {
+      flex: 1 1 auto;
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+
+    :where(
+      [data-nk="app-shell"]
+        > [data-slot="app-shell-header"]
+        > [data-slot="app-shell-topbar"]
+        > [data-nk="toolbar"]
+        > [data-slot="toolbar-trailing"]
+    ) {
+      flex: 0 0 auto;
+      justify-content: flex-end;
+      margin-inline-start: auto;
+    }
+  }
+}

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

@@ -0,0 +1,124 @@
+@layer nitro-kit.base {
+  :where([data-nk="tooltip"]) {
+    position: relative;
+    display: inline-flex;
+  }
+
+  :where([data-nk="tooltip"] > [data-slot="tooltip-content"]) {
+    position: absolute;
+    z-index: 50;
+    inline-size: max-content;
+    max-inline-size: min(20rem, calc(100vw - (var(--nk-space) * 8)));
+    padding: calc(var(--nk-space) * 1.5) calc(var(--nk-space) * 2.5);
+    color: var(--nk-color-primary-foreground);
+    font-size: var(--nk-text-xs);
+    line-height: var(--nk-leading-normal);
+    text-wrap: pretty;
+    pointer-events: auto;
+    visibility: hidden;
+    background: var(--nk-color-primary);
+    border-radius: var(--nk-radius-md);
+    box-shadow: var(--nk-shadow-sm);
+    opacity: 0;
+    transition: opacity var(--nk-duration-fast) var(--nk-ease);
+  }
+
+  :where([data-nk="tooltip"] > [data-slot="tooltip-content"]::before) {
+    position: absolute;
+    content: "";
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="top"] > [data-slot="tooltip-content"]
+  ) {
+    inset-block-end: calc(100% + (var(--nk-space) * 2));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="top"]
+      > [data-slot="tooltip-content"]::before
+  ) {
+    inset-block-start: 100%;
+    inset-inline: 0;
+    block-size: calc(var(--nk-space) * 2);
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="right"] > [data-slot="tooltip-content"]
+  ) {
+    inset-block-start: 50%;
+    inset-inline-start: calc(100% + (var(--nk-space) * 2));
+    transform: translateY(-50%);
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="right"]
+      > [data-slot="tooltip-content"]::before
+  ) {
+    inset-block: 0;
+    inset-inline-end: 100%;
+    inline-size: calc(var(--nk-space) * 2);
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="bottom"] > [data-slot="tooltip-content"]
+  ) {
+    inset-block-start: calc(100% + (var(--nk-space) * 2));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="bottom"]
+      > [data-slot="tooltip-content"]::before
+  ) {
+    inset-block-end: 100%;
+    inset-inline: 0;
+    block-size: calc(var(--nk-space) * 2);
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="left"] > [data-slot="tooltip-content"]
+  ) {
+    inset-block-start: 50%;
+    inset-inline-end: calc(100% + (var(--nk-space) * 2));
+    transform: translateY(-50%);
+  }
+
+  :where(
+    [data-nk="tooltip"][data-placement="left"]
+      > [data-slot="tooltip-content"]::before
+  ) {
+    inset-block: 0;
+    inset-inline-start: 100%;
+    inline-size: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="tooltip"]:not([data-dismissed]):focus-within
+      > [data-slot="tooltip-content"]
+  ) {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    :where(
+      [data-nk="tooltip"]:not([data-dismissed]):hover
+        > [data-slot="tooltip-content"]
+    ) {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="tooltip"] > [data-slot="tooltip-content"]) {
+      transition-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,191 @@
+@layer nitro-kit.base {
+  @scope ([data-nk="typeset"]) to (
+    [data-nk]:not([data-nk="typeset"]),
+    [data-typeset="off"]
+  ) {
+    :scope {
+      font-family: var(--nk-typeset-font-body);
+      font-size: var(--nk-typeset-size);
+      line-height: var(--nk-typeset-leading);
+      color: var(--nk-color-foreground);
+      overflow-wrap: break-word;
+    }
+
+    :where(p, ul, ol, dl, blockquote, pre, figure, table, details, hr) {
+      margin-block: var(--nk-typeset-flow) 0;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6) {
+      margin-block: calc(var(--nk-typeset-flow) * 1.4) 0;
+      font-family: var(--nk-typeset-font-heading);
+      font-weight: var(--nk-font-weight-semibold);
+      line-height: var(--nk-leading-tight);
+      text-wrap: balance;
+    }
+
+    h1 {
+      font-size: 2em;
+    }
+
+    h2 {
+      font-size: 1.5em;
+    }
+
+    h3 {
+      font-size: 1.25em;
+    }
+
+    h4 {
+      font-size: 1.125em;
+    }
+
+    :where(h5, h6) {
+      font-size: 1em;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6) + :not([data-nk], [data-typeset="off"]) {
+      margin-block-start: calc(var(--nk-typeset-flow) * 0.65);
+    }
+
+    a {
+      color: inherit;
+      font-weight: var(--nk-font-weight-medium);
+      text-decoration-line: underline;
+      text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
+      text-decoration-thickness: from-font;
+      text-underline-offset: 0.15em;
+    }
+
+    :where(strong, b) {
+      font-weight: var(--nk-font-weight-semibold);
+    }
+
+    :where(ul, ol) {
+      padding-inline-start: 1.5em;
+    }
+
+    dt {
+      font-weight: var(--nk-font-weight-semibold);
+    }
+
+    dd + dt {
+      margin-block-start: calc(var(--nk-typeset-flow) * 0.75);
+    }
+
+    dd {
+      color: var(--nk-color-muted-foreground);
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    li + li {
+      margin-block-start: calc(var(--nk-typeset-flow) * 0.35);
+    }
+
+    :where(li, blockquote)::marker {
+      color: var(--nk-color-muted-foreground);
+    }
+
+    blockquote {
+      padding-inline-start: 1em;
+      color: var(--nk-color-muted-foreground);
+      border-inline-start: calc(var(--nk-border-width) * 2) solid
+        var(--nk-color-border);
+    }
+
+    :not(pre) > code {
+      padding: 0.15em 0.35em;
+      font-family: var(--nk-typeset-font-mono);
+      font-size: 0.875em;
+      background: var(--nk-color-muted);
+      border-radius: var(--nk-radius-sm);
+    }
+
+    pre {
+      overflow-x: auto;
+      padding: calc(var(--nk-space) * 4);
+      color: var(--nk-color-foreground);
+      font-family: var(--nk-typeset-font-mono);
+      font-size: 0.875em;
+      line-height: var(--nk-leading-relaxed);
+      background: var(--nk-color-muted);
+      border-radius: var(--nk-radius-md);
+    }
+
+    pre code {
+      font: inherit;
+    }
+
+    hr {
+      border: 0;
+      border-block-start: var(--nk-border-width) solid var(--nk-color-border);
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.925em;
+    }
+
+    :where(th, td) {
+      padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+      text-align: start;
+      vertical-align: top;
+      border-block-end: var(--nk-border-width) solid var(--nk-color-border);
+    }
+
+    th {
+      font-weight: var(--nk-font-weight-semibold);
+    }
+
+    :where(img, video, svg) {
+      max-width: 100%;
+      height: auto;
+      border-radius: var(--nk-radius-md);
+    }
+
+    summary {
+      cursor: pointer;
+      font-weight: var(--nk-font-weight-semibold);
+    }
+
+    details > :not(summary) {
+      margin-block-start: calc(var(--nk-typeset-flow) * 0.65);
+    }
+
+    figcaption {
+      margin-block-start: calc(var(--nk-typeset-flow) * 0.5);
+      color: var(--nk-color-muted-foreground);
+      font-size: 0.875em;
+    }
+
+    :scope > :first-child {
+      margin-block-start: 0;
+    }
+  }
+}
+
+@layer nitro-kit.state {
+  @scope ([data-nk="typeset"]) to (
+    [data-nk]:not([data-nk="typeset"]),
+    [data-typeset="off"]
+  ) {
+    @media (hover: hover) {
+      a:hover {
+        text-decoration-color: currentColor;
+      }
+    }
+
+    a:focus-visible {
+      outline: var(--nk-focus-width) solid var(--nk-color-focus);
+      outline-offset: var(--nk-focus-offset);
+      border-radius: var(--nk-radius-xs);
+    }
+  }
+}

data/src/stylesheets/nitro_kit/layers.css

@@ -0,0 +1,7 @@
+@layer nitro-kit.tokens,
+  nitro-kit.reset,
+  nitro-kit.base,
+  nitro-kit.variant,
+  nitro-kit.size,
+  nitro-kit.state,
+  nitro-kit.compound;

data/src/stylesheets/nitro_kit/reset.css

@@ -0,0 +1,192 @@
+/* Nitro Kit ships its own full-page preflight. It lives in the
+   `nitro-kit.reset` cascade layer, so unlayered application CSS always wins,
+   and Nitro never depends on Tailwind Preflight. */
+@layer nitro-kit.reset {
+  /* Pseudo-elements cannot appear inside `:where()`, so they are listed
+     alongside it. They carry no more specificity than a bare element. */
+  :where(*),
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+    border-color: var(--nk-color-border);
+  }
+
+  /* Nitro-owned boxes never establish a min-content floor, so long slot
+     content shrinks instead of overflowing its flex or grid parent. */
+  :where([data-nk], [data-nk] [data-slot]) {
+    min-width: 0;
+  }
+
+  :where(html, :host) {
+    font-family: var(--nk-font-sans);
+    line-height: var(--nk-leading-normal);
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(body) {
+    line-height: inherit;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  :where(b, strong) {
+    font-weight: bolder;
+  }
+
+  :where(a) {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  :where(code, kbd, samp, pre) {
+    font-family: var(--nk-font-mono);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+  }
+
+  :where(small) {
+    font-size: 80%;
+  }
+
+  :where(sub, sup) {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  :where(sub) {
+    bottom: -0.25em;
+  }
+
+  :where(sup) {
+    top: -0.5em;
+  }
+
+  :where(button, input, select, optgroup, textarea),
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: transparent;
+    border-radius: 0;
+  }
+
+  :where(input, textarea)::placeholder {
+    color: var(--nk-color-muted-foreground);
+    opacity: 1;
+  }
+
+  :where(button, input:is([type="button"], [type="reset"], [type="submit"])),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  :where(
+    button,
+    input:is([type="button"], [type="reset"], [type="submit"]),
+    label[for]
+  ),
+  ::file-selector-button {
+    cursor: pointer;
+  }
+
+  :where(:disabled),
+  ::file-selector-button:disabled {
+    cursor: default;
+  }
+
+  :where(textarea) {
+    resize: vertical;
+  }
+
+  :where(input)::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  :where(input)::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  :where(input)::-webkit-datetime-edit {
+    display: inline-flex;
+    line-height: normal;
+  }
+
+  :where(input)::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  :where(input)::-webkit-inner-spin-button,
+  :where(input)::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  :where(input):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /* Only Nitro-owned lists lose their markers. Prose lists keep real markers,
+     and `typeset` restores its own in the `nitro-kit.base` layer. */
+  :where(
+    ol[data-nk],
+    ul[data-nk],
+    menu[data-nk],
+    [data-nk] :is(ol, ul, menu)[data-slot]
+  ) {
+    list-style: none;
+  }
+
+  :where(table) {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+    vertical-align: middle;
+  }
+
+  :where(img, video) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :where(hr) {
+    height: 0;
+    color: inherit;
+    border-top-width: var(--nk-border-width);
+  }
+
+  :where(abbr:where([title])) {
+    text-decoration: underline dotted;
+  }
+
+  :where(summary) {
+    display: list-item;
+  }
+
+  :where(progress) {
+    vertical-align: baseline;
+  }
+
+  :where([hidden]):not([hidden="until-found"]) {
+    display: none !important;
+  }
+}