@kanso-labs/kanso-ui 0.44.1 → 0.45.0

package/dist/styles.css

@@ -211,6 +211,10 @@
     border-style: dashed;
   }
 
+  .xng3xce {
+    border-style: none;
+  }
+
   .x1y0btm7 {
     border-style: solid;
   }
@@ -243,10 +247,6 @@
     gap: 24px;
   }
 
-  .x1jnr06f {
-    gap: 4px;
-  }
-
   .x1r8zjiw {
     gap: calc(48px - var(--x1ww3f7m));
   }
@@ -416,6 +416,10 @@
     padding-block: calc((40px - var(--xol8812)) / 2);
   }
 
+  .xs2ltda {
+    padding-block: max(0px,calc((var(--x1ww3f7m) - var(--xkj6wu1)) / 2));
+  }
+
   .xny1cbh {
     padding-block: var(--x196ey9q);
   }
@@ -706,10 +710,6 @@
     animation-name: x15b941j-B;
   }
 
-  .xu2fq7p {
-    animation-name: x17cjob-B;
-  }
-
   .xz09zy6 {
     animation-name: x17j028-B, x26nhu8-B;
   }
@@ -1298,6 +1298,10 @@
     border-start-end-radius: var(--x1s0h5j3);
   }
 
+  .x1u81hx7 {
+    border-start-end-radius: var(--x1w5u0jm);
+  }
+
   .x1pixlao {
     border-start-end-radius: var(--x3hih16);
   }
@@ -1326,6 +1330,10 @@
     border-start-start-radius: var(--x1s0h5j3);
   }
 
+  .x1uop38w {
+    border-start-start-radius: var(--x1w5u0jm);
+  }
+
   .xyooppx {
     border-start-start-radius: var(--x3hih16);
   }
@@ -1466,6 +1474,10 @@
     color: #0000;
   }
 
+  .x11wi6qo {
+    color: var(--icon-button-standard-color, var(--x28n2pw));
+  }
+
   .x4ii1qj {
     color: var(--x12p1wyw);
   }
@@ -2002,10 +2014,6 @@
     grid-column-start: 2;
   }
 
-  .xx9t13c {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
-
   .x1rkzygb {
     grid-template-columns: auto minmax(0, 1fr);
   }
@@ -2066,6 +2074,10 @@
     inset-inline-end: var(--x-insetInlineEnd);
   }
 
+  .x5pnq3g {
+    inset-inline-start: -2px;
+  }
+
   .x1o0tod {
     inset-inline-start: 0;
   }
@@ -2142,6 +2154,14 @@
     justify-items: center;
   }
 
+  .x1qab1bc {
+    justify-self: end;
+  }
+
+  .x1lqcxt8 {
+    justify-self: start;
+  }
+
   .x1qn8t5l {
     letter-spacing: var(--x10nh56i);
   }
@@ -2298,6 +2318,10 @@
     margin-inline-end: calc(var(--x6borv4) - var(--x3km7fe));
   }
 
+  .x1c9tiao {
+    margin-inline-end: var(--x-marginInlineEnd);
+  }
+
   .xdf1gh2 {
     margin-inline-end: var(--x3km7fe);
   }
@@ -2318,6 +2342,10 @@
     margin-inline-start: 0;
   }
 
+  .xdwrcjd {
+    margin-inline-start: 4px;
+  }
+
   .xvc5jky {
     margin-inline-start: auto;
   }
@@ -2355,6 +2383,10 @@
     opacity: 0;
   }
 
+  .x1hc1fzr {
+    opacity: 1;
+  }
+
   .xcl2av {
     opacity: var(--x124j18r);
   }
@@ -2375,6 +2407,10 @@
     outline-color: currentColor;
   }
 
+  .xat36cu {
+    outline-color: var(--x189y34t);
+  }
+
   .x1ulcdur {
     outline-color: var(--x1balm44);
   }
@@ -2383,6 +2419,10 @@
     outline-color: var(--x1cjupv7);
   }
 
+  .xnzrtil {
+    outline-color: var(--xn0syi6);
+  }
+
   .x2ssjo2 {
     outline-offset: -2px;
   }
@@ -2684,6 +2724,18 @@
     transform: rotate(90deg);
   }
 
+  .x1a33avv {
+    transform: scale(.5);
+  }
+
+  .x1f85oc2 {
+    transform: scale(0);
+  }
+
+  .x3oybdh {
+    transform: scale(1);
+  }
+
   .xpk2tj9 {
     transform: scaleX(-1);
   }
@@ -2780,10 +2832,6 @@
     transition-property: background-color, border-color, box-shadow, color;
   }
 
-  .x1eaenvl {
-    transition-property: background-color, border-color, color;
-  }
-
   .xts7igz {
     transition-property: background-color, border-color;
   }
@@ -2796,6 +2844,10 @@
     transition-property: background-color, color;
   }
 
+  .xuo13n2 {
+    transition-property: background-color, transform;
+  }
+
   .x15406qy {
     transition-property: background-color;
   }
@@ -2852,10 +2904,6 @@
     transition-property: inline-size, opacity;
   }
 
-  .x1j4rzew {
-    transition-property: inline-size;
-  }
-
   .x2hifos {
     transition-property: inset-inline-start;
   }
@@ -2868,6 +2916,10 @@
     transition-property: none;
   }
 
+  .x6o7n8i {
+    transition-property: opacity, transform;
+  }
+
   .x19991ni {
     transition-property: opacity;
   }
@@ -2982,6 +3034,10 @@
     z-index: 900;
   }
 
+  .x10oam47:focus-visible {
+    background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x124j18r) * 100%),transparent);
+  }
+
   .x13aw6e3:focus-within {
     background-color: var(--x13o0mym);
   }
@@ -3066,10 +3122,6 @@
     line-height: var(--x1lrg4gv);
   }
 
-  .x1ioi8j8:dir(rtl) {
-    animation-name: x18x3npg-B;
-  }
-
   .x1kbcym6:dir(rtl) {
     box-shadow: inset 1px 0 0 0 var(--x7dbk6n);
   }
@@ -3146,6 +3198,10 @@
     background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xhaltwz) * 100%),var(--xi1exwt));
   }
 
+  .xpk4wdd:active {
+    box-shadow: none;
+  }
+
   .x1g60mc1:active {
     box-shadow: var(--xt04dnm);
   }
@@ -3300,6 +3356,10 @@
     .x1g12otp.x1g12otp {
       forced-color-adjust: none;
     }
+
+    .x1tbh5bv.x1tbh5bv {
+      opacity: 1;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -3376,6 +3436,12 @@
     background-color: var(--x1xbp8h6);
   }
 
+  @media (hover: hover) {
+    .xkl27de.xkl27de:focus-visible {
+      background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x124j18r) * 100%),transparent);
+    }
+  }
+
   @media (forced-colors: active) {
     .xi9ts3s.xi9ts3s:focus-within {
       outline-style: solid;
@@ -3440,6 +3506,10 @@
     .xqmo4o3.xqmo4o3:hover {
       box-shadow: var(--x14ermby);
     }
+
+    .x1jblvwk.x1jblvwk:hover {
+      box-shadow: var(--xt04dnm);
+    }
   }
 
   @media (forced-colors: active) {
@@ -3469,6 +3539,10 @@
       background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xhaltwz) * 100%),var(--xi1exwt));
     }
 
+    .x1xzfgx1.x1xzfgx1:active {
+      box-shadow: none;
+    }
+
     .x14zlms8.x14zlms8:active {
       box-shadow: var(--xt04dnm);
     }
@@ -3818,6 +3892,10 @@
     max-height: 100%;
   }
 
+  .xv4ka1z {
+    max-height: calc(100dvh - 72px);
+  }
+
   .xfwfbzp {
     max-height: calc(100dvh * 2 / 3 - var(--x1hfhk6y) - 1px);
   }
@@ -3826,10 +3904,6 @@
     max-height: inherit;
   }
 
-  .x7ab17h {
-    max-height: none;
-  }
-
   .x193iq5w {
     max-width: 100%;
   }
@@ -4054,6 +4128,10 @@
     overflow-y: auto;
   }
 
+  .x1s73dr8 {
+    overflow-y: clip;
+  }
+
   .x10wlt62 {
     overflow-y: hidden;
   }
@@ -4076,6 +4154,10 @@
     padding-bottom: 0;
   }
 
+  .x11wnguw {
+    padding-bottom: calc(var(--x3km7fe) - max(0px,calc((var(--x1ww3f7m) - var(--xkj6wu1)) / 2)));
+  }
+
   .x1u7mh7p {
     padding-bottom: calc(var(--xod9tvo) + env(safe-area-inset-bottom, 0px));
   }
@@ -4100,14 +4182,14 @@
     padding-bottom: var(--xod9tvo);
   }
 
-  .x1uhho1l {
-    padding-left: 0;
-  }
-
   .xbpsoft {
     padding-left: calc(var(--xod9tvo) + env(safe-area-inset-left, 0px));
   }
 
+  .x196z7tn {
+    padding-left: env(safe-area-inset-left, 0px);
+  }
+
   .xq5vm52 {
     padding-right: calc(var(--xod9tvo) + env(safe-area-inset-right, 0px));
   }
@@ -4124,6 +4206,10 @@
     padding-top: 44px;
   }
 
+  .x1837goc {
+    padding-top: calc(var(--x196ey9q) - max(0px,calc((var(--x1ww3f7m) - var(--xkj6wu1)) / 2)));
+  }
+
   .x1mrd0q {
     padding-top: env(safe-area-inset-top, 0px);
   }
@@ -4394,14 +4480,6 @@
     }
   }
 
-  .x1lodr2j:dir(rtl) {
-    padding-left: env(safe-area-inset-left, 0px);
-  }
-
-  .xg4bq00:dir(rtl) {
-    padding-right: 0;
-  }
-
   .x1g31smg:first-child {
     border-top-width: 0;
   }
@@ -4506,7 +4584,15 @@
     .x1nouyz5.x1nouyz5 {
       padding-block: 0;
     }
+  }
+
+  @media (width < 600px) {
+    .xa4amcs.xa4amcs {
+      padding-block: 0;
+    }
+  }
 
+  @media (width >= 600px) {
     .xze1m75.xze1m75 {
       padding-inline: var(--x3km7fe);
     }
@@ -4541,10 +4627,6 @@
   }
 
   @media (width < 600px) {
-    .x18ihq2d.x18ihq2d {
-      animation-name: x15b941j-B;
-    }
-
     .x1ebxanj.x1ebxanj {
       animation-name: x1itx4s0-B;
     }
@@ -4585,18 +4667,6 @@
   }
 
   @media (width < 600px) {
-    .xb0nsol.xb0nsol {
-      border-end-start-radius: var(--x1lckk6t);
-    }
-
-    .xys6ro8.xys6ro8 {
-      border-start-end-radius: var(--x1w5u0jm);
-    }
-
-    .x9t1vth.x9t1vth {
-      border-start-start-radius: var(--x1w5u0jm);
-    }
-
     .xzvmenf.xzvmenf {
       box-shadow: none;
     }
@@ -4745,10 +4815,6 @@
       inset-inline-start: 0 !important;
     }
 
-    .x1upgybz.x1upgybz {
-      inset-inline-start: 0;
-    }
-
     .x1khanjg.x1khanjg {
       letter-spacing: var(--xt8l743);
     }
@@ -4788,12 +4854,6 @@
     .xa9fysw.xa9fysw {
       transform-origin: center;
     }
-
-    @media (forced-colors: active) {
-      .x1cfajip.x1cfajip.x1cfajip {
-        border-inline-start-style: none;
-      }
-    }
   }
 }
 
@@ -4917,10 +4977,6 @@
       max-height: calc(100dvh - 2 * var(--x3km7fe)) !important;
     }
 
-    .x11ijow0.x11ijow0 {
-      max-height: calc(100dvh - 72px);
-    }
-
     .x10iheve.x10iheve {
       max-height: none !important;
     }
@@ -4973,10 +5029,6 @@
       padding-right: env(safe-area-inset-right, 0px);
     }
 
-    .x5ubeis.x5ubeis {
-      padding-top: 0;
-    }
-
     .xg8iv3o.xg8iv3o {
       padding-top: env(safe-area-inset-top, 0px);
     }
@@ -4992,10 +5044,6 @@
     .xbvrusa.xbvrusa {
       top: 0 !important;
     }
-
-    .xmpip4z.xmpip4z {
-      top: auto;
-    }
   }
 
   @media (width >= 600px) {
@@ -5005,10 +5053,6 @@
   }
 
   @media (width < 600px) {
-    .xwvxfow.xwvxfow {
-      width: 100%;
-    }
-
     .x14gilbs.x14gilbs {
       width: 100vw;
     }
@@ -5023,14 +5067,6 @@
       border-style: dashed;
     }
   }
-
-  @media (width < 600px) {
-    @media (forced-colors: active) {
-      .xuz63mn.xuz63mn.xuz63mn {
-        border-top-style: solid;
-      }
-    }
-  }
 }
 
 @layer kanso.priority9 {
@@ -5179,6 +5215,11 @@
   inherits: false
 }
 
+@property --x-marginInlineEnd {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-maskImage {
   syntax: "*";
   inherits: false
@@ -5309,30 +5350,6 @@
   }
 }
 
-@keyframes x17cjob-B {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes x18x3npg-B {
-  from {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 @keyframes x15b941j-B {
   from {
     opacity: 0;
@@ -6079,6 +6096,10 @@
   --x1mnnhxz: #efb8c8;
 }
 
+.x155k8fu {
+  --icon-button-standard-color: var(--xn0syi6);
+}
+
 .x111hk5a {
   --segment-indicator-radius-end: var(--x1lckk6t);
 }

package/dist/theme-scope.d.ts

@@ -7,8 +7,8 @@ type ThemeScopeProps = RenderComponentProps<'div'> & {
    * reader's OS asks for. A pinned scope paints its own surface and text in
    * that scheme and sets `color-scheme` for the native controls inside, so
    * it reads on any page. Left unset, the scope paints nothing and keeps the
-   * scheme around it: the one an enclosing scope or the `<html>` element
-   * pins, or the OS's.
+   * scheme around it: the one an enclosing scope or a `colorScheme` class
+   * pins, on the `<html>` element or nearer, or else the OS's.
    */
   scheme?: 'dark' | 'light' | undefined;
   /**
@@ -52,6 +52,18 @@ type ThemeScopeProps = RenderComponentProps<'div'> & {
  * `<div>` added inside the scope's element, so an element whose content is
  * restricted — a list, whose children have to be list items, a paragraph,
  * or a part of a table — is not a scope: put the scope around it instead.
+ *
+ * That container comes after whatever the scope renders, and it has no box,
+ * so layout never sees it, but selectors do. Inside the scope the last
+ * element the call site rendered is not `:last-child` and is counted wrong
+ * by `:nth-last-child()`, a lone child is not `:only-child`, and a scope
+ * with nothing in it is not `:empty`. Key a rule like that on something of
+ * the call site's own, such as a class, or put the scope around the element
+ * whose children it counts.
+ *
+ * What reaches a scope from around it is the scheme and the `--kui-*`
+ * properties. It resolves every token again from those two, so a theme
+ * applied around it in any other way stops at its edge.
  */
 declare function ThemeScope({ children, render, scheme, theme, ...props }: ThemeScopeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/theme-scope.js

@@ -50,6 +50,18 @@ const containers = /* @__PURE__ */ new WeakMap();
 * `<div>` added inside the scope's element, so an element whose content is
 * restricted — a list, whose children have to be list items, a paragraph,
 * or a part of a table — is not a scope: put the scope around it instead.
+*
+* That container comes after whatever the scope renders, and it has no box,
+* so layout never sees it, but selectors do. Inside the scope the last
+* element the call site rendered is not `:last-child` and is counted wrong
+* by `:nth-last-child()`, a lone child is not `:only-child`, and a scope
+* with nothing in it is not `:empty`. Key a rule like that on something of
+* the call site's own, such as a class, or put the scope around the element
+* whose children it counts.
+*
+* What reaches a scope from around it is the scheme and the `--kui-*`
+* properties. It resolves every token again from those two, so a theme
+* applied around it in any other way stops at its edge.
 */
 function ThemeScope(t0) {
 	const $ = c(29);

package/dist/theme-scope.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useMemo","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","KuiTheme","mergeRefs","useRender","mergeStyles","pinnedScheme","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","theme","containerClassName","className","containers","WeakMap","Element","HTMLDivElement","ThemeScope","t0","$","children","props","render","container","setContainer","t1","getContainer","t2","Symbol","for","scope","made","get","undefined","ownerDocument","createElement","append","set","attach","t3","ref","t4","t5","t6","style","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useMemo, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport type { KuiTheme } from './tokens/theme';\nimport { mergeRefs } from './render/ref';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { pinnedScheme } from './styles/scheme';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along. A pinned scheme paints the scope's\n// surface and sets its `color-scheme` too; see src/styles/scheme.ts.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is inside the scope's own element,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// It is appended to the scope's element once that element is in the document,\n// rather than rendered as one of its children. A rendered `<div>` was a child\n// of whatever the scope rendered as, so a scope rendered as a `<p>` drew\n// React's nesting error and a hydration warning, and the server's markup held\n// a `<div>` inside it. Appended, it is in neither React's tree nor the\n// server's markup, and it is there before anything can open into it.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. A pinned scope paints its own surface and text in\n   * that scheme and sets `color-scheme` for the native controls inside, so\n   * it reads on any page. Left unset, the scope paints nothing and keeps the\n   * scheme around it: the one an enclosing scope or the `<html>` element\n   * pins, or the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n  /**\n   * `--kui-*` overrides for everything inside, as a map of the custom\n   * properties `tokens.css` lists to CSS values. The scope declares them on\n   * its own element, as an override in `style` would be, with `style` winning\n   * where the two set the same property.\n   *\n   * The values hold for both schemes. To give light and dark a value each,\n   * keep two maps and hand the scope the one for the scheme in use.\n   */\n  theme?: KuiTheme | undefined;\n};\n\n// The container's class, the one thing it carries: it is made with\n// `createElement`, which takes no props.\nconst containerClassName = {\n  className: \"x9f619 xjp7ctv\"\n}.className ?? '';\n\n// The container made for each scope's element. A ref attaches again whenever\n// the call site hands a ref of a new identity, and a new container each time\n// would move every open overlay into it, which remounts them. So the one an\n// element already holds is kept as it is — not even appended again, since\n// moving a node blurs whatever inside it has focus — and a new one is made\n// only for a new element, as when `render` changes the tag. React removes an\n// old element with its container in it, and the map lets both go.\nconst containers = new WeakMap<Element, HTMLDivElement>();\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `theme`, `className`\n * or `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * const accent: KuiTheme = { '--kui-color-primary': '#7d5260' }\n *\n * <ThemeScope scheme=\"dark\" theme={accent}>\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, an `<article>`, or the `<body>` itself — any element that\n * takes flow content, as a `<div>` does. The overlays' container is a\n * `<div>` added inside the scope's element, so an element whose content is\n * restricted — a list, whose children have to be list items, a paragraph,\n * or a part of a table — is not a scope: put the scope around it instead.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  theme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  const attach = useCallback((scope: HTMLDivElement | null) => {\n    if (scope === null) {\n      return;\n    }\n    let made = containers.get(scope);\n    if (made === undefined) {\n      made = scope.ownerDocument.createElement('div');\n      made.className = containerClassName;\n      scope.append(made);\n      containers.set(scope, made);\n    }\n    setContainer(made);\n  }, []);\n  // The call site's ref lands on the same element. Read off `props` rather\n  // than destructured, as `useRender` reads it, so the compiler sees a prop\n  // holding still rather than a ref read during render.\n  const ref = useMemo(() => mergeRefs(attach, props.ref ?? undefined), [attach, props.ref]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ref,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme], scheme !== undefined && pinnedScheme[scheme]), theme === undefined ? props : {\n        ...props,\n        style: {\n          ...theme,\n          ...props.style\n        }\n      }),\n      children: <PortalProvider getContainer={getContainer}>{children}</PortalProvider>\n    },\n    render\n  });\n}\nexport type { KuiTheme } from './tokens/theme';\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":"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"}
+{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useMemo","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","KuiTheme","mergeRefs","useRender","mergeStyles","pinnedScheme","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","theme","containerClassName","className","containers","WeakMap","Element","HTMLDivElement","ThemeScope","t0","$","children","props","render","container","setContainer","t1","getContainer","t2","Symbol","for","scope","made","get","undefined","ownerDocument","createElement","append","set","attach","t3","ref","t4","t5","t6","style","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useMemo, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport type { KuiTheme } from './tokens/theme';\nimport { mergeRefs } from './render/ref';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { pinnedScheme } from './styles/scheme';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along. A pinned scheme paints the scope's\n// surface and sets its `color-scheme` too; see src/styles/scheme.ts.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is inside the scope's own element,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// It is appended to the scope's element once that element is in the document,\n// rather than rendered as one of its children. A rendered `<div>` was a child\n// of whatever the scope rendered as, so a scope rendered as a `<p>` drew\n// React's nesting error and a hydration warning, and the server's markup held\n// a `<div>` inside it. Appended, it is in neither React's tree nor the\n// server's markup, and it is there before anything can open into it.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands. It is still an element, so a selector\n// that counts the scope's children counts it; the description below says\n// what that changes for a call site.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. A pinned scope paints its own surface and text in\n   * that scheme and sets `color-scheme` for the native controls inside, so\n   * it reads on any page. Left unset, the scope paints nothing and keeps the\n   * scheme around it: the one an enclosing scope or a `colorScheme` class\n   * pins, on the `<html>` element or nearer, or else the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n  /**\n   * `--kui-*` overrides for everything inside, as a map of the custom\n   * properties `tokens.css` lists to CSS values. The scope declares them on\n   * its own element, as an override in `style` would be, with `style` winning\n   * where the two set the same property.\n   *\n   * The values hold for both schemes. To give light and dark a value each,\n   * keep two maps and hand the scope the one for the scheme in use.\n   */\n  theme?: KuiTheme | undefined;\n};\n\n// The container's class, the one thing it carries: it is made with\n// `createElement`, which takes no props.\nconst containerClassName = {\n  className: \"x9f619 xjp7ctv\"\n}.className ?? '';\n\n// The container made for each scope's element. A ref attaches again whenever\n// the call site hands a ref of a new identity, and a new container each time\n// would move every open overlay into it, which remounts them. So the one an\n// element already holds is kept as it is — not even appended again, since\n// moving a node blurs whatever inside it has focus — and a new one is made\n// only for a new element, as when `render` changes the tag. React removes an\n// old element with its container in it, and the map lets both go.\nconst containers = new WeakMap<Element, HTMLDivElement>();\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `theme`, `className`\n * or `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * const accent: KuiTheme = { '--kui-color-primary': '#7d5260' }\n *\n * <ThemeScope scheme=\"dark\" theme={accent}>\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, an `<article>`, or the `<body>` itself — any element that\n * takes flow content, as a `<div>` does. The overlays' container is a\n * `<div>` added inside the scope's element, so an element whose content is\n * restricted — a list, whose children have to be list items, a paragraph,\n * or a part of a table — is not a scope: put the scope around it instead.\n *\n * That container comes after whatever the scope renders, and it has no box,\n * so layout never sees it, but selectors do. Inside the scope the last\n * element the call site rendered is not `:last-child` and is counted wrong\n * by `:nth-last-child()`, a lone child is not `:only-child`, and a scope\n * with nothing in it is not `:empty`. Key a rule like that on something of\n * the call site's own, such as a class, or put the scope around the element\n * whose children it counts.\n *\n * What reaches a scope from around it is the scheme and the `--kui-*`\n * properties. It resolves every token again from those two, so a theme\n * applied around it in any other way stops at its edge.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  theme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  const attach = useCallback((scope: HTMLDivElement | null) => {\n    if (scope === null) {\n      return;\n    }\n    let made = containers.get(scope);\n    if (made === undefined) {\n      made = scope.ownerDocument.createElement('div');\n      made.className = containerClassName;\n      scope.append(made);\n      containers.set(scope, made);\n    }\n    setContainer(made);\n  }, []);\n  // The call site's ref lands on the same element. Read off `props` rather\n  // than destructured, as `useRender` reads it, so the compiler sees a prop\n  // holding still rather than a ref read during render.\n  const ref = useMemo(() => mergeRefs(attach, props.ref ?? undefined), [attach, props.ref]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ref,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme], scheme !== undefined && pinnedScheme[scheme]), theme === undefined ? props : {\n        ...props,\n        style: {\n          ...theme,\n          ...props.style\n        }\n      }),\n      children: <PortalProvider getContainer={getContainer}>{children}</PortalProvider>\n    },\n    render\n  });\n}\nexport type { KuiTheme } from './tokens/theme';\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -85,7 +85,7 @@
     "@commitlint/cli": "21.2.4",
     "@commitlint/config-conventional": "21.2.4",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.36",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.37",
     "@microsoft/api-extractor": "7.59.4",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.3",
@@ -128,7 +128,7 @@
     "tsdown": "0.23.1",
     "typescript": "6.0.3",
     "typescript-eslint": "8.72.0",
-    "vite": "8.3.4",
+    "vite": "8.3.5",
     "vitest": "5.0.5"
   },
   "peerDependencies": {