@strands.gg/accui 2.15.11 → 2.16.0

package/dist/vite.es.js

@@ -86,7 +86,7 @@ ${code}`,
 function createStrandsAuth(config = {}) {
   return {
     install(app) {
-      import("./StrandsUIPlugin-JP858JzQ.es.js").then((n) => n.n).then((module) => {
+      import("./StrandsUIPlugin-tl7L52hZ.es.js").then((n) => n.n).then((module) => {
         const StrandsUIPlugin = module.default;
         app.use(StrandsUIPlugin);
       });

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

@@ -0,0 +1,24 @@
+/**
+ * Utility for converting Vue components to Web Components
+ *
+ * This module provides helpers for registering Vue components as custom elements
+ * with proper style handling and Shadow DOM integration.
+ */
+import { type 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";
+/**
+ * Creates and registers a custom element from a Vue component
+ *
+ * @param tagName - The custom element tag name (e.g., 'strands-button')
+ * @param component - The Vue component to convert
+ * @param additionalStyles - Optional additional CSS to inject
+ */
+export declare function registerCustomElement(tagName: string, component: Component, additionalStyles?: string): void;
+/**
+ * Check if a custom element is already registered
+ */
+export declare function isElementRegistered(tagName: string): boolean;
+/**
+ * Wait for a custom element to be defined
+ */
+export declare function whenDefined(tagName: string): Promise<CustomElementConstructor>;

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

@@ -0,0 +1,12 @@
+/**
+ * Strands Alert Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-alert variant="success" title="Success!">
+ *   Operation completed successfully.
+ * </strands-alert>
+ * ```
+ */
+import UiAlert from '../../vue/ui/UiAlert.vue';
+export { UiAlert };

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

@@ -0,0 +1,12 @@
+/**
+ * Strands Button Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-button variant="primary" size="md">
+ *   Click Me
+ * </strands-button>
+ * ```
+ */
+import UiButton from '../../vue/ui/UiButton.vue';
+export { UiButton };

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

@@ -0,0 +1,12 @@
+/**
+ * Strands Card Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-card>
+ *   Card content goes here
+ * </strands-card>
+ * ```
+ */
+import UiCard from '../../vue/ui/UiCard.vue';
+export { UiCard };

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

@@ -0,0 +1,11 @@
+/**
+ * Strands Checkbox Group Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-checkbox-group name="choices" options='[{"value":"a","label":"Option A"},{"value":"b","label":"Option B"}]'>
+ * </strands-checkbox-group>
+ * ```
+ */
+import UiCheckboxGroup from '../../vue/ui/UiCheckboxGroup.vue';
+export { UiCheckboxGroup };

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

@@ -0,0 +1,12 @@
+/**
+ * Strands Divider Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-divider></strands-divider>
+ * <strands-divider orientation="vertical"></strands-divider>
+ * <strands-divider>Or</strands-divider>
+ * ```
+ */
+import UiDivider from '../../vue/ui/UiDivider.vue';
+export { UiDivider };

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

@@ -0,0 +1,14 @@
+/**
+ * Strands Input Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-input
+ *   type="email"
+ *   label="Email"
+ *   placeholder="Enter your email"
+ * ></strands-input>
+ * ```
+ */
+import UiInput from '../../vue/ui/UiInput.vue';
+export { UiInput };

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

@@ -0,0 +1,12 @@
+/**
+ * Strands Link Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-link href="https://example.com" external>
+ *   Visit Example
+ * </strands-link>
+ * ```
+ */
+import UiLink from '../../vue/ui/UiLink.vue';
+export { UiLink };

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

@@ -0,0 +1,10 @@
+/**
+ * Strands Loader Spinner Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-loader-spinner size="md"></strands-loader-spinner>
+ * ```
+ */
+import UiLoader from '../../vue/ui/UiLoader.vue';
+export { UiLoader };

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

@@ -0,0 +1,16 @@
+/**
+ * Strands Modal Web Component
+ *
+ * Note: Modals in web components have limitations due to Shadow DOM.
+ * The modal will render within its shadow root, which may affect
+ * positioning and overlay behaviour.
+ *
+ * Usage:
+ * ```html
+ * <strands-modal open title="Modal Title">
+ *   Modal content here
+ * </strands-modal>
+ * ```
+ */
+import UiModal from '../../vue/ui/UiModal.vue';
+export { UiModal };

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

@@ -0,0 +1,11 @@
+/**
+ * Strands Pill Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-pill variant="filled" color="primary">Badge</strands-pill>
+ * <strands-pill variant="dot" color="success">Active</strands-pill>
+ * ```
+ */
+import UiPill from '../../vue/ui/UiPill.vue';
+export { UiPill };

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

@@ -0,0 +1,11 @@
+/**
+ * Strands Radio Group Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-radio-group name="choice" options='[{"value":"a","label":"Option A"},{"value":"b","label":"Option B"}]'>
+ * </strands-radio-group>
+ * ```
+ */
+import UiRadioGroup from '../../vue/ui/UiRadioGroup.vue';
+export { UiRadioGroup };

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

@@ -0,0 +1,10 @@
+/**
+ * Strands Slider Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-slider min="0" max="100" value="50"></strands-slider>
+ * ```
+ */
+import UiSlider from '../../vue/ui/UiSlider.vue';
+export { UiSlider };

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

@@ -0,0 +1,13 @@
+/**
+ * Strands Table Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-table
+ *   columns='[{"key":"name","label":"Name"},{"key":"email","label":"Email"}]'
+ *   data='[{"name":"John","email":"john@example.com"}]'
+ * ></strands-table>
+ * ```
+ */
+import UiTable from '../../vue/ui/UiTable.vue';
+export { UiTable };

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

@@ -0,0 +1,12 @@
+/**
+ * Strands Tabs Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-tabs>
+ *   <!-- Tab content via slots -->
+ * </strands-tabs>
+ * ```
+ */
+import UiTabs from '../../vue/ui/UiTabs.vue';
+export { UiTabs };

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

@@ -0,0 +1,10 @@
+/**
+ * Strands Theme Toggle Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-theme-toggle></strands-theme-toggle>
+ * ```
+ */
+import UiThemeToggle from '../../vue/ui/UiThemeToggle.vue';
+export { UiThemeToggle };

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

@@ -0,0 +1,10 @@
+/**
+ * Strands Toggle Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-toggle label="Enable notifications"></strands-toggle>
+ * ```
+ */
+import UiToggle from '../../vue/ui/UiToggle.vue';
+export { UiToggle };

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

@@ -0,0 +1,12 @@
+/**
+ * Strands Tooltip Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-tooltip content="Helpful information" position="top">
+ *   <button>Hover me</button>
+ * </strands-tooltip>
+ * ```
+ */
+import UiTooltip from '../../vue/ui/UiTooltip.vue';
+export { UiTooltip };

package/dist/webcomponents/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Strands UI Web Components
+ *
+ * This module exports all web component functionality for the Strands UI library.
+ */
+export * from './loader';
+export * from './registry';
+export * from './define-element';

package/dist/webcomponents/loader.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Strands UI Web Components Loader
+ *
+ * A custom element that lazy-loads Strands UI components on demand.
+ *
+ * Usage:
+ * ```html
+ * <script src="https://use.strandsui.com/loader.js"></script>
+ * <strands-loader components="button,alert,input"></strands-loader>
+ * ```
+ *
+ * Events:
+ * - 'strands:ready' - Dispatched when all requested components are loaded
+ * - 'strands:error' - Dispatched if any component fails to load
+ * - 'strands:progress' - Dispatched as each component loads
+ */
+import { type ComponentInfo } from './registry';
+declare const loadedComponents: Set<string>;
+/**
+ * Load a single component with deduplication
+ */
+declare function loadComponent(shortName: string): Promise<void>;
+/**
+ * Load multiple components in parallel
+ */
+declare function loadComponents(shortNames: string[], onProgress?: (loaded: number, total: number, componentName: string) => void): Promise<{
+    loaded: string[];
+    failed: Array<{
+        name: string;
+        error: Error;
+    }>;
+}>;
+/**
+ * StrandsLoader 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 {
+    private _connected;
+    private _loadPromise;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _render;
+    private _updateStatus;
+    private _loadComponents;
+    private _dispatchEvent;
+    /**
+     * Programmatically load additional components
+     */
+    load(componentNames: string | string[]): Promise<{
+        loaded: string[];
+        failed: string[];
+    }>;
+    /**
+     * Check if a component is loaded
+     */
+    isLoaded(componentName: string): boolean;
+    /**
+     * Get list of all available components
+     */
+    static get availableComponents(): string[];
+    /**
+     * Get component info
+     */
+    static getComponentInfo(name: string): ComponentInfo | undefined;
+}
+export { StrandsLoader, loadComponent, loadComponents, loadedComponents };

package/dist/webcomponents/registry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Component Registry
+ *
+ * Maps component short names to their module paths for dynamic loading.
+ * This allows the loader to dynamically import only the requested components.
+ */
+export interface ComponentInfo {
+    /** The custom element tag name */
+    tagName: string;
+    /** The short name used in the loader (e.g., 'button' for strands-button) */
+    shortName: string;
+    /** Description of the component */
+    description: string;
+}
+/**
+ * Registry of all available components
+ */
+export declare const componentRegistry: Record<string, ComponentInfo>;
+/**
+ * Get component info by short name
+ */
+export declare function getComponentInfo(shortName: string): ComponentInfo | undefined;
+/**
+ * Get all available component short names
+ */
+export declare function getAvailableComponents(): string[];
+/**
+ * Check if a component exists in the registry
+ */
+export declare function isValidComponent(shortName: string): boolean;
+/**
+ * Parse a comma-separated list of component names
+ */
+export declare function parseComponentList(componentString: string): string[];
+/**
+ * Validate a list of component names and return invalid ones
+ */
+export declare function validateComponentList(components: string[]): {
+    valid: string[];
+    invalid: string[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.15.11",
+  "version": "2.16.0",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/index.cjs.js",
@@ -65,8 +65,10 @@
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",
     "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",