@moni-labs/moni-ui 0.4.1 → 0.4.2

package/dist/cdn/chunks/decorate-DxX3e27g.js

@@ -0,0 +1,738 @@
+var e=globalThis,t=e.ShadowRoot&&(e.ShadyCSS===void 0||e.ShadyCSS.nativeShadow)&&`adoptedStyleSheets`in Document.prototype&&`replace`in CSSStyleSheet.prototype,n=Symbol(),r=new WeakMap,i=class{constructor(e,t,r){if(this._$cssResult$=!0,r!==n)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,n=this.t;if(t&&e===void 0){let t=n!==void 0&&n.length===1;t&&(e=r.get(n)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&r.set(n,e))}return e}toString(){return this.cssText}},a=e=>new i(typeof e==`string`?e:e+``,void 0,n),o=(e,...t)=>new i(e.length===1?e[0]:t.reduce((t,n,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if(typeof e==`number`)return e;throw Error(`Value passed to 'css' function must be a 'css' function result: `+e+`. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(n)+e[r+1],e[0]),e,n),s=(n,r)=>{if(t)n.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let t of r){let r=document.createElement(`style`),i=e.litNonce;i!==void 0&&r.setAttribute(`nonce`,i),r.textContent=t.cssText,n.appendChild(r)}},c=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t=``;for(let n of e.cssRules)t+=n.cssText;return a(t)})(e):e,{is:l,defineProperty:u,getOwnPropertyDescriptor:d,getOwnPropertyNames:ee,getOwnPropertySymbols:te,getPrototypeOf:ne}=Object,f=globalThis,p=f.trustedTypes,re=p?p.emptyScript:``,ie=f.reactiveElementPolyfillSupport,m=(e,t)=>e,h={toAttribute(e,t){switch(t){case Boolean:e=e?re:null;break;case Object:case Array:e=e==null?e:JSON.stringify(e)}return e},fromAttribute(e,t){let n=e;switch(t){case Boolean:n=e!==null;break;case Number:n=e===null?null:Number(e);break;case Object:case Array:try{n=JSON.parse(e)}catch{n=null}}return n}},g=(e,t)=>!l(e,t),_={attribute:!0,type:String,converter:h,reflect:!1,useDefault:!1,hasChanged:g};Symbol.metadata??=Symbol(`metadata`),f.litPropertyMetadata??=new WeakMap;var v=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=_){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let n=Symbol(),r=this.getPropertyDescriptor(e,n,t);r!==void 0&&u(this.prototype,e,r)}}static getPropertyDescriptor(e,t,n){let{get:r,set:i}=d(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){let a=r?.call(this);i?.call(this,t),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??_}static _$Ei(){if(this.hasOwnProperty(m(`elementProperties`)))return;let e=ne(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(m(`finalized`)))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m(`properties`))){let e=this.properties,t=[...ee(e),...te(e)];for(let n of t)this.createProperty(n,e[n])}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[e,n]of t)this.elementProperties.set(e,n)}this._$Eh=new Map;for(let[e,t]of this.elementProperties){let n=this._$Eu(e,t);n!==void 0&&this._$Eh.set(n,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let n=new Set(e.flat(1/0).reverse());for(let e of n)t.unshift(c(e))}else e!==void 0&&t.push(c(e));return t}static _$Eu(e,t){let n=t.attribute;return!1===n?void 0:typeof n==`string`?n:typeof e==`string`?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,t=this.constructor.elementProperties;for(let n of t.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,n){this._$AK(e,n)}_$ET(e,t){let n=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,n);if(r!==void 0&&!0===n.reflect){let i=(n.converter?.toAttribute===void 0?h:n.converter).toAttribute(t,n.type);this._$Em=e,i==null?this.removeAttribute(r):this.setAttribute(r,i),this._$Em=null}}_$AK(e,t){let n=this.constructor,r=n._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let e=n.getPropertyOptions(r),i=typeof e.converter==`function`?{fromAttribute:e.converter}:e.converter?.fromAttribute===void 0?h:e.converter;this._$Em=r;let a=i.fromAttribute(t,e.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,t,n,r=!1,i){if(e!==void 0){let a=this.constructor;if(!1===r&&(i=this[e]),n??=a.getPropertyOptions(e),!((n.hasChanged??g)(i,t)||n.useDefault&&n.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(a._$Eu(e,n))))return;this.C(e,t,n)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:n,reflect:r,wrapped:i},a){n&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==i||a!==void 0)||(this._$AL.has(e)||(this.hasUpdated||n||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}let e=this.constructor.elementProperties;if(e.size>0)for(let[t,n]of e){let{wrapped:e}=n,r=this[t];!0!==e||this._$AL.has(t)||r===void 0||this.C(t,void 0,n,r)}}let e=!1,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}};v.elementStyles=[],v.shadowRootOptions={mode:`open`},v[m(`elementProperties`)]=new Map,v[m(`finalized`)]=new Map,ie?.({ReactiveElement:v}),(f.reactiveElementVersions??=[]).push(`2.1.2`);var y=globalThis,b=e=>e,x=y.trustedTypes,ae=x?x.createPolicy(`lit-html`,{createHTML:e=>e}):void 0,S=`$lit$`,C=`lit$${Math.random().toFixed(9).slice(2)}$`,w=`?`+C,oe=`<${w}>`,T=document,E=()=>T.createComment(``),D=e=>e===null||typeof e!=`object`&&typeof e!=`function`,O=Array.isArray,k=e=>O(e)||typeof e?.[Symbol.iterator]==`function`,A=`[ 	
+\f\r]`,j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,se=/-->/g,ce=/>/g,M=RegExp(`>|${A}(?:([^\\s"'>=/]+)(${A}*=${A}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),N=/'/g,P=/"/g,F=/^(?:script|style|textarea|title)$/i,I=e=>(t,...n)=>({_$litType$:e,strings:t,values:n}),le=I(1),ue=I(2),de=I(3),L=Symbol.for(`lit-noChange`),R=Symbol.for(`lit-nothing`),z=new WeakMap,B=T.createTreeWalker(T,129);function V(e,t){if(!O(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return ae===void 0?t:ae.createHTML(t)}var H=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=j;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===j?c[1]===`!--`?o=se:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=M):(F.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=M):o=ce:o===M?c[0]===`>`?(o=i??j,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?M:c[3]===`"`?P:N):o===P||o===N?o=M:o===se||o===ce?o=j:(o=M,i=void 0);let d=o===M&&e[t+1].startsWith(`/>`)?` `:``;a+=o===j?n+oe:l>=0?(r.push(s),n.slice(0,l)+S+n.slice(l)+C+d):n+C+(l===-2?t:d)}return[V(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]},U=class e{constructor({strings:t,_$litType$:n},r){let i;this.parts=[];let a=0,o=0,s=t.length-1,c=this.parts,[l,u]=H(t,n);if(this.el=e.createElement(l,r),B.currentNode=this.el.content,n===2||n===3){let e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;(i=B.nextNode())!==null&&c.length<s;){if(i.nodeType===1){if(i.hasAttributes())for(let e of i.getAttributeNames())if(e.endsWith(S)){let t=u[o++],n=i.getAttribute(e).split(C),r=/([.?@])?(.*)/.exec(t);c.push({type:1,index:a,name:r[2],strings:n,ctor:r[1]===`.`?J:r[1]===`?`?Y:r[1]===`@`?fe:q}),i.removeAttribute(e)}else e.startsWith(C)&&(c.push({type:6,index:a}),i.removeAttribute(e));if(F.test(i.tagName)){let e=i.textContent.split(C),t=e.length-1;if(t>0){i.textContent=x?x.emptyScript:``;for(let n=0;n<t;n++)i.append(e[n],E()),B.nextNode(),c.push({type:2,index:++a});i.append(e[t],E())}}}else if(i.nodeType===8){if(i.data===w)c.push({type:2,index:a});else{let e=-1;for(;(e=i.data.indexOf(C,e+1))!==-1;)c.push({type:7,index:a}),e+=C.length-1}}a++}}static createElement(e,t){let n=T.createElement(`template`);return n.innerHTML=e,n}};function W(e,t,n=e,r){if(t===L)return t;let i=r===void 0?n._$Cl:n._$Co?.[r],a=D(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),a===void 0?i=void 0:(i=new a(e),i._$AT(e,n,r)),r===void 0?n._$Cl=i:(n._$Co??=[])[r]=i),i!==void 0&&(t=W(e,i._$AS(e,t.values),i,r)),t}var G=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:n}=this._$AD,r=(e?.creationScope??T).importNode(t,!0);B.currentNode=r;let i=B.nextNode(),a=0,o=0,s=n[0];for(;s!==void 0;){if(a===s.index){let t;s.type===2?t=new K(i,i.nextSibling,this,e):s.type===1?t=new s.ctor(i,s.name,s.strings,this,e):s.type===6&&(t=new X(i,this,e)),this._$AV.push(t),s=n[++o]}a!==s?.index&&(i=B.nextNode(),a++)}return B.currentNode=T,r}p(e){let t=0;for(let n of this._$AV)n!==void 0&&(n.strings===void 0?n._$AI(e[t]):(n._$AI(e,n,t),t+=n.strings.length-2)),t++}},K=class e{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,n,r){this.type=2,this._$AH=R,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=W(this,e,t),D(e)?e===R||e==null||e===``?(this._$AH!==R&&this._$AR(),this._$AH=R):e!==this._$AH&&e!==L&&this._(e):e._$litType$===void 0?e.nodeType===void 0?k(e)?this.k(e):this._(e):this.T(e):this.$(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==R&&D(this._$AH)?this._$AA.nextSibling.data=e:this.T(T.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:n}=e,r=typeof n==`number`?this._$AC(e):(n.el===void 0&&(n.el=U.createElement(V(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(t);else{let e=new G(r,this),n=e.u(this.options);e.p(t),this.T(n),this._$AH=e}}_$AC(e){let t=z.get(e.strings);return t===void 0&&z.set(e.strings,t=new U(e)),t}k(t){O(this._$AH)||(this._$AH=[],this._$AR());let n=this._$AH,r,i=0;for(let a of t)i===n.length?n.push(r=new e(this.O(E()),this.O(E()),this,this.options)):r=n[i],r._$AI(a),i++;i<n.length&&(this._$AR(r&&r._$AB.nextSibling,i),n.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=b(e).nextSibling;b(e).remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},q=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,r,i){this.type=1,this._$AH=R,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,n.length>2||n[0]!==``||n[1]!==``?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=R}_$AI(e,t=this,n,r){let i=this.strings,a=!1;if(i===void 0)e=W(this,e,t,0),a=!D(e)||e!==this._$AH&&e!==L,a&&(this._$AH=e);else{let r=e,o,s;for(e=i[0],o=0;o<i.length-1;o++)s=W(this,r[n+o],t,o),s===L&&(s=this._$AH[o]),a||=!D(s)||s!==this._$AH[o],s===R?e=R:e!==R&&(e+=(s??``)+i[o+1]),this._$AH[o]=s}a&&!r&&this.j(e)}j(e){e===R?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??``)}},J=class extends q{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===R?void 0:e}},Y=class extends q{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==R)}},fe=class extends q{constructor(e,t,n,r,i){super(e,t,n,r,i),this.type=5}_$AI(e,t=this){if((e=W(this,e,t,0)??R)===L)return;let n=this._$AH,r=e===R&&n!==R||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,i=e!==R&&(n===R||r);r&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH==`function`?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},X=class{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){W(this,e)}},pe={M:S,P:C,A:w,C:1,L:H,R:G,D:k,V:W,I:K,H:q,N:Y,U:fe,B:J,F:X},me=y.litHtmlPolyfillSupport;me?.(U,K),(y.litHtmlVersions??=[]).push(`3.3.3`);var he=(e,t,n)=>{let r=n?.renderBefore??t,i=r._$litPart$;if(i===void 0){let e=n?.renderBefore??null;r._$litPart$=i=new K(t.insertBefore(E(),e),e,void 0,n??{})}return i._$AI(e),i},Z=globalThis,Q=class extends v{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=he(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return L}};Q._$litElement$=!0,Q.finalized=!0,Z.litElementHydrateSupport?.({LitElement:Q});var ge=Z.litElementPolyfillSupport;ge?.({LitElement:Q}),(Z.litElementVersions??=[]).push(`4.2.2`);var _e=e=>(t,n)=>{n===void 0?customElements.define(e,t):n.addInitializer(()=>{customElements.define(e,t)})},ve={attribute:!0,type:String,converter:h,reflect:!1,hasChanged:g},ye=(e=ve,t,n)=>{let{kind:r,metadata:i}=n,a=globalThis.litPropertyMetadata.get(i);if(a===void 0&&globalThis.litPropertyMetadata.set(i,a=new Map),r===`setter`&&((e=Object.create(e)).wrapped=!0),a.set(n.name,e),r===`accessor`){let{name:r}=n;return{set(n){let i=t.get.call(this);t.set.call(this,n),this.requestUpdate(r,i,e,!0,n)},init(t){return t!==void 0&&this.C(r,void 0,e,t),t}}}if(r===`setter`){let{name:r}=n;return function(n){let i=this[r];t.call(this,n),this.requestUpdate(r,i,e,!0,n)}}throw Error(`Unsupported decorator location: `+r)};function $(e){return(t,n)=>typeof n==`object`?ye(e,t,n):((e,t,n)=>{let r=t.hasOwnProperty(n);return t.constructor.createProperty(n,e),r?Object.getOwnPropertyDescriptor(t,n):void 0})(e,t,n)}function be(e){return $({...e,state:!0,attribute:!1})}var xe=class extends Q{constructor(...e){super(...e),this._isBaseInViewport=!1,this._handleGlobalSlotClick=e=>{let t=e.composedPath().find(e=>e instanceof HTMLSlotElement);if(t){let n=t.name||`default`;this.dispatchEvent(new CustomEvent(`slot-click`,{bubbles:!0,composed:!0,detail:{originalEvent:e,slotName:n,originalTarget:e.target}}))}}}createRenderRoot(){return super.createRenderRoot()}connectedCallback(){super.connectedCallback(),typeof IntersectionObserver<`u`&&(this._globalIntersectionObserver=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting!==this._isBaseInViewport&&(this._isBaseInViewport=e.isIntersecting,this.dispatchEvent(new CustomEvent(this._isBaseInViewport?`moni-enter-viewport`:`moni-leave-viewport`,{bubbles:!0,composed:!0,detail:{element:this}})))})},{threshold:[0,1]}),this._globalIntersectionObserver.observe(this)),typeof ResizeObserver<`u`&&(this._globalResizeObserver=new ResizeObserver(e=>{e.forEach(e=>{this.dispatchEvent(new CustomEvent(`moni-resize`,{bubbles:!0,composed:!0,detail:{contentRect:e.contentRect,element:this}}))})}),this._globalResizeObserver.observe(this)),this.addEventListener(`click`,this._handleGlobalSlotClick)}disconnectedCallback(){super.disconnectedCallback(),this._globalIntersectionObserver?.disconnect(),this._globalResizeObserver?.disconnect(),this.removeEventListener(`click`,this._handleGlobalSlotClick)}},Se=o`
+	/* ─── 1. Box-sizing reset ─────────────────────────────────────────────── */
+	:host {
+		box-sizing: border-box;
+		font-family: var(--font);
+		font-style: normal;
+		position: relative;
+		color: var(--on-surface);
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+		font-style: normal;
+	}
+
+	::slotted(*) {
+		font-style: normal;
+	}
+
+	/* ─── 2. CSS custom property bridge ──────────────────────────────────── */
+	/* Each token resolves in order: Moni namespace → MD3 spec → M3 default.   */
+	:host {
+		/* ─── Primary palette ─── */
+		--primary: var(--moni-primary, var(--md-sys-color-primary, #6750A4));
+		--on-primary: var(--moni-on-primary, var(--md-sys-color-on-primary, #ffffff));
+		--primary-container: var(--moni-primary-container, var(--md-sys-color-primary-container, #eaddff));
+		--on-primary-container: var(--moni-on-primary-container, var(--md-sys-color-on-primary-container, #21005d));
+
+		/* ─── Secondary palette ─── */
+		--secondary: var(--moni-secondary, var(--md-sys-color-secondary, #625b71));
+		--on-secondary: var(--moni-on-secondary, var(--md-sys-color-on-secondary, #ffffff));
+		--secondary-container: var(--moni-secondary-container, var(--md-sys-color-secondary-container, #e8def8));
+		--on-secondary-container: var(--moni-on-secondary-container, var(--md-sys-color-on-secondary-container, #1d192b));
+
+		/* ─── Tertiary palette ─── */
+		--tertiary: var(--moni-tertiary, var(--md-sys-color-tertiary, #7d5260));
+		--on-tertiary: var(--moni-on-tertiary, var(--md-sys-color-on-tertiary, #ffffff));
+		--tertiary-container: var(--moni-tertiary-container, var(--md-sys-color-tertiary-container, #ffd8e4));
+		--on-tertiary-container: var(--moni-on-tertiary-container, var(--md-sys-color-on-tertiary-container, #31111d));
+
+		/* ─── Error palette ─── */
+		--error: var(--moni-error, var(--md-sys-color-error, #b3261e));
+		--on-error: var(--moni-on-error, var(--md-sys-color-on-error, #ffffff));
+		--error-container: var(--moni-error-container, var(--md-sys-color-error-container, #f9dedc));
+		--on-error-container: var(--moni-on-error-container, var(--md-sys-color-on-error-container, #410e0b));
+
+		/* ─── Background & surface ─── */
+		--background: var(--moni-background, var(--md-sys-color-background, #fef7ff));
+		--on-background: var(--moni-on-background, var(--md-sys-color-on-background, #1d1b20));
+		--surface: var(--moni-surface, var(--md-sys-color-surface, #fef7ff));
+		--on-surface: var(--moni-on-surface, var(--md-sys-color-on-surface, #1d1b20));
+		--surface-variant: var(--moni-surface-variant, var(--md-sys-color-surface-variant, #e7e0ec));
+		--on-surface-variant: var(--moni-on-surface-variant, var(--md-sys-color-on-surface-variant, #49454f));
+
+		/* ─── Outline ─── */
+		--outline: var(--moni-outline, var(--md-sys-color-outline, #79747e));
+		--outline-variant: var(--moni-outline-variant, var(--md-sys-color-outline-variant, #cac4d0));
+
+		/* ─── Surface container hierarchy (5-level elevation tones) ─── */
+		--surface-container-lowest: var(--moni-surface-container-lowest, var(--md-sys-color-surface-container-lowest, #ffffff));
+		--surface-container-low: var(--moni-surface-container-low, var(--md-sys-color-surface-container-low, #f7f2fa));
+		--surface-container: var(--moni-surface-container, var(--md-sys-color-surface-container, #f3edf7));
+		--surface-container-high: var(--moni-surface-container-high, var(--md-sys-color-surface-container-high, #ece6f0));
+		--surface-container-highest: var(--moni-surface-container-highest, var(--md-sys-color-surface-container-highest, #e6e1e5));
+
+		/* ─── Inverse surfaces (snackbar, tooltip) ─── */
+		--inverse-surface: var(--moni-inverse-surface, var(--md-sys-color-inverse-surface, #313033));
+		--inverse-on-surface: var(--moni-inverse-on-surface, var(--md-sys-color-inverse-on-surface, #f4f0f4));
+		--inverse-primary: var(--moni-inverse-primary, var(--md-sys-color-inverse-primary, #d0bcff));
+
+		/* ─── Structural / non-color tokens ─── */
+		/* Scrim overlay used in modals, bottom sheets, dialogs. */
+		--shadow: 0 0 0 0 transparent;
+		--scrim: rgb(0 0 0 / 0.5);
+		/* State layer color for hover/pressed overlays. */
+		--active: color-mix(in srgb, currentColor 10%, transparent);
+		--overlay: rgb(0 0 0 / 0.5);
+		--image: linear-gradient(currentColor 0 0);
+
+		/* ─── Typography tokens ─── */
+		--font: var(--moni-font-sans, 'Geist', system-ui, -apple-system, sans-serif);
+		--font-title: var(
+			--moni-font-title,
+			'Instrument Serif',
+			Georgia,
+			serif
+		);
+		--font-mono: 'Geist Mono', 'Fira Code', monospace;
+		/* Icon font: override via --font-icon-override to use a different icon set. */
+		--font-icon: var(--font-icon-override, 'Material Symbols Rounded');
+
+		/* ─── Elevation shadows (MD3 tonal levels 1–3) ─── */
+		--elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
+		--elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
+		--elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
+
+		/* ─── Transition speed scale ─── */
+		/* speed1 = fastest micro-interactions; speed4 = slowest page transitions. */
+		--speed1: 100ms;
+		--speed2: 200ms;
+		--speed3: 300ms;
+		--speed4: 400ms;
+	}
+
+	/* ─── 3. MD3 --color-* backward-compatibility aliases ─────────────── */
+	/* These map the older --color-<role> naming convention used in legacy     */
+	/* Moni apps to the primary bare tokens above. Do not remove.              */
+	:host {
+		--color-primary: var(--primary);
+		--color-on-primary: var(--on-primary);
+		--color-primary-container: var(--primary-container);
+		--color-on-primary-container: var(--on-primary-container);
+
+		--color-secondary: var(--secondary);
+		--color-on-secondary: var(--on-secondary);
+		--color-secondary-container: var(--secondary-container);
+		--color-on-secondary-container: var(--on-secondary-container);
+
+		--color-tertiary: var(--tertiary);
+		--color-on-tertiary: var(--on-tertiary);
+		--color-tertiary-container: var(--tertiary-container);
+		--color-on-tertiary-container: var(--on-tertiary-container);
+
+		--color-error: var(--error);
+		--color-on-error: var(--on-error);
+		--color-error-container: var(--error-container);
+		--color-on-error-container: var(--on-error-container);
+
+		--color-background: var(--background);
+		--color-on-background: var(--on-background);
+		--color-surface: var(--surface);
+		--color-on-surface: var(--on-surface);
+		--color-surface-variant: var(--surface-variant);
+		--color-on-surface-variant: var(--on-surface-variant);
+
+		--color-outline: var(--outline);
+		--color-outline-variant: var(--outline-variant);
+
+		--color-surface-container-lowest: var(--surface-container-lowest);
+		--color-surface-container-low: var(--surface-container-low);
+		--color-surface-container: var(--surface-container);
+		--color-surface-container-high: var(--surface-container-high);
+		--color-surface-container-highest: var(--surface-container-highest);
+
+		--color-inverse-surface: var(--inverse-surface);
+		--color-inverse-on-surface: var(--inverse-on-surface);
+		--color-inverse-primary: var(--inverse-primary);
+
+		/* Named aliases for tokens defined in the legacy tokens.css stylesheet. */
+		--font-sans: var(--font);
+		--shadow-1: var(--elevate1);
+		--shadow-2: var(--elevate2);
+		--shadow-3: var(--elevate3);
+		--radius-sm: 0.5rem;
+		--radius-md: 0.75rem;
+		--radius-lg: 1.5rem;
+		--ease-standard: cubic-bezier(0.2, 0, 0, 1);
+		--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+		--duration-fast: 150ms;
+		--duration-normal: 250ms;
+	}
+
+	/* ─── 4. Utility classes ─────────────────────────────────────────────── */
+
+	/**
+	 * Clamps text to a single line with an ellipsis when overflow occurs.
+	 * Apply to any element inside a shadow root where text needs to be truncated.
+	 */
+	.truncate {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	/**
+	 * Visually hides an element while keeping it accessible to screen readers
+	 * and maintaining its position in the DOM and tab order.
+	 * Use for labeling icon-only buttons, skip links, etc.
+	 */
+	.visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+`,Ce=o`
+	:host {
+		display: block;
+		/* Fields are full-width by default; the parent layout controls sizing. */
+		inline-size: 100%;
+	}
+
+	/* ─── Base field container ───────────────────────────────────────────────── */
+	.field {
+		/* Internal height token — overridden by size modifiers (.small, .large, .extra). */
+		--_input: 3rem;
+		/* Vertical start offset used for textarea padding and label positioning. */
+		--_start: 1.2rem;
+		/* Computed vertical center — used to position absolutely-placed icons. */
+		--_middle: calc(var(--_input, 0) / 2);
+
+		/* Default field shape: bottom border only (BeerCSS / MD3 "filled" style). */
+		border-radius: 0.25rem 0.25rem 0 0;
+		min-block-size: var(--_input);
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		inline-size: 100%;
+	}
+
+	/* ─── Shape overrides ────────────────────────────────────────────────────── */
+
+	/* Square: removes all border-radius regardless of other modifiers.
+	   Uses !important to win specificity over .border and [class*='round']. */
+	.field.square,
+	.field.square.border,
+	.field.square[class*='round'] {
+		border-radius: 0 !important;
+	}
+	.field.square > :is(input, textarea, select) {
+		border-radius: 0 !important;
+	}
+
+	/* ─── Fill variant ───────────────────────────────────────────────────────── */
+	/* Unsets background/color on the container; the background is applied
+	   directly to the <input> so that the floating label overlaps it correctly. */
+	.field.fill {
+		--_background: var(--surface-container-highest);
+		background-color: unset !important;
+		color: unset !important;
+	}
+	.field.fill > :is(input, select, textarea) {
+		background-color: var(--_background);
+		/* z-index: 0 ensures the background renders above the ::before layer. */
+		z-index: 0;
+	}
+
+	/* ─── Size variants ──────────────────────────────────────────────────────── */
+	.field.small {
+		--_input: 2.5rem;
+		--_start: 1rem;
+	}
+	.field.large {
+		--_input: 3.5rem;
+		--_start: 1.4rem;
+	}
+	.field.extra {
+		--_input: 4rem;
+		--_start: 1.6rem;
+	}
+
+	/* ─── Border (outlined) variant ─────────────────────────────────────────── */
+	/* Adds full border-radius and outline-variant stroke on all four sides. */
+	.field.border {
+		border-radius: 0.25rem;
+	}
+
+	/* ─── Round / pill variants ──────────────────────────────────────────────── */
+	/* Applied when class matches the 'round' substring (e.g. .round, .round-sm). */
+	.field[class*='round'].small {
+		border-radius: 1.25rem;
+	}
+	.field[class*='round'] {
+		border-radius: 1.5rem;
+	}
+	.field[class*='round'].large {
+		border-radius: 1.75rem;
+	}
+	.field[class*='round'].extra {
+		border-radius: 2rem;
+	}
+
+	/* ─── Icon positioning ───────────────────────────────────────────────────── */
+	/* Generic rule: absolutely positions any icon/image/svg inside the field. */
+	.field > :is(i, img, svg) {
+		position: absolute;
+		inset: calc((var(--_input, 0) / 2) - 0.75rem) auto auto auto;
+		cursor: pointer;
+		z-index: 10;
+		inline-size: 1.5rem;
+		block-size: 1.5rem;
+		margin: auto 0;
+		pointer-events: none;
+	}
+	/* Leading icon: explicit class wins over :first-child heuristic. */
+	.field > :is(i, img, svg):first-child,
+	.field > .leading-icon {
+		inset: calc(var(--_middle, 0) - 0.75rem) auto auto 1rem;
+	}
+
+	/* Trailing icon: BeerCSS uses :last-child:not(:first-child) which fails when
+	   an <output> follows the icon. The explicit class always wins and places
+	   the icon on the right edge regardless of sibling count. */
+	.field > :is(i, img, svg):last-child:not(:first-child),
+	.field > .trailing-icon {
+		inset: calc(var(--_middle, 0) - 0.75rem) 1rem auto auto;
+		/* Prevent the inline-start override from the generic rule above. */
+		inset-inline-start: auto !important;
+	}
+
+	/* Error state: trailing icons inherit the error color. */
+	.field.invalid > i {
+		color: var(--error);
+	}
+
+	/* ─── Native form element reset ──────────────────────────────────────────── */
+	/* 'all: unset' strips browser-default styles (appearance, border, font, etc.)
+	   so the field's visual design is fully controlled by Moni's CSS. */
+	.field > :is(input, textarea, select) {
+		all: unset;
+		position: relative;
+		display: block;
+		box-sizing: border-box;
+		border-radius: inherit;
+		/* Default border is transparent; visible only in .border and focus states. */
+		border: 0.0625rem solid transparent;
+		padding: 0 0.9375rem;
+		font-family: inherit;
+		font-size: 1rem;
+		min-block-size: var(--_input);
+		outline: none;
+		z-index: 1;
+		background: none;
+		resize: none; /* Textareas use field-sizing:content instead of manual resize. */
+		text-align: start;
+		cursor: text;
+		color: var(--on-surface);
+	}
+
+	/* Ensure date/time input values align to start (browser quirk on some platforms). */
+	input::-webkit-date-and-time-value {
+		text-align: start;
+	}
+
+	/* Autofill: preserve text color when the browser applies its autofill highlight.
+	   -webkit-background-clip + -webkit-text-fill-color override the yellow tint. */
+	:is(input, select, textarea):is(:-webkit-autofill, :autofill) {
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: var(--on-surface);
+	}
+
+	/* On focus, increase border width by 1px — shift padding inward by 1px
+	   to prevent layout shift from the border width change. */
+	.field > :is(input, textarea, select):focus {
+		border: 0.125rem solid transparent;
+		padding-inline: 0.875rem;
+	}
+
+	/* Textareas without explicit rows grow automatically using field-sizing:content.
+	   A max-height of 12rem (~8 lines) prevents uncontrolled page growth. */
+	.field > textarea:not([rows]) {
+		field-sizing: content;
+		max-block-size: 12rem;
+	}
+
+	/* ─── Transparent native picker controls ─────────────────────────────────── */
+	/* File and color inputs, and date/time picker indicators are hidden so the
+	   component can render its own UI. The native controls are still active for
+	   accessibility (click propagates through the transparent overlay). */
+	input[type='file'],
+	input[type='color'],
+	:not(.field) > input:is([type^='date'], [type^='time'], [type='month'], [type='week']),
+	input::-webkit-calendar-picker-indicator {
+		opacity: 0;
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		outline: 0;
+		z-index: 2 !important;
+	}
+
+	/* On fine-pointer (mouse) devices, push the calendar picker indicator behind
+	   the field content so it doesn't interfere with other clickable elements. */
+	@media (pointer: fine) {
+		.field > input::-webkit-calendar-picker-indicator {
+			z-index: -1 !important;
+		}
+	}
+
+	/* Remove browser-native search field decorations. */
+	input::-webkit-search-decoration,
+	input::-webkit-search-cancel-button,
+	input::-webkit-search-results-button,
+	input::-webkit-search-results-decoration,
+	input::-webkit-inner-spin-button,
+	input::-webkit-outer-spin-button {
+		display: none;
+	}
+
+	/* Remove the browser spinner on number inputs — use explicit stepper UI instead. */
+	input[type='number'] {
+		appearance: textfield;
+	}
+
+	/* ─── Border variant: field-level border colors ──────────────────────────── */
+	.field.border > :is(input, textarea, select) {
+		border-color: var(--outline);
+	}
+	.field.border > :is(input, textarea, select):focus {
+		border-color: var(--primary);
+	}
+
+	/* Round variants add extra inline padding to clear the curved edges. */
+	.field[class*='round'] > :is(input, textarea, select) {
+		padding-inline: 1.4376rem;
+	}
+	.field[class*='round'] > :is(input, textarea, select):focus {
+		padding-inline: 1.375rem;
+	}
+
+	/* ─── Icon padding accommodation ─────────────────────────────────────────── */
+	/* .prefix / .suffix shift the input's inline padding to make room for icons. */
+	.field.prefix > :is(input, textarea, select) {
+		padding-inline-start: 2.9375rem;
+	}
+	.field.prefix > :is(input, textarea, select):focus {
+		padding-inline-start: 2.875rem;
+	}
+	.field.suffix > :is(input, textarea, select) {
+		padding-inline-end: 2.9375rem;
+	}
+	.field.suffix > :is(input, textarea, select):focus {
+		padding-inline-end: 2.875rem;
+	}
+
+	/* ─── Underline (non-border, non-round) bottom border ─────────────────────── */
+	/* Default M3 filled field style: only the bottom border is visible. */
+	.field:not(.border, [class*='round']) > :is(input, textarea, select) {
+		border-block-end-color: var(--outline);
+	}
+	.field:not(.border, [class*='round']) > :is(input, textarea, select):focus {
+		border-block-end-color: var(--primary);
+	}
+
+	/* Round non-bordered fields get a subtle elevation shadow instead of a border. */
+	.field[class*='round']:not(.border, .fill) > :is(input, textarea, select),
+	.field[class*='round']:not(.border) > :is(input, textarea, select):focus {
+		box-shadow: var(--elevate1);
+	}
+	.field[class*='round']:not(.border, .fill) > :is(input, textarea, select):focus {
+		box-shadow: var(--elevate2);
+	}
+
+	/* ─── Invalid / error state borders ─────────────────────────────────────── */
+	.field.invalid:not(.border, [class*='round']) > :is(input, textarea, select),
+	.field.invalid:not(.border, [class*='round']) > :is(input, textarea, select):focus {
+		border-block-end-color: var(--error);
+	}
+	.field.invalid.border > :is(input, textarea, select),
+	.field.invalid.border > :is(input, textarea, select):focus {
+		border-color: var(--error);
+	}
+
+	/* ─── Disabled state ─────────────────────────────────────────────────────── */
+	/* Reduces opacity on the entire field container when the native control is
+	   disabled, rather than applying separate rules to each child. */
+	.field:has(> :disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	.field > :disabled {
+		cursor: not-allowed;
+	}
+
+	/* ─── Select element ─────────────────────────────────────────────────────── */
+	/* Remove browser-native select appearance; the component renders its own dropdown. */
+	.field > select {
+		user-select: none;
+		appearance: none;
+		-webkit-appearance: none;
+		background-image: none;
+	}
+
+	/* ─── Block-start padding for label accommodation ────────────────────────── */
+	/* Inputs with a floating label need top padding to create space for the
+	   label when it lifts above the input. Selects always lift their label. */
+	.field > :is(input, select) {
+		padding-block-start: 1rem;
+	}
+	/* No-label and border+fill fields: remove the top padding offset. */
+	.field:not(.label) > :is(input, select),
+	.field.border:not(.fill) > :is(input, select) {
+		padding-block-start: 0;
+	}
+	/* Textareas use the --_start token to align with the label baseline. */
+	.field > textarea {
+		padding-block-start: var(--_start) !important;
+	}
+	.field > textarea:focus {
+		/* 0.01rem compensates for the border width increase on focus. */
+		padding-block-start: calc(var(--_start, 0) - 0.01rem) !important;
+	}
+	.field:not(.label) > textarea,
+	.field.border:not(.fill) > textarea {
+		padding-block-start: calc(var(--_start, 0) - 0.5rem) !important;
+	}
+	.field:not(.label) > textarea:focus,
+	.field.border:not(.fill) > textarea:focus {
+		padding-block-start: calc(var(--_start, 0) - 0.51rem) !important;
+	}
+
+	/* ─── Floating label ─────────────────────────────────────────────────────── */
+	/* The label starts at full font-size (1rem) vertically centered in the field.
+	   On focus or when value is present, it scales down to 0.75rem and lifts
+	   to the top of the field container. */
+	.field.label > label {
+		--_start: 1rem;
+		position: absolute;
+		inset: -0.5rem 0.9375rem 0 var(--_start);
+		display: flex;
+		/* Full height + 1rem (for label overhang) centers the label vertically. */
+		block-size: calc(var(--_input, 0) + 1rem);
+		line-height: calc(var(--_input, 0) + 1rem);
+		font-size: 1rem;
+		transition: all 0.2s;
+		gap: 0.25rem;
+		white-space: nowrap;
+		/* The label is purely decorative from a layout perspective; it must never
+		   intercept pointer events meant for the underlying input. */
+		pointer-events: none;
+		color: var(--on-surface-variant);
+	}
+
+	/* Round fields: label aligns with the increased inline padding. */
+	.field.label[class*='round'] > label {
+		inset: -0.5rem 1.9375rem 0 var(--_start);
+	}
+
+	/* ─── Label lift selector group ──────────────────────────────────────────── */
+	/* The label lifts (scales down + moves up) in four conditions:
+	   1. label.active     — the component sets this class directly (readonly inputs).
+	   2. :focus + label   — when the native control is focused.
+	   3. [placeholder]:not(:placeholder-shown) + label — when a value is present.
+	   4. select + label   — selects always show their label lifted.
+	   5. input.active + label — for programmatically activated inputs. */
+
+	/* Border + prefix + no-fill variant needs a reduced --_start offset. */
+	.field.label.border.prefix:not(.fill)
+		> :is(
+			label.active,
+			:focus + label,
+			[placeholder]:not(:placeholder-shown) + label,
+			select + label,
+			input.active + label
+		) {
+		--_start: 1rem;
+	}
+
+	/* Round field label and round border prefix field label override. */
+	.field.label[class*='round'] > label,
+	.field.label.border.prefix[class*='round']:not(.fill)
+		> :is(
+			label.active,
+			:focus + label,
+			[placeholder]:not(:placeholder-shown) + label,
+			select + label,
+			input.active + label
+		) {
+		--_start: 1.5rem;
+	}
+
+	/* Prefix fields: shift the label's inline-start to clear the leading icon. */
+	.field.label.prefix > label {
+		--_start: 3rem;
+	}
+
+	/* Lifted label: shrinks to 0.75rem and collapses to the top of the field. */
+	.field.label
+		> :is(
+			label.active,
+			:focus + label,
+			[placeholder]:not(:placeholder-shown) + label,
+			select + label,
+			input.active + label
+		) {
+		block-size: 2.5rem;
+		line-height: 2.5rem;
+		font-size: 0.75rem;
+	}
+
+	/* Border variant: label collapses to 1rem height with a notch cut effect. */
+	.field.label.border:not(.fill)
+		> :is(
+			label.active,
+			:focus + label,
+			[placeholder]:not(:placeholder-shown) + label,
+			select + label,
+			input.active + label
+		) {
+		block-size: 1rem;
+		line-height: 1rem;
+	}
+
+	/* ─── Border notch (label gap in the top border) ─────────────────────────── */
+	/* The ::after pseudo creates the horizontal line to the right of the lifted
+	   label, visually cutting a notch into the top border of .field.border. */
+	.field.label.border:not(.fill) > label::after {
+		content: '';
+		display: block;
+		margin: 0.5rem 0 0 0;
+		border-block-start: 0.0625rem solid var(--outline);
+		block-size: 1rem;
+		transition: none;
+		flex: auto;
+	}
+	.field.label.border:not(.fill) > :focus + label::after {
+		/* On focus, the notch line becomes primary-colored. */
+		border-block-start: 0.125rem solid var(--primary);
+	}
+
+	/* ─── Border notch clipping (clip-path) ──────────────────────────────────── */
+	/* When the label is lifted, a clip-path cuts a gap in the top border of the
+	   input element itself, creating the appearance of the label floating within
+	   the border's top edge. The clip-path dimensions account for label width. */
+	.field.label.border.square:not(.fill)
+		> :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+	.field.label.border.square:not(.fill) > select,
+	.field.label.border.square:not(.fill) > input.active,
+	.field.label.border.square:not(.fill) > select.active {
+		clip-path: polygon(-2% -2%,.75rem -2%,.75rem .5rem,calc(100% - 1rem) .5rem,calc(100% - 1rem) -2%,102% -2%,102% 102%,-2% 102%);
+	}
+
+	/* Prefix variant: clip starts further right to clear the leading icon text. */
+	.field.label.border.prefix.square:not(.fill)
+		> :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+	.field.label.border.prefix.square:not(.fill) > select,
+	.field.label.border.prefix.square:not(.fill) > input.active,
+	.field.label.border.prefix.square:not(.fill) > select.active {
+		clip-path: polygon(-2% -2%,.75rem -2%,.75rem .5rem,calc(100% - 1rem) .5rem,calc(100% - 1rem) -2%,102% -2%,102% 102%,-2% 102%);
+	}
+
+	/* Round and square border fields use a wider notch to clear the curved border. */
+	.field.label.border[class*='round']:not(.fill)
+		> :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+	.field.label.border[class*='round']:not(.fill) > select,
+	.field.label.border:not(.fill)
+		> :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+	.field.label.border:not(.fill) > select {
+		clip-path: polygon(-2% -2%,1.25rem -2%,1.25rem .5rem,calc(100% - 2rem) .5rem,calc(100% - 2rem) -2%,102% -2%,102% 102%,-2% 102%);
+	}
+
+	.field.label.border.prefix[class*='round']:not(.fill)
+		> :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+	.field.label.border.prefix[class*='round']:not(.fill) > select,
+	.field.label.border.prefix:not(.fill)
+		> :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+	.field.label.border.prefix:not(.fill) > select {
+		clip-path: polygon(-2% -2%,1.25rem -2%,1.25rem .5rem,calc(100% - 2rem) .5rem,calc(100% - 2rem) -2%,102% -2%,102% 102%,-2% 102%);
+	}
+
+	/* ─── Label color changes ─────────────────────────────────────────────────── */
+	/* On focus: label turns primary-colored to draw attention. */
+	.field.label > :focus + label {
+		color: var(--primary);
+	}
+
+	/* On error: label and notch line turn error-colored. */
+	.field.label.invalid > label,
+	.field.label.invalid > label::after {
+		color: var(--error) !important;
+		border-color: var(--error) !important;
+	}
+
+	/* ─── Helper / error output ──────────────────────────────────────────────── */
+	/* The <output> element below the field shows helper text or validation errors. */
+	.field > output {
+		display: inline-block;
+		font-size: 0.75rem;
+		background: none !important;
+		padding: 0.25rem 1rem;
+		line-height: 1.25rem;
+		align-self: start;
+		color: var(--on-surface-variant);
+	}
+	/* Error output overrides the neutral helper color. */
+	.field > output.invalid {
+		color: var(--error) !important;
+	}
+	/* Round fields: increase horizontal padding to align with the curved edge. */
+	.field[class*='round'] > output {
+		padding: 0.25rem 1.5rem;
+	}
+	/* Show only one output at a time: helper OR error, never both. */
+	.field.invalid > output:not(.invalid),
+	.field:not(.invalid) > output.invalid {
+		display: none;
+	}
+
+	/* ─── Footer wrapper (textarea & multi-line fields) ───────────────────────── */
+	/* Lays out helper text (left) and character counter (right) on the same row,
+	   matching the M3 spec for supporting-text + character-counter pairs. */
+	.field > .footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0;
+		min-block-size: 1.25rem;
+	}
+	.field > .footer > output {
+		display: inline-block;
+		font-size: 0.75rem;
+		background: none !important;
+		padding: 0.25rem 1rem;
+		line-height: 1.25rem;
+		align-self: center;
+		color: var(--on-surface-variant);
+	}
+	.field > .footer > output.invalid {
+		color: var(--error) !important;
+	}
+	/* Character counter — right-aligned, same typographic style as the helper. */
+	.field > .footer > .counter {
+		padding: 0.25rem 1rem;
+		color: var(--on-surface-variant);
+	}
+	/* Spacer pushes counter to the right when there is no helper text. */
+	.field > .footer > .spacer {
+		flex: 1;
+	}
+	/* Same exclusive show logic as direct <output> elements. */
+	.field.invalid > .footer > output:not(.invalid),
+	.field:not(.invalid) > .footer > output.invalid {
+		display: none;
+	}
+`;function we(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}export{be as a,R as c,le as d,pe as f,a as h,xe as i,L as l,o as m,Ce as n,$ as o,ue as p,Se as r,_e as s,we as t,de as u};