@vielzeug/buildit 2.0.0

package/dist/styles/theme.css

@@ -0,0 +1,457 @@
+:root {
+  /* ========================================
+     Spacing Scale
+     Based on 0.25rem (4px) increments
+     ======================================== */
+  --size-0: 0;
+  --size-px: 1px;
+  --size-0-5: 0.125rem; /* 2px */
+  --size-1: 0.25rem; /* 4px */
+  --size-1-5: 0.375rem; /* 6px */
+  --size-2: 0.5rem; /* 8px */
+  --size-2-5: 0.625rem; /* 10px */
+  --size-3: 0.75rem; /* 12px */
+  --size-3-5: 0.875rem; /* 14px */
+  --size-4: 1rem; /* 16px */
+  --size-5: 1.25rem; /* 20px */
+  --size-6: 1.5rem; /* 24px */
+  --size-7: 1.75rem; /* 28px */
+  --size-8: 2rem; /* 32px */
+  --size-9: 2.25rem; /* 36px */
+  --size-10: 2.5rem; /* 40px */
+  --size-11: 2.75rem; /* 44px */
+  --size-12: 3rem; /* 48px */
+  --size-14: 3.5rem; /* 56px */
+  --size-16: 4rem; /* 64px */
+  --size-20: 5rem; /* 80px */
+  --size-24: 6rem; /* 96px */
+  --size-28: 7rem; /* 112px */
+  --size-32: 8rem; /* 128px */
+  --size-36: 9rem; /* 144px */
+  --size-40: 10rem; /* 160px */
+  --size-44: 11rem; /* 176px */
+  --size-48: 12rem; /* 192px */
+  --size-52: 13rem; /* 208px */
+  --size-56: 14rem; /* 224px */
+  --size-60: 15rem; /* 240px */
+  --size-64: 16rem; /* 256px */
+  --size-72: 18rem; /* 288px */
+  --size-80: 20rem; /* 320px */
+  --size-96: 24rem; /* 384px */
+
+  /* Section Spacing */
+  --section-spacing: 2rem; /* 32px */
+
+  /* Container Sizes */
+  --size-2xs: 16rem; /* 256px */
+  --size-xs: 20rem; /* 320px */
+  --size-sm: 24rem; /* 384px */
+  --size-md: 28rem; /* 448px */
+  --size-lg: 32rem; /* 512px */
+  --size-xl: 36rem; /* 576px */
+  --size-2xl: 42rem; /* 672px */
+  --size-3xl: 48rem; /* 768px */
+  --size-4xl: 56rem; /* 896px */
+  --size-5xl: 64rem; /* 1024px */
+  --size-6xl: 72rem; /* 1152px */
+  --size-7xl: 80rem; /* 1280px */
+
+  /* Special Sizes */
+  --size-full: 100%;
+  --size-fit: fit-content;
+  --size-min: min-content;
+  --size-max: max-content;
+  --size-auto: auto;
+  --size-none: none;
+  --size-prose: 65ch; /* Optimal reading width */
+
+  /* Viewport Units */
+  --size-screen-width: 100dvw;
+  --size-screen-height: 100dvh;
+
+  /* Breakpoints */
+
+  /* Breakpoints */
+  --size-screen-xs: 480px;
+  --size-screen-sm: 640px;
+  --size-screen-md: 768px;
+  --size-screen-lg: 1024px;
+  --size-screen-xl: 1280px;
+  --size-screen-2xl: 1536px;
+
+  /* ========================================
+     3D Perspective (for transforms)
+     ======================================== */
+  --perspective-dramatic: 100px;
+  --perspective-near: 300px;
+  --perspective-normal: 500px;
+  --perspective-midrange: 800px;
+  --perspective-distant: 1200px;
+
+  /* ========================================
+     Aspect Ratios
+     ======================================== */
+  --aspect-square: 1 / 1;
+  --aspect-video: 16 / 9;
+  --aspect-wide: 21 / 9;
+  --aspect-ultrawide: 32 / 9;
+  --aspect-portrait: 3 / 4;
+  --aspect-photo: 4 / 3;
+
+  /* ========================================
+     Grid Template Columns
+     ======================================== */
+  --grid-1: repeat(1, minmax(0, 1fr));
+  --grid-2: repeat(2, minmax(0, 1fr));
+  --grid-3: repeat(3, minmax(0, 1fr));
+  --grid-4: repeat(4, minmax(0, 1fr));
+  --grid-5: repeat(5, minmax(0, 1fr));
+  --grid-6: repeat(6, minmax(0, 1fr));
+  --grid-7: repeat(7, minmax(0, 1fr));
+  --grid-8: repeat(8, minmax(0, 1fr));
+  --grid-9: repeat(9, minmax(0, 1fr));
+  --grid-10: repeat(10, minmax(0, 1fr));
+  --grid-11: repeat(11, minmax(0, 1fr));
+  --grid-12: repeat(12, minmax(0, 1fr));
+
+  /* ========================================
+     Border Widths
+     ======================================== */
+  --border-0: 0;
+  --border: 1px;
+  --border-2: 2px;
+  --border-4: 4px;
+  --border-8: 8px;
+
+  /* Ring Utilities (for focus states) */
+  --ring-0: 0 0 0 0;
+  --ring: 0 0 0 var(--border);
+  --ring-2: 0 0 0 var(--border-2);
+  --ring-4: 0 0 0 var(--border-4);
+  --ring-8: 0 0 0 var(--border-8);
+
+  /* ========================================
+     Border Radius
+     Optimized for accessibility - minimum 4px for touch targets
+     ======================================== */
+  --rounded-none: 0;
+  --rounded-xs: 0.125rem; /* 2px - minimal */
+  --rounded-sm: 0.25rem; /* 4px - small */
+  --rounded: 0.25rem; /* 4px - default */
+  --rounded-md: 0.375rem; /* 6px - medium */
+  --rounded-lg: 0.5rem; /* 8px - large */
+  --rounded-xl: 0.75rem; /* 12px - extra large */
+  --rounded-2xl: 1rem; /* 16px - 2x extra large */
+  --rounded-3xl: 1.5rem; /* 24px - 3x extra large */
+  --rounded-full: 9999px; /* Full circle/pill */
+
+  /* ========================================
+     Blur Effects
+     ======================================== */
+  --blur-none: 0;
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  /* ========================================
+     Box Shadows
+     Optimized for depth perception and accessibility
+     ======================================== */
+  --shadow-none: 0 0 transparent;
+  --shadow-2xs: 0 1px 2px rgb(0 0 0 / 3%);
+  --shadow-xs: 0 2px 4px rgb(0 0 0 / 3%);
+  --shadow-sm: 0 4px 10px -1px rgb(0 0 0 / 5%), 0 2px 4px -2px rgb(0 0 0 / 4%);
+  --shadow: 0 8px 16px -2px rgb(0 0 0 / 6%), 0 4px 8px -4px rgb(0 0 0 / 6%);
+  --shadow-md: 0 12px 24px -4px rgb(0 0 0 / 6%), 0 8px 12px -6px rgb(0 0 0 / 8%);
+  --shadow-lg: 0 24px 32px -8px rgb(0 0 0 / 8%), 0 12px 16px -8px rgb(0 0 0 / 8%);
+  --shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 12%);
+  --shadow-2xl: 0 48px 80px -20px rgb(0 0 0 / 20%);
+
+  /* Inset Shadows */
+  --inset-shadow-none: inset 0 0 transparent;
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 5%);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 5%);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 5%);
+  --inset-shadow: inset 0 2px 4px rgb(0 0 0 / 6%);
+
+  /* Drop Shadows (for filters) */
+  --drop-shadow-none: 0 0 transparent;
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 5%);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 15%);
+  --drop-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 1px 1px rgb(0 0 0 / 6%);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 12%);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 15%);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 10%);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 15%);
+
+  /* Text Shadows (for readability) */
+  --text-shadow-none: 0 0 transparent;
+  --text-shadow-2xs: 0 1px 0 rgb(0 0 0 / 15%);
+  --text-shadow-xs: 0 1px 1px rgb(0 0 0 / 20%);
+  --text-shadow-sm: 0 1px 0 rgb(0 0 0 / 7.5%), 0 1px 1px rgb(0 0 0 / 7.5%), 0 2px 2px rgb(0 0 0 / 7.5%);
+  --text-shadow: 0 1px 1px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 10%);
+  --text-shadow-md: 0 1px 1px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 10%), 0 2px 4px rgb(0 0 0 / 10%);
+  --text-shadow-lg: 0 1px 2px rgb(0 0 0 / 10%), 0 3px 2px rgb(0 0 0 / 10%), 0 4px 8px rgb(0 0 0 / 10%);
+
+  /* ========================================
+     Typography
+     Optimized for WCAG AAA readability
+     ======================================== */
+
+  /* Font Family */
+  --font-sans:
+    'Inter Variable', 'Plus Jakarta Sans Variable', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
+    sans-serif;
+  --font-serif: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, 'Liberation Mono', monospace;
+
+  /* Font Weights (Accessibility: minimum 400 for body text) */
+  --font-thin: 100;
+  --font-extralight: 200;
+  --font-light: 300;
+  --font-normal: 400; /* Minimum for body text */
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+  --font-black: 900;
+
+  /* Letter Spacing (for headers) */
+  --tracking-header: -0.025em; /* -2.5% tight */
+
+  /* Line Heights (Optimized for readability - WCAG recommends 1.5 for body text) */
+  --leading-none: 1;
+  --leading-tight: 1.15; /* 115% for headers */
+  --leading-snug: 1.375;
+  --leading-normal: 1.5; /* Optimal for body text (WCAG) */
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  /* Absolute Line Heights */
+  --leading-3: 0.75rem; /* 12px */
+  --leading-4: 1rem; /* 16px */
+  --leading-5: 1.25rem; /* 20px */
+  --leading-6: 1.5rem; /* 24px */
+  --leading-7: 1.75rem; /* 28px */
+  --leading-8: 2rem; /* 32px */
+  --leading-9: 2.25rem; /* 36px */
+  --leading-10: 2.5rem; /* 40px */
+
+  /* Font Sizes
+     Limited to 6 sizes for design consistency */
+  --text-xs: 0.75rem; /* 12px - small labels only */
+  --text-sm: 0.875rem; /* 14px - secondary text */
+  --text-base: 1rem; /* 16px - body text (minimum) */
+  --text-lg: 1.125rem; /* 18px - large UI / headings */
+  --text-xl: 1.25rem; /* 20px - subheadings */
+  --text-2xl: 1.5rem; /* 24px - major headings */
+
+  /* Headings Sizes
+     Limited to 6 (h1-h6) sizes for design consistency */
+  --heading-xs: 0.875rem;
+  --heading-sm: 1rem;
+  --heading-md: 1.5rem;
+  --heading-lg: 2rem;
+  --heading-xl: 3rem;
+  --heading-2xl: 4rem;
+
+  /* Semantic Text Colors (for accessibility)
+     These adapt to light/dark mode automatically */
+  --text-color-heading: var(--color-contrast-900);
+  --text-color-body: var(--color-contrast-800);
+  --text-color-secondary: var(--color-contrast-600);
+  --text-color-tertiary: var(--color-contrast-500);
+  --text-color-disabled: var(--color-contrast-400);
+  --text-color-contrast: var(--color-contrast-100);
+
+  /* ========================================
+     Transitions & Animations
+     Optimized for smooth, accessible motion
+     ======================================== */
+
+  /* Easing Functions */
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy */
+
+  /* Duration (respects prefers-reduced-motion) */
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Combined Transitions (most commonly used) */
+  --transition-none: none;
+  --transition-fast: 150ms var(--ease-in-out);
+  --transition-normal: 200ms var(--ease-in-out);
+  --transition-slow: 300ms var(--ease-in-out);
+  --transition-slower: 500ms var(--ease-in-out);
+  --transition-spring: 300ms var(--ease-spring);
+  --transition-all: all 150ms var(--ease-in-out);
+
+  /* ========================================
+     Colors
+     light-dark() resolves based on color-scheme:
+     html.dark → dark, html:not(.dark) → light, default → OS preference
+     ======================================== */
+  color-scheme: light dark;
+
+  /* Contrast scale */
+  --color-contrast-50: light-dark(hsl(240deg 5% 98%), hsl(210deg 6% 10%)); /* Canvas, page background */
+  --color-contrast-100: light-dark(hsl(240deg 5% 96%), hsl(210deg 5% 14%)); /* Cards, elevated surfaces */
+  --color-contrast-200: light-dark(hsl(240deg 5% 93%), hsl(210deg 5% 18%)); /* Nested cards, hover states */
+  --color-contrast-300: light-dark(hsl(240deg 5% 88%), hsl(210deg 5% 24%)); /* Borders, dividers */
+  --color-contrast-400: light-dark(hsl(240deg 4% 80%), hsl(210deg 4% 32%)); /* Disabled backgrounds, subtle UI */
+  --color-contrast-500: light-dark(hsl(240deg 4% 60%), hsl(210deg 4% 52%)); /* Tertiary text - AA for large text */
+  --color-contrast-600: light-dark(hsl(240deg 4% 46%), hsl(210deg 3% 64%)); /* Secondary text - AA compliant */
+  --color-contrast-700: light-dark(hsl(240deg 4% 32%), hsl(210deg 3% 76%)); /* Body text - AAA compliant */
+  --color-contrast-800: light-dark(hsl(240deg 4% 22%), hsl(210deg 4% 86%)); /* Headings - AAA compliant */
+  --color-contrast-900: light-dark(hsl(240deg 4% 12%), hsl(210deg 5% 94%)); /* High contrast text - AAA compliant */
+  --color-canvas: var(--color-contrast-50);
+  --color-contrast: var(--color-contrast-900);
+
+  /* Halo Shadows */
+  --halo-shadow-neutral:
+    inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 15%)),
+    0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(0 0 0 / 20%)) inset,
+    0 var(--size-2) var(--size-6) light-dark(hsl(240deg 3% 65% / 15%), hsl(210deg 8% 20% / 30%)),
+    0 var(--size-1) var(--size-3) light-dark(hsl(240deg 3% 65% / 8%), hsl(210deg 8% 20% / 18%));
+  --halo-shadow-primary:
+    inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
+    0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
+    0 var(--size-2) var(--size-6) light-dark(hsl(260deg 85% 65% / 15%), hsl(260deg 85% 70% / 18%)),
+    0 var(--size-1) var(--size-3) light-dark(hsl(260deg 85% 65% / 8%), hsl(260deg 85% 70% / 10%));
+  --halo-shadow-secondary:
+    inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
+    0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
+    0 var(--size-2) var(--size-6) light-dark(hsl(240deg 5% 18% / 12%), hsl(210deg 5% 82% / 12%)),
+    0 var(--size-1) var(--size-3) light-dark(hsl(240deg 5% 18% / 7%), hsl(210deg 5% 82% / 7%));
+  --halo-shadow-info:
+    inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
+    0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
+    0 var(--size-2) var(--size-6) light-dark(hsl(200deg 90% 50% / 15%), hsl(200deg 90% 60% / 18%)),
+    0 var(--size-1) var(--size-3) light-dark(hsl(200deg 90% 50% / 8%), hsl(200deg 90% 60% / 10%));
+  --halo-shadow-success:
+    inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
+    0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
+    0 var(--size-2) var(--size-6) light-dark(hsl(168deg 76% 42% / 15%), hsl(168deg 76% 50% / 18%)),
+    0 var(--size-1) var(--size-3) light-dark(hsl(168deg 76% 42% / 8%), hsl(168deg 76% 50% / 10%));
+  --halo-shadow-warning:
+    inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
+    0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
+    0 var(--size-2) var(--size-6) light-dark(hsl(38deg 100% 52% / 15%), hsl(38deg 100% 60% / 18%)),
+    0 var(--size-1) var(--size-3) light-dark(hsl(38deg 100% 52% / 8%), hsl(38deg 100% 60% / 10%));
+  --halo-shadow-error:
+    inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
+    0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
+    0 var(--size-2) var(--size-6) light-dark(hsl(8deg 90% 50% / 15%), hsl(8deg 90% 62% / 18%)),
+    0 var(--size-1) var(--size-3) light-dark(hsl(8deg 90% 50% / 8%), hsl(8deg 90% 62% / 10%));
+
+  /* Neutral */
+  --color-neutral: light-dark(hsl(240deg 2% 50% / 91%), hsl(210deg 2% 74% / 91%));
+  --color-neutral-backdrop: light-dark(hsl(240deg 2% 96% / 83%), hsl(210deg 2% 24% / 60%));
+  --color-neutral-content: light-dark(hsl(240deg 2% 36% / 91%), hsl(210deg 2% 84% / 91%));
+  --color-neutral-contrast: light-dark(hsl(240deg 2% 98% / 91%), hsl(210deg 2% 10% / 91%));
+  --color-neutral-focus: light-dark(hsl(240deg 2% 56% / 91%), hsl(210deg 2% 68% / 91%));
+  --color-neutral-border: light-dark(hsl(240deg 2% 88% / 75%), hsl(210deg 2% 26% / 75%));
+  --color-neutral-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--color-neutral) 15%, transparent), var(--shadow-sm);
+
+  /* Primary */
+  --color-primary: light-dark(hsl(260deg 85% 65% / 100%), hsl(260deg 85% 70% / 100%));
+  --color-primary-backdrop: light-dark(hsl(260deg 85% 92% / 100%), hsl(260deg 85% 30% / 40%));
+  --color-primary-content: light-dark(hsl(260deg 85% 15% / 100%), hsl(260deg 85% 95% / 100%));
+  --color-primary-contrast: light-dark(hsl(260deg 85% 98% / 100%), hsl(260deg 85% 10% / 100%));
+  --color-primary-focus: light-dark(hsl(260deg 85% 70% / 100%), hsl(260deg 85% 75% / 100%));
+  --color-primary-border: light-dark(hsl(260deg 85% 70% / 60%), hsl(260deg 85% 75% / 60%));
+  --color-primary-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent), var(--shadow-sm);
+
+  /* Secondary */
+  --color-secondary: light-dark(hsl(240deg 6% 18% / 100%), hsl(210deg 5% 82% / 100%));
+  --color-secondary-backdrop: light-dark(hsl(240deg 5% 94% / 83%), hsl(210deg 4% 16% / 60%));
+  --color-secondary-content: light-dark(hsl(240deg 4% 98% / 100%), hsl(210deg 5% 10% / 100%));
+  --color-secondary-contrast: light-dark(hsl(240deg 5% 98% / 100%), hsl(210deg 4% 10% / 100%));
+  --color-secondary-focus: light-dark(hsl(240deg 6% 26% / 100%), hsl(210deg 5% 88% / 100%));
+  --color-secondary-border: light-dark(hsl(240deg 5% 26% / 60%), hsl(210deg 4% 80% / 60%));
+  --color-secondary-focus-shadow:
+    0 0 0 4px color-mix(in srgb, var(--color-secondary) 15%, transparent), var(--shadow-sm);
+
+  /* Info */
+  --color-info: light-dark(hsl(200deg 90% 50% / 91%), hsl(200deg 90% 60% / 91%));
+  --color-info-backdrop: light-dark(hsl(200deg 90% 90% / 83%), hsl(200deg 50% 30% / 50%));
+  --color-info-content: light-dark(hsl(200deg 90% 15% / 91%), hsl(200deg 90% 75% / 91%));
+  --color-info-contrast: light-dark(hsl(200deg 90% 96% / 91%), hsl(200deg 90% 15% / 91%));
+  --color-info-focus: light-dark(hsl(200deg 90% 56% / 91%), hsl(200deg 90% 65% / 91%));
+  --color-info-border: light-dark(hsl(200deg 90% 56% / 60%), hsl(200deg 90% 65% / 60%));
+  --color-info-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--color-info) 15%, transparent), var(--shadow-sm);
+
+  /* Success */
+  --color-success: light-dark(hsl(168deg 76% 42% / 91%), hsl(168deg 76% 50% / 91%));
+  --color-success-backdrop: light-dark(hsl(168deg 76% 88% / 83%), hsl(168deg 40% 25% / 50%));
+  --color-success-content: light-dark(hsl(168deg 76% 15% / 91%), hsl(168deg 76% 70% / 91%));
+  --color-success-contrast: light-dark(hsl(168deg 76% 97% / 91%), hsl(168deg 76% 15% / 91%));
+  --color-success-focus: light-dark(hsl(168deg 76% 48% / 91%), hsl(168deg 76% 55% / 91%));
+  --color-success-border: light-dark(hsl(168deg 76% 48% / 60%), hsl(168deg 76% 55% / 60%));
+  --color-success-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 15%, transparent), var(--shadow-sm);
+
+  /* Warning */
+  --color-warning: light-dark(hsl(38deg 100% 52% / 91%), hsl(38deg 100% 60% / 91%));
+  --color-warning-backdrop: light-dark(hsl(38deg 100% 88% / 83%), hsl(38deg 50% 30% / 50%));
+  --color-warning-content: light-dark(hsl(38deg 100% 15% / 91%), hsl(38deg 100% 75% / 91%));
+  --color-warning-contrast: light-dark(hsl(38deg 100% 94% / 91%), hsl(38deg 100% 20% / 91%));
+  --color-warning-focus: light-dark(hsl(38deg 100% 58% / 91%), hsl(38deg 100% 65% / 91%));
+  --color-warning-border: light-dark(hsl(38deg 100% 58% / 60%), hsl(38deg 100% 65% / 60%));
+  --color-warning-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 15%, transparent), var(--shadow-sm);
+
+  /* Error */
+  --color-error: light-dark(hsl(8deg 90% 50% / 91%), hsl(8deg 90% 62% / 91%));
+  --color-error-backdrop: light-dark(hsl(8deg 90% 90% / 83%), hsl(8deg 50% 28% / 50%));
+  --color-error-content: light-dark(hsl(8deg 90% 15% / 91%), hsl(8deg 90% 80% / 91%));
+  --color-error-contrast: light-dark(hsl(8deg 90% 96% / 91%), hsl(8deg 90% 12% / 91%));
+  --color-error-focus: light-dark(hsl(8deg 90% 56% / 91%), hsl(8deg 90% 67% / 91%));
+  --color-error-border: light-dark(hsl(8deg 90% 56% / 60%), hsl(8deg 90% 67% / 60%));
+  --color-error-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--color-error) 15%, transparent), var(--shadow-sm);
+}
+
+/* ========================================
+   Reduced Motion
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-75: 0ms;
+    --duration-100: 0ms;
+    --duration-150: 0ms;
+    --duration-200: 0ms;
+    --duration-300: 0ms;
+    --duration-500: 0ms;
+    --duration-700: 0ms;
+    --duration-1000: 0ms;
+    --transition-fast: none;
+    --transition-normal: none;
+    --transition-slow: none;
+    --transition-slower: none;
+    --transition-spring: none;
+    --transition-all: none;
+  }
+}
+
+/* VitePress dark theme: force dark color-scheme so light-dark() resolves to dark values */
+html.dark {
+  color-scheme: dark;
+}
+
+/* VitePress light theme: force light color-scheme so light-dark() resolves to light values */
+html:not(.dark) {
+  color-scheme: light;
+}

package/dist/switch.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/index.cjs`),n=require(`./craftit/dist/labs/a11y.cjs`),r=require(`./craftit/dist/labs/selectable.cjs`);require(`./craftit/dist/labs.cjs`);const i=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const a=require(`./inputs/shared/composables/use-toggle-field.cjs`);require(`./inputs/shared/composables/index.cjs`);const o=require(`./inputs/shared/design-presets.cjs`),s=require(`./inputs/switch/switch.css?inline.cjs`);let c=require(`@vielzeug/craftit`);var l=(0,c.defineComponent)({formAssociated:!0,props:{checked:{default:!1},color:{default:void 0},disabled:{default:!1},error:{default:``},helper:{default:``},name:{default:``},size:{default:void 0},value:{default:`on`}},setup({emit:e,host:t,props:o,reflect:s}){let{checkedSignal:l,formCtx:u,triggerValidation:d}=a.useToggleField(o);i.mountFormContextSync(t,u,o);let f=r.t({checked:l,clearIndeterminateFirst:!1,disabled:o.disabled,onToggle:t=>{d(`change`),e(`change`,f.changePayload(t))},value:o.value}),p=n.r(t,{checked:()=>f.checked.value?`true`:`false`,helperText:()=>o.error.value||o.helper.value,helperTone:()=>o.error.value?`error`:`default`,invalid:()=>!!o.error.value,role:`switch`});return s({checked:()=>f.checked.value,classMap:()=>({"is-checked":f.checked.value,"is-disabled":!!o.disabled.value}),onClick:e=>f.toggle(e),onKeydown:e=>{let t=e;(t.key===` `||t.key===`Enter`)&&(t.preventDefault(),f.toggle(e))},tabindex:()=>o.disabled.value?void 0:0}),c.html`
+      <div class="switch-wrapper" part="switch">
+        <div class="switch-track" part="track">
+          <div class="switch-thumb" part="thumb"></div>
+        </div>
+      </div>
+      <span class="label" part="label" data-a11y-label id="${p.labelId}"><slot></slot></span>
+      <div
+        class="helper-text"
+        part="helper-text"
+        data-a11y-helper
+        id="${p.helperId}"
+        aria-live="polite"
+        hidden></div>
+    `},styles:[...t.formControlMixins,e.sizeVariantMixin(o.SWITCH_SIZE_PRESET),s.default],tag:`bit-switch`});exports.SWITCH_TAG=l;
+//# sourceMappingURL=switch.cjs.map

package/dist/switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { defineComponent, html } from '@vielzeug/craftit';\nimport { useA11yControl, createCheckableControl } from '@vielzeug/craftit/labs';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { formControlMixins, sizeVariantMixin } from '../../styles';\nimport { useToggleField } from '../shared/composables';\nimport { SWITCH_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport componentStyles from './switch.css?inline';\n\nexport type BitSwitchEvents = {\n  change: { checked: boolean; originalEvent?: Event; value: boolean };\n};\n\nexport type BitSwitchProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the switch */\n    helper?: string;\n  };\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element bit-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { value: boolean, checked: boolean, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n */\nexport const SWITCH_TAG = defineComponent<BitSwitchProps, BitSwitchEvents>({\n  formAssociated: true,\n  props: {\n    checked: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    name: { default: '' },\n    size: { default: undefined },\n    value: { default: 'on' },\n  },\n  setup({ emit, host, props, reflect }) {\n    const { checkedSignal, formCtx, triggerValidation } = useToggleField(props);\n\n    mountFormContextSync(host, formCtx, props);\n\n    // Pass writable checkedSignal directly — toggle() mutates it in place\n    const control = createCheckableControl({\n      checked: checkedSignal,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      onToggle: (e) => {\n        triggerValidation('change');\n        emit('change', control.changePayload(e));\n      },\n      value: props.value,\n    });\n\n    const a11y = useA11yControl(host, {\n      checked: () => (control.checked.value ? 'true' : 'false'),\n      helperText: () => props.error.value || props.helper.value,\n      helperTone: () => (props.error.value ? 'error' : 'default'),\n      invalid: () => !!props.error.value,\n      role: 'switch',\n    });\n\n    reflect({\n      checked: () => control.checked.value,\n      classMap: () => ({\n        'is-checked': control.checked.value,\n        'is-disabled': !!props.disabled.value,\n      }),\n      onClick: (e: Event) => control.toggle(e),\n      onKeydown: (e: Event) => {\n        const ke = e as KeyboardEvent;\n\n        if (ke.key === ' ' || ke.key === 'Enter') {\n          ke.preventDefault();\n          control.toggle(e);\n        }\n      },\n      tabindex: () => (props.disabled.value ? undefined : 0),\n    });\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, sizeVariantMixin(SWITCH_SIZE_PRESET), componentStyles],\n  tag: 'bit-switch',\n});\n"],"mappings":"6nBAiDA,IAAa,GAAA,EAAA,EAAA,iBAA8D,CACzE,eAAgB,GAChB,MAAO,CACL,QAAS,CAAE,QAAS,GAAO,CAC3B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,GAAI,CACtB,OAAQ,CAAE,QAAS,GAAI,CACvB,KAAM,CAAE,QAAS,GAAI,CACrB,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,MAAO,CAAE,QAAS,KAAM,CACzB,CACD,MAAM,CAAE,OAAM,OAAM,QAAO,WAAW,CACpC,GAAM,CAAE,gBAAe,UAAS,qBAAsB,EAAA,eAAe,EAAM,CAE3E,EAAA,qBAAqB,EAAM,EAAS,EAAM,CAG1C,IAAM,EAAU,EAAA,EAAuB,CACrC,QAAS,EACT,wBAAyB,GACzB,SAAU,EAAM,SAChB,SAAW,GAAM,CACf,EAAkB,SAAS,CAC3B,EAAK,SAAU,EAAQ,cAAc,EAAE,CAAC,EAE1C,MAAO,EAAM,MACd,CAAC,CAEI,EAAO,EAAA,EAAe,EAAM,CAChC,YAAgB,EAAQ,QAAQ,MAAQ,OAAS,QACjD,eAAkB,EAAM,MAAM,OAAS,EAAM,OAAO,MACpD,eAAmB,EAAM,MAAM,MAAQ,QAAU,UACjD,YAAe,CAAC,CAAC,EAAM,MAAM,MAC7B,KAAM,SACP,CAAC,CAoBF,OAlBA,EAAQ,CACN,YAAe,EAAQ,QAAQ,MAC/B,cAAiB,CACf,aAAc,EAAQ,QAAQ,MAC9B,cAAe,CAAC,CAAC,EAAM,SAAS,MACjC,EACD,QAAU,GAAa,EAAQ,OAAO,EAAE,CACxC,UAAY,GAAa,CACvB,IAAM,EAAK,GAEP,EAAG,MAAQ,KAAO,EAAG,MAAQ,WAC/B,EAAG,gBAAgB,CACnB,EAAQ,OAAO,EAAE,GAGrB,aAAiB,EAAM,SAAS,MAAQ,IAAA,GAAY,EACrD,CAAC,CAEK,EAAA,IAAI;;;;;;6DAM8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;OAK1B,OAAQ,CAAC,GAAG,EAAA,kBAAmB,EAAA,iBAAiB,EAAA,mBAAmB,CAAE,EAAA,QAAgB,CACrF,IAAK,aACN,CAAC"}

package/dist/switch.js

@@ -0,0 +1,82 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { formControlMixins as t } from "./styles/index.js";
+import { r as n } from "./craftit/dist/labs/a11y.js";
+import { t as r } from "./craftit/dist/labs/selectable.js";
+import "./craftit/dist/labs.js";
+import { mountFormContextSync as i } from "./inputs/shared/dom-sync/form-context.js";
+import "./inputs/shared/dom-sync/index.js";
+import { useToggleField as a } from "./inputs/shared/composables/use-toggle-field.js";
+import "./inputs/shared/composables/index.js";
+import { SWITCH_SIZE_PRESET as o } from "./inputs/shared/design-presets.js";
+import s from "./inputs/switch/switch.css?inline.js";
+import { defineComponent as c, html as l } from "@vielzeug/craftit";
+//#region src/inputs/switch/switch.ts
+var u = c({
+	formAssociated: !0,
+	props: {
+		checked: { default: !1 },
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		error: { default: "" },
+		helper: { default: "" },
+		name: { default: "" },
+		size: { default: void 0 },
+		value: { default: "on" }
+	},
+	setup({ emit: e, host: t, props: o, reflect: s }) {
+		let { checkedSignal: c, formCtx: u, triggerValidation: d } = a(o);
+		i(t, u, o);
+		let f = r({
+			checked: c,
+			clearIndeterminateFirst: !1,
+			disabled: o.disabled,
+			onToggle: (t) => {
+				d("change"), e("change", f.changePayload(t));
+			},
+			value: o.value
+		}), p = n(t, {
+			checked: () => f.checked.value ? "true" : "false",
+			helperText: () => o.error.value || o.helper.value,
+			helperTone: () => o.error.value ? "error" : "default",
+			invalid: () => !!o.error.value,
+			role: "switch"
+		});
+		return s({
+			checked: () => f.checked.value,
+			classMap: () => ({
+				"is-checked": f.checked.value,
+				"is-disabled": !!o.disabled.value
+			}),
+			onClick: (e) => f.toggle(e),
+			onKeydown: (e) => {
+				let t = e;
+				(t.key === " " || t.key === "Enter") && (t.preventDefault(), f.toggle(e));
+			},
+			tabindex: () => o.disabled.value ? void 0 : 0
+		}), l`
+      <div class="switch-wrapper" part="switch">
+        <div class="switch-track" part="track">
+          <div class="switch-thumb" part="thumb"></div>
+        </div>
+      </div>
+      <span class="label" part="label" data-a11y-label id="${p.labelId}"><slot></slot></span>
+      <div
+        class="helper-text"
+        part="helper-text"
+        data-a11y-helper
+        id="${p.helperId}"
+        aria-live="polite"
+        hidden></div>
+    `;
+	},
+	styles: [
+		...t,
+		e(o),
+		s
+	],
+	tag: "bit-switch"
+});
+//#endregion
+export { u as SWITCH_TAG };
+
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { defineComponent, html } from '@vielzeug/craftit';\nimport { useA11yControl, createCheckableControl } from '@vielzeug/craftit/labs';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { formControlMixins, sizeVariantMixin } from '../../styles';\nimport { useToggleField } from '../shared/composables';\nimport { SWITCH_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport componentStyles from './switch.css?inline';\n\nexport type BitSwitchEvents = {\n  change: { checked: boolean; originalEvent?: Event; value: boolean };\n};\n\nexport type BitSwitchProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the switch */\n    helper?: string;\n  };\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element bit-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { value: boolean, checked: boolean, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n */\nexport const SWITCH_TAG = defineComponent<BitSwitchProps, BitSwitchEvents>({\n  formAssociated: true,\n  props: {\n    checked: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    name: { default: '' },\n    size: { default: undefined },\n    value: { default: 'on' },\n  },\n  setup({ emit, host, props, reflect }) {\n    const { checkedSignal, formCtx, triggerValidation } = useToggleField(props);\n\n    mountFormContextSync(host, formCtx, props);\n\n    // Pass writable checkedSignal directly — toggle() mutates it in place\n    const control = createCheckableControl({\n      checked: checkedSignal,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      onToggle: (e) => {\n        triggerValidation('change');\n        emit('change', control.changePayload(e));\n      },\n      value: props.value,\n    });\n\n    const a11y = useA11yControl(host, {\n      checked: () => (control.checked.value ? 'true' : 'false'),\n      helperText: () => props.error.value || props.helper.value,\n      helperTone: () => (props.error.value ? 'error' : 'default'),\n      invalid: () => !!props.error.value,\n      role: 'switch',\n    });\n\n    reflect({\n      checked: () => control.checked.value,\n      classMap: () => ({\n        'is-checked': control.checked.value,\n        'is-disabled': !!props.disabled.value,\n      }),\n      onClick: (e: Event) => control.toggle(e),\n      onKeydown: (e: Event) => {\n        const ke = e as KeyboardEvent;\n\n        if (ke.key === ' ' || ke.key === 'Enter') {\n          ke.preventDefault();\n          control.toggle(e);\n        }\n      },\n      tabindex: () => (props.disabled.value ? undefined : 0),\n    });\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, sizeVariantMixin(SWITCH_SIZE_PRESET), componentStyles],\n  tag: 'bit-switch',\n});\n"],"mappings":";;;;;;;;;;;;;AAiDA,IAAa,IAAa,EAAiD;CACzE,gBAAgB;CAChB,OAAO;EACL,SAAS,EAAE,SAAS,IAAO;EAC3B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,UAAU,EAAE,SAAS,IAAO;EAC5B,OAAO,EAAE,SAAS,IAAI;EACtB,QAAQ,EAAE,SAAS,IAAI;EACvB,MAAM,EAAE,SAAS,IAAI;EACrB,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,OAAO,EAAE,SAAS,MAAM;EACzB;CACD,MAAM,EAAE,SAAM,SAAM,UAAO,cAAW;EACpC,IAAM,EAAE,kBAAe,YAAS,yBAAsB,EAAe,EAAM;AAE3E,IAAqB,GAAM,GAAS,EAAM;EAG1C,IAAM,IAAU,EAAuB;GACrC,SAAS;GACT,yBAAyB;GACzB,UAAU,EAAM;GAChB,WAAW,MAAM;AAEf,IADA,EAAkB,SAAS,EAC3B,EAAK,UAAU,EAAQ,cAAc,EAAE,CAAC;;GAE1C,OAAO,EAAM;GACd,CAAC,EAEI,IAAO,EAAe,GAAM;GAChC,eAAgB,EAAQ,QAAQ,QAAQ,SAAS;GACjD,kBAAkB,EAAM,MAAM,SAAS,EAAM,OAAO;GACpD,kBAAmB,EAAM,MAAM,QAAQ,UAAU;GACjD,eAAe,CAAC,CAAC,EAAM,MAAM;GAC7B,MAAM;GACP,CAAC;AAoBF,SAlBA,EAAQ;GACN,eAAe,EAAQ,QAAQ;GAC/B,iBAAiB;IACf,cAAc,EAAQ,QAAQ;IAC9B,eAAe,CAAC,CAAC,EAAM,SAAS;IACjC;GACD,UAAU,MAAa,EAAQ,OAAO,EAAE;GACxC,YAAY,MAAa;IACvB,IAAM,IAAK;AAEX,KAAI,EAAG,QAAQ,OAAO,EAAG,QAAQ,aAC/B,EAAG,gBAAgB,EACnB,EAAQ,OAAO,EAAE;;GAGrB,gBAAiB,EAAM,SAAS,QAAQ,KAAA,IAAY;GACrD,CAAC,EAEK,CAAI;;;;;;6DAM8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;;;CAK1B,QAAQ;EAAC,GAAG;EAAmB,EAAiB,EAAmB;EAAE;EAAgB;CACrF,KAAK;CACN,CAAC"}

package/dist/tab-item.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./tabs.cjs`),r=require(`./disclosure/tab-item/tab-item.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=(0,i.defineComponent)({props:{active:(0,i.typed)(!1),color:(0,i.typed)(void 0),disabled:(0,i.typed)(!1),size:(0,i.typed)(void 0),value:(0,i.typed)(``),variant:(0,i.typed)(void 0)},setup({host:e,props:t}){let r=(0,i.inject)(n.TABS_CTX,void 0);(0,i.syncContextProps)(r,t,[`color`,`size`,`variant`]);let a=r?(0,i.computed)(()=>!!r.value.value&&r.value.value===t.value.value):t.active;(0,i.effect)(()=>{e.toggleAttribute(`active`,a.value)});let o=(0,i.computed)(()=>String(a.value)),s=(0,i.computed)(()=>a.value?`0`:`-1`);return i.html`
+      <button
+        role="tab"
+        type="button"
+        part="tab"
+        :id="${()=>`tab-${t.value.value}`}"
+        :aria-selected=${o}
+        :tabindex=${s}
+        :aria-disabled=${(0,i.computed)(()=>String(t.disabled.value))}
+        :aria-controls="${()=>`tabpanel-${t.value.value}`}"
+        @click=${()=>{t.disabled.value||i.fire.custom(e,`click`,{detail:{value:t.value.value}})}}>
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </button>
+    `},styles:[t.colorThemeMixin,t.forcedColorsFocusMixin(`button`),e.coarsePointerMixin,r.default],tag:`bit-tab-item`});exports.TAB_ITEM_TAG=a;
+//# sourceMappingURL=tab-item.cjs.map

package/dist/tab-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item.cjs","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { computed, defineComponent, effect, fire, html, typed, inject, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type BitTabItemProps = {\n  /** Whether this tab is currently selected (set by bit-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from bit-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from bit-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a bit-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from bit-tabs) */\n  variant?: VisualVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`.\n *\n * @element bit-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding bit-tab-panel value\n * @attr {boolean} active - Set by the parent bit-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from bit-tabs\n * @attr {string} color - Inherited from bit-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @example\n * ```html\n * <bit-tab-item slot=\"tabs\" value=\"overview\">Overview</bit-tab-item>\n * <bit-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</bit-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = defineComponent<BitTabItemProps>({\n  props: {\n    active: typed<boolean>(false),\n    color: typed<BitTabItemProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    size: typed<BitTabItemProps['size']>(undefined),\n    value: typed<string>(''),\n    variant: typed<BitTabItemProps['variant']>(undefined),\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n\n    syncContextProps(tabsCtx, props, ['color', 'size', 'variant']);\n\n    const isActive = tabsCtx\n      ? computed(() => !!tabsCtx.value.value && tabsCtx.value.value === props.value.value)\n      : props.active;\n\n    effect(() => {\n      host.toggleAttribute('active', isActive.value);\n    });\n\n    const ariaSelected = computed(() => String(isActive.value));\n    const tabIndex = computed(() => (isActive.value ? '0' : '-1'));\n    const handleClick = () => {\n      if (props.disabled.value) return;\n\n      fire.custom(host, 'click', {\n        detail: { value: props.value.value },\n      });\n    };\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${() => `tab-${props.value.value}`}\"\n        :aria-selected=${ariaSelected}\n        :tabindex=${tabIndex}\n        :aria-disabled=${computed(() => String(props.disabled.value))}\n        :aria-controls=\"${() => `tabpanel-${props.value.value}`}\"\n        @click=${handleClick}>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n  tag: 'bit-tab-item',\n});\n"],"mappings":"iUA6CA,IAAa,GAAA,EAAA,EAAA,iBAAgD,CAC3D,MAAO,CACL,QAAA,EAAA,EAAA,OAAuB,GAAM,CAC7B,OAAA,EAAA,EAAA,OAAuC,IAAA,GAAU,CACjD,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,MAAA,EAAA,EAAA,OAAqC,IAAA,GAAU,CAC/C,OAAA,EAAA,EAAA,OAAqB,GAAG,CACxB,SAAA,EAAA,EAAA,OAA2C,IAAA,GAAU,CACtD,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,EAE3C,EAAA,EAAA,kBAAiB,EAAS,EAAO,CAAC,QAAS,OAAQ,UAAU,CAAC,CAE9D,IAAM,EAAW,GAAA,EAAA,EAAA,cACE,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAM,CAClF,EAAM,QAEV,EAAA,EAAA,YAAa,CACX,EAAK,gBAAgB,SAAU,EAAS,MAAM,EAC9C,CAEF,IAAM,GAAA,EAAA,EAAA,cAA8B,OAAO,EAAS,MAAM,CAAC,CACrD,GAAA,EAAA,EAAA,cAA2B,EAAS,MAAQ,IAAM,KAAM,CAS9D,MAAO,GAAA,IAAI;;;;;mBAKM,OAAO,EAAM,MAAM,QAAQ;yBACvB,EAAa;oBAClB,EAAS;4CACW,OAAO,EAAM,SAAS,MAAM,CAAC,CAAC;8BACtC,YAAY,EAAM,MAAM,QAAQ;qBAjBlC,CACpB,EAAM,SAAS,OAEnB,EAAA,KAAK,OAAO,EAAM,QAAS,CACzB,OAAQ,CAAE,MAAO,EAAM,MAAM,MAAO,CACrC,CAAC,EAaqB;;;;;OAO3B,OAAQ,CAAC,EAAA,gBAAiB,EAAA,uBAAuB,SAAS,CAAE,EAAA,mBAAoB,EAAA,QAAO,CACvF,IAAK,eACN,CAAC"}