voa-ds-core 1.0.4

package/dist/collection/components/voa-skeleton/skeleton.js

@@ -0,0 +1,90 @@
+import { h } from "@stencil/core";
+export class Skeleton {
+    constructor() {
+        this.width = "200px";
+        this.height = "100px";
+    }
+    handleClass() {
+        const isCircle = this.variant === 'circle';
+        return `skeleton ${isCircle ? 'skeleton--circle' : ''}`;
+        ;
+    }
+    render() {
+        return h("span", { key: '5e1a7fc83f985cde0b19a2f2234359053adcd703', class: this.handleClass(), style: { width: this.width, height: this.height } });
+    }
+    static get is() { return "voa-skeleton"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "\"200px\""
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "\"100px\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"text\" | \"circle\"",
+                    "resolved": "\"circle\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
+            }
+        };
+    }
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/collection/components/voa-skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/voa-skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IALrB;QAMY,UAAK,GAAW,OAAO,CAAC;QACxB,WAAM,GAAW,OAAO,CAAC;KAapC;IAVG,WAAW;QACP,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC;QAC3C,OAAO,YAAY,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAAA,CAAC;IAC7D,CAAC;IAED,MAAM;QACF,OAAO,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,GACxC,CAAA;IACZ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"voa-skeleton\",\r\n    styleUrl: \"skeleton.css\",\r\n    shadow: false,\r\n})\r\nexport class Skeleton {\r\n    @Prop() width: string = \"200px\";\r\n    @Prop() height: string = \"100px\";\r\n    @Prop() variant: \"text\" | \"circle\" ;\r\n\r\n    handleClass() {\r\n        const isCircle = this.variant === 'circle';\r\n        return `skeleton ${isCircle ? 'skeleton--circle' : ''}`;;\r\n    }\r\n\r\n    render() {\r\n        return <span class={this.handleClass()} \r\n        style={{ width: this.width, height: this.height}}\r\n        ></span>\r\n    }\r\n}\r\n"]}

package/dist/collection/components/voa-skeleton/skeleton.stories.js

@@ -0,0 +1,36 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Feedback/Skeleton",
+    component: "voa-skeleton",
+    argTypes: {
+        width: { control: "text" },
+        height: { control: "text" },
+        variant: { control: "select", options: ["text", "circle"] },
+    },
+};
+const Template = ({ width, height, variant }) => html `
+    <voa-skeleton width="${width}" height="${height}" variant="${variant}"
+    ></voa-skeleton>
+`;
+const ExempleTemplate = () => html `
+    <voa-skeleton variant="circle"
+    ></voa-skeleton>
+    <voa-skeleton width="100px" height="100px"
+    ></voa-skeleton>
+    <br>
+    <voa-skeleton width="200px"
+    ></voa-skeleton>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    width: "40rem",
+    height: "100px",
+};
+export const Circle = Template.bind({});
+Circle.args = {
+    width: "100px",
+    height: "100px",
+    variant: "circle",
+};
+export const Exemple = ExempleTemplate.bind({});
+//# sourceMappingURL=skeleton.stories.js.map

package/dist/collection/components/voa-skeleton/skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../../src/components/voa-skeleton/skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACX,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACN,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE;KAC9D;CACI,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;2BACnC,KAAK,aAAa,MAAM,cAAc,OAAO;;CAEvE,CAAC;AAEF,MAAM,eAAe,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;CAQ1C,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n    title: \"Componentes/Feedback/Skeleton\",\r\n    component: \"voa-skeleton\",\r\n    argTypes: {\r\n        width: { control: \"text\" },\r\n        height: { control: \"text\" },\r\n        variant: { control: \"select\", options: [\"text\", \"circle\"] },\r\n    },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ width, height, variant }) => html`\r\n    <voa-skeleton width=\"${width}\" height=\"${height}\" variant=\"${variant}\"\r\n    ></voa-skeleton>\r\n`;\r\n\r\nconst ExempleTemplate: StoryFn = () => html`\r\n    <voa-skeleton variant=\"circle\"\r\n    ></voa-skeleton>\r\n    <voa-skeleton width=\"100px\" height=\"100px\"\r\n    ></voa-skeleton>\r\n    <br>\r\n    <voa-skeleton width=\"200px\"\r\n    ></voa-skeleton>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = { \r\n    width: \"40rem\",\r\n    height: \"100px\",\r\n};\r\n\r\nexport const Circle = Template.bind({});\r\nCircle.args = {\r\n    width: \"100px\",\r\n    height: \"100px\",\r\n    variant: \"circle\",\r\n};\r\n\r\nexport const Exemple = ExempleTemplate.bind({});\r\n"]}

package/dist/collection/components/voa-stepper/stepper.css

@@ -0,0 +1,23 @@
+.stepper {
+  display: flex;
+  align-items: center;
+}
+
+.step {
+  padding: 10px 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-right: 10px;
+}
+
+.step.active {
+  background-color: #007bff;
+  color: white;
+}
+
+.step:hover {
+  background-color: #eee;
+}

package/dist/collection/components/voa-stepper/stepper.js

@@ -0,0 +1,93 @@
+import { h } from "@stencil/core";
+export class Stepper {
+    constructor() {
+        this.steps = [];
+        this.currentStep = 0;
+        this.activeStep = this.currentStep;
+    }
+    goToStep(step) {
+        this.activeStep = step;
+        this.stepChanged.emit(this.activeStep);
+    }
+    render() {
+        return (h("div", { key: '51b81df5726adea180c1ce858de29c48b18b0e0f', class: "stepper" }, this.steps.map((step, index) => (h("div", { class: `step ${this.activeStep === index ? "active" : ""}`, onClick: () => this.goToStep(index) }, step)))));
+    }
+    static get is() { return "voa-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeStep": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "stepChanged",
+                "name": "stepChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=stepper.js.map

package/dist/collection/components/voa-stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/voa-stepper/stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,OAAO;IALpB;QAMU,UAAK,GAAa,EAAE,CAAC;QACrB,gBAAW,GAAW,CAAC,CAAC;QACvB,eAAU,GAAW,IAAI,CAAC,WAAW,CAAC;KAsBhD;IAnBC,QAAQ,CAAC,IAAY;QACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,WACE,KAAK,EAAE,QAAQ,IAAI,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAElC,IAAI,CACD,CACP,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-stepper\",\r\n  styleUrl: \"stepper.css\",\r\n  shadow: true,\r\n})\r\nexport class Stepper {\r\n  @Prop() steps: string[] = [];\r\n  @Prop() currentStep: number = 0;\r\n  @State() activeStep: number = this.currentStep;\r\n  @Event() stepChanged: EventEmitter<number>;\r\n\r\n  goToStep(step: number) {\r\n    this.activeStep = step;\r\n    this.stepChanged.emit(this.activeStep);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"stepper\">\r\n        {this.steps.map((step, index) => (\r\n          <div\r\n            class={`step ${this.activeStep === index ? \"active\" : \"\"}`}\r\n            onClick={() => this.goToStep(index)}\r\n          >\r\n            {step}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/voa-stepper/stepper.stories.js

@@ -0,0 +1,21 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Dados/Stepper",
+    component: "voa-stepper",
+    argTypes: {
+        steps: { control: { type: "object" } },
+        currentStep: { control: "number" },
+    },
+};
+const Template = ({ steps, currentStep }) => html `
+  <voa-stepper
+    .steps="${steps}"
+    current-step="${currentStep}"
+  ></voa-stepper>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    steps: ["Step 1", "Step 2", "Step 3"],
+    currentStep: 0,
+};
+//# sourceMappingURL=stepper.stories.js.map

package/dist/collection/components/voa-stepper/stepper.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/voa-stepper/stepper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KACnC;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;cAE5C,KAAK;oBACC,WAAW;;CAE9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;IACrC,WAAW,EAAE,CAAC;CACf,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n  title: \"Componentes/Dados/Stepper\",\r\n  component: \"voa-stepper\",\r\n  argTypes: {\r\n    steps: { control: { type: \"object\" } },\r\n    currentStep: { control: \"number\" },\r\n  },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ steps, currentStep }) => html`\r\n  <voa-stepper\r\n    .steps=\"${steps}\"\r\n    current-step=\"${currentStep}\"\r\n  ></voa-stepper>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  steps: [\"Step 1\", \"Step 2\", \"Step 3\"],\r\n  currentStep: 0,\r\n};\r\n"]}

package/dist/collection/components/voa-switch/voa-switch.css

@@ -0,0 +1,81 @@
+/* * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).
+ * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally
+ * via CSS Parts API (::part() selectors) using design tokens.
+ */
+
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+  /* Ensures the host has a tangible size if not defined externally */
+  contain: content;
+}
+
+.switch-container {
+  /* APENAS estilos estruturais */
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  gap: 0;
+  /* Gap defaults to 0, overridden by external CSS if needed */
+}
+
+.switch-container:disabled,
+.switch-container.switch-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.switch-container.switch-no-label {
+  gap: 0;
+}
+
+.switch-track {
+  /* APENAS estilos estruturais */
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  /* CRITICAL: Prevents track from squashing in flex layouts */
+
+  /* Tamanhos estruturais conforme Figma: 40px x 20px */
+  width: 40px;
+  height: 20px;
+
+  overflow: hidden;
+  /* Padding interno para posicionar o thumb */
+  padding: 2px;
+}
+
+.switch-thumb {
+  /* APENAS estilos estruturais */
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+
+  /* RESTORED DIMENSIONS - CRITICAL FOR VISIBILITY */
+  width: 16px;
+  height: 16px;
+}
+
+.switch-shadow {
+  /* APENAS estilos estruturais */
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  /* Shadow será aplicada externamente via CSS custom property */
+}
+
+.switch-label {
+  /* APENAS estilos estruturais */
+  display: inline-block;
+  user-select: none;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,232 @@
+import { Host, h } from "@stencil/core";
+export class VoaSwitch {
+    constructor() {
+        /**
+         * Internal state to handle "uncontrolled" usage while keeping props immutable
+         */
+        this.internalChecked = false;
+        this.checked = false;
+        this.disabled = false;
+        this.showLabel = false;
+        this.value = 'on'; // Default value for forms
+        this.handleClick = (ev) => {
+            ev.preventDefault();
+            if (this.disabled)
+                return;
+            // Optimistic UI update for uncontrolled scenarios
+            this.internalChecked = !this.internalChecked;
+            this.checked = this.internalChecked;
+            this.dsChange.emit(this.internalChecked);
+            this.updateFormValue();
+            this.reflectStateToHost();
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleClick(event);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalChecked = this.checked;
+        this.updateFormValue();
+        this.reflectStateToHost();
+    }
+    checkedChanged(newValue) {
+        this.internalChecked = newValue;
+        this.updateFormValue();
+        this.reflectStateToHost();
+    }
+    /**
+     * Reflects the current state to the Host element for CSS attribute selectors
+     */
+    reflectStateToHost() {
+        if (this.internalChecked) {
+            this.host.setAttribute('checked', '');
+        }
+        else {
+            this.host.removeAttribute('checked');
+        }
+    }
+    /**
+     * Syncs with the native Form API
+     */
+    updateFormValue() {
+        try {
+            // ElementInternals is only available in real browsers
+            // Skip in test environment where it's not supported
+            if (this.internals && typeof this.internals.setFormValue === 'function') {
+                this.internals.setFormValue(this.internalChecked ? this.value : null);
+                // Accessibility internals (replaces aria attributes on Host)
+                this.internals.ariaChecked = this.internalChecked ? 'true' : 'false';
+                this.internals.ariaDisabled = this.disabled ? 'true' : 'false';
+            }
+        }
+        catch (e) {
+            // ElementInternals may not be available in test environment
+        }
+    }
+    render() {
+        // NOTE: Host no longer has aria-roles, ElementInternals handles that on the custom element itself.
+        // The internal button is purely for visual structure and click capturing.
+        return (h(Host, { key: 'c21dd59c46b702c662b74ac4bf63c9a64b36aeaa' }, h("button", { key: '0d76db2e8907a5f98a1d9ed5616d7cf83a543676', part: "base", class: {
+                'switch-container': true,
+                'switch-disabled': this.disabled,
+                'switch-checked': this.internalChecked,
+                'switch-no-label': !this.showLabel
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown,
+            // We remove aria-checked here to avoid "double talk" with the Host/Internals
+            tabIndex: -1 }, h("div", { key: '95be86688e5594d2c2a95cc1e5658fccfc7ac3c6', part: "track", class: "switch-track" }, h("div", { key: '8a86e010d6748784c8c8b81da1bc1a5f2824b8d7', part: "thumb", class: "switch-thumb" }), h("div", { key: '66a705df89533e04992477c26614684280be9d32', part: "shadow", class: "switch-shadow" })), this.showLabel && (h("span", { key: 'd4fcce7d91db73450b7b1e19ba93c676785c5b2d', class: "switch-label", part: "label" }, h("slot", { key: '3d00442b08822107bbf494869aabbad9413ebe72' }))))));
+    }
+    static get is() { return "voa-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=voa-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-switch.js","sourceRoot":"","sources":["../../../src/components/voa-switch/voa-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-switch',\r\n  styleUrl: 'voa-switch.css',\r\n  shadow: {\r\n    delegatesFocus: true // CRITICAL: Passes focus from Host to the internal button automatically\r\n  },\r\n  formAssociated: true // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaSwitch {\r\n  @Element() host: HTMLVoaSwitchElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  /**\r\n   * Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n   */\r\n  @State() internalChecked: boolean = false;\r\n\r\n  @Prop() checked: boolean = false;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() name: string;\r\n  @Prop() value: string = 'on'; // Default value for forms\r\n\r\n  @Event() dsChange: EventEmitter<boolean>;\r\n\r\n  componentWillLoad() {\r\n    this.internalChecked = this.checked;\r\n    this.updateFormValue();\r\n    this.reflectStateToHost();\r\n  }\r\n\r\n  @Watch('checked')\r\n  checkedChanged(newValue: boolean) {\r\n    this.internalChecked = newValue;\r\n    this.updateFormValue();\r\n    this.reflectStateToHost();\r\n  }\r\n\r\n  /**\r\n   * Reflects the current state to the Host element for CSS attribute selectors\r\n   */\r\n  private reflectStateToHost() {\r\n    if (this.internalChecked) {\r\n      this.host.setAttribute('checked', '');\r\n    } else {\r\n      this.host.removeAttribute('checked');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Syncs with the native Form API\r\n   */\r\n  private updateFormValue() {\r\n    try {\r\n      // ElementInternals is only available in real browsers\r\n      // Skip in test environment where it's not supported\r\n      if (this.internals && typeof (this.internals as any).setFormValue === 'function') {\r\n        (this.internals as any).setFormValue(this.internalChecked ? this.value : null);\r\n        \r\n        // Accessibility internals (replaces aria attributes on Host)\r\n        (this.internals as any).ariaChecked = this.internalChecked ? 'true' : 'false';\r\n        (this.internals as any).ariaDisabled = this.disabled ? 'true' : 'false';\r\n      }\r\n    } catch (e) {\r\n      // ElementInternals may not be available in test environment\r\n    }\r\n  }\r\n\r\n  private handleClick = (ev: Event) => {\r\n    ev.preventDefault();\r\n    if (this.disabled) return;\r\n\r\n    // Optimistic UI update for uncontrolled scenarios\r\n    this.internalChecked = !this.internalChecked;\r\n    this.checked = this.internalChecked;\r\n    this.dsChange.emit(this.internalChecked);\r\n    this.updateFormValue();\r\n    this.reflectStateToHost();\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleClick(event);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    // NOTE: Host no longer has aria-roles, ElementInternals handles that on the custom element itself.\r\n    // The internal button is purely for visual structure and click capturing.\r\n    return (\r\n      <Host>\r\n        <button\r\n          part=\"base\"\r\n          class={{\r\n            'switch-container': true,\r\n            'switch-disabled': this.disabled,\r\n            'switch-checked': this.internalChecked,\r\n            'switch-no-label': !this.showLabel\r\n          }}\r\n          type=\"button\"\r\n          disabled={this.disabled}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          // We remove aria-checked here to avoid \"double talk\" with the Host/Internals\r\n          tabIndex={-1} // handled by delegatesFocus on Host\r\n        >\r\n          <div part=\"track\" class=\"switch-track\">\r\n            <div part=\"thumb\" class=\"switch-thumb\" />\r\n            <div part=\"shadow\" class=\"switch-shadow\" />\r\n          </div>\r\n\r\n          {this.showLabel && (\r\n            <span class=\"switch-label\" part=\"label\">\r\n              <slot />\r\n            </span>\r\n          )}\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"]}