@techfides/ui-library-design 0.8.0 → 0.9.1

package/README.md

@@ -2,7 +2,7 @@
 
 The framework-agnostic half of the TechFides UI library: the Tailwind CSS v4 theme, the design tokens, and the variant recipes every component is built from.
 
-No framework, no components. If you are building with Vue, install [`@techfides/ui-library-vue`](https://www.npmjs.com/package/@techfides/ui-library-vue) instead — it depends on this one and brings it with it. Reach for this package directly when you are styling something the component library does not cover, or when a React binding arrives.
+No framework, no components. If you are building with Vue, install [`@techfides/ui-library-vue`](https://www.npmjs.com/package/@techfides/ui-library-vue) instead — it depends on this one and brings it with it. Reach for this package directly when you are styling something the component library does not cover, or when a React binding arrives. Words and languages live in [`@techfides/ui-library-core`](https://www.npmjs.com/package/@techfides/ui-library-core), the framework-free package, not here.
 
 ## Install
 
@@ -37,8 +37,6 @@ cn('bg-tf-panel p-6', props.class)
 
 **Brand** — four accents, switched by a `data-brand` attribute on the root. Every accent role in the system derives from the one the brand names.
 
-**Words** — every string a component says on its own behalf, as a `Language`. `english` and `czech` ship; the framework binding hands one to `provideLanguage`. Words live here rather than in the binding so both bindings say the same thing ([ADR 0004](https://github.com/TechFides/ui-library/blob/main/docs/adr/0004-words-live-in-the-framework-free-package.md)).
-
 ## The one thing to know about surfaces
 
 Depth is carried by lightness, not by shadow: on a dark screen a black shadow has almost nothing to fall on. There are five surface steps and each is measurably lighter than the one below it. A shadow means something different — that a thing has left the page altogether.

package/css/theme.css

@@ -27,17 +27,34 @@
     font-family: var(--font-tf-body);
     scrollbar-gutter: stable;
   }
+
+  x-vue-echarts {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+  }
+
+  x-vue-echarts > .echarts-host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+  }
+
+  x-vue-echarts > .echarts-host > :first-child,
+  x-vue-echarts > .echarts-host > :first-child > canvas {
+    border-radius: inherit;
+  }
 }
 
 @theme static inline {
   --ceiling-tf-accent: var(--tf-accent-ceiling);
-
   --color-tf-accent: var(--tf-accent);
-  --color-tf-accent-hi: oklch(from var(--tf-accent) 0.73 c h);
-  --color-tf-accent-surface: oklch(from var(--tf-accent) 0.55 c h);
-  --color-tf-accent-deep: oklch(from var(--tf-accent) 0.45 c h);
-  --color-tf-on-accent: #ffffff;
-
+  --color-tf-accent-hi: oklch(from var(--tf-accent) 73% c h);
+  --color-tf-accent-surface: oklch(from var(--tf-accent) 55% c h);
+  --color-tf-accent-deep: oklch(from var(--tf-accent) 45% c h);
+  --color-tf-on-accent: #fff;
   --color-tf-accent-tint: color-mix(
     in oklab,
     var(--tf-accent) var(--tf-tint),
@@ -57,13 +74,11 @@
   --color-tf-panel-2: rgb(255 255 255 / 3%);
   --color-tf-panel-hi: rgb(255 255 255 / 8.5%);
   --color-tf-glass: rgb(255 255 255 / 6.5%);
-
   --color-tf-sunken: rgb(0 0 0 / 26%);
   --color-tf-sunken-hi: rgb(0 0 0 / 20%);
   --color-tf-sunken-quiet: rgb(0 0 0 / 34%);
   --color-tf-control: rgb(255 255 255 / 9%);
   --color-tf-control-hi: rgb(255 255 255 / 12%);
-
   --color-tf-surface-hi: color-mix(in oklab, #fff 4.5%, var(--color-tf-surface));
   --color-tf-surface-quiet: color-mix(in oklab, var(--color-tf-bg) 55%, var(--color-tf-surface));
   --color-tf-shade-under: color-mix(in oklab, var(--color-tf-bg) 38%, transparent);
@@ -76,26 +91,22 @@
   --color-tf-fg: #eef1f6;
   --color-tf-fg-held: color-mix(in oklab, #eef1f6 82%, var(--color-tf-bg));
   --color-tf-muted: #98a1b2;
-
-  --color-tf-success: oklch(0.55 0.19 133);
-  --color-tf-success-hi: oklch(0.73 0.195 133);
-  --color-tf-warning: oklch(0.6 0.13 70);
-  --color-tf-warning-hi: oklch(0.73 0.158 70);
-  --color-tf-info: oklch(0.55 0.196 243);
-  --color-tf-info-hi: oklch(0.73 0.156 243);
-  --color-tf-danger: oklch(0.55 0.241 27);
-  --color-tf-danger-hi: oklch(0.73 0.17 27);
-  --color-tf-on-semantic: #ffffff;
-
+  --color-tf-success: oklch(55% 0.19 133deg);
+  --color-tf-success-hi: oklch(73% 0.195 133deg);
+  --color-tf-warning: oklch(60% 0.13 70deg);
+  --color-tf-warning-hi: oklch(73% 0.158 70deg);
+  --color-tf-info: oklch(55% 0.196 243deg);
+  --color-tf-info-hi: oklch(73% 0.156 243deg);
+  --color-tf-danger: oklch(55% 0.241 27deg);
+  --color-tf-danger-hi: oklch(73% 0.17 27deg);
+  --color-tf-on-semantic: #fff;
   --ceiling-tf-success: 0.169;
   --ceiling-tf-warning: 0.13;
   --ceiling-tf-info: 0.145;
   --ceiling-tf-danger: 0.244;
-
   --tf-tint: 15%;
   --tf-edge: 32%;
   --tf-edge-rest: 32%;
-
   --tf-rest-angle: 110deg;
   --tf-rest-waist: 33%;
   --tf-mixed-angle: 150deg;
@@ -103,11 +114,9 @@
   --tf-milk-reach: 34%;
   --tf-pressed-angle: 124deg;
   --tf-fall-angle: 180deg;
-
   --tf-glass-flat:
     linear-gradient(var(--color-tf-glass), var(--color-tf-glass)), var(--color-tf-bg);
   --tf-rise-angle: 290deg;
-
   --color-tf-success-tint: color-mix(
     in oklab,
     var(--color-tf-success) var(--tf-tint),
@@ -149,10 +158,8 @@
     var(--color-tf-danger) var(--tf-edge),
     var(--color-tf-surface)
   );
-
   --font-tf-display: 'Poppins', system-ui, sans-serif;
   --font-tf-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
-
   --text-tf-numeral: clamp(96px, 11vw, 160px);
   --text-tf-numeral--line-height: 1;
   --text-tf-display: clamp(38px, 4.5vw, 54px);
@@ -179,16 +186,13 @@
   --text-tf-caption--line-height: 1.6;
   --text-tf-caption-sm: 12px;
   --text-tf-caption-sm--line-height: 1.6;
-
   --tracking-tf-tight: -0.022em;
   --tracking-tf-eyebrow: 0.12em;
-
   --breakpoint-*: initial;
   --breakpoint-sm: 40rem;
   --breakpoint-md: 48rem;
   --breakpoint-lg: 64rem;
   --breakpoint-xl: 80rem;
-
   --container-*: initial;
   --max-width-*: initial;
   --container-tf-panel: 24rem;
@@ -197,97 +201,77 @@
   --container-tf-measure: 65ch;
   --container-tf-page: 56rem;
   --container-tf-canvas: 100rem;
-
   --spacing-tf-hairline: 1px;
-
   --spacing-tf-control-2xs: 1.5rem;
   --spacing-tf-control-xs: 2rem;
   --spacing-tf-control-sm: 2.5rem;
   --spacing-tf-control-md: 3rem;
   --spacing-tf-control-lg: 3.5rem;
-
   --spacing-tf-row: 2.25rem;
   --spacing-tf-chip-sm: 1.5rem;
   --spacing-tf-target: 3rem;
-
   --spacing-tf-menu: 12rem;
   --spacing-tf-sidebar: 17rem;
   --spacing-tf-rail: 5rem;
-
   --spacing-tf-icon-2xs: 0.875rem;
   --spacing-tf-icon-xs: 1rem;
   --spacing-tf-icon-sm: 1.125rem;
   --spacing-tf-icon-md: 1.25rem;
   --spacing-tf-icon-lg: 1.375rem;
-
   --spacing-tf-icon-solo-xs: 1rem;
   --spacing-tf-icon-solo-sm: 1.25rem;
   --spacing-tf-icon-solo-md: 1.375rem;
   --spacing-tf-icon-solo-lg: 1.5rem;
-
   --spacing-tf-mark-glyph: 0.875rem;
   --spacing-tf-mark-dot: 0.625rem;
   --spacing-tf-mark-track: 0.375rem;
   --spacing-tf-mark-inset: 0.1875rem;
-
   --tf-mark-path: 23;
   --tf-icon-stroke: 2.75;
   --tf-icon-stroke-solo: 3;
-
   --blur-tf-panel: 16px;
   --blur-tf-glass: 16px;
   --blur-tf-scrim: 6px;
   --blur-tf-cloud-md: 14px;
   --blur-tf-cloud-tight: 10px;
   --blur-tf-cloud-wide: 32px;
-
   --radius-tf-none: 0;
   --radius-tf-inline: 0.375rem;
   --radius-tf-control: 0.625rem;
   --radius-tf-block: 0.75rem;
   --radius-tf-card: 1rem;
   --radius-tf-pill: 9999px;
-
   --shadow-tf-float: 0 18px 44px -18px rgb(0 0 0 / 88%);
   --shadow-tf-mark: 0 1px 2px rgb(0 0 0 / 40%);
-
   --ease-tf: cubic-bezier(0.16, 0.8, 0.3, 1);
   --ease-tf-spring: cubic-bezier(0.34, 1.56, 0.5, 1);
   --ease-tf-glide: cubic-bezier(0.45, 0.05, 0.35, 1);
   --ease-tf-settle: cubic-bezier(0.32, 1.36, 0.58, 1);
-
   --tf-z-raised: 10;
   --tf-z-dropdown: 20;
   --tf-z-tooltip: 30;
   --tf-z-modal: 40;
   --tf-z-toast: 50;
-
   --tf-duration-1: 140ms;
   --tf-duration-2: 240ms;
   --tf-duration-3: 600ms;
   --tf-duration-4: 700ms;
-
   --tf-marquee-pace: calc(var(--spacing-tf-icon-solo-lg) * (1s / var(--tf-duration-3)));
-
   --tf-sweep-duration: calc(var(--tf-duration-3) * 30);
   --tf-twinkle-duration: calc(var(--tf-duration-3) * 26);
   --tf-pulse-duration: calc(var(--tf-duration-3) * 3);
-
   --tf-timing-quick: var(--tf-duration-1) var(--ease-tf);
   --tf-timing-glide: var(--tf-duration-2) var(--ease-tf-glide);
   --tf-timing-drift: var(--tf-duration-3) var(--ease-tf-glide);
   --tf-timing-trail: var(--tf-duration-4) var(--ease-tf-glide);
   --tf-timing-spring: var(--tf-duration-2) var(--ease-tf-spring);
   --tf-timing-settle: var(--tf-duration-2) var(--ease-tf-settle);
-
   --tf-blend-timing: var(--tf-timing-glide);
   --tf-shadow-timing: var(--tf-timing-glide);
   --tf-move-timing: var(--tf-timing-quick);
   --tf-weather-timing: var(--tf-timing-drift);
   --tf-ink-timing: var(--tf-timing-quick);
-
   --tf-cloud-blur: var(--blur-tf-cloud-md);
-
   --animate-tf-blend-in: tf-blend-in var(--tf-duration-2) var(--ease-tf-glide);
   --animate-tf-arrive: tf-arrive var(--tf-duration-2) var(--ease-tf) both;
   --animate-tf-depart: tf-depart var(--tf-duration-1) var(--ease-tf) both;
@@ -457,7 +441,7 @@
 }
 
 @keyframes tf-chip-in {
-  from {
+  0% {
     width: 0;
     padding-inline: 0;
     margin-inline-end: calc(var(--tf-chip-gap, 0px) * -1);
@@ -613,15 +597,10 @@
 }
 
 @custom-variant interactive (&:not(:disabled):not([aria-disabled='true']):not([data-disabled]));
-
 @custom-variant hovered (&:hover, &[data-hover]);
-
 @custom-variant pressed (&:active, &[data-active]);
-
 @custom-variant focused (&:focus-visible, &[data-focus-visible]);
-
 @custom-variant reached (&:focus-within, &[data-reached]);
-
 @custom-variant asleep (
   &:has(:placeholder-shown, [data-placeholder-shown]):not(:focus-within):not([data-reached]):not([data-state='open'])
 );
@@ -713,7 +692,7 @@
 @property --tf-nudge {
   syntax: '<length>';
   inherits: true;
-  initial-value: 0px;
+  initial-value: 0;
 }
 
 @property --tf-tally {
@@ -754,25 +733,25 @@
 
 @property --tf-marquee-run {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: true;
 }
 
 @property --tf-marquee-pace {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: true;
 }
 
 @property --tf-fade-head {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: false;
 }
 
 @property --tf-fade-foot {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: false;
 }
 
@@ -837,15 +816,15 @@
 }
 
 @utility tf-fill-scale {
-  --tf-lift: oklch(from var(--tf-base) 0.6 min(calc(var(--tf-c, c) * 1.1), var(--tf-ceiling)) h);
+  --tf-lift: oklch(from var(--tf-base) 60% min(calc(var(--tf-c, c) * 1.1), var(--tf-ceiling)) h);
   --tf-vivid: oklch(
-    from var(--tf-base) 0.51 min(calc(var(--tf-c, c) * 1.05), calc(var(--tf-ceiling) * 0.85)) h
+    from var(--tf-base) 51% min(calc(var(--tf-c, c) * 1.05), calc(var(--tf-ceiling) * 0.85)) h
   );
-  --tf-deep: oklch(from var(--tf-base) 0.42 min(c, calc(var(--tf-ceiling) * 0.7)) h);
+  --tf-deep: oklch(from var(--tf-base) 42% min(c, calc(var(--tf-ceiling) * 0.7)) h);
   --tf-flare: oklch(
-    from var(--tf-base) 0.68 min(calc(var(--tf-c, c) * 1.1), calc(var(--tf-ceiling) * 0.77)) h
+    from var(--tf-base) 68% min(calc(var(--tf-c, c) * 1.1), calc(var(--tf-ceiling) * 0.77)) h
   );
-  --tf-abyss: oklch(from var(--tf-base) 0.33 min(c, calc(var(--tf-ceiling) * 0.55)) h);
+  --tf-abyss: oklch(from var(--tf-base) 33% min(c, calc(var(--tf-ceiling) * 0.55)) h);
 }
 
 @utility bg-tf-blend {
@@ -865,11 +844,11 @@
 }
 
 @utility tf-ink-scale {
-  --tf-lift: oklch(from var(--tf-base) 0.88 calc(var(--tf-c, c) * 1.1) h);
-  --tf-vivid: oklch(from var(--tf-base) 0.82 calc(var(--tf-c, c) * 1.3) h);
-  --tf-deep: oklch(from var(--tf-base) 0.7 c h);
-  --tf-flare: oklch(from var(--tf-base) 0.92 calc(var(--tf-c, c) * 1.15) h);
-  --tf-abyss: oklch(from var(--tf-base) 0.66 calc(var(--tf-c, c) * 1.05) h);
+  --tf-lift: oklch(from var(--tf-base) 88% calc(var(--tf-c, c) * 1.1) h);
+  --tf-vivid: oklch(from var(--tf-base) 82% calc(var(--tf-c, c) * 1.3) h);
+  --tf-deep: oklch(from var(--tf-base) 70% c h);
+  --tf-flare: oklch(from var(--tf-base) 92% calc(var(--tf-c, c) * 1.15) h);
+  --tf-abyss: oklch(from var(--tf-base) 66% calc(var(--tf-c, c) * 1.05) h);
 }
 
 @utility text-tf-blend {
@@ -880,6 +859,7 @@
   --tf-rest-trail: var(--color-tf-fg);
 
   @apply tf-ramp;
+
   background-clip: text;
   color: transparent;
   text-box-trim: trim-start;
@@ -907,9 +887,9 @@
 }
 
 @utility tf-label-lit {
-  --tf-label-lead: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
-  --tf-label-mid: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
-  --tf-label-trail: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
+  --tf-label-lead: var(--tf-label-ink, oklch(from var(--tf-base) 73% c h));
+  --tf-label-mid: var(--tf-label-ink, oklch(from var(--tf-base) 73% c h));
+  --tf-label-trail: var(--tf-label-ink, oklch(from var(--tf-base) 73% c h));
 }
 
 @utility tf-label-failed {
@@ -1022,7 +1002,6 @@
 
 @utility tf-blend-outline {
   @apply tf-ink-scale;
-
   @apply tf-ring-scale;
 
   --tf-outline-lift: var(--tf-ring-lit-bloom);
@@ -1080,7 +1059,7 @@
   mask-image: linear-gradient(
     to bottom,
     transparent 0,
-    transparent var(--tf-fade-head, 0px),
+    transparent var(--tf-fade-head, 0),
     #000 calc(var(--tf-fade-head, 0px) + var(--spacing)),
     #000 calc(100% - var(--tf-fade-foot, 0px)),
     transparent 100%
@@ -1179,10 +1158,10 @@
 }
 
 @utility tf-ring-scale {
-  --tf-ring-dim: oklch(from var(--tf-base) 0.34 calc(var(--tf-c, c) * 0.34) h);
-  --tf-ring-dim-bloom: oklch(from var(--tf-base) 0.45 calc(var(--tf-c, c) * 0.42) h);
-  --tf-ring-lit: oklch(from var(--tf-base) 0.6 calc(var(--tf-c, c) * 0.85) h);
-  --tf-ring-lit-bloom: oklch(from var(--tf-base) 0.78 c h);
+  --tf-ring-dim: oklch(from var(--tf-base) 34% calc(var(--tf-c, c) * 0.34) h);
+  --tf-ring-dim-bloom: oklch(from var(--tf-base) 45% calc(var(--tf-c, c) * 0.42) h);
+  --tf-ring-lit: oklch(from var(--tf-base) 60% calc(var(--tf-c, c) * 0.85) h);
+  --tf-ring-lit-bloom: oklch(from var(--tf-base) 78% c h);
 }
 
 @utility tf-ring-rest {
@@ -1331,7 +1310,7 @@
 
   --tf-rest-lead: var(--tf-ring-base);
   --tf-rest-mid: oklch(from var(--tf-ring-base) l c h / calc(100% - var(--tf-blend-waist)));
-  --tf-rest-trail: oklch(from var(--tf-ring-base) l c h / 0);
+  --tf-rest-trail: oklch(from var(--tf-ring-base) l c h / 0%);
 
   @apply tf-ramp;
 }
@@ -1392,9 +1371,9 @@
 }
 
 @utility tf-cloud-scale {
-  --tf-haze: oklch(from var(--tf-base) 0.85 c h);
-  --tf-haze-lit: oklch(from var(--tf-base) 0.92 c h);
-  --tf-haze-quiet: oklch(from var(--tf-base) 0.6 c h);
+  --tf-haze: oklch(from var(--tf-base) 85% c h);
+  --tf-haze-lit: oklch(from var(--tf-base) 92% c h);
+  --tf-haze-quiet: oklch(from var(--tf-base) 60% c h);
 }
 
 @utility tf-cloud-brand {

package/dist/anatomies.d.ts

@@ -541,7 +541,6 @@ declare const anatomies: {
     };
     readonly spinner: {
       readonly part: "spinner";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: false;
     };
     readonly trailing: {
@@ -836,7 +835,6 @@ declare const anatomies: {
     };
     readonly requiredIndicator: {
       readonly part: "required-indicator";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: false;
     };
     readonly root: {
@@ -863,7 +861,6 @@ declare const anatomies: {
     };
     readonly root: {
       readonly part: "scope-switcher";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
     readonly rowText: {
@@ -878,7 +875,6 @@ declare const anatomies: {
     };
     readonly value: {
       readonly part: "value";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
   };
@@ -904,7 +900,6 @@ declare const anatomies: {
     };
     readonly hint: {
       readonly part: "hint";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
     readonly mark: {
@@ -1011,7 +1006,6 @@ declare const anatomies: {
     };
     readonly spinner: {
       readonly part: "spinner";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: false;
     };
     readonly trailing: {
@@ -1214,7 +1208,6 @@ declare const anatomies: {
     };
     readonly counted: {
       readonly part: "counted";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
     readonly figure: {
@@ -1582,5 +1575,4 @@ declare const anatomies: {
 };
 type AnyPart = PartsOf<(typeof anatomies)[keyof typeof anatomies]>;
 //#endregion
-export { type AnyPart, anatomies };
-//# sourceMappingURL=anatomies.d.ts.map
+export { type AnyPart, anatomies };

package/dist/anatomies.js

@@ -103,5 +103,3 @@ const anatomies = {
 };
 //#endregion
 export { anatomies };
-
-//# sourceMappingURL=anatomies.js.map

package/dist/anatomy.d.ts

@@ -2,12 +2,11 @@
 type Recipe = (...args: never[]) => string;
 interface Part {
   part: string;
-  recipe: Recipe;
+  recipe?: Recipe;
   required: boolean;
 }
 type Anatomy = Record<string, Part>;
 declare const anatomy: <const Shape extends Anatomy>(parts: Shape) => Shape;
 type PartsOf<Shape> = Shape extends Anatomy ? Shape[keyof Shape]['part'] : never;
 //#endregion
-export { type Anatomy, type Part, type PartsOf, type Recipe, anatomy };
-//# sourceMappingURL=anatomy.d.ts.map
+export { type Anatomy, type Part, type PartsOf, type Recipe, anatomy };

package/dist/anatomy.js

@@ -2,5 +2,3 @@
 const anatomy = (parts) => parts;
 //#endregion
 export { anatomy };
-
-//# sourceMappingURL=anatomy.js.map

package/dist/brands.d.ts

@@ -35,5 +35,4 @@ declare const brands: readonly [{
 declare const defaultBrand: BrandSlug;
 declare const brandTitle: (slug: string) => string;
 //#endregion
-export { type Brand, type BrandSlug, brandTitle, brands, defaultBrand };
-//# sourceMappingURL=brands.d.ts.map
+export { type Brand, type BrandSlug, brandTitle, brands, defaultBrand };

package/dist/brands.js

@@ -37,5 +37,3 @@ const brandTitle = (slug) => {
 };
 //#endregion
 export { brandTitle, brands, defaultBrand };
-
-//# sourceMappingURL=brands.js.map

package/dist/cn.d.ts

@@ -2,5 +2,4 @@ import { ClassValue } from "clsx";
 //#region src/cn.d.ts
 declare const cn: (...inputs: ClassValue[]) => string;
 //#endregion
-export { cn };
-//# sourceMappingURL=cn.d.ts.map
+export { cn };

package/dist/cn.generated.js

@@ -167,6 +167,29 @@ const zSteps = [
 	"tf-toast"
 ];
 const utilityFamilies = {
+	"tf-animation": [
+		"tf-blend-hushed",
+		"tf-blended",
+		"tf-breathing",
+		"tf-chip-arrives",
+		"tf-chip-departs",
+		"tf-cloud-breathing",
+		"tf-lands",
+		"tf-looping",
+		"tf-pinging",
+		"tf-pops",
+		"tf-shaken",
+		"tf-tallies",
+		"tf-turning",
+		"tf-twinkling"
+	],
+	"tf-cast": [
+		"tf-lifted",
+		"tf-pressed",
+		"tf-raised",
+		"tf-settled",
+		"tf-settled-quiet"
+	],
 	"tf-cloud-blur": [
 		"tf-cloud-md",
 		"tf-cloud-tight",
@@ -198,6 +221,11 @@ const utilityFamilies = {
 	],
 	"tf-lit": ["tf-lit-inside", "tf-lit-rest"],
 	"tf-mark-tone": ["tf-mark-failed", "tf-mark-lit"],
+	"tf-mask": [
+		"tf-cloud-low",
+		"tf-faded-x",
+		"tf-scroll-faded"
+	],
 	"tf-moves": ["tf-moves-glide", "tf-moves-spring"],
 	"tf-plated": ["tf-plated", "tf-plated-quiet"],
 	"tf-rule": [
@@ -208,10 +236,18 @@ const utilityFamilies = {
 		"tf-rule-quiet",
 		"tf-rule-quiet-fall"
 	],
-	"tf-settled": ["tf-settled", "tf-settled-quiet"],
-	"tf-slides": ["tf-slides-settle", "tf-slides-spring"]
+	"tf-scroll": ["tf-scroll-hidden", "tf-scroll-thin"],
+	"tf-slides": ["tf-slides-settle", "tf-slides-spring"],
+	"tf-transition": [
+		"tf-arrives",
+		"tf-crossfades",
+		"tf-fades",
+		"tf-grows",
+		"tf-resizes",
+		"tf-reveals",
+		"tf-slows",
+		"tf-transition"
+	]
 };
 //#endregion
 export { durationSteps, twScales, utilityFamilies, zSteps };
-
-//# sourceMappingURL=cn.generated.js.map

package/dist/cn.js

@@ -21,5 +21,3 @@ const twMerge = extendTailwindMerge({ extend: {
 const cn = (...inputs) => twMerge(clsx(inputs));
 //#endregion
 export { cn };
-
-//# sourceMappingURL=cn.js.map

package/dist/control.d.ts

@@ -10,5 +10,4 @@ declare const controlIcon: {
   xs: string;
 };
 //#endregion
-export { type ButtonSize, type ControlSize, type FieldSize, controlIcon, defaultFieldSize };
-//# sourceMappingURL=control.d.ts.map
+export { type ButtonSize, type ControlSize, type FieldSize, controlIcon, defaultFieldSize };

package/dist/control.js

@@ -8,5 +8,3 @@ const controlIcon = {
 };
 //#endregion
 export { controlIcon, defaultFieldSize };
-
-//# sourceMappingURL=control.js.map