snice 4.24.0 → 4.25.0

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

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */
@@ -75,14 +75,18 @@ var SniceInput = (function (exports, snice) {
    * - URLs (http://, https://, /, ./, ../, data:) -> <img>
    * - Image extensions (svg, png, jpg, jpeg, jfif, pjp, gif, webp, avif, jxl,
    *   ico, cur, bmp, tif, tiff, heic, heif, apng) -> <img>
-   * - Everything else -> span with text (emoji, font ligatures)
+   * - Everything else -> span with text content (emoji, plain text)
+   *
+   * ⚠️ "home" or "settings" renders as PLAIN TEXT, not a Material icon.
+   * For Material Symbols, use the icon slot instead:
+   * <span slot="icon" class="material-symbols-outlined">home</span>
    *
    * Examples:
    * - "/path/icon.svg" -> <img>
    * - "icon.png" -> <img>
    * - "img://filename" -> <img> (forced)
-   * - "home" -> <span> text (Material Symbols ligature)
    * - "🏠" -> <span> text (emoji)
+   * - "home" -> <span> text (plain text, NOT a Material icon)
    * - "text:///not/a/path" -> <span> text (forced)
    */
   function renderIcon(icon, className = 'icon') {
@@ -112,7 +116,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%;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);min-height:2rem}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md);min-height:2.5rem}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg);min-height:3rem}.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:.25rem;font-size:var(--snice-font-size-sm);font-weight:500;line-height:var(--snice-line-height-normal, 1.5);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)}.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);min-height:2rem}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md);min-height:2.5rem}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg);min-height:3rem}.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.5rem}.input--clearable,.input--with-suffix-icon{padding-right:2.5rem}.input--with-suffix-icon.input--clearable{padding-right:4rem}.label{display:block;margin-bottom:.25rem;font-size:var(--snice-font-size-sm);font-weight:500;line-height:var(--snice-line-height-normal, 1.5);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)}.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.5rem;height:1.5rem;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.5rem;height:1.5rem;font-size:1.25rem;line-height:1;color:var(--snice-color-text-secondary);pointer-events:none}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1}.icon-slot ::slotted(svg){width:1.5rem;height:1.5rem}.icon-slot ::slotted(img){width:1.5rem;height:1.5rem;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 })];