@krumio/trailhand-ui 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krumio/trailhand-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "description": "Reusable web components built with Lit Element",
   "main": "./dist/toggle-switch.js",
@@ -37,14 +37,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 +65,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"}

package/dist/action-menu.js

@@ -1,321 +0,0 @@
-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 } from 'lit';
-import { property, state } from 'lit/decorators.js';
-/**
- * A dropdown action menu component for displaying contextual actions.
- * Typically used in table rows or cards to provide action options.
- */
-export class ActionMenu extends LitElement {
-    constructor() {
-        super();
-        this.actions = [];
-        this.resource = {};
-        this.disabled = false;
-        this._isOpen = false;
-        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('click', this._boundHandleClickOutside);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('click', this._boundHandleClickOutside);
-    }
-    /**
-     * Handle clicks outside the menu to close it
-     * @param e - The click event
-     * @private
-     */
-    _handleClickOutside(e) {
-        const target = e.target;
-        if (this._isOpen && !this.contains(target)) {
-            this._isOpen = false;
-        }
-    }
-    /**
-     * Toggle the dropdown menu open/closed
-     * @param e - The click event
-     * @private
-     */
-    _toggleMenu(e) {
-        e.stopPropagation();
-        if (!this.disabled) {
-            this._isOpen = !this._isOpen;
-        }
-    }
-    /**
-     * Handle action click
-     * @param e - The click event
-     * @param action - The action object
-     * @private
-     */
-    _handleActionClick(e, action) {
-        e.stopPropagation();
-        if (this._isActionEnabled(action)) {
-            this._isOpen = false;
-            // Dispatch custom event
-            this.dispatchEvent(new CustomEvent('action-click', {
-                bubbles: true,
-                composed: true,
-                detail: { action, resource: this.resource }
-            }));
-            // Call action handler if provided
-            if (action.action && typeof action.action === 'function') {
-                action.action(this.resource);
-            }
-        }
-    }
-    /**
-     * Check if an action is enabled
-     * @param action - The action object
-     * @returns boolean
-     * @private
-     */
-    _isActionEnabled(action) {
-        if (!action.enabled)
-            return true;
-        if (typeof action.enabled === 'function') {
-            return action.enabled(this.resource);
-        }
-        return action.enabled;
-    }
-    /**
-     * Render the three-dots icon
-     * @returns TemplateResult
-     * @private
-     */
-    _renderIcon() {
-        return html `
-      <svg class="action-menu__icon" viewBox="0 0 16 16" fill="currentColor">
-        <circle cx="2" cy="8" r="1.5" />
-        <circle cx="8" cy="8" r="1.5" />
-        <circle cx="14" cy="8" r="1.5" />
-      </svg>
-    `;
-    }
-    /**
-     * Get actions to display
-     * @returns Array of actions
-     * @private
-     */
-    _getActions() {
-        // If actions are provided explicitly, use them
-        if (this.actions && this.actions.length > 0) {
-            return this.actions;
-        }
-        // Otherwise, try to get from resource.availableActions
-        if (this.resource && typeof this.resource.availableActions !== 'undefined') {
-            return this.resource.availableActions || [];
-        }
-        return [];
-    }
-    /**
-     * Render the component
-     * @returns TemplateResult
-     */
-    render() {
-        const allActions = this._getActions();
-        // Filter by visibility and enabled status
-        let visibleActions = allActions.filter(action => {
-            // Skip dividers in visibility check
-            if (action.divider)
-                return true;
-            // Check visible property
-            if (action.visible !== undefined) {
-                if (typeof action.visible === 'function') {
-                    return action.visible(this.resource);
-                }
-                return action.visible;
-            }
-            // If no visible property, check enabled (hide if explicitly false)
-            if (action.enabled !== undefined && action.enabled === false) {
-                return false;
-            }
-            return true;
-        });
-        // Remove consecutive dividers and trailing/leading dividers
-        visibleActions = visibleActions.filter((action, index, arr) => {
-            if (!action.divider)
-                return true;
-            // Remove if first or last
-            if (index === 0 || index === arr.length - 1)
-                return false;
-            // Remove if next to another divider
-            if (arr[index - 1]?.divider || arr[index + 1]?.divider)
-                return false;
-            return true;
-        });
-        return html `
-      <button
-        class="action-menu__button"
-        ?disabled=${this.disabled}
-        @click=${this._toggleMenu}
-        aria-haspopup="true"
-        aria-expanded=${this._isOpen}
-      >
-        ${this._renderIcon()}
-      </button>
-
-      <div class="action-menu__dropdown ${this._isOpen ? 'action-menu__dropdown--open' : ''}">
-        ${visibleActions.length === 0 ? html `
-          <div class="action-menu__empty">No actions available</div>
-        ` : html `
-          <ul class="action-menu__list" role="menu">
-            ${visibleActions.map((action) => html `
-              ${action.divider ? html `
-                <li class="action-menu__divider" role="separator"></li>
-              ` : html `
-                <li class="action-menu__item" role="none">
-                  <button
-                    class="action-menu__action ${action.danger ? 'action-menu__action--danger' : ''}"
-                    ?disabled=${!this._isActionEnabled(action)}
-                    @click=${(e) => this._handleActionClick(e, action)}
-                    role="menuitem"
-                  >
-                    ${action.label}
-                  </button>
-                </li>
-              `}
-            `)}
-          </ul>
-        `}
-      </div>
-    `;
-    }
-}
-ActionMenu.styles = css `
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    .action-menu__button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      border: 1px solid var(--border, #ddd);
-      border-radius: 4px;
-      background-color: var(--body-bg, #fff);
-      color: var(--body-text, #333);
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .action-menu__button:hover:not(:disabled) {
-      background-color: var(--sortable-table-row-hover-bg, #f5f5f5);
-      border-color: var(--link, #007bff);
-    }
-
-    .action-menu__button:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    .action-menu__icon {
-      width: 16px;
-      height: 16px;
-    }
-
-    .action-menu__dropdown {
-      position: absolute;
-      right: 0;
-      top: 100%;
-      margin-top: 4px;
-      min-width: 180px;
-      background-color: var(--body-bg, #fff);
-      border: 1px solid var(--border, #ddd);
-      border-radius: 4px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-10px);
-      transition: all 0.2s ease-in-out;
-    }
-
-    .action-menu__dropdown--open {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .action-menu__list {
-      list-style: none;
-      margin: 0;
-      padding: 0.5rem 0;
-    }
-
-    .action-menu__item {
-      margin: 0;
-      padding: 0;
-    }
-
-    .action-menu__action {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      width: 100%;
-      padding: 0.5rem 1rem;
-      border: none;
-      background: none;
-      color: var(--body-text, #333);
-      font-size: 14px;
-      text-align: left;
-      cursor: pointer;
-      transition: background-color 0.15s;
-    }
-
-    .action-menu__action:hover:not(:disabled) {
-      background-color: var(--sortable-table-row-hover-bg, #f5f5f5);
-    }
-
-    .action-menu__action:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    .action-menu__action--danger {
-      color: var(--error, #dc3545);
-    }
-
-    .action-menu__action--danger:hover:not(:disabled) {
-      background-color: rgba(220, 53, 69, 0.1);
-    }
-
-    .action-menu__divider {
-      height: 1px;
-      margin: 0.5rem 0;
-      background-color: var(--border, #ddd);
-    }
-
-    .action-menu__empty {
-      padding: 1rem;
-      text-align: center;
-      color: var(--muted, #999);
-      font-size: 13px;
-    }
-  `;
-__decorate([
-    property({ type: Array })
-], ActionMenu.prototype, "actions", void 0);
-__decorate([
-    property({ type: Object })
-], ActionMenu.prototype, "resource", void 0);
-__decorate([
-    property({ type: Boolean })
-], ActionMenu.prototype, "disabled", void 0);
-__decorate([
-    state()
-], ActionMenu.prototype, "_isOpen", void 0);
-// Register the element
-customElements.define('action-menu', ActionMenu);
-//# sourceMappingURL=action-menu.js.map

package/dist/action-menu.js.map

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