@editora/ui-core 0.2.1 → 0.3.0

package/dist/primitives/number-attribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-attribute.d.ts","sourceRoot":"","sources":["../../src/primitives/number-attribute.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAI5E"}

package/dist/primitives/slotted-input.d.ts

@@ -0,0 +1,19 @@
+/**
+ * "Bring your own input" for the text fields: `<input slot="input">` in the light DOM.
+ *
+ * Password managers and browser autofill look for real inputs in the document; one inside a shadow
+ * root is found unreliably, so sign-in forms could not be filled. With a slotted native input the
+ * component keeps its label, styling, clear and visibility buttons around it but uses that input as
+ * its control: it is an ordinary form field (name, autocomplete, FormData, Enter submits) that the
+ * component never renames or retypes.
+ */
+export declare function findSlottedInput(host: HTMLElement): HTMLInputElement | null;
+/**
+ * Names the slotted input after the component's label when it has no name of its own (a <label for>,
+ * aria-label or aria-labelledby). IDREFs into the shadow root cannot resolve from the light DOM, so
+ * the label text is copied; a description is copied into aria-description for the same reason.
+ */
+export declare function nameSlottedInput(input: HTMLInputElement, label: string, description: string): void;
+/** The component's inner-input rules, applied to a slotted input. */
+export declare function slottedInputCss(inputRules: string): string;
+//# sourceMappingURL=slotted-input.d.ts.map

package/dist/primitives/slotted-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-input.d.ts","sourceRoot":"","sources":["../../src/primitives/slotted-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,gBAAgB,GAAG,IAAI,CAK3E;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,CAgBlG;AAED,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAM1D"}

package/dist/progress.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),m=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-CbUsP3D6.js"),m=`
   :host {
     display: block;
     width: 100%;
@@ -194,8 +194,8 @@
 
   :host([variant="contrast"]) {
     --ui-progress-bg: #1f2937;
-    --ui-progress-fill: #93c5fd;
-    --ui-progress-buffer: rgba(147, 197, 253, 0.36);
+    --ui-progress-fill: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-progress-buffer: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 36%, transparent);
     --ui-progress-label: #e2e8f0;
     --ui-progress-track-border: 1px solid #334155;
     --ui-progress-fill-soft: var(--ui-progress-fill);

package/dist/progress.esm.js

@@ -1,4 +1,4 @@
-import { E as g } from "./ElementBase-BeZT54Hj.mjs";
+import { E as g } from "./ElementBase-D5QsC5Vw.mjs";
 const b = `
   :host {
     display: block;
@@ -195,8 +195,8 @@ const b = `
 
   :host([variant="contrast"]) {
     --ui-progress-bg: #1f2937;
-    --ui-progress-fill: #93c5fd;
-    --ui-progress-buffer: rgba(147, 197, 253, 0.36);
+    --ui-progress-fill: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-progress-buffer: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 36%, transparent);
     --ui-progress-label: #e2e8f0;
     --ui-progress-track-border: 1px solid #334155;
     --ui-progress-fill-soft: var(--ui-progress-fill);

package/dist/quick-actions.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),h=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-CbUsP3D6.js"),h=`
   :host {
     --ui-quick-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-quick-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
@@ -110,8 +110,8 @@
     --ui-quick-border: #334155;
     --ui-quick-text: #e2e8f0;
     --ui-quick-muted: #93a4bd;
-    --ui-quick-accent: #93c5fd;
-    --ui-quick-focus: #93c5fd;
+    --ui-quick-accent: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-quick-focus: var(--ui-color-accent-on-dark, #93c5fd);
   }
 
   :host([variant="minimal"]) .root {
@@ -197,9 +197,9 @@
       border-color: Highlight;
     }
   }
-`;let p=0;function l(u){return u.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class d extends b.ElementBase{constructor(){super(),this._instanceId=++p,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","mode","orientation","variant","floating","placement","collapsible","label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.getAttribute("mode")!=="fab"&&!this.hasAttribute("collapsible")&&!this.hasAttribute("open")&&this.setAttribute("open","")}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,o,t){if(o!==t){if(e==="open"){this._syncOpenUi();return}this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){const o=typeof e=="boolean"?e:!this.open;this.open=o;const t={open:o};this.dispatchEvent(new CustomEvent(o?"open":"close",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}_actions(){const e=this.root.querySelector('slot[name="action"]');return e?e.assignedElements({flatten:!0}).filter(o=>o instanceof HTMLElement):[]}_actionsId(){return`ui-quick-actions-${this._instanceId}-actions`}_syncActionAccessibility(e){this._actions().forEach((t,r)=>{if(t.id||(t.id=`ui-quick-actions-${this._instanceId}-action-${r+1}`),t.hasAttribute("role")||t.setAttribute("role","button"),!t.hasAttribute("aria-label")){const i=t.textContent?.trim();i&&t.setAttribute("aria-label",i)}if(e){const i=t.getAttribute("data-ui-quick-tabindex");i!=null?(i==="__none__"?t.removeAttribute("tabindex"):t.setAttribute("tabindex",i),t.removeAttribute("data-ui-quick-tabindex")):t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("aria-hidden","false");return}t.hasAttribute("data-ui-quick-tabindex")||t.setAttribute("data-ui-quick-tabindex",t.getAttribute("tabindex")??"__none__"),t.setAttribute("tabindex","-1"),t.setAttribute("aria-hidden","true")})}_onClick(e){const o=e.target;if(!o)return;if(o.closest(".toggle")){this.toggle();return}const r=e.composedPath(),i=this._actions(),s=i.find(n=>r.includes(n));if(!s)return;const a=i.indexOf(s),c={index:a,id:s.id||s.getAttribute("data-id")||String(a+1),label:s.getAttribute("aria-label")||s.textContent?.trim()||`Action ${a+1}`};this.dispatchEvent(new CustomEvent("select",{detail:c,bubbles:!0,composed:!0})),this.getAttribute("mode")==="fab"&&this.hide()}_moveFocus(e,o){const t=this._actions();if(!t.length)return;const r=t.indexOf(e);if(r<0)return;const i=(r+o+t.length)%t.length;t[i].focus()}_onKeyDown(e){if(e.key==="Escape"&&this.open&&this.getAttribute("mode")==="fab"){e.preventDefault(),this.hide();return}const o=e.target;if(!o)return;const r=this._actions().find(n=>n===o||n.contains(o));if(!r)return;const i=this.getAttribute("orientation")==="vertical"||this.getAttribute("mode")==="fab",s=!i&&getComputedStyle(this).direction==="rtl",a=i?"ArrowDown":s?"ArrowLeft":"ArrowRight",c=i?"ArrowUp":s?"ArrowRight":"ArrowLeft";if(e.key===a){e.preventDefault(),this._moveFocus(r,1);return}if(e.key===c){e.preventDefault(),this._moveFocus(r,-1);return}if(e.key==="Home"||e.key==="End"){e.preventDefault();const n=this._actions();if(!n.length)return;(e.key==="Home"?n[0]:n[n.length-1]).focus()}}_syncOpenUi(){if(!this.isConnected)return;if(!this.root.querySelector(".root")){this.requestRender();return}const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this.root.querySelector(".toggle");i&&(i.textContent=t?"−":"+",i.setAttribute("aria-label",r),i.setAttribute("aria-expanded",t?"true":"false"));const s=this.root.querySelector(".actions");s&&(t?s.removeAttribute("hidden"):s.setAttribute("hidden","")),this._syncActionAccessibility(t)}render(){const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this._actionsId(),s=this.getAttribute("orientation")==="vertical"||e==="fab"?"vertical":"horizontal";this.setContent(`
+`;let p=0;function l(u){return u.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class d extends b.ElementBase{constructor(){super(),this._instanceId=++p,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","mode","orientation","variant","floating","placement","collapsible","label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.getAttribute("mode")!=="fab"&&!this.hasAttribute("collapsible")&&!this.hasAttribute("open")&&this.setAttribute("open","")}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,o,t){if(o!==t){if(e==="open"){this._syncOpenUi();return}this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){const o=typeof e=="boolean"?e:!this.open;this.open=o;const t={open:o};this.dispatchEvent(new CustomEvent(o?"open":"close",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}_actions(){const e=this.root.querySelector('slot[name="action"]');return e?e.assignedElements({flatten:!0}).filter(o=>o instanceof HTMLElement):[]}_actionsId(){return`ui-quick-actions-${this._instanceId}-actions`}_syncActionAccessibility(e){this._actions().forEach((t,r)=>{if(t.id||(t.id=`ui-quick-actions-${this._instanceId}-action-${r+1}`),t.hasAttribute("role")||t.setAttribute("role","button"),!t.hasAttribute("aria-label")){const i=t.textContent?.trim();i&&t.setAttribute("aria-label",i)}if(e){const i=t.getAttribute("data-ui-quick-tabindex");i!=null?(i==="__none__"?t.removeAttribute("tabindex"):t.setAttribute("tabindex",i),t.removeAttribute("data-ui-quick-tabindex")):t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("aria-hidden","false");return}t.hasAttribute("data-ui-quick-tabindex")||t.setAttribute("data-ui-quick-tabindex",t.getAttribute("tabindex")??"__none__"),t.setAttribute("tabindex","-1"),t.setAttribute("aria-hidden","true")})}_onClick(e){const o=e.target;if(!o)return;if(o.closest(".toggle")){this.toggle();return}const r=e.composedPath(),i=this._actions(),n=i.find(s=>r.includes(s));if(!n)return;const a=i.indexOf(n),c={index:a,id:n.id||n.getAttribute("data-id")||String(a+1),label:n.getAttribute("aria-label")||n.textContent?.trim()||`Action ${a+1}`};this.dispatchEvent(new CustomEvent("select",{detail:c,bubbles:!0,composed:!0})),this.getAttribute("mode")==="fab"&&this.hide()}_moveFocus(e,o){const t=this._actions();if(!t.length)return;const r=t.indexOf(e);if(r<0)return;const i=(r+o+t.length)%t.length;t[i].focus()}_onKeyDown(e){if(e.key==="Escape"&&this.open&&this.getAttribute("mode")==="fab"){e.preventDefault(),this.hide();return}const o=e.target;if(!o)return;const r=this._actions().find(s=>s===o||s.contains(o));if(!r)return;const i=this.getAttribute("orientation")==="vertical"||this.getAttribute("mode")==="fab",n=!i&&getComputedStyle(this).direction==="rtl",a=i?"ArrowDown":n?"ArrowLeft":"ArrowRight",c=i?"ArrowUp":n?"ArrowRight":"ArrowLeft";if(e.key===a){e.preventDefault(),this._moveFocus(r,1);return}if(e.key===c){e.preventDefault(),this._moveFocus(r,-1);return}if(e.key==="Home"||e.key==="End"){e.preventDefault();const s=this._actions();if(!s.length)return;(e.key==="Home"?s[0]:s[s.length-1]).focus()}}_syncOpenUi(){if(!this.isConnected)return;if(!this.root.querySelector(".root")){this.requestRender();return}const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this.root.querySelector(".toggle");i&&(i.textContent=t?"−":"+",i.setAttribute("aria-label",r),i.setAttribute("aria-expanded",t?"true":"false"));const n=this.root.querySelector(".actions");n&&(t?n.removeAttribute("hidden"):n.setAttribute("hidden","")),this._syncActionAccessibility(t)}render(){const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this._actionsId(),n=this.getAttribute("orientation")==="vertical"||e==="fab"?"vertical":"horizontal";this.setContent(`
       <style>${h}</style>
-      <div class="root" part="root" role="toolbar" aria-label="${l(r)}" aria-orientation="${s}">
+      <div class="root" part="root" role="toolbar" aria-label="${l(r)}" aria-orientation="${n}">
         ${o?`<button type="button" class="toggle" part="toggle" aria-label="${l(r)}" aria-controls="${i}" aria-haspopup="true" aria-expanded="${t?"true":"false"}">${t?"−":"+"}</button>`:""}
         <div id="${i}" class="actions" part="actions" role="group" aria-label="${l(r)} list" ${t?"":"hidden"}>
           <slot name="action"></slot>

package/dist/quick-actions.esm.js

@@ -1,4 +1,4 @@
-import { E as d } from "./ElementBase-BeZT54Hj.mjs";
+import { E as d } from "./ElementBase-D5QsC5Vw.mjs";
 const b = `
   :host {
     --ui-quick-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
@@ -111,8 +111,8 @@ const b = `
     --ui-quick-border: #334155;
     --ui-quick-text: #e2e8f0;
     --ui-quick-muted: #93a4bd;
-    --ui-quick-accent: #93c5fd;
-    --ui-quick-focus: #93c5fd;
+    --ui-quick-accent: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-quick-focus: var(--ui-color-accent-on-dark, #93c5fd);
   }
 
   :host([variant="minimal"]) .root {

package/dist/radio-group.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-DxbvhLJs.js"),c=require("./roving-focus-group-BdJ_4Njm.js"),g=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-CbUsP3D6.js"),v=require("./form-control-B90_3kYN.js"),c=require("./roving-focus-group-BdJ_4Njm.js"),m=`
   :host {
     display: block;
     width: 100%;
@@ -253,29 +253,29 @@
       background: Highlight;
     }
   }
-`;function h(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function p(s){return s==="horizontal"?"horizontal":"vertical"}function x(s){return s==="sm"||s==="lg"?s:"md"}function _(s){return s==="card"||s==="segmented"?s:"default"}function m(s){return s==="neutral"||s==="success"||s==="warning"||s==="danger"||s==="info"?s:"brand"}class f extends v.ElementBase{constructor(){super(),this._value="",this._disabled=!1,this._required=!1,this._orientation="vertical",this._focusIndex=-1,this._options=[],this._observer=null,this._onClickBound=e=>this._onClick(e),this._onKeydownBound=e=>this._onKeydown(e)}static get observedAttributes(){return["value","disabled","required","name","orientation","variant","size","tone","options","headless"]}connectedCallback(){this._syncFromAttributes(),super.connectedCallback(),this.root.addEventListener("click",this._onClickBound),this.root.addEventListener("keydown",this._onKeydownBound),typeof MutationObserver<"u"&&(this._observer||(this._observer=new MutationObserver(()=>{this.hasAttribute("options")||(this._syncFromAttributes(),this.requestRender())})),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0}))}disconnectedCallback(){this.root.removeEventListener("click",this._onClickBound),this.root.removeEventListener("keydown",this._onKeydownBound),this._observer?.disconnect(),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&(this._syncFromAttributes(),e==="options"?this.requestRender():this._syncInteractiveState(),e==="value"&&this.dispatchEvent(new CustomEvent("valuechange",{detail:{value:this._value},bubbles:!0,composed:!0})))}get value(){return this._value}set value(e){const i=String(e||"");i!==this._value&&this.setAttribute("value",i)}get disabled(){return this._disabled}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}_syncFromAttributes(){if(this._value=this.getAttribute("value")||"",this._disabled=this.hasAttribute("disabled"),this._required=this.hasAttribute("required"),this._orientation=p(this.getAttribute("orientation")),this._options=this._collectOptions(),this._focusIndex<0||this._focusIndex>=this._options.length||this._options[this._focusIndex]?.disabled){const e=this._findSelectedIndex();this._focusIndex=e>=0?e:this._findFirstEnabledIndex()}}_collectOptions(){const e=this.getAttribute("options");if(e&&e.trim())try{const t=JSON.parse(e);if(Array.isArray(t)){const r=t.map((o,a)=>{if(typeof o=="string")return{value:o,label:o,disabled:!1};if(o&&typeof o=="object"){const n=String(o.value??`option-${a+1}`),d=String(o.label??n),l=o.description==null?void 0:String(o.description),u=!!o.disabled;return{value:n,label:d,description:l,disabled:u}}return null}).filter(Boolean);if(r.length)return r}}catch{}return Array.from(this.children).filter(t=>t instanceof HTMLElement&&t.hasAttribute("data-radio")).map((t,r)=>{const o=t.getAttribute("data-value")||t.getAttribute("value"),a=(t.getAttribute("data-label")||t.textContent||"").trim(),n=(o||a||`option-${r+1}`).trim(),d=(t.getAttribute("data-description")||"").trim()||void 0,l=t.hasAttribute("data-disabled")||t.getAttribute("aria-disabled")==="true";return{value:n,label:a||n,description:d,disabled:l}})}_findSelectedIndex(){const e=this._options.findIndex(i=>i.value===this._value&&!i.disabled);return e>=0?e:this._value?-1:this._findFirstEnabledIndex()}_findFirstEnabledIndex(){return this._options.findIndex(e=>!e.disabled)}_selectIndex(e,i){if(this._disabled)return;const t=this._options[e];if(!t||t.disabled)return;const r=this._value!==t.value;if(this._focusIndex=e,r){this._value=t.value,this.getAttribute("value")!==t.value?this.setAttribute("value",t.value):this.requestRender();const o={value:t.value,option:{...t},reason:i,name:this.getAttribute("name")||void 0};this.dispatchEvent(new CustomEvent("input",{detail:o,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:o,bubbles:!0,composed:!0}))}else this.requestRender();this._focusOption(e)}_moveSelection(e){const i=c.moveRovingFocusIndex(this._options,this._focusIndex,e>0?1:-1,{wrap:!0,fallbackIndex:c.resolveRovingFocusIndex(this._options,{activeIndex:this._focusIndex,selectedIndex:this._findSelectedIndex(),getDisabled:t=>!!t.disabled}),getDisabled:t=>!!t.disabled});i>=0&&this._selectIndex(i,"keyboard")}_focusOption(e){const i=this.root.querySelector(`.option[data-index="${e}"]`);c.focusRovingItem(i)}_syncInteractiveState(){if(!this.root.querySelector(".root"))return;this.setAttribute("role","radiogroup"),this.setAttribute("aria-disabled",this._disabled?"true":"false"),this.setAttribute("aria-required",this._required?"true":"false"),this.setAttribute("aria-orientation",this._orientation);const i=this._findSelectedIndex(),t=i>=0?i:this._findFirstEnabledIndex();this._focusIndex=c.resolveRovingFocusIndex(this._options,{activeIndex:this._focusIndex,selectedIndex:t,getDisabled:a=>!!a.disabled});const r=this.root.querySelectorAll(".option[data-index]");r.forEach(a=>{const n=Number(a.getAttribute("data-index"));if(Number.isNaN(n))return;const d=this._options[n];if(!d)return;const l=n===t,u=this._disabled||!!d.disabled,b=n===this._focusIndex?0:-1;a.setAttribute("data-value",d.value),a.setAttribute("data-checked",l?"true":"false"),a.setAttribute("data-disabled",u?"true":"false"),a.setAttribute("aria-checked",l?"true":"false"),a.setAttribute("aria-disabled",u?"true":"false"),a.setAttribute("tabindex",String(b))});const o=Array.from(r);c.syncRovingTabStops(o,o[this._focusIndex]||null,{activeAttribute:null})}_onClick(e){const i=e.target;if(!i)return;const t=i.closest(".option");if(!t)return;const r=Number(t.getAttribute("data-index"));Number.isNaN(r)||this._selectIndex(r,"click")}_onKeydown(e){if(this._disabled)return;const i=e.key,t=this._orientation==="horizontal";if(i==="ArrowRight"&&t||i==="ArrowDown"){e.preventDefault(),this._moveSelection(1);return}if(i==="ArrowLeft"&&t||i==="ArrowUp"){e.preventDefault(),this._moveSelection(-1);return}if(i==="Home"){e.preventDefault();const r=c.getRovingFocusBoundaryIndex(this._options,"first",o=>!!o.disabled);r>=0&&this._selectIndex(r,"keyboard");return}if(i==="End"){e.preventDefault();const r=c.getRovingFocusBoundaryIndex(this._options,"last",o=>!!o.disabled);r>=0&&this._selectIndex(r,"keyboard");return}if(i===" "||i==="Enter"){e.preventDefault();const r=this._focusIndex>=0?this._focusIndex:this._findSelectedIndex();r>=0&&this._selectIndex(r,"keyboard")}}render(){const e=x(this.getAttribute("size")),i=_(this.getAttribute("variant")),t=m(this.getAttribute("tone")),r=p(this.getAttribute("orientation"));this.setAttribute("role","radiogroup"),this.setAttribute("aria-disabled",this._disabled?"true":"false"),this.setAttribute("aria-required",this._required?"true":"false"),this.setAttribute("aria-orientation",r);const o=this._findSelectedIndex(),a=o>=0?o:this._findFirstEnabledIndex();(this._focusIndex<0||this._focusIndex>=this._options.length||this._options[this._focusIndex]?.disabled)&&(this._focusIndex=a),this.setContent(`
-      <style>${g}</style>
+`;function p(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(s){return s==="horizontal"?"horizontal":"vertical"}function _(s){return s==="sm"||s==="lg"?s:"md"}function A(s){return s==="card"||s==="segmented"?s:"default"}function y(s){return s==="neutral"||s==="success"||s==="warning"||s==="danger"||s==="info"?s:"brand"}const f=class f extends x.ElementBase{constructor(){super(),this._formControl=new v.FormControl(this,{getValue:()=>this.value||null,getValidity:()=>({valueMissing:v.isRequired(this)&&!this.value,message:"Please select one of these options."}),defaultAttribute:"value",onFormDisabled:()=>{this._disabled=this.hasAttribute("disabled")||this._formControl.disabledByForm,this.requestRender()}}),this._value="",this._disabled=!1,this._required=!1,this._orientation="vertical",this._focusIndex=-1,this._options=[],this._observer=null,this._onClickBound=e=>this._onClick(e),this._onKeydownBound=e=>this._onKeydown(e)}static get observedAttributes(){return["value","disabled","required","name","orientation","variant","size","tone","options","headless"]}formResetCallback(){this._formControl.formResetCallback()}formDisabledCallback(e){this._formControl.formDisabledCallback(e)}get form(){return this._formControl.form}connectedCallback(){this._syncFromAttributes(),super.connectedCallback(),this._formControl.connect(),this.root.addEventListener("click",this._onClickBound),this.root.addEventListener("keydown",this._onKeydownBound),typeof MutationObserver<"u"&&(this._observer||(this._observer=new MutationObserver(()=>{this.hasAttribute("options")||(this._syncFromAttributes(),this.requestRender())})),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0}))}disconnectedCallback(){this._formControl.disconnect(),this.root.removeEventListener("click",this._onClickBound),this.root.removeEventListener("keydown",this._onKeydownBound),this._observer?.disconnect(),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&(this._syncFromAttributes(),e==="options"?this.requestRender():this._syncInteractiveState(),e==="value"&&this.dispatchEvent(new CustomEvent("valuechange",{detail:{value:this._value},bubbles:!0,composed:!0})))}get value(){return this._value}set value(e){const i=String(e||"");i!==this._value&&this.setAttribute("value",i)}get disabled(){return this._disabled}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}_syncFromAttributes(){if(this._value=this.getAttribute("value")||"",this._disabled=this.hasAttribute("disabled")||!!this._formControl?.disabledByForm,this._required=this.hasAttribute("required"),this._orientation=g(this.getAttribute("orientation")),this._options=this._collectOptions(),this._focusIndex<0||this._focusIndex>=this._options.length||this._options[this._focusIndex]?.disabled){const e=this._findSelectedIndex();this._focusIndex=e>=0?e:this._findFirstEnabledIndex()}}_collectOptions(){const e=this.getAttribute("options");if(e&&e.trim())try{const t=JSON.parse(e);if(Array.isArray(t)){const r=t.map((o,a)=>{if(typeof o=="string")return{value:o,label:o,disabled:!1};if(o&&typeof o=="object"){const n=String(o.value??`option-${a+1}`),d=String(o.label??n),l=o.description==null?void 0:String(o.description),u=!!o.disabled;return{value:n,label:d,description:l,disabled:u}}return null}).filter(Boolean);if(r.length)return r}}catch{}return Array.from(this.children).filter(t=>t instanceof HTMLElement&&t.hasAttribute("data-radio")).map((t,r)=>{const o=t.getAttribute("data-value")||t.getAttribute("value"),a=(t.getAttribute("data-label")||t.textContent||"").trim(),n=(o||a||`option-${r+1}`).trim(),d=(t.getAttribute("data-description")||"").trim()||void 0,l=t.hasAttribute("data-disabled")||t.getAttribute("aria-disabled")==="true";return{value:n,label:a||n,description:d,disabled:l}})}_findSelectedIndex(){const e=this._options.findIndex(i=>i.value===this._value&&!i.disabled);return e>=0?e:this._value?-1:this._findFirstEnabledIndex()}_findFirstEnabledIndex(){return this._options.findIndex(e=>!e.disabled)}_selectIndex(e,i){if(this._disabled)return;const t=this._options[e];if(!t||t.disabled)return;const r=this._value!==t.value;if(this._focusIndex=e,r){this._value=t.value,this.getAttribute("value")!==t.value?this.setAttribute("value",t.value):this.requestRender();const o={value:t.value,option:{...t},reason:i,name:this.getAttribute("name")||void 0};this.dispatchEvent(new CustomEvent("input",{detail:o,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:o,bubbles:!0,composed:!0}))}else this.requestRender();this._focusOption(e)}_moveSelection(e){const i=c.moveRovingFocusIndex(this._options,this._focusIndex,e>0?1:-1,{wrap:!0,fallbackIndex:c.resolveRovingFocusIndex(this._options,{activeIndex:this._focusIndex,selectedIndex:this._findSelectedIndex(),getDisabled:t=>!!t.disabled}),getDisabled:t=>!!t.disabled});i>=0&&this._selectIndex(i,"keyboard")}_focusOption(e){const i=this.root.querySelector(`.option[data-index="${e}"]`);c.focusRovingItem(i)}_syncInteractiveState(){if(!this.root.querySelector(".root"))return;this.setAttribute("role","radiogroup"),this.setAttribute("aria-disabled",this._disabled?"true":"false"),this.setAttribute("aria-required",this._required?"true":"false"),this.setAttribute("aria-orientation",this._orientation);const i=this._findSelectedIndex(),t=i>=0?i:this._findFirstEnabledIndex();this._focusIndex=c.resolveRovingFocusIndex(this._options,{activeIndex:this._focusIndex,selectedIndex:t,getDisabled:a=>!!a.disabled});const r=this.root.querySelectorAll(".option[data-index]");r.forEach(a=>{const n=Number(a.getAttribute("data-index"));if(Number.isNaN(n))return;const d=this._options[n];if(!d)return;const l=n===t,u=this._disabled||!!d.disabled,h=n===this._focusIndex?0:-1;a.setAttribute("data-value",d.value),a.setAttribute("data-checked",l?"true":"false"),a.setAttribute("data-disabled",u?"true":"false"),a.setAttribute("aria-checked",l?"true":"false"),a.setAttribute("aria-disabled",u?"true":"false"),a.setAttribute("tabindex",String(h))});const o=Array.from(r);c.syncRovingTabStops(o,o[this._focusIndex]||null,{activeAttribute:null})}_onClick(e){const i=e.target;if(!i)return;const t=i.closest(".option");if(!t)return;const r=Number(t.getAttribute("data-index"));Number.isNaN(r)||this._selectIndex(r,"click")}_onKeydown(e){if(this._disabled)return;const i=e.key,t=this._orientation==="horizontal";if(i==="ArrowRight"&&t||i==="ArrowDown"){e.preventDefault(),this._moveSelection(1);return}if(i==="ArrowLeft"&&t||i==="ArrowUp"){e.preventDefault(),this._moveSelection(-1);return}if(i==="Home"){e.preventDefault();const r=c.getRovingFocusBoundaryIndex(this._options,"first",o=>!!o.disabled);r>=0&&this._selectIndex(r,"keyboard");return}if(i==="End"){e.preventDefault();const r=c.getRovingFocusBoundaryIndex(this._options,"last",o=>!!o.disabled);r>=0&&this._selectIndex(r,"keyboard");return}if(i===" "||i==="Enter"){e.preventDefault();const r=this._focusIndex>=0?this._focusIndex:this._findSelectedIndex();r>=0&&this._selectIndex(r,"keyboard")}}render(){const e=_(this.getAttribute("size")),i=A(this.getAttribute("variant")),t=y(this.getAttribute("tone")),r=g(this.getAttribute("orientation"));this.setAttribute("role","radiogroup"),this.setAttribute("aria-disabled",this._disabled?"true":"false"),this.setAttribute("aria-required",this._required?"true":"false"),this.setAttribute("aria-orientation",r);const o=this._findSelectedIndex(),a=o>=0?o:this._findFirstEnabledIndex();(this._focusIndex<0||this._focusIndex>=this._options.length||this._options[this._focusIndex]?.disabled)&&(this._focusIndex=a),this.setContent(`
+      <style>${m}</style>
       <div class="root" part="root" data-size="${e}" data-variant="${i}" data-tone="${t}">
-        ${this._options.map((n,d)=>{const l=d===a,u=this._disabled||!!n.disabled,b=d===this._focusIndex?0:-1;return`
+        ${this._options.map((n,d)=>{const l=d===a,u=this._disabled||!!n.disabled,h=d===this._focusIndex?0:-1;return`
               <button
                 type="button"
                 class="option"
                 part="option"
                 role="radio"
                 data-index="${d}"
-                data-value="${h(n.value)}"
+                data-value="${p(n.value)}"
                 data-checked="${l?"true":"false"}"
                 data-disabled="${u?"true":"false"}"
                 aria-checked="${l?"true":"false"}"
                 aria-disabled="${u?"true":"false"}"
-                tabindex="${b}"
+                tabindex="${h}"
               >
                 <span class="control" part="control"><span class="dot" part="dot"></span></span>
                 <span class="text" part="text">
-                  <span class="label" part="label">${h(n.label)}</span>
-                  ${n.description?`<span class="description" part="description">${h(n.description)}</span>`:""}
+                  <span class="label" part="label">${p(n.label)}</span>
+                  ${n.description?`<span class="description" part="description">${p(n.description)}</span>`:""}
                 </span>
               </button>
             `}).join("")}
       </div>
-    `)}shouldRenderOnAttributeChange(e,i,t){return e==="options"}}typeof customElements<"u"&&!customElements.get("ui-radio-group")&&customElements.define("ui-radio-group",f);exports.UIRadioGroup=f;
+    `)}shouldRenderOnAttributeChange(e,i,t){return e==="options"}};f.formAssociated=!0;let b=f;typeof customElements<"u"&&!customElements.get("ui-radio-group")&&customElements.define("ui-radio-group",b);exports.UIRadioGroup=b;

package/dist/radio-group.esm.js

@@ -1,6 +1,7 @@
-import { E as v } from "./ElementBase-BeZT54Hj.mjs";
-import { m as g, r as h, f as x, s as m, g as p } from "./roving-focus-group-Dbm1Jko_.mjs";
-const _ = `
+import { E as m } from "./ElementBase-D5QsC5Vw.mjs";
+import { F as x, i as _ } from "./form-control-D9wWUMBl.mjs";
+import { m as A, r as f, f as y, s as k, g as v } from "./roving-focus-group-Dbm1Jko_.mjs";
+const I = `
   :host {
     display: block;
     width: 100%;
@@ -259,21 +260,31 @@ const _ = `
 function b(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function f(s) {
+function g(s) {
   return s === "horizontal" ? "horizontal" : "vertical";
 }
-function I(s) {
+function w(s) {
   return s === "sm" || s === "lg" ? s : "md";
 }
-function A(s) {
+function C(s) {
   return s === "card" || s === "segmented" ? s : "default";
 }
-function y(s) {
+function z(s) {
   return s === "neutral" || s === "success" || s === "warning" || s === "danger" || s === "info" ? s : "brand";
 }
-class k extends v {
+const p = class p extends m {
   constructor() {
-    super(), this._value = "", this._disabled = !1, this._required = !1, this._orientation = "vertical", this._focusIndex = -1, this._options = [], this._observer = null, this._onClickBound = (e) => this._onClick(e), this._onKeydownBound = (e) => this._onKeydown(e);
+    super(), this._formControl = new x(this, {
+      getValue: () => this.value || null,
+      getValidity: () => ({
+        valueMissing: _(this) && !this.value,
+        message: "Please select one of these options."
+      }),
+      defaultAttribute: "value",
+      onFormDisabled: () => {
+        this._disabled = this.hasAttribute("disabled") || this._formControl.disabledByForm, this.requestRender();
+      }
+    }), this._value = "", this._disabled = !1, this._required = !1, this._orientation = "vertical", this._focusIndex = -1, this._options = [], this._observer = null, this._onClickBound = (e) => this._onClick(e), this._onKeydownBound = (e) => this._onKeydown(e);
   }
   static get observedAttributes() {
     return [
@@ -289,13 +300,23 @@ class k extends v {
       "headless"
     ];
   }
+  formResetCallback() {
+    this._formControl.formResetCallback();
+  }
+  formDisabledCallback(e) {
+    this._formControl.formDisabledCallback(e);
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    return this._formControl.form;
+  }
   connectedCallback() {
-    this._syncFromAttributes(), super.connectedCallback(), this.root.addEventListener("click", this._onClickBound), this.root.addEventListener("keydown", this._onKeydownBound), typeof MutationObserver < "u" && (this._observer || (this._observer = new MutationObserver(() => {
+    this._syncFromAttributes(), super.connectedCallback(), this._formControl.connect(), this.root.addEventListener("click", this._onClickBound), this.root.addEventListener("keydown", this._onKeydownBound), typeof MutationObserver < "u" && (this._observer || (this._observer = new MutationObserver(() => {
       this.hasAttribute("options") || (this._syncFromAttributes(), this.requestRender());
     })), this._observer.observe(this, { childList: !0, subtree: !0, characterData: !0 }));
   }
   disconnectedCallback() {
-    this.root.removeEventListener("click", this._onClickBound), this.root.removeEventListener("keydown", this._onKeydownBound), this._observer?.disconnect(), super.disconnectedCallback();
+    this._formControl.disconnect(), this.root.removeEventListener("click", this._onClickBound), this.root.removeEventListener("keydown", this._onKeydownBound), this._observer?.disconnect(), super.disconnectedCallback();
   }
   attributeChangedCallback(e, i, t) {
     i !== t && (this._syncFromAttributes(), e === "options" ? this.requestRender() : this._syncInteractiveState(), e === "value" && this.dispatchEvent(
@@ -320,7 +341,7 @@ class k extends v {
     e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   _syncFromAttributes() {
-    if (this._value = this.getAttribute("value") || "", this._disabled = this.hasAttribute("disabled"), this._required = this.hasAttribute("required"), this._orientation = f(this.getAttribute("orientation")), this._options = this._collectOptions(), this._focusIndex < 0 || this._focusIndex >= this._options.length || this._options[this._focusIndex]?.disabled) {
+    if (this._value = this.getAttribute("value") || "", this._disabled = this.hasAttribute("disabled") || !!this._formControl?.disabledByForm, this._required = this.hasAttribute("required"), this._orientation = g(this.getAttribute("orientation")), this._options = this._collectOptions(), this._focusIndex < 0 || this._focusIndex >= this._options.length || this._options[this._focusIndex]?.disabled) {
       const e = this._findSelectedIndex();
       this._focusIndex = e >= 0 ? e : this._findFirstEnabledIndex();
     }
@@ -372,9 +393,9 @@ class k extends v {
     this._focusOption(e);
   }
   _moveSelection(e) {
-    const i = g(this._options, this._focusIndex, e > 0 ? 1 : -1, {
+    const i = A(this._options, this._focusIndex, e > 0 ? 1 : -1, {
       wrap: !0,
-      fallbackIndex: h(this._options, {
+      fallbackIndex: f(this._options, {
         activeIndex: this._focusIndex,
         selectedIndex: this._findSelectedIndex(),
         getDisabled: (t) => !!t.disabled
@@ -385,13 +406,13 @@ class k extends v {
   }
   _focusOption(e) {
     const i = this.root.querySelector(`.option[data-index="${e}"]`);
-    x(i);
+    y(i);
   }
   _syncInteractiveState() {
     if (!this.root.querySelector(".root")) return;
     this.setAttribute("role", "radiogroup"), this.setAttribute("aria-disabled", this._disabled ? "true" : "false"), this.setAttribute("aria-required", this._required ? "true" : "false"), this.setAttribute("aria-orientation", this._orientation);
     const i = this._findSelectedIndex(), t = i >= 0 ? i : this._findFirstEnabledIndex();
-    this._focusIndex = h(this._options, {
+    this._focusIndex = f(this._options, {
       activeIndex: this._focusIndex,
       selectedIndex: t,
       getDisabled: (a) => !!a.disabled
@@ -406,7 +427,7 @@ class k extends v {
       a.setAttribute("data-value", d.value), a.setAttribute("data-checked", l ? "true" : "false"), a.setAttribute("data-disabled", u ? "true" : "false"), a.setAttribute("aria-checked", l ? "true" : "false"), a.setAttribute("aria-disabled", u ? "true" : "false"), a.setAttribute("tabindex", String(c));
     });
     const o = Array.from(r);
-    m(o, o[this._focusIndex] || null, { activeAttribute: null });
+    k(o, o[this._focusIndex] || null, { activeAttribute: null });
   }
   _onClick(e) {
     const i = e.target;
@@ -429,13 +450,13 @@ class k extends v {
     }
     if (i === "Home") {
       e.preventDefault();
-      const r = p(this._options, "first", (o) => !!o.disabled);
+      const r = v(this._options, "first", (o) => !!o.disabled);
       r >= 0 && this._selectIndex(r, "keyboard");
       return;
     }
     if (i === "End") {
       e.preventDefault();
-      const r = p(this._options, "last", (o) => !!o.disabled);
+      const r = v(this._options, "last", (o) => !!o.disabled);
       r >= 0 && this._selectIndex(r, "keyboard");
       return;
     }
@@ -446,11 +467,11 @@ class k extends v {
     }
   }
   render() {
-    const e = I(this.getAttribute("size")), i = A(this.getAttribute("variant")), t = y(this.getAttribute("tone")), r = f(this.getAttribute("orientation"));
+    const e = w(this.getAttribute("size")), i = C(this.getAttribute("variant")), t = z(this.getAttribute("tone")), r = g(this.getAttribute("orientation"));
     this.setAttribute("role", "radiogroup"), this.setAttribute("aria-disabled", this._disabled ? "true" : "false"), this.setAttribute("aria-required", this._required ? "true" : "false"), this.setAttribute("aria-orientation", r);
     const o = this._findSelectedIndex(), a = o >= 0 ? o : this._findFirstEnabledIndex();
     (this._focusIndex < 0 || this._focusIndex >= this._options.length || this._options[this._focusIndex]?.disabled) && (this._focusIndex = a), this.setContent(`
-      <style>${_}</style>
+      <style>${I}</style>
       <div class="root" part="root" data-size="${e}" data-variant="${i}" data-tone="${t}">
         ${this._options.map((n, d) => {
       const l = d === a, u = this._disabled || !!n.disabled, c = d === this._focusIndex ? 0 : -1;
@@ -482,8 +503,10 @@ class k extends v {
   shouldRenderOnAttributeChange(e, i, t) {
     return e === "options";
   }
-}
-typeof customElements < "u" && !customElements.get("ui-radio-group") && customElements.define("ui-radio-group", k);
+};
+p.formAssociated = !0;
+let h = p;
+typeof customElements < "u" && !customElements.get("ui-radio-group") && customElements.define("ui-radio-group", h);
 export {
-  k as UIRadioGroup
+  h as UIRadioGroup
 };

package/dist/radio.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-DxbvhLJs.js"),u=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-CbUsP3D6.js"),u=`
   :host {
     --ui-radio-size: 16px;
     --ui-radio-hit-area: 24px;

package/dist/radio.esm.js

@@ -1,4 +1,4 @@
-import { E as l } from "./ElementBase-BeZT54Hj.mjs";
+import { E as l } from "./ElementBase-D5QsC5Vw.mjs";
 const u = `
   :host {
     --ui-radio-size: 16px;

package/dist/rating.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("./ElementBase-DxbvhLJs.js"),C=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("./ElementBase-CbUsP3D6.js"),C=`
   :host {
     --ui-rating-size: var(--ui-control-size, var(--ui-font-size-lg, 20px));
     --ui-rating-gap: var(--ui-control-gap, 6px);
@@ -317,7 +317,7 @@
     <svg viewBox="0 0 24 24" aria-hidden="true"${i?` class="${i}"`:""}>
       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
     </svg>
-  `}class k extends V.ElementBase{constructor(){super(),this._autoAriaLabel=!1,this._stars=[],this._value=0,this._max=5,this._precision=1,this._disabled=!1,this._readonly=!1,this._hoverValue=0,this._onHostKeyDown=t=>{t.composedPath()[0]===this&&this._onRootKeyDown(t,!0)},this._onRootClick=this._onRootClick.bind(this),this._onRootMouseMove=this._onRootMouseMove.bind(this),this._onRootMouseLeave=this._onRootMouseLeave.bind(this),this._onRootFocusIn=this._onRootFocusIn.bind(this),this._onRootFocusOut=this._onRootFocusOut.bind(this),this._onRootKeyDown=this._onRootKeyDown.bind(this)}static get observedAttributes(){return["value","max","precision","disabled","readonly","variant","size","headless","theme","tone","state","animation","shape","radius","aria-label","aria-labelledby","aria-describedby","label","show-value"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick,!0),this.root.addEventListener("mousemove",this._onRootMouseMove,!0),this.root.addEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.addEventListener("focusin",this._onRootFocusIn,!0),this.root.addEventListener("focusout",this._onRootFocusOut,!0),this.root.addEventListener("keydown",this._onRootKeyDown,!0),this.addEventListener("keydown",this._onHostKeyDown)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick,!0),this.root.removeEventListener("mousemove",this._onRootMouseMove,!0),this.root.removeEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.removeEventListener("focusin",this._onRootFocusIn,!0),this.root.removeEventListener("focusout",this._onRootFocusOut,!0),this.root.removeEventListener("keydown",this._onRootKeyDown,!0),this.removeEventListener("keydown",this._onHostKeyDown),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(t==="value"){const s=Number(r);Number.isFinite(s)&&(this._value=l(h(s,this._precision),0,this._max),this._syncStars(),this._syncAria())}if(t==="max"){const s=Number(r);Number.isFinite(s)&&s>0&&(this._max=Math.max(1,s),this._value>this._max&&(this._value=this._max),this._syncStars(),this._syncAria())}if(t==="precision"&&(this._precision=A(r),this._value=l(h(this._value,this._precision),0,this._max),this._hoverValue=this._hoverValue>0?l(h(this._hoverValue,this._precision),0,this._max):0,this._syncStars(),this._syncAria()),t==="disabled"&&(this._disabled=r!==null),t==="readonly"&&(this._readonly=r!==null),t==="animation"){const s=y(r);s?this.setAttribute("data-animation",s):this.removeAttribute("data-animation")}this.isConnected&&this.requestRender()}}get value(){return this._value}set value(t){const e=Number(t);if(!Number.isFinite(e))return;const r=l(h(e,this._precision),0,this._max);this._value!==r&&(this._value=r,this.setAttribute("value",String(this._value)),this._syncStars(),this._syncAria(),this._emit("change"),this._emit("input"))}get max(){return this._max}set max(t){const e=Number(t);Number.isFinite(e)&&(this._max=Math.max(1,e),this.setAttribute("max",String(this._max)),this._value>this._max&&(this._value=this._max,this.setAttribute("value",String(this._value))),this.requestRender())}get precision(){return this._precision}set precision(t){this._precision=t===.5?.5:1,this.setAttribute("precision",String(this._precision)),this._value=l(h(this._value,this._precision),0,this._max),this.requestRender()}get disabled(){return this._disabled}set disabled(t){this._disabled=!!t,this._disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.requestRender()}get readonly(){return this._readonly}set readonly(t){this._readonly=!!t,this._readonly?this.setAttribute("readonly",""):this.removeAttribute("readonly"),this.requestRender()}_getStarFromEventTarget(t){return t instanceof Element?t.closest(".star"):null}_getStarIndex(t){if(!t)return-1;const e=Number(t.dataset.index);return Number.isFinite(e)?e:-1}_getValueFromPointer(t,e){const r=this._getStarIndex(e);if(r===-1)return this._value;if(this._precision!==.5)return r+1;const s=e.getBoundingClientRect(),n=t.clientX-s.left<=s.width/2?.5:1;return r+n}_formatValue(t){return Number.isInteger(t)?String(t):t.toFixed(1)}_getAriaValueText(t){return`${this._formatValue(t)} out of ${this._max}`}_onRootClick(t){if(this._disabled||this._readonly)return;const e=t,r=this._getStarFromEventTarget(e.target);r&&(this.value=this._getValueFromPointer(e,r))}_onRootMouseMove(t){if(this._disabled||this._readonly)return;const e=t,r=this._getStarFromEventTarget(e.target);r&&(this._hoverValue=this._getValueFromPointer(e,r),this.setAttribute("state","hover"),this._syncStars())}_onRootMouseLeave(){this._disabled||this._readonly||(this._hoverValue=0,this.removeAttribute("state"),this._syncStars())}_onRootFocusIn(t){if(this._disabled||this._readonly)return;const e=this._getStarFromEventTarget(t.target),r=this._getStarIndex(e);r!==-1&&(this._hoverValue=r+1,this.setAttribute("state","focus"),this._syncStars())}_onRootFocusOut(){this._disabled||this._readonly||(this._hoverValue=0,this.removeAttribute("state"),this._syncStars())}_onRootKeyDown(t,e=!1){if(this._disabled||this._readonly)return;const r=t,s=this._getStarFromEventTarget(r.target),o=e?Math.max(0,Math.ceil(this._value)-1):this._getStarIndex(s);if(o===-1)return;let n=this._value;const u=this._precision;switch(r.key){case"ArrowRight":case"ArrowUp":case"+":n=l(this._value+u,0,this._max);break;case"ArrowLeft":case"ArrowDown":case"-":n=l(this._value-u,0,this._max);break;case"Home":n=0;break;case"End":n=this._max;break;case" ":case"Enter":n=o+1;break;default:return}r.preventDefault(),this.value=n}_getFillPercent(t,e){const r=e-(t-1);return r>=1?100:r<=0?0:r*100}_syncStars(){const t=this._hoverValue>0?this._hoverValue:this._value;this._stars.forEach((e,r)=>{const s=r+1,o=this._getFillPercent(s,t);if(e.style.setProperty("--fill-percent",`${o}%`),this._disabled){e.setAttribute("data-state","disabled"),e.setAttribute("aria-disabled","true");return}if(e.removeAttribute("aria-disabled"),this._hoverValue>0){o>0?e.setAttribute("data-state","hover"):e.removeAttribute("data-state");return}o>0?e.setAttribute("data-state","active"):e.removeAttribute("data-state")}),this._syncAria()}_syncAria(){const t=this._getAriaValueText(this._value);this.setAttribute("role","slider"),this.setAttribute("tabindex",this._disabled||this._readonly?"-1":"0"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this._max)),this.setAttribute("aria-valuenow",String(this._value)),this.setAttribute("aria-valuetext",t),this.setAttribute("aria-orientation","horizontal"),this.setAttribute("aria-disabled",this._disabled?"true":"false"),this.setAttribute("aria-readonly",this._readonly?"true":"false"),this._stars.forEach((e,r)=>{const s=r+1,o=this._getFillPercent(s,this._hoverValue>0?this._hoverValue:this._value);e.setAttribute("aria-hidden","true"),e.setAttribute("data-fill",String(o)),e.setAttribute("data-star-value",String(s))})}_emit(t){this.dispatchEvent(new CustomEvent(t,{detail:{value:this._value,max:this._max,precision:this._precision,disabled:this._disabled,readonly:this._readonly},bubbles:!0,composed:!0}))}render(){const t=g(this,"disabled"),e=g(this,"readonly"),r=$(a(this,"variant")),s=N(a(this,"size")),o=a(this,"theme"),n=I(a(this,"tone")),u=q(a(this,"state")),m=y(a(this,"animation")),d=T(a(this,"shape")),v=D(a(this,"radius")),R=A(a(this,"precision")),_=this._autoAriaLabel?null:a(this,"aria-label"),f=a(this,"aria-labelledby"),p=a(this,"aria-describedby"),c=a(this,"label"),b=g(this,"show-value"),S=a(this,"value"),E=a(this,"max");this._max=Math.max(1,Number(E)||5),this._precision=R,this._value=l(h(Number(S)||0,this._precision),0,this._max),this._disabled=t,this._readonly=e,m?this.setAttribute("data-animation",m):this.removeAttribute("data-animation"),o==="dark"||o==="brand"?this.setAttribute("theme",o):this.removeAttribute("theme"),n?this.setAttribute("tone",n):this.removeAttribute("tone"),u==="disabled"?this.setAttribute("state","disabled"):u!=="idle"?this.setAttribute("state",u):this.removeAttribute("state"),d==="square"||d==="pill"?this.setAttribute("shape",d):this.removeAttribute("shape"),r==="default"?this.removeAttribute("variant"):this.setAttribute("variant",r),s==="md"?this.removeAttribute("size"):this.setAttribute("size",s),v?this.style.setProperty("--ui-rating-radius",v):this.style.removeProperty("--ui-rating-radius"),this.setAttribute("precision",String(this._precision));const F=Array.from({length:this._max},(P,M)=>`
+  `}class k extends V.ElementBase{constructor(){super(),this._autoAriaLabel=!1,this._settingAutoLabel=!1,this._stars=[],this._value=0,this._max=5,this._precision=1,this._disabled=!1,this._readonly=!1,this._hoverValue=0,this._onHostKeyDown=t=>{t.composedPath()[0]===this&&this._onRootKeyDown(t,!0)},this._onRootClick=this._onRootClick.bind(this),this._onRootMouseMove=this._onRootMouseMove.bind(this),this._onRootMouseLeave=this._onRootMouseLeave.bind(this),this._onRootFocusIn=this._onRootFocusIn.bind(this),this._onRootFocusOut=this._onRootFocusOut.bind(this),this._onRootKeyDown=this._onRootKeyDown.bind(this)}static get observedAttributes(){return["value","max","precision","disabled","readonly","variant","size","headless","theme","tone","state","animation","shape","radius","aria-label","aria-labelledby","aria-describedby","label","show-value"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick,!0),this.root.addEventListener("mousemove",this._onRootMouseMove,!0),this.root.addEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.addEventListener("focusin",this._onRootFocusIn,!0),this.root.addEventListener("focusout",this._onRootFocusOut,!0),this.root.addEventListener("keydown",this._onRootKeyDown,!0),this.addEventListener("keydown",this._onHostKeyDown)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick,!0),this.root.removeEventListener("mousemove",this._onRootMouseMove,!0),this.root.removeEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.removeEventListener("focusin",this._onRootFocusIn,!0),this.root.removeEventListener("focusout",this._onRootFocusOut,!0),this.root.removeEventListener("keydown",this._onRootKeyDown,!0),this.removeEventListener("keydown",this._onHostKeyDown),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(t==="aria-label"&&!this._settingAutoLabel&&(this._autoAriaLabel=!1),t==="value"){const s=Number(r);Number.isFinite(s)&&(this._value=l(h(s,this._precision),0,this._max),this._syncStars(),this._syncAria())}if(t==="max"){const s=Number(r);Number.isFinite(s)&&s>0&&(this._max=Math.max(1,s),this._value>this._max&&(this._value=this._max),this._syncStars(),this._syncAria())}if(t==="precision"&&(this._precision=A(r),this._value=l(h(this._value,this._precision),0,this._max),this._hoverValue=this._hoverValue>0?l(h(this._hoverValue,this._precision),0,this._max):0,this._syncStars(),this._syncAria()),t==="disabled"&&(this._disabled=r!==null),t==="readonly"&&(this._readonly=r!==null),t==="animation"){const s=y(r);s?this.setAttribute("data-animation",s):this.removeAttribute("data-animation")}this.isConnected&&this.requestRender()}}get value(){return this._value}set value(t){const e=Number(t);if(!Number.isFinite(e))return;const r=l(h(e,this._precision),0,this._max);this._value!==r&&(this._value=r,this.setAttribute("value",String(this._value)),this._syncStars(),this._syncAria(),this._emit("change"),this._emit("input"))}get max(){return this._max}set max(t){const e=Number(t);Number.isFinite(e)&&(this._max=Math.max(1,e),this.setAttribute("max",String(this._max)),this._value>this._max&&(this._value=this._max,this.setAttribute("value",String(this._value))),this.requestRender())}get precision(){return this._precision}set precision(t){this._precision=t===.5?.5:1,this.setAttribute("precision",String(this._precision)),this._value=l(h(this._value,this._precision),0,this._max),this.requestRender()}get disabled(){return this._disabled}set disabled(t){this._disabled=!!t,this._disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.requestRender()}get readonly(){return this._readonly}set readonly(t){this._readonly=!!t,this._readonly?this.setAttribute("readonly",""):this.removeAttribute("readonly"),this.requestRender()}_getStarFromEventTarget(t){return t instanceof Element?t.closest(".star"):null}_getStarIndex(t){if(!t)return-1;const e=Number(t.dataset.index);return Number.isFinite(e)?e:-1}_getValueFromPointer(t,e){const r=this._getStarIndex(e);if(r===-1)return this._value;if(this._precision!==.5)return r+1;const s=e.getBoundingClientRect(),n=t.clientX-s.left<=s.width/2?.5:1;return r+n}_formatValue(t){return Number.isInteger(t)?String(t):t.toFixed(1)}_getAriaValueText(t){return`${this._formatValue(t)} out of ${this._max}`}_onRootClick(t){if(this._disabled||this._readonly)return;const e=t,r=this._getStarFromEventTarget(e.target);r&&(this.value=this._getValueFromPointer(e,r))}_onRootMouseMove(t){if(this._disabled||this._readonly)return;const e=t,r=this._getStarFromEventTarget(e.target);r&&(this._hoverValue=this._getValueFromPointer(e,r),this.setAttribute("state","hover"),this._syncStars())}_onRootMouseLeave(){this._disabled||this._readonly||(this._hoverValue=0,this.removeAttribute("state"),this._syncStars())}_onRootFocusIn(t){if(this._disabled||this._readonly)return;const e=this._getStarFromEventTarget(t.target),r=this._getStarIndex(e);r!==-1&&(this._hoverValue=r+1,this.setAttribute("state","focus"),this._syncStars())}_onRootFocusOut(){this._disabled||this._readonly||(this._hoverValue=0,this.removeAttribute("state"),this._syncStars())}_onRootKeyDown(t,e=!1){if(this._disabled||this._readonly)return;const r=t,s=this._getStarFromEventTarget(r.target),o=e?Math.max(0,Math.ceil(this._value)-1):this._getStarIndex(s);if(o===-1)return;let n=this._value;const u=this._precision;switch(r.key){case"ArrowRight":case"ArrowUp":case"+":n=l(this._value+u,0,this._max);break;case"ArrowLeft":case"ArrowDown":case"-":n=l(this._value-u,0,this._max);break;case"Home":n=0;break;case"End":n=this._max;break;case" ":case"Enter":n=o+1;break;default:return}r.preventDefault(),this.value=n}_getFillPercent(t,e){const r=e-(t-1);return r>=1?100:r<=0?0:r*100}_syncStars(){const t=this._hoverValue>0?this._hoverValue:this._value;this._stars.forEach((e,r)=>{const s=r+1,o=this._getFillPercent(s,t);if(e.style.setProperty("--fill-percent",`${o}%`),this._disabled){e.setAttribute("data-state","disabled"),e.setAttribute("aria-disabled","true");return}if(e.removeAttribute("aria-disabled"),this._hoverValue>0){o>0?e.setAttribute("data-state","hover"):e.removeAttribute("data-state");return}o>0?e.setAttribute("data-state","active"):e.removeAttribute("data-state")}),this._syncAria()}_syncAria(){const t=this._getAriaValueText(this._value);this.setAttribute("role","slider"),this.setAttribute("tabindex",this._disabled||this._readonly?"-1":"0"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this._max)),this.setAttribute("aria-valuenow",String(this._value)),this.setAttribute("aria-valuetext",t),this.setAttribute("aria-orientation","horizontal"),this.setAttribute("aria-disabled",this._disabled?"true":"false"),this.setAttribute("aria-readonly",this._readonly?"true":"false"),this._stars.forEach((e,r)=>{const s=r+1,o=this._getFillPercent(s,this._hoverValue>0?this._hoverValue:this._value);e.setAttribute("aria-hidden","true"),e.setAttribute("data-fill",String(o)),e.setAttribute("data-star-value",String(s))})}_emit(t){this.dispatchEvent(new CustomEvent(t,{detail:{value:this._value,max:this._max,precision:this._precision,disabled:this._disabled,readonly:this._readonly},bubbles:!0,composed:!0}))}render(){const t=g(this,"disabled"),e=g(this,"readonly"),r=$(a(this,"variant")),s=N(a(this,"size")),o=a(this,"theme"),n=I(a(this,"tone")),u=q(a(this,"state")),m=y(a(this,"animation")),d=T(a(this,"shape")),v=D(a(this,"radius")),R=A(a(this,"precision")),_=this._autoAriaLabel?null:a(this,"aria-label"),f=a(this,"aria-labelledby"),p=a(this,"aria-describedby"),c=a(this,"label"),b=g(this,"show-value"),S=a(this,"value"),L=a(this,"max");this._max=Math.max(1,Number(L)||5),this._precision=R,this._value=l(h(Number(S)||0,this._precision),0,this._max),this._disabled=t,this._readonly=e,m?this.setAttribute("data-animation",m):this.removeAttribute("data-animation"),o==="dark"||o==="brand"?this.setAttribute("theme",o):this.removeAttribute("theme"),n?this.setAttribute("tone",n):this.removeAttribute("tone"),u==="disabled"?this.setAttribute("state","disabled"):u!=="idle"?this.setAttribute("state",u):this.removeAttribute("state"),d==="square"||d==="pill"?this.setAttribute("shape",d):this.removeAttribute("shape"),r==="default"?this.removeAttribute("variant"):this.setAttribute("variant",r),s==="md"?this.removeAttribute("size"):this.setAttribute("size",s),v?this.style.setProperty("--ui-rating-radius",v):this.style.removeProperty("--ui-rating-radius"),this.setAttribute("precision",String(this._precision));const E=Array.from({length:this._max},(P,M)=>`
       <span
         class="star"
         aria-hidden="true"
@@ -334,19 +334,19 @@
           </span>
         </span>
       </span>
-    `).join(""),L=b?`${this._formatValue(this._value)} / ${this._max}`:"";this.setContent(`
+    `).join(""),F=b?`${this._formatValue(this._value)} / ${this._max}`:"";if(this.setContent(`
       <style>${C}</style>
       <div
         class="stars"
         part="stars"
         aria-hidden="true"
       >
-        ${F}
+        ${E}
       </div>
       ${c||b?`
             <div class="label" part="label">
               ${c?`<span class="label-text">${w(c)}</span>`:""}
-              ${b?`<span class="value">${w(L)}</span>`:""}
+              ${b?`<span class="value">${w(F)}</span>`:""}
             </div>
           `:""}
-    `),queueMicrotask(()=>{this._stars=Array.from(this.root.querySelectorAll(".star")),this._syncStars()}),this._autoAriaLabel=!1,_?this.setAttribute("aria-label",_):f?this.removeAttribute("aria-label"):(this.setAttribute("aria-label",(c||"").trim()||"Rating"),this._autoAriaLabel=!0),f?this.setAttribute("aria-labelledby",f):this.removeAttribute("aria-labelledby"),p?this.setAttribute("aria-describedby",p):this.removeAttribute("aria-describedby"),this._disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this._readonly?this.setAttribute("readonly",""):this.removeAttribute("readonly"),this._syncAria()}}typeof customElements<"u"&&!customElements.get("ui-rating")&&customElements.define("ui-rating",k);exports.UIRating=k;
+    `),queueMicrotask(()=>{this._stars=Array.from(this.root.querySelectorAll(".star")),this._syncStars()}),this._autoAriaLabel=!1,_)this.setAttribute("aria-label",_);else if(f)this.removeAttribute("aria-label");else{this._settingAutoLabel=!0;try{this.setAttribute("aria-label",(c||"").trim()||"Rating")}finally{this._settingAutoLabel=!1}this._autoAriaLabel=!0}f?this.setAttribute("aria-labelledby",f):this.removeAttribute("aria-labelledby"),p?this.setAttribute("aria-describedby",p):this.removeAttribute("aria-describedby"),this._disabled?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this._readonly?this.setAttribute("readonly",""):this.removeAttribute("readonly"),this._syncAria()}}typeof customElements<"u"&&!customElements.get("ui-rating")&&customElements.define("ui-rating",k);exports.UIRating=k;

package/dist/rating.esm.js

@@ -1,4 +1,4 @@
-import { E as M } from "./ElementBase-BeZT54Hj.mjs";
+import { E as M } from "./ElementBase-D5QsC5Vw.mjs";
 const V = `
   :host {
     --ui-rating-size: var(--ui-control-size, var(--ui-font-size-lg, 20px));
@@ -376,7 +376,7 @@ function z(i) {
 }
 class q extends M {
   constructor() {
-    super(), this._autoAriaLabel = !1, this._stars = [], this._value = 0, this._max = 5, this._precision = 1, this._disabled = !1, this._readonly = !1, this._hoverValue = 0, this._onHostKeyDown = (t) => {
+    super(), this._autoAriaLabel = !1, this._settingAutoLabel = !1, this._stars = [], this._value = 0, this._max = 5, this._precision = 1, this._disabled = !1, this._readonly = !1, this._hoverValue = 0, this._onHostKeyDown = (t) => {
       t.composedPath()[0] === this && this._onRootKeyDown(t, !0);
     }, this._onRootClick = this._onRootClick.bind(this), this._onRootMouseMove = this._onRootMouseMove.bind(this), this._onRootMouseLeave = this._onRootMouseLeave.bind(this), this._onRootFocusIn = this._onRootFocusIn.bind(this), this._onRootFocusOut = this._onRootFocusOut.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this);
   }
@@ -411,7 +411,7 @@ class q extends M {
   }
   attributeChangedCallback(t, e, r) {
     if (e !== r) {
-      if (t === "value") {
+      if (t === "aria-label" && !this._settingAutoLabel && (this._autoAriaLabel = !1), t === "value") {
         const s = Number(r);
         Number.isFinite(s) && (this._value = l(h(s, this._precision), 0, this._max), this._syncStars(), this._syncAria());
       }
@@ -579,11 +579,11 @@ class q extends M {
   render() {
     const t = g(this, "disabled"), e = g(this, "readonly"), r = C(a(this, "variant")), s = $(a(this, "size")), o = a(this, "theme"), n = T(a(this, "tone")), u = I(a(this, "state")), m = y(a(this, "animation")), d = N(a(this, "shape")), v = D(a(this, "radius")), k = A(a(this, "precision")), _ = this._autoAriaLabel ? null : a(this, "aria-label"), f = a(this, "aria-labelledby"), p = a(this, "aria-describedby"), c = a(this, "label"), b = g(this, "show-value"), R = a(this, "value"), S = a(this, "max");
     this._max = Math.max(1, Number(S) || 5), this._precision = k, this._value = l(h(Number(R) || 0, this._precision), 0, this._max), this._disabled = t, this._readonly = e, m ? this.setAttribute("data-animation", m) : this.removeAttribute("data-animation"), o === "dark" || o === "brand" ? this.setAttribute("theme", o) : this.removeAttribute("theme"), n ? this.setAttribute("tone", n) : this.removeAttribute("tone"), u === "disabled" ? this.setAttribute("state", "disabled") : u !== "idle" ? this.setAttribute("state", u) : this.removeAttribute("state"), d === "square" || d === "pill" ? this.setAttribute("shape", d) : this.removeAttribute("shape"), r === "default" ? this.removeAttribute("variant") : this.setAttribute("variant", r), s === "md" ? this.removeAttribute("size") : this.setAttribute("size", s), v ? this.style.setProperty("--ui-rating-radius", v) : this.style.removeProperty("--ui-rating-radius"), this.setAttribute("precision", String(this._precision));
-    const E = Array.from({ length: this._max }, (H, L) => `
+    const L = Array.from({ length: this._max }, (H, F) => `
       <span
         class="star"
         aria-hidden="true"
-        data-index="${L}"
+        data-index="${F}"
         part="star"
         style="--fill-percent: 0%;"
       >
@@ -596,25 +596,36 @@ class q extends M {
           </span>
         </span>
       </span>
-    `).join(""), F = b ? `${this._formatValue(this._value)} / ${this._max}` : "";
-    this.setContent(`
+    `).join(""), E = b ? `${this._formatValue(this._value)} / ${this._max}` : "";
+    if (this.setContent(`
       <style>${V}</style>
       <div
         class="stars"
         part="stars"
         aria-hidden="true"
       >
-        ${E}
+        ${L}
       </div>
       ${c || b ? `
             <div class="label" part="label">
               ${c ? `<span class="label-text">${w(c)}</span>` : ""}
-              ${b ? `<span class="value">${w(F)}</span>` : ""}
+              ${b ? `<span class="value">${w(E)}</span>` : ""}
             </div>
           ` : ""}
     `), queueMicrotask(() => {
       this._stars = Array.from(this.root.querySelectorAll(".star")), this._syncStars();
-    }), this._autoAriaLabel = !1, _ ? this.setAttribute("aria-label", _) : f ? this.removeAttribute("aria-label") : (this.setAttribute("aria-label", (c || "").trim() || "Rating"), this._autoAriaLabel = !0), f ? this.setAttribute("aria-labelledby", f) : this.removeAttribute("aria-labelledby"), p ? this.setAttribute("aria-describedby", p) : this.removeAttribute("aria-describedby"), this._disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled"), this._readonly ? this.setAttribute("readonly", "") : this.removeAttribute("readonly"), this._syncAria();
+    }), this._autoAriaLabel = !1, _) this.setAttribute("aria-label", _);
+    else if (f) this.removeAttribute("aria-label");
+    else {
+      this._settingAutoLabel = !0;
+      try {
+        this.setAttribute("aria-label", (c || "").trim() || "Rating");
+      } finally {
+        this._settingAutoLabel = !1;
+      }
+      this._autoAriaLabel = !0;
+    }
+    f ? this.setAttribute("aria-labelledby", f) : this.removeAttribute("aria-labelledby"), p ? this.setAttribute("aria-describedby", p) : this.removeAttribute("aria-describedby"), this._disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled"), this._readonly ? this.setAttribute("readonly", "") : this.removeAttribute("readonly"), this._syncAria();
   }
 }
 typeof customElements < "u" && !customElements.get("ui-rating") && customElements.define("ui-rating", q);