@solid-design-system/components 1.3.13 → 1.5.0

package/dist/package/components/brandshape/brandshape.js

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

package/dist/package/components/button/button.d.ts

@@ -38,7 +38,7 @@ export default class SdButton extends SolidElement implements SolidFormControl {
     checkValidity(): boolean;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
-    render(): import("lit").TemplateResult;
+    render(): import("lit-html").TemplateResult;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/button/button.js

@@ -123,10 +123,7 @@ let SdButton = class extends SolidElement {
       "icon-right": this.hasSlotController.test("icon-right"),
       "icon-only": this._iconsInDefaultSlot.length > 0
     };
-    return html`
-      <${tag}
-      part="base"
-      class=${cx(
+    return html`<${tag} part="base" class="${cx(
       `font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
         w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center
         border transition-colors duration-200 ease-in-out rounded-md
@@ -168,28 +165,11 @@ let SdButton = class extends SolidElement {
           active:text-primary-200 active:bg-primary-800
           disabled:text-neutral-600`,
         cta: `text-white bg-accent border-transparent
-          hover:bg-accent-300
-          active:bg-accent-500
+          hover:bg-accent-550
+          active:bg-accent-700
           ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} disabled:text-white`
       }[this.variant]
-    )}
-        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
-        type=${ifDefined(isLink ? void 0 : this.type)}
-        title=${this.title}
-        name=${ifDefined(isLink ? void 0 : this.name)}
-        value=${ifDefined(isLink ? void 0 : this.value)}
-        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=${ifDefined(isLink ? void 0 : "button")}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex=${this.disabled ? "-1" : "0"}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
-        @click=${this.handleClick}
-      >
-        <slot name="icon-left" part="icon-left" class=${cx(
+    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" 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="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled ? "true" : "false"}" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       slots["icon-only"] && "hidden",
       this.loading && "invisible",
@@ -198,14 +178,10 @@ let SdButton = class extends SolidElement {
         md: "mr-2",
         lg: "mr-2"
       }[this.size]
-    )}></slot>
-        <slot part="label" class=${cx(
+    )}"></slot><slot part="label" class="${cx(
       slots["icon-only"] ? "flex flex-auto items-center pointer-events-none" : "inline-block",
       this.loading && "invisible"
-    )}></slot>
-        <slot name="icon-right"
-          part="icon-right"
-          class=${cx(
+    )}"></slot><slot name="icon-right" part="icon-right" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       this.loading && "invisible",
       slots["icon-only"] && "hidden",
@@ -214,108 +190,13 @@ let SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}>
-        </slot>
-      ${this.loading ? html`<sd-spinner
-              class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"
-            ></sd-spinner>` : ""}
-      </${tag}>
-    `;
+    )}"></slot>${this.loading ? html`<sd-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-spinner>` : ""}</${tag}>`;
   }
 };
 SdButton.styles = [
   componentStyles,
   SolidElement.styles,
-  css`
-      :host {
-        display: inline-block;
-        position: relative;
-        width: auto;
-        cursor: pointer;
-      }
-
-      sd-spinner {
-        --indicator-color: currentColor;
-        --track-color: var(--tw-varcolor-200);
-      }
-
-      /*
-    * Badges:
-    * Slotted badges are positioned absolutely in the top right corner of the button.
-    */
-
-      ::slotted(sd-badge) {
-        position: absolute;
-        top: 0;
-        right: 0;
-        translate: 50% -50%;
-        pointer-events: none;
-      }
-
-      /**
-       * sd-icons should automatically resize correctly based on the button size.
-       */
-
-      ::slotted(sd-icon),
-      sd-spinner {
-        font-size: calc(var(--tw-varspacing) / 2);
-      }
-
-      ///*
-      // * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-      // * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-      // * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-      // * buttons and we style them here instead.
-      // */
-
-      // :host(.sd-button-group__button--first:not(.sd-button-group__button--last)) .button {
-      //   border-start-end-radius: 0;
-      //   border-end-end-radius: 0;
-      // }
-
-      // :host(.sd-button-group__button--inner) .button {
-      //   border-radius: 0;
-      // }
-
-      // :host(.sd-button-group__button--last:not(.sd-button-group__button--first)) .button {
-      //   border-start-start-radius: 0;
-      //   border-end-start-radius: 0;
-      // }
-
-      // /* All except the first */
-      // :host(.sd-button-group__button:not(.sd-button-group__button--first)) {
-      //   margin-inline-start: calc(-1 * var(--sd-input-border-width));
-      // }
-
-      // /* Add a visual separator between solid buttons */
-      // :host(
-      //     .sd-button-group__button:not(
-      //         .sd-button-group__button--first,
-      //         .sd-button-group__button--radio,
-      //         [variant='default']
-      //       ):not(:hover)
-      //   )
-      //   .button:after {
-      //   content: '';
-      //   position: absolute;
-      //   top: 0;
-      //   inset-inline-start: 0;
-      //   bottom: 0;
-      //   border-left: solid 1px rgb(128 128 128 / 33%);
-      //   mix-blend-mode: multiply;
-      // }
-
-      // /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-      // :host(.sd-button-group__button--hover) {
-      //   z-index: 1;
-      // }
-
-      // /* Focus and checked are always on top */
-      // :host(.sd-button-group__button--focus),
-      // :host(.sd-button-group__button[checked]) {
-      //   z-index: 2;
-      // }
-    `
+  css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-icon),sd-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
 ];
 __decorateClass([
   query("a, button")

package/dist/package/components/divider/divider.d.ts

@@ -0,0 +1,13 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdDivider extends SolidElement {
+    orientation: 'horizontal' | 'vertical';
+    inverted: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-divider': SdDivider;
+    }
+}

package/dist/package/components/divider/divider.js

@@ -0,0 +1,50 @@
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let 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"
+    )}">`;
+  }
+};
+SdDivider.styles = [
+  componentStyles,
+  SolidElement.styles,
+  css`:host{margin: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 as default
+};

package/dist/package/components/icon/icon.d.ts

@@ -12,7 +12,7 @@ export default class SdIcon extends SolidElement {
     private getUrl;
     handleLabelChange(): void;
     setIcon(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist/package/components/icon/icon.js

@@ -1,6 +1,6 @@
 import { css, html } from "lit";
 import { state, property, customElement } from "lit/decorators.js";
-import { unwatchIcon, getIconLibrary, watchIcon } from "./library.js";
+import { watchIcon, unwatchIcon, getIconLibrary } from "./library.js";
 import { requestIcon } from "./request.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { watch } from "../../internal/watch.js";

package/dist/package/components/icon/library.js

@@ -10,8 +10,26 @@ function unwatchIcon(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 {
   getIconLibrary,
+  registerIconLibrary,
+  unregisterIconLibrary,
   unwatchIcon,
   watchIcon
 };

package/dist/package/components/include/include.d.ts

@@ -7,7 +7,7 @@ export default class SdInclude extends SolidElement {
     allowScripts: boolean;
     private executeScript;
     handleSrcChange(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/package/components/link/link.d.ts

@@ -12,7 +12,7 @@ export default class SdLink extends SolidElement {
     private handleFocus;
     focus(options?: FocusOptions): void;
     blur(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/spinner/spinner.d.ts

@@ -2,7 +2,7 @@ import SolidElement from '../../internal/solid-element';
 export default class SdSpinner extends SolidElement {
     color: 'primary' | 'white' | 'currentColor';
     private readonly localize;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/spinner/spinner.js

@@ -28,7 +28,7 @@ let SdSpinner = class extends SolidElement {
         white: "text-white",
         currentColor: ""
       }[this.color]
-    )}" aria-valuetext="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`;
+    )}" aria-label="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`;
   }
 };
 SdSpinner.styles = [

package/dist/package/components/teaser/teaser.d.ts

@@ -0,0 +1,17 @@
+import SolidElement from '../../internal/solid-element';
+import type { PropertyValues } from 'lit';
+export default class SdTeaser extends SolidElement {
+    variant: 'white' | 'white border-neutral-300' | 'neutral-100' | 'primary' | 'primary-100';
+    breakpoint: number;
+    inset: boolean;
+    teaser: HTMLElement;
+    private _orientation;
+    private readonly hasSlotController;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    updateOrientation(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}

package/dist/package/components/teaser/teaser.js

@@ -0,0 +1,104 @@
+import { css, html } from "lit";
+import { property, query, state, customElement } from "lit/decorators.js";
+import { HasSlotController } from "../../internal/slot.js";
+import cx from "classix";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let 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() {
+    if (this.variant === "white border-neutral-300") {
+      this.inset = true;
+    }
+    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-300": "bg-white border border-neutral-300",
+        "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" && this.inset && "py-8 px-10"
+    )}" part="base"><div style="${this._orientation === "horizontal" ? `width: var(--distribution-media, 100%);` : ""}" class="${cx(!this.inset && this._orientation === "vertical" && "mb-4", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div><div style="${this._orientation === "horizontal" ? `width: var(--distribution-content, 100%); ${this.inset ? "width: var(--distribution-content, calc(100% - 2rem));" : ""}` : ""}" class="${cx(
+      "flex flex-col text-left",
+      this._orientation === "horizontal" && `flex flex-col`,
+      this._orientation === "vertical" && this.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:0}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin: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 as default
+};

package/dist/package/internal/animate.d.ts

@@ -0,0 +1,10 @@
+export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+export declare function parseDuration(delay: number | string): number;
+export declare function prefersReducedMotion(): boolean;
+export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+    height: string | number | null | undefined;
+    composite?: CompositeOperationOrAuto | undefined;
+    easing?: string | undefined;
+    offset?: number | null | undefined;
+}[];

package/dist/package/internal/animate.js

@@ -0,0 +1,41 @@
+function animateTo(el, keyframes, options) {
+  return new Promise((resolve) => {
+    if ((options == null ? void 0 : options.duration) === Infinity) {
+      throw new Error("Promise-based animations must be finite.");
+    }
+    const animation = el.animate(keyframes, {
+      ...options,
+      duration: prefersReducedMotion() ? 0 : options.duration
+    });
+    animation.addEventListener("cancel", resolve, { once: true });
+    animation.addEventListener("finish", resolve, { once: true });
+  });
+}
+function prefersReducedMotion() {
+  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+  return query.matches;
+}
+function stopAnimations(el) {
+  return Promise.all(
+    el.getAnimations().map((animation) => {
+      return new Promise((resolve) => {
+        const handleAnimationEvent = requestAnimationFrame(resolve);
+        animation.addEventListener("cancel", () => handleAnimationEvent, { once: true });
+        animation.addEventListener("finish", () => handleAnimationEvent, { once: true });
+        animation.cancel();
+      });
+    })
+  );
+}
+function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
+  return keyframes.map((keyframe) => ({
+    ...keyframe,
+    height: keyframe.height === "auto" ? `${calculatedHeight}px` : keyframe.height
+  }));
+}
+export {
+  animateTo,
+  prefersReducedMotion,
+  shimKeyframesHeightAuto,
+  stopAnimations
+};

package/dist/package/internal/event.d.ts

@@ -0,0 +1 @@
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

package/dist/package/internal/event.js

@@ -0,0 +1,14 @@
+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/package/solid-components.d.ts

@@ -1,6 +1,12 @@
+export { default as SdAccordion } from './components/accordion/accordion';
+export { default as SdAccordionGroup } from './components/accordion-group/accordion-group';
+export { default as SdBrandshape } from './components/brandshape/brandshape';
 export { default as SdButton } from './components/button/button';
+export { default as SdDivider } from './components/divider/divider';
 export { default as SdIcon } from './components/icon/icon';
 export { default as SdInclude } from './components/include/include';
 export { default as SdLink } from './components/link/link';
 export { default as SdSpinner } from './components/spinner/spinner';
+export { default as SdTeaser } from './components/teaser/teaser';
+export * from './utilities/icon-library';
 export * from './utilities/localize';