@grampro/kit 2.4.1 → 2.4.3

package/source/components/popover/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/index.ts",
       "core/types.ts",
@@ -17,7 +17,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:5cbc02914b3192d61aeb706d8d3d439a41ef8bb985d90c0864a330167ffb0b2c"
+    "sourceHash": "sha256:ac04de47fed41d6ef646920b241371395154173d148a5c5f9a6440ef2f589f6a"
   },
   "props": [
     {

package/source/components/popover/styles.css

@@ -79,7 +79,7 @@
     translate: 0 -2px;
   }
 }
-.pv-root[data-side="top"]:popover-open {
+.pv-root:where([data-side="top"]):popover-open {
   animation-name: pv-in-top;
 }
 @keyframes pv-in-top {
@@ -88,7 +88,7 @@
     translate: 0 2px;
   }
 }
-.pv-root[data-side="left"]:popover-open {
+.pv-root:where([data-side="left"]):popover-open {
   animation-name: pv-in-left;
 }
 @keyframes pv-in-left {
@@ -97,7 +97,7 @@
     translate: 2px 0;
   }
 }
-.pv-root[data-side="right"]:popover-open {
+.pv-root:where([data-side="right"]):popover-open {
   animation-name: pv-in-right;
 }
 @keyframes pv-in-right {

package/source/components/progress/passport.json

@@ -9,7 +9,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/index.ts",
       "core/progress.ts",
@@ -20,7 +20,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:40c85cf81b5ca8cc4f3332db2839f669c189b257bb1e660b4f6b67ade3bb6409"
+    "sourceHash": "sha256:8c989dc440492a833963b37e6c28fd90a99e54435c545a4f053b77c83d745eaf"
   },
   "props": [
     {

package/source/components/progress/styles.css

@@ -42,16 +42,16 @@
   box-sizing: border-box;
 }
 
-.pr-root[data-variant="success"],
-.pr-circle[data-variant="success"] {
+.pr-root:where([data-variant="success"]),
+.pr-circle:where([data-variant="success"]) {
   --pr-bar: var(--pr-success);
 }
-.pr-root[data-variant="warning"],
-.pr-circle[data-variant="warning"] {
+.pr-root:where([data-variant="warning"]),
+.pr-circle:where([data-variant="warning"]) {
   --pr-bar: var(--pr-warning);
 }
-.pr-root[data-variant="danger"],
-.pr-circle[data-variant="danger"] {
+.pr-root:where([data-variant="danger"]),
+.pr-circle:where([data-variant="danger"]) {
   --pr-bar: var(--pr-danger);
 }
 
@@ -63,11 +63,11 @@
   gap: 6px;
   min-width: 0;
 }
-.pr-root[data-size="sm"] {
+.pr-root:where([data-size="sm"]) {
   --pr-height: 4px;
   --pr-font-size: 12px;
 }
-.pr-root[data-size="lg"] {
+.pr-root:where([data-size="lg"]) {
   --pr-height: 12px;
 }
 

package/source/components/radio-group/passport.json

@@ -10,7 +10,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/group.ts",
       "core/index.ts",
@@ -22,7 +22,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:75988fb28f81a91f9ec61a6b1cc89f4e6b9f5c45b7ae38cfe94abcc5de40ff2d"
+    "sourceHash": "sha256:cd5f36365c184346538fb461f4c4cd8014723621fd4d312cd5f00c415df20618"
   },
   "props": [
     {

package/source/components/radio-group/styles.css

@@ -54,11 +54,11 @@
   gap: 8px;
   min-width: 0;
 }
-.rd-root[data-size="sm"] {
+.rd-root:where([data-size="sm"]) {
   --rd-size: 14px;
   --rd-font-size: 12px;
 }
-.rd-root[data-size="lg"] {
+.rd-root:where([data-size="lg"]) {
   --rd-size: 20px;
   --rd-font-size: 14px;
 }
@@ -153,7 +153,7 @@
 
 /* ----------------------------------------------------------------- card */
 
-.rd-root[data-variant="card"] {
+.rd-root:where([data-variant="card"]) {
   position: relative;
   align-items: flex-start;
   padding: 12px;
@@ -165,32 +165,32 @@
     border-color 120ms ease,
     background-color 120ms ease;
 }
-.rd-root[data-variant="card"]:hover:not([data-disabled]) {
+.rd-root:where([data-variant="card"]):hover:not([data-disabled]) {
   background: var(--rd-hover);
 }
-.rd-root[data-variant="card"][data-checked] {
+.rd-root:where([data-variant="card"])[data-checked] {
   border-color: var(--rd-accent);
   background: var(--rd-accent-soft);
 }
 /* Muted grey clears 4.5:1 on white but only reaches 4.44:1 on the tinted
    background of a selected card, so it moves a step towards the text colour
    there rather than the description quietly failing contrast. */
-.rd-root[data-variant="card"][data-checked] .rd-description {
+.rd-root:where([data-variant="card"])[data-checked] .rd-description {
   color: color-mix(in oklab, var(--rd-muted) 72%, var(--rd-fg));
 }
 /* The whole tile is the target: the input covers it, so a press anywhere
    lands on the radio itself rather than on a label that forwards it. */
-.rd-root[data-variant="card"] .rd-input::after {
+.rd-root:where([data-variant="card"]) .rd-input::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: var(--rd-radius);
 }
-.rd-root[data-variant="card"]:has(.rd-input:focus-visible) {
+.rd-root:where([data-variant="card"]):has(.rd-input:focus-visible) {
   outline: 2px solid var(--rd-focus);
   outline-offset: 2px;
 }
-.rd-root[data-variant="card"] .rd-input:focus-visible {
+.rd-root:where([data-variant="card"]) .rd-input:focus-visible {
   outline: none;
 }
 
@@ -220,14 +220,14 @@
   gap: 8px;
   min-width: 0;
 }
-.rd-group[data-orientation="horizontal"] .rd-items {
+.rd-group:where([data-orientation="horizontal"]) .rd-items {
   flex-flow: row wrap;
   gap: 16px;
 }
-.rd-group[data-variant="card"][data-orientation="horizontal"] .rd-items {
+.rd-group:where([data-variant="card"]):where([data-orientation="horizontal"]) .rd-items {
   gap: 8px;
 }
-.rd-group[data-variant="card"][data-orientation="horizontal"] .rd-root {
+.rd-group:where([data-variant="card"]):where([data-orientation="horizontal"]) .rd-root {
   flex: 1 1 180px;
 }
 
@@ -251,7 +251,7 @@
 @media (prefers-reduced-motion: reduce) {
   .rd-input,
   .rd-dot,
-  .rd-root[data-variant="card"] {
+  .rd-root:where([data-variant="card"]) {
     transition: none;
   }
 }
@@ -263,7 +263,7 @@
   .rd-dot {
     background: Highlight;
   }
-  .rd-root[data-variant="card"][data-checked] {
+  .rd-root:where([data-variant="card"])[data-checked] {
     border-color: Highlight;
   }
 }

package/source/components/skeleton/passport.json

@@ -9,7 +9,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/index.ts",
       "core/lines.ts",
@@ -19,7 +19,7 @@
       "react/Skeleton.tsx",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:aac81a69f1b35c3bb20dcfccff178d25e0b735f9e63847a888b3904924111f0b"
+    "sourceHash": "sha256:e5c3bcb487c25092a77daec5c55f726d39ac8cf4f3628141cb6777053af6b01f"
   },
   "props": [
     {

package/source/components/skeleton/styles.css

@@ -57,27 +57,27 @@
 
 /* Text bars are sized from the font, so a paragraph placeholder takes the
    space the paragraph will. */
-.sk-root[data-variant="text"] {
+.sk-root:where([data-variant="text"]) {
   height: var(--sk-height);
 }
-.sk-root[data-variant="text"] .sk-line {
+.sk-root:where([data-variant="text"]) .sk-line {
   height: var(--sk-height, 0.85em);
   border-radius: 4px;
 }
 
-.sk-root[data-variant="circle"] {
+.sk-root:where([data-variant="circle"]) {
   width: var(--sk-width, 40px);
   height: var(--sk-height, var(--sk-width, 40px));
 }
-.sk-root[data-variant="circle"] .sk-line {
+.sk-root:where([data-variant="circle"]) .sk-line {
   border-radius: 50%;
 }
 
-.sk-root[data-variant="rect"] {
+.sk-root:where([data-variant="rect"]) {
   height: var(--sk-height, 80px);
 }
 
-.sk-root[data-animation="pulse"] .sk-line {
+.sk-root:where([data-animation="pulse"]) .sk-line {
   animation: sk-pulse var(--sk-duration) ease-in-out infinite;
 }
 @keyframes sk-pulse {
@@ -86,11 +86,11 @@
   }
 }
 
-.sk-root[data-animation="wave"] .sk-line {
+.sk-root:where([data-animation="wave"]) .sk-line {
   position: relative;
   overflow: hidden;
 }
-.sk-root[data-animation="wave"] .sk-line::after {
+.sk-root:where([data-animation="wave"]) .sk-line::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -131,10 +131,10 @@
   text-align: center;
   text-wrap: pretty;
 }
-.em-root[data-size="sm"] {
+.em-root:where([data-size="sm"]) {
   padding: 24px 16px;
 }
-.em-root[data-size="lg"] {
+.em-root:where([data-size="lg"]) {
   padding: 64px 24px;
 }
 
@@ -143,7 +143,7 @@
   margin-bottom: 4px;
   color: var(--sk-muted);
 }
-.em-root[data-size="sm"] .em-icon {
+.em-root:where([data-size="sm"]) .em-icon {
   margin-bottom: 0;
 }
 
@@ -152,7 +152,7 @@
   font-size: 1.05em;
   font-weight: 600;
 }
-.em-root[data-size="lg"] .em-title {
+.em-root:where([data-size="lg"]) .em-title {
   font-size: 1.2em;
 }
 

package/source/components/spinner/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/index.ts",
       "core/types.ts",
@@ -19,7 +19,7 @@
       "react/props.ts",
       "react/useDelayedLoading.ts"
     ],
-    "sourceHash": "sha256:2b6b8fa25750f5a491b73f37711de1beed2b1bcf9e38e2cf1b1f419d763b6c2e"
+    "sourceHash": "sha256:35c2de8415540772f688151782dff3c84c49b7a3d03fd7e575b3d4d4d4e93d85"
   },
   "props": [
     {

package/source/components/spinner/styles.css

@@ -88,7 +88,7 @@
 
 /* ---------------------------------------------------------------- dots */
 
-.sp-indicator[data-variant="dots"] {
+.sp-indicator:where([data-variant="dots"]) {
   grid-auto-flow: column;
   gap: calc(var(--sp-size) * 0.1);
 }

package/source/components/switch/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/index.ts",
       "core/toggle.ts",
@@ -18,7 +18,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:0e4b4a46e705b32ea7bf347c63743dfadb86ee1c5eedd2ae25e4e48721ad1989"
+    "sourceHash": "sha256:d96a8af61a18c077beccad85f49d1a25f1e20091aede0182c852f7f36ee9254a"
   },
   "props": [
     {

package/source/components/switch/styles.css

@@ -47,20 +47,20 @@
   box-sizing: border-box;
 }
 
-.sw-root[data-size="sm"] {
+.sw-root:where([data-size="sm"]) {
   --sw-height: 16px;
   --sw-width: 28px;
   --sw-gap: 2px;
   --sw-font-size: 12px;
 }
-.sw-root[data-size="lg"] {
+.sw-root:where([data-size="lg"]) {
   --sw-height: 24px;
   --sw-width: 44px;
   --sw-font-size: 14px;
 }
 
 /* The label first, the track pushed to the far edge: a settings row. */
-.sw-root[data-label-position="start"] {
+.sw-root:where([data-label-position="start"]) {
   flex-direction: row-reverse;
   justify-content: space-between;
 }

package/source/components/tabs/passport.json

@@ -12,7 +12,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/index.ts",
       "core/navigation.ts",
@@ -21,7 +21,7 @@
       "react/Tabs.tsx",
       "react/context.ts"
     ],
-    "sourceHash": "sha256:26d83e8f7ddcdcbcf8693f48d7f2769a53fdf4f38df38b64f7070c8e9cc3f9f5"
+    "sourceHash": "sha256:af648a096e1a1c4e3f61c57b4e61a6c115c3d2351d5f2c8c6b4519348ae80dfc"
   },
   "props": [
     {

package/source/components/tabs/styles.css

@@ -55,17 +55,17 @@
   box-sizing: border-box;
 }
 
-.tb-root[data-size="sm"] {
+.tb-root:where([data-size="sm"]) {
   --tb-height: 30px;
   --tb-px: 10px;
   --tb-font-size: 12px;
 }
-.tb-root[data-size="lg"] {
+.tb-root:where([data-size="lg"]) {
   --tb-height: 44px;
   --tb-px: 16px;
   --tb-font-size: 14px;
 }
-.tb-root[data-orientation="vertical"] {
+.tb-root:where([data-orientation="vertical"]) {
   flex-direction: row;
   gap: 20px;
 }
@@ -80,7 +80,7 @@
   overflow-x: auto;
   scrollbar-width: none;
 }
-.tb-root[data-orientation="vertical"] .tb-list {
+.tb-root:where([data-orientation="vertical"]) .tb-list {
   flex-direction: column;
   overflow: visible;
 }
@@ -105,7 +105,7 @@
   cursor: pointer;
   transition: color 120ms ease;
 }
-.tb-root[data-orientation="vertical"] .tb-tab {
+.tb-root:where([data-orientation="vertical"]) .tb-tab {
   justify-content: flex-start;
 }
 .tb-tab:hover:not([aria-disabled="true"]),
@@ -161,10 +161,10 @@
 
 /* ---------------------------------------------------------------- line */
 
-.tb-root[data-variant="line"] .tb-list {
+.tb-root:where([data-variant="line"]) .tb-list {
   border-bottom: 1px solid var(--tb-border);
 }
-.tb-root[data-variant="line"] .tb-indicator {
+.tb-root:where([data-variant="line"]) .tb-indicator {
   bottom: -1px;
   left: var(--tb-indicator-start);
   width: var(--tb-indicator-size);
@@ -172,11 +172,11 @@
   border-radius: 2px;
   background: var(--tb-accent);
 }
-.tb-root[data-variant="line"][data-orientation="vertical"] .tb-list {
+.tb-root:where([data-variant="line"]):where([data-orientation="vertical"]) .tb-list {
   border-bottom: 0;
   border-inline-end: 1px solid var(--tb-border);
 }
-.tb-root[data-variant="line"][data-orientation="vertical"] .tb-indicator {
+.tb-root:where([data-variant="line"]):where([data-orientation="vertical"]) .tb-indicator {
   top: var(--tb-indicator-start);
   bottom: auto;
   left: auto;
@@ -187,7 +187,7 @@
 
 /* --------------------------------------------------------------- pills */
 
-.tb-root[data-variant="pills"] .tb-indicator {
+.tb-root:where([data-variant="pills"]) .tb-indicator {
   top: 0;
   left: var(--tb-indicator-start);
   width: var(--tb-indicator-size);
@@ -195,10 +195,10 @@
   border-radius: calc(var(--tb-radius) - 2px);
   background: var(--tb-accent-soft);
 }
-.tb-root[data-variant="pills"] .tb-tab[aria-selected="true"] {
+.tb-root:where([data-variant="pills"]) .tb-tab[aria-selected="true"] {
   color: var(--tb-accent);
 }
-.tb-root[data-variant="pills"][data-orientation="vertical"] .tb-indicator {
+.tb-root:where([data-variant="pills"]):where([data-orientation="vertical"]) .tb-indicator {
   top: var(--tb-indicator-start);
   left: 0;
   width: 100%;
@@ -207,12 +207,12 @@
 
 /* ------------------------------------------------------------ enclosed */
 
-.tb-root[data-variant="enclosed"] .tb-list {
+.tb-root:where([data-variant="enclosed"]) .tb-list {
   padding: 3px;
   border-radius: var(--tb-radius);
   background: var(--tb-track);
 }
-.tb-root[data-variant="enclosed"] .tb-indicator {
+.tb-root:where([data-variant="enclosed"]) .tb-indicator {
   top: 3px;
   bottom: 3px;
   left: var(--tb-indicator-start);
@@ -221,10 +221,10 @@
   background: var(--tb-bg);
   box-shadow: 0 1px 3px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
 }
-.tb-root[data-variant="enclosed"] .tb-tab {
+.tb-root:where([data-variant="enclosed"]) .tb-tab {
   height: calc(var(--tb-height) - 6px);
 }
-.tb-root[data-variant="enclosed"][data-orientation="vertical"] .tb-indicator {
+.tb-root:where([data-variant="enclosed"]):where([data-orientation="vertical"]) .tb-indicator {
   top: var(--tb-indicator-start);
   bottom: auto;
   left: 3px;
@@ -234,7 +234,7 @@
 }
 
 /* Before the indicator is measured (server render), mark the selected tab statically. */
-.tb-root[data-variant="line"] .tb-list:not([style*="--tb-indicator-size"]) .tb-tab[aria-selected="true"] {
+.tb-root:where([data-variant="line"]) .tb-list:not([style*="--tb-indicator-size"]) .tb-tab[aria-selected="true"] {
   box-shadow: inset 0 -2px 0 var(--tb-accent);
 }
 

package/source/components/textarea/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/count.ts",
       "core/index.ts",
@@ -19,7 +19,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:99fe1b42359a0d09331c6cf00b5c8d2e01fe57d9a02769637c990906ede431cf"
+    "sourceHash": "sha256:35a538fdd2522c310be181bbb598fdc6eebb99fc5dd1a0ffab3cccf8d84ac43a"
   },
   "props": [
     {

package/source/components/textarea/styles.css

@@ -46,12 +46,12 @@
   box-sizing: border-box;
 }
 
-.ta-root[data-size="sm"] {
+.ta-root:where([data-size="sm"]) {
   --ta-font-size: 12px;
   --ta-px: 8px;
   --ta-py: 6px;
 }
-.ta-root[data-size="lg"] {
+.ta-root:where([data-size="lg"]) {
   --ta-font-size: 14px;
   --ta-px: 12px;
   --ta-py: 10px;
@@ -100,16 +100,16 @@
   cursor: not-allowed;
 }
 
-.ta-input[data-resize="none"] {
+.ta-input:where([data-resize="none"]) {
   resize: none;
 }
-.ta-input[data-resize="vertical"] {
+.ta-input:where([data-resize="vertical"]) {
   resize: vertical;
 }
-.ta-input[data-resize="horizontal"] {
+.ta-input:where([data-resize="horizontal"]) {
   resize: horizontal;
 }
-.ta-input[data-resize="both"] {
+.ta-input:where([data-resize="both"]) {
   resize: both;
 }
 
@@ -118,7 +118,7 @@
  * component; `--ta-max-rows: none` makes max-height invalid, which means no limit.
  */
 @supports (field-sizing: content) {
-  .ta-input[data-autoresize] {
+  .ta-input:where([data-autoresize]) {
     field-sizing: content;
     min-height: calc(var(--ta-min-rows, 3) * 1lh + 2 * var(--ta-py) + 2px);
     max-height: calc(var(--ta-max-rows) * 1lh + 2 * var(--ta-py) + 2px);

package/source/components/toaster/passport.json

@@ -11,7 +11,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/api.ts",
       "core/index.ts",
@@ -26,7 +26,7 @@
       "react/props.ts",
       "react/useToasts.ts"
     ],
-    "sourceHash": "sha256:29756fca7fc33de05f42257fbb145017a6c507565eecb99ce06814ba404262ef"
+    "sourceHash": "sha256:ac828195f4d7ced89c99eb2bd78bb2581ba7a81d62dcfb892b9acef75bddda77"
   },
   "props": [
     {

package/source/components/toaster/styles.css

@@ -160,16 +160,16 @@
   width: 3px;
   background: var(--ts-type-color);
 }
-.ts-toast[data-type="success"] {
+.ts-toast:where([data-type="success"]) {
   --ts-type-color: var(--ts-success);
 }
-.ts-toast[data-type="error"] {
+.ts-toast:where([data-type="error"]) {
   --ts-type-color: var(--ts-error);
 }
-.ts-toast[data-type="warning"] {
+.ts-toast:where([data-type="warning"]) {
   --ts-type-color: var(--ts-warning);
 }
-.ts-toast[data-type="info"] {
+.ts-toast:where([data-type="info"]) {
   --ts-type-color: var(--ts-info);
 }
 
@@ -180,7 +180,7 @@
   margin-top: 1px;
   color: var(--ts-type-color);
 }
-.ts-toast:is([data-type="default"], [data-type="loading"]) .ts-icon {
+.ts-toast:is(:where([data-type="default"]), :where([data-type="loading"])) .ts-icon {
   color: var(--ts-muted);
 }
 
@@ -219,12 +219,12 @@
 .ts-button:hover {
   background: var(--ts-hover);
 }
-.ts-button[data-variant="action"] {
+.ts-button:where([data-variant="action"]) {
   border-color: var(--ts-accent);
   background: var(--ts-accent);
   color: var(--ts-accent-fg);
 }
-.ts-button[data-variant="action"]:hover {
+.ts-button:where([data-variant="action"]):hover {
   background: color-mix(in oklab, var(--ts-accent), var(--ts-fg) 12%);
 }
 .ts-button:focus-visible {

package/source/components/tooltip/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.3",
     "files": [
       "core/index.ts",
       "core/types.ts",
@@ -17,7 +17,7 @@
       "react/Tooltip.tsx",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:27e564b384259c710f11e5795bbef73813368bd445d17f1d0562910a53dc23e8"
+    "sourceHash": "sha256:b7a7aefbc8fcb4c9f4063dd0bc312ca2316ac848946c3055c8e69a8fe8780916"
   },
   "props": [
     {