snice 2.1.5 → 2.2.0

package/components/input/snice-input.css

@@ -1,257 +0,0 @@
-: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

@@ -1,442 +0,0 @@
-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);
-  }
-}