@affinda/wc 0.0.1 → 0.0.2

package/dist/types/components.d.ts

@@ -6,306 +6,281 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
-    interface AfBadge {
+    /**
+     * A container component that maintains a fixed aspect ratio for its content.
+     * Useful for images, videos, or any content that needs to maintain specific proportions.
+     */
+    interface AfAspectRatio {
         /**
-          * Color theme of the badge
-          * @default 'brand'
+          * The aspect ratio to maintain. Can be: - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc. - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
+          * @example <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio> <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
+          * @default '1:1'
          */
-        "tone": 'brand' | 'neutral' | 'success';
+        "ratio": string;
     }
-    interface AfButton {
+    interface AfColorSwatch {
         /**
-          * Disabled state
-          * @default false
+          * Color value (hex)
          */
-        "disabled": boolean;
+        "color": string;
         /**
-          * Loading state
-          * @default false
+          * Color name
          */
-        "loading": boolean;
+        "name": string;
         /**
-          * Size of the button
-          * @default 'md'
+          * Size variant
+          * @default 'default'
          */
-        "size": 'md' | 'lg';
+        "size": 'default' | 'large';
+    }
+    /**
+     * A responsive container component that provides consistent margins and max-width
+     * constraints based on the Affinda grid system.
+     */
+    interface AfContainer {
         /**
-          * Visual style of the button
-          * @default 'primary'
+          * Maximum width constraint for the container - 'xlarge': 1440px container (default) - 'large': 1024px container - 'medium': 768px container - 'fluid': No max-width constraint, full width with margins
+          * @default 'xlarge'
          */
-        "variant": 'primary' | 'secondary' | 'ghost';
+        "maxWidth": 'xlarge' | 'large' | 'medium' | 'fluid';
     }
-    interface AfCard {
+    interface AfHeading {
         /**
-          * Optional accent colour strip
+          * Visual alignment
+          * @default 'left'
          */
-        "accent"?: 'brand' | 'success' | 'neutral';
+        "align": 'left' | 'center' | 'right';
         /**
-          * Visual style of the card
-          * @default 'surface'
+          * Heading level
+          * @default '1'
          */
-        "variant": 'surface' | 'elevated';
+        "level": 'xl' | '1' | '2' | '3' | '4' | '5';
     }
-    interface AfIconButton {
+    /**
+     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
+     * Supports multiple hierarchy levels, variants, and states (active, hover).
+     */
+    interface AfNavItem {
         /**
-          * Disabled state
+          * Whether this nav item is currently active/selected
           * @default false
          */
-        "disabled": boolean;
+        "active": boolean;
         /**
-          * Accessible label text
+          * Visual hierarchy level of the navigation item - 'primary': Bold, main navigation (larger text, prominent styling) - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
+          * @default 'primary'
          */
-        "label"?: string;
+        "hierarchy": 'primary' | 'secondary';
         /**
-          * Size preset
-          * @default 'md'
+          * URL to navigate to when clicked
          */
-        "size": 'sm' | 'md';
+        "href"?: string;
         /**
-          * Visual style of the icon button
-          * @default 'solid'
+          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
+          * @default '01'
          */
-        "variant": 'solid' | 'soft' | 'ghost';
+        "variant": '01' | '02';
     }
-    interface AfInput {
-        /**
-          * Assistive description shown below the field
-         */
-        "description"?: string;
-        /**
-          * Disabled state
-          * @default false
-         */
-        "disabled": boolean;
+    interface AfText {
         /**
-          * Optional label text
+          * Visual alignment
+          * @default 'left'
          */
-        "label"?: string;
+        "align": 'left' | 'center' | 'right';
         /**
-          * Placeholder text
+          * Semantic element to render
+          * @default 'p'
          */
-        "placeholder"?: string;
+        "as": 'p' | 'span' | 'div' | 'label';
         /**
-          * Input type attribute
-          * @default 'text'
+          * Text variant
+          * @default 'medium'
          */
-        "type": 'text' | 'email' | 'password' | 'search';
-        /**
-          * Current value (mutable so the component stays in sync)
-          * @default ''
-         */
-        "value": string;
+        "variant": 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag';
     }
 }
-export interface AfButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLAfButtonElement;
-}
-export interface AfIconButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLAfIconButtonElement;
-}
-export interface AfInputCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLAfInputElement;
-}
 declare global {
-    interface HTMLAfBadgeElement extends Components.AfBadge, HTMLStencilElement {
+    /**
+     * A container component that maintains a fixed aspect ratio for its content.
+     * Useful for images, videos, or any content that needs to maintain specific proportions.
+     */
+    interface HTMLAfAspectRatioElement extends Components.AfAspectRatio, HTMLStencilElement {
     }
-    var HTMLAfBadgeElement: {
-        prototype: HTMLAfBadgeElement;
-        new (): HTMLAfBadgeElement;
+    var HTMLAfAspectRatioElement: {
+        prototype: HTMLAfAspectRatioElement;
+        new (): HTMLAfAspectRatioElement;
     };
-    interface HTMLAfButtonElementEventMap {
-        "afClick": MouseEvent;
+    interface HTMLAfColorSwatchElement extends Components.AfColorSwatch, HTMLStencilElement {
     }
-    interface HTMLAfButtonElement extends Components.AfButton, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLAfButtonElementEventMap>(type: K, listener: (this: HTMLAfButtonElement, ev: AfButtonCustomEvent<HTMLAfButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLAfButtonElementEventMap>(type: K, listener: (this: HTMLAfButtonElement, ev: AfButtonCustomEvent<HTMLAfButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLAfButtonElement: {
-        prototype: HTMLAfButtonElement;
-        new (): HTMLAfButtonElement;
+    var HTMLAfColorSwatchElement: {
+        prototype: HTMLAfColorSwatchElement;
+        new (): HTMLAfColorSwatchElement;
     };
-    interface HTMLAfCardElement extends Components.AfCard, HTMLStencilElement {
+    /**
+     * A responsive container component that provides consistent margins and max-width
+     * constraints based on the Affinda grid system.
+     */
+    interface HTMLAfContainerElement extends Components.AfContainer, HTMLStencilElement {
     }
-    var HTMLAfCardElement: {
-        prototype: HTMLAfCardElement;
-        new (): HTMLAfCardElement;
+    var HTMLAfContainerElement: {
+        prototype: HTMLAfContainerElement;
+        new (): HTMLAfContainerElement;
     };
-    interface HTMLAfIconButtonElementEventMap {
-        "afClick": MouseEvent;
-    }
-    interface HTMLAfIconButtonElement extends Components.AfIconButton, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLAfIconButtonElementEventMap>(type: K, listener: (this: HTMLAfIconButtonElement, ev: AfIconButtonCustomEvent<HTMLAfIconButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLAfIconButtonElementEventMap>(type: K, listener: (this: HTMLAfIconButtonElement, ev: AfIconButtonCustomEvent<HTMLAfIconButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    interface HTMLAfHeadingElement extends Components.AfHeading, HTMLStencilElement {
     }
-    var HTMLAfIconButtonElement: {
-        prototype: HTMLAfIconButtonElement;
-        new (): HTMLAfIconButtonElement;
+    var HTMLAfHeadingElement: {
+        prototype: HTMLAfHeadingElement;
+        new (): HTMLAfHeadingElement;
     };
-    interface HTMLAfInputElementEventMap {
-        "afInput": string;
-        "afChange": string;
+    /**
+     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
+     * Supports multiple hierarchy levels, variants, and states (active, hover).
+     */
+    interface HTMLAfNavItemElement extends Components.AfNavItem, HTMLStencilElement {
     }
-    interface HTMLAfInputElement extends Components.AfInput, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLAfInputElementEventMap>(type: K, listener: (this: HTMLAfInputElement, ev: AfInputCustomEvent<HTMLAfInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLAfInputElementEventMap>(type: K, listener: (this: HTMLAfInputElement, ev: AfInputCustomEvent<HTMLAfInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    var HTMLAfNavItemElement: {
+        prototype: HTMLAfNavItemElement;
+        new (): HTMLAfNavItemElement;
+    };
+    interface HTMLAfTextElement extends Components.AfText, HTMLStencilElement {
     }
-    var HTMLAfInputElement: {
-        prototype: HTMLAfInputElement;
-        new (): HTMLAfInputElement;
+    var HTMLAfTextElement: {
+        prototype: HTMLAfTextElement;
+        new (): HTMLAfTextElement;
     };
     interface HTMLElementTagNameMap {
-        "af-badge": HTMLAfBadgeElement;
-        "af-button": HTMLAfButtonElement;
-        "af-card": HTMLAfCardElement;
-        "af-icon-button": HTMLAfIconButtonElement;
-        "af-input": HTMLAfInputElement;
+        "af-aspect-ratio": HTMLAfAspectRatioElement;
+        "af-color-swatch": HTMLAfColorSwatchElement;
+        "af-container": HTMLAfContainerElement;
+        "af-heading": HTMLAfHeadingElement;
+        "af-nav-item": HTMLAfNavItemElement;
+        "af-text": HTMLAfTextElement;
     }
 }
 declare namespace LocalJSX {
-    interface AfBadge {
+    /**
+     * A container component that maintains a fixed aspect ratio for its content.
+     * Useful for images, videos, or any content that needs to maintain specific proportions.
+     */
+    interface AfAspectRatio {
         /**
-          * Color theme of the badge
-          * @default 'brand'
+          * The aspect ratio to maintain. Can be: - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc. - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
+          * @example <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio> <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
+          * @default '1:1'
          */
-        "tone"?: 'brand' | 'neutral' | 'success';
+        "ratio"?: string;
     }
-    interface AfButton {
-        /**
-          * Disabled state
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * Loading state
-          * @default false
-         */
-        "loading"?: boolean;
+    interface AfColorSwatch {
         /**
-          * Fired when the button is clicked while enabled
+          * Color value (hex)
          */
-        "onAfClick"?: (event: AfButtonCustomEvent<MouseEvent>) => void;
+        "color": string;
         /**
-          * Size of the button
-          * @default 'md'
+          * Color name
          */
-        "size"?: 'md' | 'lg';
+        "name": string;
         /**
-          * Visual style of the button
-          * @default 'primary'
+          * Size variant
+          * @default 'default'
          */
-        "variant"?: 'primary' | 'secondary' | 'ghost';
+        "size"?: 'default' | 'large';
     }
-    interface AfCard {
-        /**
-          * Optional accent colour strip
-         */
-        "accent"?: 'brand' | 'success' | 'neutral';
+    /**
+     * A responsive container component that provides consistent margins and max-width
+     * constraints based on the Affinda grid system.
+     */
+    interface AfContainer {
         /**
-          * Visual style of the card
-          * @default 'surface'
+          * Maximum width constraint for the container - 'xlarge': 1440px container (default) - 'large': 1024px container - 'medium': 768px container - 'fluid': No max-width constraint, full width with margins
+          * @default 'xlarge'
          */
-        "variant"?: 'surface' | 'elevated';
+        "maxWidth"?: 'xlarge' | 'large' | 'medium' | 'fluid';
     }
-    interface AfIconButton {
+    interface AfHeading {
         /**
-          * Disabled state
-          * @default false
+          * Visual alignment
+          * @default 'left'
          */
-        "disabled"?: boolean;
+        "align"?: 'left' | 'center' | 'right';
         /**
-          * Accessible label text
+          * Heading level
+          * @default '1'
          */
-        "label"?: string;
-        /**
-          * Raised when the button is activated
-         */
-        "onAfClick"?: (event: AfIconButtonCustomEvent<MouseEvent>) => void;
-        /**
-          * Size preset
-          * @default 'md'
-         */
-        "size"?: 'sm' | 'md';
-        /**
-          * Visual style of the icon button
-          * @default 'solid'
-         */
-        "variant"?: 'solid' | 'soft' | 'ghost';
+        "level"?: 'xl' | '1' | '2' | '3' | '4' | '5';
     }
-    interface AfInput {
+    /**
+     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
+     * Supports multiple hierarchy levels, variants, and states (active, hover).
+     */
+    interface AfNavItem {
         /**
-          * Assistive description shown below the field
-         */
-        "description"?: string;
-        /**
-          * Disabled state
+          * Whether this nav item is currently active/selected
           * @default false
          */
-        "disabled"?: boolean;
+        "active"?: boolean;
         /**
-          * Optional label text
+          * Visual hierarchy level of the navigation item - 'primary': Bold, main navigation (larger text, prominent styling) - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
+          * @default 'primary'
          */
-        "label"?: string;
+        "hierarchy"?: 'primary' | 'secondary';
         /**
-          * Fired when the field loses focus after a change
+          * URL to navigate to when clicked
          */
-        "onAfChange"?: (event: AfInputCustomEvent<string>) => void;
+        "href"?: string;
         /**
-          * Fired as the user types
+          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
+          * @default '01'
          */
-        "onAfInput"?: (event: AfInputCustomEvent<string>) => void;
+        "variant"?: '01' | '02';
+    }
+    interface AfText {
         /**
-          * Placeholder text
+          * Visual alignment
+          * @default 'left'
          */
-        "placeholder"?: string;
+        "align"?: 'left' | 'center' | 'right';
         /**
-          * Input type attribute
-          * @default 'text'
+          * Semantic element to render
+          * @default 'p'
          */
-        "type"?: 'text' | 'email' | 'password' | 'search';
+        "as"?: 'p' | 'span' | 'div' | 'label';
         /**
-          * Current value (mutable so the component stays in sync)
-          * @default ''
+          * Text variant
+          * @default 'medium'
          */
-        "value"?: string;
+        "variant"?: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag';
     }
     interface IntrinsicElements {
-        "af-badge": AfBadge;
-        "af-button": AfButton;
-        "af-card": AfCard;
-        "af-icon-button": AfIconButton;
-        "af-input": AfInput;
+        "af-aspect-ratio": AfAspectRatio;
+        "af-color-swatch": AfColorSwatch;
+        "af-container": AfContainer;
+        "af-heading": AfHeading;
+        "af-nav-item": AfNavItem;
+        "af-text": AfText;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "af-badge": LocalJSX.AfBadge & JSXBase.HTMLAttributes<HTMLAfBadgeElement>;
-            "af-button": LocalJSX.AfButton & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
-            "af-card": LocalJSX.AfCard & JSXBase.HTMLAttributes<HTMLAfCardElement>;
-            "af-icon-button": LocalJSX.AfIconButton & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
-            "af-input": LocalJSX.AfInput & JSXBase.HTMLAttributes<HTMLAfInputElement>;
+            /**
+             * A container component that maintains a fixed aspect ratio for its content.
+             * Useful for images, videos, or any content that needs to maintain specific proportions.
+             */
+            "af-aspect-ratio": LocalJSX.AfAspectRatio & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
+            "af-color-swatch": LocalJSX.AfColorSwatch & JSXBase.HTMLAttributes<HTMLAfColorSwatchElement>;
+            /**
+             * A responsive container component that provides consistent margins and max-width
+             * constraints based on the Affinda grid system.
+             */
+            "af-container": LocalJSX.AfContainer & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
+            "af-heading": LocalJSX.AfHeading & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
+            /**
+             * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
+             * Supports multiple hierarchy levels, variants, and states (active, hover).
+             */
+            "af-nav-item": LocalJSX.AfNavItem & JSXBase.HTMLAttributes<HTMLAfNavItemElement>;
+            "af-text": LocalJSX.AfText & JSXBase.HTMLAttributes<HTMLAfTextElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/wc",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",

package/dist/affinda/af-badge.af-button.af-card.af-icon-button.af-input.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"af-badge.af-button.af-card.af-icon-button.af-input.entry.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/affinda/p-bca10492.entry.js

@@ -1,2 +0,0 @@
-export{AfBadge as af_badge,AfButton as af_button,AfCard as af_card,AfIconButton as af_icon_button,AfInput as af_input}from"./index.esm.js";import"./p-o0tfWqnY.js";
-//# sourceMappingURL=p-bca10492.entry.js.map

package/dist/affinda/p-bca10492.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AfBadge","AfButton","AfCard","AfIconButton","AfInput"],"sources":["0"],"mappings":"OAASA,oBAAqBC,sBAAuBC,kBAAmBC,+BAAgCC,wBAA2B,uBAC5H","ignoreList":[]}

package/dist/affinda/p-o0tfWqnY.js

@@ -1,3 +0,0 @@
-const e="affinda";const t={hydratedSelectorName:"hydrated",lazyLoad:true,propChangeCallback:false,updatable:true};const n=()=>{};const r=":root{--af-color-brand-primary-500:#7c3aed;--af-color-brand-primary-600:#6d28d9;--af-color-fg-default:#120f1f;--af-color-fg-muted:#5b4b8a;--af-color-fg-inverse:#f7f5ff;--af-color-bg-surface:#ffffff;--af-color-bg-subtle:#f5f3ff;--af-color-bg-inverse:#2f165e;--af-radius-sm:6px;--af-radius-md:12px;--af-radius-pill:999px;--af-space-1:4px;--af-space-2:8px;--af-space-3:12px;--af-space-4:16px;--af-font-family-sans:'Inter', 'Segoe UI', system-ui, sans-serif;--af-font-weight-regular:400;--af-font-weight-semibold:600;--af-size-font-sm:0.875rem;--af-size-font-md:1rem;--af-size-font-lg:1.125rem}[data-theme=\"dark\"]{--af-color-fg-default:#f7f5ff;--af-color-fg-muted:#dcd1ff;--af-color-fg-inverse:#120f1f;--af-color-bg-surface:#1b1530;--af-color-bg-subtle:#241943;--af-color-bg-inverse:#f7f5ff}:root{font-family:var(--af-font-family-sans);font-weight:var(--af-font-weight-regular);background-color:var(--af-color-bg-surface);color:var(--af-color-fg-default)}body{font-size:var(--af-size-font-md);display:flex;flex-direction:column;min-height:100%}.af-focus-ring{outline:2px solid var(--af-color-brand-primary-500);outline-offset:2px}.af-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";var o=Object.defineProperty;var i=(e,t)=>{for(var n in t)o(e,n,{get:t[n],enumerable:true})};var s=e=>{if(e.__stencil__getHostRef){return e.__stencil__getHostRef()}return void 0};var l=(e,t)=>{if(!t)return;e.__stencil__getHostRef=()=>t;t.t=e};var f=(e,t)=>{const n={o:0,$hostElement$:e,i:t,l:new Map,u:new Map};{n.v=new Promise((e=>n.p=e));e["s-p"]=[];e["s-rc"]=[]}{n.h=[]}const r=n;e.__stencil__getHostRef=()=>r;return r};var a=(e,t)=>t in e;var c=(e,t)=>(0,console.error)(e,t);var u=new Map;var v=(e,t,n)=>{const r=e.m.replace(/-/g,"_");const o=e.$;if(!o){return void 0}const i=u.get(o);if(i){return i[r]}
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${o}.entry.js${""}`).then((e=>{{u.set(o,e)}return e[r]}),(e=>{c(e,t.$hostElement$)}))};var d=new Map;var p="{visibility:hidden}.hydrated{visibility:inherit}";var h="slot-fb{display:contents}slot-fb[hidden]{display:none}";var m=typeof window!=="undefined"?window:{};var b={o:0,S:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,r)=>e.addEventListener(t,n,r),rel:(e,t,n,r)=>e.removeEventListener(t,n,r),ce:(e,t)=>new CustomEvent(e,t)};var y=e=>Promise.resolve(e);var g=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var w=g?(()=>!!m.document&&Object.getOwnPropertyDescriptor(m.document.adoptedStyleSheets,"length").writable)():false;var $=false;var S=[];var j=[];var x=(e,t)=>n=>{e.push(n);if(!$){$=true;if(t&&b.o&4){C(O)}else{b.raf(O)}}};var k=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){c(e)}}e.length=0};var O=()=>{k(S);{k(j);if($=S.length>0){b.raf(O)}}};var C=e=>y().then(e);var E=x(j,true);var M=e=>{e=typeof e;return e==="object"||e==="function"};function z(e){var t,n,r;return(r=(n=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:n.getAttribute("content"))!=null?r:void 0}var U=e=>e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");var P={};i(P,{err:()=>D,map:()=>N,ok:()=>R,unwrap:()=>W,unwrapErr:()=>A});var R=e=>({isOk:true,isErr:false,value:e});var D=e=>({isOk:false,isErr:true,value:e});function N(e,t){if(e.isOk){const n=t(e.value);if(n instanceof Promise){return n.then((e=>R(e)))}else{return R(n)}}if(e.isErr){const t=e.value;return D(t)}throw"should never get here"}var W=e=>{if(e.isOk){return e.value}else{throw e.value}};var A=e=>{if(e.isErr){return e.value}else{throw e.value}};function L(e){if(!g)return void 0;const t=new CSSStyleSheet;t.replaceSync(e);return t}var I;function T(e){var t;const n=this.attachShadow({mode:"open"});if(I===void 0)I=(t=L(r))!=null?t:null;if(I){if(w){n.adoptedStyleSheets.push(I)}else{n.adoptedStyleSheets=[...n.adoptedStyleSheets,I]}}}var H=(e,t="")=>{{return()=>{}}};var V=(e,t)=>{{return()=>{}}};var q=new WeakMap;var F=(e,t,n)=>{let r=d.get(e);if(g&&n){r=r||new CSSStyleSheet;if(typeof r==="string"){r=t}else{r.replaceSync(t)}}else{r=t}d.set(e,r)};var G=(e,t,n)=>{var r;const o=_(t);const i=d.get(o);if(!m.document){return o}e=e.nodeType===11?e:m.document;if(i){if(typeof i==="string"){e=e.head||e;let n=q.get(e);let s;if(!n){q.set(e,n=new Set)}if(!n.has(o)){{s=m.document.createElement("style");s.innerHTML=i;const n=(r=b.j)!=null?r:z(m.document);if(n!=null){s.setAttribute("nonce",n)}if(!(t.o&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(s,(n==null?void 0:n.parentNode)===e?n:null)}else if("host"in e){if(g){const t=new CSSStyleSheet;t.replaceSync(i);if(w){e.adoptedStyleSheets.unshift(t)}else{e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}}else{const t=e.querySelector("style");if(t){t.innerHTML=i+t.innerHTML}else{e.prepend(s)}}}else{e.append(s)}}if(t.o&1){e.insertBefore(s,null)}}if(t.o&4){s.innerHTML+=h}if(n){n.add(o)}}}else if(!e.adoptedStyleSheets.includes(i)){if(w){e.adoptedStyleSheets.push(i)}else{e.adoptedStyleSheets=[...e.adoptedStyleSheets,i]}}}return o};var Y=e=>{const t=e.i;const n=e.$hostElement$;const r=t.o;const o=H("attachStyles",t.m);const i=G(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(r&10){n["s-sc"]=i;n.classList.add(i+"-h")}o()};var _=(e,t)=>"sc-"+e.m;var B=(e,t,...n)=>{let r=null;let o=null;let i=false;let s=false;const l=[];const f=t=>{for(let n=0;n<t.length;n++){r=t[n];if(Array.isArray(r)){f(r)}else if(r!=null&&typeof r!=="boolean"){if(i=typeof e!=="function"&&!M(r)){r=String(r)}if(i&&s){l[l.length-1].k+=r}else{l.push(i?J(null,r):r)}s=i}}};f(n);if(t){if(t.key){o=t.key}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}const a=J(e,null);a.O=t;if(l.length>0){a.C=l}{a.M=o}return a};var J=(e,t)=>{const n={o:0,U:e,k:t,P:null,C:null};{n.O=null}{n.M=null}return n};var K={};var Q=e=>e&&e.U===K;var X=e=>{const t=U(e);return new RegExp(`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${t}))(${t}\\b)`,"g")};X("::slotted");X(":host");X(":host-context");var Z=(e,t,n)=>{if(e!=null&&!M(e)){if(t&4){{return e==="false"?false:e===""||!!e}}if(t&1){return String(e)}return e}return e};var ee=e=>{var t;return(t=s(e))==null?void 0:t.$hostElement$};var te=(e,t,n)=>{const r=ee(e);return{emit:e=>ne(r,t,{bubbles:true,composed:true,cancelable:true,detail:e})}};var ne=(e,t,n)=>{const r=b.ce(t,n);e.dispatchEvent(r);return r};var re=(e,t,n,r,o,i,s)=>{if(n===r){return}let l=a(e,t);let f=t.toLowerCase();if(t==="class"){const t=e.classList;const o=ie(n);let i=ie(r);{t.remove(...o.filter((e=>e&&!i.includes(e))));t.add(...i.filter((e=>e&&!o.includes(e))))}}else if(t==="key");else if(!l&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(a(m,f)){t=f.slice(2)}else{t=f[2]+t.slice(3)}if(n||r){const o=t.endsWith(se);t=t.replace(le,"");if(n){b.rel(e,t,n,o)}if(r){b.ael(e,t,r,o)}}}else{const s=M(r);if((l||s&&r!==null)&&true){try{if(!e.tagName.includes("-")){const o=r==null?"":r;if(t==="list"){l=false}else if(n==null||e[t]!=o){if(typeof e.__lookupSetter__(t)==="function"){e[t]=o}else{e.setAttribute(t,o)}}}else if(e[t]!==r){e[t]=r}}catch(e){}}if(r==null||r===false){if(r!==false||e.getAttribute(t)===""){{e.removeAttribute(t)}}}else if((!l||i&4||o)&&!s&&e.nodeType===1){r=r===true?"":r;{e.setAttribute(t,r)}}}};var oe=/\s/;var ie=e=>{if(typeof e==="object"&&e&&"baseVal"in e){e=e.baseVal}if(!e||typeof e!=="string"){return[]}return e.split(oe)};var se="Capture";var le=new RegExp(se+"$");var fe=(e,t,n,r)=>{const o=t.P.nodeType===11&&t.P.host?t.P.host:t.P;const i=e&&e.O||{};const s=t.O||{};{for(const e of ae(Object.keys(i))){if(!(e in s)){re(o,e,i[e],void 0,n,t.o)}}}for(const e of ae(Object.keys(s))){re(o,e,i[e],s[e],n,t.o)}};function ae(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var ce;var ue=false;var ve=(e,t,n)=>{const r=t.C[n];let o=0;let i;let s;if(r.k!==null){i=r.P=m.document.createTextNode(r.k)}else{if(!m.document){throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component.")}i=r.P=m.document.createElement(r.U);{fe(null,r,ue)}if(r.C){for(o=0;o<r.C.length;++o){s=ve(e,r,o);if(s){i.appendChild(s)}}}}i["s-hn"]=ce;return i};var de=(e,t,n,r,o,i)=>{let s=e;let l;if(s.shadowRoot&&s.tagName===ce){s=s.shadowRoot}for(;o<=i;++o){if(r[o]){l=ve(null,n,o);if(l){r[o].P=l;ye(s,l,t)}}}};var pe=(e,t,n)=>{for(let r=t;r<=n;++r){const t=e[r];if(t){const e=t.P;if(e){e.remove()}}}};var he=(e,t,n,r,o=false)=>{let i=0;let s=0;let l=0;let f=0;let a=t.length-1;let c=t[0];let u=t[a];let v=r.length-1;let d=r[0];let p=r[v];let h;let m;while(i<=a&&s<=v){if(c==null){c=t[++i]}else if(u==null){u=t[--a]}else if(d==null){d=r[++s]}else if(p==null){p=r[--v]}else if(me(c,d,o)){be(c,d,o);c=t[++i];d=r[++s]}else if(me(u,p,o)){be(u,p,o);u=t[--a];p=r[--v]}else if(me(c,p,o)){be(c,p,o);ye(e,c.P,u.P.nextSibling);c=t[++i];p=r[--v]}else if(me(u,d,o)){be(u,d,o);ye(e,u.P,c.P);u=t[--a];d=r[++s]}else{l=-1;{for(f=i;f<=a;++f){if(t[f]&&t[f].M!==null&&t[f].M===d.M){l=f;break}}}if(l>=0){m=t[l];if(m.U!==d.U){h=ve(t&&t[s],n,l)}else{be(m,d,o);t[l]=void 0;h=m.P}d=r[++s]}else{h=ve(t&&t[s],n,s);d=r[++s]}if(h){{ye(c.P.parentNode,h,c.P)}}}}if(i>a){de(e,r[v+1]==null?null:r[v+1].P,n,r,s,v)}else if(s>v){pe(t,i,a)}};var me=(e,t,n=false)=>{if(e.U===t.U){if(!n){return e.M===t.M}if(n&&!e.M&&t.M){e.M=t.M}return true}return false};var be=(e,n,r=false)=>{const o=n.P=e.P;const i=e.C;const s=n.C;const l=n.k;if(l===null){{fe(e,n,ue)}if(i!==null&&s!==null){he(o,i,n,s,r)}else if(s!==null){if(e.k!==null){o.textContent=""}de(o,null,n,s,0,s.length-1)}else if(!r&&t.updatable&&i!==null){pe(i,0,i.length-1)}else;}else if(e.k!==l){o.data=l}};var ye=(e,t,n)=>{{return e==null?void 0:e.insertBefore(t,n)}};var ge=(e,t,n=false)=>{const r=e.$hostElement$;const o=e.i;const i=e.R||J(null,null);const s=Q(t);const l=s?t:B(null,null,t);ce=r.tagName;if(o.D){l.O=l.O||{};o.D.forEach((([e,t])=>{{l.O[t]=r[e]}}))}if(n&&l.O){for(const e of Object.keys(l.O)){if(r.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){l.O[e]=r[e]}}}l.U=null;l.o|=4;e.R=l;l.P=i.P=r.shadowRoot||r;be(i,l,n)};var we=(e,t)=>{if(t&&!e.N&&t["s-p"]){const n=t["s-p"].push(new Promise((r=>e.N=()=>{t["s-p"].splice(n-1,1);r()})))}};var $e=(e,t)=>{{e.o|=16}if(e.o&4){e.o|=512;return}we(e,e.W);const n=()=>Se(e,t);if(t){queueMicrotask((()=>{n()}));return}return E(n)};var Se=(e,t)=>{const n=e.$hostElement$;const r=H("scheduleUpdate",e.i.m);const o=e.t;if(!o){throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let i;if(t){{if(e.h.length){e.h.forEach((e=>e(n)))}}i=Me(o,"componentWillLoad",void 0,n)}else{i=Me(o,"componentWillUpdate",void 0,n)}i=je(i,(()=>Me(o,"componentWillRender",void 0,n)));r();return je(i,(()=>ke(e,o,t)))};var je=(e,t)=>xe(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var xe=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var ke=async(e,t,n)=>{var r;const o=e.$hostElement$;const i=H("update",e.i.m);const s=o["s-rc"];if(n){Y(e)}const l=H("render",e.i.m);{Oe(e,t,o,n)}if(s){s.map((e=>e()));o["s-rc"]=void 0}l();i();{const t=(r=o["s-p"])!=null?r:[];const n=()=>Ce(e);if(t.length===0){n()}else{Promise.all(t).then(n);e.o|=4;t.length=0}}};var Oe=(e,t,n,r)=>{try{t=t.render();{e.o&=-17}{e.o|=2}{{{ge(e,t,r)}}}}catch(t){c(t,e.$hostElement$)}return null};var Ce=e=>{const t=e.i.m;const n=e.$hostElement$;const r=H("postUpdate",t);const o=e.t;const i=e.W;Me(o,"componentDidRender",void 0,n);if(!(e.o&64)){e.o|=64;{ze(n)}Me(o,"componentDidLoad",void 0,n);r();{e.p(n);if(!i){Ee()}}}else{Me(o,"componentDidUpdate",void 0,n);r()}{if(e.N){e.N();e.N=void 0}if(e.o&512){C((()=>$e(e,false)))}e.o&=-517}};var Ee=t=>{C((()=>ne(m,"appload",{detail:{namespace:e}})))};var Me=(e,t,n,r)=>{if(e&&e[t]){try{return e[t](n)}catch(e){c(e,r)}}return void 0};var ze=e=>{var n;return e.classList.add((n=t.hydratedSelectorName)!=null?n:"hydrated")};var Ue=(e,t)=>s(e).l.get(t);var Pe=(e,t,n,r)=>{const o=s(e);if(!o){return}if(!o){throw new Error(`Couldn't find host element for "${r.m}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`)}const i=o.l.get(t);const l=o.o;const f=o.t;n=Z(n,r.A[t][0]);const a=Number.isNaN(i)&&Number.isNaN(n);const c=n!==i&&!a;if((!(l&8)||i===void 0)&&c){o.l.set(t,n);if(f){if((l&(2|16))===2){if(f.componentShouldUpdate){if(f.componentShouldUpdate(n,i,t)===false){return}}$e(o,false)}}}};var Re=(e,n,r)=>{var o,i;const l=e.prototype;if(n.A||t.propChangeCallback){const f=Object.entries((o=n.A)!=null?o:{});f.map((([e,[t]])=>{if(t&31||r&2&&t&32){const{get:o,set:i}=Object.getOwnPropertyDescriptor(l,e)||{};if(o)n.A[e][0]|=2048;if(i)n.A[e][0]|=4096;if(r&1||!o){Object.defineProperty(l,e,{get(){{if((n.A[e][0]&2048)===0){return Ue(this,e)}const t=s(this);const r=t?t.t:l;if(!r)return;return r[e]}},configurable:true,enumerable:true})}Object.defineProperty(l,e,{set(o){const l=s(this);if(!l){return}if(i){const r=t&32?this[e]:l.$hostElement$[e];if(typeof r==="undefined"&&l.l.get(e)){o=l.l.get(e)}i.apply(this,[Z(o,t)]);o=t&32?this[e]:l.$hostElement$[e];Pe(this,e,o,n);return}{if((r&1)===0||(n.A[e][0]&4096)===0){Pe(this,e,o,n);if(r&1&&!l.t){l.h.push((()=>{if(n.A[e][0]&4096&&l.t[e]!==l.l.get(e)){l.t[e]=o}}))}return}const i=()=>{const r=l.t[e];if(!l.l.get(e)&&r){l.l.set(e,r)}l.t[e]=Z(o,t);Pe(this,e,l.t[e],n)};if(l.t){i()}else{l.h.push((()=>{i()}))}}}})}}));if(r&1){const r=new Map;l.attributeChangedCallback=function(e,o,i){b.jmp((()=>{var a;const c=r.get(e);const u=s(this);if(this.hasOwnProperty(c)&&t.lazyLoad){i=this[c];delete this[c]}if(l.hasOwnProperty(c)&&typeof this[c]==="number"&&this[c]==i){return}else if(c==null){const t=u==null?void 0:u.o;if(u&&t&&!(t&8)&&t&128&&i!==o){const t=u.t;const r=(a=n.L)==null?void 0:a[e];r==null?void 0:r.forEach((n=>{if(t[n]!=null){t[n].call(t,i,o,e)}}))}return}const v=f.find((([e])=>e===c));if(v&&v[1][0]&4){i=i===null||i==="false"?false:true}const d=Object.getOwnPropertyDescriptor(l,c);if(i!=this[c]&&(!d.get||!!d.set)){this[c]=i}}))};e.observedAttributes=Array.from(new Set([...Object.keys((i=n.L)!=null?i:{}),...f.filter((([e,t])=>t[0]&31)).map((([e,t])=>{var o;const i=t[1]||e;r.set(i,e);if(t[0]&512){(o=n.D)==null?void 0:o.push([e,i])}return i}))]))}}return e};var De=async(e,t,n,r)=>{let o;if((t.o&32)===0){t.o|=32;const r=n.$;if(r){const r=v(n,t);if(r&&"then"in r){const e=V();o=await r;e()}else{o=r}if(!o){throw new Error(`Constructor for "${n.m}#${t.I}" was not found`)}if(!o.isProxied){Re(o,n,2);o.isProxied=true}const i=H("createInstance",n.m);{t.o|=8}try{new o(t)}catch(t){c(t,e)}{t.o&=-9}i();Ne(t.t,e)}else{o=e.constructor;const n=e.localName;customElements.whenDefined(n).then((()=>t.o|=128))}if(o&&o.style){let e;if(typeof o.style==="string"){e=o.style}const t=_(n);if(!d.has(t)){const r=H("registerStyles",n.m);F(t,e,!!(n.o&1));r()}}}const i=t.W;const s=()=>$e(t,true);if(i&&i["s-rc"]){i["s-rc"].push(s)}else{s()}};var Ne=(e,t)=>{{Me(e,"connectedCallback",void 0,t)}};var We=e=>{if((b.o&1)===0){const t=s(e);if(!t){return}const n=t.i;const r=H("connectedCallback",n.m);if(!(t.o&1)){t.o|=1;{let n=e;while(n=n.parentNode||n.host){if(n["s-p"]){we(t,t.W=n);break}}}if(n.A){Object.entries(n.A).map((([t,[n]])=>{if(n&31&&t in e&&e[t]!==Object.prototype[t]){const n=e[t];delete e[t];e[t]=n}}))}{De(e,t,n)}}else{if(t==null?void 0:t.t){Ne(t.t,e)}else if(t==null?void 0:t.v){t.v.then((()=>Ne(t.t,e)))}}r()}};var Ae=(e,t)=>{{Me(e,"disconnectedCallback",void 0,t||e)}};var Le=async e=>{if((b.o&1)===0){const t=s(e);if(t==null?void 0:t.t){Ae(t.t,e)}else if(t==null?void 0:t.v){t.v.then((()=>Ae(t.t,e)))}}if(q.has(e)){q.delete(e)}if(e.shadowRoot&&q.has(e.shadowRoot)){q.delete(e.shadowRoot)}};var Ie=(e,t={})=>{var n;if(!m.document){console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");return}const r=H();const o=[];const i=t.exclude||[];const l=m.customElements;const a=m.document.head;const c=a.querySelector("meta[charset]");const u=m.document.createElement("style");const v=[];let d;let y=true;Object.assign(b,t);b.S=new URL(t.resourcesUrl||"./",m.document.baseURI).href;let g=false;e.map((e=>{e[1].map((t=>{const n={o:t[0],m:t[1],A:t[2],T:t[3]};if(n.o&4){g=true}{n.A=t[2]}{n.D=[]}const r=n.m;const a=class extends HTMLElement{constructor(e){super(e);this.hasRegisteredEventListeners=false;e=this;f(e,n);if(n.o&1){{if(!e.shadowRoot){T.call(e,n)}else{if(e.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${n.m}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}}connectedCallback(){const e=s(this);if(!e){return}if(!this.hasRegisteredEventListeners){this.hasRegisteredEventListeners=true}if(d){clearTimeout(d);d=null}if(y){v.push(this)}else{b.jmp((()=>We(this)))}}disconnectedCallback(){b.jmp((()=>Le(this)));b.raf((()=>{var e;const t=s(this);if(!t){return}const n=v.findIndex((e=>e===this));if(n>-1){v.splice(n,1)}if(((e=t==null?void 0:t.R)==null?void 0:e.P)instanceof Node&&!t.R.P.isConnected){delete t.R.P}}))}componentOnReady(){var e;return(e=s(this))==null?void 0:e.v}};n.$=e[0];if(!i.includes(r)&&!l.get(r)){o.push(r);l.define(r,Re(a,n,1))}}))}));if(o.length>0){if(g){u.textContent+=h}{u.textContent+=o.sort()+p}if(u.innerHTML.length){u.setAttribute("data-styles","");const e=(n=b.j)!=null?n:z(m.document);if(e!=null){u.setAttribute("nonce",e)}a.insertBefore(u,c?c.nextSibling:a.firstChild)}}y=false;if(v.length){v.map((e=>e.connectedCallback()))}else{{b.jmp((()=>d=setTimeout(Ee,30)))}}r()};var Te=e=>b.j=e;export{Ie as b,te as c,n as g,B as h,y as p,l as r,Te as s};
-//# sourceMappingURL=p-o0tfWqnY.js.map