@neumorphism-ui/elements 0.0.0-stage → 1.0.0-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HungHD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,64 @@
-# Temporary Holding Version
+# @neumorphism-ui/elements
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Framework-agnostic neumorphism web components for
+[neumorphism-ui](https://github.com/hunghdvn/neumorphism-ui): `<neu-button>`, `<neu-switch>`,
+`<neu-text-field>`, `<neu-icon>`, `<neu-icon-button>`, `<neu-button-group>`, `<neu-surface>`,
+`<neu-divider>`, `<neu-badge>`, `<neu-avatar>` and `<neu-spinner>`. They are accessible, the form
+controls are form-associated, and they adopt server-rendered declarative shadow roots. Import one
+tag per module (`button.js`, `icon.js`, `badge.js`, ...) or all of them with `all.js`; `cdn/neu.min.js` is a single minified bundle. Pre-release.
+
+```sh
+npm install @neumorphism-ui/elements@next @neumorphism-ui/tokens@next
+```
+
+```js
+import '@neumorphism-ui/tokens/neu.css';
+import '@neumorphism-ui/elements/all.js';
+```
+
+```html
+<neu-text-field label="Email" type="email" name="email" required></neu-text-field>
+<neu-switch name="notify" checked>Notifications</neu-switch>
+<neu-button type="submit" variant="primary">Save</neu-button>
+```
+
+```html
+<neu-icon-button icon="plus" label="Add"></neu-icon-button>
+<neu-button-group label="Actions">
+  <neu-button>One</neu-button>
+  <neu-button>Two</neu-button>
+</neu-button-group>
+<neu-surface shape="inset" padding="lg">Content</neu-surface>
+<neu-badge variant="success" pill>New</neu-badge>
+<neu-avatar initials="HD" label="Hung Do"></neu-avatar>
+<neu-spinner size="lg"></neu-spinner>
+<neu-divider orientation="vertical"></neu-divider>
+```
+
+## Icons
+
+`<neu-icon>` and `<neu-icon-button>` ship eight built-in icons in the `system` library: `check`,
+`chevron-down`, `chevron-up`, `plus`, `minus`, `x`, `alert-circle` and `user`. Register your own
+library with `registerIconLibrary`:
+
+```js
+import { registerIconLibrary } from '@neumorphism-ui/elements/icons.js';
+
+registerIconLibrary('brand', {
+  // Return SVG markup, or a URL that serves an SVG.
+  resolve: (name) => `/icons/${name}.svg`,
+});
+```
+
+```html
+<neu-icon library="brand" name="logo" label="Acme"></neu-icon>
+```
+
+The name `system` is reserved for the built-in set: registering a library called `system` is
+silently ignored.
+
+`resolve` returns either SVG markup or a URL. Markup is sanitized with an allowlist: no scripts,
+event handlers, animation, `<style>`, `<image>` or `<a>`, no `style` attributes, and only local
+`#` references survive (`href` and `url(#id)`), so an icon cannot make the page load anything.
+
+MIT licensed.

package/cdn/neu.min.js

@@ -0,0 +1,205 @@
+function p(t,e){t&&t.textContent!==e&&(t.textContent=e)}function m(t,e,r){t&&(r===""?t.removeAttribute(e):t.getAttribute(e)!==r&&t.setAttribute(e,r))}function k(t){return t.getRootNode().activeElement===t}function y(t,e){t.dispatchEvent(new Event(e,{bubbles:!0,composed:!0}))}function u(t,e){let r=!1,n=()=>{r||(r=!0,window.removeEventListener(t.type,i),clearTimeout(o),e())},i=c=>{c===t&&n()};window.addEventListener(t.type,i);let o=setTimeout(n,0)}function x(t,e){return e.attribute??t.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function _(t,e){switch(t.type){case"boolean":return e!==null;case"number":{if(e===null||e.trim()==="")return t.default;let r=Number(e);return Number.isFinite(r)?r:t.default}case"string":{let r=t.default??"";return e===null||t.values&&!t.values.includes(e)?r:e}}}function ee(t,e){return t.type==="boolean"?!!e:t.type==="number"&&typeof e=="number"?Number.isFinite(e)?e:t.default:_(t,e==null?null:String(e))}function te(t,e){switch(t.type){case"boolean":return e?"":null;case"number":return String(e);case"string":return e===""?null:String(e)}}function re(t,e){let r={};for(let[n,i]of Object.entries(t))r[n]=_(i,e(x(n,i)));return r}var $e=globalThis.HTMLElement??class{},ne=new WeakMap,ie=new WeakSet;function Ve(t){let e=ne.get(t);return e||(e=new CSSStyleSheet,e.replaceSync(t.styles),ne.set(t,e)),e}var a=class t extends $e{static extraProperties=[];static get observedAttributes(){return Object.entries(this.def.props).map(([e,r])=>x(e,r))}static define(){let e=this.def;for(let[n,i]of Object.entries(e.props)){if(this.definesAccessor(n))continue;let o=function(){return this.props[n]};ie.add(o),Object.defineProperty(this.prototype,n,{configurable:!0,enumerable:!0,get:o,set(c){this.setProp(n,ee(i,c))}})}let r=globalThis.customElements;r&&!r.get(e.tag)&&r.define(e.tag,this)}static definesAccessor(e){if(Object.prototype.hasOwnProperty.call(this.prototype,e))return!0;let r=Object.getPrototypeOf(this.prototype);for(;r!==null&&r!==t.prototype;r=Object.getPrototypeOf(r)){let n=Object.getOwnPropertyDescriptor(r,e);if(n)return!(n.get&&ie.has(n.get))}return!1}internals;props;root=null;refs=new Map;reflecting=!1;hasConnected=!1;formDisabled=!1;authorTabIndex=null;writtenTabIndex;constructor(){super(),this.internals=this.attachInternals(),this.props=re(this.def.props,e=>this.getAttribute(e)),this.addEventListener("click",e=>{this.isDisabled&&(e.preventDefault(),e.stopImmediatePropagation())},{capture:!0})}connectedCallback(){this.hasConnected||(this.hasConnected=!0,this.upgradeProperties(),this.update(this.allKeys()),this.ensureRoot()),this.connected()}disconnectedCallback(){this.disconnected()}attributeChangedCallback(e,r,n){if(!this.reflecting){for(let[i,o]of Object.entries(this.def.props))if(x(i,o)===e){this.setProp(i,_(o,n),!0);return}}}formDisabledCallback(e){this.formDisabled=e,this.propChanged("disabled")}get def(){return this.constructor.def}get isDisabled(){return this.props.disabled===!0||this.formDisabled}ref(e){if(!this.root)return null;let r=this.refs.get(e);if(!r){let n=this.root.querySelector(`[data-ref="${e}"]`);if(!n)return null;this.refs.set(e,n),r=n}return r}setProp(e,r,n=!1){let i=this.def.props[e];!i||Object.is(this.props[e],r)||(this.props[e]=r,!n&&i.reflect&&this.reflect(e,i,r),this.propChanged(e))}toggleState(e,r){r?this.internals.states.add(e):this.internals.states.delete(e)}syncFocusable(e){let r=this.getAttribute("tabindex");r!==this.writtenTabIndex&&(this.authorTabIndex=r);let n=e?this.authorTabIndex??"0":null;n===null?this.removeAttribute("tabindex"):r!==n&&this.setAttribute("tabindex",n),this.writtenTabIndex=n}syncDisabledState(){this.internals.ariaDisabled=this.isDisabled?"true":null,this.syncFocusable(!this.isDisabled)}willUpdate(e){}update(e){}rendered(){}connected(){}disconnected(){}allKeys(){return new Set(Object.keys(this.def.props))}propChanged(e){let r=new Set([e]);this.willUpdate(r),this.hasConnected&&this.update(r)}reflect(e,r,n){let i=te(r,n),o=x(e,r);this.reflecting=!0;try{i===null?this.removeAttribute(o):this.setAttribute(o,i)}finally{this.reflecting=!1}}upgradeProperties(){let e=this.constructor,r=this;for(let n of[...Object.keys(e.def.props),...e.extraProperties]){if(!Object.prototype.hasOwnProperty.call(this,n))continue;let i=r[n];delete r[n],r[n]=i}}ensureRoot(e){if(this.root)return;let r=this.internals.shadowRoot,n=r?this.def.template(this.props).value.split('data-ref="').length-1:0;if(!e&&document.readyState==="loading"&&this.parsing(r,n)){this.waitForParser(r,n);return}(!r||this.parsing(r,n))&&(r??=this.attachShadow({mode:"open",delegatesFocus:this.def.delegatesFocus??!1}),r.innerHTML=this.def.template(this.props).value),this.adoptRoot(r)}parsing(e,r){if(e)return e.querySelectorAll("[data-ref]").length<r;if(this.firstChild!==null||this.nextSibling!==null)return!1;for(let n=this.parentNode;n!==null;n=n.parentNode)if(n.nextSibling!==null)return!1;return!0}waitForParser(e,r){let n=o=>{i.disconnect(),document.removeEventListener("DOMContentLoaded",n),this.ensureRoot(o)},i=new MutationObserver(()=>{this.parsing(e,r)||n()});i.observe(e??document,{childList:!0,subtree:!0}),document.addEventListener("DOMContentLoaded",n)}adoptRoot(e){this.root=e,e.adoptedStyleSheets=[Ve(this.def)],e.querySelector("style[data-neu-ssr]")?.remove(),this.rendered(),this.update(this.allKeys())}};var se=Symbol("neu.raw"),Oe={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function He(t){return t.replace(/[&<>"']/g,e=>Oe[e]??e)}function h(t){return{[se]:!0,value:t}}function Fe(t){return typeof t=="object"&&t!==null&&se in t}function oe(t){return t==null||t===!1?"":Array.isArray(t)?t.map(oe).join(""):Fe(t)?t.value:He(String(t))}function s(t,...e){let r=t[0]??"";return e.forEach((n,i)=>{r+=oe(n)+(t[i+1]??"")}),h(r)}var d=`
+:host {
+  --_neu-bg: var(--neu-bg, #e0e5ec);
+  --_neu-accent-c: var(--neu-accent, #6d5dfc);
+  --_neu-d: var(--neu-distance, 6px);
+  --_neu-k: var(--neu-intensity, 1);
+  --_neu-r: var(--neu-radius, 12px);
+  --_neu-danger: var(--neu-danger, #e5484d);
+  --_neu-dur: var(--neu-duration, 150ms);
+  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));
+  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));
+  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));
+  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));
+  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));
+  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);
+  --_neu-raised: var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);
+  --_neu-raised-sm: calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);
+  --_neu-inset: inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);
+  --_neu-inset-sm: inset calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), inset calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);
+  font-family: var(--neu-font);
+  color: var(--_neu-fg);
+  -webkit-tap-highlight-color: transparent;
+}
+:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }
+:host([hidden]) { display: none !important; }
+:host(:focus) { outline: none; }
+*, *::before, *::after { box-sizing: border-box; }
+`,l=[{name:"--neu-bg",description:"Surface colour; shadows and text are derived from it."},{name:"--neu-accent",description:"Accent colour."},{name:"--neu-distance",description:"Shadow distance for the md size."},{name:"--neu-intensity",description:"Shadow strength multiplier."},{name:"--neu-radius",description:"Corner radius for the md size."}];var ae={check:'<path d="M5 12.5l4.5 4.5L19 7.5"/>',"chevron-down":'<path d="M6 9l6 6 6-6"/>',"chevron-up":'<path d="M6 15l6-6 6 6"/>',plus:'<path d="M12 5v14M5 12h14"/>',minus:'<path d="M5 12h14"/>',x:'<path d="M6 6l12 12M18 6L6 18"/>',"alert-circle":'<circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5h.01"/>',user:'<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-6 8-6s8 2 8 6"/>'};function f(t){let e=Object.hasOwn(ae,t)?ae[t]:void 0;if(e!==void 0)return`<svg part="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e}</svg>`}var le=`${d}
+:host { display: inline-block; vertical-align: middle; --_neu-s: 2.5rem; inline-size: var(--_neu-s); block-size: var(--_neu-s); }
+:host([size='sm']) { --_neu-s: 2rem; }
+:host([size='lg']) { --_neu-s: 3.5rem; }
+.base { display: flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 100%; block-size: 100%; overflow: hidden; font-size: calc(var(--_neu-s) * 0.4); font-weight: 600; border-radius: 50%; box-shadow: var(--_neu-raised-sm); background: var(--_neu-bg); color: var(--_neu-fg-muted); }
+:host([shape='rounded']) .base { border-radius: var(--_neu-r); }
+.image, .initials, .icon { display: none; }
+.image { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.base[data-show='image'] .image, .base[data-show='initials'] .initials { display: block; }
+.base[data-show='icon'] .icon { display: flex; inline-size: 60%; block-size: 60%; }
+.icon svg { inline-size: 100%; block-size: 100%; }
+`;var A={tag:"neu-avatar",props:{src:{type:"string",reflect:!0},label:{type:"string"},initials:{type:"string"},size:{type:"string",default:"md",values:["sm","md","lg"],reflect:!0},shape:{type:"string",default:"circle",values:["circle","rounded"],reflect:!0}},styles:le,template:t=>{let e=t.src?"image":t.initials?"initials":"icon";return s`<span part="base" class="base" data-ref="base" data-show="${e}"><img part="image" class="image" data-ref="image" alt=""${t.src?s` src="${t.src}"`:""}><span part="initials" class="initials" data-ref="initials">${t.initials}</span><span part="icon" class="icon">${h(f("user")??"")}</span></span>`},docs:{summary:"A user picture that falls back to initials, then to a generic user icon. With `label` it is an image named by it; without, it is decorative and hidden from assistive technology.",events:[],slots:[],parts:[{name:"base",description:"The sized, raised wrapper."},{name:"image",description:"The picture."},{name:"initials",description:"The initials shown when there is no picture."},{name:"icon",description:"Wrapper around the fallback user icon."},{name:"svg",description:"The rendered fallback SVG element."}],cssProperties:l}};var w=class extends a{static def=A;broken=!1;willUpdate(e){e.has("src")&&this.setBroken(!1)}rendered(){let e=this.ref("image");e&&(e.addEventListener("error",()=>this.setBroken(!0)),e.hasAttribute("src")&&e.complete&&e.naturalWidth===0&&(this.broken=!0),this.toggleState("image-error",this.broken))}update(e){if(e.has("label")){let c=String(this.props.label);this.internals.role=c?"img":null,this.internals.ariaLabel=c||null,this.internals.ariaHidden=c?null:"true"}e.has("initials")&&p(this.ref("initials"),String(this.props.initials));let r=this.ref("image");if(!r)return;let n=String(this.props.src);e.has("src")&&(r.getAttribute("src")??"")!==n&&(n?r.setAttribute("src",n):r.removeAttribute("src"));let i=this.ref("base"),o=this.showing();i.dataset.show!==o&&(i.dataset.show=o)}showing(){return this.props.src&&!this.broken?"image":this.props.initials?"initials":"icon"}setBroken(e){this.broken!==e&&(this.broken=e,this.toggleState("image-error",e),this.ref("base")&&this.update(new Set))}};w.define();var de=`${d}
+:host { display: inline-block; vertical-align: middle; --_neu-success: var(--neu-success, #3bb273); --_neu-warning: var(--neu-warning, #e6a23c); }
+.base { display: inline-flex; align-items: center; min-block-size: 1.25rem; padding-inline: 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: calc(var(--_neu-r) * 0.5); box-shadow: var(--_neu-raised-sm); background: var(--_neu-bg); color: var(--_neu-fg-muted); }
+:host([pill]) .base { border-radius: 999px; }
+:host([variant='accent']) .base { color: var(--_neu-accent-c); }
+:host([variant='success']) .base { color: var(--_neu-success); }
+:host([variant='warning']) .base { color: var(--_neu-warning); }
+:host([variant='danger']) .base { color: var(--_neu-danger); }
+`;var R={tag:"neu-badge",props:{variant:{type:"string",default:"neutral",values:["neutral","accent","success","warning","danger"],reflect:!0},pill:{type:"boolean",reflect:!0}},styles:de,template:()=>s`<span part="base" class="base"><slot></slot></span>`,docs:{summary:"A small raised label for status or counts.",events:[],slots:[{name:"",description:"The badge text."}],parts:[{name:"base",description:"The badge itself."}],cssProperties:[...l,{name:"--neu-success",description:"Colour of the success variant."},{name:"--neu-warning",description:"Colour of the warning variant."}]}};var S=class extends a{static def=R};S.define();var $=new WeakSet,ce=!1;function b(t){$.add(t),setTimeout(()=>$.delete(t),0)}var V=Symbol.for("neu-ui.submits");function O(t){return t instanceof HTMLButtonElement?t.type==="submit":t instanceof HTMLInputElement?t.type==="submit"||t.type==="image":t.constructor[V]===!0&&t.type==="submit"}function ue(t){let e=t.form;return e instanceof HTMLFormElement?e:null}function Ne(){ce||typeof document>"u"||(ce=!0,document.addEventListener("click",t=>{for(let e of t.composedPath()){if(!(e instanceof Element)||!O(e))continue;let r=ue(e);r&&b(r);return}},{capture:!0}),document.addEventListener("keydown",t=>{if(t.key==="Enter")for(let e of t.composedPath()){if(!(e instanceof Element))continue;let r=ue(e);if(r){b(r);return}}},{capture:!0}))}var g=class extends a{static formAssociated=!0;interacted=!1;constructor(){super(),Ne(),this.addEventListener("invalid",()=>{let e=this.internals.form;e&&$.has(e)&&this.markInteracted()})}get form(){return this.internals.form}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){let e=this.internals.reportValidity();return e||this.markInteracted(),e}formResetCallback(){this.interacted=!1,this.resetToDefault(),this.commit()}formStateRestoreCallback(e){typeof e=="string"&&(this.restoreState(e),this.commit())}formState(){return this.formValue()??""}commit(){this.internals.setFormValue(this.formValue(),this.formState()),this.validate(),this.syncUserInvalid()}markInteracted(){this.interacted=!0,this.syncUserInvalid()}syncUserInvalid(){this.toggleState("user-invalid",this.interacted&&!this.internals.validity.valid)}};var pe=t=>`${d}
+:host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; }
+:host(:disabled), :host([disabled])${t?", :host([loading])":""} { cursor: not-allowed; }
+.base {
+  display: inline-flex; flex: auto; align-items: center; justify-content: center;
+  border-start-start-radius: var(--_neu-grp-ss, var(--_neu-rr, var(--_neu-r))); border-start-end-radius: var(--_neu-grp-se, var(--_neu-rr, var(--_neu-r)));
+  border-end-start-radius: var(--_neu-grp-es, var(--_neu-rr, var(--_neu-r))); border-end-end-radius: var(--_neu-grp-ee, var(--_neu-rr, var(--_neu-r)));
+  background: var(--_neu-bg);
+  color: var(--_neu-fg);
+  box-shadow: var(--_neu-grp-shadow, var(--_neu-raised));
+  transition: box-shadow var(--_neu-dur) ease, color var(--_neu-dur) ease;
+}
+:host([size='sm']) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised-sm)); }
+:host([variant='primary']) .base { color: var(--_neu-accent-c); }
+:host([variant='flat']) .base { box-shadow: none; }
+:host([variant='flat']:hover:not(:disabled):not([disabled])) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised-sm)); }
+:host(:active:not(:disabled):not([disabled])${t?":not([loading])":""}) .base, :host(:state(pressed)) .base { box-shadow: var(--_neu-inset-sm); }
+:host(:focus-visible) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised)), var(--_neu-focus); }
+:host(:disabled) .base, :host([disabled]) .base { box-shadow: none; color: var(--_neu-fg-muted); }
+`,me=pe(!1),fe=`${pe(!0)}
+.base { min-block-size: 2.5rem; padding-inline: 1.125rem; font: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1; }
+:host([size='sm']) .base { min-block-size: 2rem; padding-inline: 0.875rem; font-size: 0.8125rem; }
+:host([size='lg']) .base { min-block-size: 3rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
+.prefix, .suffix { display: inline-flex; }
+::slotted([slot='prefix']) { margin-inline-end: 0.5em; }
+::slotted([slot='suffix']) { margin-inline-start: 0.5em; }
+.spinner {
+  display: none; inline-size: 1em; block-size: 1em; margin-inline-start: 0.5em; border-radius: 50%;
+  border: 2px solid var(--_neu-accent-soft); border-block-start-color: var(--_neu-accent-c);
+  animation: neu-spin 0.8s linear infinite;
+}
+:host([loading]) .spinner { display: inline-block; }
+@keyframes neu-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
+`;var H={tag:"neu-button",props:{variant:{type:"string",default:"default",values:["default","primary","flat"],reflect:!0},size:{type:"string",default:"md",values:["sm","md","lg"],reflect:!0},disabled:{type:"boolean",reflect:!0},loading:{type:"boolean",reflect:!0},type:{type:"string",default:"button",values:["button","submit","reset"],reflect:!0}},styles:fe,template:()=>s`<span part="base" class="base"><span part="prefix" class="prefix"><slot name="prefix"></slot></span><span part="label" class="label"><slot></slot></span><span part="suffix" class="suffix"><slot name="suffix"></slot></span><span part="spinner" class="spinner" aria-hidden="true"></span></span>`,docs:{summary:'A raised button. Use variant="primary" for the main action of a view.',events:[{name:"click",description:"Fired on activation; never while disabled or loading."}],slots:[{name:"",description:"Button label."},{name:"prefix",description:"Content before the label, such as an icon."},{name:"suffix",description:"Content after the label."}],parts:[{name:"base",description:"The raised surface."},{name:"label",description:"Wrapper around the default slot."},{name:"prefix",description:"Wrapper around the prefix slot."},{name:"suffix",description:"Wrapper around the suffix slot."},{name:"spinner",description:"Spinner shown while loading."}],cssProperties:l}};var v=class extends a{static def=H;static formAssociated=!0;static[V]=!0;constructor(){super(),this.internals.role="button",this.addEventListener("click",e=>this.onClickCapture(e),{capture:!0}),this.addEventListener("click",e=>this.onClick(e)),this.addEventListener("keydown",e=>this.onKeyDown(e)),this.addEventListener("keyup",e=>this.onKeyUp(e)),this.addEventListener("blur",()=>{k(this)||this.toggleState("pressed",!1)}),this.addEventListener("focus",()=>this.toggleState("pressed",!1))}get form(){return this.internals.form}get inactive(){return this.isDisabled||this.props.loading===!0}onClickCapture(e){this.props.loading===!0&&(e.preventDefault(),e.stopImmediatePropagation())}onClick(e){u(e,()=>{let r=this.internals.form;e.defaultPrevented||!r||(this.props.type==="submit"?(b(r),r.requestSubmit()):this.props.type==="reset"&&r.reset())})}onKeyDown(e){this.inactive||(e.key==="Enter"?u(e,()=>{!e.defaultPrevented&&!this.inactive&&this.click()}):e.key===" "&&!e.defaultPrevented&&(e.preventDefault(),this.toggleState("pressed",!0)))}onKeyUp(e){e.key!==" "||!this.internals.states.has("pressed")||(this.toggleState("pressed",!1),u(e,()=>{!e.defaultPrevented&&!this.inactive&&this.click()}))}update(e){(e.has("disabled")||e.has("loading"))&&(this.syncDisabledState(),this.internals.ariaBusy=this.props.loading===!0?"true":null)}};v.define();var he=`${d}
+:host { display: inline-flex; vertical-align: middle; }
+.base { display: inline-flex; border-radius: var(--_neu-r); box-shadow: var(--_neu-raised); }
+:host([orientation='vertical']) .base { flex-direction: column; }
+::slotted(*) { --_neu-grp-shadow: 0 0 transparent; --_neu-grp-ss: 0; --_neu-grp-se: 0; --_neu-grp-es: 0; --_neu-grp-ee: 0; }
+::slotted(:not([hidden], template, script, style)) { display: flex; }
+::slotted(:focus-visible) { position: relative; z-index: 1; }
+:host(:not([orientation='vertical'])) ::slotted(:nth-child(1 of :not([hidden], template, script, style))) { --_neu-grp-ss: var(--_neu-r); --_neu-grp-es: var(--_neu-r); }
+:host(:not([orientation='vertical'])) ::slotted(:nth-last-child(1 of :not([hidden], template, script, style))) { --_neu-grp-se: var(--_neu-r); --_neu-grp-ee: var(--_neu-r); }
+:host([orientation='vertical']) ::slotted(:nth-child(1 of :not([hidden], template, script, style))) { --_neu-grp-ss: var(--_neu-r); --_neu-grp-se: var(--_neu-r); }
+:host([orientation='vertical']) ::slotted(:nth-last-child(1 of :not([hidden], template, script, style))) { --_neu-grp-es: var(--_neu-r); --_neu-grp-ee: var(--_neu-r); }
+`;var F={tag:"neu-button-group",props:{label:{type:"string",reflect:!0},orientation:{type:"string",default:"horizontal",values:["horizontal","vertical"],reflect:!0}},styles:he,template:()=>s`<span part="base" class="base"><slot></slot></span>`,docs:{summary:"Merges adjacent buttons into one raised block.",events:[],slots:[{name:"",description:"neu-button and neu-icon-button elements."}],parts:[{name:"base",description:"The raised wrapper around the buttons."}],cssProperties:l}};var E=class extends a{static def=F;constructor(){super(),this.internals.role="group"}update(e){e.has("label")&&(this.internals.ariaLabel=String(this.props.label)||null)}};E.define();var be=`${d}
+:host { display: block; margin-block: 0.75rem; }
+.base { display: block; border-block-start: 1px solid var(--_neu-sd); border-block-end: 1px solid var(--_neu-sl); }
+:host([orientation='vertical']) { display: inline-block; align-self: stretch; min-block-size: 1em; margin-block: 0; margin-inline: 0.75rem; }
+:host([orientation='vertical']) .base { block-size: 100%; min-block-size: 1em; border-block: 0; border-inline-start: 1px solid var(--_neu-sd); border-inline-end: 1px solid var(--_neu-sl); }
+`;var N={tag:"neu-divider",props:{orientation:{type:"string",default:"horizontal",values:["horizontal","vertical"],reflect:!0}},styles:be,template:()=>s`<span part="base" class="base"></span>`,docs:{summary:"A thin engraved line that separates content.",events:[],slots:[],parts:[{name:"base",description:"The engraved line."}],cssProperties:l}};var T=class extends a{static def=N;constructor(){super(),this.internals.role="separator"}update(e){e.has("orientation")&&(this.internals.ariaOrientation=this.orientation)}};T.define();var ge=new Map,ve=new Map,j=new Set;function je(t,e){if(t!=="system"){ge.set(t,e),ve.set(t,q(t)+1);for(let r of[...j])r(t)}}function ye(t){return ge.get(t)}function q(t){return ve.get(t)??0}function xe(t){return j.add(t),()=>j.delete(t)}var K="http://www.w3.org/2000/svg",qe=new Set("svg g path circle ellipse line polyline polygon rect defs title desc symbol linearGradient radialGradient stop clipPath mask use".split(" ")),B=new Map,ke=new WeakMap,_e,Be=0,Ke=/^on|^style=|href=(?!#)|\\|(?:image-set|src)\(|url\((?![\s'"]*#)/i;function we(t){for(let{name:e,value:r}of[...t.attributes])Ke.test(`${e}=${r}`)&&t.removeAttribute(e);for(let e of[...t.childNodes])if(e.nodeType!==3){if(e.nodeType!==1||e.namespaceURI!==K||!qe.has(e.localName)){e.remove();continue}we(e)}}function Se(t){_e??=new DOMParser;let e=t.replace(/<svg\b(?![^>]*\sxmlns\s*=)/,`<svg xmlns="${K}"`),r=_e.parseFromString(e,"image/svg+xml").documentElement;return r.namespaceURI!==K||r.localName!=="svg"||r.querySelector("parsererror")?null:(we(r),r.removeAttribute("xmlns:xlink"),r.setAttribute("part","svg"),r.setAttribute("aria-hidden","true"),r.setAttribute("focusable","false"),r)}function Ue(t){let e=B.get(t);return e||(e=(async()=>{try{let r=await fetch(t);return r.ok?Se((await r.text()).trim()):null}catch{return null}})(),B.set(t,e),e.then(r=>r===null&&B.delete(t))),e}function Ee(t,e,r){let n=++Be;ke.set(t,n);let i=o=>{ke.get(t)===n&&t.replaceChildren(...o?[t.ownerDocument.importNode(o,!0)]:[])};if(e==="system"){t.innerHTML=f(r)??"";return}try{let o=r?String(ye(e)?.resolve(r)??"").trim():"";o.startsWith("<")?i(Se(o)):o?Ue(o).then(i):i(null)}catch{i(null)}}function z(t,e,r){let n,i,o=()=>`${e()}
+${r()}
+${q(e())}`,c=()=>{let X=t();X&&(n===void 0&&e()==="system"&&(n=o()),o()!==n&&(n=o(),Ee(X,e(),r())))};return{draw:c,connected:()=>{i??=xe(c),c()},disconnected:()=>{i?.(),i=void 0}}}var Te=`
+:host { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; color: inherit; }
+:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }
+:host([hidden]) { display: none !important; }
+.box, svg { display: block; inline-size: 100%; block-size: 100%; }
+.box { contain: paint; }
+`;var U={tag:"neu-icon",props:{name:{type:"string",reflect:!0},library:{type:"string",default:"system",reflect:!0},label:{type:"string",reflect:!0}},styles:Te,template:t=>{let e=t.library==="system"?f(t.name):void 0;return s`<span class="box" data-ref="box">${e===void 0?"":h(e)}</span>`},docs:{summary:"A vector icon from the built-in set or a registered icon library.",events:[],slots:[],parts:[{name:"svg",description:"The rendered SVG element."}],cssProperties:[]}};var L=class extends a{static def=U;drawer=z(()=>this.ref("box"),()=>String(this.props.library),()=>String(this.props.name));update(e){if(e.has("label")){let r=String(this.props.label);this.internals.role=r?"img":null,this.internals.ariaLabel=r||null,this.internals.ariaHidden=r?null:"true"}(e.has("name")||e.has("library"))&&this.drawer.draw()}connected(){this.drawer.connected()}disconnected(){this.drawer.disconnected()}};L.define();var ze=`${me}
+:host { inline-size: 2.5rem; block-size: 2.5rem; }
+:host([size='sm']) { inline-size: 2rem; block-size: 2rem; }
+:host([size='lg']) { inline-size: 3rem; block-size: 3rem; }
+.base { inline-size: 100%; block-size: 100%; --_neu-rr: 50%; }
+:host([shape='square']) .base { --_neu-rr: var(--_neu-r); }
+.icon { display: block; inline-size: 1.125rem; block-size: 1.125rem; contain: paint; }
+:host([size='sm']) .icon { inline-size: 1rem; block-size: 1rem; }
+:host([size='lg']) .icon { inline-size: 1.375rem; block-size: 1.375rem; }
+.icon svg { display: block; inline-size: 100%; block-size: 100%; }
+`;var W={tag:"neu-icon-button",props:{icon:{type:"string"},library:{type:"string",default:"system"},label:{type:"string"},shape:{type:"string",default:"circle",values:["circle","square"],reflect:!0},variant:{type:"string",default:"default",values:["default","primary","flat"],reflect:!0},size:{type:"string",default:"md",values:["sm","md","lg"],reflect:!0},disabled:{type:"boolean",reflect:!0},type:{type:"string",default:"button",values:["button","submit","reset"],reflect:!0}},styles:ze,template:t=>{let e=t.library==="system"?f(t.icon):void 0;return s`<span part="base" class="base"><span part="icon" class="icon" data-ref="icon">${e===void 0?"":h(e)}</span></span>`},docs:{summary:"A raised button that shows an icon instead of a label. Name it with label.",events:[{name:"click",description:"Fired on activation; never while disabled."}],slots:[],parts:[{name:"base",description:"The raised surface."},{name:"icon",description:"Wrapper around the icon."},{name:"svg",description:"The rendered SVG element."}],cssProperties:l}};var P=class extends v{static def=W;drawer=z(()=>this.ref("icon"),()=>String(this.props.library),()=>String(this.props.icon));update(e){super.update(e),(e.has("label")||e.has("icon"))&&(this.internals.ariaLabel=String(this.props.label||this.props.icon)||null),(e.has("icon")||e.has("library"))&&this.drawer.draw()}connected(){this.drawer.connected()}disconnected(){this.drawer.disconnected()}};P.define();var Le=`${d}
+:host { display: inline-block; vertical-align: middle; inline-size: 1.5rem; block-size: 1.5rem; }
+:host([size='sm']) { inline-size: 1rem; block-size: 1rem; }
+:host([size='lg']) { inline-size: 2.25rem; block-size: 2.25rem; }
+.base { position: relative; display: block; inline-size: 100%; block-size: 100%; }
+.track, .indicator { position: absolute; inset: 0; border-radius: 50%; }
+.label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.track { box-shadow: var(--_neu-inset-sm); }
+.indicator { border: 3px solid transparent; border-block-start-color: var(--_neu-accent-c); animation: neu-spinner-rotate 0.9s linear infinite; }
+@keyframes neu-spinner-rotate { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .indicator { animation-duration: 2.7s; } }
+`;var G={tag:"neu-spinner",props:{label:{type:"string",default:"Loading"},size:{type:"string",default:"md",values:["sm","md","lg"],reflect:!0}},styles:Le,template:t=>s`<span part="base" class="base"><span part="track" class="track"></span><span part="indicator" class="indicator"></span><span class="label" data-ref="label">${t.label}</span></span>`,docs:{summary:"A rotating indicator for work in progress.",events:[],slots:[],parts:[{name:"base",description:"The sized wrapper."},{name:"track",description:"The inset ring behind the indicator."},{name:"indicator",description:"The rotating arc."}],cssProperties:l}};var D=class extends a{static def=G;constructor(){super(),this.internals.role="status"}update(e){if(!e.has("label"))return;let r=String(this.props.label);this.internals.ariaLabel=r||null,p(this.ref("label"),r)}};D.define();var Pe=`${d}
+:host { display: block; --_neu-raised-lg: calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 4) var(--_neu-sd), calc(var(--_neu-d) * -2) calc(var(--_neu-d) * -2) calc(var(--_neu-d) * 4) var(--_neu-sl); --_neu-inset-lg: inset calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 4) var(--_neu-sd), inset calc(var(--_neu-d) * -2) calc(var(--_neu-d) * -2) calc(var(--_neu-d) * 4) var(--_neu-sl); --_neu-up: var(--_neu-raised); --_neu-down: var(--_neu-inset); --_neu-hi: color-mix(in oklab, var(--_neu-bg), white 8%); --_neu-lo: color-mix(in oklab, var(--_neu-bg), black 6%); }
+:host([elevation='sm']) { --_neu-up: var(--_neu-raised-sm); --_neu-down: var(--_neu-inset-sm); }
+:host([elevation='lg']) { --_neu-up: var(--_neu-raised-lg); --_neu-down: var(--_neu-inset-lg); }
+.base { background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-up); border-radius: var(--_neu-r); padding: 1.25rem; }
+:host([shape='inset']) .base { box-shadow: var(--_neu-down); }
+:host([shape='flat']) .base { box-shadow: none; }
+:host([shape='convex']) .base { background: linear-gradient(145deg, var(--_neu-hi), var(--_neu-lo)); }
+:host([shape='concave']) .base { background: linear-gradient(145deg, var(--_neu-lo), var(--_neu-hi)); }
+:host([radius='sm']) .base { border-radius: calc(var(--_neu-r) * 0.5); }
+:host([radius='lg']) .base { border-radius: calc(var(--_neu-r) * 2); }
+:host([radius='full']) .base { border-radius: 999px; }
+:host([padding='none']) .base { padding: 0; }
+:host([padding='sm']) .base { padding: 0.75rem; }
+:host([padding='lg']) .base { padding: 2rem; }
+`;var Y={tag:"neu-surface",props:{shape:{type:"string",default:"raised",values:["raised","inset","flat","convex","concave"],reflect:!0},elevation:{type:"string",default:"md",values:["sm","md","lg"],reflect:!0},radius:{type:"string",default:"md",values:["sm","md","lg","full"],reflect:!0},padding:{type:"string",default:"md",values:["none","sm","md","lg"],reflect:!0}},styles:Pe,template:()=>s`<div part="base" class="base"><slot></slot></div>`,docs:{summary:"A neumorphic container with its own shape, elevation, radius and padding.",events:[],slots:[{name:"",description:"The content of the surface."}],parts:[{name:"base",description:"The surface itself."}],cssProperties:l}};var C=class extends a{static def=Y};C.define();var Z;function De(){if(Z===void 0){let t=document.createElement("input");t.type="checkbox",t.required=!0,Z=t.validationMessage||"Please check this box if you want to proceed."}return Z}function Ce(t){return{badInput:t.badInput,customError:t.customError,patternMismatch:t.patternMismatch,rangeOverflow:t.rangeOverflow,rangeUnderflow:t.rangeUnderflow,stepMismatch:t.stepMismatch,tooLong:t.tooLong,tooShort:t.tooShort,typeMismatch:t.typeMismatch,valueMissing:t.valueMissing}}var Me=`${d}
+:host {
+  display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none;
+  --_neu-track-w: 2.875rem; --_neu-track-h: 1.625rem; --_neu-thumb: 1.25rem;
+}
+:host([size='sm']) { --_neu-track-w: 2.25rem; --_neu-track-h: 1.25rem; --_neu-thumb: 0.9375rem; }
+:host([size='lg']) { --_neu-track-w: 3.5rem; --_neu-track-h: 2rem; --_neu-thumb: 1.5rem; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+.base { display: inline-flex; align-items: center; gap: 0.625rem; }
+.track {
+  position: relative; flex: none; inline-size: var(--_neu-track-w); block-size: var(--_neu-track-h);
+  border-radius: 999px; background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);
+  transition: background-color var(--_neu-dur) ease, box-shadow var(--_neu-dur) ease;
+}
+.track.on { background: var(--_neu-accent-soft); }
+.thumb {
+  position: absolute; inset-block-start: 50%;
+  inset-inline-start: calc((var(--_neu-track-h) - var(--_neu-thumb)) / 2);
+  inline-size: var(--_neu-thumb); block-size: var(--_neu-thumb); border-radius: 50%;
+  background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm); transform: translateY(-50%);
+  transition: inset-inline-start var(--_neu-dur) ease;
+}
+.track.on .thumb { inset-inline-start: calc(var(--_neu-track-w) - var(--_neu-thumb) - (var(--_neu-track-h) - var(--_neu-thumb)) / 2); }
+:host(:focus-visible) .track { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
+:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }
+:host(:state(user-invalid)) .track { box-shadow: var(--_neu-inset-sm), 0 0 0 2px color-mix(in oklab, var(--_neu-danger) 55%, transparent); }
+.label { color: var(--_neu-fg); }
+`;var J={tag:"neu-switch",props:{checked:{type:"boolean"},name:{type:"string",reflect:!0},value:{type:"string",default:"on",reflect:!0},disabled:{type:"boolean",reflect:!0},required:{type:"boolean",reflect:!0},size:{type:"string",default:"md",values:["sm","md","lg"],reflect:!0}},form:{valueProp:"checked"},styles:Me,template:t=>s`<span part="base" class="base"><span part="track" class="track${t.checked?" on":""}" data-ref="track"><span part="thumb" class="thumb"></span></span><span part="label" class="label"><slot></slot></span></span>`,docs:{summary:"An on/off switch. The checked attribute is the default state.",events:[{name:"input",description:"Fired when the user toggles the switch."},{name:"change",description:"Fired after input when the user toggles the switch."}],slots:[{name:"",description:"Label; also the accessible name."}],parts:[{name:"base",description:"Wrapper around track and label."},{name:"track",description:"The inset track."},{name:"thumb",description:"The raised thumb."},{name:"label",description:"Wrapper around the default slot."}],cssProperties:l}};var M=class extends g{static def=J;static extraProperties=["defaultChecked"];current;dirty=!1;constructor(){super(),this.current=this.props.checked===!0,this.internals.role="switch",this.addEventListener("click",e=>this.onClick(e)),this.addEventListener("keydown",e=>this.onKeyDown(e)),this.addEventListener("keyup",e=>this.onKeyUp(e)),this.addEventListener("blur",()=>{k(this)||this.toggleState("pressed",!1)}),this.addEventListener("focus",()=>this.toggleState("pressed",!1))}get checked(){return this.current}set checked(e){this.dirty=!0,this.setCurrent(!!e)}get defaultChecked(){return this.props.checked===!0}set defaultChecked(e){this.toggleAttribute("checked",!!e)}onClick(e){let r=this.current;this.dirty=!0,this.setCurrent(!r),u(e,()=>{e.defaultPrevented?this.setCurrent(r):this.isConnected&&this.current===!r&&(this.markInteracted(),y(this,"input"),y(this,"change"))})}onKeyDown(e){if(e.key===" "){if(e.defaultPrevented)return;e.preventDefault(),this.toggleState("pressed",!0)}else e.key==="Enter"&&!e.repeat&&u(e,()=>{e.defaultPrevented||this.click()})}onKeyUp(e){e.key!==" "||!this.internals.states.has("pressed")||(this.toggleState("pressed",!1),u(e,()=>{e.defaultPrevented||this.click()}))}setCurrent(e){this.current=e,this.toggleState("checked",e),this.internals.ariaChecked=e?"true":"false",this.ref("track")?.classList.toggle("on",e),this.commit()}willUpdate(e){e.has("checked")&&!this.dirty&&(this.current=this.props.checked===!0)}update(e){e.has("disabled")&&this.syncDisabledState(),e.has("checked")?this.setCurrent(this.current):(e.has("required")||e.has("value"))&&this.commit()}formValue(){return this.current?String(this.props.value):null}formState(){return this.current?"checked":"unchecked"}validate(){this.props.required===!0&&!this.current?this.internals.setValidity({valueMissing:!0},De(),this.ref("track")??void 0):this.internals.setValidity({})}resetToDefault(){this.dirty=!1,this.setCurrent(this.props.checked===!0)}restoreState(e){this.dirty=!0,this.setCurrent(e==="checked")}};M.define();var We=new Set(["text","search","url","tel","email","password","date","month","week","time","datetime-local","number"]);function Ie(t){if(!t)return;let e=[...t.elements],r=e.find(O);if(r){if(r.matches(":disabled")||r.hasAttribute("disabled"))return;b(t),r.click();return}e.filter(i=>i instanceof HTMLInputElement&&We.has(i.type)||i.localName==="neu-text-field").length===1&&(b(t),t.requestSubmit())}var Ae=`${d}
+:host { display: block; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+.base { display: flex; flex-direction: column; }
+.label-text, ::slotted([slot='label']) {
+  display: block; margin-block-end: 0.375rem;
+  font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted);
+}
+.label-text:empty { display: none; }
+.control {
+  display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;
+  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);
+  transition: box-shadow var(--_neu-dur) ease;
+}
+:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }
+:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }
+:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }
+:host(:state(user-invalid)) .control {
+  box-shadow:
+    inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),
+    inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);
+}
+:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }
+.input {
+  flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;
+  background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;
+}
+.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }
+.prefix, .suffix { display: inline-flex; }
+::slotted([slot='prefix']) { margin-inline-end: 0.5rem; }
+::slotted([slot='suffix']) { margin-inline-start: 0.5rem; }
+.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }
+.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }
+.help-text:empty { display: none; }
+.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }
+:host(:state(user-invalid)) slot[name='help-text'] { display: none; }
+:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }
+`;var Ge={type:{type:"string",default:"text",values:["text","email","password","search","tel","url"],reflect:!0},value:{type:"string"},name:{type:"string",reflect:!0},label:{type:"string"},placeholder:{type:"string"},helpText:{type:"string"},errorText:{type:"string"},required:{type:"boolean",reflect:!0},disabled:{type:"boolean",reflect:!0},readOnly:{type:"boolean",reflect:!0,attribute:"readonly"},minLength:{type:"number",default:-1,attribute:"minlength"},maxLength:{type:"number",default:-1,attribute:"maxlength"},pattern:{type:"string"},autocomplete:{type:"string"},inputMode:{type:"string",attribute:"inputmode"},enterKeyHint:{type:"string",attribute:"enterkeyhint"},size:{type:"string",default:"md",values:["sm","md","lg"],reflect:!0}};function Ye(t){return s`${t.placeholder?s` placeholder="${t.placeholder}"`:""}${t.required?s` required`:""}${t.disabled?s` disabled`:""}${t.readOnly?s` readonly`:""}${t.minLength>=0?s` minlength="${t.minLength}"`:""}${t.maxLength>=0?s` maxlength="${t.maxLength}"`:""}${t.pattern?s` pattern="${t.pattern}"`:""}${t.autocomplete?s` autocomplete="${t.autocomplete}"`:""}${t.inputMode?s` inputmode="${t.inputMode}"`:""}${t.enterKeyHint?s` enterkeyhint="${t.enterKeyHint}"`:""}`}var Q={tag:"neu-text-field",props:Ge,delegatesFocus:!0,form:{valueProp:"value"},styles:Ae,template:t=>s`<div part="base" class="base"><label part="label" class="label" for="input"><slot name="label"><span class="label-text" data-ref="label-text">${t.label}</span></slot></label><div part="control" class="control"><span part="prefix" class="prefix"><slot name="prefix"></slot></span><input part="input" class="input" id="input" data-ref="input" type="${t.type}" value="${t.value}" aria-describedby="help"${Ye(t)}><span part="suffix" class="suffix"><slot name="suffix"></slot></span></div><div part="help-text" class="help" id="help"><slot name="help-text"><span class="help-text" data-ref="help-text">${t.helpText}</span></slot><span class="error-text" data-ref="error-text">${t.errorText}</span></div></div>`,docs:{summary:"A single-line text input with an inset field. The value attribute is the default value.",events:[{name:"input",description:"Fired on every edit (the native input event, composed)."},{name:"change",description:"Fired when an edit is committed, usually on blur."}],slots:[{name:"label",description:"Rich label; replaces the label attribute."},{name:"prefix",description:"Content before the input, such as an icon."},{name:"suffix",description:"Content after the input."},{name:"help-text",description:"Rich help text; replaces the help-text attribute."}],parts:[{name:"base",description:"Outer wrapper."},{name:"label",description:"The <label> element."},{name:"control",description:"The inset field around the input."},{name:"input",description:"The native <input>."},{name:"prefix",description:"Wrapper around the prefix slot."},{name:"suffix",description:"Wrapper around the suffix slot."},{name:"help-text",description:"Help or error text area."}],cssProperties:l}};var Ze=["value","type","required","disabled","readOnly","minLength","maxLength","pattern","errorText","autocomplete"];function Re(t){return Ze.some(e=>t.has(e))}var I=class extends g{static def=Q;static extraProperties=["defaultValue"];dirty=!1;pendingValue=null;get value(){return this.input?.value??this.pendingValue??this.p.value}set value(e){let r=e==null?"":String(e);this.dirty=!0;let n=this.input;n?n.value=r:this.pendingValue=r,this.commit()}get defaultValue(){return this.p.value}set defaultValue(e){this.setAttribute("value",String(e))}focus(e){let r=this.input;r?r.focus(e):super.focus(e)}select(){this.input?.select()}setSelectionRange(e,r,n){this.input?.setSelectionRange(e,r,n)}get p(){return this.props}get input(){return this.ref("input")}probe(e){let r=document.createElement("input");return r.type=this.p.type,r.value=e,r}validityProbe(){let e=this.p,r=this.probe(this.value);return r.required=e.required,r.readOnly=e.readOnly,r.disabled=this.isDisabled,e.pattern&&r.setAttribute("pattern",e.pattern),e.minLength>=0&&r.setAttribute("minlength",String(e.minLength)),e.maxLength>=0&&r.setAttribute("maxlength",String(e.maxLength)),r}rendered(){let e=this.input;e&&(e.value!==this.probe(this.p.value).value&&(this.dirty=!0),this.pendingValue!==null&&(e.value=this.pendingValue,this.pendingValue=null),e.addEventListener("input",()=>{this.dirty=!0,this.commit()}),e.addEventListener("change",()=>{this.markInteracted(),y(this,"change")}),e.addEventListener("keydown",r=>{r.key!=="Enter"||r.isComposing||u(r,()=>{r.defaultPrevented||Ie(this.internals.form)})}))}update(e){let r=this.p,n=this.input;n&&(e.has("type")&&n.type!==r.type&&(n.type=r.type),e.has("value")&&(n.defaultValue!==r.value&&(n.defaultValue=r.value),this.dirty||(n.value=r.value)),e.has("placeholder")&&m(n,"placeholder",r.placeholder),e.has("required")&&(n.required=r.required),e.has("disabled")&&(n.disabled=this.isDisabled),e.has("readOnly")&&(n.readOnly=r.readOnly),e.has("minLength")&&m(n,"minlength",r.minLength>=0?String(r.minLength):""),e.has("maxLength")&&m(n,"maxlength",r.maxLength>=0?String(r.maxLength):""),e.has("pattern")&&m(n,"pattern",r.pattern),e.has("autocomplete")&&m(n,"autocomplete",r.autocomplete),e.has("inputMode")&&m(n,"inputmode",r.inputMode),e.has("enterKeyHint")&&m(n,"enterkeyhint",r.enterKeyHint)),e.has("label")&&p(this.ref("label-text"),r.label),e.has("helpText")&&p(this.ref("help-text"),r.helpText),Re(e)&&this.commit()}willUpdate(e){!this.isConnected&&!this.input&&Re(e)&&this.commit()}formValue(){return this.value}formState(){let e=this.p;return e.type==="password"||e.autocomplete.trim().toLowerCase()==="off"?null:this.value}validate(){let e=this.input,r=e??this.validityProbe();!r.willValidate||r.validity.valid?this.internals.setValidity({}):this.internals.setValidity(Ce(r.validity),r.validationMessage,e??void 0),p(this.ref("error-text"),this.p.errorText||e?.validationMessage||"")}resetToDefault(){this.dirty=!1,this.pendingValue=null;let e=this.input;e&&(e.value=this.p.value)}restoreState(e){this.dirty=!0;let r=this.input;r?r.value=e:this.pendingValue=e}};I.define();export{w as NeuAvatar,S as NeuBadge,v as NeuButton,E as NeuButtonGroup,T as NeuDivider,L as NeuIcon,P as NeuIconButton,D as NeuSpinner,C as NeuSurface,M as NeuSwitch,I as NeuTextField,A as avatarDef,R as badgeDef,H as buttonDef,F as buttonGroupDef,N as dividerDef,W as iconButtonDef,U as iconDef,je as registerIconLibrary,G as spinnerDef,Y as surfaceDef,J as switchDef,Q as textFieldDef};