@warp-ds/elements 2.4.0-next.3 → 2.4.0-next.5

package/dist/custom-elements.json

@@ -3669,6 +3669,154 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/switch/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "WarpSwitch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "#initialState",
+              "privacy": "private",
+              "type": {
+                "text": "boolean | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "resetFormControl",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "type": {
+                "text": "resetFormControl() => void"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-switch",
+          "customElement": true,
+          "modulePath": "packages/switch/index.ts",
+          "definitionPath": "packages/switch/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WarpSwitch",
+          "declaration": {
+            "name": "WarpSwitch",
+            "module": "packages/switch/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "w-switch",
+          "declaration": {
+            "name": "WarpSwitch",
+            "module": "packages/switch/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/combobox/index.ts",
@@ -6713,154 +6861,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/switch/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "WarpSwitch",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "#initialState",
-              "privacy": "private",
-              "type": {
-                "text": "boolean | null"
-              },
-              "default": "null"
-            },
-            {
-              "kind": "method",
-              "name": "resetFormControl",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "type": {
-                "text": "resetFormControl() => void"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "value"
-            },
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "checked"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormControlMixin",
-              "package": "@open-wc/form-control"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "w-switch",
-          "customElement": true,
-          "modulePath": "packages/switch/index.ts",
-          "definitionPath": "packages/switch/index.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "WarpSwitch",
-          "declaration": {
-            "name": "WarpSwitch",
-            "module": "packages/switch/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "w-switch",
-          "declaration": {
-            "name": "WarpSwitch",
-            "module": "packages/switch/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/tabs/tab.ts",
@@ -6872,11 +6872,12 @@
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "for",
               "type": {
                 "text": "string"
               },
-              "attribute": "name",
+              "default": "''",
+              "attribute": "for",
               "reflects": true
             },
             {
@@ -6919,11 +6920,6 @@
               "attribute": "tab-class",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "_handleClick",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "_classes",
@@ -6939,11 +6935,12 @@
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "for",
               "type": {
                 "text": "string"
               },
-              "fieldName": "name"
+              "default": "''",
+              "fieldName": "for"
             },
             {
               "name": "label",
@@ -7054,7 +7051,7 @@
             },
             {
               "kind": "field",
-              "name": "_activeTab",
+              "name": "_activeTabFor",
               "type": {
                 "text": "string"
               },
@@ -7074,6 +7071,11 @@
               "name": "_updateSelectionIndicatorDebounced",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_assignSlots",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "tabs",

package/dist/index.d.ts

@@ -17,6 +17,7 @@ import type { ModalHeader } from "./packages/modal/modal-header.ts";
 import type { ModalMain } from "./packages/modal/modal-main.ts";
 import type { WarpToastContainer } from "./packages/toast/toast-container.ts";
 import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
+import type { WarpSwitch } from "./packages/switch/index.ts";
 import type { WarpCombobox } from "./packages/combobox/index.ts";
 import type { WarpDeadToggle } from "./packages/deadtoggle/index.ts";
 import type { WarpPageIndicator } from "./packages/pageindicator/index.ts";
@@ -28,7 +29,6 @@ import type { WCheckboxGroup } from "./packages/checkbox/checkbox-group.ts";
 import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
 import type { WarpSlider } from "./packages/slider/slider.ts";
 import type { WarpStepIndicator, WarpStep } from "./packages/stepindicator/index.ts";
-import type { WarpSwitch } from "./packages/switch/index.ts";
 import type { WarpTab } from "./packages/tabs/tab.ts";
 import type { WarpTabs } from "./packages/tabs/tabs.ts";
 import type { WarpTextarea } from "./packages/textarea/textarea.ts";
@@ -589,6 +589,21 @@ the query will point to an element that doesn't exist anymore. */
 }
 
 
+export type WarpSwitchProps = {
+  /**  */
+  "name"?: WarpSwitch['name'];
+  /**  */
+  "value"?: WarpSwitch['value'];
+  /**  */
+  "checked"?: WarpSwitch['checked'];
+  /**  */
+  "disabled"?: WarpSwitch['disabled'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
 export type WarpComboboxProps = {
   /** The available options to select from */
   "options"?: WarpCombobox['options'];
@@ -892,24 +907,9 @@ export type WarpStepProps = {
 }
 
 
-export type WarpSwitchProps = {
-  /**  */
-  "name"?: WarpSwitch['name'];
-  /**  */
-  "value"?: WarpSwitch['value'];
-  /**  */
-  "checked"?: WarpSwitch['checked'];
-  /**  */
-  "disabled"?: WarpSwitch['disabled'];
-
-  /**  */
-  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
-}
-
-
 export type WarpTabProps = {
   /**  */
-  "name"?: WarpTab['name'];
+  "for"?: WarpTab['for'];
   /**  */
   "label"?: WarpTab['label'];
   /**  */
@@ -1487,6 +1487,33 @@ export type WarpTextareaProps = {
     "w-datepicker": Partial<WarpDatepickerProps & BaseProps<WarpDatepicker> & BaseEvents>;
 
 
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `checked`: undefined 
+ * - `disabled`: undefined 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `resetFormControl() => void`: undefined
+  */
+    "w-switch": Partial<WarpSwitchProps & BaseProps<WarpSwitch> & BaseEvents>;
+
+
   /**
      * A combobox element for text input with selectable options.
  * 
@@ -1828,33 +1855,6 @@ export type WarpTextareaProps = {
     "w-step": Partial<WarpStepProps & BaseProps<WarpStep> & BaseEvents>;
 
 
-  /**
-     * 
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `name`: undefined 
- * - `value`: undefined 
- * - `checked`: undefined 
- * - `disabled`: undefined 
- * 
- * ## Events
- * 
- * Events that will be emitted by the component.
- * 
- * - `change`: undefined
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `resetFormControl() => void`: undefined
-  */
-    "w-switch": Partial<WarpSwitchProps & BaseProps<WarpSwitch> & BaseEvents>;
-
-
   /**
      * Individual tab component used within w-tabs container.
  * 
@@ -1864,7 +1864,7 @@ export type WarpTextareaProps = {
  * 
  * Component attributes and properties that can be applied to the element or by using JavaScript.
  * 
- * - `name`: undefined 
+ * - `for`: undefined 
  * - `label`: undefined 
  * - `active`: undefined 
  * - `over`: undefined 

package/dist/packages/tabs/index.d.ts

@@ -1,4 +1,3 @@
 export { WarpTab } from './tab.js';
 export { WarpTabPanel } from './tab-panel.js';
-export type { TabChangeEvent } from './tabs.js';
 export { WarpTabs } from './tabs.js';

package/dist/packages/tabs/index.js

@@ -1,3 +1,4 @@
 export { WarpTab } from './tab.js';
 export { WarpTabPanel } from './tab-panel.js';
+// Re-export type interfaces
 export { WarpTabs } from './tabs.js';

package/dist/packages/tabs/tab-panel.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 /**
  * Tab panel component that holds content for individual tabs.
  * Each tab panel should have a name that matches a corresponding tab.
@@ -7,10 +7,10 @@ import { LitElement, PropertyValues } from 'lit';
  */
 export declare class WarpTabPanel extends LitElement {
     static styles: import("lit").CSSResult[];
-    name: string;
     hidden: boolean;
     connectedCallback(): void;
-    updated(changedProperties: PropertyValues<this>): void;
+    updated(): void;
+    private _syncA11yAttributes;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/packages/tabs/tab-panel.js

@@ -24,25 +24,21 @@ export class WarpTabPanel extends LitElement {
         super.connectedCallback();
         this.setAttribute('tabindex', '-1');
         this.setAttribute('role', 'tabpanel');
-        // Set aria-labelledby to reference the corresponding tab
-        if (this.name) {
-            this.setAttribute('aria-labelledby', `warp-tab-${this.name}`);
-            this.setAttribute('id', `warp-tabpanel-${this.name}`);
-        }
+        this._syncA11yAttributes();
     }
-    updated(changedProperties) {
-        if (changedProperties.has('name') && this.name) {
-            this.setAttribute('aria-labelledby', `warp-tab-${this.name}`);
-            this.setAttribute('id', `warp-tabpanel-${this.name}`);
-        }
+    updated() {
+        this._syncA11yAttributes();
+    }
+    _syncA11yAttributes() {
+        // Panel identity comes from its own id attribute.
+        if (!this.id)
+            return;
+        this.setAttribute('aria-labelledby', `warp-tab-${this.id}`);
     }
     render() {
         return html `<slot></slot>`;
     }
 }
-__decorate([
-    property({ reflect: true })
-], WarpTabPanel.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], WarpTabPanel.prototype, "hidden", void 0);

package/dist/packages/tabs/tab.d.ts

@@ -6,12 +6,11 @@ import { LitElement } from 'lit';
  */
 export declare class WarpTab extends LitElement {
     static styles: import("lit").CSSResult[];
-    name: string;
+    for: string;
     label: string;
     active: boolean;
     over: boolean;
     tabClass: string;
-    private _handleClick;
     private get _classes();
     private get _hasChildren();
     render(): import("lit").TemplateResult<1>;

package/dist/packages/tabs/tab.js

@@ -1,4 +1,4 @@
-var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(n,o,t,e)=>{for(var r=e>1?void 0:e?u(o,t):o,c=n.length-1,b;c>=0;c--)(b=n[c])&&(r=(e?b(o,t,r):b(r))||r);return e&&r&&m(o,t,r),r};var p=function(){for(var n=[],o=arguments.length;o--;)n[o]=arguments[o];return n.reduce(function(t,e){return t.concat(typeof e=="string"?e:Array.isArray(e)?p.apply(void 0,e):typeof e=="object"&&e?Object.keys(e).map(function(r){return e[r]?r:""}):"")},[]).join(" ")};import{html as s,LitElement as f}from"lit";import{property as d}from"lit/decorators.js";import{css as g}from"lit";var v=g`
+var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(n,o,a,r)=>{for(var e=r>1?void 0:r?u(o,a):o,c=n.length-1,b;c>=0;c--)(b=n[c])&&(e=(r?b(o,a,e):b(e))||e);return r&&e&&m(o,a,e),e};var p=function(){for(var n=[],o=arguments.length;o--;)n[o]=arguments[o];return n.reduce(function(a,r){return a.concat(typeof r=="string"?r:Array.isArray(r)?p.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(e){return r[e]?e:""}):"")},[]).join(" ")};import{html as s,LitElement as f}from"lit";import{property as d}from"lit/decorators.js";import{css as g}from"lit";var v=g`
   *,
   :before,
   :after {
@@ -2437,18 +2437,18 @@ var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(n,o,t,e
                     display: none
                 }
             }
-        `;import{css as w}from"lit";var h=w`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.border-b{border-bottom-width:1px}.border-b-4{border-bottom-width:4px}.inline-block{display:inline-block}.inline-grid{display:inline-grid}.hidden{display:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.-bottom-0{bottom:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.-mb-1{margin-bottom:-.1rem}.mb-32{margin-bottom:3.2rem}.resize{resize:both}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-b-4{border-bottom-width:4px}.border-transparent{border-color:#0000}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.gap-8{gap:.8rem}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-text-link{color:var(--w-s-color-text-link)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.hover\\:s-text-link:hover{color:var(--w-s-color-text-link)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.hover\\:s-border-primary:hover{border-color:var(--w-s-color-border-primary)}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.p-0{padding:0}.p-16{padding:1.6rem}.pb-8{padding-bottom:.8rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.w-full{width: 100%;}`;var i={base:"grid w-full items-center font-bold gap-8 antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary",inactive:"s-text-subtle",active:"s-text-link s-border-selected",icon:"mx-auto",content:"flex items-center justify-center gap-8",contentUnderlined:"content-underlined"},x="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",a=class extends f{constructor(){super(...arguments);this.label="";this.active=!1;this.over=!1;this.tabClass="";this._handleClick=t=>{this.dispatchEvent(new CustomEvent("tab-click",{detail:{name:this.name},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("click",{detail:{name:this.name,originalEvent:t},bubbles:!0,composed:!0}))}}get _classes(){return p(this.tabClass,[x,i.base,this.active?i.active:i.inactive])}get _hasChildren(){return this.querySelector('[slot="icon"]')!==null||this.innerHTML.trim()!==this.label}render(){let t=this._hasChildren;return s`
+        `;import{css as w}from"lit";var h=w`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.border-b{border-bottom-width:1px}.border-b-4{border-bottom-width:4px}.inline-block{display:inline-block}.inline-grid{display:inline-grid}.hidden{display:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.-bottom-0{bottom:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.-mb-1{margin-bottom:-.1rem}.mb-32{margin-bottom:3.2rem}.resize{resize:both}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-b-4{border-bottom-width:4px}.border-transparent{border-color:#0000}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.gap-8{gap:.8rem}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-text-link{color:var(--w-s-color-text-link)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.hover\\:s-text-link:hover{color:var(--w-s-color-text-link)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.hover\\:s-border-primary:hover{border-color:var(--w-s-color-border-primary)}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.p-0{padding:0}.p-16{padding:1.6rem}.pb-8{padding-bottom:.8rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.w-full{width: 100%;}`;var i={base:"grid w-full items-center font-bold gap-8 antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary",inactive:"s-text-subtle",active:"s-text-link s-border-selected",icon:"mx-auto",content:"flex items-center justify-center gap-8",contentUnderlined:"content-underlined"},x="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",t=class extends f{constructor(){super(...arguments);this.for="";this.label="";this.active=!1;this.over=!1;this.tabClass=""}get _classes(){return p(this.tabClass,[x,i.base,this.active?i.active:i.inactive])}get _hasChildren(){return this.querySelector('[slot="icon"]')!==null||this.innerHTML.trim()!==this.label}render(){let a=this._hasChildren;return s`
       <button
         type="button"
         role="tab"
         aria-selected="${this.active?"true":"false"}"
-        aria-controls="${this.active?`warp-tabpanel-${this.name}`:""}"
-        id="warp-tab-${this.name}"
+        aria-controls="${this.for}"
+        id="warp-tab-${this.for}"
         class="${this._classes}"
-        @click="${this._handleClick}"
         tabindex="${-1}"
+        @click="${r=>{r.tab=this}}"
         style="height: 100%">
-        ${t?this.over?s`
+        ${a?this.over?s`
                 <span class="${i.icon}">
                   <slot name="icon"></slot>
                 </span>
@@ -2460,5 +2460,5 @@ var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(n,o,t,e
                 </div>
               `:s`<span class="${i.contentUnderlined}">${this.label}</span>`}
       </button>
-    `}};a.styles=[v,h],l([d({reflect:!0})],a.prototype,"name",2),l([d({reflect:!0})],a.prototype,"label",2),l([d({type:Boolean,reflect:!0})],a.prototype,"active",2),l([d({type:Boolean,reflect:!0})],a.prototype,"over",2),l([d({attribute:"tab-class",reflect:!0})],a.prototype,"tabClass",2);customElements.get("w-tab")||customElements.define("w-tab",a);export{a as WarpTab};
+    `}};t.styles=[v,h],l([d({attribute:"for",reflect:!0})],t.prototype,"for",2),l([d({reflect:!0})],t.prototype,"label",2),l([d({type:Boolean,reflect:!0})],t.prototype,"active",2),l([d({type:Boolean,reflect:!0})],t.prototype,"over",2),l([d({attribute:"tab-class",reflect:!0})],t.prototype,"tabClass",2);customElements.get("w-tab")||customElements.define("w-tab",t);export{t as WarpTab};
 //# sourceMappingURL=tab.js.map