dap-design-system 0.60.2 → 0.61.0

package/dist/components/snackbar/snackbar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.component.js","sources":["../../../src/components/snackbar/snackbar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  MessageOptionsType,\n  SnackbarMessage,\n  SnackbarPosition,\n} from '@/common/types'\nimport { translate } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './snackbar.scss?inline'\nimport DapDSSnackbarMessage from './snackbar-message.component'\n\nif (typeof window !== 'undefined') {\n  window.showDapSnackbar = (message: string, options?: MessageOptionsType) => {\n    DapDSSnackbar.show(message, options)\n  }\n\n  window.closeAllDapSnackbars = () => {\n    DapDSSnackbar.closeAll()\n  }\n}\n\n/**\n * `dap-ds-snackbar`\n * @summary The Snackbar is a container of sliding messages.\n * @element dap-ds-snackbar\n * @title - Snackbar\n *\n * @csspart host - The host element\n * @csspart message - The message part of the snackbar\n * @csspart message-base - The base part of the message\n * @csspart message-text - The text part of the message\n * @csspart message-closebutton - The close button part of the message\n * @csspart message-close-icon - The close icon part of the message\n * @csspart message-actions - The actions part of the message\n *\n * @cssproperty --dds-snackbar-spacing - Spacing used for positioning the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-z-index - Z-index of the snackbar container (default: 10000)\n * @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)\n */\nexport default class DapDSSnackbar extends DdsElement {\n  static tagName = 'dap-ds-snackbar'\n\n  static dependencies = {\n    'dap-ds-snackbar-message': DapDSSnackbarMessage,\n  }\n\n  /** The maximum number of snackbar messages at a given time. */\n  @property({ type: Number }) maxItems = 4\n\n  /** The position of the snackbar\n   * @type {'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center'}\n   */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n\n  /** The duration of the snackbar message in milliseconds */\n  @property({ type: Number }) duration = 6000\n\n  /** Whether the snackbar should announce new messages to screen readers */\n  @property({ type: Boolean }) announceMessages = true\n\n  @state() private messages: SnackbarMessage[] = []\n  @state() private idCounter = 0\n  private timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map()\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * Static method to show a snackbar message anywhere in the application\n   * @param message - The message to display\n   * @param options - Optional configuration for the message\n   */\n  static show(message: string, options?: MessageOptionsType): void {\n    document.dispatchEvent(\n      new CustomEvent('dds-show-snackbar', {\n        detail: { message, options },\n        bubbles: true,\n      }),\n    )\n  }\n\n  /**\n   * Static method to show a success message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'successful')\n   */\n  static success(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'successful' })\n  }\n\n  /**\n   * Static method to show an error message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'error')\n   */\n  static error(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'error' })\n  }\n\n  /**\n   * Static method to show an information message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'information')\n   */\n  static info(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'information' })\n  }\n\n  /**\n   * Static method to show a default message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'default')\n   */\n  static default(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'default' })\n  }\n\n  /**\n   * Static method to close all snackbar messages globally\n   */\n  static closeAll(): void {\n    document.dispatchEvent(\n      new CustomEvent('dds-close-all-snackbars', {\n        bubbles: true,\n      }),\n    )\n  }\n\n  /**\n   * Close all currently displayed messages\n   */\n  closeAll(): void {\n    this.clearAllTimeouts()\n    this.messages = []\n  }\n\n  private generateId(): string {\n    this.idCounter++\n\n    return `dap-snackbar-${this.idCounter}`\n  }\n\n  addMessage(message: string, options?: MessageOptionsType): void {\n    if (!message || typeof message !== 'string') {\n      console.warn('DapDSSnackbar: Message must be a non-empty string')\n      return\n    }\n\n    const newId = this.generateId()\n    if (this.messages.length >= this.maxItems) {\n      this.sliceMessage()\n    }\n\n    const newMessage: SnackbarMessage = {\n      id: newId,\n      message: message.trim(),\n      ...(options && { options }),\n    }\n\n    this.messages = [...this.messages, newMessage]\n    this.elapseMessages(newId, options?.duration, options?.persistent)\n\n    // Announce the message if enabled\n    if (this.announceMessages) {\n      this.announceToScreenReader(message)\n    }\n  }\n\n  private sliceMessage(): void {\n    if (this.messages) {\n      this.messages = this.messages.slice(1)\n    }\n  }\n\n  private removeMessage(id: string): void {\n    if (id) {\n      this.messages = this.messages.filter(\n        (messageItem: SnackbarMessage) => messageItem.id !== id,\n      )\n      this.clearTimeout(id)\n    }\n  }\n\n  private elapseMessages(\n    id: string,\n    duration?: number,\n    persistent?: boolean,\n  ): void {\n    // Persistent messages stay until the user closes them manually\n    if (persistent) {\n      return\n    }\n\n    const durationTime = duration ?? this.duration\n    const timeoutId = setTimeout(() => {\n      this.removeMessage(id)\n    }, durationTime)\n    this.timeouts.set(id, timeoutId)\n  }\n\n  private clearTimeout(id: string): void {\n    const timeoutId = this.timeouts.get(id)\n    if (timeoutId) {\n      clearTimeout(timeoutId)\n      this.timeouts.delete(id)\n    }\n  }\n\n  private clearAllTimeouts(): void {\n    this.timeouts.forEach(timeoutId => clearTimeout(timeoutId))\n    this.timeouts.clear()\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    document.addEventListener(\n      'dds-show-snackbar',\n      this.handleShowSnackbarEvent as EventListener,\n    )\n    document.addEventListener(\n      'dds-close-all-snackbars',\n      this.handleCloseAllEvent as EventListener,\n    )\n    document.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  disconnectedCallback(): void {\n    this.clearAllTimeouts()\n    document.removeEventListener(\n      'dds-show-snackbar',\n      this.handleShowSnackbarEvent as EventListener,\n    )\n    document.removeEventListener(\n      'dds-close-all-snackbars',\n      this.handleCloseAllEvent as EventListener,\n    )\n    document.removeEventListener('keydown', this.handleKeyDown)\n    super.disconnectedCallback()\n  }\n\n  private handleShowSnackbarEvent = (\n    event: CustomEvent<{ message: string; options?: MessageOptionsType }>,\n  ) => {\n    const { message, options } = event.detail\n    this.addMessage(message, options)\n  }\n\n  private handleCloseAllEvent = () => {\n    this.closeAll()\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.messages.length > 0) {\n      // Close the most recent message\n      const lastMessage = this.messages[this.messages.length - 1]\n      if (lastMessage) {\n        this.removeMessage(lastMessage.id)\n      }\n    }\n  }\n\n  private announceToScreenReader(message: string): void {\n    const announcer = document.createElement('div')\n    announcer.setAttribute('aria-live', 'assertive')\n    announcer.setAttribute('aria-atomic', 'true')\n    announcer.style.position = 'absolute'\n    announcer.style.left = '-10000px'\n    announcer.style.width = '1px'\n    announcer.style.height = '1px'\n    announcer.style.overflow = 'hidden'\n\n    document.body.appendChild(announcer)\n    announcer.textContent = message\n\n    // Remove the announcer after a short delay\n    setTimeout(() => {\n      document.body.removeChild(announcer)\n    }, 1000)\n  }\n\n  private _closeMessage(event: CustomEvent<{ id: string }>) {\n    if (event?.detail?.id) {\n      this.removeMessage(event.detail.id)\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${clsx('snackbar', `snackbar--${this.position}`)}\n      role=\"region\"\n      aria-live=\"polite\"\n      aria-label=${translate('snackbar.notifications')}>\n      ${repeat(\n        this.messages,\n        messageItem => messageItem.id,\n        messageItem => html`\n          <dap-ds-snackbar-message\n            part=\"message\"\n            exportparts=\"base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions\"\n            @dds-close=${this._closeMessage}\n            id=${messageItem.id}\n            message=${messageItem.message}\n            alertType=${ifDefined(messageItem?.options?.alertType)}\n            .actions=${messageItem?.options?.actions}\n            closeButton=${ifDefined(messageItem?.options?.closeButton)}\n            .customStyle=${messageItem?.options?.customStyle}\n            position=${this.position}></dap-ds-snackbar-message>\n        `,\n      )}\n    </div>`\n  }\n}\n"],"names":["message","options","DapDSSnackbar","_DapDSSnackbar","DdsElement","event","lastMessage","__spreadProps","__spreadValues","newId","newMessage","id","messageItem","duration","persistent","durationTime","timeoutId","announcer","_a","html","clsx","translate","repeat","ifDefined","_b","_c","_d","DapDSSnackbarMessage","unsafeCSS","styles","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/snackbar/snackbar.d.ts

@@ -1,11 +1,8 @@
-import { default as DapDSSnackbar } from './snackbar.component.js';
-import { default as DapDSSnackbarMessage } from './snackbar-message.component.js';
-export * from './snackbar.component.js';
-export * from './snackbar-message.component.js';
+import { default as DapDSSnackbar } from './snackbar.component';
+export * from './snackbar.component';
 export default DapDSSnackbar;
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-snackbar': DapDSSnackbar;
-        'dap-ds-snackbar-message': DapDSSnackbarMessage;
     }
 }

package/dist/components/snackbar/snackbar.js

@@ -0,0 +1,6 @@
+import a from "./snackbar.component.js";
+a.define();
+export {
+  a as default
+};
+//# sourceMappingURL=snackbar.js.map

package/dist/components/snackbar/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","sources":["../../../src/components/snackbar/snackbar.ts"],"sourcesContent":["import DapDSSnackbar from './snackbar.component'\n\nexport * from './snackbar.component'\nexport default DapDSSnackbar\n\nDapDSSnackbar.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-snackbar': DapDSSnackbar\n  }\n}\n"],"names":["DapDSSnackbar"],"mappings":";AAKAA,EAAc,OAAO;"}

package/dist/components/snackbar/snackbar.scss.js

@@ -0,0 +1,5 @@
+const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;pointer-events:none;--dds-snackbar-spacing: var(--dds-spacing-400);--dds-snackbar-z-index: 10000;--dds-snackbar-pointer-events: auto;--dds-snackbar-animation-duration: .3s;--dds-snackbar-animation-timing: ease-out}.snackbar{display:flex;position:absolute;bottom:var(--dds-snackbar-spacing);left:50%;flex-direction:column;transform:translate(-50%);pointer-events:var(--dds-snackbar-pointer-events)}.snackbar--bottom-left{left:var(--dds-snackbar-spacing);transform:translate(0)}.snackbar--bottom-right{right:var(--dds-snackbar-spacing);left:auto;align-items:flex-end;transform:translate(0) translateY(0)}.snackbar--top-right{align-items:flex-end;transform:translate(0) translateY(0);inset:var(--dds-snackbar-spacing) var(--dds-snackbar-spacing) auto auto}.snackbar--top-center{top:var(--dds-snackbar-spacing);bottom:auto;align-items:center}";
+export {
+  t as default
+};
+//# sourceMappingURL=snackbar.scss.js.map

package/dist/components/snackbar/snackbar.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,5 +1,6 @@
 import { PropertyValueMap } from 'lit';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSIcon } from '../icon/icon.component';
 declare const SpinnerBaseWithSized: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -33,6 +34,10 @@ export type SpinnerOrientation = 'vertical' | 'horizontal';
  * @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
  */
 export default class DapDSSpinner extends SpinnerBaseWithSized {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon': typeof DapDSIcon;
+    };
     constructor();
     /**
      * The variant of the spinner.

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

@@ -0,0 +1,142 @@
+import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as d } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
+import { translate as y } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+import { DdsElement as S } from "../../internal/dds-hu-element.js";
+import { SizedMixin as z } from "../../internal/mixin/sizedMixin.js";
+import v from "../icon/icon.component.js";
+import b from "./spinner.scss.js";
+import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var $ = Object.defineProperty, o = (h, t, p, c) => {
+  for (var e = void 0, i = h.length - 1, n; i >= 0; i--)
+    (n = h[i]) && (e = n(t, p, e) || e);
+  return e && $(t, p, e), e;
+};
+const x = z(S), l = class l extends x {
+  constructor() {
+    super(), this.variant = "neutral", this.noColor = !1, this.orientation = "vertical", this.ariaLive = "polite", this.delay = 0, this._visible = !1, this.size = "lg";
+  }
+  /** Maps effectiveSize from SizedMixin to spinner visual size (xxs→xs, else effectiveSize). */
+  get spinnerSize() {
+    return this.effectiveSize === "xxs" ? "xs" : this.effectiveSize;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.delay > 0 ? this._delayTimeout = window.setTimeout(() => {
+      this._visible = !0;
+    }, this.delay) : this._visible = !0;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._delayTimeout && clearTimeout(this._delayTimeout);
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._setupIconSlot();
+  }
+  updated(t) {
+    super.updated(t), (t.has("size") || t.has("sizeMap") || t.has("staticSize") || t.has("customStyles")) && this._updateSlottedIcons();
+  }
+  _setupIconSlot() {
+    this._updateSlottedIcons();
+  }
+  _updateSlottedIcons() {
+    try {
+      if (!this.shadowRoot) return;
+      const t = this.shadowRoot.querySelector(
+        'slot[name="icon"]'
+      );
+      if (!t) return;
+      const p = t.assignedElements({
+        flatten: !0
+      }), c = !!this.customStyles, e = getComputedStyle(this).getPropertyValue(
+        "--dds-spinner-animation-duration"
+      ) || "1s";
+      p.forEach((i) => {
+        if (i instanceof HTMLElement) {
+          const n = window.matchMedia(
+            "(prefers-reduced-motion: reduce)"
+          ).matches;
+          if (i.tagName === "DAP-DS-ICON" || i.localName === "dap-ds-icon")
+            c ? i.style.animation = "" : n ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block", this.spinnerSize && i.setAttribute("size", this.spinnerSize), this.staticSize !== void 0 && i.setAttribute("staticSize", this.staticSize.toString());
+          else {
+            c ? i.style.animation = "" : n ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block";
+            const r = i.querySelector("dap-ds-icon");
+            r && (r.style.display = "block", r.style.animation = "", this.spinnerSize && r.setAttribute("size", this.spinnerSize), this.staticSize !== void 0 && r.setAttribute(
+              "staticSize",
+              this.staticSize.toString()
+            ));
+          }
+        }
+      });
+    } catch (t) {
+      console.warn("Failed to update slotted icons:", t);
+    }
+  }
+  render() {
+    var t;
+    return this._visible ? d`
+      <div
+        part="base"
+        role="status"
+        name="icon-spinner"
+        aria-label=${(t = this.ariaLabel) != null ? t : y("spinner")}
+        aria-live=${this.ariaLive}
+        class="${f("spinner", {
+      [`spinner--${this.spinnerSize}`]: this.spinnerSize,
+      [`spinner--${this.variant}`]: this.variant,
+      [`spinner--${this.orientation}`]: this.orientation
+    })}">
+        <slot name="icon" @slotchange=${this._updateSlottedIcons}>
+          <dap-ds-icon
+            part="icon"
+            exportparts="base: icon-base, content: icon-content"
+            size=${this.spinnerSize}
+            staticSize=${m(this.staticSize)}
+            name="loading-spinner"
+            class="spinner__icon"></dap-ds-icon>
+        </slot>
+        ${this.text ? d` <span
+              part="text"
+              class=${f("spinner__text", {
+      "spinner__text--no-color": this.noColor
+    })}>
+              ${this.text}
+            </span>` : d`<slot></slot>`}
+      </div>
+    ` : null;
+  }
+};
+l.tagName = "dap-ds-spinner", l.dependencies = {
+  "dap-ds-icon": v
+}, l.styles = _(b);
+let s = l;
+o([
+  a({ type: String, reflect: !0 })
+], s.prototype, "variant");
+o([
+  a({ type: Number })
+], s.prototype, "staticSize");
+o([
+  a({ type: String })
+], s.prototype, "text");
+o([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "noColor");
+o([
+  a({ type: String, reflect: !0 })
+], s.prototype, "orientation");
+o([
+  a({ type: String, attribute: "aria-live" })
+], s.prototype, "ariaLive");
+o([
+  a({ type: Number })
+], s.prototype, "delay");
+o([
+  u()
+], s.prototype, "_visible");
+export {
+  s as default
+};
+//# sourceMappingURL=spinner.component.js.map

package/dist/components/spinner/spinner.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.component.js","sources":["../../../src/components/spinner/spinner.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { translate } from 'lit-i18n'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './spinner.scss?inline'\n\nconst SpinnerBaseWithSized = SizedMixin(DdsElement)\n\nexport type SpinnerVariant =\n  | 'neutral'\n  | 'brand'\n  | 'negative'\n  | 'positive'\n  | 'inverted'\n\nexport type SpinnerOrientation = 'vertical' | 'horizontal'\n\n/**\n * `dap-ds-spinner`\n * @summary Loading spinner component.\n * @element dap-ds-spinner\n * @title - Spinner\n *\n * @csspart base - The main spinner container.\n * @csspart icon - The loading icon element.\n * @csspart icon-base - The base of the loading icon.\n * @csspart icon-content - The content of the loading icon.\n * @csspart text - The loading text element.\n *\n * @slot - The loading text content.\n * @slot icon - The loading icon content.\n *\n * @cssprop --dds-spinner-icon-color-neutral - Color for neutral spinner icons (default: var(--dds-icon-neutral-base))\n * @cssprop --dds-spinner-icon-color-brand - Color for brand spinner icons (default: var(--dds-icon-brand-subtle))\n * @cssprop --dds-spinner-icon-color-negative - Color for negative spinner icons (default: var(--dds-icon-negative-subtle))\n * @cssprop --dds-spinner-icon-color-positive - Color for positive spinner icons (default: var(--dds-icon-positive-subtle))\n * @cssprop --dds-spinner-icon-color-inverted - Color for inverted spinner icons (default: var(--dds-icon-neutral-inverted))\n * @cssprop --dds-spinner-text-spacing - Spacing between spinner and text (default: var(--dds-spacing-400))\n * @cssprop --dds-spinner-animation-duration - Duration of the spinner animation (default: 1s)\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the spinner. Default is `lg`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n */\nexport default class DapDSSpinner extends SpinnerBaseWithSized {\n  static tagName = 'dap-ds-spinner'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  constructor() {\n    super()\n    this.size = 'lg'\n  }\n  /**\n   * The variant of the spinner.\n   * @type {\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\"}\n   */\n  @property({ type: String, reflect: true }) variant: SpinnerVariant = 'neutral'\n\n  /** The size of the spinner in pixels. This overrides the size attribute */\n  @property({ type: Number }) staticSize?: number\n  /** The loading text. */\n  @property({ type: String }) text: string\n  /** Removes the text color */\n  @property({ type: Boolean, reflect: true }) noColor = false\n  /**\n   * The orientation of the spinner (icon and text layout).\n   * @type {\"vertical\" | \"horizontal\"}\n   */\n  @property({ type: String, reflect: true }) orientation: SpinnerOrientation =\n    'vertical'\n\n  /**\n   * The aria-live politeness level for screen readers.\n   * @type {\"polite\" | \"assertive\" | \"off\"}\n   */\n  @property({ type: String, attribute: 'aria-live' })\n  ariaLive: 'polite' | 'assertive' | 'off' = 'polite'\n  /**\n   * Delay in milliseconds before showing the spinner.\n   * Prevents flash for quick operations.\n   */\n  @property({ type: Number }) delay = 0\n\n  /** @internal */\n  @state() private _visible = false\n\n  private _delayTimeout?: number\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Maps effectiveSize from SizedMixin to spinner visual size (xxs→xs, else effectiveSize). */\n  private get spinnerSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' {\n    return this.effectiveSize === 'xxs' ? 'xs' : this.effectiveSize\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.delay > 0) {\n      this._delayTimeout = window.setTimeout(() => {\n        this._visible = true\n      }, this.delay)\n    } else {\n      this._visible = true\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._delayTimeout) {\n      clearTimeout(this._delayTimeout)\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this._setupIconSlot()\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n    // Update slotted icons when size, staticSize, or customStyles changes\n    if (\n      _changedProperties.has('size') ||\n      _changedProperties.has('sizeMap') ||\n      _changedProperties.has('staticSize') ||\n      _changedProperties.has('customStyles')\n    ) {\n      this._updateSlottedIcons()\n    }\n  }\n\n  private _setupIconSlot(): void {\n    // Initial update in case icons are already slotted\n    this._updateSlottedIcons()\n  }\n\n  private _updateSlottedIcons(): void {\n    try {\n      if (!this.shadowRoot) return\n\n      const iconSlot = this.shadowRoot.querySelector(\n        'slot[name=\"icon\"]',\n      ) as HTMLSlotElement\n\n      if (!iconSlot) return\n\n      const assignedElements = iconSlot.assignedElements({\n        flatten: true,\n      })\n\n      // If custom styles are provided, don't apply inline animations\n      // Let the custom CSS handle the animation instead\n      const hasCustomStyles = !!this.customStyles\n\n      const animationDuration =\n        getComputedStyle(this).getPropertyValue(\n          '--dds-spinner-animation-duration',\n        ) || '1s'\n\n      assignedElements.forEach(element => {\n        if (element instanceof HTMLElement) {\n          const prefersReducedMotion = window.matchMedia(\n            '(prefers-reduced-motion: reduce)',\n          ).matches\n\n          // If it's an icon component directly slotted, apply animation and size\n          if (\n            element.tagName === 'DAP-DS-ICON' ||\n            element.localName === 'dap-ds-icon'\n          ) {\n            // Only apply animation via inline styles if no custom styles are provided\n            // Custom styles should handle animation in that case\n            if (!hasCustomStyles) {\n              if (prefersReducedMotion) {\n                element.style.animation = `dds-fade ${animationDuration} ease-in-out infinite`\n              } else {\n                element.style.animation = `dds-spin ${animationDuration} linear infinite`\n              }\n            } else {\n              // Clear any existing inline animation to let CSS take over\n              element.style.animation = ''\n            }\n            element.style.display = 'block'\n\n            if (this.spinnerSize) {\n              element.setAttribute('size', this.spinnerSize)\n            }\n            if (this.staticSize !== undefined) {\n              element.setAttribute('staticSize', this.staticSize.toString())\n            }\n          } else {\n            // If it's a wrapper element (like span), apply animation only to the wrapper\n            // The nested icon will rotate with the wrapper, so we don't need to animate it separately\n            if (!hasCustomStyles) {\n              if (prefersReducedMotion) {\n                element.style.animation = `dds-fade ${animationDuration} ease-in-out infinite`\n              } else {\n                element.style.animation = `dds-spin ${animationDuration} linear infinite`\n              }\n            } else {\n              // Clear any existing inline animation to let CSS take over\n              element.style.animation = ''\n            }\n            element.style.display = 'block'\n\n            // Update nested icon size attributes but don't apply animation to it\n            const nestedIcon = element.querySelector('dap-ds-icon')\n            if (nestedIcon) {\n              nestedIcon.style.display = 'block'\n              // Remove any existing animation from nested icon to prevent double animation\n              nestedIcon.style.animation = ''\n\n              if (this.spinnerSize) {\n                nestedIcon.setAttribute('size', this.spinnerSize)\n              }\n              if (this.staticSize !== undefined) {\n                nestedIcon.setAttribute(\n                  'staticSize',\n                  this.staticSize.toString(),\n                )\n              }\n            }\n          }\n        }\n      })\n    } catch (error) {\n      console.warn('Failed to update slotted icons:', error)\n    }\n  }\n\n  render() {\n    if (!this._visible) {\n      return null\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        role=\"status\"\n        name=\"icon-spinner\"\n        aria-label=${this.ariaLabel ?? translate('spinner')}\n        aria-live=${this.ariaLive}\n        class=\"${clsx('spinner', {\n          [`spinner--${this.spinnerSize}`]: this.spinnerSize,\n          [`spinner--${this.variant}`]: this.variant,\n          [`spinner--${this.orientation}`]: this.orientation,\n        })}\">\n        <slot name=\"icon\" @slotchange=${this._updateSlottedIcons}>\n          <dap-ds-icon\n            part=\"icon\"\n            exportparts=\"base: icon-base, content: icon-content\"\n            size=${this.spinnerSize}\n            staticSize=${ifDefined(this.staticSize)}\n            name=\"loading-spinner\"\n            class=\"spinner__icon\"></dap-ds-icon>\n        </slot>\n        ${this.text\n          ? html` <span\n              part=\"text\"\n              class=${clsx('spinner__text', {\n                'spinner__text--no-color': this.noColor,\n              })}>\n              ${this.text}\n            </span>`\n          : html`<slot></slot>`}\n      </div>\n    `\n  }\n}\n"],"names":["SpinnerBaseWithSized","SizedMixin","DdsElement","_DapDSSpinner","_changedProperties","iconSlot","assignedElements","hasCustomStyles","animationDuration","element","prefersReducedMotion","nestedIcon","error","html","_a","translate","clsx","ifDefined","DapDSIcon","unsafeCSS","styles","DapDSSpinner","__decorateClass","property","state"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAuBC,EAAWC,CAAU,GAqC7BC,IAArB,MAAqBA,UAAqBH,EAAqB;AAAA,EAO7D,cAAc;AACN,UAAA,GAO6D,KAAA,UAAA,WAOf,KAAA,UAAA,IAMpD,KAAA,cAAA,YAOyC,KAAA,WAAA,UAKP,KAAA,QAAA,GAG3B,KAAQ,WAAW,IAlC1B,KAAK,OAAO;AAAA,EAAA;AAAA;AAAA,EAyCd,IAAY,cAAwD;AAClE,WAAO,KAAK,kBAAkB,QAAQ,OAAO,KAAK;AAAA,EAAA;AAAA,EAGpD,oBAAoB;AAClB,UAAM,kBAAkB,GACpB,KAAK,QAAQ,IACV,KAAA,gBAAgB,OAAO,WAAW,MAAM;AAC3C,WAAK,WAAW;AAAA,IAAA,GACf,KAAK,KAAK,IAEb,KAAK,WAAW;AAAA,EAClB;AAAA,EAGF,uBAAuB;AACrB,UAAM,qBAAqB,GACvB,KAAK,iBACP,aAAa,KAAK,aAAa;AAAA,EACjC;AAAA,EAGQ,aACRI,GACM;AACN,UAAM,aAAaA,CAAkB,GACrC,KAAK,eAAe;AAAA,EAAA;AAAA,EAGZ,QACRA,GACM;AACN,UAAM,QAAQA,CAAkB,IAG9BA,EAAmB,IAAI,MAAM,KAC7BA,EAAmB,IAAI,SAAS,KAChCA,EAAmB,IAAI,YAAY,KACnCA,EAAmB,IAAI,cAAc,MAErC,KAAK,oBAAoB;AAAA,EAC3B;AAAA,EAGM,iBAAuB;AAE7B,SAAK,oBAAoB;AAAA,EAAA;AAAA,EAGnB,sBAA4B;AAC9B,QAAA;AACE,UAAA,CAAC,KAAK,WAAY;AAEhB,YAAAC,IAAW,KAAK,WAAW;AAAA,QAC/B;AAAA,MACF;AAEA,UAAI,CAACA,EAAU;AAET,YAAAC,IAAmBD,EAAS,iBAAiB;AAAA,QACjD,SAAS;AAAA,MAAA,CACV,GAIKE,IAAkB,CAAC,CAAC,KAAK,cAEzBC,IACJ,iBAAiB,IAAI,EAAE;AAAA,QACrB;AAAA,MAAA,KACG;AAEP,MAAAF,EAAiB,QAAQ,CAAWG,MAAA;AAClC,YAAIA,aAAmB,aAAa;AAClC,gBAAMC,IAAuB,OAAO;AAAA,YAClC;AAAA,UAAA,EACA;AAGF,cACED,EAAQ,YAAY,iBACpBA,EAAQ,cAAc;AAItB,YAAKF,IAQHE,EAAQ,MAAM,YAAY,KAPtBC,IACMD,EAAA,MAAM,YAAY,YAAYD,CAAiB,0BAE/CC,EAAA,MAAM,YAAY,YAAYD,CAAiB,oBAM3DC,EAAQ,MAAM,UAAU,SAEpB,KAAK,eACCA,EAAA,aAAa,QAAQ,KAAK,WAAW,GAE3C,KAAK,eAAe,UACtBA,EAAQ,aAAa,cAAc,KAAK,WAAW,UAAU;AAAA,eAE1D;AAGL,YAAKF,IAQHE,EAAQ,MAAM,YAAY,KAPtBC,IACMD,EAAA,MAAM,YAAY,YAAYD,CAAiB,0BAE/CC,EAAA,MAAM,YAAY,YAAYD,CAAiB,oBAM3DC,EAAQ,MAAM,UAAU;AAGlB,kBAAAE,IAAaF,EAAQ,cAAc,aAAa;AACtD,YAAIE,MACFA,EAAW,MAAM,UAAU,SAE3BA,EAAW,MAAM,YAAY,IAEzB,KAAK,eACIA,EAAA,aAAa,QAAQ,KAAK,WAAW,GAE9C,KAAK,eAAe,UACXA,EAAA;AAAA,cACT;AAAA,cACA,KAAK,WAAW,SAAS;AAAA,YAC3B;AAAA,UAEJ;AAAA,QACF;AAAA,MACF,CACD;AAAA,aACMC,GAAO;AACN,cAAA,KAAK,mCAAmCA,CAAK;AAAA,IAAA;AAAA,EACvD;AAAA,EAGF,SAAS;;AACH,WAAC,KAAK,WAIHC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,sBAKUC,IAAA,KAAK,cAAL,OAAAA,IAAkBC,EAAU,SAAS,CAAC;AAAA,oBACvC,KAAK,QAAQ;AAAA,iBAChBC,EAAK,WAAW;AAAA,MACvB,CAAC,YAAY,KAAK,WAAW,EAAE,GAAG,KAAK;AAAA,MACvC,CAAC,YAAY,KAAK,OAAO,EAAE,GAAG,KAAK;AAAA,MACnC,CAAC,YAAY,KAAK,WAAW,EAAE,GAAG,KAAK;AAAA,IAAA,CACxC,CAAC;AAAA,wCAC8B,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA,mBAI7C,KAAK,WAAW;AAAA,yBACVC,EAAU,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,UAIzC,KAAK,OACHJ;AAAAA;AAAAA,sBAEUG,EAAK,iBAAiB;AAAA,MAC5B,2BAA2B,KAAK;AAAA,IAAA,CACjC,CAAC;AAAA,gBACA,KAAK,IAAI;AAAA,uBAEbH,gBAAmB;AAAA;AAAA,QAhClB;AAAA,EAgCkB;AAI/B;AAtOEV,EAAO,UAAU,kBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAee;AACjB,GA0CgBf,EAAA,SAASgB,EAAUC,CAAM;AA/C3C,IAAqBC,IAArBlB;AAe6CmB,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAftBF,EAewB,WAAA,SAAA;AAGfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlBPF,EAkBS,WAAA,YAAA;AAEAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GApBPF,EAoBS,WAAA,MAAA;AAEgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAtBvBF,EAsByB,WAAA,SAAA;AAKDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GA3BtBF,EA2BwB,WAAA,aAAA;AAQ3CC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,YAAa,CAAA;AAAA,GAlC/BF,EAmCnB,WAAA,UAAA;AAK4BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAxCPF,EAwCS,WAAA,OAAA;AAGXC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GA3CYH,EA2CF,WAAA,UAAA;"}

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

@@ -1,5 +1,5 @@
-import { default as DapDSSpinner } from './spinner.component.js';
-export * from './spinner.component.js';
+import { default as DapDSSpinner } from './spinner.component';
+export * from './spinner.component';
 export default DapDSSpinner;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/spinner/spinner.js

@@ -0,0 +1,6 @@
+import e from "./spinner.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../src/components/spinner/spinner.ts"],"sourcesContent":["import DapDSSpinner from './spinner.component'\n\nexport * from './spinner.component'\nexport default DapDSSpinner\n\nDapDSSpinner.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-spinner': DapDSSpinner\n  }\n}\n"],"names":["DapDSSpinner"],"mappings":";AAKAA,EAAa,OAAO;"}

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

@@ -0,0 +1,5 @@
+const n = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:inline-block;position:relative;width:auto;--dds-spinner-icon-color-neutral: var(--dds-icon-neutral-base);--dds-spinner-icon-color-brand: var(--dds-icon-brand-subtle);--dds-spinner-icon-color-negative: var(--dds-icon-negative-subtle);--dds-spinner-icon-color-positive: var(--dds-icon-positive-subtle);--dds-spinner-icon-color-inverted: var(--dds-icon-neutral-inverted);--dds-spinner-text-spacing: var(--dds-spacing-400);--dds-spinner-animation-duration: 1s}.spinner{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.spinner--horizontal{flex-direction:row;gap:var(--dds-spinner-text-spacing)}.spinner--neutral .spinner__icon,.spinner--neutral ::slotted(dap-ds-icon){fill:var(--dds-spinner-icon-color-neutral);color:var(--dds-spinner-icon-color-neutral)}.spinner--brand .spinner__icon,.spinner--brand ::slotted(dap-ds-icon){fill:var(--dds-spinner-icon-color-brand);color:var(--dds-spinner-icon-color-brand)}.spinner--negative .spinner__icon,.spinner--negative ::slotted(dap-ds-icon){fill:var(--dds-spinner-icon-color-negative);color:var(--dds-spinner-icon-color-negative)}.spinner--positive .spinner__icon,.spinner--positive ::slotted(dap-ds-icon){fill:var(--dds-spinner-icon-color-positive);color:var(--dds-spinner-icon-color-positive)}.spinner--inverted .spinner__icon,.spinner--inverted ::slotted(dap-ds-icon){fill:var(--dds-spinner-icon-color-inverted);color:var(--dds-spinner-icon-color-inverted)}.spinner__icon,.spinner ::slotted(dap-ds-icon){display:block;animation:dds-spin var(--dds-spinner-animation-duration) linear infinite}.spinner ::slotted(span){display:inline-block}.spinner ::slotted(span) dap-ds-icon{fill:inherit;color:inherit}.spinner__text{display:block;margin-top:var(--dds-spinner-text-spacing);color:var(--dds-text-neutral-on-brand);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-font-line-height-base)}.spinner--horizontal .spinner__text{margin-top:0;margin-left:0}.spinner--brand .spinner__text:not(.spinner__text--no-color){color:var(--dds-spinner-icon-color-brand)}.spinner--negative .spinner__text:not(.spinner__text--no-color){color:var(--dds-spinner-icon-color-negative)}.spinner--positive .spinner__text:not(.spinner__text--no-color){color:var(--dds-spinner-icon-color-positive)}.spinner--inverted .spinner__text:not(.spinner__text--no-color){color:var(--dds-spinner-icon-color-inverted)}@media (prefers-reduced-motion: reduce){.spinner__icon,::slotted(dap-ds-icon){animation:dds-fade var(--dds-spinner-animation-duration) ease-in-out infinite}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}}";
+export {
+  n as default
+};
+//# sourceMappingURL=spinner.scss.js.map

package/dist/components/spinner/spinner.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/stack/stack.component.d.ts

@@ -11,6 +11,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @csspart stack - The main stack container.
  */
 export default class DapDSStack extends DdsElement {
+    static tagName: string;
     /** The direction of the stack.
      * @type {'column' | 'column-reverse' | 'row' | 'row-reverse'}
      */

package/dist/components/stack/stack.component.js

@@ -0,0 +1,66 @@
+import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as h } from "../../node_modules/lit-html/static.js";
+import { DdsElement as l } from "../../internal/dds-hu-element.js";
+import f from "./stack.scss.js";
+import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (m, r, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? y(r, s) : r, p = m.length - 1, c; p >= 0; p--)
+    (c = m[p]) && (t = (i ? c(r, s, t) : c(t)) || t);
+  return i && t && v(r, s, t), t;
+};
+const o = class o extends l {
+  constructor() {
+    super(...arguments), this.direction = "column", this.endMargin = !1, this.startMargin = !1;
+  }
+  set spacing(r) {
+    this._spacing = r;
+  }
+  get spacing() {
+    return !this._spacing && this._spacing !== 0 && (this.direction === "column" || this.direction === "column-reverse") ? 600 : !this._spacing && this._spacing !== 0 && (this.direction === "row" || this.direction === "row-reverse") ? 200 : this._spacing;
+  }
+  getMarginStyles(r, s, i, t) {
+    return r === "row" || r === "row-reverse" ? `margin-left: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-right: ${t ? `var(--dds-spacing-${s})` : "0"};` : `margin-top: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-bottom: ${t ? `var(--dds-spacing-${s})` : "0"};`;
+  }
+  render() {
+    return h`
+      <div
+        class=${g("stack", `stack-gap-${this.spacing}`, {
+      [`stack-direction-${this.direction}`]: this.direction
+    })}
+        part="base"
+        style=${d(
+      this.getMarginStyles(
+        this.direction,
+        this.spacing,
+        this.startMargin,
+        this.endMargin
+      )
+    )}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.tagName = "dap-ds-stack", o.styles = u(f);
+let e = o;
+a([
+  n()
+], e.prototype, "direction", 2);
+a([
+  n({ type: Boolean })
+], e.prototype, "endMargin", 2);
+a([
+  n({ type: Boolean })
+], e.prototype, "startMargin", 2);
+a([
+  n({ type: Number })
+], e.prototype, "spacing", 1);
+export {
+  e as default
+};
+//# sourceMappingURL=stack.component.js.map

package/dist/components/stack/stack.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.component.js","sources":["../../../src/components/stack/stack.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CSSFlexDirection, Spacing } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './stack.scss?inline'\n\n/**\n * `dap-ds-stack`\n * @summary A stack is a container for stacked content.\n * @element dap-ds-stack\n * @title - Stack\n *\n * @slot - The content of the stack.\n *\n * @csspart stack - The main stack container.\n */\nexport default class DapDSStack extends DdsElement {\n  static tagName = 'dap-ds-stack'\n\n  /** The direction of the stack.\n   * @type {'column' | 'column-reverse' | 'row' | 'row-reverse'}\n   */\n  @property() direction: CSSFlexDirection = 'column'\n  /** Adds margin to the end of the stack. */\n  @property({ type: Boolean }) endMargin?: boolean = false\n  /** Adds margin to the start of the stack. */\n  @property({ type: Boolean }) startMargin?: boolean = false\n\n  private _spacing: Spacing\n  /** The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */\n  @property({ type: Number })\n  set spacing(value: Spacing) {\n    this._spacing = value\n  }\n  get spacing() {\n    if (\n      !this._spacing &&\n      this._spacing !== 0 &&\n      (this.direction === 'column' || this.direction === 'column-reverse')\n    ) {\n      return 600\n    }\n\n    if (\n      !this._spacing &&\n      this._spacing !== 0 &&\n      (this.direction === 'row' || this.direction === 'row-reverse')\n    ) {\n      return 200\n    }\n\n    return this._spacing\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  getMarginStyles(\n    direction: CSSFlexDirection,\n    spacing: number,\n    startMargin?: boolean,\n    endMargin?: boolean,\n  ) {\n    if (direction === 'row' || direction === 'row-reverse') {\n      return `margin-left: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-right: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n    }\n\n    return `margin-top: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-bottom: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n  }\n\n  render() {\n    return html`\n      <div\n        class=${clsx('stack', `stack-gap-${this.spacing}`, {\n          [`stack-direction-${this.direction}`]: this.direction,\n        })}\n        part=\"base\"\n        style=${ifDefined(\n          this.getMarginStyles(\n            this.direction,\n            this.spacing,\n            this.startMargin,\n            this.endMargin,\n          ),\n        )}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSStack","DdsElement","value","direction","spacing","startMargin","endMargin","html","clsx","ifDefined","unsafeCSS","styles","DapDSStack","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAM4C,KAAA,YAAA,UAES,KAAA,YAAA,IAEE,KAAA,cAAA;AAAA,EAAA;AAAA,EAKrD,IAAI,QAAQC,GAAgB;AAC1B,SAAK,WAAWA;AAAA,EAAA;AAAA,EAElB,IAAI,UAAU;AAEV,WAAA,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,YAAY,KAAK,cAAc,oBAE5C,MAIP,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,SAAS,KAAK,cAAc,iBAEzC,MAGF,KAAK;AAAA,EAAA;AAAA,EAKd,gBACEC,GACAC,GACAC,GACAC,GACA;AACI,WAAAH,MAAc,SAASA,MAAc,gBAChC,gBAAgBE,IAAc,qBAAqBD,CAAO,MAAM,GAAG,mBAAmBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG,MAGzI,eAAeC,IAAc,qBAAqBD,CAAO,MAAM,GAAG,oBAAoBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAGhJ,SAAS;AACA,WAAAG;AAAAA;AAAAA,gBAEKC,EAAK,SAAS,aAAa,KAAK,OAAO,IAAI;AAAA,MACjD,CAAC,mBAAmB,KAAK,SAAS,EAAE,GAAG,KAAK;AAAA,IAAA,CAC7C,CAAC;AAAA;AAAA,gBAEMC;AAAAA,MACN,KAAK;AAAA,QACH,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAAA,IACP,CACD;AAAA;AAAA;AAAA;AAAA,EAAA;AAKT;AAvEET,EAAO,UAAU,gBAqCDA,EAAA,SAASU,EAAUC,CAAM;AAtC3C,IAAqBC,IAArBZ;AAMca,EAAA;AAAA,EAAXC,EAAS;AAAA,GANSF,EAMP,WAAA,aAAA,CAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GARRF,EAQU,WAAA,aAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,eAAA,CAAA;AAKzBC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAdPF,EAef,WAAA,WAAA,CAAA;"}

package/dist/components/stack/stack.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSStack } from './stack.component.js';
-export * from './stack.component.js';
+import { default as DapDSStack } from './stack.component';
+export * from './stack.component';
 export default DapDSStack;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/stack/stack.js

@@ -0,0 +1,6 @@
+import a from "./stack.component.js";
+a.define();
+export {
+  a as default
+};
+//# sourceMappingURL=stack.js.map

package/dist/components/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../src/components/stack/stack.ts"],"sourcesContent":["import DapDSStack from './stack.component'\n\nexport * from './stack.component'\nexport default DapDSStack\n\nDapDSStack.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-stack': DapDSStack\n  }\n}\n"],"names":["DapDSStack"],"mappings":";AAKAA,EAAW,OAAO;"}

package/dist/components/stack/stack.scss.js

@@ -0,0 +1,5 @@
+const a = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:block}.stack{display:flex}.stack-gap-0{gap:var(--dds-spacing-0)}.stack-gap-100{gap:var(--dds-spacing-100)}.stack-gap-200{gap:var(--dds-spacing-200)}.stack-gap-300{gap:var(--dds-spacing-300)}.stack-gap-400{gap:var(--dds-spacing-400)}.stack-gap-500{gap:var(--dds-spacing-500)}.stack-gap-600{gap:var(--dds-spacing-600)}.stack-gap-700{gap:var(--dds-spacing-700)}.stack-gap-800{gap:var(--dds-spacing-800)}.stack-gap-1200{gap:var(--dds-spacing-1200)}.stack-gap-1400{gap:var(--dds-spacing-1400)}.stack-gap-1600{gap:var(--dds-spacing-1600)}.stack-gap-1800{gap:var(--dds-spacing-1800)}.stack-gap-2000{gap:var(--dds-spacing-2000)}.stack-gap-2400{gap:var(--dds-spacing-2400)}.stack-gap-3000{gap:var(--dds-spacing-3000)}.stack-gap-4000{gap:var(--dds-spacing-4000)}.stack-gap-5000{gap:var(--dds-spacing-5000)}.stack-gap-6000{gap:var(--dds-spacing-6000)}.stack-direction-column{flex-flow:column wrap}.stack-direction-row{flex-flow:row wrap}.stack-direction-column-reverse{flex-flow:column-reverse wrap}.stack-direction-row-reverse{flex-flow:row-reverse wrap}.stack-direction-row{align-items:center}";
+export {
+  a as default
+};
+//# sourceMappingURL=stack.scss.js.map

package/dist/components/stack/stack.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/switch/switch.component.d.ts

@@ -1,4 +1,8 @@
 import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement';
+import { default as DapDSFeedback } from '../feedback/feedback.component';
+import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSTypography } from '../typography/typography.component';
 /**
  * `dap-ds-switch`
  * @summary A switch is a graphical control element that allows the user to toggle between two states.
@@ -53,6 +57,13 @@ import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement'
  * @csspart description - The description of the switch.
  */
 export default class DapDSSwitch extends LabeledChoiceElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-form-label': typeof DapDSFormLabel;
+        'dap-ds-typography': typeof DapDSTypography;
+        'dap-ds-feedback': typeof DapDSFeedback;
+    };
     private static nextId;
     private readonly inputId;
     private readonly labelId;