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

package/dist-versioned/chunks/chunk.65BWRJEA.js

@@ -0,0 +1,101 @@
+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/checkbox-group/checkbox-group.ts
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import cx from "classix";
+var SdCheckboxGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "label");
+    this.size = "lg";
+    this.orientation = "vertical";
+    this.label = "";
+  }
+  getAllCheckboxes() {
+    return [...this.querySelectorAll("sd-4-0-0-next-1-checkbox")];
+  }
+  async syncCheckboxElements() {
+    const checkboxes = this.getAllCheckboxes();
+    await Promise.all(
+      // Sync the checked state and size
+      checkboxes.map(async (checkbox) => {
+        await checkbox.updateComplete;
+        checkbox.size = this.size;
+      })
+    );
+  }
+  syncCheckboxes() {
+    if (customElements.get("sd-4-0-0-next-1-checkbox")) {
+      this.syncCheckboxElements();
+    } else {
+      customElements.whenDefined("sd-4-0-0-next-1-checkbox").then(() => this.syncCheckboxes());
+    }
+  }
+  handleSizeChange() {
+    this.syncCheckboxes();
+  }
+  handleInvalid() {
+    this.syncCheckboxes();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : hasLabelSlot;
+    const defaultSlot = html`<slot @slotchange="${this.syncCheckboxes}"></slot>`;
+    return html`<fieldset part="form-control" class="${cx(
+      "border-0 p-0 m-0",
+      {
+        /* sizes, fonts */
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-base"
+      }[this.size]
+    )}" role="group" aria-labelledby="label"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx("p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx(
+      {
+        vertical: "flex flex-col",
+        horizontal: "flex flex-row"
+      }[this.orientation]
+    )}">${defaultSlot}</div></fieldset>`;
+  }
+};
+/**
+ * Inherits Tailwind classes and includes additional styling.
+ */
+SdCheckboxGroup.styles = [
+  ...SolidElement.styles,
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-0-0-next-1-checkbox){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-0-0-next-1-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-0-0-next-1-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-0-0-next-1-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-0-0-next-1-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-0-0-next-1-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
+];
+__decorateClass([
+  property({ reflect: true })
+], SdCheckboxGroup.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdCheckboxGroup.prototype, "orientation", 2);
+__decorateClass([
+  property()
+], SdCheckboxGroup.prototype, "label", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], SdCheckboxGroup.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("invalid", { waitUntilFirstUpdate: true })
+], SdCheckboxGroup.prototype, "handleInvalid", 1);
+SdCheckboxGroup = __decorateClass([
+  customElement("sd-4-0-0-next-1-checkbox-group")
+], SdCheckboxGroup);
+
+export {
+  SdCheckboxGroup
+};

package/dist-versioned/chunks/chunk.6CUAQSFA.js

@@ -0,0 +1,56 @@
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/tab-panel/tab-panel.ts
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import cx from "classix";
+var id = 0;
+var SdTabPanel = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `sd-4-0-0-next-1-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return html`<slot part="base" class="${cx("block", this.active && "tab-panel--active")}"></slot>`;
+  }
+};
+SdTabPanel.styles = [
+  ...SolidElement.styles,
+  css`:host{--padding:0;display:none}:host([active]){display:block}::part(base){padding:var(--padding)}`
+];
+__decorateClass([
+  property({ reflect: true })
+], SdTabPanel.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], SdTabPanel.prototype, "handleActiveChange", 1);
+SdTabPanel = __decorateClass([
+  customElement("sd-4-0-0-next-1-tab-panel")
+], SdTabPanel);
+
+export {
+  SdTabPanel
+};

package/dist-versioned/chunks/chunk.6DKXZWRN.js

@@ -0,0 +1,69 @@
+// src/utilities/autocomplete-config.ts
+function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoView } = {
+  setValueOnSelection: true,
+  scrollSelectionIntoView: true
+}) {
+  const sdInput = !selector ? document.querySelector("#autoComplete") : typeof selector === "string" ? document.querySelector(selector) : selector;
+  const input = sdInput.shadowRoot.querySelector("input");
+  const css = (string) => string[0];
+  input.addEventListener("init", () => {
+    var _a, _b;
+    const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
+    ul == null ? void 0 : ul.setAttribute("part", "listbox");
+    const popup = document.createElement("sd-4-0-0-next-1-popup");
+    popup.appendChild(ul);
+    (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
+    popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
+    if (popup) {
+      popup.active = false;
+      popup.autoSize = "vertical";
+      popup.autoSizePadding = 16;
+      popup.placement = "bottom-start";
+      popup.anchor = sdInput;
+      popup.sync = "width";
+    }
+    const styles = css`sd-4-0-0-next-1-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-0-0-next-1-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-0-0-next-1-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-4-0-0-next-1-popup li{list-style-type:""}sd-4-0-0-next-1-popup li mark{background-color:transparent;font-weight:700}sd-4-0-0-next-1-popup li:not(:has(sd-4-0-0-next-1-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-4-0-0-next-1-popup li:not(:has(sd-4-0-0-next-1-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-0-0-next-1-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(styles);
+    sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
+  });
+  if (setValueOnSelection) {
+    input.addEventListener("selection", (event) => {
+      var _a;
+      sdInput.value = (_a = event == null ? void 0 : event.detail) == null ? void 0 : _a.selection.value;
+    });
+  }
+  input.addEventListener("open", () => {
+    var _a, _b, _c, _d, _e, _f;
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-0-0-next-1-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
+    (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
+  });
+  input.addEventListener("close", () => {
+    var _a, _b, _c, _d, _e, _f;
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-0-0-next-1-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
+    (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
+  });
+  if (scrollSelectionIntoView) {
+    input.addEventListener("navigate", () => {
+      const selected = sdInput.shadowRoot.querySelector('[aria-selected="true"]');
+      selected == null ? void 0 : selected.scrollIntoView({ block: "nearest" });
+    });
+  }
+  return {
+    config: {
+      selector: () => {
+        return input;
+      },
+      resultsList: {
+        tag: "ul"
+      },
+      wrapper: false
+    }
+  };
+}
+
+export {
+  setupAutocomplete
+};

package/dist-versioned/chunks/chunk.6JI7NL3E.js

@@ -0,0 +1,65 @@
+import {
+  SdAccordion
+} from "./chunk.DAM3ICHP.js";
+import {
+  setDefaultAnimation
+} from "./chunk.N4LHE3QK.js";
+import {
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/quickfact/quickfact.ts
+import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property } from "lit/decorators.js";
+import cx from "classix";
+var SdQuickfact = class extends SdAccordion {
+  constructor() {
+    super(...arguments);
+    this.expandable = false;
+  }
+  render() {
+    return html`<div part="base" class="sm:p-6"><header part="header" id="header" class="${cx(
+      "text-base font-bold items-center focus-visible:focus-outline text-primary relative group flex flex-row hover:bg-transparent gap-3 pb-3 pt-0 px-0 sm:flex-col sm:gap-4 sm:pb-8",
+      this.expandable && "cursor-pointer select-none"
+    )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
+      "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
+      this.expandable ? "text-primary" : "text-black cursor-default"
+    )}">${this.summary}</slot><span part="summary-icon" class="${cx(
+      "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-all ease-in-out duration-300 text-xl sm:text-4xl sm:mt-2",
+      this.open && "rotate-180",
+      !this.expandable && "hidden"
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-0-0-next-1-icon library="system" name="chevron-down"></sd-4-0-0-next-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-0-0-next-1-icon library="system" name="chevron-down"></sd-4-0-0-next-1-icon></slot></span></header><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></div>`;
+  }
+};
+SdQuickfact.styles = [
+  ...SdAccordion.styles,
+  css`:host{display:block}@media (min-width:640px){[part=summary-icon]{font-size:var(--sd-spacing-12,3rem)}}[part=icon]{font-size:var(--sd-spacing-12,3rem)}@media (min-width:640px){[part=icon]{font-size:var(--sd-spacing-24,6rem)}}`
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdQuickfact.prototype, "expandable", 2);
+SdQuickfact = __decorateClass([
+  customElement("sd-4-0-0-next-1-quickfact")
+], SdQuickfact);
+setDefaultAnimation("quickfact.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 300, easing: "ease" }
+});
+setDefaultAnimation("quickfact.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 300, easing: "ease" }
+});
+
+export {
+  SdQuickfact
+};

package/dist-versioned/chunks/chunk.727ERQ4F.js

@@ -0,0 +1,232 @@
+import {
+  Modal
+} from "./chunk.VBQLCQSN.js";
+import {
+  lockBodyScrolling,
+  unlockBodyScrolling
+} from "./chunk.WDWV53JP.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.N4LHE3QK.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.EY4JPJJQ.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
+import {
+  LocalizeController
+} from "./chunk.YKM42GKF.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/dialog/dialog.ts
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import cx from "classix";
+var SdDialog = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.headline = "";
+    this.noCloseButton = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.modal = new Modal(this);
+  }
+  firstUpdated() {
+    this.dialog.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      this.modal.activate();
+      lockBodyScrolling(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unlockBodyScrolling(this);
+  }
+  requestClose(source) {
+    const sdRequestClose = this.emit("sd-request-close", {
+      cancelable: true,
+      detail: { source }
+    });
+    if (sdRequestClose.defaultPrevented) {
+      const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
+      animateTo(this.panel, animation.keyframes, animation.options);
+      return;
+    }
+    this.hide();
+  }
+  addOpenListeners() {
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  removeOpenListeners() {
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  handleDocumentKeyDown(event) {
+    if (this.open && event.key === "Escape") {
+      event.stopPropagation();
+      this.requestClose("keyboard");
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("sd-show");
+      this.addOpenListeners();
+      this.originalTrigger = document.activeElement;
+      this.modal.activate();
+      lockBodyScrolling(this);
+      const autoFocusTarget = this.querySelector("[autofocus]");
+      if (autoFocusTarget) {
+        autoFocusTarget.removeAttribute("autofocus");
+      }
+      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      this.dialog.hidden = false;
+      requestAnimationFrame(() => {
+        const slInitialFocus = this.emit("sd-initial-focus", { cancelable: true });
+        if (!slInitialFocus.defaultPrevented) {
+          if (autoFocusTarget) {
+            autoFocusTarget.focus({ preventScroll: true });
+          } else {
+            this.panel.focus({ preventScroll: true });
+          }
+        }
+        if (autoFocusTarget) {
+          autoFocusTarget.setAttribute("autofocus", "");
+        }
+      });
+      const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+      ]);
+      this.emit("sd-after-show");
+    } else {
+      this.emit("sd-hide");
+      this.removeOpenListeners();
+      this.modal.deactivate();
+      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+      const panelAnimation = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
+      const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
+      await Promise.all([
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+          this.overlay.hidden = true;
+        }),
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+          this.panel.hidden = true;
+        })
+      ]);
+      this.dialog.hidden = true;
+      this.overlay.hidden = false;
+      this.panel.hidden = false;
+      unlockBodyScrolling(this);
+      const trigger = this.originalTrigger;
+      if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+        setTimeout(() => trigger.focus());
+      }
+      this.emit("sd-after-hide");
+    }
+  }
+  /** Shows the dialog. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sd-after-show");
+  }
+  /** Hides the dialog */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sd-after-hide");
+  }
+  render() {
+    return html`<div part="base" class="${cx(
+      "flex items-center justify-center fixed inset-0 z-dialog",
+      this.hasSlotController.test("footer") && "dialog--has-footer"
+    )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
+      "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted",
+      this.open && "flex opacity-100"
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-4-0-0-next-1-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-4-0-0-next-1-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-0-0-next-1-icon></sd-4-0-0-next-1-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+  }
+};
+SdDialog.styles = [
+  ...SolidElement.styles,
+  css`:host{--width:662px}[part=panel]{width:var(--width)}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=footer]{width:100%}}`
+];
+__decorateClass([
+  query('[part="base"]')
+], SdDialog.prototype, "dialog", 2);
+__decorateClass([
+  query('[part="panel"]')
+], SdDialog.prototype, "panel", 2);
+__decorateClass([
+  query('[part="overlay"]')
+], SdDialog.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdDialog.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdDialog.prototype, "headline", 2);
+__decorateClass([
+  property({ attribute: "no-close-button", type: Boolean, reflect: true })
+], SdDialog.prototype, "noCloseButton", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SdDialog.prototype, "handleOpenChange", 1);
+SdDialog = __decorateClass([
+  customElement("sd-4-0-0-next-1-dialog")
+], SdDialog);
+setDefaultAnimation("dialog.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("dialog.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("dialog.denyClose", {
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("dialog.overlay.show", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("dialog.overlay.hide", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250 }
+});
+
+export {
+  SdDialog
+};

package/dist-versioned/chunks/chunk.76ZNNLGN.js

@@ -0,0 +1,106 @@
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/teaser/teaser.ts
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdTeaser = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "white";
+    this.breakpoint = 448;
+    this.inset = false;
+    this.hasSlotController = new HasSlotController(this, "[default]", "media", "meta", "headline");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.breakpoint === 0) {
+      this._orientation = "horizontal";
+    } else if (this.breakpoint === 9999) {
+      this._orientation = "vertical";
+    } else if (window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => this.updateOrientation());
+      this.resizeObserver.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("breakpoint")) {
+      this.updateOrientation();
+    }
+  }
+  updateOrientation() {
+    this._orientation = this.offsetWidth >= this.breakpoint ? "horizontal" : "vertical";
+  }
+  render() {
+    const inset = this.variant === "white border-neutral-400" || this.inset;
+    const slots = {
+      "teaser-has-default": this.hasSlotController.test("[default]"),
+      "teaser-has-media": this.hasSlotController.test("media"),
+      "teaser-has-meta": this.hasSlotController.test("meta"),
+      "teaser-has-headline": this.hasSlotController.test("headline")
+    };
+    return html`<div class="${cx(
+      "flex",
+      {
+        white: "bg-white",
+        "white border-neutral-400": "bg-white border border-neutral-400",
+        "neutral-100": "bg-neutral-100",
+        primary: "bg-primary text-white",
+        "primary-100": "bg-primary-100"
+      }[this.variant],
+      this._orientation === "vertical" && "flex-col",
+      this._orientation === "horizontal" && "flex-row gap-8",
+      this._orientation === "horizontal" && inset && "py-8 px-10"
+    )}" part="base"><div part="media" id="media" aria-hidden="true" style="${this._orientation === "horizontal" ? `width: var(--distribution-media, 100%);` : ""}" class="${cx(
+      !inset && this._orientation === "vertical" && "mb-4",
+      !slots["teaser-has-media"] && "hidden",
+      this.variant === "white border-neutral-400" && this._orientation === "vertical" && "mx-[-1px] mt-[-1px]"
+    )}"><slot name="media"></slot></div><div style="${this._orientation === "horizontal" ? `width: var(--distribution-content, 100%); ${inset ? "width: var(--distribution-content, calc(100% - 2rem));" : ""}` : ""}" class="${cx(
+      "flex flex-col text-left",
+      this._orientation === "horizontal" && `flex flex-col`,
+      this._orientation === "vertical" && inset && "m-4"
+    )}" part="content"><div class="flex flex-col-reverse"><div part="headline" class="${cx("text-lg font-bold m-0", this.variant === "primary" ? "text-white" : "text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="meta" class="${cx("gap-2 mb-4", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}" aria-labelledby="media"><slot></slot></div></div></div>`;
+  }
+};
+SdTeaser.styles = [
+  ...SolidElement.styles,
+  css`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:var(--sd-spacing-0,0)!important}`
+];
+__decorateClass([
+  property({ reflect: true })
+], SdTeaser.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true, type: Number })
+], SdTeaser.prototype, "breakpoint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdTeaser.prototype, "inset", 2);
+__decorateClass([
+  query('[part="base"]')
+], SdTeaser.prototype, "teaser", 2);
+__decorateClass([
+  state()
+], SdTeaser.prototype, "_orientation", 2);
+SdTeaser = __decorateClass([
+  customElement("sd-4-0-0-next-1-teaser")
+], SdTeaser);
+
+export {
+  SdTeaser
+};