snice 1.14.3 → 2.1.0

package/components/input/snice-input.css

@@ -0,0 +1,257 @@
+:host {
+  display: inline-block;
+  width: 100%;
+  font-family: var(--snice-font-family);
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  transition: all var(--snice-transition-fast) ease;
+}
+
+/* Base Input Styles */
+.input {
+  flex: 1;
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--snice-font-size-md);
+  background: var(--snice-color-background);
+  color: var(--snice-color-text);
+  border: 1px solid var(--snice-color-border);
+  border-radius: var(--snice-border-radius-md);
+  transition: all var(--snice-transition-fast) ease;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.input:focus {
+  border-color: var(--snice-color-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.input:disabled {
+  background: var(--snice-color-background-secondary);
+  color: var(--snice-color-text-secondary);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.input::placeholder {
+  color: var(--snice-color-text-secondary);
+  opacity: 0.7;
+}
+
+/* Size Variants */
+.input--small {
+  padding: 0.375rem 0.625rem; /* 6px 10px */
+  font-size: var(--snice-font-size-sm);
+}
+
+.input--medium {
+  padding: 0.5rem 0.75rem; /* 8px 12px */
+  font-size: var(--snice-font-size-md);
+}
+
+.input--large {
+  padding: 0.625rem 0.875rem; /* 10px 14px */
+  font-size: var(--snice-font-size-lg);
+}
+
+/* Style Variants */
+.input--outlined {
+  background: var(--snice-color-background);
+  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: transparent;
+  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;
+}
+
+/* Invalid State */
+.input--invalid {
+  border-color: var(--snice-color-danger);
+}
+
+.input--invalid:focus {
+  border-color: var(--snice-color-danger);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+/* With Icons */
+.input--with-prefix-icon {
+  padding-left: 2.25rem; /* 36px */
+}
+
+.input--with-suffix-icon,
+.input--clearable {
+  padding-right: 2.25rem; /* 36px */
+}
+
+.input--with-suffix-icon.input--clearable {
+  padding-right: 3.75rem; /* 60px */
+}
+
+/* Label */
+.label {
+  display: block;
+  margin-bottom: 0.375rem; /* 6px */
+  font-size: var(--snice-font-size-sm);
+  font-weight: 500;
+  color: var(--snice-color-text);
+}
+
+.label--required::after {
+  content: ' *';
+  color: var(--snice-color-danger);
+}
+
+/* Helper and Error Text */
+.helper-text,
+.error-text {
+  display: block;
+  margin-top: 0.25rem; /* 4px */
+  font-size: var(--snice-font-size-xs);
+  min-height: 1.125rem; /* 18px */
+}
+
+.helper-text {
+  color: var(--snice-color-text-secondary);
+}
+
+.error-text {
+  color: var(--snice-color-danger);
+}
+
+/* Icons */
+.icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+  color: var(--snice-color-text-secondary);
+  pointer-events: none;
+}
+
+.icon--prefix {
+  left: 0.625rem; /* 10px */
+}
+
+.icon--suffix {
+  right: 0.625rem; /* 10px */
+}
+
+/* Clear Button */
+.clear-button {
+  position: absolute;
+  right: 0.5rem; /* 8px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+  padding: 0.25rem; /* 4px */
+  background: transparent;
+  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; /* 32px */
+}
+
+/* Password Toggle */
+.password-toggle {
+  position: absolute;
+  right: 0.5rem; /* 8px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+  padding: 0.25rem; /* 4px */
+  background: transparent;
+  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);
+}
+
+/* Number Input Arrows - Hide native */
+.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;
+}
+
+/* Search Input - Hide native clear */
+.input[type="search"]::-webkit-search-decoration,
+.input[type="search"]::-webkit-search-cancel-button,
+.input[type="search"]::-webkit-search-results-button,
+.input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+/* Focus Within for Container */
+.input-container:focus-within {
+  z-index: 1;
+}

package/components/input/snice-input.ts

@@ -0,0 +1,442 @@
+import { element, property, query, on, watch, dispatch, ready } from 'snice';
+import css from './snice-input.css?inline';
+import type { InputType, InputSize, InputVariant, SniceInputElement } from './snice-input.types';
+
+@element('snice-input')
+export class SniceInput extends HTMLElement implements SniceInputElement {
+  @property({ reflect: true })
+  type: InputType = 'text';
+
+  @property({ reflect: true })
+  size: InputSize = 'medium';
+
+  @property({ reflect: true })
+  variant: InputVariant = 'outlined';
+
+  @property({ reflect: true })
+  value = '';
+
+  @property({ reflect: true })
+  placeholder = '';
+
+  @property({ reflect: true })
+  label = '';
+
+  @property({ attribute: 'helper-text', reflect: true })
+  helperText = '';
+
+  @property({ attribute: 'error-text', reflect: true })
+  errorText = '';
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
+  @property({ type: Boolean, reflect: true })
+  required = false;
+
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  @property({ type: Boolean, reflect: true })
+  clearable = false;
+
+  @property({ type: Boolean, reflect: true })
+  password = false;
+
+  @property({ reflect: true })
+  min = '';
+
+  @property({ reflect: true })
+  max = '';
+
+  @property({ reflect: true })
+  step = '';
+
+  @property({ reflect: true })
+  pattern = '';
+
+  @property({ type: Number, reflect: true })
+  maxlength = -1;
+
+  @property({ type: Number, reflect: true })
+  minlength = -1;
+
+  @property({ reflect: true })
+  autocomplete = '';
+
+  @property({ reflect: true })
+  name = '';
+
+  @property({ attribute: 'prefix-icon', reflect: true })
+  prefixIcon = '';
+
+  @property({ attribute: 'suffix-icon', reflect: true })
+  suffixIcon = '';
+
+  @query('.input')
+  input?: HTMLInputElement;
+
+  @query('.clear-button')
+  clearButton?: HTMLButtonElement;
+
+  @query('.password-toggle')
+  passwordToggle?: HTMLButtonElement;
+
+  private showPassword = false;
+
+  html() {
+    return /*html*/`
+      <div class="input-wrapper">
+        ${this.label ? /*html*/`
+          <label class="label ${this.required ? 'label--required' : ''}">
+            ${this.label}
+          </label>
+        ` : ''}
+        
+        <div class="input-container">
+          ${this.prefixIcon ? /*html*/`
+            <span class="icon icon--prefix">${this.prefixIcon}</span>
+          ` : ''}
+          
+          <input
+            class="input 
+              input--${this.size} 
+              input--${this.variant}
+              ${this.invalid ? 'input--invalid' : ''}
+              ${this.prefixIcon ? 'input--with-prefix-icon' : ''}
+              ${this.suffixIcon || (this.type === 'password' && this.password) ? 'input--with-suffix-icon' : ''}
+              ${this.clearable ? 'input--clearable' : ''}"
+            type="${this.type}"
+            value="${this.value}"
+            placeholder="${this.placeholder}"
+            ${this.disabled ? 'disabled' : ''}
+            ${this.readonly ? 'readonly' : ''}
+            ${this.required ? 'required' : ''}
+            ${this.min ? `min="${this.min}"` : ''}
+            ${this.max ? `max="${this.max}"` : ''}
+            ${this.step ? `step="${this.step}"` : ''}
+            ${this.pattern ? `pattern="${this.pattern}"` : ''}
+            ${this.maxlength > 0 ? `maxlength="${this.maxlength}"` : ''}
+            ${this.minlength > 0 ? `minlength="${this.minlength}"` : ''}
+            ${this.autocomplete ? `autocomplete="${this.autocomplete}"` : ''}
+            ${this.name ? `name="${this.name}"` : ''}
+            part="input"
+          />
+          
+          <button
+            class="clear-button ${this.suffixIcon || (this.type === 'password' && this.password) ? 'clear-button--with-suffix' : ''}"
+            type="button"
+            aria-label="Clear"
+            tabindex="-1"
+            part="clear"
+            style="display: none;"
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
+            </svg>
+          </button>
+          
+          ${this.type === 'password' && this.password ? /*html*/`
+            <button
+              class="password-toggle"
+              type="button"
+              aria-label="Show password"
+              tabindex="-1"
+              part="password-toggle"
+            >
+              <svg viewBox="0 0 24 24" width="18" height="18" class="password-icon password-icon--hidden">
+                <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" fill="currentColor"/>
+              </svg>
+              <svg viewBox="0 0 24 24" width="18" height="18" class="password-icon password-icon--visible" style="display: none;">
+                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="currentColor"/>
+              </svg>
+            </button>
+          ` : this.suffixIcon ? /*html*/`
+            <span class="icon icon--suffix">${this.suffixIcon}</span>
+          ` : ''}
+        </div>
+        
+        ${this.errorText ? /*html*/`
+          <span class="error-text" part="error-text">${this.errorText}</span>
+        ` : this.helperText ? /*html*/`
+          <span class="helper-text" part="helper-text">${this.helperText}</span>
+        ` : /*html*/`
+          <span class="helper-text" part="helper-text">&nbsp;</span>
+        `}
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    // Set initial clear button visibility
+    if (this.clearButton && this.clearable) {
+      const shouldShow = this.value && !this.disabled && !this.readonly;
+      this.clearButton.style.display = shouldShow ? '' : 'none';
+      this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+    }
+    
+    // Set initial invalid state
+    if (this.input && this.invalid) {
+      this.input.setAttribute('aria-invalid', 'true');
+      this.input.classList.add('input--invalid');
+    }
+    
+    // Set initial input properties that may not be properly set via attributes
+    if (this.input) {
+      // Number input constraints
+      if (this.type === 'number') {
+        if (this.min) this.input.min = this.min;
+        if (this.max) this.input.max = this.max;
+        if (this.step) this.input.step = this.step;
+      }
+      
+      // Text constraints
+      if (this.maxlength > 0) this.input.maxLength = this.maxlength;
+      if (this.minlength > 0) this.input.minLength = this.minlength;
+      
+      // Other properties
+      if (this.pattern) this.input.pattern = this.pattern;
+      if (this.placeholder) this.input.placeholder = this.placeholder;
+      if (this.value) this.input.value = this.value;
+      this.input.disabled = this.disabled;
+      this.input.readOnly = this.readonly;
+      this.input.required = this.required;
+    }
+  }
+
+  @on('input', '.input')
+  handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.value = target.value;
+    this.dispatchInputEvent();
+  }
+
+  @on('change', '.input')
+  handleChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.value = target.value;
+    this.dispatchChangeEvent();
+  }
+
+  @on('focus', '.input')
+  handleFocus() {
+    this.dispatchFocusEvent();
+  }
+
+  @on('blur', '.input')
+  handleBlur() {
+    this.dispatchBlurEvent();
+  }
+
+  @on('click', '.clear-button')
+  handleClear() {
+    this.clear();
+  }
+
+  @on('click', '.password-toggle')
+  handlePasswordToggle() {
+    this.showPassword = !this.showPassword;
+    if (this.input) {
+      this.input.type = this.showPassword ? 'text' : 'password';
+    }
+    if (this.passwordToggle) {
+      const hiddenIcon = this.passwordToggle.querySelector('.password-icon--hidden') as HTMLElement;
+      const visibleIcon = this.passwordToggle.querySelector('.password-icon--visible') as HTMLElement;
+      if (hiddenIcon && visibleIcon) {
+        hiddenIcon.style.display = this.showPassword ? 'none' : '';
+        visibleIcon.style.display = this.showPassword ? '' : 'none';
+        this.passwordToggle.setAttribute('aria-label', this.showPassword ? 'Hide password' : 'Show password');
+      }
+    }
+  }
+
+  @watch('value')
+  handleValueChange() {
+    if (this.input) {
+      this.input.value = this.value;
+    }
+    // Show/hide clear button based on value
+    if (this.clearButton && this.clearable) {
+      const shouldShow = this.value && !this.disabled && !this.readonly;
+      this.clearButton.style.display = shouldShow ? '' : 'none';
+      this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+    }
+  }
+
+  @watch('invalid')
+  handleInvalidChange() {
+    if (this.input) {
+      this.input.setAttribute('aria-invalid', String(this.invalid));
+      if (this.invalid) {
+        this.input.classList.add('input--invalid');
+      } else {
+        this.input.classList.remove('input--invalid');
+      }
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.input) {
+      this.input.disabled = this.disabled;
+    }
+    // Update clear button visibility
+    if (this.clearButton && this.clearable) {
+      const shouldShow = this.value && !this.disabled && !this.readonly;
+      this.clearButton.style.display = shouldShow ? '' : 'none';
+      this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+    }
+  }
+
+  @watch('readonly') 
+  handleReadonlyChange() {
+    if (this.input) {
+      this.input.readOnly = this.readonly;
+    }
+    // Update clear button visibility
+    if (this.clearButton && this.clearable) {
+      const shouldShow = this.value && !this.disabled && !this.readonly;
+      this.clearButton.style.display = shouldShow ? '' : 'none';
+      this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+    }
+  }
+
+  @watch('placeholder')
+  handlePlaceholderChange() {
+    if (this.input) {
+      this.input.placeholder = this.placeholder;
+    }
+  }
+
+  @watch('min')
+  handleMinChange() {
+    if (this.input && this.type === 'number') {
+      this.input.min = this.min;
+    }
+  }
+
+  @watch('max')
+  handleMaxChange() {
+    if (this.input && this.type === 'number') {
+      this.input.max = this.max;
+    }
+  }
+
+  @watch('step')
+  handleStepChange() {
+    if (this.input && this.type === 'number') {
+      this.input.step = this.step;
+    }
+  }
+
+  @watch('maxlength')
+  handleMaxLengthChange() {
+    if (this.input && this.maxlength > 0) {
+      this.input.maxLength = this.maxlength;
+    }
+  }
+
+  @watch('minlength')
+  handleMinLengthChange() {
+    if (this.input && this.minlength > 0) {
+      this.input.minLength = this.minlength;
+    }
+  }
+
+  @watch('pattern')
+  handlePatternChange() {
+    if (this.input) {
+      this.input.pattern = this.pattern;
+    }
+  }
+
+  @watch('type')
+  handleTypeChange() {
+    if (this.input && this.type !== 'password') {
+      // Don't change type for password fields (handled by toggle)
+      this.input.type = this.type;
+    }
+  }
+
+  @watch('label')
+  handleLabelChange() {
+    const labelEl = this.shadowRoot?.querySelector('.label');
+    if (labelEl) {
+      labelEl.textContent = this.label;
+      // Show/hide the label wrapper
+      const wrapper = labelEl.parentElement;
+      if (wrapper) {
+        wrapper.style.display = this.label ? '' : 'none';
+      }
+    }
+  }
+
+  @dispatch('@snice/input-input', { bubbles: true, composed: true })
+  private dispatchInputEvent() {
+    return { value: this.value, input: this };
+  }
+
+  @dispatch('@snice/input-change', { bubbles: true, composed: true })
+  private dispatchChangeEvent() {
+    return { value: this.value, input: this };
+  }
+
+  @dispatch('@snice/input-focus', { bubbles: true, composed: true })
+  private dispatchFocusEvent() {
+    return { input: this };
+  }
+
+  @dispatch('@snice/input-blur', { bubbles: true, composed: true })
+  private dispatchBlurEvent() {
+    return { input: this };
+  }
+
+  @dispatch('@snice/input-clear', { bubbles: true, composed: true })
+  private dispatchClearEvent() {
+    return { input: this };
+  }
+
+  // Public API
+  focus() {
+    this.input?.focus();
+  }
+
+  blur() {
+    this.input?.blur();
+  }
+
+  select() {
+    this.input?.select();
+  }
+
+  clear() {
+    this.value = '';
+    if (this.input) {
+      this.input.value = '';
+    }
+    this.dispatchClearEvent();
+    this.dispatchInputEvent();
+    this.dispatchChangeEvent();
+    this.focus();
+  }
+
+  checkValidity() {
+    return this.input?.checkValidity() ?? true;
+  }
+
+  reportValidity() {
+    return this.input?.reportValidity() ?? true;
+  }
+
+  setCustomValidity(message: string) {
+    this.input?.setCustomValidity(message);
+  }
+}