@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/tag/tag/tag.d.ts

@@ -0,0 +1,53 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+
+export type SbbTagSize = 's' | 'm';
+declare const SbbTagElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
+/**
+ * It displays a selectable element which can be used as a filter.
+ *
+ * @slot - Use the unnamed slot to add content to the tag label.
+ * @slot icon - Use this slot to display an icon at the component start, by providing a `sbb-icon` component.
+ * @slot amount - Provide an amount to show it at the component end.
+ * @event {CustomEvent<void>} input - Input event emitter
+ * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @event {CustomEvent<void>} change - Change event emitter
+ */
+export declare class SbbTagElement extends SbbTagElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly input: "input";
+        readonly didChange: "didChange";
+        readonly change: "change";
+    };
+    /** Amount displayed inside the tag. */
+    amount?: string;
+    /** Whether the tag is checked. */
+    checked: boolean;
+    /** Tag size. */
+    set size(value: SbbTagSize);
+    get size(): SbbTagSize;
+    private _size;
+    /** Reference to the connected tag group. */
+    private _group;
+    /** Input event emitter */
+    private _input;
+    /** @deprecated only used for React. Will probably be removed once React 19 is available. */
+    private _didChange;
+    /** Change event emitter */
+    private _change;
+    private _abort;
+    constructor();
+    connectedCallback(): void;
+    /** Method triggered on button click. Inverts the checked value and emits events. */
+    private _handleClick;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-tag': SbbTagElement;
+    }
+}
+export {};
+//# sourceMappingURL=tag.d.ts.map

package/tag/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/elements/tag/tag/tag.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AASnE,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;;AAEnC;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,kBAElC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,uCAAuC;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpD,kCAAkC;IACiB,OAAO,UAAS;IAEnE,gBAAgB;IAChB,IACW,IAAI,CAAC,KAAK,EAAE,UAAU,EAEhC;IACD,IAAW,IAAI,IAAI,UAAU,CAE5B;IACD,OAAO,CAAC,KAAK,CAAmB;IAEhC,4CAA4C;IAC5C,OAAO,CAAC,MAAM,CAAmC;IAEjD,0BAA0B;IAC1B,OAAO,CAAC,MAAM,CAGX;IAEH,4FAA4F;IAC5F,OAAO,CAAC,UAAU,CAEf;IAEH,2BAA2B;IAC3B,OAAO,CAAC,OAAO,CAEZ;IAEH,OAAO,CAAC,MAAM,CAAyC;;IAOvC,iBAAiB,IAAI,IAAI;IAMzC,oFAAoF;IACpF,OAAO,CAAC,YAAY;cAgBD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAazD,cAAc,IAAI,cAAc;CAWpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

package/tag/tag-group/tag-group.d.ts

@@ -0,0 +1,46 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { WithListChildren } from '../../core/mixins.js';
+import { SbbTagElement, SbbTagSize } from '../tag.js';
+
+declare const SbbTagGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTagElement>> & typeof LitElement;
+/**
+ * It can be used as a container for one or more `sbb-tag`.
+ *
+ * @slot - Use the unnamed slot to add one or more 'sbb-tag' elements to the `sbb-tag-group`.
+ */
+export declare class SbbTagGroupElement extends SbbTagGroupElement_base {
+    static styles: CSSResultGroup;
+    protected readonly listChildLocalNames: string[];
+    /**
+     * This will be forwarded as aria-label to the inner list.
+     */
+    listAccessibilityLabel?: string;
+    /**
+     * If set multiple to false, the selection is exclusive and the value is a string (or null).
+     * If set multiple to true, the selection can have multiple values and therefore value is an array.
+     *
+     * Changing multiple during run time is not supported.
+     */
+    multiple: boolean;
+    /** Tag group size. */
+    size: SbbTagSize;
+    /**
+     * Value of the sbb-tag-group.
+     * If set multiple to false, the value is a string (or null).
+     * If set multiple to true, the value is an array.
+     */
+    set value(value: string | string[] | null);
+    get value(): string | string[] | null;
+    private _value;
+    /** The child instances of sbb-tag as an array. */
+    get tags(): SbbTagElement[];
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-tag-group': SbbTagGroupElement;
+    }
+}
+export {};
+//# sourceMappingURL=tag-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tag/tag-group/tag-group.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;;AAI3D;;;;GAIG;AACH,qBACa,kBAAmB,SAAQ,uBAEvC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mBAA4B,mBAAmB,WAAsB;IAErE;;OAEG;IACyD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAE5F;;;;;OAKG;IACiC,QAAQ,UAAS;IAErD,sBAAsB;IACc,IAAI,EAAE,UAAU,CAAO;IAE3D;;;;OAIG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,EAyB/C;IACD,IAAW,KAAK,IAAI,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAM3C;IACD,OAAO,CAAC,MAAM,CAAkC;IAEhD,kDAAkD;IAClD,IAAW,IAAI,IAAI,aAAa,EAAE,CAEjC;cAEkB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cA0B3E,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/tag/tag-group.d.ts

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

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

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

package/tag/tag-group.js

@@ -0,0 +1,82 @@
+import { css as h, LitElement as u, isServer as b, html as f } from "lit";
+import { property as o, customElement as n } from "lit/decorators.js";
+import { setOrRemoveAttribute as m } from "../core/dom.js";
+import { SbbNamedSlotListMixin as y } from "../core/mixins.js";
+const g = h`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-tag-group__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}`;
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
+  for (var l = i > 1 ? void 0 : i ? v(t, s) : t, c = e.length - 1, p; c >= 0; c--)
+    (p = e[c]) && (l = (i ? p(t, s, l) : p(l)) || l);
+  return i && l && d(t, s, l), l;
+};
+let r = class extends y(
+  u
+) {
+  constructor() {
+    super(...arguments), this.listChildLocalNames = ["sbb-tag", "div"], this.multiple = !1, this.size = "m", this._value = null;
+  }
+  set value(e) {
+    const t = this.tags;
+    if (b)
+      this._value = e;
+    else if (e === null)
+      t.forEach((s) => s.checked = !1);
+    else if (this.multiple) {
+      if (!Array.isArray(e) && t.every((i) => i.value !== e))
+        try {
+          e = JSON.parse(e);
+        } catch {
+        }
+      const s = Array.isArray(e) ? e : [e];
+      t.forEach((i) => i.checked = s.includes(i.value ?? i.getAttribute("value")));
+    } else
+      Array.isArray(e) || t.forEach((s) => s.checked = (s.value ?? s.getAttribute("value")) === e);
+  }
+  get value() {
+    var e;
+    return b ? this._value : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : ((e = this.tags.find((t) => t.checked)) == null ? void 0 : e.value) ?? null;
+  }
+  /** The child instances of sbb-tag as an array. */
+  get tags() {
+    var e;
+    return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-tag")) ?? []);
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("size") && this.tags.forEach((t) => {
+      var s;
+      return (s = t.requestUpdate) == null ? void 0 : s.call(t, "size");
+    }), (e.has("listChildren") || e.has("multiple")) && !this.multiple && this.tags.filter((t) => t.checked).slice(1).forEach((t) => t.checked = !1), m(
+      this,
+      "role",
+      e.has("listAccessibilityLabel") && this.listAccessibilityLabel ? null : "group"
+    );
+  }
+  render() {
+    return f`
+      <div class="sbb-tag-group">
+        ${this.renderList({
+      class: "sbb-tag-group__list",
+      ariaLabel: this.listAccessibilityLabel
+    })}
+      </div>
+    `;
+  }
+};
+r.styles = g;
+a([
+  o({ attribute: "list-accessibility-label" })
+], r.prototype, "listAccessibilityLabel", 2);
+a([
+  o({ type: Boolean })
+], r.prototype, "multiple", 2);
+a([
+  o({ reflect: !0 })
+], r.prototype, "size", 2);
+a([
+  o()
+], r.prototype, "value", 1);
+r = a([
+  n("sbb-tag-group")
+], r);
+export {
+  r as SbbTagGroupElement
+};

package/tag/tag.d.ts

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

package/tag/tag.d.ts.map

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

package/tag/tag.js

@@ -0,0 +1,82 @@
+import { css as d, html as g } from "lit";
+import { property as c, customElement as h } from "lit/decorators.js";
+import { SbbButtonBaseElement as v } from "../core/base-elements.js";
+import { SbbConnectedAbortController as u, SbbSlotStateController as m } from "../core/controllers.js";
+import { EventEmitter as l } from "../core/eventing.js";
+import { SbbDisabledTabIndexActionMixin as p } from "../core/mixins.js";
+import { SbbIconNameMixin as f } from "../icon.js";
+const x = d`*,:before,:after{box-sizing:border-box}:host{--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-color-white);--sbb-tag-border-color: var(--sbb-color-cloud);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-charcoal);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x);display:inline-block;outline:none!important;max-width:100%}@media (forced-colors: active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host([checked]){--sbb-tag-border-color: var(--sbb-color-charcoal);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host([checked]){--sbb-tag-border-color: Highlight !important}}:host([disabled]){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host([checked][disabled]){--sbb-tag-border-color: var(--sbb-color-metal)}@media (any-hover: hover){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-border-color: Highlight}}:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-iron)}@media (forced-colors: active){:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:pointer;border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([disabled]) .sbb-tag{cursor:unset;pointer-events:none}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-body-text) * 1em);flex-shrink:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);color:var(--sbb-tag-amount-color)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, e, b, a) => {
+  for (var s = a > 1 ? void 0 : a ? _(e, b) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = (a ? n(e, b, s) : n(s)) || s);
+  return a && s && y(e, b, s), s;
+};
+let o = class extends f(
+  p(v)
+) {
+  constructor() {
+    super(), this.checked = !1, this._size = "m", this._group = null, this._input = new l(this, o.events.input, {
+      bubbles: !0,
+      composed: !0
+    }), this._didChange = new l(this, o.events.didChange, {
+      bubbles: !0
+    }), this._change = new l(this, o.events.change, {
+      bubbles: !0
+    }), this._abort = new u(this), new m(this);
+  }
+  set size(t) {
+    this._size = t;
+  }
+  get size() {
+    var t;
+    return ((t = this._group) == null ? void 0 : t.size) ?? this._size;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._group = this.closest("sbb-tag-group"), this.addEventListener("click", () => this._handleClick(), { signal: this._abort.signal });
+  }
+  /** Method triggered on button click. Inverts the checked value and emits events. */
+  _handleClick() {
+    if (this.disabled)
+      return;
+    const t = this.closest("sbb-tag-group");
+    t && !t.multiple && this.checked || (this.checked = !this.checked, this._input.emit(), this._change.emit(), this._didChange.emit());
+  }
+  willUpdate(t) {
+    var b;
+    super.willUpdate(t), t.has("checked") && this.setAttribute("aria-pressed", `${this.checked}`);
+    const e = (b = this.closest) == null ? void 0 : b.call(this, "sbb-tag-group");
+    e && !e.multiple && t.has("checked") && this.checked && (e == null || e.tags.filter((a) => a !== this).forEach((a) => a.checked = !1));
+  }
+  renderTemplate() {
+    return g`
+      <span class="sbb-tag__icon sbb-tag--shift"> ${this.renderIconSlot()} </span>
+      <span class="sbb-tag__text sbb-tag--shift">
+        <slot></slot>
+      </span>
+      <span class="sbb-tag__amount sbb-tag--shift">
+        <slot name="amount">${this.amount}</slot>
+      </span>
+    `;
+  }
+};
+o.styles = x;
+o.events = {
+  input: "input",
+  didChange: "didChange",
+  change: "change"
+};
+r([
+  c({ reflect: !0 })
+], o.prototype, "amount", 2);
+r([
+  c({ reflect: !0, type: Boolean })
+], o.prototype, "checked", 2);
+r([
+  c({ reflect: !0 })
+], o.prototype, "size", 1);
+o = r([
+  h("sbb-tag")
+], o);
+export {
+  o as SbbTagElement
+};

package/tag.d.ts

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

package/tag.d.ts.map

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

package/tag.js

@@ -0,0 +1,2 @@
+export * from "./tag/tag.js";
+export * from "./tag/tag-group.js";

package/teaser/teaser.d.ts

@@ -0,0 +1,31 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+import { SbbTitleLevel } from '../title.js';
+
+/**
+ * It displays an interactive image with caption.
+ *
+ * @slot image - Slot used to render the image.
+ * @slot chip - Slot used to render the sbb-chip label.
+ * @slot title - Slot used to render the title.
+ * @slot - Use the unnamed slot to render the description.
+ */
+export declare class SbbTeaserElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Teaser variant - define the position and the alignment of the text block. */
+    alignment: 'after-centered' | 'after' | 'below';
+    /** Heading level of the sbb-title element (e.g. h1-h6). */
+    titleLevel: SbbTitleLevel;
+    /** Content of title. */
+    titleContent?: string;
+    /** Content of chip. */
+    chipContent?: string;
+    constructor();
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser': SbbTeaserElement;
+    }
+}
+//# sourceMappingURL=teaser.d.ts.map

package/teaser/teaser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,kBAAkB;IACtD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAC5C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CAChE;IAEnB,2DAA2D;IACZ,UAAU,EAAE,aAAa,CAAO;IAE/E,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,uBAAuB;IACwC,WAAW,CAAC,EAAE,MAAM,CAAC;;cAOjE,cAAc,IAAI,cAAc;CAoBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/teaser-hero/teaser-hero.d.ts

@@ -0,0 +1,26 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+
+/**
+ * It displays an image and an action call within a panel.
+ *
+ * @slot - Use the unnamed slot to add text content to the panel
+ * @slot link-content - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    linkContent?: string;
+    /** Image src will be passed to `sbb-image`. */
+    imageSrc?: string;
+    /** Image alt text will be passed to `sbb-image`. */
+    imageAlt?: string;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.d.ts.map

package/teaser-hero/teaser-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D,OAAO,aAAa,CAAC;AACrB,OAAO,8BAA8B,CAAC;AAEtC;;;;;;GAMG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACyB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,+CAA+C;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,oDAAoD;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;cAE5C,cAAc,IAAI,cAAc;CAyBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/teaser-hero.d.ts

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

package/teaser-hero.d.ts.map

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

package/teaser-hero.js

@@ -0,0 +1,51 @@
+import { css as g, nothing as b } from "lit";
+import { property as p, customElement as m } from "lit/decorators.js";
+import { html as l } from "lit/static-html.js";
+import { SbbLinkBaseElement as c } from "./core/base-elements.js";
+import "./image.js";
+import "./link/block-link-static.js";
+const v = g`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing);--sbb-teaser-hero-brightness-hover: 1.075}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover);--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height)}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);position:absolute;top:50%;transform:translateY(-50%);z-index:1}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}.sbb-teaser-hero__panel-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::slotted([slot=image]),sbb-image{will-change:filter;filter:brightness(var(--sbb-teaser-hero-brightness, 1));transition:filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}`;
+var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (h, t, i, n) => {
+  for (var e = n > 1 ? void 0 : n ? f(t, i) : t, r = h.length - 1, o; r >= 0; r--)
+    (o = h[r]) && (e = (n ? o(t, i, e) : o(e)) || e);
+  return n && e && d(t, i, e), e;
+};
+let a = class extends c {
+  renderTemplate() {
+    return l`
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        ${this.href ? l`<sbb-block-link-static
+              class="sbb-teaser-hero__panel-link"
+              icon-name="chevron-small-right-small"
+              icon-placement="end"
+              size="m"
+              negative
+            >
+              <slot name="link-content">${this.linkContent}</slot>
+            </sbb-block-link-static>` : b}
+      </span>
+      <slot name="image">
+        ${this.imageSrc ? l`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? b}></sbb-image>` : b}
+      </slot>
+    `;
+  }
+};
+a.styles = v;
+s([
+  p({ attribute: "link-content" })
+], a.prototype, "linkContent", 2);
+s([
+  p({ attribute: "image-src" })
+], a.prototype, "imageSrc", 2);
+s([
+  p({ attribute: "image-alt" })
+], a.prototype, "imageAlt", 2);
+a = s([
+  m("sbb-teaser-hero")
+], a);
+export {
+  a as SbbTeaserHeroElement
+};

package/teaser-paid/teaser-paid.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+
+/**
+ * It displays an image and a chip with a text.
+ *
+ * @slot chip - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ */
+export declare class SbbTeaserPaidElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    private _chipSlotChanged;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-paid': SbbTeaserPaidElement;
+    }
+}
+//# sourceMappingURL=teaser-paid.d.ts.map

package/teaser-paid/teaser-paid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CAMpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/teaser-paid.d.ts

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

package/teaser-paid.d.ts.map

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

package/teaser-paid.js

@@ -0,0 +1,28 @@
+import { css as b, html as l } from "lit";
+import { customElement as p } from "lit/decorators.js";
+import { SbbLinkBaseElement as c } from "./core/base-elements.js";
+const d = b`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-teaser-paid-brightness-hover: 1.075;--sbb-teaser-paid-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-paid-animation-easing: var(--sbb-animation-easing)}@media (any-hover: hover){:host(:hover){--sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover)}}.sbb-teaser-paid{position:relative;display:block}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-paid:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-paid-chip-inset);z-index:1}::slotted([slot=image]){will-change:filter;filter:brightness(var(--sbb-teaser-paid-brightness, 1));transition:filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing)}`;
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, m = (s, t, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? v(t, a) : t, o = s.length - 1, r; o >= 0; o--)
+    (r = s[o]) && (e = (i ? r(t, a, e) : r(e)) || e);
+  return i && e && h(t, a, e), e;
+};
+let n = class extends c {
+  _chipSlotChanged() {
+    var s;
+    (s = this.querySelector("sbb-chip")) == null || s.setAttribute("color", "charcoal");
+  }
+  renderTemplate() {
+    return l`
+      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
+      <slot name="image"></slot>
+    `;
+  }
+};
+n.styles = d;
+n = m([
+  p("sbb-teaser-paid")
+], n);
+export {
+  n as SbbTeaserPaidElement
+};

package/teaser.d.ts

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

package/teaser.d.ts.map

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

package/teaser.js

@@ -0,0 +1,57 @@
+import { property as o, customElement as d } from "lit/decorators.js";
+import { html as v } from "lit/static-html.js";
+import { SbbLinkBaseElement as c } from "./core/base-elements.js";
+import { SbbSlotStateController as h } from "./core/controllers.js";
+import { css as p } from "lit";
+import "./chip.js";
+import "./title.js";
+const f = p`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: 1.075;--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser{display:flex;text-decoration:none}.sbb-teaser:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){will-change:transform;display:block;object-fit:cover;width:18.75rem;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);aspect-ratio:4/3}@media (any-hover: hover){.sbb-teaser:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);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:inline-block;color:var(--sbb-teaser-description-color)}`;
+var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (l, a, b, r) => {
+  for (var e = r > 1 ? void 0 : r ? u(a, b) : a, i = l.length - 1, n; i >= 0; i--)
+    (n = l[i]) && (e = (r ? n(a, b, e) : n(e)) || e);
+  return r && e && m(a, b, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(), this.alignment = "after-centered", this.titleLevel = "5", new h(this);
+  }
+  renderTemplate() {
+    return v`
+      <span class="sbb-teaser__container">
+        <span class="sbb-teaser__image-wrapper">
+          <slot name="image"></slot>
+        </span>
+        <span class="sbb-teaser__text">
+          <sbb-chip size="xxs" color="charcoal" class="sbb-teaser__chip">
+            <slot name="chip">${this.chipContent}</slot>
+          </sbb-chip>
+          <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">
+            <slot name="title">${this.titleContent}</slot>
+          </sbb-title>
+          <span class="sbb-teaser__description">
+            <slot></slot>
+          </span>
+        </span>
+      </span>
+    `;
+  }
+};
+t.styles = f;
+s([
+  o({ reflect: !0 })
+], t.prototype, "alignment", 2);
+s([
+  o({ attribute: "title-level" })
+], t.prototype, "titleLevel", 2);
+s([
+  o({ attribute: "title-content" })
+], t.prototype, "titleContent", 2);
+s([
+  o({ attribute: "chip-content", reflect: !0 })
+], t.prototype, "chipContent", 2);
+t = s([
+  d("sbb-teaser")
+], t);
+export {
+  t as SbbTeaserElement
+};

package/time-input/time-input.d.ts

@@ -0,0 +1,68 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbDateLike } from '../core/interfaces.js';
+
+/**
+ * * Combined with a native input, it displays the input's value as a formatted time.
+ *
+ * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @event {CustomEvent<SbbValidationChangeEvent>} validationChange - Emits whenever the internal validation state changes.
+ */
+export declare class SbbTimeInputElement extends LitElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly didChange: "didChange";
+        readonly validationChange: "validationChange";
+    };
+    /** Reference of the native input connected to the datepicker. */
+    set input(value: string | HTMLElement);
+    get input(): string | HTMLElement | null;
+    private _input;
+    private _inputElement;
+    /**
+     * @deprecated only used for React. Will probably be removed once React 19 is available.
+     */
+    private _didChange;
+    /** Emits whenever the internal validation state changes. */
+    private _validationChange;
+    private _statusContainer;
+    private _abortController;
+    private _language;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Gets the input value with the correct date format. */
+    getValueAsDate(): Date | null;
+    /** Set the input value to the correctly formatted value. */
+    setValueAsDate(date: SbbDateLike): void;
+    private _findInputElement;
+    private _registerInputElement;
+    /** Applies the correct format to values and triggers event dispatch. */
+    private _updateValueAndEmitChange;
+    /**
+     * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
+     * to force the input change when the typed value is the same of the current one.
+     */
+    private _updateValue;
+    /** Emits the change event. */
+    private _emitChange;
+    /** Returns the right format for the `value` property. */
+    private _formatValue;
+    /**
+     * Returns the right format for the `valueAsDate` property:
+     * sets the start date at 01.01.1970, then adds the typed hours/minutes.
+     */
+    private _formatValueAsDate;
+    /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
+    private _isTimeValid;
+    /** Validate input against the defined RegExps. */
+    private _parseInput;
+    /**  Only allow typing numbers and separator keys. */
+    private _preventCharInsert;
+    private _updateAccessibilityMessage;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-time-input': SbbTimeInputElement;
+    }
+}
+//# sourceMappingURL=time-input.d.ts.map