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

package/dist/chunks/chunk.IN3GJ5QL.js

@@ -0,0 +1,58 @@
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/accordion-group/accordion-group.ts
+import { css, html } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+var SdAccordionGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.closeOthers = false;
+    this.handleAccordionShow = (event) => {
+      if (this.closeOthers) {
+        this._accordionsInDefaultSlot.forEach((accordionElement) => {
+          if (accordionElement === event.target) {
+            return;
+          }
+          if (accordionElement.parentNode !== event.target.parentNode) {
+            return;
+          }
+          accordionElement.removeAttribute("open");
+        });
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("sd-show", this.handleAccordionShow);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("sd-show", this.handleAccordionShow);
+  }
+  render() {
+    return html`<div part="base"><slot></slot></div>`;
+  }
+};
+SdAccordionGroup.styles = [
+  ...SolidElement.styles,
+  css`:host{display:block}::slotted(sd-accordion:not(:first-of-type)){margin-top:-1px}`
+];
+__decorateClass([
+  queryAssignedElements({ selector: "sd-accordion" })
+], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
+__decorateClass([
+  property({ attribute: "close-others", type: Boolean })
+], SdAccordionGroup.prototype, "closeOthers", 2);
+SdAccordionGroup = __decorateClass([
+  customElement("sd-accordion-group")
+], SdAccordionGroup);
+
+export {
+  SdAccordionGroup
+};

package/dist/chunks/chunk.J2XBUIBC.js

@@ -0,0 +1,116 @@
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  LocalizeController
+} from "./chunk.YKM42GKF.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/expandable/expandable.ts
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import cx from "classix";
+var SdExpandable = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.inverted = false;
+    this.localize = new LocalizeController(this);
+  }
+  updateMaxHeight() {
+    var _a;
+    const scrollHeight = (_a = this.contentPreview) == null ? void 0 : _a.scrollHeight.toString();
+    this.style.setProperty("--max-height-pixel", `${scrollHeight}px`);
+    this.style.setProperty("--max-height", scrollHeight);
+  }
+  onToggleClick() {
+    this.updateMaxHeight();
+    this.open = !this.open;
+  }
+  onOpenChange() {
+    if (this.open) {
+      this.emit("sd-show");
+      this.updateComplete.then(() => {
+        this.emit("sd-after-show");
+      });
+    } else {
+      this.emit("sd-hide");
+      this.updateComplete.then(() => {
+        this.emit("sd-after-hide");
+      });
+    }
+    this.details.setAttribute("open", this.open.toString());
+  }
+  /** Opens the expandable */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.onToggleClick();
+    return waitForEvent(this, "sd-after-show");
+  }
+  /** Closes the expandable */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.onToggleClick();
+    return waitForEvent(this, "sd-after-hide");
+  }
+  render() {
+    return html`<details part="details"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details><button part="toggle" class="${cx(
+      "sd-interactive sd-interactive--reset !h-full !justify-center !w-full !text-base !flex !items-center !underline !underline-offset-2 !toggle",
+      this.inverted && "sd-interactive--inverted",
+      !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
+    )}" @click="${this.onToggleClick}">${this.open ? html`<slot name="toggle-open"><sd-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-icon>${this.localize.term("showMore")}</slot>`}</button>`;
+  }
+  firstUpdated() {
+    this.cloneContentToLightDOM();
+    this.details.setAttribute("open", this.open.toString());
+  }
+  cloneContentToLightDOM() {
+    const slot = document.createElement("div");
+    slot.setAttribute("slot", "clone");
+    const nodes = Array.from(this.childNodes);
+    nodes.forEach((node) => {
+      const clone = node.cloneNode(true);
+      slot.appendChild(clone);
+    });
+    this.appendChild(slot);
+  }
+};
+SdExpandable.styles = [
+  ...SolidElement.styles,
+  css`:host{--gradient-color-start:hsla(0,0%,100%,0);--gradient-color-end:#fff;--component-expandable-max-block-size:90px;--gradient-height:24px;--gradient:var(--gradient-color-start) 0%,var(--gradient-color-end) 80%,var(--gradient-color-end) 100%;display:inline-block;position:relative;width:100%}.toggle::-moz-focus-inner{border-style:none;padding:var(--sd-spacing-0,0)}details>summary::-webkit-details-marker,details[open] summary{display:none}summary{max-block-size:var(--component-expandable-max-block-size)}:host([open]) summary{max-block-size:var(--max-height-pixel,1000vh)}.content{max-block-size:var(--component-expandable-max-block-size)}:host([open]) .content{max-block-size:var(--max-height-pixel,1000vh)}:host(:not([open])) .content:after{background:linear-gradient(180deg,var(--gradient));bottom:var(--sd-spacing-0,0);content:" ";display:block;height:var(--gradient-height);left:var(--sd-spacing-0,0);position:absolute;width:100%}:host([inverted]:not([open])) .content:after{background:var(--gradient-vertical-transparent-primary,linear-gradient(180deg,rgba(0,53,142,0) 0,#00358e 80%,#00358e 100%))}`
+];
+__decorateClass([
+  query(".content-preview")
+], SdExpandable.prototype, "contentPreview", 2);
+__decorateClass([
+  query("details")
+], SdExpandable.prototype, "details", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdExpandable.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdExpandable.prototype, "inverted", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SdExpandable.prototype, "onOpenChange", 1);
+SdExpandable = __decorateClass([
+  customElement("sd-expandable")
+], SdExpandable);
+
+export {
+  SdExpandable
+};

package/dist/chunks/chunk.J7MMF6WJ.js

@@ -0,0 +1,130 @@
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/radio/radio.ts
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import cx from "classix";
+var SdRadio = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.hasFocus = false;
+    this.size = "lg";
+    this.disabled = false;
+    this.invalid = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.setInitialAttributes();
+    this.addEventListeners();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("focus", this.handleFocus);
+  }
+  removeEventListeners() {
+    this.removeEventListener("blur", this.handleBlur);
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("focus", this.handleFocus);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sd-blur");
+  }
+  handleClick() {
+    if (!this.disabled) {
+      this.checked = true;
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sd-focus");
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio");
+    this.setAttribute("tabindex", "-1");
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCheckedChange() {
+    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    this.setAttribute("tabindex", this.checked ? "0" : "-1");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  render() {
+    return html`<span part="base" class="${cx(
+      "sd-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      this.disabled && "hover:cursor-not-allowed",
+      {
+        /* sizes, fonts */
+        sm: "small-size text-sm",
+        md: "text-base",
+        lg: "text-base"
+      }[this.size]
+    )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
+      "flex-initial shrink-0 relative inline-flex items-center justify-center border rounded-full bg-white h-4 w-4",
+      this.disabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200"
+    )}">${this.checked ? html`<span part="checked" class="${cx(
+      "rounded-full inline-flex text-white border bg-accent h-2.5 w-2.5",
+      this.disabled ? "bg-neutral-500" : this.invalid ? "bg-error hover:bg-error-400 group-hover:bg-error-400" : this.checked ? "bg-accent hover:bg-accent-550 group-hover:bg-accent-550" : "bg-neutral-800"
+    )}"></span>` : ""}</span><slot part="label" class="${cx(
+      "ml-2 select-none inline-block",
+      this.disabled ? "text-neutral-500" : this.invalid ? "text-error" : "text-black"
+    )}"></slot></span>`;
+  }
+};
+/**
+ * Inherits Tailwind classes and includes additional styling.
+ */
+SdRadio.styles = [
+  ...SolidElement.styles,
+  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline:2px solid transparent;outline-offset:2px}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
+];
+__decorateClass([
+  state()
+], SdRadio.prototype, "checked", 2);
+__decorateClass([
+  state()
+], SdRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadio.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], SdRadio.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadio.prototype, "invalid", 2);
+__decorateClass([
+  watch("checked")
+], SdRadio.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdRadio.prototype, "handleDisabledChange", 1);
+SdRadio = __decorateClass([
+  customElement("sd-radio")
+], SdRadio);
+
+export {
+  SdRadio
+};

package/dist/chunks/chunk.JCK5DTZN.js

@@ -0,0 +1,43 @@
+import {
+  library_default_default
+} from "./chunk.7VPFFNHR.js";
+import {
+  library_system_default
+} from "./chunk.XS4QJO4N.js";
+
+// src/components/icon/library.ts
+var registry = [library_system_default, library_default_default];
+var watchedIcons = [];
+function watchIcon(icon) {
+  watchedIcons.push(icon);
+}
+function unwatchIcon(icon) {
+  watchedIcons = watchedIcons.filter((el) => el !== icon);
+}
+function getIconLibrary(name) {
+  return registry.find((lib) => lib.name === name);
+}
+function registerIconLibrary(name, options) {
+  unregisterIconLibrary(name);
+  registry.push({
+    name,
+    resolver: options.resolver,
+    mutator: options.mutator
+  });
+  watchedIcons.forEach((icon) => {
+    if (icon.library === name) {
+      icon.setIcon();
+    }
+  });
+}
+function unregisterIconLibrary(name) {
+  registry = registry.filter((lib) => lib.name !== name);
+}
+
+export {
+  watchIcon,
+  unwatchIcon,
+  getIconLibrary,
+  registerIconLibrary,
+  unregisterIconLibrary
+};

package/dist/chunks/chunk.JIKTGTDS.js

@@ -0,0 +1,49 @@
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/divider/divider.ts
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import cx from "classix";
+var SdDivider = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.inverted = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  render() {
+    return html`<hr part="main" class="${cx(
+      this.inverted ? "border-primary-400" : "border-neutral-400",
+      this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
+    )}">`;
+  }
+};
+/**
+ * Inherits global stylesheet including TailwindCSS
+ */
+SdDivider.styles = [
+  ...SolidElement.styles,
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-divider[orientation=horizontal]){display:block}:host(sd-divider[orientation=vertical]){display:inline-block}`
+];
+__decorateClass([
+  property({ reflect: true })
+], SdDivider.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdDivider.prototype, "inverted", 2);
+SdDivider = __decorateClass([
+  customElement("sd-divider")
+], SdDivider);
+
+export {
+  SdDivider
+};

package/dist/chunks/chunk.KJFKVSZA.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 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]"
+    )}" part="media"><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 part="meta" class="${cx("gap-2 mb-4", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div><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="main" class="${cx(!slots["teaser-has-default"] && "hidden")}"><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-teaser")
+], SdTeaser);
+
+export {
+  SdTeaser
+};