@krumio/trailhand-ui 1.7.0 → 1.8.1

package/README.md

@@ -31,22 +31,22 @@ Trailhand UI includes a design system with CSS custom properties. Import `colors
 
 ```css
 /* Available variables */
---color-primary: #3d98d3;
---color-white: #FFFFFF;
---color-black: #000000;
+--th-color-primary: #3d98d3;
+--th-color-white: #FFFFFF;
+--th-color-black: #000000;
 
 /* Greyscale */
---color-grey-100 through --color-grey-800
+--th-color-grey-100 through --th-color-grey-800
 
 /* Semantic aliases */
---color-text-primary: #212121;
---color-text-secondary: #636363;
---color-text-muted: #8D8D8D;
---color-background: #FFFFFF;
---color-border: #D7D7D7;
---color-error: #9F3A3A;
---color-success: #30AC66;
---color-warning: #D3C255;
+--th-color-text-primary: #212121;
+--th-color-text-secondary: #636363;
+--th-color-text-muted: #8D8D8D;
+--th-color-background: #FFFFFF;
+--th-color-border: #D7D7D7;
+--th-color-error: #9F3A3A;
+--th-color-success: #30AC66;
+--th-color-warning: #D3C255;
 ```
 
 ### Theming
@@ -55,7 +55,7 @@ Override any variable to customize the look:
 
 ```css
 :root {
-  --color-primary: #your-brand-color;
+  --th-color-primary: #your-brand-color;
 }
 ```
 

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

@@ -1 +1 @@
-{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../../src/components/action-menu/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;IAsB1B;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAQxB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAUnB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACM,MAAM,IAAI,cAAc;CAqFlC"}
+{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../../src/components/action-menu/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,0BAmHpB;;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;IAsB1B;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAQxB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAUnB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACM,MAAM,IAAI,cAAc;CAsFlC"}

package/dist/components/action-menu/action-menu.js

@@ -159,6 +159,7 @@ export class ActionMenu extends LitElement {
         @click=${this._toggleMenu}
         aria-haspopup="true"
         aria-expanded=${this._isOpen}
+        aria-label="Actions"
       >
         ${this._renderIcon()}
       </button>
@@ -205,6 +206,7 @@ ActionMenu.styles = css `
     :host {
       display: inline-block;
       position: relative;
+      font-family: var(--font-family, 'Poppins', sans-serif);
     }
 
     .action-menu__button {
@@ -214,17 +216,17 @@ ActionMenu.styles = css `
       width: 32px;
       height: 32px;
       padding: 0;
-      border: 1px solid var(--border, var(--color-border, #D7D7D7));
+      border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
       border-radius: 4px;
-      background-color: var(--body-bg, var(--color-white, #FFFFFF));
-      color: var(--body-text, var(--color-text-primary, #212121));
+      background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
       cursor: pointer;
       transition: all 0.2s;
     }
 
     .action-menu__button:hover:not(:disabled) {
-      background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
-      border-color: var(--link, var(--color-primary, #3d98d3));
+      background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
+      border-color: var(--link, var(--th-color-primary, #3d98d3));
     }
 
     .action-menu__button:disabled {
@@ -243,8 +245,8 @@ ActionMenu.styles = css `
       top: 100%;
       margin-top: 4px;
       min-width: 180px;
-      background-color: var(--body-bg, var(--color-white, #FFFFFF));
-      border: 1px solid var(--border, var(--color-border, #D7D7D7));
+      background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
+      border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
       border-radius: 4px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       z-index: 1000;
@@ -279,7 +281,7 @@ ActionMenu.styles = css `
       padding: 0.5rem 1rem;
       border: none;
       background: none;
-      color: var(--body-text, var(--color-text-primary, #212121));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
       font-size: 14px;
       text-align: left;
       cursor: pointer;
@@ -287,7 +289,7 @@ ActionMenu.styles = css `
     }
 
     .action-menu__action:hover:not(:disabled) {
-      background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
+      background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
     }
 
     .action-menu__action:disabled {
@@ -296,7 +298,7 @@ ActionMenu.styles = css `
     }
 
     .action-menu__action--danger {
-      color: var(--error, var(--color-error, #9F3A3A));
+      color: var(--error, var(--th-color-error, #9F3A3A));
     }
 
     .action-menu__action--danger:hover:not(:disabled) {
@@ -306,13 +308,13 @@ ActionMenu.styles = css `
     .action-menu__divider {
       height: 1px;
       margin: 0.5rem 0;
-      background-color: var(--border, var(--color-border, #D7D7D7));
+      background-color: var(--border, var(--th-color-border, #D7D7D7));
     }
 
     .action-menu__empty {
       padding: 1rem;
       text-align: center;
-      color: var(--muted, var(--color-text-muted, #8D8D8D));
+      color: var(--muted, var(--th-color-text-muted, #8D8D8D));
       font-size: 13px;
     }
   `;

package/dist/components/action-menu/action-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../../src/components/action-menu/action-menu.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../../src/components/action-menu/action-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAsBpD;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAoIxC;QACE,KAAK,EAAE,CAAC;QAnIV,YAAO,GAAqB,EAAE,CAAC;QAG/B,aAAQ,GAAiB,EAAE,CAAC;QAG5B,aAAQ,GAAG,KAAK,CAAC;QAGT,YAAO,GAAG,KAAK,CAAC;QA2HtB,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;IACpE,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;IACvE,CAAC;IAED;;;;OAIG;IACK,mBAAmB,CAAC,CAAQ;QAClC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAc,CAAC;QAChC,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,WAAW,CAAC,CAAQ;QAC1B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,kBAAkB,CAAC,CAAQ,EAAE,MAAsB;QACzD,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YAErB,wBAAwB;YACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;aAC5C,CAAC,CACH,CAAC;YAEF,kCAAkC;YAClC,IAAI,MAAM,CAAC,MAAM,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;gBACzD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,gBAAgB,CAAC,MAAsB;QAC7C,IAAI,CAAC,MAAM,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QACjC,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YACzC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC;IAED;;;;OAIG;IACK,WAAW;QACjB,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACK,WAAW;QACjB,+CAA+C;QAC/C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5C,OAAO,IAAI,CAAC,OAAO,CAAC;QACtB,CAAC;QACD,uDAAuD;QACvD,IACE,IAAI,CAAC,QAAQ;YACb,OAAO,IAAI,CAAC,QAAQ,CAAC,gBAAgB,KAAK,WAAW,EACrD,CAAC;YACD,OAAO,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,EAAE,CAAC;QAC9C,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED;;;OAGG;IACM,MAAM;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEtC,0CAA0C;QAC1C,IAAI,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE;YAChD,oCAAoC;YACpC,IAAI,MAAM,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAC;YAEhC,yBAAyB;YACzB,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;gBACjC,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;oBACzC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACvC,CAAC;gBACD,OAAO,MAAM,CAAC,OAAO,CAAC;YACxB,CAAC;YAED,mEAAmE;YACnE,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;gBAC7D,OAAO,KAAK,CAAC;YACf,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,4DAA4D;QAC5D,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;YAC5D,IAAI,CAAC,MAAM,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAC;YACjC,0BAA0B;YAC1B,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,KAAK,CAAC;YAC1D,oCAAoC;YACpC,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,OAAO,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,OAAO;gBAAE,OAAO,KAAK,CAAC;YACrE,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,WAAW;;wBAET,IAAI,CAAC,OAAO;;;UAG1B,IAAI,CAAC,WAAW,EAAE;;;;uCAIW,IAAI,CAAC,OAAO;YACzC,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,EAAE;;UAEJ,cAAc,CAAC,MAAM,KAAK,CAAC;YAC3B,CAAC,CAAC,IAAI,CAAA,8DAA8D;YACpE,CAAC,CAAC,IAAI,CAAA;;kBAEE,cAAc,CAAC,GAAG,CAClB,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAA;sBACZ,MAAM,CAAC,OAAO;gBACd,CAAC,CAAC,IAAI,CAAA;;;;;yBAKH;gBACH,CAAC,CAAC,IAAI,CAAA;;;2DAG+B,MAAM,CAAC,MAAM;oBACxC,CAAC,CAAC,6BAA6B;oBAC/B,CAAC,CAAC,EAAE;0CACM,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;uCACjC,CAAC,CAAQ,EAAE,EAAE,CACpB,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC;;;gCAGlC,MAAM,CAAC,KAAK;;;yBAGnB;mBACN,CACF;;aAEJ;;KAER,CAAC;IACJ,CAAC;;AAlUe,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmH3B,AAnHqB,CAmHpB;AAhIF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACK;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAGT;IADP,KAAK,EAAE;2CACgB;AAyU1B,uBAAuB;AACvB,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/button/button.js

@@ -86,55 +86,55 @@ Button.styles = css `
 
     .trailhand-button:disabled {
       cursor: not-allowed;
-      background-color: var(--button-disabled-bg, #e0e0e0);
-      color: var(--button-disabled-color, #a8a8a8);
+      background-color: var(--th-button-disabled-bg, #e0e0e0);
+      color: var(--th-button-disabled-color, #a8a8a8);
       border: none;
     }
 
     .trailhand-button--primary {
-      color: var(--button-primary-color, #fff);
-      background-color: var(--button-primary-bg, #005cb9);
+      color: var(--th-button-primary-color, #fff);
+      background-color: var(--th-button-primary-bg, #005cb9);
     }
 
     .trailhand-button--primary:not(:disabled):hover {
-      background-color: var(--button-primary-bg-hover, #00478e);
+      background-color: var(--th-button-primary-bg-hover, #00478e);
     }
 
     .trailhand-button--secondary {
-      color: var(--button-secondary-color, #005cb9);
-      background-color: var(--button-secondary-bg, #ffffff);
-      border: 1px solid var(--button-secondary-border, #005cb9);
+      color: var(--th-button-secondary-color, #005cb9);
+      background-color: var(--th-button-secondary-bg, #ffffff);
+      border: 1px solid var(--th-button-secondary-border, #005cb9);
     }
 
     .trailhand-button--secondary:not(:disabled):hover {
-      background-color: var(--button-secondary-bg-hover, #f5faff);
+      background-color: var(--th-button-secondary-bg-hover, #f5faff);
     }
 
     .trailhand-button--alternate {
-      color: var(--button-alternate-color, #ffffff);
-      background-color: var(--button-alternate-bg, #3492f1);
+      color: var(--th-button-alternate-color, #ffffff);
+      background-color: var(--th-button-alternate-bg, #3492f1);
     }
 
     .trailhand-button--alternate:not(:disabled):hover {
-      background-color: var(--button-alternate-bg-hover, #156ec8);
+      background-color: var(--th-button-alternate-bg-hover, #156ec8);
     }
 
     .trailhand-button--destructive {
-      color: var(--button-destructive-color, #fff);
-      background-color: var(--button-destructive-bg, #9f3a3a);
+      color: var(--th-button-destructive-color, #fff);
+      background-color: var(--th-button-destructive-bg, #9f3a3a);
     }
 
     .trailhand-button--destructive:not(:disabled):hover {
-      background-color: var(--button-destructive-bg-hover, #731616);
+      background-color: var(--th-button-destructive-bg-hover, #731616);
     }
 
     .trailhand-button--confirmation {
-      color: var(--button-confirmation-color, #fff);
-      background-color: var(--button-confirmation-bg, #30ac66);
+      color: var(--th-button-confirmation-color, #fff);
+      background-color: var(--th-button-confirmation-bg, #30ac66);
     }
 
     .trailhand-button--confirmation:not(:disabled):hover {
-      background-color: var(--button-confirmation-bg-hover, #0f8240);
+      background-color: var(--th-button-confirmation-bg-hover, #0f8240);
     }
 
     .trailhand-button--small {

package/dist/components/data-table/data-table.d.ts

@@ -1,10 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-import '../action-menu/action-menu';
 import 'iconify-icon';
-/**
- * Type definition for formatter functions
- */
-type FormatterFunction = (value: any) => string;
 /**
  * Type definition for sort functions
  */
@@ -33,10 +28,6 @@ export interface DataTableColumn {
     link?: string | LinkFunction;
     linkTarget?: '_self' | '_blank' | '_parent' | '_top';
 }
-/**
- * Data table formatters for common column types
- */
-export declare const dataTableFormatters: Record<string, FormatterFunction>;
 /**
  * A feature-rich data table component with sorting, filtering, and pagination.
  * Supports custom cell rendering, row actions, and various formatters.
@@ -50,8 +41,7 @@ export declare class DataTable extends LitElement {
     paginated: boolean;
     loading: boolean;
     keyField: string;
-    rowActions: boolean;
-    rowActionsWidth: number;
+    renderActions?: (row: RowData) => unknown;
     emptyMessage: string;
     noResultsMessage: string;
     private _searchQuery;

package/dist/components/data-table/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/data-table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,cAAc,CAAC;AAatB;;GAEG;AACH,KAAK,YAAY,GAAG,CAClB,CAAC,EAAE,OAAO,EACV,CAAC,EAAE,OAAO,EACV,SAAS,EAAE,KAAK,GAAG,MAAM,KACtB,MAAM,CAAC;AAEZ;;GAEG;AACH,KAAK,YAAY,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC;AAE7C;;GAEG;AACH,UAAU,OAAO;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CACtD;AAED;;;GAGG;AACH,qBAAa,SAAU,SAAQ,UAAU;IAEvC,OAAO,EAAE,eAAe,EAAE,CAAM;IAGhC,IAAI,EAAE,OAAO,EAAE,CAAM;IAGrB,WAAW,SAAM;IAGjB,UAAU,UAAQ;IAGlB,QAAQ,UAAQ;IAGhB,SAAS,UAAQ;IAGjB,OAAO,UAAS;IAGhB,QAAQ,SAAQ;IAGhB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC;IAG1C,YAAY,SAAuB;IAGnC,gBAAgB,SAAsB;IAItC,OAAO,CAAC,YAAY,CAAM;IAG1B,OAAO,CAAC,YAAY,CAAK;IAGzB,OAAO,CAAC,WAAW,CAAuB;IAG1C,OAAO,CAAC,cAAc,CAAyB;IAE/C,OAAgB,MAAM,0BA8NpB;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAIvB;;;;;;OAMG;IACH,OAAO,CAAC,YAAY;IAmBpB;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAgBnB;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAiC1B;;;;;;OAMG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;;;OAIG;IACH,OAAO,KAAK,aAAa,GAexB;IAED;;;;OAIG;IACH,OAAO,KAAK,WAAW,GA6BtB;IAED;;;;OAIG;IACH,OAAO,KAAK,cAAc,GAQzB;IAED;;;;OAIG;IACH,OAAO,KAAK,WAAW,GAKtB;IAED;;;;OAIG;IACH,OAAO,KAAK,eAAe,GAW1B;IAED;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAiBnB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM5B;;OAEG;IACH,QAAQ,IAAI,IAAI;IAIhB;;OAEG;IACH,QAAQ,IAAI,IAAI;IAIhB;;OAEG;IACH,WAAW,IAAI,IAAI;IAInB;;OAEG;IACH,SAAS,IAAI,IAAI;IAKjB;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAkCvB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAS3B;;;OAGG;IACM,MAAM,IAAI,cAAc;CA4JlC"}

package/dist/components/data-table/data-table.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import '../action-menu/action-menu';
+import { dataTableFormatters } from '../../utils/formatters';
 import 'iconify-icon';
 import { addIcon } from 'iconify-icon';
 import chevronUp from '@iconify/icons-heroicons/chevron-up-20-solid';
@@ -18,71 +18,6 @@ addIcon('heroicons:chevron-up-20-solid', chevronUp);
 addIcon('heroicons:chevron-down-20-solid', chevronDown);
 addIcon('heroicons:chevron-left-20-solid', chevronLeft);
 addIcon('heroicons:chevron-right-20-solid', chevronRight);
-/**
- * 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;
-    },
-};
 /**
  * A feature-rich data table component with sorting, filtering, and pagination.
  * Supports custom cell rendering, row actions, and various formatters.
@@ -98,8 +33,6 @@ export class DataTable extends LitElement {
         this.paginated = true;
         this.loading = false;
         this.keyField = 'id';
-        this.rowActions = true;
-        this.rowActionsWidth = 40;
         this.emptyMessage = 'No data available';
         this.noResultsMessage = 'No results found';
         // Internal state
@@ -481,11 +414,11 @@ export class DataTable extends LitElement {
                             </div>
                           </th>
                         `)}
-                      ${this.rowActions
+                      ${this.renderActions
                 ? html `
                             <th
                               class="data-table__th data-table__th--actions"
-                              style="width: ${this.rowActionsWidth}px"
+                              style="width: var(--data-table-actions-width, 40px)"
                             ></th>
                           `
                 : ''}
@@ -497,7 +430,7 @@ export class DataTable extends LitElement {
                           <tr class="data-table__tr">
                             <td
                               class="data-table__td data-table__td--empty"
-                              colspan=${this.rowActions
+                              colspan=${this.renderActions
                     ? this.columns.length + 1
                     : this.columns.length}
                             >
@@ -523,16 +456,12 @@ export class DataTable extends LitElement {
                                     </slot>
                                   </td>
                                 `)}
-                              ${this.rowActions
+                              ${this.renderActions
                     ? html `
                                     <td
                                       class="data-table__td data-table__td--actions"
                                     >
-                                      <slot name="actions" .row=${row}>
-                                        <action-menu
-                                          .resource=${row}
-                                        ></action-menu>
-                                      </slot>
+                                      ${this.renderActions(row)}
                                     </td>
                                   `
                     : ''}
@@ -586,6 +515,7 @@ DataTable.styles = css `
     :host {
       display: block;
       width: 100%;
+      font-family: var(--font-family, 'Poppins', sans-serif);
     }
 
     .data-table {
@@ -605,20 +535,20 @@ DataTable.styles = css `
       width: 100%;
       max-width: 300px;
       padding: 0.5rem 1rem;
-      border: 1px solid var(--border, var(--color-border, #D7D7D7));
+      border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
       border-radius: 4px;
-      background-color: var(--input-bg, var(--color-white, #FFFFFF));
-      color: var(--input-text, var(--color-text-primary, #212121));
+      background-color: var(--input-bg, var(--th-color-white, #FFFFFF));
+      color: var(--input-text, var(--th-color-text-primary, #212121));
       font-size: 14px;
     }
 
     .data-table__search-input:focus {
       outline: none;
-      border-color: var(--primary, var(--color-primary, #3d98d3));
+      border-color: var(--primary, var(--th-color-primary, #3d98d3));
     }
 
     .data-table__search-input::placeholder {
-      color: var(--input-placeholder, var(--color-text-muted, #8D8D8D));
+      color: var(--input-placeholder, var(--th-color-text-muted, #8D8D8D));
     }
 
     .data-table__loading {
@@ -628,14 +558,14 @@ DataTable.styles = css `
       justify-content: center;
       padding: 3rem;
       gap: 1rem;
-      color: var(--body-text, var(--color-text-primary, #212121));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
     }
 
     .data-table__spinner {
       width: 40px;
       height: 40px;
-      border: 4px solid var(--border, var(--color-border, #D7D7D7));
-      border-top-color: var(--primary, var(--color-primary, #3d98d3));
+      border: 4px solid var(--border, var(--th-color-border, #D7D7D7));
+      border-top-color: var(--primary, var(--th-color-primary, #3d98d3));
       border-radius: 50%;
       animation: spin 1s linear infinite;
     }
@@ -647,28 +577,28 @@ DataTable.styles = css `
     }
 
     .data-table__wrapper {
-      border: 1px solid var(--border, var(--color-border, #D7D7D7));
+      border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
       border-radius: 4px;
     }
 
     .data-table__table {
       width: 100%;
       border-collapse: collapse;
-      background-color: var(--body-bg, var(--color-white, #FFFFFF));
+      background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
     }
 
     .data-table__thead {
-      background-color: var(--sortable-table-header-bg, var(--color-grey-100, #FAFAFA));
-      border-bottom: 1px solid var(--border, var(--color-border, #D7D7D7));
+      background-color: var(--sortable-table-header-bg, var(--th-color-grey-100, #FAFAFA));
+      border-bottom: 1px solid var(--border, var(--th-color-border, #D7D7D7));
     }
 
     .data-table__th {
       padding: 0.75rem 1rem;
       text-align: left;
       font-weight: 600;
-      color: var(--body-text, var(--color-text-primary, #212121));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
       white-space: nowrap;
-      border-bottom: 1px solid var(--border, var(--color-border, #D7D7D7));
+      border-bottom: 1px solid var(--border, var(--th-color-border, #D7D7D7));
     }
 
     .data-table__th--sortable {
@@ -677,11 +607,11 @@ DataTable.styles = css `
     }
 
     .data-table__th--sortable:hover {
-      background-color: var(--sortable-table-header-hover-bg, var(--color-grey-200, #EBEBEB));
+      background-color: var(--sortable-table-header-hover-bg, var(--th-color-grey-200, #EBEBEB));
     }
 
     .data-table__th--sorted {
-      background-color: var(--sortable-table-header-sorted-bg, var(--color-grey-200, #EBEBEB));
+      background-color: var(--sortable-table-header-sorted-bg, var(--th-color-grey-200, #EBEBEB));
     }
 
     .data-table__th--actions {
@@ -698,22 +628,22 @@ DataTable.styles = css `
     .data-table__sort-icon {
       display: inline-flex;
       align-items: center;
-      color: var(--muted, var(--color-text-muted, #8D8D8D));
+      color: var(--muted, var(--th-color-text-muted, #8D8D8D));
       width: 16px;
       height: 16px;
       font-size: 16px;
     }
 
     .data-table__tbody {
-      background-color: var(--body-bg, var(--color-white, #FFFFFF));
+      background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
     }
 
     .data-table__tr {
-      border-bottom: 1px solid var(--border, var(--color-border, #D7D7D7));
+      border-bottom: 1px solid var(--border, var(--th-color-border, #D7D7D7));
     }
 
     .data-table__tr:hover {
-      background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
+      background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
     }
 
     .data-table__tr:last-child {
@@ -722,11 +652,11 @@ DataTable.styles = css `
 
     .data-table__td {
       padding: 0.75rem 1rem;
-      color: var(--body-text, var(--color-text-primary, #212121));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
     }
 
     .data-table__td a {
-      color: var(--link, var(--color-primary, #3d98d3));
+      color: var(--link, var(--th-color-primary, #3d98d3));
       text-decoration: none;
     }
 
@@ -737,7 +667,7 @@ DataTable.styles = css `
     .data-table__td--empty {
       text-align: center;
       padding: 2rem;
-      color: var(--muted, var(--color-text-muted, #8D8D8D));
+      color: var(--muted, var(--th-color-text-muted, #8D8D8D));
     }
 
     .data-table__td--actions {
@@ -757,7 +687,7 @@ DataTable.styles = css `
     }
 
     .data-table__pagination-info {
-      color: var(--muted, var(--color-text-muted, #8D8D8D));
+      color: var(--muted, var(--th-color-text-muted, #8D8D8D));
       font-size: 13px;
     }
 
@@ -768,7 +698,7 @@ DataTable.styles = css `
     }
 
     .data-table__pagination-current {
-      color: var(--body-text, var(--color-text-primary, #212121));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
       font-size: 13px;
       min-width: 60px;
       text-align: center;
@@ -781,17 +711,17 @@ DataTable.styles = css `
       width: 32px;
       height: 32px;
       padding: 0;
-      border: 1px solid var(--border, var(--color-border, #D7D7D7));
+      border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
       border-radius: 4px;
-      background-color: var(--body-bg, var(--color-white, #FFFFFF));
-      color: var(--body-text, var(--color-text-primary, #212121));
+      background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
       cursor: pointer;
       transition: all 0.2s;
     }
 
     .data-table__pagination-btn:hover:not(:disabled) {
-      background-color: var(--sortable-table-row-hover-bg, var(--color-grey-100, #FAFAFA));
-      border-color: var(--link, var(--color-primary, #3d98d3));
+      background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
+      border-color: var(--link, var(--th-color-primary, #3d98d3));
     }
 
     .data-table__pagination-btn:disabled {
@@ -829,11 +759,8 @@ __decorate([
     property({ type: String, attribute: 'key-field' })
 ], DataTable.prototype, "keyField", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'row-actions' })
-], DataTable.prototype, "rowActions", void 0);
-__decorate([
-    property({ type: Number, attribute: 'row-actions-width' })
-], DataTable.prototype, "rowActionsWidth", void 0);
+    property({ attribute: false })
+], DataTable.prototype, "renderActions", void 0);
 __decorate([
     property({ type: String, attribute: 'empty-message' })
 ], DataTable.prototype, "emptyMessage", void 0);