feat: minor component updates

dev/main.ts

@@ -566,6 +566,15 @@ class DevApp extends LitElement {
           invalid
           ><trailhand-icon name="globe" slot="icon"></trailhand-icon
         ></trailhand-text-input>
+        <trailhand-text-input
+          type="number"
+          label="Number"
+          value="42"
+          placeholder="Enter a number"
+          min="0"
+          max="100"
+          step="1"
+        ></trailhand-text-input>
       </div>
       <!-------------------------- Code Editor -------------------------->
       <h1>Code Editor</h1>
@@ -667,6 +676,7 @@ class DevApp extends LitElement {
       <trailhand-modal
         title="Modal Heading"
         subtitle="Subtitle"
+        position="top"
         .open=${this.modalOpen}
         @modal-close=${() => (this.modalOpen = false)}
         @modal-open=${this.handleModalOpen}
@@ -1096,6 +1106,16 @@ class DevApp extends LitElement {
             placeholder="Type something..."
             required
           ></trailhand-text-input>
+          <trailhand-text-input
+            type="number"
+            label="Number"
+            placeholder="Enter a number"
+            min="0"
+            max="100"
+            step="4"
+            name="formNumberInput"
+            required
+          ></trailhand-text-input>
           <trailhand-selector
             name="formSelector"
             value="option1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krumio/trailhand-ui",
-  "version": "1.9.18",
+  "version": "1.9.19",
   "type": "module",
   "description": "Reusable web components built with Lit Element",
   "main": "./dist/index.js",

src/components/button/button.ts

@@ -119,16 +119,19 @@ export class Button extends LitElement {
     .trailhand-button--small {
       font-size: 11px;
       padding: 12px 8px;
+      height: 32px;
     }
 
     .trailhand-button--medium {
       font-size: 12px;
       padding: 12px 16px;
+      height: 40px;
     }
 
     .trailhand-button--large {
       font-size: 14px;
       padding: 16px 32px;
+      height: 48px;
     }
 
     .icon {

src/components/dropdown/dropdown.ts

@@ -395,7 +395,7 @@ export class Dropdown extends LitElement {
       align-items: center;
       flex-wrap: wrap;
       gap: 4px;
-      min-height: 2.75em;
+      height: 40px;
       padding: 0.45em 3em 0.45em 12px;
       border-radius: 8px;
       border: 1px solid var(--th-input-border, #d7d7d7);
@@ -631,8 +631,8 @@ export class Dropdown extends LitElement {
     /* ── Size: small ── */
     :host([size='small']) .trigger {
       font-size: 12px;
-      min-height: 2.25em;
       padding: 0.4em 2.5em 0.4em 10px;
+      height: 32px;
     }
     :host([size='small']) .trigger-text,
     :host([size='small']) .option {
@@ -642,7 +642,7 @@ export class Dropdown extends LitElement {
     /* ── Size: large ── */
     :host([size='large']) .trigger {
       font-size: 16px;
-      min-height: 3.1em;
+      height: 48px;
     }
     :host([size='large']) .trigger-text,
     :host([size='large']) .option {

src/components/icon/icon.stories.ts

@@ -150,6 +150,7 @@ const solidIcons = [
   'x',
   'minus',
   'check',
+  'plus',
 ];
 
 export const AllIcons: Story = {

src/components/icon/icon.ts

@@ -31,6 +31,7 @@ import {
   faXmark,
   faMinus,
   faCheck,
+  faPlus,
 } from '@fortawesome/free-solid-svg-icons';
 
 const iconMap = {
@@ -62,6 +63,7 @@ const iconMap = {
   x: faXmark,
   minus: faMinus,
   check: faCheck,
+  plus: faPlus,
 };
 
 export const availableIcons = Object.keys(iconMap) as (keyof typeof iconMap)[];

src/components/modal/modal.ts

@@ -7,6 +7,7 @@ export interface ModalProps {
   title: string;
   subtitle: string;
   dismissible: boolean;
+  position: 'center' | 'top';
 }
 
 export class Modal extends LitElement {
@@ -25,6 +26,9 @@ export class Modal extends LitElement {
   @property({ type: Boolean })
   inline = false;
 
+  @property({ type: String })
+  position: 'center' | 'top' = 'center';
+
   @query('dialog') private dialog!: HTMLDialogElement;
 
   @state() private hasFooter = false;
@@ -36,7 +40,7 @@ export class Modal extends LitElement {
       font-family: var(--font-family, 'Poppins', sans-serif);
     }
 
-    dialog {
+    /* dialog {
       border: none;
       border-radius: 12px;
       padding: 0;
@@ -46,6 +50,32 @@ export class Modal extends LitElement {
       background: var(--th-color-background, #ffffff);
       min-width: 360px;
       margin: auto;
+    } */
+
+    dialog {
+      position: fixed;
+      margin: 0;
+      inset: auto;
+      left: 50%;
+      transform: translateX(-50%);
+      border: none;
+      border-radius: 12px;
+      padding: 0;
+      min-width: 360px;
+      max-width: 90vw;
+      max-height: 90vh;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      background: var(--th-color-background, #ffffff);
+    }
+
+    :host(:not([position='top'])) dialog {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    :host([position='top']) dialog {
+      top: var(--th-modal-top, 80px);
+      transform: translateX(-50%);
     }
 
     dialog::backdrop {
@@ -163,6 +193,7 @@ export class Modal extends LitElement {
         @cancel=${this.handleClose}
         aria-labelledby="modal-title"
         aria-modal="true"
+        part="dialog"
       >
         <div class="modal-header" part="header">
           <slot name="heading">

src/components/text-input/text-input.ts

@@ -10,6 +10,10 @@ export interface TextInputProps {
   label?: string;
   required?: boolean;
   invalid?: boolean;
+  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url';
+  min?: number;
+  max?: number;
+  step?: number;
 }
 
 export class TextInput extends LitElement {
@@ -39,6 +43,18 @@ export class TextInput extends LitElement {
   @property({ type: Boolean, reflect: true })
   invalid = false;
 
+  @property({ type: String })
+  type: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' = 'text';
+
+  @property({ type: Number })
+  min?: number;
+
+  @property({ type: Number })
+  max?: number;
+
+  @property({ type: Number })
+  step?: number;
+
   private internals: ElementInternals;
   private _input: HTMLInputElement;
 
@@ -84,6 +100,7 @@ export class TextInput extends LitElement {
       background: transparent;
       transition: 0.2s ease;
       font-size: 14px;
+      height: 40px;
       color: var(--th-input-text, #333);
       box-sizing: border-box;
       font-family: 'Montserrat', system-ui, sans-serif;
@@ -115,12 +132,14 @@ export class TextInput extends LitElement {
     }
     :host([size='small']) input {
       font-size: 12px;
+      height: 32px;
     }
     :host([size='large']) .input-wrapper {
       font-size: 16px;
     }
     :host([size='large']) input {
       font-size: 16px;
+      height: 48px;
     }
 
     /* Disabled */
@@ -223,12 +242,15 @@ export class TextInput extends LitElement {
         >
         <div class="input-wrapper">
           <input
-            type="text"
+            .type=${this.type}
             name=${this.name}
             .value=${this.value}
             placeholder=${this.placeholder}
             ?disabled=${this.disabled}
             ?required=${this.required}
+            min=${this.min ?? ''}
+            max=${this.max ?? ''}
+            step=${this.step ?? ''}
             @input=${this.handleInput}
           />
           <span class="icon"><slot name="icon"></slot></span>

src/styles/colors.css

@@ -9,9 +9,9 @@
 :root {
   /* Color Palette */
   /* Primary Blues */
-  --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 */
+  --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 */
   --th-color-black: #000000;
@@ -37,7 +37,7 @@
   --th-color-dark-green: #0f8240;
 
   --th-color-light-yellow: #fffeb4;
-  --th-color-yellow: #D3C255;
+  --th-color-yellow: #d3c255;
   --th-color-dark-yellow: #a89939;
 
   --th-color-light-blue: #e6f3ff;
@@ -87,9 +87,9 @@
   --th-button-secondary-color: var(--th-color-primary);
   --th-button-secondary-border: var(--th-color-primary);
 
-  --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);
+  --th-button-alternate-bg: var(--th-color-light-blue);
+  --th-button-alternate-bg-hover: var(--th-color-light-blue);
+  --th-button-alternate-color: var(--th-color-blue);
 
   --th-button-destructive-bg: var(--th-color-red);
   --th-button-destructive-bg-hover: var(--th-color-dark-red);
@@ -164,10 +164,20 @@
   --th-dropdown-bg: var(--th-color-white);
   --th-dropdown-option-text: var(--th-color-black);
   --th-dropdown-option-selected-text: var(--th-color-primary);
-  --th-dropdown-option-selected-bg: color-mix(in srgb, var(--th-color-primary) 10%, transparent);
-  --th-dropdown-option-hover-bg: color-mix(in srgb, var(--th-color-primary) 6%, transparent);
+  --th-dropdown-option-selected-bg: color-mix(
+    in srgb,
+    var(--th-color-primary) 10%,
+    transparent
+  );
+  --th-dropdown-option-hover-bg: color-mix(
+    in srgb,
+    var(--th-color-primary) 6%,
+    transparent
+  );
   --th-dropdown-no-options-text: var(--th-color-grey-400);
   --th-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+  --th-modal-top: 34px;
 }
 
 /* Dark Theme Overrides */
@@ -250,8 +260,16 @@
   --th-dropdown-bg: var(--th-color-grey-700);
   --th-dropdown-option-text: var(--th-color-grey-100);
   --th-dropdown-option-selected-text: var(--th-color-primary);
-  --th-dropdown-option-selected-bg: color-mix(in srgb, var(--th-color-primary) 15%, transparent);
-  --th-dropdown-option-hover-bg: color-mix(in srgb, var(--th-color-primary) 10%, transparent);
+  --th-dropdown-option-selected-bg: color-mix(
+    in srgb,
+    var(--th-color-primary) 15%,
+    transparent
+  );
+  --th-dropdown-option-hover-bg: color-mix(
+    in srgb,
+    var(--th-color-primary) 10%,
+    transparent
+  );
   --th-dropdown-no-options-text: var(--th-color-grey-500);
   --th-dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }