@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/dialog/dialog.js

@@ -0,0 +1,135 @@
+import { property as h, customElement as c } from "lit/decorators.js";
+import { html as g } from "lit/static-html.js";
+import { setModalityOnNextFocus as r, getFirstFocusableElement as m } from "../core/a11y.js";
+import { isBreakpoint as v } from "../core/dom.js";
+import { AgnosticResizeObserver as p } from "../core/observers.js";
+import { applyInertMechanism as u, removeInertMechanism as f } from "../core/overlay.js";
+import { SbbOverlayBaseElement as _, overlayRefs as d } from "../overlay.js";
+import { css as w } from "lit";
+import "../screen-reader-only.js";
+const y = w`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-dialog-color: var(--sbb-color-black);--sbb-dialog-background-color: var(--sbb-color-white);--sbb-dialog-width: 100%;--sbb-dialog-height: 100%;--sbb-dialog-max-width: 100%;--sbb-dialog-max-width-default: 55.75rem;--sbb-dialog-max-height: 100%;--sbb-dialog-inset: 0 auto auto 0;--sbb-dialog-border-radius: var(--sbb-border-radius-8x);--sbb-dialog-padding-block: var(--sbb-spacing-responsive-s);--sbb-dialog-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-dialog-animation-easing: ease;--sbb-dialog-pointer-events: none;--sbb-dialog-backdrop-visibility: hidden;--sbb-dialog-backdrop-pointer-events: none;--sbb-dialog-backdrop-color: transparent;--sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);--sbb-dialog-actions-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);display:block;position:fixed;inset:var(--sbb-dialog-inset);z-index:var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 22.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-6x)}}@media (min-width: 37.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x)}}@media (min-width: 52.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);--sbb-dialog-max-width: min( calc(100vw - var(--sbb-spacing-fixed-30x) * 2), var(--sbb-dialog-max-width-default) );--sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x))}}:host(:is([data-state=opened],[data-state=opening])){--sbb-dialog-pointer-events: all}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-dialog-backdrop-visibility: visible;--sbb-dialog-backdrop-pointer-events: all;--sbb-dialog-backdrop-color: var(--sbb-color-milk)}}:host([data-hide-header]){--sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1)}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-dialog-color: var(--sbb-color-white);--sbb-dialog-background-color: var(--sbb-color-midnight);--sbb-dialog-actions-border: none}:host([data-overflows]:not([negative])){--sbb-dialog-actions-border: none}:host(:not([data-state=closed])){--sbb-dialog-inset: 0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);display:flex;align-items:center;position:fixed;inset:var(--sbb-dialog-inset)}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);position:fixed;inset:var(--sbb-dialog-inset);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility}.sbb-dialog{display:none;position:absolute;inset-inline:0;margin:auto;padding:0;border:none;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);overflow:auto;color:var(--sbb-dialog-color);background-color:var(--sbb-dialog-background-color)}:host([data-state]:not([data-state=closed])) .sbb-dialog{display:block;animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease}:host([data-state][data-state=closing]) .sbb-dialog{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-dialog{border-radius:var(--sbb-dialog-border-radius);overflow:hidden;height:fit-content}}.sbb-dialog__wrapper{display:flex;flex-direction:column;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);outline:none;position:fixed;word-break:break-word}@media (min-width: 52.5rem){.sbb-dialog__wrapper{position:sticky;inset-block-start:0;height:auto}}@keyframes open{0%{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+var E = Object.defineProperty, x = Object.getOwnPropertyDescriptor, b = (t, e, a, i) => {
+  for (var o = i > 1 ? void 0 : i ? x(e, a) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (o = (i ? n(e, a, o) : n(o)) || o);
+  return i && o && E(e, a, o), o;
+};
+let k = 0, s = class extends _ {
+  constructor() {
+    super(...arguments), this.backdropAction = "close", this._dialogContentResizeObserver = new p(
+      () => setTimeout(() => this._onContentResize())
+    ), this._dialogTitleElement = null, this._dialogContentElement = null, this._dialogActionsElement = null, this._isPointerDownEventOnDialog = !1, this._overflows = !1, this._lastScroll = 0, this._dialogId = `sbb-dialog-${k++}`, this.closeAttribute = "sbb-dialog-close", this._pointerDownListener = (t) => {
+      this.backdropAction === "close" && (this._isPointerDownEventOnDialog = t.composedPath().filter((e) => e instanceof window.HTMLElement).some((e) => e.id === this._dialogId));
+    }, this._closeOnBackdropClick = (t) => {
+      this.backdropAction === "close" && !this._isPointerDownEventOnDialog && !t.composedPath().filter((e) => e instanceof window.HTMLElement).some((e) => e.id === this._dialogId) && this.close();
+    };
+  }
+  /** Opens the component. */
+  open() {
+    var t;
+    this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._dialogTitleElement = this.querySelector("sbb-dialog-title"), this._dialogContentElement = (t = this.querySelector("sbb-dialog-content")) == null ? void 0 : t.shadowRoot.firstElementChild, this._dialogActionsElement = this.querySelector("sbb-dialog-actions"), this._syncNegative(), this.willOpen.emit() && (this.state = "opening", d.push(this), this._dialogContentResizeObserver.observe(this._dialogContentElement), this.scrollHandler.disableScroll()));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("pointerdown", this._pointerDownListener, {
+      signal: this.overlayController.signal
+    }), this.addEventListener("pointerup", this._closeOnBackdropClick, {
+      signal: this.overlayController.signal
+    });
+  }
+  firstUpdated(t) {
+    this._dialogTitleElement = this.querySelector("sbb-dialog-title"), this._syncNegative(), super.firstUpdated(t);
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("negative") && this._syncNegative();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._dialogContentResizeObserver.disconnect();
+  }
+  attachOpenOverlayEvents() {
+    var t;
+    super.attachOpenOverlayEvents(), (t = this._dialogContentElement) == null || t.addEventListener("scroll", () => this._onContentScroll(), {
+      passive: !0,
+      signal: this.openOverlayController.signal
+    }), window.addEventListener("resize", () => this._setHideHeaderDataAttribute(!1), {
+      signal: this.openOverlayController.signal
+    });
+  }
+  // Wait for dialog transition to complete.
+  // In rare cases, it can be that the animationEnd event is triggered twice.
+  // To avoid entering a corrupt state, exit when state is not expected.
+  onOverlayAnimationEnd(t) {
+    var e, a, i;
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), u(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(
+      () => {
+        var o;
+        return this.setAriaLiveRefContent(
+          this.accessibilityLabel || ((o = this._dialogTitleElement) == null ? void 0 : o.innerText.trim())
+        );
+      }
+    ), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && (this._setHideHeaderDataAttribute(!1), (e = this._dialogContentElement) == null || e.scrollTo(0, 0), this.state = "closed", f(), r(this.lastFocusedElement), (a = this.lastFocusedElement) == null || a.focus(), (i = this.openOverlayController) == null || i.abort(), this.focusHandler.disconnect(), this._dialogContentResizeObserver.disconnect(), this.removeInstanceFromGlobalCollection(), !d.length && this.scrollHandler.enableScroll(), this.didClose.emit({
+      returnValue: this.returnValue,
+      closeTarget: this.overlayCloseElement
+    }));
+  }
+  // Set focus on the first focusable element.
+  setOverlayFocus() {
+    const t = m(
+      Array.from(this.children).filter((e) => e instanceof window.HTMLElement)
+    );
+    r(t), t == null || t.focus();
+  }
+  _syncNegative() {
+    this._dialogTitleElement && (this._dialogTitleElement.negative = this.negative), this._dialogActionsElement && this._dialogActionsElement.toggleAttribute("data-negative", this.negative);
+  }
+  _onContentScroll() {
+    if (!this._dialogContentElement || this.dataset.hideHeader === void 0 && this._dialogContentElement.clientHeight + this._dialogTitleHeight >= this._dialogContentElement.scrollHeight)
+      return;
+    const e = this._dialogContentElement.scrollTop;
+    Math.round(e + this._dialogContentElement.clientHeight) >= this._dialogContentElement.scrollHeight || (e > 0 && this._lastScroll < e ? this._setHideHeaderDataAttribute(!0) : this._setHideHeaderDataAttribute(!1), this._lastScroll = e <= 0 ? 0 : e);
+  }
+  _setDialogHeaderHeight() {
+    var t;
+    this._dialogTitleHeight = (t = this._dialogTitleElement) == null ? void 0 : t.shadowRoot.firstElementChild.clientHeight, this.style.setProperty("--sbb-dialog-header-height", `${this._dialogTitleHeight}px`);
+  }
+  _onContentResize() {
+    var t, e;
+    this._setDialogHeaderHeight(), this._overflows = this._dialogContentElement ? ((t = this._dialogContentElement) == null ? void 0 : t.scrollHeight) > ((e = this._dialogContentElement) == null ? void 0 : e.clientHeight) : !1, this._setOverflowsDataAttribute();
+  }
+  _setHideHeaderDataAttribute(t) {
+    var i;
+    const e = ((i = this._dialogTitleElement) == null ? void 0 : i.hideOnScroll) ?? !1, a = typeof e == "boolean" ? e : v("zero", e, { includeMaxBreakpoint: !0 });
+    this.toggleAttribute("data-hide-header", a ? t : !1), this._dialogTitleElement && this._dialogTitleElement.toggleAttribute("data-hide-header", a ? t : !1);
+  }
+  _setOverflowsDataAttribute() {
+    var t, e;
+    this.toggleAttribute("data-overflows", this._overflows), (t = this._dialogTitleElement) == null || t.toggleAttribute("data-overflows", this._overflows), (e = this._dialogActionsElement) == null || e.toggleAttribute("data-overflows", this._overflows);
+  }
+  render() {
+    return g`
+      <div class="sbb-dialog__container">
+        <div
+          @animationend=${(t) => this.onOverlayAnimationEnd(t)}
+          class="sbb-dialog"
+          id=${this._dialogId}
+        >
+          <div
+            @click=${(t) => this.closeOnSbbOverlayCloseClick(t)}
+            class="sbb-dialog__wrapper"
+          >
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
+    `;
+  }
+};
+s.styles = y;
+b([
+  h({ attribute: "backdrop-action" })
+], s.prototype, "backdropAction", 2);
+s = b([
+  c("sbb-dialog")
+], s);
+export {
+  s as SbbDialogElement
+};

package/dialog.d.ts

@@ -0,0 +1,5 @@
+export * from './dialog/dialog-actions.js';
+export * from './dialog/dialog-content.js';
+export * from './dialog/dialog-title.js';
+export * from './dialog/dialog.js';
+//# sourceMappingURL=dialog.d.ts.map

package/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/elements/dialog.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC"}

package/dialog.js

@@ -0,0 +1,4 @@
+export * from "./dialog/dialog-actions.js";
+export * from "./dialog/dialog-content.js";
+export * from "./dialog/dialog-title.js";
+export * from "./dialog/dialog.js";

package/divider/divider.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbOrientation } from '../core/interfaces.js';
+
+declare const SbbDividerElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
+/**
+ * It displays a divider between sections.
+ */
+export declare class SbbDividerElement extends SbbDividerElement_base {
+    static styles: CSSResultGroup;
+    /** Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal. */
+    orientation: SbbOrientation;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-divider': SbbDividerElement;
+    }
+}
+export {};
+//# sourceMappingURL=divider.d.ts.map

package/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/elements/divider/divider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAK5D;;GAEG;AACH,qBAIa,iBAAkB,SAAQ,sBAA4B;IACjE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mGAAmG;IAC/D,WAAW,EAAE,cAAc,CAAgB;cAE5D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/divider.d.ts

@@ -0,0 +1,2 @@
+export * from './divider/divider.js';
+//# sourceMappingURL=divider.d.ts.map

package/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/elements/divider.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/divider.js

@@ -0,0 +1,34 @@
+import { css as a, LitElement as n, html as v } from "lit";
+import { property as h, customElement as p } from "lit/decorators.js";
+import { hostAttributes as c } from "./core/decorators.js";
+import { SbbNegativeMixin as f } from "./core/mixins.js";
+const m = a`*,:before,:after{box-sizing:border-box}:host{--sbb-divider-color: var(--sbb-color-cloud);--sbb-divider-border-width: var(--sbb-border-width-1x);display:block}:host([orientation=vertical]){height:100%}:host([negative]){--sbb-divider-color: var(--sbb-color-iron)}:host([orientation=horizontal]) .sbb-divider{border-top:var(--sbb-divider-border-width) solid var(--sbb-divider-color)}:host([orientation=vertical]) .sbb-divider{height:100%;border-left:var(--sbb-divider-border-width) solid var(--sbb-divider-color)}`;
+var u = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, i, s, e) => {
+  for (var r = e > 1 ? void 0 : e ? w(i, s) : i, b = t.length - 1, d; b >= 0; b--)
+    (d = t[b]) && (r = (e ? d(i, s, r) : d(r)) || r);
+  return e && r && u(i, s, r), r;
+};
+let o = class extends f(n) {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal";
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("orientation") && this.setAttribute("aria-orientation", this.orientation);
+  }
+  render() {
+    return v` <div class="sbb-divider"></div> `;
+  }
+};
+o.styles = m;
+l([
+  h({ reflect: !0 })
+], o.prototype, "orientation", 2);
+o = l([
+  p("sbb-divider"),
+  c({
+    role: "separator"
+  })
+], o);
+export {
+  o as SbbDividerElement
+};

package/expansion-panel/expansion-panel/expansion-panel.d.ts

@@ -0,0 +1,75 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../../title.js';
+
+declare const SbbExpansionPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * It displays an expandable summary-details widget.
+ *
+ * @slot - Use the unnamed slot to add a `sbb-expansion-panel-header` and a `sbb-expansion-panel-content` element.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-expansion-panel` starts the opening transition.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-expansion-panel` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-expansion-panel` begins the closing transition.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-expansion-panel` is closed.
+ */
+export declare class SbbExpansionPanelElement extends SbbExpansionPanelElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
+    };
+    /** Heading level; if unset, a `div` will be rendered. */
+    titleLevel?: SbbTitleLevel | null;
+    /** The background color of the panel. */
+    color: 'white' | 'milk';
+    /** Whether the panel is expanded. */
+    set expanded(value: boolean);
+    get expanded(): boolean;
+    private _expanded;
+    /** Whether the panel is disabled, so its expanded state can't be changed. */
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    private _disabled;
+    /** Whether the panel has no border. */
+    borderless: boolean;
+    /** Size variant, either l or s. */
+    size: 's' | 'l';
+    /**
+     * The state of the notification.
+     */
+    private set _state(value);
+    private get _state();
+    /** Emits whenever the `sbb-expansion-panel` starts the opening transition. */
+    private _willOpen;
+    /** Emits whenever the `sbb-expansion-panel` is opened. */
+    private _didOpen;
+    /** Emits whenever the `sbb-expansion-panel` begins the closing transition. */
+    private _willClose;
+    /** Emits whenever the `sbb-expansion-panel` is closed. */
+    private _didClose;
+    private _progressiveId;
+    private _headerRef?;
+    private _contentRef?;
+    private _abort;
+    private _initialized;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _toggleExpanded;
+    private _onExpandedChange;
+    private _open;
+    private _close;
+    private _updateDisabledOnHeader;
+    private _handleSlotchange;
+    private _onAnimationEnd;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-expansion-panel': SbbExpansionPanelElement;
+    }
+}
+export {};
+//# sourceMappingURL=expansion-panel.d.ts.map

package/expansion-panel/expansion-panel/expansion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/expansion-panel/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAQpD;;;;;;;;GAQG;AACH,qBACa,wBAAyB,SAAQ,6BAA6B;IACzE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,yDAAyD;IACV,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAEjF,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qCAAqC;IACrC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC,6EAA6E;IAC7E,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC,uCAAuC;IACY,UAAU,UAAS;IAEtE,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D;;OAEG;IACH,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8EAA8E;IAC9E,OAAO,CAAC,SAAS,CAGf;IAEF,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAGd;IAEF,8EAA8E;IAC9E,OAAO,CAAC,UAAU,CAGhB;IAEF,0DAA0D;IAC1D,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,UAAU,CAAC,CAAiC;IACpD,OAAO,CAAC,WAAW,CAAC,CAAkC;IACtD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtB,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS5D,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAkB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/expansion-panel/expansion-panel-content/expansion-panel-content.d.ts

@@ -0,0 +1,17 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * It can be used as a container for the content of the `sbb-expansion-panel` component.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-expansion-panel`.
+ */
+export declare class SbbExpansionPanelContentElement extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-expansion-panel-content': SbbExpansionPanelContentElement;
+    }
+}
+//# sourceMappingURL=expansion-panel-content.d.ts.map

package/expansion-panel/expansion-panel-content/expansion-panel-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-content.d.ts","sourceRoot":"","sources":["../../../../src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC;;;;GAIG;AACH,qBAKa,+BAAgC,SAAQ,UAAU;IAC7D,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,6BAA6B,EAAE,+BAA+B,CAAC;KAChE;CACF"}

package/expansion-panel/expansion-panel-content.d.ts

@@ -0,0 +1,2 @@
+export * from './expansion-panel-content/expansion-panel-content.js';
+//# sourceMappingURL=expansion-panel-content.d.ts.map

package/expansion-panel/expansion-panel-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-content.d.ts","sourceRoot":"","sources":["../../../src/elements/expansion-panel/expansion-panel-content.ts"],"names":[],"mappings":"AAAA,cAAc,sDAAsD,CAAC"}

package/expansion-panel/expansion-panel-content.js

@@ -0,0 +1,29 @@
+import { css as l, LitElement as b, html as r } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { hostAttributes as c } from "../core/decorators.js";
+const x = l`*,:before,:after{box-sizing:border-box}:host{--sbb-expansion-panel-content-padding-inline: var(--sbb-spacing-fixed-6x);--sbb-expansion-panel-content-padding-inline-start: var( --sbb-expansion-panel-content-padding-inline );display:block}:host([data-size=s]){--sbb-expansion-panel-content-padding-inline: var(--sbb-spacing-fixed-5x)}@media (min-width: 22.5rem){:host([data-icon-space]){--sbb-expansion-panel-content-padding-inline-start: calc( var(--sbb-expansion-panel-content-padding-inline) + var(--sbb-expansion-panel-icon-size) + var(--sbb-expansion-panel-title-gap) )}}.sbb-expansion-panel-content{padding-block-end:var(--sbb-spacing-responsive-s);padding-inline:var(--sbb-expansion-panel-content-padding-inline-start) var(--sbb-expansion-panel-content-padding-inline)}::slotted(:is(p,sbb-title):first-child){margin-block-start:0}`;
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, m = (p, e, t, s) => {
+  for (var n = s > 1 ? void 0 : s ? g(e, t) : e, i = p.length - 1, a; i >= 0; i--)
+    (a = p[i]) && (n = (s ? a(e, t, n) : a(n)) || n);
+  return s && n && v(e, t, n), n;
+};
+let o = class extends b {
+  render() {
+    return r`
+      <div class="sbb-expansion-panel-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.styles = x;
+o = m([
+  d("sbb-expansion-panel-content"),
+  c({
+    role: "region",
+    slot: "content"
+  })
+], o);
+export {
+  o as SbbExpansionPanelContentElement
+};

package/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts

@@ -0,0 +1,38 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+
+declare const SbbExpansionPanelHeaderElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
+/**
+ * It acts as a native `summary` tag for the `sbb-expansion-panel` component.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-expansion-panel-header`.
+ * @slot icon - Slot used to render the `sbb-expansion-panel-header` icon.
+ * @event {CustomEvent<void>} toggleExpanded - Notifies that the `sbb-expansion-panel` has to expand.
+ */
+export declare class SbbExpansionPanelHeaderElement extends SbbExpansionPanelHeaderElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly toggleExpanded: "toggleExpanded";
+    };
+    /** Notifies that the `sbb-expansion-panel` has to expand. */
+    private _toggleExpanded;
+    private _abort;
+    private _namedSlots;
+    connectedCallback(): void;
+    private _emitExpandedEvent;
+    private _onMouseMovement;
+    /**
+     * The 'data-icon' is used by the 'sbb-expansion-panel'.
+     * It needs to be set before the @slotchange event bubbles to the 'expansion-panel'
+     * but after the 'NamedSlotStateController' has run.
+     */
+    private _setDataIconAttribute;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-expansion-panel-header': SbbExpansionPanelHeaderElement;
+    }
+}
+export {};
+//# sourceMappingURL=expansion-panel-header.d.ts.map

package/expansion-panel/expansion-panel-header/expansion-panel-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-header.d.ts","sourceRoot":"","sources":["../../../../src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAUnE;;;;;;GAMG;AACH,qBAIa,8BAA+B,SAAQ,mCAEnD;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,6DAA6D;IAC7D,OAAO,CAAC,eAAe,CAMrB;IACF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,WAAW,CAAwE;IAE3E,iBAAiB,IAAI,IAAI;IAQzC,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,gBAAgB;IAQxB;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;cAIV,cAAc,IAAI,cAAc;CAkBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}

package/expansion-panel/expansion-panel-header.d.ts

@@ -0,0 +1,2 @@
+export * from './expansion-panel-header/expansion-panel-header.js';
+//# sourceMappingURL=expansion-panel-header.d.ts.map

package/expansion-panel/expansion-panel-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel-header.d.ts","sourceRoot":"","sources":["../../../src/elements/expansion-panel/expansion-panel-header.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC"}

package/expansion-panel/expansion-panel-header.js

@@ -0,0 +1,75 @@
+import { css as l, html as b, nothing as p } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../core/base-elements.js";
+import { SbbConnectedAbortController as h, SbbSlotStateController as x } from "../core/controllers.js";
+import { hostAttributes as g } from "../core/decorators.js";
+import { EventEmitter as v } from "../core/eventing.js";
+import { SbbDisabledTabIndexActionMixin as m } from "../core/mixins.js";
+import { SbbIconNameMixin as f } from "../icon.js";
+const u = l`*,:before,:after{box-sizing:border-box}:host{--sbb-expansion-panel-header-cursor: pointer;--sbb-expansion-panel-header-text-color: var(--sbb-color-charcoal);--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-6x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-responsive-xs);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-6x);display:block}@media (forced-colors: active){:host{--sbb-expansion-panel-header-text-color: ButtonText}}:host([data-size=s]){--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-2x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-fixed-3x);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-5x)}:host([disabled]){--sbb-expansion-panel-header-cursor: default;--sbb-expansion-panel-header-text-color: var(--sbb-color-granite)}@media (forced-colors: active){:host([disabled]){--sbb-expansion-panel-header-text-color: GrayText}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;justify-content:space-between;align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);-webkit-tap-highlight-color:transparent}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);overflow:hidden}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}`;
+var _ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, w = (e, n, o, t) => {
+  for (var a = t > 1 ? void 0 : t ? E(n, o) : n, i = e.length - 1, r; i >= 0; i--)
+    (r = e[i]) && (a = (t ? r(n, o, a) : r(a)) || a);
+  return t && a && _(n, o, a), a;
+};
+let s = class extends m(
+  f(c)
+) {
+  constructor() {
+    super(...arguments), this._toggleExpanded = new v(
+      this,
+      s.events.toggleExpanded,
+      {
+        bubbles: !0
+      }
+    ), this._abort = new h(this), this._namedSlots = new x(this, () => this._setDataIconAttribute());
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this._abort.signal;
+    this.addEventListener("click", () => this._emitExpandedEvent(), { signal: e }), this.addEventListener("mouseenter", () => this._onMouseMovement(!0), { signal: e }), this.addEventListener("mouseleave", () => this._onMouseMovement(!1), { signal: e });
+  }
+  _emitExpandedEvent() {
+    this.disabled || this._toggleExpanded.emit();
+  }
+  _onMouseMovement(e) {
+    const n = this.closest("sbb-expansion-panel");
+    (!e || n && window.matchMedia("(any-hover: hover)").matches) && n.toggleAttribute("data-toggle-hover", e);
+  }
+  /**
+   * The 'data-icon' is used by the 'sbb-expansion-panel'.
+   * It needs to be set before the @slotchange event bubbles to the 'expansion-panel'
+   * but after the 'NamedSlotStateController' has run.
+   */
+  _setDataIconAttribute() {
+    this.toggleAttribute("data-icon", !!(this.iconName || this._namedSlots.slots.has("icon")));
+  }
+  renderTemplate() {
+    return this._setDataIconAttribute(), b`
+      <span class="sbb-expansion-panel-header__title">
+        <span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>
+        <slot></slot>
+      </span>
+      ${this.disabled ? p : b`<span class="sbb-expansion-panel-header__toggle">
+            <sbb-icon
+              name="chevron-small-down-medium"
+              class="sbb-expansion-panel-header__toggle-icon"
+            >
+            </sbb-icon>
+          </span>`}
+    `;
+  }
+};
+s.styles = u;
+s.events = {
+  toggleExpanded: "toggleExpanded"
+};
+s = w([
+  d("sbb-expansion-panel-header"),
+  g({
+    slot: "header"
+  })
+], s);
+export {
+  s as SbbExpansionPanelHeaderElement
+};

package/expansion-panel/expansion-panel.d.ts

@@ -0,0 +1,2 @@
+export * from './expansion-panel/expansion-panel.js';
+//# sourceMappingURL=expansion-panel.d.ts.map

package/expansion-panel/expansion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}