@signalwire/web-components 4.0.0-beta.9 → 4.0.0-dev-20260515133934

package/dist/theme.css

@@ -0,0 +1,451 @@
+/* SignalWire Design System - Auto-generated from signalwire-tokens.dtcg.json */
+/* Variable names use the prefix-map from the DTCG. */
+/* Do not edit manually. Run: python3 build_design.py */
+
+:root {
+  --sw-blue: #044EF4;
+  --sw-fuchsia: #F72A72;
+  --sw-turquoise: #40E0D0;
+  --sw-gold: #FFD700;
+  --sw-purple: #601BE6;
+  --sw-light-bg: #FAFBFC;
+  --type-family-heading: 'Instrument Sans', sans-serif;
+  --type-family-body: 'Lexend', sans-serif;
+  --type-family-code: 'JetBrains Mono', monospace;
+  --type-size-h1: clamp(2rem, 4.5vw, 3.25rem);
+  --type-size-h2: clamp(1.375rem, 3vw, 2rem);
+  --type-size-h3: clamp(1.125rem, 2vw, 1.375rem);
+  --type-size-body: 16px;
+  --type-size-small: 14px;
+  --type-size-caption: 13px;
+  --type-size-code: 14px;
+  --type-weight-heading: 700;
+  --type-weight-body: 400;
+  --type-weight-medium: 500;
+  --type-weight-semibold: 600;
+  --type-line-height-body: 1.7;
+  --type-line-height-heading: 1.2;
+  --type-line-height-code: 1.75;
+  --type-letter-spacing-heading: -0.02em;
+  --type-letter-spacing-eyebrow: 0.14em;
+  --type-prose-body: 20px;
+  --type-prose-body-small: 18px;
+  --type-prose-h1: clamp(1.75rem, 3.5vw, 2.5rem);
+  --type-prose-h2: clamp(1.375rem, 2.5vw, 1.75rem);
+  --type-prose-h3: clamp(1.125rem, 2vw, 1.375rem);
+  --type-prose-code: 17px;
+  --type-prose-line-height: 1.8;
+  --type-prose-measure: 75%;
+  --type-prose-measure-mobile: 92%;
+  --sp-0: 0;
+  --sp-1: 0.25rem;
+  --sp-2: 0.5rem;
+  --sp-3: 0.75rem;
+  --sp-4: 1rem;
+  --sp-5: 1.25rem;
+  --sp-6: 1.5rem;
+  --sp-8: 2rem;
+  --sp-10: 2.5rem;
+  --sp-12: 3rem;
+  --sp-16: 4rem;
+  --sp-18: 4.5rem;
+  --sp-20: 5rem;
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-full: 100px;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.25s ease;
+  --animation-reveal-duration: 0.5s;
+  --animation-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
+  --animation-gradient-duration: 6s;
+  --backgrounds-dots: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
+  --backgrounds-grid: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+  --backgrounds-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+  --backgrounds-hex: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15Z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
+  --backgrounds-diagonal: repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,0.02) 28px, rgba(255,255,255,0.02) 29px);
+  --backgrounds-orbs: radial-gradient(ellipse 600px 400px at 15% 20%, rgba(4,78,244,0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 85% 70%, rgba(247,42,114,0.06) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(96,27,230,0.05) 0%, transparent 70%);
+  --backgrounds-rings: radial-gradient(circle 300px at 25% 35%, transparent 60%, rgba(4,78,244,0.04) 60%, rgba(4,78,244,0.04) 61%, transparent 61%), radial-gradient(circle 200px at 75% 60%, transparent 60%, rgba(247,42,114,0.03) 60%, rgba(247,42,114,0.03) 61%, transparent 61%), radial-gradient(circle 250px at 50% 80%, transparent 60%, rgba(96,27,230,0.03) 60%, rgba(96,27,230,0.03) 61%, transparent 61%);
+  --z-index-base: 1;
+  --z-index-navbar: 100;
+  --z-index-overlay: 200;
+  --z-index-modal: 300;
+  --breakpoint-sm: 400px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1080px;
+  --container-max-width: 1080px;
+  --container-padding: 2rem;
+  --container-padding-mobile: 1.25rem;
+  --tok-string: #40E0D0;
+  --tok-keyword: #6e9eff;
+  --tok-property: #ffffff;
+  --tok-operator: #FFD700;
+  --tok-comment: #898995;
+  --tok-number: #ff6da0;
+  --tok-function: #40E0D0;
+  --tok-value: #d4d4d8;
+  --tok-decorator: #6e9eff;
+  --tok-type: #ff6da0;
+  --fill-blue: #044EF4;
+  --fill-fuchsia: #F72A72;
+  --fill-turquoise: #40E0D0;
+  --fill-gold: #FFD700;
+  --cb-bg: #1e1e1f;
+  --cb-fg: #d4d4d8;
+  --cb-border: rgba(255, 255, 255, 0.07);
+  --cb-label: #73737e;
+  --cb-tab-default: #73737e;
+  --cb-tab-hover: #e8e8ec;
+  --cb-tab-active: #40E0D0;
+}
+
+:root, [data-theme='dark'] {
+  --sw-white: #ffffff;
+  --sw-gray-50: #f5f5f7;
+  --sw-gray-100: #e8e8ec;
+  --sw-gray-200: #c8c8cf;
+  --sw-gray-300: #a0a0aa;
+  --sw-gray-400: #73737e;
+  --sw-gray-500: #333333;
+  --sw-gray-600: #262630;
+  --sw-gray-700: #1a1a2e;
+  --sw-gray-800: #15152a;
+  --sw-gray-900: #111118;
+  --sw-black: #0a0a12;
+  --bg-page: #0e0e18;
+  --bg-surface: #181a28;
+  --bg-surface-raised: #222436;
+  --bg-overlay: rgba(14, 14, 24, 0.94);
+  --bg-subtle: rgba(255, 255, 255, 0.03);
+  --bg-gradient: linear-gradient(135deg, #0a0a12 0%, #0e1028 35%, #0c2060 100%);
+  --bg-gradient-slide: linear-gradient(90deg, #010915 0%, #102A4A 45%, #274A83 100%);
+  --fg-default: #f0f0f4;
+  --fg-secondary: #e8e8ec;
+  --fg-muted: #a0a0aa;
+  --fg-subtle: #73737e;
+  --fg-on-color: #ffffff;
+  --fg-on-gold: #0a0a12;
+  --fg-headings: #f0f0f4;
+  --fg-emphasis: #40E0D0;
+  --fg-emphasis-small: #40E0D0;
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-strong: rgba(255, 255, 255, 0.15);
+  --code-bg: rgba(255, 255, 255, 0.06);
+  --code-fg: #40E0D0;
+  --badge-bg: rgb(23, 14, 23);
+  --badge-border: rgba(255, 255, 255, 0.2);
+  --badge-text-fuchsia: #ff5a9e;
+  --badge-text-blue: #7aabff;
+  --badge-text-turquoise: #6aeee0;
+  --badge-text-gold: #ffe44d;
+  --callout-info-bg: rgba(4, 78, 244, 0.06);
+  --callout-info-border: rgba(4, 78, 244, 0.18);
+  --callout-warn-bg: rgba(255, 215, 0, 0.04);
+  --callout-warn-border: rgba(255, 215, 0, 0.16);
+  --callout-danger-bg: rgba(247, 42, 114, 0.06);
+  --callout-danger-border: rgba(247, 42, 114, 0.18);
+  --callout-success-bg: rgba(64, 224, 208, 0.06);
+  --callout-success-border: rgba(64, 224, 208, 0.18);
+  --litbar-fuchsia-glow: 0 0 8px 1px rgba(247, 42, 114, 0.4), 0 0 30px 4px rgba(247, 42, 114, 0.12);
+  --litbar-fuchsia-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, 0.06) 0%, transparent 100%);
+  --litbar-blue-glow: 0 0 8px 1px rgba(4, 78, 244, 0.5), 0 0 30px 4px rgba(4, 78, 244, 0.12);
+  --litbar-blue-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, 0.07) 0%, transparent 100%);
+  --litbar-turquoise-glow: 0 0 8px 1px rgba(64, 224, 208, 0.35), 0 0 30px 4px rgba(64, 224, 208, 0.08);
+  --litbar-turquoise-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, 0.05) 0%, transparent 100%);
+  --litbar-gold-glow: 0 0 8px 1px rgba(255, 215, 0, 0.35), 0 0 30px 4px rgba(255, 215, 0, 0.08);
+  --litbar-gold-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, 0.04) 0%, transparent 100%);
+  --shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, 0.25);
+  --shadow-glow-fuchsia-soft: 0 4px 40px rgba(247, 42, 114, 0.08);
+  --shadow-glow-blue: 0 0 20px rgba(4, 78, 244, 0.25);
+  --shadow-glow-blue-soft: 0 4px 40px rgba(4, 78, 244, 0.08);
+  --shadow-glow-turquoise-soft: 0 4px 40px rgba(64, 224, 208, 0.06);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --interactive-button-primary-bg: #044EF4;
+  --interactive-button-primary-text: #ffffff;
+  --interactive-button-primary-hover: #0342cf;
+  --interactive-button-primary-active: #022da8;
+  --interactive-button-secondary-bg: transparent;
+  --interactive-button-secondary-text: #ffffff;
+  --interactive-button-secondary-border: rgba(255, 255, 255, 0.15);
+  --interactive-button-secondary-hover: rgba(255, 255, 255, 0.06);
+  --interactive-button-ghost-text: #e8e8ec;
+  --interactive-button-ghost-hover: rgba(255, 255, 255, 0.06);
+  --interactive-button-destructive-bg: #dc2626;
+  --interactive-button-destructive-text: #ffffff;
+  --interactive-button-destructive-hover: #b91c1c;
+  --interactive-button-disabled-bg: #333338;
+  --interactive-button-disabled-text: #73737e;
+  --interactive-input-bg: #2a2a2e;
+  --interactive-input-text: #ffffff;
+  --interactive-input-placeholder: #73737e;
+  --interactive-input-border: rgba(255, 255, 255, 0.15);
+  --interactive-input-border-focus: #044EF4;
+  --interactive-input-focus-ring: 0 0 0 3px rgba(4, 78, 244, 0.3);
+  --interactive-input-error-border: #ef4444;
+  --interactive-input-disabled-bg: #1e1e1f;
+  --interactive-input-disabled-text: #73737e;
+  --interactive-status-success: #22c55e;
+  --interactive-status-success-soft: rgba(34, 197, 94, 0.12);
+  --interactive-status-warning: #FFD700;
+  --interactive-status-warning-soft: rgba(255, 215, 0, 0.12);
+  --interactive-status-error: #ef4444;
+  --interactive-status-error-soft: rgba(239, 68, 68, 0.12);
+  --interactive-status-info: #044EF4;
+  --interactive-status-info-soft: rgba(4, 78, 244, 0.12);
+  --interactive-link-default: #40E0D0;
+  --interactive-link-hover: #F72A72;
+  --interactive-link-visited: #a0a0aa;
+  --interactive-toggle-track-off: #333338;
+  --interactive-toggle-track-on: #044EF4;
+  --interactive-toggle-thumb: #ffffff;
+  --interactive-skeleton-base: #2a2a2e;
+  --interactive-skeleton-shimmer: #333338;
+  --interactive-tooltip-bg: #ffffff;
+  --interactive-tooltip-text: #1e1e1f;
+  --interactive-dropdown-bg: #2a2a2e;
+  --interactive-dropdown-hover: #333338;
+  --interactive-dropdown-border: rgba(255, 255, 255, 0.15);
+  --interactive-dropdown-separator: rgba(255, 255, 255, 0.07);
+  --interactive-table-header-bg: transparent;
+  --interactive-table-header-text: #F72A72;
+  --interactive-table-row-hover: rgba(255, 255, 255, 0.03);
+  --interactive-table-border: rgba(255, 255, 255, 0.07);
+  --interactive-tab-default: #a0a0aa;
+  --interactive-tab-active: #40E0D0;
+  --interactive-tab-hover: #ffffff;
+  --interactive-tab-indicator: #044EF4;
+}
+
+[data-theme='light'] {
+  --sw-white: #ffffff;
+  --sw-gray-50: #F6F6F4;
+  --sw-gray-100: #ECECEA;
+  --sw-gray-200: #D4D4D2;
+  --sw-gray-300: #A8A8A6;
+  --sw-gray-400: #737371;
+  --sw-gray-500: #52524F;
+  --sw-gray-600: #3A3A38;
+  --sw-gray-700: #272725;
+  --sw-gray-800: #1A1A18;
+  --sw-black: #0D0D0C;
+  --bg-page: #FAFBFC;
+  --bg-surface: #F3F4F6;
+  --bg-surface-raised: #E8EAF0;
+  --bg-overlay: rgba(250, 251, 252, 0.94);
+  --bg-subtle: rgba(0, 0, 0, 0.02);
+  --fg-default: #1A1A18;
+  --fg-secondary: #3A3A38;
+  --fg-muted: #737371;
+  --fg-subtle: #A8A8A6;
+  --fg-on-color: #FAFBFC;
+  --fg-on-gold: #1A1A18;
+  --fg-headings: #070c2d;
+  --fg-emphasis: #F72A72;
+  --fg-emphasis-small: #AB0A42;
+  --border-default: rgba(0, 0, 0, 0.1);
+  --border-strong: rgba(0, 0, 0, 0.18);
+  --code-bg: rgba(0, 0, 0, 0.06);
+  --code-fg: #044EF4;
+  --badge-bg: #ECECEA;
+  --badge-border: rgba(0, 0, 0, 0.12);
+  --badge-text-fuchsia: #BE1758;
+  --badge-text-blue: #0340C0;
+  --badge-text-turquoise: #0A6E64;
+  --badge-text-gold: #6B5600;
+  --shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, 0.15);
+  --shadow-glow-fuchsia-soft: 0 4px 40px rgba(247, 42, 114, 0.05);
+  --shadow-glow-blue: 0 0 20px rgba(4, 78, 244, 0.15);
+  --shadow-glow-blue-soft: 0 4px 40px rgba(4, 78, 244, 0.05);
+  --shadow-glow-turquoise-soft: 0 4px 40px rgba(64, 224, 208, 0.04);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --callout-info-bg: rgba(4, 78, 244, 0.06);
+  --callout-info-border: rgba(4, 78, 244, 0.18);
+  --callout-warn-bg: rgba(255, 215, 0, 0.04);
+  --callout-warn-border: rgba(255, 215, 0, 0.16);
+  --callout-danger-bg: rgba(247, 42, 114, 0.06);
+  --callout-danger-border: rgba(247, 42, 114, 0.18);
+  --callout-success-bg: rgba(64, 224, 208, 0.06);
+  --callout-success-border: rgba(64, 224, 208, 0.18);
+  --litbar-fuchsia-glow: 0 0 8px 1px rgba(247, 42, 114, 0.4), 0 0 30px 4px rgba(247, 42, 114, 0.12);
+  --litbar-fuchsia-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, 0.06) 0%, transparent 100%);
+  --litbar-blue-glow: 0 0 8px 1px rgba(4, 78, 244, 0.5), 0 0 30px 4px rgba(4, 78, 244, 0.12);
+  --litbar-blue-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, 0.07) 0%, transparent 100%);
+  --litbar-turquoise-glow: 0 0 8px 1px rgba(64, 224, 208, 0.35), 0 0 30px 4px rgba(64, 224, 208, 0.08);
+  --litbar-turquoise-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, 0.05) 0%, transparent 100%);
+  --litbar-gold-glow: 0 0 8px 1px rgba(255, 215, 0, 0.35), 0 0 30px 4px rgba(255, 215, 0, 0.08);
+  --litbar-gold-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, 0.04) 0%, transparent 100%);
+  --interactive-button-primary-bg: #044EF4;
+  --interactive-button-primary-text: #ffffff;
+  --interactive-button-primary-hover: #0342cf;
+  --interactive-button-primary-active: #022da8;
+  --interactive-button-secondary-bg: transparent;
+  --interactive-button-secondary-text: #1E1D1B;
+  --interactive-button-secondary-border: rgba(0, 0, 0, 0.18);
+  --interactive-button-secondary-hover: rgba(0, 0, 0, 0.04);
+  --interactive-button-ghost-text: #3E3B37;
+  --interactive-button-ghost-hover: rgba(0, 0, 0, 0.04);
+  --interactive-button-destructive-bg: #dc2626;
+  --interactive-button-destructive-text: #ffffff;
+  --interactive-button-destructive-hover: #b91c1c;
+  --interactive-button-disabled-bg: #ECECEA;
+  --interactive-button-disabled-text: #A8A8A6;
+  --interactive-input-bg: #ffffff;
+  --interactive-input-text: #1A1A18;
+  --interactive-input-placeholder: #A8A8A6;
+  --interactive-input-border: rgba(0, 0, 0, 0.18);
+  --interactive-input-border-focus: #044EF4;
+  --interactive-input-focus-ring: 0 0 0 3px rgba(4, 78, 244, 0.2);
+  --interactive-input-error-border: #dc2626;
+  --interactive-input-disabled-bg: #F6F6F4;
+  --interactive-input-disabled-text: #A8A8A6;
+  --interactive-status-success: #16a34a;
+  --interactive-status-success-soft: rgba(22, 163, 74, 0.08);
+  --interactive-status-warning: #a16207;
+  --interactive-status-warning-soft: rgba(161, 98, 7, 0.08);
+  --interactive-status-error: #dc2626;
+  --interactive-status-error-soft: rgba(220, 38, 38, 0.08);
+  --interactive-status-info: #044EF4;
+  --interactive-status-info-soft: rgba(4, 78, 244, 0.08);
+  --interactive-link-default: #044EF4;
+  --interactive-link-hover: #F72A72;
+  --interactive-link-visited: #737371;
+  --interactive-toggle-track-off: #D4D4D2;
+  --interactive-toggle-track-on: #044EF4;
+  --interactive-toggle-thumb: #ffffff;
+  --interactive-skeleton-base: #F6F6F4;
+  --interactive-skeleton-shimmer: #ECECEA;
+  --interactive-tooltip-bg: #1A1A18;
+  --interactive-tooltip-text: #FBFBFA;
+  --interactive-dropdown-bg: #ffffff;
+  --interactive-dropdown-hover: #F6F6F4;
+  --interactive-dropdown-border: rgba(0, 0, 0, 0.1);
+  --interactive-dropdown-separator: rgba(0, 0, 0, 0.06);
+  --interactive-table-header-bg: #044EF4;
+  --interactive-table-header-text: #ffffff;
+  --interactive-table-row-hover: rgba(0, 0, 0, 0.02);
+  --interactive-table-border: rgba(0, 0, 0, 0.1);
+  --interactive-tab-default: #737371;
+  --interactive-tab-active: #F72A72;
+  --interactive-tab-hover: #1A1A18;
+  --interactive-tab-indicator: #044EF4;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    --sw-white: #ffffff;
+    --sw-gray-50: #F6F6F4;
+    --sw-gray-100: #ECECEA;
+    --sw-gray-200: #D4D4D2;
+    --sw-gray-300: #A8A8A6;
+    --sw-gray-400: #737371;
+    --sw-gray-500: #52524F;
+    --sw-gray-600: #3A3A38;
+    --sw-gray-700: #272725;
+    --sw-gray-800: #1A1A18;
+    --sw-black: #0D0D0C;
+    --bg-page: #FAFBFC;
+    --bg-surface: #F3F4F6;
+    --bg-surface-raised: #E8EAF0;
+    --bg-overlay: rgba(250, 251, 252, 0.94);
+    --bg-subtle: rgba(0, 0, 0, 0.02);
+    --fg-default: #1A1A18;
+    --fg-secondary: #3A3A38;
+    --fg-muted: #737371;
+    --fg-subtle: #A8A8A6;
+    --fg-on-color: #FAFBFC;
+    --fg-on-gold: #1A1A18;
+    --fg-headings: #070c2d;
+    --fg-emphasis: #F72A72;
+    --fg-emphasis-small: #AB0A42;
+    --border-default: rgba(0, 0, 0, 0.1);
+    --border-strong: rgba(0, 0, 0, 0.18);
+    --code-bg: rgba(0, 0, 0, 0.06);
+    --code-fg: #044EF4;
+    --badge-bg: #ECECEA;
+    --badge-border: rgba(0, 0, 0, 0.12);
+    --badge-text-fuchsia: #BE1758;
+    --badge-text-blue: #0340C0;
+    --badge-text-turquoise: #0A6E64;
+    --badge-text-gold: #6B5600;
+    --shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, 0.15);
+    --shadow-glow-fuchsia-soft: 0 4px 40px rgba(247, 42, 114, 0.05);
+    --shadow-glow-blue: 0 0 20px rgba(4, 78, 244, 0.15);
+    --shadow-glow-blue-soft: 0 4px 40px rgba(4, 78, 244, 0.05);
+    --shadow-glow-turquoise-soft: 0 4px 40px rgba(64, 224, 208, 0.04);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --callout-info-bg: rgba(4, 78, 244, 0.06);
+    --callout-info-border: rgba(4, 78, 244, 0.18);
+    --callout-warn-bg: rgba(255, 215, 0, 0.04);
+    --callout-warn-border: rgba(255, 215, 0, 0.16);
+    --callout-danger-bg: rgba(247, 42, 114, 0.06);
+    --callout-danger-border: rgba(247, 42, 114, 0.18);
+    --callout-success-bg: rgba(64, 224, 208, 0.06);
+    --callout-success-border: rgba(64, 224, 208, 0.18);
+    --litbar-fuchsia-glow: 0 0 8px 1px rgba(247, 42, 114, 0.4), 0 0 30px 4px rgba(247, 42, 114, 0.12);
+    --litbar-fuchsia-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, 0.06) 0%, transparent 100%);
+    --litbar-blue-glow: 0 0 8px 1px rgba(4, 78, 244, 0.5), 0 0 30px 4px rgba(4, 78, 244, 0.12);
+    --litbar-blue-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, 0.07) 0%, transparent 100%);
+    --litbar-turquoise-glow: 0 0 8px 1px rgba(64, 224, 208, 0.35), 0 0 30px 4px rgba(64, 224, 208, 0.08);
+    --litbar-turquoise-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, 0.05) 0%, transparent 100%);
+    --litbar-gold-glow: 0 0 8px 1px rgba(255, 215, 0, 0.35), 0 0 30px 4px rgba(255, 215, 0, 0.08);
+    --litbar-gold-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, 0.04) 0%, transparent 100%);
+    --interactive-button-primary-bg: #044EF4;
+    --interactive-button-primary-text: #ffffff;
+    --interactive-button-primary-hover: #0342cf;
+    --interactive-button-primary-active: #022da8;
+    --interactive-button-secondary-bg: transparent;
+    --interactive-button-secondary-text: #1E1D1B;
+    --interactive-button-secondary-border: rgba(0, 0, 0, 0.18);
+    --interactive-button-secondary-hover: rgba(0, 0, 0, 0.04);
+    --interactive-button-ghost-text: #3E3B37;
+    --interactive-button-ghost-hover: rgba(0, 0, 0, 0.04);
+    --interactive-button-destructive-bg: #dc2626;
+    --interactive-button-destructive-text: #ffffff;
+    --interactive-button-destructive-hover: #b91c1c;
+    --interactive-button-disabled-bg: #ECECEA;
+    --interactive-button-disabled-text: #A8A8A6;
+    --interactive-input-bg: #ffffff;
+    --interactive-input-text: #1A1A18;
+    --interactive-input-placeholder: #A8A8A6;
+    --interactive-input-border: rgba(0, 0, 0, 0.18);
+    --interactive-input-border-focus: #044EF4;
+    --interactive-input-focus-ring: 0 0 0 3px rgba(4, 78, 244, 0.2);
+    --interactive-input-error-border: #dc2626;
+    --interactive-input-disabled-bg: #F6F6F4;
+    --interactive-input-disabled-text: #A8A8A6;
+    --interactive-status-success: #16a34a;
+    --interactive-status-success-soft: rgba(22, 163, 74, 0.08);
+    --interactive-status-warning: #a16207;
+    --interactive-status-warning-soft: rgba(161, 98, 7, 0.08);
+    --interactive-status-error: #dc2626;
+    --interactive-status-error-soft: rgba(220, 38, 38, 0.08);
+    --interactive-status-info: #044EF4;
+    --interactive-status-info-soft: rgba(4, 78, 244, 0.08);
+    --interactive-link-default: #044EF4;
+    --interactive-link-hover: #F72A72;
+    --interactive-link-visited: #737371;
+    --interactive-toggle-track-off: #D4D4D2;
+    --interactive-toggle-track-on: #044EF4;
+    --interactive-toggle-thumb: #ffffff;
+    --interactive-skeleton-base: #F6F6F4;
+    --interactive-skeleton-shimmer: #ECECEA;
+    --interactive-tooltip-bg: #1A1A18;
+    --interactive-tooltip-text: #FBFBFA;
+    --interactive-dropdown-bg: #ffffff;
+    --interactive-dropdown-hover: #F6F6F4;
+    --interactive-dropdown-border: rgba(0, 0, 0, 0.1);
+    --interactive-dropdown-separator: rgba(0, 0, 0, 0.06);
+    --interactive-table-header-bg: #044EF4;
+    --interactive-table-header-text: #ffffff;
+    --interactive-table-row-hover: rgba(0, 0, 0, 0.02);
+    --interactive-table-border: rgba(0, 0, 0, 0.1);
+    --interactive-tab-default: #737371;
+    --interactive-tab-active: #F72A72;
+    --interactive-tab-hover: #1A1A18;
+    --interactive-tab-indicator: #044EF4;
+  }
+}

package/dist/theme.css.js

@@ -0,0 +1,5 @@
+const e = `:root{--sw-blue: #044EF4;--sw-fuchsia: #F72A72;--sw-turquoise: #40E0D0;--sw-gold: #FFD700;--sw-purple: #601BE6;--sw-light-bg: #FAFBFC;--type-family-heading: "Instrument Sans", sans-serif;--type-family-body: "Lexend", sans-serif;--type-family-code: "JetBrains Mono", monospace;--type-size-h1: clamp(2rem, 4.5vw, 3.25rem);--type-size-h2: clamp(1.375rem, 3vw, 2rem);--type-size-h3: clamp(1.125rem, 2vw, 1.375rem);--type-size-body: 16px;--type-size-small: 14px;--type-size-caption: 13px;--type-size-code: 14px;--type-weight-heading: 700;--type-weight-body: 400;--type-weight-medium: 500;--type-weight-semibold: 600;--type-line-height-body: 1.7;--type-line-height-heading: 1.2;--type-line-height-code: 1.75;--type-letter-spacing-heading: -.02em;--type-letter-spacing-eyebrow: .14em;--type-prose-body: 20px;--type-prose-body-small: 18px;--type-prose-h1: clamp(1.75rem, 3.5vw, 2.5rem);--type-prose-h2: clamp(1.375rem, 2.5vw, 1.75rem);--type-prose-h3: clamp(1.125rem, 2vw, 1.375rem);--type-prose-code: 17px;--type-prose-line-height: 1.8;--type-prose-measure: 75%;--type-prose-measure-mobile: 92%;--sp-0: 0;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-10: 2.5rem;--sp-12: 3rem;--sp-16: 4rem;--sp-18: 4.5rem;--sp-20: 5rem;--radius-none: 0;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 12px;--radius-full: 100px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .25s ease;--animation-reveal-duration: .5s;--animation-reveal-easing: cubic-bezier(.22, 1, .36, 1);--animation-gradient-duration: 6s;--backgrounds-dots: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);--backgrounds-grid: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);--backgrounds-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");--backgrounds-hex: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15Z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");--backgrounds-diagonal: repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,.02) 28px, rgba(255,255,255,.02) 29px);--backgrounds-orbs: radial-gradient(ellipse 600px 400px at 15% 20%, rgba(4,78,244,.08) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 85% 70%, rgba(247,42,114,.06) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(96,27,230,.05) 0%, transparent 70%);--backgrounds-rings: radial-gradient(circle 300px at 25% 35%, transparent 60%, rgba(4,78,244,.04) 60%, rgba(4,78,244,.04) 61%, transparent 61%), radial-gradient(circle 200px at 75% 60%, transparent 60%, rgba(247,42,114,.03) 60%, rgba(247,42,114,.03) 61%, transparent 61%), radial-gradient(circle 250px at 50% 80%, transparent 60%, rgba(96,27,230,.03) 60%, rgba(96,27,230,.03) 61%, transparent 61%);--z-index-base: 1;--z-index-navbar: 100;--z-index-overlay: 200;--z-index-modal: 300;--breakpoint-sm: 400px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1080px;--container-max-width: 1080px;--container-padding: 2rem;--container-padding-mobile: 1.25rem;--tok-string: #40E0D0;--tok-keyword: #6e9eff;--tok-property: #ffffff;--tok-operator: #FFD700;--tok-comment: #898995;--tok-number: #ff6da0;--tok-function: #40E0D0;--tok-value: #d4d4d8;--tok-decorator: #6e9eff;--tok-type: #ff6da0;--fill-blue: #044EF4;--fill-fuchsia: #F72A72;--fill-turquoise: #40E0D0;--fill-gold: #FFD700;--cb-bg: #1e1e1f;--cb-fg: #d4d4d8;--cb-border: rgba(255, 255, 255, .07);--cb-label: #73737e;--cb-tab-default: #73737e;--cb-tab-hover: #e8e8ec;--cb-tab-active: #40E0D0}:root,[data-theme=dark]{--sw-white: #ffffff;--sw-gray-50: #f5f5f7;--sw-gray-100: #e8e8ec;--sw-gray-200: #c8c8cf;--sw-gray-300: #a0a0aa;--sw-gray-400: #73737e;--sw-gray-500: #333333;--sw-gray-600: #262630;--sw-gray-700: #1a1a2e;--sw-gray-800: #15152a;--sw-gray-900: #111118;--sw-black: #0a0a12;--bg-page: #0e0e18;--bg-surface: #181a28;--bg-surface-raised: #222436;--bg-overlay: rgba(14, 14, 24, .94);--bg-subtle: rgba(255, 255, 255, .03);--bg-gradient: linear-gradient(135deg, #0a0a12 0%, #0e1028 35%, #0c2060 100%);--bg-gradient-slide: linear-gradient(90deg, #010915 0%, #102A4A 45%, #274A83 100%);--fg-default: #f0f0f4;--fg-secondary: #e8e8ec;--fg-muted: #a0a0aa;--fg-subtle: #73737e;--fg-on-color: #ffffff;--fg-on-gold: #0a0a12;--fg-headings: #f0f0f4;--fg-emphasis: #40E0D0;--fg-emphasis-small: #40E0D0;--border-default: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .15);--code-bg: rgba(255, 255, 255, .06);--code-fg: #40E0D0;--badge-bg: rgb(23, 14, 23);--badge-border: rgba(255, 255, 255, .2);--badge-text-fuchsia: #ff5a9e;--badge-text-blue: #7aabff;--badge-text-turquoise: #6aeee0;--badge-text-gold: #ffe44d;--callout-info-bg: rgba(4, 78, 244, .06);--callout-info-border: rgba(4, 78, 244, .18);--callout-warn-bg: rgba(255, 215, 0, .04);--callout-warn-border: rgba(255, 215, 0, .16);--callout-danger-bg: rgba(247, 42, 114, .06);--callout-danger-border: rgba(247, 42, 114, .18);--callout-success-bg: rgba(64, 224, 208, .06);--callout-success-border: rgba(64, 224, 208, .18);--litbar-fuchsia-glow: 0 0 8px 1px rgba(247, 42, 114, .4), 0 0 30px 4px rgba(247, 42, 114, .12);--litbar-fuchsia-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, .06) 0%, transparent 100%);--litbar-blue-glow: 0 0 8px 1px rgba(4, 78, 244, .5), 0 0 30px 4px rgba(4, 78, 244, .12);--litbar-blue-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, .07) 0%, transparent 100%);--litbar-turquoise-glow: 0 0 8px 1px rgba(64, 224, 208, .35), 0 0 30px 4px rgba(64, 224, 208, .08);--litbar-turquoise-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, .05) 0%, transparent 100%);--litbar-gold-glow: 0 0 8px 1px rgba(255, 215, 0, .35), 0 0 30px 4px rgba(255, 215, 0, .08);--litbar-gold-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, .04) 0%, transparent 100%);--shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, .25);--shadow-glow-fuchsia-soft: 0 4px 40px rgba(247, 42, 114, .08);--shadow-glow-blue: 0 0 20px rgba(4, 78, 244, .25);--shadow-glow-blue-soft: 0 4px 40px rgba(4, 78, 244, .08);--shadow-glow-turquoise-soft: 0 4px 40px rgba(64, 224, 208, .06);--shadow-md: 0 4px 16px rgba(0, 0, 0, .5);--interactive-button-primary-bg: #044EF4;--interactive-button-primary-text: #ffffff;--interactive-button-primary-hover: #0342cf;--interactive-button-primary-active: #022da8;--interactive-button-secondary-bg: transparent;--interactive-button-secondary-text: #ffffff;--interactive-button-secondary-border: rgba(255, 255, 255, .15);--interactive-button-secondary-hover: rgba(255, 255, 255, .06);--interactive-button-ghost-text: #e8e8ec;--interactive-button-ghost-hover: rgba(255, 255, 255, .06);--interactive-button-destructive-bg: #dc2626;--interactive-button-destructive-text: #ffffff;--interactive-button-destructive-hover: #b91c1c;--interactive-button-disabled-bg: #333338;--interactive-button-disabled-text: #73737e;--interactive-input-bg: #2a2a2e;--interactive-input-text: #ffffff;--interactive-input-placeholder: #73737e;--interactive-input-border: rgba(255, 255, 255, .15);--interactive-input-border-focus: #044EF4;--interactive-input-focus-ring: 0 0 0 3px rgba(4, 78, 244, .3);--interactive-input-error-border: #ef4444;--interactive-input-disabled-bg: #1e1e1f;--interactive-input-disabled-text: #73737e;--interactive-status-success: #22c55e;--interactive-status-success-soft: rgba(34, 197, 94, .12);--interactive-status-warning: #FFD700;--interactive-status-warning-soft: rgba(255, 215, 0, .12);--interactive-status-error: #ef4444;--interactive-status-error-soft: rgba(239, 68, 68, .12);--interactive-status-info: #044EF4;--interactive-status-info-soft: rgba(4, 78, 244, .12);--interactive-link-default: #40E0D0;--interactive-link-hover: #F72A72;--interactive-link-visited: #a0a0aa;--interactive-toggle-track-off: #333338;--interactive-toggle-track-on: #044EF4;--interactive-toggle-thumb: #ffffff;--interactive-skeleton-base: #2a2a2e;--interactive-skeleton-shimmer: #333338;--interactive-tooltip-bg: #ffffff;--interactive-tooltip-text: #1e1e1f;--interactive-dropdown-bg: #2a2a2e;--interactive-dropdown-hover: #333338;--interactive-dropdown-border: rgba(255, 255, 255, .15);--interactive-dropdown-separator: rgba(255, 255, 255, .07);--interactive-table-header-bg: transparent;--interactive-table-header-text: #F72A72;--interactive-table-row-hover: rgba(255, 255, 255, .03);--interactive-table-border: rgba(255, 255, 255, .07);--interactive-tab-default: #a0a0aa;--interactive-tab-active: #40E0D0;--interactive-tab-hover: #ffffff;--interactive-tab-indicator: #044EF4}[data-theme=light]{--sw-white: #ffffff;--sw-gray-50: #F6F6F4;--sw-gray-100: #ECECEA;--sw-gray-200: #D4D4D2;--sw-gray-300: #A8A8A6;--sw-gray-400: #737371;--sw-gray-500: #52524F;--sw-gray-600: #3A3A38;--sw-gray-700: #272725;--sw-gray-800: #1A1A18;--sw-black: #0D0D0C;--bg-page: #FAFBFC;--bg-surface: #F3F4F6;--bg-surface-raised: #E8EAF0;--bg-overlay: rgba(250, 251, 252, .94);--bg-subtle: rgba(0, 0, 0, .02);--fg-default: #1A1A18;--fg-secondary: #3A3A38;--fg-muted: #737371;--fg-subtle: #A8A8A6;--fg-on-color: #FAFBFC;--fg-on-gold: #1A1A18;--fg-headings: #070c2d;--fg-emphasis: #F72A72;--fg-emphasis-small: #AB0A42;--border-default: rgba(0, 0, 0, .1);--border-strong: rgba(0, 0, 0, .18);--code-bg: rgba(0, 0, 0, .06);--code-fg: #044EF4;--badge-bg: #ECECEA;--badge-border: rgba(0, 0, 0, .12);--badge-text-fuchsia: #BE1758;--badge-text-blue: #0340C0;--badge-text-turquoise: #0A6E64;--badge-text-gold: #6B5600;--shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, .15);--shadow-glow-fuchsia-soft: 0 4px 40px rgba(247, 42, 114, .05);--shadow-glow-blue: 0 0 20px rgba(4, 78, 244, .15);--shadow-glow-blue-soft: 0 4px 40px rgba(4, 78, 244, .05);--shadow-glow-turquoise-soft: 0 4px 40px rgba(64, 224, 208, .04);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--callout-info-bg: rgba(4, 78, 244, .06);--callout-info-border: rgba(4, 78, 244, .18);--callout-warn-bg: rgba(255, 215, 0, .04);--callout-warn-border: rgba(255, 215, 0, .16);--callout-danger-bg: rgba(247, 42, 114, .06);--callout-danger-border: rgba(247, 42, 114, .18);--callout-success-bg: rgba(64, 224, 208, .06);--callout-success-border: rgba(64, 224, 208, .18);--litbar-fuchsia-glow: 0 0 8px 1px rgba(247, 42, 114, .4), 0 0 30px 4px rgba(247, 42, 114, .12);--litbar-fuchsia-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, .06) 0%, transparent 100%);--litbar-blue-glow: 0 0 8px 1px rgba(4, 78, 244, .5), 0 0 30px 4px rgba(4, 78, 244, .12);--litbar-blue-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, .07) 0%, transparent 100%);--litbar-turquoise-glow: 0 0 8px 1px rgba(64, 224, 208, .35), 0 0 30px 4px rgba(64, 224, 208, .08);--litbar-turquoise-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, .05) 0%, transparent 100%);--litbar-gold-glow: 0 0 8px 1px rgba(255, 215, 0, .35), 0 0 30px 4px rgba(255, 215, 0, .08);--litbar-gold-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, .04) 0%, transparent 100%);--interactive-button-primary-bg: #044EF4;--interactive-button-primary-text: #ffffff;--interactive-button-primary-hover: #0342cf;--interactive-button-primary-active: #022da8;--interactive-button-secondary-bg: transparent;--interactive-button-secondary-text: #1E1D1B;--interactive-button-secondary-border: rgba(0, 0, 0, .18);--interactive-button-secondary-hover: rgba(0, 0, 0, .04);--interactive-button-ghost-text: #3E3B37;--interactive-button-ghost-hover: rgba(0, 0, 0, .04);--interactive-button-destructive-bg: #dc2626;--interactive-button-destructive-text: #ffffff;--interactive-button-destructive-hover: #b91c1c;--interactive-button-disabled-bg: #ECECEA;--interactive-button-disabled-text: #A8A8A6;--interactive-input-bg: #ffffff;--interactive-input-text: #1A1A18;--interactive-input-placeholder: #A8A8A6;--interactive-input-border: rgba(0, 0, 0, .18);--interactive-input-border-focus: #044EF4;--interactive-input-focus-ring: 0 0 0 3px rgba(4, 78, 244, .2);--interactive-input-error-border: #dc2626;--interactive-input-disabled-bg: #F6F6F4;--interactive-input-disabled-text: #A8A8A6;--interactive-status-success: #16a34a;--interactive-status-success-soft: rgba(22, 163, 74, .08);--interactive-status-warning: #a16207;--interactive-status-warning-soft: rgba(161, 98, 7, .08);--interactive-status-error: #dc2626;--interactive-status-error-soft: rgba(220, 38, 38, .08);--interactive-status-info: #044EF4;--interactive-status-info-soft: rgba(4, 78, 244, .08);--interactive-link-default: #044EF4;--interactive-link-hover: #F72A72;--interactive-link-visited: #737371;--interactive-toggle-track-off: #D4D4D2;--interactive-toggle-track-on: #044EF4;--interactive-toggle-thumb: #ffffff;--interactive-skeleton-base: #F6F6F4;--interactive-skeleton-shimmer: #ECECEA;--interactive-tooltip-bg: #1A1A18;--interactive-tooltip-text: #FBFBFA;--interactive-dropdown-bg: #ffffff;--interactive-dropdown-hover: #F6F6F4;--interactive-dropdown-border: rgba(0, 0, 0, .1);--interactive-dropdown-separator: rgba(0, 0, 0, .06);--interactive-table-header-bg: #044EF4;--interactive-table-header-text: #ffffff;--interactive-table-row-hover: rgba(0, 0, 0, .02);--interactive-table-border: rgba(0, 0, 0, .1);--interactive-tab-default: #737371;--interactive-tab-active: #F72A72;--interactive-tab-hover: #1A1A18;--interactive-tab-indicator: #044EF4}@media(prefers-color-scheme:light){:root:not([data-theme]){--sw-white: #ffffff;--sw-gray-50: #F6F6F4;--sw-gray-100: #ECECEA;--sw-gray-200: #D4D4D2;--sw-gray-300: #A8A8A6;--sw-gray-400: #737371;--sw-gray-500: #52524F;--sw-gray-600: #3A3A38;--sw-gray-700: #272725;--sw-gray-800: #1A1A18;--sw-black: #0D0D0C;--bg-page: #FAFBFC;--bg-surface: #F3F4F6;--bg-surface-raised: #E8EAF0;--bg-overlay: rgba(250, 251, 252, .94);--bg-subtle: rgba(0, 0, 0, .02);--fg-default: #1A1A18;--fg-secondary: #3A3A38;--fg-muted: #737371;--fg-subtle: #A8A8A6;--fg-on-color: #FAFBFC;--fg-on-gold: #1A1A18;--fg-headings: #070c2d;--fg-emphasis: #F72A72;--fg-emphasis-small: #AB0A42;--border-default: rgba(0, 0, 0, .1);--border-strong: rgba(0, 0, 0, .18);--code-bg: rgba(0, 0, 0, .06);--code-fg: #044EF4;--badge-bg: #ECECEA;--badge-border: rgba(0, 0, 0, .12);--badge-text-fuchsia: #BE1758;--badge-text-blue: #0340C0;--badge-text-turquoise: #0A6E64;--badge-text-gold: #6B5600;--shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, .15);--shadow-glow-fuchsia-soft: 0 4px 40px rgba(247, 42, 114, .05);--shadow-glow-blue: 0 0 20px rgba(4, 78, 244, .15);--shadow-glow-blue-soft: 0 4px 40px rgba(4, 78, 244, .05);--shadow-glow-turquoise-soft: 0 4px 40px rgba(64, 224, 208, .04);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--callout-info-bg: rgba(4, 78, 244, .06);--callout-info-border: rgba(4, 78, 244, .18);--callout-warn-bg: rgba(255, 215, 0, .04);--callout-warn-border: rgba(255, 215, 0, .16);--callout-danger-bg: rgba(247, 42, 114, .06);--callout-danger-border: rgba(247, 42, 114, .18);--callout-success-bg: rgba(64, 224, 208, .06);--callout-success-border: rgba(64, 224, 208, .18);--litbar-fuchsia-glow: 0 0 8px 1px rgba(247, 42, 114, .4), 0 0 30px 4px rgba(247, 42, 114, .12);--litbar-fuchsia-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, .06) 0%, transparent 100%);--litbar-blue-glow: 0 0 8px 1px rgba(4, 78, 244, .5), 0 0 30px 4px rgba(4, 78, 244, .12);--litbar-blue-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, .07) 0%, transparent 100%);--litbar-turquoise-glow: 0 0 8px 1px rgba(64, 224, 208, .35), 0 0 30px 4px rgba(64, 224, 208, .08);--litbar-turquoise-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, .05) 0%, transparent 100%);--litbar-gold-glow: 0 0 8px 1px rgba(255, 215, 0, .35), 0 0 30px 4px rgba(255, 215, 0, .08);--litbar-gold-cone: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, .04) 0%, transparent 100%);--interactive-button-primary-bg: #044EF4;--interactive-button-primary-text: #ffffff;--interactive-button-primary-hover: #0342cf;--interactive-button-primary-active: #022da8;--interactive-button-secondary-bg: transparent;--interactive-button-secondary-text: #1E1D1B;--interactive-button-secondary-border: rgba(0, 0, 0, .18);--interactive-button-secondary-hover: rgba(0, 0, 0, .04);--interactive-button-ghost-text: #3E3B37;--interactive-button-ghost-hover: rgba(0, 0, 0, .04);--interactive-button-destructive-bg: #dc2626;--interactive-button-destructive-text: #ffffff;--interactive-button-destructive-hover: #b91c1c;--interactive-button-disabled-bg: #ECECEA;--interactive-button-disabled-text: #A8A8A6;--interactive-input-bg: #ffffff;--interactive-input-text: #1A1A18;--interactive-input-placeholder: #A8A8A6;--interactive-input-border: rgba(0, 0, 0, .18);--interactive-input-border-focus: #044EF4;--interactive-input-focus-ring: 0 0 0 3px rgba(4, 78, 244, .2);--interactive-input-error-border: #dc2626;--interactive-input-disabled-bg: #F6F6F4;--interactive-input-disabled-text: #A8A8A6;--interactive-status-success: #16a34a;--interactive-status-success-soft: rgba(22, 163, 74, .08);--interactive-status-warning: #a16207;--interactive-status-warning-soft: rgba(161, 98, 7, .08);--interactive-status-error: #dc2626;--interactive-status-error-soft: rgba(220, 38, 38, .08);--interactive-status-info: #044EF4;--interactive-status-info-soft: rgba(4, 78, 244, .08);--interactive-link-default: #044EF4;--interactive-link-hover: #F72A72;--interactive-link-visited: #737371;--interactive-toggle-track-off: #D4D4D2;--interactive-toggle-track-on: #044EF4;--interactive-toggle-thumb: #ffffff;--interactive-skeleton-base: #F6F6F4;--interactive-skeleton-shimmer: #ECECEA;--interactive-tooltip-bg: #1A1A18;--interactive-tooltip-text: #FBFBFA;--interactive-dropdown-bg: #ffffff;--interactive-dropdown-hover: #F6F6F4;--interactive-dropdown-border: rgba(0, 0, 0, .1);--interactive-dropdown-separator: rgba(0, 0, 0, .06);--interactive-table-header-bg: #044EF4;--interactive-table-header-text: #ffffff;--interactive-table-row-hover: rgba(0, 0, 0, .02);--interactive-table-border: rgba(0, 0, 0, .1);--interactive-tab-default: #737371;--interactive-tab-active: #F72A72;--interactive-tab-hover: #1A1A18;--interactive-tab-indicator: #044EF4}}`;
+export {
+  e as default
+};
+//# sourceMappingURL=theme.css.js.map

package/dist/theme.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/index.d.ts

@@ -1,44 +1,20 @@
 /**
  * Type definitions for call-media components.
  *
- * Call and LayoutLayer types are imported from the SDK.
- * Other types are defined locally for web-component specific needs.
+ * Types are imported directly from the SDK to stay in sync.
  */
-import type { Observable } from 'rxjs';
-import type { Call, DeviceController, LayoutLayer } from '@signalwire/js';
-export type { Call, DeviceController, LayoutLayer };
+import type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer } from '@signalwire/js';
+export type { Call, CallParticipant, CallSelfParticipant, DeviceController, LayoutLayer };
+export type Participant = CallParticipant;
 /**
- * Type helper for accessing call.self with proper typing
- * The SDK's Call.self is typed as unknown for flexibility
- */
-export interface CallSelf {
-    id: string;
-}
-/**
- * Helper to safely get self ID from a Call
+ * Helper to safely get self ID from a Call.
+ * Call.self is typed as CallSelfParticipant | null.
  */
 export declare function getSelfId(call: Call | undefined): string | undefined;
 /**
- * Helper to cast participants from unknown[] to Participant[]
- * The SDK uses unknown[] for flexibility, but web-components knows the shape
+ * Type-safe cast for participants array.
+ * The SDK's Call.participants is typed as CallParticipant[], so this
+ * provides a semantic helper for web-components that receive unknown[].
  */
 export declare function castParticipants(participants: unknown[]): Participant[];
-/**
- * Participant interface for call participants
- * Web-component specific with optional methods
- */
-export interface Participant {
-    id: string;
-    name?: string;
-    name$?: Observable<string>;
-    audioMuted?: boolean;
-    audioMuted$?: Observable<boolean>;
-    videoMuted?: boolean;
-    videoMuted$?: Observable<boolean>;
-    mute?(): Promise<void>;
-    unmute?(): Promise<void>;
-    muteVideo?(): Promise<void>;
-    unmuteVideo?(): Promise<void>;
-    remove?(): Promise<void>;
-}
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG1E,YAAY,EAAE,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC;AAEpD;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGpE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,CAEvE;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,SAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,WAAW,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGhH,YAAY,EAAE,IAAI,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC;AAG1F,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEpE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,CAEvE"}

package/dist/utils/index.d.ts

@@ -1,3 +1,5 @@
 export * from './video.js';
 export * from './debounce.js';
+export * from './use-google-font.js';
+export * from './theme-loader.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC"}

package/dist/utils/prism.d.ts

@@ -0,0 +1,4 @@
+export declare function ensurePrismLang(lang: string): Promise<void>;
+/** Highlight `code` with Prism. Returns highlighted HTML, or the raw text if the grammar is unknown. */
+export declare function highlight(code: string, language: string): Promise<string>;
+//# sourceMappingURL=prism.d.ts.map

package/dist/utils/prism.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism.d.ts","sourceRoot":"","sources":["../../src/utils/prism.ts"],"names":[],"mappings":"AA4BA,wBAAsB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYjE;AAED,wGAAwG;AACxG,wBAAsB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAM/E"}

package/dist/utils/prism.js

@@ -0,0 +1,34 @@
+let e = null;
+const n = () => e ?? (e = import("../_virtual/prism.js").then((t) => t.p)), m = {
+  javascript: () => import("../node_modules/prismjs/components/prism-javascript.js"),
+  typescript: () => import("../_virtual/prism-typescript.js").then((t) => t.p),
+  python: () => import("../_virtual/prism-python.js").then((t) => t.p),
+  bash: () => import("../node_modules/prismjs/components/prism-bash.js"),
+  shell: () => import("../node_modules/prismjs/components/prism-bash.js"),
+  json: () => import("../node_modules/prismjs/components/prism-json.js"),
+  css: () => import("../node_modules/prismjs/components/prism-css.js"),
+  yaml: () => import("../node_modules/prismjs/components/prism-yaml.js"),
+  sql: () => import("../node_modules/prismjs/components/prism-sql.js"),
+  markdown: () => import("../node_modules/prismjs/components/prism-markdown.js")
+}, c = {
+  typescript: ["javascript"]
+}, a = /* @__PURE__ */ new Set();
+async function p(t) {
+  if (a.has(t)) return;
+  await n();
+  for (const i of c[t] ?? [])
+    await p(i);
+  const o = m[t];
+  o && (await o(), a.add(t));
+}
+async function h(t, o) {
+  const i = (o || "plaintext").toLowerCase();
+  await p(i);
+  const r = await n(), s = r.languages[i];
+  return s ? r.highlight(t, s, i) : t;
+}
+export {
+  p as ensurePrismLang,
+  h as highlight
+};
+//# sourceMappingURL=prism.js.map

package/dist/utils/prism.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism.js","sources":["../../src/utils/prism.ts"],"sourcesContent":["// Lazy-loaded Prism. The core and every language pack are loaded via\n// dynamic `import(...)`, so consumers that never call `highlight()` (and\n// downstream bundlers consuming the package barrel) don't pay for Prism.\n\ntype PrismNS = typeof import('prismjs');\n\nlet _prism: Promise<PrismNS> | null = null;\nconst getPrism = (): Promise<PrismNS> => (_prism ??= import('prismjs'));\n\nconst PRISM_LANGS: Record<string, () => Promise<unknown>> = {\n  javascript: () => import('prismjs/components/prism-javascript'),\n  typescript: () => import('prismjs/components/prism-typescript'),\n  python:     () => import('prismjs/components/prism-python'),\n  bash:       () => import('prismjs/components/prism-bash'),\n  shell:      () => import('prismjs/components/prism-bash'),\n  json:       () => import('prismjs/components/prism-json'),\n  css:        () => import('prismjs/components/prism-css'),\n  yaml:       () => import('prismjs/components/prism-yaml'),\n  sql:        () => import('prismjs/components/prism-sql'),\n  markdown:   () => import('prismjs/components/prism-markdown'),\n};\n\nconst PRISM_DEPS: Partial<Record<string, string[]>> = {\n  typescript: ['javascript'],\n};\n\nconst _loaded = new Set<string>();\n\nexport async function ensurePrismLang(lang: string): Promise<void> {\n  if (_loaded.has(lang)) return;\n  // Core must be resolved before any language pack registers on it.\n  await getPrism();\n  for (const dep of PRISM_DEPS[lang] ?? []) {\n    await ensurePrismLang(dep);\n  }\n  const loader = PRISM_LANGS[lang];\n  if (loader) {\n    await loader();\n    _loaded.add(lang);\n  }\n}\n\n/** Highlight `code` with Prism. Returns highlighted HTML, or the raw text if the grammar is unknown. */\nexport async function highlight(code: string, language: string): Promise<string> {\n  const lang = (language || 'plaintext').toLowerCase();\n  await ensurePrismLang(lang);\n  const Prism = await getPrism();\n  const grammar = Prism.languages[lang];\n  return grammar ? Prism.highlight(code, grammar, lang) : code;\n}\n"],"names":["_prism","getPrism","n","PRISM_LANGS","PRISM_DEPS","_loaded","ensurePrismLang","lang","dep","loader","highlight","code","language","Prism","grammar"],"mappings":"AAMA,IAAIA,IAAkC;AACtC,MAAMC,IAAW,MAAyBD,UAAW,OAAO,sBAAS,EAAA,KAAA,CAAAE,MAAAA,EAAA,CAAA,IAE/DC,IAAsD;AAAA,EAC1D,YAAY,MAAM,OAAO,wDAAqC;AAAA,EAC9D,YAAY,MAAM,OAAO,iCAAqC,EAAA,KAAA,CAAAD,MAAAA,EAAA,CAAA;AAAA,EAC9D,QAAY,MAAM,OAAO,6BAAiC,EAAA,KAAA,CAAAA,MAAAA,EAAA,CAAA;AAAA,EAC1D,MAAY,MAAM,OAAO,kDAA+B;AAAA,EACxD,OAAY,MAAM,OAAO,kDAA+B;AAAA,EACxD,MAAY,MAAM,OAAO,kDAA+B;AAAA,EACxD,KAAY,MAAM,OAAO,iDAA8B;AAAA,EACvD,MAAY,MAAM,OAAO,kDAA+B;AAAA,EACxD,KAAY,MAAM,OAAO,iDAA8B;AAAA,EACvD,UAAY,MAAM,OAAO,sDAAmC;AAC9D,GAEME,IAAgD;AAAA,EACpD,YAAY,CAAC,YAAY;AAC3B,GAEMC,wBAAc,IAAA;AAEpB,eAAsBC,EAAgBC,GAA6B;AACjE,MAAIF,EAAQ,IAAIE,CAAI,EAAG;AAEvB,QAAMN,EAAA;AACN,aAAWO,KAAOJ,EAAWG,CAAI,KAAK,CAAA;AACpC,UAAMD,EAAgBE,CAAG;AAE3B,QAAMC,IAASN,EAAYI,CAAI;AAC/B,EAAIE,MACF,MAAMA,EAAA,GACNJ,EAAQ,IAAIE,CAAI;AAEpB;AAGA,eAAsBG,EAAUC,GAAcC,GAAmC;AAC/E,QAAML,KAAQK,KAAY,aAAa,YAAA;AACvC,QAAMN,EAAgBC,CAAI;AAC1B,QAAMM,IAAQ,MAAMZ,EAAA,GACda,IAAUD,EAAM,UAAUN,CAAI;AACpC,SAAOO,IAAUD,EAAM,UAAUF,GAAMG,GAASP,CAAI,IAAII;AAC1D;"}

package/dist/utils/theme-loader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Inject the SignalWire design-token stylesheet into the document so all
+ * components — including those in shadow roots — can resolve `--bg-page`,
+ * `--fg-default`, `--interactive-button-primary-bg`, etc.
+ *
+ * Idempotent. Calling twice is a no-op.
+ */
+export declare function ensureSignalWireTheme(): void;
+/** Load the three SignalWire brand font families via Google Fonts. */
+export declare function ensureSignalWireFonts(): void;
+//# sourceMappingURL=theme-loader.d.ts.map

package/dist/utils/theme-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-loader.d.ts","sourceRoot":"","sources":["../../src/utils/theme-loader.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAO5C;AAED,sEAAsE;AACtE,wBAAgB,qBAAqB,IAAI,IAAI,CAI5C"}