@solid-design-system/components 3.24.0 → 4.0.0-next.0

package/dist-versioned/chunks/chunk.KVKRZJS7.js

@@ -0,0 +1,311 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.S3NI7NKU.js";
+
+// src/internal/form.ts
+import { html } from "lit";
+var formCollections = /* @__PURE__ */ new WeakMap();
+var reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+var userInteractedControls = /* @__PURE__ */ new WeakMap();
+var interactions = /* @__PURE__ */ new WeakMap();
+var FormControlController = class {
+  constructor(host, options) {
+    this.handleFormData = (event) => {
+      const disabled = this.options.disabled(this.host);
+      const name = this.options.name(this.host);
+      const value = this.options.value(this.host);
+      const isButton = this.host.tagName.toLowerCase() === "sd-4-0-0-next-0-button";
+      if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+        if (Array.isArray(value)) {
+          value.forEach((val) => {
+            event.formData.append(name, val.toString());
+          });
+        } else {
+          event.formData.append(name, value.toString());
+        }
+      }
+    };
+    this.handleFormSubmit = (event) => {
+      var _a, _b;
+      const disabled = this.options.disabled(this.host);
+      const reportValidity = this.options.reportValidity;
+      if (this.form && !this.form.noValidate) {
+        (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
+          this.setUserInteracted(control, true);
+        });
+      }
+      if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
+        const sdRadioGroups = Array.from(invalidElements).filter(
+          (element) => element.tagName.toLowerCase() === "sd-4-0-0-next-0-radio-group"
+        );
+        sdRadioGroups.forEach((radioGroup) => {
+          var _a2, _b2;
+          (_b2 = (_a2 = radioGroup.shadowRoot) == null ? void 0 : _a2.querySelector("input")) == null ? void 0 : _b2.dispatchEvent(new Event("invalid"));
+        });
+        if (invalidElements == null ? void 0 : invalidElements.length) invalidElements[0].focus();
+      }
+    };
+    this.handleFormReset = () => {
+      this.options.setValue(this.host, this.options.defaultValue(this.host));
+      this.setUserInteracted(this.host, false);
+      interactions.set(this.host, []);
+    };
+    this.handleInteraction = (event) => {
+      const emittedEvents = interactions.get(this.host);
+      if (!emittedEvents.includes(event.type)) {
+        emittedEvents.push(event.type);
+      }
+      if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+        this.setUserInteracted(this.host, true);
+      }
+    };
+    // This is used by `reportValidity` to show validity state styles and messages without manual user interaction
+    this.fakeUserInteraction = () => {
+      this.setUserInteracted(this.host, true);
+    };
+    (this.host = host).addController(this);
+    this.options = __spreadValues({
+      form: (input) => {
+        if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
+          const root = input.getRootNode();
+          const formId = input.getAttribute("form");
+          if (formId) {
+            return root.getElementById(formId);
+          }
+        }
+        return input.closest("form");
+      },
+      name: (input) => input.name,
+      value: (input) => input.value,
+      defaultValue: (input) => input.defaultValue,
+      disabled: (input) => {
+        var _a;
+        return (_a = input.disabled) != null ? _a : false;
+      },
+      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      setValue: (input, value) => input.value = value,
+      assumeInteractionOn: ["sd-4-0-0-next-0-input"]
+    }, options);
+  }
+  hostConnected() {
+    const form = this.options.form(this.host);
+    if (form) {
+      this.attachForm(form);
+    }
+    interactions.set(this.host, []);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
+  }
+  hostDisconnected() {
+    this.detachForm();
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
+  }
+  hostUpdated() {
+    var _a;
+    const form = this.options.form(this.host);
+    if (!form) {
+      this.detachForm();
+    }
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+    if (this.host.hasUpdated) {
+      this.setValidity((_a = this.host) == null ? void 0 : _a.validity.valid);
+      this.updateValidityStyle();
+    }
+  }
+  attachForm(form) {
+    if (form) {
+      this.form = form;
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form).add(this.host);
+      } else {
+        formCollections.set(this.form, /* @__PURE__ */ new Set([this.host]));
+      }
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(this.form, this.form.reportValidity);
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+    } else {
+      this.form = void 0;
+    }
+  }
+  detachForm() {
+    var _a;
+    if (this.form) {
+      (_a = formCollections.get(this.form)) == null ? void 0 : _a.delete(this.host);
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(this.form);
+        reportValidityOverloads.delete(this.form);
+      }
+    }
+    this.form = void 0;
+  }
+  reportFormValidity() {
+    if (this.form && !this.form.noValidate) {
+      const elements = this.form.querySelectorAll("*");
+      for (const element of elements) {
+        if (typeof element.reportValidity === "function") {
+          if (!element.reportValidity()) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+  setUserInteracted(el, hasInteracted) {
+    userInteractedControls.set(el, hasInteracted);
+    el.requestUpdate();
+  }
+  doAction(type, invoker) {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (invoker) {
+        button.name = invoker.name;
+        button.value = invoker.value;
+        ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach((attr) => {
+          if (invoker.hasAttribute(attr)) {
+            button.setAttribute(attr, invoker.getAttribute(attr));
+          }
+        });
+      }
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+  /** Checks for the presence of the attributes 'data-user-valid' or 'data-user-invalid' on the host form element and updates its corresponding style state. */
+  updateValidityStyle() {
+    if (this.host.hasAttribute("data-user-valid") && this.host.checkValidity()) {
+      if (this.host.showValidStyle !== void 0) this.host.showValidStyle = true;
+      this.host.showInvalidStyle = false;
+    } else if (this.host.hasAttribute("data-user-invalid") && !this.host.checkValidity()) {
+      if (this.host.showValidStyle !== void 0) this.host.showValidStyle = false;
+      this.host.showInvalidStyle = true;
+    } else {
+      if (this.host.showValidStyle !== void 0) this.host.showValidStyle = false;
+      this.host.showInvalidStyle = false;
+    }
+  }
+  /** Returns the associated `<form>` element, if one exists. */
+  getForm() {
+    var _a;
+    return (_a = this.form) != null ? _a : null;
+  }
+  /** Returns a styled `<div>` element to display inline validation messages via its `textContent` property when a form element is invalid. */
+  renderInvalidMessage() {
+    return html`<div id="invalid-message" class="text-error text-sm mt-2 text-left" part="invalid-message" aria-live="polite" ?hidden="${!this.host.showInvalidStyle}"></div>`;
+  }
+  /** Resets the form, restoring all the control to their default value */
+  reset(invoker) {
+    this.doAction("reset", invoker);
+  }
+  /** Submits the form, triggering validation and form data injection. */
+  submit(invoker) {
+    this.doAction("submit", invoker);
+  }
+  /**
+   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+   * the host element immediately, i.e. before Lit updates the component in the next update.
+   */
+  setValidity(isValid) {
+    var _a;
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.get(host));
+    const required = Boolean(host.required);
+    if ((_a = this.form) == null ? void 0 : _a.noValidate) {
+      host.removeAttribute("data-required");
+      host.removeAttribute("data-optional");
+      host.removeAttribute("data-invalid");
+      host.removeAttribute("data-valid");
+      host.removeAttribute("data-user-invalid");
+      host.removeAttribute("data-user-valid");
+      host.removeAttribute("aria-invalid");
+    } else {
+      host.toggleAttribute("data-required", required);
+      host.toggleAttribute("data-optional", !required);
+      host.toggleAttribute("data-invalid", !isValid);
+      host.toggleAttribute("data-valid", isValid);
+      host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
+      host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+      host.setAttribute("aria-invalid", (!isValid).toString());
+    }
+  }
+  /**
+   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+   * that affects constraint validation changes so the component receives the correct validity states.
+   */
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host == null ? void 0 : host.validity.valid);
+  }
+  /**
+   * Dispatches a non-bubbling, cancelable custom event of type `sd-invalid`.
+   * If no original `invalid` event has been passed then the `sd-invalid`
+   * event will be cancelled before being dispatched.
+   */
+  emitInvalidEvent(originalInvalidEvent) {
+    originalInvalidEvent == null ? void 0 : originalInvalidEvent.preventDefault();
+    const sdInvalidEvent = new CustomEvent("sd-invalid", {
+      bubbles: false,
+      composed: false,
+      cancelable: true,
+      detail: {}
+    });
+    if (!originalInvalidEvent) {
+      sdInvalidEvent.preventDefault();
+    }
+  }
+};
+var validValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+});
+var valueMissingValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  valueMissing: true
+}));
+var customErrorValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  customError: true
+}));
+
+export {
+  formCollections,
+  FormControlController,
+  validValidityState,
+  valueMissingValidityState,
+  customErrorValidityState
+};

package/dist-versioned/chunks/chunk.MNYQWRJE.js

@@ -0,0 +1,50 @@
+// src/translations/de.ts
+import { registerTranslation } from "@shoelace-style/localize";
+var translation = {
+  $code: "de",
+  $name: "Deutsch",
+  $dir: "ltr",
+  autoplay: "Autoplay",
+  audioPlayer: "Audio-Player",
+  carousel: "Karussell",
+  clearEntry: "Eingabe l\xF6schen",
+  close: "Schlie\xDFen",
+  comboboxDefaultPlaceholder: "Bitte suchen und ausw\xE4hlen",
+  copy: "Kopieren",
+  currentValue: "Aktueller Wert",
+  goToSlide: (slide, count) => `Zu Folie ${slide} von ${count} gehen`,
+  hidePassword: "Passwort verbergen",
+  loading: "Wird geladen",
+  mute: "Stummschalten",
+  nextSlide: "N\xE4chste Folie",
+  noResults: "Keine Ergebnisse gefunden",
+  numOptionsSelected: (num) => {
+    if (num === 0) return "";
+    return `Optionen ausgew\xE4hlt (${num})`;
+  },
+  pauseAudio: "Audio pausieren",
+  playAudio: "Audio abspielen",
+  playbackSpeed: "Wiedergabe Geschwindigkeit",
+  previousSlide: "Vorherige Folie",
+  progress: "Fortschritt",
+  remove: "Entfernen",
+  removed: (name) => `${name} entfernt`,
+  resize: "Gr\xF6\xDFe \xE4ndern",
+  scrollToEnd: "Zum Ende scrollen",
+  scrollToStart: "Zum Anfang scrollen",
+  selectAColorFromTheScreen: "Farbe vom Bildschirm ausw\xE4hlen",
+  selectDefaultPlaceholder: "Bitte ausw\xE4hlen",
+  showLess: "Weniger anzeigen",
+  showMore: "Mehr anzeigen",
+  showPassword: "Passwort anzeigen",
+  slideNum: (slide, count) => `Folie ${slide} von ${count}`,
+  tagsSelected: "Optionen ausgew\xE4hlt",
+  toggleColorFormat: "Farbformat umschalten",
+  unmute: "Unmute"
+};
+registerTranslation(translation);
+var de_default = translation;
+
+export {
+  de_default
+};

package/dist-versioned/chunks/chunk.MTSAWJLV.js

@@ -0,0 +1,117 @@
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/radio-button/radio-button.ts
+import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdRadioButton = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "icon");
+    this.hasFocus = false;
+    this.size = "lg";
+    this.disabled = false;
+    this.checked = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sd-blur");
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sd-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    const hasDefaultSlot = this.hasSlotController.test("[default]");
+    const hasIconSlot = this.hasSlotController.test("icon");
+    const buttonSizeClass = `${this.size}-${hasDefaultSlot ? "label" : "no-label"}`;
+    return html`<div part="base" role="presentation" class="relative"><button part="${`button${this.checked ? " button--checked" : ""}`}" role="radio" aria-checked="${this.checked}" class="${cx(
+      "relative text-center border rounded-default transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline",
+      this.size === "sm" ? "text-sm" : "text-base",
+      this.checked && !this.disabled ? "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500" : this.disabled && !this.checked ? "border-neutral-500 text-neutral-500 hover:cursor-not-allowed" : this.disabled && this.checked ? "bg-neutral-500 border-neutral-500 text-white hover:cursor-not-allowed" : "bg-transparent text-primary border-primary hover:bg-primary-100 hover:border-primary-500 hover:text-primary-500 cursor-pointer",
+      hasDefaultSlot && "px-4",
+      this.hasFocus && "focused-class",
+      hasDefaultSlot && "button--has-label",
+      hasIconSlot && "button--has-icon flex gap-2",
+      buttonSizeClass
+    )}" aria-disabled="${this.disabled}" type="button" value="${ifDefined(this.value)}" tabindex="${this.checked ? "0" : "-1"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon" part="icon" class="${cx(
+      hasIconSlot && "inline-flex relative items-center",
+      {
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl"
+      }[this.size]
+    )}" ?hidden="${!hasIconSlot}"></slot>${hasDefaultSlot ? html`<slot part="label" class="button__label inline-flex relative items-center whitespace-nowrap"></slot>` : null}</button></div>`;
+  }
+};
+SdRadioButton.styles = [
+  ...SolidElement.styles,
+  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-4-0-0-next-0-button-group__button--first:not(.sd-4-0-0-next-0-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-4-0-0-next-0-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-4-0-0-next-0-button-group__button--last:not(.sd-4-0-0-next-0-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-4-0-0-next-0-button-group__button:not(.sd-4-0-0-next-0-button-group__button--first)){margin-inline-start:-1px}:host(.sd-4-0-0-next-0-button-group__button--hover){z-index:10}:host(.sd-4-0-0-next-0-button-group__button--focus),:host(.sd-4-0-0-next-0-button-group__button[checked]){z-index:20}`
+];
+__decorateClass([
+  query(".button")
+], SdRadioButton.prototype, "input", 2);
+__decorateClass([
+  query(".hidden-input")
+], SdRadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], SdRadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], SdRadioButton.prototype, "value", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdRadioButton.prototype, "handleDisabledChange", 1);
+SdRadioButton = __decorateClass([
+  customElement("sd-4-0-0-next-0-radio-button")
+], SdRadioButton);
+
+export {
+  SdRadioButton
+};

package/dist-versioned/chunks/chunk.N4LHE3QK.js

@@ -0,0 +1,46 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.S3NI7NKU.js";
+
+// src/utilities/animation-registry.ts
+var defaultAnimationRegistry = /* @__PURE__ */ new Map();
+var customAnimationRegistry = /* @__PURE__ */ new WeakMap();
+function ensureAnimation(animation) {
+  return animation != null ? animation : { keyframes: [], options: { duration: 0 } };
+}
+function getLogicalAnimation(animation, dir) {
+  if (dir.toLowerCase() === "rtl") {
+    return {
+      keyframes: animation.rtlKeyframes || animation.keyframes,
+      options: animation.options
+    };
+  }
+  return animation;
+}
+function setDefaultAnimation(animationName, animation) {
+  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
+}
+function setAnimation(el, animationName, animation) {
+  customAnimationRegistry.set(el, __spreadProps(__spreadValues({}, customAnimationRegistry.get(el)), { [animationName]: ensureAnimation(animation) }));
+}
+function getAnimation(el, animationName, options) {
+  const customAnimation = customAnimationRegistry.get(el);
+  if (customAnimation == null ? void 0 : customAnimation[animationName]) {
+    return getLogicalAnimation(customAnimation[animationName], options.dir);
+  }
+  const defaultAnimation = defaultAnimationRegistry.get(animationName);
+  if (defaultAnimation) {
+    return getLogicalAnimation(defaultAnimation, options.dir);
+  }
+  return {
+    keyframes: [],
+    options: { duration: 0 }
+  };
+}
+
+export {
+  setDefaultAnimation,
+  setAnimation,
+  getAnimation
+};

package/dist-versioned/chunks/chunk.NM6QP6RJ.js

@@ -0,0 +1,114 @@
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/tag/tag.ts
+import { css } from "lit";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query } from "lit/decorators.js";
+import cx from "classix";
+var SdTag = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.size = "lg";
+    this.selected = false;
+    this.toggleable = false;
+    this.removable = false;
+    this.disabled = false;
+    this.href = "";
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleRemoveClick() {
+    this.emit("sd-remove");
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  /** Simulates a click on the tag. */
+  click() {
+    this.tag.click();
+  }
+  /** Sets focus on the tag. */
+  focus(options) {
+    this.tag.focus(options);
+  }
+  /** Removes focus from the tag. */
+  blur() {
+    this.tag.blur();
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`<${tag} part="base" type="${ifDefined(isLink ? void 0 : "button")}" href="${ifDefined(isLink ? this.href : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" aria-disabled="${this.disabled ? "true" : "false"}" aria-pressed="${ifDefined(this.toggleable ? this.selected : void 0)}" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${cx(
+      /* basic styles of the wrapper */
+      "inline-flex border box-border rounded-full items-center leading-none whitespace-nowrap focus-visible:focus-outline",
+      {
+        /* sizes, fonts */
+        lg: "h-8 text-base gap-2",
+        sm: "h-6 text-sm gap-1"
+      }[this.size],
+      {
+        /* padding */
+        lg: !this.removable ? "px-4 py-2" : "pl-4 pr-3 py-2",
+        sm: !this.removable ? "px-3 py-[5px]" : "pl-3 pr-2 py-2"
+      }[this.size],
+      /* colors */
+      !this.selected ? "border-primary text-primary hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500  disabled:border-neutral-500 disabled:text-neutral-500" : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
+      this.disabled && !isLink && "cursor-not-allowed"
+    )}"><slot part="content"></slot>${this.removable ? html`<slot part="removable-indicator" name="removable-indicator" @click="${this.handleRemoveClick}" class="${cx(
+      {
+        /* sizes, fonts */
+        lg: "text-base",
+        sm: "text-[12px]"
+      }[this.size]
+    )}"><sd-4-0-0-next-0-icon library="system" name="close" label="remove"></sd-4-0-0-next-0-icon></slot>` : ""}</${tag}>`;
+  }
+};
+SdTag.styles = [
+  ...SolidElement.styles,
+  css`:host{display:inline-block}`
+];
+__decorateClass([
+  query("a, button")
+], SdTag.prototype, "tag", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdTag.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTag.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTag.prototype, "toggleable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTag.prototype, "removable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTag.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], SdTag.prototype, "href", 2);
+__decorateClass([
+  property()
+], SdTag.prototype, "target", 2);
+__decorateClass([
+  property()
+], SdTag.prototype, "download", 2);
+SdTag = __decorateClass([
+  customElement("sd-4-0-0-next-0-tag")
+], SdTag);
+
+export {
+  SdTag
+};

package/dist-versioned/chunks/chunk.NOWCQZBS.js

@@ -0,0 +1,17 @@
+// src/internal/debounce.ts
+var TIMER_ID_KEY = Symbol();
+var debounce = (delay) => {
+  return (_target, _propertyKey, descriptor) => {
+    const fn = descriptor.value;
+    descriptor.value = function(...args) {
+      clearTimeout(this[TIMER_ID_KEY]);
+      this[TIMER_ID_KEY] = window.setTimeout(() => {
+        fn.apply(this, args);
+      }, delay);
+    };
+  };
+};
+
+export {
+  debounce
+};

package/dist-versioned/chunks/chunk.P52GZVKG.js

@@ -0,0 +1,29 @@
+import {
+  requestInclude
+} from "./chunk.RPB53XXV.js";
+
+// src/components/icon/request.ts
+var iconFiles = /* @__PURE__ */ new Map();
+async function requestIcon(url) {
+  if (iconFiles.has(url)) {
+    return iconFiles.get(url);
+  }
+  const fileData = await requestInclude(url);
+  const iconFileData = {
+    ok: fileData.ok,
+    status: fileData.status,
+    svg: null
+  };
+  if (fileData.ok) {
+    const div = document.createElement("div");
+    div.innerHTML = fileData.html;
+    const svg = div.firstElementChild;
+    iconFileData.svg = (svg == null ? void 0 : svg.tagName.toLowerCase()) === "svg" ? svg.outerHTML : "";
+  }
+  iconFiles.set(url, iconFileData);
+  return iconFileData;
+}
+
+export {
+  requestIcon
+};