@affinda/wc 0.0.15 → 0.0.17

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

@@ -0,0 +1,251 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Tab component for use within a TabBar.
+ * Represents an individual selectable tab with support for icons and number badges.
+ *
+ * @slot icon - Optional icon to display before the label
+ * @slot number - Optional number badge to display
+ *
+ * @example
+ * ```html
+ * <af-tab label="Overview" active></af-tab>
+ * <af-tab label="Details">
+ *   <af-icon slot="icon" name="document"></af-icon>
+ * </af-tab>
+ * <af-tab label="Step 1">
+ *   <af-number-badge slot="number" number="1"></af-number-badge>
+ * </af-tab>
+ * ```
+ */
+export class AfTab {
+    constructor() {
+        /**
+         * The text label for the tab
+         */
+        this.label = '';
+        /**
+         * Whether the tab is currently active/selected
+         */
+        this.active = false;
+        /**
+         * Whether the tab is disabled
+         */
+        this.disabled = false;
+        /**
+         * Visual shape variant
+         * - `square` - Rectangular tab with bottom border indicator
+         * - `pill` - Rounded pill shape with background for active state
+         */
+        this.shape = 'square';
+        /**
+         * Whether to show the icon slot
+         */
+        this.displayIcon = false;
+        /**
+         * Whether to show the number badge slot
+         */
+        this.displayNumber = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.afTabClick.emit({ value: this.value });
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.afTabClick.emit({ value: this.value });
+            }
+        };
+    }
+    render() {
+        const tabClasses = {
+            'tab': true,
+            'active': this.active,
+            'disabled': this.disabled,
+            [`shape-${this.shape}`]: true,
+        };
+        return (h(Host, { key: '5127117fc8ffbf1ed62de57af0a3ba569398bd0b' }, h("button", { key: 'e32591d0448724b7ead02702b21c5f31518bf982', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: '2d9756769c9a9442e632faac4710eceb6ec7dcb2', class: "number-slot" }, h("slot", { key: 'fc9b02645ada6c015cbdb07db5d02c7f8fee9320', name: "number" }))), this.displayIcon && (h("span", { key: '8f9ef1b8cec03bea2231a0cc19a91537b84de31f', class: "icon-slot" }, h("slot", { key: '9fae54937c7876df37624aa8928dbfe478bec556', name: "icon" }))), h("span", { key: 'e332be1f9007beb3bed7bc4b74480f0fcacd8a6e', class: "label" }, this.label))));
+    }
+    static get is() { return "af-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text label for the tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab is currently active/selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabShape",
+                    "resolved": "\"pill\" | \"square\"",
+                    "references": {
+                        "TabShape": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab/af-tab.tsx",
+                            "id": "src/components/af-tab/af-tab.tsx::TabShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual shape variant\n- `square` - Rectangular tab with bottom border indicator\n- `pill` - Rounded pill shape with background for active state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'square'"
+            },
+            "displayIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the icon slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-icon",
+                "defaultValue": "false"
+            },
+            "displayNumber": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the number badge slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-number",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique value for the tab, used for programmatic selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "afTabClick",
+                "name": "afTabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tab is clicked"
+                },
+                "complexType": {
+                    "original": "{ value?: string }",
+                    "resolved": "{ value?: string | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-tab.js","sourceRoot":"","sources":["../../../src/components/af-tab/af-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAI9E;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,KAAK;IALlB;QAME;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;QAEjD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;;;WAIG;QACsB,UAAK,GAAa,QAAQ,CAAC;QAEpD;;WAEG;QACK,gBAAW,GAAY,KAAK,CAAC;QAErC;;WAEG;QACK,kBAAa,GAAY,KAAK,CAAC;QAY/B,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;KAqCH;IAnCC,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEtB,IAAI,CAAC,aAAa,IAAI,CACrB,6DAAM,KAAK,EAAC,aAAa;oBACvB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACR;gBACA,IAAI,CAAC,WAAW,IAAI,CACnB,6DAAM,KAAK,EAAC,WAAW;oBACrB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACR;gBACD,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n *   <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n *   <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n  tag: 'af-tab',\n  styleUrl: 'af-tab.css',\n  shadow: true\n})\nexport class AfTab {\n  /**\n   * The text label for the tab\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Whether the tab is currently active/selected\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Visual shape variant\n   * - `square` - Rectangular tab with bottom border indicator\n   * - `pill` - Rounded pill shape with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabShape = 'square';\n\n  /**\n   * Whether to show the icon slot\n   */\n  @Prop() displayIcon: boolean = false;\n\n  /**\n   * Whether to show the number badge slot\n   */\n  @Prop() displayNumber: boolean = false;\n\n  /**\n   * Unique value for the tab, used for programmatic selection\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the tab is clicked\n   */\n  @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    this.afTabClick.emit({ value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.afTabClick.emit({ value: this.value });\n    }\n  };\n\n  render() {\n    const tabClasses = {\n      'tab': true,\n      'active': this.active,\n      'disabled': this.disabled,\n      [`shape-${this.shape}`]: true,\n    };\n\n    return (\n      <Host>\n        <button\n          class={tabClasses}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n        >\n          {this.displayNumber && (\n            <span class=\"number-slot\">\n              <slot name=\"number\" />\n            </span>\n          )}\n          {this.displayIcon && (\n            <span class=\"icon-slot\">\n              <slot name=\"icon\" />\n            </span>\n          )}\n          <span class=\"label\">{this.label}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-tab-bar/af-tab-bar.css

@@ -0,0 +1,87 @@
+/* TabBar component styles */
+:host {
+  display: block;
+  width: 100%;
+}
+
+.tab-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);
+}
+
+/* Custom scrollbar for WebKit browsers */
+.tab-bar::-webkit-scrollbar {
+  height: 4px;
+}
+
+.tab-bar::-webkit-scrollbar-track {
+  background: var(--af-scrollbar-track, #d1ddda);
+  border-radius: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--af-scrollbar-thumb, #8a7049);
+  border-radius: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb:hover {
+  background: var(--af-scrollbar-thumb-hover, #8d785a);
+}
+
+/* ==========================================================================
+   SHAPE: SQUARE
+   ========================================================================== */
+
+.tab-bar.shape-square {
+  gap: 0;
+  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);
+}
+
+/* ==========================================================================
+   SHAPE: PILL
+   ========================================================================== */
+
+.tab-bar.shape-pill {
+  gap: 0;
+  padding: var(--space-2, 8px);
+  background-color: var(--af-background-level-1, #e8eeed);
+  border-radius: var(--radius-pill, 999px);
+}
+
+/* ==========================================================================
+   BREAKPOINT: MOBILE
+   ========================================================================== */
+
+.tab-bar.breakpoint-mobile {
+  /* Mobile uses compact spacing */
+}
+
+.tab-bar.breakpoint-mobile.shape-square {
+  /* Tabs handle their own padding in mobile */
+}
+
+.tab-bar.breakpoint-mobile.shape-pill {
+  padding: var(--space-1, 4px);
+}
+
+/* ==========================================================================
+   BREAKPOINT: DESKTOP
+   ========================================================================== */
+
+.tab-bar.breakpoint-desktop {
+  /* Desktop uses more generous spacing */
+}
+
+.tab-bar.breakpoint-desktop.shape-square {
+  /* Tabs handle their own padding in desktop mode */
+}
+
+.tab-bar.breakpoint-desktop.shape-pill {
+  padding: var(--space-2, 8px);
+}
+

package/dist/collection/components/af-tab-bar/af-tab-bar.js

@@ -0,0 +1,171 @@
+import { h, Host } from "@stencil/core";
+/**
+ * TabBar component that contains and manages a group of tabs.
+ * Provides horizontal layout, keyboard navigation, and consistent styling.
+ *
+ * @slot - Tab elements (af-tab)
+ *
+ * @example
+ * ```html
+ * <af-tab-bar shape="square" breakpoint="desktop">
+ *   <af-tab label="Overview" active value="overview"></af-tab>
+ *   <af-tab label="Details" value="details"></af-tab>
+ *   <af-tab label="Settings" value="settings"></af-tab>
+ * </af-tab-bar>
+ * ```
+ */
+export class AfTabBar {
+    constructor() {
+        /**
+         * Visual shape variant for all tabs
+         * - `square` - Rectangular tabs with bottom border indicator
+         * - `pill` - Rounded pill tabs with background for active state
+         */
+        this.shape = 'square';
+        /**
+         * Responsive breakpoint mode
+         * - `mobile` - Compact layout with smaller padding
+         * - `desktop` - Larger layout with more generous spacing
+         */
+        this.breakpoint = 'desktop';
+    }
+    componentDidLoad() {
+        this.syncChildProps();
+    }
+    componentDidUpdate() {
+        this.syncChildProps();
+    }
+    /**
+     * Sync shape and breakpoint props to child af-tab elements
+     */
+    syncChildProps() {
+        const tabs = this.el.querySelectorAll('af-tab');
+        tabs.forEach((tab) => {
+            tab.setAttribute('shape', this.shape);
+            tab.setAttribute('data-breakpoint', this.breakpoint);
+        });
+    }
+    /**
+     * Handle keyboard navigation between tabs
+     */
+    handleKeyDown(event) {
+        const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])'));
+        const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);
+        if (currentIndex === -1)
+            return;
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        // Focus the button inside the shadow DOM of the tab
+        const targetTab = tabs[newIndex];
+        const button = targetTab.shadowRoot?.querySelector('button');
+        if (button) {
+            button.focus();
+        }
+    }
+    render() {
+        const containerClasses = {
+            'tab-bar': true,
+            [`shape-${this.shape}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
+        };
+        return (h(Host, { key: 'b1fa40c2156ac7271650aafd27d369c3a8224f44', role: "tablist" }, h("div", { key: 'e92eaef79f5df92cca1b2170218df2668afc031d', class: containerClasses }, h("slot", { key: '307aea867005fe40899b54d9fe1e31ecca0528e8' }))));
+    }
+    static get is() { return "af-tab-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-tab-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-tab-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabBarShape",
+                    "resolved": "\"pill\" | \"square\"",
+                    "references": {
+                        "TabBarShape": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual shape variant for all tabs\n- `square` - Rectangular tabs with bottom border indicator\n- `pill` - Rounded pill tabs with background for active state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'square'"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabBarBreakpoint",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {
+                        "TabBarBreakpoint": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarBreakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Responsive breakpoint mode\n- `mobile` - Compact layout with smaller padding\n- `desktop` - Larger layout with more generous spacing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "breakpoint",
+                "defaultValue": "'desktop'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=af-tab-bar.js.map

package/dist/collection/components/af-tab-bar/af-tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-tab-bar.js","sourceRoot":"","sources":["../../../src/components/af-tab-bar/af-tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' | 'pill';\nexport type TabBarBreakpoint = 'mobile' | 'desktop';\n\n/**\n * TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n *   <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n *   <af-tab label=\"Details\" value=\"details\"></af-tab>\n *   <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n */\n@Component({\n  tag: 'af-tab-bar',\n  styleUrl: 'af-tab-bar.css',\n  shadow: true\n})\nexport class AfTabBar {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual shape variant for all tabs\n   * - `square` - Rectangular tabs with bottom border indicator\n   * - `pill` - Rounded pill tabs with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n  /**\n   * Responsive breakpoint mode\n   * - `mobile` - Compact layout with smaller padding\n   * - `desktop` - Larger layout with more generous spacing\n   */\n  @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n  componentDidLoad() {\n    this.syncChildProps();\n  }\n\n  componentDidUpdate() {\n    this.syncChildProps();\n  }\n\n  /**\n   * Sync shape and breakpoint props to child af-tab elements\n   */\n  private syncChildProps() {\n    const tabs = this.el.querySelectorAll('af-tab');\n    tabs.forEach((tab) => {\n      tab.setAttribute('shape', this.shape);\n      tab.setAttribute('data-breakpoint', this.breakpoint);\n    });\n  }\n\n  /**\n   * Handle keyboard navigation between tabs\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n    const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);\n    \n    if (currentIndex === -1) return;\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    // Focus the button inside the shadow DOM of the tab\n    const targetTab = tabs[newIndex];\n    const button = targetTab.shadowRoot?.querySelector('button');\n    if (button) {\n      button.focus();\n    }\n  }\n\n  render() {\n    const containerClasses = {\n      'tab-bar': true,\n      [`shape-${this.shape}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n    };\n\n    return (\n      <Host role=\"tablist\">\n        <div class={containerClasses}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -0,0 +1,92 @@
+/* Tag component styles */
+:host {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 4px;
+  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  line-height: 1;
+  text-decoration: none;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+  cursor: default;
+}
+
+/* Make links look clickable */
+a.tag {
+  cursor: pointer;
+}
+
+/* ==========================================================================
+   VARIANT: SAND (Soft-clay/tan colored - default)
+   ========================================================================== */
+
+.tag.variant-sand {
+  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));
+  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));
+}
+
+.tag.variant-sand:hover {
+  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));
+}
+
+/* ==========================================================================
+   VARIANT: LIGHT (Mist-green/light colored)
+   ========================================================================== */
+
+.tag.variant-light {
+  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));
+  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));
+}
+
+.tag.variant-light:hover {
+  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));
+}
+
+/* ==========================================================================
+   SIZES
+   ========================================================================== */
+
+/* Size: X-Small */
+.tag.size-x-small {
+  padding: 6px 10px;
+  font-size: var(--font-size-label-tag, 14px);
+}
+
+/* Size: Small */
+.tag.size-small {
+  padding: 8px 12px;
+  font-size: var(--font-size-label-tag, 14px);
+}
+
+/* Size: Large */
+.tag.size-large {
+  padding: 12px 16px;
+  font-size: var(--font-size-body-large, 18px);
+}
+
+/* ==========================================================================
+   FOCUS STATES
+   ========================================================================== */
+
+/* Focus state */
+.tag:focus {
+  outline: none;
+  box-shadow: 
+    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),
+    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
+}
+
+/* Focus visible for keyboard navigation */
+.tag:focus-visible {
+  outline: none;
+  box-shadow: 
+    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),
+    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
+}
+