@kanso-labs/kanso-ui 0.44.1 → 0.45.1

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

@@ -1,5 +1,5 @@
 import { RenderComponentProps } from "./render/useRender.js";
-import { KuiTheme } from "./tokens/theme.js";
+import { t as KuiTheme } from "./kanso-ui-core/defaults-DMH0HWCw.js";
 //#region src/theme-scope.d.ts
 type ThemeScopeProps = RenderComponentProps<'div'> & {
   /**
@@ -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