@affinda/wc 0.0.14 → 0.0.16

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

@@ -0,0 +1,155 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Switch component for toggling between on and off states.
+ *
+ * @slot - Switch label text
+ */
+export class AfSwitch {
+    constructor() {
+        /**
+         * Whether the switch is active (on)
+         */
+        this.active = false;
+        /**
+         * Whether the switch is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.active = !this.active;
+            this.afChange.emit({ active: this.active });
+        };
+    }
+    render() {
+        const switchClasses = {
+            'switch': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const trackClasses = {
+            'track': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const knobClasses = {
+            'knob': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '21c42503d55acd6e642e303fbb94ae46f061ae4a' }, h("label", { key: 'a01f3dc6b3bde4070afd1289115dd45c699baead', class: switchClasses }, h("input", { key: 'fc19c909701239fb40204eefa9b2754871db5e1b', type: "checkbox", role: "switch", class: "input", checked: this.active, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'b09ab35a5157959712e11b1fe336e9d2b3ede0d7', class: trackClasses }, h("span", { key: '51681ef5a21b06777a2dcd3f29ccaadcb8f6a0c6', class: knobClasses })), h("span", { key: 'f17194f5988bce168aa499413ecbe05f7c238b05', class: "label" }, h("slot", { key: 'a659c4750a0ccb3413290a461de82e5714e498a4' })))));
+    }
+    static get is() { return "af-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the switch is active (on)"
+                },
+                "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 switch 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 switch for form submission"
+                },
+                "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 switch 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 switch state changes"
+                },
+                "complexType": {
+                    "original": "{ active: boolean }",
+                    "resolved": "{ active: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-switch.js","sourceRoot":"","sources":["../../../src/components/af-switch/af-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACqC,WAAM,GAAY,KAAK,CAAC;QAEhE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;KA4CH;IA1CC,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,aAAa;gBACzB,8DACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,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,YAAY;oBACvB,6DAAM,KAAK,EAAE,WAAW,GAAS,CAC5B;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 * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n  tag: 'af-switch',\n  styleUrl: 'af-switch.css',\n  shadow: true\n})\nexport class AfSwitch {\n  /**\n   * Whether the switch is active (on)\n   */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the switch for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the switch for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the switch state changes\n   */\n  @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.active = !this.active;\n    this.afChange.emit({ active: this.active });\n  };\n\n  render() {\n    const switchClasses = {\n      'switch': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const trackClasses = {\n      'track': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const knobClasses = {\n      'knob': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={switchClasses}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            class=\"input\"\n            checked={this.active}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={trackClasses}>\n            <span class={knobClasses}></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -0,0 +1,182 @@
+/* Tab component styles */
+:host {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: var(--font-size-label-button, 17px);
+  line-height: var(--line-height-label-button, 20px);
+  text-align: center;
+  transition: 
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.tab:focus {
+  outline: none;
+}
+
+.tab:focus-visible {
+  outline: none;
+  box-shadow: 
+    0 0 0 4px var(--af-background-base, #ffffff),
+    0 0 0 5px var(--af-background-border-active, #8a7049);
+}
+
+/* ==========================================================================
+   SLOTS
+   ========================================================================== */
+
+.icon-slot,
+.number-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.icon-slot {
+  width: 24px;
+  height: 24px;
+}
+
+.number-slot {
+  width: 24px;
+  height: 24px;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 var(--space-3, 12px);
+}
+
+/* ==========================================================================
+   SHAPE: SQUARE
+   ========================================================================== */
+
+.tab.shape-square {
+  padding: var(--space-3, 12px);
+  border-radius: 0;
+  overflow: hidden;
+  border-bottom: 3px solid transparent;
+}
+
+/* Square - Default state */
+.tab.shape-square:not(.active):not(.disabled) {
+  color: var(--af-typography-body-default, #2b484f);
+  border-bottom-color: var(--af-background-border-subtle, #e8eeed);
+}
+
+/* Square - Hover state */
+.tab.shape-square:not(.active):not(.disabled):hover {
+  color: var(--af-typography-body-dark, #14343b);
+  border-bottom-color: var(--af-background-border-default, #d1ddda);
+}
+
+/* Square - Active state */
+.tab.shape-square.active {
+  color: var(--af-typography-body-dark, #14343b);
+  border-bottom-color: var(--af-background-border-active, #8a7049);
+}
+
+/* Square - Disabled state */
+.tab.shape-square.disabled {
+  color: var(--af-typography-body-subtle, #60767b);
+  border-bottom-color: transparent;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Square - Icon colors */
+.tab.shape-square:not(.active):not(.disabled) .icon-slot {
+  color: var(--af-typography-body-default, #2b484f);
+}
+
+.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+.tab.shape-square.active .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+/* ==========================================================================
+   SHAPE: PILL
+   ========================================================================== */
+
+.tab.shape-pill {
+  padding: var(--space-3, 12px) var(--space-4, 16px);
+  border-radius: var(--radius-pill, 999px);
+  overflow: hidden;
+}
+
+/* Pill - Default state */
+.tab.shape-pill:not(.active):not(.disabled) {
+  color: var(--af-typography-body-default, #2b484f);
+  background-color: transparent;
+}
+
+/* Pill - Hover state */
+.tab.shape-pill:not(.active):not(.disabled):hover {
+  color: var(--af-typography-body-dark, #14343b);
+  background-color: var(--af-background-level-1-hover, #dde6e3);
+}
+
+/* Pill - Active state */
+.tab.shape-pill.active {
+  color: var(--af-typography-body-dark, #14343b);
+  background-color: var(--af-background-base, #ffffff);
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
+}
+
+/* Pill - Disabled state */
+.tab.shape-pill.disabled {
+  color: var(--af-typography-body-subtle, #60767b);
+  background-color: transparent;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Pill - Icon colors */
+.tab.shape-pill:not(.active):not(.disabled) .icon-slot {
+  color: var(--af-typography-body-default, #2b484f);
+}
+
+.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+.tab.shape-pill.active .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+/* ==========================================================================
+   DESKTOP BREAKPOINT ADJUSTMENTS
+   Tabs in desktop mode get larger padding via the tab-bar parent
+   These are applied via CSS custom properties set by af-tab-bar
+   ========================================================================== */
+
+:host([data-breakpoint="desktop"]) .tab.shape-square {
+  padding: var(--space-6, 24px) var(--space-5, 20px);
+  border-bottom-width: 4px;
+}
+
+:host([data-breakpoint="desktop"]) .tab.shape-pill {
+  padding: var(--space-3, 12px) var(--space-4, 16px);
+}
+

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"]}