@krumio/trailhand-ui 1.7.0 → 1.8.1

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

@@ -0,0 +1,287 @@
+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, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../icon/icon';
+/**
+ * A tag/badge component for displaying labels, statuses, or categories.
+ * Can be used for status indicators, category labels, or dismissible chips.
+ *
+ * @fires tag-dismiss - Fired when the dismiss button is clicked (if dismissible)
+ *
+ * @slot - Default slot for tag content (alternative to label prop)
+ */
+export class ThTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The text label to display in the tag
+         */
+        this.label = '';
+        /**
+         * Visual variant/color scheme
+         */
+        this.variant = 'default';
+        /**
+         * Size of the tag
+         */
+        this.size = 'md';
+        /**
+         * Whether the tag can be dismissed/closed
+         */
+        this.dismissible = false;
+        /**
+         * Whether the tag is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether to use outlined style (border instead of filled background)
+         */
+        this.outlined = false;
+        /**
+         * Optional icon to display before the label (trailhand-icon name)
+         */
+        this.icon = '';
+        /**
+         * Value passed in the dismiss event (useful for identifying which tag was dismissed)
+         */
+        this.value = '';
+    }
+    /**
+     * Handle dismiss button click
+     */
+    _handleDismiss(e) {
+        e.stopPropagation();
+        const event = new CustomEvent('tag-dismiss', {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value || this.label },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Render the dismiss button icon
+     */
+    _renderDismissIcon() {
+        return html `<trailhand-icon name="close"></trailhand-icon>`;
+    }
+    /**
+     * Render the component
+     */
+    render() {
+        const classes = [
+            'tag',
+            `tag--${this.variant}`,
+            `tag--${this.size}`,
+            this.outlined ? 'tag--outlined' : '',
+        ].filter(Boolean).join(' ');
+        return html `
+      <span class=${classes} part="tag">
+        ${this.icon
+            ? html `<span class="tag__icon" part="icon">
+              <trailhand-icon name=${this.icon}></trailhand-icon>
+            </span>`
+            : nothing}
+        <span class="tag__label" part="label">
+          ${this.label || html `<slot></slot>`}
+        </span>
+        ${this.dismissible
+            ? html `
+              <button
+                class="tag__dismiss"
+                part="dismiss"
+                type="button"
+                aria-label="Remove tag"
+                @click=${this._handleDismiss}
+              >
+                ${this._renderDismissIcon()}
+              </button>
+            `
+            : nothing}
+      </span>
+    `;
+    }
+}
+ThTag.styles = css `
+    :host {
+      display: inline-flex;
+      align-self: center;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .tag {
+      padding: 6px 14px;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-radius: 9999px;
+      font-feature-settings: 'liga' off, 'clig' off;
+      font-family: var(--font-family, 'Poppins', sans-serif);
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      white-space: nowrap;
+      transition: all 0.15s ease;
+    }
+
+    /* Size variants */
+    .tag--sm {
+      padding: 3px 9px;
+      font-size: 11px;
+      line-height: 16px;
+    }
+
+    .tag--md {
+      padding: 4px 12px;
+      font-size: 13px;
+      line-height: 18px;
+    }
+
+    .tag--lg {
+      padding: 6px 16px;
+      font-size: 15px;
+      line-height: 20px;
+    }
+
+    /* Color variants - soft pastel backgrounds with colored text */
+    .tag--default {
+      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(--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(--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(--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(--th-color-error-fill, var(--th-color-light-red, #fee2e2));
+      color: var(--th-color-error-outline, var(--th-color-red, #9F3A3A));
+    }
+
+    /* Outlined variants */
+    .tag--outlined {
+      background-color: transparent;
+      border: 1px solid currentColor;
+    }
+
+    .tag--outlined.tag--default {
+      background-color: transparent;
+      color: var(--th-color-text-secondary, var(--th-color-grey-600, #4b5563));
+    }
+
+    .tag--outlined.tag--info {
+      background-color: transparent;
+      color: var(--th-color-info-outline, var(--th-color-blue, #0085ff));
+    }
+
+    .tag--outlined.tag--success {
+      background-color: transparent;
+      color: var(--th-color-success-outline, var(--th-color-green, #097409));
+    }
+
+    .tag--outlined.tag--warning {
+      background-color: transparent;
+      color: var(--th-color-warning-outline, var(--th-color-dark-yellow, #a89939));
+    }
+
+    .tag--outlined.tag--error {
+      background-color: transparent;
+      color: var(--th-color-error-outline, var(--th-color-red, #9F3A3A));
+    }
+
+    /* Icon styling */
+    .tag__icon {
+      display: flex;
+      align-items: center;
+      font-size: 1em;
+    }
+
+    /* Dismiss button */
+    .tag__dismiss {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: 0;
+      margin-left: 2px;
+      cursor: pointer;
+      color: inherit;
+      opacity: 0.7;
+      transition: opacity 0.15s ease;
+      line-height: 1;
+    }
+
+    .tag__dismiss:hover {
+      opacity: 1;
+    }
+
+    .tag__dismiss:focus {
+      outline: none;
+      opacity: 1;
+    }
+
+    .tag__dismiss trailhand-icon {
+      font-size: 1em;
+    }
+
+    /* Size-specific dismiss button adjustments */
+    .tag--sm .tag__dismiss trailhand-icon {
+      font-size: 12px;
+    }
+
+    .tag--md .tag__dismiss trailhand-icon {
+      font-size: 14px;
+    }
+
+    .tag--lg .tag__dismiss trailhand-icon {
+      font-size: 16px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], ThTag.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], ThTag.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], ThTag.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], ThTag.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Boolean })
+], ThTag.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], ThTag.prototype, "outlined", void 0);
+__decorate([
+    property({ type: String })
+], ThTag.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], ThTag.prototype, "value", void 0);
+// Register the element
+customElements.define('trailhand-tag', ThTag);
+//# sourceMappingURL=th-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"th-tag.js","sourceRoot":"","sources":["../../../src/components/th-tag/th-tag.ts"],"names":[],"mappings":"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"}

package/dist/components/toggle-switch/toggle-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAW5D;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAE1C,OAAO,UAAS;IAGhB,OAAO,SAAQ;IAGf,QAAQ,SAAS;IAGjB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGjC,IAAI,SAAM;IAEV,OAAO,CAAC,yBAAyB,CAAqB;IAEtD,OAAgB,MAAM,0BAyDpB;;IASO,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAQrC;;;OAGG;IACH,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAOpC;;;OAGG;IACH,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAkB3C;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAalC;;;OAGG;IACM,MAAM,IAAI,cAAc;CAclC"}
+{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAW5D;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAE1C,OAAO,UAAS;IAGhB,OAAO,SAAQ;IAGf,QAAQ,SAAS;IAGjB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGjC,IAAI,SAAM;IAEV,OAAO,CAAC,yBAAyB,CAAqB;IAEtD,OAAgB,MAAM,0BA0DpB;;IASO,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAQrC;;;OAGG;IACH,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAOpC;;;OAGG;IACH,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAkB3C;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAalC;;;OAGG;IACM,MAAM,IAAI,cAAc;CAelC"}

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

@@ -88,6 +88,7 @@ export class ToggleSwitch extends LitElement {
       <label class="toggle-switch">
         <input
           type="checkbox"
+          aria-label=${this.name || `${this.offLabel} / ${this.onLabel}`}
           .checked=${this.checked}
           @change=${this.handleToggleChange}
         />
@@ -102,6 +103,7 @@ ToggleSwitch.styles = css `
       display: flex;
       align-items: center;
       margin-right: 10px;
+      font-family: var(--font-family, 'Poppins', sans-serif);
     }
 
     .toggle-switch {
@@ -125,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;
     }
@@ -137,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/components/toggle-switch/toggle-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -3,4 +3,8 @@ export * from './components/action-menu';
 export * from './components/data-table';
 export * from './components/button';
 export * from './components/icon';
+export * from './components/th-tag';
+export * from './components/th-card';
+export * from './components/progress-bar';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAG1C,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -4,4 +4,9 @@ export * from './components/action-menu';
 export * from './components/data-table';
 export * from './components/button';
 export * from './components/icon';
+export * from './components/th-tag';
+export * from './components/th-card';
+export * from './components/progress-bar';
+// Export utilities
+export * from './utils';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAE1C,mBAAmB;AACnB,cAAc,SAAS,CAAC"}

package/dist/styles/colors.css

@@ -3,130 +3,160 @@
  * 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: #3d98d3; /* 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);
-
-  --button-primary-bg: var(--color-primary);
-  --button-primary-bg-hover: var(--color-dark-primary);
-  --button-primary-color: var(--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);
-
-  --button-alternate-bg: var(--color-blue);
-  --button-alternate-bg-hover: var(--color-dark-blue);
-  --button-alternate-color: var(--color-white);
-
-  --button-destructive-bg: var(--color-red);
-  --button-destructive-bg-hover: var(--color-dark-red);
-  --button-destructive-color: var(--color-white);
-
-  --button-confirmation-bg: var(--color-green);
-  --button-confirmation-bg-hover: var(--color-dark-green);
-  --button-confirmation-color: var(--color-white);
+  --th-button-disabled-bg: var(--th-color-grey-200);
+  --th-button-disabled-color: var(--th-color-grey-500);
+
+  --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);
+
+  --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);
+
+  --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-destructive-bg: var(--th-color-red);
+  --th-button-destructive-bg-hover: var(--th-color-dark-red);
+  --th-button-destructive-color: var(--th-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(--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 */
+  --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);
 
   /* 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);
+
+  /* Cards */
+  --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 */
+  --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/dist/utils/formatters.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Type definition for formatter functions
+ */
+export type FormatterFunction = (value: any) => string;
+/**
+ * Data table formatters for common column types
+ */
+export declare const dataTableFormatters: Record<string, FormatterFunction>;
+//# sourceMappingURL=formatters.d.ts.map

package/dist/utils/formatters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/utils/formatters.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CA8DjE,CAAC"}