solid-ui 3.1.3-9 → 5.0.0-0

package/dist/components/avatar/Avatar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.esm.js","names":["customElement","WebComponent","consume","html","authContext","DEFAULT_AUTH_CONTEXT","styles","_classDecs","_Avatar","_Avatar2","_A","WeakMap","_ref","_authDecs","context","subscribe","_Avatar3","Avatar","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_auth","_classPrivateFieldGet","auth","v","_classPrivateFieldSet","render","account","avatarUrl","e","c","_initClass","_applyDecs","_Class","_identity","_defineProperty","fallback","component","default"],"sources":["../../../src/components/avatar/Avatar.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { consume } from '@lit/context'\nimport { html } from 'lit'\nimport { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'\n\nimport '~icons/lucide/circle-user'\n\nimport styles from './Avatar.styles.css'\n\n@customElement('solid-ui-avatar')\nexport default class Avatar extends WebComponent {\n  static styles = styles\n  static states = {\n    fallback: (component: Avatar) => !component.auth.account?.avatarUrl,\n  }\n\n  @consume({ context: authContext, subscribe: true })\n  private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT\n\n  protected render () {\n    if (!this.auth.account?.avatarUrl) {\n      return html`\n          <icon-lucide-circle-user></icon-lucide-circle-user>\n      `\n    }\n\n    return html`\n        <img src=\"${this.auth.account?.avatarUrl}\" alt=\"\" />\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOwCO,IAAA,CAEvCP,EAAc,iBAAiB,CAAC;AAAA,IAAAQ;AAAA,KAAAC,KAAAC,kBAAA,IAAAC,QAAA,GAAAC,KAAAC,IAO9BX,EAAQ;CAAEY,SAASV;CAAaW,WAAW;AAAK,CAAC,GAAC,SAAAC,IAPrD,cACoCf,EAAa;CAAAiB,YAAA,GAAAC,GAAA;EAAAC,AAAA,MAAA,GAAAD,CAAA,GAAAC,EAAA,MAAAV,IAAAW,EAAA,IAAA,GAAAC,EAAA,MAOVjB,CAAoB,EAAA;CAAA;CAAA,KAAAO,KAAA;EAAA,OAAAW,EAAAb,GAAA,IAAA;CAAA;CAAA,IAAxCc,KAAIC,GAAA;EAAAC,EAAAhB,GAAA,MAAAe,CAAA;CAAA;CAEXE,SAAU;EAOlB,OANK,KAAKH,KAAKI,SAASC,YAMjB1B,CAAI;oBACK,KAAKqB,KAAKI,SAASC,UAAS;QANnC1B,CAAI;;;CAQf;AACF,GAAC,CAAA2B,GAAA,CAAAR,GAAAD,IAAAU,GAAA,CAAAvB,GAAAwB,MAAAC,EAAAjB,GAAA,CAAA;CAAAH;CAAA;CAAA;AAAA,CAAA,GAAAN,GAAA,GAAA,KAAA,GApBmCN,CAAY,GAAAe,IAAAkB,IAAA,cAAAC,EAAA;CAAAjB,cAAA;EAAA,MAAAV,CAAA,GAAA4B,EAAA,MAAA,UAC9B9B,CAAM,GAAA8B,EAAA,MAAA,UACN,EACdC,WAAWC,MAAsB,CAACA,EAAUd,KAAKI,SAASC,UAC5D,CAAC,GAAAG,EAAA;CAAA;AAAA,GAAAI,EAAAF,GAAAzB,GAAA,KAAA,CAAA,GAAAyB,GAAA"}
+{"version":3,"file":"Avatar.esm.js","names":["customElement","WebComponent","consume","html","authContext","DEFAULT_AUTH_CONTEXT","styles","_classDecs","_Avatar","_Avatar2","_A","WeakMap","_ref","_authDecs","context","subscribe","_Avatar3","Avatar","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_auth","_defineProperty","_classPrivateFieldGet","auth","v","_classPrivateFieldSet","connectedCallback","loadProfile","unsubscribeSessionUpdated","onSessionUpdated","requestUpdate","disconnectedCallback","render","account","avatarUrl","e","c","_initClass","_applyDecs","_Class","_identity","fallback","component","default"],"sources":["../../../src/components/avatar/Avatar.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { consume } from '@lit/context'\nimport { html } from 'lit'\nimport { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'\n\nimport '~icons/lucide/circle-user'\n\nimport styles from './Avatar.styles.css'\n\n@customElement('solid-ui-avatar')\nexport default class Avatar extends WebComponent {\n  static styles = styles\n  static states = {\n    fallback: (component: Avatar) => !component.auth.account?.avatarUrl,\n  }\n\n  @consume({ context: authContext, subscribe: true })\n  private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT\n\n  private unsubscribeSessionUpdated?: () => void\n\n  connectedCallback () {\n    super.connectedCallback()\n\n    this.auth.loadProfile?.()\n\n    this.unsubscribeSessionUpdated = this.auth.onSessionUpdated(() => {\n      this.auth.loadProfile?.()\n      this.requestUpdate()\n    })\n  }\n\n  disconnectedCallback () {\n    super.disconnectedCallback()\n\n    this.unsubscribeSessionUpdated?.()\n  }\n\n  protected render () {\n    if (!this.auth.account?.avatarUrl) {\n      return html`\n          <icon-lucide-circle-user></icon-lucide-circle-user>\n      `\n    }\n\n    return html`\n        <img src=\"${this.auth.account?.avatarUrl}\" alt=\"\" />\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOwCO,IAAA,CAEvCP,EAAc,iBAAiB,CAAC;AAAA,IAAAQ;AAAA,KAAAC,KAAAC,kBAAA,IAAAC,QAAA,GAAAC,KAAAC,IAO9BX,EAAQ;CAAEY,SAASV;CAAaW,WAAW;AAAK,CAAC,GAAC,SAAAC,IAPrD,cACoCf,EAAa;CAAAiB,YAAA,GAAAC,GAAA;EAOUI,AAPV,MAAA,GAAAJ,CAAA,GAAAC,EAAA,MAAAV,IAAAW,EAAA,IAAA,GAAAC,EAAA,MAOVjB,CAAoB,EAAA,GAAAkB,EAAA,MAAA,6BAAA,KAAA,CAAA;CAAA;CAAA,KAAAX,KAAA;EAAA,OAAAY,EAAAd,GAAA,IAAA;CAAA;CAAA,IAAxCe,KAAIC,GAAA;EAAAC,EAAAjB,GAAA,MAAAgB,CAAA;CAAA;CAIrBE,oBAAqB;EAKnB,AAJA,MAAMA,kBAAkB,GAExB,KAAKH,KAAKI,cAAc,GAExB,KAAKC,4BAA4B,KAAKL,KAAKM,uBAAuB;GAEhE,AADA,KAAKN,KAAKI,cAAc,GACxB,KAAKG,cAAc;EACrB,CAAC;CACH;CAEAC,uBAAwB;EAGtB,AAFA,MAAMA,qBAAqB,GAE3B,KAAKH,4BAA4B;CACnC;CAEUI,SAAU;EAOlB,OANK,KAAKT,KAAKU,SAASC,YAMjBjC,CAAI;oBACK,KAAKsB,KAAKU,SAASC,UAAS;QANnCjC,CAAI;;;CAQf;AACF,GAAC,CAAAkC,GAAA,CAAAf,GAAAD,IAAAiB,GAAA,CAAA9B,GAAA+B,MAAAC,EAAAxB,GAAA,CAAA;CAAAH;CAAA;CAAA;AAAA,CAAA,GAAAN,GAAA,GAAA,KAAA,GAvCmCN,CAAY,GAAAe,IAAAyB,IAAA,cAAAC,EAAA;CAAAxB,cAAA;EAAA,MAAAV,CAAA,GAAAe,EAAA,MAAA,UAC9BjB,CAAM,GAAAiB,EAAA,MAAA,UACN,EACdoB,WAAWC,MAAsB,CAACA,EAAUnB,KAAKU,SAASC,UAC5D,CAAC,GAAAG,EAAA;CAAA;AAAA,GAAAhB,EAAAkB,GAAAhC,GAAA,KAAA,CAAA,GAAAgC,GAAA"}

package/dist/components/avatar/Avatar.stories.d.ts

@@ -1,41 +1,23 @@
 declare const meta: {
-    readonly title: "Avatar";
+    readonly title: "Solid/Avatar";
     readonly args: {
         readonly user: "Alice";
     };
     readonly argTypes: {
         readonly user: {
             type: string;
-            options: ("Alice" | "Bob" | "Guest")[];
+            options: ("Alice" | "Bob" | "Guest" | "Initializing")[];
         };
     };
+    readonly render: () => import('lit-html').TemplateResult<1>;
 };
-export declare const Primary: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly user: {
-            type: string;
-            options: ("Alice" | "Bob" | "Guest")[];
-        };
-    }>) => HTMLDivElement;
-};
+export declare const Primary: {};
 export declare const Fallback: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly user: {
-            type: string;
-            options: ("Alice" | "Bob" | "Guest")[];
-        };
-    }>) => HTMLDivElement;
     args: {
         user: string;
     };
 };
 export declare const Guest: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly user: {
-            type: string;
-            options: ("Alice" | "Bob" | "Guest")[];
-        };
-    }>) => HTMLDivElement;
     args: {
         user: string;
     };

package/dist/components/avatar/Avatar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAGA,OAAO,UAAU,CAAA;AAEjB,QAAA,MAAM,IAAI;;;;;;;;;;;CAQA,CAAA;AAIV,eAAO,MAAM,OAAO;;;;;;;CAAa,CAAA;AACjC,eAAO,MAAM,QAAQ;;;;;;;;;;CAAoC,CAAA;AACzD,eAAO,MAAM,KAAK;;;;;;;;;;CAAsC,CAAA;AAExD,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAGA,OAAO,UAAU,CAAA;AAEjB,QAAA,MAAM,IAAI;;;;;;;;;;;;CASA,CAAA;AAEV,eAAO,MAAM,OAAO,IAAK,CAAA;AACzB,eAAO,MAAM,QAAQ;;;;CAA4B,CAAA;AACjD,eAAO,MAAM,KAAK;;;;CAA8B,CAAA;AAEhD,eAAe,IAAI,CAAA"}

package/dist/components/avatar.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/avatar-CLJz6mOV.js";
+import { n as e, t } from "../chunks/avatar-3eUQtxXZ.js";
 export { e as Avatar, t as default };

package/dist/components/button/Button.cjs.js

@@ -6,5 +6,5 @@ const e=require("../../lib/components/decorators.cjs.js"),t=require("../../lib/c
             <slot></slot>
             <slot name="right-icon"></slot>
         </button>
-    `}onIconSlotChange(e){let t=e.target;this.toggleAttribute(`data-has-icon-slot`,t.assignedElements().length>0)}onClick(){switch(this.type){case`submit`:this.getInternals().form?.requestSubmit();break;case`reset`:this.getInternals().form?.reset();break}}},{e:[h,_,y,x,d],c:[L,f]}=A(o,[[m,1,`variant`],[g,1,`type`],[v,1,`disabled`],[b,1,`loading`]],p,0,void 0,t.default),o),a=class extends F{constructor(){super(L),k(this,`styles`,n.default),k(this,`formAssociated`,!0),f()}},k(a,S,void 0),a),exports.BUTTON_VARIANTS=I,Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return L}});
+    `}onIconSlotChange(e){let t=e.target;this.toggleAttribute(`data-has-icon-slot`,t.assignedElements().length>0)}onClick(){switch(this.type){case`submit`:this.getInternals().form?.requestSubmit();break;case`reset`:this.getInternals().form?.reset()}}},{e:[h,_,y,x,d],c:[L,f]}=A(o,[[m,1,`variant`],[g,1,`type`],[v,1,`disabled`],[b,1,`loading`]],p,0,void 0,t.default),o),a=class extends F{constructor(){super(L),k(this,`styles`,n.default),k(this,`formAssociated`,!0),f()}},k(a,S,void 0),a),exports.BUTTON_VARIANTS=I,Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return L}});
 //# sourceMappingURL=Button.cjs.js.map

package/dist/components/button/Button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs.js","names":["customElement","WebComponent","html","nothing","property","styles","BUTTON_VARIANTS","_classDecs","_Button","_Button2","_A","WeakMap","_B","_C","_D","_ref","_variantDecs","type","String","reflect","_typeDecs","_disabledDecs","Boolean","_loadingDecs","_Button3","Button","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_variant","_init_type","_init_disabled","undefined","_init_loading","_classPrivateFieldGet","variant","v","_classPrivateFieldSet","disabled","loading","render","onClick","onIconSlotChange","e","slot","target","toggleAttribute","assignedElements","length","getInternals","form","requestSubmit","reset","c","_initClass","_applyDecs","_Class","_identity","_defineProperty","default"],"sources":["../../../src/components/button/Button.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport '~icons/svg-spinners/180-ring'\n\nimport styles from './Button.styles.css'\n\nexport const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'ghost'] as const\nexport type ButtonVariant = typeof BUTTON_VARIANTS[number]\n\n@customElement('solid-ui-button')\nexport default class Button extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor variant: ButtonVariant = 'primary'\n\n  @property({ type: String, reflect: true })\n  accessor type = 'button'\n\n  @property({ type: Boolean })\n  accessor disabled: boolean | undefined = undefined\n\n  @property({ type: Boolean })\n  accessor loading = false\n\n  render () {\n    const disabled = this.disabled ?? this.loading\n\n    return html`\n        <button type=${this.type} ?disabled=${disabled} @click=${this.onClick}>\n            ${this.loading ? html`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : nothing}\n            <slot name=\"left-icon\"></slot>\n            <slot @slotchange=${this.onIconSlotChange} name=\"icon\"></slot>\n            <slot></slot>\n            <slot name=\"right-icon\"></slot>\n        </button>\n    `\n  }\n\n  private onIconSlotChange (e: Event) {\n    const slot = e.target as HTMLSlotElement\n\n    this.toggleAttribute('data-has-icon-slot', slot.assignedElements().length > 0)\n  }\n\n  private onClick () {\n    switch (this.type) {\n      case 'submit':\n        this.getInternals().form?.requestSubmit()\n        break\n      case 'reset':\n        this.getInternals().form?.reset()\n        break\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Button.cjs.js","names":["customElement","WebComponent","html","nothing","property","styles","BUTTON_VARIANTS","_classDecs","_Button","_Button2","_A","WeakMap","_B","_C","_D","_ref","_variantDecs","type","String","reflect","_typeDecs","_disabledDecs","Boolean","_loadingDecs","_Button3","Button","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_variant","_init_type","_init_disabled","undefined","_init_loading","_classPrivateFieldGet","variant","v","_classPrivateFieldSet","disabled","loading","render","onClick","onIconSlotChange","e","slot","target","toggleAttribute","assignedElements","length","getInternals","form","requestSubmit","reset","c","_initClass","_applyDecs","_Class","_identity","_defineProperty","default"],"sources":["../../../src/components/button/Button.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport '~icons/svg-spinners/180-ring'\n\nimport styles from './Button.styles.css'\n\nexport const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'ghost'] as const\nexport type ButtonVariant = typeof BUTTON_VARIANTS[number]\n\n@customElement('solid-ui-button')\nexport default class Button extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor variant: ButtonVariant = 'primary'\n\n  @property({ type: String, reflect: true })\n  accessor type = 'button'\n\n  @property({ type: Boolean })\n  accessor disabled: boolean | undefined = undefined\n\n  @property({ type: Boolean })\n  accessor loading = false\n\n  render () {\n    const disabled = this.disabled ?? this.loading\n\n    return html`\n        <button type=${this.type} ?disabled=${disabled} @click=${this.onClick}>\n            ${this.loading ? html`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : nothing}\n            <slot name=\"left-icon\"></slot>\n            <slot @slotchange=${this.onIconSlotChange} name=\"icon\"></slot>\n            <slot></slot>\n            <slot name=\"right-icon\"></slot>\n        </button>\n    `\n  }\n\n  private onIconSlotChange (e: Event) {\n    const slot = e.target as HTMLSlotElement\n\n    this.toggleAttribute('data-has-icon-slot', slot.assignedElements().length > 0)\n  }\n\n  private onClick () {\n    switch (this.type) {\n      case 'submit':\n        this.getInternals().form?.requestSubmit()\n        break\n      case 'reset':\n        this.getInternals().form?.reset()\n        break\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/button/Button.esm.js

@@ -242,9 +242,7 @@ new (C = (c = /*#__PURE__*/ new WeakMap(), l = /*#__PURE__*/ new WeakMap(), u =
 			case "submit":
 				this.getInternals().form?.requestSubmit();
 				break;
-			case "reset":
-				this.getInternals().form?.reset();
-				break;
+			case "reset": this.getInternals().form?.reset();
 		}
 	}
 }, {e: [g, v, b, S, f], c: [R, p]} = j(s, [

package/dist/components/button/Button.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.esm.js","names":["customElement","WebComponent","html","nothing","property","styles","BUTTON_VARIANTS","_classDecs","_Button","_Button2","_A","WeakMap","_B","_C","_D","_ref","_variantDecs","type","String","reflect","_typeDecs","_disabledDecs","Boolean","_loadingDecs","_Button3","Button","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_variant","_init_type","_init_disabled","undefined","_init_loading","_classPrivateFieldGet","variant","v","_classPrivateFieldSet","disabled","loading","render","onClick","onIconSlotChange","e","slot","target","toggleAttribute","assignedElements","length","getInternals","form","requestSubmit","reset","c","_initClass","_applyDecs","_Class","_identity","_defineProperty","default"],"sources":["../../../src/components/button/Button.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport '~icons/svg-spinners/180-ring'\n\nimport styles from './Button.styles.css'\n\nexport const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'ghost'] as const\nexport type ButtonVariant = typeof BUTTON_VARIANTS[number]\n\n@customElement('solid-ui-button')\nexport default class Button extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor variant: ButtonVariant = 'primary'\n\n  @property({ type: String, reflect: true })\n  accessor type = 'button'\n\n  @property({ type: Boolean })\n  accessor disabled: boolean | undefined = undefined\n\n  @property({ type: Boolean })\n  accessor loading = false\n\n  render () {\n    const disabled = this.disabled ?? this.loading\n\n    return html`\n        <button type=${this.type} ?disabled=${disabled} @click=${this.onClick}>\n            ${this.loading ? html`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : nothing}\n            <slot name=\"left-icon\"></slot>\n            <slot @slotchange=${this.onIconSlotChange} name=\"icon\"></slot>\n            <slot></slot>\n            <slot name=\"right-icon\"></slot>\n        </button>\n    `\n  }\n\n  private onIconSlotChange (e: Event) {\n    const slot = e.target as HTMLSlotElement\n\n    this.toggleAttribute('data-has-icon-slot', slot.assignedElements().length > 0)\n  }\n\n  private onClick () {\n    switch (this.type) {\n      case 'submit':\n        this.getInternals().form?.requestSubmit()\n        break\n      case 'reset':\n        this.getInternals().form?.reset()\n        break\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Button.esm.js","names":["customElement","WebComponent","html","nothing","property","styles","BUTTON_VARIANTS","_classDecs","_Button","_Button2","_A","WeakMap","_B","_C","_D","_ref","_variantDecs","type","String","reflect","_typeDecs","_disabledDecs","Boolean","_loadingDecs","_Button3","Button","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_variant","_init_type","_init_disabled","undefined","_init_loading","_classPrivateFieldGet","variant","v","_classPrivateFieldSet","disabled","loading","render","onClick","onIconSlotChange","e","slot","target","toggleAttribute","assignedElements","length","getInternals","form","requestSubmit","reset","c","_initClass","_applyDecs","_Class","_identity","_defineProperty","default"],"sources":["../../../src/components/button/Button.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport '~icons/svg-spinners/180-ring'\n\nimport styles from './Button.styles.css'\n\nexport const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'ghost'] as const\nexport type ButtonVariant = typeof BUTTON_VARIANTS[number]\n\n@customElement('solid-ui-button')\nexport default class Button extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor variant: ButtonVariant = 'primary'\n\n  @property({ type: String, reflect: true })\n  accessor type = 'button'\n\n  @property({ type: Boolean })\n  accessor disabled: boolean | undefined = undefined\n\n  @property({ type: Boolean })\n  accessor loading = false\n\n  render () {\n    const disabled = this.disabled ?? this.loading\n\n    return html`\n        <button type=${this.type} ?disabled=${disabled} @click=${this.onClick}>\n            ${this.loading ? html`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : nothing}\n            <slot name=\"left-icon\"></slot>\n            <slot @slotchange=${this.onIconSlotChange} name=\"icon\"></slot>\n            <slot></slot>\n            <slot name=\"right-icon\"></slot>\n        </button>\n    `\n  }\n\n  private onIconSlotChange (e: Event) {\n    const slot = e.target as HTMLSlotElement\n\n    this.toggleAttribute('data-has-icon-slot', slot.assignedElements().length > 0)\n  }\n\n  private onClick () {\n    switch (this.type) {\n      case 'submit':\n        this.getInternals().form?.requestSubmit()\n        break\n      case 'reset':\n        this.getInternals().form?.reset()\n        break\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/button/Button.stories.d.ts

@@ -1,9 +1,20 @@
+declare const args: {
+    readonly text: "Save Changes";
+    readonly title: "";
+    readonly variant: "primary";
+    readonly icon: "None";
+    readonly leftIcon: "None";
+    readonly rightIcon: "None";
+    readonly disabled: false;
+    readonly loading: false;
+};
 declare const meta: {
-    readonly title: "Button";
+    readonly title: "Basic UI/Button";
     readonly args: {
         readonly text: "Save Changes";
         readonly title: "";
         readonly variant: "primary";
+        readonly icon: "None";
         readonly leftIcon: "None";
         readonly rightIcon: "None";
         readonly disabled: false;
@@ -39,107 +50,16 @@ declare const meta: {
             readonly control: "boolean";
         };
     };
+    readonly render: ({ icon, leftIcon, rightIcon, variant, disabled, loading, title, text }: typeof args) => import('lit-html').TemplateResult<1>;
 };
-export default meta;
-export declare const Primary: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly variant: {
-            readonly control: "select";
-            readonly options: readonly ["primary", "secondary", "tertiary", "outline", "ghost"];
-        };
-        readonly title: {
-            readonly control: "text";
-        };
-        readonly icon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly leftIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly rightIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly text: {
-            readonly control: "text";
-        };
-        readonly disabled: {
-            readonly control: "boolean";
-        };
-        readonly loading: {
-            readonly control: "boolean";
-        };
-    }>) => HTMLDivElement;
-};
+export declare const Primary: {};
 export declare const Secondary: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly variant: {
-            readonly control: "select";
-            readonly options: readonly ["primary", "secondary", "tertiary", "outline", "ghost"];
-        };
-        readonly title: {
-            readonly control: "text";
-        };
-        readonly icon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly leftIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly rightIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly text: {
-            readonly control: "text";
-        };
-        readonly disabled: {
-            readonly control: "boolean";
-        };
-        readonly loading: {
-            readonly control: "boolean";
-        };
-    }>) => HTMLDivElement;
     args: {
         text: string;
         variant: string;
     };
 };
 export declare const Tertiary: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly variant: {
-            readonly control: "select";
-            readonly options: readonly ["primary", "secondary", "tertiary", "outline", "ghost"];
-        };
-        readonly title: {
-            readonly control: "text";
-        };
-        readonly icon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly leftIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly rightIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly text: {
-            readonly control: "text";
-        };
-        readonly disabled: {
-            readonly control: "boolean";
-        };
-        readonly loading: {
-            readonly control: "boolean";
-        };
-    }>) => HTMLDivElement;
     args: {
         text: string;
         variant: string;
@@ -147,36 +67,6 @@ export declare const Tertiary: {
     };
 };
 export declare const Outline: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly variant: {
-            readonly control: "select";
-            readonly options: readonly ["primary", "secondary", "tertiary", "outline", "ghost"];
-        };
-        readonly title: {
-            readonly control: "text";
-        };
-        readonly icon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly leftIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly rightIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly text: {
-            readonly control: "text";
-        };
-        readonly disabled: {
-            readonly control: "boolean";
-        };
-        readonly loading: {
-            readonly control: "boolean";
-        };
-    }>) => HTMLDivElement;
     args: {
         text: string;
         variant: string;
@@ -184,36 +74,6 @@ export declare const Outline: {
     };
 };
 export declare const Ghost: {
-    render: (args: import('../../storybook').GetStoryArgs<{
-        readonly variant: {
-            readonly control: "select";
-            readonly options: readonly ["primary", "secondary", "tertiary", "outline", "ghost"];
-        };
-        readonly title: {
-            readonly control: "text";
-        };
-        readonly icon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly leftIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly rightIcon: {
-            type: string;
-            options: ("Check" | "Plus" | "Log In" | "Help" | "None")[];
-        };
-        readonly text: {
-            readonly control: "text";
-        };
-        readonly disabled: {
-            readonly control: "boolean";
-        };
-        readonly loading: {
-            readonly control: "boolean";
-        };
-    }>) => HTMLDivElement;
     args: {
         text: string;
         variant: string;
@@ -221,4 +81,5 @@ export declare const Ghost: {
         title: string;
     };
 };
+export default meta;
 //# sourceMappingURL=Button.stories.d.ts.map

package/dist/components/button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,2BAA2B,CAAA;AAYlC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBA,CAAA;AAiBV,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAA;AAEjC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMrB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOnB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQjB,CAAA"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,2BAA2B,CAAA;AAYlC,QAAA,MAAM,IAAI;;;;;;;;;CASA,CAAA;AAEV,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8FAgBwE,OAAO,IAAI;CAcnF,CAAA;AAEV,eAAO,MAAM,OAAO,IAAK,CAAA;AAEzB,eAAO,MAAM,SAAS;;;;;CAKrB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;CAOjB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/button/Button.styles.cjs.js

@@ -1,2 +1,2 @@
-var e=require("lit").css`:host{--text-color:var(--solid-ui-color-white);--border-color:var(--solid-ui-color-primary);--background-color:var(--solid-ui-color-primary);--hover-text-color:var(--text-color);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:var(--solid-ui-color-tertiary);display:inline-flex}:host button{font-size:var(--solid-ui-font-size-md);color:var(--text-color);background:var(--background-color);border:1px solid var(--border-color);border-radius:5px;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px 12px;font-weight:600;display:flex;position:relative}:host button:disabled{opacity:.5;cursor:not-allowed}:host button:hover:not(:disabled){color:var(--hover-text-color);background:var(--hover-background-color);border-color:var(--hover-border-color)}:host button icon-svg-spinners-180-ring,:host button ::slotted([slot=left-icon]),:host button ::slotted([slot=right-icon]){width:var(--solid-ui-font-size-md);height:var(--solid-ui-font-size-md)}:host button:after{content:\"\";width:var(--solid-ui-clickable-area);height:var(--solid-ui-clickable-area);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host([data-has-icon-slot]) button{padding:4px}:host([data-has-icon-slot]) button ::slotted([slot=icon]){width:var(--solid-ui-font-size-2xl);height:var(--solid-ui-font-size-2xl)}:host([variant=secondary]) button{--text-color:var(--solid-ui-color-gray-800);--border-color:var(--solid-ui-color-slate-400);--background-color:var(--solid-ui-color-white);--hover-text-color:var(--solid-ui-color-white);--hover-background-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary)}:host([variant=tertiary]) button{--text-color:var(--solid-ui-color-primary);--border-color:transparent;--background-color:transparent;--hover-text-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:transparent;border-width:0 0 1px;border-radius:0;padding:0}:host([variant=outline]) button{--text-color:currentColor;--border-color:currentColor;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:currentColor;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}:host([variant=ghost]) button{--text-color:currentColor;--border-color:transparent;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:transparent;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}`;exports.default=e;
+var e=require("lit").css`:host{--text-color:var(--solid-ui-color-white);--border-color:var(--solid-ui-color-primary);--background-color:var(--solid-ui-color-primary);--hover-text-color:var(--text-color);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:var(--solid-ui-color-tertiary);display:inline-flex}:host button{font-size:var(--solid-ui-font-size-md);color:var(--text-color);background:var(--background-color);border:1px solid var(--border-color);border-radius:5px;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px 12px;font-weight:600;display:flex;position:relative}:host button:disabled{opacity:.5;cursor:not-allowed}:host button:hover:not(:disabled){color:var(--hover-text-color);background:var(--hover-background-color);border-color:var(--hover-border-color)}:host button icon-svg-spinners-180-ring,:host button ::slotted([slot=left-icon]),:host button ::slotted([slot=right-icon]){width:var(--solid-ui-font-size-md);height:var(--solid-ui-font-size-md)}:host button:after{content:\"\";width:var(--solid-ui-clickable-area);height:var(--solid-ui-clickable-area);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host([data-has-icon-slot]) button{padding:4px}:host([data-has-icon-slot]) button ::slotted([slot=icon]){width:var(--solid-ui-font-size-2xl);height:var(--solid-ui-font-size-2xl)}:host([variant=secondary]) button{--text-color:var(--solid-ui-color-gray-800);--border-color:var(--solid-ui-color-slate-400);--background-color:var(--solid-ui-color-white);--hover-text-color:var(--solid-ui-color-white);--hover-background-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary)}:host([variant=tertiary]) button{--text-color:var(--solid-ui-color-primary);--border-color:transparent;--background-color:transparent;--hover-text-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:transparent;border-width:0 0 1px;border-radius:0;padding:0}:host([variant=outline]) button{--text-color:currentColor;--border-color:currentColor;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:currentColor;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}:host([variant=ghost]) button{--text-color:currentColor;--border-color:transparent;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:transparent;--hover-background-color:var(--solid-ui-color-primary-hover)}`;exports.default=e;
 //# sourceMappingURL=Button.styles.cjs.js.map

package/dist/components/button/Button.styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs.js","names":[],"sources":["../../../src/components/button/Button.styles.css"],"sourcesContent":[":host {\n    --text-color: var(--solid-ui-color-white);\n    --border-color: var(--solid-ui-color-primary);\n    --background-color: var(--solid-ui-color-primary);\n    --hover-text-color: var(--text-color);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n\n    display: inline-flex;\n\n    button {\n        position: relative;\n        padding: 7px 12px;\n        border-radius: 5px;\n        font-size: var(--solid-ui-font-size-md);\n        font-weight: 600;\n        color: var(--text-color);\n        background: var(--background-color);\n        border: 1px solid var(--border-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        flex: 1;\n\n        &:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        &:hover:not(:disabled) {\n            color: var(--hover-text-color);\n            background: var(--hover-background-color);\n            border-color: var(--hover-border-color);\n        }\n\n        icon-svg-spinners-180-ring, ::slotted([slot=\"left-icon\"]), ::slotted([slot=\"right-icon\"]) {\n            width: var(--solid-ui-font-size-md);\n            height: var(--solid-ui-font-size-md);\n        }\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: var(--solid-ui-clickable-area);\n        height: var(--solid-ui-clickable-area);\n      }\n    }\n}\n\n:host([data-has-icon-slot]) button {\n    padding: 4px;\n\n    ::slotted([slot=\"icon\"]) {\n        width: var(--solid-ui-font-size-2xl);\n        height: var(--solid-ui-font-size-2xl);\n    }\n}\n\n:host([variant='secondary']) button {\n    --text-color: var(--solid-ui-color-gray-800);\n    --border-color: var(--solid-ui-color-slate-400);\n    --background-color: var(--solid-ui-color-white);\n    --hover-text-color: var(--solid-ui-color-white);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n}\n\n:host([variant='tertiary']) button {\n    --text-color: var(--solid-ui-color-primary);\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: transparent;\n\n    padding: 0;\n    border-radius: 0;\n    border-width: 0;\n    border-bottom-width: 1px;\n}\n\n:host([variant='outline']) button {\n    --text-color: currentColor;\n    --border-color: currentColor;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: currentColor;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n\n:host([variant='ghost']) button {\n    --text-color: currentColor;\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: transparent;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.styles.cjs.js","names":[],"sources":["../../../src/components/button/Button.styles.css"],"sourcesContent":[":host {\n    --text-color: var(--solid-ui-color-white);\n    --border-color: var(--solid-ui-color-primary);\n    --background-color: var(--solid-ui-color-primary);\n    --hover-text-color: var(--text-color);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n\n    display: inline-flex;\n\n    button {\n        position: relative;\n        padding: 7px 12px;\n        border-radius: 5px;\n        font-size: var(--solid-ui-font-size-md);\n        font-weight: 600;\n        color: var(--text-color);\n        background: var(--background-color);\n        border: 1px solid var(--border-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        flex: 1;\n\n        &:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        &:hover:not(:disabled) {\n            color: var(--hover-text-color);\n            background: var(--hover-background-color);\n            border-color: var(--hover-border-color);\n        }\n\n        icon-svg-spinners-180-ring, ::slotted([slot=\"left-icon\"]), ::slotted([slot=\"right-icon\"]) {\n            width: var(--solid-ui-font-size-md);\n            height: var(--solid-ui-font-size-md);\n        }\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: var(--solid-ui-clickable-area);\n        height: var(--solid-ui-clickable-area);\n      }\n    }\n}\n\n:host([data-has-icon-slot]) button {\n    padding: 4px;\n\n    ::slotted([slot=\"icon\"]) {\n        width: var(--solid-ui-font-size-2xl);\n        height: var(--solid-ui-font-size-2xl);\n    }\n}\n\n:host([variant='secondary']) button {\n    --text-color: var(--solid-ui-color-gray-800);\n    --border-color: var(--solid-ui-color-slate-400);\n    --background-color: var(--solid-ui-color-white);\n    --hover-text-color: var(--solid-ui-color-white);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n}\n\n:host([variant='tertiary']) button {\n    --text-color: var(--solid-ui-color-primary);\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: transparent;\n\n    padding: 0;\n    border-radius: 0;\n    border-width: 0;\n    border-bottom-width: 1px;\n}\n\n:host([variant='outline']) button {\n    --text-color: currentColor;\n    --border-color: currentColor;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: currentColor;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n\n:host([variant='ghost']) button {\n    --text-color: currentColor;\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: transparent;\n    --hover-background-color: var(--solid-ui-color-primary-hover);\n}\n"],"mappings":""}

package/dist/components/button/Button.styles.esm.js

@@ -1,6 +1,6 @@
 import { css as e } from "lit";
 //#region src/components/button/Button.styles.css
-var t = e`:host{--text-color:var(--solid-ui-color-white);--border-color:var(--solid-ui-color-primary);--background-color:var(--solid-ui-color-primary);--hover-text-color:var(--text-color);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:var(--solid-ui-color-tertiary);display:inline-flex}:host button{font-size:var(--solid-ui-font-size-md);color:var(--text-color);background:var(--background-color);border:1px solid var(--border-color);border-radius:5px;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px 12px;font-weight:600;display:flex;position:relative}:host button:disabled{opacity:.5;cursor:not-allowed}:host button:hover:not(:disabled){color:var(--hover-text-color);background:var(--hover-background-color);border-color:var(--hover-border-color)}:host button icon-svg-spinners-180-ring,:host button ::slotted([slot=left-icon]),:host button ::slotted([slot=right-icon]){width:var(--solid-ui-font-size-md);height:var(--solid-ui-font-size-md)}:host button:after{content:\"\";width:var(--solid-ui-clickable-area);height:var(--solid-ui-clickable-area);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host([data-has-icon-slot]) button{padding:4px}:host([data-has-icon-slot]) button ::slotted([slot=icon]){width:var(--solid-ui-font-size-2xl);height:var(--solid-ui-font-size-2xl)}:host([variant=secondary]) button{--text-color:var(--solid-ui-color-gray-800);--border-color:var(--solid-ui-color-slate-400);--background-color:var(--solid-ui-color-white);--hover-text-color:var(--solid-ui-color-white);--hover-background-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary)}:host([variant=tertiary]) button{--text-color:var(--solid-ui-color-primary);--border-color:transparent;--background-color:transparent;--hover-text-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:transparent;border-width:0 0 1px;border-radius:0;padding:0}:host([variant=outline]) button{--text-color:currentColor;--border-color:currentColor;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:currentColor;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}:host([variant=ghost]) button{--text-color:currentColor;--border-color:transparent;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:transparent;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}`;
+var t = e`:host{--text-color:var(--solid-ui-color-white);--border-color:var(--solid-ui-color-primary);--background-color:var(--solid-ui-color-primary);--hover-text-color:var(--text-color);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:var(--solid-ui-color-tertiary);display:inline-flex}:host button{font-size:var(--solid-ui-font-size-md);color:var(--text-color);background:var(--background-color);border:1px solid var(--border-color);border-radius:5px;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px 12px;font-weight:600;display:flex;position:relative}:host button:disabled{opacity:.5;cursor:not-allowed}:host button:hover:not(:disabled){color:var(--hover-text-color);background:var(--hover-background-color);border-color:var(--hover-border-color)}:host button icon-svg-spinners-180-ring,:host button ::slotted([slot=left-icon]),:host button ::slotted([slot=right-icon]){width:var(--solid-ui-font-size-md);height:var(--solid-ui-font-size-md)}:host button:after{content:\"\";width:var(--solid-ui-clickable-area);height:var(--solid-ui-clickable-area);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host([data-has-icon-slot]) button{padding:4px}:host([data-has-icon-slot]) button ::slotted([slot=icon]){width:var(--solid-ui-font-size-2xl);height:var(--solid-ui-font-size-2xl)}:host([variant=secondary]) button{--text-color:var(--solid-ui-color-gray-800);--border-color:var(--solid-ui-color-slate-400);--background-color:var(--solid-ui-color-white);--hover-text-color:var(--solid-ui-color-white);--hover-background-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary)}:host([variant=tertiary]) button{--text-color:var(--solid-ui-color-primary);--border-color:transparent;--background-color:transparent;--hover-text-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:transparent;border-width:0 0 1px;border-radius:0;padding:0}:host([variant=outline]) button{--text-color:currentColor;--border-color:currentColor;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:currentColor;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}:host([variant=ghost]) button{--text-color:currentColor;--border-color:transparent;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:transparent;--hover-background-color:var(--solid-ui-color-primary-hover)}`;
 //#endregion
 export { t as default };
 

package/dist/components/button/Button.styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.esm.js","names":[],"sources":["../../../src/components/button/Button.styles.css"],"sourcesContent":[":host {\n    --text-color: var(--solid-ui-color-white);\n    --border-color: var(--solid-ui-color-primary);\n    --background-color: var(--solid-ui-color-primary);\n    --hover-text-color: var(--text-color);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n\n    display: inline-flex;\n\n    button {\n        position: relative;\n        padding: 7px 12px;\n        border-radius: 5px;\n        font-size: var(--solid-ui-font-size-md);\n        font-weight: 600;\n        color: var(--text-color);\n        background: var(--background-color);\n        border: 1px solid var(--border-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        flex: 1;\n\n        &:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        &:hover:not(:disabled) {\n            color: var(--hover-text-color);\n            background: var(--hover-background-color);\n            border-color: var(--hover-border-color);\n        }\n\n        icon-svg-spinners-180-ring, ::slotted([slot=\"left-icon\"]), ::slotted([slot=\"right-icon\"]) {\n            width: var(--solid-ui-font-size-md);\n            height: var(--solid-ui-font-size-md);\n        }\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: var(--solid-ui-clickable-area);\n        height: var(--solid-ui-clickable-area);\n      }\n    }\n}\n\n:host([data-has-icon-slot]) button {\n    padding: 4px;\n\n    ::slotted([slot=\"icon\"]) {\n        width: var(--solid-ui-font-size-2xl);\n        height: var(--solid-ui-font-size-2xl);\n    }\n}\n\n:host([variant='secondary']) button {\n    --text-color: var(--solid-ui-color-gray-800);\n    --border-color: var(--solid-ui-color-slate-400);\n    --background-color: var(--solid-ui-color-white);\n    --hover-text-color: var(--solid-ui-color-white);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n}\n\n:host([variant='tertiary']) button {\n    --text-color: var(--solid-ui-color-primary);\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: transparent;\n\n    padding: 0;\n    border-radius: 0;\n    border-width: 0;\n    border-bottom-width: 1px;\n}\n\n:host([variant='outline']) button {\n    --text-color: currentColor;\n    --border-color: currentColor;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: currentColor;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n\n:host([variant='ghost']) button {\n    --text-color: currentColor;\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: transparent;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.styles.esm.js","names":[],"sources":["../../../src/components/button/Button.styles.css"],"sourcesContent":[":host {\n    --text-color: var(--solid-ui-color-white);\n    --border-color: var(--solid-ui-color-primary);\n    --background-color: var(--solid-ui-color-primary);\n    --hover-text-color: var(--text-color);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n\n    display: inline-flex;\n\n    button {\n        position: relative;\n        padding: 7px 12px;\n        border-radius: 5px;\n        font-size: var(--solid-ui-font-size-md);\n        font-weight: 600;\n        color: var(--text-color);\n        background: var(--background-color);\n        border: 1px solid var(--border-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        flex: 1;\n\n        &:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        &:hover:not(:disabled) {\n            color: var(--hover-text-color);\n            background: var(--hover-background-color);\n            border-color: var(--hover-border-color);\n        }\n\n        icon-svg-spinners-180-ring, ::slotted([slot=\"left-icon\"]), ::slotted([slot=\"right-icon\"]) {\n            width: var(--solid-ui-font-size-md);\n            height: var(--solid-ui-font-size-md);\n        }\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: var(--solid-ui-clickable-area);\n        height: var(--solid-ui-clickable-area);\n      }\n    }\n}\n\n:host([data-has-icon-slot]) button {\n    padding: 4px;\n\n    ::slotted([slot=\"icon\"]) {\n        width: var(--solid-ui-font-size-2xl);\n        height: var(--solid-ui-font-size-2xl);\n    }\n}\n\n:host([variant='secondary']) button {\n    --text-color: var(--solid-ui-color-gray-800);\n    --border-color: var(--solid-ui-color-slate-400);\n    --background-color: var(--solid-ui-color-white);\n    --hover-text-color: var(--solid-ui-color-white);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n}\n\n:host([variant='tertiary']) button {\n    --text-color: var(--solid-ui-color-primary);\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: transparent;\n\n    padding: 0;\n    border-radius: 0;\n    border-width: 0;\n    border-bottom-width: 1px;\n}\n\n:host([variant='outline']) button {\n    --text-color: currentColor;\n    --border-color: currentColor;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: currentColor;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n\n:host([variant='ghost']) button {\n    --text-color: currentColor;\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: transparent;\n    --hover-background-color: var(--solid-ui-color-primary-hover);\n}\n"],"mappings":""}

package/dist/components/button.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../chunks/button-CBQEwOtX.js";
+import { n as e, r as t, t as n } from "../chunks/button-CnmrOsEf.js";
 export { e as BUTTON_VARIANTS, t as Button, n as default };

package/dist/components/combobox/Combobox.cjs.js

@@ -1,5 +1,5 @@
-const e=require("../../lib/components/decorators.cjs.js"),t=require("../../lib/components/web-component/WebComponent.cjs.js"),n=require("../../lib/components/traits/InputTrait.cjs.js");require("../../lib/components/index.cjs.js"),require("../../_virtual/~icons/lucide/chevron-down.cjs.js");const r=require("./Combobox.styles.cjs.js");let i=require("lit"),a=require("lit/decorators.js");require("@awesome.me/webawesome/dist/components/popup/popup.js");var o,s,c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z;function B(e,t,n){V(e,t),t.set(e,n)}function V(e,t){if(t.has(e))throw TypeError(`Cannot initialize the same private elements twice on an object`)}function H(e,t,n){return e.set(W(e,t),n),n}function U(e,t){return e.get(W(e,t))}function W(e,t,n){if(typeof e==`function`?e===t:e.has(t))return arguments.length<3?t:n;throw TypeError(`Private element is not present on this object`)}function G(e,t,n){return(t=q(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function K(e,t,n,r,i,a){function o(e,t,n){return function(r,i){return n&&n(r),e[t].call(r,i)}}function s(e,t){for(var n=0;n<e.length;n++)e[n].call(t);return t}function c(e,t,n,r){if(typeof e!=`function`&&(r||e!==void 0))throw TypeError(t+` must `+(n||`be`)+` a function`+(r?``:` or undefined`));return e}function l(e,t,n,r,i,a,s,l,u,d,f,p,m){function h(e){if(!m(e))throw TypeError(`Attempted to access private element on non-instance`)}var g,_=t[0],v=t[3],y=!l;if(!y){n||Array.isArray(_)||(_=[_]);var b={},x=[],S=i===3?`get`:i===4||p?`set`:`value`;d?(f||p?b={get:Y(function(){return v(this)},r,`get`),set:function(e){t[4](this,e)}}:b[S]=v,f||Y(b[S],r,i===2?``:S)):f||(b=Object.getOwnPropertyDescriptor(e,r))}for(var C=e,w=_.length-1;w>=0;w-=n?2:1){var T=_[w],E=n?_[w-1]:void 0,D={},O={kind:[`field`,`accessor`,`method`,`getter`,`setter`,`class`][i],name:r,metadata:a,addInitializer:function(e,t){if(e.v)throw Error(`attempted to call addInitializer after decoration was finished`);c(t,`An initializer`,`be`,!0),s.push(t)}.bind(null,D)};try{if(y)(g=c(T.call(E,C,O),`class decorators`,`return`))&&(C=g);else{var k,A;O.static=u,O.private=d,d?i===2?k=function(e){return h(e),b.value}:(i<4&&(k=o(b,`get`,h)),i!==3&&(A=o(b,`set`,h))):(k=function(e){return e[r]},(i<2||i===4)&&(A=function(e,t){e[r]=t}));var j=O.access={has:d?m.bind():function(e){return r in e}};if(k&&(j.get=k),A&&(j.set=A),C=T.call(E,p?{get:b.get,set:b.set}:b[S],O),p){if(typeof C==`object`&&C)(g=c(C.get,`accessor.get`))&&(b.get=g),(g=c(C.set,`accessor.set`))&&(b.set=g),(g=c(C.init,`accessor.init`))&&x.push(g);else if(C!==void 0)throw TypeError(`accessor decorators must return an object with get, set, or init properties or void 0`)}else c(C,(f?`field`:`method`)+` decorators`,`return`)&&(f?x.push(C):b[S]=C)}}finally{D.v=!0}}return(f||p)&&l.push(function(e,t){for(var n=x.length-1;n>=0;n--)t=x[n].call(e,t);return t}),f||y||(d?p?l.push(o(b,`get`),o(b,`set`)):l.push(i===2?b[S]:o.call.bind(b[S])):Object.defineProperty(e,r,b)),C}function u(e,t){return Object.defineProperty(e,Symbol.metadata||Symbol.for(`Symbol.metadata`),{configurable:!0,enumerable:!0,value:t})}if(arguments.length>=6)var d=a[Symbol.metadata||Symbol.for(`Symbol.metadata`)];var f=Object.create(d??null),p=function(e,t,n,r){var i,a,o=[],c=function(t){return X(t)===e},u=new Map;function d(e){e&&o.push(s.bind(null,e))}for(var f=0;f<t.length;f++){var p=t[f];if(Array.isArray(p)){var m=p[1],h=p[2],g=p.length>3,_=16&m,v=!!(8&m),y=(m&=7)==0,b=h+`/`+v;if(!y&&!g){var x=u.get(b);if(!0===x||x===3&&m!==4||x===4&&m!==3)throw Error(`Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: `+h);u.set(b,!(m>2)||m)}l(v?e:e.prototype,p,_,g?`#`+h:q(h),m,r,v?a||=[]:i||=[],o,v,g,y,m===1,v&&g?c:n)}}return d(i),d(a),o}(e,t,i,f);return n.length||u(e,f),{e:p,get c(){var t=[];return n.length&&[u(l(e,[n],r,e.name,5,f,t),f),s.bind(null,t,e)]}}}function q(e){var t=J(e,`string`);return typeof t==`symbol`?t:t+``}function J(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function Y(e,t,n){typeof t==`symbol`&&(t=(t=t.description)?`[`+t+`]`:``);try{Object.defineProperty(e,"name",{configurable:!0,value:n?n+` `+t:t})}catch{}return e}function X(e){if(Object(e)!==e)throw TypeError(`right-hand side of 'in' should be an object, got `+(e===null?`null`:typeof e));return e}function Z(e){return e}y=[e.customElement(`solid-ui-combobox`)];var Q;new(R=(c=new WeakMap,l=new WeakMap,u=new WeakMap,d=new WeakMap,f=new WeakMap,p=new WeakMap,m=new WeakMap,h=new WeakMap,g=new WeakMap,z=(b=(0,a.property)({type:String,reflect:!0}),S=(0,a.property)({type:String,reflect:!0}),w=(0,a.property)({type:String}),E=(0,a.property)({type:String,reflect:!0}),O=(0,a.property)({type:Boolean,reflect:!0}),A=(0,a.query)(`input`),M=(0,a.state)(),P=(0,a.state)(),I=(0,a.state)(),`label`),s=class extends t.default{get[z](){return U(c,this)}set label(e){H(c,this,e)}get name(){return U(l,this)}set name(e){H(l,this,e)}get value(){return U(u,this)}set value(e){H(u,this,e)}get placeholder(){return U(d,this)}set placeholder(e){H(d,this,e)}get required(){return U(f,this)}set required(e){H(f,this,e)}get inputElement(){return U(p,this)}set inputElement(e){H(p,this,e)}get filter(){return U(m,this)}set filter(e){H(m,this,e)}get open(){return U(h,this)}set open(e){H(h,this,e)}get activeIndex(){return U(g,this)}set activeIndex(e){H(g,this,e)}constructor(){super(),B(this,c,(_(this),x(this,``))),B(this,l,C(this,``)),B(this,u,T(this,``)),B(this,d,D(this,``)),B(this,f,k(this,!1)),B(this,p,j(this,null)),B(this,m,N(this,``)),B(this,h,F(this,!1)),B(this,g,L(this,-1)),G(this,`inputTrait`,void 0),G(this,`openListenersAttached`,!1),G(this,`listboxId`,void 0),G(this,`handleDocumentFocusIn`,e=>{e.composedPath().includes(this)||this.hide()}),G(this,`handleDocumentMouseDown`,e=>{e.composedPath().includes(this)||this.hide()}),this.inputTrait=this.addTrait(new n.default(this,{getInputElement:()=>this.inputElement,getInternals:()=>this.getInternals(),onValueChanged:e=>{this.filter=e.toLowerCase();let t=this.getFilteredOptions();if(t.length===0){this.hide();return}this.open&&(this.activeIndex=this.getInitialActiveIndex(t))}})),this.listboxId=`listbox-${this.inputTrait.inputId}`}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners()}render(){let e=this.getFilteredOptions(),t=(this.open&&this.activeIndex>=0?e[this.activeIndex]:void 0)===void 0?void 0:this.getOptionId(this.activeIndex),n=this.placeholder||`Combobox`;return i.html`
-      ${this.inputTrait.renderLabel()}
+const e=require("../../lib/components/decorators.cjs.js"),t=require("../../lib/components/form-control-component/FormControlComponent.cjs.js");require("../../lib/components/index.cjs.js"),require("../../_virtual/~icons/lucide/chevron-down.cjs.js");const n=require("../../lib/timing.cjs.js");require("../../_virtual/~icons/svg-spinners/3-dots-fade.cjs.js");const r=require("./Combobox.styles.cjs.js");let i=require("lit"),a=require("lit/decorators.js"),o=require("@lit/task");require("@awesome.me/webawesome/dist/components/popup/popup.js");var s,c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,ee,te,ne,re,ie,ae,N,P,F,I,L,R,z,B,V,H,U,W,G,K;function q(e,t,n){oe(e,t),t.set(e,n)}function oe(e,t){if(t.has(e))throw TypeError(`Cannot initialize the same private elements twice on an object`)}function J(e,t,n){return e.set(se(e,t),n),n}function Y(e,t){return e.get(se(e,t))}function se(e,t,n){if(typeof e==`function`?e===t:e.has(t))return arguments.length<3?t:n;throw TypeError(`Private element is not present on this object`)}function X(e,t,n){return(t=Z(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function ce(e,t,n,r,i,a){function o(e,t,n){return function(r,i){return n&&n(r),e[t].call(r,i)}}function s(e,t){for(var n=0;n<e.length;n++)e[n].call(t);return t}function c(e,t,n,r){if(typeof e!=`function`&&(r||e!==void 0))throw TypeError(t+` must `+(n||`be`)+` a function`+(r?``:` or undefined`));return e}function l(e,t,n,r,i,a,s,l,u,d,f,p,m){function h(e){if(!m(e))throw TypeError(`Attempted to access private element on non-instance`)}var g,_=t[0],v=t[3],y=!l;if(!y){n||Array.isArray(_)||(_=[_]);var b={},x=[],S=i===3?`get`:i===4||p?`set`:`value`;d?(f||p?b={get:ue(function(){return v(this)},r,`get`),set:function(e){t[4](this,e)}}:b[S]=v,f||ue(b[S],r,i===2?``:S)):f||(b=Object.getOwnPropertyDescriptor(e,r))}for(var C=e,w=_.length-1;w>=0;w-=n?2:1){var T=_[w],E=n?_[w-1]:void 0,D={},O={kind:[`field`,`accessor`,`method`,`getter`,`setter`,`class`][i],name:r,metadata:a,addInitializer:function(e,t){if(e.v)throw Error(`attempted to call addInitializer after decoration was finished`);c(t,`An initializer`,`be`,!0),s.push(t)}.bind(null,D)};try{if(y)(g=c(T.call(E,C,O),`class decorators`,`return`))&&(C=g);else{var k,A;O.static=u,O.private=d,d?i===2?k=function(e){return h(e),b.value}:(i<4&&(k=o(b,`get`,h)),i!==3&&(A=o(b,`set`,h))):(k=function(e){return e[r]},(i<2||i===4)&&(A=function(e,t){e[r]=t}));var j=O.access={has:d?m.bind():function(e){return r in e}};if(k&&(j.get=k),A&&(j.set=A),C=T.call(E,p?{get:b.get,set:b.set}:b[S],O),p){if(typeof C==`object`&&C)(g=c(C.get,`accessor.get`))&&(b.get=g),(g=c(C.set,`accessor.set`))&&(b.set=g),(g=c(C.init,`accessor.init`))&&x.push(g);else if(C!==void 0)throw TypeError(`accessor decorators must return an object with get, set, or init properties or void 0`)}else c(C,(f?`field`:`method`)+` decorators`,`return`)&&(f?x.push(C):b[S]=C)}}finally{D.v=!0}}return(f||p)&&l.push(function(e,t){for(var n=x.length-1;n>=0;n--)t=x[n].call(e,t);return t}),f||y||(d?p?l.push(o(b,`get`),o(b,`set`)):l.push(i===2?b[S]:o.call.bind(b[S])):Object.defineProperty(e,r,b)),C}function u(e,t){return Object.defineProperty(e,Symbol.metadata||Symbol.for(`Symbol.metadata`),{configurable:!0,enumerable:!0,value:t})}if(arguments.length>=6)var d=a[Symbol.metadata||Symbol.for(`Symbol.metadata`)];var f=Object.create(d??null),p=function(e,t,n,r){var i,a,o=[],c=function(t){return de(t)===e},u=new Map;function d(e){e&&o.push(s.bind(null,e))}for(var f=0;f<t.length;f++){var p=t[f];if(Array.isArray(p)){var m=p[1],h=p[2],g=p.length>3,_=16&m,v=!!(8&m),y=(m&=7)==0,b=h+`/`+v;if(!y&&!g){var x=u.get(b);if(!0===x||x===3&&m!==4||x===4&&m!==3)throw Error(`Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: `+h);u.set(b,!(m>2)||m)}l(v?e:e.prototype,p,_,g?`#`+h:Z(h),m,r,v?a||=[]:i||=[],o,v,g,y,m===1,v&&g?c:n)}}return d(i),d(a),o}(e,t,i,f);return n.length||u(e,f),{e:p,get c(){var t=[];return n.length&&[u(l(e,[n],r,e.name,5,f,t),f),s.bind(null,t,e)]}}}function Z(e){var t=le(e,`string`);return typeof t==`symbol`?t:t+``}function le(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function ue(e,t,n){typeof t==`symbol`&&(t=(t=t.description)?`[`+t+`]`:``);try{Object.defineProperty(e,"name",{configurable:!0,value:n?n+` `+t:t})}catch{}return e}function de(e){if(Object(e)!==e)throw TypeError(`right-hand side of 'in' should be an object, got `+(e===null?`null`:typeof e));return e}function fe(e){return e}var Q=class extends Error{};function pe(e){return e}w=[e.customElement(`solid-ui-combobox`)];var $;new(G=(l=new WeakMap,u=new WeakMap,d=new WeakMap,f=new WeakMap,p=new WeakMap,m=new WeakMap,h=new WeakMap,g=new WeakMap,_=new WeakMap,v=new WeakMap,y=new WeakMap,b=new WeakMap,x=new WeakMap,K=(T=(0,a.property)({type:Boolean,reflect:!0,attribute:`select-only`}),D=(0,a.property)({type:String,attribute:`async-options-url`}),k=(0,a.property)({type:String,attribute:`async-options-results-field`}),j=(0,a.property)({type:String,attribute:`async-options-label-field`}),ee=(0,a.property)({type:String,attribute:`async-options-value-field`}),ne=(0,a.property)({type:Function}),ie=(0,a.property)({type:Array}),N=(0,a.query)(`input`),F=(0,a.property)({type:Boolean,reflect:!0}),L=(0,a.state)(),z=(0,a.state)(),V=(0,a.state)(),U=(0,a.state)(),`selectOnly`),c=class extends t.default{get[K](){return Y(l,this)}set selectOnly(e){J(l,this,e)}get asyncOptionsUrl(){return Y(u,this)}set asyncOptionsUrl(e){J(u,this,e)}get asyncOptionsResultsField(){return Y(d,this)}set asyncOptionsResultsField(e){J(d,this,e)}get asyncOptionsLabelField(){return Y(f,this)}set asyncOptionsLabelField(e){J(f,this,e)}get asyncOptionsValueField(){return Y(p,this)}set asyncOptionsValueField(e){J(p,this,e)}get asyncOptionsProvider(){return Y(m,this)}set asyncOptionsProvider(e){J(m,this,e)}get optionsFallback(){return Y(h,this)}set optionsFallback(e){J(h,this,e)}get controlElement(){return Y(g,this)}set controlElement(e){J(g,this,e)}get readonly(){return Y(_,this)}set readonly(e){J(_,this,e)}get filter(){return Y(v,this)}set filter(e){J(v,this,e)}get displayValue(){return Y(y,this)}set displayValue(e){J(y,this,e)}get open(){return Y(b,this)}set open(e){J(b,this,e)}get activeIndex(){return Y(x,this)}set activeIndex(e){J(x,this,e)}constructor(){super(),q(this,l,(S(this),E(this,!1))),q(this,u,O(this,``)),q(this,d,A(this,``)),q(this,f,M(this,``)),q(this,p,te(this,``)),q(this,m,re(this,null)),q(this,h,ae(this,null)),q(this,g,P(this,null)),q(this,_,I(this,!1)),q(this,v,R(this,``)),q(this,y,B(this,``)),q(this,b,H(this,!1)),q(this,x,W(this,-1)),X(this,`openListenersAttached`,!1),X(this,`updateDebouncedFilter`,n.debounce(300,e=>this.filter=e)),X(this,`asyncOptionsTask`,void 0),X(this,`_selectedOption`,void 0),X(this,`listboxId`,void 0),X(this,`handleDocumentFocusIn`,e=>{e.composedPath().includes(this)||this.hide()}),X(this,`handleDocumentMouseDown`,e=>{e.composedPath().includes(this)||this.hide()}),this.listboxId=`listbox-${this.controlTrait.controlId}`}get selectedOption(){return this._selectedOption}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners()}willUpdate(e){if(super.willUpdate(e),(e.has(`asyncOptionsUrl`)||e.has(`asyncOptionsProvider`))&&this.updateAsyncOptionsTask(),e.has(`value`)){let e=this.getFilteredOptions(),t=e.find(e=>e.selectable!==!1&&e.value===this.value)??this.optionsFallback?.find(e=>e.value===this.value),n=t?.selectable!==!1&&t?.label;this.updateDisplayValue(n||this.value),this.open&&(this.activeIndex=this.getInitialActiveIndex(e)),this._selectedOption&&this._selectedOption.value!==this.value&&(this._selectedOption=void 0)}}render(){let e=this.getFilteredOptions(),t=(this.open&&this.activeIndex>=0?e[this.activeIndex]:void 0)===void 0?void 0:this.getOptionId(this.activeIndex),n=this.placeholder||`Combobox`;return i.html`
+      ${this.controlTrait.renderLabel()}
       <wa-popup
         placement="bottom"
         flip
@@ -11,7 +11,7 @@ const e=require("../../lib/components/decorators.cjs.js"),t=require("../../lib/c
       >
         <div class="input-wrapper" slot="anchor" @mousedown=${this.onAnchorMouseDown}>
           <input
-            id="${this.inputTrait.inputId}"
+            id="${this.controlTrait.controlId}"
             type="text"
             name=${this.name}
             placeholder=${this.placeholder}
@@ -21,16 +21,16 @@ const e=require("../../lib/components/decorators.cjs.js"),t=require("../../lib/c
             aria-expanded=${this.open?`true`:`false`}
             aria-controls=${this.listboxId}
             aria-activedescendant=${t??i.nothing}
-            aria-labelledby=${this.label?this.inputTrait.labelId:i.nothing}
+            aria-labelledby=${this.label?this.controlTrait.labelId:i.nothing}
             aria-label=${this.label?i.nothing:n}
             aria-required=${this.required?`true`:i.nothing}
             autocomplete="off"
             spellcheck="false"
             ?required=${this.required}
-            .value=${this.value}
+            .value=${this.displayValue}
             @keydown=${this.onInputKeyDown}
             @focus=${this.onInputFocus}
-            @input=${()=>this.inputTrait.onInput()}
+            @input=${()=>this.selectOnly?this.updateDisplayValue(this.controlElement?.value??``):this.controlTrait.onInput()}
           />
           <icon-lucide-chevron-down></icon-lucide-chevron-down>
         </div>
@@ -39,21 +39,21 @@ const e=require("../../lib/components/decorators.cjs.js"),t=require("../../lib/c
           class="listbox"
           role="listbox"
           aria-orientation="vertical"
-          aria-labelledby=${this.label?this.inputTrait.labelId:i.nothing}
+          aria-labelledby=${this.label?this.controlTrait.labelId:i.nothing}
           aria-label=${this.label?i.nothing:n}
           ?hidden=${!this.open}
           @mousedown=${this.onListboxMouseDown}
         >
-          ${e.map((e,t)=>i.html`<div
-                id=${this.getOptionId(t)}
-                role="option"
-                aria-selected=${this.open&&t===this.activeIndex?`true`:`false`}
-                data-active=${t===this.activeIndex||i.nothing}
-                @mousemove=${()=>this.setActiveIndex(t)}
-              >
-                ${e.label}
-              </div>`)}
+          ${e.map((e,t)=>e.selectable===!1?i.html`<div class="non-selectable-option">${e.template??e.label}</div>`:i.html`<div
+                  id=${this.getOptionId(t)}
+                  role="option"
+                  aria-selected=${e.value===this.value?`true`:`false`}
+                  data-active=${t===this.activeIndex||i.nothing}
+                  @mousemove=${()=>this.setActiveIndex(t)}
+                >
+                  ${e.template??e.label}
+                </div>`)}
         </div>
       </wa-popup>
-    `}getFilteredOptions(){return this.getOptions().filter(e=>e.label.toLowerCase().includes(this.filter))}getOptions(){let e=this.querySelectorAll(`solid-ui-combobox-option`);return Array.from(e).map(e=>({value:e.value,label:e.textContent??``}))}getOptionId(e){return`${this.listboxId}-option-${e}`}getInitialActiveIndex(e){let t=e.findIndex(e=>e.value===this.value);return t>=0?t:e.length>0?0:-1}getNextIndex(e,t,n){return t.length===0?-1:(e+n+t.length)%t.length}setActiveIndex(e){this.activeIndex=e}show(e){if(this.open)return;let t=this.getFilteredOptions();t.length!==0&&(this.open=!0,this.activeIndex=e?.focusLast?t.length-1:this.getInitialActiveIndex(t),this.addOpenListeners(),requestAnimationFrame(()=>this.scrollActiveOptionIntoView()))}hide(){this.open&&(this.filter=``,this.open=!1,this.activeIndex=-1,this.removeOpenListeners())}selectOption(e){this.inputTrait.setValue(e),this.hide(),this.inputElement?.focus({preventScroll:!0})}scrollActiveOptionIntoView(){this.activeIndex<0||this.shadowRoot?.querySelector(`#${this.getOptionId(this.activeIndex)}`)?.scrollIntoView({block:`nearest`})}addOpenListeners(){if(this.openListenersAttached)return;document.addEventListener(`focusin`,this.handleDocumentFocusIn),document.addEventListener(`mousedown`,this.handleDocumentMouseDown);let e=this.getRootNode();e!==document&&e.addEventListener(`focusin`,this.handleDocumentFocusIn),this.openListenersAttached=!0}removeOpenListeners(){if(!this.openListenersAttached)return;document.removeEventListener(`focusin`,this.handleDocumentFocusIn),document.removeEventListener(`mousedown`,this.handleDocumentMouseDown);let e=this.getRootNode();e!==document&&e.removeEventListener(`focusin`,this.handleDocumentFocusIn),this.openListenersAttached=!1}onAnchorMouseDown(e){e.preventDefault(),this.inputElement?.focus({preventScroll:!0})}onInputFocus(){this.show()}openPopupFromKey(e){this.open||this.show({focusLast:e})}onInputKeyDown(e){let t=this.getFilteredOptions();switch(e.key){case`ArrowDown`:e.preventDefault(),this.open?(this.activeIndex=this.getNextIndex(this.activeIndex,t,1),this.scrollActiveOptionIntoView()):this.openPopupFromKey(!1);break;case`ArrowUp`:e.preventDefault(),this.open?(this.activeIndex=this.getNextIndex(this.activeIndex,t,-1),this.scrollActiveOptionIntoView()):this.openPopupFromKey(!0);break;case`Enter`:this.open&&this.activeIndex>=0&&t[this.activeIndex]?(e.preventDefault(),this.selectOption(t[this.activeIndex].value)):this.open||(e.preventDefault(),this.inputTrait.onSubmit());break;case`Escape`:this.open&&(e.preventDefault(),e.stopPropagation(),this.hide(),this.inputElement?.focus({preventScroll:!0}));break;case`Tab`:this.hide();break}}onListboxMouseDown(e){if(e.preventDefault(),!(e.target instanceof HTMLElement))return;let t=e.target.closest(`[role="option"]`);if(!t)return;let n=t.id,r=Number.parseInt(n.replace(`${this.listboxId}-option-`,``),10),i=this.getFilteredOptions()[r];i&&this.selectOption(i.value)}},{e:[x,C,T,D,k,j,N,F,L,_],c:[Q,v]}=K(s,[[b,1,`label`],[S,1,`name`],[w,1,`value`],[E,1,`placeholder`],[O,1,`required`],[A,1,`inputElement`],[M,1,`filter`],[P,1,`open`],[I,1,`activeIndex`]],y,0,void 0,t.default),s),o=class extends Z{constructor(){super(Q),G(this,`styles`,r.default),G(this,`formAssociated`,!0),v()}},G(o,R,void 0),o),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return Q}});
+    `}getFilteredOptions(){return this.asyncOptionsTask?this.asyncOptionsTask.render({initial:()=>this.optionsFallback??[],complete:e=>e,pending:()=>[{value:``,label:`Loading...`,template:i.html`<icon-svg-spinners-3-dots-fade></icon-svg-spinners-3-dots-fade>`,selectable:!1}],error:e=>{let t=!(e instanceof Q),n=Object(e).message??`Something went wrong`;return[{value:``,label:n,template:i.html`<span class="message message--${t?`error`:`info`}">${n}</span>`,selectable:!1}]}}):this.getOptionsFromDOM().filter(e=>String(e.label).toLowerCase().includes(this.filter))}getOptionsFromDOM(){let e=this.querySelectorAll(`solid-ui-combobox-option`);return Array.from(e).map(e=>({value:e.value,label:e.textContent??``}))}getOptionId(e){return`${this.listboxId}-option-${e}`}getInitialActiveIndex(e){let t=e.findIndex(e=>e.value===this.value);return t>=0?t:e.length>0?0:-1}getNextIndex(e,t,n){return t.length===0?-1:(e+n+t.length)%t.length}setActiveIndex(e){this.activeIndex=e}updateDisplayValue(e){if(this.displayValue=e?String(e):``,this.open){let e=this.displayValue.toLowerCase();this.asyncOptionsTask?this.updateDebouncedFilter(e):this.filter=e}}updateAsyncOptionsTask(){if(!this.asyncOptionsUrl&&!this.asyncOptionsProvider){this.asyncOptionsTask=void 0;return}this.asyncOptionsTask??=new o.Task(this,async([e])=>{if(this.asyncOptionsProvider){let t=await this.asyncOptionsProvider(e);if(t.length===0)throw new Q(`No results found`);return t}let t=await(await fetch(this.asyncOptionsUrl.replace(`%search%`,encodeURIComponent(e)))).json(),n=Array.from(this.asyncOptionsResultsField?t[this.asyncOptionsResultsField]:t);if(n.length===0)throw new Q(`No results found`);let r=this.asyncOptionsLabelField||`label`,i=this.asyncOptionsValueField||`value`;return n.map(e=>({label:String(Object(e)[r]),value:Object(e)[i]}))},()=>[this.filter])}show(e){if(this.open)return;let t=this.getFilteredOptions();t.length!==0&&(this.open=!0,this.activeIndex=e?.focusLast?t.length-1:this.getInitialActiveIndex(t),this.addOpenListeners(),requestAnimationFrame(()=>this.scrollActiveOptionIntoView()))}hide(){this.open&&(this.filter=``,this.open=!1,this.activeIndex=-1,this.removeOpenListeners(),this.updateDebouncedFilter.cancel())}selectOption(e){let t=this.value;this._selectedOption=e,this.hide(),this.controlTrait.setValue(e.value),this.controlElement?.focus({preventScroll:!0}),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{option:e}})),t===this.value&&this.updateDisplayValue(e.label)}scrollActiveOptionIntoView(){this.activeIndex<0||this.shadowRoot?.querySelector(`#${this.getOptionId(this.activeIndex)}`)?.scrollIntoView({block:`nearest`})}addOpenListeners(){if(this.openListenersAttached)return;document.addEventListener(`focusin`,this.handleDocumentFocusIn),document.addEventListener(`mousedown`,this.handleDocumentMouseDown);let e=this.getRootNode();e!==document&&e.addEventListener(`focusin`,this.handleDocumentFocusIn),this.openListenersAttached=!0}removeOpenListeners(){if(!this.openListenersAttached)return;document.removeEventListener(`focusin`,this.handleDocumentFocusIn),document.removeEventListener(`mousedown`,this.handleDocumentMouseDown);let e=this.getRootNode();e!==document&&e.removeEventListener(`focusin`,this.handleDocumentFocusIn),this.openListenersAttached=!1}onAnchorMouseDown(e){e.target!==this.controlElement&&(e.preventDefault(),this.controlElement?.focus({preventScroll:!0}))}onInputFocus(){this.show()}openPopupFromKey(e){this.open||this.show({focusLast:e})}onInputKeyDown(e){let t=this.getFilteredOptions();switch(e.key){case`ArrowDown`:e.preventDefault(),this.open?(this.activeIndex=this.getNextIndex(this.activeIndex,t,1),this.scrollActiveOptionIntoView()):this.openPopupFromKey(!1);break;case`ArrowUp`:e.preventDefault(),this.open?(this.activeIndex=this.getNextIndex(this.activeIndex,t,-1),this.scrollActiveOptionIntoView()):this.openPopupFromKey(!0);break;case`Enter`:this.open&&this.activeIndex>=0&&t[this.activeIndex]?(e.preventDefault(),this.selectOption(t[this.activeIndex])):this.open||(e.preventDefault(),this.controlTrait.onSubmit());break;case`Escape`:this.open&&(e.preventDefault(),e.stopPropagation(),this.hide(),this.controlElement?.focus({preventScroll:!0}));break;case`Tab`:this.hide();break;default:this.open||this.show()}}onListboxMouseDown(e){if(e.preventDefault(),!(e.target instanceof HTMLElement))return;let t=e.target.closest(`[role="option"]`);if(!t)return;let n=t.id,r=Number.parseInt(n.replace(`${this.listboxId}-option-`,``),10),i=this.getFilteredOptions()[r];i&&this.selectOption(i)}},{e:[E,O,A,M,te,re,ae,P,I,R,B,H,W,S],c:[$,C]}=ce(c,[[T,1,`selectOnly`],[D,1,`asyncOptionsUrl`],[k,1,`asyncOptionsResultsField`],[j,1,`asyncOptionsLabelField`],[ee,1,`asyncOptionsValueField`],[ne,1,`asyncOptionsProvider`],[ie,1,`optionsFallback`],[N,1,`controlElement`],[F,1,`readonly`],[L,1,`filter`],[z,1,`displayValue`],[V,1,`open`],[U,1,`activeIndex`]],w,0,void 0,t.default),c),s=class extends fe{constructor(){super($),X(this,`styles`,r.default),C()}},X(s,G,void 0),s),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return $}}),exports.defineAsyncComboboxOptionsProvider=pe;
 //# sourceMappingURL=Combobox.cjs.js.map