@solid-design-system/components 5.15.11 → 5.15.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solid-design-system/components",
   "description": "Solid Design System: Components",
-  "version": "5.15.11",
+  "version": "5.15.13",
   "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
   "author": "Union Investment",
   "license": "MIT",

package/cdn/chunks/chunk.ON26SYWV.js

@@ -1 +0,0 @@
-import{a as T}from"./chunk.MHWW3RZB.js";import{c as b}from"./chunk.3L472FD4.js";import{a as u}from"./chunk.CHU57RUD.js";import{a as c}from"./chunk.YEDQWNIV.js";import{a as w}from"./chunk.Y7NVH75J.js";import{a as g,b as y,c as v,d as h,h as f}from"./chunk.TJ7ZA5LO.js";import{b as m,e as d}from"./chunk.RZUTJ36B.js";import{a as p,e as l}from"./chunk.TJOCV4DC.js";var a=class extends f{constructor(){super(...arguments);this.localize=new w(this);this.tabs=[];this.panels=[];this.hasScrollControls=!1;this.variant="default";this.canScroll={left:!1,right:!1};this.activation="auto"}connectedCallback(){let t=Promise.all([customElements.whenDefined("sd-tab"),customElements.whenDefined("sd-tab-panel")]);super.connectedCallback(),this.resizeObserver=new ResizeObserver(()=>{this.updateScrollControls(),this.repositionIndicator()}),this.mutationObserver=new MutationObserver(s=>{s.some(e=>!["aria-labelledby","aria-controls"].includes(e.attributeName))&&setTimeout(()=>this.setAriaLabels()),s.some(e=>e.attributeName==="disabled")&&this.syncTabsAndPanels()}),this.updateComplete.then(()=>{this.syncTabsAndPanels(),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.resizeObserver.observe(this.nav),this.handleScroll(),this.nav.addEventListener("scroll",()=>this.handleScroll()),t.then(()=>{new IntersectionObserver((e,o)=>{var i;e[0].intersectionRatio>0&&(this.setAriaLabels(),this.setActiveTab((i=this.activeTab)!=null?i:this.tabs[0],{emitEvents:!1}),o.unobserve(e[0].target))}).observe(this.tabGroup)})})}disconnectedCallback(){var t;this.mutationObserver.disconnect(),this.nav&&((t=this.resizeObserver)==null||t.unobserve(this.nav))}getAllTabs(t={includeDisabled:!0}){let s=this.shadowRoot.querySelector('slot[name="nav"]');return Array.from(s.assignedElements()).map(e=>e.tagName.toLocaleLowerCase()==="sd-tab"?e:e.querySelector("sd-tab")).filter(e=>e&&t.includeDisabled?e.tagName.toLowerCase()==="sd-tab":e.tagName.toLowerCase()==="sd-tab"&&!e.disabled)}getAllPanels(){return[...this.body.assignedElements()].filter(t=>t.tagName.toLowerCase()==="sd-tab-panel")}getActiveTab(){return this.tabs.find(t=>t.matches(":focus"))}handleClick(t){let e=t.target.closest("sd-tab");(e==null?void 0:e.closest("sd-tab-group"))===this&&e!==null&&this.setActiveTab(e,{scrollBehavior:"smooth"})}handleKeyDown(t){let e=t.target.closest("sd-tab");if((e==null?void 0:e.closest("sd-tab-group"))===this){if(["Enter"," "].includes(t.key)&&e!==null&&(this.setActiveTab(e,{scrollBehavior:"smooth"}),t.preventDefault()),["Tab"].includes(t.key)){let i=this.tabs.indexOf(this.getActiveTab()),n=this.tabs[i+1];e!==null&&n&&b(n,this.nav,"horizontal")}if(["Shift","Tab"].includes(t.key)){let i=this.tabs.indexOf(this.getActiveTab()),n=this.tabs[i-1];e!==null&&n&&b(n,this.nav,"horizontal")}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){let i=this.tabs.find(r=>r.matches(":focus")),n=this.localize.dir()==="rtl";if((i==null?void 0:i.tagName.toLowerCase())==="sd-tab"){let r=this.tabs.indexOf(i);t.key==="Home"?r=0:t.key==="End"?r=this.tabs.length-1:t.key===(n?"ArrowRight":"ArrowLeft")||t.key==="ArrowUp"?r--:(t.key===(n?"ArrowLeft":"ArrowRight")||t.key==="ArrowDown")&&r++,r<0&&(r=this.tabs.length-1),r>this.tabs.length-1&&(r=0),this.tabs[r].focus({preventScroll:!0}),this.activation==="auto"&&this.setActiveTab(this.tabs[r],{scrollBehavior:"smooth"}),b(this.tabs[r],this.nav,"horizontal"),t.preventDefault()}}}}handleScroll(){this.canScroll={left:this.nav.scrollLeft>0,right:this.nav.scrollLeft+this.nav.clientWidth<this.nav.scrollWidth-1}}handleScrollToStart(){this.nav.scroll({left:this.localize.dir()==="rtl"?this.nav.scrollLeft+this.nav.clientWidth:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}handleScrollToEnd(){this.nav.scroll({left:this.localize.dir()==="rtl"?this.nav.scrollLeft-this.nav.clientWidth:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}setActiveTab(t,s){if(s=p({emitEvents:!0,scrollBehavior:"auto"},s),t!==this.activeTab&&!t.disabled&&!t.visuallyDisabled){let e=this.activeTab;this.activeTab=t,this.tabs.map(o=>o.active=o===this.activeTab),this.panels.map(o=>{var i;return o.active=o.name===((i=this.activeTab)==null?void 0:i.panel)}),this.repositionIndicator(),b(this.activeTab,this.nav,"horizontal",s.scrollBehavior),s.emitEvents&&(e&&this.emit("sd-tab-hide",{detail:{name:e.panel}}),this.emit("sd-tab-show",{detail:{name:this.activeTab.panel}}))}}setAriaLabels(){this.tabs.forEach(t=>{let s=this.panels.find(e=>e.name===t.panel);s&&t.setAttribute("aria-controls",s.getAttribute("id"))})}syncTabsAndPanels(){this.tabs=this.getAllTabs({includeDisabled:!1}),this.panels=this.getAllPanels(),this.repositionIndicator(),this.panels.forEach(t=>{t.tabIndex=0}),this.updateComplete.then(()=>this.updateScrollControls()),this.tabs.length!==0&&this.tabs[0].variant==="container"&&(this.variant="container")}updateScrollControls(){this.hasScrollControls=this.nav.scrollWidth>this.nav.clientWidth}async repositionIndicator(){await this.updateComplete;let t=this.activeTab,s=this.indicator,e=this.tabsContainer;if(!t||!s||!e||t.variant==="container")return;let o=t.getBoundingClientRect(),i=e.getBoundingClientRect(),n=getComputedStyle(e).justifyContent==="center",r=i.left+i.width/2,A=o.left+o.width/2,x=t.offsetWidth,C=n?A-r:o.left-i.left;s.style.width=`${x}px`,s.style.transform=`translateX(${C}px)`}show(t){let s=this.tabs.find(e=>e.panel===t);s&&this.setActiveTab(s,{scrollBehavior:"smooth"})}render(){var s;let t=this.localize.dir()==="rtl";return d`<div part="base" class="${c("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${c(this.hasScrollControls&&"relative py-0 px-12")}">${this.hasScrollControls?d`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${u(!this.canScroll.left||void 0)}" class="${c("sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",this.localize.dir()==="rtl"&&"left-auto right-0")}" @click="${this.handleScrollToStart}"><sd-icon library="_internal" name="${t?"chevron-up":"chevron-down"}" label="previous" class="${c("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>`:""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${c("flex flex-auto relative flex-row")}" role="tablist">${((s=this.activeTab)==null?void 0:s.variant)!=="container"?d`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>`:""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls?d`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${u(!this.canScroll.right||void 0)}" class="${c("sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",this.localize.dir()==="rtl"&&"right-auto left-0")}" @click="${this.handleScrollToEnd}"><sd-icon library="_internal" name="${t?"chevron-down":"chevron-up"}" label="next" class="${c("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>`:""}</div><slot part="body" class="${c("block auto py-8 px-6",this.variant==="container"&&"border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`}};a.styles=[...f.styles,m`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-tab-panel){--padding:1rem 0}::slotted(sd-tab-panel:focus-visible){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`],l([h("[part=base]")],a.prototype,"tabGroup",2),l([h("[part=body]")],a.prototype,"body",2),l([h("[part=scroll-container]")],a.prototype,"nav",2),l([h("[part=active-tab-indicator]")],a.prototype,"indicator",2),l([h('[part="tabs"]')],a.prototype,"tabsContainer",2),l([v()],a.prototype,"hasScrollControls",2),l([v()],a.prototype,"variant",2),l([v()],a.prototype,"canScroll",2),l([y({type:String,reflect:!0})],a.prototype,"activation",2),l([T(20)],a.prototype,"handleScroll",1),a=l([g("sd-tab-group")],a);export{a};

package/cdn-versioned/chunks/chunk.ON26SYWV.js

@@ -1 +0,0 @@
-import{a as T}from"./chunk.MHWW3RZB.js";import{c as b}from"./chunk.3L472FD4.js";import{a as u}from"./chunk.CHU57RUD.js";import{a as c}from"./chunk.YEDQWNIV.js";import{a as w}from"./chunk.Y7NVH75J.js";import{a as g,b as y,c as v,d as h,h as f}from"./chunk.TJ7ZA5LO.js";import{b as m,e as d}from"./chunk.RZUTJ36B.js";import{a as p,e as l}from"./chunk.TJOCV4DC.js";var a=class extends f{constructor(){super(...arguments);this.localize=new w(this);this.tabs=[];this.panels=[];this.hasScrollControls=!1;this.variant="default";this.canScroll={left:!1,right:!1};this.activation="auto"}connectedCallback(){let t=Promise.all([customElements.whenDefined("sd-5-15-11-tab"),customElements.whenDefined("sd-5-15-11-tab-panel")]);super.connectedCallback(),this.resizeObserver=new ResizeObserver(()=>{this.updateScrollControls(),this.repositionIndicator()}),this.mutationObserver=new MutationObserver(s=>{s.some(e=>!["aria-labelledby","aria-controls"].includes(e.attributeName))&&setTimeout(()=>this.setAriaLabels()),s.some(e=>e.attributeName==="disabled")&&this.syncTabsAndPanels()}),this.updateComplete.then(()=>{this.syncTabsAndPanels(),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.resizeObserver.observe(this.nav),this.handleScroll(),this.nav.addEventListener("scroll",()=>this.handleScroll()),t.then(()=>{new IntersectionObserver((e,o)=>{var i;e[0].intersectionRatio>0&&(this.setAriaLabels(),this.setActiveTab((i=this.activeTab)!=null?i:this.tabs[0],{emitEvents:!1}),o.unobserve(e[0].target))}).observe(this.tabGroup)})})}disconnectedCallback(){var t;this.mutationObserver.disconnect(),this.nav&&((t=this.resizeObserver)==null||t.unobserve(this.nav))}getAllTabs(t={includeDisabled:!0}){let s=this.shadowRoot.querySelector('slot[name="nav"]');return Array.from(s.assignedElements()).map(e=>e.tagName.toLocaleLowerCase()==="sd-5-15-11-tab"?e:e.querySelector("sd-5-15-11-tab")).filter(e=>e&&t.includeDisabled?e.tagName.toLowerCase()==="sd-5-15-11-tab":e.tagName.toLowerCase()==="sd-5-15-11-tab"&&!e.disabled)}getAllPanels(){return[...this.body.assignedElements()].filter(t=>t.tagName.toLowerCase()==="sd-5-15-11-tab-panel")}getActiveTab(){return this.tabs.find(t=>t.matches(":focus"))}handleClick(t){let e=t.target.closest("sd-5-15-11-tab");(e==null?void 0:e.closest("sd-5-15-11-tab-group"))===this&&e!==null&&this.setActiveTab(e,{scrollBehavior:"smooth"})}handleKeyDown(t){let e=t.target.closest("sd-5-15-11-tab");if((e==null?void 0:e.closest("sd-5-15-11-tab-group"))===this){if(["Enter"," "].includes(t.key)&&e!==null&&(this.setActiveTab(e,{scrollBehavior:"smooth"}),t.preventDefault()),["Tab"].includes(t.key)){let i=this.tabs.indexOf(this.getActiveTab()),n=this.tabs[i+1];e!==null&&n&&b(n,this.nav,"horizontal")}if(["Shift","Tab"].includes(t.key)){let i=this.tabs.indexOf(this.getActiveTab()),n=this.tabs[i-1];e!==null&&n&&b(n,this.nav,"horizontal")}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){let i=this.tabs.find(r=>r.matches(":focus")),n=this.localize.dir()==="rtl";if((i==null?void 0:i.tagName.toLowerCase())==="sd-5-15-11-tab"){let r=this.tabs.indexOf(i);t.key==="Home"?r=0:t.key==="End"?r=this.tabs.length-1:t.key===(n?"ArrowRight":"ArrowLeft")||t.key==="ArrowUp"?r--:(t.key===(n?"ArrowLeft":"ArrowRight")||t.key==="ArrowDown")&&r++,r<0&&(r=this.tabs.length-1),r>this.tabs.length-1&&(r=0),this.tabs[r].focus({preventScroll:!0}),this.activation==="auto"&&this.setActiveTab(this.tabs[r],{scrollBehavior:"smooth"}),b(this.tabs[r],this.nav,"horizontal"),t.preventDefault()}}}}handleScroll(){this.canScroll={left:this.nav.scrollLeft>0,right:this.nav.scrollLeft+this.nav.clientWidth<this.nav.scrollWidth-1}}handleScrollToStart(){this.nav.scroll({left:this.localize.dir()==="rtl"?this.nav.scrollLeft+this.nav.clientWidth:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}handleScrollToEnd(){this.nav.scroll({left:this.localize.dir()==="rtl"?this.nav.scrollLeft-this.nav.clientWidth:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}setActiveTab(t,s){if(s=p({emitEvents:!0,scrollBehavior:"auto"},s),t!==this.activeTab&&!t.disabled&&!t.visuallyDisabled){let e=this.activeTab;this.activeTab=t,this.tabs.map(o=>o.active=o===this.activeTab),this.panels.map(o=>{var i;return o.active=o.name===((i=this.activeTab)==null?void 0:i.panel)}),this.repositionIndicator(),b(this.activeTab,this.nav,"horizontal",s.scrollBehavior),s.emitEvents&&(e&&this.emit("sd-tab-hide",{detail:{name:e.panel}}),this.emit("sd-tab-show",{detail:{name:this.activeTab.panel}}))}}setAriaLabels(){this.tabs.forEach(t=>{let s=this.panels.find(e=>e.name===t.panel);s&&t.setAttribute("aria-controls",s.getAttribute("id"))})}syncTabsAndPanels(){this.tabs=this.getAllTabs({includeDisabled:!1}),this.panels=this.getAllPanels(),this.repositionIndicator(),this.panels.forEach(t=>{t.tabIndex=0}),this.updateComplete.then(()=>this.updateScrollControls()),this.tabs.length!==0&&this.tabs[0].variant==="container"&&(this.variant="container")}updateScrollControls(){this.hasScrollControls=this.nav.scrollWidth>this.nav.clientWidth}async repositionIndicator(){await this.updateComplete;let t=this.activeTab,s=this.indicator,e=this.tabsContainer;if(!t||!s||!e||t.variant==="container")return;let o=t.getBoundingClientRect(),i=e.getBoundingClientRect(),n=getComputedStyle(e).justifyContent==="center",r=i.left+i.width/2,A=o.left+o.width/2,x=t.offsetWidth,C=n?A-r:o.left-i.left;s.style.width=`${x}px`,s.style.transform=`translateX(${C}px)`}show(t){let s=this.tabs.find(e=>e.panel===t);s&&this.setActiveTab(s,{scrollBehavior:"smooth"})}render(){var s;let t=this.localize.dir()==="rtl";return d`<div part="base" class="${c("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${c(this.hasScrollControls&&"relative py-0 px-12")}">${this.hasScrollControls?d`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${u(!this.canScroll.left||void 0)}" class="${c("sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",this.localize.dir()==="rtl"&&"left-auto right-0")}" @click="${this.handleScrollToStart}"><sd-5-15-11-icon library="_internal" name="${t?"chevron-up":"chevron-down"}" label="previous" class="${c("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-15-11-icon></button>`:""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${c("flex flex-auto relative flex-row")}" role="tablist">${((s=this.activeTab)==null?void 0:s.variant)!=="container"?d`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>`:""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls?d`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${u(!this.canScroll.right||void 0)}" class="${c("sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",this.localize.dir()==="rtl"&&"right-auto left-0")}" @click="${this.handleScrollToEnd}"><sd-5-15-11-icon library="_internal" name="${t?"chevron-down":"chevron-up"}" label="next" class="${c("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-15-11-icon></button>`:""}</div><slot part="body" class="${c("block auto py-8 px-6",this.variant==="container"&&"border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`}};a.styles=[...f.styles,m`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-5-15-11-tab-panel){--padding:1rem 0}::slotted(sd-5-15-11-tab-panel:focus-visible){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`],l([h("[part=base]")],a.prototype,"tabGroup",2),l([h("[part=body]")],a.prototype,"body",2),l([h("[part=scroll-container]")],a.prototype,"nav",2),l([h("[part=active-tab-indicator]")],a.prototype,"indicator",2),l([h('[part="tabs"]')],a.prototype,"tabsContainer",2),l([v()],a.prototype,"hasScrollControls",2),l([v()],a.prototype,"variant",2),l([v()],a.prototype,"canScroll",2),l([y({type:String,reflect:!0})],a.prototype,"activation",2),l([T(20)],a.prototype,"handleScroll",1),a=l([g("sd-5-15-11-tab-group")],a);export{a};