@krumio/trailhand-ui 1.5.0 → 1.7.0

package/package.json

@@ -1,32 +1,20 @@
 {
   "name": "@krumio/trailhand-ui",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "type": "module",
   "description": "Reusable web components built with Lit Element",
-  "main": "./dist/toggle-switch.js",
-  "module": "./dist/toggle-switch.js",
-  "types": "./dist/toggle-switch.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/toggle-switch.d.ts",
-      "default": "./dist/toggle-switch.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
-    "./toggle-switch": {
-      "types": "./dist/toggle-switch.d.ts",
-      "default": "./dist/toggle-switch.js"
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "default": "./dist/components/*/index.js"
     },
-    "./data-table": {
-      "types": "./dist/data-table.d.ts",
-      "default": "./dist/data-table.js"
-    },
-    "./action-menu": {
-      "types": "./dist/action-menu.d.ts",
-      "default": "./dist/action-menu.js"
-    },
-    "./button": {
-      "types": "./dist/Button.d.ts",
-      "default": "./dist/Button.js"
-    }
+    "./styles/*": "./dist/styles/*"
   },
   "files": [
     "dist",
@@ -37,14 +25,19 @@
     "access": "public"
   },
   "scripts": {
-    "start": "vite",
-    "build": "tsc",
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/colors.css dist/styles/colors.css",
     "build:demo": "vite build",
     "typecheck": "tsc --noEmit",
     "typecheck:watch": "tsc --noEmit --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "test": "vitest",
+    "test:unit": "vitest --project unit",
+    "test:storybook": "vitest --project storybook",
+    "test:run": "vitest run"
   },
   "repository": {
     "type": "git",
@@ -60,22 +53,26 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@iconify/icons-heroicons": "^1.2.9",
     "iconify-icon": "^3.0.2",
     "lit": "^3.3.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
     "@storybook/addon-a11y": "^10.2.0",
     "@storybook/addon-docs": "^10.2.0",
     "@storybook/addon-vitest": "^10.2.0",
     "@storybook/web-components-vite": "^10.2.0",
     "@types/node": "^25.0.3",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17",
+    "chromatic": "^15.0.0",
+    "playwright": "^1.57.0",
     "storybook": "^10.2.0",
     "typescript": "^5.9.3",
     "vite": "^6.4.1",
-    "vitest": "^4.0.17",
-    "playwright": "^1.57.0",
-    "@vitest/browser-playwright": "^4.0.17",
-    "@vitest/coverage-v8": "^4.0.17"
+    "vitest": "^4.0.17"
   }
 }

package/dist/Button.d.ts

@@ -1,15 +0,0 @@
-import { TemplateResult } from 'lit';
-import './button.css';
-/**
- * Props for the Button component
- */
-export interface ButtonProps {
-    primary?: boolean;
-    backgroundColor?: string | null;
-    size?: 'small' | 'medium' | 'large';
-    label: string;
-    onClick?: (e: Event) => void;
-}
-/** Primary UI component for user interaction */
-export declare const Button: ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => TemplateResult;
-//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../Components/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC9B;AAED,gDAAgD;AAChD,eAAO,MAAM,MAAM,GAAI,oDAMpB,WAAW,KAAG,cAahB,CAAC"}

package/dist/Button.js

@@ -1,18 +0,0 @@
-import { html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
-import './button.css';
-/** Primary UI component for user interaction */
-export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
-    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-    return html `
-    <button
-      type="button"
-      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
-      style=${styleMap({ backgroundColor })}
-      @click=${onClick}
-    >
-      ${label}
-    </button>
-  `;
-};
-//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../Components/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,cAAc,CAAC;AAatB,gDAAgD;AAChD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,OAAO,EACP,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACK,EAAkB,EAAE;IAChC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;IAEnF,OAAO,IAAI,CAAA;;;cAGC,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,IAAI,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;cAC7E,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;eAC5B,OAAO;;QAEd,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC"}

package/dist/Header.d.ts

@@ -1,15 +0,0 @@
-import { TemplateResult } from 'lit';
-import './header.css';
-/**
- * Props for the Header component
- */
-export interface HeaderProps {
-    user?: {
-        name?: string;
-    } | null;
-    onLogin?: (e: Event) => void;
-    onLogout?: (e: Event) => void;
-    onCreateAccount?: (e: Event) => void;
-}
-export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => TemplateResult;
-//# sourceMappingURL=Header.d.ts.map

package/dist/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../Components/Header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,MAAM,GAAI,8CAKpB,WAAW,KAAG,cAuChB,CAAC"}

package/dist/Header.js

@@ -1,44 +0,0 @@
-import { html } from 'lit';
-import { Button } from './Button';
-import './header.css';
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html `
-  <header>
-    <div class="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        ${user
-    ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
-    : html `${Button({
-        size: 'small',
-        onClick: onLogin,
-        label: 'Log in',
-    })}
-            ${Button({
-        primary: true,
-        size: 'small',
-        onClick: onCreateAccount,
-        label: 'Sign up',
-    })}`}
-      </div>
-    </div>
-  </header>
-`;
-//# sourceMappingURL=Header.js.map

package/dist/Header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../Components/Header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,cAAc,CAAC;AAYtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,eAAe,EACH,EAAkB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;UAuB7B,IAAI;IACJ,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAChE,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,CAAC;QACZ,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC;cACA,MAAM,CAAC;QACP,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,SAAS;KACjB,CAAC,EAAE;;;;CAIf,CAAC"}

package/dist/Page.d.ts

@@ -1,9 +0,0 @@
-import { TemplateResult } from 'lit';
-import { HeaderProps } from './Header';
-import './page.css';
-/**
- * Props for the Page component (extends HeaderProps)
- */
-export type PageProps = HeaderProps;
-export declare const Page: ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => TemplateResult;
-//# sourceMappingURL=Page.d.ts.map

package/dist/Page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../Components/Page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC;AAEpC,eAAO,MAAM,IAAI,GAAI,8CAKlB,SAAS,KAAG,cAwDd,CAAC"}

package/dist/Page.js

@@ -1,61 +0,0 @@
-import { html } from 'lit';
-import { Header } from './Header';
-import './page.css';
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html `
-  <article>
-    ${Header({
-    user,
-    onLogin,
-    onLogout,
-    onCreateAccount,
-})}
-
-    <section class="storybook-page">
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong> </a
-        >process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-          Storybook tutorials
-        </a>
-        . Read more in the
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
-        .
-      </p>
-      <div class="tip-wrapper">
-        <span class="tip">Tip</span> Adjust the width of the canvas with the
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-`;
-//# sourceMappingURL=Page.js.map

package/dist/Page.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../Components/Page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,YAAY,CAAC;AAOpB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,eAAe,EACL,EAAkB,EAAE,CAAC,IAAI,CAAA;;MAE/B,MAAM,CAAC;IACP,IAAI;IACJ,OAAO;IACP,QAAQ;IACR,eAAe;CAChB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDL,CAAC"}

package/dist/action-menu.d.ts

@@ -1,79 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-/**
- * Type definition for resource data
- */
-interface ResourceData {
-    [key: string]: any;
-    availableActions?: ActionMenuItem[];
-}
-/**
- * Type definition for action menu items
- */
-export interface ActionMenuItem {
-    label?: string;
-    action?: (resource: ResourceData) => void;
-    enabled?: boolean | ((resource: ResourceData) => boolean);
-    visible?: boolean | ((resource: ResourceData) => boolean);
-    danger?: boolean;
-    divider?: boolean;
-}
-/**
- * A dropdown action menu component for displaying contextual actions.
- * Typically used in table rows or cards to provide action options.
- */
-export declare class ActionMenu extends LitElement {
-    actions: ActionMenuItem[];
-    resource: ResourceData;
-    disabled: boolean;
-    private _isOpen;
-    private _boundHandleClickOutside;
-    static styles: import("lit").CSSResult;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Handle clicks outside the menu to close it
-     * @param e - The click event
-     * @private
-     */
-    private _handleClickOutside;
-    /**
-     * Toggle the dropdown menu open/closed
-     * @param e - The click event
-     * @private
-     */
-    private _toggleMenu;
-    /**
-     * Handle action click
-     * @param e - The click event
-     * @param action - The action object
-     * @private
-     */
-    private _handleActionClick;
-    /**
-     * Check if an action is enabled
-     * @param action - The action object
-     * @returns boolean
-     * @private
-     */
-    private _isActionEnabled;
-    /**
-     * Render the three-dots icon
-     * @returns TemplateResult
-     * @private
-     */
-    private _renderIcon;
-    /**
-     * Get actions to display
-     * @returns Array of actions
-     * @private
-     */
-    private _getActions;
-    /**
-     * Render the component
-     * @returns TemplateResult
-     */
-    render(): TemplateResult;
-}
-export {};
-//# sourceMappingURL=action-menu.d.ts.map

package/dist/action-menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../Components/action-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;GAEG;AACH,UAAU,YAAY;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,gBAAgB,CAAC,EAAE,cAAc,EAAE,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;IAC1D,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,UAAU;IAExC,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,QAAQ,EAAE,YAAY,CAAM;IAG5B,QAAQ,UAAS;IAGjB,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,wBAAwB,CAAqB;IAErD,OAAgB,MAAM,0BAkHpB;;IAOO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAOnB;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAQxB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAUnB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAYnB;;;OAGG;IACM,MAAM,IAAI,cAAc;CAuElC"}