scb-wc 0.1.2 → 0.1.4

package/scb-search/scb-search.js

@@ -0,0 +1,643 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-list/scb-list.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-search/scb-search.ts
+var s = 0, c = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this._internals = null, this.supportingText = "", this.value = "", this.name = "", this.disabled = !1, this.required = !1, this.autocomplete = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.size = "large", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++s}`, this._kbMode = !1, this._valueOnFocus = "", this._lastChangeValue = "", this._kbShouldShowRing = !1, this._onGlobalKeydown = (e) => {
+			e.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && this._updateInputRingVisibility());
+		}, this._onGlobalPointerDown = () => {
+			this._kbShouldShowRing = !1, this._inputFocused && this._updateInputRingVisibility();
+		}, this._form = null, this._formResetHandler = null, this._formSubmitHandler = null, this._initialValue = "", this._customValidationMessage = "", this._listScrollHandler = () => {
+			let e = this._getActiveItem();
+			this._kbMode && e && this._positionOptionRing(e);
+		}, "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      color: var(--md-sys-color-on-surface);
+      -webkit-tap-highlight-color: transparent;
+
+      margin-block-start: var(--scb-search-spacing-block-start, 0);
+      margin-block-end: var(--scb-search-spacing-block-end, 0);
+      margin-inline-start: var(--scb-search-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-search-spacing-inline-end, 0);
+
+      --scb-search-radius: var(--radius-full, 1000px);
+      --scb-search-open-radius: var(--radius-xl, 24px);
+
+      --scb-search-height: calc(var(--scb-search-line-height) + var(--scb-search-padding-y) + var(--scb-search-padding-y));
+      --scb-search-padding-x: var(--spacing-4, 12px);
+      --scb-search-padding-y: var(--spacing-4, 12px);
+      --scb-search-leading-size: var(--scale-10, 40px);
+      --scb-search-trailing-size: var(--scale-10, 40px);
+      --scb-search-gap: var(--spacing-2, 4px);
+
+      letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+
+      --scb-search-leading-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-leading-size) + var(--scb-search-gap)
+      );
+      --scb-search-trailing-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-trailing-size) + var(--scb-search-gap)
+      );
+
+      --scb-search-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-search-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+
+      --scb-search-icon-size: var(--icon-size-small, 20px);
+    }
+
+    :host([size='large']) {
+      --scb-search-padding-x: var(--spacing-5, 16px);
+      --scb-search-padding-y: var(--spacing-5, 16px);
+      --scb-search-leading-size: var(--scale-11, 48px);
+      --scb-search-trailing-size: var(--scale-11, 48px);
+      --scb-search-icon-size: var(--icon-size-medium, 24px);
+      --scb-search-font-size: var(--md-sys-typescale-body-large-size, 18px);
+      --scb-search-line-height: var(--md-sys-typescale-body-large-line-height, 26px);
+    }
+
+:host([size='small']) {
+      --scb-search-padding-x: var(--spacing-3, 8px);
+      --scb-search-padding-y: var(--spacing-3, 8px);
+      --scb-search-leading-size: var(--scale-09, 36px);
+      --scb-search-trailing-size: var(--scale-09, 36px);
+      --scb-search-icon-size: var(--icon-size-small, 20px);
+      --scb-search-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-search-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+    }
+:host([disabled]) {
+      opacity: 0.38;
+      cursor: default;
+    }
+
+    .ripple-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    md-focus-ring.input-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-search-radius);
+      z-index: 4;
+    }
+    .ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
+      display: block;
+    }
+    input.with-list ~ md-focus-ring.input-ring {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+    :host([full-screen]) md-focus-ring.input-ring {
+      border-radius: var(--radius-none, 0px) !important;
+    }
+
+    md-focus-ring.option-ring {
+      position: absolute;
+      display: none;
+      pointer-events: none;
+      z-index: 11;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+    }
+    md-focus-ring.option-ring[data-show='true'] {
+      display: block;
+    }
+
+    .leading {
+      position: absolute;
+      left: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-leading-size);
+      height: var(--scb-search-leading-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 2;
+    }
+    .leading md-icon,
+    .trailing md-icon,
+    .clear-btn md-icon {
+      --md-icon-size: var(--scb-search-icon-size);
+      font-size: var(--scb-search-icon-size);
+      line-height: 1;
+    }
+
+    .trailing,
+    .clear-btn {
+      position: absolute;
+      right: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-trailing-size);
+      height: var(--scb-search-trailing-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 3;
+    }
+    .trailing md-icon {
+      pointer-events: none;
+    }
+
+    .clear-btn {
+      background: none;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+    .clear-btn[hidden] {
+      display: none;
+    }
+    .clear-btn:disabled {
+      cursor: default;
+    }
+
+    input[type='search'] {
+      padding: var(--scb-search-padding-y) var(--scb-search-trailing-gap)
+        var(--scb-search-padding-y) var(--scb-search-leading-gap);
+      min-height: var(--scb-search-height);
+      width: 100%;
+      box-sizing: border-box;
+
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-radius: var(--scb-search-radius);
+
+      font-family: var(--md-sys-typescale-body-large-font, var(--brand-font, Inter), sans-serif);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+
+      color: var(--md-sys-color-on-surface);
+      background: transparent;
+
+      position: relative;
+      z-index: 1;
+    }
+    input[type='search']::placeholder {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+    }
+    input[type='search']:hover {
+      outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px);
+    }
+    input[type='search']:focus {
+      outline: none;
+    }
+
+    md-ripple {
+      border-radius: var(--scb-search-radius);
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      pointer-events: none;
+      --md-ripple-hover-color: transparent;
+      --md-ripple-hover-opacity: 0;
+    }
+
+    input[type='search']::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+      display: none;
+    }
+
+    input.with-list {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+    input.with-list ~ md-ripple {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+
+    scb-list.suggestion-list {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      z-index: 10;
+      background: var(--md-sys-color-surface-container-lowest);
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-top: 0;
+      border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);
+      overflow: auto;
+      box-sizing: border-box;
+      max-height: var(--scb-search-suggestions-max-h, 60vh);
+    }
+
+    :host([full-screen]) input[type='search'],
+    :host([full-screen]) input.with-list,
+    :host([full-screen]) input.with-list ~ md-ripple {
+      border-radius: var(--radius-none, 0px) !important;
+    }
+    :host([full-screen]) scb-list.suggestion-list {
+      position: static;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .list-divider {
+      display: none;
+      height: var(--stroke-border, 1px);
+      background: var(--md-sys-color-outline);
+      width: 100%;
+    }
+    :host([full-screen]) .list-divider[aria-hidden='false'] {
+      display: block;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host {
+        color: var(--md-sys-color-on-surface);
+      }
+    }
+  `;
+	}
+	_syncDensityForSize() {
+		this.size === "small" ? this.setAttribute("data-density", "-4") : this.size === "medium" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density");
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._syncDensityForSize(), this._onWindowResize = this._onWindowResize.bind(this), window.addEventListener("resize", this._onWindowResize, { passive: !0 }), window.addEventListener("keydown", this._onGlobalKeydown, !0), window.addEventListener("pointerdown", this._onGlobalPointerDown, !0), this._initialValue = this.value ?? "", this._lastChangeValue = this.value ?? "", this._form = this.closest("form"), this._form && (this._formSubmitHandler = (e) => {
+			this.reportValidity() || (e.preventDefault(), e.stopPropagation());
+		}, this._form.addEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler = () => {
+			this.value = this._initialValue;
+			let e = this._inputEl();
+			e && (e.value = this._initialValue), this._lastChangeValue = this._initialValue, this._syncFormValue(), this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y();
+		}, this._form.addEventListener("reset", this._formResetHandler, !0)), this._syncFormValue(), this._syncValidity();
+	}
+	disconnectedCallback() {
+		let e = this._inputEl();
+		e && this._boundNativeKeydown && e.removeEventListener("keydown", this._boundNativeKeydown, !0), this._detachListScrollListener(), window.removeEventListener("resize", this._onWindowResize), window.removeEventListener("keydown", this._onGlobalKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalPointerDown, !0), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), this._form && this._formSubmitHandler && this._form.removeEventListener("submit", this._formSubmitHandler, !0), super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this._ensureListboxA11y(), this._updateComboboxA11y();
+		let e = this._inputEl();
+		e && (this._boundNativeKeydown = (e) => this._handleKey(e), e.addEventListener("keydown", this._boundNativeKeydown, !0), e.disabled = this.disabled), this.applySpacing();
+	}
+	updated(e) {
+		if (super.updated(e), e.has("size") && this._syncDensityForSize(), this._ensureListboxA11y(), this._updateComboboxA11y(), this._attachListScrollListener(), (e.has("value") || e.has("disabled")) && this._syncFormValue(), (e.has("value") || e.has("disabled") || e.has("required")) && this._syncValidity(), e.has("disabled")) {
+			this.toggleAttribute("aria-disabled", this.disabled);
+			let e = this._inputEl();
+			e && (e.disabled = this.disabled);
+		}
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing();
+	}
+	render() {
+		let e = (this.value ?? "").trim().length > 0, t = this._inputFocused && e && this._hasSuggestions;
+		return r`
+      <div class="ripple-wrapper">
+        <md-icon class="leading">${e ? "arrow_back" : "search"}</md-icon>
+
+        <input
+          id="searchInput"
+          type="search"
+          class=${t ? "with-list" : ""}
+          .value=${this.value}
+          placeholder=${this.supportingText}
+          autocomplete=${this.autocomplete ? "on" : "off"}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @input=${this._onInput}
+          @change=${this._onNativeChange}
+          @focus=${this._onFocus}
+          @blur=${this._onBlur}
+          aria-label=${this.supportingText || "Sök"}
+        />
+
+        ${e ? r`<button
+              class="clear-btn"
+              type="button"
+              ?disabled=${this.disabled}
+              @click=${this._clearInput}
+              tabindex="-1"
+              aria-label="Rensa sökfält"
+            >
+              <md-icon>close</md-icon>
+            </button>` : this.trailingIcon ? r`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : i}
+
+        <md-ripple></md-ripple>
+        <md-focus-ring class="input-ring"></md-focus-ring>
+      </div>
+
+      <div class="list-divider" aria-hidden=${String(!(this.fullScreen && t))}></div>
+
+      ${t ? r`
+            <scb-list class="suggestion-list" id=${this._listboxId}>
+              <slot @slotchange=${this._onSlotChange}></slot>
+            </scb-list>
+            <md-focus-ring id="optionRing" class="option-ring"></md-focus-ring>
+          ` : i}
+    `;
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	_getValidationMessage() {
+		return this._customValidationMessage ? this._customValidationMessage : this.required && !(this.value ?? "").trim() ? "Fyll i det här fältet." : "";
+	}
+	_syncValidity() {
+		let e = this._inputEl(), t = this.disabled ? "" : this._getValidationMessage();
+		e && (e.setCustomValidity(t), e.setAttribute("aria-invalid", t ? "true" : "false")), this._internals && (t ? this._internals.setValidity({ valueMissing: !0 }, t, e ?? void 0) : this._internals.setValidity({})), this.toggleAttribute("aria-invalid", !!t);
+	}
+	checkValidity() {
+		return !this._getValidationMessage();
+	}
+	reportValidity() {
+		this._syncValidity();
+		let e = this._inputEl();
+		return e ? e.reportValidity() : 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;
+	}
+	submit() {
+		let e = this._getActiveItem(), t = { value: this.value };
+		e && (t.active = this._itemPayload(e)), this._dispatchSubmit(t);
+	}
+	get _hasSuggestions() {
+		return this._visibleSuggestions >= 0 ? this._visibleSuggestions > 0 : Array.from(this.getElementsByTagName("scb-list-item")).some((e) => !e.hasAttribute("hidden") && e.style.display !== "none");
+	}
+	_onSlotChange() {
+		this._filterSuggestions(this.value);
+	}
+	_onInput(e) {
+		e.stopPropagation();
+		let t = e.target;
+		this.value = t.value, this._syncFormValue(), this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y();
+		let n = { value: this.value };
+		this.dispatchEvent(new CustomEvent("scb-search-input", {
+			detail: n,
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("scbsearchinput", {
+			detail: n,
+			bubbles: !0,
+			composed: !0
+		})), this._dispatchStandardInput();
+	}
+	_onNativeChange(e) {
+		e.stopPropagation();
+	}
+	_onFocus() {
+		this.disabled || (this._valueOnFocus = this.value ?? "", this._inputFocused = !0, this._updateInputRingVisibility(), this._filterSuggestions(this.value), this._updateComboboxA11y(), this.requestUpdate());
+	}
+	_onBlur() {
+		setTimeout(() => {
+			this._inputFocused = !1, this._activeIndex = -1, this._kbMode = !1, this._updateInputRingVisibility(), this._updateComboboxA11y(), this._hideOptionRing(), this._valueOnFocus !== (this.value ?? "") && this._dispatchStandardChangeIfNeeded(), this.requestUpdate();
+		}, 100);
+	}
+	_updateInputRingVisibility() {
+		let e = this.renderRoot?.querySelector(".ripple-wrapper");
+		e && (this._inputFocused && this._kbShouldShowRing ? e.setAttribute("data-kb-focus", "true") : e.removeAttribute("data-kb-focus"));
+	}
+	_handleKey(e) {
+		if (this.disabled || !this._inputEl()) return;
+		let t = this._getVisibleItems(), n = (this.value ?? "").trim().length > 0, r = this._inputFocused && n && t.length > 0, i = e.key, a = e.keyCode, o = i === "ArrowDown" || i === "Down" || a === 40, s = i === "ArrowUp" || i === "Up" || a === 38, c = i === "Home" || a === 36, l = i === "End" || a === 35, u = i === "Enter" || a === 13, d = i === "Escape" || i === "Esc" || a === 27;
+		if (o) {
+			if (!r) return;
+			e.preventDefault(), this._kbMode = !0, this._moveActive(t, 1);
+			return;
+		}
+		if (s) {
+			if (!r) return;
+			e.preventDefault(), this._kbMode = !0, this._moveActive(t, -1);
+			return;
+		}
+		if (c) {
+			if (!r) return;
+			e.preventDefault(), this._kbMode = !0, this._activeIndex = t.length ? 0 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
+			return;
+		}
+		if (l) {
+			if (!r) return;
+			e.preventDefault(), this._kbMode = !0, this._activeIndex = t.length ? t.length - 1 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
+			return;
+		}
+		if (u) {
+			if (!r) {
+				let t = this._internals?.form ?? this._form ?? this.closest("form");
+				t ? (e.preventDefault(), this.reportValidity() && t.requestSubmit()) : this.submit();
+				return;
+			}
+			e.preventDefault();
+			let t = this._getActiveItem();
+			if (t) {
+				let e = t.getAttribute("label") || "";
+				this.value = e, this._syncFormValue(), this._dispatchStandardInput(), this._dispatchSubmit({
+					value: this.value,
+					active: this._itemPayload(t)
+				}), this._visibleSuggestions = 0, this._activeIndex = -1, this._kbMode = !1, this._hideOptionRing(), this.requestUpdate();
+			} else this.submit();
+			return;
+		}
+		if (d) {
+			e.preventDefault(), this._clearInput();
+			return;
+		}
+	}
+	_clearInput() {
+		if (this.disabled) return;
+		this.value = "", this._activeIndex = -1, this._kbMode = !1;
+		let e = this._inputEl();
+		e && (e.value = "", e.focus()), this._filterSuggestions(""), this._updateComboboxA11y(), this._hideOptionRing(), this._syncFormValue(), this._dispatchStandardInput(), this.dispatchEvent(new CustomEvent("scb-search-clear", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("scbsearchclear", {
+			bubbles: !0,
+			composed: !0
+		})), this._dispatchStandardChangeIfNeeded();
+	}
+	_filterSuggestions(e) {
+		let t = (e ?? "").trim().toLowerCase(), n = Array.from(this.querySelectorAll("scb-list-item")), r = 0;
+		for (let e of n) {
+			let n = `${(e.getAttribute("label") || "").toLowerCase()} ${(e.getAttribute("supporting-text") || "").toLowerCase()}`.trim();
+			t !== "" && n.includes(t) ? (e.removeAttribute("hidden"), r++) : e.setAttribute("hidden", ""), this._ensureOptionA11y(e);
+		}
+		this._visibleSuggestions = r, this._activeIndex >= r && (this._activeIndex = -1), this._updateComboboxA11y(), this.requestUpdate();
+	}
+	_inputEl() {
+		return this.renderRoot?.querySelector("#searchInput") ?? null;
+	}
+	_listEl() {
+		return this.renderRoot?.querySelector("scb-list.suggestion-list") ?? null;
+	}
+	_ringEl() {
+		return this.renderRoot?.querySelector("#optionRing") ?? null;
+	}
+	_getVisibleItems() {
+		return Array.from(this.querySelectorAll("scb-list-item")).filter((e) => !e.hasAttribute("hidden") && e.style.display !== "none");
+	}
+	_getActiveItem() {
+		let e = this._getVisibleItems();
+		return this._activeIndex < 0 || this._activeIndex >= e.length ? null : e[this._activeIndex] ?? null;
+	}
+	_moveActive(e, t) {
+		if (!e.length) {
+			this._activeIndex = -1, this._updateComboboxA11y(), this._hideOptionRing();
+			return;
+		}
+		let n = this._activeIndex + t;
+		this._activeIndex === -1 ? n = t > 0 ? 0 : e.length - 1 : (n < 0 && (n = 0), n >= e.length && (n = e.length - 1)), this._activeIndex = n, this._updateComboboxA11y(), this._scrollActiveIntoView();
+	}
+	_scrollActiveIntoView() {
+		let e = this._getActiveItem();
+		e && e.scrollIntoView({ block: "nearest" });
+	}
+	_itemPayload(e) {
+		return {
+			label: e.getAttribute("label") || "",
+			supportingText: e.getAttribute("supporting-text") || "",
+			href: e.getAttribute("href") || "",
+			type: e.getAttribute("type") || "",
+			id: e.id || ""
+		};
+	}
+	_ensureListboxA11y() {
+		let e = this._listEl();
+		e && (e.id ||= this._listboxId, e.setAttribute("role", "listbox"), e.setAttribute("aria-label", "Sökförslag")), Array.from(this.querySelectorAll("scb-list-item")).forEach((e) => this._ensureOptionA11y(e));
+	}
+	_ensureOptionA11y(e) {
+		e.id ||= `${this._listboxId}-opt-${Math.random().toString(36).slice(2, 8)}`, e.setAttribute("role", "option"), e.setAttribute("tabindex", "-1");
+	}
+	_updateComboboxA11y() {
+		let e = this._inputEl();
+		if (!e) return;
+		let t = this._getVisibleItems(), n = (this.value ?? "").trim().length > 0, r = this._inputFocused && n && t.length > 0;
+		e.setAttribute("role", "combobox"), e.setAttribute("aria-autocomplete", "list"), e.setAttribute("aria-controls", this._listboxId), e.setAttribute("aria-expanded", String(r));
+		let i = r ? this._getActiveItem() : null;
+		i?.id ? e.setAttribute("aria-activedescendant", i.id) : e.removeAttribute("aria-activedescendant"), this._kbMode && i && r ? this._positionOptionRing(i) : this._hideOptionRing();
+	}
+	_positionOptionRing(e) {
+		let t = this._ringEl(), n = this._listEl();
+		if (!t || !n) return;
+		let r = this.getBoundingClientRect(), i = e.getBoundingClientRect(), a = i.top - r.top, o = i.left - r.left, s = i.width, c = i.height;
+		t.style.top = `${a}px`, t.style.left = `${o}px`, t.style.width = `${s}px`, t.style.height = `${c}px`, t.setAttribute("data-show", "true");
+	}
+	_hideOptionRing() {
+		let e = this._ringEl();
+		e && e.removeAttribute("data-show");
+	}
+	_onWindowResize() {
+		let e = this._getActiveItem();
+		this._kbMode && e && this._positionOptionRing(e);
+	}
+	_attachListScrollListener() {
+		let e = this._listEl();
+		!e || this._listWithHandler === e || (this._detachListScrollListener(), e.addEventListener("scroll", this._listScrollHandler, { passive: !0 }), this._listWithHandler = e);
+	}
+	_detachListScrollListener() {
+		this._listWithHandler &&= (this._listWithHandler.removeEventListener("scroll", this._listScrollHandler), void 0);
+	}
+	_dispatchStandardInput() {
+		this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_dispatchStandardChangeIfNeeded() {
+		let e = this.value ?? "";
+		e !== this._lastChangeValue && (this._lastChangeValue = e, this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_dispatchSubmit(e) {
+		this.dispatchEvent(new CustomEvent("scb-search-submit", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("scbsearchsubmit", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		})), this._dispatchStandardChangeIfNeeded();
+	}
+	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-search-spacing-block-start", t) : this.style.removeProperty("--scb-search-spacing-block-start"), n ? this.style.setProperty("--scb-search-spacing-block-end", n) : this.style.removeProperty("--scb-search-spacing-block-end"), r ? this.style.setProperty("--scb-search-spacing-inline-start", r) : this.style.removeProperty("--scb-search-spacing-inline-start"), i ? this.style.setProperty("--scb-search-spacing-inline-end", i) : this.style.removeProperty("--scb-search-spacing-inline-end");
+	}
+	_syncFormValue() {
+		if (!this._internals) return;
+		let e = this.disabled ? null : this.value;
+		this._internals.setFormValue(e);
+	}
+};
+e([o({
+	type: String,
+	attribute: "trailing-icon"
+})], c.prototype, "trailingIcon", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], c.prototype, "supportingText", void 0), e([o({ type: String })], c.prototype, "value", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "name", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "required", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "autocomplete", 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([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), e([o({
+	type: Boolean,
+	attribute: "full-screen",
+	reflect: !0
+})], c.prototype, "fullScreen", void 0), c = e([a("scb-search")], c);
+//#endregion
+export { c as ScbSearch };