@krumio/trailhand-ui 1.7.0 → 1.8.0

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(--color-background-hover, var(--color-grey-200, #EBEBEB));
+      color: var(--color-text-secondary, var(--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));
+    }
+
+    .tag--success {
+      background-color: var(--color-success-fill, var(--color-light-green, #d2fdd2));
+      color: var(--color-success-outline, var(--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));
+    }
+
+    .tag--error {
+      background-color: var(--color-error-fill, var(--color-light-red, #fee2e2));
+      color: var(--color-error-outline, var(--color-red, #9F3A3A));
+    }
+
+    /* Outlined variants */
+    .tag--outlined {
+      background-color: transparent;
+      border: 1px solid currentColor;
+    }
+
+    .tag--outlined.tag--default {
+      background-color: transparent;
+      color: var(--color-text-secondary, var(--color-grey-600, #4b5563));
+    }
+
+    .tag--outlined.tag--info {
+      background-color: transparent;
+      color: var(--color-info-outline, var(--color-blue, #0085ff));
+    }
+
+    .tag--outlined.tag--success {
+      background-color: transparent;
+      color: var(--color-success-outline, var(--color-green, #097409));
+    }
+
+    .tag--outlined.tag--warning {
+      background-color: transparent;
+      color: var(--color-warning-outline, var(--color-dark-yellow, #a89939));
+    }
+
+    .tag--outlined.tag--error {
+      background-color: transparent;
+      color: var(--color-error-outline, var(--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 {

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

@@ -9,9 +9,9 @@
 :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 */
+  --color-primary: #0086FF;           /* Primary brand color */
+  --color-light-primary: #e6f3ff;     /* Light variant for backgrounds */
+  --color-dark-primary: #005cb9;      /* Dark variant for buttons/links */
 
   /* Black + White */
   --color-black: #000000;
@@ -37,7 +37,7 @@
   --color-dark-green: #0f8240;
 
   --color-light-yellow: #fffeb4;
-  --color-yellow: #d3c255;
+  --color-yellow: #D3C255;
   --color-dark-yellow: #a89939;
 
   --color-light-blue: #e6f3ff;
@@ -99,6 +99,21 @@
   --button-confirmation-bg-hover: var(--color-dark-green);
   --button-confirmation-color: var(--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);
+
+  /* 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);
+
   /* Shadow colors using opacity */
   --color-shadow: rgba(0, 0, 0, 0.1);
   --color-shadow-medium: rgba(0, 0, 0, 0.15);
@@ -129,4 +144,19 @@
 
   --button-disabled-bg: var(--color-grey-700);
   --button-disabled-color: var(--color-grey-500);
+
+  /* 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);
+
+  /* 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);
 }

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"}

package/dist/utils/formatters.js

@@ -0,0 +1,66 @@
+/**
+ * Data table formatters for common column types
+ */
+export const dataTableFormatters = {
+    /**
+     * Format a date value as relative time (e.g., "5d", "3h", "15m")
+     */
+    age: (value) => {
+        if (!value)
+            return '-';
+        const date = new Date(value);
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffDays > 0)
+            return `${diffDays}d`;
+        if (diffHours > 0)
+            return `${diffHours}h`;
+        if (diffMins > 0)
+            return `${diffMins}m`;
+        return 'Just now';
+    },
+    /**
+     * Format a date as a localized date string
+     */
+    date: (value) => {
+        if (!value)
+            return '-';
+        return new Date(value).toLocaleDateString();
+    },
+    /**
+     * Format a date as a localized date and time string
+     */
+    dateTime: (value) => {
+        if (!value)
+            return '-';
+        return new Date(value).toLocaleString();
+    },
+    /**
+     * Format memory bytes to human readable format (B, KB, MB, GB, TB)
+     */
+    memory: (value) => {
+        if (!value || value === 0)
+            return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+        let val = Number(value);
+        let unitIndex = 0;
+        while (val >= 1024 && unitIndex < units.length - 1) {
+            val = val / 1024;
+            unitIndex++;
+        }
+        return `${Math.round(val)} ${units[unitIndex]}`;
+    },
+    /**
+     * Format millicpus value
+     */
+    milliCPUs: (value) => {
+        if (!value || value === 0)
+            return '0';
+        const formatted = Math.round(Number(value)).toString();
+        return formatted === '0' ? '0' : formatted;
+    },
+};
+//# sourceMappingURL=formatters.js.map

package/dist/utils/formatters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.js","sourceRoot":"","sources":["../../src/utils/formatters.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAsC;IACpE;;OAEG;IACH,GAAG,EAAE,CAAC,KAAU,EAAU,EAAE;QAC1B,IAAI,CAAC,KAAK;YAAE,OAAO,GAAG,CAAC;QACvB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;QAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC;QAE/C,IAAI,QAAQ,GAAG,CAAC;YAAE,OAAO,GAAG,QAAQ,GAAG,CAAC;QACxC,IAAI,SAAS,GAAG,CAAC;YAAE,OAAO,GAAG,SAAS,GAAG,CAAC;QAC1C,IAAI,QAAQ,GAAG,CAAC;YAAE,OAAO,GAAG,QAAQ,GAAG,CAAC;QACxC,OAAO,UAAU,CAAC;IACpB,CAAC;IAED;;OAEG;IACH,IAAI,EAAE,CAAC,KAAU,EAAU,EAAE;QAC3B,IAAI,CAAC,KAAK;YAAE,OAAO,GAAG,CAAC;QACvB,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAU,EAAU,EAAE;QAC/B,IAAI,CAAC,KAAK;YAAE,OAAO,GAAG,CAAC;QACvB,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC;IAC1C,CAAC;IAED;;OAEG;IACH,MAAM,EAAE,CAAC,KAAU,EAAU,EAAE;QAC7B,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAExC,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC5C,IAAI,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,SAAS,GAAG,CAAC,CAAC;QAElB,OAAO,GAAG,IAAI,IAAI,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnD,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;YACjB,SAAS,EAAE,CAAC;QACd,CAAC;QAED,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;IAClD,CAAC;IAED;;OAEG;IACH,SAAS,EAAE,CAAC,KAAU,EAAU,EAAE;QAChC,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,GAAG,CAAC;QAEtC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QACvD,OAAO,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7C,CAAC;CACF,CAAC"}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './formatters';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from './formatters';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krumio/trailhand-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "description": "Reusable web components built with Lit Element",
   "main": "./dist/index.js",
@@ -55,6 +55,7 @@
   "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"
@@ -75,4 +76,4 @@
     "vite": "^6.4.1",
     "vitest": "^4.0.17"
   }
-}
+}