@greypan/web-ui 11.1.0 → 12.0.0

package/dist/components/segmented/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/segmented/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkDa,uBAAuB;SASlB,sBAAM;EACqB;MAGvC;MAGA,QAAQ;UAKJ;EAEoC;EACA;;;;;EAMkB;UAE7C;UACA;UACA;UACA;UACA;UAET;UAaA;UACA;UACA;EAEC;EAYA;mBAQQ;MA8Cb;MAIA,MAAM;cAOE;UAIE;UAuDN;UA6BA;UA2HA;UAIA;UAMA;mBAoDS;mBAiBA;EAER,qBAAqB;EAKrB,wBAAM;WA2BE;IACf,OAAO;IACP,QAAQ;;;QAIJ;YACI;IACR,oBAAoB"}

package/dist/components/segmented/index.js

@@ -1,239 +1,335 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../classes/glass.js";
-import { installPointerFocusSuppression as n } from "../../shared/focus/pointer-focus.js";
-import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
-import { GroupController as o, defineGroupCoordinator as s } from "../../shared/group-management/index.js";
-import { normalizeLiteral as c } from "../../shared/normalize/index.js";
-import { parseDuration as l } from "../../shared/theme/duration.js";
-import { attachDragGesture as u } from "../../shared/gesture/drag-gesture.js";
-import { clamp as d, snapToNearest as f } from "../../shared/gesture/physics.js";
-import p from "./style.js";
-import { LitElement as m, html as h, unsafeCSS as g } from "lit";
-import { customElement as _, property as v, state as y } from "lit/decorators.js";
-import { classMap as b } from "lit/directives/class-map.js";
-//#region src/components/segmented/index.ts
-n();
-var x = ["inset", "raised"];
-function S(e) {
-	let t = l(getComputedStyle(e).getPropertyValue("--wui-duration-trigger"));
-	return t === null ? 160 : Math.max(0, t);
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import glass_default from "../../classes/glass.js";
+import { installPointerFocusSuppression } from "../../shared/focus/pointer-focus.js";
+import { FormAssociated, FormAssociationController, defineFormAssociation } from "../../shared/form-association/index.js";
+import { GroupController, defineGroupCoordinator } from "../../shared/group-management/index.js";
+import { normalizeLiteral } from "../../shared/normalize/index.js";
+import { parseDuration } from "../../shared/theme/duration.js";
+import { attachDragGesture } from "../../shared/gesture/drag-gesture.js";
+import { clamp, snapToNearest } from "../../shared/gesture/physics.js";
+import style_default from "./style.js";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+// src/components/segmented/index.ts
+installPointerFocusSuppression();
+const ALLOWED_VARIANTS = ["inset", "raised"];
+function triggerDuration(el) {
+	const parsed = parseDuration(getComputedStyle(el).getPropertyValue("--wui-duration-trigger"));
+	return parsed === null ? 160 : Math.max(0, parsed);
 }
-function C(e, t) {
-	if (!t) return;
-	let n;
-	for (let r of e) if (r.value === t && (n ||= r, r.checked)) return r;
-	return n;
+function findSelectedTriggerByValue(triggers, value) {
+	if (!value) return void 0;
+	let selected;
+	for (const trigger of triggers) {
+		if (trigger.value !== value) continue;
+		if (!selected) selected = trigger;
+		if (trigger.checked) return trigger;
+	}
+	return selected;
 }
-var w = class extends r(m) {
-	constructor(...e) {
-		super(...e), this.name = "", this._variant = "inset", this.disabled = !1, this.required = !1, this._value = "", this._indicatorReady = !1, this._settling = !1, this._pressed = !1, this._isDragging = !1, this._dragGestureHandle = null, this._settleFlight = null, this._settleRequest = 0, this._groupController = new o(this, s({
+let WebUiSegmented = class WebUiSegmented extends FormAssociated(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+		this._variant = "inset";
+		this.disabled = false;
+		this.required = false;
+		this.ariaLabel = null;
+		this._value = "";
+		this._indicatorReady = false;
+		this._settling = false;
+		this._pressed = false;
+		this._isDragging = false;
+		this._dragGestureHandle = null;
+		this._settleFlight = null;
+		this._settleRequest = 0;
+		this._groupController = new GroupController(this, defineGroupCoordinator({
 			host: this,
 			getItems: () => [...this.querySelectorAll("web-ui-segmented-trigger")],
 			getValue: () => this._value,
-			setValue: (e) => {
-				this.value = e;
+			setValue: (value) => {
+				this.value = value;
 			},
 			getDisabled: () => this._isDisabled,
-			isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-segmented-trigger"),
-			isItemSelected: (e, t) => e === C(this.querySelectorAll("web-ui-segmented-trigger"), t),
-			isItemTabStop: (e, t) => {
-				let n = t.filter((e) => !e.disabled), r = C(t, this._value);
-				return e === (r && !r.disabled ? r : n[0]);
+			isItem: (target) => target instanceof HTMLElement && target.matches("web-ui-segmented-trigger"),
+			isItemSelected: (trigger, value) => trigger === findSelectedTriggerByValue(this.querySelectorAll("web-ui-segmented-trigger"), value),
+			isItemTabStop: (trigger, triggers) => {
+				const enabled = triggers.filter((item) => !item.disabled);
+				const selected = findSelectedTriggerByValue(triggers, this._value);
+				return trigger === (selected && !selected.disabled ? selected : enabled[0]);
 			},
-			getItemSelected: (e) => e.checked,
-			getNextValue: (e, t) => e.checked ? e.value : t,
-			valuesEqual: (e, t) => e === t,
-			copyValue: (e) => e,
-			setItemSelected: (e, t) => {
-				e.checked = t;
+			getItemSelected: (trigger) => trigger.checked,
+			getNextValue: (trigger, value) => trigger.checked ? trigger.value : value,
+			valuesEqual: (a, b) => a === b,
+			copyValue: (value) => value,
+			setItemSelected: (trigger, selected) => {
+				trigger.checked = selected;
 			},
-			resyncOnUnchangedValue: (e) => {
-				for (let t of this.querySelectorAll("web-ui-segmented-trigger")) t.checked = t === e;
-				this._groupController.sync(), requestAnimationFrame(() => void this._updateIndicator());
+			resyncOnUnchangedValue: (selected) => {
+				for (const trigger of this.querySelectorAll("web-ui-segmented-trigger")) trigger.checked = trigger === selected;
+				this._groupController.sync();
+				requestAnimationFrame(() => void this._updateIndicator());
 			},
 			dispatchValueChange: () => {
 				this.dispatchEvent(new Event("input", {
-					bubbles: !0,
-					composed: !0
-				})), this.dispatchEvent(new Event("change", {
-					bubbles: !0,
-					composed: !0
+					bubbles: true,
+					composed: true
+				}));
+				this.dispatchEvent(new Event("change", {
+					bubbles: true,
+					composed: true
 				}));
 			}
 		}).make(), {
 			observeAttributes: ["disabled"],
 			afterSync: () => requestAnimationFrame(() => void this._updateIndicator())
-		}), this._formAssociation = a({
+		});
+		this._formAssociation = defineFormAssociation({
 			host: this,
 			initialize: () => {
-				let e = this.getAttribute("value");
-				e !== null && this._value === "" && (this._value = e);
+				const attrValue = this.getAttribute("value");
+				if (attrValue !== null && this._value === "") this._value = attrValue;
 			},
 			getState: () => this._value,
-			setState: (e) => {
-				this.value = e;
+			setState: (value) => {
+				this.value = value;
 			},
 			getFormValue: () => this.name && this._value ? this._value : null,
 			getFormState: () => this._value,
-			restoreState: (e) => {
-				typeof e == "string" && (this.value = e);
+			restoreState: (state) => {
+				if (typeof state === "string") this.value = state;
 			}
-		}).make(), this._formAssociationController = new i(this, this._formAssociation);
+		}).make();
+		this._formAssociationController = new FormAssociationController(this, this._formAssociation);
 	}
 	static {
-		this.styles = [g(t), g(p)];
+		this.styles = [unsafeCSS(glass_default), unsafeCSS(style_default)];
 	}
 	get variant() {
 		return this._variant;
 	}
-	set variant(e) {
-		let t = this._variant;
-		this._variant = c(e, x, "inset"), this.requestUpdate("variant", t);
+	set variant(v) {
+		const old = this._variant;
+		this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, "inset");
+		this.requestUpdate("variant", old);
 	}
 	connectedCallback() {
-		super.connectedCallback(), customElements.whenDefined("web-ui-segmented-trigger").then(async () => {
+		super.connectedCallback();
+		customElements.whenDefined("web-ui-segmented-trigger").then(async () => {
 			if (!this.isConnected) return;
-			let e = [...this.querySelectorAll("web-ui-segmented-trigger")];
-			await Promise.all(e.map((e) => e.updateComplete)), this.isConnected && this._groupController.sync();
+			const triggers = [...this.querySelectorAll("web-ui-segmented-trigger")];
+			await Promise.all(triggers.map((trigger) => trigger.updateComplete));
+			if (this.isConnected) this._groupController.sync();
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null, clearTimeout(this._settleTimer), this._settleTimer = void 0;
+		super.disconnectedCallback();
+		this._dragGestureHandle?.destroy();
+		this._dragGestureHandle = null;
+		clearTimeout(this._settleTimer);
+		this._settleTimer = void 0;
 	}
 	get value() {
 		return this._value;
 	}
-	set value(e) {
-		let t = this._value;
-		this._value = e, this._formAssociation.sync(), this.requestUpdate("value", t);
+	set value(v) {
+		const old = this._value;
+		this._value = v;
+		this._formAssociation.sync();
+		this.requestUpdate("value", old);
 	}
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	async _updateIndicator() {
-		let e = this.querySelectorAll("web-ui-segmented-trigger"), t = 0, n = 0, r = C(e, this._value);
-		if (r) {
-			let e = r.getBoundingClientRect(), i = this.getBoundingClientRect();
-			t = e.left - i.left, n = e.width;
+		const triggers = this.querySelectorAll("web-ui-segmented-trigger");
+		let left = 0;
+		let width = 0;
+		const selectedTrigger = findSelectedTriggerByValue(triggers, this._value);
+		if (selectedTrigger) {
+			const triggerRect = selectedTrigger.getBoundingClientRect();
+			const groupRect = this.getBoundingClientRect();
+			left = triggerRect.left - groupRect.left;
+			width = triggerRect.width;
+		}
+		if (this._indicatorReady ? this._openSettleFlight() : false) await this.updateComplete;
+		this.style.setProperty("--indicator-left", `${left}px`);
+		this.style.setProperty("--indicator-width", `${width}px`);
+		if (!this._indicatorReady) {
+			this.renderRoot.querySelector(".wui-segmented-indicator")?.offsetWidth;
+			this._indicatorReady = true;
 		}
-		this._indicatorReady && this._openSettleFlight() && await this.updateComplete, this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`), this._indicatorReady ||= (this.renderRoot.querySelector(".wui-segmented-indicator")?.offsetWidth, !0);
 	}
 	_openSettleFlight() {
-		let e = this._settleTimer !== void 0, t = {};
-		this._settleFlight = t;
-		let n = ++this._settleRequest;
+		const wasFlying = this._settleTimer !== void 0;
+		const flight = {};
+		this._settleFlight = flight;
+		const request = ++this._settleRequest;
 		clearTimeout(this._settleTimer);
-		let r = S(this);
-		return r === 0 ? (this._settleTimer = void 0, this._settleFlight = null, this._settling = !1, !1) : (this._settling = e, this._settleTimer = setTimeout(() => {
-			this._settleTimer = void 0, this._settleRequest === n && this._settleFlight === t && (this._settleFlight = null, this._settling = !1);
-		}, r), e);
+		const duration = triggerDuration(this);
+		if (duration === 0) {
+			this._settleTimer = void 0;
+			this._settleFlight = null;
+			this._settling = false;
+			return false;
+		}
+		this._settling = wasFlying;
+		this._settleTimer = setTimeout(() => {
+			this._settleTimer = void 0;
+			if (this._settleRequest !== request || this._settleFlight !== flight) return;
+			this._settleFlight = null;
+			this._settling = false;
+		}, duration);
+		return wasFlying;
 	}
 	handlePointerDown(e) {
 		if (this._isDisabled) return;
-		let t = [...this.querySelectorAll("web-ui-segmented-trigger")], n = t.filter((e) => !e.disabled);
-		if (n.length === 0) return;
-		let r = C(t, this._value);
-		if (!r || r.disabled) return;
-		let i = r.getBoundingClientRect();
-		if (!(e.clientX >= i.left && e.clientX <= i.right && e.clientY >= i.top && e.clientY <= i.bottom)) return;
-		this._pressed = !0;
-		let a = this.getBoundingClientRect(), o = r.getBoundingClientRect(), s = o.left - a.left, c = o.width, l = s + c / 2, p = t[0].getBoundingClientRect(), m = t[t.length - 1].getBoundingClientRect(), h = p.left - a.left, g = m.right - a.left, _ = n.map((e) => {
-			let t = e.getBoundingClientRect();
+		const triggers = [...this.querySelectorAll("web-ui-segmented-trigger")];
+		const enabledTriggers = triggers.filter((t) => !t.disabled);
+		if (enabledTriggers.length === 0) return;
+		const activeTrigger = findSelectedTriggerByValue(triggers, this._value);
+		if (!activeTrigger || activeTrigger.disabled) return;
+		const activeTriggerRect = activeTrigger.getBoundingClientRect();
+		if (!(e.clientX >= activeTriggerRect.left && e.clientX <= activeTriggerRect.right && e.clientY >= activeTriggerRect.top && e.clientY <= activeTriggerRect.bottom)) return;
+		this._pressed = true;
+		const groupRect = this.getBoundingClientRect();
+		const initialTriggerRect = activeTrigger.getBoundingClientRect();
+		const initialLeft = initialTriggerRect.left - groupRect.left;
+		const initialWidth = initialTriggerRect.width;
+		const initialCenter = initialLeft + initialWidth / 2;
+		const firstTriggerRect = triggers[0].getBoundingClientRect();
+		const lastTriggerRect = triggers[triggers.length - 1].getBoundingClientRect();
+		const minLeft = firstTriggerRect.left - groupRect.left;
+		const trackRight = lastTriggerRect.right - groupRect.left;
+		const enabledSlots = enabledTriggers.map((t) => {
+			const r = t.getBoundingClientRect();
 			return {
-				center: t.left - a.left + t.width / 2,
-				width: t.width
+				center: r.left - groupRect.left + r.width / 2,
+				width: r.width
 			};
-		}), v = _.map((e) => e.center), y = (e) => {
-			let t = l + e, n = f(t, v), r = n === -1 ? c : _[n]?.width ?? c, i = d(t - r / 2, h, g - r);
+		});
+		const enabledCenters = enabledSlots.map((slot) => slot.center);
+		const frameAt = (deltaX) => {
+			const center = initialCenter + deltaX;
+			const nearest = snapToNearest(center, enabledCenters);
+			const width = nearest === -1 ? initialWidth : enabledSlots[nearest]?.width ?? initialWidth;
+			const left = clamp(center - width / 2, minLeft, trackRight - width);
 			return {
-				left: i,
-				width: r,
-				center: i + r / 2
+				left,
+				width,
+				center: left + width / 2
 			};
 		};
-		this._dragGestureHandle?.destroy(), this._dragGestureHandle = u(e, {
+		this._dragGestureHandle?.destroy();
+		this._dragGestureHandle = attachDragGesture(e, {
 			axis: "x",
 			threshold: 6,
-			onMove: (e) => {
-				this._isDragging = !0;
-				let { left: t, width: n } = y(e.deltaX);
-				this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`);
+			onMove: (info) => {
+				this._isDragging = true;
+				const { left, width } = frameAt(info.deltaX);
+				this.style.setProperty("--indicator-left", `${left}px`);
+				this.style.setProperty("--indicator-width", `${width}px`);
 			},
-			onEnd: (e) => {
-				let t = this._isDragging;
-				if (this._isDragging = !1, this._pressed = !1, t) {
-					let t = y(e.deltaX).center, i = r;
-					if (e.velocityX > 300) {
-						let e = n.indexOf(r);
-						i = e !== -1 && e < n.length - 1 ? n[e + 1] : n[n.length - 1];
-					} else if (e.velocityX < -300) {
-						let e = n.indexOf(r);
-						i = e > 0 ? n[e - 1] : n[0];
+			onEnd: (info) => {
+				const wasDragging = this._isDragging;
+				this._isDragging = false;
+				this._pressed = false;
+				if (wasDragging) {
+					const currentCenter = frameAt(info.deltaX).center;
+					let targetTrigger = activeTrigger;
+					if (info.velocityX > 300) {
+						const currentIdx = enabledTriggers.indexOf(activeTrigger);
+						if (currentIdx !== -1 && currentIdx < enabledTriggers.length - 1) targetTrigger = enabledTriggers[currentIdx + 1];
+						else targetTrigger = enabledTriggers[enabledTriggers.length - 1];
+					} else if (info.velocityX < -300) {
+						const currentIdx = enabledTriggers.indexOf(activeTrigger);
+						if (currentIdx > 0) targetTrigger = enabledTriggers[currentIdx - 1];
+						else targetTrigger = enabledTriggers[0];
 					} else {
-						let e = f(t, v);
-						e !== -1 && n[e] && (i = n[e]);
+						const nearestIdx = snapToNearest(currentCenter, enabledCenters);
+						if (nearestIdx !== -1 && enabledTriggers[nearestIdx]) targetTrigger = enabledTriggers[nearestIdx];
 					}
-					i.value === this._value ? i === r ? this._updateIndicator() : i.shadowRoot?.querySelector("[role=\"option\"]")?.click() : (this.value = i.value, this._groupController.sync(), this.dispatchEvent(new Event("input", {
-						bubbles: !0,
-						composed: !0
-					})), this.dispatchEvent(new Event("change", {
-						bubbles: !0,
-						composed: !0
-					})));
+					if (targetTrigger.value !== this._value) {
+						this.value = targetTrigger.value;
+						this._groupController.sync();
+						this.dispatchEvent(new Event("input", {
+							bubbles: true,
+							composed: true
+						}));
+						this.dispatchEvent(new Event("change", {
+							bubbles: true,
+							composed: true
+						}));
+					} else if (targetTrigger !== activeTrigger) targetTrigger.shadowRoot?.querySelector("[role=\"option\"]")?.click();
+					else this._updateIndicator();
 				}
 				this.requestUpdate();
 			},
 			onCancel: () => {
-				this._isDragging = !1, this._pressed = !1, this._updateIndicator(), this.requestUpdate();
+				this._isDragging = false;
+				this._pressed = false;
+				this._updateIndicator();
+				this.requestUpdate();
 			}
 		});
 	}
 	handlePointerUp() {
-		this._pressed = !1;
+		this._pressed = false;
 	}
 	handlePointerLeave() {
-		this._dragGestureHandle?.isDragging() || (this._pressed = !1);
+		if (!this._dragGestureHandle?.isDragging()) this._pressed = false;
 	}
-	handleKeyDown(e) {
-		if (this._isDisabled || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-		let t = e.composedPath().find((e) => e instanceof HTMLElement && e.matches("web-ui-segmented-trigger"));
-		if (!t) return;
-		let n = [...this.querySelectorAll("web-ui-segmented-trigger")], r = n.filter((e) => !e.disabled), i = n.indexOf(t);
-		if (i === -1 || r.length === 0) return;
-		let a = getComputedStyle(this).direction === "rtl" ? -1 : 1, o = (e) => {
-			for (let t = 1; t <= n.length; t += 1) {
-				let r = (i + e * t + n.length) % n.length, a = n[r];
-				if (a && !a.disabled) return a;
+	handleKeyDown(event) {
+		if (this._isDisabled || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const current = event.composedPath().find((target) => target instanceof HTMLElement && target.matches("web-ui-segmented-trigger"));
+		if (!current) return;
+		const triggers = [...this.querySelectorAll("web-ui-segmented-trigger")];
+		const enabled = triggers.filter((trigger) => !trigger.disabled);
+		const currentIndex = triggers.indexOf(current);
+		if (currentIndex === -1 || enabled.length === 0) return;
+		const direction = getComputedStyle(this).direction === "rtl" ? -1 : 1;
+		const nextEnabled = (direction) => {
+			for (let offset = 1; offset <= triggers.length; offset += 1) {
+				const index = (currentIndex + direction * offset + triggers.length) % triggers.length;
+				const candidate = triggers[index];
+				if (candidate && !candidate.disabled) return candidate;
 			}
-			return t;
-		}, s;
-		switch (e.key) {
+			return current;
+		};
+		let next;
+		switch (event.key) {
 			case "ArrowRight":
-				s = o(a);
+				next = nextEnabled(direction);
 				break;
 			case "ArrowLeft":
-				s = o(a === 1 ? -1 : 1);
+				next = nextEnabled(direction === 1 ? -1 : 1);
 				break;
 			case "Home":
-				s = r[0];
+				next = enabled[0];
 				break;
 			case "End":
-				s = r[r.length - 1];
+				next = enabled[enabled.length - 1];
 				break;
 			default: return;
 		}
-		let c = s.shadowRoot?.querySelector("[role=\"option\"]");
-		c && (e.preventDefault(), c.focus(), (s !== t || !s.checked) && c.click());
+		const option = next.shadowRoot?.querySelector("[role=\"option\"]");
+		if (!option) return;
+		event.preventDefault();
+		option.focus();
+		if (next !== current || !next.checked) option.click();
 	}
-	formDisabledCallback(e) {
-		this._formAssociation.setDisabled(e), this._groupController.sync();
+	formDisabledCallback(disabled) {
+		this._formAssociation.setDisabled(disabled);
+		this._groupController.sync();
 	}
 	render() {
-		return h`
+		return html`
       <div
-        class=${b({
-			"wui-glass": !0,
-			"wui-segmented": !0,
+        class=${classMap({
+			"wui-glass": true,
+			"wui-segmented": true,
 			"is-disabled": this._isDisabled,
 			"is-pressed": this._pressed,
 			"is-dragging": this._isDragging,
@@ -242,6 +338,7 @@ var w = class extends r(m) {
 		})}
         role="listbox"
         aria-orientation="horizontal"
+        aria-label=${ifDefined(this.ariaLabel)}
         @keydown=${this.handleKeyDown}
         @pointerdown=${this.handlePointerDown}
         @pointerup=${this.handlePointerUp}
@@ -254,20 +351,32 @@ var w = class extends r(m) {
     `;
 	}
 };
-e([v({
+__decorate([property({
 	type: String,
-	reflect: !0
-})], w.prototype, "name", void 0), e([v({
+	reflect: true
+})], WebUiSegmented.prototype, "name", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], w.prototype, "variant", null), e([v({
+	reflect: true
+})], WebUiSegmented.prototype, "variant", null);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], w.prototype, "disabled", void 0), e([v({
+	reflect: true
+})], WebUiSegmented.prototype, "disabled", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], w.prototype, "required", void 0), e([y()], w.prototype, "_value", void 0), e([y()], w.prototype, "_indicatorReady", void 0), e([y()], w.prototype, "_settling", void 0), e([y()], w.prototype, "_pressed", void 0), e([y()], w.prototype, "_isDragging", void 0), w = e([_("web-ui-segmented")], w);
-//#endregion
-export { w as WebUiSegmented };
+	reflect: true
+})], WebUiSegmented.prototype, "required", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-label"
+})], WebUiSegmented.prototype, "ariaLabel", void 0);
+__decorate([state()], WebUiSegmented.prototype, "_value", void 0);
+__decorate([state()], WebUiSegmented.prototype, "_indicatorReady", void 0);
+__decorate([state()], WebUiSegmented.prototype, "_settling", void 0);
+__decorate([state()], WebUiSegmented.prototype, "_pressed", void 0);
+__decorate([state()], WebUiSegmented.prototype, "_isDragging", void 0);
+WebUiSegmented = __decorate([customElement("web-ui-segmented")], WebUiSegmented);
+export { WebUiSegmented };
 
 //# sourceMappingURL=index.js.map