scb-wc 0.1.3 → 0.1.4

package/scb-app-bar/scb-app-bar.js

@@ -0,0 +1,317 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-search/scb-search.js";
+import "../scb-avatar/scb-avatar.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-app-bar/scb-app-bar.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.title = "", this.appBarTitle = "", this.type = "default", this.position = "default", this.searchSupportingText = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__titleResizeRaf = 0;
+	}
+	static {
+		this.styles = [n`
+            :host {
+                display: block;
+                font-family: var(--brand-font, Inter, Arial, sans-serif);
+                position: relative;
+                container-type: inline-size;
+                container-name: app-bar-container;
+                --app-search-height: 64px;
+                margin-block-start: var(--scb-app-bar-spacing-block-start, 0);
+                margin-block-end: var(--scb-app-bar-spacing-block-end, 0);
+                margin-inline-start: var(--scb-app-bar-spacing-inline-start, 0);
+                margin-inline-end: var(--scb-app-bar-spacing-inline-end, 0);
+            }
+            header {
+                background: var(--md-sys-color-surface-container);
+                color: var(--md-sys-color-on-surface);
+                display: flex;
+                align-items: center;
+                padding: 0 var(--spacing-5);
+                position: relative;
+                z-index: 10;
+                transition: height 0.3s;
+                min-height: var(--app-search-height);
+            }
+            header.search {
+                height: var(--app-search-height);
+            }
+            header.medium-flexible {
+                min-height: 96px;
+            }
+            header.large-flexible {
+                min-height: 128px;
+            }
+            header.position-top {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                z-index: 100;
+            }
+            header.position-bottom {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                z-index: 100;
+            }
+            header.default .trailing {
+                margin-inline-start: auto;
+            }
+            header.default .headline {
+                position: absolute;
+                inset-inline-start: 50%;
+                inset-block-start: 50%;
+                transform: translate(-50%, -50%);
+                max-width: var(--scb-app-bar-title-max-width, 100%);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .headline {
+                flex: 1 1 auto;
+                text-align: center;
+                font-family: var(--md-sys-typescale-title-large-font, var(--brand-font, Inter, Arial, sans-serif));
+                font-size: var(--md-sys-typescale-title-large-size);
+                line-height: var(--md-sys-typescale-title-large-Line-Height, calc(var(--md-sys-typescale-title-large-size) * 1.3));
+                font-weight: 600;
+                margin: 0;
+            }
+            header.small-flexible .headline {
+                text-align: left;
+                margin-left: var(--spacing-5);
+            }
+            header.medium-flexible .headline {
+                font-family: var(--md-sys-typescale-headline-small-font, var(--brand-font, Inter, Arial, sans-serif));
+                font-size: var(--md-sys-typescale-headline-small-size);
+                line-height: 30px; /* denna variabel finns inte, men sätts i figma.. --md-sys-typescale-headline-small-Line-Height2 */
+                font-weight: 700;
+                letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+                text-align: left;
+                margin: 0 0 0 var(--spacing-3);
+            }
+            header.large-flexible .headline {
+                font-family: var(--md-sys-typescale-headline-medium-font, var(--brand-font, Inter, Arial, sans-serif));
+                font-size: var(--md-sys-typescale-headline-medium-size);
+                font-weight: 700;
+                line-height: var(--md-sys-typescale-headline-medium-Line-Height);
+                letter-spacing: var(--md-sys-typescale-headline-medium-Tracking);
+                text-align: left;
+                margin: 0 0 0 var(--spacing-3);
+            }
+            .search-container {
+                flex: 1 1 auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0 var(--spacing-3);
+            }
+            .trailing{
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-2);
+            }
+            .leading {
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-2);
+            }
+        `];
+	}
+	connectedCallback() {
+		super.connectedCallback(), typeof ResizeObserver < "u" && (this.__titleResizeObserver = new ResizeObserver(() => this.#e()));
+	}
+	disconnectedCallback() {
+		this.__titleResizeRaf &&= (cancelAnimationFrame(this.__titleResizeRaf), 0), this.__titleResizeObserver?.disconnect(), this.__titleResizeObserver = void 0, super.disconnectedCallback();
+	}
+	handleActionsSlotChange(e) {
+		e.target.assignedElements({ flatten: !0 }).forEach((e) => {
+			if (e.tagName === "SCB-BUTTON") {
+				let t = e;
+				t.hasAttribute("size") || t.setAttribute("size", "small");
+			}
+		}), this.#e();
+	}
+	handleAvatarSlotChange(e) {
+		e.target.assignedElements({ flatten: !0 }).forEach((e) => {
+			e.tagName === "SCB-AVATAR" && e.setAttribute("size", "small");
+		}), this.#e();
+	}
+	firstUpdated() {
+		this.#a(), this.#t();
+	}
+	updated(e) {
+		(e.has("title") || e.has("appBarTitle")) && (this.dispatchEvent(new CustomEvent("title-changed", {
+			detail: { title: this.#o },
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("app-bar-title-changed", {
+			detail: { appBarTitle: this.#o },
+			bubbles: !0,
+			composed: !0
+		}))), e.has("position") && this.dispatchEvent(new CustomEvent("position-changed", {
+			detail: { position: this.position },
+			bubbles: !0,
+			composed: !0
+		})), e.has("type") && (this.dispatchEvent(new CustomEvent("type-changed", {
+			detail: { type: this.type },
+			bubbles: !0,
+			composed: !0
+		})), this.#t()), e.has("searchSupportingText") && this.dispatchEvent(new CustomEvent("search-supporting-text-changed", {
+			detail: { searchSupportingText: this.searchSupportingText },
+			bubbles: !0,
+			composed: !0
+		})), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#a();
+	}
+	#e() {
+		this.type === "default" && (this.__titleResizeRaf ||= requestAnimationFrame(() => {
+			this.__titleResizeRaf = 0, this.#i();
+		}));
+	}
+	#t() {
+		this.__titleResizeObserver?.disconnect();
+		let e = this.shadowRoot?.querySelector("header");
+		if (e && e.style.removeProperty("--scb-app-bar-title-max-width"), this.type !== "default" || !this.__titleResizeObserver) return;
+		let t = this.shadowRoot?.querySelector("header.default");
+		if (!t) return;
+		let n = t.querySelector(".leading"), r = t.querySelector(".trailing");
+		!n || !r || (this.__titleResizeObserver.observe(t), this.__titleResizeObserver.observe(n), this.__titleResizeObserver.observe(r), this.#e());
+	}
+	#n(e) {
+		if (!e) return 0;
+		let t = parseFloat(e);
+		return Number.isFinite(t) ? t : 0;
+	}
+	#r(e) {
+		let t = getComputedStyle(e);
+		return this.#n(t.columnGap || t.gap);
+	}
+	#i() {
+		let e = this.shadowRoot?.querySelector("header.default");
+		if (!e) return;
+		let t = e.querySelector(".leading"), n = e.querySelector(".trailing");
+		if (!t || !n) return;
+		let r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), a = n.getBoundingClientRect(), o = getComputedStyle(e), s = this.#n(o.paddingInlineStart || o.paddingLeft), c = this.#n(o.paddingInlineEnd || o.paddingRight), l = Math.max(0, r.width - s - c), u = Math.max(i.width, a.width), d = Math.max(this.#r(t), this.#r(n)), f = Math.max(0, l - u * 2 - d * 2);
+		e.style.setProperty("--scb-app-bar-title-max-width", `${f}px`);
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#a() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-app-bar-spacing-block-start", t) : this.style.removeProperty("--scb-app-bar-spacing-block-start"), n ? this.style.setProperty("--scb-app-bar-spacing-block-end", n) : this.style.removeProperty("--scb-app-bar-spacing-block-end"), r ? this.style.setProperty("--scb-app-bar-spacing-inline-start", r) : this.style.removeProperty("--scb-app-bar-spacing-inline-start"), i ? this.style.setProperty("--scb-app-bar-spacing-inline-end", i) : this.style.removeProperty("--scb-app-bar-spacing-inline-end");
+	}
+	get #o() {
+		return this.appBarTitle || this.title;
+	}
+	render() {
+		switch (this.type) {
+			case "small-flexible": return r`
+                    <header class="small-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
+                        <div class="leading">
+                            <slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
+                        </div>
+                        <h1 class="headline">${this.#o}</h1>
+                        <div class="trailing">
+                            <slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
+                            <slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
+                        </div>
+                    </header>
+                `;
+			case "medium-flexible": return r`
+                    <header class="medium-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Medium flexible app bar">
+                        <div class="leading">
+                            <slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
+                        </div>
+                        <h1 class="headline">${this.#o}</h1>
+                        <div class="trailing">
+                            <slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
+                            <slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
+                        </div>
+                    </header>
+                `;
+			case "large-flexible": return r`
+                    <header class="large-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Large flexible app bar">
+                        <div class="leading">
+                            <slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
+                        </div>
+                        <h1 class="headline">${this.#o}</h1>
+                        <div class="trailing">
+                            <slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
+                            <slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
+                        </div>
+                    </header>
+                `;
+			case "search": return r`
+                    <header class="search ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Search app bar">
+                        <div class="leading">
+                            <slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
+                        </div>
+                        <div class="search-container">
+                            <scb-search size="small" supporting-text=${this.searchSupportingText}></scb-search>
+                        </div>
+                        <div class="trailing">
+                            <slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
+                            <slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
+                        </div>
+                    </header>
+                `;
+			default: return r`
+                    <header class="default ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
+                        <div class="leading">
+                            <slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
+                        </div>
+                        <h1 class="headline">${this.#o}</h1>
+                        <div class="trailing">
+                            <slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
+                            <slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
+                        </div>
+                    </header>
+                `;
+		}
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "title", void 0), e([a({
+	type: String,
+	attribute: "app-bar-title",
+	reflect: !0
+})], o.prototype, "appBarTitle", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "type", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "position", void 0), e([a({
+	type: String,
+	attribute: "search-supporting-text",
+	reflect: !0
+})], o.prototype, "searchSupportingText", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-app-bar")], o);
+//#endregion
+export { o as ScbAppBar };

package/scb-avatar/scb-avatar.js

@@ -0,0 +1,197 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+//#region src/scb-test-components/scb-avatar/scb-avatar.ts
+var c = class extends t {
+	constructor(...e) {
+		super(...e), this.src = "", this.alt = "", this.label = "", this.size = "medium", this.shape = "circular", this.iconName = "", this.variant = "image", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._imgError = !1, this._hasIconSlot = !1, this._onImgLoad = () => {
+			this._imgError = !1, this.dispatchEvent(new CustomEvent("image-load", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this._onImgError = () => {
+			this._imgError = !0, this.dispatchEvent(new CustomEvent("image-error", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this._onIconSlotChange = (e) => {
+			let t = e.currentTarget;
+			this._hasIconSlot = (t.assignedNodes({ flatten: !0 }) || []).length > 0;
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      margin-block-start: var(--scb-avatar-spacing-block-start, 0);
+      margin-block-end: var(--scb-avatar-spacing-block-end, 0);
+      margin-inline-start: var(--scb-avatar-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-avatar-spacing-inline-end, 0);
+
+      --_size: 40px;
+      --_font-size: 16px;
+      --_bg: var(--md-sys-color-primary-fixed-dim, var(--md-sys-color-primary-container));
+      --_fg: var(--md-sys-color-on-primary-fixed, var(--md-sys-color-on-primary-container));
+      --_radius: var(--radius-full, 1000px);
+      --_border: 0 solid transparent;
+
+      font-family: var(--brand-font, Inter, system-ui, sans-serif);
+      color-scheme: light dark;
+    }
+
+    :host([size="small"])  { --_size: 32px; --_font-size: var(--md-sys-typescale-label-medium-size, 14px); }
+    :host([size="medium"]) { --_size: 40px; --_font-size: var(--md-sys-typescale-label-large-size, 16px); }
+    :host([size="large"])  { --_size: 56px; --_font-size: var(--md-sys-typescale-title-large-size, 20px); }
+    :host([size="xlarge"]) { --_size: 80px; --_font-size: var(--md-sys-typescale-headline-medium-size, 28px); }
+
+    :host([shape="circular"]) { --_radius: var(--radius-full, 1000px); }
+    :host([shape="rounded"])  { --_radius: var(--radius-s, 8px); }
+    :host([shape="square"])   { --_radius: 0; }
+
+    .container {
+      inline-size: var(--_size);
+      block-size: var(--_size);
+      border-radius: var(--_radius);
+      position: relative;
+      overflow: hidden;
+      user-select: none;
+      line-height: 1;
+      border: var(--_border);
+      display: grid;
+      place-items: center;
+    }
+
+    :host([variant="image"]) .container { background: none; }
+    :host([variant="image"]) img.photo {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    :host([size="small"])  { --_icon-size: var(--icon-size-small, 20px); }
+    :host([size="medium"]) { --_icon-size: var(--icon-size-medium, 24px); }
+    :host([size="large"])  { --_icon-size: var(--icon-size-large, 30px); }
+    :host([size="xlarge"]) { --_icon-size: var(--icon-size-xlarge, 48px); }
+    :host([variant="icon"]) .container { background: var(--_bg); color: var(--_fg); }
+
+    img.icon {
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      object-fit: contain;
+      display: block;
+    }
+
+    .fallback {
+      display: grid;
+      place-items: center;
+      width: 100%;
+      height: 100%;
+      font-size: var(--_font-size);
+      font-weight: var(--weight-semibold, 600);
+      letter-spacing: .01em;
+      text-transform: uppercase;
+      color: var(--_fg);
+      background: var(--_bg);
+    }
+
+    :host([variant="image"]) .fallback {
+      color: var(--md-sys-color-on-primary-container);
+      background: var(--md-sys-color-primary-container);
+    }
+
+    ::slotted([slot="icon"]) {
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      line-height: 1;
+    }
+
+    :host(:focus-visible) .container {
+      outline: var(--md-focus-ring-width, 2px) solid var(--md-focus-ring-color, var(--p-40));
+      outline-offset: 2px;
+      border-radius: var(--_radius);
+    }
+  `;
+	}
+	async firstUpdated() {
+		this.variant === "icon" && await import("@material/web/icon/icon.js"), this.#e();
+	}
+	updated(e) {
+		super.updated(e), e.has("variant") && this.variant === "icon" && import("@material/web/icon/icon.js"), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	_initials() {
+		let e = (this.label || this.alt || "").trim();
+		if (!e) return "?";
+		let t = e.split(/\s+/).filter(Boolean);
+		return t.length === 1 ? t[0].slice(0, 1).toUpperCase() : (t[0].slice(0, 1) + t[t.length - 1].slice(0, 1)).toUpperCase();
+	}
+	_ariaLabel() {
+		return (this.label || this.alt || "").trim() || null;
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#e() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft) ?? e, i = this.mapSpacingToken(this.spacingRight) ?? e;
+		t ? this.style.setProperty("--scb-avatar-spacing-block-start", t) : this.style.removeProperty("--scb-avatar-spacing-block-start"), n ? this.style.setProperty("--scb-avatar-spacing-block-end", n) : this.style.removeProperty("--scb-avatar-spacing-block-end"), r ? this.style.setProperty("--scb-avatar-spacing-inline-start", r) : this.style.removeProperty("--scb-avatar-spacing-inline-start"), i ? this.style.setProperty("--scb-avatar-spacing-inline-end", i) : this.style.removeProperty("--scb-avatar-spacing-inline-end");
+	}
+	render() {
+		let e = this._ariaLabel(), t = this.variant === "image" && !!this.src && !this._imgError, n = r`${i}
+        <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+        ${this._hasIconSlot ? i : this.iconName ? r`<md-icon aria-hidden="true">${this.iconName}</md-icon>` : r`<div class="fallback" part="fallback">${this._initials()}</div>`}
+      `, a = t ? r`<img
+                class="photo"
+                part="image"
+                src=${this.src}
+                alt=${this.alt}
+                @load=${this._onImgLoad}
+                @error=${this._onImgError}
+              />` : r`
+            <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+            ${this._hasIconSlot ? i : this.iconName ? r`<md-icon aria-hidden="true">${this.iconName}</md-icon>` : r`<div class="fallback" part="fallback">${this._initials()}</div>`}
+          `;
+		return r`
+      <div class="container" part="container" role="img" aria-label=${e ?? i}>
+        ${this.variant === "icon" ? n : a}
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], c.prototype, "src", void 0), e([o({ type: String })], c.prototype, "alt", void 0), e([o({ type: String })], c.prototype, "label", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "shape", void 0), e([o({
+	type: String,
+	attribute: "icon-name",
+	reflect: !0
+})], c.prototype, "iconName", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], c.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], c.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], c.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], c.prototype, "spacingRight", void 0), e([s()], c.prototype, "_imgError", void 0), e([s()], c.prototype, "_hasIconSlot", void 0), c = e([a("scb-avatar")], c);
+//#endregion
+export { c as ScbAvatar };

package/scb-badge/scb-badge.js

@@ -0,0 +1,165 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-badge/scb-badge.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this._slotClickHandler = (e) => {
+			let t = this.shadowRoot?.querySelector("slot"), n = e.target;
+			n && n !== t && n.dispatchEvent(new CustomEvent("hide-badge", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.autoHide = !1, this.sizing = "fit-content", this.position = "relative", this.positionTop = 0, this.positionRight = void 0, this.positionSide = "right", this.positionLeft = void 0, this.value = "", this.label = "", this.hidden = !1, this.variant = "dot", this._badgeVisible = !0, this._onHideBadge = () => {
+			this._badgeVisible = !1, this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      position: relative;
+      overflow: visible;
+      width: fit-content;
+      --scb-badge-font-size: var(--scale-01);
+      --scb-badge-line-height: 100%;
+      --scb-badge-relative-gap: 0px;
+      --scb-badge-background-color: var(--md-sys-color-error);
+      --scb-badge-color: var(--md-sys-color-on-error);
+      --scb-badge-width: 8px;
+      --scb-badge-height: 8px;
+    }
+    :host([sizing="fit-parent"]) {
+      width: 100%;
+    }
+    :host([variant="value"]) .badge {
+      width: fit-content;
+      padding: 6px;
+    }
+    :host([variant="value"]) .badge.badge-value-empty{
+      width: var(--scb-badge-width);
+      padding: var(--spacing-2);
+    }
+    :host([hidden]) .badge {
+      display: none;
+    }
+    .badge {
+      transition: transform 0.25s cubic-bezier(.4,2,.6,1), opacity 0.18s linear;
+      will-change: transform, opacity;
+    }
+    .badge--hide {
+      opacity: 0;
+      transform: scale(1.3);
+      pointer-events: none;
+    }
+    .badge{
+      background-color: var(--scb-badge-background-color);
+      color: var(--scb-badge-color);
+      font-size: var(--scb-badge-font-size);
+      font-weight: var(--weight-semibold);
+      line-height: var(--scb-badge-line-height);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      border-radius: var(--md-sys-shape-corner-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--scb-badge-width);
+      height: var(--scb-badge-height);
+      position: absolute;
+      top: var(--scb-badge-absolute-top);
+      left: calc(100% - var(--scb-badge-absolute-right));
+      white-space: nowrap;
+    }
+    :host([position-side="left"]) .badge {
+      left: var(--scb-badge-absolute-left);
+    }
+
+    :host([position="relative"]) .badge {
+      position: relative;
+      top: unset;
+      left: unset;
+    }
+    :host([position="relative"]) .badge-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--scb-badge-relative-gap);
+    }
+  `;
+	}
+	firstUpdated() {
+		let e = this.shadowRoot?.querySelector("slot");
+		this.autoHide && e && e.addEventListener("click", this._slotClickHandler);
+	}
+	updated() {
+		let e = this.shadowRoot?.querySelector("slot");
+		e && (this.autoHide ? e.addEventListener("click", this._slotClickHandler) : e.removeEventListener("click", this._slotClickHandler));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("hide-badge", this._onHideBadge);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("hide-badge", this._onHideBadge), super.disconnectedCallback();
+	}
+	mapSpacingToken(e) {
+		if (e == null) return;
+		if (typeof e == "number" && !Number.isNaN(e)) return `${e}px`;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	render() {
+		let e = this.mapSpacingToken(this.positionRight) ?? "var(--spacing-4)", t = this.mapSpacingToken(this.positionLeft) ?? "var(--spacing-4)", n = this.mapSpacingToken(this.positionTop) ?? "0px";
+		this.style.setProperty("--scb-badge-absolute-top", n), this.style.setProperty("--scb-badge-absolute-right", e), this.style.setProperty("--scb-badge-absolute-left", t);
+		let i = this.value;
+		!isNaN(Number(this.value)) && this.value.length > 4 && (i = this.value.slice(0, 4) + "+");
+		let a = this.variant === "value" && !this.value ? "badge-value-empty" : "", o = this._badgeVisible ? "" : "badge--hide", s = this.label || (this.variant === "dot" ? "Indikator" : `Märke: ${i}`);
+		return r`
+      <div class="badge-content">
+        <slot></slot>
+        <div 
+          class="badge ${a} ${o}"
+          role="status"
+          aria-label="${this.variant, s}"
+          aria-hidden="${this.variant === "dot" && !this.label ? "true" : "false"}">${this.variant === "dot" ? "" : i}</div>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "auto-hide"
+})], o.prototype, "autoHide", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "sizing", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "position", void 0), e([a({
+	type: String,
+	attribute: "position-top"
+})], o.prototype, "positionTop", void 0), e([a({
+	type: String,
+	attribute: "position-right"
+})], o.prototype, "positionRight", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "position-side"
+})], o.prototype, "positionSide", void 0), e([a({
+	type: String,
+	attribute: "position-left"
+})], o.prototype, "positionLeft", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "value", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "label", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "hidden", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "variant", void 0), o = e([i("scb-badge")], o);
+//#endregion
+export { o as ScbBadge };