@warp-ds/elements 2.8.0-next.4 → 2.8.0-next.5

package/dist/custom-elements.json

@@ -7212,6 +7212,16 @@
           "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)",
           "name": "WarpTab",
           "members": [
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "id",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "for",
@@ -7222,13 +7232,31 @@
               "attribute": "for",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "ariaSelected",
+              "type": {
+                "text": "'true' | 'false'"
+              },
+              "attribute": "aria-selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "attribute": "tabindex",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "active",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
+              "deprecated": "Use `aria-selected=\"true\"` instead",
               "attribute": "active",
               "reflects": true
             },
@@ -7256,6 +7284,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "id"
+            },
             {
               "name": "for",
               "type": {
@@ -7264,12 +7300,26 @@
               "default": "''",
               "fieldName": "for"
             },
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "'true' | 'false'"
+              },
+              "fieldName": "ariaSelected"
+            },
+            {
+              "name": "tabindex",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "tabIndex"
+            },
             {
               "name": "active",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
+              "deprecated": "Use `aria-selected=\"true\"` instead",
               "fieldName": "active"
             },
             {
@@ -7328,11 +7378,6 @@
               "default": "true",
               "attribute": "hidden",
               "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "_syncA11yAttributes",
-              "privacy": "private"
             }
           ],
           "attributes": [
@@ -7389,7 +7434,6 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
               "attribute": "active",
               "reflects": true
             },
@@ -7409,6 +7453,11 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_uniqueId",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_activeTabFor",
@@ -7503,7 +7552,6 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
               "fieldName": "active"
             }
           ],

package/dist/index.d.ts

@@ -1628,18 +1628,38 @@ export type WarpSwitchSolidJsProps = {
 };
 
 export type WarpTabProps = {
+  /**  */
+  id?: WarpTab["id"];
   /**  */
   for?: WarpTab["for"];
   /**  */
+  "aria-selected"?: WarpTab["ariaSelected"];
+  /**  */
+  ariaSelected?: WarpTab["ariaSelected"];
+  /**  */
+  tabindex?: WarpTab["tabIndex"];
+  /**  */
+  tabIndex?: WarpTab["tabIndex"];
+  /** @deprecated Use `aria-selected="true"` instead  */
   active?: WarpTab["active"];
   /**  */
   over?: WarpTab["over"];
 };
 
 export type WarpTabSolidJsProps = {
+  /**  */
+  "prop:id"?: WarpTab["id"];
   /**  */
   "prop:for"?: WarpTab["for"];
   /**  */
+  "attr:aria-selected"?: WarpTab["ariaSelected"];
+  /**  */
+  "prop:ariaSelected"?: WarpTab["ariaSelected"];
+  /**  */
+  "attr:tabindex"?: WarpTab["tabIndex"];
+  /**  */
+  "prop:tabIndex"?: WarpTab["tabIndex"];
+  /** @deprecated Use `aria-selected="true"` instead  */
   "prop:active"?: WarpTab["active"];
   /**  */
   "prop:over"?: WarpTab["over"];
@@ -2645,7 +2665,10 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `id`: undefined
    * - `for`: undefined
+   * - `aria-selected`/`ariaSelected`: undefined
+   * - `tabindex`/`tabIndex`: undefined
    * - `active`: undefined
    * - `over`: undefined
    */
@@ -3696,7 +3719,10 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `id`: undefined
    * - `for`: undefined
+   * - `aria-selected`/`ariaSelected`: undefined
+   * - `tabindex`/`tabIndex`: undefined
    * - `active`: undefined
    * - `over`: undefined
    */

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 /**
  * Individual tab component used within w-tabs container.
  *
@@ -6,10 +6,18 @@ import { LitElement } from 'lit';
  */
 export declare class WarpTab extends LitElement {
     static styles: import("lit").CSSResult[];
+    id: string;
     for: string;
+    ariaSelected: 'true' | 'false';
+    tabIndex: number;
+    /**
+     * @deprecated Use `aria-selected="true"` instead
+     */
     active: boolean;
     over: boolean;
     private get _classes();
     private get _hasIcon();
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/packages/tab/tab.js

@@ -1,4 +1,4 @@
-var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=(n,o,t,r)=>{for(var e=r>1?void 0:r?u(o,t):o,s=n.length-1,c;s>=0;s--)(c=n[s])&&(e=(r?c(o,t,e):c(e))||e);return r&&e&&m(o,t,e),e};var b=function(){for(var n=[],o=arguments.length;o--;)n[o]=arguments[o];return n.reduce(function(t,r){return t.concat(typeof r=="string"?r:Array.isArray(r)?b.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(e){return r[e]?e:""}):"")},[]).join(" ")};import{css as f,html as l,LitElement as x}from"lit";import{property as p}from"lit/decorators.js";import{css as g}from"lit";var v=g`
+var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(d,a,r,e)=>{for(var o=e>1?void 0:e?m(a,r):a,c=d.length-1,b;c>=0;c--)(b=d[c])&&(o=(e?b(a,r,o):b(o))||o);return e&&o&&h(a,r,o),o};var p=function(){for(var d=[],a=arguments.length;a--;)d[a]=arguments[a];return d.reduce(function(r,e){return r.concat(typeof e=="string"?e:Array.isArray(e)?p.apply(void 0,e):typeof e=="object"&&e?Object.keys(e).map(function(o){return e[o]?o:""}):"")},[]).join(" ")};import{css as f,html as s,LitElement as x}from"lit";import{property as l}from"lit/decorators.js";import{css as g}from"lit";var v=g`
   *,
   :before,
   :after {
@@ -2437,28 +2437,25 @@ var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=(n,o,t,r
                     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 a={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"},k="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",i=class extends x{constructor(){super(...arguments);this.for="";this.active=!1;this.over=!1}get _classes(){return b([k,a.base,this.active?a.active:a.inactive])}get _hasIcon(){return this.querySelector('[slot="icon"]')!==null}render(){let t=this._hasIcon;return l`
+        `;import{css as w}from"lit";var u=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 n={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"},k="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",t=class extends x{constructor(){super(...arguments);this.id="";this.for="";this.over=!1}get _classes(){return p([k,n.base,this.active||this.ariaSelected==="true"?n.active:n.inactive])}get _hasIcon(){return this.querySelector('[slot="icon"]')!==null}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab"),this.setAttribute("aria-controls",this.for)}updated(r){super.updated(r),r.has("active")&&this.setAttribute("aria-selected",this.active?"true":"false"),r.has("for")&&this.setAttribute("aria-controls",this.for)}render(){let r=this._hasIcon;return s`
       <button
         type="button"
-        role="tab"
-        aria-selected="${this.active?"true":"false"}"
-        aria-controls="${this.for}"
         id="warp-tab-${this.for}"
         class="${this._classes}"
         tabindex="${-1}"
-        @click="${r=>{r.tab=this}}"
+        @click="${e=>{e.tab=this}}"
         style="height: 100%">
-        ${t?this.over?l`
-                <span class="${a.icon}">
+        ${r?this.over?s`
+                <span class="${n.icon}">
                   <slot name="icon"></slot>
                 </span>
-                <span class="${a.contentUnderlined}"><slot></slot></span>
-              `:l`
-                <div class="${a.content}">
+                <span class="${n.contentUnderlined}"><slot></slot></span>
+              `:s`
+                <div class="${n.content}">
                   <slot name="icon"></slot>
                   <slot></slot>
                 </div>
-              `:l`<span class="${a.contentUnderlined}"><slot></slot></span>`}
+              `:s`<span class="${n.contentUnderlined}"><slot></slot></span>`}
       </button>
-    `}};i.styles=[v,h,f`::slotted([slot="icon"]){display:flex}`],d([p({attribute:"for",reflect:!0})],i.prototype,"for",2),d([p({type:Boolean,reflect:!0})],i.prototype,"active",2),d([p({type:Boolean,reflect:!0})],i.prototype,"over",2);customElements.get("w-tab")||customElements.define("w-tab",i);export{i as WarpTab};
+    `}};t.styles=[v,u,f`::slotted([slot="icon"]){display:flex}`],i([l({attribute:"id",reflect:!0})],t.prototype,"id",2),i([l({attribute:"for",reflect:!0})],t.prototype,"for",2),i([l({attribute:"aria-selected",reflect:!0})],t.prototype,"ariaSelected",2),i([l({attribute:"tabindex",type:Number,reflect:!0})],t.prototype,"tabIndex",2),i([l({type:Boolean,reflect:!0})],t.prototype,"active",2),i([l({type:Boolean,reflect:!0})],t.prototype,"over",2);customElements.get("w-tab")||customElements.define("w-tab",t);export{t as WarpTab};
 //# sourceMappingURL=tab.js.map