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

package/dist/chunks/chunk.7OHSCBBX.js

@@ -0,0 +1,72 @@
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/teaser-media/teaser-media.ts
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import cx from "classix";
+var SdTeaserMedia = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "white";
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "media",
+      "meta",
+      "headline",
+      "expandable"
+    );
+  }
+  render() {
+    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"),
+      "teaser-has-expandable": this.hasSlotController.test("expandable")
+    };
+    return html`<div class="relative flex flex-col group" part="base"><div class="${cx("mb-4", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div><div class="absolute flex flex-col justify-end h-full w-full pb-4"><div class="${cx(
+      "flex-1",
+      this.variant === "gradient-light" && "bg-gradient-to-t from-white/[.8] to-60%",
+      this.variant === "gradient-dark" && "bg-gradient-to-t from-primary-800/[.6] to-60%"
+    )}"></div><div class="${cx(
+      {
+        white: "bg-white/[.8] group-hover:bg-white/90",
+        "neutral-100": "bg-neutral-100/[.8] group-hover:bg-neutral-100/90",
+        primary: "bg-primary/[.8] text-white group-hover:bg-primary/90",
+        "primary-100": "bg-primary-100/[.8] group-hover:bg-primary-100/90",
+        "gradient-light": "bg-gradient-to-t from-white/90 to-white/[.8]",
+        "gradient-dark": "bg-gradient-to-t from-primary-800/75 to-primary-800/[.6]  text-white"
+      }[this.variant]
+    )}"><div class="flex-col text-left p-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="text-lg font-bold m-0"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div class="${cx(
+      "hidden",
+      slots["teaser-has-expandable"] && "h-[0px] invisible opacity-0 md:[transition:_height_0.2s_linear,opacity_0.1s_linear_0.1s] md:block md:group-hover:h-auto md:group-hover:my-4 md:group-hover:opacity-[100%] md:group-hover:visible"
+    )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}"><slot></slot></div></div></div></div></div>`;
+  }
+};
+SdTeaserMedia.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 })
+], SdTeaserMedia.prototype, "variant", 2);
+__decorateClass([
+  query('[part="base"]')
+], SdTeaserMedia.prototype, "teaserMedia", 2);
+SdTeaserMedia = __decorateClass([
+  customElement("sd-teaser-media")
+], SdTeaserMedia);
+
+export {
+  SdTeaserMedia
+};

package/dist/chunks/chunk.7VPFFNHR.js

@@ -0,0 +1,41 @@
+// src/components/icon/library.default.ts
+var defaultLibrary = {
+  name: "default",
+  resolver: (name) => {
+    const path = name.split("/");
+    if (path[0] === "content" || path[0] === "system") {
+      name = "union-investment/" + name;
+    }
+    return `https://celum-icons.fe.union-investment.de/${name}.svg`;
+  },
+  mutator: (svg) => {
+    const recoloredElements = {
+      currentColorFills: [],
+      currentColorStrokes: [],
+      greenFills: [],
+      greenStrokes: []
+    };
+    recoloredElements["currentColorFills"] = svg.querySelectorAll('[fill="#00358e" i]');
+    recoloredElements["currentColorStrokes"] = svg.querySelectorAll('[stroke="#00358e" i]');
+    recoloredElements["greenFills"] = svg.querySelectorAll('[fill="#2d9d00" i]');
+    recoloredElements["greenStrokes"] = svg.querySelectorAll('[stroke="#2d9d00" i]');
+    recoloredElements.currentColorFills.forEach((filledElement) => {
+      filledElement.setAttribute("fill", "currentColor");
+    });
+    recoloredElements.currentColorStrokes.forEach((strokedElement) => {
+      strokedElement.setAttribute("stroke", "currentColor");
+    });
+    recoloredElements.greenFills.forEach((filledElement) => {
+      filledElement.setAttribute("fill", "rgb(var(--sd-color-accent, 45 157 0) / var(--tw-bg-opacity, 1))");
+    });
+    recoloredElements.greenStrokes.forEach((strokedElement) => {
+      strokedElement.setAttribute("stroke", "rgb(var(--sd-color-accent, 45 157 0) / var(--tw-bg-opacity, 1))");
+    });
+    return svg;
+  }
+};
+var library_default_default = defaultLibrary;
+
+export {
+  library_default_default
+};

package/dist/chunks/chunk.B4BZKR24.js

@@ -0,0 +1,16 @@
+// src/internal/event.ts
+function waitForEvent(el, eventName) {
+  return new Promise((resolve) => {
+    function done(event) {
+      if (event.target === el) {
+        el.removeEventListener(eventName, done);
+        resolve();
+      }
+    }
+    el.addEventListener(eventName, done);
+  });
+}
+
+export {
+  waitForEvent
+};

package/dist/chunks/chunk.BVC5FY4L.js

@@ -0,0 +1,330 @@
+import {
+  SdRadio
+} from "./chunk.J7MMF6WJ.js";
+import {
+  FormControlController,
+  customErrorValidityState,
+  validValidityState,
+  valueMissingValidityState
+} from "./chunk.KVKRZJS7.js";
+import {
+  SdButtonGroup
+} from "./chunk.ZWJI7SLE.js";
+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-group/radio-group.ts
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdRadioGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(this, "label", "error-text");
+    this.customValidityMessage = "";
+    this.hasButtonGroup = false;
+    this.defaultValue = "";
+    this.showInvalidStyle = false;
+    this.size = "lg";
+    this.required = false;
+    this.orientation = "vertical";
+    this.label = "";
+    this.boldLabel = false;
+    this.name = "option";
+    this.value = "";
+    this.form = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return customErrorValidityState;
+    } else if (isRequiredAndEmpty) {
+      return valueMissingValidityState;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return this.customValidityMessage;
+    } else if (isRequiredAndEmpty) {
+      return this.validationInput.validationMessage;
+    }
+    return "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  getAllRadios() {
+    return [...this.querySelectorAll("sd-radio, sd-radio-button")];
+  }
+  handleRadioClick(event) {
+    const target = event.target.closest("sd-radio, sd-radio-button");
+    const radios = this.getAllRadios();
+    const oldValue = this.value;
+    if (target.disabled) {
+      return;
+    }
+    this.value = target.value;
+    radios.forEach((radio) => radio.checked = radio === target);
+    if (this.value !== oldValue) {
+      this.emit("sd-change");
+      this.emit("sd-input");
+    }
+  }
+  handleKeyDown(event) {
+    var _a;
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
+      return;
+    }
+    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    const checkedRadio = (_a = radios.find((radio) => radio.checked)) != null ? _a : radios[0];
+    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+    const oldValue = this.value;
+    let index = radios.indexOf(checkedRadio) + incr;
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+    this.getAllRadios().forEach((radio) => {
+      radio.checked = false;
+      if (!this.hasButtonGroup) {
+        radio.tabIndex = -1;
+      }
+    });
+    this.value = radios[index].value;
+    radios[index].checked = true;
+    if (!this.hasButtonGroup) {
+      radios[index].tabIndex = 0;
+      radios[index].focus();
+    } else {
+      radios[index].shadowRoot.querySelector("button").focus();
+    }
+    if (this.value !== oldValue) {
+      this.emit("sd-change");
+      this.emit("sd-input");
+    }
+    event.preventDefault();
+  }
+  /** Move focus to the checked radio (or the first one if none are checked) */
+  focus() {
+    const radios = this.getAllRadios();
+    const checked = radios.find((radio) => radio.checked);
+    const radioToFocus = checked || radios[0];
+    if (radioToFocus) {
+      radioToFocus.focus();
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
+  }
+  async syncRadioElements() {
+    var _a, _b;
+    const radios = this.getAllRadios();
+    await Promise.all(
+      // Sync the checked state and size
+      radios.map(async (radio) => {
+        await radio.updateComplete;
+        radio.checked = radio.value === this.value;
+        radio.size = this.size;
+        if (radio instanceof SdRadio) {
+          radio.invalid = this.showInvalidStyle;
+        }
+      })
+    );
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-radio-button");
+    if (!radios.some((radio) => radio.checked)) {
+      if (this.hasButtonGroup) {
+        const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
+        if (buttonRadio) {
+          buttonRadio.tabIndex = 0;
+        }
+      } else {
+        radios[0].tabIndex = 0;
+      }
+    }
+    if (this.hasButtonGroup) {
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-button-group");
+      if (buttonGroup) {
+        buttonGroup.disableRole = true;
+      }
+    }
+  }
+  syncRadios() {
+    if (customElements.get("sd-radio") && customElements.get("sd-radio-button")) {
+      this.syncRadioElements();
+      return;
+    }
+    if (customElements.get("sd-radio")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("sd-radio").then(() => this.syncRadios());
+    }
+    if (customElements.get("sd-radio-button")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("sd-radio-button").then(() => this.syncRadios());
+    }
+  }
+  updateCheckedRadio() {
+    const radios = this.getAllRadios();
+    radios.forEach((radio) => radio.checked = radio.value === this.value);
+    this.formControlController.setValidity(this.validity.valid);
+  }
+  handleSizeChange() {
+    this.syncRadios();
+  }
+  handleInvalidChange() {
+    this.syncRadios();
+  }
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedRadio();
+      this.reportValidity();
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (isRequiredAndEmpty || hasCustomValidityMessage) {
+      this.formControlController.emitInvalidEvent();
+      return false;
+    }
+    return true;
+  }
+  /** 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() {
+    const isValid = this.validity.valid;
+    this.formControlController.setValidity(isValid);
+    this.validationInput.hidden = true;
+    clearTimeout(this.validationTimeout);
+    this.formControlController.fakeUserInteraction();
+    if (!isValid) {
+      this.validationInput.hidden = false;
+      this.validationInput.reportValidity();
+      this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
+    }
+    return isValid;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message = "") {
+    this.customValidityMessage = message;
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const defaultSlot = html`<slot @slotchange="${this.syncRadios}" @click="${this.handleRadioClick}" @keydown="${this.handleKeyDown}"></slot>`;
+    return html`<fieldset part="form-control" class="${cx(
+      "border-0 p-0 m-0 flex flex-col",
+      {
+        /* sizes, fonts */
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-base"
+      }[this.size]
+    )}" role="radiogroup" aria-describedby="invalid-message"><div class="flex items-center gap-1 mb-2"><legend part="form-control-label" id="label" class="${cx("p-0 leading-normal text-black text-left", !hasLabel && "hidden", this.boldLabel && "font-bold")}" @click="${this.focus}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></legend><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx(
+      "flex",
+      {
+        vertical: "flex-col",
+        horizontal: "flex-row"
+      }[this.orientation]
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-button-group>` : defaultSlot}</div></fieldset>${this.formControlController.renderInvalidMessage()}`;
+  }
+};
+SdRadioGroup.dependencies = { "sd-button-group": SdButtonGroup };
+/**
+ * Inherits Tailwind classes and includes additional styling.
+ */
+SdRadioGroup.styles = [
+  ...SolidElement.styles,
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`
+];
+__decorateClass([
+  query("slot:not([name])")
+], SdRadioGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  query("#validation-input")
+], SdRadioGroup.prototype, "validationInput", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdRadioGroup.prototype, "invalidMessage", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "hasButtonGroup", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "showInvalidStyle", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioGroup.prototype, "required", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "orientation", 2);
+__decorateClass([
+  property()
+], SdRadioGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioGroup.prototype, "boldLabel", 2);
+__decorateClass([
+  property()
+], SdRadioGroup.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "form", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], SdRadioGroup.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("showInvalidStyle", { waitUntilFirstUpdate: true })
+], SdRadioGroup.prototype, "handleInvalidChange", 1);
+__decorateClass([
+  watch("value")
+], SdRadioGroup.prototype, "handleValueChange", 1);
+SdRadioGroup = __decorateClass([
+  customElement("sd-radio-group")
+], SdRadioGroup);
+
+export {
+  SdRadioGroup
+};

package/dist/chunks/chunk.BXB5WF23.js

@@ -0,0 +1,194 @@
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/navigation-item/navigation-item.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 SdNavigationItem = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "description", "children");
+    this.vertical = false;
+    this.size = "md";
+    this.current = false;
+    this.disabled = false;
+    this.chevron = false;
+    this.relaxed = false;
+    this.divider = false;
+    this.indented = false;
+    this.open = false;
+    this.separated = false;
+  }
+  get isButton() {
+    return !this.href && !this.hasSlotController.test("children");
+  }
+  get isLink() {
+    return !!this.href;
+  }
+  get isAccordion() {
+    return !this.href && this.hasSlotController.test("children");
+  }
+  handleClickButton(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  handleClickSummary(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!this.disabled) {
+      if (this.open) {
+        this.hideDetails();
+      } else {
+        this.showDetails();
+      }
+    }
+  }
+  hideDetails() {
+    this.open = false;
+    this.emit("sd-hide", { cancelable: true });
+  }
+  showDetails() {
+    this.open = true;
+    this.emit("sd-show", { cancelable: true });
+  }
+  get calculatePaddingX() {
+    if (this.relaxed && this.indented) return "pl-8 pr-4";
+    if (this.relaxed) return "px-4";
+    if (this.indented) return "pl-4";
+    return "";
+  }
+  get tag() {
+    if (this.isAccordion && !this.isLink) {
+      return literal`summary`;
+    }
+    if (this.separated) {
+      return literal`div`;
+    }
+    if (this.isLink) {
+      return literal`a`;
+    }
+    return literal`button`;
+  }
+  render() {
+    const tag = this.tag;
+    const isLink = this.isLink;
+    const isButton = this.isButton;
+    const isAccordion = this.isAccordion;
+    const slots = {
+      label: this.hasSlotController.test("[default]"),
+      main: this.hasSlotController.test("main"),
+      description: this.hasSlotController.test("description"),
+      children: this.hasSlotController.test("children")
+    };
+    const horizontalPaddingBottom = this.vertical ? "pb-3" : "pb-2";
+    const root = html`<${tag} part="base" class="${cx(
+      "cursor-pointer relative focus-visible:focus-outline",
+      { md: "text-base", lg: "text-lg", sm: "text-[14px]" }[this.size],
+      this.disabled ? "text-neutral-500 pointer-events-none" : "text-primary",
+      isAccordion ? "flex flex-col" : "inline-block w-full",
+      this.divider && this.vertical && "mt-0.25",
+      !this.vertical && "inline-flex items-center",
+      !this.separated && "hover:bg-neutral-200 group transition-all min-h-[48px] px-4"
+    )}" aria-controls="${ifDefined(isAccordion ? "navigation-item-details" : void 0)}" aria-current="${ifDefined(this.current ? "page" : void 0)}" aria-disabled="${this.disabled}" ?disabled="${ifDefined(isButton ? this.disabled : void 0)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${isLink ? "link" : "button"}" tabindex="${this.disabled || this.separated ? "-1" : "0"}" @click="${this.separated ? void 0 : isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : void 0}"><div part="current-indicator" class="${cx(
+      "absolute left-0 pointer-events-none transition-all duration-150",
+      this.vertical ? "w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "h-1 w-full bottom-0",
+      this.current ? "bg-accent" : "bg-transparent",
+      this.disabled && "bg-neutral-500"
+    )}"></div><span part="content-area" class="${cx(
+      "relative pt-3 inline-flex justify-between items-center",
+      isAccordion ? "grow" : "w-full",
+      slots["description"] || this.separated ? "pb-1" : horizontalPaddingBottom,
+      this.calculatePaddingX
+    )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
+      "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",
+      !slots["description"] && "py-4"
+    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="toggle-details" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+      "mr-4 h-6 w-6 transition-all",
+      isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
+    )}"></sd-icon></button>` : html`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+      "h-6 w-6 ml-2 transition-all",
+      isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
+    )}"></sd-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
+      "inline-block text-sm text-left text-black",
+      isAccordion || this.separated ? "grow" : "w-full",
+      this.separated ? "px-4" : this.calculatePaddingX,
+      horizontalPaddingBottom
+    )}"></slot>` : ""}</${tag}>`;
+    if (isAccordion) {
+      return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${root}<slot name="children"></slot></details>`;
+    }
+    if (this.separated) {
+      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col">${root}${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
+    }
+    return html`${root}`;
+  }
+};
+/**
+ * Inherits global stylesheet including TailwindCSS
+ */
+SdNavigationItem.styles = [
+  ...SolidElement.styles,
+  css`:host{box-sizing:border-box;display:inline-block;position:relative}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`
+];
+__decorateClass([
+  query('a[part="base"], button[part="base"]')
+], SdNavigationItem.prototype, "button", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "vertical", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdNavigationItem.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdNavigationItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], SdNavigationItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], SdNavigationItem.prototype, "download", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "current", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "chevron", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "relaxed", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "divider", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "indented", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNavigationItem.prototype, "separated", 2);
+SdNavigationItem = __decorateClass([
+  customElement("sd-navigation-item")
+], SdNavigationItem);
+
+export {
+  SdNavigationItem
+};