@neumorphism-ui/elements 1.0.0-next.1 → 1.0.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -1
- package/cdn/neu.min.js +176 -51
- package/custom-elements.json +2555 -358
- package/dist/all.d.ts +8 -0
- package/dist/all.js +8 -0
- package/dist/checkbox.d.ts +3 -0
- package/dist/checkbox.js +4 -0
- package/dist/components/avatar/avatar.d.ts +0 -3
- package/dist/components/avatar/avatar.def.d.ts +0 -3
- package/dist/components/avatar/avatar.def.js +4 -18
- package/dist/components/avatar/avatar.docs.d.ts +2 -0
- package/dist/components/avatar/avatar.docs.js +22 -0
- package/dist/components/avatar/avatar.js +7 -1
- package/dist/components/badge/badge.d.ts +0 -2
- package/dist/components/badge/badge.def.d.ts +0 -2
- package/dist/components/badge/badge.def.js +1 -14
- package/dist/components/badge/badge.docs.d.ts +2 -0
- package/dist/components/badge/badge.docs.js +17 -0
- package/dist/components/button/button.d.ts +0 -2
- package/dist/components/button/button.def.d.ts +0 -5
- package/dist/components/button/button.def.js +3 -25
- package/dist/components/button/button.docs.d.ts +2 -0
- package/dist/components/button/button.docs.js +29 -0
- package/dist/components/button/button.js +3 -36
- package/dist/components/button-group/button-group.d.ts +0 -2
- package/dist/components/button-group/button-group.def.d.ts +0 -2
- package/dist/components/button-group/button-group.def.js +1 -10
- package/dist/components/button-group/button-group.docs.d.ts +2 -0
- package/dist/components/button-group/button-group.docs.js +13 -0
- package/dist/components/checkbox/checkbox.d.ts +40 -0
- package/dist/components/checkbox/checkbox.def.d.ts +27 -0
- package/dist/components/checkbox/checkbox.def.js +21 -0
- package/dist/components/checkbox/checkbox.docs.d.ts +2 -0
- package/dist/components/checkbox/checkbox.docs.js +27 -0
- package/dist/components/checkbox/checkbox.js +40 -0
- package/dist/components/checkbox/checkbox.styles.d.ts +1 -0
- package/dist/components/checkbox/checkbox.styles.js +28 -0
- package/dist/components/divider/divider.d.ts +0 -1
- package/dist/components/divider/divider.def.d.ts +0 -1
- package/dist/components/divider/divider.def.js +0 -9
- package/dist/components/divider/divider.docs.d.ts +2 -0
- package/dist/components/divider/divider.docs.js +12 -0
- package/dist/components/icon/icon.d.ts +0 -3
- package/dist/components/icon/icon.def.d.ts +0 -3
- package/dist/components/icon/icon.def.js +3 -10
- package/dist/components/icon/icon.docs.d.ts +2 -0
- package/dist/components/icon/icon.docs.js +13 -0
- package/dist/components/icon/system-icons.d.ts +10 -0
- package/dist/components/icon/system-icons.js +22 -11
- package/dist/components/icon-button/icon-button.d.ts +0 -5
- package/dist/components/icon-button/icon-button.def.d.ts +0 -5
- package/dist/components/icon-button/icon-button.def.js +3 -17
- package/dist/components/icon-button/icon-button.docs.d.ts +2 -0
- package/dist/components/icon-button/icon-button.docs.js +26 -0
- package/dist/components/number-field/number-field.d.ts +79 -0
- package/dist/components/number-field/number-field.def.d.ts +115 -0
- package/dist/components/number-field/number-field.def.js +40 -0
- package/dist/components/number-field/number-field.docs.d.ts +2 -0
- package/dist/components/number-field/number-field.docs.js +45 -0
- package/dist/components/number-field/number-field.js +121 -0
- package/dist/components/number-field/number-field.styles.d.ts +1 -0
- package/dist/components/number-field/number-field.styles.js +15 -0
- package/dist/components/option/option-data.d.ts +8 -0
- package/dist/components/option/option-data.js +12 -0
- package/dist/components/option/option.d.ts +17 -0
- package/dist/components/option/option.def.d.ts +8 -0
- package/dist/components/option/option.def.js +12 -0
- package/dist/components/option/option.docs.d.ts +2 -0
- package/dist/components/option/option.docs.js +12 -0
- package/dist/components/option/option.js +17 -0
- package/dist/components/option/option.styles.d.ts +2 -0
- package/dist/components/option/option.styles.js +5 -0
- package/dist/components/radio/radio-link.d.ts +11 -0
- package/dist/components/radio/radio-link.js +5 -0
- package/dist/components/radio/radio.d.ts +27 -0
- package/dist/components/radio/radio.def.d.ts +9 -0
- package/dist/components/radio/radio.def.js +12 -0
- package/dist/components/radio/radio.docs.d.ts +2 -0
- package/dist/components/radio/radio.docs.js +18 -0
- package/dist/components/radio/radio.js +43 -0
- package/dist/components/radio/radio.styles.d.ts +1 -0
- package/dist/components/radio/radio.styles.js +21 -0
- package/dist/components/radio-group/radio-group.d.ts +76 -0
- package/dist/components/radio-group/radio-group.def.d.ts +36 -0
- package/dist/components/radio-group/radio-group.def.js +40 -0
- package/dist/components/radio-group/radio-group.docs.d.ts +2 -0
- package/dist/components/radio-group/radio-group.docs.js +37 -0
- package/dist/components/radio-group/radio-group.js +208 -0
- package/dist/components/radio-group/radio-group.styles.d.ts +1 -0
- package/dist/components/radio-group/radio-group.styles.js +13 -0
- package/dist/components/select/select.d.ts +115 -0
- package/dist/components/select/select.def.d.ts +34 -0
- package/dist/components/select/select.def.js +35 -0
- package/dist/components/select/select.docs.d.ts +2 -0
- package/dist/components/select/select.docs.js +65 -0
- package/dist/components/select/select.js +391 -0
- package/dist/components/select/select.styles.d.ts +1 -0
- package/dist/components/select/select.styles.js +35 -0
- package/dist/components/shared/checkable.d.ts +45 -0
- package/dist/components/shared/checkable.js +108 -0
- package/dist/components/shared/field.styles.d.ts +1 -0
- package/dist/components/shared/field.styles.js +34 -0
- package/dist/components/shared/press.d.ts +7 -0
- package/dist/components/shared/press.js +42 -0
- package/dist/components/shared/step.d.ts +2 -0
- package/dist/components/shared/step.js +2 -0
- package/dist/components/shared/text-control.d.ts +72 -0
- package/dist/components/shared/text-control.js +191 -0
- package/dist/components/slider/slider.d.ts +67 -0
- package/dist/components/slider/slider.def.d.ts +37 -0
- package/dist/components/slider/slider.def.js +54 -0
- package/dist/components/slider/slider.docs.d.ts +2 -0
- package/dist/components/slider/slider.docs.js +45 -0
- package/dist/components/slider/slider.js +170 -0
- package/dist/components/slider/slider.styles.d.ts +1 -0
- package/dist/components/slider/slider.styles.js +16 -0
- package/dist/components/spinner/spinner.d.ts +0 -1
- package/dist/components/spinner/spinner.def.d.ts +0 -1
- package/dist/components/spinner/spinner.def.js +1 -13
- package/dist/components/spinner/spinner.docs.d.ts +2 -0
- package/dist/components/spinner/spinner.docs.js +17 -0
- package/dist/components/surface/surface.d.ts +0 -4
- package/dist/components/surface/surface.def.d.ts +0 -4
- package/dist/components/surface/surface.def.js +3 -12
- package/dist/components/surface/surface.docs.d.ts +2 -0
- package/dist/components/surface/surface.docs.js +15 -0
- package/dist/components/switch/switch.d.ts +4 -35
- package/dist/components/switch/switch.def.d.ts +0 -5
- package/dist/components/switch/switch.def.js +5 -21
- package/dist/components/switch/switch.docs.d.ts +2 -0
- package/dist/components/switch/switch.docs.js +26 -0
- package/dist/components/switch/switch.js +5 -117
- package/dist/components/text-field/implicit-submit.d.ts +5 -0
- package/dist/components/text-field/implicit-submit.js +8 -3
- package/dist/components/text-field/text-field.d.ts +9 -42
- package/dist/components/text-field/text-field.def.d.ts +0 -12
- package/dist/components/text-field/text-field.def.js +5 -30
- package/dist/components/text-field/text-field.docs.d.ts +2 -0
- package/dist/components/text-field/text-field.docs.js +45 -0
- package/dist/components/text-field/text-field.js +21 -178
- package/dist/components/text-field/text-field.styles.d.ts +1 -1
- package/dist/components/text-field/text-field.styles.js +2 -35
- package/dist/components/textarea/textarea.d.ts +92 -0
- package/dist/components/textarea/textarea.def.d.ts +127 -0
- package/dist/components/textarea/textarea.def.js +44 -0
- package/dist/components/textarea/textarea.docs.d.ts +2 -0
- package/dist/components/textarea/textarea.docs.js +40 -0
- package/dist/components/textarea/textarea.js +101 -0
- package/dist/components/textarea/textarea.styles.d.ts +1 -0
- package/dist/components/textarea/textarea.styles.js +9 -0
- package/dist/components/theme-docs.d.ts +3 -0
- package/dist/components/theme-docs.js +8 -0
- package/dist/core/define.d.ts +20 -2
- package/dist/core/dom.d.ts +4 -0
- package/dist/core/dom.js +7 -0
- package/dist/core/form-control.js +6 -1
- package/dist/core/neu-element.d.ts +2 -2
- package/dist/core/neu-element.js +10 -7
- package/dist/core/props.d.ts +13 -1
- package/dist/core/props.js +13 -3
- package/dist/core/styles.d.ts +0 -2
- package/dist/core/styles.js +0 -7
- package/dist/core/validation.d.ts +6 -2
- package/dist/core/validation.js +15 -8
- package/dist/docs.d.ts +3 -0
- package/dist/docs.js +41 -0
- package/dist/number-field.d.ts +3 -0
- package/dist/number-field.js +4 -0
- package/dist/option.d.ts +3 -0
- package/dist/option.js +4 -0
- package/dist/radio-group.d.ts +4 -0
- package/dist/radio-group.js +6 -0
- package/dist/radio.d.ts +3 -0
- package/dist/radio.js +4 -0
- package/dist/select.d.ts +3 -0
- package/dist/select.js +4 -0
- package/dist/slider.d.ts +3 -0
- package/dist/slider.js +4 -0
- package/dist/ssr.d.ts +10 -6
- package/dist/ssr.js +26 -6
- package/dist/textarea.d.ts +3 -0
- package/dist/textarea.js +4 -0
- package/package.json +45 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Framework-agnostic neumorphism web components for
|
|
4
4
|
[neumorphism-ui](https://github.com/hunghdvn/neumorphism-ui): `<neu-button>`, `<neu-switch>`,
|
|
5
5
|
`<neu-text-field>`, `<neu-icon>`, `<neu-icon-button>`, `<neu-button-group>`, `<neu-surface>`,
|
|
6
|
-
`<neu-divider>`, `<neu-badge>`, `<neu-avatar>` and `<neu-
|
|
6
|
+
`<neu-divider>`, `<neu-badge>`, `<neu-avatar>`, `<neu-spinner>`, `<neu-textarea>`, `<neu-number-field>`, `<neu-checkbox>`, `<neu-radio-group>` with `<neu-radio>`, `<neu-slider>` and `<neu-select>` with `<neu-option>`. They are accessible, the form
|
|
7
7
|
controls are form-associated, and they adopt server-rendered declarative shadow roots. Import one
|
|
8
8
|
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.
|
|
9
9
|
|
|
@@ -35,6 +35,17 @@ import '@neumorphism-ui/elements/all.js';
|
|
|
35
35
|
<neu-divider orientation="vertical"></neu-divider>
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
```html
|
|
39
|
+
<neu-select label="Plan" name="plan" value="pro">
|
|
40
|
+
<neu-option value="free">Free</neu-option>
|
|
41
|
+
<neu-option value="pro">Pro</neu-option>
|
|
42
|
+
</neu-select>
|
|
43
|
+
<neu-radio-group label="Billing" name="billing" value="monthly">
|
|
44
|
+
<neu-radio value="monthly">Monthly</neu-radio>
|
|
45
|
+
<neu-radio value="yearly">Yearly</neu-radio>
|
|
46
|
+
</neu-radio-group>
|
|
47
|
+
```
|
|
48
|
+
|
|
38
49
|
## Icons
|
|
39
50
|
|
|
40
51
|
`<neu-icon>` and `<neu-icon-button>` ship eight built-in icons in the `system` library: `check`,
|
package/cdn/neu.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function
|
|
1
|
+
function m(r,e){r&&r.textContent!==e&&(r.textContent=e)}function c(r,e,t){r&&(t===""?r.removeAttribute(e):r.getAttribute(e)!==t&&r.setAttribute(e,t))}function je(r){return r.getRootNode().activeElement===r}function R(r,e){let t=(e instanceof Element?e:e.parentElement)?.closest("[slot]");return!!t&&t!==r&&r.contains(t)}var E=r=>r.isComposing||r.keyCode===229;function p(r,e){r.dispatchEvent(new Event(e,{bubbles:!0,composed:!0}))}function v(r,e){let t=!1,i=()=>{t||(t=!0,window.removeEventListener(r.type,n),clearTimeout(s),e())},n=a=>{a===r&&i()};window.addEventListener(r.type,n);let s=setTimeout(i,0)}function M(r,e){return e.attribute??r.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function Ge(r,e,t){return e.reflect??r!==t.form?.valueProp}function O(r,e){switch(r.type){case"boolean":return e!==null;case"number":{if(e===null||e.trim()==="")return r.default;let t=Number(e);return Number.isFinite(t)?t:r.default}case"string":{let t=r.default??"";return e===null||r.values&&!r.values.includes(e)?t:e}}}function We(r,e){return r.type==="boolean"?!!e:r.type==="number"&&typeof e=="number"?Number.isFinite(e)?e:r.default:O(r,e==null?null:String(e))}function Ye(r,e){switch(r.type){case"boolean":return e?"":null;case"number":return Number.isFinite(e)?String(e):null;case"string":return e===""&&!r.default?null:String(e)}}function Xe(r,e){let t={};for(let[i,n]of Object.entries(r))t[i]=O(n,e(M(i,n)));return t}var Nt=globalThis.HTMLElement??class{},Ze=new WeakMap,Je=new WeakSet;function Ft(r){let e=Ze.get(r);return e||(e=new CSSStyleSheet,e.replaceSync(r.styles),Ze.set(r,e)),e}var u=class r extends Nt{static extraProperties=[];static get observedAttributes(){return Object.entries(this.def.props).map(([e,t])=>M(e,t))}static define(){let e=this.def;for(let[i,n]of Object.entries(e.props)){if(this.definesAccessor(i))continue;let s=function(){return this.props[i]};Je.add(s),Object.defineProperty(this.prototype,i,{configurable:!0,enumerable:!0,get:s,set(a){this.setProp(i,We(n,a))}})}let t=globalThis.customElements;t&&!t.get(e.tag)&&t.define(e.tag,this)}static definesAccessor(e){if(Object.prototype.hasOwnProperty.call(this.prototype,e))return!0;let t=Object.getPrototypeOf(this.prototype);for(;t!==null&&t!==r.prototype;t=Object.getPrototypeOf(t)){let i=Object.getOwnPropertyDescriptor(t,e);if(i)return!(i.get&&Je.has(i.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=Xe(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,t,i){if(!this.reflecting){for(let[n,s]of Object.entries(this.def.props))if(M(n,s)===e){this.setProp(n,O(s,i),!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 t=this.refs.get(e);if(!t){let i=this.root.querySelector(`[data-ref="${e}"]`);if(!i)return null;this.refs.set(e,i),t=i}return t}setProp(e,t,i=!1){let n=this.def.props[e];!n||Object.is(this.props[e],t)||(this.props[e]=t,!i&&Ge(e,n,this.def)&&this.reflect(e,n,t),this.propChanged(e))}toggleState(e,t){t?this.internals.states.add(e):this.internals.states.delete(e)}syncFocusable(e){let t=this.getAttribute("tabindex");t!==this.writtenTabIndex&&(this.authorTabIndex=t);let i=e?this.authorTabIndex??"0":null;i===null?this.removeAttribute("tabindex"):t!==i&&this.setAttribute("tabindex",i),this.writtenTabIndex=i}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 t=new Set([e]);this.willUpdate(t),this.hasConnected&&this.update(t)}reflect(e,t,i){let n=Ye(t,i),s=M(e,t);this.reflecting=!0;try{n===null?this.removeAttribute(s):this.setAttribute(s,n)}finally{this.reflecting=!1}}upgradeProperties(){let e=this.constructor,t=this;for(let i of[...Object.keys(e.def.props),...e.extraProperties]){if(!Object.prototype.hasOwnProperty.call(this,i))continue;let n=t[i];delete t[i],t[i]=n}}ensureRoot(e){if(this.root)return;let t=this.internals.shadowRoot,i=t?[...this.def.template(this.props).value.matchAll(/data-ref="([^"]+)"/g)].map(n=>n[1]):[];if(!e&&document.readyState==="loading"&&this.parsing(t,i)){this.waitForParser(t,i);return}(!t||this.parsing(t,i))&&(t??=this.attachShadow({mode:"open",delegatesFocus:this.def.delegatesFocus??!1}),t.innerHTML=this.def.template(this.props).value),this.adoptRoot(t)}parsing(e,t){if(e)return t.some(i=>!e.querySelector(`[data-ref="${i}"]`));if(this.firstChild!==null||this.nextSibling!==null)return!1;for(let i=this.parentNode;i!==null;i=i.parentNode)if(i.nextSibling!==null)return!1;return!0}waitForParser(e,t){let i=s=>{n.disconnect(),document.removeEventListener("DOMContentLoaded",i),this.ensureRoot(s)},n=new MutationObserver(()=>{this.parsing(e,t)||i()});n.observe(e??document,{childList:!0,subtree:!0}),document.addEventListener("DOMContentLoaded",i)}adoptRoot(e){this.root=e,e.adoptedStyleSheets=[Ft(this.def)],e.querySelector("style[data-neu-ssr]")?.remove(),this.rendered(),this.update(this.allKeys())}};var Qe=Symbol("neu.raw"),qt={"&":"&","<":"<",">":">",'"':""","'":"'"};function Bt(r){return r.replace(/[&<>"']/g,e=>qt[e]??e)}function f(r){return{[Qe]:!0,value:r}}function Kt(r){return typeof r=="object"&&r!==null&&Qe in r}function et(r){return r==null||r===!1?"":Array.isArray(r)?r.map(et).join(""):Kt(r)?r.value:Bt(String(r))}function o(r,...e){let t=r[0]??"";return e.forEach((i,n)=>{t+=et(i)+(r[n+1]??"")}),f(t)}var le='<path d="M5 12.5l4.5 4.5L19 7.5"/>',de='<path d="M6 9l6 6 6-6"/>',Ut='<path d="M6 15l6-6 6 6"/>',ue='<path d="M12 5v14M5 12h14"/>',$='<path d="M5 12h14"/>',jt='<path d="M6 6l12 12M18 6L6 18"/>',Gt='<circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5h.01"/>',Wt='<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-6 8-6s8 2 8 6"/>',tt={check:le,"chevron-down":de,"chevron-up":Ut,plus:ue,minus:$,x:jt,"alert-circle":Gt,user:Wt};function y(r,e){return`<svg${e?` part="${e}"`:""} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${r}</svg>`}function x(r){let e=Object.hasOwn(tt,r)?tt[r]:void 0;return e===void 0?void 0:y(e,"svg")}var d=`
|
|
2
2
|
:host {
|
|
3
3
|
--_neu-bg: var(--neu-bg, #e0e5ec);
|
|
4
4
|
--_neu-accent-c: var(--neu-accent, #6d5dfc);
|
|
@@ -25,7 +25,7 @@ function p(t,e){t&&t.textContent!==e&&(t.textContent=e)}function m(t,e,r){t&&(r=
|
|
|
25
25
|
:host([hidden]) { display: none !important; }
|
|
26
26
|
:host(:focus) { outline: none; }
|
|
27
27
|
*, *::before, *::after { box-sizing: border-box; }
|
|
28
|
-
|
|
28
|
+
`;var rt=`${d}
|
|
29
29
|
:host { display: inline-block; vertical-align: middle; --_neu-s: 2.5rem; inline-size: var(--_neu-s); block-size: var(--_neu-s); }
|
|
30
30
|
:host([size='sm']) { --_neu-s: 2rem; }
|
|
31
31
|
:host([size='lg']) { --_neu-s: 3.5rem; }
|
|
@@ -36,7 +36,7 @@ function p(t,e){t&&t.textContent!==e&&(t.textContent=e)}function m(t,e,r){t&&(r=
|
|
|
36
36
|
.base[data-show='image'] .image, .base[data-show='initials'] .initials { display: block; }
|
|
37
37
|
.base[data-show='icon'] .icon { display: flex; inline-size: 60%; block-size: 60%; }
|
|
38
38
|
.icon svg { inline-size: 100%; block-size: 100%; }
|
|
39
|
-
`;var
|
|
39
|
+
`;var ce={tag:"neu-avatar",props:{src:{type:"string"},label:{type:"string"},initials:{type:"string"},size:{type:"string",default:"md",values:["sm","md","lg"]},shape:{type:"string",default:"circle",values:["circle","rounded"]}},styles:rt,template:r=>{let e=r.src?"image":r.initials.trim()?"initials":"icon";return o`<span part="base" class="base" data-ref="base" data-show="${e}"><img part="image" class="image" data-ref="image" alt=""${r.src?o` src="${r.src}"`:""}><span part="initials" class="initials" data-ref="initials">${r.initials}</span><span part="icon" class="icon">${f(x("user")??"")}</span></span>`}};var H=class extends u{static def=ce;broken=!1;willUpdate(e){e.has("src")&&this.setBroken(!1)}rendered(){let e=this.ref("image");e&&(e.addEventListener("error",()=>this.setBroken(!0)),e.addEventListener("load",()=>this.setBroken(!1)),e.hasAttribute("src")&&e.complete&&e.naturalWidth===0&&(this.broken=!0),this.toggleState("image-error",this.broken))}update(e){if(e.has("label")){let a=String(this.props.label);this.internals.role=a?"img":null,this.internals.ariaLabel=a||null,this.internals.ariaHidden=a?null:"true"}e.has("initials")&&m(this.ref("initials"),String(this.props.initials));let t=this.ref("image");if(!t)return;let i=String(this.props.src);e.has("src")&&(t.getAttribute("src")??"")!==i&&(i?t.setAttribute("src",i):t.removeAttribute("src"));let n=this.ref("base"),s=this.showing();n.dataset.show!==s&&(n.dataset.show=s)}showing(){return this.props.src&&!this.broken?"image":String(this.props.initials).trim()?"initials":"icon"}setBroken(e){this.broken!==e&&(this.broken=e,this.toggleState("image-error",e),this.ref("base")&&this.update(new Set))}};H.define();var it=`${d}
|
|
40
40
|
:host { display: inline-block; vertical-align: middle; --_neu-success: var(--neu-success, #3bb273); --_neu-warning: var(--neu-warning, #e6a23c); }
|
|
41
41
|
.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); }
|
|
42
42
|
:host([pill]) .base { border-radius: 999px; }
|
|
@@ -44,9 +44,9 @@ function p(t,e){t&&t.textContent!==e&&(t.textContent=e)}function m(t,e,r){t&&(r=
|
|
|
44
44
|
:host([variant='success']) .base { color: var(--_neu-success); }
|
|
45
45
|
:host([variant='warning']) .base { color: var(--_neu-warning); }
|
|
46
46
|
:host([variant='danger']) .base { color: var(--_neu-danger); }
|
|
47
|
-
`;var
|
|
47
|
+
`;var pe={tag:"neu-badge",props:{variant:{type:"string",default:"neutral",values:["neutral","accent","success","warning","danger"]},pill:{type:"boolean"}},styles:it,template:()=>o`<span part="base" class="base"><slot></slot></span>`};var V=class extends u{static def=pe};V.define();var me=new WeakSet,nt=!1;function w(r){me.add(r),setTimeout(()=>me.delete(r),0)}var he=Symbol.for("neu-ui.submits");function fe(r){return r instanceof HTMLButtonElement?r.type==="submit":r instanceof HTMLInputElement?r.type==="submit"||r.type==="image":r.constructor[he]===!0&&r.type==="submit"}function st(r){let e=r.form;return e instanceof HTMLFormElement?e:null}function Yt(){nt||typeof document>"u"||(nt=!0,document.addEventListener("click",r=>{for(let e of r.composedPath()){if(!(e instanceof Element)||!fe(e))continue;let t=st(e);t&&w(t);return}},{capture:!0}),document.addEventListener("keydown",r=>{if(!(r.key!=="Enter"||E(r)||!(r.composedPath()[0]instanceof HTMLInputElement)))for(let e of r.composedPath()){if(!(e instanceof Element))continue;let t=st(e);if(t){w(t);return}}},{capture:!0}))}var b=class extends u{static formAssociated=!0;interacted=!1;constructor(){super(),Yt(),this.addEventListener("invalid",()=>{let e=this.internals.form;e&&me.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)}};function N(r,e,t,i){let n=a=>a?e.add("pressed"):e.delete("pressed"),s=a=>v(a,()=>{!a.defaultPrevented&&!i()&&r.click()});r.addEventListener("keydown",a=>{if(!i())if(a.key===" "){if(a.defaultPrevented)return;a.preventDefault(),n(!0)}else a.key==="Enter"&&(t==="repeat"||t==="once"&&!a.repeat)&&s(a)}),r.addEventListener("keyup",a=>{a.key!==" "||!e.has("pressed")||(n(!1),s(a))}),r.addEventListener("blur",()=>{je(r)||n(!1)}),r.addEventListener("focus",()=>n(!1))}var ot=r=>`${d}
|
|
48
48
|
:host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; }
|
|
49
|
-
:host(:disabled), :host([disabled])${
|
|
49
|
+
:host(:disabled), :host([disabled])${r?", :host([loading])":""} { cursor: not-allowed; }
|
|
50
50
|
.base {
|
|
51
51
|
display: inline-flex; flex: auto; align-items: center; justify-content: center;
|
|
52
52
|
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)));
|
|
@@ -60,10 +60,10 @@ function p(t,e){t&&t.textContent!==e&&(t.textContent=e)}function m(t,e,r){t&&(r=
|
|
|
60
60
|
:host([variant='primary']) .base { color: var(--_neu-accent-c); }
|
|
61
61
|
:host([variant='flat']) .base { box-shadow: none; }
|
|
62
62
|
:host([variant='flat']:hover:not(:disabled):not([disabled])) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised-sm)); }
|
|
63
|
-
:host(:active:not(:disabled):not([disabled])${
|
|
63
|
+
:host(:active:not(:disabled):not([disabled])${r?":not([loading])":""}) .base, :host(:state(pressed)) .base { box-shadow: var(--_neu-inset-sm); }
|
|
64
64
|
:host(:focus-visible) .base { box-shadow: var(--_neu-grp-shadow, var(--_neu-raised)), var(--_neu-focus); }
|
|
65
65
|
:host(:disabled) .base, :host([disabled]) .base { box-shadow: none; color: var(--_neu-fg-muted); }
|
|
66
|
-
`,
|
|
66
|
+
`,at=ot(!1),lt=`${ot(!0)}
|
|
67
67
|
.base { min-block-size: 2.5rem; padding-inline: 1.125rem; font: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1; }
|
|
68
68
|
:host([size='sm']) .base { min-block-size: 2rem; padding-inline: 0.875rem; font-size: 0.8125rem; }
|
|
69
69
|
:host([size='lg']) .base { min-block-size: 3rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
|
|
@@ -78,7 +78,7 @@ function p(t,e){t&&t.textContent!==e&&(t.textContent=e)}function m(t,e,r){t&&(r=
|
|
|
78
78
|
:host([loading]) .spinner { display: inline-block; }
|
|
79
79
|
@keyframes neu-spin { to { transform: rotate(360deg); } }
|
|
80
80
|
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
|
|
81
|
-
`;var
|
|
81
|
+
`;var be={tag:"neu-button",props:{variant:{type:"string",default:"default",values:["default","primary","flat"]},size:{type:"string",default:"md",values:["sm","md","lg"]},disabled:{type:"boolean"},loading:{type:"boolean"},type:{type:"string",default:"button",values:["button","submit","reset"]}},styles:lt,template:()=>o`<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>`};var L=class extends u{static def=be;static formAssociated=!0;static[he]=!0;constructor(){super(),this.internals.role="button",this.addEventListener("click",e=>this.onClickCapture(e),{capture:!0}),this.addEventListener("click",e=>this.onClick(e)),N(this,this.internals.states,"repeat",()=>this.inactive)}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){v(e,()=>{let t=this.internals.form;e.defaultPrevented||!t||(this.props.type==="submit"?(w(t),t.requestSubmit()):this.props.type==="reset"&&t.reset())})}update(e){(e.has("disabled")||e.has("loading"))&&(this.syncDisabledState(),this.internals.ariaBusy=this.props.loading===!0?"true":null)}};L.define();var dt=`${d}
|
|
82
82
|
:host { display: inline-flex; vertical-align: middle; }
|
|
83
83
|
.base { display: inline-flex; border-radius: var(--_neu-r); box-shadow: var(--_neu-raised); }
|
|
84
84
|
:host([orientation='vertical']) .base { flex-direction: column; }
|
|
@@ -89,20 +89,46 @@ function p(t,e){t&&t.textContent!==e&&(t.textContent=e)}function m(t,e,r){t&&(r=
|
|
|
89
89
|
: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); }
|
|
90
90
|
: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); }
|
|
91
91
|
: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); }
|
|
92
|
-
`;var
|
|
92
|
+
`;var ve={tag:"neu-button-group",props:{label:{type:"string"},orientation:{type:"string",default:"horizontal",values:["horizontal","vertical"]}},styles:dt,template:()=>o`<span part="base" class="base"><slot></slot></span>`};var F=class extends u{static def=ve;constructor(){super(),this.internals.role="group"}update(e){e.has("label")&&(this.internals.ariaLabel=String(this.props.label)||null)}};F.define();var ut=new Map;function T(r,e){let t=ut.get(r);if(t===void 0){let i=r==="select"?document.createElement("select"):Object.assign(document.createElement("input"),{type:r});i.required=!0,t=i.validationMessage||e,ut.set(r,t)}return t}function ct(r){return{badInput:r.badInput,customError:r.customError,patternMismatch:r.patternMismatch,rangeOverflow:r.rangeOverflow,rangeUnderflow:r.rangeUnderflow,stepMismatch:r.stepMismatch,tooLong:r.tooLong,tooShort:r.tooShort,typeMismatch:r.typeMismatch,valueMissing:r.valueMissing}}var D=class extends b{static extraProperties=["defaultChecked"];static enter="once";current;dirty=!1;constructor(){super(),this.current=this.props.checked===!0,this.addEventListener("click",e=>this.onClick(e)),N(this,this.internals.states,this.constructor.enter,()=>this.isDisabled)}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)}ariaCheckedValue(){return this.current?"true":"false"}flip(){let e=this.current;return this.setCurrent(!e),()=>this.setCurrent(e)}onClick(e){this.dirty=!0;let t=this.flip(),i=this.ariaCheckedValue();v(e,()=>{e.defaultPrevented?t():this.isConnected&&this.ariaCheckedValue()===i&&(this.markInteracted(),p(this,"input"),p(this,"change"))})}sync(){this.toggleState("checked",this.current),this.internals.ariaChecked=this.ariaCheckedValue(),this.paint()}setCurrent(e){this.current=e,this.sync(),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},T("checkbox","Please check this box if you want to proceed."),this.ref(this.anchor)??void 0):this.internals.setValidity({})}resetToDefault(){this.dirty=!1,this.setCurrent(this.props.checked===!0)}restoreState(e){this.dirty=!0,this.setCurrent(e==="checked")}};var pt=`${d}
|
|
93
|
+
:host {
|
|
94
|
+
display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none;
|
|
95
|
+
--_neu-box: 1.25rem;
|
|
96
|
+
}
|
|
97
|
+
:host([size='sm']) { --_neu-box: 1rem; }
|
|
98
|
+
:host([size='lg']) { --_neu-box: 1.5rem; }
|
|
99
|
+
:host(:disabled), :host([disabled]) { cursor: not-allowed; }
|
|
100
|
+
.base { display: inline-flex; align-items: center; gap: 0.625rem; }
|
|
101
|
+
.control {
|
|
102
|
+
display: inline-flex; align-items: center; justify-content: center; flex: none;
|
|
103
|
+
inline-size: var(--_neu-box); block-size: var(--_neu-box);
|
|
104
|
+
border-radius: calc(var(--_neu-r) * 0.4); background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);
|
|
105
|
+
color: var(--_neu-accent-c);
|
|
106
|
+
transition: background-color var(--_neu-dur) ease, box-shadow var(--_neu-dur) ease;
|
|
107
|
+
}
|
|
108
|
+
.control.on, .control.mixed { background: var(--_neu-accent-soft); }
|
|
109
|
+
.indicator { display: inline-flex; inline-size: 80%; block-size: 80%; opacity: 0; }
|
|
110
|
+
.control.on .indicator, .control.mixed .indicator { opacity: 1; }
|
|
111
|
+
.indicator svg { inline-size: 100%; block-size: 100%; }
|
|
112
|
+
.indicator svg:last-child, .control.mixed .indicator svg:first-child { display: none; }
|
|
113
|
+
.control.mixed .indicator svg:last-child { display: block; }
|
|
114
|
+
:host(:focus-visible) .control { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
|
|
115
|
+
:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }
|
|
116
|
+
:host(:state(user-invalid)) .control { box-shadow: var(--_neu-inset-sm), 0 0 0 2px color-mix(in oklab, var(--_neu-danger) 55%, transparent); }
|
|
117
|
+
.label { color: var(--_neu-fg); }
|
|
118
|
+
`;var Xt=f(y(le)),Zt=f(y($)),ge={tag:"neu-checkbox",props:{checked:{type:"boolean"},indeterminate:{type:"boolean",reflect:!1},name:{type:"string"},value:{type:"string",default:"on"},disabled:{type:"boolean"},required:{type:"boolean"},size:{type:"string",default:"md",values:["sm","md","lg"]}},form:{valueProp:"checked"},styles:pt,template:r=>o`<span part="base" class="base"><span part="control" class="control${r.checked?" on":""}${r.indeterminate?" mixed":""}" data-ref="control"><span part="indicator" class="indicator">${Xt}${Zt}</span></span><span part="label" class="label"><slot></slot></span></span>`};var q=class extends D{static def=ge;static enter="none";anchor="control";constructor(){super(),this.internals.role="checkbox"}ariaCheckedValue(){return this.props.indeterminate===!0?"mixed":super.ariaCheckedValue()}flip(){if(!(this.props.indeterminate===!0))return super.flip();let t=this.checked;return this.setProp("indeterminate",!1),this.checked=!t,()=>{this.setProp("indeterminate",!0),this.checked=t}}paint(){let e=this.props.indeterminate===!0,t=this.ref("control");t?.classList.toggle("on",this.checked),t?.classList.toggle("mixed",e),this.toggleState("indeterminate",e)}update(e){super.update(e),e.has("indeterminate")&&this.sync()}};q.define();var mt=`${d}
|
|
93
119
|
:host { display: block; margin-block: 0.75rem; }
|
|
94
120
|
.base { display: block; border-block-start: 1px solid var(--_neu-sd); border-block-end: 1px solid var(--_neu-sl); }
|
|
95
121
|
:host([orientation='vertical']) { display: inline-block; align-self: stretch; min-block-size: 1em; margin-block: 0; margin-inline: 0.75rem; }
|
|
96
122
|
: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); }
|
|
97
|
-
`;var
|
|
98
|
-
${
|
|
99
|
-
${
|
|
123
|
+
`;var ye={tag:"neu-divider",props:{orientation:{type:"string",default:"horizontal",values:["horizontal","vertical"]}},styles:mt,template:()=>o`<span part="base" class="base"></span>`};var B=class extends u{static def=ye;constructor(){super(),this.internals.role="separator"}update(e){e.has("orientation")&&(this.internals.ariaOrientation=this.orientation)}};B.define();var ht=new Map,ft=new Map,xe=new Set;function Jt(r,e){if(r!=="system"){ht.set(r,e),ft.set(r,ke(r)+1);for(let t of[...xe])t(r)}}function bt(r){return ht.get(r)}function ke(r){return ft.get(r)??0}function vt(r){return xe.add(r),()=>xe.delete(r)}var we="http://www.w3.org/2000/svg",Qt=new Set("svg g path circle ellipse line polyline polygon rect defs title desc symbol linearGradient radialGradient stop clipPath mask use".split(" ")),_e=new Map,gt=new WeakMap,yt,er=0,tr=/^on|^style=|href=(?!#)|\\|(?:image-set|src)\(|url\((?![\s'"]*#)/i;function xt(r){for(let{name:e,value:t}of[...r.attributes])tr.test(`${e}=${t}`)&&r.removeAttribute(e);for(let e of[...r.childNodes])if(e.nodeType!==3){if(e.nodeType!==1||e.namespaceURI!==we||!Qt.has(e.localName)){e.remove();continue}xt(e)}}function kt(r){yt??=new DOMParser;let e=r.replace(/<svg\b(?![^>]*\sxmlns\s*=)/,`<svg xmlns="${we}"`),t=yt.parseFromString(e,"image/svg+xml").documentElement;return t.namespaceURI!==we||t.localName!=="svg"||t.querySelector("parsererror")?null:(xt(t),t.removeAttribute("xmlns:xlink"),t.setAttribute("part","svg"),t.setAttribute("aria-hidden","true"),t.setAttribute("focusable","false"),t)}function rr(r){let e=_e.get(r);return e||(e=(async()=>{try{let t=await fetch(r);return t.ok?kt((await t.text()).trim()):null}catch{return null}})(),_e.set(r,e),e.then(t=>t===null&&_e.delete(r))),e}function _t(r,e,t){let i=++er;gt.set(r,i);let n=s=>{gt.get(r)===i&&r.replaceChildren(...s?[r.ownerDocument.importNode(s,!0)]:[])};if(e==="system"){r.innerHTML=x(t)??"";return}try{let s=t?String(bt(e)?.resolve(t)??"").trim():"";s.startsWith("<")?n(kt(s)):s?rr(s).then(n):n(null)}catch{n(null)}}function K(r,e,t){let i,n,s=()=>`${e()}
|
|
124
|
+
${t()}
|
|
125
|
+
${ke(e())}`,a=()=>{let l=r();l&&(i===void 0&&e()==="system"&&(i=s()),s()!==i&&(i=s(),_t(l,e(),t())))};return{draw:a,connected:()=>{n??=vt(a),a()},disconnected:()=>{n?.(),n=void 0}}}var wt=`
|
|
100
126
|
:host { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; color: inherit; }
|
|
101
127
|
:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }
|
|
102
128
|
:host([hidden]) { display: none !important; }
|
|
103
129
|
.box, svg { display: block; inline-size: 100%; block-size: 100%; }
|
|
104
130
|
.box { contain: paint; }
|
|
105
|
-
`;var
|
|
131
|
+
`;var Se={tag:"neu-icon",props:{name:{type:"string"},library:{type:"string",default:"system"},label:{type:"string"}},styles:wt,template:r=>{let e=r.library==="system"?x(r.name):void 0;return o`<span class="box" data-ref="box">${e===void 0?"":f(e)}</span>`}};var U=class extends u{static def=Se;drawer=K(()=>this.ref("box"),()=>String(this.props.library),()=>String(this.props.name));update(e){if(e.has("label")){let t=String(this.props.label);this.internals.role=t?"img":null,this.internals.ariaLabel=t||null,this.internals.ariaHidden=t?null:"true"}(e.has("name")||e.has("library"))&&this.drawer.draw()}connected(){this.drawer.connected()}disconnected(){this.drawer.disconnected()}};U.define();var St=`${at}
|
|
106
132
|
:host { inline-size: 2.5rem; block-size: 2.5rem; }
|
|
107
133
|
:host([size='sm']) { inline-size: 2rem; block-size: 2rem; }
|
|
108
134
|
:host([size='lg']) { inline-size: 3rem; block-size: 3rem; }
|
|
@@ -112,7 +138,131 @@ ${q(e())}`,c=()=>{let X=t();X&&(n===void 0&&e()==="system"&&(n=o()),o()!==n&&(n=
|
|
|
112
138
|
:host([size='sm']) .icon { inline-size: 1rem; block-size: 1rem; }
|
|
113
139
|
:host([size='lg']) .icon { inline-size: 1.375rem; block-size: 1.375rem; }
|
|
114
140
|
.icon svg { display: block; inline-size: 100%; block-size: 100%; }
|
|
115
|
-
`;var
|
|
141
|
+
`;var Ee={tag:"neu-icon-button",props:{icon:{type:"string"},library:{type:"string",default:"system"},label:{type:"string"},shape:{type:"string",default:"circle",values:["circle","square"]},variant:{type:"string",default:"default",values:["default","primary","flat"]},size:{type:"string",default:"md",values:["sm","md","lg"]},disabled:{type:"boolean"},type:{type:"string",default:"button",values:["button","submit","reset"]}},styles:St,template:r=>{let e=r.library==="system"?x(r.icon):void 0;return o`<span part="base" class="base"><span part="icon" class="icon" data-ref="icon">${e===void 0?"":f(e)}</span></span>`}};var j=class extends L{static def=Ee;drawer=K(()=>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()}};j.define();var z=["value","required","disabled","readOnly","minLength","maxLength","errorText","autocomplete"];function Et(r){return(r??"").trim().toLowerCase()==="off"}var k=class extends b{dirty=!1;pendingValue=null;get value(){return this.input?.value??this.pendingValue??this.p.value}set value(e){let t=e==null?"":String(e);this.dirty=!0;let i=this.input;i?i.value=t:this.pendingValue=t,this.commit()}get defaultValue(){return this.p.value}set defaultValue(e){this.setAttribute("value",String(e))}focus(e){let t=this.input;t?t.focus(e):super.focus(e)}select(){this.input?.select()}setSelectionRange(e,t,i){this.input?.setSelectionRange(e,t,i)}get p(){return this.props}get input(){return this.ref("input")}controlKeyDown(e){}needsCommit(e){return this.commitProps.some(t=>e.has(t))}validityProbe(){let e=this.p,t=this.probe(this.value);return t.required=e.required,t.readOnly=e.readOnly,t.disabled=this.isDisabled,e.minLength>=0&&t.setAttribute("minlength",String(e.minLength)),e.maxLength>=0&&t.setAttribute("maxlength",String(e.maxLength)),t}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(),p(this,"change")}),e.addEventListener("keydown",t=>this.controlKeyDown(t)))}update(e){let t=this.p,i=this.input;i&&(e.has("value")&&(i.defaultValue!==t.value&&(i.defaultValue=t.value),this.dirty||(i.value=t.value)),e.has("placeholder")&&c(i,"placeholder",t.placeholder),e.has("required")&&(i.required=t.required),e.has("disabled")&&(i.disabled=this.isDisabled),e.has("readOnly")&&(i.readOnly=t.readOnly),e.has("minLength")&&c(i,"minlength",t.minLength>=0?String(t.minLength):""),e.has("maxLength")&&c(i,"maxlength",t.maxLength>=0?String(t.maxLength):""),e.has("autocomplete")&&c(i,"autocomplete",t.autocomplete),e.has("enterKeyHint")&&c(i,"enterkeyhint",t.enterKeyHint)),e.has("label")&&m(this.ref("label-text"),t.label),e.has("helpText")&&m(this.ref("help-text"),t.helpText),this.needsCommit(e)&&this.commit()}willUpdate(e){!this.isConnected&&!this.input&&this.needsCommit(e)&&this.commit()}formValue(){return this.value}formState(){let e=this.p.autocomplete?.trim();return Et(e||this.internals.form?.getAttribute("autocomplete"))?null:this.value}validate(){let e=this.input,t=e??this.validityProbe();!t.willValidate||t.validity.valid?this.internals.setValidity({}):this.internals.setValidity(ct(t.validity),t.validationMessage,e??void 0),m(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 t=this.input;t?t.value=e:this.pendingValue=e}};var ir=new Set(["text","search","url","tel","email","password","date","month","week","time","datetime-local","number"]),A=Symbol.for("neu-ui.blocks-implicit-submit"),nr=r=>r instanceof HTMLInputElement&&ir.has(r.type)||r.constructor[A]===!0;function G(r){if(!r)return;let e=[...r.elements],t=e.find(fe);if(t){if(t.matches(":disabled")||t.hasAttribute("disabled"))return;w(r),t.click();return}e.filter(nr).length===1&&(w(r),r.requestSubmit())}var g=r=>r>0?r:1;var _=`${d}
|
|
142
|
+
:host { display: block; }
|
|
143
|
+
:host(:disabled), :host([disabled]) { cursor: not-allowed; }
|
|
144
|
+
.base { display: flex; flex-direction: column; }
|
|
145
|
+
.label { font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted); }
|
|
146
|
+
.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.375rem; }
|
|
147
|
+
.label-text:empty { display: none; }
|
|
148
|
+
.control {
|
|
149
|
+
display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;
|
|
150
|
+
border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);
|
|
151
|
+
transition: box-shadow var(--_neu-dur) ease;
|
|
152
|
+
}
|
|
153
|
+
:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }
|
|
154
|
+
:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }
|
|
155
|
+
:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }
|
|
156
|
+
:host(:state(user-invalid)) .control {
|
|
157
|
+
box-shadow:
|
|
158
|
+
inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),
|
|
159
|
+
inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);
|
|
160
|
+
}
|
|
161
|
+
:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }
|
|
162
|
+
.input {
|
|
163
|
+
flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;
|
|
164
|
+
background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;
|
|
165
|
+
}
|
|
166
|
+
.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }
|
|
167
|
+
.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }
|
|
168
|
+
.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }
|
|
169
|
+
.help-text:empty { display: none; }
|
|
170
|
+
.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }
|
|
171
|
+
:host(:state(user-invalid)) slot[name='help-text'] { display: none; }
|
|
172
|
+
:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }
|
|
173
|
+
`;var Lt=`${_}
|
|
174
|
+
.input { appearance: textfield; text-align: center; }
|
|
175
|
+
.input::-webkit-inner-spin-button, .input::-webkit-outer-spin-button { appearance: none; margin: 0; }
|
|
176
|
+
.step {
|
|
177
|
+
display: inline-flex; flex: none; align-items: center; justify-content: center;
|
|
178
|
+
inline-size: 1.75rem; block-size: 1.75rem; padding: 0; border: none; border-radius: 50%;
|
|
179
|
+
background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised-sm);
|
|
180
|
+
font: inherit; cursor: pointer;
|
|
181
|
+
transition: box-shadow var(--_neu-dur) ease;
|
|
182
|
+
}
|
|
183
|
+
.step:active:not(:disabled) { box-shadow: var(--_neu-inset-sm); }
|
|
184
|
+
.step:disabled { box-shadow: none; color: var(--_neu-fg-muted); cursor: not-allowed; }
|
|
185
|
+
.step svg { inline-size: 1rem; block-size: 1rem; }
|
|
186
|
+
`;var sr={value:{type:"string"},min:{type:"number",default:Number.NaN},max:{type:"number",default:Number.NaN},step:{type:"number",default:1},name:{type:"string"},label:{type:"string"},placeholder:{type:"string"},helpText:{type:"string"},errorText:{type:"string"},required:{type:"boolean"},disabled:{type:"boolean"},readOnly:{type:"boolean",attribute:"readonly"},size:{type:"string",default:"md",values:["sm","md","lg"]},incrementLabel:{type:"string",default:"Increase"},decrementLabel:{type:"string",default:"Decrease"}},Le=r=>Number.isFinite(r)&&r>=0;function or(r){return o`${Le(r.min)?o` inputmode="decimal"`:""}${Number.isFinite(r.min)?o` min="${r.min}"`:""}${Number.isFinite(r.max)?o` max="${r.max}"`:""}${r.placeholder?o` placeholder="${r.placeholder}"`:""}${r.required?o` required`:""}${r.disabled?o` disabled`:""}${r.readOnly?o` readonly`:""}`}var Tt=r=>f(y(r)),Te={tag:"neu-number-field",props:sr,delegatesFocus:!0,form:{valueProp:"value"},styles:Lt,template:r=>{let e=r.disabled||r.readOnly?o` disabled`:"";return o`<div part="base" class="base"><label part="label" class="label" for="input"><slot name="label"><span class="label-text" data-ref="label-text">${r.label}</span></slot></label><div part="control" class="control"><button part="decrement" class="step" type="button" tabindex="-1" aria-label="${r.decrementLabel}" data-ref="decrement"${e}>${Tt($)}</button><input part="input" class="input" id="input" data-ref="input" type="number" value="${r.value}" step="${g(r.step)}" aria-describedby="help"${or(r)}><button part="increment" class="step" type="button" tabindex="-1" aria-label="${r.incrementLabel}" data-ref="increment"${e}>${Tt(ue)}</button></div><div part="help-text" class="help" id="help"><slot name="help-text"><span class="help-text" data-ref="help-text">${r.helpText}</span></slot><span class="error-text" data-ref="error-text">${r.errorText}</span></div></div>`}};var W=class extends k{static def=Te;static[A]=!0;static extraProperties=["defaultValue","valueAsNumber"];commitProps=[...z,"min","max","step"];get np(){return this.props}get valueAsNumber(){let e=this.input;return e?e.valueAsNumber:this.probe(this.value).valueAsNumber}set valueAsNumber(e){this.value=Number.isFinite(e)?String(e):""}constrain(e){let t=this.np;c(e,"min",Number.isFinite(t.min)?String(t.min):""),c(e,"max",Number.isFinite(t.max)?String(t.max):""),e.step=String(g(t.step)),c(e,"inputmode",Le(t.min)?"decimal":"")}probe(e){let t=document.createElement("input");return t.type="number",this.constrain(t),t.value=e,t}move(e){let t=this.input;if(!t||t.disabled||t.readOnly)return;let i=t.value;try{e(t)}catch{}t.value!==i&&(t.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),t.dispatchEvent(new Event("change",{bubbles:!0})))}rendered(){super.rendered();let e=[["decrement",t=>t.stepDown()],["increment",t=>t.stepUp()]];for(let[t,i]of e){let n=this.ref(t);n?.addEventListener("pointerdown",s=>{s.preventDefault(),!n.disabled&&s.pointerType!=="touch"&&this.input?.focus()}),n?.addEventListener("click",()=>this.move(i))}}controlKeyDown(e){if(E(e))return;if(e.key==="Enter"){v(e,()=>{e.defaultPrevented||G(this.internals.form)});return}if(e.ctrlKey||e.metaKey||e.altKey)return;let{min:t,max:i}=this.np,n;e.key==="PageUp"?n=s=>s.stepUp(10):e.key==="PageDown"?n=s=>s.stepDown(10):e.key==="Home"&&Number.isFinite(t)?n=s=>s.value=`${t}`:e.key==="End"&&Number.isFinite(i)&&(n=s=>s.value=`${i}`),n&&(e.preventDefault(),this.move(n))}update(e){let t=this.input;if(t){["min","max","step"].some(s=>e.has(s))&&this.constrain(t);let i=this.isDisabled||this.np.readOnly,n=[["decrement","decrementLabel"],["increment","incrementLabel"]];for(let[s,a]of n){let l=this.ref(s);l&&((e.has("disabled")||e.has("readOnly"))&&(l.disabled=i),e.has(a)&&l.setAttribute("aria-label",this.np[a]))}}super.update(e)}};W.define();var Dt=`${d}
|
|
187
|
+
:host { display: none !important; }
|
|
188
|
+
`;var De={tag:"neu-option",props:{value:{type:"string"},disabled:{type:"boolean"}},styles:Dt,template:()=>o`<slot></slot>`};function ze(r){return r.replace(/[\t\n\f\r ]+/g," ").replace(/^ | $/g,"")}function Y(r){let e=ze(r.textContent??"");return{value:r.getAttribute("value")??e,label:e,disabled:r.hasAttribute("disabled")}}var X=class extends u{static def=De;get value(){return Y(this).value}set value(e){this.setAttribute("value",e==null?"":String(e))}get label(){return ze(this.textContent??"")}};X.define();var zt=`${d}
|
|
189
|
+
:host { display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none; }
|
|
190
|
+
:host(:disabled), :host([disabled]) { cursor: not-allowed; }
|
|
191
|
+
:host(:state(checked)) { --_neu-radio-on: 1; }
|
|
192
|
+
.base { display: inline-flex; align-items: center; gap: 0.625rem; }
|
|
193
|
+
.control {
|
|
194
|
+
display: inline-flex; align-items: center; justify-content: center; flex: none;
|
|
195
|
+
inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%;
|
|
196
|
+
background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);
|
|
197
|
+
transition: box-shadow var(--_neu-dur) ease;
|
|
198
|
+
}
|
|
199
|
+
.indicator {
|
|
200
|
+
display: block; inline-size: 50%; block-size: 50%; border-radius: 50%;
|
|
201
|
+
background: var(--_neu-accent-c); transform: scale(var(--_neu-radio-on, 0));
|
|
202
|
+
transition: transform var(--_neu-dur) ease;
|
|
203
|
+
}
|
|
204
|
+
:host(:focus-visible) .control { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
|
|
205
|
+
:host([disabled]) .base { opacity: 0.55; }
|
|
206
|
+
.label { color: var(--_neu-fg); }
|
|
207
|
+
`;var Ce={tag:"neu-radio",props:{value:{type:"string",default:"on"},disabled:{type:"boolean"}},styles:zt,template:()=>o`<span part="base" class="base"><span part="control" class="control"><span part="indicator" class="indicator"></span></span><span part="label" class="label"><slot></slot></span></span>`};var C=Symbol.for("neu-ui.radio.setChecked"),I=Symbol.for("neu-ui.radio.setGroupDisabled"),Z=Symbol.for("neu-ui.radioGroup.resync");var J=class extends u{static def=Ce;on=!1;groupOff=!1;constructor(){super(),this.internals.role="radio",this.internals.ariaChecked="false"}get checked(){return this.on}[C](e){this.on=e,this.toggleState("checked",e),this.internals.ariaChecked=e?"true":"false"}[I](e){e!==this.groupOff&&(this.groupOff=e,this.syncDisabledState())}get isDisabled(){return super.isDisabled||this.groupOff}update(e){e.has("disabled")&&this.syncDisabledState()}connected(){this.closest("neu-radio-group")?.[Z]?.()}disconnected(){this[C](!1),this[I](!1)}};J.define();var Ct=`${d}
|
|
208
|
+
:host { display: block; }
|
|
209
|
+
:host(:disabled), :host([disabled]) { cursor: not-allowed; }
|
|
210
|
+
.base { display: flex; flex-direction: column; }
|
|
211
|
+
.label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted); }
|
|
212
|
+
.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.5rem; }
|
|
213
|
+
.label-text:empty { display: none; }
|
|
214
|
+
.items { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
|
|
215
|
+
:host([orientation='horizontal']) .items { flex-direction: row; flex-wrap: wrap; align-items: center; }
|
|
216
|
+
:host(:disabled) .items, :host([disabled]) .items { opacity: 0.55; cursor: not-allowed; }
|
|
217
|
+
:host(:state(user-invalid)) .label { color: var(--_neu-danger); }
|
|
218
|
+
`;function ar(r){return r.replace(/[\\"'&<>\r\n\f]/g,e=>`\\${e.charCodeAt(0).toString(16)} `)}function Pe(r){return r===""?"":o`::slotted(neu-radio:not(:defined)[value="${ar(r)}"]){--_neu-radio-on:1}`}var Me={tag:"neu-radio-group",props:{label:{type:"string"},name:{type:"string"},value:{type:"string"},required:{type:"boolean"},disabled:{type:"boolean"},orientation:{type:"string",default:"vertical",values:["vertical","horizontal"]}},form:{valueProp:"value"},styles:Ct,template:r=>o`<div part="base" class="base"><span part="label" class="label"><slot name="label"><span class="label-text" data-ref="label-text">${r.label}</span></slot></span><span class="items"><slot></slot></span><style data-ref="mark">${Pe(r.value)}</style></div>`};var lr={ArrowDown:1,ArrowRight:1,ArrowUp:-1,ArrowLeft:-1},Pt=r=>r.getAttribute("value")??"on",Q=class extends b{static def=Me;static extraProperties=["defaultValue"];current;dirty=!1;stop;picked;observer;constructor(){super(),this.current=this.getAttribute("value"),this.internals.role="radiogroup",this.addEventListener("click",e=>{let t=this.radioAt(e);t&&!this.isDisabled&&!t.hasAttribute("disabled")&&this.choose(t)}),this.addEventListener("keydown",e=>this.onKey(e))}get value(){return this.selected()?this.current:""}set value(e){this.dirty=!0,this.current=e==null?null:String(e),this.sync()}get defaultValue(){return String(this.props.value)}set defaultValue(e){this.setAttribute("value",String(e))}radios(){return[...this.querySelectorAll("neu-radio")].filter(e=>e.closest("neu-radio-group")===this)}selected(e=this.radios()){return this.current===null?void 0:e.find(t=>Pt(t)===this.current)}radioAt(e){let t=e.target instanceof Element?e.target.closest("neu-radio"):null;return t&&t.closest("neu-radio-group")===this?t:null}onKey(e){if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey)return;let t=this.radioAt(e);if(!t||this.isDisabled||t.hasAttribute("disabled"))return;if(e.key===" "){e.preventDefault(),this.choose(t);return}let i=lr[e.key];if(!i)return;(e.key==="ArrowLeft"||e.key==="ArrowRight")&&this.matches(":dir(rtl)")&&(i=-i);let n=this.radios().filter(a=>!a.hasAttribute("disabled")),s=n[(n.indexOf(t)+i+n.length)%n.length];s&&(e.preventDefault(),s.focus(),this.choose(s))}choose(e){let t=Pt(e);t===this.current&&this.selected()||(this.dirty=!0,this.current=t,this.sync(),this.markInteracted(),p(this,"input"),p(this,"change"))}[Z](){this.sync()}sync(){let e=this.radios(),t=this.picked=this.selected(e),i=this.isDisabled,n=e.filter(l=>C in l);for(let l of n)l[I](i),l[C](l===t);let s=i?[]:n.filter(l=>!l.disabled);this.stop=s.find(l=>l===t)??s[0];for(let l of s){let h=l===this.stop?"0":"-1";l.getAttribute("tabindex")!==h&&l.setAttribute("tabindex",h)}let a=Pe(this.current??"");m(this.ref("mark"),a===""?"":a.value),this.commit()}nameGroup(){let t=(this.shadowRoot?.querySelector('slot[name="label"]')?.assignedNodes()??[]).map(i=>i.textContent).join("").replace(/\s+/g," ").trim();this.internals.ariaLabel=t||String(this.props.label)||null}rendered(){this.shadowRoot.querySelector('slot[name="label"]').addEventListener("slotchange",()=>this.nameGroup())}willUpdate(e){e.has("value")&&!this.dirty&&(this.current=this.getAttribute("value"))}update(e){e.has("label")&&(m(this.ref("label-text"),String(this.props.label)),this.nameGroup()),e.has("required")&&(this.internals.ariaRequired=this.props.required?"true":null),e.has("disabled")&&(this.internals.ariaDisabled=this.isDisabled?"true":null),(e.has("value")||e.has("required")||e.has("disabled"))&&this.sync()}connected(){this.observer??=new MutationObserver(e=>{let t=e.filter(i=>R(this,i.target));t.length&&this.nameGroup(),e.some(i=>i.type!=="characterData"&&!t.includes(i))&&this.sync()}),this.observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["disabled","value"]}),this.nameGroup(),this.sync()}disconnected(){this.observer?.disconnect()}formValue(){return this.picked?this.current:null}formState(){return this.formValue()}validate(){this.props.required===!0&&!this.picked?this.internals.setValidity({valueMissing:!0},T("radio","Please select one of these options."),this.stop):this.internals.setValidity({})}resetToDefault(){this.dirty=!1,this.current=this.getAttribute("value"),this.sync()}restoreState(e){this.dirty=!0,this.current=e,this.sync()}};Q.define();var Mt=`${_}
|
|
219
|
+
.label { display: block; }
|
|
220
|
+
.combobox {
|
|
221
|
+
display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.875rem 0.75rem;
|
|
222
|
+
border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);
|
|
223
|
+
font-size: 0.9375rem; cursor: pointer; user-select: none; outline: none;
|
|
224
|
+
transition: box-shadow var(--_neu-dur) ease;
|
|
225
|
+
}
|
|
226
|
+
:host([size='sm']) .combobox { min-block-size: 2.25rem; padding-inline: 0.75rem 0.625rem; font-size: 0.875rem; }
|
|
227
|
+
:host([size='lg']) .combobox { min-block-size: 3.25rem; padding-inline: 1rem 0.875rem; font-size: 1rem; }
|
|
228
|
+
.combobox[aria-expanded='true'] { box-shadow: var(--_neu-inset-sm); }
|
|
229
|
+
.combobox:focus-visible { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }
|
|
230
|
+
.combobox[aria-expanded='true']:focus-visible { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
|
|
231
|
+
:host(:state(user-invalid)) .combobox {
|
|
232
|
+
box-shadow:
|
|
233
|
+
calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) color-mix(in oklab, var(--_neu-danger) 45%, var(--_neu-sd)),
|
|
234
|
+
calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);
|
|
235
|
+
}
|
|
236
|
+
:host(:disabled) .combobox, :host([disabled]) .combobox { opacity: 0.6; cursor: not-allowed; }
|
|
237
|
+
.display { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
238
|
+
.placeholder { color: var(--_neu-fg-muted); }
|
|
239
|
+
.chevron { display: inline-flex; flex: none; color: var(--_neu-fg-muted); transition: transform var(--_neu-dur) ease; }
|
|
240
|
+
.chevron svg { inline-size: 1rem; block-size: 1rem; }
|
|
241
|
+
.combobox[aria-expanded='true'] .chevron { transform: rotate(180deg); }
|
|
242
|
+
.listbox {
|
|
243
|
+
position: fixed; inset: auto; margin: 0; max-block-size: 16rem; overflow: auto;
|
|
244
|
+
padding: 0.375rem; border: none; border-radius: var(--_neu-r);
|
|
245
|
+
background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised); font-size: 0.9375rem;
|
|
246
|
+
}
|
|
247
|
+
.option { padding: 0.5rem 0.625rem; border-radius: calc(var(--_neu-r) * 0.75); cursor: pointer; user-select: none; }
|
|
248
|
+
.option.active { box-shadow: var(--_neu-inset-sm); }
|
|
249
|
+
.option[aria-selected='true'] { color: var(--_neu-accent-c); font-weight: 600; }
|
|
250
|
+
.option[aria-disabled='true'] { color: var(--_neu-fg-muted); cursor: not-allowed; }
|
|
251
|
+
`;function S(r,e){return r?.find(t=>t.value===e)}var dr=f(y(de)),$e={tag:"neu-select",props:{value:{type:"string"},name:{type:"string"},label:{type:"string"},placeholder:{type:"string"},helpText:{type:"string"},errorText:{type:"string"},required:{type:"boolean"},disabled:{type:"boolean"},size:{type:"string",default:"md",values:["sm","md","lg"]}},delegatesFocus:!0,form:{valueProp:"value"},optionsFrom:"neu-option",styles:Mt,template:(r,e)=>{let t=S(e?.options,r.value),i=!t&&r.value!==""&&e?.options?.length===0;return o`<div part="base" class="base"><span part="label" class="label" id="label" data-ref="label"><slot name="label"><span class="label-text" data-ref="label-text">${r.label}</span></slot></span><div part="combobox" class="combobox" id="combobox" role="combobox"${r.disabled?o` aria-disabled="true"`:o` tabindex="0"`} aria-haspopup="listbox" aria-expanded="false" aria-controls="listbox" aria-labelledby="label" aria-describedby="help"${r.required?o` aria-required="true"`:""} data-ref="combobox"><span part="display" class="display${t||i?"":" placeholder"}" data-ref="display">${t?t.label:i?"":r.placeholder}</span><span part="chevron" class="chevron">${dr}</span></div><div part="listbox" class="listbox" id="listbox" role="listbox" aria-labelledby="label" popover="auto" data-ref="listbox"></div><div part="help-text" class="help" id="help"><slot name="help-text"><span class="help-text" data-ref="help-text">${r.helpText}</span></slot><span class="error-text" data-ref="error-text">${r.errorText}</span></div></div>`}};var ee=4,ur=500,te=class extends b{static def=$e;static extraProperties=["defaultValue"];current;dirty=!1;opts=[];observer;opened=!1;activeSource;pressedOpen;typed="";typedTimer;constructor(){super(),this.current=String(this.props.value)}get value(){return S(this.read(),this.current)?this.current:""}set value(e){this.dirty=!0,this.current=e==null?"":String(e),this.sync()}get defaultValue(){return String(this.props.value)}set defaultValue(e){this.setAttribute("value",String(e))}read(){return[...this.querySelectorAll("neu-option")].map(e=>({...Y(e),source:e}))}chosen(){return S(this.opts,this.current)?this.current:""}sync(){this.opts=this.read();let e=S(this.opts,this.current),t=this.ref("display");m(t,e?e.label:String(this.props.placeholder)),t?.classList.toggle("placeholder",!e),this.opened&&this.render(),this.commit()}step(e,t){for(let i=e;i>=0&&i<this.opts.length;i+=t)if(!this.opts[i].disabled)return i;return-1}near(e,t){let i=Math.min(Math.max(e,0),this.opts.length-1),n=this.step(i,t);return n<0?this.step(i,-t):n}activeIndex(){return this.opts.findIndex(e=>e.source===this.activeSource)}render(){let e=this.ref("listbox"),t=S(this.opts,this.current);e.replaceChildren(...this.opts.map((s,a)=>{let l=document.createElement("div");return l.className="option",l.id=`option-${a}`,l.setAttribute("part","option"),l.setAttribute("role","option"),l.setAttribute("aria-selected",String(s===t)),s.disabled&&l.setAttribute("aria-disabled","true"),l.textContent=s.label,l})),this.place();let i=this.activeIndex(),n=t?this.opts.indexOf(t):-1;this.activate(i>=0&&!this.opts[i].disabled?i:n>=0?n:this.step(0,1))}activate(e,t=!0){let i=this.ref("listbox");this.activeSource=this.opts[e]?.source;let n=[...i.children];n.forEach((h,P)=>h.classList.toggle("active",P===e));let s=n[e];if(c(this.ref("combobox"),"aria-activedescendant",s?s.id:""),!s||!t)return;let a=n[0].offsetTop,l=s.offsetTop+s.offsetHeight+a;s.offsetTop-a<i.scrollTop?i.scrollTop=s.offsetTop-a:l>i.scrollTop+i.clientHeight&&(i.scrollTop=l-i.clientHeight)}place=()=>{let e=this.ref("listbox"),t=this.ref("combobox")?.getBoundingClientRect();if(!e||!t)return;e.style.left=`${t.left}px`,e.style.width=`${t.width}px`;let i=e.offsetHeight,n=innerHeight-t.bottom-ee,s=t.top-ee,a=i>n&&s>n;e.style.top=`${a?t.top-ee-i:t.bottom+ee}px`};open(){let e=this.ref("listbox");this.opened||this.isDisabled||!e||(this.opened=!0,this.activeSource=void 0,e.matches(":popover-open")||e.showPopover(),this.render(),this.ref("combobox").setAttribute("aria-expanded","true"),window.addEventListener("scroll",this.place,{capture:!0,passive:!0}),window.addEventListener("resize",this.place,{passive:!0}),this.ownerDocument.addEventListener("focusin",this.focusLanded,!0),p(this,"neu-open"))}focusLanded=()=>{this.shadowRoot.activeElement||this.close()};close(){if(!this.opened)return;this.opened=!1;let e=this.ref("listbox");e.matches(":popover-open")&&e.hidePopover();let t=this.ref("combobox");t.setAttribute("aria-expanded","false"),t.removeAttribute("aria-activedescendant"),window.removeEventListener("scroll",this.place,{capture:!0}),window.removeEventListener("resize",this.place),this.ownerDocument.removeEventListener("focusin",this.focusLanded,!0),p(this,"neu-close")}choose(e){let t=this.opts[e];if(!t||t.disabled)return;let i=this.chosen();this.dirty=!0,this.current=t.value,this.sync(),t.value!==i&&(this.markInteracted(),p(this,"input"),p(this,"change"))}typeahead(e){clearTimeout(this.typedTimer),this.typedTimer=setTimeout(()=>this.typed="",ur);let t=this.typed+=e.toLowerCase(),i=this.activeIndex(),n=this.opts.length,s=(l,h)=>{for(let P=0;P<n;P++){let Ke=(h+P)%n,Ue=this.opts[Ke];if(!Ue.disabled&&Ue.label.toLowerCase().startsWith(l))return Ke}return-1},a=[...t].every(l=>l===t[0])?s(t[0],i+1):s(t,Math.max(i,0));a>=0&&this.activate(a)}onKey(e){let{key:t,altKey:i,ctrlKey:n}=e,s=t.length===1&&t!==" "&&(!i||n);if(this.isDisabled||e.metaKey||n&&!(i&&s))return;let a=this.activeIndex(),l=this.opts.length-1,h={ArrowDown:[a+1,1],ArrowUp:[a-1,-1],Home:[0,1],End:[l,-1],PageDown:[a+10,1],PageUp:[a-10,-1]};if(!this.opened){if(!s&&!["ArrowDown","ArrowUp","Enter"," ","Home","End"].includes(t))return;e.preventDefault(),this.open(),t==="Home"||t==="End"?this.activate(this.near(...h[t])):s&&this.typeahead(t);return}if(t==="Tab"){this.choose(a),this.close();return}if(t==="Enter"||t===" "||t==="ArrowUp"&&i)this.choose(a),this.close();else if(t==="Escape")this.close();else if(s)this.typeahead(t);else if(h[t])this.activate(this.near(...h[t]));else return;e.preventDefault()}optionAt(e){let t=e.target.closest(".option");return t?Number(t.id.slice(7)):-1}rendered(){let e=this.ref("combobox"),t=this.ref("listbox");e.addEventListener("keydown",i=>this.onKey(i)),e.addEventListener("pointerdown",()=>this.pressedOpen=this.opened),e.addEventListener("click",()=>{let i=this.pressedOpen??this.opened;this.pressedOpen=void 0,i?this.close():this.open()}),this.ref("label").addEventListener("click",()=>e.focus()),t.addEventListener("pointerdown",i=>i.preventDefault()),t.addEventListener("pointermove",i=>{let n=this.optionAt(i);n>=0&&n!==this.activeIndex()&&!this.opts[n]?.disabled&&this.activate(n,!1)}),t.addEventListener("click",i=>{let n=this.optionAt(i);n<0||this.opts[n]?.disabled||(this.choose(n),this.close())}),t.addEventListener("toggle",()=>{t.matches(":popover-open")||this.close()}),e.addEventListener("focusout",i=>{let n=i.relatedTarget;(n?!this.shadowRoot.contains(n):document.hasFocus())&&this.close()})}willUpdate(e){e.has("value")&&!this.dirty&&(this.current=String(this.props.value))}update(e){let t=this.ref("combobox");if(e.has("label")&&m(this.ref("label-text"),String(this.props.label)),e.has("helpText")&&m(this.ref("help-text"),String(this.props.helpText)),e.has("required")&&c(t,"aria-required",this.props.required?"true":""),e.has("disabled")){let i=this.isDisabled;c(t,"aria-disabled",i?"true":""),c(t,"tabindex",i?"":"0"),i&&this.close()}e.has("value")||e.has("placeholder")?this.sync():(e.has("required")||e.has("errorText"))&&this.commit()}connected(){this.observer??=new MutationObserver(e=>{e.some(t=>!R(this,t.target))&&this.sync()}),this.observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled"]}),this.sync()}disconnected(){this.observer?.disconnect(),this.close()}formValue(){return S(this.opts,this.current)?this.current:null}validate(){this.props.required===!0&&this.chosen()===""?this.internals.setValidity({valueMissing:!0},T("select","Please select an item in the list."),this.ref("combobox")??void 0):this.internals.setValidity({}),m(this.ref("error-text"),String(this.props.errorText)||this.internals.validationMessage)}resetToDefault(){this.dirty=!1,this.current=String(this.props.value),this.sync()}restoreState(e){this.dirty=!0,this.current=e,this.sync()}};te.define();var $t=`${d}
|
|
252
|
+
:host { display: block; min-block-size: 1.25rem; touch-action: pan-y; cursor: pointer; user-select: none; }
|
|
253
|
+
:host(:disabled), :host([disabled]) { cursor: not-allowed; }
|
|
254
|
+
.base { position: relative; display: flex; align-items: center; block-size: 1.25rem; padding-inline: 0.625rem; }
|
|
255
|
+
.track { position: relative; flex: 1; block-size: 0.5rem; border-radius: 999px; background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm); }
|
|
256
|
+
.fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--_neu-pos) * 100%); border-radius: inherit; background: var(--_neu-accent-soft); }
|
|
257
|
+
.thumb {
|
|
258
|
+
position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--_neu-pos) * 100%);
|
|
259
|
+
inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: -0.625rem; margin-inline-start: -0.625rem;
|
|
260
|
+
border-radius: 50%; background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);
|
|
261
|
+
transition: box-shadow var(--_neu-dur) ease;
|
|
262
|
+
}
|
|
263
|
+
:host(:focus-visible) .thumb { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }
|
|
264
|
+
:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }
|
|
265
|
+
`;function Ae(r){let[,e="",t="0"]=/(?:\.(\d+))?(?:e([+-]\d+))?$/.exec(String(r))??[];return Math.min(100,Math.max(0,e.length-Number(t)))}function Ie(r,e,t,i){let n=Math.max(e,t),s=g(i),a=Number.isNaN(r)?e+(n-e)/2:r,l=Math.round((a-e)/s);e+l*s>n&&(l=Math.floor((n-e)/s+1e-9));let h=e+Math.max(0,l)*s;return Number(Math.min(h,n).toFixed(Math.max(Ae(s),Ae(e))))}function At(r,e,t){let i=g(t),n=Math.round((Math.max(r,e)-r)/10/i)*i;return Number(Math.max(i,n).toFixed(Ae(i)))}function Re(r,e,t){let i=Math.max(e,t)-e;return`--_neu-pos:${i>0?Math.round((r-e)/i*1e4)/1e4:0}`}var Oe={tag:"neu-slider",props:{value:{type:"number",default:Number.NaN},min:{type:"number",default:0},max:{type:"number",default:100},step:{type:"number",default:1},name:{type:"string"},label:{type:"string"},disabled:{type:"boolean"}},form:{valueProp:"value"},properties:{valueFormatter:"(value: number) => string"},styles:$t,template:r=>o`<span part="base" class="base" data-ref="base" style="${Re(Ie(r.value,r.min,r.max,r.step),r.min,r.max)}"><span part="track" class="track" data-ref="track"><span part="fill" class="fill"></span><span part="thumb" class="thumb"></span></span></span>`};var re=class extends b{static def=Oe;static extraProperties=["defaultValue","valueFormatter"];current;dirty=!1;dragging=!1;startValue=0;formatter;constructor(){super(),this.internals.role="slider",this.internals.ariaOrientation="horizontal",this.current=this.snap(this.props.value),this.addEventListener("keydown",e=>this.onKey(e)),this.addEventListener("pointerdown",e=>this.onDown(e)),this.addEventListener("pointermove",e=>this.onMove(e)),this.addEventListener("pointerup",()=>this.endDrag()),this.addEventListener("pointercancel",()=>this.endDrag()),this.addEventListener("lostpointercapture",()=>this.endDrag())}disconnected(){super.disconnected(),this.dragging=!1}get value(){return this.current}set value(e){this.dirty=!0,this.setCurrent(this.snap(Number(e)))}get defaultValue(){return this.snap(this.props.value)}set defaultValue(e){this.setAttribute("value",String(e))}get valueFormatter(){return this.formatter}set valueFormatter(e){this.formatter=typeof e=="function"?e:void 0,this.sync()}snap(e){return Ie(e,this.props.min,this.props.max,this.props.step)}sync(){let{min:e,max:t}=this.props,i=this.internals;i.ariaLabel=this.props.label===""?null:String(this.props.label),i.ariaValueMin=String(e),i.ariaValueMax=String(Math.max(e,t)),i.ariaValueNow=String(this.current),i.ariaValueText=this.formatter?this.formatter(this.current):null;let n=this.ref("base"),s=Re(this.current,e,t);n&&n.getAttribute("style")!==s&&n.setAttribute("style",s)}setCurrent(e){this.current=e,this.sync(),this.commit()}userSet(e){return e===this.current?!1:(this.markInteracted(),this.setCurrent(e),p(this,"input"),!0)}onKey(e){if(this.isDisabled||e.altKey||e.ctrlKey||e.metaKey)return;let{min:t,max:i}=this.props,n=g(this.props.step),s=this.matches(":dir(rtl)")?-1:1,a=At(t,i,n),h={ArrowRight:this.current+n*s,ArrowLeft:this.current-n*s,ArrowUp:this.current+n,ArrowDown:this.current-n,PageUp:this.current+a,PageDown:this.current-a,Home:Number.NEGATIVE_INFINITY,End:Number.POSITIVE_INFINITY}[e.key];h!==void 0&&(e.preventDefault(),this.userSet(this.snap(h))&&p(this,"change"))}onDown(e){if(!(this.isDisabled||e.button!==0)){this.dragging=!0,this.startValue=this.current,this.focus();try{this.setPointerCapture(e.pointerId)}catch{}this.moveTo(e)}}onMove(e){this.dragging&&this.moveTo(e)}moveTo(e){let t=this.ref("track");if(!t)return;let i=t.getBoundingClientRect(),n=i.width>0?(e.clientX-i.left)/i.width:0;this.matches(":dir(rtl)")&&(n=1-n);let{min:s,max:a}=this.props,l=Math.min(1,Math.max(0,n));this.userSet(this.snap(s+l*(Math.max(s,a)-s)))}endDrag(){this.dragging&&(this.dragging=!1,this.current!==this.startValue&&p(this,"change"))}willUpdate(e){(e.has("value")||e.has("min")||e.has("max")||e.has("step"))&&(this.current=this.snap(this.dirty?this.current:this.props.value))}update(e){e.has("disabled")&&this.syncDisabledState(),this.sync(),this.commit()}formValue(){return String(this.current)}validate(){this.internals.setValidity({})}resetToDefault(){this.dirty=!1,this.setCurrent(this.snap(this.props.value))}restoreState(e){this.dirty=!0,this.setCurrent(this.snap(Number(e)))}};re.define();var It=`${d}
|
|
116
266
|
:host { display: inline-block; vertical-align: middle; inline-size: 1.5rem; block-size: 1.5rem; }
|
|
117
267
|
:host([size='sm']) { inline-size: 1rem; block-size: 1rem; }
|
|
118
268
|
:host([size='lg']) { inline-size: 2.25rem; block-size: 2.25rem; }
|
|
@@ -123,7 +273,7 @@ ${q(e())}`,c=()=>{let X=t();X&&(n===void 0&&e()==="system"&&(n=o()),o()!==n&&(n=
|
|
|
123
273
|
.indicator { border: 3px solid transparent; border-block-start-color: var(--_neu-accent-c); animation: neu-spinner-rotate 0.9s linear infinite; }
|
|
124
274
|
@keyframes neu-spinner-rotate { to { transform: rotate(360deg); } }
|
|
125
275
|
@media (prefers-reduced-motion: reduce) { .indicator { animation-duration: 2.7s; } }
|
|
126
|
-
`;var
|
|
276
|
+
`;var He={tag:"neu-spinner",props:{label:{type:"string",default:"Loading"},size:{type:"string",default:"md",values:["sm","md","lg"]}},styles:It,template:r=>o`<span part="base" class="base"><span part="track" class="track"></span><span part="indicator" class="indicator"></span><span class="label" data-ref="label">${r.label}</span></span>`};var ie=class extends u{static def=He;constructor(){super(),this.internals.role="status"}update(e){if(!e.has("label"))return;let t=String(this.props.label);this.internals.ariaLabel=t||null,m(this.ref("label"),t)}};ie.define();var Rt=`${d}
|
|
127
277
|
: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%); }
|
|
128
278
|
:host([elevation='sm']) { --_neu-up: var(--_neu-raised-sm); --_neu-down: var(--_neu-inset-sm); }
|
|
129
279
|
:host([elevation='lg']) { --_neu-up: var(--_neu-raised-lg); --_neu-down: var(--_neu-inset-lg); }
|
|
@@ -138,7 +288,7 @@ ${q(e())}`,c=()=>{let X=t();X&&(n===void 0&&e()==="system"&&(n=o()),o()!==n&&(n=
|
|
|
138
288
|
:host([padding='none']) .base { padding: 0; }
|
|
139
289
|
:host([padding='sm']) .base { padding: 0.75rem; }
|
|
140
290
|
:host([padding='lg']) .base { padding: 2rem; }
|
|
141
|
-
`;var
|
|
291
|
+
`;var Ve={tag:"neu-surface",props:{shape:{type:"string",default:"raised",values:["raised","inset","flat","convex","concave"]},elevation:{type:"string",default:"md",values:["sm","md","lg"]},radius:{type:"string",default:"md",values:["sm","md","lg","full"]},padding:{type:"string",default:"md",values:["none","sm","md","lg"]}},styles:Rt,template:()=>o`<div part="base" class="base"><slot></slot></div>`};var ne=class extends u{static def=Ve};ne.define();var Ot=`${d}
|
|
142
292
|
:host {
|
|
143
293
|
display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none;
|
|
144
294
|
--_neu-track-w: 2.875rem; --_neu-track-h: 1.625rem; --_neu-thumb: 1.25rem;
|
|
@@ -165,41 +315,16 @@ ${q(e())}`,c=()=>{let X=t();X&&(n===void 0&&e()==="system"&&(n=o()),o()!==n&&(n=
|
|
|
165
315
|
:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }
|
|
166
316
|
:host(:state(user-invalid)) .track { box-shadow: var(--_neu-inset-sm), 0 0 0 2px color-mix(in oklab, var(--_neu-danger) 55%, transparent); }
|
|
167
317
|
.label { color: var(--_neu-fg); }
|
|
168
|
-
`;var
|
|
169
|
-
:host { display: block; }
|
|
170
|
-
:host(:disabled), :host([disabled]) { cursor: not-allowed; }
|
|
171
|
-
.base { display: flex; flex-direction: column; }
|
|
172
|
-
.label-text, ::slotted([slot='label']) {
|
|
173
|
-
display: block; margin-block-end: 0.375rem;
|
|
174
|
-
font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted);
|
|
175
|
-
}
|
|
176
|
-
.label-text:empty { display: none; }
|
|
177
|
-
.control {
|
|
178
|
-
display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;
|
|
179
|
-
border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);
|
|
180
|
-
transition: box-shadow var(--_neu-dur) ease;
|
|
181
|
-
}
|
|
182
|
-
:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }
|
|
183
|
-
:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }
|
|
184
|
-
:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }
|
|
185
|
-
:host(:state(user-invalid)) .control {
|
|
186
|
-
box-shadow:
|
|
187
|
-
inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),
|
|
188
|
-
inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);
|
|
189
|
-
}
|
|
190
|
-
:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }
|
|
191
|
-
.input {
|
|
192
|
-
flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;
|
|
193
|
-
background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;
|
|
194
|
-
}
|
|
195
|
-
.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }
|
|
318
|
+
`;var Ne={tag:"neu-switch",props:{checked:{type:"boolean"},name:{type:"string"},value:{type:"string",default:"on"},disabled:{type:"boolean"},required:{type:"boolean"},size:{type:"string",default:"md",values:["sm","md","lg"]}},form:{valueProp:"checked"},styles:Ot,template:r=>o`<span part="base" class="base"><span part="track" class="track${r.checked?" on":""}" data-ref="track"><span part="thumb" class="thumb"></span></span><span part="label" class="label"><slot></slot></span></span>`};var se=class extends D{static def=Ne;anchor="track";constructor(){super(),this.internals.role="switch"}paint(){this.ref("track")?.classList.toggle("on",this.checked)}};se.define();var Ht=`${_}
|
|
196
319
|
.prefix, .suffix { display: inline-flex; }
|
|
197
320
|
::slotted([slot='prefix']) { margin-inline-end: 0.5rem; }
|
|
198
321
|
::slotted([slot='suffix']) { margin-inline-start: 0.5rem; }
|
|
199
|
-
|
|
200
|
-
.
|
|
201
|
-
.
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
:host(
|
|
205
|
-
|
|
322
|
+
`;var cr={type:{type:"string",default:"text",values:["text","email","password","search","tel","url"]},value:{type:"string"},name:{type:"string"},label:{type:"string"},placeholder:{type:"string"},helpText:{type:"string"},errorText:{type:"string"},required:{type:"boolean"},disabled:{type:"boolean"},readOnly:{type:"boolean",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"]}};function pr(r){return o`${r.placeholder?o` placeholder="${r.placeholder}"`:""}${r.required?o` required`:""}${r.disabled?o` disabled`:""}${r.readOnly?o` readonly`:""}${r.minLength>=0?o` minlength="${r.minLength}"`:""}${r.maxLength>=0?o` maxlength="${r.maxLength}"`:""}${r.pattern?o` pattern="${r.pattern}"`:""}${r.autocomplete?o` autocomplete="${r.autocomplete}"`:""}${r.inputMode?o` inputmode="${r.inputMode}"`:""}${r.enterKeyHint?o` enterkeyhint="${r.enterKeyHint}"`:""}`}var Fe={tag:"neu-text-field",props:cr,delegatesFocus:!0,form:{valueProp:"value"},styles:Ht,template:r=>o`<div part="base" class="base"><label part="label" class="label" for="input"><slot name="label"><span class="label-text" data-ref="label-text">${r.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="${r.type}" value="${r.value}" aria-describedby="help"${pr(r)}><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">${r.helpText}</span></slot><span class="error-text" data-ref="error-text">${r.errorText}</span></div></div>`};var oe=class extends k{static def=Fe;static[A]=!0;static extraProperties=["defaultValue"];commitProps=[...z,"type","pattern"];get tp(){return this.props}probe(e){let t=document.createElement("input");return t.type=this.tp.type,t.value=e,this.tp.pattern&&t.setAttribute("pattern",this.tp.pattern),t}controlKeyDown(e){e.key!=="Enter"||E(e)||v(e,()=>{e.defaultPrevented||G(this.internals.form)})}update(e){let t=this.tp,i=this.input;i&&(e.has("type")&&i.type!==t.type&&(i.type=t.type),e.has("pattern")&&c(i,"pattern",t.pattern),e.has("inputMode")&&c(i,"inputmode",t.inputMode)),super.update(e)}formState(){return this.tp.type==="password"?null:super.formState()}};oe.define();var Vt=`${_}
|
|
323
|
+
.control { align-items: stretch; }
|
|
324
|
+
.input {
|
|
325
|
+
display: block; box-sizing: border-box; padding-block: 0.625rem; line-height: 1.4; resize: vertical;
|
|
326
|
+
}
|
|
327
|
+
:host([resize='none']) .input { resize: none; }
|
|
328
|
+
:host([resize='auto']) .input { resize: none; overflow: hidden; }
|
|
329
|
+
`;var mr={value:{type:"string"},name:{type:"string"},label:{type:"string"},placeholder:{type:"string"},helpText:{type:"string"},errorText:{type:"string"},required:{type:"boolean"},disabled:{type:"boolean"},readOnly:{type:"boolean",attribute:"readonly"},minLength:{type:"number",default:-1,attribute:"minlength"},maxLength:{type:"number",default:-1,attribute:"maxlength"},autocomplete:{type:"string"},enterKeyHint:{type:"string",attribute:"enterkeyhint"},rows:{type:"number",default:3},resize:{type:"string",default:"vertical",values:["none","vertical","auto"]},size:{type:"string",default:"md",values:["sm","md","lg"]}};function qe(r){return Number.isInteger(r)&&r>=1?r:3}function hr(r){return o`${r.placeholder?o` placeholder="${r.placeholder}"`:""}${r.required?o` required`:""}${r.disabled?o` disabled`:""}${r.readOnly?o` readonly`:""}${r.minLength>=0?o` minlength="${r.minLength}"`:""}${r.maxLength>=0?o` maxlength="${r.maxLength}"`:""}${r.autocomplete?o` autocomplete="${r.autocomplete}"`:""}${r.enterKeyHint?o` enterkeyhint="${r.enterKeyHint}"`:""}`}var Be={tag:"neu-textarea",props:mr,delegatesFocus:!0,form:{valueProp:"value"},styles:Vt,template:r=>o`<div part="base" class="base"><label part="label" class="label" for="input"><slot name="label"><span class="label-text" data-ref="label-text">${r.label}</span></slot></label><div part="control" class="control"><textarea part="textarea" class="input" id="input" data-ref="input" rows="${qe(r.rows)}" aria-describedby="help"${hr(r)}>
|
|
330
|
+
${r.value}</textarea></div><div part="help-text" class="help" id="help"><slot name="help-text"><span class="help-text" data-ref="help-text">${r.helpText}</span></slot><span class="error-text" data-ref="error-text">${r.errorText}</span></div></div>`};var ae=class extends k{static def=Be;static extraProperties=["defaultValue"];commitProps=z;get tp(){return this.props}get value(){return super.value}set value(e){super.value=e,this.grow()}probe(e){let t=document.createElement("textarea");return t.value=e,t}sizeWatch;sizeFrame=0;lastWidth=-1;watchSize(e,t){if(!t){this.stopWatch();return}this.sizeWatch||(this.lastWidth=-1,this.sizeWatch=new ResizeObserver(([i])=>{let n=i?.contentRect.width??0;n!==this.lastWidth&&(this.lastWidth=n,cancelAnimationFrame(this.sizeFrame),this.sizeFrame=requestAnimationFrame(()=>this.grow()))}),this.sizeWatch.observe(e))}stopWatch(){cancelAnimationFrame(this.sizeFrame),this.sizeWatch?.disconnect(),this.sizeWatch=void 0}grow(){let e=this.input;if(!e)return;if(this.watchSize(e,this.isConnected&&this.tp.resize==="auto"),this.tp.resize!=="auto"){e.style.blockSize="";return}e.style.blockSize="auto";let t=e.scrollHeight;t&&(e.style.blockSize=`${t}px`)}connected(){super.connected(),this.grow()}disconnected(){super.disconnected(),this.stopWatch()}rendered(){super.rendered(),this.input?.addEventListener("input",()=>this.grow())}update(e){let t=this.input;t&&e.has("rows")&&(t.rows=qe(this.tp.rows)),super.update(e),["value","rows","resize","size"].some(i=>e.has(i))&&this.grow()}resetToDefault(){super.resetToDefault(),this.grow()}restoreState(e){super.restoreState(e),this.grow()}};ae.define();export{H as NeuAvatar,V as NeuBadge,L as NeuButton,F as NeuButtonGroup,q as NeuCheckbox,B as NeuDivider,U as NeuIcon,j as NeuIconButton,W as NeuNumberField,X as NeuOption,J as NeuRadio,Q as NeuRadioGroup,te as NeuSelect,re as NeuSlider,ie as NeuSpinner,ne as NeuSurface,se as NeuSwitch,oe as NeuTextField,ae as NeuTextarea,ce as avatarDef,pe as badgeDef,be as buttonDef,ve as buttonGroupDef,ge as checkboxDef,ye as dividerDef,Ee as iconButtonDef,Se as iconDef,Te as numberFieldDef,De as optionDef,Ce as radioDef,Me as radioGroupDef,Jt as registerIconLibrary,$e as selectDef,Oe as sliderDef,He as spinnerDef,Ve as surfaceDef,Ne as switchDef,Fe as textFieldDef,Be as textareaDef};
|