@sbb-esta/lyne-elements 2.8.0 → 2.10.0

package/development/tabs/tab-label/tab-label.component.js

@@ -0,0 +1,316 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeStatic, html } from "lit/static-html.js";
+import { slotState, forceType, omitEmptyConverter } from "../../core/decorators.js";
+import { SbbDisabledMixin } from "../../core/mixins.js";
+import { SbbIconNameMixin } from "../../icon.js";
+const style = css`*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-tab-label-height: var(--sbb-size-element-m);
+  --sbb-tab-label-color: var(--sbb-color-granite);
+  --sbb-tab-label-icon-color: var(--sbb-color-black);
+  --sbb-tab-label-background-color: var(--sbb-color-white);
+  --sbb-tab-label-cursor: pointer;
+  --sbb-tab-label-pointer-events: unset;
+  --sbb-tab-label-inset: 0;
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-label-marker-transform: scale(0);
+  --sbb-tab-label-text-decoration: none;
+  --sbb-tab-label-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-tab-label-animation-easing: var(--sbb-animation-easing);
+  --sbb-tab-label-amount-color: var(--sbb-color-metal);
+  display: inline-block;
+  max-width: 100%;
+  pointer-events: var(--sbb-tab-label-pointer-events);
+  -webkit-tap-highlight-color: transparent;
+  outline: none !important;
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-icon-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+:host([data-size=s]) {
+  --sbb-tab-label-height: var(--sbb-size-element-xs);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
+}
+
+:host([disabled]) {
+  --sbb-tab-label-icon-color: var(--sbb-color-granite);
+  --sbb-tab-label-background-color: var(--sbb-color-milk);
+  --sbb-tab-label-cursor: unset;
+  --sbb-tab-label-pointer-events: none;
+  --sbb-tab-label-text-decoration: line-through;
+}
+@media (forced-colors: active) {
+  :host([disabled]) {
+    --sbb-tab-label-color: GrayText;
+    --sbb-tab-label-icon-color: GrayText;
+    --sbb-tab-label-amount-color: GrayText;
+  }
+}
+
+:host([active]:not([disabled])) {
+  --sbb-tab-label-color: var(--sbb-color-charcoal);
+  --sbb-tab-label-icon-color: var(--sbb-tab-label-color);
+  --sbb-tab-label-background-color: var(--sbb-color-black);
+  --sbb-tab-label-cursor: unset;
+  --sbb-tab-label-pointer-events: none;
+  --sbb-tab-label-marker-transform: scale(1);
+}
+@media (forced-colors: active) {
+  :host([active]:not([disabled])) {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-icon-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(:hover:not([disabled])) {
+    --sbb-tab-label-marker-transform: scale(1);
+  }
+}
+
+:host(:is([data-active], :active)) {
+  --sbb-tab-label-color: var(--sbb-color-charcoal);
+}
+
+.sbb-tab-label__wrapper {
+  position: relative;
+}
+:host(:focus-visible) .sbb-tab-label__wrapper::before {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+  content: "";
+  position: absolute;
+  display: block;
+  inset: 0;
+  z-index: 1;
+  border-radius: calc(var(--sbb-border-radius-2x) - var(--sbb-focus-outline-offset));
+}
+
+.sbb-tab-label {
+  position: relative;
+  margin: 0;
+  min-height: var(--sbb-tab-label-height);
+  display: flex;
+  align-items: center;
+  padding-inline: var(--sbb-tab-label-inline-padding);
+  gap: var(--sbb-spacing-fixed-2x);
+  user-select: none;
+  cursor: var(--sbb-tab-label-cursor);
+  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
+  color: var(--sbb-tab-label-icon-color);
+}
+:host([data-has-divider]) .sbb-tab-label::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  width: var(--sbb-tab-group-width);
+  height: var(--sbb-border-width-1x);
+  background-color: var(--sbb-color-cloud);
+}
+.sbb-tab-label::before {
+  position: absolute;
+  content: "";
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: 0.1875rem;
+  background-color: var(--sbb-tab-label-color);
+  transform: var(--sbb-tab-label-marker-transform);
+  transition-duration: var(--sbb-tab-label-animation-duration);
+  transition-timing-function: var(--sbb-tab-label-animation-easing);
+  transition-property: transform, background-color;
+  z-index: 1;
+}
+
+.sbb-tab-label__icon,
+.sbb-tab-label__text,
+.sbb-tab-label__amount {
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
+.sbb-tab-label__icon {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--sbb-tab-label-color);
+  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
+}
+:host(:not([data-slot-names~=icon], [icon-name])) .sbb-tab-label__icon {
+  display: none;
+}
+
+.sbb-tab-label__text {
+  color: var(--sbb-tab-label-color);
+  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  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);
+  font-weight: bold;
+}
+:host([data-size=s]) .sbb-tab-label__text {
+  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  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);
+  font-weight: bold;
+}
+:host([data-size=xl]) .sbb-tab-label__text {
+  --sbb-text-font-size: var(--sbb-font-size-text-xl);
+  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);
+  font-weight: bold;
+}
+
+.sbb-tab-label__amount {
+  display: flex;
+  color: var(--sbb-tab-label-amount-color);
+  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
+  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  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);
+}
+:host(:not([data-slot-names~=amount], [amount])) .sbb-tab-label__amount {
+  display: none;
+}
+:host([data-size=s]) .sbb-tab-label__amount {
+  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  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);
+}
+:host([data-size=xl]) .sbb-tab-label__amount {
+  --sbb-text-font-size: var(--sbb-font-size-text-xl);
+  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);
+}`;
+let SbbTabLabelElement = (() => {
+  var _level_accessor_storage, _active_accessor_storage, _amount_accessor_storage, _a;
+  let _classDecorators = [customElement("sbb-tab-label"), slotState()];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbDisabledMixin(SbbIconNameMixin(LitElement));
+  let _level_decorators;
+  let _level_initializers = [];
+  let _level_extraInitializers = [];
+  let _active_decorators;
+  let _active_initializers = [];
+  let _active_extraInitializers = [];
+  let _amount_decorators;
+  let _amount_initializers = [];
+  let _amount_extraInitializers = [];
+  _a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _level_accessor_storage, __runInitializers(this, _level_initializers, "1"));
+      __privateAdd(this, _active_accessor_storage, (__runInitializers(this, _level_extraInitializers), __runInitializers(this, _active_initializers, false)));
+      __privateAdd(this, _amount_accessor_storage, (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _amount_initializers, "")));
+      __runInitializers(this, _amount_extraInitializers);
+    }
+    /**
+     * The level will correspond to the heading tag generated in the title.
+     * Use this property to generate the appropriate header tag, taking SEO into consideration.
+     */
+    get level() {
+      return __privateGet(this, _level_accessor_storage);
+    }
+    set level(value) {
+      __privateSet(this, _level_accessor_storage, value);
+    }
+    /** Active tab state */
+    get active() {
+      return __privateGet(this, _active_accessor_storage);
+    }
+    set active(value) {
+      __privateSet(this, _active_accessor_storage, value);
+    }
+    /** Amount displayed inside the tab. */
+    get amount() {
+      return __privateGet(this, _amount_accessor_storage);
+    }
+    set amount(value) {
+      __privateSet(this, _amount_accessor_storage, value);
+    }
+    render() {
+      const TAGNAME = `h${Number(this.level) < 7 ? this.level : "1"}`;
+      return html`
+      <div class="sbb-tab-label__wrapper">
+        <${unsafeStatic(TAGNAME)} class="sbb-tab-label">
+          <span class="sbb-tab-label__icon">
+            ${this.renderIconSlot()}
+          </span>
+          <span class="sbb-tab-label__text">
+            <slot></slot>
+          </span>
+          <span class="sbb-tab-label__amount">
+            <slot name="amount">${this.amount}</slot>
+          </span>
+        </${unsafeStatic(TAGNAME)}>
+      </div>
+    `;
+    }
+  }, _level_accessor_storage = new WeakMap(), _active_accessor_storage = new WeakMap(), _amount_accessor_storage = new WeakMap(), _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    _level_decorators = [property()];
+    _active_decorators = [forceType(), property({ reflect: true, type: Boolean })];
+    _amount_decorators = [forceType(), property({ reflect: true, converter: omitEmptyConverter })];
+    __esDecorate(_a, null, _level_decorators, { kind: "accessor", name: "level", static: false, private: false, access: { has: (obj) => "level" in obj, get: (obj) => obj.level, set: (obj, value) => {
+      obj.level = value;
+    } }, metadata: _metadata }, _level_initializers, _level_extraInitializers);
+    __esDecorate(_a, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: (obj) => "active" in obj, get: (obj) => obj.active, set: (obj, value) => {
+      obj.active = value;
+    } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
+    __esDecorate(_a, null, _amount_decorators, { kind: "accessor", name: "amount", static: false, private: false, access: { has: (obj) => "amount" in obj, get: (obj) => obj.amount, set: (obj, value) => {
+      obj.amount = value;
+    } }, metadata: _metadata }, _amount_initializers, _amount_extraInitializers);
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = style, __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbTabLabelElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWxhYmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3RhYnMvdGFiLWxhYmVsL3RhYi1sYWJlbC5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IGh0bWwsIHVuc2FmZVN0YXRpYyB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB7IGZvcmNlVHlwZSwgb21pdEVtcHR5Q29udmVydGVyLCBzbG90U3RhdGUgfSBmcm9tICcuLi8uLi9jb3JlL2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgU2JiRGlzYWJsZWRNaXhpbiB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLmpzJztcbmltcG9ydCB7IFNiYkljb25OYW1lTWl4aW4gfSBmcm9tICcuLi8uLi9pY29uLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVMZXZlbCB9IGZyb20gJy4uLy4uL3RpdGxlLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGFiLWxhYmVsLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogQ29tYmluZWQgd2l0aCBhIGBzYmItdGFiLWdyb3VwYCwgaXQgZGlzcGxheXMgYSB0YWIncyB0aXRsZS5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBjb250ZW50IHRvIHRoZSB0YWIgdGl0bGUuXG4gKiBAc2xvdCBpY29uIC0gVXNlIHRoaXMgc2xvdCB0byBkaXNwbGF5IGFuIGljb24gdG8gdGhlIGxlZnQgb2YgdGhlIHRpdGxlLCBieSBwcm92aWRpbmcgdGhlIGBzYmItaWNvbmAgY29tcG9uZW50LlxuICogQHNsb3QgYW1vdW50IC0gUHJvdmlkZSBhIG51bWJlciB0byBzaG93IGFuIGFtb3VudCB0byB0aGUgcmlnaHQgb2YgdGhlIHRpdGxlLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItdGFiLWxhYmVsJylcbkBzbG90U3RhdGUoKVxuY2xhc3MgU2JiVGFiTGFiZWxFbGVtZW50IGV4dGVuZHMgU2JiRGlzYWJsZWRNaXhpbihTYmJJY29uTmFtZU1peGluKExpdEVsZW1lbnQpKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKlxuICAgKiBUaGUgbGV2ZWwgd2lsbCBjb3JyZXNwb25kIHRvIHRoZSBoZWFkaW5nIHRhZyBnZW5lcmF0ZWQgaW4gdGhlIHRpdGxlLlxuICAgKiBVc2UgdGhpcyBwcm9wZXJ0eSB0byBnZW5lcmF0ZSB0aGUgYXBwcm9wcmlhdGUgaGVhZGVyIHRhZywgdGFraW5nIFNFTyBpbnRvIGNvbnNpZGVyYXRpb24uXG4gICAqL1xuICBAcHJvcGVydHkoKSBwdWJsaWMgYWNjZXNzb3IgbGV2ZWw6IFNiYlRpdGxlTGV2ZWwgPSAnMSc7XG5cbiAgLyoqIEFjdGl2ZSB0YWIgc3RhdGUgKi9cbiAgQGZvcmNlVHlwZSgpXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUsIHR5cGU6IEJvb2xlYW4gfSlcbiAgcHVibGljIGFjY2Vzc29yIGFjdGl2ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBBbW91bnQgZGlzcGxheWVkIGluc2lkZSB0aGUgdGFiLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgY29udmVydGVyOiBvbWl0RW1wdHlDb252ZXJ0ZXIgfSlcbiAgcHVibGljIGFjY2Vzc29yIGFtb3VudDogc3RyaW5nID0gJyc7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgY29uc3QgVEFHTkFNRSA9IGBoJHtOdW1iZXIodGhpcy5sZXZlbCkgPCA3ID8gdGhpcy5sZXZlbCA6ICcxJ31gO1xuXG4gICAgLyogZXNsaW50LWRpc2FibGUgbGl0L2JpbmRpbmctcG9zaXRpb25zICovXG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLXRhYi1sYWJlbF9fd3JhcHBlclwiPlxuICAgICAgICA8JHt1bnNhZmVTdGF0aWMoVEFHTkFNRSl9IGNsYXNzPVwic2JiLXRhYi1sYWJlbFwiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRhYi1sYWJlbF9faWNvblwiPlxuICAgICAgICAgICAgJHt0aGlzLnJlbmRlckljb25TbG90KCl9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRhYi1sYWJlbF9fdGV4dFwiPlxuICAgICAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10YWItbGFiZWxfX2Ftb3VudFwiPlxuICAgICAgICAgICAgPHNsb3QgbmFtZT1cImFtb3VudFwiPiR7dGhpcy5hbW91bnR9PC9zbG90PlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC8ke3Vuc2FmZVN0YXRpYyhUQUdOQU1FKX0+XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGFiLWxhYmVsJzogU2JiVGFiTGFiZWxFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7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

package/development/tabs/tab-label.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './tab-label/tab-label.js';
+export * from './tab-label/tab-label.component.js';
 //# sourceMappingURL=tab-label.d.ts.map

package/development/tabs/tab-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-label.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-label.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"tab-label.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-label.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oCAAoC,CAAC"}

package/development/tabs/tab-label.js

@@ -1,4 +1,4 @@
-import { SbbTabLabelElement } from "./tab-label/tab-label.js";
+import { SbbTabLabelElement } from "./tab-label/tab-label.component.js";
 export {
   SbbTabLabelElement
 };

package/development/tabs/tab.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './tab/tab.js';
+export * from './tab/tab.component.js';
 //# sourceMappingURL=tab.d.ts.map

package/development/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,cAAc,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wBAAwB,CAAC"}

package/development/tabs/tab.js

@@ -1,4 +1,4 @@
-import { SbbTabElement } from "./tab/tab.js";
+import { SbbTabElement } from "./tab/tab.component.js";
 export {
   SbbTabElement
 };

package/development/tabs.js

@@ -1,6 +1,6 @@
-import { SbbTabElement } from "./tabs/tab/tab.js";
-import { SbbTabGroupElement } from "./tabs/tab-group/tab-group.js";
-import { SbbTabLabelElement } from "./tabs/tab-label/tab-label.js";
+import { SbbTabElement } from "./tabs/tab/tab.component.js";
+import { SbbTabGroupElement } from "./tabs/tab-group/tab-group.component.js";
+import { SbbTabLabelElement } from "./tabs/tab-label/tab-label.component.js";
 export {
   SbbTabElement,
   SbbTabGroupElement,

package/development/tag/tag/tag.component.d.ts

@@ -0,0 +1,63 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { FormRestoreReason, FormRestoreState } from '../../core/mixins.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 & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & 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. */
+    accessor amount: string;
+    /** Whether the tag is checked. */
+    accessor checked: boolean;
+    /**
+     * Tag size, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    accessor size: SbbTagSize;
+    /** 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;
+    constructor();
+    connectedCallback(): void;
+    protected isDisabledExternally(): boolean;
+    /** Method triggered on button click. Inverts the checked value and emits events. */
+    private _handleClick;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * @internal
+     */
+    formStateRestoreCallback(state: FormRestoreState | null, _reason: FormRestoreReason): void;
+    protected updateFormValue(): void;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-tag': SbbTagElement;
+    }
+}
+export {};
+//# sourceMappingURL=tag.component.d.ts.map

package/development/tag/tag/tag.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/tag/tag/tag.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAInE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;;AAEnC;;;;;;;;;GASG;AACH,qBAGM,aAAc,SAAQ,kBAAsE;IAChG,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,uCAAuC;IACvC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,kCAAkC;IAClC,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC;;;OAGG;IACH,SAEgB,IAAI,EAAE,UAAU,CAAwB;IAExD,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;;IAOa,iBAAiB,IAAI,IAAI;cAKtB,oBAAoB,IAAI,OAAO;IAIlD,oFAAoF;IACpF,OAAO,CAAC,YAAY;cAgBD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E;;OAEG;IACa,iBAAiB,IAAI,IAAI;IAIzC;;OAEG;IACa,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;cAMY,eAAe,IAAI,IAAI;cAQvB,cAAc,IAAI,cAAc;CAWpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}