@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/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/development/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/development/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/development/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/development/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/development/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/development/expansion-panel/expansion-panel-content.js

@@ -0,0 +1,84 @@
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { hostAttributes } from "../core/decorators.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::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: calc(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 __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 SbbExpansionPanelContentElement = class extends LitElement {
+  render() {
+    return html`
+      <div class="sbb-expansion-panel-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+SbbExpansionPanelContentElement.styles = style;
+SbbExpansionPanelContentElement = __decorateClass([
+  customElement("sbb-expansion-panel-content"),
+  hostAttributes({
+    role: "region",
+    slot: "content"
+  })
+], SbbExpansionPanelContentElement);
+export {
+  SbbExpansionPanelContentElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLWNvbnRlbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9leHBhbnNpb24tcGFuZWwvZXhwYW5zaW9uLXBhbmVsLWNvbnRlbnQvZXhwYW5zaW9uLXBhbmVsLWNvbnRlbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBob3N0QXR0cmlidXRlcyB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2V4cGFuc2lvbi1wYW5lbC1jb250ZW50LnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgY2FuIGJlIHVzZWQgYXMgYSBjb250YWluZXIgZm9yIHRoZSBjb250ZW50IG9mIHRoZSBgc2JiLWV4cGFuc2lvbi1wYW5lbGAgY29tcG9uZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIGNvbnRlbnQgdG8gdGhlIGBzYmItZXhwYW5zaW9uLXBhbmVsYC5cbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi1leHBhbnNpb24tcGFuZWwtY29udGVudCcpXG5AaG9zdEF0dHJpYnV0ZXMoe1xuICByb2xlOiAncmVnaW9uJyxcbiAgc2xvdDogJ2NvbnRlbnQnLFxufSlcbmV4cG9ydCBjbGFzcyBTYmJFeHBhbnNpb25QYW5lbENvbnRlbnRFbGVtZW50IGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi1leHBhbnNpb24tcGFuZWwtY29udGVudFwiPlxuICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItZXhwYW5zaW9uLXBhbmVsLWNvbnRlbnQnOiBTYmJFeHBhbnNpb25QYW5lbENvbnRlbnRFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBa0JhLElBQUEsa0NBQU4sY0FBOEMsV0FBVztBQUFBLEVBRzNDLFNBQXlCO0FBQ25DLFdBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLEVBS1Q7QUFDRjtBQVZhLGdDQUNZLFNBQXlCO0FBRHJDLGtDQUFOLGdCQUFBO0FBQUEsRUFMTixjQUFjLDZCQUE2QjtBQUFBLEVBQzNDLGVBQWU7QUFBQSxJQUNkLE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUFBLENBQ1A7QUFBQSxHQUNZLCtCQUFBOyJ9

package/development/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/development/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/development/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/development/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/development/expansion-panel/expansion-panel-header.js

@@ -0,0 +1,194 @@
+import { css, html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { SbbButtonBaseElement } from "../core/base-elements.js";
+import { SbbConnectedAbortController, SbbSlotStateController } from "../core/controllers.js";
+import { hostAttributes } from "../core/decorators.js";
+import { EventEmitter } from "../core/eventing.js";
+import { SbbDisabledTabIndexActionMixin } from "../core/mixins.js";
+import { SbbIconNameMixin } from "../icon.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::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: normal;
+  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 __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 SbbExpansionPanelHeaderElement = class extends SbbDisabledTabIndexActionMixin(
+  SbbIconNameMixin(SbbButtonBaseElement)
+) {
+  constructor() {
+    super(...arguments);
+    this._toggleExpanded = new EventEmitter(
+      this,
+      SbbExpansionPanelHeaderElement.events.toggleExpanded,
+      {
+        bubbles: true
+      }
+    );
+    this._abort = new SbbConnectedAbortController(this);
+    this._namedSlots = new SbbSlotStateController(this, () => this._setDataIconAttribute());
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener("click", () => this._emitExpandedEvent(), { signal });
+    this.addEventListener("mouseenter", () => this._onMouseMovement(true), { signal });
+    this.addEventListener("mouseleave", () => this._onMouseMovement(false), { signal });
+  }
+  _emitExpandedEvent() {
+    if (!this.disabled) {
+      this._toggleExpanded.emit();
+    }
+  }
+  _onMouseMovement(toggleDataAttribute) {
+    const parent = this.closest("sbb-expansion-panel");
+    if (!toggleDataAttribute || parent && window.matchMedia("(any-hover: hover)").matches) {
+      parent.toggleAttribute("data-toggle-hover", toggleDataAttribute);
+    }
+  }
+  /**
+   * 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() {
+    this._setDataIconAttribute();
+    return html`
+      <span class="sbb-expansion-panel-header__title">
+        <span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>
+        <slot></slot>
+      </span>
+      ${!this.disabled ? html`<span class="sbb-expansion-panel-header__toggle">
+            <sbb-icon
+              name="chevron-small-down-medium"
+              class="sbb-expansion-panel-header__toggle-icon"
+            >
+            </sbb-icon>
+          </span>` : nothing}
+    `;
+  }
+};
+SbbExpansionPanelHeaderElement.styles = style;
+SbbExpansionPanelHeaderElement.events = {
+  toggleExpanded: "toggleExpanded"
+};
+SbbExpansionPanelHeaderElement = __decorateClass([
+  customElement("sbb-expansion-panel-header"),
+  hostAttributes({
+    slot: "header"
+  })
+], SbbExpansionPanelHeaderElement);
+export {
+  SbbExpansionPanelHeaderElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLWhlYWRlci5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2V4cGFuc2lvbi1wYW5lbC9leHBhbnNpb24tcGFuZWwtaGVhZGVyL2V4cGFuc2lvbi1wYW5lbC1oZWFkZXIudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBDU1NSZXN1bHRHcm91cCwgaHRtbCwgbm90aGluZywgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBTYmJCdXR0b25CYXNlRWxlbWVudCB9IGZyb20gJy4uLy4uL2NvcmUvYmFzZS1lbGVtZW50cy5qcyc7XG5pbXBvcnQgeyBTYmJDb25uZWN0ZWRBYm9ydENvbnRyb2xsZXIsIFNiYlNsb3RTdGF0ZUNvbnRyb2xsZXIgfSBmcm9tICcuLi8uLi9jb3JlL2NvbnRyb2xsZXJzLmpzJztcbmltcG9ydCB7IGhvc3RBdHRyaWJ1dGVzIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciB9IGZyb20gJy4uLy4uL2NvcmUvZXZlbnRpbmcuanMnO1xuaW1wb3J0IHsgU2JiRGlzYWJsZWRUYWJJbmRleEFjdGlvbk1peGluIH0gZnJvbSAnLi4vLi4vY29yZS9taXhpbnMuanMnO1xuaW1wb3J0IHsgU2JiSWNvbk5hbWVNaXhpbiB9IGZyb20gJy4uLy4uL2ljb24uanMnO1xuaW1wb3J0IHR5cGUgeyBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnQgfSBmcm9tICcuLi9leHBhbnNpb24tcGFuZWwuanMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9leHBhbnNpb24tcGFuZWwtaGVhZGVyLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgYWN0cyBhcyBhIG5hdGl2ZSBgc3VtbWFyeWAgdGFnIGZvciB0aGUgYHNiYi1leHBhbnNpb24tcGFuZWxgIGNvbXBvbmVudC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBjb250ZW50IHRvIHRoZSBgc2JiLWV4cGFuc2lvbi1wYW5lbC1oZWFkZXJgLlxuICogQHNsb3QgaWNvbiAtIFNsb3QgdXNlZCB0byByZW5kZXIgdGhlIGBzYmItZXhwYW5zaW9uLXBhbmVsLWhlYWRlcmAgaWNvbi5cbiAqIEBldmVudCB7Q3VzdG9tRXZlbnQ8dm9pZD59IHRvZ2dsZUV4cGFuZGVkIC0gTm90aWZpZXMgdGhhdCB0aGUgYHNiYi1leHBhbnNpb24tcGFuZWxgIGhhcyB0byBleHBhbmQuXG4gKi9cbkBjdXN0b21FbGVtZW50KCdzYmItZXhwYW5zaW9uLXBhbmVsLWhlYWRlcicpXG5AaG9zdEF0dHJpYnV0ZXMoe1xuICBzbG90OiAnaGVhZGVyJyxcbn0pXG5leHBvcnQgY2xhc3MgU2JiRXhwYW5zaW9uUGFuZWxIZWFkZXJFbGVtZW50IGV4dGVuZHMgU2JiRGlzYWJsZWRUYWJJbmRleEFjdGlvbk1peGluKFxuICBTYmJJY29uTmFtZU1peGluKFNiYkJ1dHRvbkJhc2VFbGVtZW50KSxcbikge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcbiAgcHVibGljIHN0YXRpYyByZWFkb25seSBldmVudHMgPSB7XG4gICAgdG9nZ2xlRXhwYW5kZWQ6ICd0b2dnbGVFeHBhbmRlZCcsXG4gIH0gYXMgY29uc3Q7XG5cbiAgLyoqIE5vdGlmaWVzIHRoYXQgdGhlIGBzYmItZXhwYW5zaW9uLXBhbmVsYCBoYXMgdG8gZXhwYW5kLiAqL1xuICBwcml2YXRlIF90b2dnbGVFeHBhbmRlZDogRXZlbnRFbWl0dGVyID0gbmV3IEV2ZW50RW1pdHRlcihcbiAgICB0aGlzLFxuICAgIFNiYkV4cGFuc2lvblBhbmVsSGVhZGVyRWxlbWVudC5ldmVudHMudG9nZ2xlRXhwYW5kZWQsXG4gICAge1xuICAgICAgYnViYmxlczogdHJ1ZSxcbiAgICB9LFxuICApO1xuICBwcml2YXRlIF9hYm9ydCA9IG5ldyBTYmJDb25uZWN0ZWRBYm9ydENvbnRyb2xsZXIodGhpcyk7XG4gIHByaXZhdGUgX25hbWVkU2xvdHMgPSBuZXcgU2JiU2xvdFN0YXRlQ29udHJvbGxlcih0aGlzLCAoKSA9PiB0aGlzLl9zZXREYXRhSWNvbkF0dHJpYnV0ZSgpKTtcblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICBjb25zdCBzaWduYWwgPSB0aGlzLl9hYm9ydC5zaWduYWw7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHRoaXMuX2VtaXRFeHBhbmRlZEV2ZW50KCksIHsgc2lnbmFsIH0pO1xuICAgIHRoaXMuYWRkRXZlbnRMaXN0ZW5lcignbW91c2VlbnRlcicsICgpID0+IHRoaXMuX29uTW91c2VNb3ZlbWVudCh0cnVlKSwgeyBzaWduYWwgfSk7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWxlYXZlJywgKCkgPT4gdGhpcy5fb25Nb3VzZU1vdmVtZW50KGZhbHNlKSwgeyBzaWduYWwgfSk7XG4gIH1cblxuICBwcml2YXRlIF9lbWl0RXhwYW5kZWRFdmVudCgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuX3RvZ2dsZUV4cGFuZGVkLmVtaXQoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9vbk1vdXNlTW92ZW1lbnQodG9nZ2xlRGF0YUF0dHJpYnV0ZTogYm9vbGVhbik6IHZvaWQge1xuICAgIGNvbnN0IHBhcmVudDogU2JiRXhwYW5zaW9uUGFuZWxFbGVtZW50ID0gdGhpcy5jbG9zZXN0KCdzYmItZXhwYW5zaW9uLXBhbmVsJykhO1xuICAgIC8vIFRoZSBgc2JiLmhvdmVyLW1xYCBsb2dpYyBoYXMgYmVlbiByZW1vdmVkIGZyb20gc2NzcywgYnV0IGl0IG11c3QgYmUgcmVwbGljYXRlZCB0byBoYXZlIHRoZSBjb3JyZWN0IGJlaGF2aW9yIG9uIG1vYmlsZS5cbiAgICBpZiAoIXRvZ2dsZURhdGFBdHRyaWJ1dGUgfHwgKHBhcmVudCAmJiB3aW5kb3cubWF0Y2hNZWRpYSgnKGFueS1ob3ZlcjogaG92ZXIpJykubWF0Y2hlcykpIHtcbiAgICAgIHBhcmVudC50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtdG9nZ2xlLWhvdmVyJywgdG9nZ2xlRGF0YUF0dHJpYnV0ZSk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFRoZSAnZGF0YS1pY29uJyBpcyB1c2VkIGJ5IHRoZSAnc2JiLWV4cGFuc2lvbi1wYW5lbCcuXG4gICAqIEl0IG5lZWRzIHRvIGJlIHNldCBiZWZvcmUgdGhlIEBzbG90Y2hhbmdlIGV2ZW50IGJ1YmJsZXMgdG8gdGhlICdleHBhbnNpb24tcGFuZWwnXG4gICAqIGJ1dCBhZnRlciB0aGUgJ05hbWVkU2xvdFN0YXRlQ29udHJvbGxlcicgaGFzIHJ1bi5cbiAgICovXG4gIHByaXZhdGUgX3NldERhdGFJY29uQXR0cmlidXRlKCk6IHZvaWQge1xuICAgIHRoaXMudG9nZ2xlQXR0cmlidXRlKCdkYXRhLWljb24nLCAhISh0aGlzLmljb25OYW1lIHx8IHRoaXMuX25hbWVkU2xvdHMuc2xvdHMuaGFzKCdpY29uJykpKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgdGhpcy5fc2V0RGF0YUljb25BdHRyaWJ1dGUoKTtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWV4cGFuc2lvbi1wYW5lbC1oZWFkZXJfX3RpdGxlXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWV4cGFuc2lvbi1wYW5lbC1oZWFkZXJfX2ljb25cIj4gJHt0aGlzLnJlbmRlckljb25TbG90KCl9IDwvc3Bhbj5cbiAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgPC9zcGFuPlxuICAgICAgJHshdGhpcy5kaXNhYmxlZFxuICAgICAgICA/IGh0bWxgPHNwYW4gY2xhc3M9XCJzYmItZXhwYW5zaW9uLXBhbmVsLWhlYWRlcl9fdG9nZ2xlXCI+XG4gICAgICAgICAgICA8c2JiLWljb25cbiAgICAgICAgICAgICAgbmFtZT1cImNoZXZyb24tc21hbGwtZG93bi1tZWRpdW1cIlxuICAgICAgICAgICAgICBjbGFzcz1cInNiYi1leHBhbnNpb24tcGFuZWwtaGVhZGVyX190b2dnbGUtaWNvblwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L3NiYi1pY29uPlxuICAgICAgICAgIDwvc3Bhbj5gXG4gICAgICAgIDogbm90aGluZ31cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItZXhwYW5zaW9uLXBhbmVsLWhlYWRlcic6IFNiYkV4cGFuc2lvblBhbmVsSGVhZGVyRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBd0JPLElBQU0saUNBQU4sY0FBNkM7QUFBQSxFQUNsRCxpQkFBaUIsb0JBQW9CO0FBQ3ZDLEVBQUU7QUFBQSxFQUZLLGNBQUE7QUFBQSxVQUFBLEdBQUEsU0FBQTtBQVNMLFNBQVEsa0JBQWdDLElBQUk7QUFBQSxNQUMxQztBQUFBLE1BQ0EsK0JBQStCLE9BQU87QUFBQSxNQUN0QztBQUFBLFFBQ0UsU0FBUztBQUFBLE1BQ1g7QUFBQSxJQUFBO0FBRU0sU0FBQSxTQUFTLElBQUksNEJBQTRCLElBQUk7QUFDckQsU0FBUSxjQUFjLElBQUksdUJBQXVCLE1BQU0sTUFBTSxLQUFLLHVCQUF1QjtBQUFBLEVBQUE7QUFBQSxFQUV6RSxvQkFBMEI7QUFDeEMsVUFBTSxrQkFBa0I7QUFDbEIsVUFBQSxTQUFTLEtBQUssT0FBTztBQUN0QixTQUFBLGlCQUFpQixTQUFTLE1BQU0sS0FBSyxzQkFBc0IsRUFBRSxRQUFRO0FBQ3JFLFNBQUEsaUJBQWlCLGNBQWMsTUFBTSxLQUFLLGlCQUFpQixJQUFJLEdBQUcsRUFBRSxPQUFBLENBQVE7QUFDNUUsU0FBQSxpQkFBaUIsY0FBYyxNQUFNLEtBQUssaUJBQWlCLEtBQUssR0FBRyxFQUFFLE9BQUEsQ0FBUTtBQUFBLEVBQ3BGO0FBQUEsRUFFUSxxQkFBMkI7QUFDN0IsUUFBQSxDQUFDLEtBQUssVUFBVTtBQUNsQixXQUFLLGdCQUFnQjtJQUN2QjtBQUFBLEVBQ0Y7QUFBQSxFQUVRLGlCQUFpQixxQkFBb0M7QUFDckQsVUFBQSxTQUFtQyxLQUFLLFFBQVEscUJBQXFCO0FBRTNFLFFBQUksQ0FBQyx1QkFBd0IsVUFBVSxPQUFPLFdBQVcsb0JBQW9CLEVBQUUsU0FBVTtBQUNoRixhQUFBLGdCQUFnQixxQkFBcUIsbUJBQW1CO0FBQUEsSUFDakU7QUFBQSxFQUNGO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLEVBT1Esd0JBQThCO0FBQy9CLFNBQUEsZ0JBQWdCLGFBQWEsQ0FBQyxFQUFFLEtBQUssWUFBWSxLQUFLLFlBQVksTUFBTSxJQUFJLE1BQU0sRUFBRTtBQUFBLEVBQzNGO0FBQUEsRUFFbUIsaUJBQWlDO0FBQ2xELFNBQUssc0JBQXNCO0FBQ3BCLFdBQUE7QUFBQTtBQUFBLDBEQUUrQyxLQUFLLGdCQUFnQjtBQUFBO0FBQUE7QUFBQSxRQUd2RSxDQUFDLEtBQUssV0FDSjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxxQkFPQSxPQUFPO0FBQUE7QUFBQSxFQUVmO0FBQ0Y7QUFwRWEsK0JBR1ksU0FBeUI7QUFIckMsK0JBSVksU0FBUztBQUFBLEVBQzlCLGdCQUFnQjtBQUNsQjtBQU5XLGlDQUFOLGdCQUFBO0FBQUEsRUFKTixjQUFjLDRCQUE0QjtBQUFBLEVBQzFDLGVBQWU7QUFBQSxJQUNkLE1BQU07QUFBQSxFQUFBLENBQ1A7QUFBQSxHQUNZLDhCQUFBOyJ9

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

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

package/development/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"}