@affinda/wc 0.0.14 → 0.0.16

package/dist/collection/components/af-navbar/af-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAMW,mBAAc,GAAY,KAAK,CAAC;QAEjC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC;KAkDH;IAhDC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBAGN,+DACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBACnB,wBAAwB,mBACpB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAEpD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,sBAAsB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC5F,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,yBAAyB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC/F,CACP,CACM;wBAET,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;4BACjE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;wBACpE,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, State, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  @State() mobileMenuOpen: boolean = false;\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n  };\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Handle escape key to close dropdowns\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel\">\n              <slot name=\"dropdown-solutions\"></slot>\n              <slot name=\"dropdown-pricing\"></slot>\n              <slot name=\"dropdown-resources\"></slot>\n              <slot name=\"dropdown\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu dropdown slots */}\n        {this.mobileMenuOpen && (\n          <div class=\"mobile-dropdowns\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-number-badge/af-number-badge.css

@@ -0,0 +1,30 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);
+  font-weight: 500;
+}
+
+/* In Circle variant - filled soft-clay circle */
+.badge.variant-inCircle {
+  border-radius: 50%;
+  background-color: var(--af-color-brand-soft-clay, #B09670);
+  color: var(--af-color-brand-inkwell, #14343B);
+}
+
+/* Outlined variant - text only in mist-green */
+.badge.variant-outlined {
+  background-color: transparent;
+  color: var(--af-color-brand-mist-green, #C6D5D1);
+}
+

package/dist/collection/components/af-number-badge/af-number-badge.js

@@ -0,0 +1,131 @@
+import { h, Host } from "@stencil/core";
+/**
+ * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+ * Perfect for numbered lists, step indicators, or ordered content.
+ *
+ * @example
+ * ```html
+ * <af-number-badge number="1" variant="inCircle" size="48"></af-number-badge>
+ * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
+ * ```
+ */
+export class AfNumberBadge {
+    constructor() {
+        /**
+         * The number to display (1-10)
+         */
+        this.number = 1;
+        /**
+         * Visual variant of the badge
+         * - `inCircle` - Number in filled soft-clay circle
+         * - `outlined` - Number text only in mist-green
+         */
+        this.variant = 'inCircle';
+        /**
+         * Size of the badge in pixels
+         */
+        this.size = 48;
+    }
+    render() {
+        const isInCircle = this.variant === 'inCircle';
+        const fontSize = isInCircle ? this.size * 0.4 : this.size * 0.8;
+        const badgeStyle = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+            fontSize: `${fontSize}px`,
+        };
+        return (h(Host, { key: '8b3d22147d452da450899cb2853957d601d321cb', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'de26b2d9ad6139ecb2ebe764020577f9887ececf', class: {
+                'badge': true,
+                [`variant-${this.variant}`]: true,
+            }, style: badgeStyle }, this.number)));
+    }
+    static get is() { return "af-number-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-number-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-number-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "number": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "NumberBadgeNumber",
+                    "resolved": "1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+                    "references": {
+                        "NumberBadgeNumber": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeNumber"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number to display (1-10)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number",
+                "defaultValue": "1"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NumberBadgeVariant",
+                    "resolved": "\"inCircle\" | \"outlined\"",
+                    "references": {
+                        "NumberBadgeVariant": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the badge\n- `inCircle` - Number in filled soft-clay circle\n- `outlined` - Number text only in mist-green"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'inCircle'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the badge in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "48"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-number-badge.js.map

package/dist/collection/components/af-number-badge/af-number-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-number-badge.js","sourceRoot":"","sources":["../../../src/components/af-number-badge/af-number-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;;;;;;GASG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME;;WAEG;QACK,WAAM,GAAsB,CAAC,CAAC;QAEtC;;;;WAIG;QACK,YAAO,GAAuB,UAAU,CAAC;QAEjD;;WAEG;QACK,SAAI,GAAW,EAAE,CAAC;KA6B3B;IA3BC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAEhE,MAAM,UAAU,GAAG;YACjB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACxB,QAAQ,EAAE,GAAG,QAAQ,IAAI;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,gBACE,UAAU,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAEhE,6DACE,KAAK,EAAE;oBACL,OAAO,EAAE,IAAI;oBACb,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;iBAClC,EACD,KAAK,EAAE,UAAU,IAEhB,IAAI,CAAC,MAAM,CACP,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type NumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\nexport type NumberBadgeVariant = 'inCircle' | 'outlined';\n\n/**\n * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.\n * Perfect for numbered lists, step indicators, or ordered content.\n * \n * @example\n * ```html\n * <af-number-badge number=\"1\" variant=\"inCircle\" size=\"48\"></af-number-badge>\n * <af-number-badge number=\"5\" variant=\"outlined\" size=\"32\"></af-number-badge>\n * ```\n */\n@Component({\n  tag: 'af-number-badge',\n  styleUrl: 'af-number-badge.css',\n  shadow: true\n})\nexport class AfNumberBadge {\n  /**\n   * The number to display (1-10)\n   */\n  @Prop() number: NumberBadgeNumber = 1;\n\n  /**\n   * Visual variant of the badge\n   * - `inCircle` - Number in filled soft-clay circle\n   * - `outlined` - Number text only in mist-green\n   */\n  @Prop() variant: NumberBadgeVariant = 'inCircle';\n\n  /**\n   * Size of the badge in pixels\n   */\n  @Prop() size: number = 48;\n\n  render() {\n    const isInCircle = this.variant === 'inCircle';\n    const fontSize = isInCircle ? this.size * 0.4 : this.size * 0.8;\n\n    const badgeStyle = {\n      width: `${this.size}px`,\n      height: `${this.size}px`,\n      fontSize: `${fontSize}px`,\n    };\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={`Number ${this.number}${isInCircle ? ' badge' : ''}`}\n      >\n        <span\n          class={{\n            'badge': true,\n            [`variant-${this.variant}`]: true,\n          }}\n          style={badgeStyle}\n        >\n          {this.number}\n        </span>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-progress-line/af-progress-line.css

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Progress Line Base Styles
+   ========================================================================== */
+
+.progress-line {
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-line--horizontal {
+  height: 3px;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Background Track
+   ========================================================================== */
+
+.progress-line__background {
+  position: absolute;
+  inset: 0;
+  background: var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));
+  height: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ==========================================================================
+   Active Progress
+   ========================================================================== */
+
+.progress-line__active {
+  position: relative;
+  height: 100%;
+  min-width: 1px;
+  background: var(--af-background-border-active, var(--colour-background-border-active, #8a7049));
+  transition: width 0.15s ease-out;
+}
+

package/dist/collection/components/af-progress-line/af-progress-line.js

@@ -0,0 +1,86 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Progress Line atom component for displaying scroll or completion progress.
+ *
+ * Shows a horizontal bar with a filled portion indicating progress.
+ * Used primarily for carousel scroll indicators.
+ */
+export class AfProgressLine {
+    constructor() {
+        /**
+         * Progress value from 0 to 1 (0 = 0%, 1 = 100%).
+         */
+        this.progress = 0;
+        /**
+         * Orientation of the progress line.
+         * Currently only horizontal is supported.
+         */
+        this.orientation = 'horizontal';
+    }
+    render() {
+        // Clamp progress between 0 and 1
+        const clampedProgress = Math.max(0, Math.min(1, this.progress));
+        const progressPercent = clampedProgress * 100;
+        return (h(Host, { key: '0b5f1dccd9d5d3d80a68dbecd7c78e9c7ba1e9eb' }, h("div", { key: '70083ced351eeed528c93787c47299af86edf693', class: {
+                'progress-line': true,
+                [`progress-line--${this.orientation}`]: true,
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '6a37704b7183543b589a872c44413fafc6a643dc', class: "progress-line__background" }), h("div", { key: 'ff7cee0f9e117e3ea346d195126c635d86efc5da', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+    }
+    static get is() { return "af-progress-line"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-progress-line.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-progress-line.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress value from 0 to 1 (0 = 0%, 1 = 100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress",
+                "defaultValue": "0"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal'",
+                    "resolved": "\"horizontal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the progress line.\nCurrently only horizontal is supported."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-progress-line.js.map

package/dist/collection/components/af-progress-line/af-progress-line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-progress-line.js","sourceRoot":"","sources":["../../../src/components/af-progress-line/af-progress-line.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE;;WAEG;QACK,aAAQ,GAAW,CAAC,CAAC;QAE7B;;;WAGG;QACK,gBAAW,GAAiB,YAAY,CAAC;KA4BlD;IA1BC,MAAM;QACJ,iCAAiC;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChE,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG,CAAC;QAE9C,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,CAAC,kBAAkB,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;iBAC7C,EACD,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,mBAC3B,CAAC,mBACD,GAAG;gBAElB,4DAAK,KAAK,EAAC,2BAA2B,GAAG;gBACzC,4DACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,GACvC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n */\n@Component({\n  tag: 'af-progress-line',\n  styleUrl: 'af-progress-line.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfProgressLine {\n  /**\n   * Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n   */\n  @Prop() progress: number = 0;\n\n  /**\n   * Orientation of the progress line.\n   * Currently only horizontal is supported.\n   */\n  @Prop() orientation: 'horizontal' = 'horizontal';\n\n  render() {\n    // Clamp progress between 0 and 1\n    const clampedProgress = Math.max(0, Math.min(1, this.progress));\n    const progressPercent = clampedProgress * 100;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'progress-line': true,\n            [`progress-line--${this.orientation}`]: true,\n          }}\n          role=\"progressbar\"\n          aria-valuenow={Math.round(progressPercent)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n        >\n          <div class=\"progress-line__background\" />\n          <div\n            class=\"progress-line__active\"\n            style={{ width: `${progressPercent}%` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-radio/af-radio.css

@@ -0,0 +1,97 @@
+:host {
+  display: inline-block;
+}
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));
+  user-select: none;
+}
+
+.radio.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Hidden native input */
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Custom radio control */
+.control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radii-radio, 9999px);
+  border: 1px solid var(--forms-control-stroke, #d0d6d8);
+  background: var(--forms-control-bg-default, #ffffff);
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+}
+
+/* Checked state */
+.control.checked {
+  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
+  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
+}
+
+/* Disabled state */
+.control.disabled {
+  background: var(--forms-control-bg-default-disabled, #e8ebeb);
+  border-color: var(--forms-control-stroke-disabled, #d0d6d8);
+}
+
+.control.checked.disabled {
+  background: var(--forms-control-bg-active-disabled, #708380);
+  border-color: var(--forms-control-bg-active-disabled, #708380);
+}
+
+/* Hover state */
+.radio:not(.disabled):hover .control {
+  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
+}
+
+/* Focus state */
+.input:focus-visible + .control {
+  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);
+  outline: none;
+}
+
+/* Inner dot */
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+/* Label styling */
+.label {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+/* Empty label - hide if no content */
+.label:empty {
+  display: none;
+}
+

package/dist/collection/components/af-radio/af-radio.js

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Radio component for selecting a single option from a group.
+ *
+ * @slot - Radio label text
+ */
+export class AfRadio {
+    constructor() {
+        /**
+         * Whether the radio is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the radio is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled || this.checked)
+                return;
+            this.checked = true;
+            this.afChange.emit({ checked: this.checked, value: this.value });
+        };
+    }
+    render() {
+        const radioClasses = {
+            'radio': true,
+            'checked': this.checked,
+            'disabled': this.disabled
+        };
+        const controlClasses = {
+            'control': true,
+            'checked': this.checked,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '6adcdfda7127638527a30f9289f9cd240ec1e11d' }, h("label", { key: '9366569dd10eeeca7f3c3a616b0f523efd3208ec', class: radioClasses }, h("input", { key: '4b63b4285d65e42fc04c9f1f2e02e82abcf71018', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: '2e9fa65ff49c95948e6ac3e791f31a8f51f4b0ba', class: controlClasses }, this.checked && (h("span", { key: 'efda09c196af4b1a33bba4da56d3036ee8545905', class: "dot" }))), h("span", { key: 'faf8a3d424418f987d9561d9d903068ce865a494', class: "label" }, h("slot", { key: '9b7d84b6eab1f908708bca461cd49eda3737435b' })))));
+    }
+    static get is() { return "af-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio is checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the radio for form submission (radios with same name are grouped)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the radio for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "afChange",
+                "name": "afChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the radio checked state changes"
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value?: string }",
+                    "resolved": "{ checked: boolean; value?: string | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-radio.js.map

package/dist/collection/components/af-radio/af-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-radio.js","sourceRoot":"","sources":["../../../src/components/af-radio/af-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;GAIG;AAMH,MAAM,OAAO,OAAO;IALpB;QAME;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC1C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACnE,CAAC,CAAC;KAuCH;IArCC,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,YAAY;gBACxB,8DACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B;gBACF,6DAAM,KAAK,EAAE,cAAc,IACxB,IAAI,CAAC,OAAO,IAAI,CACf,6DAAM,KAAK,EAAC,KAAK,GAAQ,CAC1B,CACI;gBACP,6DAAM,KAAK,EAAC,OAAO;oBACjB,8DAAa,CACR,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string }>;\n\n  private handleChange = () => {\n    if (this.disabled || this.checked) return;\n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && (\n              <span class=\"dot\"></span>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"]}