@greypan/web-ui 3.0.0 → 4.0.0

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 type { WebUiRadio } from '../radio'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\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  private _internals?: ElementInternals\n  @state() private _value = ''\n  @state() private _formDisabled = false\n  private _initialValue = ''\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._syncFormValue()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (!this._internals) this._internals = this.attachInternals()\n    const attributeValue = this.getAttribute('value')\n    if (attributeValue !== null) this.value = attributeValue\n    this._initialValue = this._value\n    // group-managed 子项以 bubbles:false 派发 change，须用 capture 相位才能观察到子项事件，\n    // 同时该事件不会冒泡到 group 外部的同名监听器\n    this.addEventListener('change', this._handleChildChange, true)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('change', this._handleChildChange, true)\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('disabled') || changed.has('_formDisabled')) this._syncValueToChildren()\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  formResetCallback() {\n    this.value = this._initialValue\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(this.name && this._value ? this._value : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value) this._internals.setValidity({})\n    else this._internals.setValidity({ valueMissing: true }, '请选择一项')\n  }\n\n  private _syncValueToChildren() {\n    this.querySelectorAll<WebUiRadio>('web-ui-radio').forEach(radio => {\n      radio.checked = radio.value === this._value\n      radio.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-radio')) return\n\n    const radio = target as WebUiRadio\n    if (!radio.checked || radio.value === this._value) return\n\n    this.value = radio.value\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private _handleSlotChange() {\n    this._syncValueToChildren()\n  }\n\n  override render() {\n    return html`<div class=\"wui-radio-group\"><slot @slotchange=${this._handleSlotChange}></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 { defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\n\nimport type { WebUiRadio } from '../radio'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\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  @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      isItemSelected: (radio, value) => radio.value === value,\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      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  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  formResetCallback() {\n    this._formAssociation.reset()\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formAssociation.setDisabled(disabled)\n    this._groupController.sync()\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this._formAssociation.restore(state)\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 }, '请选择一项')\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

@@ -1,27 +1,22 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 export declare class WebUiSegmented extends LitElement {
     static styles: import('lit').CSSResult[];
     static formAssociated: boolean;
     name: string;
     disabled: boolean;
     required: boolean;
-    private _internals?;
     private _value;
-    private _formDisabled;
-    private _initialValue;
+    private _indicatorReady;
+    private readonly _groupController;
     get value(): string;
     set value(v: string);
-    private readonly childObserver;
-    private _syncPropsToChildren;
     private get _isDisabled();
     private _updateIndicator;
-    updated(props: PropertyValues): void;
-    connectedCallback(): void;
-    firstUpdated(): void;
-    disconnectedCallback(): void;
-    private _handleChildChange;
+    private readonly _formAssociation;
+    private readonly _formAssociationController;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     render(): import('lit').TemplateResult<1>;
     readonly $events: {
         input: Event;

package/dist/components/segmented/index.js

@@ -1,18 +1,58 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
-import n from "./style.js";
-import { LitElement as r, html as i, unsafeCSS as a } from "lit";
-import { customElement as o, property as s, state as c } from "lit/decorators.js";
-import { classMap as l } from "lit/directives/class-map.js";
+import { 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 o from "./style.js";
+import { LitElement as s, html as c, unsafeCSS as l } from "lit";
+import { customElement as u, property as d, state as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
 //#region src/components/segmented/index.ts
-var u = class extends r {
+var m = class extends s {
 	constructor(...e) {
-		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = "", this._formDisabled = !1, this._initialValue = "", this.childObserver = new MutationObserver(() => {
-			this._syncPropsToChildren(), requestAnimationFrame(() => this._updateIndicator());
-		});
+		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = "", this._indicatorReady = !1, this._groupController = new i(this, a({
+			host: this,
+			getItems: () => [...this.querySelectorAll("web-ui-segmented-trigger")],
+			getValue: () => this._value,
+			setValue: (e) => {
+				this.value = e;
+			},
+			getDisabled: () => this._isDisabled,
+			isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-segmented-trigger"),
+			isItemSelected: (e, t) => e.value === t,
+			getNextValue: (e, t) => e.checked ? e.value : t,
+			valuesEqual: (e, t) => e === t,
+			copyValue: (e) => e,
+			setItemSelected: (e, t) => {
+				e.checked = t;
+			},
+			dispatchValueChange: () => {
+				this.dispatchEvent(new Event("input", {
+					bubbles: !0,
+					composed: !0
+				})), this.dispatchEvent(new Event("change", {
+					bubbles: !0,
+					composed: !0
+				}));
+			}
+		}).make(), { afterSync: () => requestAnimationFrame(() => this._updateIndicator()) }), this._formAssociation = r({
+			host: this,
+			initialize: () => {
+				let e = this.getAttribute("value");
+				e !== null && this._value === "" && (this._value = e);
+			},
+			getState: () => this._value,
+			setState: (e) => {
+				this.value = e;
+			},
+			getFormValue: () => this.name && this._value ? this._value : null,
+			getFormState: () => this._value,
+			restoreState: (e) => {
+				typeof e == "string" && (this.value = e);
+			}
+		}).make(), this._formAssociationController = new n(this, this._formAssociation);
 	}
 	static {
-		this.styles = [a(t), a(n)];
+		this.styles = [l(t), l(o)];
 	}
 	static {
 		this.formAssociated = !0;
@@ -22,15 +62,10 @@ var u = class extends r {
 	}
 	set value(e) {
 		let t = this._value;
-		this._value = e, this._internals?.setFormValue?.(e), this.requestUpdate("value", t);
-	}
-	_syncPropsToChildren() {
-		this.querySelectorAll("web-ui-segmented-trigger").forEach((e) => {
-			e.checked = e.value === this._value, e.setGroupDisabled(this._isDisabled);
-		});
+		this._value = e, this._formAssociation.sync(), this.requestUpdate("value", t);
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled;
+		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	_updateIndicator() {
 		let e = this.querySelectorAll("web-ui-segmented-trigger"), t = 0, n = 0;
@@ -39,47 +74,24 @@ var u = class extends r {
 				let r = e.getBoundingClientRect(), i = this.getBoundingClientRect();
 				t = r.left - i.left, n = r.width;
 			}
-		}), this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`);
-	}
-	updated(e) {
-		(e.has("value") || e.has("disabled") || e.has("_formDisabled")) && (this._syncPropsToChildren(), requestAnimationFrame(() => this._updateIndicator()));
-	}
-	connectedCallback() {
-		super.connectedCallback(), this._internals = this.attachInternals();
-		let e = this.getAttribute("value");
-		e !== null && this._value === "" && (this._value = e), this._initialValue = e ?? "", this._internals?.setFormValue?.(this._value), this.childObserver.observe(this, { childList: !0 }), this.addEventListener("change", this._handleChildChange, !0);
-	}
-	firstUpdated() {
-		this._syncPropsToChildren(), requestAnimationFrame(() => this._updateIndicator());
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this.childObserver.disconnect(), this.removeEventListener("change", this._handleChildChange, !0);
-	}
-	_handleChildChange(e) {
-		if (this._isDisabled) return;
-		let t = e.target;
-		if (!t.matches?.("web-ui-segmented-trigger")) return;
-		let n = t;
-		n.value !== this._value && (this.value = n.value, this.dispatchEvent(new Event("input", {
-			bubbles: !0,
-			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		})));
+		}), this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`), this._indicatorReady ||= !0;
 	}
 	formResetCallback() {
-		this.value = this._initialValue;
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
+		this._formAssociation.setDisabled(e), this._groupController.sync();
+	}
+	formStateRestoreCallback(e) {
+		this._formAssociation.restore(e);
 	}
 	render() {
-		return i`
+		return c`
       <div
-        class=${l({
+        class=${p({
 			"wui-segmented": !0,
-			"is-disabled": this._isDisabled
+			"is-disabled": this._isDisabled,
+			"is-indicator-ready": this._indicatorReady
 		})}
         role="listbox"
         aria-orientation="horizontal"
@@ -90,17 +102,17 @@ var u = class extends r {
     `;
 	}
 };
-e([s({
+e([d({
 	type: String,
 	reflect: !0
-})], u.prototype, "name", void 0), e([s({
+})], m.prototype, "name", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "disabled", void 0), e([s({
+})], m.prototype, "disabled", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "required", void 0), e([c()], u.prototype, "_value", void 0), e([c()], u.prototype, "_formDisabled", void 0), u = e([o("web-ui-segmented")], u);
+})], m.prototype, "required", void 0), e([f()], m.prototype, "_value", void 0), e([f()], m.prototype, "_indicatorReady", void 0), m = e([u("web-ui-segmented")], m);
 //#endregion
-export { u as WebUiSegmented };
+export { m as WebUiSegmented };
 
 //# sourceMappingURL=index.js.map

package/dist/components/segmented/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented/index.ts"],"sourcesContent":["import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\n\nimport type { WebUiSegmentedTrigger } from '../segmented-trigger'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented')\nexport class WebUiSegmented extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n  static formAssociated = true\n\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  private _internals?: ElementInternals\n  @state() private _value = ''\n  @state() private _formDisabled = false\n  private _initialValue = ''\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._internals?.setFormValue?.(v)\n    this.requestUpdate('value', old)\n  }\n\n  private readonly childObserver = new MutationObserver(() => {\n    this._syncPropsToChildren()\n    requestAnimationFrame(() => this._updateIndicator())\n  })\n\n  private _syncPropsToChildren() {\n    this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger').forEach(trigger => {\n      trigger.checked = trigger.value === this._value\n      trigger.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  private _updateIndicator() {\n    const triggers = this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')\n    let left = 0\n    let width = 0\n\n    triggers.forEach(trigger => {\n      if (trigger.value === this._value) {\n        const triggerRect = trigger.getBoundingClientRect()\n        const groupRect = this.getBoundingClientRect()\n        left = triggerRect.left - groupRect.left\n        width = triggerRect.width\n      }\n    })\n\n    this.style.setProperty('--indicator-left', `${left}px`)\n    this.style.setProperty('--indicator-width', `${width}px`)\n  }\n\n  override updated(props: PropertyValues) {\n    if (props.has('value') || props.has('disabled') || props.has('_formDisabled')) {\n      this._syncPropsToChildren()\n      requestAnimationFrame(() => this._updateIndicator())\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._internals = this.attachInternals()\n\n    // 仅当属性在连接前未被 property setter 设值时，才从 attribute 读取初始值\n    const attrValue = this.getAttribute('value')\n    if (attrValue !== null && this._value === '') {\n      this._value = attrValue\n    }\n    this._initialValue = attrValue ?? ''\n    this._internals?.setFormValue?.(this._value)\n\n    this.childObserver.observe(this, { childList: true })\n    // group-managed 子项以 bubbles:false 派发 change，须用 capture 相位才能观察到子项事件，\n    // 同时该事件不会冒泡到 segmented 外部的同名监听器\n    this.addEventListener('change', this._handleChildChange, true)\n  }\n\n  override firstUpdated() {\n    this._syncPropsToChildren()\n    requestAnimationFrame(() => this._updateIndicator())\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.childObserver.disconnect()\n    this.removeEventListener('change', this._handleChildChange, true)\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-segmented-trigger')) return\n    const trigger = target as WebUiSegmentedTrigger\n    if (trigger.value === this._value) return\n\n    this.value = trigger.value\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  formResetCallback() {\n    this.value = this._initialValue\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({ 'wui-segmented': true, 'is-disabled': this._isDisabled })}\n        role=\"listbox\"\n        aria-orientation=\"horizontal\"\n      >\n        <span class=\"wui-segmented-indicator wui-glass\"></span>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented': WebUiSegmented\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\n\nimport type { WebUiSegmentedTrigger } from '../segmented-trigger'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented')\nexport class WebUiSegmented extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n  static formAssociated = true\n\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  @state() private _value = ''\n  @state() private _indicatorReady = false\n\n  private readonly _groupController = new GroupController(\n    this,\n    defineGroupCoordinator<WebUiSegmentedTrigger, string>({\n      host: this,\n      getItems: () => [...this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')],\n      getValue: () => this._value,\n      setValue: value => {\n        this.value = value\n      },\n      getDisabled: () => this._isDisabled,\n      isItem: (target): target is WebUiSegmentedTrigger =>\n        target instanceof HTMLElement && target.matches('web-ui-segmented-trigger'),\n      isItemSelected: (trigger, value) => trigger.value === value,\n      getNextValue: (trigger, value) => (trigger.checked ? trigger.value : value),\n      valuesEqual: (a, b) => a === b,\n      copyValue: value => value,\n      setItemSelected: (trigger, selected) => {\n        trigger.checked = selected\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    { afterSync: () => requestAnimationFrame(() => this._updateIndicator()) }\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 _updateIndicator() {\n    const triggers = this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')\n    let left = 0\n    let width = 0\n\n    triggers.forEach(trigger => {\n      if (trigger.value === this._value) {\n        const triggerRect = trigger.getBoundingClientRect()\n        const groupRect = this.getBoundingClientRect()\n        left = triggerRect.left - groupRect.left\n        width = triggerRect.width\n      }\n    })\n\n    this.style.setProperty('--indicator-left', `${left}px`)\n    this.style.setProperty('--indicator-width', `${width}px`)\n\n    // 首帧只完成定位；若一开始就启用 left/width transition，indicator 会从 0 滑到初始选项。\n    if (!this._indicatorReady) this._indicatorReady = true\n  }\n\n  private readonly _formAssociation = defineFormAssociation<string>({\n    host: this,\n    initialize: () => {\n      const attrValue = this.getAttribute('value')\n      if (attrValue !== null && this._value === '') this._value = attrValue\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  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  formResetCallback() {\n    this._formAssociation.reset()\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formAssociation.setDisabled(disabled)\n    this._groupController.sync()\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this._formAssociation.restore(state)\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          'wui-segmented': true,\n          'is-disabled': this._isDisabled,\n          'is-indicator-ready': this._indicatorReady\n        })}\n        role=\"listbox\"\n        aria-orientation=\"horizontal\"\n      >\n        <span class=\"wui-segmented-indicator wui-glass\"></span>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented': WebUiSegmented\n  }\n}\n"],"mappings":"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"}

package/dist/components/segmented/style.js

@@ -1,5 +1,5 @@
 //#region src/components/segmented/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-block}.wui-segmented{background-color:var(--wui-color-surface-raised-mid,#dfdfdf);border-radius:2147483647px;align-items:stretch;padding:4px;display:inline-flex;position:relative}.wui-segmented.is-disabled{cursor:not-allowed;opacity:.4}.wui-segmented.is-disabled .wui-segmented-trigger.is-disabled{opacity:1}.wui-segmented-indicator{z-index:0;top:3px;bottom:3px;left:var(--indicator-left,0);width:var(--indicator-width,0);background-color:var(--wui-color-surface-glass,#fafafa8c);transition:left var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1)), width var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1));border-radius:2147483647px;position:absolute}";
+var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-block}.wui-segmented{background-color:var(--wui-color-surface-control,#dfdfdf);border-radius:2147483647px;align-items:stretch;padding:4px;display:inline-flex;position:relative}.wui-segmented.is-disabled{cursor:not-allowed;opacity:.4}.wui-segmented.is-disabled .wui-segmented-trigger.is-disabled{opacity:1}.wui-segmented-indicator{z-index:0;top:3px;bottom:3px;left:var(--indicator-left,0);width:var(--indicator-width,0);background-color:var(--wui-color-surface-glass,#fafafa57);border-radius:2147483647px;position:absolute}.is-indicator-ready .wui-segmented-indicator{transition:left var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1)), width var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1))}";
 //#endregion
 export { e as default };
 

package/dist/components/segmented/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  user-select: none;\n  display: inline-block;\n}\n\n.wui-segmented {\n  position: relative;\n\n  display: inline-flex;\n  align-items: stretch;\n\n  padding: 4px;\n  border-radius: calc(infinity * 1px);\n\n  background-color: var(--wui-color-surface-raised-mid, #dfdfdf);\n}\n\n.wui-segmented.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.wui-segmented.is-disabled .wui-segmented-trigger.is-disabled {\n  opacity: 1;\n}\n\n.wui-segmented-indicator {\n  position: absolute;\n  z-index: 0;\n  top: 3px;\n  bottom: 3px;\n  left: var(--indicator-left, 0);\n\n  width: var(--indicator-width, 0);\n  border-radius: calc(infinity * 1px);\n\n  background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.55));\n\n  transition:\n    left var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n    width var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1));\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  user-select: none;\n  display: inline-block;\n}\n\n.wui-segmented {\n  position: relative;\n\n  display: inline-flex;\n  align-items: stretch;\n\n  padding: 4px;\n  border-radius: calc(infinity * 1px);\n\n  background-color: var(--wui-color-surface-control, #dfdfdf);\n}\n\n.wui-segmented.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.wui-segmented.is-disabled .wui-segmented-trigger.is-disabled {\n  opacity: 1;\n}\n\n.wui-segmented-indicator {\n  position: absolute;\n  z-index: 0;\n  top: 3px;\n  bottom: 3px;\n  left: var(--indicator-left, 0);\n\n  width: var(--indicator-width, 0);\n  border-radius: calc(infinity * 1px);\n\n  background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\n\n  /* transition 只在首帧定位后启用，避免组件进入视口时触发初始化动画 */\n  .is-indicator-ready & {\n    transition:\n      left var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n      width var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1));\n  }\n}\n"],"mappings":""}

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

@@ -4,10 +4,9 @@ export declare class WebUiSegmentedTrigger extends LitElement {
     value: string;
     checked: boolean;
     disabled: boolean;
-    private _groupDisabled;
+    private readonly _groupManagement;
     private get _isDisabled();
     private get _isManagedByGroup();
-    setGroupDisabled(disabled: boolean): void;
     private handleClick;
     private handleKeyDown;
     render(): import('lit').TemplateResult<1>;

package/dist/components/segmented-trigger/index.js

@@ -1,24 +1,22 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
-import t from "./style.js";
-import { LitElement as n, html as r, unsafeCSS as i } from "lit";
-import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import { defineGroupManaged as t } from "../../shared/group-management/index.js";
+import n from "./style.js";
+import { LitElement as r, html as i, unsafeCSS as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 //#region src/components/segmented-trigger/index.ts
-var l = class extends n {
+var l = class extends r {
 	constructor(...e) {
-		super(...e), this.value = "", this.checked = !1, this.disabled = !1, this._groupDisabled = !1;
+		super(...e), this.value = "", this.checked = !1, this.disabled = !1, this._groupManagement = t(this, { requestUpdate: () => this.requestUpdate() }).make();
 	}
 	static {
-		this.styles = i(t);
+		this.styles = a(n);
 	}
 	get _isDisabled() {
-		return this.disabled || this._groupDisabled;
+		return this.disabled || this._groupManagement.getContext()?.disabled === !0;
 	}
 	get _isManagedByGroup() {
-		return this.closest("web-ui-segmented") !== null;
-	}
-	setGroupDisabled(e) {
-		this._groupDisabled = e;
+		return this._groupManagement.getContext() !== void 0;
 	}
 	handleClick() {
 		if (this._isDisabled || this.checked) return;
@@ -36,13 +34,14 @@ var l = class extends n {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
 	}
 	render() {
-		return r`
-      <div
-        class=${c({
+		let e = {
 			"wui-segmented-trigger": !0,
 			"is-checked": this.checked,
 			"is-disabled": this._isDisabled
-		})}
+		};
+		return i`
+      <div
+        class=${c(e)}
         tabindex=${this._isDisabled ? "-1" : "0"}
         role="option"
         aria-selected=${String(this.checked)}
@@ -55,13 +54,13 @@ var l = class extends n {
     `;
 	}
 };
-e([o({ type: String })], l.prototype, "value", void 0), e([o({
+e([s({ type: String })], l.prototype, "value", void 0), e([s({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "checked", void 0), e([o({
+})], l.prototype, "checked", void 0), e([s({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "disabled", void 0), e([s()], l.prototype, "_groupDisabled", void 0), l = e([a("web-ui-segmented-trigger")], l);
+})], l.prototype, "disabled", void 0), l = e([o("web-ui-segmented-trigger")], l);
 //#endregion
 export { l as WebUiSegmentedTrigger };
 

package/dist/components/segmented-trigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented-trigger/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented-trigger')\nexport class WebUiSegmentedTrigger extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ type: String }) value = ''\n  @property({ type: Boolean, reflect: true }) checked = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @state() private _groupDisabled = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._groupDisabled\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this.closest('web-ui-segmented') !== null\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  private handleClick() {\n    if (this._isDisabled || this.checked) return\n    this.checked = true\n    // group-managed 时事件不冒泡/不组合，由 segmented 统一派发一次 host 事件\n    const opts: EventInit = this._isManagedByGroup\n      ? { bubbles: false, composed: false }\n      : { bubbles: true, composed: true }\n    this.dispatchEvent(new Event('change', opts))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-segmented-trigger': true,\n      'is-checked': this.checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <div\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"option\"\n        aria-selected=${String(this.checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented-trigger': WebUiSegmentedTrigger\n  }\n}\n"],"mappings":";;;;;;AAOO,IAAM,IAAN,cAAoC,EAAW;;EAMlB,aAHE,KAAA,QAAA,IACkB,KAAA,UAAA,IACC,KAAA,WAAA,IACrB,KAAA,iBAAA;;;EALT,KAAA,SAAA,EAAU,CAAK;;CAOxC,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK;CAC/B;CAEA,IAAY,oBAA6B;EACvC,OAAO,KAAK,QAAQ,kBAAkB,MAAM;CAC9C;CAEA,iBAAiB,GAAmB;EAClC,KAAK,iBAAiB;CACxB;CAEA,cAAsB;EACpB,IAAI,KAAK,eAAe,KAAK,SAAS;EACtC,KAAK,UAAU;EAEf,IAAM,IAAkB,KAAK,oBACzB;GAAE,SAAS;GAAO,UAAU;EAAM,IAClC;GAAE,SAAS;GAAM,UAAU;EAAK;EACpC,KAAK,cAAc,IAAI,MAAM,UAAU,CAAI,CAAC;CAC9C;CAEA,cAAsB,GAAkB;EACtC,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,KAAK,YAAY;CAErB;CAEA,SAAkB;EAOhB,OAAO,CAAI;;gBAEC,EAAS;GAPnB,yBAAyB;GACzB,cAAc,KAAK;GACnB,eAAe,KAAK;EAKD,CAAG,EAAE;mBACX,KAAK,cAAc,OAAO,IAAI;;wBAEzB,OAAO,KAAK,OAAO,EAAE;wBACrB,OAAO,KAAK,WAAW,EAAE;iBAChC,KAAK,YAAY;mBACf,KAAK,cAAc;;;;;CAKpC;AAKF;AA3DG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAPR,IAAA,EAAA,CAAA,EAAc,0BAA0B,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented-trigger/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { defineGroupManaged, type SelectionGroupContext } from '@/shared/group-management'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented-trigger')\nexport class WebUiSegmentedTrigger extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ type: String }) value = ''\n  @property({ type: Boolean, reflect: true }) checked = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n    requestUpdate: () => this.requestUpdate()\n  }).make()\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._groupManagement.getContext()?.disabled === true\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this._groupManagement.getContext() !== undefined\n  }\n\n  private handleClick() {\n    if (this._isDisabled || this.checked) return\n    this.checked = true\n    // group-managed 时事件不冒泡/不组合，由 segmented 统一派发一次 host 事件\n    const opts: EventInit = this._isManagedByGroup\n      ? { bubbles: false, composed: false }\n      : { bubbles: true, composed: true }\n    this.dispatchEvent(new Event('change', opts))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-segmented-trigger': true,\n      'is-checked': this.checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <div\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"option\"\n        aria-selected=${String(this.checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented-trigger': WebUiSegmentedTrigger\n  }\n}\n"],"mappings":";;;;;;;AASO,IAAM,IAAN,cAAoC,EAAW;;EAOhB,aAJA,KAAA,QAAA,IACkB,KAAA,UAAA,IACC,KAAA,WAAA,IAEnB,KAAA,mBAAA,EAA0C,MAAM,EAClF,qBAAqB,KAAK,cAAc,EAC1C,CAAC,CAAC,CAAC,KAAK;;;EARiB,KAAA,SAAA,EAAU,CAAK;;CAUxC,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,WAAW,CAAC,EAAE,aAAa;CAC3E;CAEA,IAAY,oBAA6B;EACvC,OAAO,KAAK,iBAAiB,WAAW,MAAM,KAAA;CAChD;CAEA,cAAsB;EACpB,IAAI,KAAK,eAAe,KAAK,SAAS;EACtC,KAAK,UAAU;EAEf,IAAM,IAAkB,KAAK,oBACzB;GAAE,SAAS;GAAO,UAAU;EAAM,IAClC;GAAE,SAAS;GAAM,UAAU;EAAK;EACpC,KAAK,cAAc,IAAI,MAAM,UAAU,CAAI,CAAC;CAC9C;CAEA,cAAsB,GAAkB;EACtC,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,KAAK,YAAY;CAErB;CAEA,SAAkB;EAChB,IAAM,IAAM;GACV,yBAAyB;GACzB,cAAc,KAAK;GACnB,eAAe,KAAK;EACtB;EAEA,OAAO,CAAI;;gBAEC,EAAS,CAAG,EAAE;mBACX,KAAK,cAAc,OAAO,IAAI;;wBAEzB,OAAO,KAAK,OAAO,EAAE;wBACrB,OAAO,KAAK,WAAW,EAAE;iBAChC,KAAK,YAAY;mBACf,KAAK,cAAc;;;;;CAKpC;AAKF;AA1DG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAN3C,IAAA,EAAA,CAAA,EAAc,0BAA0B,CAAA,GAAA,CAAA"}

package/dist/components/segmented-trigger/style.js

@@ -1,5 +1,5 @@
 //#region src/components/segmented-trigger/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed}.wui-segmented-trigger{--wui-segmented-trigger-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-segmented-trigger-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent);cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;height:34px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text-muted,#6a6a6a);white-space:nowrap;transition:background-color var(--wui-duration-trigger,.16s) ease, color var(--wui-duration-focus,.2s) ease;background-color:#0000;border-radius:2147483647px;justify-content:center;align-items:center;padding:0 16px;line-height:1;display:inline-flex;position:relative}.wui-segmented-trigger:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}.wui-segmented-trigger.is-checked{color:var(--wui-color-text,#1a1a1a)}@media (hover:hover) and (pointer:fine){.wui-segmented-trigger:hover:not(.is-disabled){background-color:var(--wui-segmented-trigger-bg-hover)}}.wui-segmented-trigger:active:not(.is-disabled){background-color:var(--wui-segmented-trigger-bg-active)}.wui-segmented-trigger.is-disabled{cursor:not-allowed;opacity:.4}";
+var e = "*,:before,:after{box-sizing:border-box}:host{--wui-segmented-trigger-bg-hover:var(--wui-color-state-layer-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent));--wui-segmented-trigger-bg-active:var(--wui-color-state-layer-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent));display:inline-block}:host([disabled]){cursor:not-allowed}.wui-segmented-trigger{cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;height:34px;padding:0 var(--wui-segmented-trigger-px,12px);font-size:var(--wui-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);white-space:nowrap;transition:background-color var(--wui-duration-trigger,.16s) ease, color var(--wui-duration-focus,.2s) ease;background-color:#0000;border-radius:2147483647px;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.wui-segmented-trigger:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}.wui-segmented-trigger.is-checked{color:var(--wui-color-text,#1b1b1b)}@media (hover:hover) and (pointer:fine){.wui-segmented-trigger:hover:not(.is-disabled){background-color:var(--wui-segmented-trigger-bg-hover)}}.wui-segmented-trigger:active:not(.is-disabled){background-color:var(--wui-segmented-trigger-bg-active)}.wui-segmented-trigger.is-disabled{cursor:not-allowed;opacity:.4}";
 //#endregion
 export { e as default };
 

package/dist/components/segmented-trigger/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented-trigger/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.wui-segmented-trigger {\n  --wui-segmented-trigger-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-segmented-trigger-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n  z-index: 1;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  height: 34px;\n  padding: 0 16px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text-muted, #6a6a6a);\n  white-space: nowrap;\n\n  background-color: transparent;\n\n  transition:\n    background-color var(--wui-duration-trigger, 160ms) ease,\n    color var(--wui-duration-focus, 200ms) ease;\n\n  &:focus-visible {\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n\n  &.is-checked {\n    color: var(--wui-color-text, #1a1a1a);\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .wui-segmented-trigger:hover:not(.is-disabled) {\n    background-color: var(--wui-segmented-trigger-bg-hover);\n  }\n}\n\n.wui-segmented-trigger:active:not(.is-disabled) {\n  background-color: var(--wui-segmented-trigger-bg-active);\n}\n\n.wui-segmented-trigger.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented-trigger/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-segmented-trigger-bg-hover: var(\n    --wui-color-state-layer-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent)\n  );\n  --wui-segmented-trigger-bg-active: var(\n    --wui-color-state-layer-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent)\n  );\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.wui-segmented-trigger {\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n  z-index: 1;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  height: 34px;\n  padding: 0 var(--wui-segmented-trigger-px, 12px);\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  white-space: nowrap;\n\n  background-color: transparent;\n\n  transition:\n    background-color var(--wui-duration-trigger, 160ms) ease,\n    color var(--wui-duration-focus, 200ms) ease;\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n\n  &.is-checked {\n    color: var(--wui-color-text, #1b1b1b);\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .wui-segmented-trigger:hover:not(.is-disabled) {\n    background-color: var(--wui-segmented-trigger-bg-hover);\n  }\n}\n\n.wui-segmented-trigger:active:not(.is-disabled) {\n  background-color: var(--wui-segmented-trigger-bg-active);\n}\n\n.wui-segmented-trigger.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n"],"mappings":""}

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

@@ -3,8 +3,6 @@ import { OverlayContainer } from '../../shared/overlay/portal';
 export declare class WebUiSelect extends LitElement {
     static styles: import('lit').CSSResult[];
     static formAssociated: boolean;
-    private _internals?;
-    private _formDisabled;
     placeholder: string;
     disabled: boolean;
     required: boolean;
@@ -15,13 +13,19 @@ export declare class WebUiSelect extends LitElement {
     private _value;
     get value(): string;
     set value(v: string);
+    private readonly _formAssociation;
+    private readonly _formAssociationController;
     private get _isDisabled();
     private _isOpen;
     private _activeIndex;
     private _selectedLabel;
     private _hasTriggerSlot;
     private _options;
+    private _portal?;
+    private _portalContent?;
     private readonly _scrollLock;
+    private static _nextInstanceId;
+    private readonly _optionPortal;
     private readonly _panel;
     get isOpen(): boolean;
     get open(): boolean;
@@ -30,23 +34,24 @@ export declare class WebUiSelect extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    private _queryOptions;
     willUpdate(): void;
     updated(changed: PropertyValues): void;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     private _syncValidity;
     private _syncOpenAttribute;
     private _onTriggerSlotChange;
     private _syncSelected;
-    private _ensureOptionIds;
-    private _onOptionRegister;
-    private _onOptionUnregister;
-    private _onSlotChange;
+    private _bindOption;
+    private _unbindOption;
+    private _refreshOptions;
     private _handleOptionClick;
     private _onOptionUpdate;
     private _handleOptionPointerOver;
     private _handleOptionPointerDown;
+    private _onSlotChange;
+    private _isLive;
     private _onKeydown;
     private _navigateActive;
     private _open;
@@ -59,8 +64,8 @@ export declare class WebUiSelect extends LitElement {
     private _togglePopup;
     private _openOverlay;
     private _createPortal;
-    private _closeOverlay;
     private _reconfigureOverlay;
+    private _closeOverlay;
     render(): import('lit').TemplateResult<1>;
     readonly $events: {
         input: Event;