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

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

@@ -10,7 +10,7 @@
     inset-block-end: calc(var(--nk-space) * 5);
     display: flex;
     flex-direction: column;
-    inline-size: min(26rem, calc(100vw - (var(--nk-space) * 10)));
+    inline-size: min(26rem, calc(100% - (var(--nk-space) * 10)));
     gap: calc(var(--nk-space) * 3);
     margin: 0;
     padding: 0;
@@ -33,7 +33,7 @@
     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);
+    box-shadow: var(--nk-shadow-md);
     transition:
       opacity var(--nk-duration-normal) var(--nk-ease),
       transform var(--nk-duration-normal) var(--nk-ease);
@@ -47,8 +47,8 @@
   }
 
   :where([data-nk="toast-item"] [data-slot="toast-item-title"]) {
-    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);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -66,44 +66,13 @@
 }
 
 @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);
+  /* Colour, tint strength, and appearance switching all come from the shared
+     semantic palette, so a Toast and an Alert of the same variant render
+     identically. */
+  :where([data-nk="toast-item"][data-variant]) {
+    --_nk-toast-background: var(--_nk-semantic-surface);
+    --_nk-toast-border: var(--_nk-semantic-border);
+    --_nk-toast-foreground: var(--_nk-semantic-content);
   }
 }
 
@@ -118,11 +87,6 @@
     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

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="toolbar"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
@@ -9,11 +9,11 @@
   }
 
   :where(
-    [data-nk="toolbar"] > [data-slot="toolbar-leading"],
-    [data-nk="toolbar"] > [data-slot="toolbar-trailing"]
-  ) {
+      [data-nk="toolbar"] > [data-slot="toolbar-leading"],
+      [data-nk="toolbar"] > [data-slot="toolbar-trailing"]
+    ) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     /* Regions never exceed the toolbar, so nested content such as a
        scrolling ButtonGroup receives real width pressure when stacked. */
     max-inline-size: 100%;
@@ -26,10 +26,20 @@
     justify-content: flex-end;
     margin-inline-start: auto;
   }
+
+  /* Nested scroll regions such as a clipped ButtonGroup keep a visible
+     scrollbar so cropped actions read as scrollable. */
+  :where(
+      [data-nk="toolbar"] > [data-slot="toolbar-leading"] > *,
+      [data-nk="toolbar"] > [data-slot="toolbar-trailing"] > *
+    ) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--nk-color-border) transparent;
+  }
 }
 
 @layer nitro-kit.state {
-  @media (max-width: 48rem) {
+  @media (width < 48rem) {
     :where([data-nk="toolbar"]) {
       flex-direction: column;
       align-items: stretch;
@@ -39,40 +49,5 @@
       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

@@ -8,19 +8,26 @@
     position: absolute;
     z-index: 50;
     inline-size: max-content;
+    /* Absolutely positioned inside its wrapper, so a percentage would resolve
+       against the trigger, not the viewport. 100vw can overshoot by a classic
+       scrollbar's width, but only below a 22.5rem viewport, where scrollbars
+       overlay. The fixed overlays use 100% of the initial containing block. */
     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);
+    color: var(--nk-color-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);
+    background: var(--nk-color-elevated);
+    border: var(--nk-border-width) solid var(--nk-color-border);
     border-radius: var(--nk-radius-md);
     box-shadow: var(--nk-shadow-sm);
     opacity: 0;
-    transition: opacity var(--nk-duration-fast) var(--nk-ease);
+    transition:
+      opacity var(--nk-duration-fast) var(--nk-ease),
+      visibility var(--nk-duration-fast) var(--nk-ease) allow-discrete;
   }
 
   :where([data-nk="tooltip"] > [data-slot="tooltip-content"]::before) {
@@ -29,68 +36,70 @@
   }
 
   :where(
-    [data-nk="tooltip"][data-placement="top"] > [data-slot="tooltip-content"]
-  ) {
+      [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
-  ) {
+      [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"]
-  ) {
+      [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
-  ) {
+      [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"]
-  ) {
+      [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
-  ) {
+      [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"]
-  ) {
+      [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
-  ) {
+      [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);
@@ -99,18 +108,18 @@
 
 @layer nitro-kit.state {
   :where(
-    [data-nk="tooltip"]:not([data-dismissed]):focus-within
-      > [data-slot="tooltip-content"]
-  ) {
+      [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"]
-    ) {
+        [data-nk="tooltip"]:not([data-dismissed]):hover
+          > [data-slot="tooltip-content"]
+      ) {
       visibility: visible;
       opacity: 1;
     }

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

@@ -1,4 +1,126 @@
 @layer nitro-kit.base {
+  /*
+   * Reduced fallback for engines without @scope. Every selector is anchored
+   * explicitly at the Typeset root; only direct, non-Nitro/non-opted-out
+   * content is supported, so nested boundaries cannot inherit these rules.
+   */
+  :where([data-nk="typeset"]) {
+    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([data-nk="typeset"])
+    > :where(p, ul, ol, dl, blockquote, pre, figure, table, details, hr):not(
+      [data-nk],
+      [data-typeset="off"]
+    ) {
+    margin-block: var(--nk-typeset-flow) 0;
+  }
+
+  :where([data-nk="typeset"])
+    > :where(h1, h2, h3, h4, h5, h6):not([data-nk], [data-typeset="off"]) {
+    margin-block: calc(var(--nk-typeset-flow) * 1.4) 0;
+    font-family: var(--nk-typeset-font-heading);
+    font-weight: var(--nk-font-weight-bold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="typeset"]) > h1:not([data-nk], [data-typeset="off"]) {
+    font-size: 2em;
+  }
+  :where([data-nk="typeset"]) > h2:not([data-nk], [data-typeset="off"]) {
+    font-size: 1.5em;
+  }
+  :where([data-nk="typeset"]) > h3:not([data-nk], [data-typeset="off"]) {
+    font-size: 1.25em;
+  }
+  :where([data-nk="typeset"]) > h4:not([data-nk], [data-typeset="off"]) {
+    font-size: 1.125em;
+  }
+  :where([data-nk="typeset"])
+    > :where(h5, h6):not([data-nk], [data-typeset="off"]) {
+    font-size: 1em;
+  }
+  :where([data-nk="typeset"]) > :where(a:not([data-nk], [data-typeset="off"])),
+  :where([data-nk="typeset"])
+    > :where(
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      ul,
+      ol,
+      dl,
+      blockquote,
+      figure,
+      details
+    ):not([data-nk], [data-typeset="off"])
+    :where(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([data-nk="typeset"])
+    > :where(ul, ol):not([data-nk], [data-typeset="off"]) {
+    padding-inline-start: 1.5em;
+  }
+  :where([data-nk="typeset"]) > ul:not([data-nk], [data-typeset="off"]) {
+    list-style-type: disc;
+  }
+  :where([data-nk="typeset"]) > ol:not([data-nk], [data-typeset="off"]) {
+    list-style-type: decimal;
+  }
+  :where([data-nk="typeset"]) > pre:not([data-nk], [data-typeset="off"]) {
+    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);
+  }
+  :where([data-nk="typeset"])
+    > pre:not([data-nk], [data-typeset="off"])
+    > code {
+    font: inherit;
+  }
+  :where([data-nk="typeset"])
+    > :not(pre, [data-nk], [data-typeset="off"])
+    > 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);
+  }
+  :where([data-nk="typeset"]) > table:not([data-nk], [data-typeset="off"]) {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: 0.925em;
+  }
+  :where([data-nk="typeset"])
+    > table:not([data-nk], [data-typeset="off"])
+    > :where(thead, tbody, tfoot)
+    > tr
+    > :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);
+  }
+
   @scope ([data-nk="typeset"]) to (
     [data-nk]:not([data-nk="typeset"]),
     [data-typeset="off"]
@@ -18,7 +140,7 @@
     :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);
+      font-weight: var(--nk-font-weight-bold);
       line-height: var(--nk-leading-tight);
       text-wrap: balance;
     }
@@ -128,7 +250,7 @@
     }
 
     table {
-      width: 100%;
+      inline-size: 100%;
       border-collapse: collapse;
       font-size: 0.925em;
     }
@@ -145,8 +267,8 @@
     }
 
     :where(img, video, svg) {
-      max-width: 100%;
-      height: auto;
+      max-inline-size: 100%;
+      block-size: auto;
       border-radius: var(--nk-radius-md);
     }
 
@@ -172,6 +294,30 @@
 }
 
 @layer nitro-kit.state {
+  :where([data-nk="typeset"])
+    > :where(a:not([data-nk], [data-typeset="off"])):focus-visible,
+  :where([data-nk="typeset"])
+    > :where(
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      ul,
+      ol,
+      dl,
+      blockquote,
+      figure,
+      details
+    ):not([data-nk], [data-typeset="off"])
+    :where(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);
+  }
+
   @scope ([data-nk="typeset"]) to (
     [data-nk]:not([data-nk="typeset"]),
     [data-typeset="off"]

data/src/stylesheets/nitro_kit/reset.css

@@ -19,7 +19,7 @@
   /* 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;
+    min-inline-size: 0;
   }
 
   :where(html, :host) {
@@ -97,10 +97,10 @@
   }
 
   :where(
-    button,
-    input:is([type="button"], [type="reset"], [type="submit"]),
-    label[for]
-  ),
+      button,
+      input:is([type="button"], [type="reset"], [type="submit"]),
+      label[for]
+    ),
   ::file-selector-button {
     cursor: pointer;
   }
@@ -119,7 +119,7 @@
   }
 
   :where(input)::-webkit-date-and-time-value {
-    min-height: 1lh;
+    min-block-size: 1lh;
     text-align: inherit;
   }
 
@@ -134,7 +134,7 @@
 
   :where(input)::-webkit-inner-spin-button,
   :where(input)::-webkit-outer-spin-button {
-    height: auto;
+    block-size: auto;
   }
 
   :where(input):-moz-ui-invalid {
@@ -144,11 +144,11 @@
   /* 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]
-  ) {
+      ol[data-nk],
+      ul[data-nk],
+      menu[data-nk],
+      [data-nk] :is(ol, ul, menu)[data-slot]
+    ) {
     list-style: none;
   }
 
@@ -164,12 +164,12 @@
   }
 
   :where(img, video) {
-    max-width: 100%;
-    height: auto;
+    max-inline-size: 100%;
+    block-size: auto;
   }
 
   :where(hr) {
-    height: 0;
+    block-size: 0;
     color: inherit;
     border-top-width: var(--nk-border-width);
   }