@solid-design-system/components 1.32.0 → 1.33.0

package/dist/package/components/input/input.js

@@ -242,7 +242,7 @@ let SdInput = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
-    return html`<div part="form-control" class="${cx("form-control", hasLabel && "form-control--has-label", this.disabled && "pointer-events-none")}"><label part="form-control-label" class="${cx("form-control-label mb-2", hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}${this.required ? "*" : ""}</slot></label><div part="form-control-input" class="form-control-input relative w-full"><div part="border" class="${cx(
+    return html`<div part="form-control" class="${cx("form-control", hasLabel && "form-control--has-label", this.disabled && "pointer-events-none")}"><label part="form-control-label" id="label" class="${cx("form-control-label mb-2", hasLabel ? "has-label  inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="form-control-input relative w-full"><div part="border" class="${cx(
       "absolute w-full h-full pointer-events-none border rounded-default transition-all",
       borderColor
     )}"></div><div part="base" class="${cx(
@@ -268,7 +268,7 @@ SdInput.styles = [
   componentStyles,
   formControlStyles,
   SolidElement.styles,
-  css`:host{box-sizing:border-box;position:relative;display:inline-block;text-align:left;width:100%}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none}`
+  css`:host{box-sizing:border-box;position:relative;display:inline-block;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label.has-label::after{content:'*';margin-left:2px}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none}`
 ];
 __decorateClass([
   query("#input")

package/dist/package/components/textarea/textarea.d.ts

@@ -0,0 +1,67 @@
+import SolidElement from '../../internal/solid-element';
+import type { SolidFormControl } from '../../internal/solid-element';
+export default class SdTextarea extends SolidElement implements SolidFormControl {
+    private readonly formControlController;
+    private readonly hasSlotController;
+    textarea: HTMLTextAreaElement;
+    private hasFocus;
+    title: string;
+    name: string;
+    value: string;
+    size: 'lg' | 'md' | 'sm';
+    label: string;
+    helpText: string;
+    placeholder: string;
+    rows: number;
+    disabled: boolean;
+    readonly: boolean;
+    form: string;
+    required: boolean;
+    minlength: number;
+    maxlength: number;
+    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+    autocorrect: 'off' | 'on';
+    autocomplete: string;
+    autofocus: boolean;
+    enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    spellcheck: boolean;
+    inputmode: 'none' | 'text';
+    defaultValue: string;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private handleBlur;
+    private handleChange;
+    private handleFocus;
+    private handleInput;
+    private handleInvalid;
+    private setTextareaHeight;
+    handleDisabledChange(): void;
+    handleRowsChange(): void;
+    handleValueChange(): Promise<void>;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    select(): void;
+    scrollPosition(position?: {
+        top?: number;
+        left?: number;
+    }): {
+        top: number;
+        left: number;
+    } | undefined;
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    checkValidity(): boolean;
+    getForm(): HTMLFormElement | null;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-textarea': SdTextarea;
+    }
+}

package/dist/package/components/textarea/textarea.js

@@ -0,0 +1,315 @@
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { defaultValue } from "../../internal/default-value.js";
+import { FormControlController } from "../../internal/form.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { query, state, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import cx from "classix";
+import formControlStyles from "../../styles/form-control.styles.js";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdTextarea = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.value = "";
+    this.size = "lg";
+    this.label = "";
+    this.helpText = "";
+    this.placeholder = "";
+    this.rows = 4;
+    this.disabled = false;
+    this.readonly = false;
+    this.form = "";
+    this.required = false;
+    this.spellcheck = true;
+    this.defaultValue = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.textarea.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.textarea.validationMessage;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this.setTextareaHeight();
+    });
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sd-blur");
+  }
+  handleChange() {
+    this.value = this.textarea.value;
+    this.setTextareaHeight();
+    this.emit("sd-change");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sd-focus");
+  }
+  handleInput() {
+    this.value = this.textarea.value;
+    this.formControlController.updateValidity();
+    this.emit("sd-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  setTextareaHeight() {
+    this.textarea.style.height = void 0;
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleRowsChange() {
+    this.setTextareaHeight();
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+    this.setTextareaHeight();
+  }
+  /** Sets focus on the textarea. */
+  focus(options) {
+    this.textarea.focus(options);
+  }
+  /** Removes focus from the textarea. */
+  blur() {
+    this.textarea.blur();
+  }
+  /** Selects all the text in the textarea. */
+  select() {
+    this.textarea.select();
+  }
+  /** Gets or sets the textarea's scroll position. */
+  scrollPosition(position) {
+    if (position) {
+      if (typeof position.top === "number")
+        this.textarea.scrollTop = position.top;
+      if (typeof position.left === "number")
+        this.textarea.scrollLeft = position.left;
+      return void 0;
+    }
+    return {
+      top: this.textarea.scrollTop,
+      left: this.textarea.scrollTop
+    };
+  }
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+  }
+  /** Replaces a range of text with a new string. */
+  setRangeText(replacement, start, end, selectMode) {
+    this.textarea.setRangeText(replacement, start, end, selectMode);
+    if (this.value !== this.textarea.value) {
+      this.value = this.textarea.value;
+    }
+    if (this.value !== this.textarea.value) {
+      this.value = this.textarea.value;
+      this.setTextareaHeight();
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    var _a;
+    return (_a = this.textarea) == null ? void 0 : _a.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.textarea.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.textarea.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const slots = {
+      label: this.hasSlotController.test("label"),
+      helpText: this.hasSlotController.test("help-text")
+    };
+    const hasLabel = this.label ? true : !!slots["label"];
+    const hasHelpText = this.helpText ? true : !!slots["helpText"];
+    const hasValidationAttr = this.required || !!this.minlength || !!this.maxlength;
+    const isInvalid = hasValidationAttr && !this.checkValidity();
+    const isValid = hasValidationAttr && this.checkValidity();
+    const inputState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && isInvalid ? "activeInvalid" : this.hasFocus && isValid ? "activeValid" : this.hasFocus ? "active" : isInvalid ? "invalid" : isValid ? "valid" : "default";
+    const textSize = this.size === "sm" ? "text-sm" : "text-base";
+    return html`<div part="form-control" class="${cx(
+      "form-control text-left",
+      hasLabel && "form-control--has-label",
+      hasHelpText && "form-control--has-help-text",
+      this.disabled && "cursor-not-allowed"
+    )}"><label part="form-control-label" id="label" class="${cx("form-control-label mb-2", hasLabel ? "has-label inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="form-control-input relative w-full"><div part="border" class="${cx(
+      "absolute w-full h-full pointer-events-none border rounded-default",
+      {
+        disabled: "border-neutral-500",
+        readonly: "border-neutral-800",
+        activeInvalid: "border-error border-2",
+        activeValid: "border-success border-2",
+        active: "border-primary border-2",
+        invalid: "border-error",
+        valid: "border-success",
+        default: "border-neutral-800"
+      }[inputState]
+    )}"></div><div part="base" class="${cx(
+      "textarea px-4 flex flex-row items-center rounded-default textarea--resize-none",
+      {
+        sm: "textarea-sm py-1",
+        md: "textarea-md py-1",
+        lg: "textarea-lg py-2"
+      }[this.size],
+      {
+        disabled: "text-neutral-500",
+        readonly: "text-black",
+        activeInvalid: "text-error",
+        activeValid: "text-success",
+        active: "text-black",
+        invalid: "text-error",
+        valid: "text-success",
+        default: "text-black"
+      }[inputState],
+      !this.disabled && !this.readonly ? "hover:bg-neutral-200" : "",
+      this.readonly && "bg-neutral-100",
+      isInvalid && "form-control-input--invalid",
+      !this.value && "textarea--empty"
+    )}"><textarea part="textarea" id="input" class="${cx(
+      'textarea__control flex-grow focus:outline-none bg-transparent placeholder-neutral-700"',
+      textSize
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea></div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>`;
+  }
+};
+SdTextarea.styles = [
+  // componentStyles,
+  formControlStyles,
+  SolidElement.styles,
+  css`:host{display:block}:host([required]) #label.has-label::after{content:'*';margin-left:2px}:host([disabled]) .textarea__control{cursor:not-allowed}.no-scrollbar::-webkit-scrollbar{display:none}.textarea--resize-none .textarea__control{resize:none}`
+];
+__decorateClass([
+  query(".textarea__control")
+], SdTextarea.prototype, "textarea", 2);
+__decorateClass([
+  state()
+], SdTextarea.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "title", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "name", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdTextarea.prototype, "size", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], SdTextarea.prototype, "helpText", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Number })
+], SdTextarea.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTextarea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTextarea.prototype, "readonly", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdTextarea.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTextarea.prototype, "required", 2);
+__decorateClass([
+  property({ type: Number })
+], SdTextarea.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], SdTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "autocapitalize", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "autocorrect", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SdTextarea.prototype, "autofocus", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    converter: {
+      // Allow "true|false" attribute values but keep the property boolean
+      fromAttribute: (value) => !value || value === "false" ? false : true,
+      toAttribute: (value) => value ? "true" : "false"
+    }
+  })
+], SdTextarea.prototype, "spellcheck", 2);
+__decorateClass([
+  property()
+], SdTextarea.prototype, "inputmode", 2);
+__decorateClass([
+  defaultValue()
+], SdTextarea.prototype, "defaultValue", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdTextarea.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("rows", { waitUntilFirstUpdate: true })
+], SdTextarea.prototype, "handleRowsChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], SdTextarea.prototype, "handleValueChange", 1);
+SdTextarea = __decorateClass([
+  customElement("sd-textarea")
+], SdTextarea);
+export {
+  SdTextarea as default
+};

package/dist/package/solid-components.d.ts

@@ -26,6 +26,7 @@ export { default as SdSpinner } from './components/spinner/spinner';
 export { default as SdSwitch } from './components/switch/switch';
 export { default as SdTag } from './components/tag/tag';
 export { default as SdTeaser } from './components/teaser/teaser';
+export { default as SdTextarea } from './components/textarea/textarea';
 export { default as SdTooltip } from './components/tooltip/tooltip';
 export { default as SdVideo } from './components/video/video';
 export * from './utilities/icon-library';

package/dist/package/solid-components.js

@@ -26,8 +26,9 @@ import { default as default26 } from "./components/spinner/spinner.js";
 import { default as default27 } from "./components/switch/switch.js";
 import { default as default28 } from "./components/tag/tag.js";
 import { default as default29 } from "./components/teaser/teaser.js";
-import { default as default30 } from "./components/tooltip/tooltip.js";
-import { default as default31 } from "./components/video/video.js";
+import { default as default30 } from "./components/textarea/textarea.js";
+import { default as default31 } from "./components/tooltip/tooltip.js";
+import { default as default32 } from "./components/video/video.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 export {
@@ -60,8 +61,9 @@ export {
   default27 as SdSwitch,
   default28 as SdTag,
   default29 as SdTeaser,
-  default30 as SdTooltip,
-  default31 as SdVideo,
+  default30 as SdTextarea,
+  default31 as SdTooltip,
+  default32 as SdVideo,
   registerIconLibrary,
   unregisterIconLibrary
 };

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

@@ -1 +1 @@
-import"./accordion.js";import{x as t,i as e}from"./lit-element.js";import{c as o}from"./register-custom-element.js";import{S as s,n as r}from"./solid-element.js";import{o as i}from"./query-assigned-elements.js";import{c as n}from"./component.styles.js";import"./icon.js";import"./solid-components2.js";import"./state.js";import"./request.js";import"./request2.js";import"./directive.js";import"./watch.js";import"./event.js";import"./animation-registry.js";import"./query.js";import"./classix.js";var c=Object.defineProperty,a=Object.getOwnPropertyDescriptor,l=(t,e,o,s)=>{for(var r,i=s>1?void 0:s?a(e,o):e,n=t.length-1;n>=0;n--)(r=t[n])&&(i=(s?r(e,o,i):r(i))||i);return s&&i&&c(e,o,i),i};let d=class extends s{constructor(){super(...arguments),this.closeOthers=!1,this.handleAccordionShow=t=>{this.closeOthers&&this._accordionsInDefaultSlot.forEach((e=>{e!==t.target&&e.parentNode===t.target.parentNode&&e.removeAttribute("open")}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("sd-show",this.handleAccordionShow)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sd-show",this.handleAccordionShow)}render(){return t`<div part="base"><slot></slot></div>`}};d.styles=[n,s.styles,e`:host{display:block}::slotted(sd-1-32-0-accordion:not(:first-of-type)){margin-top:-1px}`],l([i({selector:"sd-1-32-0-accordion"})],d.prototype,"_accordionsInDefaultSlot",2),l([r({attribute:"close-others",type:Boolean})],d.prototype,"closeOthers",2),d=l([o("sd-1-32-0-accordion-group")],d);export{d as default};
+import"./accordion.js";import{x as t,i as e}from"./lit-element.js";import{c as o}from"./register-custom-element.js";import{S as s,n as r}from"./solid-element.js";import{o as i}from"./query-assigned-elements.js";import{c as n}from"./component.styles.js";import"./icon.js";import"./solid-components2.js";import"./state.js";import"./request.js";import"./request2.js";import"./directive.js";import"./watch.js";import"./event.js";import"./animation-registry.js";import"./query.js";import"./classix.js";var c=Object.defineProperty,a=Object.getOwnPropertyDescriptor,l=(t,e,o,s)=>{for(var r,i=s>1?void 0:s?a(e,o):e,n=t.length-1;n>=0;n--)(r=t[n])&&(i=(s?r(e,o,i):r(i))||i);return s&&i&&c(e,o,i),i};let d=class extends s{constructor(){super(...arguments),this.closeOthers=!1,this.handleAccordionShow=t=>{this.closeOthers&&this._accordionsInDefaultSlot.forEach((e=>{e!==t.target&&e.parentNode===t.target.parentNode&&e.removeAttribute("open")}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("sd-show",this.handleAccordionShow)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sd-show",this.handleAccordionShow)}render(){return t`<div part="base"><slot></slot></div>`}};d.styles=[n,s.styles,e`:host{display:block}::slotted(sd-1-33-0-accordion:not(:first-of-type)){margin-top:-1px}`],l([i({selector:"sd-1-33-0-accordion"})],d.prototype,"_accordionsInDefaultSlot",2),l([r({attribute:"close-others",type:Boolean})],d.prototype,"closeOthers",2),d=l([o("sd-1-33-0-accordion-group")],d);export{d as default};

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

@@ -1 +1 @@
-import"./icon.js";import{s as e,a as t,b as s,w as o}from"./event.js";import{x as i,i as r}from"./lit-element.js";import{c as a}from"./register-custom-element.js";import{g as n,s as h}from"./animation-registry.js";import{L as d}from"./solid-components2.js";import{S as l,n as p}from"./solid-element.js";import{e as c}from"./query.js";import{w as y}from"./watch.js";import{t as m}from"./classix.js";import"./state.js";import"./request.js";import"./request2.js";import"./directive.js";import"./component.styles.js";var u=Object.defineProperty,f=Object.getOwnPropertyDescriptor,b=(e,t,s,o)=>{for(var i,r=o>1?void 0:o?f(t,s):t,a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o?i(t,s,r):i(r))||r);return o&&r&&u(t,s,r),r};let w=class extends l{constructor(){super(...arguments),this.localize=new d(this),this.open=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.header.focus(),this.open?this.hide():this.show()}handleSummaryKeyDown(e){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.open?this.hide():this.show()),("ArrowUp"===e.key||"ArrowLeft"===e.key)&&(e.preventDefault(),this.hide()),("ArrowDown"===e.key||"ArrowRight"===e.key)&&(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sd-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await e(this.body),this.body.hidden=!1;const{keyframes:o,options:i}=n(this,"accordion.show",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.style.height="auto",this.emit("sd-after-show")}else{if(this.emit("sd-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await e(this.body);const{keyframes:o,options:i}=n(this,"accordion.hide",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.hidden=!0,this.body.style.height="auto",this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,o(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,o(this,"sd-after-hide")}render(){return i`<div part="base" class="border-y-[1px] border-neutral-400"><header part="header" id="header" class="${m("flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group")}" role="button" aria-expanded="${this.open?"true":"false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div class="${m(!this.open&&"opacity-0","w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full")}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${m("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="${m(this.open&&"hidden")}"><sd-1-32-0-icon library="system" name="chevron-down"></sd-1-32-0-icon></slot><slot name="collapse-icon" class="${m(!this.open&&"hidden")}"><sd-1-32-0-icon library="system" name="chevron-down"></sd-1-32-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`}};w.styles=[l.styles,r`:host{display:block}`],b([c('[part="base"]')],w.prototype,"accordion",2),b([c('[part="header"]')],w.prototype,"header",2),b([c('[part="content"]')],w.prototype,"body",2),b([p({type:Boolean,reflect:!0})],w.prototype,"open",2),b([p()],w.prototype,"summary",2),b([y("open",{waitUntilFirstUpdate:!0})],w.prototype,"handleOpenChange",1),w=b([a("sd-1-32-0-accordion")],w),h("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"ease"}}),h("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"ease"}});export{w as default};
+import"./icon.js";import{s as e,a as t,b as s,w as o}from"./event.js";import{x as i,i as r}from"./lit-element.js";import{c as a}from"./register-custom-element.js";import{g as n,s as h}from"./animation-registry.js";import{L as d}from"./solid-components2.js";import{S as l,n as p}from"./solid-element.js";import{e as c}from"./query.js";import{w as y}from"./watch.js";import{t as m}from"./classix.js";import"./state.js";import"./request.js";import"./request2.js";import"./directive.js";import"./component.styles.js";var u=Object.defineProperty,f=Object.getOwnPropertyDescriptor,b=(e,t,s,o)=>{for(var i,r=o>1?void 0:o?f(t,s):t,a=e.length-1;a>=0;a--)(i=e[a])&&(r=(o?i(t,s,r):i(r))||r);return o&&r&&u(t,s,r),r};let w=class extends l{constructor(){super(...arguments),this.localize=new d(this),this.open=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.header.focus(),this.open?this.hide():this.show()}handleSummaryKeyDown(e){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.open?this.hide():this.show()),("ArrowUp"===e.key||"ArrowLeft"===e.key)&&(e.preventDefault(),this.hide()),("ArrowDown"===e.key||"ArrowRight"===e.key)&&(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sd-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await e(this.body),this.body.hidden=!1;const{keyframes:o,options:i}=n(this,"accordion.show",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.style.height="auto",this.emit("sd-after-show")}else{if(this.emit("sd-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await e(this.body);const{keyframes:o,options:i}=n(this,"accordion.hide",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.hidden=!0,this.body.style.height="auto",this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,o(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,o(this,"sd-after-hide")}render(){return i`<div part="base" class="border-y-[1px] border-neutral-400"><header part="header" id="header" class="${m("flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group")}" role="button" aria-expanded="${this.open?"true":"false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div class="${m(!this.open&&"opacity-0","w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full")}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${m("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="${m(this.open&&"hidden")}"><sd-1-33-0-icon library="system" name="chevron-down"></sd-1-33-0-icon></slot><slot name="collapse-icon" class="${m(!this.open&&"hidden")}"><sd-1-33-0-icon library="system" name="chevron-down"></sd-1-33-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`}};w.styles=[l.styles,r`:host{display:block}`],b([c('[part="base"]')],w.prototype,"accordion",2),b([c('[part="header"]')],w.prototype,"header",2),b([c('[part="content"]')],w.prototype,"body",2),b([p({type:Boolean,reflect:!0})],w.prototype,"open",2),b([p()],w.prototype,"summary",2),b([y("open",{waitUntilFirstUpdate:!0})],w.prototype,"handleOpenChange",1),w=b([a("sd-1-33-0-accordion")],w),h("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"ease"}}),h("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"ease"}});export{w as default};

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

@@ -1 +1 @@
-import{x as e,i as t}from"./lit-element.js";import{c as r}from"./register-custom-element.js";import{S as s,n as i}from"./solid-element.js";import{t as n}from"./classix.js";var o=Object.defineProperty,a=Object.getOwnPropertyDescriptor,p=(e,t,r,s)=>{for(var i,n=s>1?void 0:s?a(t,r):t,p=e.length-1;p>=0;p--)(i=e[p])&&(n=(s?i(t,r,n):i(n))||n);return s&&n&&o(t,r,n),n};let l=class extends s{constructor(){super(...arguments),this.variant="default",this.size="lg",this.inverted=!1}render(){return e`<span tabindex="0" role="status" part="base" class="${n("inline-flex items-center justify-center gap-x-[1px] text-center leading-none whitespace-nowrap border rounded-full select-none cursor-[inherit]",{default:this.inverted?"text-primary bg-white border-primary":"text-white bg-primary-500 border-white",success:this.inverted?"text-white bg-success border-primary":"text-white bg-success border-white",error:this.inverted?"text-white bg-error border-primary":"text-white bg-error border-white"}[this.variant],{sm:"h-2 min-w-[8px] text-[10px]",md:"h-4 px-[4px] min-w-[16px] text-[10px]",lg:"h-5 px-[5px] min-w-[20px] text-[12px]"}[this.size])}"><span part="content" class="${n("sm"===this.size&&"hidden")}"><slot></slot></span></span>`}};l.styles=[s.styles,t`:host{display:inline-flex;align-items:center;justify-content:center}`],p([i({reflect:!0})],l.prototype,"variant",2),p([i({reflect:!0})],l.prototype,"size",2),p([i({type:Boolean,reflect:!0})],l.prototype,"inverted",2),l=p([r("sd-1-32-0-badge")],l);export{l as default};
+import{x as e,i as t}from"./lit-element.js";import{c as r}from"./register-custom-element.js";import{S as s,n as i}from"./solid-element.js";import{t as n}from"./classix.js";var o=Object.defineProperty,a=Object.getOwnPropertyDescriptor,p=(e,t,r,s)=>{for(var i,n=s>1?void 0:s?a(t,r):t,p=e.length-1;p>=0;p--)(i=e[p])&&(n=(s?i(t,r,n):i(n))||n);return s&&n&&o(t,r,n),n};let l=class extends s{constructor(){super(...arguments),this.variant="default",this.size="lg",this.inverted=!1}render(){return e`<span tabindex="0" role="status" part="base" class="${n("inline-flex items-center justify-center gap-x-[1px] text-center leading-none whitespace-nowrap border rounded-full select-none cursor-[inherit]",{default:this.inverted?"text-primary bg-white border-primary":"text-white bg-primary-500 border-white",success:this.inverted?"text-white bg-success border-primary":"text-white bg-success border-white",error:this.inverted?"text-white bg-error border-primary":"text-white bg-error border-white"}[this.variant],{sm:"h-2 min-w-[8px] text-[10px]",md:"h-4 px-[4px] min-w-[16px] text-[10px]",lg:"h-5 px-[5px] min-w-[20px] text-[12px]"}[this.size])}"><span part="content" class="${n("sm"===this.size&&"hidden")}"><slot></slot></span></span>`}};l.styles=[s.styles,t`:host{display:inline-flex;align-items:center;justify-content:center}`],p([i({reflect:!0})],l.prototype,"variant",2),p([i({reflect:!0})],l.prototype,"size",2),p([i({type:Boolean,reflect:!0})],l.prototype,"inverted",2),l=p([r("sd-1-33-0-badge")],l);export{l as default};

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

@@ -1 +1 @@
-import{x as t,i as e}from"./lit-element.js";import{c as s}from"./register-custom-element.js";import{S as r,n as i}from"./solid-element.js";import{r as o}from"./state.js";import{e as a}from"./query.js";import{c as n}from"./component.styles.js";import{t as p}from"./classix.js";var l=Object.defineProperty,h=Object.getOwnPropertyDescriptor,v=(t,e,s,r)=>{for(var i,o=r>1?void 0:r?h(e,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r?i(e,s,o):i(o))||o);return r&&o&&l(e,s,o),o};let d=class extends r{constructor(){super(...arguments),this.variant="primary",this.shapes=["top","middle","bottom"],this.componentBreakpoint=0}getSvg(t,e){return{0:this.smallSvg(e),414:this.mediumSvg(e),640:this.largeSvg(e)}[t]}largeSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setBreakpoint())),this.updateComplete.then((()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return t`<div class="relative" part="shape-top">${1===this.shapes.length?t`<div class="relative">${this.getSvg(this.componentBreakpoint,"top")}<div part="content" class="absolute bottom-0 right-0 flex items-end w-2/5 h-2/3 px-6 py-4"><slot></slot></div></div>`:this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return t`<div class="${p({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${p({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="z-10 relative" part="content"><slot></slot></div></div>`}renderBottomBrandshape(){return t`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(e){return t`<div class="${p({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white"}[this.variant],{top:"bottom-0",bottom:"top-0"}[e],"block absolute left-0 w-full h-[1px]")}"></div>`}render(){return t`<div class="${p({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white"}[this.variant])}" part="base">${this.shapes.includes("top")?this.renderTopBrandshape():null} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():null} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():null}</div>`}};d.styles=[n,r.styles,e`:host{display:block}`],v([a("[part=base]")],d.prototype,"containerElem",2),v([i({type:String})],d.prototype,"variant",2),v([i({type:Array})],d.prototype,"shapes",2),v([o()],d.prototype,"componentBreakpoint",2),d=v([s("sd-1-32-0-brandshape")],d);export{d as default};
+import{x as t,i as e}from"./lit-element.js";import{c as s}from"./register-custom-element.js";import{S as r,n as i}from"./solid-element.js";import{r as o}from"./state.js";import{e as a}from"./query.js";import{c as n}from"./component.styles.js";import{t as p}from"./classix.js";var l=Object.defineProperty,h=Object.getOwnPropertyDescriptor,v=(t,e,s,r)=>{for(var i,o=r>1?void 0:r?h(e,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r?i(e,s,o):i(o))||o);return r&&o&&l(e,s,o),o};let d=class extends r{constructor(){super(...arguments),this.variant="primary",this.shapes=["top","middle","bottom"],this.componentBreakpoint=0}getSvg(t,e){return{0:this.smallSvg(e),414:this.mediumSvg(e),640:this.largeSvg(e)}[t]}largeSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setBreakpoint())),this.updateComplete.then((()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return t`<div class="relative" part="shape-top">${1===this.shapes.length?t`<div class="relative">${this.getSvg(this.componentBreakpoint,"top")}<div part="content" class="absolute bottom-0 right-0 flex items-end w-2/5 h-2/3 px-6 py-4"><slot></slot></div></div>`:this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return t`<div class="${p({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${p({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="z-10 relative" part="content"><slot></slot></div></div>`}renderBottomBrandshape(){return t`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(e){return t`<div class="${p({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white"}[this.variant],{top:"bottom-0",bottom:"top-0"}[e],"block absolute left-0 w-full h-[1px]")}"></div>`}render(){return t`<div class="${p({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white"}[this.variant])}" part="base">${this.shapes.includes("top")?this.renderTopBrandshape():null} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():null} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():null}</div>`}};d.styles=[n,r.styles,e`:host{display:block}`],v([a("[part=base]")],d.prototype,"containerElem",2),v([i({type:String})],d.prototype,"variant",2),v([i({type:Array})],d.prototype,"shapes",2),v([o()],d.prototype,"componentBreakpoint",2),d=v([s("sd-1-33-0-brandshape")],d);export{d as default};

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

@@ -1 +1 @@
-import"./spinner.js";import{i as t}from"./lit-element.js";import{c as e}from"./register-custom-element.js";import{F as r,v as i}from"./form.js";import{H as o}from"./slot.js";import{s,n}from"./static.js";import{o as a}from"./if-defined.js";import{S as l,n as d}from"./solid-element.js";import{r as p}from"./state.js";import{e as h}from"./query.js";import{o as m}from"./query-assigned-elements.js";import{w as c}from"./watch.js";import{c as u}from"./component.styles.js";import{t as b}from"./classix.js";import"./solid-components2.js";var y=Object.defineProperty,v=Object.getOwnPropertyDescriptor,f=(t,e,r,i)=>{for(var o,s=i>1?void 0:i?v(e,r):e,n=t.length-1;n>=0;n--)(o=t[n])&&(s=(i?o(e,r,s):o(s))||s);return i&&s&&y(e,r,s),s};let g=class extends l{constructor(){super(...arguments),this.formControlController=new r(this,{form:t=>{if(t.hasAttribute("form")){const e=t.getRootNode(),r=t.getAttribute("form");return e.getElementById(r)}return t.closest("form")}}),this.hasSlotController=new o(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=""}get validity(){return this.isButton()?this.button.validity:i}get validationMessage(){return this.isButton()?this.button.validationMessage:""}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)}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}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()}getForm(){return this.formControlController.getForm()}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?s`a`:s`button`,r={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 n`<${e} part="base" class="${b("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",r["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-550\n          active:bg-accent-700\n          ${this.inverted?"disabled:bg-neutral-600":"disabled:bg-neutral-500"} disabled:text-white`}[this.variant])}" ?disabled="${a(t?void 0:this.disabled)}" type="${a(t?void 0:this.type)}" title="${this.title}" name="${a(t?void 0:this.name)}" value="${a(t?void 0:this.value)}" href="${a(t?this.href:void 0)}" target="${a(t?this.target:void 0)}" download="${a(t?this.download:void 0)}" rel="${a(t&&this.target?"noreferrer noopener":void 0)}" role="${a(t?void 0:"button")}" aria-disabled="${this.disabled?"true":"false"}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton()?this.handleInvalid:null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${b("flex flex-auto items-center pointer-events-none",r["icon-only"]&&"hidden",this.loading&&"invisible",r["icon-left"]&&{sm:"mr-1",md:"mr-2",lg:"mr-2"}[this.size])}"></slot><slot part="label" class="${b(r["icon-only"]?"flex flex-auto items-center pointer-events-none":"inline-block",this.loading&&"invisible")}"></slot><slot name="icon-right" part="icon-right" class="${b("flex flex-auto items-center pointer-events-none",this.loading&&"invisible",r["icon-only"]&&"hidden",r["icon-right"]&&{sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size])}"></slot>${this.loading?n`<sd-1-32-0-spinner class="${b("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-32-0-spinner>`:""}</${e}>`}};g.styles=[u,l.styles,t`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-32-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-1-32-0-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-32-0-icon),sd-1-32-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`],f([h("a, button")],g.prototype,"button",2),f([m({selector:"sd-1-32-0-icon"})],g.prototype,"_iconsInDefaultSlot",2),f([p()],g.prototype,"invalid",2),f([d()],g.prototype,"title",2),f([d({reflect:!0})],g.prototype,"variant",2),f([d({type:Boolean,reflect:!0})],g.prototype,"inverted",2),f([d({reflect:!0})],g.prototype,"size",2),f([d({type:Boolean,reflect:!0})],g.prototype,"disabled",2),f([d({type:Boolean,reflect:!0})],g.prototype,"loading",2),f([d()],g.prototype,"type",2),f([d()],g.prototype,"name",2),f([d()],g.prototype,"value",2),f([d()],g.prototype,"href",2),f([d()],g.prototype,"target",2),f([d()],g.prototype,"download",2),f([d()],g.prototype,"form",2),f([d({attribute:"formaction"})],g.prototype,"formAction",2),f([d({attribute:"formenctype"})],g.prototype,"formEnctype",2),f([d({attribute:"formmethod"})],g.prototype,"formMethod",2),f([d({attribute:"formnovalidate",type:Boolean})],g.prototype,"formNoValidate",2),f([d({attribute:"formtarget"})],g.prototype,"formTarget",2),f([c("disabled",{waitUntilFirstUpdate:!0})],g.prototype,"handleDisabledChange",1),g=f([e("sd-1-32-0-button")],g);export{g as default};
+import"./spinner.js";import{i as t}from"./lit-element.js";import{c as e}from"./register-custom-element.js";import{F as r,v as i}from"./form.js";import{H as o}from"./slot.js";import{s,n}from"./static.js";import{o as a}from"./if-defined.js";import{S as l,n as d}from"./solid-element.js";import{r as p}from"./state.js";import{e as h}from"./query.js";import{o as m}from"./query-assigned-elements.js";import{w as c}from"./watch.js";import{c as u}from"./component.styles.js";import{t as b}from"./classix.js";import"./solid-components2.js";var y=Object.defineProperty,v=Object.getOwnPropertyDescriptor,f=(t,e,r,i)=>{for(var o,s=i>1?void 0:i?v(e,r):e,n=t.length-1;n>=0;n--)(o=t[n])&&(s=(i?o(e,r,s):o(s))||s);return i&&s&&y(e,r,s),s};let g=class extends l{constructor(){super(...arguments),this.formControlController=new r(this,{form:t=>{if(t.hasAttribute("form")){const e=t.getRootNode(),r=t.getAttribute("form");return e.getElementById(r)}return t.closest("form")}}),this.hasSlotController=new o(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=""}get validity(){return this.isButton()?this.button.validity:i}get validationMessage(){return this.isButton()?this.button.validationMessage:""}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)}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}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()}getForm(){return this.formControlController.getForm()}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?s`a`:s`button`,r={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 n`<${e} part="base" class="${b("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",r["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-550\n          active:bg-accent-700\n          ${this.inverted?"disabled:bg-neutral-600":"disabled:bg-neutral-500"} disabled:text-white`}[this.variant])}" ?disabled="${a(t?void 0:this.disabled)}" type="${a(t?void 0:this.type)}" title="${this.title}" name="${a(t?void 0:this.name)}" value="${a(t?void 0:this.value)}" href="${a(t?this.href:void 0)}" target="${a(t?this.target:void 0)}" download="${a(t?this.download:void 0)}" rel="${a(t&&this.target?"noreferrer noopener":void 0)}" role="${a(t?void 0:"button")}" aria-disabled="${this.disabled?"true":"false"}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton()?this.handleInvalid:null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${b("flex flex-auto items-center pointer-events-none",r["icon-only"]&&"hidden",this.loading&&"invisible",r["icon-left"]&&{sm:"mr-1",md:"mr-2",lg:"mr-2"}[this.size])}"></slot><slot part="label" class="${b(r["icon-only"]?"flex flex-auto items-center pointer-events-none":"inline-block",this.loading&&"invisible")}"></slot><slot name="icon-right" part="icon-right" class="${b("flex flex-auto items-center pointer-events-none",this.loading&&"invisible",r["icon-only"]&&"hidden",r["icon-right"]&&{sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size])}"></slot>${this.loading?n`<sd-1-33-0-spinner class="${b("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-33-0-spinner>`:""}</${e}>`}};g.styles=[u,l.styles,t`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-33-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-1-33-0-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-33-0-icon),sd-1-33-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`],f([h("a, button")],g.prototype,"button",2),f([m({selector:"sd-1-33-0-icon"})],g.prototype,"_iconsInDefaultSlot",2),f([p()],g.prototype,"invalid",2),f([d()],g.prototype,"title",2),f([d({reflect:!0})],g.prototype,"variant",2),f([d({type:Boolean,reflect:!0})],g.prototype,"inverted",2),f([d({reflect:!0})],g.prototype,"size",2),f([d({type:Boolean,reflect:!0})],g.prototype,"disabled",2),f([d({type:Boolean,reflect:!0})],g.prototype,"loading",2),f([d()],g.prototype,"type",2),f([d()],g.prototype,"name",2),f([d()],g.prototype,"value",2),f([d()],g.prototype,"href",2),f([d()],g.prototype,"target",2),f([d()],g.prototype,"download",2),f([d()],g.prototype,"form",2),f([d({attribute:"formaction"})],g.prototype,"formAction",2),f([d({attribute:"formenctype"})],g.prototype,"formEnctype",2),f([d({attribute:"formmethod"})],g.prototype,"formMethod",2),f([d({attribute:"formnovalidate",type:Boolean})],g.prototype,"formNoValidate",2),f([d({attribute:"formtarget"})],g.prototype,"formTarget",2),f([c("disabled",{waitUntilFirstUpdate:!0})],g.prototype,"handleDisabledChange",1),g=f([e("sd-1-33-0-button")],g);export{g as default};

package/dist/versioned-components/es/carousel-item.js

@@ -1 +1 @@
-import{x as t,i as e}from"./lit-element.js";import{c as s}from"./register-custom-element.js";import{c as r}from"./component.styles.js";import{S as o}from"./solid-element.js";Object.defineProperty,Object.getOwnPropertyDescriptor;let i=class extends o{static isCarouselItem(t){return t instanceof Element&&"slide"===t.getAttribute("aria-roledescription")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group")}render(){return t`<slot></slot>`}};i.styles=[o.styles,e`${r}:host{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always}::slotted(img){width:100%;height:100%;object-fit:cover}`],i=((t,e,s,r)=>{for(var o,i=e,l=t.length-1;l>=0;l--)(o=t[l])&&(i=o(i)||i);return i})([s("sd-1-32-0-carousel-item")],i);export{i as default};
+import{x as t,i as e}from"./lit-element.js";import{c as s}from"./register-custom-element.js";import{c as r}from"./component.styles.js";import{S as o}from"./solid-element.js";Object.defineProperty,Object.getOwnPropertyDescriptor;let i=class extends o{static isCarouselItem(t){return t instanceof Element&&"slide"===t.getAttribute("aria-roledescription")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group")}render(){return t`<slot></slot>`}};i.styles=[o.styles,e`${r}:host{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always}::slotted(img){width:100%;height:100%;object-fit:cover}`],i=((t,e,s,r)=>{for(var o,i=e,l=t.length-1;l>=0;l--)(o=t[l])&&(i=o(i)||i);return i})([s("sd-1-33-0-carousel-item")],i);export{i as default};