@krumio/trailhand-ui 1.8.0 → 1.9.0

package/dist/components/text-input/text-input.js

@@ -0,0 +1,216 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+export class TextInput extends LitElement {
+    constructor() {
+        super();
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.size = 'medium';
+        this.label = '';
+        this.required = false;
+        this.invalid = false;
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Check if we're in a disabled fieldset on initial connection
+        const fieldset = this.closest('fieldset');
+        if (fieldset?.disabled) {
+            this.disabled = true;
+        }
+    }
+    emitChangeEvent() {
+        // emit native change event for form integration
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        // emit a custom event with the current value of the input
+        this.dispatchEvent(new CustomEvent('text-input-change', {
+            detail: { value: this.value, name: this.name },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        if (this.value) {
+            this.internals.setFormValue(this.value);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+        this.emitChangeEvent();
+    }
+    firstUpdated() {
+        this._input = this.shadowRoot.querySelector('input');
+        this._input.addEventListener('input', () => {
+            this._updateValidity();
+        });
+    }
+    _updateValidity() {
+        const isValid = this._input.validity.valid;
+        this.invalid = !isValid;
+        if (isValid) {
+            this.internals.setValidity({});
+        }
+        else {
+            this.internals.setValidity(this._input.validity, this._input.validationMessage, this._input);
+        }
+    }
+    formResetCallback() {
+        this.value = '';
+        this.internals.setFormValue(this.value);
+    }
+    formDisableCallback(disabled) {
+        this.disabled = disabled;
+    }
+    formAssociatedCallback(form) {
+        form?.addEventListener('submit', () => {
+            this._updateValidity();
+        });
+    }
+    render() {
+        return html `
+      <div class="wrapper">
+        <label for=${this.name} class="input-label"
+          >${this.label}
+          <span class="required-indicator"
+            >${this.required ? '*' : ''}</span
+          ></label
+        >
+        <div class="input-wrapper">
+          <input
+            type="text"
+            name=${this.name}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            @input=${this.handleInput}
+          />
+          <span class="icon"><slot name="icon"></slot></span>
+        </div>
+      </div>
+    `;
+    }
+}
+TextInput.formAssociated = true;
+TextInput.styles = css `
+    :host {
+      display: inline-block;
+      font-family: 'Montserrat', system-ui, sans-serif;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    label {
+      font-size: 11px;
+      color: var(--th-input-label, #000000);
+    }
+
+    label .required-indicator {
+      color: var(--th-color-red, #bf1e1e);
+    }
+
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+    }
+
+    input {
+      width: 100%;
+      padding: 0.75em 3em 0.75em 16px;
+      border-radius: 8px;
+      border: 1px solid var(--th-input-border, #d7d7d7);
+      outline: none;
+      background: transparent;
+      transition: 0.2s ease;
+      font-size: 14px;
+      color: var(--th-input-text, #333);
+    }
+
+    input:disabled {
+      background-color: var(--th-input-bg, transparent);
+    }
+
+    input::placeholder {
+      color: var(--th-input-placeholder, #d7d7d7);
+    }
+
+    input:focus {
+      border-color: var(--th-input-focus-border, #005cb9);
+    }
+
+    .icon {
+      position: absolute;
+      right: 1em;
+      pointer-events: none;
+      color: var(--th-input-icon-color, #d7d7d7);
+    }
+
+    /* Sizes */
+    :host([size='small']) .input-wrapper {
+      font-size: 12px;
+    }
+    :host([size='small']) input {
+      font-size: 12px;
+    }
+    :host([size='large']) .input-wrapper {
+      font-size: 16px;
+    }
+    :host([size='large']) input {
+      font-size: 16px;
+    }
+
+    /* Disabled */
+    input:disabled {
+      cursor: not-allowed;
+    }
+    :host([disabled]) label {
+      color: var(--th-input-label-disabled, #999);
+    }
+
+    /* Invalid */
+    :host([invalid]) input {
+      border-color: var(--th-input-border-invalid, #9f3a3a);
+    }
+  `;
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TextInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TextInput.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TextInput.prototype, "invalid", void 0);
+customElements.define('trailhand-text-input', TextInput);
+//# sourceMappingURL=text-input.js.map

package/dist/components/text-input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/components/text-input/text-input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAa7C,MAAM,OAAO,SAAU,SAAQ,UAAU;IA8BvC;QACE,KAAK,EAAE,CAAC;QA3BV,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,EAAE,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAiC,QAAQ,CAAC;QAG9C,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAOd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAyFD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,8DAA8D;QAC9D,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,QAAQ,EAAE,QAAQ,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,gDAAgD;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC3E,0DAA0D;QAC1D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACnC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;YAC9C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QAEvD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,CAAC,OAAO,CAAC;QACxB,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,IAAI,CAAC,MAAM,CAAC,QAAQ,EACpB,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAC7B,IAAI,CAAC,MAAM,CACZ,CAAC;QACJ,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED,mBAAmB,CAAC,QAAiB;QACnC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,sBAAsB,CAAC,IAA4B;QACjD,IAAI,EAAE,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACpC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,IAAI;aACjB,IAAI,CAAC,KAAK;;eAER,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;mBAMpB,IAAI,CAAC,IAAI;qBACP,IAAI,CAAC,KAAK;0BACL,IAAI,CAAC,WAAW;wBAClB,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;qBAChB,IAAI,CAAC,WAAW;;;;;KAKhC,CAAC;IACJ,CAAC;;AAvNM,wBAAc,GAAG,IAAI,AAAP,CAAQ;AAkCtB,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFlB,AArFY,CAqFX;AApHF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACI;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAkMlB,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC"}

package/dist/components/th-tag/th-tag.js

@@ -154,28 +154,28 @@ ThTag.styles = css `
 
     /* Color variants - soft pastel backgrounds with colored text */
     .tag--default {
-      background-color: var(--color-background-hover, var(--color-grey-200, #EBEBEB));
-      color: var(--color-text-secondary, var(--color-grey-600, #636363));
+      background-color: var(--th-color-background-hover, var(--th-color-grey-200, #EBEBEB));
+      color: var(--th-color-text-secondary, var(--th-color-grey-600, #636363));
     }
 
     .tag--info {
-      background-color: var(--color-info-fill, var(--color-light-blue, #e6f3ff));
-      color: var(--color-info-outline, var(--color-blue, #0085ff));
+      background-color: var(--th-color-info-fill, var(--th-color-light-blue, #e6f3ff));
+      color: var(--th-color-info-outline, var(--th-color-blue, #0085ff));
     }
 
     .tag--success {
-      background-color: var(--color-success-fill, var(--color-light-green, #d2fdd2));
-      color: var(--color-success-outline, var(--color-green, #097409));
+      background-color: var(--th-color-success-fill, var(--th-color-light-green, #d2fdd2));
+      color: var(--th-color-success-outline, var(--th-color-green, #097409));
     }
 
     .tag--warning {
-      background-color: var(--color-warning-fill, var(--color-light-yellow, #fffeb4));
-      color: var(--color-warning-outline, var(--color-dark-yellow, #a89939));
+      background-color: var(--th-color-warning-fill, var(--th-color-light-yellow, #fffeb4));
+      color: var(--th-color-warning-outline, var(--th-color-dark-yellow, #a89939));
     }
 
     .tag--error {
-      background-color: var(--color-error-fill, var(--color-light-red, #fee2e2));
-      color: var(--color-error-outline, var(--color-red, #9F3A3A));
+      background-color: var(--th-color-error-fill, var(--th-color-light-red, #fee2e2));
+      color: var(--th-color-error-outline, var(--th-color-red, #9F3A3A));
     }
 
     /* Outlined variants */
@@ -186,27 +186,27 @@ ThTag.styles = css `
 
     .tag--outlined.tag--default {
       background-color: transparent;
-      color: var(--color-text-secondary, var(--color-grey-600, #4b5563));
+      color: var(--th-color-text-secondary, var(--th-color-grey-600, #4b5563));
     }
 
     .tag--outlined.tag--info {
       background-color: transparent;
-      color: var(--color-info-outline, var(--color-blue, #0085ff));
+      color: var(--th-color-info-outline, var(--th-color-blue, #0085ff));
     }
 
     .tag--outlined.tag--success {
       background-color: transparent;
-      color: var(--color-success-outline, var(--color-green, #097409));
+      color: var(--th-color-success-outline, var(--th-color-green, #097409));
     }
 
     .tag--outlined.tag--warning {
       background-color: transparent;
-      color: var(--color-warning-outline, var(--color-dark-yellow, #a89939));
+      color: var(--th-color-warning-outline, var(--th-color-dark-yellow, #a89939));
     }
 
     .tag--outlined.tag--error {
       background-color: transparent;
-      color: var(--color-error-outline, var(--color-red, #9F3A3A));
+      color: var(--th-color-error-outline, var(--th-color-red, #9F3A3A));
     }
 
     /* Icon styling */

package/dist/components/toggle-switch/toggle-switch.js

@@ -127,7 +127,7 @@ ToggleSwitch.styles = css `
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: var(--color-grey-500, #8D8D8D);
+      background-color: var(--th-color-grey-500, #8D8D8D);
       transition: 0.3s;
       border-radius: 24px;
     }
@@ -139,13 +139,13 @@ ToggleSwitch.styles = css `
       width: 18px;
       left: 3px;
       bottom: 3px;
-      background-color: var(--color-white, #FFFFFF);
+      background-color: var(--th-color-white, #FFFFFF);
       transition: 0.3s;
       border-radius: 50%;
     }
 
     input:checked + .slider {
-      background-color: var(--color-primary, #3d98d3);
+      background-color: var(--th-color-primary, #3d98d3);
     }
 
     input:checked + .slider:before {

package/dist/styles/colors.css

@@ -3,160 +3,217 @@
  * Based on Figma Design System Color Palette
  *
  * Usage: Import this file in your application root, then use CSS variables
- * Example: color: var(--color-primary);
+ * Example: color: var(--th-color-primary);
  */
 
 :root {
   /* Color Palette */
   /* Primary Blues */
-  --color-primary: #0086FF;           /* Primary brand color */
-  --color-light-primary: #e6f3ff;     /* Light variant for backgrounds */
-  --color-dark-primary: #005cb9;      /* Dark variant for buttons/links */
+  --th-color-primary: #0086FF;           /* Primary brand color */
+  --th-color-light-primary: #e6f3ff;     /* Light variant for backgrounds */
+  --th-color-dark-primary: #005cb9;      /* Dark variant for buttons/links */
 
   /* Black + White */
-  --color-black: #000000;
-  --color-white: #ffffff;
+  --th-color-black: #000000;
+  --th-color-white: #ffffff;
 
   /* Greyscale */
-  --color-grey-100: #fafafa;
-  --color-grey-200: #ebebeb;
-  --color-grey-300: #d7d7d7;
-  --color-grey-400: #bababa;
-  --color-grey-500: #8d8d8d;
-  --color-grey-600: #636363;
-  --color-grey-700: #303131;
-  --color-grey-800: #212121;
+  --th-color-grey-100: #fafafa;
+  --th-color-grey-200: #ebebeb;
+  --th-color-grey-300: #d7d7d7;
+  --th-color-grey-400: #bababa;
+  --th-color-grey-500: #8d8d8d;
+  --th-color-grey-600: #636363;
+  --th-color-grey-700: #303131;
+  --th-color-grey-800: #212121;
 
   /* Status Colors */
-  --color-light-red: #fee2e2;
-  --color-red: #9f3a3a;
-  --color-dark-red: #731616;
+  --th-color-light-red: #fee2e2;
+  --th-color-red: #9f3a3a;
+  --th-color-dark-red: #731616;
 
-  --color-light-green: #d2fdd2;
-  --color-green: #30ac66;
-  --color-dark-green: #0f8240;
+  --th-color-light-green: #d2fdd2;
+  --th-color-green: #30ac66;
+  --th-color-dark-green: #0f8240;
 
-  --color-light-yellow: #fffeb4;
-  --color-yellow: #D3C255;
-  --color-dark-yellow: #a89939;
+  --th-color-light-yellow: #fffeb4;
+  --th-color-yellow: #D3C255;
+  --th-color-dark-yellow: #a89939;
 
-  --color-light-blue: #e6f3ff;
-  --color-blue: #0085ff;
-  --color-dark-blue: #005cb9;
+  --th-color-light-blue: #e6f3ff;
+  --th-color-blue: #0085ff;
+  --th-color-dark-blue: #005cb9;
 
   /* Semantic Aliases - for common use cases */
   /* Text */
-  --color-text-primary: var(--color-grey-800);
-  --color-text-secondary: var(--color-grey-600);
-  --color-text-muted: var(--color-grey-500);
-  --color-text-inverse: var(--color-white);
+  --th-color-text-primary: var(--th-color-grey-800);
+  --th-color-text-secondary: var(--th-color-grey-600);
+  --th-color-text-muted: var(--th-color-grey-500);
+  --th-color-text-inverse: var(--th-color-white);
 
   /* Backgrounds */
-  --color-background: var(--color-white);
-  --color-background-muted: var(--color-grey-100);
-  --color-background-hover: var(--color-grey-200);
+  --th-color-background: var(--th-color-white);
+  --th-color-background-muted: var(--th-color-grey-100);
+  --th-color-background-hover: var(--th-color-grey-200);
 
   /* Borders */
-  --color-border: var(--color-grey-300);
-  --color-border-light: var(--color-grey-200);
+  --th-color-border: var(--th-color-grey-300);
+  --th-color-border-light: var(--th-color-grey-200);
 
-  --color-error-outline: var(--color-red);
-  --color-success-outline: var(--color-green);
-  --color-warning-outline: var(--color-yellow);
-  --color-info-outline: var(--color-blue);
+  --th-color-error-outline: var(--th-color-red);
+  --th-color-success-outline: var(--th-color-green);
+  --th-color-warning-outline: var(--th-color-yellow);
+  --th-color-info-outline: var(--th-color-blue);
 
-  --color-error-fill: var(--color-light-red);
-  --color-success-fill: var(--color-light-green);
-  --color-warning-fill: var(--color-light-yellow);
-  --color-info-fill: var(--color-light-blue);
+  --th-color-error-fill: var(--th-color-light-red);
+  --th-color-success-fill: var(--th-color-light-green);
+  --th-color-warning-fill: var(--th-color-light-yellow);
+  --th-color-info-fill: var(--th-color-light-blue);
 
   /* Component-specific variables (mapped to palette) */
   /* Links */
-  --color-link: var(--color-primary);
-  --color-link-hover: var(--color-primary);
+  --th-color-link: var(--th-color-primary);
+  --th-color-link-hover: var(--th-color-primary);
   /* Buttons */
-  --button-disabled-bg: var(--color-grey-200);
-  --button-disabled-color: var(--color-grey-500);
+  --th-button-disabled-bg: var(--th-color-grey-200);
+  --th-button-disabled-color: var(--th-color-grey-500);
 
-  --button-primary-bg: var(--color-primary);
-  --button-primary-bg-hover: var(--color-dark-primary);
-  --button-primary-color: var(--color-white);
+  --th-button-primary-bg: var(--th-color-primary);
+  --th-button-primary-bg-hover: var(--th-color-dark-primary);
+  --th-button-primary-color: var(--th-color-white);
 
-  --button-secondary-bg: var(--color-white);
-  --button-secondary-bg-hover: var(--color-light-primary);
-  --button-secondary-color: var(--color-primary);
-  --button-secondary-border: var(--color-primary);
+  --th-button-secondary-bg: var(--th-color-white);
+  --th-button-secondary-bg-hover: var(--th-color-light-primary);
+  --th-button-secondary-color: var(--th-color-primary);
+  --th-button-secondary-border: var(--th-color-primary);
 
-  --button-alternate-bg: var(--color-blue);
-  --button-alternate-bg-hover: var(--color-dark-blue);
-  --button-alternate-color: var(--color-white);
+  --th-button-alternate-bg: var(--th-color-blue);
+  --th-button-alternate-bg-hover: var(--th-color-dark-blue);
+  --th-button-alternate-color: var(--th-color-white);
 
-  --button-destructive-bg: var(--color-red);
-  --button-destructive-bg-hover: var(--color-dark-red);
-  --button-destructive-color: var(--color-white);
+  --th-button-destructive-bg: var(--th-color-red);
+  --th-button-destructive-bg-hover: var(--th-color-dark-red);
+  --th-button-destructive-color: var(--th-color-white);
 
-  --button-confirmation-bg: var(--color-green);
-  --button-confirmation-bg-hover: var(--color-dark-green);
-  --button-confirmation-color: var(--color-white);
+  --th-button-confirmation-bg: var(--th-color-green);
+  --th-button-confirmation-bg-hover: var(--th-color-dark-green);
+  --th-button-confirmation-color: var(--th-color-white);
 
   /* Cards */
-  --th-card-bg: var(--color-white);
-  --th-card-border: var(--color-border);
-  --th-card-title-color: var(--color-text-primary);
-  --th-card-subtitle-color: var(--color-text-secondary);
-  --th-card-text-color: var(--color-text-secondary);
-  --th-card-icon-color: var(--color-text-primary);
-  --th-card-dismiss-color: var(--color-text-muted);
+  --th-card-bg: var(--th-color-white);
+  --th-card-border: var(--th-color-border);
+  --th-card-title-color: var(--th-color-text-primary);
+  --th-card-subtitle-color: var(--th-color-text-secondary);
+  --th-card-text-color: var(--th-color-text-secondary);
+  --th-card-icon-color: var(--th-color-text-primary);
+  --th-card-dismiss-color: var(--th-color-text-muted);
 
   /* Progress Bar */
-  --progress-bar-fill-color: var(--color-primary);
-  --progress-bar-track-color: var(--color-grey-200);
-  --progress-bar-title-color: var(--color-text-primary);
-  --progress-bar-label-color: var(--color-text-secondary);
+  --th-progress-bar-fill-color: var(--th-color-primary);
+  --th-progress-bar-track-color: var(--th-color-grey-200);
+  --th-progress-bar-title-color: var(--th-color-text-primary);
+  --th-progress-bar-label-color: var(--th-color-text-secondary);
+
+  /* Checkbox */
+  --th-checkbox-border: var(--th-color-grey-300);
+  --th-checkbox-checked-bg: var(--th-color-dark-primary);
+  --th-checkbox-disabled-bg: var(--th-color-grey-300);
+  --th-checkbox-disabled-border: var(--th-color-grey-300);
+  --th-checkbox-disabled-check: var(--th-color-grey-500);
+
+  /* Text Input */
+  --th-input-border: var(--th-color-grey-300);
+  --th-input-focus-border: var(--th-color-dark-primary);
+  --th-input-border-invalid: var(--th-color-red);
+  --th-input-label: var(--th-color-grey-700);
+  --th-input-label-disabled: var(--th-color-grey-500);
+  --th-input-placeholder: var(--th-color-grey-400);
+  --th-input-text: var(--th-color-black);
+  --th-input-bg: 'transparent';
+  --th-input-icon-color: var(--th-color-grey-400);
+
+  /* Selector */
+  --th-selector-border: var(--th-color-grey-300);
+  --th-selector-text-color: var(--th-color-text-primary);
+  --th-selector-subtext-color: var(--th-color-primary);
+  --th-selector-description-color: var(--th-color-text-secondary);
+  --th-selector-icon-color: var(--th-color-dark-primary);
+  --th-selector-checked-border: var(--th-color-dark-primary);
+  --th-selector-checked-bg: var(--th-color-primary);
+  --th-selector-disabled-color: var(--th-color-grey-500);
+  --th-selector-disabled-bg: transparent;
 
   /* Shadow colors using opacity */
-  --color-shadow: rgba(0, 0, 0, 0.1);
-  --color-shadow-medium: rgba(0, 0, 0, 0.15);
+  --th-color-shadow: rgba(0, 0, 0, 0.1);
+  --th-color-shadow-medium: rgba(0, 0, 0, 0.15);
 }
 
 /* Dark Theme Overrides */
 [data-theme='dark'] {
   /* Text */
-  --color-text-primary: var(--color-grey-100);
-  --color-text-secondary: var(--color-grey-300);
-  --color-text-muted: var(--color-grey-500);
+  --th-color-text-primary: var(--th-color-grey-100);
+  --th-color-text-secondary: var(--th-color-grey-300);
+  --th-color-text-muted: var(--th-color-grey-500);
 
   /* Backgrounds */
-  --color-background: var(--color-grey-800);
-  --color-background-muted: var(--color-grey-700);
-  --color-background-hover: var(--color-grey-600);
+  --th-color-background: var(--th-color-grey-800);
+  --th-color-background-muted: var(--th-color-grey-700);
+  --th-color-background-hover: var(--th-color-grey-600);
 
   /* Borders */
-  --color-border: var(--color-grey-700);
+  --th-color-border: var(--th-color-grey-700);
 
   /* Buttons */
-  --button-primary-bg: var(--color-dark-primary);
-  --button-primary-bg-hover: var(--color-primary);
-
-  --button-secondary-bg: var(--color-grey-800);
-  --button-secondary-bg-hover: var(--color-grey-700);
-  --button-secondary-color: var(--color-primary);
-
-  --button-disabled-bg: var(--color-grey-700);
-  --button-disabled-color: var(--color-grey-500);
+  --th-button-primary-bg: var(--th-color-dark-primary);
+  --th-button-primary-bg-hover: var(--th-color-primary);
+
+  --th-button-secondary-bg: var(--th-color-grey-800);
+  --th-button-secondary-bg-hover: var(--th-color-grey-700);
+  --th-button-secondary-color: var(--th-color-primary);
+
+  --th-button-disabled-bg: var(--th-color-grey-700);
+  --th-button-disabled-color: var(--th-color-grey-500);
+
+  /* Checkbox */
+  --th-checkbox-border: var(--th-color-grey-600);
+  --th-checkbox-checked-bg: var(--th-color-primary);
+  --th-checkbox-disabled-bg: var(--th-color-grey-600);
+  --th-checkbox-disabled-border: var(--th-color-grey-600);
+  --th-checkbox-disabled-check: var(--th-color-grey-300);
+
+  /* Text Input */
+  --th-input-border: var(--th-color-grey-600);
+  --th-input-focus-border: var(--th-color-primary);
+  --th-input-label: var(--th-color-white);
+  --th-input-label-disabled: var(--th-color-grey-500);
+  --th-input-placeholder: var(--th-color-grey-300);
+  --th-input-text: var(--th-color-white);
+  --th-input-bg: var(--th-color-grey-700);
+  --th-input-icon-color: var(--th-color-grey-300);
+
+  /* Selector */
+  --th-selector-border: var(--th-color-grey-600);
+  --th-selector-text-color: var(--th-color-text-primary);
+  --th-selector-subtext-color: var(--th-color-primary);
+  --th-selector-description-color: var(--th-color-text-secondary);
+  --th-selector-icon-color: var(--th-color-primary);
+  --th-selector-checked-border: var(--th-color-primary);
+  --th-selector-checked-bg: var(--th-color-primary);
+  --th-selector-disabled-color: var(--th-color-grey-500);
+  --th-selector-disabled-bg: var(--th-color-grey-100);
 
   /* Cards */
-  --th-card-bg: var(--color-grey-700);
-  --th-card-border: var(--color-grey-600);
-  --th-card-title-color: var(--color-grey-100);
-  --th-card-subtitle-color: var(--color-grey-300);
-  --th-card-text-color: var(--color-grey-300);
-  --th-card-icon-color: var(--color-grey-100);
-  --th-card-dismiss-color: var(--color-grey-500);
+  --th-card-bg: var(--th-color-grey-700);
+  --th-card-border: var(--th-color-grey-600);
+  --th-card-title-color: var(--th-color-grey-100);
+  --th-card-subtitle-color: var(--th-color-grey-300);
+  --th-card-text-color: var(--th-color-grey-300);
+  --th-card-icon-color: var(--th-color-grey-100);
+  --th-card-dismiss-color: var(--th-color-grey-500);
 
   /* Progress Bar */
-  --progress-bar-fill-color: var(--color-primary);
-  --progress-bar-track-color: var(--color-grey-600);
-  --progress-bar-title-color: var(--color-grey-100);
-  --progress-bar-label-color: var(--color-grey-300);
+  --th-progress-bar-fill-color: var(--th-color-primary);
+  --th-progress-bar-track-color: var(--th-color-grey-600);
+  --th-progress-bar-title-color: var(--th-color-grey-100);
+  --th-progress-bar-label-color: var(--th-color-grey-300);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krumio/trailhand-ui",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "type": "module",
   "description": "Reusable web components built with Lit Element",
   "main": "./dist/index.js",
@@ -55,7 +55,6 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/pro-duotone-svg-icons": "^7.1.0",
     "@iconify/icons-heroicons": "^1.2.9",
     "iconify-icon": "^3.0.2",
     "lit": "^3.3.1"
@@ -76,4 +75,4 @@
     "vite": "^6.4.1",
     "vitest": "^4.0.17"
   }
-}
+}