@strands.gg/accui 2.17.66 → 2.19.1

package/dist/vue/ui/UiMegaMenu.vue.d.ts

@@ -1,3 +1,24 @@
+export interface MegaMenuPanelLink {
+    label: string;
+    href?: string;
+    description?: string;
+}
+export interface MegaMenuPanelGroup {
+    title?: string;
+    links: MegaMenuPanelLink[];
+}
+export interface MegaMenuItemConfig {
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    panel?: {
+        width?: 'auto' | 'full' | string;
+        columns?: 1 | 2 | 3 | 4;
+        gap?: 'sm' | 'md' | 'lg';
+        groups: MegaMenuPanelGroup[];
+    };
+}
 export interface UiMegaMenuProps {
     triggerMode?: 'hover' | 'click';
     closeDelay?: number;
@@ -7,6 +28,7 @@ export interface UiMegaMenuProps {
     maxWidth?: string;
     variant?: 'default' | 'transparent';
     mobileBreakpoint?: number;
+    items?: MegaMenuItemConfig[];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -26,9 +48,14 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<UiMegaMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<UiMegaMenuProps> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<UiMegaMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    navigate: (link: MegaMenuPanelLink) => any;
+}, string, import('vue').PublicProps, Readonly<UiMegaMenuProps> & Readonly<{
+    onNavigate?: (link: MegaMenuPanelLink) => any;
+}>, {
     variant: "default" | "transparent";
     maxWidth: string;
+    items: MegaMenuItemConfig[];
     sticky: boolean;
     triggerMode: "hover" | "click";
     closeDelay: number;

package/dist/vue/ui/UiRadioGroup.vue.d.ts

@@ -35,6 +35,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     variant: "default" | "card";
     size: "sm" | "md" | "lg";
     orientation: "horizontal" | "vertical";
+    options: RadioOption[];
     fieldId: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/vue/ui/UiTabs.vue.d.ts

@@ -68,11 +68,13 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }>, {
     variant: "default" | "pills" | "cards" | "minimal";
     size: "sm" | "md" | "lg";
+    modelValue: string;
     orientation: "horizontal" | "vertical";
     sticky: {
         side: "top" | "right" | "bottom" | "left";
         offset: number;
     } | null;
+    tabs: Tab[];
     underlineWidth: string;
     tabWidth: "fill" | "fit";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/vue/ui/VirtualList.vue.d.ts

@@ -0,0 +1,36 @@
+interface Props {
+    items: any[];
+    itemHeight: number;
+    containerHeight: number;
+    itemKey?: string | ((item: any) => string | number);
+    overscan?: number;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            item: any;
+            index: number;
+        }): any;
+    };
+    refs: {
+        scrollContainer: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    scrollToItem: (index: number, align?: "start" | "center" | "end") => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    itemKey: string | ((item: any) => string | number);
+    overscan: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollContainer: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/webcomponents/define-element.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue';
-export declare const baseStyles = "\n  :host {\n    /* Typography */\n    --accui-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n    --accui-font-mono: \"Courier New\", Courier, ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\n    /* Brand Colors - inherit from document or use defaults */\n    --strands-accent: var(--strands-custom-accent, #EA00A8);\n    --accui-strands-accent: var(--strands-custom-accent, #EA00A8);\n    --accui-strands-50: var(--strands-custom-50, color-mix(in srgb, var(--strands-accent) 10%, white));\n    --accui-strands-100: var(--strands-custom-100, color-mix(in srgb, var(--strands-accent) 20%, white));\n    --accui-strands-200: var(--strands-custom-200, color-mix(in srgb, var(--strands-accent) 30%, white));\n    --accui-strands-300: var(--strands-custom-300, color-mix(in srgb, var(--strands-accent) 40%, white));\n    --accui-strands-400: var(--strands-custom-400, color-mix(in srgb, var(--strands-accent) 70%, white));\n    --accui-strands-500: var(--strands-custom-500, var(--strands-accent));\n    --accui-strands-600: var(--strands-custom-600, color-mix(in srgb, var(--strands-accent) 85%, black));\n    --accui-strands-700: var(--strands-custom-700, color-mix(in srgb, var(--strands-accent) 70%, black));\n    --accui-strands-800: var(--strands-custom-800, color-mix(in srgb, var(--strands-accent) 55%, black));\n    --accui-strands-900: var(--strands-custom-900, color-mix(in srgb, var(--strands-accent) 40%, black));\n    --accui-strands-950: var(--strands-custom-950, color-mix(in srgb, var(--strands-accent) 25%, black));\n\n    /* Neutral Colors */\n    --accui-neutral-50: #fafafa;\n    --accui-neutral-100: #f5f5f5;\n    --accui-neutral-200: #e5e5e5;\n    --accui-neutral-300: #d4d4d4;\n    --accui-neutral-400: #a3a3a3;\n    --accui-neutral-500: #737373;\n    --accui-neutral-600: #525252;\n    --accui-neutral-700: #404040;\n    --accui-neutral-800: #262626;\n    --accui-neutral-900: #171717;\n    --accui-neutral-950: #0a0a0a;\n\n    /* Gray Colors */\n    --accui-gray-50: #f9fafb;\n    --accui-gray-100: #f3f4f6;\n    --accui-gray-200: #e5e7eb;\n    --accui-gray-300: #d1d5db;\n    --accui-gray-400: #9ca3af;\n    --accui-gray-500: #6b7280;\n    --accui-gray-600: #4b5563;\n    --accui-gray-700: #374151;\n    --accui-gray-800: #1f2937;\n    --accui-gray-900: #111827;\n    --accui-gray-950: #030712;\n\n    /* Status Colors */\n    --accui-red-500: #ef4444;\n    --accui-red-600: #dc2626;\n    --accui-green-500: #22c55e;\n    --accui-green-600: #16a34a;\n    --accui-yellow-500: #f97316;\n    --accui-yellow-600: #ea580c;\n\n    /* Spacing Scale */\n    --accui-space-0: 0;\n    --accui-space-1: 0.25rem;\n    --accui-space-2: 0.5rem;\n    --accui-space-3: 0.75rem;\n    --accui-space-4: 1rem;\n    --accui-space-5: 1.25rem;\n    --accui-space-6: 1.5rem;\n    --accui-space-8: 2rem;\n\n    /* Border Radius */\n    --accui-radius-none: 0;\n    --accui-radius-sm: 0.125rem;\n    --accui-radius-md: 0.375rem;\n    --accui-radius-lg: 0.5rem;\n    --accui-radius-xl: 0.75rem;\n    --accui-radius-2xl: 1rem;\n    --accui-radius-full: 9999px;\n\n    /* Transition Timings */\n    --accui-transition-fast: 0.15s;\n    --accui-transition-duration: 0.25s;\n    --animation-duration: 0.25s;\n\n    /* Theme Colors (Light Mode Default) */\n    --accui-bg-primary: #ffffff;\n    --accui-bg-secondary: #f9fafb;\n    --accui-bg-tertiary: #f3f4f6;\n    --accui-text-primary: #111827;\n    --accui-text-secondary: #6b7280;\n    --accui-text-tertiary: #9ca3af;\n    --accui-border-primary: #e5e7eb;\n    --accui-border-secondary: #d1d5db;\n    --accui-border-tertiary: #9ca3af;\n\n    /* Button Variables */\n    --accui-button-primary-background: var(--accui-strands-500);\n    --accui-button-primary-background-hover: var(--accui-strands-600);\n    --accui-button-primary-text: #ffffff;\n    --accui-button-primary-border: transparent;\n\n    --accui-button-secondary-background: #f0f0f0;\n    --accui-button-secondary-background-hover: #e2e2e2;\n    --accui-button-secondary-text: #000000;\n    --accui-button-secondary-border: #f0f0f0;\n\n    --accui-button-ghost-background: transparent;\n    --accui-button-ghost-background-hover: var(--accui-bg-secondary);\n    --accui-button-ghost-text: var(--accui-text-primary);\n    --accui-button-ghost-border: transparent;\n\n    --accui-button-outline-background: transparent;\n    --accui-button-outline-background-hover: var(--accui-strands-50);\n    --accui-button-outline-text: var(--accui-strands-500);\n    --accui-button-outline-border: var(--accui-strands-500);\n\n    /* Input Variables */\n    --accui-input-background: var(--accui-bg-primary);\n    --accui-input-background-focus: var(--accui-bg-primary);\n    --accui-input-text: var(--accui-text-primary);\n    --accui-input-placeholder: var(--accui-text-tertiary);\n    --accui-input-border: var(--accui-border-primary);\n    --accui-input-border-focus: var(--strands-accent, #EA00A8);\n    --accui-input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--strands-accent, #EA00A8) 10%, transparent);\n\n    /* Card Variables */\n    --accui-card-background: var(--accui-bg-primary);\n    --accui-card-border: var(--accui-border-primary);\n    --accui-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n\n    /* Alert Variables */\n    --accui-alert-success-background: #f0fdf4;\n    --accui-alert-success-text: #15803d;\n    --accui-alert-success-border: #bbf7d0;\n\n    --accui-alert-error-background: #fef2f2;\n    --accui-alert-error-text: #dc2626;\n    --accui-alert-error-border: #fecaca;\n\n    --accui-alert-warning-background: #fefce8;\n    --accui-alert-warning-text: #ca8a04;\n    --accui-alert-warning-border: #fde047;\n\n    --accui-alert-info-background: #eff6ff;\n    --accui-alert-info-text: #2563eb;\n    --accui-alert-info-border: #bfdbfe;\n\n    /* Toggle Variables */\n    --accui-toggle-background: var(--accui-border-secondary);\n    --accui-toggle-background-active: var(--accui-strands-500);\n    --accui-toggle-thumb: #ffffff;\n\n    /* Tabs Variables */\n    --accui-tabs-background: var(--accui-bg-secondary);\n    --accui-tabs-border: var(--accui-border-primary);\n    --accui-tabs-button-text: var(--accui-text-secondary);\n    --accui-tabs-button-text-active: var(--accui-text-primary);\n    --accui-tabs-button-background: var(--accui-bg-primary);\n    --accui-tabs-button-background-hover: var(--accui-bg-secondary);\n    --accui-tabs-indicator: var(--accui-strands-500);\n\n    /* Divider Variables */\n    --accui-divider-color: var(--accui-border-primary);\n    --accui-divider-text: var(--accui-text-secondary);\n\n    /* Display as inline-block by default */\n    display: inline-block;\n  }\n\n  /* Dark mode support - detect from document */\n  :host-context([data-theme=\"dark\"]) {\n    --accui-bg-primary: #0f172a;\n    --accui-bg-secondary: #1e293b;\n    --accui-bg-tertiary: #334155;\n    --accui-text-primary: #f8fafc;\n    --accui-text-secondary: #cbd5e1;\n    --accui-text-tertiary: #94a3b8;\n    --accui-border-primary: #334155;\n    --accui-border-secondary: #475569;\n    --accui-border-tertiary: #64748b;\n\n    --accui-button-secondary-background: var(--accui-bg-secondary);\n    --accui-button-secondary-background-hover: var(--accui-bg-tertiary);\n    --accui-button-secondary-text: var(--accui-text-primary);\n    --accui-button-secondary-border: var(--accui-bg-secondary);\n\n    --accui-button-ghost-background-hover: var(--accui-bg-tertiary);\n\n    --accui-button-outline-background-hover: var(--accui-strands-950);\n    --accui-button-outline-text: var(--accui-strands-400);\n    --accui-button-outline-border: var(--accui-strands-400);\n\n    --accui-alert-success-background: #0f2a1a;\n    --accui-alert-success-text: #4ade80;\n    --accui-alert-success-border: #16a34a;\n\n    --accui-alert-error-background: #2a0f0f;\n    --accui-alert-error-text: #f87171;\n    --accui-alert-error-border: #dc2626;\n\n    --accui-alert-warning-background: #2a2508;\n    --accui-alert-warning-text: #fbbf24;\n    --accui-alert-warning-border: #eab308;\n\n    --accui-alert-info-background: #0f1a2a;\n    --accui-alert-info-text: #60a5fa;\n    --accui-alert-info-border: #3b82f6;\n\n    --accui-toggle-background: var(--accui-border-tertiary);\n\n    --accui-tabs-background: var(--accui-bg-tertiary);\n    --accui-tabs-button-background: var(--accui-bg-secondary);\n    --accui-tabs-button-background-hover: var(--accui-bg-primary);\n  }\n\n  /* Base reset for Shadow DOM content */\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n";
+export declare const baseStyles = "\n  :host {\n    /* Typography */\n    --accui-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n    --accui-font-mono: \"Courier New\", Courier, ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\n    /* Brand Colors - inherit from document or use defaults */\n    --strands-accent: var(--strands-custom-accent, #EA00A8);\n    --accui-strands-accent: var(--strands-custom-accent, #EA00A8);\n    --accui-strands-50: var(--strands-custom-50, color-mix(in srgb, var(--strands-accent) 10%, white));\n    --accui-strands-100: var(--strands-custom-100, color-mix(in srgb, var(--strands-accent) 20%, white));\n    --accui-strands-200: var(--strands-custom-200, color-mix(in srgb, var(--strands-accent) 30%, white));\n    --accui-strands-300: var(--strands-custom-300, color-mix(in srgb, var(--strands-accent) 40%, white));\n    --accui-strands-400: var(--strands-custom-400, color-mix(in srgb, var(--strands-accent) 70%, white));\n    --accui-strands-500: var(--strands-custom-500, var(--strands-accent));\n    --accui-strands-600: var(--strands-custom-600, color-mix(in srgb, var(--strands-accent) 85%, black));\n    --accui-strands-700: var(--strands-custom-700, color-mix(in srgb, var(--strands-accent) 70%, black));\n    --accui-strands-800: var(--strands-custom-800, color-mix(in srgb, var(--strands-accent) 55%, black));\n    --accui-strands-900: var(--strands-custom-900, color-mix(in srgb, var(--strands-accent) 40%, black));\n    --accui-strands-950: var(--strands-custom-950, color-mix(in srgb, var(--strands-accent) 25%, black));\n\n    /* Neutral Colors */\n    --accui-neutral-50: #fafafa;\n    --accui-neutral-100: #f5f5f5;\n    --accui-neutral-200: #e5e5e5;\n    --accui-neutral-300: #d4d4d4;\n    --accui-neutral-400: #a3a3a3;\n    --accui-neutral-500: #737373;\n    --accui-neutral-600: #525252;\n    --accui-neutral-700: #404040;\n    --accui-neutral-800: #262626;\n    --accui-neutral-900: #171717;\n    --accui-neutral-950: #0a0a0a;\n\n    /* Gray Colors */\n    --accui-gray-50: #f9fafb;\n    --accui-gray-100: #f3f4f6;\n    --accui-gray-200: #e5e7eb;\n    --accui-gray-300: #d1d5db;\n    --accui-gray-400: #9ca3af;\n    --accui-gray-500: #6b7280;\n    --accui-gray-600: #4b5563;\n    --accui-gray-700: #374151;\n    --accui-gray-800: #1f2937;\n    --accui-gray-900: #111827;\n    --accui-gray-950: #030712;\n\n    /* Status Colors */\n    --accui-red-500: #ef4444;\n    --accui-red-600: #dc2626;\n    --accui-green-500: #22c55e;\n    --accui-green-600: #16a34a;\n    --accui-yellow-500: #f97316;\n    --accui-yellow-600: #ea580c;\n\n    /* Spacing Scale */\n    --accui-space-0: 0;\n    --accui-space-1: 0.25rem;\n    --accui-space-2: 0.5rem;\n    --accui-space-3: 0.75rem;\n    --accui-space-4: 1rem;\n    --accui-space-5: 1.25rem;\n    --accui-space-6: 1.5rem;\n    --accui-space-8: 2rem;\n\n    /* Border Radius */\n    --accui-radius-none: 0;\n    --accui-radius-sm: 0.125rem;\n    --accui-radius-md: 0.375rem;\n    --accui-radius-lg: 0.5rem;\n    --accui-radius-xl: 0.75rem;\n    --accui-radius-2xl: 1rem;\n    --accui-radius-full: 9999px;\n\n    /* Transition Timings */\n    --accui-transition-fast: 0.15s;\n    --accui-transition-duration: 0.25s;\n    --animation-duration: 0.25s;\n\n    /* Theme Colors (Light Mode Default) */\n    --accui-bg-primary: #ffffff;\n    --accui-bg-secondary: #f9fafb;\n    --accui-bg-tertiary: #f3f4f6;\n    --accui-text-primary: #111827;\n    --accui-text-secondary: #6b7280;\n    --accui-text-tertiary: #9ca3af;\n    --accui-border-primary: #e5e7eb;\n    --accui-border-secondary: #d1d5db;\n    --accui-border-tertiary: #9ca3af;\n\n    /* Button Variables */\n    --accui-button-primary-background: var(--accui-strands-500);\n    --accui-button-primary-background-hover: var(--accui-strands-600);\n    --accui-button-primary-text: #ffffff;\n    --accui-button-primary-border: transparent;\n\n    --accui-button-secondary-background: #f0f0f0;\n    --accui-button-secondary-background-hover: #e2e2e2;\n    --accui-button-secondary-text: #000000;\n    --accui-button-secondary-border: #f0f0f0;\n\n    --accui-button-ghost-background: transparent;\n    --accui-button-ghost-background-hover: var(--accui-bg-secondary);\n    --accui-button-ghost-text: var(--accui-text-primary);\n    --accui-button-ghost-border: transparent;\n\n    --accui-button-outline-background: transparent;\n    --accui-button-outline-background-hover: var(--accui-strands-50);\n    --accui-button-outline-text: var(--accui-strands-500);\n    --accui-button-outline-border: var(--accui-strands-500);\n\n    /* Input Variables */\n    --accui-input-background: var(--accui-bg-primary);\n    --accui-input-background-focus: var(--accui-bg-primary);\n    --accui-input-text: var(--accui-text-primary);\n    --accui-input-placeholder: var(--accui-text-tertiary);\n    --accui-input-border: var(--accui-border-primary);\n    --accui-input-border-focus: var(--strands-accent, #EA00A8);\n    --accui-input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--strands-accent, #EA00A8) 10%, transparent);\n\n    /* Card Variables */\n    --accui-card-background: var(--accui-bg-primary);\n    --accui-card-border: var(--accui-border-primary);\n    --accui-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n\n    /* Alert Variables */\n    --accui-alert-success-background: #f0fdf4;\n    --accui-alert-success-text: #15803d;\n    --accui-alert-success-border: #bbf7d0;\n\n    --accui-alert-error-background: #fef2f2;\n    --accui-alert-error-text: #dc2626;\n    --accui-alert-error-border: #fecaca;\n\n    --accui-alert-warning-background: #fefce8;\n    --accui-alert-warning-text: #ca8a04;\n    --accui-alert-warning-border: #fde047;\n\n    --accui-alert-info-background: #eff6ff;\n    --accui-alert-info-text: #2563eb;\n    --accui-alert-info-border: #bfdbfe;\n\n    /* Toggle Variables */\n    --accui-toggle-background: var(--accui-border-secondary);\n    --accui-toggle-background-active: var(--accui-strands-500);\n    --accui-toggle-thumb: #ffffff;\n\n    /* Tabs Variables */\n    --accui-tabs-background: var(--accui-bg-secondary);\n    --accui-tabs-border: var(--accui-border-primary);\n    --accui-tabs-button-text: var(--accui-text-secondary);\n    --accui-tabs-button-text-active: var(--accui-text-primary);\n    --accui-tabs-button-background: var(--accui-bg-primary);\n    --accui-tabs-button-background-hover: var(--accui-bg-secondary);\n    --accui-tabs-indicator: var(--accui-strands-500);\n\n    /* Divider Variables */\n    --accui-divider-color: var(--accui-border-primary);\n    --accui-divider-text: var(--accui-text-secondary);\n\n    /* Modal Variables */\n    --accui-modal-background: var(--accui-bg-primary);\n    --accui-modal-overlay: rgba(0, 0, 0, 0.5);\n    --accui-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n    /* Table Variables */\n    --accui-table-background: var(--accui-bg-primary);\n    --accui-table-header-background: var(--accui-bg-secondary);\n    --accui-table-header-text: var(--accui-text-primary);\n    --accui-table-row-hover: var(--accui-bg-secondary);\n    --accui-table-border: var(--accui-border-primary);\n    --accui-table-cell-text: var(--accui-text-primary);\n\n    /* ColorPicker Variables */\n    --accui-colorpicker-background: var(--accui-bg-primary);\n    --accui-colorpicker-border: var(--accui-border-primary);\n    --accui-colorpicker-text: var(--accui-text-primary);\n    --accui-colorpicker-input-background: var(--accui-bg-secondary);\n    --accui-colorpicker-button-hover: var(--accui-bg-secondary);\n    --accui-colorpicker-contrast-background: var(--accui-bg-secondary);\n\n    /* AvatarEditor Variables */\n    --accui-avatar-background: var(--accui-bg-primary);\n    --accui-avatar-border: var(--accui-border-primary);\n    --accui-avatar-button-background: var(--accui-bg-secondary);\n    --accui-avatar-button-hover: var(--accui-bg-tertiary);\n    --accui-avatar-text: var(--accui-text-primary);\n\n    /* Display as inline-block by default */\n    display: inline-block;\n  }\n\n  /* Dark mode support - detect from document */\n  :host-context([data-theme=\"dark\"]) {\n    --accui-bg-primary: #0f172a;\n    --accui-bg-secondary: #1e293b;\n    --accui-bg-tertiary: #334155;\n    --accui-text-primary: #f8fafc;\n    --accui-text-secondary: #cbd5e1;\n    --accui-text-tertiary: #94a3b8;\n    --accui-border-primary: #334155;\n    --accui-border-secondary: #475569;\n    --accui-border-tertiary: #64748b;\n\n    --accui-button-secondary-background: var(--accui-bg-secondary);\n    --accui-button-secondary-background-hover: var(--accui-bg-tertiary);\n    --accui-button-secondary-text: var(--accui-text-primary);\n    --accui-button-secondary-border: var(--accui-bg-secondary);\n\n    --accui-button-ghost-background-hover: var(--accui-bg-tertiary);\n\n    --accui-button-outline-background-hover: var(--accui-strands-950);\n    --accui-button-outline-text: var(--accui-strands-400);\n    --accui-button-outline-border: var(--accui-strands-400);\n\n    --accui-alert-success-background: #0f2a1a;\n    --accui-alert-success-text: #4ade80;\n    --accui-alert-success-border: #16a34a;\n\n    --accui-alert-error-background: #2a0f0f;\n    --accui-alert-error-text: #f87171;\n    --accui-alert-error-border: #dc2626;\n\n    --accui-alert-warning-background: #2a2508;\n    --accui-alert-warning-text: #fbbf24;\n    --accui-alert-warning-border: #eab308;\n\n    --accui-alert-info-background: #0f1a2a;\n    --accui-alert-info-text: #60a5fa;\n    --accui-alert-info-border: #3b82f6;\n\n    --accui-toggle-background: var(--accui-border-tertiary);\n\n    --accui-tabs-background: var(--accui-bg-tertiary);\n    --accui-tabs-button-background: var(--accui-bg-secondary);\n    --accui-tabs-button-background-hover: var(--accui-bg-primary);\n\n    --accui-input-shadow-focus: 0 0 0 3px rgba(234, 0, 168, 0.2);\n    --accui-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);\n\n    --accui-modal-background: var(--accui-bg-secondary);\n    --accui-modal-overlay: rgba(0, 0, 0, 0.7);\n    --accui-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n\n    --accui-table-row-hover: var(--accui-bg-tertiary);\n\n    --accui-colorpicker-background: var(--accui-bg-secondary);\n    --accui-colorpicker-text: var(--accui-text-primary);\n    --accui-colorpicker-input-background: var(--accui-bg-tertiary);\n    --accui-colorpicker-button-hover: var(--accui-bg-tertiary);\n    --accui-colorpicker-contrast-background: var(--accui-bg-primary);\n\n    --accui-avatar-button-background: var(--accui-bg-tertiary);\n  }\n\n  /* Base reset for Shadow DOM content */\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n";
 /**
  * Creates and registers a custom element from a Vue component
  *

package/dist/webcomponents/entries/sl-alert.d.ts

@@ -0,0 +1,2 @@
+import { default as UiAlert } from '../../vue/ui/UiAlert.vue';
+export { UiAlert };

package/dist/webcomponents/entries/sl-avatar-editor.d.ts

@@ -0,0 +1,2 @@
+import { default as UiAvatarEditor } from '../../vue/ui/UiAvatarEditor.vue';
+export { UiAvatarEditor };

package/dist/webcomponents/entries/sl-button.d.ts

@@ -0,0 +1,2 @@
+import { default as UiButton } from '../../vue/ui/UiButton.vue';
+export { UiButton };

package/dist/webcomponents/entries/sl-card.d.ts

@@ -0,0 +1,2 @@
+import { default as UiCard } from '../../vue/ui/UiCard.vue';
+export { UiCard };

package/dist/webcomponents/entries/sl-checkbox-group.d.ts

@@ -0,0 +1,2 @@
+import { default as UiCheckboxGroup } from '../../vue/ui/UiCheckboxGroup.vue';
+export { UiCheckboxGroup };

package/dist/webcomponents/entries/sl-color-picker.d.ts

@@ -0,0 +1,2 @@
+import { default as UiColorPicker } from '../../vue/ui/UiColorPicker.vue';
+export { UiColorPicker };

package/dist/webcomponents/entries/sl-datetime-picker.d.ts

@@ -0,0 +1,2 @@
+import { default as UiDateTimePicker } from '../../vue/ui/UiDateTimePicker.vue';
+export { UiDateTimePicker };

package/dist/webcomponents/entries/sl-divider.d.ts

@@ -0,0 +1,2 @@
+import { default as UiDivider } from '../../vue/ui/UiDivider.vue';
+export { UiDivider };

package/dist/webcomponents/entries/sl-font-picker.d.ts

@@ -0,0 +1,2 @@
+import { default as UiBunnyFontPicker } from '../../vue/ui/UiBunnyFontPicker.vue';
+export { UiBunnyFontPicker };

package/dist/webcomponents/entries/sl-hero.d.ts

@@ -0,0 +1,2 @@
+import { default as UiHero } from '../../vue/ui/UiHero.vue';
+export { UiHero };

package/dist/webcomponents/entries/sl-input.d.ts

@@ -0,0 +1,2 @@
+import { default as UiInput } from '../../vue/ui/UiInput.vue';
+export { UiInput };

package/dist/webcomponents/entries/sl-level-progress.d.ts

@@ -0,0 +1,2 @@
+import { default as UiLevelProgress } from '../../vue/ui/UiLevelProgress.vue';
+export { UiLevelProgress };

package/dist/webcomponents/entries/sl-link.d.ts

@@ -0,0 +1,2 @@
+import { default as UiLink } from '../../vue/ui/UiLink.vue';
+export { UiLink };

package/dist/webcomponents/entries/sl-loader-spinner.d.ts

@@ -0,0 +1,2 @@
+import { default as UiLoader } from '../../vue/ui/UiLoader.vue';
+export { UiLoader };

package/dist/webcomponents/entries/sl-mega-menu.d.ts

@@ -0,0 +1,5 @@
+import { default as UiMegaMenu } from '../../vue/ui/UiMegaMenu.vue';
+export { default as UiMegaMenuItem } from '../../vue/ui/UiMegaMenu/UiMegaMenu.Item.vue';
+export { default as UiMegaMenuPanel } from '../../vue/ui/UiMegaMenu/UiMegaMenu.Panel.vue';
+export { default as UiMegaMenuGroup } from '../../vue/ui/UiMegaMenu/UiMegaMenu.Group.vue';
+export { UiMegaMenu };

package/dist/webcomponents/entries/sl-modal.d.ts

@@ -0,0 +1,2 @@
+import { default as UiModal } from '../../vue/ui/UiModal.vue';
+export { UiModal };

package/dist/webcomponents/entries/sl-pill.d.ts

@@ -0,0 +1,2 @@
+import { default as UiPill } from '../../vue/ui/UiPill.vue';
+export { UiPill };

package/dist/webcomponents/entries/sl-radio-group.d.ts

@@ -0,0 +1,2 @@
+import { default as UiRadioGroup } from '../../vue/ui/UiRadioGroup.vue';
+export { UiRadioGroup };

package/dist/webcomponents/entries/sl-slider.d.ts

@@ -0,0 +1,2 @@
+import { default as UiSlider } from '../../vue/ui/UiSlider.vue';
+export { UiSlider };

package/dist/webcomponents/entries/sl-table.d.ts

@@ -0,0 +1,2 @@
+import { default as UiTable } from '../../vue/ui/UiTable.vue';
+export { UiTable };

package/dist/webcomponents/entries/sl-tabs.d.ts

@@ -0,0 +1,2 @@
+import { default as UiTabs } from '../../vue/ui/UiTabs.vue';
+export { UiTabs };

package/dist/webcomponents/entries/sl-theme-toggle.d.ts

@@ -0,0 +1,2 @@
+import { default as UiThemeToggle } from '../../vue/ui/UiThemeToggle.vue';
+export { UiThemeToggle };

package/dist/webcomponents/entries/sl-toggle.d.ts

@@ -0,0 +1,2 @@
+import { default as UiToggle } from '../../vue/ui/UiToggle.vue';
+export { UiToggle };

package/dist/webcomponents/entries/sl-tooltip.d.ts

@@ -0,0 +1,2 @@
+import { default as UiTooltip } from '../../vue/ui/UiTooltip.vue';
+export { UiTooltip };

package/dist/webcomponents/loader.d.ts

@@ -15,14 +15,14 @@ declare function loadComponents(shortNames: string[], onProgress?: (loaded: numb
     }>;
 }>;
 /**
- * StrandsLoader Custom Element
+ * LumenLoader Custom Element
  *
  * Attributes:
  * - components: Comma-separated list of component names to load
  * - base-url: Override the base URL for component files
  * - show-loading: Show a loading indicator whilst components load
  */
-declare class StrandsLoader extends HTMLElement {
+declare class LumenLoader extends HTMLElement {
     private _connected;
     private _loadPromise;
     static get observedAttributes(): string[];
@@ -54,4 +54,4 @@ declare class StrandsLoader extends HTMLElement {
      */
     static getComponentInfo(name: string): ComponentInfo | undefined;
 }
-export { StrandsLoader, loadComponent, loadComponents, loadedComponents };
+export { LumenLoader, loadComponent, loadComponents, loadedComponents };

package/dist/webcomponents/registry.d.ts

@@ -7,7 +7,7 @@
 export interface ComponentInfo {
     /** The custom element tag name */
     tagName: string;
-    /** The short name used in the loader (e.g., 'button' for strands-button) */
+    /** The short name used in the loader (e.g., 'button' for sl-button) */
     shortName: string;
     /** Description of the component */
     description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.17.66",
+  "version": "2.19.1",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/index.cjs.js",
@@ -62,20 +62,6 @@
   ],
   "author": "Strands Services Limited",
   "license": "MIT",
-  "scripts": {
-    "build": "vite build",
-    "build-demo": "vite build --config vite.demo.config.ts",
-    "build-webcomponents": "vite build --config vite.webcomponents.config.ts",
-    "serve": "vite",
-    "serve-demo": "vite --config vite.demo.config.ts",
-    "serve-webcomponents": "serve -c serve.webcomponents.json -l 3002 dist-webcomponents",
-    "dev": "vite build --watch",
-    "preview": "vite preview",
-    "preview-demo": "vite preview --config vite.demo.config.ts",
-    "prepare-publish": "npm run build",
-    "mcp:serve": "npx @modelcontextprotocol/server-filesystem .mcp/docs",
-    "mcp:validate": "node -e \"console.log('MCP docs validation: ', require('fs').existsSync('.mcp/docs/ui-components.md') ? '✓ Valid' : '✗ Missing')\""
-  },
   "dependencies": {
     "@tiptap/extension-heading": "^3.4.4",
     "@tiptap/extension-placeholder": "^3.4.4",
@@ -101,5 +87,19 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build-demo": "vite build --config vite.demo.config.ts",
+    "build-webcomponents": "vite build --config vite.webcomponents.config.ts",
+    "serve": "vite",
+    "serve-demo": "vite --config vite.demo.config.ts",
+    "serve-webcomponents": "serve -c serve.webcomponents.json -l 3002 dist-webcomponents",
+    "dev": "vite build --watch",
+    "preview": "vite preview",
+    "preview-demo": "vite preview --config vite.demo.config.ts",
+    "prepare-publish": "npm run build",
+    "mcp:serve": "npx @modelcontextprotocol/server-filesystem .mcp/docs",
+    "mcp:validate": "node -e \"console.log('MCP docs validation: ', require('fs').existsSync('.mcp/docs/ui-components.md') ? '✓ Valid' : '✗ Missing')\""
   }
-}
+}