snice 4.14.0 → 4.16.0

package/dist/cdn/input/snice-input.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.13.0
+ * snice v4.15.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -112,7 +112,7 @@ var SniceInput = (function (exports, snice) {
       return snice.html `<span class="${className}" part="icon">${icon}</span>`;
   }
 
-  var cssContent = ":host{display:inline-block;width:100%;max-width:100%;box-sizing:border-box;font-family:var(--snice-font-family);color-scheme:light dark}.input-wrapper{position:relative;width:100%;max-width:100%;box-sizing:border-box}.input-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;box-sizing:border-box;transition:all var(--snice-transition-fast) ease}.input{flex:1;min-width:0;box-sizing:border-box;font-family:inherit;font-size:var(--snice-font-size-md);background:var(--snice-color-background-input,rgb(248 247 245));color:var(--snice-color-text);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);box-shadow:var(--snice-shadow-inset-sm);transition:all var(--snice-transition-fast) ease;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus{border-color:var(--snice-color-primary);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-focus-ring-color),var(--snice-shadow-sm)}.input:disabled{background:var(--snice-color-background-secondary);color:var(--snice-color-text-secondary);cursor:not-allowed;opacity:.6}.input::placeholder{color:var(--snice-color-text-secondary);opacity:.7}.input--small{padding:.375rem .625rem;font-size:var(--snice-font-size-sm)}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md)}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg)}.input--outlined{background:var(--snice-color-background-input,rgb(248 247 245));border:1px solid var(--snice-color-border)}.input--filled{background:var(--snice-color-background-secondary);border:1px solid transparent;border-bottom-color:var(--snice-color-border);border-radius:var(--snice-border-radius-md) var(--snice-border-radius-md) 0 0}.input--filled:focus{background:var(--snice-color-background-hover);border-bottom-color:var(--snice-color-primary)}.input--underlined{background:0 0;border:none;border-bottom:1px solid var(--snice-color-border);border-radius:0;padding-left:0;padding-right:0}.input--underlined:focus{border-bottom-color:var(--snice-color-primary);box-shadow:none}.input--invalid{border-color:var(--snice-color-danger)}.input--invalid:focus{border-color:var(--snice-color-danger);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-color-danger-alpha,hsl(var(--snice-color-red-500) / .4)),var(--snice-shadow-sm)}.input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}.input::-webkit-calendar-picker-indicator:hover{opacity:1}.input--with-prefix-icon{padding-left:2.25rem}.input--clearable,.input--with-suffix-icon{padding-right:2.25rem}.input--with-suffix-icon.input--clearable{padding-right:3.75rem}.label{display:block;margin-bottom:.375rem;font-size:var(--snice-font-size-sm);font-weight:500;color:var(--snice-color-text)}.label--required::after{content:' *';color:var(--snice-color-danger)}.error-text,.helper-text{display:block;margin-top:.25rem;font-size:var(--snice-font-size-xs);min-height:1.125rem}.helper-text{color:var(--snice-color-text-secondary)}.error-text{color:var(--snice-color-danger)}.icon-slot{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none;opacity:.7}.icon-slot:empty{display:none}.icon-slot--prefix{left:.625rem}.icon-slot--suffix{right:.625rem}.icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.25rem;line-height:1}.icon-slot ::slotted(svg){width:1.25rem;height:1.25rem}.icon-slot ::slotted(img){width:1.25rem;height:1.25rem;object-fit:contain}.clear-button{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease;opacity:0;visibility:hidden}.clear-button:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input-container:hover .clear-button--visible,.input:focus~.clear-button--visible{opacity:1;visibility:visible}.clear-button--with-suffix{right:2rem}.password-toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease}.password-toggle:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button,.input[type=search]::-webkit-search-decoration,.input[type=search]::-webkit-search-results-button,.input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.input-container:focus-within{z-index:1}.input--loading{cursor:wait}.spinner{position:absolute;right:.75rem;width:1em;height:1em;pointer-events:none}.input--with-suffix-icon .spinner{right:2.5rem}.spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}";
+  var cssContent = ":host{display:inline-block;width:100%;max-width:100%;box-sizing:border-box;font-family:var(--snice-font-family);color-scheme:light dark}.input-wrapper{position:relative;width:100%;max-width:100%;height:100%;box-sizing:border-box}:host([align]) .input-wrapper{display:flex;flex-direction:column}:host([align=top]) .input-wrapper{justify-content:flex-start}:host([align=center]) .input-wrapper{justify-content:center}:host([align=bottom]) .input-wrapper{justify-content:flex-end}.input-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;box-sizing:border-box;transition:all var(--snice-transition-fast) ease}:host([stretch]) .input-wrapper{display:flex;flex-direction:column}:host([stretch]) .input-container{flex:1}:host([stretch]) .input{height:100%}.input{flex:1;min-width:0;box-sizing:border-box;font-family:inherit;font-size:var(--snice-font-size-md);background:var(--snice-color-background-input,rgb(248 247 245));color:var(--snice-color-text);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);box-shadow:var(--snice-shadow-inset-sm);transition:all var(--snice-transition-fast) ease;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus{border-color:var(--snice-color-primary);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-focus-ring-color),var(--snice-shadow-sm)}.input:disabled{background:var(--snice-color-background-secondary);color:var(--snice-color-text-secondary);cursor:not-allowed;opacity:.6}.input::placeholder{color:var(--snice-color-text-secondary);opacity:.7}.input--small{padding:.375rem .625rem;font-size:var(--snice-font-size-sm)}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md)}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg)}.input--outlined{background:var(--snice-color-background-input,rgb(248 247 245));border:1px solid var(--snice-color-border)}.input--filled{background:var(--snice-color-background-secondary);border:1px solid transparent;border-bottom-color:var(--snice-color-border);border-radius:var(--snice-border-radius-md) var(--snice-border-radius-md) 0 0}.input--filled:focus{background:var(--snice-color-background-hover);border-bottom-color:var(--snice-color-primary)}.input--underlined{background:0 0;border:none;border-bottom:1px solid var(--snice-color-border);border-radius:0;padding-left:0;padding-right:0}.input--underlined:focus{border-bottom-color:var(--snice-color-primary);box-shadow:none}.input--invalid{border-color:var(--snice-color-danger)}.input--invalid:focus{border-color:var(--snice-color-danger);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-color-danger-alpha,hsl(var(--snice-color-red-500) / .4)),var(--snice-shadow-sm)}.input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}.input::-webkit-calendar-picker-indicator:hover{opacity:1}.input--with-prefix-icon{padding-left:2.25rem}.input--clearable,.input--with-suffix-icon{padding-right:2.25rem}.input--with-suffix-icon.input--clearable{padding-right:3.75rem}.label{display:block;margin-bottom:.375rem;font-size:var(--snice-font-size-sm);font-weight:500;color:var(--snice-color-text);text-align:left}:host([label-align=center]) .label{text-align:center}:host([label-align=right]) .label{text-align:right}.label--required::after{content:' *';color:var(--snice-color-danger)}.error-text,.helper-text{display:block;margin-top:.25rem;font-size:var(--snice-font-size-xs);min-height:1.125rem}.helper-text{color:var(--snice-color-text-secondary)}.error-text{color:var(--snice-color-danger)}.icon-slot{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none;opacity:.7}.icon-slot:empty{display:none}.icon-slot--prefix{left:.625rem}.icon-slot--suffix{right:.625rem}.icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.25rem;line-height:1}.icon-slot ::slotted(svg){width:1.25rem;height:1.25rem}.icon-slot ::slotted(img){width:1.25rem;height:1.25rem;object-fit:contain}.clear-button{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease;opacity:0;visibility:hidden}.clear-button:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input-container:hover .clear-button--visible,.input:focus~.clear-button--visible{opacity:1;visibility:visible}.clear-button--with-suffix{right:2rem}.password-toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease}.password-toggle:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button,.input[type=search]::-webkit-search-decoration,.input[type=search]::-webkit-search-results-button,.input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.input-container:focus-within{z-index:1}.input--loading{cursor:wait}.spinner{position:absolute;right:.75rem;width:1em;height:1em;pointer-events:none}.input--with-suffix-icon .spinner{right:2.5rem}.spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}";
 
   let SniceInput = (() => {
       let _classDecorators = [snice.element('snice-input', { formAssociated: true })];
@@ -190,6 +190,15 @@ var SniceInput = (function (exports, snice) {
       let _name_decorators;
       let _name_initializers = [];
       let _name_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _labelAlign_decorators;
+      let _labelAlign_initializers = [];
+      let _labelAlign_extraInitializers = [];
+      let _stretch_decorators;
+      let _stretch_initializers = [];
+      let _stretch_extraInitializers = [];
       let _prefixIcon_decorators;
       let _prefixIcon_initializers = [];
       let _prefixIcon_extraInitializers = [];
@@ -254,6 +263,9 @@ var SniceInput = (function (exports, snice) {
               _minlength_decorators = [snice.property({ type: Number, })];
               _autocomplete_decorators = [snice.property({})];
               _name_decorators = [snice.property({})];
+              _align_decorators = [snice.property({})];
+              _labelAlign_decorators = [snice.property({ attribute: 'label-align', })];
+              _stretch_decorators = [snice.property({ type: Boolean, })];
               _prefixIcon_decorators = [snice.property({ attribute: 'prefix-icon', })];
               _suffixIcon_decorators = [snice.property({ attribute: 'suffix-icon', })];
               _input_decorators = [snice.query('.input')];
@@ -326,6 +338,9 @@ var SniceInput = (function (exports, snice) {
               __esDecorate(null, null, _minlength_decorators, { kind: "field", name: "minlength", static: false, private: false, access: { has: obj => "minlength" in obj, get: obj => obj.minlength, set: (obj, value) => { obj.minlength = value; } }, metadata: _metadata }, _minlength_initializers, _minlength_extraInitializers);
               __esDecorate(null, null, _autocomplete_decorators, { kind: "field", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
               __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _labelAlign_decorators, { kind: "field", name: "labelAlign", static: false, private: false, access: { has: obj => "labelAlign" in obj, get: obj => obj.labelAlign, set: (obj, value) => { obj.labelAlign = value; } }, metadata: _metadata }, _labelAlign_initializers, _labelAlign_extraInitializers);
+              __esDecorate(null, null, _stretch_decorators, { kind: "field", name: "stretch", static: false, private: false, access: { has: obj => "stretch" in obj, get: obj => obj.stretch, set: (obj, value) => { obj.stretch = value; } }, metadata: _metadata }, _stretch_initializers, _stretch_extraInitializers);
               __esDecorate(null, null, _prefixIcon_decorators, { kind: "field", name: "prefixIcon", static: false, private: false, access: { has: obj => "prefixIcon" in obj, get: obj => obj.prefixIcon, set: (obj, value) => { obj.prefixIcon = value; } }, metadata: _metadata }, _prefixIcon_initializers, _prefixIcon_extraInitializers);
               __esDecorate(null, null, _suffixIcon_decorators, { kind: "field", name: "suffixIcon", static: false, private: false, access: { has: obj => "suffixIcon" in obj, get: obj => obj.suffixIcon, set: (obj, value) => { obj.suffixIcon = value; } }, metadata: _metadata }, _suffixIcon_initializers, _suffixIcon_extraInitializers);
               __esDecorate(null, null, _input_decorators, { kind: "field", name: "input", static: false, private: false, access: { has: obj => "input" in obj, get: obj => obj.input, set: (obj, value) => { obj.input = value; } }, metadata: _metadata }, _input_initializers, _input_extraInitializers);
@@ -362,7 +377,10 @@ var SniceInput = (function (exports, snice) {
               this.minlength = (__runInitializers(this, _maxlength_extraInitializers), __runInitializers(this, _minlength_initializers, -1));
               this.autocomplete = (__runInitializers(this, _minlength_extraInitializers), __runInitializers(this, _autocomplete_initializers, ''));
               this.name = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _name_initializers, ''));
-              this.prefixIcon = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _prefixIcon_initializers, ''));
+              this.align = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _align_initializers, ''));
+              this.labelAlign = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _labelAlign_initializers, 'left'));
+              this.stretch = (__runInitializers(this, _labelAlign_extraInitializers), __runInitializers(this, _stretch_initializers, false));
+              this.prefixIcon = (__runInitializers(this, _stretch_extraInitializers), __runInitializers(this, _prefixIcon_initializers, ''));
               this.suffixIcon = (__runInitializers(this, _prefixIcon_extraInitializers), __runInitializers(this, _suffixIcon_initializers, ''));
               this.input = (__runInitializers(this, _suffixIcon_extraInitializers), __runInitializers(this, _input_initializers, void 0));
               this.clearButton = (__runInitializers(this, _input_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));