@archetypeai/ds-ui-svelte-labs 0.7.1 → 0.8.0

package/README.md

@@ -1,6 +1,6 @@
 # @archetypeai/ds-ui-svelte-labs
 
-Labs primitives of the Archetype AI design system - the **experimental 0.x tier** built on top of the frozen [`@archetypeai/ds-ui-svelte-console`](./DS-UI-SVELTE-CONSOLE.md) base. Svelte 5 primitives styled with Tailwind v4 and `tailwind-variants`, wired to the `@archetypeai/ds-lib-tokens` theme, composing console primitives (Button, Card, Badge) where they need stable building blocks. TypeScript source ships as `.svelte` files (no precompilation) so consumers get full type-checking and IDE go-to-definition.
+Labs primitives of the Archetype AI design system - the **experimental 0.x tier** built on top of the frozen [`@archetypeai/ds-ui-svelte-console`](https://www.npmjs.com/package/@archetypeai/ds-ui-svelte-console) base. Svelte 5 primitives styled with Tailwind v4 and `tailwind-variants`, wired to the `@archetypeai/ds-lib-tokens` theme, composing console primitives (Button, Card, Badge) where they need stable building blocks. TypeScript source ships as `.svelte` files (no precompilation) so consumers get full type-checking and IDE go-to-definition.
 
 Labs is versioned 0.x: breaking changes are in-contract between minor versions. Components that prove themselves graduate toward console; console itself never changes to accommodate labs.
 

package/dist/primitives/aspect-ratio/aspect-ratio.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
-  import type { AspectRatioProps } from './types.js';
+  import { cn } from '../utils.js';
+  import { aspectRatioVariants, type AspectRatioProps } from './types.js';
 
-  let { ref = $bindable(null), ...restProps }: AspectRatioProps = $props();
+  let { ref = $bindable(null), class: className, ...restProps }: AspectRatioProps = $props();
 </script>
 
-<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />
+<AspectRatioPrimitive.Root
+  bind:ref
+  data-slot="aspect-ratio"
+  class={cn(aspectRatioVariants(), className)}
+  {...restProps}
+/>

package/dist/primitives/aspect-ratio/index.d.ts

@@ -1,4 +1,4 @@
 import Root from './aspect-ratio.svelte';
-export { type AspectRatioProps } from './types.js';
+export { aspectRatioVariants, type AspectRatioProps } from './types.js';
 export { Root, Root as AspectRatio };
 export default Root;

package/dist/primitives/aspect-ratio/index.js

@@ -1,5 +1,5 @@
 import Root from './aspect-ratio.svelte';
-export {} from './types.js';
+export { aspectRatioVariants } from './types.js';
 export { Root, 
 //
 Root as AspectRatio };

package/dist/primitives/aspect-ratio/types.d.ts

@@ -1,2 +1,3 @@
 import type { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
+export declare const aspectRatioVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "", unknown, unknown, undefined>>;
 export type AspectRatioProps = AspectRatioPrimitive.RootProps;

package/dist/primitives/aspect-ratio/types.js

@@ -1 +1,7 @@
-export {};
+import { tv } from 'tailwind-variants';
+// base-only tv(): aspect-ratio is a headless layout primitive with no styling
+// of its own, but the empty base gives consumers a cn() merge anchor and keeps
+// the barrel exporting a *Variants like every other primitive
+export const aspectRatioVariants = tv({
+    base: ''
+});

package/dist/primitives/chart/scatter-tooltip.svelte

@@ -3,7 +3,7 @@
   import { scatterTooltipVariants, type ScatterTooltipProps } from './types.js';
   import { getTooltipContext, Tooltip } from 'layerchart';
 
-  let { class: className }: ScatterTooltipProps = $props();
+  let { ref = $bindable(null), class: className, ...restProps }: ScatterTooltipProps = $props();
 
   const tooltipCtx = getTooltipContext();
 
@@ -19,7 +19,12 @@
 </script>
 
 <Tooltip.Root variant="none">
-  <div data-slot="scatter-tooltip" class={cn(scatterTooltipVariants(), className)}>
+  <div
+    bind:this={ref}
+    data-slot="scatter-tooltip"
+    class={cn(scatterTooltipVariants(), className)}
+    {...restProps}
+  >
     {#if point}
       <div class="flex items-center justify-between gap-4">
         <span class="text-muted-foreground">x</span>

package/dist/primitives/chart/scatter-tooltip.svelte.d.ts

@@ -1,4 +1,3 @@
-import { type ScatterTooltipProps } from './types.js';
-declare const ScatterTooltip: import("svelte").Component<ScatterTooltipProps, {}, "">;
+declare const ScatterTooltip: import("svelte").Component<Omit<import("@archetypeai/ds-ui-svelte-console/primitives/utils").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, "children">, {}, "ref">;
 type ScatterTooltip = ReturnType<typeof ScatterTooltip>;
 export default ScatterTooltip;

package/dist/primitives/chart/types.d.ts

@@ -5,7 +5,7 @@ import type { ChartConfig, TooltipPayload } from './chart-utils.js';
 export declare const chartContainerVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export declare const chartTooltipVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-border/50 bg-background grid min-w-36 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-border/50 bg-background grid min-w-36 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", unknown, unknown, undefined>>;
 export declare const scatterTooltipVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", unknown, unknown, undefined>>;
-export type ChartContainerProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+export type ChartContainerProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     config: ChartConfig;
 };
 export type ChartTooltipIndicator = 'line' | 'dot' | 'dashed';
@@ -28,6 +28,4 @@ export type ChartTooltipProps = WithoutChildren<WithElementRef<HTMLAttributes<HT
         }
     ]>;
 };
-export type ScatterTooltipProps = {
-    class?: string;
-};
+export type ScatterTooltipProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>>;

package/dist/primitives/kbd/types.d.ts

@@ -1,6 +1,6 @@
 import { type WithElementRef } from '../utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
-export declare const kbdVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10", unknown, unknown, undefined>>;
+export declare const kbdVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-normal select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-normal select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10", unknown, unknown, undefined>>;
 export declare const kbdGroupVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "inline-flex items-center gap-1", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "inline-flex items-center gap-1", unknown, unknown, undefined>>;
 export type KbdProps = WithElementRef<HTMLAttributes<HTMLElement>>;
 export type KbdGroupProps = WithElementRef<HTMLAttributes<HTMLElement>>;

package/dist/primitives/kbd/types.js

@@ -1,7 +1,7 @@
 import {} from '../utils.js';
 import { tv } from 'tailwind-variants';
 export const kbdVariants = tv({
-    base: "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10"
+    base: "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-normal select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10"
 });
 export const kbdGroupVariants = tv({
     base: 'inline-flex items-center gap-1'

package/dist/primitives/logo/logo.svelte

@@ -2,10 +2,18 @@
   import { cn } from '../utils.js';
   import { logoVariants, type LogoProps } from './types.js';
 
-  let { class: className, size = 'default', ...restProps }: LogoProps = $props();
+  let {
+    class: className,
+    size = 'default',
+    role = 'img',
+    'aria-label': ariaLabel = 'Archetype AI',
+    ...restProps
+  }: LogoProps = $props();
 </script>
 
 <svg
+  {role}
+  aria-label={ariaLabel}
   data-slot="logo"
   data-size={size}
   class={cn(logoVariants({ size }), className)}

package/dist/primitives/logo/types.d.ts

@@ -20,6 +20,6 @@ export declare const logoVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "text-foreground shrink-0 antialiased", unknown, unknown, undefined>>;
 export type LogoSize = VariantProps<typeof logoVariants>['size'];
-export type LogoProps = SVGAttributes<SVGSVGElement> & {
+export type LogoProps = Omit<SVGAttributes<SVGSVGElement>, 'children'> & {
     size?: LogoSize;
 };

package/dist/primitives/menubar/menubar.svelte

@@ -2,14 +2,12 @@
   import { cn } from '../utils.js';
   import Logo from '../logo/index.js';
   import { menubarVariants, type MenubarProps } from './types.js';
-  import { Badge } from '@archetypeai/ds-ui-svelte-console/primitives/badge';
   import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
+  import { darkMode } from '@archetypeai/ds-ui-svelte-console/primitives/theme';
   import SeparatorIcon from '@lucide/svelte/icons/minus';
   import SunIcon from '@lucide/svelte/icons/sun';
   import MoonIcon from '@lucide/svelte/icons/moon';
 
-  const browser = typeof window !== 'undefined';
-
   let {
     ref = $bindable(null),
     partnerLogo,
@@ -18,33 +16,14 @@
     darkToggle = true,
     ...restProps
   }: MenubarProps = $props();
-
-  // follow whatever theme the host app has already applied; the toggle is the
-  // only thing that mutates the document class
-  let darkMode = $state(browser && document.documentElement.classList.contains('dark'));
-
-  function toggleDark() {
-    const apply = () => {
-      darkMode = !darkMode;
-      document.documentElement.classList.toggle('dark', darkMode);
-    };
-
-    if (document.startViewTransition) {
-      document.startViewTransition(apply);
-    } else {
-      apply();
-    }
-  }
 </script>
 
 <header bind:this={ref} data-slot="menubar" class={cn(menubarVariants(), className)} {...restProps}>
   <div data-slot="menubar-brand" class="flex items-center gap-3">
     <Logo />
-    <SeparatorIcon class="text-muted-foreground size-6" strokeWidth={1} aria-hidden="true" />
     {#if partnerLogo}
+      <SeparatorIcon class="text-muted-foreground size-6" strokeWidth={1} aria-hidden="true" />
       {@render partnerLogo()}
-    {:else}
-      <Badge class="text-muted-foreground mr-0">Partner Logo</Badge>
     {/if}
   </div>
 
@@ -54,8 +33,13 @@
         {@render children()}
       {/if}
       {#if darkToggle}
-        <Button variant="outline" size="icon" onclick={toggleDark} aria-label="Toggle dark mode">
-          {#if darkMode}
+        <Button
+          variant="outline"
+          size="icon"
+          onclick={() => darkMode.toggle()}
+          aria-label="Toggle dark mode"
+        >
+          {#if darkMode.current}
             <SunIcon />
           {:else}
             <MoonIcon />

package/dist/primitives/menubar/types.d.ts

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export declare const menubarVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-border flex items-center justify-between border-b px-4 py-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-border flex items-center justify-between border-b px-4 py-2", unknown, unknown, undefined>>;
 export type MenubarProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
-    /** optional partner logo snippet for co-branding; a placeholder badge renders when omitted */
+    /** optional partner logo snippet for co-branding; the separator + partner area render only when provided */
     partnerLogo?: Snippet;
     /** show built-in dark mode toggle (opt out with false) */
     darkToggle?: boolean;

package/dist/primitives/scatter-chart/types.d.ts

@@ -1,7 +1,7 @@
 import { type WithElementRef } from '../utils.js';
 import type { Component } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-export declare const scatterChartVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", unknown, unknown, undefined>>;
+export declare const scatterChartVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-interactive border p-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-interactive border p-4", unknown, unknown, undefined>>;
 export type ScatterChartProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     /** card header label; header renders only when title or icon is set */
     title?: string;

package/dist/primitives/scatter-chart/types.js

@@ -2,5 +2,5 @@ import {} from '../utils.js';
 import { tv } from 'tailwind-variants';
 // card shell inlined from the retired background-card pattern
 export const scatterChartVariants = tv({
-    base: 'bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm'
+    base: 'bg-card text-card-foreground border-border flex flex-col gap-6 rounded-interactive border p-4'
 });

package/dist/primitives/sensor-chart/types.d.ts

@@ -2,7 +2,7 @@ import { type WithElementRef } from '../utils.js';
 import type { Component } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ChartAxis } from '../chart/chart-utils.js';
-export declare const sensorChartVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", unknown, unknown, undefined>>;
+export declare const sensorChartVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-interactive border p-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-interactive border p-4", unknown, unknown, undefined>>;
 export type SensorChartProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     /** card header label identifying the sensor; header renders only when title or icon is set */
     title?: string;

package/dist/primitives/sensor-chart/types.js

@@ -2,5 +2,5 @@ import {} from '../utils.js';
 import { tv } from 'tailwind-variants';
 // card shell inlined from the retired background-card pattern
 export const sensorChartVariants = tv({
-    base: 'bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm'
+    base: 'bg-card text-card-foreground border-border flex flex-col gap-6 rounded-interactive border p-4'
 });

package/dist/primitives/slider/types.d.ts

@@ -3,5 +3,5 @@ import { type WithoutChildrenOrChild } from '../utils.js';
 export declare const sliderVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", unknown, unknown, undefined>>;
 export declare const sliderTrackVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", unknown, unknown, undefined>>;
 export declare const sliderRangeVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", unknown, unknown, undefined>>;
-export declare const sliderThumbVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+export declare const sliderThumbVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
 export type SliderProps = WithoutChildrenOrChild<SliderPrimitive.RootProps>;

package/dist/primitives/slider/types.js

@@ -10,5 +10,5 @@ export const sliderRangeVariants = tv({
     base: 'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
 });
 export const sliderThumbVariants = tv({
-    base: 'border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50'
+    base: 'border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50'
 });

package/dist/primitives/toggle/types.d.ts

@@ -10,7 +10,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-xs text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-interactive text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variant: {
         default: string;
         outline: string;
@@ -30,7 +30,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-xs text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-interactive text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
 export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
 export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
 export type ToggleProps = TogglePrimitive.RootProps & {

package/dist/primitives/toggle/types.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const toggleVariants = tv({
-    base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-xs text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-interactive text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     variants: {
         variant: {
             default: 'bg-transparent',

package/dist/primitives/video-player/video-player.svelte

@@ -129,7 +129,7 @@
 
         <span
           data-slot="video-player-time"
-          class="bg-background/30 text-foreground rounded-full px-3 py-1.5 whitespace-nowrap"
+          class="bg-background/30 text-foreground rounded-full px-3 py-1.5 font-mono text-xs whitespace-nowrap"
         >
           {formatMMSS(time)} / {formatMMSS(duration)}
         </span>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@archetypeai/ds-ui-svelte-labs",
-    "version": "0.7.1",
+    "version": "0.8.0",
     "description": "Archetype AI Design System Labs Primitives (experimental 0.x tier composing @archetypeai/ds-ui-svelte-console)",
     "type": "module",
     "license": "MIT",