@gravionlabs/helix-ui 22.1.29 → 22.1.30

package/README.md

@@ -1,8 +1,8 @@
 # @gravionlabs/helix-ui
 
 Vanilla Angular components on the Helix design tokens: standalone, signal-based, plain CSS, no runtime
-styling engine, no dependency on `@gravionlabs/helix-core`. It is the long-term replacement of the vendored
-PrimeNG fork (see [ADR 0001](../../docs/adr/0001-styling-foundation.md), epic #523).
+styling engine. It replaced the vendored PrimeNG fork `@gravionlabs/helix-core`
+(see [ADR 0001](../../docs/adr/0001-styling-foundation.md) and [ADR 0002](../../docs/adr/0002-retire-helix-core.md)).
 
 ## Install
 
@@ -13,7 +13,7 @@ npm install @gravionlabs/helix-ui
 ```css
 /* the components */
 @import "@gravionlabs/helix-ui/styles.css";
-/* the tokens the components read; load them in every app, also with the helix-core theme engine */
+/* the tokens the components read; load them in every app */
 @import "@gravionlabs/helix-ui/tokens.css";
 ```
 
@@ -74,9 +74,7 @@ Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-sh
 | `HxSelectButton` | `hx-select-button` | single or multiple, all three forms APIs |
 | `HxSwitch` | `input[hx-switch]` | native checkbox with `role="switch"` |
 
-Selectors, inputs and classes use the prefix `hx` (`hx-button`), so they never clash with `helix-core`'s `h-`
-in an app that uses both while migrating. Both libraries read the same `--h-*` tokens, so a page mixes them
-without a visible seam.
+Selectors, inputs and classes use the prefix `hx` (`hx-button`); the custom properties keep the prefix `--h-`.
 
 ## Rules of this package
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ui",
-  "version": "22.1.29",
+  "version": "22.1.30",
   "description": "Helix UI: vanilla Angular components on the Helix design tokens — plain CSS, no runtime styling engine.",
   "license": "MIT",
   "keywords": [

package/styles.css

@@ -672,7 +672,7 @@
 
   /* breadcrumb */
   /*
-   * Breadcrumb: `<hx-breadcrumb>`. Same look as the helix-core breadcrumb, from the `--h-breadcrumb-*` tokens.
+   * Breadcrumb: `<hx-breadcrumb>`. Styled from the `--h-breadcrumb-*` tokens.
    * The separator is a chevron drawn with a mask, so it follows the token colour.
    */
   .hx-breadcrumb {
@@ -779,9 +779,8 @@
 
   /* button */
   /*
-   * Button: `button[hx-button]` / `a[hx-button]`. Same look as the helix-core button, from the same tokens
-   * (`--h-button-*`). A severity class only maps its tokens onto local `--hx-*` variables; the variant
-   * rules (filled, outlined, text, link) read those, so every severity works with every variant.
+   * Button: `button[hx-button]` / `a[hx-button]`. Styled by the tokens (`--h-button-*`). A severity class only maps its tokens onto local `--hx-*`
+   * variables; the variant rules (filled, outlined, text, link) read those, so every severity works with every variant.
    */
   .hx-button,
   .hx-button-primary {
@@ -1245,8 +1244,8 @@
 
   /* checkbox */
   /*
-   * Checkbox: `input[hx-checkbox]` on a native `<input type="checkbox">`, drawn with CSS. Same look as the
-   * helix-core Checkbox, from the `--h-checkbox-*` tokens. Checked, indeterminate and invalid (`aria-invalid`
+   * Checkbox: `input[hx-checkbox]` on a native `<input type="checkbox">`, drawn with CSS, styled
+   * from the `--h-checkbox-*` tokens. Checked, indeterminate and invalid (`aria-invalid`
    * or `ng-invalid ng-touched`) are styled; the tick is a mask in the icon colour.
    */
   .hx-checkbox {
@@ -2809,7 +2808,7 @@
 
   /* input */
   /*
-   * Text field: `input[hx-input]` and `textarea[hx-input]`. Same look as the helix-core InputText and Textarea,
+   * Text field: `input[hx-input]` and `textarea[hx-input]`, styled
    * from the `--h-inputtext-*` tokens (the Textarea tokens hold the same values).
    * Invalid: `aria-invalid="true"` or Angular's `ng-invalid ng-touched`.
    */
@@ -3653,7 +3652,7 @@
 
   /* multi-select */
   /*
-   * Select: `<hx-multi-select>`. Same look as the helix-core Select, from the `--h-multiselect-*` tokens. The host draws the
+   * Select: `<hx-multi-select>`. Styled from the `--h-multiselect-*` tokens. The host draws the
    * field (border, background, focus ring), the trigger is a button inside it, the panel is a CDK connected
    * overlay (`.hx-multi-select-overlay` is the CDK pane, `.hx-multi-select-panel` its content). The CDK's own overlay
    * container CSS is part of styles.css.
@@ -4287,8 +4286,8 @@
 
   /* radio */
   /*
-   * RadioButton: `input[hx-radio]` on a native `<input type="radio">`, drawn with CSS. Same look as the
-   * helix-core RadioButton, from the `--h-radiobutton-*` tokens.
+   * RadioButton: `input[hx-radio]` on a native `<input type="radio">`, drawn with CSS, styled
+   * from the `--h-radiobutton-*` tokens.
    */
   .hx-radio {
     display: inline-grid;
@@ -4618,7 +4617,7 @@
 
   /* select */
   /*
-   * Select: `<hx-select>`. Same look as the helix-core Select, from the `--h-select-*` tokens. The host draws the
+   * Select: `<hx-select>`. Styled from the `--h-select-*` tokens. The host draws the
    * field (border, background, focus ring), the trigger is a button inside it, the panel is a CDK connected
    * overlay (`.hx-select-overlay` is the CDK pane, `.hx-select-panel` its content). The CDK's own overlay
    * container CSS is part of styles.css.
@@ -5271,7 +5270,7 @@
   /* switch */
   /*
    * ToggleSwitch: `input[hx-switch]` on a native `<input type="checkbox" role="switch">`, drawn with CSS.
-   * Same look as the helix-core ToggleSwitch, from the `--h-toggleswitch-*` tokens: the track is the input, the
+   * Styled from the `--h-toggleswitch-*` tokens: the track is the input, the
    * handle its `::before`.
    */
   .hx-switch {

package/tokens.css

@@ -1,4 +1,4 @@
-/* @gravionlabs/helix-ui: the Helix tokens the components read, from helixPreset (generated by scripts/build-ui-css.mjs; do not edit). Light on :root, dark under .app-dark. */
+/* @gravionlabs/helix-ui: the Helix tokens the components read, from the Helix tokens (generated by scripts/build-ui-css.mjs; do not edit). Light on :root, dark under .app-dark. */
 :root,:host{--h-stone-50:#fafaf9;--h-stone-100:#f5f5f4;--h-stone-200:#e7e5e4;--h-stone-300:#d6d3d1;--h-stone-400:#a8a29e;--h-stone-500:#78716c;--h-stone-600:#57534e;--h-stone-700:#44403c;--h-stone-800:#292524;--h-stone-900:#1c1917;--h-stone-950:#0c0a09;--h-neutral-50:#fafafa;--h-neutral-100:#f5f5f5;--h-neutral-200:#e5e5e5;--h-neutral-300:#d4d4d4;--h-neutral-400:#a3a3a3;--h-neutral-500:#737373;--h-neutral-600:#525252;--h-neutral-700:#404040;--h-neutral-800:#262626;--h-neutral-900:#171717;--h-neutral-950:#0a0a0a;--h-zinc-50:#fafafa;--h-zinc-100:#f4f4f5;--h-zinc-200:#e4e4e7;--h-zinc-300:#d4d4d8;--h-zinc-400:#a1a1aa;--h-zinc-500:#71717a;--h-zinc-600:#52525b;--h-zinc-700:#3f3f46;--h-zinc-800:#27272a;--h-zinc-900:#18181b;--h-zinc-950:#09090b;--h-gray-50:#f9fafb;--h-gray-100:#f3f4f6;--h-gray-200:#e5e7eb;--h-gray-300:#d1d5db;--h-gray-400:#9ca3af;--h-gray-500:#6b7280;--h-gray-600:#4b5563;--h-gray-700:#374151;--h-gray-800:#1f2937;--h-gray-900:#111827;--h-gray-950:#030712;--h-slate-50:#f8fafc;--h-slate-100:#f1f5f9;--h-slate-200:#e2e8f0;--h-slate-300:#cbd5e1;--h-slate-400:#94a3b8;--h-slate-500:#64748b;--h-slate-600:#475569;--h-slate-700:#334155;--h-slate-800:#1e293b;--h-slate-900:#0f172a;--h-slate-950:#020617;--h-rose-50:#faf3f3;--h-rose-100:#f6e7e8;--h-rose-200:#efd4d7;--h-rose-300:#e4b2b7;--h-rose-400:#d88c93;--h-rose-500:#cb6e74;--h-rose-600:#b95b61;--h-rose-700:#9c4a51;--h-rose-800:#823e47;--h-rose-900:#703640;--h-rose-950:#3d1a1f;--h-pink-50:#faf4f7;--h-pink-100:#f6eaf1;--h-pink-200:#eed6e3;--h-pink-300:#e3b6cd;--h-pink-400:#d48daf;--h-pink-500:#c87195;--h-pink-600:#b65d7a;--h-pink-700:#9d4c63;--h-pink-800:#823f52;--h-pink-900:#6c3646;--h-pink-950:#411d27;--h-fuchsia-50:#faf6fc;--h-fuchsia-100:#f5ebf8;--h-fuchsia-200:#ebd7f0;--h-fuchsia-300:#dfb9e5;--h-fuchsia-400:#cf95d8;--h-fuchsia-500:#bd74c7;--h-fuchsia-600:#a55dae;--h-fuchsia-700:#8a4d90;--h-fuchsia-800:#723f76;--h-fuchsia-900:#603661;--h-fuchsia-950:#3e1e3f;--h-purple-50:#f9f6fc;--h-purple-100:#f0eaf7;--h-purple-200:#e4d9f1;--h-purple-300:#d0bde5;--h-purple-400:#b495d6;--h-purple-500:#9973c7;--h-purple-600:#845db6;--h-purple-700:#704d9f;--h-purple-800:#5f4082;--h-purple-900:#4e3469;--h-purple-950:#33204b;--h-violet-50:#f5f4fa;--h-violet-100:#edeaf6;--h-violet-200:#dcd9ef;--h-violet-300:#c2bbe3;--h-violet-400:#a397d3;--h-violet-500:#8573c3;--h-violet-600:#735db6;--h-violet-700:#644fa4;--h-violet-800:#544189;--h-violet-900:#463671;--h-violet-950:#2a214b;--h-indigo-50:#f0f2f9;--h-indigo-100:#e3e7f5;--h-indigo-200:#cdd3eb;--h-indigo-300:#aeb7de;--h-indigo-400:#8a94ce;--h-indigo-500:#6c74be;--h-indigo-600:#555dad;--h-indigo-700:#484e97;--h-indigo-800:#3b407b;--h-indigo-900:#353863;--h-indigo-950:#20203a;--h-blue-50:#f2f6fb;--h-blue-100:#e1e9f4;--h-blue-200:#cbdaed;--h-blue-300:#a9c4e2;--h-blue-400:#81a5d4;--h-blue-500:#6187c5;--h-blue-600:#4b6eb5;--h-blue-700:#3d5ca3;--h-blue-800:#344b84;--h-blue-900:#2f406a;--h-blue-950:#1f2841;--h-sky-50:#f3f8fc;--h-sky-100:#e7f1f7;--h-sky-200:#cbe3ef;--h-sky-300:#a2cee4;--h-sky-400:#7db8d8;--h-sky-500:#67a1c6;--h-sky-600:#5282a6;--h-sky-700:#416886;--h-sky-800:#36576f;--h-sky-900:#2e495c;--h-sky-950:#1c2e3c;--h-cyan-50:#f2fcfd;--h-cyan-100:#dff6f8;--h-cyan-200:#c4ecf1;--h-cyan-300:#a1dfe8;--h-cyan-400:#83cad8;--h-cyan-500:#6faebe;--h-cyan-600:#588b9d;--h-cyan-700:#47707f;--h-cyan-800:#3b5b67;--h-cyan-900:#324b57;--h-cyan-950:#1e313a;--h-teal-50:#f4fbfa;--h-teal-100:#ddf6f0;--h-teal-200:#bdede3;--h-teal-300:#9ddfd2;--h-teal-400:#83c9bc;--h-teal-500:#6eaea3;--h-teal-600:#588c84;--h-teal-700:#466f6a;--h-teal-800:#385956;--h-teal-900:#2f4a47;--h-teal-950:#192c2b;--h-yellow-50:#fdfbf1;--h-yellow-100:#faf8db;--h-yellow-200:#f6efba;--h-yellow-300:#efe19a;--h-yellow-400:#e8d087;--h-yellow-500:#d6b979;--h-yellow-600:#b59260;--h-yellow-700:#8d6b48;--h-yellow-800:#74553b;--h-yellow-900:#624732;--h-yellow-950:#382519;--h-amber-50:#fdfbf2;--h-amber-100:#f9f3db;--h-amber-200:#f2e7b7;--h-amber-300:#ebd697;--h-amber-400:#e5c584;--h-amber-500:#d9aa73;--h-amber-600:#bc875d;--h-amber-700:#996548;--h-amber-800:#7c4f3a;--h-amber-900:#664130;--h-amber-950:#392217;--h-orange-50:#fcf8f2;--h-orange-100:#f8eee1;--h-orange-200:#f0dbc2;--h-orange-300:#e7c29e;--h-orange-400:#dca27a;--h-orange-500:#d48c67;--h-orange-600:#c5775a;--h-orange-700:#a25e48;--h-orange-800:#804a3a;--h-orange-900:#683d30;--h-orange-950:#371e17;--h-red-50:#faf3f3;--h-red-100:#f5e5e5;--h-red-200:#eed1d1;--h-red-300:#e3b2b1;--h-red-400:#d58b88;--h-red-500:#c76e67;--h-red-600:#b55b52;--h-red-700:#984b43;--h-red-800:#7d3e38;--h-red-900:#683632;--h-red-950:#381917;--h-lime-50:#f8fcf0;--h-lime-100:#f0f9de;--h-lime-200:#e1f3c2;--h-lime-300:#cceaa2;--h-lime-400:#b7dc8b;--h-lime-500:#9bc275;--h-lime-600:#799b5c;--h-lime-700:#5c7646;--h-lime-800:#4a5d38;--h-lime-900:#3f4f31;--h-lime-950:#202b18;--h-green-50:#f4fbf6;--h-green-100:#e6f8ec;--h-green-200:#d0f0da;--h-green-300:#aee4bf;--h-green-400:#8cd19e;--h-green-500:#74b881;--h-green-600:#5e9869;--h-green-700:#4a7754;--h-green-800:#3b5e44;--h-green-900:#314d39;--h-green-950:#182a1d;--h-emerald-50:#f2fbf6;--h-emerald-100:#dff5e9;--h-emerald-200:#c3ebd7;--h-emerald-300:#a0dcc1;--h-emerald-400:#82c6a6;--h-emerald-500:#6cad8e;--h-emerald-600:#568c73;--h-emerald-700:#44705e;--h-emerald-800:#35594b;--h-emerald-900:#2b493e;--h-emerald-950:#162923;--h-border-radius-none:0;--h-border-radius-xs:2px;--h-border-radius-sm:4px;--h-border-radius-md:6px;--h-border-radius-lg:8px;--h-border-radius-xl:12px;}
 :root,:host{--h-transition-duration:0.2s;--h-disabled-opacity:0.6;--h-icon-size:1rem;--h-anchor-gutter:2px;--h-overlay-navigation-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--h-overlay-modal-border-radius:var(--h-border-radius-xl);--h-overlay-modal-padding:1.25rem;--h-overlay-modal-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--h-overlay-popover-border-radius:var(--h-border-radius-md);--h-overlay-popover-padding:0.75rem;--h-overlay-popover-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--h-overlay-select-border-radius:var(--h-border-radius-md);--h-overlay-select-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--h-navigation-submenu-icon-size:0.875rem;--h-navigation-submenu-label-padding:0.5rem 0.75rem;--h-navigation-submenu-label-font-weight:600;--h-navigation-item-padding:0.5rem 0.75rem;--h-navigation-item-border-radius:var(--h-border-radius-sm);--h-navigation-item-gap:0.5rem;--h-navigation-list-padding:0.25rem 0.25rem;--h-navigation-list-gap:2px;--h-mask-transition-duration:0.3s;--h-content-border-radius:var(--h-border-radius-md);--h-list-padding:0.25rem 0.25rem;--h-list-gap:2px;--h-list-option-group-padding:0.5rem 0.75rem;--h-list-option-group-font-weight:600;--h-list-option-padding:0.5rem 0.75rem;--h-list-option-border-radius:var(--h-border-radius-sm);--h-list-header-padding:0.5rem 1rem 0.25rem 1rem;--h-form-field-padding-x:0.75rem;--h-form-field-padding-y:0.5rem;--h-form-field-border-radius:var(--h-border-radius-md);--h-form-field-transition-duration:var(--h-transition-duration);--h-form-field-focus-ring-width:0;--h-form-field-focus-ring-style:none;--h-form-field-focus-ring-color:transparent;--h-form-field-focus-ring-offset:0;--h-form-field-focus-ring-shadow:none;--h-form-field-lg-font-size:1.125rem;--h-form-field-lg-padding-x:0.875rem;--h-form-field-lg-padding-y:0.625rem;--h-form-field-sm-font-size:0.875rem;--h-form-field-sm-padding-x:0.625rem;--h-form-field-sm-padding-y:0.375rem;--h-primary-50:var(--h-indigo-50);--h-primary-100:var(--h-indigo-100);--h-primary-200:var(--h-indigo-200);--h-primary-300:var(--h-indigo-300);--h-primary-400:var(--h-indigo-400);--h-primary-500:var(--h-indigo-500);--h-primary-600:var(--h-indigo-600);--h-primary-700:var(--h-indigo-700);--h-primary-800:var(--h-indigo-800);--h-primary-900:var(--h-indigo-900);--h-primary-950:var(--h-indigo-950);--h-focus-ring-width:1px;--h-focus-ring-style:solid;--h-focus-ring-color:var(--h-primary-color);--h-focus-ring-offset:2px;--h-focus-ring-shadow:none;--h-navigation-submenu-icon-color:var(--h-surface-400);--h-navigation-submenu-icon-focus-color:var(--h-surface-500);--h-navigation-submenu-icon-active-color:var(--h-surface-500);--h-navigation-submenu-label-background:transparent;--h-navigation-submenu-label-color:var(--h-text-muted-color);--h-navigation-item-focus-background:var(--h-surface-100);--h-navigation-item-active-background:var(--h-surface-100);--h-navigation-item-color:var(--h-text-color);--h-navigation-item-focus-color:var(--h-text-hover-color);--h-navigation-item-active-color:var(--h-text-hover-color);--h-navigation-item-icon-color:var(--h-surface-400);--h-navigation-item-icon-focus-color:var(--h-surface-500);--h-navigation-item-icon-active-color:var(--h-surface-500);--h-list-option-group-background:transparent;--h-list-option-group-color:var(--h-text-muted-color);--h-list-option-focus-background:var(--h-surface-100);--h-list-option-selected-background:var(--h-highlight-background);--h-list-option-selected-focus-background:var(--h-highlight-focus-background);--h-list-option-color:var(--h-text-color);--h-list-option-focus-color:var(--h-text-hover-color);--h-list-option-selected-color:var(--h-highlight-color);--h-list-option-selected-focus-color:var(--h-highlight-focus-color);--h-list-option-icon-color:var(--h-surface-400);--h-list-option-icon-focus-color:var(--h-surface-500);--h-overlay-modal-background:var(--h-surface-0);--h-overlay-modal-border-color:var(--h-surface-200);--h-overlay-modal-color:var(--h-text-color);--h-overlay-popover-background:var(--h-surface-0);--h-overlay-popover-border-color:var(--h-surface-200);--h-overlay-popover-color:var(--h-text-color);--h-overlay-select-background:var(--h-surface-0);--h-overlay-select-border-color:var(--h-surface-200);--h-overlay-select-color:var(--h-text-color);--h-content-background:var(--h-surface-0);--h-content-hover-background:var(--h-surface-100);--h-content-border-color:var(--h-surface-200);--h-content-color:var(--h-text-color);--h-content-hover-color:var(--h-text-hover-color);--h-text-color:var(--h-surface-600);--h-text-hover-color:var(--h-surface-700);--h-text-muted-color:var(--h-surface-500);--h-text-hover-muted-color:var(--h-surface-600);--h-form-field-background:var(--h-surface-0);--h-form-field-disabled-background:var(--h-surface-200);--h-form-field-filled-background:var(--h-surface-50);--h-form-field-filled-hover-background:var(--h-surface-50);--h-form-field-filled-focus-background:var(--h-surface-50);--h-form-field-border-color:var(--h-surface-300);--h-form-field-hover-border-color:var(--h-surface-400);--h-form-field-focus-border-color:var(--h-primary-color);--h-form-field-invalid-border-color:var(--h-red-400);--h-form-field-color:var(--h-surface-600);--h-form-field-disabled-color:var(--h-surface-500);--h-form-field-placeholder-color:var(--h-surface-500);--h-form-field-invalid-placeholder-color:var(--h-red-600);--h-form-field-float-label-color:var(--h-surface-500);--h-form-field-float-label-focus-color:var(--h-primary-color);--h-form-field-float-label-active-color:var(--h-surface-500);--h-form-field-float-label-invalid-color:var(--h-form-field-invalid-placeholder-color);--h-form-field-icon-color:var(--h-surface-400);--h-form-field-shadow:0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);--h-mask-background:rgba(0,0,0,0.4);--h-mask-color:var(--h-surface-200);--h-highlight-background:var(--h-primary-50);--h-highlight-focus-background:var(--h-primary-100);--h-highlight-color:var(--h-primary-700);--h-highlight-focus-color:var(--h-primary-800);--h-primary-color:var(--h-primary-600);--h-primary-contrast-color:#ffffff;--h-primary-hover-color:var(--h-primary-700);--h-primary-active-color:var(--h-primary-800);--h-surface-0:#ffffff;--h-surface-50:#f6f6f7;--h-surface-100:#ebebef;--h-surface-200:#e2e2e3;--h-surface-300:#c2c2c4;--h-surface-400:#98989f;--h-surface-500:#67676c;--h-surface-600:#3c3c43;--h-surface-700:#2e2e32;--h-surface-800:#202127;--h-surface-900:#1b1b1f;--h-surface-950:#161618;}.app-dark{--h-navigation-submenu-icon-color:var(--h-surface-500);--h-navigation-submenu-icon-focus-color:var(--h-surface-400);--h-navigation-submenu-icon-active-color:var(--h-surface-400);--h-navigation-submenu-label-background:transparent;--h-navigation-submenu-label-color:var(--h-text-muted-color);--h-navigation-item-focus-background:var(--h-surface-800);--h-navigation-item-active-background:var(--h-surface-800);--h-navigation-item-color:var(--h-text-color);--h-navigation-item-focus-color:var(--h-text-hover-color);--h-navigation-item-active-color:var(--h-text-hover-color);--h-navigation-item-icon-color:var(--h-surface-500);--h-navigation-item-icon-focus-color:var(--h-surface-400);--h-navigation-item-icon-active-color:var(--h-surface-400);--h-list-option-group-background:transparent;--h-list-option-group-color:var(--h-text-muted-color);--h-list-option-focus-background:var(--h-surface-800);--h-list-option-selected-background:var(--h-highlight-background);--h-list-option-selected-focus-background:var(--h-highlight-focus-background);--h-list-option-color:var(--h-text-color);--h-list-option-focus-color:var(--h-text-hover-color);--h-list-option-selected-color:var(--h-highlight-color);--h-list-option-selected-focus-color:var(--h-highlight-focus-color);--h-list-option-icon-color:var(--h-surface-500);--h-list-option-icon-focus-color:var(--h-surface-400);--h-overlay-modal-background:var(--h-surface-900);--h-overlay-modal-border-color:var(--h-surface-700);--h-overlay-modal-color:var(--h-text-color);--h-overlay-popover-background:var(--h-surface-900);--h-overlay-popover-border-color:var(--h-surface-700);--h-overlay-popover-color:var(--h-text-color);--h-overlay-select-background:var(--h-surface-900);--h-overlay-select-border-color:var(--h-surface-700);--h-overlay-select-color:var(--h-text-color);--h-content-background:var(--h-surface-900);--h-content-hover-background:var(--h-surface-800);--h-content-border-color:var(--h-surface-700);--h-content-color:var(--h-text-color);--h-content-hover-color:var(--h-text-hover-color);--h-text-color:#dfdfd6;--h-text-hover-color:var(--h-surface-50);--h-text-muted-color:var(--h-surface-400);--h-text-hover-muted-color:var(--h-surface-300);--h-form-field-background:var(--h-surface-950);--h-form-field-disabled-background:var(--h-surface-700);--h-form-field-filled-background:var(--h-surface-800);--h-form-field-filled-hover-background:var(--h-surface-800);--h-form-field-filled-focus-background:var(--h-surface-800);--h-form-field-border-color:var(--h-surface-600);--h-form-field-hover-border-color:var(--h-surface-500);--h-form-field-focus-border-color:var(--h-primary-color);--h-form-field-invalid-border-color:var(--h-red-300);--h-form-field-color:var(--h-text-color);--h-form-field-disabled-color:var(--h-surface-400);--h-form-field-placeholder-color:var(--h-surface-400);--h-form-field-invalid-placeholder-color:var(--h-red-400);--h-form-field-float-label-color:var(--h-surface-400);--h-form-field-float-label-focus-color:var(--h-primary-color);--h-form-field-float-label-active-color:var(--h-surface-400);--h-form-field-float-label-invalid-color:var(--h-form-field-invalid-placeholder-color);--h-form-field-icon-color:var(--h-surface-400);--h-form-field-shadow:0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);--h-mask-background:rgba(0,0,0,0.6);--h-mask-color:var(--h-surface-200);--h-highlight-background:color-mix(in srgb, var(--h-primary-400), transparent 84%);--h-highlight-focus-background:color-mix(in srgb, var(--h-primary-400), transparent 76%);--h-highlight-color:rgba(255,255,255,.87);--h-highlight-focus-color:rgba(255,255,255,.87);--h-primary-color:var(--h-primary-400);--h-primary-contrast-color:var(--h-surface-950);--h-primary-hover-color:var(--h-primary-300);--h-primary-active-color:var(--h-primary-200);--h-surface-0:#ffffff;--h-surface-50:#f6f6f7;--h-surface-100:#ebebef;--h-surface-200:#e2e2e3;--h-surface-300:#c2c2c4;--h-surface-400:#98989f;--h-surface-500:#67676c;--h-surface-600:#3c3c43;--h-surface-700:#2e2e32;--h-surface-800:#202127;--h-surface-900:#1b1b1f;--h-surface-950:#161618;}
 :root,:host{color-scheme:light}.app-dark{color-scheme:dark}

package/types/gravionlabs-helix-ui.d.ts

@@ -467,8 +467,7 @@ interface HxMenuItemCommandEvent {
   item: HxMenuItem;
 }
 /**
- * One entry of a menu, menubar, split button or breadcrumb. The shape is compatible with the menu items of
- * the apps that came from helix-core, so an existing model can be passed on as it is.
+ * One entry of a menu, menubar, split button or breadcrumb.
  *
  * A router link wins over `url`; an item with neither and without `command` is a plain label.
  */