@solid-design-system/components 1.2.0 → 1.2.1

package/dist/versioned-components/es/button.js

@@ -1,125 +1,6 @@
-import"./spinner.js";import{x as t,i as e}from"./lit-element.js";import{S as o,l as i,n as r,e as s}from"./solid-element.js";import{t as a}from"./state.js";import{i as n}from"./query.js";import{H as l,l as d}from"./if-defined.js";import{w as h}from"./watch.js";import{c as u}from"./component.styles.js";import{t as p}from"./classix.js";import"./solid-components2.js";const m=new WeakMap,c=new WeakMap,b=new WeakMap;class f{constructor(t,e){(this.host=t).addController(this),this.options={form:t=>{if(t.hasAttribute("form")&&""!==t.getAttribute("form")){const e=t.getRootNode(),o=t.getAttribute("form");if(o)return e.getElementById(o)}return t.closest("form")},name:t=>t.name,value:t=>t.value,defaultValue:t=>t.defaultValue,disabled:t=>t.disabled??!1,reportValidity:t=>"function"!=typeof t.reportValidity||t.reportValidity(),setValue:(t,e)=>t.value=e,...e},this.handleFormData=this.handleFormData.bind(this),this.handleFormSubmit=this.handleFormSubmit.bind(this),this.handleFormReset=this.handleFormReset.bind(this),this.reportFormValidity=this.reportFormValidity.bind(this),this.handleUserInput=this.handleUserInput.bind(this)}hostConnected(){const t=this.options.form(this.host);t&&this.attachForm(t),this.host.addEventListener("sd-input",this.handleUserInput)}hostDisconnected(){this.detachForm(),this.host.removeEventListener("sd-input",this.handleUserInput)}hostUpdated(){const t=this.options.form(this.host);t||this.detachForm(),t&&this.form!==t&&(this.detachForm(),this.attachForm(t)),this.host.hasUpdated&&this.setValidity(this.host.checkValidity())}attachForm(t){t?(this.form=t,m.has(this.form)?m.get(this.form).add(this.host):m.set(this.form,new Set([this.host])),this.form.addEventListener("formdata",this.handleFormData),this.form.addEventListener("submit",this.handleFormSubmit),this.form.addEventListener("reset",this.handleFormReset),b.has(this.form)||(b.set(this.form,this.form.reportValidity),this.form.reportValidity=()=>this.reportFormValidity())):this.form=void 0}detachForm(){var t;this.form&&(null==(t=m.get(this.form))||t.delete(this.host),this.form.removeEventListener("formdata",this.handleFormData),this.form.removeEventListener("submit",this.handleFormSubmit),this.form.removeEventListener("reset",this.handleFormReset),b.has(this.form)&&(this.form.reportValidity=b.get(this.form),b.delete(this.form))),this.form=void 0}handleFormData(t){const e=this.options.disabled(this.host),o=this.options.name(this.host),i=this.options.value(this.host),r="sd-1-2-0-button"===this.host.tagName.toLowerCase();!e&&!r&&"string"==typeof o&&o.length>0&&typeof i<"u"&&(Array.isArray(i)?i.forEach((e=>{t.formData.append(o,e.toString())})):t.formData.append(o,i.toString()))}handleFormSubmit(t){var e;const o=this.options.disabled(this.host),i=this.options.reportValidity;this.form&&!this.form.noValidate&&(null==(e=m.get(this.form))||e.forEach((t=>{this.setUserInteracted(t,!0)}))),this.form&&!this.form.noValidate&&!o&&!i(this.host)&&(t.preventDefault(),t.stopImmediatePropagation())}handleFormReset(){this.options.setValue(this.host,this.options.defaultValue(this.host)),this.setUserInteracted(this.host,!1)}async handleUserInput(){await this.host.updateComplete,this.setUserInteracted(this.host,!0)}reportFormValidity(){if(this.form&&!this.form.noValidate){const t=this.form.querySelectorAll("*");for(const e of t)if("function"==typeof e.reportValidity&&!e.reportValidity())return!1}return!0}setUserInteracted(t,e){c.set(t,e),t.requestUpdate()}doAction(t,e){if(this.form){const o=document.createElement("button");o.type=t,o.style.position="absolute",o.style.width="0",o.style.height="0",o.style.clipPath="inset(50%)",o.style.overflow="hidden",o.style.whiteSpace="nowrap",e&&(o.name=e.name,o.value=e.value,["formaction","formenctype","formmethod","formnovalidate","formtarget"].forEach((t=>{e.hasAttribute(t)&&o.setAttribute(t,e.getAttribute(t))}))),this.form.append(o),o.click(),o.remove()}}reset(t){this.doAction("reset",t)}submit(t){this.doAction("submit",t)}setValidity(t){var e;const o=this.host,i=!!c.get(o),r=!!o.required;null!=(e=this.form)&&e.noValidate?(o.removeAttribute("data-required"),o.removeAttribute("data-optional"),o.removeAttribute("data-invalid"),o.removeAttribute("data-valid"),o.removeAttribute("data-user-invalid"),o.removeAttribute("data-user-valid")):(o.toggleAttribute("data-required",r),o.toggleAttribute("data-optional",!r),o.toggleAttribute("data-invalid",!t),o.toggleAttribute("data-valid",t),o.toggleAttribute("data-user-invalid",!t&&i),o.toggleAttribute("data-user-valid",t&&i))}updateValidity(){const t=this.host;this.setValidity(t.checkValidity())}}
+import"./spinner.js";import{x as t,i as e}from"./lit-element.js";import{S as i,l as r,n as o,e as s}from"./solid-element.js";import{t as a}from"./state.js";import{i as n}from"./query.js";import{H as l,l as h}from"./if-defined.js";import{w as d}from"./watch.js";import{c as m}from"./component.styles.js";import{t as p}from"./classix.js";import"./solid-components2.js";const u=new WeakMap,c=new WeakMap,f=new WeakMap;class b{constructor(t,e){(this.host=t).addController(this),this.options={form:t=>{if(t.hasAttribute("form")&&""!==t.getAttribute("form")){const e=t.getRootNode(),i=t.getAttribute("form");if(i)return e.getElementById(i)}return t.closest("form")},name:t=>t.name,value:t=>t.value,defaultValue:t=>t.defaultValue,disabled:t=>t.disabled??!1,reportValidity:t=>"function"!=typeof t.reportValidity||t.reportValidity(),setValue:(t,e)=>t.value=e,...e},this.handleFormData=this.handleFormData.bind(this),this.handleFormSubmit=this.handleFormSubmit.bind(this),this.handleFormReset=this.handleFormReset.bind(this),this.reportFormValidity=this.reportFormValidity.bind(this),this.handleUserInput=this.handleUserInput.bind(this)}hostConnected(){const t=this.options.form(this.host);t&&this.attachForm(t),this.host.addEventListener("sd-input",this.handleUserInput)}hostDisconnected(){this.detachForm(),this.host.removeEventListener("sd-input",this.handleUserInput)}hostUpdated(){const t=this.options.form(this.host);t||this.detachForm(),t&&this.form!==t&&(this.detachForm(),this.attachForm(t)),this.host.hasUpdated&&this.setValidity(this.host.checkValidity())}attachForm(t){t?(this.form=t,u.has(this.form)?u.get(this.form).add(this.host):u.set(this.form,new Set([this.host])),this.form.addEventListener("formdata",this.handleFormData),this.form.addEventListener("submit",this.handleFormSubmit),this.form.addEventListener("reset",this.handleFormReset),f.has(this.form)||(f.set(this.form,this.form.reportValidity),this.form.reportValidity=()=>this.reportFormValidity())):this.form=void 0}detachForm(){var t;this.form&&(null==(t=u.get(this.form))||t.delete(this.host),this.form.removeEventListener("formdata",this.handleFormData),this.form.removeEventListener("submit",this.handleFormSubmit),this.form.removeEventListener("reset",this.handleFormReset),f.has(this.form)&&(this.form.reportValidity=f.get(this.form),f.delete(this.form))),this.form=void 0}handleFormData(t){const e=this.options.disabled(this.host),i=this.options.name(this.host),r=this.options.value(this.host),o="sd-1-2-1-button"===this.host.tagName.toLowerCase();!e&&!o&&"string"==typeof i&&i.length>0&&typeof r<"u"&&(Array.isArray(r)?r.forEach((e=>{t.formData.append(i,e.toString())})):t.formData.append(i,r.toString()))}handleFormSubmit(t){var e;const i=this.options.disabled(this.host),r=this.options.reportValidity;this.form&&!this.form.noValidate&&(null==(e=u.get(this.form))||e.forEach((t=>{this.setUserInteracted(t,!0)}))),this.form&&!this.form.noValidate&&!i&&!r(this.host)&&(t.preventDefault(),t.stopImmediatePropagation())}handleFormReset(){this.options.setValue(this.host,this.options.defaultValue(this.host)),this.setUserInteracted(this.host,!1)}async handleUserInput(){await this.host.updateComplete,this.setUserInteracted(this.host,!0)}reportFormValidity(){if(this.form&&!this.form.noValidate){const t=this.form.querySelectorAll("*");for(const e of t)if("function"==typeof e.reportValidity&&!e.reportValidity())return!1}return!0}setUserInteracted(t,e){c.set(t,e),t.requestUpdate()}doAction(t,e){if(this.form){const i=document.createElement("button");i.type=t,i.style.position="absolute",i.style.width="0",i.style.height="0",i.style.clipPath="inset(50%)",i.style.overflow="hidden",i.style.whiteSpace="nowrap",e&&(i.name=e.name,i.value=e.value,["formaction","formenctype","formmethod","formnovalidate","formtarget"].forEach((t=>{e.hasAttribute(t)&&i.setAttribute(t,e.getAttribute(t))}))),this.form.append(i),i.click(),i.remove()}}reset(t){this.doAction("reset",t)}submit(t){this.doAction("submit",t)}setValidity(t){var e;const i=this.host,r=!!c.get(i),o=!!i.required;null!=(e=this.form)&&e.noValidate?(i.removeAttribute("data-required"),i.removeAttribute("data-optional"),i.removeAttribute("data-invalid"),i.removeAttribute("data-valid"),i.removeAttribute("data-user-invalid"),i.removeAttribute("data-user-valid")):(i.toggleAttribute("data-required",o),i.toggleAttribute("data-optional",!o),i.toggleAttribute("data-invalid",!t),i.toggleAttribute("data-valid",t),i.toggleAttribute("data-user-invalid",!t&&r),i.toggleAttribute("data-user-valid",t&&r))}updateValidity(){const t=this.host;this.setValidity(t.checkValidity())}}
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const y=Symbol.for(""),v=t=>{if((null==t?void 0:t.r)===y)return null==t?void 0:t._$litStatic$},g=(t,...e)=>({_$litStatic$:e.reduce(((e,o,i)=>e+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(o)+t[i+1]),t[0]),r:y}),x=new Map,w=(V=t,(t,...e)=>{const o=e.length;let i,r;const s=[],a=[];let n,l=0,d=!1;for(;l<o;){for(n=t[l];l<o&&(r=e[l],void 0!==(i=v(r)));)n+=i+t[++l],d=!0;l!==o&&a.push(r),s.push(n),l++}if(l===o&&s.push(t[o]),d){const o=s.join("$$lit$$");void 0===(t=x.get(o))&&(s.raw=s,x.set(o,t=s)),e=a}return V(t,...e)});var V,$=Object.defineProperty,_=Object.getOwnPropertyDescriptor,F=(t,e,o,i)=>{for(var r,s=i>1?void 0:i?_(e,o):e,a=t.length-1;a>=0;a--)(r=t[a])&&(s=(i?r(e,o,s):r(s))||s);return i&&s&&$(e,o,s),s};let A=class extends o{constructor(){super(...arguments),this.formControlController=new f(this,{form:t=>{if(t.hasAttribute("form")){const e=t.getRootNode(),o=t.getAttribute("form");return e.getElementById(o)}return t.closest("form")}}),this.hasSlotController=new l(this,"[default]","icon-left","icon-right"),this.invalid=!1,this.title="",this.variant="primary",this.inverted=!1,this.size="lg",this.disabled=!1,this.loading=!1,this.type="button",this.name="",this.value="",this.href=""}firstUpdated(){this.isButton()&&this.formControlController.updateValidity()}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}handleClick(t){if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.formControlController.submit(this),"reset"===this.type&&this.formControlController.reset(this)}isButton(){return!this.href}isLink(){return!!this.href}handleDisabledChange(){this.isButton()&&this.formControlController.setValidity(this.disabled)}click(){this.button.click()}focus(t){this.button.focus(t)}blur(){this.button.blur()}checkValidity(){return!this.isButton()||this.button.checkValidity()}reportValidity(){return!this.isButton()||this.button.reportValidity()}setCustomValidity(t){this.isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}render(){const t=this.isLink(),e=t?g`a`:g`button`,o={label:this.hasSlotController.test("[default]"),"icon-left":this.hasSlotController.test("icon-left"),"icon-right":this.hasSlotController.test("icon-right"),"icon-only":this._iconsInDefaultSlot.length>0};return w`
-      <${e}
-      part="base"
-      class=${p("font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline\n        w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center\n        border transition-colors duration-200 ease-in-out rounded-md\n        select-none cursor-[inherit]",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline",this.loading&&"relative cursor-wait",this.disabled&&"cursor-not-allowed",o["icon-only"]&&"px-0 w-varspacing",{sm:"text-sm varspacing-8 px-4",md:"text-base varspacing-10 px-4",lg:"text-base varspacing-12 px-4"}[this.size],{primary:this.inverted?"text-primary bg-white border-transparent\n           hover:text-primary-500 hover:bg-primary-100\n           active:text-primary-800 active:bg-primary-200\n           disabled:bg-neutral-600 disabled:text-white":"text-white bg-primary border-transparent\n           hover:text-primary-100 hover:bg-primary-500\n           active:text-primary-200 active:bg-primary-800\n           disabled:bg-neutral-500",secondary:this.inverted?"text-white border-white\n          hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100\n          active:text-primary-200 active:bg-primary-800 active:border-primary-200\n          disabled:text-neutral-600 disabled:border-neutral-600":"text-primary border-primary\n          hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100\n          active:text-primary-800 active:border-primary-800 active:bg-primary-200\n          disabled:text-neutral-500 disabled:border-neutral-500",tertiary:this.inverted?"text-white border-transparent\n          hover:text-primary-100 hover:bg-primary-500\n          active:text-primary-200 active:bg-primary-800\n          disabled:text-neutral-600":"text-primary border-transparent\n          hover:text-primary-500 hover:bg-primary-100\n          active:text-primary-800 active:bg-primary-200\n          disabled:text-neutral-500",cta:`text-white bg-accent border-transparent\n          hover:bg-accent-300\n          active:bg-accent-500\n          ${this.inverted?"disabled:bg-neutral-600":"disabled:bg-neutral-500"} disabled:text-white`}[this.variant])}
-        ?disabled=${d(t?void 0:this.disabled)}
-        type=${d(t?void 0:this.type)}
-        title=${this.title}
-        name=${d(t?void 0:this.name)}
-        value=${d(t?void 0:this.value)}
-        href=${d(t?this.href:void 0)}
-        target=${d(t?this.target:void 0)}
-        download=${d(t?this.download:void 0)}
-        rel=${d(t&&this.target?"noreferrer noopener":void 0)}
-        role=${d(t?void 0:"button")}
-        aria-disabled=${this.disabled?"true":"false"}
-        tabindex=${this.disabled?"-1":"0"}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
-        @click=${this.handleClick}
-      >
-        <slot name="icon-left" part="icon-left" class=${p("flex flex-auto items-center pointer-events-none",o["icon-only"]&&"hidden",this.loading&&"invisible",o["icon-left"]&&{sm:"mr-1",md:"mr-2",lg:"mr-2"}[this.size])}></slot>
-        <slot part="label" class=${p(o["icon-only"]?"flex flex-auto items-center pointer-events-none":"inline-block",this.loading&&"invisible")}></slot>
-        <slot name="icon-right"
-          part="icon-right"
-          class=${p("flex flex-auto items-center pointer-events-none",this.loading&&"invisible",o["icon-only"]&&"hidden",o["icon-right"]&&{sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size])}>
-        </slot>
-      ${this.loading?w`<sd-1-2-0-spinner
-              class="${p("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"
-            ></sd-1-2-0-spinner>`:""}
-      </${e}>
-    `}};A.styles=[u,o.styles,e`
-      :host {
-        display: inline-block;
-        position: relative;
-        width: auto;
-        cursor: pointer;
-      }
-
-      sd-1-2-0-spinner {
-        --indicator-color: currentColor;
-        --track-color: var(--tw-varcolor-200);
-      }
-
-      /*
-    * Badges:
-    * Slotted badges are positioned absolutely in the top right corner of the button.
-    */
-
-      ::slotted(sd-badge) {
-        position: absolute;
-        top: 0;
-        right: 0;
-        translate: 50% -50%;
-        pointer-events: none;
-      }
-
-      /**
-       * sd-1-2-0-icons should automatically resize correctly based on the button size.
-       */
-
-      ::slotted(sd-1-2-0-icon),
-      sd-1-2-0-spinner {
-        font-size: calc(var(--tw-varspacing) / 2);
-      }
-
-      ///*
-      // * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-      // * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-      // * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-      // * buttons and we style them here instead.
-      // */
-
-      // :host(.sd-1-2-0-button-group__button--first:not(.sd-1-2-0-button-group__button--last)) .button {
-      //   border-start-end-radius: 0;
-      //   border-end-end-radius: 0;
-      // }
-
-      // :host(.sd-1-2-0-button-group__button--inner) .button {
-      //   border-radius: 0;
-      // }
-
-      // :host(.sd-1-2-0-button-group__button--last:not(.sd-1-2-0-button-group__button--first)) .button {
-      //   border-start-start-radius: 0;
-      //   border-end-start-radius: 0;
-      // }
-
-      // /* All except the first */
-      // :host(.sd-1-2-0-button-group__button:not(.sd-1-2-0-button-group__button--first)) {
-      //   margin-inline-start: calc(-1 * var(--sd-input-border-width));
-      // }
-
-      // /* Add a visual separator between solid buttons */
-      // :host(
-      //     .sd-1-2-0-button-group__button:not(
-      //         .sd-1-2-0-button-group__button--first,
-      //         .sd-1-2-0-button-group__button--radio,
-      //         [variant='default']
-      //       ):not(:hover)
-      //   )
-      //   .button:after {
-      //   content: '';
-      //   position: absolute;
-      //   top: 0;
-      //   inset-inline-start: 0;
-      //   bottom: 0;
-      //   border-left: solid 1px rgb(128 128 128 / 33%);
-      //   mix-blend-mode: multiply;
-      // }
-
-      // /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-      // :host(.sd-1-2-0-button-group__button--hover) {
-      //   z-index: 1;
-      // }
-
-      // /* Focus and checked are always on top */
-      // :host(.sd-1-2-0-button-group__button--focus),
-      // :host(.sd-1-2-0-button-group__button[checked]) {
-      //   z-index: 2;
-      // }
-    `],F([n("a, button")],A.prototype,"button",2),F([i({selector:"sd-1-2-0-icon"})],A.prototype,"_iconsInDefaultSlot",2),F([a()],A.prototype,"invalid",2),F([r()],A.prototype,"title",2),F([r({reflect:!0})],A.prototype,"variant",2),F([r({type:Boolean,reflect:!0})],A.prototype,"inverted",2),F([r({reflect:!0})],A.prototype,"size",2),F([r({type:Boolean,reflect:!0})],A.prototype,"disabled",2),F([r({type:Boolean,reflect:!0})],A.prototype,"loading",2),F([r()],A.prototype,"type",2),F([r()],A.prototype,"name",2),F([r()],A.prototype,"value",2),F([r()],A.prototype,"href",2),F([r()],A.prototype,"target",2),F([r()],A.prototype,"download",2),F([r()],A.prototype,"form",2),F([r({attribute:"formaction"})],A.prototype,"formAction",2),F([r({attribute:"formenctype"})],A.prototype,"formEnctype",2),F([r({attribute:"formmethod"})],A.prototype,"formMethod",2),F([r({attribute:"formnovalidate",type:Boolean})],A.prototype,"formNoValidate",2),F([r({attribute:"formtarget"})],A.prototype,"formTarget",2),F([h("disabled",{waitUntilFirstUpdate:!0})],A.prototype,"handleDisabledChange",1),A=F([s("sd-1-2-0-button")],A);export{A as default};
+ */const y=Symbol.for(""),v=t=>{if((null==t?void 0:t.r)===y)return null==t?void 0:t._$litStatic$},g=(t,...e)=>({_$litStatic$:e.reduce(((e,i,r)=>e+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(i)+t[r+1]),t[0]),r:y}),x=new Map,w=(V=t,(t,...e)=>{const i=e.length;let r,o;const s=[],a=[];let n,l=0,h=!1;for(;l<i;){for(n=t[l];l<i&&(o=e[l],void 0!==(r=v(o)));)n+=r+t[++l],h=!0;l!==i&&a.push(o),s.push(n),l++}if(l===i&&s.push(t[i]),h){const i=s.join("$$lit$$");void 0===(t=x.get(i))&&(s.raw=s,x.set(i,t=s)),e=a}return V(t,...e)});var V,$=Object.defineProperty,F=Object.getOwnPropertyDescriptor,A=(t,e,i,r)=>{for(var o,s=r>1?void 0:r?F(e,i):e,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r?o(e,i,s):o(s))||s);return r&&s&&$(e,i,s),s};let C=class extends i{constructor(){super(...arguments),this.formControlController=new b(this,{form:t=>{if(t.hasAttribute("form")){const e=t.getRootNode(),i=t.getAttribute("form");return e.getElementById(i)}return t.closest("form")}}),this.hasSlotController=new l(this,"[default]","icon-left","icon-right"),this.invalid=!1,this.title="",this.variant="primary",this.inverted=!1,this.size="lg",this.disabled=!1,this.loading=!1,this.type="button",this.name="",this.value="",this.href=""}firstUpdated(){this.isButton()&&this.formControlController.updateValidity()}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}handleClick(t){if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.formControlController.submit(this),"reset"===this.type&&this.formControlController.reset(this)}isButton(){return!this.href}isLink(){return!!this.href}handleDisabledChange(){this.isButton()&&this.formControlController.setValidity(this.disabled)}click(){this.button.click()}focus(t){this.button.focus(t)}blur(){this.button.blur()}checkValidity(){return!this.isButton()||this.button.checkValidity()}reportValidity(){return!this.isButton()||this.button.reportValidity()}setCustomValidity(t){this.isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}render(){const t=this.isLink(),e=t?g`a`:g`button`,i={label:this.hasSlotController.test("[default]"),"icon-left":this.hasSlotController.test("icon-left"),"icon-right":this.hasSlotController.test("icon-right"),"icon-only":this._iconsInDefaultSlot.length>0};return w`<${e} part="base" class="${p("font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline\n        w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center\n        border transition-colors duration-200 ease-in-out rounded-md\n        select-none cursor-[inherit]",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline",this.loading&&"relative cursor-wait",this.disabled&&"cursor-not-allowed",i["icon-only"]&&"px-0 w-varspacing",{sm:"text-sm varspacing-8 px-4",md:"text-base varspacing-10 px-4",lg:"text-base varspacing-12 px-4"}[this.size],{primary:this.inverted?"text-primary bg-white border-transparent\n           hover:text-primary-500 hover:bg-primary-100\n           active:text-primary-800 active:bg-primary-200\n           disabled:bg-neutral-600 disabled:text-white":"text-white bg-primary border-transparent\n           hover:text-primary-100 hover:bg-primary-500\n           active:text-primary-200 active:bg-primary-800\n           disabled:bg-neutral-500",secondary:this.inverted?"text-white border-white\n          hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100\n          active:text-primary-200 active:bg-primary-800 active:border-primary-200\n          disabled:text-neutral-600 disabled:border-neutral-600":"text-primary border-primary\n          hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100\n          active:text-primary-800 active:border-primary-800 active:bg-primary-200\n          disabled:text-neutral-500 disabled:border-neutral-500",tertiary:this.inverted?"text-white border-transparent\n          hover:text-primary-100 hover:bg-primary-500\n          active:text-primary-200 active:bg-primary-800\n          disabled:text-neutral-600":"text-primary border-transparent\n          hover:text-primary-500 hover:bg-primary-100\n          active:text-primary-800 active:bg-primary-200\n          disabled:text-neutral-500",cta:`text-white bg-accent border-transparent\n          hover:bg-accent-300\n          active:bg-accent-500\n          ${this.inverted?"disabled:bg-neutral-600":"disabled:bg-neutral-500"} disabled:text-white`}[this.variant])}" ?disabled="${h(t?void 0:this.disabled)}" type="${h(t?void 0:this.type)}" title="${this.title}" name="${h(t?void 0:this.name)}" value="${h(t?void 0:this.value)}" href="${h(t?this.href:void 0)}" target="${h(t?this.target:void 0)}" download="${h(t?this.download:void 0)}" rel="${h(t&&this.target?"noreferrer noopener":void 0)}" role="${h(t?void 0:"button")}" aria-disabled="${this.disabled?"true":"false"}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${p("flex flex-auto items-center pointer-events-none",i["icon-only"]&&"hidden",this.loading&&"invisible",i["icon-left"]&&{sm:"mr-1",md:"mr-2",lg:"mr-2"}[this.size])}"></slot><slot part="label" class="${p(i["icon-only"]?"flex flex-auto items-center pointer-events-none":"inline-block",this.loading&&"invisible")}"></slot><slot name="icon-right" part="icon-right" class="${p("flex flex-auto items-center pointer-events-none",this.loading&&"invisible",i["icon-only"]&&"hidden",i["icon-right"]&&{sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size])}"></slot>${this.loading?w`<sd-1-2-1-spinner class="${p("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-2-1-spinner>`:""}</${e}>`}};C.styles=[m,i.styles,e`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-2-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-2-1-icon),sd-1-2-1-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`],A([n("a, button")],C.prototype,"button",2),A([r({selector:"sd-1-2-1-icon"})],C.prototype,"_iconsInDefaultSlot",2),A([a()],C.prototype,"invalid",2),A([o()],C.prototype,"title",2),A([o({reflect:!0})],C.prototype,"variant",2),A([o({type:Boolean,reflect:!0})],C.prototype,"inverted",2),A([o({reflect:!0})],C.prototype,"size",2),A([o({type:Boolean,reflect:!0})],C.prototype,"disabled",2),A([o({type:Boolean,reflect:!0})],C.prototype,"loading",2),A([o()],C.prototype,"type",2),A([o()],C.prototype,"name",2),A([o()],C.prototype,"value",2),A([o()],C.prototype,"href",2),A([o()],C.prototype,"target",2),A([o()],C.prototype,"download",2),A([o()],C.prototype,"form",2),A([o({attribute:"formaction"})],C.prototype,"formAction",2),A([o({attribute:"formenctype"})],C.prototype,"formEnctype",2),A([o({attribute:"formmethod"})],C.prototype,"formMethod",2),A([o({attribute:"formnovalidate",type:Boolean})],C.prototype,"formNoValidate",2),A([o({attribute:"formtarget"})],C.prototype,"formTarget",2),A([d("disabled",{waitUntilFirstUpdate:!0})],C.prototype,"handleDisabledChange",1),C=A([s("sd-1-2-1-button")],C);export{C as default};

package/dist/versioned-components/es/divider.js

@@ -1 +1 @@
-import{x as t,i as e}from"./lit-element.js";import{S as r,n as o,e as i}from"./solid-element.js";import{c as s}from"./component.styles.js";import{t as n}from"./classix.js";var a=Object.defineProperty,l=Object.getOwnPropertyDescriptor,d=(t,e,r,o)=>{for(var i,s=o>1?void 0:o?l(e,r):e,n=t.length-1;n>=0;n--)(i=t[n])&&(s=(o?i(e,r,s):i(s))||s);return o&&s&&a(e,r,s),s};let c=class extends r{constructor(){super(...arguments),this.orientation="horizontal",this.inverted=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator")}render(){return t`<hr part="main" class="${n(this.inverted?"border-primary-400":"border-neutral-400","horizontal"===this.orientation?"border-t w-full":" border-l h-full")}">`}};c.styles=[s,r.styles,e`:host{margin:0}:host(sd-1-2-0-divider[orientation=horizontal]){display:block}:host(sd-1-2-0-divider[orientation=vertical]){display:inline-block}`],d([o({reflect:!0})],c.prototype,"orientation",2),d([o({type:Boolean,reflect:!0})],c.prototype,"inverted",2),c=d([i("sd-1-2-0-divider")],c);export{c as default};
+import{x as t,i as e}from"./lit-element.js";import{S as r,n as o,e as i}from"./solid-element.js";import{c as s}from"./component.styles.js";import{t as n}from"./classix.js";var a=Object.defineProperty,l=Object.getOwnPropertyDescriptor,d=(t,e,r,o)=>{for(var i,s=o>1?void 0:o?l(e,r):e,n=t.length-1;n>=0;n--)(i=t[n])&&(s=(o?i(e,r,s):i(s))||s);return o&&s&&a(e,r,s),s};let c=class extends r{constructor(){super(...arguments),this.orientation="horizontal",this.inverted=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator")}render(){return t`<hr part="main" class="${n(this.inverted?"border-primary-400":"border-neutral-400","horizontal"===this.orientation?"border-t w-full":" border-l h-full")}">`}};c.styles=[s,r.styles,e`:host{margin:0}:host(sd-1-2-1-divider[orientation=horizontal]){display:block}:host(sd-1-2-1-divider[orientation=vertical]){display:inline-block}`],d([o({reflect:!0})],c.prototype,"orientation",2),d([o({type:Boolean,reflect:!0})],c.prototype,"inverted",2),c=d([i("sd-1-2-1-divider")],c);export{c as default};

package/dist/versioned-components/es/icon.js

@@ -14,4 +14,4 @@ import{A as t,T as e,x as r,i as s}from"./lit-element.js";import{S as i,n as o,e
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class g extends b{}g.directiveName="unsafeSVG",g.resultType=2;const y=(v=g,(...t)=>({_$litDirective$:v,values:t}));var v,f=Object.defineProperty,w=Object.getOwnPropertyDescriptor,A=(t,e,r,s)=>{for(var i,o=s>1?void 0:s?w(e,r):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(s?i(e,r,o):i(o))||o);return s&&o&&f(e,r,o),o};let $,x=class extends i{constructor(){super(...arguments),this.svg="",this.label="",this.library="default",this.color="currentColor"}connectedCallback(){super.connectedCallback(),n(this)}firstUpdated(){this.setIcon()}disconnectedCallback(){super.disconnectedCallback(),c(this)}getUrl(){const t=h(this.library);return this.name&&t?t.resolver(this.name):this.src}handleLabelChange(){"string"==typeof this.label&&this.label.length>0?(this.setAttribute("role","img"),this.setAttribute("aria-label",this.label),this.removeAttribute("aria-hidden")):(this.removeAttribute("role"),this.removeAttribute("aria-label"),this.setAttribute("aria-hidden","true"))}async setIcon(){var t;const e=h(this.library),r=this.getUrl();if($||($=new DOMParser),r)try{const s=await p(r);if(r===this.getUrl())if(s.ok){const r=$.parseFromString(s.svg,"text/html").body.querySelector("svg");null!==r?(null==(t=null==e?void 0:e.mutator)||t.call(e,r),this.svg=r.outerHTML,this.emit("sd-load")):(this.svg="",this.emit("sd-error"))}else this.svg="",this.emit("sd-error")}catch{this.emit("sd-error")}else this.svg.length>0&&(this.svg="")}render(){return r`${y(this.svg)}`}};x.styles=[d,s`:host{display:inline-block;width:1em;height:1em;box-sizing:content-box!important}svg{display:block;height:100%;width:100%}:host([color=primary]) svg{color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-text-opacity,1))}// text-primary :host([color=white]) svg{color:rgb(var(--sd-color-white,255 255 255) / var(--tw-text-opacity,1))}`],A([l()],x.prototype,"svg",2),A([o({reflect:!0})],x.prototype,"name",2),A([o()],x.prototype,"src",2),A([o()],x.prototype,"label",2),A([o({reflect:!0})],x.prototype,"library",2),A([o({reflect:!0})],x.prototype,"color",2),A([u("label")],x.prototype,"handleLabelChange",1),A([u(["name","src","library"])],x.prototype,"setIcon",1),x=A([a("sd-1-2-0-icon")],x);export{x as default};
+class g extends b{}g.directiveName="unsafeSVG",g.resultType=2;const y=(v=g,(...t)=>({_$litDirective$:v,values:t}));var v,f=Object.defineProperty,w=Object.getOwnPropertyDescriptor,A=(t,e,r,s)=>{for(var i,o=s>1?void 0:s?w(e,r):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(s?i(e,r,o):i(o))||o);return s&&o&&f(e,r,o),o};let $,x=class extends i{constructor(){super(...arguments),this.svg="",this.label="",this.library="default",this.color="currentColor"}connectedCallback(){super.connectedCallback(),n(this)}firstUpdated(){this.setIcon()}disconnectedCallback(){super.disconnectedCallback(),c(this)}getUrl(){const t=h(this.library);return this.name&&t?t.resolver(this.name):this.src}handleLabelChange(){"string"==typeof this.label&&this.label.length>0?(this.setAttribute("role","img"),this.setAttribute("aria-label",this.label),this.removeAttribute("aria-hidden")):(this.removeAttribute("role"),this.removeAttribute("aria-label"),this.setAttribute("aria-hidden","true"))}async setIcon(){var t;const e=h(this.library),r=this.getUrl();if($||($=new DOMParser),r)try{const s=await p(r);if(r===this.getUrl())if(s.ok){const r=$.parseFromString(s.svg,"text/html").body.querySelector("svg");null!==r?(null==(t=null==e?void 0:e.mutator)||t.call(e,r),this.svg=r.outerHTML,this.emit("sd-load")):(this.svg="",this.emit("sd-error"))}else this.svg="",this.emit("sd-error")}catch{this.emit("sd-error")}else this.svg.length>0&&(this.svg="")}render(){return r`${y(this.svg)}`}};x.styles=[d,s`:host{display:inline-block;width:1em;height:1em;box-sizing:content-box!important}svg{display:block;height:100%;width:100%}:host([color=primary]) svg{color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-text-opacity,1))}// text-primary :host([color=white]) svg{color:rgb(var(--sd-color-white,255 255 255) / var(--tw-text-opacity,1))}`],A([l()],x.prototype,"svg",2),A([o({reflect:!0})],x.prototype,"name",2),A([o()],x.prototype,"src",2),A([o()],x.prototype,"label",2),A([o({reflect:!0})],x.prototype,"library",2),A([o({reflect:!0})],x.prototype,"color",2),A([u("label")],x.prototype,"handleLabelChange",1),A([u(["name","src","library"])],x.prototype,"setIcon",1),x=A([a("sd-1-2-1-icon")],x);export{x as default};

package/dist/versioned-components/es/include.js

@@ -1 +1 @@
-import{S as t,n as e,e as r}from"./solid-element.js";import{x as s}from"./lit-element.js";import{requestInclude as o}from"./request2.js";import{w as i}from"./watch.js";import a from"./include.styles.js";import"./component.styles.js";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,n=(t,e,r,s)=>{for(var o,i=s>1?void 0:s?l(e,r):e,a=t.length-1;a>=0;a--)(o=t[a])&&(i=(s?o(e,r,i):o(i))||i);return s&&i&&c(e,r,i),i};let p=class extends t{constructor(){super(...arguments),this.mode="cors",this.allowScripts=!1}executeScript(t){const e=document.createElement("script");[...t.attributes].forEach((t=>e.setAttribute(t.name,t.value))),e.textContent=t.textContent,t.parentNode.replaceChild(e,t)}async handleSrcChange(){try{const t=this.src,e=await o(t,this.mode);if(t!==this.src)return;if(!e.ok)return void this.emit("sd-error",{detail:{status:e.status}});this.innerHTML=e.html,this.allowScripts&&[...this.querySelectorAll("script")].forEach((t=>this.executeScript(t))),this.emit("sd-load")}catch{this.emit("sd-error",{detail:{status:-1}})}}render(){return s`<slot></slot>`}};p.styles=a,n([e()],p.prototype,"src",2),n([e()],p.prototype,"mode",2),n([e({attribute:"allow-scripts",type:Boolean})],p.prototype,"allowScripts",2),n([i("src")],p.prototype,"handleSrcChange",1),p=n([r("sd-1-2-0-include")],p);export{p as default};
+import{S as t,n as e,e as r}from"./solid-element.js";import{x as s}from"./lit-element.js";import{requestInclude as o}from"./request2.js";import{w as i}from"./watch.js";import a from"./include.styles.js";import"./component.styles.js";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,n=(t,e,r,s)=>{for(var o,i=s>1?void 0:s?l(e,r):e,a=t.length-1;a>=0;a--)(o=t[a])&&(i=(s?o(e,r,i):o(i))||i);return s&&i&&c(e,r,i),i};let p=class extends t{constructor(){super(...arguments),this.mode="cors",this.allowScripts=!1}executeScript(t){const e=document.createElement("script");[...t.attributes].forEach((t=>e.setAttribute(t.name,t.value))),e.textContent=t.textContent,t.parentNode.replaceChild(e,t)}async handleSrcChange(){try{const t=this.src,e=await o(t,this.mode);if(t!==this.src)return;if(!e.ok)return void this.emit("sd-error",{detail:{status:e.status}});this.innerHTML=e.html,this.allowScripts&&[...this.querySelectorAll("script")].forEach((t=>this.executeScript(t))),this.emit("sd-load")}catch{this.emit("sd-error",{detail:{status:-1}})}}render(){return s`<slot></slot>`}};p.styles=a,n([e()],p.prototype,"src",2),n([e()],p.prototype,"mode",2),n([e({attribute:"allow-scripts",type:Boolean})],p.prototype,"allowScripts",2),n([i("src")],p.prototype,"handleSrcChange",1),p=n([r("sd-1-2-1-include")],p);export{p as default};

package/dist/versioned-components/es/link.js

@@ -1 +1 @@
-import{x as t,i as e}from"./lit-element.js";import{S as s,n as i,e as o}from"./solid-element.js";import{i as r}from"./query.js";import{H as l,l as n}from"./if-defined.js";import{t as a}from"./classix.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=(t,e,s,i)=>{for(var o,r=i>1?void 0:i?d(e,s):e,l=t.length-1;l>=0;l--)(o=t[l])&&(r=(i?o(e,s,r):o(r))||r);return i&&r&&h(e,s,r),r};let m=class extends s{constructor(){super(...arguments),this.hasSlotController=new l(this,"[default]","icon-left","icon-right"),this.size="inherit",this.inverted=!1,this.standalone=!1,this.href=""}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}focus(t){this.button.focus(t)}blur(){this.button.blur()}render(){const e={label:this.hasSlotController.test("[default]"),"icon-left":this.hasSlotController.test("icon-left"),"icon-right":this.hasSlotController.test("icon-right")};return t`<a part="base" class="${a("inline",this.href?"cursor-pointer":"",{sm:"text-sm",lg:"text-base",inherit:""}[this.size],{disabled:this.inverted?"text-neutral-600":"text-neutral-500",enabled:this.inverted?"text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted":" text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline"}[this.href?"enabled":"disabled"],this.standalone&&"flex items-start")}" href="${n(this.href||void 0)}" target="${n(this.target||void 0)}" download="${n(this.download||void 0)}" rel="${n(this.target?"noreferrer noopener":void 0)}" aria-disabled="${this.href?"false":"true"}" tabindex="${this.href?"0":"-1"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"><slot name="icon-left" part="icon-left" class="${a("inline",e["icon-left"]&&(this.standalone?{sm:"mr-1",lg:"mr-2",inherit:"mr-[0.5em]"}[this.size]:"mr-[0.25em]"))}"></slot><span part="label" class="inline underline underline-offset-2"><slot></slot></span><slot name="icon-right" part="icon-right" class="${a("inline",e["icon-right"]&&(this.standalone?{sm:"ml-1",lg:"ml-2",inherit:"ml-[0.5em]"}[this.size]:"ml-[0.25em]"))}"></slot></a>`}};m.styles=[s.styles,e`::slotted(sd-1-2-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-2-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-2-0-icon){font-size:1.5rem}`],f([r("a")],m.prototype,"button",2),f([i({reflect:!0})],m.prototype,"size",2),f([i({type:Boolean,reflect:!0})],m.prototype,"inverted",2),f([i({type:Boolean,reflect:!0})],m.prototype,"standalone",2),f([i()],m.prototype,"href",2),f([i()],m.prototype,"target",2),f([i()],m.prototype,"download",2),m=f([o("sd-1-2-0-link")],m);export{m as default};
+import{x as t,i as e}from"./lit-element.js";import{S as s,n as i,e as o}from"./solid-element.js";import{i as r}from"./query.js";import{H as l,l as n}from"./if-defined.js";import{t as a}from"./classix.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=(t,e,s,i)=>{for(var o,r=i>1?void 0:i?d(e,s):e,l=t.length-1;l>=0;l--)(o=t[l])&&(r=(i?o(e,s,r):o(r))||r);return i&&r&&h(e,s,r),r};let m=class extends s{constructor(){super(...arguments),this.hasSlotController=new l(this,"[default]","icon-left","icon-right"),this.size="inherit",this.inverted=!1,this.standalone=!1,this.href=""}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}focus(t){this.button.focus(t)}blur(){this.button.blur()}render(){const e={label:this.hasSlotController.test("[default]"),"icon-left":this.hasSlotController.test("icon-left"),"icon-right":this.hasSlotController.test("icon-right")};return t`<a part="base" class="${a("inline",this.href?"cursor-pointer":"",{sm:"text-sm",lg:"text-base",inherit:""}[this.size],{disabled:this.inverted?"text-neutral-600":"text-neutral-500",enabled:this.inverted?"text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted":" text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline"}[this.href?"enabled":"disabled"],this.standalone&&"flex items-start")}" href="${n(this.href||void 0)}" target="${n(this.target||void 0)}" download="${n(this.download||void 0)}" rel="${n(this.target?"noreferrer noopener":void 0)}" aria-disabled="${this.href?"false":"true"}" tabindex="${this.href?"0":"-1"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"><slot name="icon-left" part="icon-left" class="${a("inline",e["icon-left"]&&(this.standalone?{sm:"mr-1",lg:"mr-2",inherit:"mr-[0.5em]"}[this.size]:"mr-[0.25em]"))}"></slot><span part="label" class="inline underline underline-offset-2"><slot></slot></span><slot name="icon-right" part="icon-right" class="${a("inline",e["icon-right"]&&(this.standalone?{sm:"ml-1",lg:"ml-2",inherit:"ml-[0.5em]"}[this.size]:"ml-[0.25em]"))}"></slot></a>`}};m.styles=[s.styles,e`::slotted(sd-1-2-1-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-2-1-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-2-1-icon){font-size:1.5rem}`],f([r("a")],m.prototype,"button",2),f([i({reflect:!0})],m.prototype,"size",2),f([i({type:Boolean,reflect:!0})],m.prototype,"inverted",2),f([i({type:Boolean,reflect:!0})],m.prototype,"standalone",2),f([i()],m.prototype,"href",2),f([i()],m.prototype,"target",2),f([i()],m.prototype,"download",2),m=f([o("sd-1-2-1-link")],m);export{m as default};

package/dist/versioned-components/es/spinner.js

@@ -1 +1 @@
-import{x as e,i as r}from"./lit-element.js";import{S as t,n as s,e as l}from"./solid-element.js";import{L as o}from"./solid-components2.js";import{t as i}from"./classix.js";var a=Object.defineProperty,n=Object.getOwnPropertyDescriptor,p=(e,r,t,s)=>{for(var l,o=s>1?void 0:s?n(r,t):r,i=e.length-1;i>=0;i--)(l=e[i])&&(o=(s?l(r,t,o):l(o))||o);return s&&o&&a(r,t,o),o};let c=class extends t{constructor(){super(...arguments),this.color="currentColor",this.localize=new o(this)}render(){return e`<svg role="progressbar" viewBox="0 0 24 24" class="${i("animate-spin",{primary:"text-primary",white:"text-white",currentColor:""}[this.color])}" aria-label="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`}};c.styles=[t.styles,r`:host{display:inline-block;width:1em;height:1em}`],p([s({reflect:!0})],c.prototype,"color",2),c=p([l("sd-1-2-0-spinner")],c);export{c as default};
+import{x as e,i as r}from"./lit-element.js";import{S as t,n as s,e as l}from"./solid-element.js";import{L as o}from"./solid-components2.js";import{t as i}from"./classix.js";var a=Object.defineProperty,n=Object.getOwnPropertyDescriptor,p=(e,r,t,s)=>{for(var l,o=s>1?void 0:s?n(r,t):r,i=e.length-1;i>=0;i--)(l=e[i])&&(o=(s?l(r,t,o):l(o))||o);return s&&o&&a(r,t,o),o};let c=class extends t{constructor(){super(...arguments),this.color="currentColor",this.localize=new o(this)}render(){return e`<svg role="progressbar" viewBox="0 0 24 24" class="${i("animate-spin",{primary:"text-primary",white:"text-white",currentColor:""}[this.color])}" aria-label="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`}};c.styles=[t.styles,r`:host{display:inline-block;width:1em;height:1em}`],p([s({reflect:!0})],c.prototype,"color",2),c=p([l("sd-1-2-1-spinner")],c);export{c as default};

package/dist/versioned-package/components/accordion/accordion.d.ts

@@ -18,6 +18,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-accordion': SdAccordion;
+        'sd-1-2-1-accordion': SdAccordion;
     }
 }

package/dist/versioned-package/components/accordion/accordion.js

@@ -105,7 +105,7 @@ let SdAccordion = class extends SolidElement {
     )}" role="button" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-1-2-0-icon library="system" name="chevron-down"></sd-1-2-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-1-2-0-icon library="system" name="chevron-down"></sd-1-2-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-1-2-1-icon library="system" name="chevron-down"></sd-1-2-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-1-2-1-icon library="system" name="chevron-down"></sd-1-2-1-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
   }
 };
 SdAccordion.styles = [
@@ -131,7 +131,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-1-2-0-accordion")
+  customElement("sd-1-2-1-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist/versioned-package/components/accordion-group/accordion-group.d.ts

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-accordion-group': SdAccordionGroup;
+        'sd-1-2-1-accordion-group': SdAccordionGroup;
     }
 }

package/dist/versioned-package/components/accordion-group/accordion-group.js

@@ -47,16 +47,16 @@ let SdAccordionGroup = class extends SolidElement {
 SdAccordionGroup.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:block}::slotted(sd-1-2-0-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`:host{display:block}::slotted(sd-1-2-1-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-1-2-0-accordion" })
+  queryAssignedElements({ selector: "sd-1-2-1-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-1-2-0-accordion-group")
+  customElement("sd-1-2-1-accordion-group")
 ], SdAccordionGroup);
 export {
   SdAccordionGroup as default

package/dist/versioned-package/components/button/button.d.ts

@@ -43,6 +43,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-button': SdButton;
+        'sd-1-2-1-button': SdButton;
     }
 }

package/dist/versioned-package/components/button/button.js

@@ -123,10 +123,7 @@ let SdButton = class extends SolidElement {
       "icon-right": this.hasSlotController.test("icon-right"),
       "icon-only": this._iconsInDefaultSlot.length > 0
     };
-    return html`
-      <${tag}
-      part="base"
-      class=${cx(
+    return html`<${tag} part="base" class="${cx(
       `font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
         w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center
         border transition-colors duration-200 ease-in-out rounded-md
@@ -172,24 +169,7 @@ let SdButton = class extends SolidElement {
           active:bg-accent-500
           ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} disabled:text-white`
       }[this.variant]
-    )}
-        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
-        type=${ifDefined(isLink ? void 0 : this.type)}
-        title=${this.title}
-        name=${ifDefined(isLink ? void 0 : this.name)}
-        value=${ifDefined(isLink ? void 0 : this.value)}
-        href=${ifDefined(isLink ? this.href : void 0)}
-        target=${ifDefined(isLink ? this.target : void 0)}
-        download=${ifDefined(isLink ? this.download : void 0)}
-        rel=${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}
-        role=${ifDefined(isLink ? void 0 : "button")}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex=${this.disabled ? "-1" : "0"}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
-        @click=${this.handleClick}
-      >
-        <slot name="icon-left" part="icon-left" class=${cx(
+    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled ? "true" : "false"}" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       slots["icon-only"] && "hidden",
       this.loading && "invisible",
@@ -198,14 +178,10 @@ let SdButton = class extends SolidElement {
         md: "mr-2",
         lg: "mr-2"
       }[this.size]
-    )}></slot>
-        <slot part="label" class=${cx(
+    )}"></slot><slot part="label" class="${cx(
       slots["icon-only"] ? "flex flex-auto items-center pointer-events-none" : "inline-block",
       this.loading && "invisible"
-    )}></slot>
-        <slot name="icon-right"
-          part="icon-right"
-          class=${cx(
+    )}"></slot><slot name="icon-right" part="icon-right" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       this.loading && "invisible",
       slots["icon-only"] && "hidden",
@@ -214,114 +190,19 @@ let SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}>
-        </slot>
-      ${this.loading ? html`<sd-1-2-0-spinner
-              class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"
-            ></sd-1-2-0-spinner>` : ""}
-      </${tag}>
-    `;
+    )}"></slot>${this.loading ? html`<sd-1-2-1-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-2-1-spinner>` : ""}</${tag}>`;
   }
 };
 SdButton.styles = [
   componentStyles,
   SolidElement.styles,
-  css`
-      :host {
-        display: inline-block;
-        position: relative;
-        width: auto;
-        cursor: pointer;
-      }
-
-      sd-1-2-0-spinner {
-        --indicator-color: currentColor;
-        --track-color: var(--tw-varcolor-200);
-      }
-
-      /*
-    * Badges:
-    * Slotted badges are positioned absolutely in the top right corner of the button.
-    */
-
-      ::slotted(sd-badge) {
-        position: absolute;
-        top: 0;
-        right: 0;
-        translate: 50% -50%;
-        pointer-events: none;
-      }
-
-      /**
-       * sd-1-2-0-icons should automatically resize correctly based on the button size.
-       */
-
-      ::slotted(sd-1-2-0-icon),
-      sd-1-2-0-spinner {
-        font-size: calc(var(--tw-varspacing) / 2);
-      }
-
-      ///*
-      // * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-      // * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-      // * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-      // * buttons and we style them here instead.
-      // */
-
-      // :host(.sd-1-2-0-button-group__button--first:not(.sd-1-2-0-button-group__button--last)) .button {
-      //   border-start-end-radius: 0;
-      //   border-end-end-radius: 0;
-      // }
-
-      // :host(.sd-1-2-0-button-group__button--inner) .button {
-      //   border-radius: 0;
-      // }
-
-      // :host(.sd-1-2-0-button-group__button--last:not(.sd-1-2-0-button-group__button--first)) .button {
-      //   border-start-start-radius: 0;
-      //   border-end-start-radius: 0;
-      // }
-
-      // /* All except the first */
-      // :host(.sd-1-2-0-button-group__button:not(.sd-1-2-0-button-group__button--first)) {
-      //   margin-inline-start: calc(-1 * var(--sd-input-border-width));
-      // }
-
-      // /* Add a visual separator between solid buttons */
-      // :host(
-      //     .sd-1-2-0-button-group__button:not(
-      //         .sd-1-2-0-button-group__button--first,
-      //         .sd-1-2-0-button-group__button--radio,
-      //         [variant='default']
-      //       ):not(:hover)
-      //   )
-      //   .button:after {
-      //   content: '';
-      //   position: absolute;
-      //   top: 0;
-      //   inset-inline-start: 0;
-      //   bottom: 0;
-      //   border-left: solid 1px rgb(128 128 128 / 33%);
-      //   mix-blend-mode: multiply;
-      // }
-
-      // /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-      // :host(.sd-1-2-0-button-group__button--hover) {
-      //   z-index: 1;
-      // }
-
-      // /* Focus and checked are always on top */
-      // :host(.sd-1-2-0-button-group__button--focus),
-      // :host(.sd-1-2-0-button-group__button[checked]) {
-      //   z-index: 2;
-      // }
-    `
+  css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-2-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-2-1-icon),sd-1-2-1-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-1-2-0-icon" })
+  queryAssignedElements({ selector: "sd-1-2-1-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -384,7 +265,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-1-2-0-button")
+  customElement("sd-1-2-1-button")
 ], SdButton);
 export {
   SdButton as default

package/dist/versioned-package/components/divider/divider.d.ts

@@ -8,6 +8,6 @@ export default class SdDivider extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-divider': SdDivider;
+        'sd-1-2-1-divider': SdDivider;
     }
 }

package/dist/versioned-package/components/divider/divider.js

@@ -34,7 +34,7 @@ let SdDivider = class extends SolidElement {
 SdDivider.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{margin:0}:host(sd-1-2-0-divider[orientation=horizontal]){display:block}:host(sd-1-2-0-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:0}:host(sd-1-2-1-divider[orientation=horizontal]){display:block}:host(sd-1-2-1-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ reflect: true })
@@ -43,7 +43,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-1-2-0-divider")
+  customElement("sd-1-2-1-divider")
 ], SdDivider);
 export {
   SdDivider as default

package/dist/versioned-package/components/icon/icon.d.ts

@@ -17,6 +17,6 @@ export default class SdIcon extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-icon': SdIcon;
+        'sd-1-2-1-icon': SdIcon;
     }
 }

package/dist/versioned-package/components/icon/icon.js

@@ -122,7 +122,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-1-2-0-icon")
+  customElement("sd-1-2-1-icon")
 ], SdIcon);
 export {
   SdIcon as default

package/dist/versioned-package/components/include/include.d.ts

@@ -11,6 +11,6 @@ export default class SdInclude extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-include': SdInclude;
+        'sd-1-2-1-include': SdInclude;
     }
 }

package/dist/versioned-package/components/include/include.js

@@ -65,7 +65,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-1-2-0-include")
+  customElement("sd-1-2-1-include")
 ], SdInclude);
 export {
   SdInclude as default

package/dist/versioned-package/components/link/link.d.ts

@@ -17,6 +17,6 @@ export default class SdLink extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-link': SdLink;
+        'sd-1-2-1-link': SdLink;
     }
 }

package/dist/versioned-package/components/link/link.js

@@ -76,7 +76,7 @@ let SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   SolidElement.styles,
-  css`::slotted(sd-1-2-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-2-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-2-0-icon){font-size:1.5rem}`
+  css`::slotted(sd-1-2-1-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-2-1-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-2-1-icon){font-size:1.5rem}`
 ];
 __decorateClass([
   query("a")
@@ -100,7 +100,7 @@ __decorateClass([
   property()
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-1-2-0-link")
+  customElement("sd-1-2-1-link")
 ], SdLink);
 export {
   SdLink as default

package/dist/versioned-package/components/spinner/spinner.d.ts

@@ -7,6 +7,6 @@ export default class SdSpinner extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-2-0-spinner': SdSpinner;
+        'sd-1-2-1-spinner': SdSpinner;
     }
 }

package/dist/versioned-package/components/spinner/spinner.js

@@ -39,7 +39,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-1-2-0-spinner")
+  customElement("sd-1-2-1-spinner")
 ], SdSpinner);
 export {
   SdSpinner as default

package/dist/versioned-package/internal/form.js

@@ -90,7 +90,7 @@ class FormControlController {
     const disabled = this.options.disabled(this.host);
     const name = this.options.name(this.host);
     const value = this.options.value(this.host);
-    const isButton = this.host.tagName.toLowerCase() === "sd-1-2-0-button";
+    const isButton = this.host.tagName.toLowerCase() === "sd-1-2-1-button";
     if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
       if (Array.isArray(value)) {
         value.forEach((val) => {