@krumio/trailhand-ui 1.9.5 → 1.9.7

package/dist/components/popover/index.d.ts

@@ -0,0 +1,3 @@
+export { Popover } from './popover';
+export type { PopoverProps, PopoverPlacement } from './popover';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/popover/index.js

@@ -0,0 +1,2 @@
+export { Popover } from './popover';
+//# sourceMappingURL=index.js.map

package/dist/components/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,42 @@
+import { LitElement, TemplateResult } from 'lit';
+import '../icon/icon';
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface PopoverProps {
+    open: boolean;
+    stayOpen: boolean;
+    placement: PopoverPlacement;
+    title: string;
+    subtitle: string;
+}
+/**
+ * A popover component that appears on click of a trigger element.
+ * Pass any content via the default slot and a custom trigger via the `trigger` slot.
+ * Use the `heading` slot to override the title/subtitle with custom markup.
+ */
+export declare class Popover extends LitElement {
+    open: boolean;
+    /**
+     * When true, clicking outside the popover will not close it.
+     */
+    stayOpen: boolean;
+    /**
+     * Controls which side of the trigger the popover appears on.
+     */
+    placement: PopoverPlacement;
+    title: string;
+    subtitle: string;
+    private _hasHeadingSlot;
+    private _boundHandleClickOutside;
+    static styles: import("lit").CSSResult;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleClickOutside;
+    private _handleTriggerClick;
+    private _open;
+    private _close;
+    private _handleHeadingSlotChange;
+    private _renderHeader;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAErE,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IAErC,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,EAAE,gBAAgB,CAAY;IAGvC,KAAK,SAAM;IAGX,QAAQ,SAAM;IAEL,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,CAAC,wBAAwB,CAAqB;IAErD,OAAgB,MAAM,0BAuHpB;;IAOO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,aAAa;IAkBZ,MAAM,IAAI,cAAc;CAuBlC"}

package/dist/components/popover/popover.js

@@ -0,0 +1,249 @@
+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, state } from 'lit/decorators.js';
+import '../icon/icon';
+/**
+ * A popover component that appears on click of a trigger element.
+ * Pass any content via the default slot and a custom trigger via the `trigger` slot.
+ * Use the `heading` slot to override the title/subtitle with custom markup.
+ */
+export class Popover extends LitElement {
+    constructor() {
+        super();
+        this.open = false;
+        /**
+         * When true, clicking outside the popover will not close it.
+         */
+        this.stayOpen = false;
+        /**
+         * Controls which side of the trigger the popover appears on.
+         */
+        this.placement = 'bottom';
+        this.title = '';
+        this.subtitle = '';
+        this._hasHeadingSlot = false;
+        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._boundHandleClickOutside);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._boundHandleClickOutside);
+    }
+    _handleClickOutside(e) {
+        if (this.stayOpen)
+            return;
+        const target = e.target;
+        if (this.open && !this.contains(target)) {
+            this._close();
+        }
+    }
+    _handleTriggerClick(e) {
+        e.stopPropagation();
+        if (this.open) {
+            this._close();
+        }
+        else {
+            this._open();
+        }
+    }
+    _open() {
+        this.open = true;
+        this.dispatchEvent(new CustomEvent('popover-open', { bubbles: true, composed: true }));
+    }
+    _close() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('popover-close', { bubbles: true, composed: true }));
+    }
+    _handleHeadingSlotChange(e) {
+        const slot = e.target;
+        this._hasHeadingSlot = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    _renderHeader() {
+        const hasTitle = this.title || this._hasHeadingSlot;
+        if (!hasTitle)
+            return nothing;
+        return html `
+      <div class="popover-header" part="header">
+        <slot name="heading" @slotchange=${this._handleHeadingSlotChange}>
+          <div class="heading-content">
+            <p class="popover-title">${this.title}</p>
+            ${this.subtitle
+            ? html `<p class="popover-subtitle">${this.subtitle}</p>`
+            : nothing}
+          </div>
+        </slot>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div
+        class="trigger-wrapper"
+        @click=${this._handleTriggerClick}
+        aria-haspopup="true"
+        aria-expanded=${this.open}
+      >
+        <slot name="trigger"></slot>
+      </div>
+
+      <div
+        class="popover-content ${this.open ? 'popover-content--open' : ''}"
+        role="dialog"
+        aria-hidden=${!this.open}
+      >
+        ${this._renderHeader()}
+        <div class="popover-body" part="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+Popover.styles = css `
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: var(--font-family, 'Poppins', sans-serif);
+    }
+
+    .trigger-wrapper {
+      display: inline-block;
+      cursor: pointer;
+    }
+
+    .popover-content {
+      position: absolute;
+      z-index: 1000;
+      min-width: 200px;
+      background-color: var(--th-color-background, #ffffff);
+      border: 1px solid var(--th-color-border, #d7d7d7);
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      overflow: hidden;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.2s ease-in-out,
+        transform 0.2s ease-in-out,
+        visibility 0.2s ease-in-out;
+    }
+
+    .popover-content--open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .popover-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--th-color-border, #d7d7d7);
+    }
+
+    .heading-content {
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+    }
+
+    .popover-title {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--th-color-text-primary, #212121);
+    }
+
+    .popover-subtitle {
+      margin: 0;
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--th-color-text-secondary, #666666);
+    }
+
+    .popover-body {
+      padding: 16px;
+    }
+
+    /* Placement: bottom (default) */
+    :host([placement='bottom']) .popover-content,
+    :host(:not([placement])) .popover-content {
+      top: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%) translateY(-6px);
+    }
+
+    :host([placement='bottom']) .popover-content--open,
+    :host(:not([placement])) .popover-content--open {
+      transform: translateX(-50%) translateY(0);
+    }
+
+    /* Placement: top */
+    :host([placement='top']) .popover-content {
+      bottom: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%) translateY(6px);
+    }
+
+    :host([placement='top']) .popover-content--open {
+      transform: translateX(-50%) translateY(0);
+    }
+
+    /* Placement: right */
+    :host([placement='right']) .popover-content {
+      left: calc(100% + 8px);
+      top: 50%;
+      transform: translateY(-50%) translateX(-6px);
+    }
+
+    :host([placement='right']) .popover-content--open {
+      transform: translateY(-50%) translateX(0);
+    }
+
+    /* Placement: left */
+    :host([placement='left']) .popover-content {
+      right: calc(100% + 8px);
+      top: 50%;
+      transform: translateY(-50%) translateX(6px);
+    }
+
+    :host([placement='left']) .popover-content--open {
+      transform: translateY(-50%) translateX(0);
+    }
+
+    /* Dark mode */
+    :host-context([data-theme='dark']) .popover-content {
+      background-color: var(--th-color-background, #2a2a2a);
+      border-color: var(--th-color-border, #444444);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    }
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Popover.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'stay-open' })
+], Popover.prototype, "stayOpen", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Popover.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], Popover.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], Popover.prototype, "subtitle", void 0);
+__decorate([
+    state()
+], Popover.prototype, "_hasHeadingSlot", void 0);
+customElements.define('trailhand-popover', Popover);
+//# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

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

package/dist/components/text-input/text-input.d.ts

@@ -24,6 +24,7 @@ export declare class TextInput extends LitElement {
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
+    focus(): void;
     private emitChangeEvent;
     private handleInput;
     firstUpdated(): void;

package/dist/components/text-input/text-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/text-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,cAAc,UAAQ;IAG7B,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,QAAQ,UAAS;IAGjB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,MAAM,CAAmB;;IAOjC,MAAM,CAAC,MAAM,0BAqFX;IAEF,iBAAiB;IASjB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,WAAW;IAYnB,YAAY;IAQZ,OAAO,CAAC,eAAe;IAcvB,iBAAiB;IAKjB,mBAAmB,CAAC,QAAQ,EAAE,OAAO;IAIrC,sBAAsB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI;IAMnD,MAAM,IAAI,cAAc;CAwBzB"}
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/text-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,cAAc,UAAQ;IAG7B,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,QAAQ,UAAS;IAGjB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,MAAM,CAAmB;;IAOjC,MAAM,CAAC,MAAM,0BAqFX;IAEF,iBAAiB;IASjB,KAAK;IAIL,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,WAAW;IAYnB,YAAY;IAQZ,OAAO,CAAC,eAAe;IAcvB,iBAAiB;IAKjB,mBAAmB,CAAC,QAAQ,EAAE,OAAO;IAIrC,sBAAsB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI;IAMnD,MAAM,IAAI,cAAc;CAwBzB"}

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

@@ -27,6 +27,9 @@ export class TextInput extends LitElement {
             this.disabled = true;
         }
     }
+    focus() {
+        this._input?.focus();
+    }
     emitChangeEvent() {
         // emit native change event for form integration
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));

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

@@ -1 +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"}
+{"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;IAED,KAAK;QACH,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;IACvB,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;;AA3NM,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;AAsMlB,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC"}

package/dist/components/th-form-card/index.d.ts

@@ -0,0 +1,4 @@
+export { ThFormCard } from './th-form-card';
+export type { FormCardButtonVariant } from './th-form-card';
+export { ThFormRow } from './th-form-row';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/th-form-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/th-form-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/th-form-card/index.js

@@ -0,0 +1,3 @@
+export { ThFormCard } from './th-form-card';
+export { ThFormRow } from './th-form-row';
+//# sourceMappingURL=index.js.map

package/dist/components/th-form-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/th-form-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/th-form-card/th-form-card.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, TemplateResult } from 'lit';
+import '../button/button';
+import './th-form-row';
+export type FormCardButtonVariant = 'primary' | 'secondary' | 'alternate' | 'destructive' | 'confirmation';
+/**
+ * A form layout card for use inside a modal (or standalone).
+ *
+ * Compose with `trailhand-form-row` for multi-section forms with optional
+ * section titles and per-row column counts. For simple flat forms, slot fields
+ * directly and use the `columns` prop.
+ *
+ * @fires form-card-submit - Fired when the primary action button is clicked
+ * @fires form-card-cancel - Fired when the cancel button is clicked
+ *
+ * @slot - `trailhand-form-row` elements or direct form fields
+ */
+export declare class ThFormCard extends LitElement {
+    /** Number of equal-width columns for the form content grid */
+    columns: number;
+    /** Show a box shadow (useful when used outside a modal) */
+    shadow: boolean;
+    /** Show a loading spinner and hide content */
+    loading: boolean;
+    /** Primary action button label. If empty, no button row is rendered. */
+    buttonLabel: string;
+    /** Variant for the primary action button */
+    buttonVariant: FormCardButtonVariant;
+    /** Disables the primary action button */
+    buttonDisabled: boolean;
+    /** Cancel button label. If empty, no cancel button is rendered. */
+    cancelLabel: string;
+    static styles: import("lit").CSSResult;
+    private _handleSubmit;
+    private _handleCancel;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=th-form-card.d.ts.map

package/dist/components/th-form-card/th-form-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"th-form-card.d.ts","sourceRoot":"","sources":["../../../src/components/th-form-card/th-form-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAErE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE3G;;;;;;;;;;;GAWG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,8DAA8D;IAClC,OAAO,SAAK;IAExC,2DAA2D;IACf,MAAM,UAAS;IAE3D,8CAA8C;IACjB,OAAO,UAAS;IAE7C,wEAAwE;IACjB,WAAW,SAAM;IAExE,4CAA4C;IACa,aAAa,EAAE,qBAAqB,CAAa;IAE1G,yCAAyC;IACkB,cAAc,UAAS;IAElF,mEAAmE;IACZ,WAAW,SAAM;IAExE,OAAgB,MAAM,0BA8DpB;IAEF,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;IAIZ,MAAM,IAAI,cAAc;CAiClC"}

package/dist/components/th-form-card/th-form-card.js

@@ -0,0 +1,165 @@
+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 '../button/button';
+import './th-form-row';
+/**
+ * A form layout card for use inside a modal (or standalone).
+ *
+ * Compose with `trailhand-form-row` for multi-section forms with optional
+ * section titles and per-row column counts. For simple flat forms, slot fields
+ * directly and use the `columns` prop.
+ *
+ * @fires form-card-submit - Fired when the primary action button is clicked
+ * @fires form-card-cancel - Fired when the cancel button is clicked
+ *
+ * @slot - `trailhand-form-row` elements or direct form fields
+ */
+export class ThFormCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Number of equal-width columns for the form content grid */
+        this.columns = 1;
+        /** Show a box shadow (useful when used outside a modal) */
+        this.shadow = false;
+        /** Show a loading spinner and hide content */
+        this.loading = false;
+        /** Primary action button label. If empty, no button row is rendered. */
+        this.buttonLabel = '';
+        /** Variant for the primary action button */
+        this.buttonVariant = 'primary';
+        /** Disables the primary action button */
+        this.buttonDisabled = false;
+        /** Cancel button label. If empty, no cancel button is rendered. */
+        this.cancelLabel = '';
+    }
+    _handleSubmit() {
+        this.dispatchEvent(new CustomEvent('form-card-submit', { bubbles: true, composed: true }));
+    }
+    _handleCancel() {
+        this.dispatchEvent(new CustomEvent('form-card-cancel', { bubbles: true, composed: true }));
+    }
+    render() {
+        if (this.loading) {
+            return html `
+        <div class="form-card form-card--loading" part="card">
+          <div class="form-card__spinner"></div>
+        </div>
+      `;
+        }
+        return html `
+      <div class="form-card" part="card">
+        <div
+          class=${`form-card__content${this.columns > 1 ? ' form-card__content--grid' : ''}`}
+          part="content"
+          style=${this.columns > 1 ? `--_columns: ${this.columns}` : ''}
+        >
+          <slot></slot>
+        </div>
+        ${this.buttonLabel || this.cancelLabel
+            ? html `
+              <div class="form-card__actions" part="actions">
+                ${this.cancelLabel
+                ? html `<trailhand-button variant="secondary" @button-click=${this._handleCancel}>${this.cancelLabel}</trailhand-button>`
+                : nothing}
+                ${this.buttonLabel
+                ? html `<trailhand-button variant=${this.buttonVariant} ?disabled=${this.buttonDisabled} @button-click=${this._handleSubmit}>${this.buttonLabel}</trailhand-button>`
+                : nothing}
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+}
+ThFormCard.styles = css `
+    :host {
+      display: block;
+    }
+
+    .form-card {
+      display: flex;
+      flex-direction: column;
+      font-family: var(--font-family, 'Poppins', sans-serif);
+      background: var(--th-form-card-bg, transparent);
+      border-radius: var(--th-form-card-radius, 8px);
+      border: none;
+    }
+
+    :host([shadow]) .form-card {
+      background: var(--th-form-card-shadow-bg, #ffffff);
+      padding: var(--th-form-card-padding, 24px);
+      box-shadow: var(--th-form-card-shadow, 0 4px 16px rgba(0, 0, 0, 0.1));
+    }
+
+    /* Default: stack rows vertically when using trailhand-form-row children */
+    .form-card__content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--th-form-card-gap, 24px);
+    }
+
+    /* Flat mode: direct fields without rows — driven by the columns prop */
+    .form-card__content--grid {
+      display: grid;
+      grid-template-columns: repeat(var(--_columns), 1fr);
+      gap: var(--th-form-card-gap, 16px);
+    }
+
+    .form-card__actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      margin-top: 24px;
+    }
+
+    /* Loading */
+    .form-card--loading {
+      min-height: 160px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .form-card__spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], ThFormCard.prototype, "columns", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ThFormCard.prototype, "shadow", void 0);
+__decorate([
+    property({ type: Boolean })
+], ThFormCard.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, attribute: 'button-label' })
+], ThFormCard.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'button-variant' })
+], ThFormCard.prototype, "buttonVariant", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'button-disabled' })
+], ThFormCard.prototype, "buttonDisabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'cancel-label' })
+], ThFormCard.prototype, "cancelLabel", void 0);
+customElements.define('trailhand-form-card', ThFormCard);
+//# sourceMappingURL=th-form-card.js.map

package/dist/components/th-form-card/th-form-card.js.map

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

package/dist/components/th-form-card/th-form-row.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * A section row within a `trailhand-form-card`. Provides an optional title
+ * and a configurable CSS-grid for its form fields.
+ *
+ * @slot - Default slot for form fields, laid out in a grid based on the `columns` prop
+ */
+export declare class ThFormRow extends LitElement {
+    /** Optional section title displayed above the field grid */
+    title: string;
+    /** Number of equal-width columns for this row's field grid */
+    columns: number;
+    static styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=th-form-row.d.ts.map

package/dist/components/th-form-card/th-form-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"th-form-row.d.ts","sourceRoot":"","sources":["../../../src/components/th-form-card/th-form-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAGrE;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,4DAA4D;IAChC,KAAK,SAAM;IAEvC,8DAA8D;IAClC,OAAO,SAAK;IAExC,OAAgB,MAAM,0BAwBpB;IAEO,MAAM,IAAI,cAAc;CAYlC"}

package/dist/components/th-form-card/th-form-row.js

@@ -0,0 +1,68 @@
+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';
+/**
+ * A section row within a `trailhand-form-card`. Provides an optional title
+ * and a configurable CSS-grid for its form fields.
+ *
+ * @slot - Default slot for form fields, laid out in a grid based on the `columns` prop
+ */
+export class ThFormRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Optional section title displayed above the field grid */
+        this.title = '';
+        /** Number of equal-width columns for this row's field grid */
+        this.columns = 1;
+    }
+    render() {
+        return html `
+      <div class="form-row" part="row">
+        ${this.title
+            ? html `<p class="form-row__title" part="title">${this.title}</p>`
+            : nothing}
+        <div class="form-row__content" part="content" style="--_columns: ${this.columns}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+ThFormRow.styles = css `
+    :host {
+      display: block;
+    }
+
+    .form-row {
+      display: flex;
+      flex-direction: column;
+      gap: var(--th-form-row-gap, 8px);
+      font-family: var(--font-family, 'Poppins', sans-serif);
+    }
+
+    .form-row__title {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--th-form-row-title-color, #111827);
+    }
+
+    .form-row__content {
+      display: grid;
+      grid-template-columns: repeat(var(--_columns), 1fr);
+      gap: var(--th-form-row-field-gap, 16px);
+    }
+  `;
+__decorate([
+    property({ type: String })
+], ThFormRow.prototype, "title", void 0);
+__decorate([
+    property({ type: Number })
+], ThFormRow.prototype, "columns", void 0);
+customElements.define('trailhand-form-row', ThFormRow);
+//# sourceMappingURL=th-form-row.js.map

package/dist/components/th-form-card/th-form-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"th-form-row.js","sourceRoot":"","sources":["../../../src/components/th-form-card/th-form-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE,4DAA4D;QAChC,UAAK,GAAG,EAAE,CAAC;QAEvC,8DAA8D;QAClC,YAAO,GAAG,CAAC,CAAC;IAwC1C,CAAC;IAZU,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,2CAA2C,IAAI,CAAC,KAAK,MAAM;YACjE,CAAC,CAAC,OAAO;2EACwD,IAAI,CAAC,OAAO;;;;KAIlF,CAAC;IACJ,CAAC;;AArCe,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwB3B,AAxBqB,CAwBpB;AA7B0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AAGX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAa;AA0C1C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC"}

package/dist/index.d.ts

@@ -5,8 +5,10 @@ export * from './components/button';
 export * from './components/icon';
 export * from './components/th-tag';
 export * from './components/th-card';
+export * from './components/th-form-card';
 export * from './components/progress-bar';
 export * from './components/modal';
+export * from './components/popover';
 export * from './components/checkbox';
 export * from './components/text-input';
 export * from './components/selector';

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;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,SAAS,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;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -6,8 +6,10 @@ export * from './components/button';
 export * from './components/icon';
 export * from './components/th-tag';
 export * from './components/th-card';
+export * from './components/th-form-card';
 export * from './components/progress-bar';
 export * from './components/modal';
+export * from './components/popover';
 export * from './components/checkbox';
 export * from './components/text-input';
 export * from './components/selector';

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;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AAEtC,mBAAmB;AACnB,cAAc,SAAS,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;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AAEtC,mBAAmB;AACnB,cAAc,SAAS,CAAC"}

package/dist/styles/colors.css

@@ -146,6 +146,19 @@
   /* Shadow colors using opacity */
   --th-color-shadow: rgba(0, 0, 0, 0.1);
   --th-color-shadow-medium: rgba(0, 0, 0, 0.15);
+
+  /* Form Card */
+  --th-form-card-bg: transparent;
+  --th-form-card-shadow-bg: var(--th-color-white);
+  --th-form-card-radius: 8px;
+  --th-form-card-padding: 24px;
+  --th-form-card-shadow: 0 4px 16px var(--th-color-shadow);
+  --th-form-card-gap: 24px;
+
+  /* Form Row */
+  --th-form-row-title-color: var(--th-color-text-primary);
+  --th-form-row-gap: 8px;
+  --th-form-row-field-gap: 16px;
 }
 
 /* Dark Theme Overrides */
@@ -216,4 +229,11 @@
   --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);
+
+  /* Form Card */
+  --th-form-card-shadow-bg: var(--th-color-grey-700);
+  --th-form-card-shadow: 0 4px 16px var(--th-color-shadow-medium);
+
+  /* Form Row */
+  --th-form-row-title-color: var(--th-color-grey-100);
 }

package/package.json

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