@affinda/wc 0.0.1 → 0.0.3

package/dist/types/components.d.ts

@@ -6,306 +6,559 @@
  */
 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 {
         /**
-          * Disabled state
+          * Whether the button is disabled
           * @default false
          */
         "disabled": boolean;
         /**
-          * Loading state
-          * @default false
+          * Optional href to render as a link
+         */
+        "href"?: string;
+        /**
+          * The size of the button
+          * @default 'default'
          */
-        "loading": boolean;
+        "size": 'default' | 'small';
         /**
-          * Size of the button
-          * @default 'md'
+          * Button type (when not using href)
+          * @default 'button'
          */
-        "size": 'md' | 'lg';
+        "type": 'button' | 'submit' | 'reset';
         /**
-          * Visual style of the button
+          * The visual variant of the button
           * @default 'primary'
          */
-        "variant": 'primary' | 'secondary' | 'ghost';
+        "variant": 'primary' | 'secondary' | 'outline' | 'ghost';
+    }
+    interface AfButtonGroup {
+        /**
+          * Layout direction of the button group
+          * @default 'horizontal'
+         */
+        "direction": 'horizontal' | 'vertical';
+        /**
+          * Gap between buttons
+          * @default '8px'
+         */
+        "gap": string;
+    }
+    interface AfColorSwatch {
+        /**
+          * Color value (hex)
+         */
+        "color": string;
+        /**
+          * Color name
+         */
+        "name": string;
+        /**
+          * Size variant
+          * @default 'default'
+         */
+        "size": 'default' | 'large';
+    }
+    /**
+     * A responsive container component that provides consistent margins and max-width
+     * constraints based on the Affinda grid system.
+     */
+    interface AfContainer {
+        /**
+          * 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'
+         */
+        "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 {
         /**
-          * Disabled state
+          * Accessible label for screen readers
+         */
+        "ariaLabel": string;
+        /**
+          * Whether the button is disabled
           * @default false
          */
         "disabled": boolean;
         /**
-          * Accessible label text
+          * Optional href to render as a link
          */
-        "label"?: string;
+        "href"?: string;
         /**
-          * Size preset
-          * @default 'md'
+          * The size of the button
+          * @default 'medium'
          */
-        "size": 'sm' | 'md';
+        "size": 'large' | 'medium' | 'small';
         /**
-          * Visual style of the icon button
-          * @default 'solid'
+          * Button type (when not using href)
+          * @default 'button'
          */
-        "variant": 'solid' | 'soft' | 'ghost';
-    }
-    interface AfInput {
+        "type": 'button' | 'submit' | 'reset';
         /**
-          * Assistive description shown below the field
+          * The visual variant of the button
+          * @default 'primary'
          */
-        "description"?: string;
+        "variant": 'primary' | 'secondary' | 'outline' | 'ghost';
+    }
+    /**
+     * Affinda logo component
+     */
+    interface AfLogo {
+    }
+    /**
+     * 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;
+        /**
+          * 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'
+         */
+        "hierarchy": 'primary' | 'secondary';
+        /**
+          * URL to navigate to when clicked
+         */
+        "href"?: string;
         /**
-          * Optional label text
+          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
+          * @default '01'
          */
-        "label"?: string;
+        "variant": '01' | '02';
+    }
+    /**
+     * A full-width navigation bar component that provides the main site navigation.
+     * Features a pill-shaped container with logo, navigation links, and action buttons.
+     */
+    interface AfNavbar {
+    }
+    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 AfTypographyLockup {
+        /**
+          * The breakpoint for responsive typography
+          * @default 'desktop'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Button alignment (horizontal or vertical stacking)
+          * @default 'vertical'
+         */
+        "buttonAlignment": 'horizontal' | 'vertical';
+        /**
+          * The heading size (1-5, where 1 is largest)
+          * @default 2
+         */
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        /**
+          * Maximum width for the copy section (in pixels)
+         */
+        "maxWidth"?: number;
+        /**
+          * Text alignment
+          * @default 'left'
+         */
+        "textAlignment": 'left' | 'center';
     }
-}
-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 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;
     };
-    interface HTMLAfCardElement extends Components.AfCard, HTMLStencilElement {
+    interface HTMLAfButtonGroupElement extends Components.AfButtonGroup, HTMLStencilElement {
+    }
+    var HTMLAfButtonGroupElement: {
+        prototype: HTMLAfButtonGroupElement;
+        new (): HTMLAfButtonGroupElement;
+    };
+    interface HTMLAfColorSwatchElement extends Components.AfColorSwatch, HTMLStencilElement {
+    }
+    var HTMLAfColorSwatchElement: {
+        prototype: HTMLAfColorSwatchElement;
+        new (): HTMLAfColorSwatchElement;
+    };
+    /**
+     * 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 HTMLAfHeadingElement extends Components.AfHeading, HTMLStencilElement {
     }
+    var HTMLAfHeadingElement: {
+        prototype: HTMLAfHeadingElement;
+        new (): HTMLAfHeadingElement;
+    };
     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;
     }
     var HTMLAfIconButtonElement: {
         prototype: HTMLAfIconButtonElement;
         new (): HTMLAfIconButtonElement;
     };
-    interface HTMLAfInputElementEventMap {
-        "afInput": string;
-        "afChange": string;
-    }
-    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 HTMLAfInputElement: {
-        prototype: HTMLAfInputElement;
-        new (): HTMLAfInputElement;
+    /**
+     * Affinda logo component
+     */
+    interface HTMLAfLogoElement extends Components.AfLogo, HTMLStencilElement {
+    }
+    var HTMLAfLogoElement: {
+        prototype: HTMLAfLogoElement;
+        new (): HTMLAfLogoElement;
+    };
+    /**
+     * 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 {
+    }
+    var HTMLAfNavItemElement: {
+        prototype: HTMLAfNavItemElement;
+        new (): HTMLAfNavItemElement;
+    };
+    /**
+     * A full-width navigation bar component that provides the main site navigation.
+     * Features a pill-shaped container with logo, navigation links, and action buttons.
+     */
+    interface HTMLAfNavbarElement extends Components.AfNavbar, HTMLStencilElement {
+    }
+    var HTMLAfNavbarElement: {
+        prototype: HTMLAfNavbarElement;
+        new (): HTMLAfNavbarElement;
+    };
+    interface HTMLAfTextElement extends Components.AfText, HTMLStencilElement {
+    }
+    var HTMLAfTextElement: {
+        prototype: HTMLAfTextElement;
+        new (): HTMLAfTextElement;
+    };
+    interface HTMLAfTypographyLockupElement extends Components.AfTypographyLockup, HTMLStencilElement {
+    }
+    var HTMLAfTypographyLockupElement: {
+        prototype: HTMLAfTypographyLockupElement;
+        new (): HTMLAfTypographyLockupElement;
     };
     interface HTMLElementTagNameMap {
-        "af-badge": HTMLAfBadgeElement;
+        "af-aspect-ratio": HTMLAfAspectRatioElement;
         "af-button": HTMLAfButtonElement;
-        "af-card": HTMLAfCardElement;
+        "af-button-group": HTMLAfButtonGroupElement;
+        "af-color-swatch": HTMLAfColorSwatchElement;
+        "af-container": HTMLAfContainerElement;
+        "af-heading": HTMLAfHeadingElement;
         "af-icon-button": HTMLAfIconButtonElement;
-        "af-input": HTMLAfInputElement;
+        "af-logo": HTMLAfLogoElement;
+        "af-nav-item": HTMLAfNavItemElement;
+        "af-navbar": HTMLAfNavbarElement;
+        "af-text": HTMLAfTextElement;
+        "af-typography-lockup": HTMLAfTypographyLockupElement;
     }
 }
 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
+          * Whether the button is disabled
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Loading state
-          * @default false
+          * Optional href to render as a link
          */
-        "loading"?: boolean;
+        "href"?: string;
         /**
-          * Fired when the button is clicked while enabled
+          * The size of the button
+          * @default 'default'
          */
-        "onAfClick"?: (event: AfButtonCustomEvent<MouseEvent>) => void;
+        "size"?: 'default' | 'small';
         /**
-          * Size of the button
-          * @default 'md'
+          * Button type (when not using href)
+          * @default 'button'
          */
-        "size"?: 'md' | 'lg';
+        "type"?: 'button' | 'submit' | 'reset';
         /**
-          * Visual style of the button
+          * The visual variant of the button
           * @default 'primary'
          */
-        "variant"?: 'primary' | 'secondary' | 'ghost';
+        "variant"?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    }
+    interface AfButtonGroup {
+        /**
+          * Layout direction of the button group
+          * @default 'horizontal'
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Gap between buttons
+          * @default '8px'
+         */
+        "gap"?: string;
+    }
+    interface AfColorSwatch {
+        /**
+          * Color value (hex)
+         */
+        "color": string;
+        /**
+          * Color name
+         */
+        "name": string;
+        /**
+          * Size variant
+          * @default 'default'
+         */
+        "size"?: 'default' | 'large';
+    }
+    /**
+     * A responsive container component that provides consistent margins and max-width
+     * constraints based on the Affinda grid system.
+     */
+    interface AfContainer {
+        /**
+          * 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'
+         */
+        "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 {
         /**
-          * Disabled state
+          * Accessible label for screen readers
+         */
+        "ariaLabel": string;
+        /**
+          * Whether the button is disabled
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Accessible label text
+          * Optional href to render as a link
          */
-        "label"?: string;
+        "href"?: string;
         /**
-          * Raised when the button is activated
+          * The size of the button
+          * @default 'medium'
          */
-        "onAfClick"?: (event: AfIconButtonCustomEvent<MouseEvent>) => void;
+        "size"?: 'large' | 'medium' | 'small';
         /**
-          * Size preset
-          * @default 'md'
+          * Button type (when not using href)
+          * @default 'button'
          */
-        "size"?: 'sm' | 'md';
+        "type"?: 'button' | 'submit' | 'reset';
         /**
-          * Visual style of the icon button
-          * @default 'solid'
+          * The visual variant of the button
+          * @default 'primary'
          */
-        "variant"?: 'solid' | 'soft' | 'ghost';
+        "variant"?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    }
+    /**
+     * Affinda logo component
+     */
+    interface AfLogo {
     }
-    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
+          * Whether this nav item is currently active/selected
+          * @default false
          */
-        "description"?: string;
+        "active"?: boolean;
         /**
-          * Disabled state
-          * @default false
+          * 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'
          */
-        "disabled"?: boolean;
+        "hierarchy"?: 'primary' | 'secondary';
+        /**
+          * URL to navigate to when clicked
+         */
+        "href"?: string;
+        /**
+          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
+          * @default '01'
+         */
+        "variant"?: '01' | '02';
+    }
+    /**
+     * A full-width navigation bar component that provides the main site navigation.
+     * Features a pill-shaped container with logo, navigation links, and action buttons.
+     */
+    interface AfNavbar {
+    }
+    interface AfText {
+        /**
+          * Visual alignment
+          * @default 'left'
+         */
+        "align"?: 'left' | 'center' | 'right';
         /**
-          * Optional label text
+          * Semantic element to render
+          * @default 'p'
          */
-        "label"?: string;
+        "as"?: 'p' | 'span' | 'div' | 'label';
+        /**
+          * Text variant
+          * @default 'medium'
+         */
+        "variant"?: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag';
+    }
+    interface AfTypographyLockup {
         /**
-          * Fired when the field loses focus after a change
+          * The breakpoint for responsive typography
+          * @default 'desktop'
          */
-        "onAfChange"?: (event: AfInputCustomEvent<string>) => void;
+        "breakpoint"?: 'desktop' | 'mobile';
         /**
-          * Fired as the user types
+          * Button alignment (horizontal or vertical stacking)
+          * @default 'vertical'
          */
-        "onAfInput"?: (event: AfInputCustomEvent<string>) => void;
+        "buttonAlignment"?: 'horizontal' | 'vertical';
         /**
-          * Placeholder text
+          * The heading size (1-5, where 1 is largest)
+          * @default 2
          */
-        "placeholder"?: string;
+        "headingSize"?: 1 | 2 | 3 | 4 | 5;
         /**
-          * Input type attribute
-          * @default 'text'
+          * Maximum width for the copy section (in pixels)
          */
-        "type"?: 'text' | 'email' | 'password' | 'search';
+        "maxWidth"?: number;
         /**
-          * Current value (mutable so the component stays in sync)
-          * @default ''
+          * Text alignment
+          * @default 'left'
          */
-        "value"?: string;
+        "textAlignment"?: 'left' | 'center';
     }
     interface IntrinsicElements {
-        "af-badge": AfBadge;
+        "af-aspect-ratio": AfAspectRatio;
         "af-button": AfButton;
-        "af-card": AfCard;
+        "af-button-group": AfButtonGroup;
+        "af-color-swatch": AfColorSwatch;
+        "af-container": AfContainer;
+        "af-heading": AfHeading;
         "af-icon-button": AfIconButton;
-        "af-input": AfInput;
+        "af-logo": AfLogo;
+        "af-nav-item": AfNavItem;
+        "af-navbar": AfNavbar;
+        "af-text": AfText;
+        "af-typography-lockup": AfTypographyLockup;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "af-badge": LocalJSX.AfBadge & JSXBase.HTMLAttributes<HTMLAfBadgeElement>;
+            /**
+             * 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-button": LocalJSX.AfButton & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
-            "af-card": LocalJSX.AfCard & JSXBase.HTMLAttributes<HTMLAfCardElement>;
+            "af-button-group": LocalJSX.AfButtonGroup & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
+            "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>;
             "af-icon-button": LocalJSX.AfIconButton & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
-            "af-input": LocalJSX.AfInput & JSXBase.HTMLAttributes<HTMLAfInputElement>;
+            /**
+             * Affinda logo component
+             */
+            "af-logo": LocalJSX.AfLogo & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
+            /**
+             * 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>;
+            /**
+             * A full-width navigation bar component that provides the main site navigation.
+             * Features a pill-shaped container with logo, navigation links, and action buttons.
+             */
+            "af-navbar": LocalJSX.AfNavbar & JSXBase.HTMLAttributes<HTMLAfNavbarElement>;
+            "af-text": LocalJSX.AfText & JSXBase.HTMLAttributes<HTMLAfTextElement>;
+            "af-typography-lockup": LocalJSX.AfTypographyLockup & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
         }
     }
 }