@sbb-esta/lyne-elements 0.0.0 → 0.52.1

package/README.md

@@ -0,0 +1,55 @@
+# Lyne Components
+
+> Lyne Components are the building blocks of the Lyne Design System
+> and are based on standard compliant Web Components
+> created using [Lit](https://lit.dev/) and
+> browsable through [Storybook](https://lyne-storybook.app.sbb.ch/)
+
+## 🎯 Our aim
+
+To fulfill our [Vision](./docs/VISION.md), we are building and maintaining Lyne, our Design System, which is and acts
+as our common language — our Single Source of Truth.
+For this purpose we use [Design Tokens](https://github.com/sbb-design-systems/lyne-design-tokens) as our design abstractions.
+Those [Design Tokens](https://github.com/sbb-design-systems/lyne-design-tokens) are consumed by Lyne Components and are integrated within our documentation.
+
+Lyne Design Tokens and Lyne Components are available for developers and designers.
+
+## 📚 Documentation
+
+- General docs: [digital.sbb.ch](https://digital.sbb.ch)
+- Component docs: [Storybook](https://lyne-storybook.app.sbb.ch)
+- [Getting started guide](./docs/GETTING_STARTED.md)
+
+## 🔗 Packages
+
+| Package                            | Description                                                                 |
+| ---------------------------------- | --------------------------------------------------------------------------- |
+| `@lyne-esta/elements`              | Web components built on top of the Lyne Design System                       |
+| `@lyne-esta/elements-experimental` | Web components that do not yet align with our architecture or testing goals |
+| `@lyne-esta/react`                 | React wrappers for `@lyne-esta/elements`                                    |
+| `@lyne-esta/react-experimental`    | React wrappers for `@lyne-esta/elements-experimental`                       |
+
+- [NPM Packages](https://www.npmjs.com/search?q=%40sbb-esta%2Flyne-)
+
+## 🖥 Browser and screen reader support
+
+This library supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and Edge.
+
+We aim for great user experience with the following screen readers:
+
+Windows: NVDA and JAWS with FF / Chrome.
+macOS: VoiceOver with Safari / Chrome.
+iOS: VoiceOver with Safari
+Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
+
+## 🙌 Contributing
+
+- [General contribution guide](./docs/CONTRIBUTING.md)
+- [Developer guide](./docs/DEVELOPER.md) for developers to get started working with this repo.
+- [Coding standards](./docs/CODING_STANDARDS.md) for developers.
+- [Code of conduct](./docs/CODE_OF_CONDUCT.md)
+
+## 📝 License
+
+This software is published by SBB-CFF-FFS under the [MIT](/LICENSE) licence and unsupported unless otherwise clearly stated.
+Use at your own risk.

package/_index.scss

@@ -0,0 +1,2 @@
+@forward 'core/styles' hide development-style, link-base, link-focus-visible, link-hover,
+  link-active, link-consolidation;

package/a11y.css

@@ -0,0 +1,22 @@
+.sbb-screen-reader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.sbb-focus-outline:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+
+.sbb-focus-outline-dark:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}

package/accordion/accordion.d.ts

@@ -0,0 +1,41 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../title.js';
+
+declare const SbbAccordionElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * It can be used as a container for one or more `sbb-expansion-panel` component.
+ *
+ * @slot - Use the unnamed slot to add `sbb-expansion-panel` elements.
+ */
+export declare class SbbAccordionElement extends SbbAccordionElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The heading level for the sbb-expansion-panel-headers within the component.
+     * @controls SbbExpansionPanelElement.titleLevel
+     */
+    set titleLevel(value: SbbTitleLevel | null);
+    get titleLevel(): SbbTitleLevel | null;
+    private _titleLevel;
+    /** Whether more than one sbb-expansion-panel can be open at the same time. */
+    set multi(value: boolean);
+    get multi(): boolean;
+    private _multi;
+    /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. `*/
+    size: 's' | 'l';
+    private _abort;
+    private _closePanels;
+    private _resetExpansionPanels;
+    private _setTitleLevelOnChildren;
+    private get _expansionPanels();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _handleSlotchange;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-accordion': SbbAccordionElement;
+    }
+}
+export {};
+//# sourceMappingURL=accordion.d.ts.map

package/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/elements/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;GAIG;AACH,qBACa,mBAAoB,SAAQ,wBAA6B;IACpE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IACW,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,EAGhD;IACD,IAAW,UAAU,IAAI,aAAa,GAAG,IAAI,CAE5C;IACD,OAAO,CAAC,WAAW,CAA8B;IAEjD,8EAA8E;IAC9E,IACW,KAAK,CAAC,KAAK,EAAE,OAAO,EAI9B;IACD,IAAW,KAAK,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,MAAM,CAAkB;IAEhC,+FAA+F;IAC3D,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,wBAAwB;IAMhC,OAAO,KAAK,gBAAgB,GAE3B;IAEe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,OAAO,CAAC,iBAAiB;cAWN,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/accordion.d.ts

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

package/accordion.d.ts.map

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

package/accordion.js

@@ -0,0 +1,88 @@
+import { css as h, LitElement as b, html as p } from "lit";
+import { property as c, customElement as f } from "lit/decorators.js";
+import { SbbConnectedAbortController as d } from "./core/controllers.js";
+import { SbbHydrationMixin as u } from "./core/mixins.js";
+import { SbbExpansionPanelElement as m } from "./expansion-panel.js";
+const v = h`*,:before,:after{box-sizing:border-box}:host{display:block}`;
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, e, s, l) => {
+  for (var i = l > 1 ? void 0 : l ? x(e, s) : e, a = t.length - 1, n; a >= 0; a--)
+    (n = t[a]) && (i = (l ? n(e, s, i) : n(i)) || i);
+  return l && i && g(e, s, i), i;
+};
+let r = class extends u(b) {
+  constructor() {
+    super(...arguments), this.c = null, this.b = !1, this.size = "l", this.f = new d(this);
+  }
+  set titleLevel(t) {
+    this.c = t, this.d();
+  }
+  get titleLevel() {
+    return this.c;
+  }
+  set multi(t) {
+    const e = this.b;
+    this.b = t, this.e(this.b, e);
+  }
+  get multi() {
+    return this.b;
+  }
+  g(t) {
+    var e;
+    ((e = t.target) == null ? void 0 : e.localName) !== "sbb-expansion-panel" || this.multi || this.a.filter((s) => s !== t.target).forEach((s) => s.expanded = !1);
+  }
+  e(t, e) {
+    const s = this.a;
+    s.length > 1 && e && !t && (s[0].expanded = !0, s.filter((l, i) => i > 0).forEach((l) => l.expanded = !1));
+  }
+  d() {
+    this.a.forEach(
+      (t) => t.titleLevel = this.titleLevel
+    );
+  }
+  get a() {
+    var t;
+    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-expansion-panel")) ?? []);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.f.signal;
+    this.addEventListener(
+      m.events.willOpen,
+      (e) => this.g(e),
+      { signal: t }
+    );
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("size") && this.a.forEach((e) => e.size = this.size);
+  }
+  h() {
+    this.a.forEach(
+      (t, e, s) => {
+        t.titleLevel = this.titleLevel, t.size = this.size, t.toggleAttribute("data-accordion-first", e === 0), t.toggleAttribute("data-accordion-last", e === s.length - 1);
+      }
+    );
+  }
+  render() {
+    return p`
+      <div class="sbb-accordion">
+        <slot @slotchange=${this.h}></slot>
+      </div>
+    `;
+  }
+};
+r.styles = v;
+o([
+  c({ attribute: "title-level" })
+], r.prototype, "titleLevel", 1);
+o([
+  c({ type: Boolean })
+], r.prototype, "multi", 1);
+o([
+  c({ reflect: !0 })
+], r.prototype, "size", 2);
+r = o([
+  f("sbb-accordion")
+], r);
+export {
+  r as SbbAccordionElement
+};

package/action-group/action-group.d.ts

@@ -0,0 +1,45 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbButtonSize } from '../button.js';
+import { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
+import { SbbLinkSize } from '../link.js';
+
+/**
+ * It can be used as a container for one or more action element, like `sbb-button` or `sbb-block-link`.
+ *
+ * @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`.
+ */
+export declare class SbbActionGroupElement extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * Set the slotted `<sbb-action-group>` children's alignment.
+     */
+    alignGroup: 'start' | 'center' | 'stretch' | 'end';
+    /**
+     * Overrides the behaviour of `orientation` property.
+     */
+    horizontalFrom: SbbHorizontalFrom;
+    /**
+     * Indicates the orientation of the components inside the `<sbb-action-group>`.
+     */
+    orientation: SbbOrientation;
+    /**
+     * Size of the nested sbb-button instances. This will overwrite the size attribute of nested
+     * sbb-button instances.
+     */
+    buttonSize: SbbButtonSize;
+    /**
+     * Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested
+     * sbb-block-link instances.
+     */
+    linkSize: SbbLinkSize;
+    private _syncButtons;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _syncLinks;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-action-group': SbbActionGroupElement;
+    }
+}
+//# sourceMappingURL=action-group.d.ts.map

package/action-group/action-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-group.d.ts","sourceRoot":"","sources":["../../../src/elements/action-group/action-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,KAAK,EAA0B,aAAa,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,KAAK,EAIV,WAAW,EACZ,MAAM,YAAY,CAAC;AAIpB;;;;GAIG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;OAEG;IAEI,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAW;IAEpE;;OAEG;IAEI,cAAc,EAAE,iBAAiB,CAAY;IAEpD;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;;OAGG;IAEI,UAAU,EAAE,aAAa,CAAO;IAEvC;;;OAGG;IAEI,QAAQ,EAAE,WAAW,CAAO;IAEnC,OAAO,CAAC,YAAY;cAMD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW5E,OAAO,CAAC,UAAU;cAQC,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/action-group.d.ts

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

package/action-group.d.ts.map

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

package/action-group.js

@@ -0,0 +1,57 @@
+import { css as g, LitElement as p, html as u } from "lit";
+import { property as a, customElement as l } from "lit/decorators.js";
+const f = g`*,:before,:after{box-sizing:border-box}:host{display:block}:host([orientation=horizontal]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=horizontal][align-group=start]){--sbb-action-group-justify-content: flex-start}:host([orientation=horizontal][align-group=center]){--sbb-action-group-justify-content: center}:host([orientation=horizontal][align-group=stretch]){--sbb-action-group-justify-content: space-between}:host([orientation=horizontal][align-group=end]){--sbb-action-group-justify-content: flex-end}:host([orientation=vertical]){--sbb-action-group-orientation: column;--sbb-action-group-gap: var(--sbb-spacing-fixed-2x)}:host([orientation=vertical][align-group=start]){--sbb-action-group-align-items: flex-start}:host([orientation=vertical][align-group=center]){--sbb-action-group-align-items: center}:host([orientation=vertical][align-group=stretch]){--sbb-action-group-align-items: stretch}:host([orientation=vertical][align-group=end]){--sbb-action-group-align-items: flex-end}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero][align-group=start]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-start;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=zero][align-group=center]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=zero][align-group=stretch]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: space-between;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=zero][align-group=end]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-end;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro][align-group=start]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-start;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=micro][align-group=center]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=micro][align-group=stretch]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: space-between;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=micro][align-group=end]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-end;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small][align-group=start]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-start;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=small][align-group=center]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=small][align-group=stretch]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: space-between;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=small][align-group=end]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-end;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium][align-group=start]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-start;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=medium][align-group=center]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=medium][align-group=stretch]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: space-between;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=medium][align-group=end]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-end;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large][align-group=start]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-start;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=large][align-group=center]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=large][align-group=stretch]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: space-between;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=large][align-group=end]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-end;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide][align-group=start]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-start;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=wide][align-group=center]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=wide][align-group=stretch]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: space-between;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=wide][align-group=end]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-end;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra][align-group=start]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-start;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=ultra][align-group=center]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: center;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=ultra][align-group=stretch]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: space-between;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}:host([orientation=vertical][horizontal-from=ultra][align-group=end]){--sbb-action-group-orientation: row;--sbb-action-group-align-items: center;--sbb-action-group-justify-content: flex-end;--sbb-action-group-gap: var(--sbb-spacing-fixed-4x)}}.sbb-action-group{display:flex;flex-direction:var(--sbb-action-group-orientation);gap:var(--sbb-action-group-gap);justify-content:var(--sbb-action-group-justify-content);align-items:var(--sbb-action-group-align-items)}.sbb-action-group ::slotted([align-self=start]){margin-inline-end:auto}.sbb-action-group ::slotted([align-self=center]){margin-inline:auto}.sbb-action-group ::slotted([align-self=end]){margin-inline-start:auto}::slotted(:is(sbb-block-link,sbb-block-link-button,sbb-block-link-static)){white-space:nowrap}`;
+var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, r = (t, o, s, e) => {
+  for (var n = e > 1 ? void 0 : e ? h(o, s) : o, b = t.length - 1, c; b >= 0; b--)
+    (c = t[b]) && (n = (e ? c(o, s, n) : c(n)) || n);
+  return e && n && m(o, s, n), n;
+};
+let i = class extends p {
+  constructor() {
+    super(...arguments), this.alignGroup = "start", this.horizontalFrom = "medium", this.orientation = "horizontal", this.buttonSize = "l", this.linkSize = "m";
+  }
+  a() {
+    var t;
+    (t = this.querySelectorAll) == null || t.call(this, "[data-sbb-button]").forEach(
+      (o) => o.size = this.buttonSize
+    );
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("buttonSize") && this.a(), t.has("linkSize") && this.b();
+  }
+  b() {
+    var t;
+    (t = this.querySelectorAll) == null || t.call(this, "sbb-block-link, sbb-block-link-button, sbb-block-link-static").forEach((o) => {
+      o.size = this.linkSize;
+    });
+  }
+  render() {
+    return u`
+      <div class="sbb-action-group">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+i.styles = f;
+r([
+  a({ attribute: "align-group", reflect: !0 })
+], i.prototype, "alignGroup", 2);
+r([
+  a({ attribute: "horizontal-from", reflect: !0 })
+], i.prototype, "horizontalFrom", 2);
+r([
+  a({ reflect: !0 })
+], i.prototype, "orientation", 2);
+r([
+  a({ attribute: "button-size", reflect: !0 })
+], i.prototype, "buttonSize", 2);
+r([
+  a({ attribute: "link-size", reflect: !0 })
+], i.prototype, "linkSize", 2);
+i = r([
+  l("sbb-action-group")
+], i);
+export {
+  i as SbbActionGroupElement
+};

package/alert/alert/alert.d.ts

@@ -0,0 +1,76 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { LinkTargetType } from '../../core/base-elements.js';
+import { SbbTitleLevel } from '../../title.js';
+
+declare const SbbAlertElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
+/**
+ * It displays messages which require user's attention.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-alert`.
+ * @slot icon - Should be a `sbb-icon` which is displayed next to the title. Styling is optimized for icons of type HIM-CUS.
+ * @slot title - Title content.
+ * @event {CustomEvent<void>} willOpen - Emits when the fade in animation starts.
+ * @event {CustomEvent<void>} didOpen - Emits when the fade in animation ends and the button is displayed.
+ * @event {CustomEvent<void>} dismissalRequested - Emits when dismissal of an alert was requested.
+ */
+export declare class SbbAlertElement extends SbbAlertElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly dismissalRequested: "dismissalRequested";
+    };
+    /**
+     * Whether the alert is readonly.
+     * In readonly mode, there is no dismiss button offered to the user.
+     */
+    readonly: boolean;
+    /** You can choose between `m` or `l` size. */
+    size: 's' | 'm' | 'l';
+    /**
+     * Name of the icon which will be forward to the nested `sbb-icon`.
+     * Choose the icons from https://icons.app.sbb.ch.
+     * Styling is optimized for icons of type HIM-CUS.
+     */
+    iconName: string;
+    /** Content of title. */
+    titleContent?: string;
+    /** Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. */
+    titleLevel: SbbTitleLevel;
+    /** Content of the link. */
+    linkContent?: string;
+    /** The href value you want to link to. */
+    href: string | undefined;
+    /** Where to display the linked URL. */
+    target: LinkTargetType | string | undefined;
+    /** The relationship of the linked URL as space-separated link types. */
+    rel: string | undefined;
+    /** This will be forwarded as aria-label to the relevant nested element. */
+    accessibilityLabel: string | undefined;
+    /** The enabled animations. */
+    animation: 'open' | 'none';
+    /** The state of the alert. */
+    private get _state();
+    private set _state(value);
+    /** Emits when the fade in animation starts. */
+    private _willOpen;
+    /** Emits when the fade in animation ends and the button is displayed. */
+    private _didOpen;
+    /** Emits when dismissal of an alert was requested. */
+    private _dismissalRequested;
+    private _language;
+    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    /** Requests dismissal of the alert. */
+    requestDismissal(): void;
+    /** Open the alert. */
+    private _open;
+    private _onAnimationEnd;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-alert': SbbAlertElement;
+    }
+}
+export {};
+//# sourceMappingURL=alert.d.ts.map

package/alert/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAMlE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;;AAIxB;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,oBAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,8CAA8C;IACV,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAO;IAEhE;;;;OAIG;IACmD,QAAQ,EAAE,MAAM,CAAU;IAEhF,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,sFAAsF;IACvC,UAAU,EAAE,aAAa,CAAO;IAE/E,2BAA2B;IACqB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,0CAA0C;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5C,uCAAuC;IACpB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;IAE/D,wEAAwE;IACrD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3C,2EAA2E;IACpB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,MAAM,CAAU;IAExE,8BAA8B;IAC9B,OAAO,KAAK,MAAM,GAEjB;IACD,OAAO,KAAK,MAAM,QAEjB;IAED,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAA+E;IAEhG,yEAAyE;IACzE,OAAO,CAAC,QAAQ,CAA8E;IAE9F,sDAAsD;IACtD,OAAO,CAAC,mBAAmB,CAGzB;IAEF,OAAO,CAAC,SAAS,CAAmC;cAE3B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAM7F,uCAAuC;IAChC,gBAAgB,IAAI,IAAI;IAI/B,sBAAsB;IACtB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,eAAe;cAOJ,MAAM,IAAI,cAAc;CAqD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/alert/alert-group/alert-group.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../../title.js';
+
+declare const SbbAlertGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * It can be used as a container for one or more `sbb-alert` component.
+ *
+ * @slot - Use the unnamed slot to add `sbb-alert` elements to the `sbb-alert-group`.
+ * @slot accessibility-title - title for this `sbb-alert-group` which is only visible for screen reader users.
+ * @event {CustomEvent<SbbAlertElement>} didDismissAlert - Emits when an alert was removed from DOM.
+ * @event {CustomEvent<void>} empty - Emits when `sbb-alert-group` becomes empty.
+ */
+export declare class SbbAlertGroupElement extends SbbAlertGroupElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly didDismissAlert: "didDismissAlert";
+        readonly empty: "empty";
+    };
+    /**
+     * The role attribute defines how to announce alerts to the user.
+     *
+     * 'status': sets aria-live to polite and aria-atomic to true.
+     * 'alert': sets aria-live to assertive and aria-atomic to true.
+     */
+    role: 'alert' | 'status' | string;
+    /** Title for this alert group which is only visible for screen reader users. */
+    accessibilityTitle?: string;
+    /** Level of the accessibility title, will be rendered as heading tag (e.g. h2). Defaults to level 2. */
+    accessibilityTitleLevel: SbbTitleLevel;
+    /** Whether the group currently has any alerts. */
+    private _hasAlerts?;
+    /** Emits when an alert was removed from DOM. */
+    private _didDismissAlert;
+    /** Emits when `sbb-alert-group` becomes empty. */
+    private _empty;
+    private _abort;
+    private _removeAlert;
+    connectedCallback(): void;
+    private _slotChanged;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-alert-group': SbbAlertGroupElement;
+    }
+}
+export {};
+//# sourceMappingURL=alert-group.d.ts.map

package/alert/alert-group/alert-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert-group/alert-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAO1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAKpD;;;;;;;GAOG;AACH,qBACa,oBAAqB,SAAQ,yBAA6B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IAEa,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAY;IAE7D,gFAAgF;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,wGAAwG;IAEjG,uBAAuB,EAAE,aAAa,CAAO;IAEpD,kDAAkD;IACzC,OAAO,CAAC,UAAU,CAAC,CAAU;IAEtC,gDAAgD;IAChD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,kDAAkD;IAClD,OAAO,CAAC,MAAM,CAAiF;IAE/F,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,YAAY;IAoBJ,iBAAiB,IAAI,IAAI;IAQzC,OAAO,CAAC,YAAY;cAaD,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/alert/alert-group.d.ts

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

package/alert/alert-group.d.ts.map

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

package/alert/alert-group.js

@@ -0,0 +1,73 @@
+import { css as u, LitElement as h, nothing as m } from "lit";
+import { property as b, state as f, customElement as v } from "lit/decorators.js";
+import { html as c, unsafeStatic as p } from "lit/static-html.js";
+import { SbbConnectedAbortController as g } from "../core/controllers.js";
+import { EventEmitter as d } from "../core/eventing.js";
+import { SbbHydrationMixin as y } from "../core/mixins.js";
+import { SbbAlertElement as x } from "./alert.js";
+const E = u`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var A = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var o = r > 1 ? void 0 : r ? _(t, i) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (o = (r ? n(t, i, o) : n(o)) || o);
+  return r && o && A(t, i, o), o;
+};
+let s = class extends y(h) {
+  constructor() {
+    super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this.b = new d(
+      this,
+      s.events.didDismissAlert
+    ), this.c = new d(this, s.events.empty), this.d = new g(this);
+  }
+  e(e) {
+    var r;
+    const t = e.target, i = document.activeElement === t;
+    (r = t.parentNode) == null || r.removeChild(t), this.b.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
+      once: !0
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.d.signal;
+    this.addEventListener(x.events.dismissalRequested, (t) => this.e(t), {
+      signal: e
+    });
+  }
+  f(e) {
+    const t = this.a;
+    this.a = e.target.assignedElements().filter((i) => i instanceof Element && i.localName === "sbb-alert").length > 0, !this.a && t && this.c.emit(), this.toggleAttribute("data-empty", !this.a);
+  }
+  render() {
+    const e = `h${this.accessibilityTitleLevel}`;
+    return c`
+      <div class="sbb-alert-group">
+        ${this.a ? c`<${p(e)} class="sbb-alert-group__title">
+              <slot name="accessibility-title">${this.accessibilityTitle}</slot>
+            </${p(e)}>` : m}
+        <slot @slotchange=${(t) => this.f(t)}></slot>
+      </div>
+    `;
+  }
+};
+s.styles = E;
+s.events = {
+  didDismissAlert: "didDismissAlert",
+  empty: "empty"
+};
+l([
+  b({ reflect: !0 })
+], s.prototype, "role", 2);
+l([
+  b({ attribute: "accessibility-title" })
+], s.prototype, "accessibilityTitle", 2);
+l([
+  b({ attribute: "accessibility-title-level" })
+], s.prototype, "accessibilityTitleLevel", 2);
+l([
+  f()
+], s.prototype, "a", 2);
+s = l([
+  v("sbb-alert-group")
+], s);
+export {
+  s as SbbAlertGroupElement
+};

package/alert/alert.d.ts

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

package/alert/alert.d.ts.map

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