@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.22

package/dist/packages/tabs/tabs.stories.js

@@ -1,4 +1,4 @@
-var _=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var a=(s,i,e,r)=>{for(var o=r>1?void 0:r?C(i,e):i,t=s.length-1,n;t>=0;t--)(n=s[t])&&(o=(r?n(i,e,o):n(o))||o);return r&&o&&_(i,e,o),o};import{html as f}from"lit";import{html as A,LitElement as Y}from"lit";var p=function(){for(var s=[],i=arguments.length;i--;)s[i]=arguments[i];return s.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{property as k,query as y}from"lit/decorators.js";import{css as x}from"lit";var g=x`
+var _=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var a=(n,i,r,e)=>{for(var o=e>1?void 0:e?C(i,r):i,t=n.length-1,s;t>=0;t--)(s=n[t])&&(o=(e?s(i,r,o):s(o))||o);return e&&o&&_(i,r,o),o};import{html as f}from"lit";var p=function(){for(var n=[],i=arguments.length;i--;)n[i]=arguments[i];return n.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{html as m,LitElement as A}from"lit";import{property as v}from"lit/decorators.js";import{css as x}from"lit";var h=x`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var _=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var a=(s,i,e,r
   svg {
     pointer-events: none;
   }
-`,H=x`*, :before, :after {
+`,N=x`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,14 +2437,7 @@ var _=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var a=(s,i,e,r
                     display: none
                 }
             }
-        `;import{css as E}from"lit";var h=E`*,: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 w={wrapper:"inline-block border-b s-border mb-32",base:"inline-grid relative -mb-1",selectionIndicator:"absolute s-border-selected -bottom-0 border-b-4 transition-all"},z={cols1:"grid-cols-1",cols2:"grid-cols-2",cols3:"grid-cols-3",cols4:"grid-cols-4",cols5:"grid-cols-5",cols6:"grid-cols-6",cols7:"grid-cols-7",cols8:"grid-cols-8",cols9:"grid-cols-9"};function $(s,i=200,e=!1){let r;return((...o)=>{let t=()=>{r=null,e||s(...o)},n=e&&!r;r&&clearTimeout(r),r=setTimeout(t,i),n&&s(...o)})}var c=class extends Y{constructor(){super();this.active="";this.tabClass="";this._activeTab="";this._updateSelectionIndicatorDebounced=$(this.updateSelectionIndicator.bind(this),100);this._handleTabClick=e=>{let r=e.detail.name;r!==this._activeTab&&(this.active=r,this._activeTab=r,this.updateSelectionIndicator(),this.updatePanels(),this._notifyTabChange())};this._handleKeyDown=e=>{if(e.altKey||e.ctrlKey||e.shiftKey||!["ArrowLeft","ArrowRight","Home","End"].includes(e.key))return;let r=Array.from(this.querySelectorAll("w-tab")),o=r.findIndex(n=>n.getAttribute("name")===this._activeTab);if(o===-1)return;let t=o;switch(e.key){case"Home":t=0;break;case"End":t=r.length-1;break;case"ArrowLeft":t=Math.max(0,o-1);break;case"ArrowRight":t=Math.min(r.length-1,o+1);break}if(t!==o){e.preventDefault();let n=r[t],u=n.getAttribute("name");u&&(this.active=u,this._activeTab=u,this.updateSelectionIndicator(),this.updatePanels(),this._notifyTabChange(),n.focus())}};this.addEventListener("tab-click",this._handleTabClick)}connectedCallback(){super.connectedCallback(),typeof ResizeObserver!="undefined"&&(this._resizeObserver=new ResizeObserver(()=>{this._updateSelectionIndicatorDebounced()}),this._resizeObserver.observe(this)),window.addEventListener("resize",this._updateSelectionIndicatorDebounced)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),window.removeEventListener("resize",this._updateSelectionIndicatorDebounced),this.removeEventListener("tab-click",this._handleTabClick)}firstUpdated(){this._initializeActiveTab(),this.updateSelectionIndicator(),this.updatePanels()}updated(e){e.has("active")&&this.active!==this._activeTab&&(this._activeTab=this.active,this.updateSelectionIndicator(),this.updatePanels(),this._notifyTabChange())}_initializeActiveTab(){let e=Array.from(this.querySelectorAll("w-tab")),r=e.find(o=>o.hasAttribute("active"));r?this._activeTab=r.getAttribute("name")||"":e.length>0&&(this._activeTab=e[0].getAttribute("name")||""),this._activeTab&&(this.active=this._activeTab)}_notifyTabChange(){this.dispatchEvent(new CustomEvent("change",{detail:{name:this._activeTab},bubbles:!0,composed:!0}))}updateSelectionIndicator(){requestAnimationFrame(()=>{if(!this.tabList||!this.selectionIndicator)return;let e=this.tabList.querySelector(`w-tab[name="${this._activeTab}"]`);if(!e)return;let r=this.tabList.getBoundingClientRect(),o=e.getBoundingClientRect(),t=o.left-r.left,n=o.width;this.selectionIndicator.style.left=`${t}px`,this.selectionIndicator.style.width=`${n}px`})}updatePanels(){document.querySelectorAll("w-tab-panel").forEach(o=>{o.getAttribute("name")===this._activeTab?(o.removeAttribute("hidden"),o.hidden=!1):(o.setAttribute("hidden",""),o.hidden=!0)}),this.querySelectorAll("w-tab").forEach(o=>{o.getAttribute("name")===this._activeTab?o.setAttribute("active",""):o.removeAttribute("active")})}get _tabCount(){return this.querySelectorAll("w-tab").length}get _gridClass(){let e=Math.min(this._tabCount,9);return z[`cols${e}`]||z.cols1}render(){let e=p(this.tabClass,w.wrapper),r=p([w.base,this._gridClass]);return A`
-      <div class="${e}">
-        <div role="tablist" class="${r}" @keydown="${this._handleKeyDown}">
-          <slot></slot>
-          <span class="selection-indicator ${w.selectionIndicator}" data-testid="selection-indicator"></span>
-        </div>
-      </div>
-    `}};c.styles=[g,h],a([k({reflect:!0})],c.prototype,"active",2),a([k({attribute:"tab-class",reflect:!0})],c.prototype,"tabClass",2),a([y('[role="tablist"]')],c.prototype,"tabList",2),a([y(".selection-indicator")],c.prototype,"selectionIndicator",2);customElements.get("w-tabs")||customElements.define("w-tabs",c);import{html as m,LitElement as L}from"lit";import{property as v}from"lit/decorators.js";var d={base:"grid w-full items-center font-bold gap-8 focusable 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"},j="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",l=class extends L{constructor(){super(...arguments);this.label="";this.active=!1;this.over=!1;this.tabClass="";this._handleClick=e=>{this.dispatchEvent(new CustomEvent("tab-click",{detail:{name:this.name},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("click",{detail:{name:this.name,originalEvent:e},bubbles:!0,composed:!0}))}}get _classes(){return p(this.tabClass,[j,d.base,this.active?d.active:d.inactive])}get _hasChildren(){return this.querySelector('[slot="icon"]')!==null||this.innerHTML.trim()!==this.label}render(){let e=this._hasChildren;return m`
+        `;import{css as E}from"lit";var g=E`*,: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 d={base:"grid w-full items-center font-bold gap-8 focusable 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"},L="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",l=class extends A{constructor(){super(...arguments);this.label="";this.active=!1;this.over=!1;this.tabClass="";this._handleClick=r=>{this.dispatchEvent(new CustomEvent("tab-click",{detail:{name:this.name},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("click",{detail:{name:this.name,originalEvent:r},bubbles:!0,composed:!0}))}}get _classes(){return p(this.tabClass,[L,d.base,this.active?d.active:d.inactive])}get _hasChildren(){return this.querySelector('[slot="icon"]')!==null||this.innerHTML.trim()!==this.label}render(){let r=this._hasChildren;return m`
       <button
         type="button"
         role="tab"
@@ -2454,7 +2447,7 @@ var _=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var a=(s,i,e,r
         tabindex="${this.active?"0":"-1"}"
         class="${this._classes}"
         @click="${this._handleClick}">
-        ${e?this.over?m`
+        ${r?this.over?m`
                 <span class="${d.icon}">
                   <slot name="icon"></slot>
                 </span>
@@ -2466,7 +2459,14 @@ var _=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var a=(s,i,e,r
                 </div>
               `:m`<span class="${d.contentUnderlined}">${this.label}</span>`}
       </button>
-    `}};l.styles=[g,h],a([v({reflect:!0})],l.prototype,"name",2),a([v({reflect:!0})],l.prototype,"label",2),a([v({type:Boolean,reflect:!0})],l.prototype,"active",2),a([v({type:Boolean,reflect:!0})],l.prototype,"over",2),a([v({attribute:"tab-class",reflect:!0})],l.prototype,"tabClass",2);customElements.get("w-tab")||customElements.define("w-tab",l);import{html as S,LitElement as I}from"lit";import{property as T}from"lit/decorators.js";var b=class extends I{constructor(){super(...arguments);this.hidden=!0}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","-1"),this.setAttribute("role","tabpanel"),this.name&&(this.setAttribute("aria-labelledby",`warp-tab-${this.name}`),this.setAttribute("id",`warp-tabpanel-${this.name}`))}updated(e){e.has("name")&&this.name&&(this.setAttribute("aria-labelledby",`warp-tab-${this.name}`),this.setAttribute("id",`warp-tabpanel-${this.name}`))}render(){return S`<slot></slot>`}};b.styles=[g,h],a([T({reflect:!0})],b.prototype,"name",2),a([T({type:Boolean,reflect:!0})],b.prototype,"hidden",2);customElements.get("w-tab-panel")||customElements.define("w-tab-panel",b);var M={title:"Components/Tabs"},ue=M,we=()=>f`
+    `}};l.styles=[h,g],a([v({reflect:!0})],l.prototype,"name",2),a([v({reflect:!0})],l.prototype,"label",2),a([v({type:Boolean,reflect:!0})],l.prototype,"active",2),a([v({type:Boolean,reflect:!0})],l.prototype,"over",2),a([v({attribute:"tab-class",reflect:!0})],l.prototype,"tabClass",2);customElements.get("w-tab")||customElements.define("w-tab",l);import{html as Y,LitElement as $}from"lit";import{property as k}from"lit/decorators.js";var b=class extends ${constructor(){super(...arguments);this.hidden=!0}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","-1"),this.setAttribute("role","tabpanel"),this.name&&(this.setAttribute("aria-labelledby",`warp-tab-${this.name}`),this.setAttribute("id",`warp-tabpanel-${this.name}`))}updated(r){r.has("name")&&this.name&&(this.setAttribute("aria-labelledby",`warp-tab-${this.name}`),this.setAttribute("id",`warp-tabpanel-${this.name}`))}render(){return Y`<slot></slot>`}};b.styles=[h,g],a([k({reflect:!0})],b.prototype,"name",2),a([k({type:Boolean,reflect:!0})],b.prototype,"hidden",2);customElements.get("w-tab-panel")||customElements.define("w-tab-panel",b);import{html as j,LitElement as S}from"lit";import{property as y,query as z}from"lit/decorators.js";var w={wrapper:"inline-block border-b s-border mb-32",base:"inline-grid relative -mb-1",selectionIndicator:"absolute s-border-selected -bottom-0 border-b-4 transition-all"},T={cols1:"grid-cols-1",cols2:"grid-cols-2",cols3:"grid-cols-3",cols4:"grid-cols-4",cols5:"grid-cols-5",cols6:"grid-cols-6",cols7:"grid-cols-7",cols8:"grid-cols-8",cols9:"grid-cols-9"};function M(n,i=200,r=!1){let e;return((...o)=>{let t=()=>{e=null,r||n(...o)},s=r&&!e;e&&clearTimeout(e),e=setTimeout(t,i),s&&n(...o)})}var c=class extends S{constructor(){super();this.active="";this.tabClass="";this._activeTab="";this._updateSelectionIndicatorDebounced=M(this.updateSelectionIndicator.bind(this),100);this._handleTabClick=r=>{let e=r.detail.name;e!==this._activeTab&&(this.active=e,this._activeTab=e,this.updateSelectionIndicator(),this.updatePanels(),this._notifyTabChange())};this._handleKeyDown=r=>{if(r.altKey||r.ctrlKey||r.shiftKey||!["ArrowLeft","ArrowRight","Home","End"].includes(r.key))return;let e=Array.from(this.querySelectorAll("w-tab")),o=e.findIndex(s=>s.getAttribute("name")===this._activeTab);if(o===-1)return;let t=o;switch(r.key){case"Home":t=0;break;case"End":t=e.length-1;break;case"ArrowLeft":t=Math.max(0,o-1);break;case"ArrowRight":t=Math.min(e.length-1,o+1);break}if(t!==o){r.preventDefault();let s=e[t],u=s.getAttribute("name");u&&(this.active=u,this._activeTab=u,this.updateSelectionIndicator(),this.updatePanels(),this._notifyTabChange(),s.focus())}};this.addEventListener("tab-click",this._handleTabClick)}connectedCallback(){super.connectedCallback(),typeof ResizeObserver!="undefined"&&(this._resizeObserver=new ResizeObserver(()=>{this._updateSelectionIndicatorDebounced()}),this._resizeObserver.observe(this)),window.addEventListener("resize",this._updateSelectionIndicatorDebounced)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),window.removeEventListener("resize",this._updateSelectionIndicatorDebounced),this.removeEventListener("tab-click",this._handleTabClick)}firstUpdated(){this._initializeActiveTab(),this.updateSelectionIndicator(),this.updatePanels()}updated(r){r.has("active")&&this.active!==this._activeTab&&(this._activeTab=this.active,this.updateSelectionIndicator(),this.updatePanels(),this._notifyTabChange())}get tabs(){var o;return((o=this.shadowRoot)==null?void 0:o.querySelector("slot")).assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="w-tab")}get activeTab(){return this.tabs.filter(e=>e.name===this._activeTab)[0]}_initializeActiveTab(){this.activeTab?this._activeTab=this.activeTab.getAttribute("name")||"":this.tabs.length>0&&(this._activeTab=this.tabs[0].getAttribute("name")||""),this._activeTab&&(this.active=this._activeTab)}_notifyTabChange(){this.dispatchEvent(new CustomEvent("change",{detail:{name:this._activeTab},bubbles:!0,composed:!0}))}updateSelectionIndicator(){requestAnimationFrame(()=>{if(!this.tabList||!this.selectionIndicator||!this.activeTab)return;let r=this.tabList.getBoundingClientRect(),e=this.activeTab.getBoundingClientRect(),o=e.left-r.left,t=e.width;this.selectionIndicator.style.left=`${o}px`,this.selectionIndicator.style.width=`${t}px`})}updatePanels(){document.querySelectorAll("w-tab-panel").forEach(o=>{o.name===this._activeTab?(o.removeAttribute("hidden"),o.hidden=!1):(o.setAttribute("hidden",""),o.hidden=!0)}),this.querySelectorAll("w-tab").forEach(o=>{o.getAttribute("name")===this._activeTab?o.setAttribute("active",""):o.removeAttribute("active")})}get _tabCount(){return this.querySelectorAll("w-tab").length}get _gridClass(){let r=Math.min(this._tabCount,9);return T[`cols${r}`]||T.cols1}render(){let r=p(this.tabClass,w.wrapper),e=p([w.base,this._gridClass]);return j`
+      <div class="${r}">
+        <div role="tablist" class="${e}" @keydown="${this._handleKeyDown}">
+          <slot></slot>
+          <span class="selection-indicator ${w.selectionIndicator}" data-testid="selection-indicator"></span>
+        </div>
+      </div>
+    `}};c.styles=[h,g],a([y({reflect:!0})],c.prototype,"active",2),a([y({attribute:"tab-class",reflect:!0})],c.prototype,"tabClass",2),a([z('[role="tablist"]')],c.prototype,"tabList",2),a([z(".selection-indicator")],c.prototype,"selectionIndicator",2);customElements.get("w-tabs")||customElements.define("w-tabs",c);var I={title:"Components/Tabs"},ue=I,we=()=>f`
   <w-tabs active="tab1">
     <w-tab name="tab1" label="First Tab"></w-tab>
     <w-tab name="tab2" label="Second Tab"></w-tab>