@solid-design-system/components 4.3.1 → 4.4.1

package/cdn/chunks/chunk.HT2MRC4Z.js

@@ -0,0 +1 @@
+import{a}from"./chunk.HE2LNCWW.js";import{a as o,b as s}from"./chunk.5ZILM4TA.js";import{a as l}from"./chunk.E2DRD2OX.js";import{a as f}from"./chunk.6HO6CE4A.js";import{a as i}from"./chunk.26V4EXHB.js";import{a as u,b as r,h as n}from"./chunk.5AILWWY2.js";import{b as d}from"./chunk.IRWHG2Q4.js";import{e}from"./chunk.TJOCV4DC.js";var t=class extends n{constructor(){super(...arguments);this.hasSlotController=new f(this,"label","[default]");this.size="lg";this.orientation="horizontal";this.disabled=!1;this.current=!1;this.noTail=!1;this.notInteractive=!1;this.label="";this.description="";this.index=1;this.href=""}connectedCallback(){super.connectedCallback()}isLink(){return!!this.href}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}handleCurrentChange(){this.current&&(this.disabled=!1)}handleDisabledChange(){this.disabled&&(this.current=!1)}handleInteractivityChange(){this.notInteractive&&(this.current=!1,this.disabled=!1)}render(){let h=this.isLink(),c=this.notInteractive?o`div`:h?o`a`:o`button`,b=this.hasSlotController.test("label"),m=this.label?!0:b,p=this.hasSlotController.test("[default]"),v=this.description?!0:p;return s`<div role="listitem" part="base" class="${i("flex pt-1",this.orientation==="horizontal"?"flex-col w-full":"flex-row gap-4 items-stretch h-full w-min overflow-hidden",!this.disabled&&!this.current&&!this.notInteractive&&"group")}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${i("flex shrink-0 gap-2",this.noTail&&"w-max",this.orientation==="horizontal"?"flex-row":"flex-col items-stretch",this.orientation==="horizontal"?this.size==="lg"?"translateLg":"translateSm":this.size==="lg"?"mt-1":"mt-3")}"><${c} part="circle" href="${a(h?this.href:void 0)}" aria-disabled="${a(this.disabled||void 0)}" aria-current="${this.current?"step":void 0}" aria-labelledby="${a(this.notInteractive||!m?void 0:"label")}" aria-describedby="${a(this.notInteractive||!v?void 0:"description")}" class="${i("border rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",this.disabled?"focus-visible:outline-none cursor-not-allowed":"focus-visible:focus-outline group-hover:cursor-pointer",this.notInteractive?this.size==="lg"?"w-[72px]":"w-12":this.size==="lg"?"w-12":"w-8",this.disabled&&"border-neutral-400 text-neutral-700",!this.disabled&&!this.current&&!this.notInteractive&&"border-primary group-hover:bg-primary-100 group-hover:border-primary-500",this.notInteractive&&"border-neutral-400",this.current&&"bg-accent border-none text-white")}"><slot name="circle-content" class="${i(!this.disabled&&!this.current&&!this.notInteractive&&"text-primary group-hover:text-primary-500 group-hover:fill-primary-500",this.notInteractive&&"text-primary",this.size==="lg"?"text-lg":"text-sm")}">${!this.disabled&&!this.current&&!this.notInteractive?s`<sd-icon name="status-check" library="system"></sd-icon>`:s`${this.index}`}</slot></${c}>${this.noTail?"":s`<div part="tail" class="${i(this.orientation==="horizontal"?"border-t w-full my-auto mr-2":"border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",!this.disabled&&!this.current&&!this.notInteractive?" border-primary group-hover:border-primary-500":"border-neutral-400")}"></div>`}</div><div part="text-container" class="${i("mt-4 break-words flex flex-col gap-2",this.orientation==="horizontal"?"text-center w-40":"w-max text-left",this.disabled&&"!text-neutral-700",this.notInteractive?"ml-3":"mr-4")}"><div part="label" id="label" class="${i("!font-bold sd-paragraph",this.disabled&&"!text-neutral-700",!this.disabled&&!this.current&&!this.notInteractive?"!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer":"text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${i("sd-paragraph sd-paragraph--size-sm",this.disabled&&"!text-neutral-700")}">${this.description||s`<slot></slot>`}</div></div></div>`}};t.styles=[...n.styles,d`:host{flex:1 1 0%}:host([no-tail]){flex-grow:0}.translateLg{transform:translateX(55px)}.translateSm{transform:translateX(64px)}`],e([r({reflect:!0})],t.prototype,"size",2),e([r({reflect:!0})],t.prototype,"orientation",2),e([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([r({type:Boolean,reflect:!0})],t.prototype,"current",2),e([r({reflect:!0,type:Boolean,attribute:"no-tail"})],t.prototype,"noTail",2),e([r({type:Boolean,reflect:!0,attribute:"not-interactive"})],t.prototype,"notInteractive",2),e([r()],t.prototype,"label",2),e([r()],t.prototype,"description",2),e([r({type:Number,reflect:!0,attribute:"index"})],t.prototype,"index",2),e([r()],t.prototype,"href",2),e([l("current")],t.prototype,"handleCurrentChange",1),e([l("disabled")],t.prototype,"handleDisabledChange",1),e([l("notInteractive")],t.prototype,"handleInteractivityChange",1),t=e([u("sd-step")],t);export{t as a};

package/cdn/chunks/chunk.NQXQB7LN.js

@@ -0,0 +1 @@
+import{a as l}from"./chunk.E2DRD2OX.js";import{a as m}from"./chunk.26V4EXHB.js";import{a as h,b as a,d as f,h as n}from"./chunk.5AILWWY2.js";import{b as o,e as c}from"./chunk.IRWHG2Q4.js";import{e as s}from"./chunk.TJOCV4DC.js";var e=class extends n{constructor(){super(...arguments);this.steps=[];this.size="lg";this.orientation="horizontal";this.activeStep=0;this.notInteractive=!1;this.label=""}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.steps=this.getAllSteps(),this.steps[this.steps.length-1].noTail=!0;let t;this.steps.forEach((i,r)=>{i.index=r+1,i.size=this.size,i.orientation=this.orientation,this.notInteractive?(i.current=!1,i.disabled=!1,i.notInteractive=!0):i.current&&(t=r)}),this.setActiveStep(t||this.activeStep)})}updateSize(){this.steps.forEach(t=>{t.size=this.size})}updateOrientation(){this.steps.forEach(t=>{t.orientation=this.orientation})}getAllSteps(){return[...this.body.assignedElements()].filter(t=>t.tagName.toLowerCase()==="sd-step")}setActiveStep(t){t>=0&&t<this.steps.length&&!this.notInteractive&&(this.activeStep=t,this.steps.forEach((i,r)=>{r===t?i.current=!0:r>t?i.disabled=!0:i.current=!1}))}handleInteractivityChange(){this.notInteractive&&this.steps.forEach(t=>{t.current=!1,t.disabled=!1,t.notInteractive=!0})}render(){return c`<div role="${this.notInteractive?"group":"navigation"}" class="h-full" aria-label="${this.label}"><div role="list" part="base" class="${m("flex",this.orientation==="vertical"&&"flex-col h-full")}"><slot part="body"></slot></div></div>`}};e.styles=[...n.styles,o`:host{width:-moz-max-content;width:max-content}`],s([f("[part=body]")],e.prototype,"body",2),s([a({reflect:!0})],e.prototype,"size",2),s([a({reflect:!0})],e.prototype,"orientation",2),s([a({type:Number,reflect:!0,attribute:"active-step"})],e.prototype,"activeStep",2),s([a({type:Boolean,reflect:!0,attribute:"not-interactive"})],e.prototype,"notInteractive",2),s([a({type:String})],e.prototype,"label",2),s([l("size",{waitUntilFirstUpdate:!0})],e.prototype,"updateSize",1),s([l("orientation",{waitUntilFirstUpdate:!0})],e.prototype,"updateOrientation",1),s([l("notInteractive")],e.prototype,"handleInteractivityChange",1),e=s([h("sd-step-group")],e);export{e as a};

package/cdn/chunks/chunk.NW6W2FSS.js

@@ -0,0 +1 @@
+import{a as A}from"./chunk.X2O263YD.js";import{a as m,b as f}from"./chunk.3L472FD4.js";import{a as o,c as n}from"./chunk.A3DKF5BY.js";import{a as l,d as h}from"./chunk.RQYP7MH5.js";import{a as g}from"./chunk.KLRPP4NQ.js";import{a as v}from"./chunk.E2DRD2OX.js";import{a as L}from"./chunk.6HO6CE4A.js";import{a as E}from"./chunk.TNPIUMKG.js";import{a as p}from"./chunk.26V4EXHB.js";import{a as C,b as r,d as c,h as w}from"./chunk.5AILWWY2.js";import{b as x,e as u}from"./chunk.IRWHG2Q4.js";import{e as a}from"./chunk.TJOCV4DC.js";function k(y){return y.charAt(0).toUpperCase()+y.slice(1)}var t=class extends w{constructor(){super(...arguments);this.hasSlotController=new L(this,"footer");this.localize=new E(this);this.modal=new A(this);this.open=!1;this.label="";this.placement="end";this.contained=!1;this.noHeader=!1;this.handleDocumentKeyDown=e=>{this.open&&e.key==="Escape"&&(e.stopPropagation(),this.requestClose("keyboard"))}}firstUpdated(){this.drawer.hidden=!this.open,this.open&&(this.addOpenListeners(),this.contained||(this.modal.activate(),m(this)))}disconnectedCallback(){super.disconnectedCallback(),f(this)}requestClose(e){if(this.emit("sd-request-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){let i=n(this,"drawer.denyClose",{dir:this.localize.dir()});l(this.panel,i.keyframes,i.options);return}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}async handleOpenChange(){var b;let e=(b=this.closeButton.shadowRoot)==null?void 0:b.querySelector('[part="base"]');if(this.open){this.emit("sd-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.contained||(this.modal.activate(),m(this));let i=this.querySelector("[autofocus]");i&&i.removeAttribute("autofocus"),await Promise.all([h(this.drawer),h(this.overlay)]),this.drawer.hidden=!1,this.drawer.removeAttribute("inert"),requestAnimationFrame(()=>{this.emit("sd-initial-focus",{cancelable:!0}).defaultPrevented||(i?i.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),i?i.setAttribute("autofocus",""):this.closeButton.focus()});let d=n(this,`drawer.show${k(this.placement)}`,{dir:this.localize.dir()}),s=n(this,"drawer.overlay.show",{dir:this.localize.dir()});await Promise.all([l(this.panel,d.keyframes,d.options),l(this.overlay,s.keyframes,s.options)]),e==null||e.setAttribute("aria-controls","drawer"),e==null||e.setAttribute("aria-expanded","true"),this.emit("sd-after-show")}else{this.emit("sd-hide"),this.removeOpenListeners(),this.contained||(this.modal.deactivate(),f(this)),await Promise.all([h(this.drawer),h(this.overlay)]);let i=n(this,`drawer.hide${k(this.placement)}`,{dir:this.localize.dir()}),d=n(this,"drawer.overlay.hide",{dir:this.localize.dir()});await Promise.all([l(this.overlay,d.keyframes,d.options).then(()=>{this.overlay.hidden=!0}),l(this.panel,i.keyframes,i.options).then(()=>{this.panel.hidden=!0})]),this.drawer.hidden=!0,this.drawer.setAttribute("inert",""),this.overlay.hidden=!1,this.panel.hidden=!1;let s=this.originalTrigger;typeof(s==null?void 0:s.focus)=="function"&&setTimeout(()=>s.focus()),e==null||e.setAttribute("aria-expanded","false"),this.emit("sd-after-hide")}}handleNoModalChange(){this.open&&!this.contained&&(this.modal.activate(),m(this)),this.open&&this.contained&&(this.modal.deactivate(),f(this))}async show(){if(!this.open)return this.open=!0,g(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,g(this,"sd-after-hide")}render(){return u`<section id="drawer" part="base" class="${p("top-0 start-0 w-full h-full pointer-events-none overflow-hidden",this.contained?"absolute":"fixed")}" aria-label="${this.label}"><div part="overlay" class="${p("block top-0 left-0 right-0 bottom-0 bg-neutral-800/75 pointer-events-auto",this.contained?"absolute":"fixed")}" @click="${()=>this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${p("absolute flex flex-col gap-4 z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none",{end:"top-0 end-0 bottom-auto start-auto w-[--width] h-full",start:"top-0 end-auto bottom-auto start-0 w-[--width] h-full"}[this.placement])}" role="dialog" aria-modal="true" aria-labelledby="label" tabindex="0"><p class="sr-only" id="label">${this.label}</p>${this.noHeader?u`<sd-button variant="tertiary" size="lg" part="close-button" @click="${()=>this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button>`:u`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-button variant="tertiary" size="lg" part="close-button" @click="${()=>this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button></div></header>`}<div part="body" class="flex-auto block px-4" tabindex="0"><slot></slot></div><footer part="footer" class="${p(this.hasSlotController.test("footer")?"text-left p-4":"hidden")}"><slot name="footer"></slot></footer></div></section>`}};t.styles=[...w.styles,x`:host{--width:25rem;display:contents}:host([contained]){z-index:auto}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}`],a([c("[part=base]")],t.prototype,"drawer",2),a([c("[part=panel]")],t.prototype,"panel",2),a([c("[part=overlay]")],t.prototype,"overlay",2),a([c("[part=close-button]")],t.prototype,"closeButton",2),a([r({type:Boolean,reflect:!0})],t.prototype,"open",2),a([r({attribute:"label",reflect:!0})],t.prototype,"label",2),a([r({reflect:!0})],t.prototype,"placement",2),a([r({type:Boolean,reflect:!0})],t.prototype,"contained",2),a([r({attribute:"no-header",type:Boolean})],t.prototype,"noHeader",2),a([v("open",{waitUntilFirstUpdate:!0})],t.prototype,"handleOpenChange",1),a([v("contained",{waitUntilFirstUpdate:!0})],t.prototype,"handleNoModalChange",1),t=a([C("sd-drawer")],t);o("drawer.showStart",{keyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}});o("drawer.hideStart",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],options:{duration:250,easing:"ease"}});o("drawer.showEnd",{keyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}});o("drawer.hideEnd",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],options:{duration:250,easing:"ease"}});o("drawer.denyClose",{keyframes:[{scale:1},{scale:1.01},{scale:1}],options:{duration:250}});o("drawer.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250}});o("drawer.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250}});export{t as a};

package/cdn/components/drawer/drawer.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.777DWZOA.js";import"../../chunks/chunk.X2O263YD.js";import"../../chunks/chunk.64UNKF45.js";import"../../chunks/chunk.3L472FD4.js";import"../../chunks/chunk.ZN24IDXT.js";import"../../chunks/chunk.DLY5AX2P.js";import"../../chunks/chunk.65NSSTJE.js";import"../../chunks/chunk.HE2LNCWW.js";import"../../chunks/chunk.A3DKF5BY.js";import"../../chunks/chunk.5ZILM4TA.js";import"../../chunks/chunk.7TRFUW6U.js";import"../../chunks/chunk.SPDB3L7V.js";import"../../chunks/chunk.SNS2IHBI.js";import"../../chunks/chunk.TWZDCIM2.js";import"../../chunks/chunk.MWDEA25W.js";import"../../chunks/chunk.K7HF3VBZ.js";import"../../chunks/chunk.PYHYYOBE.js";import"../../chunks/chunk.EFLL7VXU.js";import"../../chunks/chunk.RQYP7MH5.js";import"../../chunks/chunk.KLRPP4NQ.js";import"../../chunks/chunk.E2DRD2OX.js";import"../../chunks/chunk.6HO6CE4A.js";import"../../chunks/chunk.TNPIUMKG.js";import"../../chunks/chunk.LO4SY63J.js";import"../../chunks/chunk.O3CT4L2X.js";import"../../chunks/chunk.HJGLYEWV.js";import"../../chunks/chunk.26V4EXHB.js";import"../../chunks/chunk.5AILWWY2.js";import"../../chunks/chunk.IRWHG2Q4.js";import"../../chunks/chunk.TJOCV4DC.js";export{a as default};
+import{a}from"../../chunks/chunk.NW6W2FSS.js";import"../../chunks/chunk.X2O263YD.js";import"../../chunks/chunk.64UNKF45.js";import"../../chunks/chunk.3L472FD4.js";import"../../chunks/chunk.ZN24IDXT.js";import"../../chunks/chunk.DLY5AX2P.js";import"../../chunks/chunk.65NSSTJE.js";import"../../chunks/chunk.HE2LNCWW.js";import"../../chunks/chunk.A3DKF5BY.js";import"../../chunks/chunk.5ZILM4TA.js";import"../../chunks/chunk.7TRFUW6U.js";import"../../chunks/chunk.SPDB3L7V.js";import"../../chunks/chunk.SNS2IHBI.js";import"../../chunks/chunk.TWZDCIM2.js";import"../../chunks/chunk.MWDEA25W.js";import"../../chunks/chunk.K7HF3VBZ.js";import"../../chunks/chunk.PYHYYOBE.js";import"../../chunks/chunk.EFLL7VXU.js";import"../../chunks/chunk.RQYP7MH5.js";import"../../chunks/chunk.KLRPP4NQ.js";import"../../chunks/chunk.E2DRD2OX.js";import"../../chunks/chunk.6HO6CE4A.js";import"../../chunks/chunk.TNPIUMKG.js";import"../../chunks/chunk.LO4SY63J.js";import"../../chunks/chunk.O3CT4L2X.js";import"../../chunks/chunk.HJGLYEWV.js";import"../../chunks/chunk.26V4EXHB.js";import"../../chunks/chunk.5AILWWY2.js";import"../../chunks/chunk.IRWHG2Q4.js";import"../../chunks/chunk.TJOCV4DC.js";export{a as default};

package/cdn/components/step/step.d.ts

@@ -1,5 +1,6 @@
 import SolidElement from '../../internal/solid-element';
 export default class SdStep extends SolidElement {
+    private readonly hasSlotController;
     size: 'lg' | 'sm';
     orientation: 'horizontal' | 'vertical';
     disabled: boolean;

package/cdn/components/step/step.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.HKGBSLKX.js";import"../../chunks/chunk.HE2LNCWW.js";import"../../chunks/chunk.5ZILM4TA.js";import"../../chunks/chunk.E2DRD2OX.js";import"../../chunks/chunk.26V4EXHB.js";import"../../chunks/chunk.5AILWWY2.js";import"../../chunks/chunk.IRWHG2Q4.js";import"../../chunks/chunk.TJOCV4DC.js";export{a as default};
+import{a}from"../../chunks/chunk.HT2MRC4Z.js";import"../../chunks/chunk.HE2LNCWW.js";import"../../chunks/chunk.5ZILM4TA.js";import"../../chunks/chunk.E2DRD2OX.js";import"../../chunks/chunk.6HO6CE4A.js";import"../../chunks/chunk.26V4EXHB.js";import"../../chunks/chunk.5AILWWY2.js";import"../../chunks/chunk.IRWHG2Q4.js";import"../../chunks/chunk.TJOCV4DC.js";export{a as default};

package/cdn/components/step-group/step-group.d.ts

@@ -6,6 +6,7 @@ export default class SdStepGroup extends SolidElement {
     orientation: 'horizontal' | 'vertical';
     activeStep: number;
     notInteractive: boolean;
+    label: string;
     connectedCallback(): void;
     updateSize(): void;
     updateOrientation(): void;

package/cdn/components/step-group/step-group.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.NLOKZURD.js";import"../../chunks/chunk.E2DRD2OX.js";import"../../chunks/chunk.26V4EXHB.js";import"../../chunks/chunk.5AILWWY2.js";import"../../chunks/chunk.IRWHG2Q4.js";import"../../chunks/chunk.TJOCV4DC.js";export{a as default};
+import{a}from"../../chunks/chunk.NQXQB7LN.js";import"../../chunks/chunk.E2DRD2OX.js";import"../../chunks/chunk.26V4EXHB.js";import"../../chunks/chunk.5AILWWY2.js";import"../../chunks/chunk.IRWHG2Q4.js";import"../../chunks/chunk.TJOCV4DC.js";export{a as default};

package/cdn/custom-elements.json

@@ -13748,6 +13748,16 @@
               "attribute": "not-interactive",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label"
+            },
             {
               "kind": "method",
               "name": "setActiveStep",
@@ -13850,6 +13860,15 @@
               "description": "Determines if the step-group is not interactive.",
               "fieldName": "notInteractive"
             },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "fieldName": "label"
+            },
             {
               "name": "dir",
               "type": {
@@ -16991,7 +17010,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.3.1",
+    "version": "4.4.1",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"