scb-wc 0.1.3 → 0.1.4

package/scb-select/scb-select.js

@@ -0,0 +1,517 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-chevron/scb-chevron.js";
+import "./scb-select-option.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+//#region src/scb-test-components/scb-select/scb-select.ts
+var s = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this._optionsObserver = null, this._internals = null, this.focusedIndex = -1, this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1, this.required = !1, this.open = !1, this.label = "", this.name = "", this.placeholder = "", this.supportingText = "", this.withRadiobuttons = !1, this.noHighlightSelected = !1, this.size = "large", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.zIndex = void 0, this._form = null, this._formResetHandler = null, this._formSubmitHandler = null, this._initialValue = "", this._initialValues = [], this._customValidationMessage = "", this._onDocumentClick = (e) => {
+			this.open && (e.composedPath().includes(this) || this._setOpen(!1));
+		}, this._onSlotClick = (e) => {
+			let t = this.shadowRoot?.querySelector("slot");
+			if (!t) return;
+			let n = t.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-select-option"), r = e.composedPath(), i = n.find((e) => r.includes(e));
+			i && (this._selectOption(i), e.stopPropagation());
+		}, this._onKeyDown = (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleOpen());
+		}, this._onOptionKeyDown = (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				let t = this.shadowRoot?.querySelector("slot");
+				if (!t) return;
+				let n = t.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-select-option"), r = e.composedPath(), i = n.find((e) => r.includes(e));
+				i && this._selectOption(i);
+			}
+		}, "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	_syncDensityForSize() {
+		this.size === "extra-small" ? this.setAttribute("data-density", "-5") : this.size === "small" ? this.setAttribute("data-density", "-4") : this.size === "medium" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density");
+	}
+	static {
+		this.styles = n`
+		:host {
+			display: flex;
+			flex-direction: column;
+			color: var(--md-sys-color-on-surface);
+			font-family: var(--brand-font);
+			--scb-select-max-width: 400px;
+			--scb-select-padding-x: var(--spacing-5);
+			--scb-select-padding-y: var(--spacing-2);
+			--scb-select-min-height: 56px;
+			--scb-select-font-size: var(--md-sys-typescale-body-large-size);
+			--scb-select-line-height: var(--md-sys-typescale-body-large-line-height);
+			--scb-select-letter-spacing: var(--md-sys-typescale-body-large-tracking);
+			--scb-select-label-font-size: var(--md-sys-typescale-label-medium-size);
+			--scb-select-label-line-height: var(--md-sys-typescale-label-medium-line-height);
+			--scb-select-label-letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+			--scb-select-supporting-font-size: var(--md-sys-typescale-body-medium-size);
+			--scb-select-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
+			--scb-select-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+			--scb-select-label-gap: var(--spacing-3);
+			max-width: var(--scb-select-max-width);
+			width: 100%;
+			margin-block-start: var(--scb-select-spacing-block-start, 0);
+			margin-block-end: var(--scb-select-spacing-block-end, 0);
+			margin-inline-start: var(--scb-select-spacing-inline-start, 0);
+			margin-inline-end: var(--scb-select-spacing-inline-end, 0);
+		}
+		:host([disabled]) {
+			pointer-events: none;
+			opacity: 0.38;
+		}
+			:host([size='medium']) {
+				--scb-select-padding-x: var(--spacing-4);
+				--scb-select-padding-y: var(--spacing-3);
+				--scb-select-min-height: 48px;
+				--scb-select-font-size: var(--md-sys-typescale-body-medium-size);
+				--scb-select-line-height: var(--md-sys-typescale-body-medium-line-height);
+				--scb-select-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+				--scb-select-label-font-size: var(--md-sys-typescale-label-small-size);
+				--scb-select-label-line-height: var(--md-sys-typescale-label-small-line-height);
+				--scb-select-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
+				--scb-select-supporting-font-size: var(--md-sys-typescale-body-small-size);
+				--scb-select-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+				--scb-select-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+				--scb-select-option-padding-y: var(--spacing-2);
+				--scb-select-option-padding-x: var(--spacing-4);
+				--scb-select-option-gap: var(--spacing-3);
+				--scb-select-option-min-height: 40px;
+
+				--scb-select-option-font-size: var(--md-sys-typescale-body-medium-size);
+				--scb-select-option-line-height: var(--md-sys-typescale-body-medium-line-height);
+				--scb-select-option-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+				--scb-select-option-icon-size: var(--icon-size-small, 20px);
+			}
+			:host([size='small']) {
+				--scb-select-padding-x: var(--spacing-4);
+				--scb-select-padding-y: var(--spacing-3);
+				--scb-select-min-height: 40px;
+				--scb-select-font-size: var(--md-sys-typescale-body-small-size);
+				--scb-select-line-height: var(--md-sys-typescale-body-small-line-height);
+				--scb-select-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+				--scb-select-label-font-size: var(--md-sys-typescale-label-small-size);
+				--scb-select-label-line-height: var(--md-sys-typescale-label-small-line-height);
+				--scb-select-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
+				--scb-select-supporting-font-size: var(--md-sys-typescale-body-small-size);
+				--scb-select-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+				--scb-select-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+				--scb-select-option-padding-y: var(--spacing-2);
+				--scb-select-option-padding-x: var(--spacing-4);
+				--scb-select-option-gap: var(--spacing-3);
+				--scb-select-option-min-height: 40px;
+
+				--scb-select-option-font-size: var(--md-sys-typescale-body-small-size);
+				--scb-select-option-line-height: var(--md-sys-typescale-body-small-line-height);
+				--scb-select-option-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+				--scb-select-option-icon-size: var(--icon-size-small, 20px);
+			}
+			:host([size='extra-small']) {
+				--scb-select-padding-x: var(--spacing-3);
+				--scb-select-padding-y: var(--spacing-2);
+				--scb-select-min-height: 32px;
+				--scb-select-font-size: var(--md-sys-typescale-body-small-size);
+				--scb-select-line-height: var(--md-sys-typescale-body-small-line-height);
+				--scb-select-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+				--scb-select-label-font-size: var(--md-sys-typescale-label-small-size);
+				--scb-select-label-line-height: var(--md-sys-typescale-label-small-line-height);
+				--scb-select-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
+				--scb-select-supporting-font-size: var(--md-sys-typescale-body-small-size);
+				--scb-select-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+				--scb-select-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+				--scb-select-option-padding-y: var(--spacing-2);
+				--scb-select-option-padding-x: var(--spacing-3);
+				--scb-select-option-gap: var(--spacing-2);
+				--scb-select-option-min-height: 32px;
+
+				--scb-select-option-font-size: var(--md-sys-typescale-body-small-size);
+				--scb-select-option-line-height: var(--md-sys-typescale-body-small-line-height);
+				--scb-select-option-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+				--scb-select-option-icon-size: var(--icon-size-extra-small, 16px);
+			}
+		   .select {
+			   position: relative;
+
+			   background: var(--md-sys-color-surface);
+			   cursor: pointer;
+			   border-radius: var(--md-sys-shape-corner-small);
+			   border: 1px solid var(--md-sys-color-outline);
+			   outline: 1px solid transparent;
+			   transition: border 0.2s;
+			   
+		   }
+		   :host .select:hover, :host([open]) .select {
+			   outline: 1px solid var(--md-sys-color-outline);
+		   }
+		   
+		   .selected-value {
+			   flex: 1 1 auto;
+			   min-width: 0;
+			   overflow: hidden;
+			   text-overflow: ellipsis;
+			   white-space: nowrap;
+			   display: block;
+			   border: none;
+			   background: transparent;
+			   font: inherit;
+			   color: inherit;
+			   padding: 0;
+			   outline: none;
+			   cursor: pointer;
+					font-size: var(--scb-select-font-size);
+					line-height: var(--scb-select-line-height);
+					letter-spacing: var(--scb-select-letter-spacing);
+		   }
+		   .selected-value-container:focus-within {
+			   outline: none;
+		   }
+		   .select-label{
+			display: block;
+			font-size: var(--scb-select-label-font-size);
+			font-weight: var(--weight-semibold);
+			line-height: var(--scb-select-label-line-height);
+			letter-spacing: var(--scb-select-label-letter-spacing);
+		   }
+		   .select-label--without-supporting {
+			margin-bottom: var(--scb-select-label-gap);
+		   }
+		   .select-sub-label{
+			display: block;
+			font-size: var(--scb-select-supporting-font-size);
+			line-height: var(--scb-select-supporting-line-height);
+			letter-spacing: var(--scb-select-supporting-letter-spacing);
+			font-weight: var(--weight-regular);
+			margin-bottom: var(--scb-select-label-gap);
+			color: var(--md-sys-color-on-surface-variant);
+		   }
+		   md-focus-ring {
+			position:absolute;
+			border-radius: 8px;
+		   }
+		   
+		.arrow {
+			position: absolute;
+			right: 8px;
+			top: 50%;
+			transform: translateY(-50%);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			pointer-events: none;
+		}
+		.options {
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: calc(100% + 3px);
+			z-index: 10;
+			max-height: 0;
+			overflow-y: hidden;
+			transition:
+				max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+				opacity 0.15s linear 0.15s,
+				visibility 0s linear 0.3s;
+			visibility: hidden;
+			opacity: 0;
+			pointer-events: none;
+			border-radius: var(--md-sys-shape-corner-small);
+			background: var(--md-sys-color-surface);
+			padding: 8px 0;
+			/* Drop Shadow/2 */
+			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+		}
+			.options::-webkit-scrollbar {
+				width: 12px;
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+			.options::-webkit-scrollbar-thumb {
+				background: var(--md-sys-color-outline);
+				border-radius: var(--md-sys-shape-corner-small);
+				border: 4px solid var(--md-sys-color-surface);
+				
+			}
+			.options::-webkit-scrollbar-track {
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+		:host([open]) .options {
+			max-height: 240px;
+			visibility: visible;
+			opacity: 1;
+			pointer-events: auto;
+			transition:
+				max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+				opacity 0s linear 0s,
+				visibility 0s linear 0s;
+			opacity: 1;
+		}
+		.options.options--scroll {
+			overflow-y: auto;
+		}
+		.option[aria-selected="true"] {
+			background: #e6f0fa;
+		}
+		.option[aria-disabled="true"] {
+			color: #aaa;
+			pointer-events: none;
+		}
+		.selected-value-container {
+			height: 100%;
+			min-height: var(--scb-select-min-height);
+			box-sizing: border-box;
+			position: relative;
+			display: flex;
+			align-items: center;
+			padding: var(--scb-select-padding-y) 52px var(--scb-select-padding-y) var(--scb-select-padding-x);
+		}
+			:host([size='extra-small']) .selected-value-container {
+				padding-right: 44px;
+			}
+
+	`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("mousedown", this._onDocumentClick), this._optionsObserver = new MutationObserver(() => {
+			this.requestUpdate();
+		}), this._optionsObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [
+				"label",
+				"value",
+				"disabled"
+			]
+		}), this._syncDensityForSize(), this._initialValue = this.value, this._initialValues = Array.isArray(this.values) ? [...this.values] : [], this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+			this.value = this._initialValue, this.values = Array.isArray(this._initialValues) ? [...this._initialValues] : [], this._syncFormValue(), this._syncValidity(), this.requestUpdate();
+		}, this._formSubmitHandler = (e) => {
+			this.reportValidity() || (e.preventDefault(), e.stopPropagation());
+		}, this._form.addEventListener("reset", this._formResetHandler, !0), this._form.addEventListener("submit", this._formSubmitHandler, !0));
+	}
+	disconnectedCallback() {
+		document.removeEventListener("mousedown", this._onDocumentClick), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), this._form && this._formSubmitHandler && this._form.removeEventListener("submit", this._formSubmitHandler, !0), this._optionsObserver?.disconnect(), this._optionsObserver = null, super.disconnectedCallback();
+	}
+	_getMultiValues() {
+		return Array.isArray(this.values) && this.values.length > 0 ? this.values : this.value ? this.value.split(",").map((e) => e.trim()).filter(Boolean) : [];
+	}
+	_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;
+	}
+	_applySpacing() {
+		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-select-spacing-block-start", t) : this.style.removeProperty("--scb-select-spacing-block-start"), n ? this.style.setProperty("--scb-select-spacing-block-end", n) : this.style.removeProperty("--scb-select-spacing-block-end"), r ? this.style.setProperty("--scb-select-spacing-inline-start", r) : this.style.removeProperty("--scb-select-spacing-inline-start"), i ? this.style.setProperty("--scb-select-spacing-inline-end", i) : this.style.removeProperty("--scb-select-spacing-inline-end");
+	}
+	_setOpen(e) {
+		this.open !== e && (this.open = e, e ? (this.focusedIndex = 0, this.requestUpdate()) : this.focusedIndex = -1);
+	}
+	_toggleOpen() {
+		this.disabled || this._setOpen(!this.open);
+	}
+	_hasMoreThanFourOptions() {
+		let e = this.shadowRoot?.querySelector("slot");
+		if (!e) return !1;
+		let t = e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-select-option");
+		return [
+			"extra-small",
+			"small",
+			"medium"
+		].includes(this.size) ? t.length > 5 : t.length > 4;
+	}
+	_selectOption(e) {
+		if (!e.disabled) {
+			if (this.variant === "multi-select") {
+				let t = this._getMultiValues();
+				t.indexOf(e.value) > -1 ? this.values = t.filter((t) => t !== e.value) : this.values = [...t, e.value], this.value = this.values.join(","), this.dispatchEvent(new CustomEvent("change", {
+					detail: { values: this.values },
+					bubbles: !0,
+					composed: !0
+				}));
+			} else this.variant === "single-select" && this.withRadiobuttons ? (this.value = e.value, this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: this.value },
+				bubbles: !0,
+				composed: !0
+			}))) : (this.value = e.value, this._setOpen(!1), this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: this.value },
+				bubbles: !0,
+				composed: !0
+			})));
+			this._updateOptionsChecked(), this.requestUpdate();
+		}
+	}
+	_getSelectedLabel() {
+		let e = this.shadowRoot?.querySelector("slot");
+		if (!e) return "";
+		let t = e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-select-option");
+		if (this.variant === "multi-select") {
+			let e = this._getMultiValues(), n = t.filter((t) => e.includes(t.value));
+			return n && n.length > 0 ? n.map((e) => e.label).join(", ") : "";
+		} else {
+			let e = t.find((e) => e.value === this.value);
+			return e ? e.label : "";
+		}
+	}
+	firstUpdated() {
+		this._updateOptionsChecked(), this._syncFormValue(), this._syncValidity(), this._applySpacing();
+	}
+	updated(e) {
+		this._updateOptionsChecked(), this._syncFormValue(), this._syncValidity(), e.has("size") && this._syncDensityForSize(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this._applySpacing();
+	}
+	_syncFormValue() {
+		if (this._internals) {
+			if (this.disabled || !this.name) {
+				this._internals.setFormValue(null);
+				return;
+			}
+			if (this.variant === "multi-select") {
+				let e = this._getMultiValues();
+				if (e.length === 0) {
+					this._internals.setFormValue(null);
+					return;
+				}
+				let t = new FormData();
+				e.forEach((e) => t.append(this.name, e)), this._internals.setFormValue(t);
+				return;
+			}
+			this._internals.setFormValue(this.value || null);
+		}
+	}
+	_getValidationMessage() {
+		return this._customValidationMessage ? this._customValidationMessage : this.required && !(this.variant === "multi-select" ? this._getMultiValues().length > 0 : this.value) ? "Välj ett alternativ." : "";
+	}
+	_syncValidity() {
+		if (!this._internals) return;
+		let e = this.disabled ? "" : this._getValidationMessage(), t = this.shadowRoot?.querySelector(".selected-value");
+		if (!e) {
+			this._internals.setValidity({}), this.removeAttribute("aria-invalid"), t && t.setCustomValidity("");
+			return;
+		}
+		t && t.setCustomValidity(e), this._internals.setValidity({ valueMissing: !0 }, e, t ?? void 0), this.setAttribute("aria-invalid", "true");
+	}
+	checkValidity() {
+		return !this._getValidationMessage();
+	}
+	reportValidity() {
+		return this._syncValidity(), this._internals ? this._internals.reportValidity() : this.checkValidity();
+	}
+	setCustomValidity(e) {
+		this._customValidationMessage = e, this._syncValidity();
+	}
+	get validity() {
+		return this._internals?.validity;
+	}
+	get validationMessage() {
+		return this._internals?.validationMessage ?? this._getValidationMessage();
+	}
+	get willValidate() {
+		return this._internals?.willValidate ?? !0;
+	}
+	_updateOptionsChecked() {
+		let e = this.shadowRoot?.querySelector("slot");
+		e && e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-select-option").forEach((e) => {
+			if (this.noHighlightSelected ? e.setAttribute("no-highlight-selected", "") : e.removeAttribute("no-highlight-selected"), this.variant === "multi-select") {
+				let t = this._getMultiValues();
+				e.showCheckbox = !0, e.checked = t.includes(e.value), e.showRadio = !1;
+			} else e.showCheckbox = !1, e.checked = this.value === e.value, this.withRadiobuttons && (e.showRadio = !0);
+		});
+	}
+	render() {
+		return r`
+			${this.label ? r`
+				<label
+					class="select-label ${this.supportingText ? "" : "select-label--without-supporting"}"
+					id="scb-select-label-${this.name}"
+				>
+					${this.label}
+				</label>
+			` : ""}
+			${this.supportingText ? r`
+				<span class="select-sub-label">${this.supportingText}</span>
+			` : ""}
+				<div class="select">
+					<div class="selected-value-container" tabindex="0" @click="${this._toggleOpen}" @keydown="${this._onKeyDown}">
+					<md-focus-ring inward></md-focus-ring>
+						<md-ripple></md-ripple>
+						<input
+							tabindex="-1"
+							class="selected-value"
+							type="text"
+							readonly
+							.value="${this._getSelectedLabel() || this.placeholder}"
+							name="${this.name}"
+							?required=${this.required}
+							aria-required="${this.required ? "true" : "false"}"
+							aria-labelledby="${this.label ? `scb-select-label-${this.name}` : ""}"
+							aria-label="${!this.label && this.placeholder ? this.placeholder : ""}"
+							title="${!this.label && this.placeholder ? this.placeholder : ""}"
+							placeholder="${this.placeholder}"
+						/>
+						<span class="arrow">
+							<scb-chevron .open=${this.open}></scb-chevron>
+						</span>
+					</div>
+					<div
+						class="${this._hasMoreThanFourOptions() ? "options options--scroll" : "options"}"
+						style=${o(this.zIndex ? `z-index: ${this.zIndex};` : void 0)}
+						@click=${this._onSlotClick}
+						@keydown=${this._onOptionKeyDown}
+					>
+						<slot @slotchange="${() => {
+			this.requestUpdate();
+		}}"></slot>
+					</div>
+				</div>
+			`;
+	}
+};
+e([a({ type: String })], s.prototype, "variant", void 0), e([a({ type: String })], s.prototype, "value", void 0), e([a({ type: Array })], s.prototype, "values", void 0), e([a({ type: Boolean })], s.prototype, "disabled", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "required", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "open", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({ type: String })], s.prototype, "name", void 0), e([a({ type: String })], s.prototype, "placeholder", void 0), e([a({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([a({
+	type: Boolean,
+	attribute: "with-radiobuttons"
+})], s.prototype, "withRadiobuttons", void 0), e([a({
+	type: Boolean,
+	attribute: "no-highlight-selected",
+	reflect: !0
+})], s.prototype, "noHighlightSelected", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), e([a({
+	type: String,
+	attribute: "z-index"
+})], s.prototype, "zIndex", void 0), s = e([i("scb-select")], s);
+//#endregion
+export { s as ScbSelect };

package/scb-skeleton/scb-skeleton.js

@@ -0,0 +1,92 @@
+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-skeleton/scb-skeleton.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "rectangular", this.width = "100%", this.height = "100%", this.borderSize = "small", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      max-width: var(--scb-skeleton-width);
+      width: 100%;
+      height: var(--scb-skeleton-height);
+
+      margin-block-start: var(--scb-skeleton-spacing-block-start, 0);
+      margin-block-end: var(--scb-skeleton-spacing-block-end, 0);
+      margin-inline-start: var(--scb-skeleton-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-skeleton-spacing-inline-end, 0);
+    }
+    .skeleton {
+      background: linear-gradient(90deg, var(--md-sys-color-surface-container-high) 25%, var(--md-sys-color-surface-container-highest) 50%, var(--md-sys-color-surface-container-high) 75%);
+      background-size: 200% 100%;
+      animation: skeleton-loading 3.2s infinite linear;
+      width: 100%;
+      height: 100%;
+    }
+    .rounded {
+      border-radius: var(--scb-skeleton-border-size);
+    }
+    .circle {
+      border-radius: 50%;
+    }
+    @keyframes skeleton-loading {
+      0% {
+        background-position: 200% 0;
+      }
+      100% {
+        background-position: -200% 0;
+      }
+    }
+  `;
+	}
+	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;
+	}
+	applySpacing() {
+		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-skeleton-spacing-block-start", t) : this.style.removeProperty("--scb-skeleton-spacing-block-start"), n ? this.style.setProperty("--scb-skeleton-spacing-block-end", n) : this.style.removeProperty("--scb-skeleton-spacing-block-end"), r ? this.style.setProperty("--scb-skeleton-spacing-inline-start", r) : this.style.removeProperty("--scb-skeleton-spacing-inline-start"), i ? this.style.setProperty("--scb-skeleton-spacing-inline-end", i) : this.style.removeProperty("--scb-skeleton-spacing-inline-end");
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.applySpacing();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing();
+	}
+	render() {
+		return this.style.setProperty("--scb-skeleton-width", this.width), this.style.setProperty("--scb-skeleton-height", this.height), this.variant === "rounded" && this.style.setProperty("--scb-skeleton-border-size", this.borderSize === "small" ? "8px" : this.borderSize === "medium" ? "16px" : this.borderSize === "large" ? "24px" : "8px"), r`
+      <div
+        class="skeleton${this.variant === "circular" ? " circle" : ""} ${this.variant === "rounded" ? " rounded" : ""}"
+      ><slot></slot></div>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "variant", void 0), e([a({ type: String })], o.prototype, "width", void 0), e([a({ type: String })], o.prototype, "height", void 0), e([a({
+	type: String,
+	attribute: "border-size"
+})], o.prototype, "borderSize", 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-skeleton")], o);
+//#endregion
+export { o as ScbSkeleton };