@warp-ds/elements 2.8.2-next.2 → 2.8.2-next.3

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

@@ -6,13 +6,47 @@ import { LitElement, PropertyValues } from 'lit';
  */
 export declare class WarpTab extends LitElement {
     static styles: import("lit").CSSResult[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     private _internals;
     private _handleClick;
     constructor();
     id: string;
     for: string;
-    ariaSelected: 'true' | 'false';
-    tabIndex: number;
+    private _ariaControlsAttr?;
+    /**
+     * Internal tabindex managed by parent w-tabs.
+     * Non-reflecting to avoid DOM changes during hydration.
+     * @internal
+     */
+    _parentTabIndex: number | undefined;
+    /**
+     * Internal aria-selected managed by parent w-tabs.
+     * Non-reflecting to avoid DOM changes during hydration.
+     * @internal
+     */
+    _parentAriaSelected: 'true' | 'false' | undefined;
+    /**
+     * Override tabIndex getter to return the computed internal tabIndex.
+     * This allows external code to check if the tab is focusable.
+     */
+    get tabIndex(): number;
+    /**
+     * Override tabIndex setter to set _parentTabIndex (for backwards compatibility).
+     */
+    set tabIndex(value: number);
+    /**
+     * Computed aria-selected: prefers parent-managed, falls back to own property
+     */
+    get _computedAriaSelected(): 'true' | 'false' | undefined;
+    private get _effectiveAriaControls();
+    set ariaSelected(value: 'true' | 'false');
+    get ariaSelected(): 'true' | 'false';
+    private _ownAriaSelected;
     /**
      * @deprecated Use `aria-selected="true"` instead
      */
@@ -23,5 +57,6 @@ export declare class WarpTab extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
+    private syncAriaControls;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -0,0 +1 @@
+import './tab.js';

package/dist/packages/tab/tab.hydration.test.js

@@ -0,0 +1,25 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './tab.js';
+describe('w-tab React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-tab', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with for hydrates without warnings', async () => {
+        const warnings = await testHydration('w-tab', { for: 'panel1' });
+        expect(warnings).toEqual([]);
+    });
+    test('active tab hydrates without warnings', async () => {
+        const warnings = await testHydration('w-tab', { for: 'panel1', active: true });
+        expect(warnings).toEqual([]);
+    });
+    test('with id hydrates without warnings', async () => {
+        const warnings = await testHydration('w-tab', { for: 'panel1', id: 'tab1' });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/tab/tab.js

@@ -1,4 +1,4 @@
-var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(l,a,e,r)=>{for(var o=r>1?void 0:r?m(a,e):a,c=l.length-1,b;c>=0;c--)(b=l[c])&&(o=(r?b(a,e,o):b(o))||o);return r&&o&&u(a,e,o),o};var p=function(){for(var l=[],a=arguments.length;a--;)l[a]=arguments[a];return l.reduce(function(e,r){return e.concat(typeof r=="string"?r:Array.isArray(r)?p.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(o){return r[o]?o:""}):"")},[]).join(" ")};import{css as f,html as s,LitElement as x}from"lit";import{property as d}from"lit/decorators.js";import{css as g}from"lit";var v=g`
+var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var i=(d,a,e,r)=>{for(var o=r>1?void 0:r?x(a,e):a,n=d.length-1,c;n>=0;n--)(c=d[n])&&(o=(r?c(a,e,o):c(o))||o);return r&&o&&f(a,e,o),o};var p=function(){for(var d=[],a=arguments.length;a--;)d[a]=arguments[a];return d.reduce(function(e,r){return e.concat(typeof r=="string"?r:Array.isArray(r)?p.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(o){return r[o]?o:""}):"")},[]).join(" ")};import{css as y,html as b,LitElement as w}from"lit";import{property as l}from"lit/decorators.js";import{css as u}from"lit";var h=u`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(l,a,e,r
   svg {
     pointer-events: none;
   }
-`,j=g`*, :before, :after {
+`,A=u`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,26 +2437,36 @@ var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(l,a,e,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 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();this._handleClick=e=>{e.tab||(e.tab=this)};this.id="";this.for="";this.active=!1;this.over=!1;this._internals=this.attachInternals()}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._internals.role="tab",this.setAttribute("aria-controls",this.for),this.addEventListener("click",this._handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick)}updated(e){super.updated(e),e.has("ariaSelected")&&(this._internals.ariaSelected=this.ariaSelected),e.has("active")&&this.hasAttribute("active")&&(this._internals.ariaSelected=this.active?"true":"false"),e.has("for")&&this.setAttribute("aria-controls",this.for)}render(){let e=this._hasIcon;return s`
+        `;import{css as k}from"lit";var m=k`*,: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 s={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"},z="focusable appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",t=class extends w{constructor(){super();this._handleClick=e=>{e.tab||(e.tab=this)};this.active=!1;this.over=!1;this._internals=this.attachInternals()}get tabIndex(){var e;return(e=this._parentTabIndex)!=null?e:0}set tabIndex(e){this._parentTabIndex=e}get _computedAriaSelected(){var e;return(e=this._parentAriaSelected)!=null?e:this._ownAriaSelected}get _effectiveAriaControls(){return this._ariaControlsAttr||this.for||""}set ariaSelected(e){var o;let r=this._ownAriaSelected;this._ownAriaSelected=e,this._internals.ariaSelected=(o=this._computedAriaSelected)!=null?o:null,this.requestUpdate("ariaSelected",r)}get ariaSelected(){var e;return(e=this._computedAriaSelected)!=null?e:"false"}get _classes(){return p([z,s.base,this.active||this.ariaSelected==="true"?s.active:s.inactive])}get _hasIcon(){return this.querySelector('[slot="icon"]')!==null}connectedCallback(){super.connectedCallback(),this._internals.role="tab",this.syncAriaControls(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick)}updated(e){var o;super.updated(e);let r=e;e.has("_parentAriaSelected")&&(this._internals.ariaSelected=(o=this._computedAriaSelected)!=null?o:null),r.has("_ariaControlsAttr")&&this.syncAriaControls(),e.has("for")&&this.syncAriaControls(),e.has("active")&&this.hasAttribute("active")&&(this._internals.ariaSelected=this.active?"true":"false")}syncAriaControls(){var c,g,v;let e=this._effectiveAriaControls,r=this.closest("w-tabs"),o=(v=(g=r==null?void 0:r.querySelector(`w-tab-panel#${CSS.escape(e)}`))!=null?g:(c=this.ownerDocument)==null?void 0:c.getElementById(e))!=null?v:null,n=this._internals;if("ariaControlsElements"in n){n.ariaControlsElements=o?[o]:[];return}"ariaControls"in n&&(n.ariaControls=e||null)}render(){var r;let e=this._hasIcon;return b`
       <button
         type="button"
         role="none"
         id="warp-tab-${this.for}"
         class="${this._classes}"
-        tabindex="${-1}"
-        @click="${r=>{r.tab=this}}"
+        tabindex="${(r=this._parentTabIndex)!=null?r:0}"
+        aria-controls="${this._effectiveAriaControls}"
+        @click="${o=>{o.tab=this}}"
         style="height: 100%">
-        ${e?this.over?s`
-                <span class="${n.icon}">
+        ${e?this.over?b`
+                <span class="${s.icon}">
                   <slot name="icon"></slot>
                 </span>
-                <span class="${n.contentUnderlined}"><slot></slot></span>
-              `:s`
-                <div class="${n.content}">
+                <span class="${s.contentUnderlined}"><slot></slot></span>
+              `:b`
+                <div class="${s.content}">
                   <slot name="icon"></slot>
                   <slot></slot>
                 </div>
-              `:s`<span class="${n.contentUnderlined}"><slot></slot></span>`}
+              `:b`<span class="${s.contentUnderlined}"><slot></slot></span>`}
       </button>
-    `}};t.styles=[v,h,f`::slotted([slot="icon"]){display:flex}`],i([d({attribute:"id",reflect:!0})],t.prototype,"id",2),i([d({attribute:"for",reflect:!0})],t.prototype,"for",2),i([d({attribute:"aria-selected"})],t.prototype,"ariaSelected",2),i([d({attribute:"tabindex",type:Number,reflect:!0})],t.prototype,"tabIndex",2),i([d({type:Boolean,reflect:!0})],t.prototype,"active",2),i([d({type:Boolean,reflect:!0})],t.prototype,"over",2);customElements.get("w-tab")||customElements.define("w-tab",t);export{t as WarpTab};
+    `}};t.styles=[h,m,y`
+      ::slotted([slot='icon']) {
+        display: flex;
+      }
+
+      button.focusable:focus-visible {
+        outline: 2px solid var(--w-s-color-border-focus, #1a73e8);
+        outline-offset: var(--w-outline-offset, 1px);
+      }
+    `],t.shadowRootOptions={...w.shadowRootOptions,delegatesFocus:!0},i([l({attribute:"id",reflect:!0})],t.prototype,"id",2),i([l({attribute:"for",reflect:!0})],t.prototype,"for",2),i([l({attribute:"aria-controls"})],t.prototype,"_ariaControlsAttr",2),i([l({attribute:!1})],t.prototype,"_parentTabIndex",2),i([l({attribute:!1})],t.prototype,"_parentAriaSelected",2),i([l({attribute:"aria-selected"})],t.prototype,"ariaSelected",1),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