@solid-design-system/components 3.5.0 → 3.6.0

package/dist/components/es/dialog.js

@@ -1 +1 @@
-import"./button.js";import"./icon.js";import{a as e,s as i,w as s}from"./event.js";import{S as t,x as a,r as o,i as n,n as l,c as r}from"./solid-element.js";import{g as d,s as h}from"./animation-registry.js";import{H as c}from"./slot.js";import{L as p}from"./solid-components2.js";import{l as m,u as f}from"./scroll.js";import{e as g}from"./query.js";import{w as y}from"./watch.js";import{c as v}from"./component.styles.js";import{t as u}from"./classix.js";import{M as x}from"./modal.js";var w=Object.defineProperty,b=Object.getOwnPropertyDescriptor,z=(e,i,s,t)=>{for(var a,o=t>1?void 0:t?b(i,s):i,n=e.length-1;n>=0;n--)(a=e[n])&&(o=(t?a(i,s,o):a(o))||o);return t&&o&&w(i,s,o),o};let k=class extends t{constructor(){super(...arguments),this.hasSlotController=new c(this,"footer"),this.localize=new p(this),this.open=!1,this.headline="",this.noCloseButton=!1}connectedCallback(){super.connectedCallback(),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.modal=new x(this)}firstUpdated(){this.dialog.hidden=!this.open,this.open&&(this.addOpenListeners(),this.modal.activate(),m(this))}disconnectedCallback(){super.disconnectedCallback(),f(this)}requestClose(i){if(this.emit("sd-request-close",{cancelable:!0,detail:{source:i}}).defaultPrevented){const i=d(this,"dialog.denyClose",{dir:this.localize.dir()});e(this.panel,i.keyframes,i.options)}else this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown(e){this.open&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}async handleOpenChange(){if(this.open){this.emit("sd-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.modal.activate(),m(this);const s=this.querySelector("[autofocus]");s&&s.removeAttribute("autofocus"),await Promise.all([i(this.dialog),i(this.overlay)]),this.dialog.hidden=!1,requestAnimationFrame((()=>{this.emit("sd-initial-focus",{cancelable:!0}).defaultPrevented||(s?s.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),s&&s.setAttribute("autofocus","")}));const t=d(this,"dialog.show",{dir:this.localize.dir()}),a=d(this,"dialog.overlay.show",{dir:this.localize.dir()});await Promise.all([e(this.panel,t.keyframes,t.options),e(this.overlay,a.keyframes,a.options)]),this.emit("sd-after-show")}else{this.emit("sd-hide"),this.removeOpenListeners(),this.modal.deactivate(),await Promise.all([i(this.dialog),i(this.overlay)]);const s=d(this,"dialog.hide",{dir:this.localize.dir()}),t=d(this,"dialog.overlay.hide",{dir:this.localize.dir()});await Promise.all([e(this.overlay,t.keyframes,t.options).then((()=>{this.overlay.hidden=!0})),e(this.panel,s.keyframes,s.options).then((()=>{this.panel.hidden=!0}))]),this.dialog.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1,f(this);const a=this.originalTrigger;"function"==typeof(null==a?void 0:a.focus)&&setTimeout((()=>a.focus())),this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,s(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,s(this,"sd-after-hide")}render(){return a`<div part="base" class="${u("flex items-center justify-center fixed inset-0 z-dialog",this.hasSlotController.test("footer")&&"dialog--has-footer")}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${()=>this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${u("flex flex-col z-20 bg-white focus:outline-none py-4 sm:py-8 relative gap-6",this.open&&"flex opacity-100")}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length>0?a`<h4 class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</h4>`:a`<slot name="headline"></slot>`}</h2>${this.noCloseButton?"":a`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${u("absolute top-2 right-2")}" name="x-lg" @click="${()=>this.requestClose("close-button")}" type="button"><sd-icon name="close" library="system" color="currentColor"></sd-icon></sd-button>`}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`}};k.styles=[v,o(".sd-headline{display:flex;font-size:var(--sd-font-size-3xl,2rem);font-weight:700;gap:var(--sd-spacing-4,1rem);line-height:var(--sd-line-height-tight,120%);--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}@media (min-width:640px){.sd-headline{font-size:var(--sd-font-size-4xl,2.5rem)}}.sd-headline sd-icon{flex-shrink:0;font-size:3rem;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}@media (min-width:640px){.sd-headline sd-icon{margin-top:var(--sd-spacing-2,.5rem)}}.sd-headline--size-3xl{font-size:var(--sd-font-size-2xl,1.75rem)}@media (min-width:640px){.sd-headline--size-3xl{font-size:var(--sd-font-size-3xl,2rem)}}.sd-headline--size-3xl sd-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline--size-3xl sd-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline--size-base,.sd-headline--size-lg,.sd-headline--size-xl{gap:var(--sd-spacing-2,.5rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-headline--size-base sd-icon,.sd-headline--size-lg sd-icon,.sd-headline--size-xl sd-icon{font-size:2rem}.sd-headline--size-xl{font-size:var(--sd-font-size-xl,1.5rem)}.sd-headline--size-xl sd-icon{margin-top:var(--sd-spacing-0-5,.125rem)}@media (min-width:640px){.sd-headline--size-xl sd-icon{margin-top:var(--sd-spacing-0-5,.125rem)}}.sd-headline--size-base,.sd-headline--size-lg{line-height:var(--sd-line-height-normal,150%)}.sd-headline--size-lg{font-size:var(--sd-font-size-lg,1.25rem)}.sd-headline--size-lg sd-icon{margin-top:var(--sd-spacing-0,0)}@media (min-width:640px){.sd-headline--size-lg sd-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline--size-base{font-size:var(--sd-font-size-base,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-headline--size-base sd-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}.sd-headline--size-base mark{color:inherit}.sd-headline--inverted,.sd-headline--inverted sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.sd-headline--inline{display:inline}.sd-headline--inline sd-icon{margin-right:var(--sd-spacing-2,.5rem);margin-top:calc(var(--sd-spacing-1, .25rem)*-1);vertical-align:middle}.sd-headline--inline.sd-headline--size-base sd-icon,.sd-headline--inline.sd-headline--size-lg sd-icon,.sd-headline--inline.sd-headline--size-xl sd-icon{margin-right:var(--sd-spacing-0-5,.125rem)}"),t.styles,n`:host{--width:662px}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=footer]{width:100%}}`],z([g('[part="base"]')],k.prototype,"dialog",2),z([g('[part="panel"]')],k.prototype,"panel",2),z([g('[part="overlay"]')],k.prototype,"overlay",2),z([l({type:Boolean,reflect:!0})],k.prototype,"open",2),z([l({reflect:!0})],k.prototype,"headline",2),z([l({attribute:"no-close-button",type:Boolean,reflect:!0})],k.prototype,"noCloseButton",2),z([y("open",{waitUntilFirstUpdate:!0})],k.prototype,"handleOpenChange",1),k=z([r("sd-dialog")],k),h("dialog.show",{keyframes:[{opacity:0,scale:.8},{opacity:1,scale:1}],options:{duration:250,easing:"ease"}}),h("dialog.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.8}],options:{duration:250,easing:"ease"}}),h("dialog.denyClose",{keyframes:[{scale:1},{scale:1.02},{scale:1}],options:{duration:250}}),h("dialog.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250}}),h("dialog.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250}});export{k as default};
+import"./button.js";import"./icon.js";import{a as e,s,w as i}from"./event.js";import{S as h,x as d,r as a,i as o,n,c as t}from"./solid-element.js";import{g as l,s as r}from"./animation-registry.js";import{H as p}from"./slot.js";import{L as c}from"./solid-components2.js";import{l as m,u as g}from"./scroll.js";import{e as f}from"./query.js";import{w as y}from"./watch.js";import{c as v}from"./component.styles.js";import{t as x}from"./classix.js";import{M as u}from"./modal.js";var z=Object.defineProperty,b=Object.getOwnPropertyDescriptor,w=(e,s,i,h)=>{for(var d,a=h>1?void 0:h?b(s,i):s,o=e.length-1;o>=0;o--)(d=e[o])&&(a=(h?d(s,i,a):d(a))||a);return h&&a&&z(s,i,a),a};let k=class extends h{constructor(){super(...arguments),this.hasSlotController=new p(this,"footer"),this.localize=new c(this),this.open=!1,this.headline="",this.noCloseButton=!1}connectedCallback(){super.connectedCallback(),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.modal=new u(this)}firstUpdated(){this.dialog.hidden=!this.open,this.open&&(this.addOpenListeners(),this.modal.activate(),m(this))}disconnectedCallback(){super.disconnectedCallback(),g(this)}requestClose(s){if(this.emit("sd-request-close",{cancelable:!0,detail:{source:s}}).defaultPrevented){const s=l(this,"dialog.denyClose",{dir:this.localize.dir()});e(this.panel,s.keyframes,s.options)}else this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown(e){this.open&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}async handleOpenChange(){if(this.open){this.emit("sd-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.modal.activate(),m(this);const i=this.querySelector("[autofocus]");i&&i.removeAttribute("autofocus"),await Promise.all([s(this.dialog),s(this.overlay)]),this.dialog.hidden=!1,requestAnimationFrame((()=>{this.emit("sd-initial-focus",{cancelable:!0}).defaultPrevented||(i?i.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),i&&i.setAttribute("autofocus","")}));const h=l(this,"dialog.show",{dir:this.localize.dir()}),d=l(this,"dialog.overlay.show",{dir:this.localize.dir()});await Promise.all([e(this.panel,h.keyframes,h.options),e(this.overlay,d.keyframes,d.options)]),this.emit("sd-after-show")}else{this.emit("sd-hide"),this.removeOpenListeners(),this.modal.deactivate(),await Promise.all([s(this.dialog),s(this.overlay)]);const i=l(this,"dialog.hide",{dir:this.localize.dir()}),h=l(this,"dialog.overlay.hide",{dir:this.localize.dir()});await Promise.all([e(this.overlay,h.keyframes,h.options).then((()=>{this.overlay.hidden=!0})),e(this.panel,i.keyframes,i.options).then((()=>{this.panel.hidden=!0}))]),this.dialog.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1,g(this);const d=this.originalTrigger;"function"==typeof(null==d?void 0:d.focus)&&setTimeout((()=>d.focus())),this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,i(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,i(this,"sd-after-hide")}render(){return d`<div part="base" class="${x("flex items-center justify-center fixed inset-0 z-dialog",this.hasSlotController.test("footer")&&"dialog--has-footer")}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${()=>this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${x("flex flex-col z-20 bg-white focus:outline-none py-4 sm:py-8 relative gap-6",this.open&&"flex opacity-100")}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length>0?d`<h4 class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</h4>`:d`<slot name="headline"></slot>`}</h2>${this.noCloseButton?"":d`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${x("absolute top-2 right-2")}" name="x-lg" @click="${()=>this.requestClose("close-button")}" type="button"><sd-icon name="close" library="system" color="currentColor"></sd-icon></sd-button>`}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`}};k.styles=[v,a(".sd-headline,.sd-prose :is(h1,h2,h3,h4,h5){display:flex;font-weight:700;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}.sd-headline sd-icon,.sd-prose :is(h1,h2,h3,h4,h5) sd-icon{flex-shrink:0;font-size:3rem;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}@media (min-width:640px){.sd-headline sd-icon,.sd-prose :is(h1,h2,h3,h4,h5) sd-icon{margin-top:var(--sd-spacing-2,.5rem)}}.sd-headline.sd-headline,.sd-headline:is(h1):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline){font-size:var(--sd-font-size-3xl,2rem);gap:var(--sd-spacing-4,1rem);line-height:var(--sd-line-height-tight,120%)}@media (min-width:640px){.sd-headline.sd-headline,.sd-headline:is(h1):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline){font-size:var(--sd-font-size-4xl,2.5rem)}}.sd-headline.sd-headline sd-icon,.sd-headline:is(h1):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline) sd-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline.sd-headline sd-icon,.sd-headline:is(h1):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline) sd-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-3xl,.sd-headline:is(h2):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline){font-size:var(--sd-font-size-2xl,1.75rem);gap:var(--sd-spacing-4,1rem);line-height:var(--sd-line-height-tight,120%)}@media (min-width:640px){.sd-headline.sd-headline--size-3xl,.sd-headline:is(h2):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline){font-size:var(--sd-font-size-3xl,2rem)}}.sd-headline.sd-headline--size-3xl sd-icon,.sd-headline:is(h2):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline) sd-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline.sd-headline--size-3xl sd-icon,.sd-headline:is(h2):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline) sd-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-base,.sd-headline.sd-headline--size-lg,.sd-headline.sd-headline--size-xl,.sd-headline:is(h3,h4,h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h3,h4,h5):not(.sd-headline){gap:var(--sd-spacing-2,.5rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-headline.sd-headline--size-base sd-icon,.sd-headline.sd-headline--size-lg sd-icon,.sd-headline.sd-headline--size-xl sd-icon,.sd-headline:is(h3,h4,h5):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3,h4,h5):not(.sd-headline) sd-icon{font-size:2rem}.sd-headline.sd-headline--size-xl,.sd-headline:is(h3):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline){font-size:var(--sd-font-size-xl,1.5rem)}.sd-headline.sd-headline--size-xl sd-icon,.sd-headline:is(h3):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline) sd-icon{margin-top:var(--sd-spacing-0-5,.125rem)}@media (min-width:640px){.sd-headline.sd-headline--size-xl sd-icon,.sd-headline:is(h3):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline) sd-icon{margin-top:var(--sd-spacing-0-5,.125rem)}}.sd-headline.sd-headline--size-base,.sd-headline.sd-headline--size-lg,.sd-headline:is(h4,h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5):is(h4,h5):not(.sd-headline){line-height:var(--sd-line-height-normal,150%)}.sd-headline.sd-headline--size-lg,.sd-headline:is(h4),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5):is(h4){font-size:var(--sd-font-size-lg,1.25rem)}.sd-headline.sd-headline--size-lg sd-icon,.sd-headline:is(h4) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h4) sd-icon{margin-top:var(--sd-spacing-0,0)}@media (min-width:640px){.sd-headline.sd-headline--size-lg sd-icon,.sd-headline:is(h4) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h4) sd-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-base,.sd-headline:is(h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline){font-size:var(--sd-font-size-base,1rem)}.sd-headline.sd-headline--size-base sd-icon,.sd-headline:is(h5):not(.sd-headline) sd-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base sd-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline) sd-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}.sd-headline.sd-headline--size-base mark,.sd-headline:is(h5):not(.sd-headline) mark,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base mark,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline) mark{color:inherit}.sd-headline--inline{display:inline-block}.sd-headline--inline sd-icon{margin-right:var(--sd-spacing-2,.5rem);margin-top:calc(var(--sd-spacing-1, .25rem)*-1);vertical-align:middle}.sd-headline--inline:is(.sd-headline--size-xl,.sd-headline--size-lg,.sd-headline--size-base) sd-icon{margin-right:var(--sd-spacing-0-5,.125rem)}.sd-headline--inverted:not(#\\\t),.sd-prose--inverted :is(h1,h2,h3,h4,h5):not(.sd-headline):not(#\\\t){--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.sd-headline--inverted:not(#\\\t) sd-icon,.sd-prose--inverted :is(h1,h2,h3,h4,h5):not(.sd-headline):not(#\\\t) sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}"),h.styles,o`:host{--width:662px}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=footer]{width:100%}}`],w([f('[part="base"]')],k.prototype,"dialog",2),w([f('[part="panel"]')],k.prototype,"panel",2),w([f('[part="overlay"]')],k.prototype,"overlay",2),w([n({type:Boolean,reflect:!0})],k.prototype,"open",2),w([n({reflect:!0})],k.prototype,"headline",2),w([n({attribute:"no-close-button",type:Boolean,reflect:!0})],k.prototype,"noCloseButton",2),w([y("open",{waitUntilFirstUpdate:!0})],k.prototype,"handleOpenChange",1),k=w([t("sd-dialog")],k),r("dialog.show",{keyframes:[{opacity:0,scale:.8},{opacity:1,scale:1}],options:{duration:250,easing:"ease"}}),r("dialog.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.8}],options:{duration:250,easing:"ease"}}),r("dialog.denyClose",{keyframes:[{scale:1},{scale:1.02},{scale:1}],options:{duration:250}}),r("dialog.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250}}),r("dialog.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250}});export{k as default};

package/dist/components/es/interactive.js

@@ -1 +1 @@
-const t=".sd-interactive--reset{all:unset;outline:revert}.sd-interactive{cursor:pointer;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity));text-decoration-line:none;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.sd-interactive:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-text-opacity))}.sd-interactive:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-text-opacity))}.sd-interactive:focus-visible{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}.sd-interactive--inverted{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.sd-interactive--inverted:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-text-opacity))}.sd-interactive--inverted:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-text-opacity))}.sd-interactive--inverted:focus-visible{outline-color:rgb(var(--sd-color-white,255 255 255)/1);outline-offset:2px;outline-style:solid;outline-width:2px}.sd-interactive--disabled,.sd-interactive[disabled]{cursor:not-allowed;--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.sd-interactive--disabled:hover:not([disabled]),.sd-interactive[disabled]:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.sd-interactive--disabled:active:not([disabled]),.sd-interactive[disabled]:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}";export{t as I};
+const e='.sd-interactive--reset,.sd-prose a--reset{all:unset;outline:revert}.sd-interactive,.sd-prose a{cursor:pointer;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity));text-decoration-line:underline;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.sd-interactive:hover:not([disabled]),.sd-prose a:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-500,70 109 175)/var(--tw-text-opacity))}.sd-interactive:active:not([disabled]),.sd-prose a:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-text-opacity))}.sd-interactive:is(.sd-interactive),.sd-prose a:is(.sd-interactive){text-decoration-line:none}.sd-interactive:focus-visible,.sd-prose a:focus-visible{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}.sd-interactive--disabled,.sd-interactive[disabled],.sd-interactive[href=""],.sd-prose a--disabled,.sd-prose a[disabled],.sd-prose a[href=""]{cursor:not-allowed;--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.sd-interactive--disabled:hover:not([disabled]),.sd-interactive[disabled]:hover:not([disabled]),.sd-interactive[href=""]:hover:not([disabled]),.sd-prose a--disabled:hover:not([disabled]),.sd-prose a[disabled]:hover:not([disabled]),.sd-prose a[href=""]:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.sd-interactive--disabled:active:not([disabled]),.sd-interactive[disabled]:active:not([disabled]),.sd-interactive[href=""]:active:not([disabled]),.sd-prose a--disabled:active:not([disabled]),.sd-prose a[disabled]:active:not([disabled]),.sd-prose a[href=""]:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-600,136 136 136)/var(--tw-text-opacity))}.sd-interactive--inverted,.sd-prose--inverted a{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.sd-interactive--inverted:hover:not([disabled]),.sd-prose--inverted a:hover:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-200,224 233 243)/var(--tw-text-opacity))}.sd-interactive--inverted:active:not([disabled]),.sd-prose--inverted a:active:not([disabled]){--tw-text-opacity:1;color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-text-opacity))}.sd-interactive--inverted:focus-visible,.sd-prose--inverted a:focus-visible{outline-color:rgb(var(--sd-color-white,255 255 255)/1);outline-offset:2px;outline-style:solid;outline-width:2px}';export{e as I};

package/dist/components/es/step.js

@@ -1 +1 @@
-import{S as t,r as e,i as r,n as i,c as a}from"./solid-element.js";import{s,n as o}from"./static.js";import{o as n}from"./if-defined.js";import{w as l}from"./watch.js";import{c as d}from"./component.styles.js";import{t as h}from"./classix.js";var c=Object.defineProperty,p=Object.getOwnPropertyDescriptor,b=(t,e,r,i)=>{for(var a,s=i>1?void 0:i?p(e,r):e,o=t.length-1;o>=0;o--)(a=t[o])&&(s=(i?a(e,r,s):a(s))||s);return i&&s&&c(e,r,s),s};let u=class extends t{constructor(){super(...arguments),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(){const t=this.isLink(),e=this.notInteractive?s`div`:t?s`a`:s`button`;return o`<div part="base" class="${h("flex pt-1","horizontal"===this.orientation?"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="${h("flex shrink-0 gap-2",this.noTail&&"w-max","horizontal"===this.orientation?"flex-row":"flex-col items-stretch","horizontal"===this.orientation?"lg"===this.size?"translateLg":"translateSm":"lg"===this.size?"mt-1":"mt-3")}"><${e} part="circle" ?disabled="${this.disabled}" tabindex="${this.disabled||this.current?"-1":"0"}" href="${n(t?this.href:void 0)}" aria-current="${this.current?"step":void 0}" aria-label="Step ${this.index}" class="${h("border rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",this.disabled||this.current?"focus-visible:outline-none":"focus-visible:focus-outline",this.notInteractive?"lg"===this.size?"w-[72px]":"w-12":"lg"===this.size?"w-12":"w-8",this.disabled&&"border-neutral-400 text-neutral-500",!this.disabled&&!this.current&&!this.notInteractive&&"border-primary group-hover:bg-primary-100 group-hover:border-primary-500",this.notInteractive?"border-neutral-400":"group-hover:cursor-pointer",this.current&&"bg-accent border-none text-white")}"><slot name="circle-content" class="${h(!this.disabled&&!this.current&&!this.notInteractive&&"text-primary group-hover:text-primary-500 group-hover:fill-primary-500",this.notInteractive&&"text-primary","lg"===this.size?"text-lg":"text-sm")}">${this.disabled||this.current||this.notInteractive?o`${this.index}`:o`<sd-icon name="status-check" library="system"></sd-icon>`}</slot></${e}>${this.noTail?"":"horizontal"===this.orientation?o`<sd-divider part="tail" orientation="horizontal" class="${h("w-full my-auto mr-2",!this.disabled&&!this.current&&!this.notInteractive&&"tail-to-primary")}"></sd-divider>`:o`<sd-divider part="tail" orientation="vertical" class="${h("flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",!this.disabled&&!this.current&&!this.notInteractive&&"tail-to-primary")}"></sd-divider>`}</div><div part="text-container" class="${h("mt-4 mr-4 break-words flex flex-col gap-2","horizontal"===this.orientation?"text-center w-40":"w-max text-left",this.disabled&&"!text-neutral-500")}"><div part="label" class="${h("!font-bold sd-paragraph",this.disabled&&"!text-neutral-500",this.disabled||this.current||this.notInteractive?"text-black":"!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer")}"><slot name="label">${this.label}</slot></div><div part="description" class="${h("sd-paragraph sd-paragraph--size-sm",this.disabled&&"!text-neutral-500")}">${this.description||o`<slot></slot>`}</div></div></div>`}};u.styles=[t.styles,d,e(".sd-paragraph{font-size:var(--sd-font-size-base,1rem)}.sd-paragraph,.sd-paragraph--size-sm{font-weight:400;line-height:var(--sd-line-height-normal,150%);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-paragraph--size-sm{font-size:var(--sd-font-size-sm,.875rem)}.sd-paragraph--inverted{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}"),r`:host{flex:1 1 0%}[part=base]:not(:has(sd-divider)){height:-moz-max-content;height:max-content}:host([no-tail]){flex-grow:0}.translateLg{transform:translateX(55px)}.translateSm{transform:translateX(64px)}.tail-to-primary::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-border-opacity))!important}.group:hover .tail-to-primary::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-primary-500,70 109 175) / var(--tw-border-opacity))!important}sd-divider::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-neutral-400,195 195 195) / var(--tw-border-opacity))!important}`],b([i({reflect:!0})],u.prototype,"size",2),b([i({reflect:!0})],u.prototype,"orientation",2),b([i({type:Boolean,reflect:!0})],u.prototype,"disabled",2),b([i({type:Boolean,reflect:!0})],u.prototype,"current",2),b([i({reflect:!0,type:Boolean,attribute:"no-tail"})],u.prototype,"noTail",2),b([i({type:Boolean,reflect:!0,attribute:"not-interactive"})],u.prototype,"notInteractive",2),b([i()],u.prototype,"label",2),b([i()],u.prototype,"description",2),b([i({type:Number,reflect:!0,attribute:"index"})],u.prototype,"index",2),b([i()],u.prototype,"href",2),b([l("current")],u.prototype,"handleCurrentChange",1),b([l("disabled")],u.prototype,"handleDisabledChange",1),b([l("notInteractive")],u.prototype,"handleInteractivityChange",1),u=b([a("sd-step")],u);export{u as default};
+import{S as t,r as e,i as r,n as i,c as a}from"./solid-element.js";import{s,n as o}from"./static.js";import{o as n}from"./if-defined.js";import{w as l}from"./watch.js";import{c as d}from"./component.styles.js";import{t as h}from"./classix.js";var p=Object.defineProperty,c=Object.getOwnPropertyDescriptor,b=(t,e,r,i)=>{for(var a,s=i>1?void 0:i?c(e,r):e,o=t.length-1;o>=0;o--)(a=t[o])&&(s=(i?a(e,r,s):a(s))||s);return i&&s&&p(e,r,s),s};let m=class extends t{constructor(){super(...arguments),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(){const t=this.isLink(),e=this.notInteractive?s`div`:t?s`a`:s`button`;return o`<div part="base" class="${h("flex pt-1","horizontal"===this.orientation?"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="${h("flex shrink-0 gap-2",this.noTail&&"w-max","horizontal"===this.orientation?"flex-row":"flex-col items-stretch","horizontal"===this.orientation?"lg"===this.size?"translateLg":"translateSm":"lg"===this.size?"mt-1":"mt-3")}"><${e} part="circle" ?disabled="${this.disabled}" tabindex="${this.disabled||this.current?"-1":"0"}" href="${n(t?this.href:void 0)}" aria-current="${this.current?"step":void 0}" aria-label="Step ${this.index}" class="${h("border rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",this.disabled||this.current?"focus-visible:outline-none":"focus-visible:focus-outline",this.notInteractive?"lg"===this.size?"w-[72px]":"w-12":"lg"===this.size?"w-12":"w-8",this.disabled&&"border-neutral-400 text-neutral-500",!this.disabled&&!this.current&&!this.notInteractive&&"border-primary group-hover:bg-primary-100 group-hover:border-primary-500",this.notInteractive?"border-neutral-400":"group-hover:cursor-pointer",this.current&&"bg-accent border-none text-white")}"><slot name="circle-content" class="${h(!this.disabled&&!this.current&&!this.notInteractive&&"text-primary group-hover:text-primary-500 group-hover:fill-primary-500",this.notInteractive&&"text-primary","lg"===this.size?"text-lg":"text-sm")}">${this.disabled||this.current||this.notInteractive?o`${this.index}`:o`<sd-icon name="status-check" library="system"></sd-icon>`}</slot></${e}>${this.noTail?"":"horizontal"===this.orientation?o`<sd-divider part="tail" orientation="horizontal" class="${h("w-full my-auto mr-2",!this.disabled&&!this.current&&!this.notInteractive&&"tail-to-primary")}"></sd-divider>`:o`<sd-divider part="tail" orientation="vertical" class="${h("flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",!this.disabled&&!this.current&&!this.notInteractive&&"tail-to-primary")}"></sd-divider>`}</div><div part="text-container" class="${h("mt-4 mr-4 break-words flex flex-col gap-2","horizontal"===this.orientation?"text-center w-40":"w-max text-left",this.disabled&&"!text-neutral-500")}"><div part="label" class="${h("!font-bold sd-paragraph",this.disabled&&"!text-neutral-500",this.disabled||this.current||this.notInteractive?"text-black":"!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer")}"><slot name="label">${this.label}</slot></div><div part="description" class="${h("sd-paragraph sd-paragraph--size-sm",this.disabled&&"!text-neutral-500")}">${this.description||o`<slot></slot>`}</div></div></div>`}};m.styles=[t.styles,d,e(".sd-paragraph,.sd-prose p{font-size:var(--sd-font-size-base,1rem)}.sd-paragraph,.sd-paragraph--size-sm,.sd-prose p,.sd-prose p--size-sm{font-weight:400;line-height:var(--sd-line-height-normal,150%);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-paragraph--size-sm,.sd-prose p--size-sm{font-size:var(--sd-font-size-sm,.875rem)}.sd-paragraph--inverted,.sd-prose--inverted p{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}"),r`:host{flex:1 1 0%}[part=base]:not(:has(sd-divider)){height:-moz-max-content;height:max-content}:host([no-tail]){flex-grow:0}.translateLg{transform:translateX(55px)}.translateSm{transform:translateX(64px)}.tail-to-primary::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-border-opacity))!important}.group:hover .tail-to-primary::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-primary-500,70 109 175) / var(--tw-border-opacity))!important}sd-divider::part(main){--tw-border-opacity:1!important;border-color:rgb(var(--sd-color-neutral-400,195 195 195) / var(--tw-border-opacity))!important}`],b([i({reflect:!0})],m.prototype,"size",2),b([i({reflect:!0})],m.prototype,"orientation",2),b([i({type:Boolean,reflect:!0})],m.prototype,"disabled",2),b([i({type:Boolean,reflect:!0})],m.prototype,"current",2),b([i({reflect:!0,type:Boolean,attribute:"no-tail"})],m.prototype,"noTail",2),b([i({type:Boolean,reflect:!0,attribute:"not-interactive"})],m.prototype,"notInteractive",2),b([i()],m.prototype,"label",2),b([i()],m.prototype,"description",2),b([i({type:Number,reflect:!0,attribute:"index"})],m.prototype,"index",2),b([i()],m.prototype,"href",2),b([l("current")],m.prototype,"handleCurrentChange",1),b([l("disabled")],m.prototype,"handleDisabledChange",1),b([l("notInteractive")],m.prototype,"handleInteractivityChange",1),m=b([a("sd-step")],m);export{m as default};