@editora/ui-core 0.1.20 → 0.1.22
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/dist/accordion.cjs.js +3 -3
- package/dist/accordion.esm.js +3 -3
- package/dist/alert-dialog.cjs.js +32 -32
- package/dist/alert-dialog.esm.js +95 -75
- package/dist/alert.cjs.js +6 -6
- package/dist/alert.esm.js +6 -6
- package/dist/animated-list.cjs.js +4 -4
- package/dist/animated-list.esm.js +4 -4
- package/dist/animated-text.cjs.js +4 -4
- package/dist/animated-text.esm.js +4 -4
- package/dist/app-header.cjs.js +3 -3
- package/dist/app-header.esm.js +3 -3
- package/dist/aspect-ratio.cjs.js +3 -3
- package/dist/aspect-ratio.esm.js +3 -3
- package/dist/avatar.cjs.js +14 -14
- package/dist/avatar.esm.js +31 -29
- package/dist/badge.cjs.js +4 -4
- package/dist/badge.esm.js +4 -4
- package/dist/block-controls.cjs.js +4 -4
- package/dist/block-controls.esm.js +4 -4
- package/dist/box.cjs.js +2 -2
- package/dist/box.esm.js +2 -2
- package/dist/breadcrumb.cjs.js +5 -5
- package/dist/breadcrumb.esm.js +5 -5
- package/dist/button.cjs.js +1 -1
- package/dist/button.esm.js +1 -1
- package/dist/{calendar-DLY4acgn.mjs → calendar-DbxYRdlv.mjs} +227 -183
- package/dist/{calendar-Dkof-FTK.js → calendar-Qa-cFOp3.js} +74 -35
- package/dist/calendar.cjs.js +1 -1
- package/dist/calendar.esm.js +1 -1
- package/dist/card.cjs.js +8 -8
- package/dist/card.esm.js +63 -20
- package/dist/chart.cjs.js +4 -4
- package/dist/chart.esm.js +6 -6
- package/dist/checkbox.cjs.js +2 -2
- package/dist/checkbox.esm.js +2 -2
- package/dist/collapsible.cjs.js +7 -7
- package/dist/collapsible.esm.js +7 -7
- package/dist/collection.cjs.js +1 -1
- package/dist/collection.esm.js +27 -23
- package/dist/color-picker.cjs.js +34 -14
- package/dist/color-picker.esm.js +89 -67
- package/dist/combobox.cjs.js +29 -27
- package/dist/combobox.esm.js +51 -45
- package/dist/command.cjs.js +2 -2
- package/dist/command.esm.js +2 -2
- package/dist/components/ui-alert-dialog.d.ts +1 -0
- package/dist/components/ui-alert-dialog.d.ts.map +1 -1
- package/dist/components/ui-avatar.d.ts +1 -0
- package/dist/components/ui-avatar.d.ts.map +1 -1
- package/dist/components/ui-button.d.ts +1 -0
- package/dist/components/ui-button.d.ts.map +1 -1
- package/dist/components/ui-calendar.d.ts.map +1 -1
- package/dist/components/ui-card.d.ts +3 -0
- package/dist/components/ui-card.d.ts.map +1 -1
- package/dist/components/ui-checkbox.d.ts.map +1 -1
- package/dist/components/ui-collection.d.ts.map +1 -1
- package/dist/components/ui-color-picker.d.ts.map +1 -1
- package/dist/components/ui-combobox.d.ts.map +1 -1
- package/dist/components/ui-data-table.d.ts.map +1 -1
- package/dist/components/ui-date-field.d.ts.map +1 -1
- package/dist/components/ui-date-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-time-picker.d.ts.map +1 -1
- package/dist/components/ui-date-time-picker.d.ts.map +1 -1
- package/dist/components/ui-dock.d.ts +1 -0
- package/dist/components/ui-dock.d.ts.map +1 -1
- package/dist/components/ui-drawer.d.ts.map +1 -1
- package/dist/components/ui-dropdown.d.ts.map +1 -1
- package/dist/components/ui-field.d.ts.map +1 -1
- package/dist/components/ui-file-upload.d.ts.map +1 -1
- package/dist/components/ui-gantt.d.ts.map +1 -1
- package/dist/components/ui-input.d.ts.map +1 -1
- package/dist/components/ui-menu.d.ts.map +1 -1
- package/dist/components/ui-multi-select.d.ts.map +1 -1
- package/dist/components/ui-number-field.d.ts.map +1 -1
- package/dist/components/ui-password-field.d.ts.map +1 -1
- package/dist/components/ui-pin-input.d.ts +1 -0
- package/dist/components/ui-pin-input.d.ts.map +1 -1
- package/dist/components/ui-placement-grid.d.ts.map +1 -1
- package/dist/components/ui-portal.d.ts.map +1 -1
- package/dist/components/ui-positioner.d.ts.map +1 -1
- package/dist/components/ui-progress.d.ts.map +1 -1
- package/dist/components/ui-radio.d.ts.map +1 -1
- package/dist/components/ui-rating.d.ts +1 -0
- package/dist/components/ui-rating.d.ts.map +1 -1
- package/dist/components/ui-select.d.ts.map +1 -1
- package/dist/components/ui-sortable.d.ts +8 -0
- package/dist/components/ui-sortable.d.ts.map +1 -1
- package/dist/components/ui-switch.d.ts.map +1 -1
- package/dist/components/ui-table.d.ts.map +1 -1
- package/dist/components/ui-tabs.d.ts +1 -0
- package/dist/components/ui-tabs.d.ts.map +1 -1
- package/dist/components/ui-tags-input.d.ts +1 -0
- package/dist/components/ui-tags-input.d.ts.map +1 -1
- package/dist/components/ui-textarea.d.ts.map +1 -1
- package/dist/components/ui-time-field.d.ts.map +1 -1
- package/dist/components/ui-toggle-group.d.ts.map +1 -1
- package/dist/components/ui-toggle.d.ts.map +1 -1
- package/dist/components/ui-tree.d.ts.map +1 -1
- package/dist/components/ui-wizard.d.ts.map +1 -1
- package/dist/context-menu.cjs.js +3 -3
- package/dist/context-menu.esm.js +4 -4
- package/dist/control-name-BmoI1m3a.js +1 -0
- package/dist/control-name-Bpj7F34X.mjs +48 -0
- package/dist/data-table.cjs.js +5 -2
- package/dist/data-table.esm.js +145 -142
- package/dist/date-field.cjs.js +5 -5
- package/dist/date-field.esm.js +34 -31
- package/dist/date-picker.cjs.js +16 -16
- package/dist/date-picker.esm.js +48 -44
- package/dist/date-range-picker.cjs.js +5 -5
- package/dist/date-range-picker.esm.js +120 -118
- package/dist/date-range-time-picker.cjs.js +22 -22
- package/dist/date-range-time-picker.esm.js +88 -84
- package/dist/date-time-picker.cjs.js +26 -26
- package/dist/date-time-picker.esm.js +105 -101
- package/dist/{date-time-utils-Dmost5Ee.js → date-time-utils-BzfTpeU-.js} +1 -1
- package/dist/{date-time-utils-y1N2gvG2.mjs → date-time-utils-Cps2aSu2.mjs} +1 -1
- package/dist/description.cjs.js +3 -3
- package/dist/description.esm.js +3 -3
- package/dist/dialog.cjs.js +2 -2
- package/dist/dialog.esm.js +2 -2
- package/dist/dock.cjs.js +12 -12
- package/dist/dock.esm.js +72 -74
- package/dist/drawer.cjs.js +19 -19
- package/dist/drawer.esm.js +58 -58
- package/dist/dropdown.cjs.js +13 -13
- package/dist/dropdown.esm.js +49 -48
- package/dist/empty-state.cjs.js +3 -3
- package/dist/empty-state.esm.js +3 -3
- package/dist/field-error.cjs.js +1 -1
- package/dist/field-error.esm.js +1 -1
- package/dist/field.cjs.js +12 -12
- package/dist/field.esm.js +84 -75
- package/dist/fieldset.cjs.js +4 -4
- package/dist/fieldset.esm.js +4 -4
- package/dist/file-upload.cjs.js +3 -3
- package/dist/file-upload.esm.js +5 -3
- package/dist/floating-toolbar.cjs.js +8 -8
- package/dist/floating-toolbar.esm.js +9 -9
- package/dist/form.cjs.js +11 -11
- package/dist/form.esm.js +11 -11
- package/dist/gantt.cjs.js +43 -32
- package/dist/gantt.esm.js +99 -88
- package/dist/icon-cloud.cjs.js +3 -3
- package/dist/icon-cloud.esm.js +3 -3
- package/dist/icon.cjs.js +1 -1
- package/dist/icon.esm.js +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +121 -118
- package/dist/inline-edit.cjs.js +1 -1
- package/dist/inline-edit.esm.js +1 -1
- package/dist/input.cjs.js +14 -14
- package/dist/input.esm.js +39 -32
- package/dist/label.cjs.js +3 -3
- package/dist/label.esm.js +3 -3
- package/dist/{listbox-B6QgECax.js → listbox-CTpRpuF7.js} +1 -1
- package/dist/{listbox-DJamVeFj.mjs → listbox-hMVOhKHC.mjs} +1 -1
- package/dist/listbox.cjs.js +1 -1
- package/dist/listbox.esm.js +1 -1
- package/dist/marquee.cjs.js +3 -3
- package/dist/marquee.esm.js +3 -3
- package/dist/{menu-item-styles-CbNUEwP2.js → menu-item-styles-B4onAr4C.js} +3 -3
- package/dist/{menu-item-styles-CZiPwPwl.mjs → menu-item-styles-IGSFLAHu.mjs} +3 -3
- package/dist/menu.cjs.js +7 -7
- package/dist/menu.esm.js +29 -28
- package/dist/menubar.cjs.js +1 -1
- package/dist/menubar.esm.js +2 -2
- package/dist/meter.cjs.js +1 -1
- package/dist/meter.esm.js +1 -1
- package/dist/multi-select.cjs.js +18 -18
- package/dist/multi-select.esm.js +82 -66
- package/dist/navigation-menu.cjs.js +1 -1
- package/dist/navigation-menu.esm.js +1 -1
- package/dist/number-field.cjs.js +11 -13
- package/dist/number-field.esm.js +29 -27
- package/dist/number-ticker.cjs.js +4 -4
- package/dist/number-ticker.esm.js +4 -4
- package/dist/odometer.cjs.js +2 -2
- package/dist/odometer.esm.js +2 -2
- package/dist/orbiter.cjs.js +3 -3
- package/dist/orbiter.esm.js +3 -3
- package/dist/pagination.cjs.js +1 -1
- package/dist/pagination.esm.js +1 -1
- package/dist/password-field.cjs.js +23 -23
- package/dist/password-field.esm.js +48 -47
- package/dist/pin-input.cjs.js +8 -6
- package/dist/pin-input.esm.js +21 -15
- package/dist/placement-grid.cjs.js +4 -4
- package/dist/placement-grid.esm.js +58 -58
- package/dist/plugin-panel.cjs.js +1 -1
- package/dist/plugin-panel.esm.js +1 -1
- package/dist/popover.cjs.js +5 -5
- package/dist/popover.esm.js +4 -4
- package/dist/portal.cjs.js +3 -3
- package/dist/portal.esm.js +11 -10
- package/dist/positioner.cjs.js +2 -2
- package/dist/positioner.esm.js +15 -14
- package/dist/primitives/auto-scroll.d.ts +9 -0
- package/dist/primitives/auto-scroll.d.ts.map +1 -0
- package/dist/primitives/control-name.d.ts +30 -0
- package/dist/primitives/control-name.d.ts.map +1 -0
- package/dist/primitives/selector.d.ts +4 -0
- package/dist/primitives/selector.d.ts.map +1 -0
- package/dist/primitives/trigger.d.ts +2 -0
- package/dist/primitives/trigger.d.ts.map +1 -0
- package/dist/progress.cjs.js +4 -4
- package/dist/progress.esm.js +20 -18
- package/dist/quick-actions.cjs.js +3 -3
- package/dist/quick-actions.esm.js +3 -3
- package/dist/radio-group.cjs.js +1 -1
- package/dist/radio-group.esm.js +1 -1
- package/dist/radio.cjs.js +2 -2
- package/dist/radio.esm.js +2 -2
- package/dist/rating.cjs.js +17 -16
- package/dist/rating.esm.js +91 -92
- package/dist/{runtime-D1gFh1fS.mjs → runtime-CFnK53iC.mjs} +133 -94
- package/dist/runtime-DwE-tizc.js +1 -0
- package/dist/runtime.cjs.js +1 -1
- package/dist/runtime.d.ts +1 -1
- package/dist/runtime.d.ts.map +1 -1
- package/dist/runtime.esm.js +29 -26
- package/dist/select.cjs.js +20 -19
- package/dist/select.esm.js +36 -32
- package/dist/selection-popup.cjs.js +2 -2
- package/dist/selection-popup.esm.js +2 -2
- package/dist/selector-BvAh35ve.js +1 -0
- package/dist/selector-WI8pD7YO.mjs +18 -0
- package/dist/separator.cjs.js +7 -7
- package/dist/separator.esm.js +7 -7
- package/dist/sidebar.cjs.js +7 -7
- package/dist/sidebar.esm.js +7 -7
- package/dist/skeleton.cjs.js +7 -7
- package/dist/skeleton.esm.js +7 -7
- package/dist/slider.cjs.js +3 -3
- package/dist/slider.esm.js +3 -3
- package/dist/slot.cjs.js +3 -3
- package/dist/slot.esm.js +3 -3
- package/dist/sortable.cjs.js +61 -48
- package/dist/sortable.esm.js +636 -554
- package/dist/spinning-text.cjs.js +3 -3
- package/dist/spinning-text.esm.js +3 -3
- package/dist/split-button.cjs.js +1 -1
- package/dist/split-button.esm.js +1 -1
- package/dist/stepper.cjs.js +1 -1
- package/dist/stepper.esm.js +1 -1
- package/dist/switch.cjs.js +10 -12
- package/dist/switch.esm.js +10 -12
- package/dist/table.cjs.js +9 -6
- package/dist/table.esm.js +46 -43
- package/dist/tabs.cjs.js +22 -23
- package/dist/tabs.esm.js +116 -112
- package/dist/tags-input.cjs.js +9 -9
- package/dist/tags-input.esm.js +32 -25
- package/dist/textarea.cjs.js +13 -13
- package/dist/textarea.esm.js +46 -31
- package/dist/theme.d.ts +18 -0
- package/dist/theme.d.ts.map +1 -1
- package/dist/time-field.cjs.js +5 -5
- package/dist/time-field.esm.js +21 -18
- package/dist/time-picker.cjs.js +4 -4
- package/dist/time-picker.esm.js +5 -5
- package/dist/timeline.cjs.js +2 -2
- package/dist/timeline.esm.js +4 -4
- package/dist/toast.cjs.js +6 -6
- package/dist/toast.esm.js +13 -13
- package/dist/toggle-group.cjs.js +5 -6
- package/dist/toggle-group.esm.js +63 -60
- package/dist/toggle.cjs.js +18 -18
- package/dist/toggle.esm.js +32 -31
- package/dist/tooltip.cjs.js +4 -4
- package/dist/tooltip.esm.js +4 -4
- package/dist/transfer-list.cjs.js +32 -32
- package/dist/transfer-list.esm.js +57 -57
- package/dist/tree-7qbVnpGp.js +39 -0
- package/dist/{tree-B3kE8ESs.mjs → tree-Deoft-kO.mjs} +34 -33
- package/dist/tree.cjs.js +1 -1
- package/dist/tree.esm.js +1 -1
- package/dist/trigger-BjnxLCeQ.mjs +9 -0
- package/dist/trigger-DkPsKxsP.js +1 -0
- package/dist/{ui-button-rXQOS9QJ.js → ui-button-BInsgSbr.js} +27 -26
- package/dist/{ui-button-Q0GNNWKC.mjs → ui-button-rfiuUnUD.mjs} +65 -48
- package/dist/{ui-icon-YI6lyuqU.mjs → ui-icon-BSi_GtqO.mjs} +2 -2
- package/dist/{ui-icon-BzVNC_lr.js → ui-icon-Bvt9oIIR.js} +5 -5
- package/dist/wizard.cjs.js +12 -13
- package/dist/wizard.esm.js +17 -15
- package/package.json +1 -1
- package/dist/runtime-CTaOSmBj.js +0 -1
- package/dist/tree-Dx_kv_ih.js +0 -39
package/dist/input.cjs.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("./ElementBase-EV6mVBUV.js"),S=require("./control-name-BmoI1m3a.js"),q=`
|
|
2
2
|
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
3
3
|
<path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
4
4
|
</svg>
|
|
5
|
-
`,
|
|
5
|
+
`,N=`
|
|
6
6
|
:host {
|
|
7
7
|
--ui-input-padding: var(--ui-padding, 10px 12px);
|
|
8
8
|
--ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
--ui-input-width: 100%;
|
|
15
15
|
--ui-input-bg: var(--base-input-bg, var(--ui-color-surface, var(--ui-surface, #ffffff)));
|
|
16
16
|
--ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
|
|
17
|
-
--ui-label-color: var(--ui-color-muted, var(--ui-muted, #
|
|
18
|
-
--ui-description-color: var(--ui-color-muted, var(--ui-muted, #
|
|
17
|
+
--ui-label-color: var(--ui-color-muted, var(--ui-muted, #526175));
|
|
18
|
+
--ui-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
|
|
19
19
|
--ui-input-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
|
|
20
20
|
--ui-input-error: var(--ui-color-danger, var(--ui-error, #dc2626));
|
|
21
|
-
--ui-input-success: var(--ui-color-success, var(--ui-success, #
|
|
22
|
-
--ui-input-warning: var(--ui-color-warning, var(--ui-warning, #
|
|
21
|
+
--ui-input-success: var(--ui-color-success, var(--ui-success, #15803d));
|
|
22
|
+
--ui-input-warning: var(--ui-color-warning, var(--ui-warning, #b45309));
|
|
23
23
|
--ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
|
|
24
24
|
--ui-input-shadow: none;
|
|
25
25
|
--ui-input-gap: var(--ui-default-gap, 8px);
|
|
@@ -369,7 +369,7 @@
|
|
|
369
369
|
}
|
|
370
370
|
|
|
371
371
|
:host([tone="success"]) {
|
|
372
|
-
--ui-input-accent: var(--ui-color-success, var(--ui-success, #
|
|
372
|
+
--ui-input-accent: var(--ui-color-success, var(--ui-success, #15803d));
|
|
373
373
|
}
|
|
374
374
|
|
|
375
375
|
:host([tone="warning"]) {
|
|
@@ -481,20 +481,20 @@
|
|
|
481
481
|
box-shadow: none;
|
|
482
482
|
}
|
|
483
483
|
}
|
|
484
|
-
`;function r(a){return a.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function z(a){if(!a)return!1;const t=a.assignedNodes({flatten:!0});return t.length?t.some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function
|
|
485
|
-
<style>${
|
|
484
|
+
`;function r(a){return a.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function z(a){if(!a)return!1;const t=a.assignedNodes({flatten:!0});return t.length?t.some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function A(a,t){const e=a.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function T(a){return a==="none"||a==="large"||a==="full"}class E extends $.ElementBase{constructor(){super(),this._input=null,this._clearBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","readonly","autofocus","counter","floating-label","headless","type","name","required","pattern","inputmode","autocomplete","min","max","step","spellcheck","variant","tone","density","shape","color","radius","label","aria-label","aria-description","aria-describedby","description","data-error"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._registerWithForm()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._autofocusApplied=!1,super.disconnectedCallback()}_syncHostTokens(){const t=this.getAttribute("color");t?this.style.setProperty("--ui-input-accent",t):this.style.removeProperty("--ui-input-accent");const e=this.getAttribute("radius")||"";e&&!T(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;const t=this._input,e=this.getAttribute("type")||"text",i=this.getAttribute("placeholder")||"",n=this.getAttribute("name")||"",o=this.getAttribute("pattern")||"",s=this.getAttribute("inputmode")||"",m=this.getAttribute("autocomplete")||"",p=this.getAttribute("min")||"",u=this.getAttribute("max")||"",l=this.getAttribute("step")||"",c=this.getAttribute("spellcheck")||"",d=this.getAttribute("maxlength")||"",h=this.getAttribute("minlength")||"",b=A(this,"disabled"),f=this.hasAttribute("required"),g=this.hasAttribute("readonly");try{t.type=e}catch{t.type="text"}t.placeholder=i,t.disabled=b,t.required=f,t.readOnly=g,t.name=n,o?t.setAttribute("pattern",o):t.removeAttribute("pattern"),s?t.setAttribute("inputmode",s):t.removeAttribute("inputmode"),m?t.setAttribute("autocomplete",m):t.removeAttribute("autocomplete"),p?t.setAttribute("min",p):t.removeAttribute("min"),u?t.setAttribute("max",u):t.removeAttribute("max"),l?t.setAttribute("step",l):t.removeAttribute("step"),c?t.setAttribute("spellcheck",c):t.removeAttribute("spellcheck"),d&&Number.isFinite(Number(d))?t.setAttribute("maxlength",d):t.removeAttribute("maxlength"),h&&Number.isFinite(Number(h))?t.setAttribute("minlength",h):t.removeAttribute("minlength")}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="value"){this._syncInputValue(i||"");return}if(t==="name"&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),new Set(["placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","readonly","autofocus","counter","headless","type","name","required","pattern","inputmode","autocomplete","min","max","step","spellcheck","variant","tone","density","shape","color","radius","aria-label","aria-description","aria-describedby"]).has(t)){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}));return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){this._input?.blur()}select(){this._input?.select()}_emitValueEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0}))}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const n=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),o=this.getAttribute("name");n&&typeof n.registerField=="function"&&o&&(this._formUnregister=n.registerField(o,{name:o,getValue:()=>this.value,setValue:s=>{this.value=String(s??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:s=>{s?(this.setAttribute("validation","error"),this.setAttribute("data-error",s)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}}))}catch{}}_detachListeners(){this._input&&(this._input.removeEventListener("input",this._onNativeInput),this._input.removeEventListener("change",this._onNativeChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClearClick),this._clearBtn=null}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t),this._clearBtn&&(A(this,"clearable")&&t.length>0&&!A(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const e=this.root.querySelector(".counter");if(e&&this.hasAttribute("counter")){const n=this.getAttribute("maxlength"),o=n?`${t.length}/${n}`:String(t.length);e.textContent=o}const i=this.root.querySelector(".shell");i&&i.setAttribute("data-has-value",t?"true":"false")}_onSlotChange(){this._syncDerivedState()}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),n=this.root.querySelector('slot[name="prefix"]'),o=this.root.querySelector('slot[name="suffix"]'),s=(this.getAttribute("label")||"").trim(),m=(this.getAttribute("description")||"").trim(),p=(this.getAttribute("data-error")||"").trim(),u=!!s||z(t),l=!!m||z(e),c=!!p||z(i),d=z(n),h=z(o),b=this.root.querySelector(".label"),f=this.root.querySelector(".description"),g=this.root.querySelector(".prefix"),v=this.root.querySelector(".suffix"),x=this.root.querySelector(".meta"),y=this.root.querySelector(".footer"),_=this.root.querySelector(".error"),C=this.root.querySelector(".counter");b&&(u?b.removeAttribute("hidden"):b.setAttribute("hidden","")),f&&(l?f.removeAttribute("hidden"):f.setAttribute("hidden","")),g&&(d?g.removeAttribute("hidden"):g.setAttribute("hidden","")),v&&(h?v.removeAttribute("hidden"):v.setAttribute("hidden","")),x&&(u||l?x.removeAttribute("hidden"):x.setAttribute("hidden",""));const k=this.hasAttribute("counter");if(C&&(k?C.removeAttribute("hidden"):C.setAttribute("hidden","")),_&&(c?_.removeAttribute("hidden"):_.setAttribute("hidden","")),y&&(c||k?y.removeAttribute("hidden"):y.setAttribute("hidden","")),this._input){S.syncControlName(this._input,this,u?`${this._uid}-label`:null);const w=[];l&&w.push(`${this._uid}-description`),c&&w.push(`${this._uid}-error`),S.syncControlDescription(this._input,this,this._uid,w),this.getAttribute("validation")==="error"||!!p?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid"),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required")}}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?this.setAttribute("value",e):this._syncInputValue(e),this._emitValueEvent("input",e);const i=Number(this.getAttribute("debounce")||0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emitValueEvent("debounced-input",e),this._debounceTimer=null},i)):this._emitValueEvent("debounced-input",e)}_onNativeChange(t){const e=t.target.value;this._emitValueEvent("change",e)}_onClearClick(t){if(t.preventDefault(),!(A(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}render(){const t=this.getAttribute("value")||"",e=this.getAttribute("placeholder")||"",i=A(this,"disabled"),n=A(this,"clearable"),o=this.getAttribute("type")||"text",s=this.getAttribute("name")||"",m=this.hasAttribute("required"),p=this.getAttribute("pattern")||"",u=this.getAttribute("inputmode")||"",l=this.getAttribute("autocomplete")||"",c=this.getAttribute("min")||"",d=this.getAttribute("max")||"",h=this.getAttribute("step")||"",b=this.getAttribute("spellcheck")||"",f=this.getAttribute("maxlength")||"",g=this.getAttribute("minlength")||"",v=this.hasAttribute("readonly"),x=this.getAttribute("label")||"",y=this.getAttribute("description")||"",_=this.getAttribute("data-error")||"",C=this.getAttribute("validation")||"",k=this.hasAttribute("floating-label"),w=m?'<span class="required" aria-hidden="true">*</span>':"";this._syncHostTokens(),this.setContent(`
|
|
485
|
+
<style>${N}</style>
|
|
486
486
|
<div class="root" part="root">
|
|
487
487
|
<div class="meta" part="meta">
|
|
488
488
|
<label class="label" id="${this._uid}-label" part="label">
|
|
489
489
|
<slot name="label">${r(x)}</slot>
|
|
490
|
-
${
|
|
490
|
+
${w}
|
|
491
491
|
</label>
|
|
492
492
|
<p class="description" id="${this._uid}-description" part="description">
|
|
493
|
-
<slot name="description">${r(
|
|
493
|
+
<slot name="description">${r(y)}</slot>
|
|
494
494
|
</p>
|
|
495
495
|
</div>
|
|
496
496
|
|
|
497
|
-
<div class="shell" part="shell" data-validation="${r(
|
|
497
|
+
<div class="shell" part="shell" data-validation="${r(C||"none")}" data-has-value="${t?"true":"false"}">
|
|
498
498
|
<span class="prefix" part="prefix"><slot name="prefix"></slot></span>
|
|
499
499
|
|
|
500
500
|
<div class="control" part="control">
|
|
@@ -520,7 +520,7 @@
|
|
|
520
520
|
${k?`<span class="floating-label" part="floating-label">${r(x||e||s||"Input")}</span>`:""}
|
|
521
521
|
</div>
|
|
522
522
|
|
|
523
|
-
<button class="clear-btn" part="clear" aria-label="Clear" ${n&&t&&!i&&!v?"":"hidden"}>${
|
|
523
|
+
<button class="clear-btn" part="clear" aria-label="Clear" ${n&&t&&!i&&!v?"":"hidden"}>${q}</button>
|
|
524
524
|
|
|
525
525
|
<span class="suffix" part="suffix"><slot name="suffix"></slot></span>
|
|
526
526
|
</div>
|
|
@@ -532,4 +532,4 @@
|
|
|
532
532
|
<p class="counter" part="counter"></p>
|
|
533
533
|
</div>
|
|
534
534
|
</div>
|
|
535
|
-
`),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector("button.clear-btn"),this._input&&(this._input.addEventListener("input",this._onNativeInput),this._input.addEventListener("change",this._onNativeChange)),this._clearBtn?.addEventListener("click",this._onClearClick),this._syncControlAttrs(),this._syncInputValue(t),this._syncDerivedState(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"||t==="floating-label"}}typeof customElements<"u"&&!customElements.get("ui-input")&&customElements.define("ui-input",
|
|
535
|
+
`),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector("button.clear-btn"),this._input&&(this._input.addEventListener("input",this._onNativeInput),this._input.addEventListener("change",this._onNativeChange)),this._clearBtn?.addEventListener("click",this._onClearClick),this._syncControlAttrs(),this._syncInputValue(t),this._syncDerivedState(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"||t==="floating-label"}}typeof customElements<"u"&&!customElements.get("ui-input")&&customElements.define("ui-input",E);exports.UIInput=E;
|
package/dist/input.esm.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { E as S } from "./ElementBase-YlTLMsGk.mjs";
|
|
2
|
-
|
|
2
|
+
import { s as E, a as $ } from "./control-name-Bpj7F34X.mjs";
|
|
3
|
+
const q = `
|
|
3
4
|
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
4
5
|
<path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
5
6
|
</svg>
|
|
6
|
-
`,
|
|
7
|
+
`, N = `
|
|
7
8
|
:host {
|
|
8
9
|
--ui-input-padding: var(--ui-padding, 10px 12px);
|
|
9
10
|
--ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
|
|
@@ -15,12 +16,12 @@ const E = `
|
|
|
15
16
|
--ui-input-width: 100%;
|
|
16
17
|
--ui-input-bg: var(--base-input-bg, var(--ui-color-surface, var(--ui-surface, #ffffff)));
|
|
17
18
|
--ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
|
|
18
|
-
--ui-label-color: var(--ui-color-muted, var(--ui-muted, #
|
|
19
|
-
--ui-description-color: var(--ui-color-muted, var(--ui-muted, #
|
|
19
|
+
--ui-label-color: var(--ui-color-muted, var(--ui-muted, #526175));
|
|
20
|
+
--ui-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
|
|
20
21
|
--ui-input-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
|
|
21
22
|
--ui-input-error: var(--ui-color-danger, var(--ui-error, #dc2626));
|
|
22
|
-
--ui-input-success: var(--ui-color-success, var(--ui-success, #
|
|
23
|
-
--ui-input-warning: var(--ui-color-warning, var(--ui-warning, #
|
|
23
|
+
--ui-input-success: var(--ui-color-success, var(--ui-success, #15803d));
|
|
24
|
+
--ui-input-warning: var(--ui-color-warning, var(--ui-warning, #b45309));
|
|
24
25
|
--ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
|
|
25
26
|
--ui-input-shadow: none;
|
|
26
27
|
--ui-input-gap: var(--ui-default-gap, 8px);
|
|
@@ -370,7 +371,7 @@ const E = `
|
|
|
370
371
|
}
|
|
371
372
|
|
|
372
373
|
:host([tone="success"]) {
|
|
373
|
-
--ui-input-accent: var(--ui-color-success, var(--ui-success, #
|
|
374
|
+
--ui-input-accent: var(--ui-color-success, var(--ui-success, #15803d));
|
|
374
375
|
}
|
|
375
376
|
|
|
376
377
|
:host([tone="warning"]) {
|
|
@@ -491,16 +492,16 @@ function z(a) {
|
|
|
491
492
|
const t = a.assignedNodes({ flatten: !0 });
|
|
492
493
|
return t.length ? t.some((e) => e.nodeType === Node.TEXT_NODE ? !!e.textContent?.trim() : e.nodeType === Node.ELEMENT_NODE) : !1;
|
|
493
494
|
}
|
|
494
|
-
function
|
|
495
|
+
function A(a, t) {
|
|
495
496
|
const e = a.getAttribute(t);
|
|
496
497
|
if (e == null) return !1;
|
|
497
498
|
const i = String(e).trim().toLowerCase();
|
|
498
499
|
return i !== "false" && i !== "0";
|
|
499
500
|
}
|
|
500
|
-
function
|
|
501
|
+
function T(a) {
|
|
501
502
|
return a === "none" || a === "large" || a === "full";
|
|
502
503
|
}
|
|
503
|
-
class
|
|
504
|
+
class L extends S {
|
|
504
505
|
constructor() {
|
|
505
506
|
super(), this._input = null, this._clearBtn = null, this._debounceTimer = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 9), this._autofocusApplied = !1, this._onNativeInput = this._onNativeInput.bind(this), this._onNativeChange = this._onNativeChange.bind(this), this._onClearClick = this._onClearClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
|
|
506
507
|
}
|
|
@@ -537,6 +538,9 @@ class T extends S {
|
|
|
537
538
|
"color",
|
|
538
539
|
"radius",
|
|
539
540
|
"label",
|
|
541
|
+
"aria-label",
|
|
542
|
+
"aria-description",
|
|
543
|
+
"aria-describedby",
|
|
540
544
|
"description",
|
|
541
545
|
"data-error"
|
|
542
546
|
];
|
|
@@ -551,17 +555,17 @@ class T extends S {
|
|
|
551
555
|
const t = this.getAttribute("color");
|
|
552
556
|
t ? this.style.setProperty("--ui-input-accent", t) : this.style.removeProperty("--ui-input-accent");
|
|
553
557
|
const e = this.getAttribute("radius") || "";
|
|
554
|
-
e && !
|
|
558
|
+
e && !T(e) ? this.style.setProperty("--ui-input-border-radius", e) : this.style.removeProperty("--ui-input-border-radius");
|
|
555
559
|
}
|
|
556
560
|
_syncControlAttrs() {
|
|
557
561
|
if (this._syncHostTokens(), !this._input) return;
|
|
558
|
-
const t = this._input, e = this.getAttribute("type") || "text", i = this.getAttribute("placeholder") || "", n = this.getAttribute("name") || "", o = this.getAttribute("pattern") || "", s = this.getAttribute("inputmode") || "",
|
|
562
|
+
const t = this._input, e = this.getAttribute("type") || "text", i = this.getAttribute("placeholder") || "", n = this.getAttribute("name") || "", o = this.getAttribute("pattern") || "", s = this.getAttribute("inputmode") || "", g = this.getAttribute("autocomplete") || "", p = this.getAttribute("min") || "", u = this.getAttribute("max") || "", l = this.getAttribute("step") || "", c = this.getAttribute("spellcheck") || "", d = this.getAttribute("maxlength") || "", h = this.getAttribute("minlength") || "", b = A(this, "disabled"), f = this.hasAttribute("required"), m = this.hasAttribute("readonly");
|
|
559
563
|
try {
|
|
560
564
|
t.type = e;
|
|
561
565
|
} catch {
|
|
562
566
|
t.type = "text";
|
|
563
567
|
}
|
|
564
|
-
t.placeholder = i, t.disabled = b, t.required = f, t.readOnly =
|
|
568
|
+
t.placeholder = i, t.disabled = b, t.required = f, t.readOnly = m, t.name = n, o ? t.setAttribute("pattern", o) : t.removeAttribute("pattern"), s ? t.setAttribute("inputmode", s) : t.removeAttribute("inputmode"), g ? t.setAttribute("autocomplete", g) : t.removeAttribute("autocomplete"), p ? t.setAttribute("min", p) : t.removeAttribute("min"), u ? t.setAttribute("max", u) : t.removeAttribute("max"), l ? t.setAttribute("step", l) : t.removeAttribute("step"), c ? t.setAttribute("spellcheck", c) : t.removeAttribute("spellcheck"), d && Number.isFinite(Number(d)) ? t.setAttribute("maxlength", d) : t.removeAttribute("maxlength"), h && Number.isFinite(Number(h)) ? t.setAttribute("minlength", h) : t.removeAttribute("minlength");
|
|
565
569
|
}
|
|
566
570
|
attributeChangedCallback(t, e, i) {
|
|
567
571
|
if (e === i) return;
|
|
@@ -597,7 +601,10 @@ class T extends S {
|
|
|
597
601
|
"density",
|
|
598
602
|
"shape",
|
|
599
603
|
"color",
|
|
600
|
-
"radius"
|
|
604
|
+
"radius",
|
|
605
|
+
"aria-label",
|
|
606
|
+
"aria-description",
|
|
607
|
+
"aria-describedby"
|
|
601
608
|
])).has(t)) {
|
|
602
609
|
this._syncControlAttrs(), this._syncInputValue(this.value), this._syncDerivedState(), t === "autofocus" && this.hasAttribute("autofocus") && !this._autofocusApplied && (this._autofocusApplied = !0, queueMicrotask(() => {
|
|
603
610
|
if (this.isConnected)
|
|
@@ -661,7 +668,7 @@ class T extends S {
|
|
|
661
668
|
this._input && (this._input.removeEventListener("input", this._onNativeInput), this._input.removeEventListener("change", this._onNativeChange)), this._clearBtn && this._clearBtn.removeEventListener("click", this._onClearClick), this._clearBtn = null;
|
|
662
669
|
}
|
|
663
670
|
_syncInputValue(t) {
|
|
664
|
-
this._input && this._input.value !== t && (this._input.value = t), this._clearBtn && (
|
|
671
|
+
this._input && this._input.value !== t && (this._input.value = t), this._clearBtn && (A(this, "clearable") && t.length > 0 && !A(this, "disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", ""));
|
|
665
672
|
const e = this.root.querySelector(".counter");
|
|
666
673
|
if (e && this.hasAttribute("counter")) {
|
|
667
674
|
const n = this.getAttribute("maxlength"), o = n ? `${t.length}/${n}` : String(t.length);
|
|
@@ -674,13 +681,13 @@ class T extends S {
|
|
|
674
681
|
this._syncDerivedState();
|
|
675
682
|
}
|
|
676
683
|
_syncDerivedState() {
|
|
677
|
-
const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="prefix"]'), o = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(),
|
|
678
|
-
b && (u ? b.removeAttribute("hidden") : b.setAttribute("hidden", "")), f && (l ? f.removeAttribute("hidden") : f.setAttribute("hidden", "")),
|
|
684
|
+
const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="prefix"]'), o = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(), g = (this.getAttribute("description") || "").trim(), p = (this.getAttribute("data-error") || "").trim(), u = !!s || z(t), l = !!g || z(e), c = !!p || z(i), d = z(n), h = z(o), b = this.root.querySelector(".label"), f = this.root.querySelector(".description"), m = this.root.querySelector(".prefix"), v = this.root.querySelector(".suffix"), x = this.root.querySelector(".meta"), y = this.root.querySelector(".footer"), _ = this.root.querySelector(".error"), C = this.root.querySelector(".counter");
|
|
685
|
+
b && (u ? b.removeAttribute("hidden") : b.setAttribute("hidden", "")), f && (l ? f.removeAttribute("hidden") : f.setAttribute("hidden", "")), m && (d ? m.removeAttribute("hidden") : m.setAttribute("hidden", "")), v && (h ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), x && (u || l ? x.removeAttribute("hidden") : x.setAttribute("hidden", ""));
|
|
679
686
|
const k = this.hasAttribute("counter");
|
|
680
|
-
if (
|
|
681
|
-
|
|
682
|
-
const
|
|
683
|
-
l &&
|
|
687
|
+
if (C && (k ? C.removeAttribute("hidden") : C.setAttribute("hidden", "")), _ && (c ? _.removeAttribute("hidden") : _.setAttribute("hidden", "")), y && (c || k ? y.removeAttribute("hidden") : y.setAttribute("hidden", "")), this._input) {
|
|
688
|
+
E(this._input, this, u ? `${this._uid}-label` : null);
|
|
689
|
+
const w = [];
|
|
690
|
+
l && w.push(`${this._uid}-description`), c && w.push(`${this._uid}-error`), $(this._input, this, this._uid, w), this.getAttribute("validation") === "error" || !!p ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required");
|
|
684
691
|
}
|
|
685
692
|
}
|
|
686
693
|
_onNativeInput(t) {
|
|
@@ -696,7 +703,7 @@ class T extends S {
|
|
|
696
703
|
this._emitValueEvent("change", e);
|
|
697
704
|
}
|
|
698
705
|
_onClearClick(t) {
|
|
699
|
-
if (t.preventDefault(), !(
|
|
706
|
+
if (t.preventDefault(), !(A(this, "disabled") || this.hasAttribute("readonly")) && this._input) {
|
|
700
707
|
this.value = "", this._input.value = "", this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 }));
|
|
701
708
|
try {
|
|
702
709
|
this._input.focus({ preventScroll: !0 });
|
|
@@ -706,21 +713,21 @@ class T extends S {
|
|
|
706
713
|
}
|
|
707
714
|
}
|
|
708
715
|
render() {
|
|
709
|
-
const t = this.getAttribute("value") || "", e = this.getAttribute("placeholder") || "", i =
|
|
716
|
+
const t = this.getAttribute("value") || "", e = this.getAttribute("placeholder") || "", i = A(this, "disabled"), n = A(this, "clearable"), o = this.getAttribute("type") || "text", s = this.getAttribute("name") || "", g = this.hasAttribute("required"), p = this.getAttribute("pattern") || "", u = this.getAttribute("inputmode") || "", l = this.getAttribute("autocomplete") || "", c = this.getAttribute("min") || "", d = this.getAttribute("max") || "", h = this.getAttribute("step") || "", b = this.getAttribute("spellcheck") || "", f = this.getAttribute("maxlength") || "", m = this.getAttribute("minlength") || "", v = this.hasAttribute("readonly"), x = this.getAttribute("label") || "", y = this.getAttribute("description") || "", _ = this.getAttribute("data-error") || "", C = this.getAttribute("validation") || "", k = this.hasAttribute("floating-label"), w = g ? '<span class="required" aria-hidden="true">*</span>' : "";
|
|
710
717
|
this._syncHostTokens(), this.setContent(`
|
|
711
|
-
<style>${
|
|
718
|
+
<style>${N}</style>
|
|
712
719
|
<div class="root" part="root">
|
|
713
720
|
<div class="meta" part="meta">
|
|
714
721
|
<label class="label" id="${this._uid}-label" part="label">
|
|
715
722
|
<slot name="label">${r(x)}</slot>
|
|
716
|
-
${
|
|
723
|
+
${w}
|
|
717
724
|
</label>
|
|
718
725
|
<p class="description" id="${this._uid}-description" part="description">
|
|
719
|
-
<slot name="description">${r(
|
|
726
|
+
<slot name="description">${r(y)}</slot>
|
|
720
727
|
</p>
|
|
721
728
|
</div>
|
|
722
729
|
|
|
723
|
-
<div class="shell" part="shell" data-validation="${r(
|
|
730
|
+
<div class="shell" part="shell" data-validation="${r(C || "none")}" data-has-value="${t ? "true" : "false"}">
|
|
724
731
|
<span class="prefix" part="prefix"><slot name="prefix"></slot></span>
|
|
725
732
|
|
|
726
733
|
<div class="control" part="control">
|
|
@@ -730,7 +737,7 @@ class T extends S {
|
|
|
730
737
|
name="${r(s)}"
|
|
731
738
|
value="${r(t)}"
|
|
732
739
|
placeholder="${r(e)}"
|
|
733
|
-
${
|
|
740
|
+
${g ? "required" : ""}
|
|
734
741
|
${p ? `pattern="${r(p)}"` : ""}
|
|
735
742
|
${u ? `inputmode="${r(u)}"` : ""}
|
|
736
743
|
${l ? `autocomplete="${r(l)}"` : ""}
|
|
@@ -739,14 +746,14 @@ class T extends S {
|
|
|
739
746
|
${h ? `step="${r(h)}"` : ""}
|
|
740
747
|
${b ? `spellcheck="${r(b)}"` : ""}
|
|
741
748
|
${f ? `maxlength="${r(f)}"` : ""}
|
|
742
|
-
${
|
|
749
|
+
${m ? `minlength="${r(m)}"` : ""}
|
|
743
750
|
${i ? "disabled" : ""}
|
|
744
751
|
${v ? "readonly" : ""}
|
|
745
752
|
/>
|
|
746
753
|
${k ? `<span class="floating-label" part="floating-label">${r(x || e || s || "Input")}</span>` : ""}
|
|
747
754
|
</div>
|
|
748
755
|
|
|
749
|
-
<button class="clear-btn" part="clear" aria-label="Clear" ${n && t && !i && !v ? "" : "hidden"}>${
|
|
756
|
+
<button class="clear-btn" part="clear" aria-label="Clear" ${n && t && !i && !v ? "" : "hidden"}>${q}</button>
|
|
750
757
|
|
|
751
758
|
<span class="suffix" part="suffix"><slot name="suffix"></slot></span>
|
|
752
759
|
</div>
|
|
@@ -771,7 +778,7 @@ class T extends S {
|
|
|
771
778
|
return t === "label" || t === "description" || t === "data-error" || t === "floating-label";
|
|
772
779
|
}
|
|
773
780
|
}
|
|
774
|
-
typeof customElements < "u" && !customElements.get("ui-input") && customElements.define("ui-input",
|
|
781
|
+
typeof customElements < "u" && !customElements.get("ui-input") && customElements.define("ui-input", L);
|
|
775
782
|
export {
|
|
776
|
-
|
|
783
|
+
L as UIInput
|
|
777
784
|
};
|
package/dist/label.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./ElementBase-EV6mVBUV.js"),u=`
|
|
2
2
|
:host {
|
|
3
3
|
--ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
|
|
4
|
-
--ui-label-muted: var(--ui-color-muted, var(--ui-muted, #
|
|
4
|
+
--ui-label-muted: var(--ui-color-muted, var(--ui-muted, #526175));
|
|
5
5
|
--ui-label-error: var(--ui-color-danger, var(--ui-error, #dc2626));
|
|
6
6
|
--ui-label-bg: transparent;
|
|
7
7
|
--ui-label-border: 1px solid transparent;
|
|
@@ -123,8 +123,8 @@
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
:host([tone="brand"]) { --ui-label-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
|
|
126
|
-
:host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #
|
|
127
|
-
:host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #
|
|
126
|
+
:host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #15803d)); }
|
|
127
|
+
:host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
|
|
128
128
|
:host([tone="danger"]) { --ui-label-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
|
|
129
129
|
|
|
130
130
|
:host([shape="square"]) { --ui-label-radius: 4px; }
|
package/dist/label.esm.js
CHANGED
|
@@ -2,7 +2,7 @@ import { E as s } from "./ElementBase-YlTLMsGk.mjs";
|
|
|
2
2
|
const n = `
|
|
3
3
|
:host {
|
|
4
4
|
--ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
|
|
5
|
-
--ui-label-muted: var(--ui-color-muted, var(--ui-muted, #
|
|
5
|
+
--ui-label-muted: var(--ui-color-muted, var(--ui-muted, #526175));
|
|
6
6
|
--ui-label-error: var(--ui-color-danger, var(--ui-error, #dc2626));
|
|
7
7
|
--ui-label-bg: transparent;
|
|
8
8
|
--ui-label-border: 1px solid transparent;
|
|
@@ -124,8 +124,8 @@ const n = `
|
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
:host([tone="brand"]) { --ui-label-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
|
|
127
|
-
:host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #
|
|
128
|
-
:host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #
|
|
127
|
+
:host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #15803d)); }
|
|
128
|
+
:host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
|
|
129
129
|
:host([tone="danger"]) { --ui-label-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
|
|
130
130
|
|
|
131
131
|
:host([shape="square"]) { --ui-label-radius: 4px; }
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
overflow: hidden;
|
|
39
39
|
text-overflow: ellipsis;
|
|
40
40
|
white-space: nowrap;
|
|
41
|
-
color: color-mix(in srgb, currentColor
|
|
41
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
42
42
|
font-size: 0.92em;
|
|
43
43
|
line-height: 1.35;
|
|
44
44
|
letter-spacing: inherit;
|
|
@@ -81,7 +81,7 @@ const h = "data-ui-listbox-base-style", y = `
|
|
|
81
81
|
overflow: hidden;
|
|
82
82
|
text-overflow: ellipsis;
|
|
83
83
|
white-space: nowrap;
|
|
84
|
-
color: color-mix(in srgb, currentColor
|
|
84
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
85
85
|
font-size: 0.92em;
|
|
86
86
|
line-height: 1.35;
|
|
87
87
|
letter-spacing: inherit;
|
package/dist/listbox.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./listbox-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./listbox-CTpRpuF7.js");exports.UIListbox=e.UIListbox;
|
package/dist/listbox.esm.js
CHANGED
package/dist/marquee.cjs.js
CHANGED
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
:host([tone="neutral"]) {
|
|
113
|
-
--ui-marquee-accent: #
|
|
113
|
+
--ui-marquee-accent: #526175;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
:host([tone="info"]) {
|
|
@@ -118,11 +118,11 @@
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
:host([tone="success"]) {
|
|
121
|
-
--ui-marquee-accent: var(--ui-color-success, #
|
|
121
|
+
--ui-marquee-accent: var(--ui-color-success, #15803d);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
:host([tone="warning"]) {
|
|
125
|
-
--ui-marquee-accent: var(--ui-color-warning, #
|
|
125
|
+
--ui-marquee-accent: var(--ui-color-warning, #b45309);
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
:host([tone="danger"]) {
|
package/dist/marquee.esm.js
CHANGED
|
@@ -111,7 +111,7 @@ const l = "24px", p = "48px", f = 60, b = /* @__PURE__ */ new Set(["none", "sm",
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
:host([tone="neutral"]) {
|
|
114
|
-
--ui-marquee-accent: #
|
|
114
|
+
--ui-marquee-accent: #526175;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
:host([tone="info"]) {
|
|
@@ -119,11 +119,11 @@ const l = "24px", p = "48px", f = 60, b = /* @__PURE__ */ new Set(["none", "sm",
|
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
:host([tone="success"]) {
|
|
122
|
-
--ui-marquee-accent: var(--ui-color-success, #
|
|
122
|
+
--ui-marquee-accent: var(--ui-color-success, #15803d);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
:host([tone="warning"]) {
|
|
126
|
-
--ui-marquee-accent: var(--ui-color-warning, #
|
|
126
|
+
--ui-marquee-accent: var(--ui-color-warning, #b45309);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
:host([tone="danger"]) {
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
${$} {
|
|
128
|
-
color: color-mix(in srgb, currentColor
|
|
128
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
129
129
|
font-size: calc(var(${t}-item-font-size, 14px) - 1px);
|
|
130
130
|
line-height: 1.35;
|
|
131
131
|
letter-spacing: inherit;
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
padding-left: 14px;
|
|
137
137
|
flex: 0 0 auto;
|
|
138
138
|
min-width: max-content;
|
|
139
|
-
color: color-mix(in srgb, currentColor
|
|
139
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
140
140
|
font-size: calc(var(${t}-item-font-size, 14px) - 1px);
|
|
141
141
|
line-height: 1;
|
|
142
142
|
letter-spacing: inherit;
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
${C} {
|
|
147
147
|
margin-left: 6px;
|
|
148
148
|
flex: 0 0 auto;
|
|
149
|
-
color: color-mix(in srgb, currentColor
|
|
149
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
150
150
|
font-size: 12px;
|
|
151
151
|
}
|
|
152
152
|
`}exports.createSharedMenuItemCss=T;
|
|
@@ -150,7 +150,7 @@ function E(e) {
|
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
${$} {
|
|
153
|
-
color: color-mix(in srgb, currentColor
|
|
153
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
154
154
|
font-size: calc(var(${t}-item-font-size, 14px) - 1px);
|
|
155
155
|
line-height: 1.35;
|
|
156
156
|
letter-spacing: inherit;
|
|
@@ -161,7 +161,7 @@ function E(e) {
|
|
|
161
161
|
padding-left: 14px;
|
|
162
162
|
flex: 0 0 auto;
|
|
163
163
|
min-width: max-content;
|
|
164
|
-
color: color-mix(in srgb, currentColor
|
|
164
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
165
165
|
font-size: calc(var(${t}-item-font-size, 14px) - 1px);
|
|
166
166
|
line-height: 1;
|
|
167
167
|
letter-spacing: inherit;
|
|
@@ -171,7 +171,7 @@ function E(e) {
|
|
|
171
171
|
${C} {
|
|
172
172
|
margin-left: 6px;
|
|
173
173
|
flex: 0 0 auto;
|
|
174
|
-
color: color-mix(in srgb, currentColor
|
|
174
|
+
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
175
175
|
font-size: 12px;
|
|
176
176
|
}
|
|
177
177
|
`;
|