@greypan/web-ui 11.0.0 → 11.2.0

package/dist/components/radio-group/index.js

@@ -2,38 +2,113 @@ import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate
 import { FormAssociated as t, FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
 import { GroupController as i, defineGroupCoordinator as a } from "../../shared/group-management/index.js";
 import { normalizeLiteral as o } from "../../shared/normalize/index.js";
-import s from "./style.js";
-import { LitElement as c, html as l, unsafeCSS as u } from "lit";
-import { customElement as d, property as f, state as p } from "lit/decorators.js";
+import { activateRadio as s, focusRadio as c, isRadioDisabled as l } from "../radio/interaction.js";
+import u from "./style.js";
+import { LitElement as d, html as f, unsafeCSS as p } from "lit";
+import { customElement as m, property as h, state as g } from "lit/decorators.js";
 //#region src/components/radio-group/index.ts
-var m = ["horizontal", "vertical"], h = class extends t(c) {
+var _ = ["horizontal", "vertical"], v = {
+	next: ["ArrowRight", "ArrowDown"],
+	previous: ["ArrowLeft", "ArrowUp"]
+}, y = [
+	"hidden",
+	"inert",
+	"aria-hidden",
+	"style",
+	"class",
+	"open",
+	"popover",
+	"slot"
+], b = /* @__PURE__ */ new WeakMap();
+function x(e, t) {
+	let n = e.defaultView;
+	if (!n) return () => {};
+	let r = b.get(e);
+	if (!r) {
+		let t = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Map(), a = () => t.forEach((e) => e()), o = (e) => {
+			let t = e.trim();
+			if (t && t !== "all" && !i.has(t)) try {
+				let e = n.matchMedia(t);
+				e.addEventListener("change", a), i.set(t, e);
+			} catch {}
+		}, s = (e, t = /* @__PURE__ */ new Set()) => {
+			for (let n of Array.from(e)) {
+				if (n instanceof CSSMediaRule && o(n.conditionText), n instanceof CSSImportRule && n.styleSheet && !t.has(n.styleSheet)) {
+					t.add(n.styleSheet), o(n.media.mediaText);
+					try {
+						s(n.styleSheet.cssRules, t);
+					} catch {}
+				}
+				if ("cssRules" in n) try {
+					s(n.cssRules, t);
+				} catch {}
+			}
+		}, c = () => {
+			for (let e of i.values()) e.removeEventListener("change", a);
+			i.clear();
+			for (let t of Array.from(e.styleSheets)) {
+				o(t.media.mediaText);
+				try {
+					s(t.cssRules, /* @__PURE__ */ new Set([t]));
+				} catch {}
+			}
+		}, l = (e) => {
+			let t = e.target;
+			t instanceof HTMLLinkElement && t.relList.contains("stylesheet") && (c(), a());
+		}, u = (e) => {
+			e.key === "Tab" && (c(), a());
+		}, d = new MutationObserver(() => {
+			c(), a();
+		}), f = e.head ?? e.documentElement;
+		d.observe(f, {
+			attributes: !0,
+			childList: !0,
+			characterData: !0,
+			subtree: !0
+		}), n.addEventListener("resize", a), e.addEventListener("load", l, !0), e.addEventListener("keydown", u, !0), r = {
+			subscribers: t,
+			mediaQueries: i,
+			observer: d,
+			view: n,
+			notify: a,
+			refreshMediaQueries: c,
+			handleStylesheetLoad: l,
+			handleTabKeydown: u
+		}, b.set(e, r), c();
+	}
+	return r.subscribers.add(t), () => {
+		let n = b.get(e);
+		if (n && (n.subscribers.delete(t), !(n.subscribers.size > 0))) {
+			n.observer.disconnect(), n.view.removeEventListener("resize", n.notify), e.removeEventListener("load", n.handleStylesheetLoad, !0), e.removeEventListener("keydown", n.handleTabKeydown, !0);
+			for (let e of n.mediaQueries.values()) e.removeEventListener("change", n.notify);
+			n.mediaQueries.clear(), b.delete(e);
+		}
+	};
+}
+var S = class extends t(d) {
 	constructor(...e) {
-		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._direction = "vertical", this._value = "", this._groupController = new i(this, a({
+		super(...e), this.name = "", this.disabled = !1, this.required = !1, this.ariaLabel = null, this._direction = "vertical", this._value = "", this._groupController = new i(this, a({
 			host: this,
-			getItems: () => [...this.querySelectorAll("web-ui-radio")],
+			getItems: () => this._getRadios(),
 			getValue: () => this._value,
 			setValue: (e) => {
 				this.value = e;
 			},
 			getDisabled: () => this._isDisabled,
-			isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-radio"),
-			isItemSelected: (e, t) => {
-				if (!t) return !1;
-				let n;
-				for (let e of this.querySelectorAll("web-ui-radio")) if (e.value === t && (n ||= e, e.checked)) {
-					n = e;
-					break;
-				}
-				return e === n;
-			},
+			isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-radio") && e.closest("web-ui-radio-group") === this,
+			isItemSelected: (e, t) => e === this._findSelectedRadio(this._getRadios(), t),
+			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;
 			},
+			getRovingTabStop: (e, t, n, r) => this._getRovingTabStop(e, n, r),
+			handleKeyDown: (e) => this._handleKeyDown(e),
 			resyncOnUnchangedValue: (e) => {
-				for (let t of this.querySelectorAll("web-ui-radio")) t.checked = t === e;
+				for (let t of this._getRadios()) t.checked = t === e;
+				this._groupController.sync();
 			},
 			dispatchValueChange: () => {
 				this.dispatchEvent(new Event("input", {
@@ -44,7 +119,12 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
 					composed: !0
 				}));
 			}
-		}).make(), { afterSync: () => this._pruneRemovedMembers() }), this._knownMemberValues = /* @__PURE__ */ new Set(), this._formAssociation = r({
+		}).make(), {
+			observeAttributes: ["disabled", ...y],
+			afterSync: () => this._pruneRemovedMembers()
+		}), this._knownMemberValues = /* @__PURE__ */ new Set(), this._availabilityObserver = null, this._availabilityResizeObserver = null, this._availabilityToggleTargets = /* @__PURE__ */ new Set(), this._availabilitySlotTargets = /* @__PURE__ */ new Set(), this._unsubscribeDocumentAvailability = null, this._handleAvailabilityToggle = () => this._groupController.sync(), this._handleAvailabilitySlotChange = () => {
+			this._observeAvailabilityAncestors(), this._groupController.sync();
+		}, this._formAssociation = r({
 			host: this,
 			initialize: () => {
 				let e = this.getAttribute("value");
@@ -63,18 +143,65 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
 		}).make(), this._formAssociationController = new n(this, this._formAssociation);
 	}
 	static {
-		this.styles = u(s);
+		this.styles = p(u);
 	}
 	get direction() {
 		return this._direction;
 	}
 	set direction(e) {
 		let t = this._direction;
-		this._direction = o(e, m, "vertical"), this.requestUpdate("direction", t);
+		this._direction = o(e, _, "vertical"), this.requestUpdate("direction", t);
+	}
+	_getRadios() {
+		return [...this.querySelectorAll("web-ui-radio")].filter((e) => e.closest("web-ui-radio-group") === this);
+	}
+	_findSelectedRadio(e, t) {
+		if (!t) return;
+		let n = e.filter((e) => e.value === t);
+		return n.find((e) => e.checked) ?? n[0];
+	}
+	_getRovingTabStop(e, t, n) {
+		if (this._isDisabled || this._isRadioUnavailable(e)) return !1;
+		let r = t.filter((e) => !this._isRadioUnavailable(e));
+		return e === (r.find((e) => e.checked) ?? this._findSelectedRadio(r, n) ?? r[0]);
+	}
+	_handleKeyDown(e) {
+		if (this._isDisabled || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = e.composedPath().find((e) => e instanceof HTMLElement && e.matches("web-ui-radio"));
+		if (!t || t.closest("web-ui-radio-group") !== this) return;
+		let n = this._getRadios(), r = n.indexOf(t);
+		if (r < 0) return;
+		let i = n.filter((e) => !this._isRadioUnavailable(e));
+		if (i.length === 0) return;
+		let a = i.indexOf(t), o = v.next.some((t) => e.key === t) ? 1 : v.previous.some((t) => e.key === t) ? -1 : 0;
+		o && this.direction === "horizontal" && (e.key === "ArrowLeft" || e.key === "ArrowRight") && getComputedStyle(this).direction === "rtl" && (o *= -1);
+		let l;
+		if (o) {
+			if (a >= 0) l = i[(a + o + i.length) % i.length];
+			else for (let e = 1; e <= n.length; e++) {
+				let t = n[((r + o * e) % n.length + n.length) % n.length];
+				if (t && !this._isRadioUnavailable(t)) {
+					l = t;
+					break;
+				}
+			}
+		} else if (e.key === "Home") l = i[0];
+		else if (e.key === "End") l = i[i.length - 1];
+		else return;
+		l && (e.preventDefault(), c(l), l.checked || s(l));
+	}
+	_getComposedAncestors(e) {
+		let t = [], n = /* @__PURE__ */ new Set(), r = e;
+		for (; r && !n.has(r);) {
+			n.add(r), t.push(r);
+			let e = r.getRootNode();
+			r = r.assignedSlot ?? r.parentElement ?? (e instanceof ShadowRoot ? e.host : null);
+		}
+		return t;
 	}
 	_pruneRemovedMembers() {
 		if (!this._value) return;
-		let e = [...this.querySelectorAll("web-ui-radio")];
+		let e = this._getRadios();
 		if (e.length === 0) return;
 		let t = new Set(e.map((e) => e.value));
 		!t.has(this._value) && this._knownMemberValues.has(this._value) && (this.value = ""), this._knownMemberValues = t;
@@ -89,6 +216,62 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
 	}
+	connectedCallback() {
+		this._syncHostSemantics(), this._observeAvailabilityAncestors(), this._unsubscribeDocumentAvailability?.(), this._unsubscribeDocumentAvailability = x(this.ownerDocument, () => this._groupController.sync()), super.connectedCallback();
+	}
+	disconnectedCallback() {
+		this._availabilityObserver?.disconnect(), this._availabilityObserver = null, this._availabilityResizeObserver?.disconnect(), this._availabilityResizeObserver = null, this._syncAvailabilityToggleTargets([]), this._syncAvailabilitySlotTargets([]), this._unsubscribeDocumentAvailability?.(), this._unsubscribeDocumentAvailability = null, super.disconnectedCallback();
+	}
+	updated() {
+		this._syncHostSemantics();
+	}
+	_syncHostSemantics() {
+		this.setAttribute("role", "radiogroup"), this.setAttribute("aria-orientation", this.direction), this.setAttribute("aria-disabled", String(this._isDisabled)), this.setAttribute("aria-required", String(this.required));
+	}
+	_isRadioUnavailable(e) {
+		if (l(e) || e.matches(":disabled")) return !0;
+		let t = this._getComposedAncestors(e), n = (e) => {
+			let n = [...e.children].find((e) => e.localName === "summary");
+			return n !== void 0 && t.includes(n);
+		};
+		if (t.some((e) => e.hasAttribute("hidden") || e.hasAttribute("inert") || e.getAttribute("aria-hidden")?.toLowerCase() === "true" || e.localName === "details" && !e.hasAttribute("open") && !n(e))) return !0;
+		let r = e.ownerDocument.defaultView;
+		if (!r) return !1;
+		let i = r.getComputedStyle(e).visibility;
+		if (i === "hidden" || i === "collapse") return !0;
+		for (let e of t) {
+			let t = r.getComputedStyle(e);
+			if (t.display === "none" || t.getPropertyValue("content-visibility") === "hidden") return !0;
+		}
+		return !1;
+	}
+	_observeAvailabilityAncestors() {
+		this._availabilityObserver?.disconnect(), this._availabilityObserver = null, this._availabilityResizeObserver?.disconnect(), this._availabilityResizeObserver = null;
+		let e = this._getComposedAncestors(this);
+		if (this._syncAvailabilityToggleTargets(e), this._syncAvailabilitySlotTargets(e), e.length !== 0) {
+			this._availabilityObserver = new MutationObserver((e) => {
+				e.some((e) => e.attributeName === "popover" || e.attributeName === "slot") && this._observeAvailabilityAncestors(), this._groupController.sync();
+			});
+			for (let t of e) this._availabilityObserver.observe(t, {
+				attributes: !0,
+				attributeFilter: [...y]
+			});
+			if (typeof ResizeObserver < "u") {
+				this._availabilityResizeObserver = new ResizeObserver(() => this._groupController.sync());
+				for (let t of e) this._availabilityResizeObserver.observe(t);
+			}
+		}
+	}
+	_syncAvailabilityToggleTargets(e) {
+		for (let e of this._availabilityToggleTargets) e.removeEventListener("toggle", this._handleAvailabilityToggle);
+		this._availabilityToggleTargets.clear();
+		for (let t of e) t.hasAttribute("popover") && (t.addEventListener("toggle", this._handleAvailabilityToggle), this._availabilityToggleTargets.add(t));
+	}
+	_syncAvailabilitySlotTargets(e) {
+		for (let e of this._availabilitySlotTargets) e.removeEventListener("slotchange", this._handleAvailabilitySlotChange);
+		this._availabilitySlotTargets.clear();
+		for (let t of e) t.localName === "slot" && (t.addEventListener("slotchange", this._handleAvailabilitySlotChange), this._availabilitySlotTargets.add(t));
+	}
 	formDisabledCallback(e) {
 		this._formAssociation.setDisabled(e), this._groupController.sync();
 	}
@@ -103,23 +286,31 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
 		}
 	}
 	render() {
-		return l`<div class="wui-radio-group"><slot></slot></div>`;
+		return f`<div class="wui-radio-group"><slot></slot></div>`;
 	}
 };
-e([f({
+e([h({
 	type: String,
 	reflect: !0
-})], h.prototype, "name", void 0), e([f({
+})], S.prototype, "name", void 0), e([h({
 	type: Boolean,
 	reflect: !0
-})], h.prototype, "disabled", void 0), e([f({
+})], S.prototype, "disabled", void 0), e([h({
 	type: Boolean,
 	reflect: !0
-})], h.prototype, "required", void 0), e([f({
+})], S.prototype, "required", void 0), e([h({
+	type: String,
+	attribute: "aria-label",
+	reflect: !0
+})], S.prototype, "ariaLabel", void 0), e([h({
+	type: String,
+	attribute: "aria-labelledby",
+	reflect: !0
+})], S.prototype, "ariaLabelledby", void 0), e([h({
 	type: String,
 	reflect: !0
-})], h.prototype, "direction", null), e([p()], h.prototype, "_value", void 0), h = e([d("web-ui-radio-group")], h);
+})], S.prototype, "direction", null), e([g()], S.prototype, "_value", void 0), S = e([m("web-ui-radio-group")], S);
 //#endregion
-export { h as WebUiRadioGroup };
+export { S as WebUiRadioGroup };
 
 //# sourceMappingURL=index.js.map

package/dist/components/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport type { WebUiRadio } from '../radio'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends FormAssociated(LitElement) {\n  static override styles = unsafeCSS(style)\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'vertical')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'vertical'\n\n  @state() private _value = ''\n\n  private readonly _groupController = new GroupController(\n    this,\n    defineGroupCoordinator<WebUiRadio, string>({\n      host: this,\n      getItems: () => [...this.querySelectorAll<WebUiRadio>('web-ui-radio')],\n      getValue: () => this._value,\n      setValue: value => {\n        this.value = value\n      },\n      getDisabled: () => this._isDisabled,\n      isItem: (target): target is WebUiRadio => target instanceof HTMLElement && target.matches('web-ui-radio'),\n      // 选中判定按元素身份而非 value 相等：value 重复时按值比较会把多个成员\n      // 同时标为选中，破坏单选不变式。重复值取第一个匹配（或已选中的那个，\n      // 避免每次 sync 把选中项跳回第一个）。\n      isItemSelected: (radio, value) => {\n        if (!value) return false\n        let selected: WebUiRadio | undefined\n        for (const item of this.querySelectorAll<WebUiRadio>('web-ui-radio')) {\n          if (item.value !== value) continue\n          if (!selected) selected = item\n          if (item.checked) {\n            selected = item\n            break\n          }\n        }\n        return radio === selected\n      },\n      getNextValue: (radio, value) => (radio.checked ? radio.value : value),\n      valuesEqual: (a, b) => a === b,\n      copyValue: value => value,\n      setItemSelected: (radio, selected) => {\n        radio.checked = selected\n      },\n      // 点击同值成员时 value 不变，仍需把选中态收到被点击的那一项\n      resyncOnUnchangedValue: clicked => {\n        for (const radio of this.querySelectorAll<WebUiRadio>('web-ui-radio')) {\n          radio.checked = radio === clicked\n        }\n      },\n      dispatchValueChange: () => {\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n      }\n    }).make(),\n    // 每次成员集合同步后把组值剪到现存成员范围内\n    { afterSync: () => this._pruneRemovedMembers() }\n  )\n\n  /**\n   * 成员被移除后，组值若仍指向它就成了幽灵值（表单照旧提交一个不存在的 option）。\n   * 剪枝条件是「曾经出现在成员里、现在消失了」——不能用「不在现存成员里就剪」，\n   * 否则 v-if / 异步渲染时先于成员到达的合法组值会被误清。\n   */\n  private _knownMemberValues = new Set<string>()\n\n  private _pruneRemovedMembers() {\n    if (!this._value) return\n    const items = [...this.querySelectorAll<WebUiRadio>('web-ui-radio')]\n    if (items.length === 0) return\n    const alive = new Set(items.map(item => item.value))\n    if (!alive.has(this._value) && this._knownMemberValues.has(this._value)) this.value = ''\n    this._knownMemberValues = alive\n  }\n\n  get value(): string {\n    return this._value\n  }\n\n  set value(v: string) {\n    const old = this._value\n    this._value = v\n    this._formAssociation.sync()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formAssociation.isFormDisabled()\n  }\n\n  private readonly _formAssociation = defineFormAssociation<string>({\n    host: this,\n    initialize: () => {\n      const attributeValue = this.getAttribute('value')\n      if (attributeValue !== null) this.value = attributeValue\n    },\n    getState: () => this._value,\n    setState: value => {\n      this.value = value\n    },\n    getFormValue: () => (this.name && this._value ? this._value : null),\n    getFormState: () => this._value,\n    restoreState: state => {\n      if (typeof state === 'string') this.value = state\n    },\n    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  override formDisabledCallback(disabled: boolean) {\n    this._formAssociation.setDisabled(disabled)\n    this._groupController.sync()\n  }\n\n  private _syncValidity() {\n    const internals = this._formAssociation.getInternals()\n    if (!internals || typeof internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value) {\n      internals.setValidity({})\n      return\n    }\n    internals.setValidity({ valueMissing: true }, 'Select an option')\n  }\n\n  override render() {\n    return html`<div class=\"wui-radio-group\"><slot></slot></div>`\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-radio-group': WebUiRadioGroup\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport type { WebUiRadio } from '../radio'\nimport { activateRadio, focusRadio, isRadioDisabled } from '../radio/interaction'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\nconst RADIO_GROUP_KEYS = {\n  next: ['ArrowRight', 'ArrowDown'],\n  previous: ['ArrowLeft', 'ArrowUp']\n} as const\nconst AVAILABILITY_ATTRIBUTES = ['hidden', 'inert', 'aria-hidden', 'style', 'class', 'open', 'popover', 'slot'] as const\n\ninterface DocumentAvailabilityObserver {\n  readonly subscribers: Set<() => void>\n  readonly mediaQueries: Map<string, MediaQueryList>\n  readonly observer: MutationObserver\n  readonly view: Window\n  readonly notify: () => void\n  readonly refreshMediaQueries: () => void\n  readonly handleStylesheetLoad: (event: Event) => void\n  readonly handleTabKeydown: (event: KeyboardEvent) => void\n}\n\nconst documentAvailabilityObservers = new WeakMap<Document, DocumentAvailabilityObserver>()\n\nfunction subscribeToDocumentAvailability(document: Document, callback: () => void): () => void {\n  const view = document.defaultView\n  if (!view) return () => {}\n\n  let state = documentAvailabilityObservers.get(document)\n  if (!state) {\n    const subscribers = new Set<() => void>()\n    const mediaQueries = new Map<string, MediaQueryList>()\n    const notify = () => subscribers.forEach(subscriber => subscriber())\n    const subscribeMediaQuery = (query: string) => {\n      const normalized = query.trim()\n      if (!normalized || normalized === 'all' || mediaQueries.has(normalized)) return\n      try {\n        const mediaQuery = view.matchMedia(normalized)\n        mediaQuery.addEventListener('change', notify)\n        mediaQueries.set(normalized, mediaQuery)\n      } catch {\n        // Invalid or unsupported media syntax cannot change computed visibility.\n      }\n    }\n    const scanRules = (rules: CSSRuleList, visited = new Set<CSSStyleSheet>()) => {\n      for (const rule of Array.from(rules)) {\n        if (rule instanceof CSSMediaRule) subscribeMediaQuery(rule.conditionText)\n        if (rule instanceof CSSImportRule && rule.styleSheet && !visited.has(rule.styleSheet)) {\n          visited.add(rule.styleSheet)\n          subscribeMediaQuery(rule.media.mediaText)\n          try {\n            scanRules(rule.styleSheet.cssRules, visited)\n          } catch {\n            // Cross-origin stylesheets may hide their rules from the current document.\n          }\n        }\n        if ('cssRules' in rule) {\n          try {\n            scanRules((rule as CSSGroupingRule).cssRules, visited)\n          } catch {\n            // Some grouping rules expose inaccessible imported rules.\n          }\n        }\n      }\n    }\n    const refreshMediaQueries = () => {\n      for (const mediaQuery of mediaQueries.values()) mediaQuery.removeEventListener('change', notify)\n      mediaQueries.clear()\n      for (const styleSheet of Array.from(document.styleSheets)) {\n        subscribeMediaQuery(styleSheet.media.mediaText)\n        try {\n          scanRules(styleSheet.cssRules, new Set([styleSheet]))\n        } catch {\n          // Cross-origin stylesheets may hide their rules from the current document.\n        }\n      }\n    }\n    const handleStylesheetLoad = (event: Event) => {\n      const target = event.target\n      if (!(target instanceof HTMLLinkElement) || !target.relList.contains('stylesheet')) return\n      refreshMediaQueries()\n      notify()\n    }\n    // CSSStyleSheet has no rule-change event. Refresh before the browser's Tab\n    // default action so CSSOM-only visibility changes cannot strand the group.\n    const handleTabKeydown = (event: KeyboardEvent) => {\n      if (event.key === 'Tab') {\n        refreshMediaQueries()\n        notify()\n      }\n    }\n    const observer = new MutationObserver(() => {\n      refreshMediaQueries()\n      notify()\n    })\n    const styleRoot = document.head ?? document.documentElement\n    observer.observe(styleRoot, { attributes: true, childList: true, characterData: true, subtree: true })\n    view.addEventListener('resize', notify)\n    document.addEventListener('load', handleStylesheetLoad, true)\n    document.addEventListener('keydown', handleTabKeydown, true)\n    state = {\n      subscribers,\n      mediaQueries,\n      observer,\n      view,\n      notify,\n      refreshMediaQueries,\n      handleStylesheetLoad,\n      handleTabKeydown\n    }\n    documentAvailabilityObservers.set(document, state)\n    refreshMediaQueries()\n  }\n\n  state.subscribers.add(callback)\n  return () => {\n    const current = documentAvailabilityObservers.get(document)\n    if (!current) return\n    current.subscribers.delete(callback)\n    if (current.subscribers.size > 0) return\n    current.observer.disconnect()\n    current.view.removeEventListener('resize', current.notify)\n    document.removeEventListener('load', current.handleStylesheetLoad, true)\n    document.removeEventListener('keydown', current.handleTabKeydown, true)\n    for (const mediaQuery of current.mediaQueries.values()) mediaQuery.removeEventListener('change', current.notify)\n    current.mediaQueries.clear()\n    documentAvailabilityObservers.delete(document)\n  }\n}\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends FormAssociated(LitElement) {\n  static override styles = unsafeCSS(style)\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n  @property({ type: String, attribute: 'aria-label', reflect: true }) override ariaLabel: string | null = null\n  @property({ type: String, attribute: 'aria-labelledby', reflect: true }) ariaLabelledby: string | undefined\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'vertical')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'vertical'\n\n  @state() private _value = ''\n\n  private _getRadios(): WebUiRadio[] {\n    return [...this.querySelectorAll<WebUiRadio>('web-ui-radio')].filter(\n      radio => radio.closest('web-ui-radio-group') === this\n    )\n  }\n\n  private _findSelectedRadio(radios: readonly WebUiRadio[], value: string): WebUiRadio | undefined {\n    if (!value) return undefined\n    const matching = radios.filter(radio => radio.value === value)\n    return matching.find(radio => radio.checked) ?? matching[0]\n  }\n\n  private _getRovingTabStop(radio: WebUiRadio, radios: readonly WebUiRadio[], value: string): boolean {\n    if (this._isDisabled || this._isRadioUnavailable(radio)) return false\n    const enabled = radios.filter(item => !this._isRadioUnavailable(item))\n    const selected = enabled.find(item => item.checked) ?? this._findSelectedRadio(enabled, value)\n    return radio === (selected ?? enabled[0])\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (this._isDisabled || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return\n    const target = event\n      .composedPath()\n      .find((node): node is WebUiRadio => node instanceof HTMLElement && node.matches('web-ui-radio'))\n    if (!target || target.closest('web-ui-radio-group') !== this) return\n\n    const radios = this._getRadios()\n    const targetIndex = radios.indexOf(target)\n    if (targetIndex < 0) return\n\n    const enabledRadios = radios.filter(radio => !this._isRadioUnavailable(radio))\n    if (enabledRadios.length === 0) return\n    const currentIndex = enabledRadios.indexOf(target)\n\n    let delta = RADIO_GROUP_KEYS.next.some(key => event.key === key)\n      ? 1\n      : RADIO_GROUP_KEYS.previous.some(key => event.key === key)\n        ? -1\n        : 0\n    if (\n      delta &&\n      this.direction === 'horizontal' &&\n      (event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&\n      getComputedStyle(this).direction === 'rtl'\n    ) {\n      delta *= -1\n    }\n    let nextRadio: WebUiRadio | undefined\n    if (delta) {\n      if (currentIndex >= 0) {\n        nextRadio = enabledRadios[(currentIndex + delta + enabledRadios.length) % enabledRadios.length]\n      } else {\n        for (let step = 1; step <= radios.length; step++) {\n          const candidateIndex = (((targetIndex + delta * step) % radios.length) + radios.length) % radios.length\n          const candidate = radios[candidateIndex]\n          if (candidate && !this._isRadioUnavailable(candidate)) {\n            nextRadio = candidate\n            break\n          }\n        }\n      }\n    } else if (event.key === 'Home') {\n      nextRadio = enabledRadios[0]\n    } else if (event.key === 'End') {\n      nextRadio = enabledRadios[enabledRadios.length - 1]\n    } else {\n      return\n    }\n\n    if (!nextRadio) return\n    event.preventDefault()\n    focusRadio(nextRadio)\n    if (!nextRadio.checked) activateRadio(nextRadio)\n  }\n\n  private readonly _groupController = new GroupController(\n    this,\n    defineGroupCoordinator<WebUiRadio, string>({\n      host: this,\n      getItems: () => this._getRadios(),\n      getValue: () => this._value,\n      setValue: value => {\n        this.value = value\n      },\n      getDisabled: () => this._isDisabled,\n      isItem: (target): target is WebUiRadio =>\n        target instanceof HTMLElement &&\n        target.matches('web-ui-radio') &&\n        target.closest('web-ui-radio-group') === this,\n      // 选中判定按元素身份而非 value 相等：value 重复时按值比较会把多个成员\n      // 同时标为选中，破坏单选不变式。重复值取第一个匹配（或已选中的那个，\n      // 避免每次 sync 把选中项跳回第一个）。\n      isItemSelected: (radio, value) => radio === this._findSelectedRadio(this._getRadios(), value),\n      getItemSelected: radio => radio.checked,\n      getNextValue: (radio, value) => (radio.checked ? radio.value : value),\n      valuesEqual: (a, b) => a === b,\n      copyValue: value => value,\n      setItemSelected: (radio, selected) => {\n        radio.checked = selected\n      },\n      getRovingTabStop: (radio, _index, radios, value) => this._getRovingTabStop(radio, radios, value),\n      handleKeyDown: event => this._handleKeyDown(event),\n      // 点击同值成员时 value 不变，仍需把选中态收到被点击的那一项\n      resyncOnUnchangedValue: clicked => {\n        for (const radio of this._getRadios()) {\n          radio.checked = radio === clicked\n        }\n        this._groupController.sync()\n      },\n      dispatchValueChange: () => {\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n      }\n    }).make(),\n    // 每次成员集合同步后把组值剪到现存成员范围内\n    {\n      observeAttributes: ['disabled', ...AVAILABILITY_ATTRIBUTES],\n      afterSync: () => this._pruneRemovedMembers()\n    }\n  )\n\n  /**\n   * 成员被移除后，组值若仍指向它就成了幽灵值（表单照旧提交一个不存在的 option）。\n   * 剪枝条件是「曾经出现在成员里、现在消失了」——不能用「不在现存成员里就剪」，\n   * 否则 v-if / 异步渲染时先于成员到达的合法组值会被误清。\n   */\n  private _knownMemberValues = new Set<string>()\n  private _availabilityObserver: MutationObserver | null = null\n  private _availabilityResizeObserver: ResizeObserver | null = null\n  private _availabilityToggleTargets = new Set<Element>()\n  private _availabilitySlotTargets = new Set<Element>()\n  private _unsubscribeDocumentAvailability: (() => void) | null = null\n  private readonly _handleAvailabilityToggle = () => this._groupController.sync()\n  private readonly _handleAvailabilitySlotChange = () => {\n    this._observeAvailabilityAncestors()\n    this._groupController.sync()\n  }\n\n  private _getComposedAncestors(element: Element): Element[] {\n    const ancestors: Element[] = []\n    const visited = new Set<Element>()\n    let current: Element | null = element\n\n    while (current && !visited.has(current)) {\n      visited.add(current)\n      ancestors.push(current)\n      const root = current.getRootNode()\n      current = current.assignedSlot ?? current.parentElement ?? (root instanceof ShadowRoot ? root.host : null)\n    }\n\n    return ancestors\n  }\n\n  private _pruneRemovedMembers() {\n    if (!this._value) return\n    const items = this._getRadios()\n    if (items.length === 0) return\n    const alive = new Set(items.map(item => item.value))\n    if (!alive.has(this._value) && this._knownMemberValues.has(this._value)) this.value = ''\n    this._knownMemberValues = alive\n  }\n\n  get value(): string {\n    return this._value\n  }\n\n  set value(v: string) {\n    const old = this._value\n    this._value = v\n    this._formAssociation.sync()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formAssociation.isFormDisabled()\n  }\n\n  private readonly _formAssociation = defineFormAssociation<string>({\n    host: this,\n    initialize: () => {\n      const attributeValue = this.getAttribute('value')\n      if (attributeValue !== null) this.value = attributeValue\n    },\n    getState: () => this._value,\n    setState: value => {\n      this.value = value\n    },\n    getFormValue: () => (this.name && this._value ? this._value : null),\n    getFormState: () => this._value,\n    restoreState: state => {\n      if (typeof state === 'string') this.value = state\n    },\n    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  override connectedCallback() {\n    this._syncHostSemantics()\n    this._observeAvailabilityAncestors()\n    this._unsubscribeDocumentAvailability?.()\n    this._unsubscribeDocumentAvailability = subscribeToDocumentAvailability(this.ownerDocument, () =>\n      this._groupController.sync()\n    )\n    super.connectedCallback()\n  }\n\n  override disconnectedCallback() {\n    this._availabilityObserver?.disconnect()\n    this._availabilityObserver = null\n    this._availabilityResizeObserver?.disconnect()\n    this._availabilityResizeObserver = null\n    this._syncAvailabilityToggleTargets([])\n    this._syncAvailabilitySlotTargets([])\n    this._unsubscribeDocumentAvailability?.()\n    this._unsubscribeDocumentAvailability = null\n    super.disconnectedCallback()\n  }\n\n  override updated() {\n    this._syncHostSemantics()\n  }\n\n  private _syncHostSemantics() {\n    this.setAttribute('role', 'radiogroup')\n    this.setAttribute('aria-orientation', this.direction)\n    this.setAttribute('aria-disabled', String(this._isDisabled))\n    this.setAttribute('aria-required', String(this.required))\n  }\n\n  private _isRadioUnavailable(radio: WebUiRadio) {\n    if (isRadioDisabled(radio) || radio.matches(':disabled')) return true\n\n    const ancestors = this._getComposedAncestors(radio)\n    const isInVisibleSummary = (details: Element) => {\n      const summary = [...details.children].find(child => child.localName === 'summary')\n      return summary !== undefined && ancestors.includes(summary)\n    }\n    if (\n      ancestors.some(\n        element =>\n          element.hasAttribute('hidden') ||\n          element.hasAttribute('inert') ||\n          element.getAttribute('aria-hidden')?.toLowerCase() === 'true' ||\n          (element.localName === 'details' && !element.hasAttribute('open') && !isInVisibleSummary(element))\n      )\n    )\n      return true\n\n    const view = radio.ownerDocument.defaultView\n    if (!view) return false\n    const radioVisibility = view.getComputedStyle(radio).visibility\n    if (radioVisibility === 'hidden' || radioVisibility === 'collapse') return true\n\n    for (const element of ancestors) {\n      const style = view.getComputedStyle(element)\n      if (style.display === 'none' || style.getPropertyValue('content-visibility') === 'hidden') {\n        return true\n      }\n    }\n    return false\n  }\n\n  private _observeAvailabilityAncestors() {\n    this._availabilityObserver?.disconnect()\n    this._availabilityObserver = null\n    this._availabilityResizeObserver?.disconnect()\n    this._availabilityResizeObserver = null\n\n    const ancestors = this._getComposedAncestors(this)\n    this._syncAvailabilityToggleTargets(ancestors)\n    this._syncAvailabilitySlotTargets(ancestors)\n    if (ancestors.length === 0) return\n\n    this._availabilityObserver = new MutationObserver(records => {\n      if (records.some(record => record.attributeName === 'popover' || record.attributeName === 'slot')) {\n        this._observeAvailabilityAncestors()\n      }\n      this._groupController.sync()\n    })\n    for (const ancestor of ancestors) {\n      this._availabilityObserver.observe(ancestor, {\n        attributes: true,\n        attributeFilter: [...AVAILABILITY_ATTRIBUTES]\n      })\n    }\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this._availabilityResizeObserver = new ResizeObserver(() => this._groupController.sync())\n      for (const ancestor of ancestors) this._availabilityResizeObserver.observe(ancestor)\n    }\n  }\n\n  private _syncAvailabilityToggleTargets(ancestors: readonly Element[]) {\n    for (const target of this._availabilityToggleTargets) {\n      target.removeEventListener('toggle', this._handleAvailabilityToggle)\n    }\n    this._availabilityToggleTargets.clear()\n\n    for (const ancestor of ancestors) {\n      if (!ancestor.hasAttribute('popover')) continue\n      ancestor.addEventListener('toggle', this._handleAvailabilityToggle)\n      this._availabilityToggleTargets.add(ancestor)\n    }\n  }\n\n  private _syncAvailabilitySlotTargets(ancestors: readonly Element[]) {\n    for (const target of this._availabilitySlotTargets) {\n      target.removeEventListener('slotchange', this._handleAvailabilitySlotChange)\n    }\n    this._availabilitySlotTargets.clear()\n\n    for (const ancestor of ancestors) {\n      if (ancestor.localName !== 'slot') continue\n      ancestor.addEventListener('slotchange', this._handleAvailabilitySlotChange)\n      this._availabilitySlotTargets.add(ancestor)\n    }\n  }\n\n  override formDisabledCallback(disabled: boolean) {\n    this._formAssociation.setDisabled(disabled)\n    this._groupController.sync()\n  }\n\n  private _syncValidity() {\n    const internals = this._formAssociation.getInternals()\n    if (!internals || typeof internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value) {\n      internals.setValidity({})\n      return\n    }\n    internals.setValidity({ valueMissing: true }, 'Select an option')\n  }\n\n  override render() {\n    return html`<div class=\"wui-radio-group\"><slot></slot></div>`\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-radio-group': WebUiRadioGroup\n  }\n}\n"],"mappings":"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"}

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

@@ -380,6 +380,7 @@ export declare class WebUiSegmented extends WebUiSegmented_base {
     private _settleFlight;
     private _settleRequest;
     private _settleTimer;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly _groupController;
     get value(): string;
@@ -390,6 +391,7 @@ export declare class WebUiSegmented extends WebUiSegmented_base {
     private handlePointerDown;
     private handlePointerUp;
     private handlePointerLeave;
+    private handleKeyDown;
     private readonly _formAssociation;
     private readonly _formAssociationController;
     formDisabledCallback(disabled: boolean): void;

package/dist/components/segmented/index.js

@@ -1,5 +1,5 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../assets/glass.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";
@@ -18,7 +18,13 @@ function S(e) {
 	let t = l(getComputedStyle(e).getPropertyValue("--wui-duration-trigger"));
 	return t === null ? 160 : Math.max(0, t);
 }
-var C = class extends r(m) {
+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;
+}
+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({
 			host: this,
@@ -29,13 +35,22 @@ var C = class extends r(m) {
 			},
 			getDisabled: () => this._isDisabled,
 			isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-segmented-trigger"),
-			isItemSelected: (e, t) => e.value === t,
+			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]);
+			},
+			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;
 			},
+			resyncOnUnchangedValue: (e) => {
+				for (let t of this.querySelectorAll("web-ui-segmented-trigger")) t.checked = t === e;
+				this._groupController.sync(), requestAnimationFrame(() => void this._updateIndicator());
+			},
 			dispatchValueChange: () => {
 				this.dispatchEvent(new Event("input", {
 					bubbles: !0,
@@ -45,7 +60,10 @@ var C = class extends r(m) {
 					composed: !0
 				}));
 			}
-		}).make(), { afterSync: () => requestAnimationFrame(() => void this._updateIndicator()) }), this._formAssociation = a({
+		}).make(), {
+			observeAttributes: ["disabled"],
+			afterSync: () => requestAnimationFrame(() => void this._updateIndicator())
+		}), this._formAssociation = a({
 			host: this,
 			initialize: () => {
 				let e = this.getAttribute("value");
@@ -72,6 +90,13 @@ var C = class extends r(m) {
 		let t = this._variant;
 		this._variant = c(e, x, "inset"), this.requestUpdate("variant", t);
 	}
+	connectedCallback() {
+		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();
+		});
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null, clearTimeout(this._settleTimer), this._settleTimer = void 0;
 	}
@@ -86,13 +111,12 @@ var C = class extends r(m) {
 		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	async _updateIndicator() {
-		let e = this.querySelectorAll("web-ui-segmented-trigger"), t = 0, n = 0;
-		e.forEach((e) => {
-			if (e.value === this._value) {
-				let r = e.getBoundingClientRect(), i = this.getBoundingClientRect();
-				t = r.left - i.left, n = r.width;
-			}
-		}), 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);
+		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;
+		}
+		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 = {};
@@ -108,7 +132,7 @@ var C = class extends r(m) {
 		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 = t.find((e) => e.value === this._value);
+		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;
@@ -149,7 +173,7 @@ var C = class extends r(m) {
 						let e = f(t, v);
 						e !== -1 && n[e] && (i = n[e]);
 					}
-					i.value === this._value ? this._updateIndicator() : (this.value = i.value, this._groupController.sync(), this.dispatchEvent(new Event("input", {
+					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", {
@@ -170,6 +194,37 @@ var C = class extends r(m) {
 	handlePointerLeave() {
 		this._dragGestureHandle?.isDragging() || (this._pressed = !1);
 	}
+	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;
+			}
+			return t;
+		}, s;
+		switch (e.key) {
+			case "ArrowRight":
+				s = o(a);
+				break;
+			case "ArrowLeft":
+				s = o(a === 1 ? -1 : 1);
+				break;
+			case "Home":
+				s = r[0];
+				break;
+			case "End":
+				s = r[r.length - 1];
+				break;
+			default: return;
+		}
+		let c = s.shadowRoot?.querySelector("[role=\"option\"]");
+		c && (e.preventDefault(), c.focus(), (s !== t || !s.checked) && c.click());
+	}
 	formDisabledCallback(e) {
 		this._formAssociation.setDisabled(e), this._groupController.sync();
 	}
@@ -187,6 +242,7 @@ var C = class extends r(m) {
 		})}
         role="listbox"
         aria-orientation="horizontal"
+        @keydown=${this.handleKeyDown}
         @pointerdown=${this.handlePointerDown}
         @pointerup=${this.handlePointerUp}
         @pointercancel=${this.handlePointerUp}
@@ -201,17 +257,17 @@ var C = class extends r(m) {
 e([v({
 	type: String,
 	reflect: !0
-})], C.prototype, "name", void 0), e([v({
+})], w.prototype, "name", void 0), e([v({
 	type: String,
 	reflect: !0
-})], C.prototype, "variant", null), e([v({
+})], w.prototype, "variant", null), e([v({
 	type: Boolean,
 	reflect: !0
-})], C.prototype, "disabled", void 0), e([v({
+})], w.prototype, "disabled", void 0), e([v({
 	type: Boolean,
 	reflect: !0
-})], C.prototype, "required", void 0), e([y()], C.prototype, "_value", void 0), e([y()], C.prototype, "_indicatorReady", void 0), e([y()], C.prototype, "_settling", void 0), e([y()], C.prototype, "_pressed", void 0), e([y()], C.prototype, "_isDragging", void 0), C = e([_("web-ui-segmented")], C);
+})], 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 { C as WebUiSegmented };
+export { w as WebUiSegmented };
 
 //# sourceMappingURL=index.js.map