@kubex/zinc 1.1.185 → 2.0.0

package/src/components/key-value/key-value.component.ts

@@ -0,0 +1,160 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {FormControlController} from '../../internal/form';
+import {HasSlotController} from '../../internal/slot';
+import {property, state} from 'lit/decorators.js';
+import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+
+import formControlStyles from '../../form-control.scss';
+import styles from './key-value.scss';
+
+interface KeyValueRow {
+  key: string;
+  value: string;
+}
+
+/**
+ * @summary Edits a list of name and value pairs, submitted as a JSON object.
+ * @documentation https://zinc.style/components/key-value
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-input
+ * @dependency zn-button
+ *
+ * @event zn-change - Emitted when a pair is added, removed or edited.
+ *
+ * @slot label - The label. Alternatively, use the `label` attribute.
+ * @slot help-text - Text under the pairs. Alternatively, use the `help-text` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart row - Each name and value pair.
+ */
+export default class ZnKeyValue extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+
+  private readonly formControlController = new FormControlController(this, {
+    value: (control: ZnKeyValue) => control.value,
+  });
+
+  @property() name = '';
+
+  /** The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. */
+  @property() value = '{}';
+
+  @property() label = '';
+
+  @property({attribute: 'help-text'}) helpText = '';
+
+  @property({attribute: 'key-label'}) keyLabel = 'Name';
+
+  @property({attribute: 'value-label'}) valueLabel = 'Value';
+
+  @property({attribute: 'add-text'}) addText = 'Add';
+
+  /** Passed to each value input, so its slash menu can insert merge fields. */
+  @property({attribute: 'slash-items'}) slashItems = '';
+
+  @property({reflect: true}) form = '';
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @state() private _rows: KeyValueRow[] = [];
+
+  get validity(): ValidityState {
+    return {valid: true} as ValidityState;
+  }
+
+  get validationMessage(): string {
+    return '';
+  }
+
+  checkValidity(): boolean {
+    return true;
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity(): boolean {
+    return true;
+  }
+
+  setCustomValidity(): void {
+  }
+
+  protected willUpdate(changed: PropertyValues) {
+    if (changed.has('value') && this.value !== this._serialise()) {
+      this._rows = this._parse(this.value);
+    }
+  }
+
+  private _parse(value: string): KeyValueRow[] {
+    try {
+      const parsed: unknown = JSON.parse(value || '{}');
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        return Object.entries(parsed as Record<string, unknown>).map(([key, v]) => ({key, value: String(v ?? '')}));
+      }
+    } catch {
+      // An unreadable value starts empty rather than breaking the form
+    }
+    return [];
+  }
+
+  private _serialise(): string {
+    const pairs: Record<string, string> = {};
+    this._rows.filter(row => row.key.trim()).forEach(row => pairs[row.key.trim()] = row.value);
+    return JSON.stringify(pairs);
+  }
+
+  private _update(rows: KeyValueRow[]) {
+    this._rows = rows;
+    this.value = this._serialise();
+    this.emit('zn-change');
+  }
+
+  private _edit(index: number, field: keyof KeyValueRow, e: Event) {
+    const rows = [...this._rows];
+    rows[index] = {...rows[index], [field]: (e.target as HTMLInputElement).value};
+    this._update(rows);
+  }
+
+  render() {
+    const hasLabel = this.label || this.hasSlotController.test('label');
+    const hasHelpText = this.helpText || this.hasSlotController.test('help-text');
+
+    return html`
+      <div part="base" class=${classMap({
+        'form-control': true,
+        'form-control--medium': true,
+        'form-control--has-label': !!hasLabel,
+        'form-control--has-help-text': !!hasHelpText,
+      })}>
+        <label class="form-control__label" aria-hidden=${hasLabel ? 'false' : 'true'}>
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div class="key-value__rows">
+          ${this._rows.map((row, index) => html`
+            <div part="row" class="key-value__row">
+              <zn-input class="key-value__key" placeholder=${this.keyLabel} .value=${row.key}
+                        ?disabled=${this.disabled} @zn-input=${(e: Event) => this._edit(index, 'key', e)}></zn-input>
+              <zn-input class="key-value__value" placeholder=${this.valueLabel} .value=${row.value}
+                        slash-items=${this.slashItems} ?disabled=${this.disabled}
+                        @zn-input=${(e: Event) => this._edit(index, 'value', e)}></zn-input>
+              <zn-button icon="x@lu" color="transparent" size="small" title="Remove" icon-button="small" plain ?disabled=${this.disabled}
+                         @click=${() => this._update(this._rows.filter((_, i) => i !== index))}></zn-button>
+            </div>`)}
+          <zn-button class="key-value__add" icon="plus@lu" color="secondary" size="small" ?disabled=${this.disabled}
+                     @click=${() => this._update([...this._rows, {key: '', value: ''}])}>${this.addText}</zn-button>
+        </div>
+
+        <div class="form-control__help-text" aria-hidden=${hasHelpText ? 'false' : 'true'}>
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>`;
+  }
+}

package/src/components/key-value/key-value.scss

@@ -0,0 +1,20 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.key-value__rows {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--zn-spacing-x-small);
+}
+
+.key-value__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  width: 100%;
+}

package/src/components/key-value/key-value.test.ts

@@ -0,0 +1,22 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnKeyValue from './key-value.component';
+
+describe('<zn-key-value>', () => {
+  it('should show a row per pair in its value', async () => {
+    const el = await fixture<ZnKeyValue>(html`<zn-key-value value='{"1":"{{recipient.firstName}}","2":"x"}'></zn-key-value>`);
+
+    expect(el.shadowRoot!.querySelectorAll('.key-value__row').length).to.equal(2);
+  });
+
+  it('should submit the pairs as a JSON object, leaving out unnamed rows', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form><zn-key-value name="pairs" value='{"1":"a"}'></zn-key-value></form>`);
+    const el = form.querySelector<ZnKeyValue>('zn-key-value')!;
+
+    el.shadowRoot!.querySelector<HTMLElement>('.key-value__add')!.click();
+    await el.updateComplete;
+
+    expect(new FormData(form).get('pairs')).to.equal('{"1":"a"}');
+  });
+});

package/src/components/markdown-editor/markdown-editor.component.ts

@@ -214,6 +214,13 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
     this.viewMode = mode;
   };
 
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && this.expanded) {
+      e.stopPropagation();
+      this.expanded = false;
+    }
+  };
+
   private handleExpandToggle = () => {
     this.expanded = !this.expanded;
   };
@@ -290,7 +297,7 @@ export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl
                 'markdown-editor--split': this.viewMode === 'split',
                 'markdown-editor--preview-only': this.viewMode === 'preview',
                 'markdown-editor--expanded': this.expanded,
-              })}>
+              })} @keydown=${this.handleKeyDown}>
                 ${hasLabel ? html`
                   <label class="markdown-editor__label">
                     <slot name="label">${this.label}</slot>

package/src/components/menu/menu.component.ts

@@ -6,6 +6,7 @@ import ZnConfirm from "../confirm";
 import ZnDropdown from "../dropdown";
 import ZnIcon from "../icon";
 import ZnMenuItem from "../menu-item";
+import ZnMenuLabel from "../menu-label";
 import ZnTooltip from "../tooltip";
 
 import { classMap } from "lit/directives/class-map.js";
@@ -13,11 +14,16 @@ import styles from './menu.scss';
 
 interface NavItem {
   title: string;
+  /** `label` renders a section heading and `divider` a separator; anything else is an item. */
   type: string;
   path: string;
   target: string;
   icon: string;
   style: string;
+  /** A semantic colour for the item, such as `error` for a destructive action. */
+  color?: string;
+  /** A keyboard shortcut shown at the end of the item. */
+  shortcut?: string;
   confirm: {
     type: string;
     title: string;
@@ -56,6 +62,7 @@ export default class ZnMenu extends ZincElement {
     'zn-dropdown': ZnDropdown,
     'zn-icon': ZnIcon,
     'zn-menu-item': ZnMenuItem,
+    'zn-menu-label': ZnMenuLabel,
     'zn-tooltip': ZnTooltip,
   };
 
@@ -118,6 +125,12 @@ export default class ZnMenu extends ZincElement {
           if (item === null || item === undefined) {
             return html``; // Skip null or undefined items
           }
+          if (item.type === 'label') {
+            return html`<zn-menu-label>${item.title}</zn-menu-label>`;
+          }
+          if (item.type === 'divider') {
+            return html`<hr>`;
+          }
           if (item?.confirm) {
             return html`
               <zn-confirm trigger="${ifDefined(item.confirm?.trigger)}"
@@ -129,6 +142,8 @@ export default class ZnMenu extends ZincElement {
                             @keydown=${this.handleKeyDown}
                             id="${item.confirm?.trigger}"
                             variant="${this.itemVariant}"
+                            color="${ifDefined(item.color)}"
+                            shortcut="${ifDefined(item.shortcut)}"
                             confirm>
                 ${(item.icon) ? html`
                   <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
@@ -140,6 +155,8 @@ export default class ZnMenu extends ZincElement {
                 <zn-menu-item value="${item.title}"
                               href="${item.path}"
                               variant="${this.itemVariant}"
+                              color="${ifDefined(item.color)}"
+                              shortcut="${ifDefined(item.shortcut)}"
                               data-target="${ifDefined(item.target)}">
                   ${(item.icon) ? html`
                     <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
@@ -197,8 +214,10 @@ export default class ZnMenu extends ZincElement {
       event.preventDefault();
       event.stopPropagation();
 
-      // Simulate a click to support @click handlers on menu items that also work with the keyboard
-      item?.click();
+      // Simulate a click to support @click handlers on menu items that also work with the keyboard. A link item's
+      // <a> is in its shadow root, and only a click on the anchor itself follows it.
+      const anchor = item?.shadowRoot?.querySelector<HTMLElement>('a#anchor');
+      (anchor ?? item)?.click();
     }
 
     // Move the selection when pressing down or up

package/src/components/menu/menu.scss

@@ -3,9 +3,9 @@
 .menu {
   display: block;
   position: relative;
-  padding: 1px;
+  padding: var(--zn-menu-padding, 1px);
   border: 1px solid rgb(var(--zn-border-color)) !important;
-  border-radius: var(--zn-border-radius);
+  border-radius: var(--zn-menu-border-radius, var(--zn-border-radius));
   width: fit-content;
   min-width: var(--zn-menu-min-width, var(--zn-size-spanel));
   // Unconstrained by default — a consumer that needs the menu to scroll inside a bounded
@@ -13,31 +13,16 @@
   max-height: var(--zn-menu-max-height, none);
   overflow: auto;
   overscroll-behavior: none;
-  box-shadow: 0 4px 8px -4px rgba(33, 33, 33, 0.1);
+  box-shadow: var(--zn-menu-shadow, 0 4px 8px -4px rgba(33, 33, 33, 0.1));
   // Same surface as the shell-header menus below, so every dropdown in the
   // product reads as one material rather than splitting into --zn-panel menus
   // and --zn-color-navigation ones depending on where it was mounted.
   background-color: rgb(var(--zn-color-navigation, 255, 255, 255));
 }
 
-// A submenu's border sits on its parent menu's edge border, so the two share one line.
-:host([slot="submenu"]) .menu {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-// Set by the submenu controller while this submenu extends past its parent's bottom edge.
-:host([slot="submenu"][data-extends-below]) .menu {
-  border-end-start-radius: var(--zn-border-radius);
-}
-
-// Set by the submenu controller on the parent menu while a submenu covers that corner.
-:host([data-submenu-top]) .menu {
-  border-start-end-radius: 0;
-}
-
-:host([data-submenu-bottom]) .menu {
-  border-end-end-radius: 0;
+// A submenu sits just off its parent menu, so a page-level shadow would mostly land on the parent
+:host([slot="submenu"]) .menu:not(.menu--shell) {
+  box-shadow: var(--zn-menu-submenu-shadow, 0 4px 12px rgba(13, 23, 56, 0.10), 0 1px 3px rgba(13, 23, 56, 0.06));
 }
 
 // A capped menu has to look scrollable, so the bar is always drawn rather than
@@ -73,7 +58,7 @@
   border: 1px solid rgb(var(--zn-border-color));
   border-radius: var(--zn-border-radius);
   min-width: var(--zn-menu-min-width, 245px);
-  max-width: min(320px, calc(100vw - 16px));
+  max-width: var(--zn-menu-max-width, min(320px, calc(100vw - 16px)));
   max-height: var(--zn-menu-max-height, none);
   overflow-x: hidden;
   overflow-y: auto;
@@ -84,6 +69,41 @@
 }
 
 
+// Width, style and colour are set apart so an unresolved colour token can't drop the line.
+.menu > hr {
+  height: 0;
+  margin: var(--zn-menu-divider-margin, 4px 0);
+  border: 0;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--zn-menu-divider-color, rgb(var(--zn-border-color)));
+}
+
+// !important because the page's own hr styles otherwise outrank ::slotted()
+::slotted(hr) {
+  height: 0 !important;
+  margin: var(--zn-menu-divider-margin, 4px 0) !important;
+  border: 0 !important;
+  border-top-width: 1px !important;
+  border-top-style: solid !important;
+  border-top-color: var(--zn-menu-divider-color, rgb(var(--zn-border-color))) !important;
+}
+
+// A zn-confirm only contributes its dialog, so it must not claim a slot (or a gap) in the item stack.
+zn-confirm, ::slotted(zn-confirm) {
+  display: contents;
+}
+
 ::slotted(zn-menu-item + zn-menu-item) {
-  border-top: 1px solid rgb(var(--zn-border-color));
+  border-top: var(--zn-menu-item-divider, 1px solid rgb(var(--zn-border-color)));
+}
+
+// A group divider, shown even when the theme drops the line between items
+::slotted(hr) {
+  flex: 0 0 auto;
+  margin: var(--zn-spacing-3x-small, 2px) 0;
+  border: none;
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: rgb(var(--zn-border-color));
 }

package/src/components/menu/menu.test.ts

@@ -1,10 +1,43 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnMenu from './menu.component';
 
 describe('<zn-menu>', () => {
+  it('should draw a slotted hr as a divider', async () => {
+    const el = await fixture(html`<zn-menu><zn-menu-item>Edit</zn-menu-item><hr><zn-menu-item>Delete</zn-menu-item></zn-menu>`);
+    const style = getComputedStyle(el.querySelector('hr')!);
+    expect(style.borderTopStyle).to.equal('solid');
+    expect(style.borderBottomStyle).to.equal('none');
+  });
+
   it('should render a component', async () => {
     const el = await fixture(html` <zn-menu></zn-menu> `);
 
     expect(el).to.exist;
   });
+
+  it('should skip labels in keyboard navigation', async () => {
+    const el = await fixture<ZnMenu>(html`
+      <zn-menu><zn-menu-label>Customer</zn-menu-label><zn-menu-item>Send email</zn-menu-item></zn-menu>
+    `);
+    expect(el.getAllItems().map(item => item.textContent!.trim())).to.deep.equal(['Send email']);
+  });
+
+  it('should render labels, dividers, colours and shortcuts from actions', async () => {
+    const el = await fixture<ZnMenu>(html`<zn-menu></zn-menu>`);
+    el.actions = [
+      {type: 'label', title: 'Customer'},
+      {title: 'Send email', shortcut: 'E', path: '#'},
+      {type: 'divider'},
+      {title: 'Delete', color: 'error', path: '#'},
+    ] as unknown as ZnMenu['actions'];
+    await el.updateComplete;
+
+    const root = el.shadowRoot!;
+    expect(root.querySelector('zn-menu-label')!.textContent).to.equal('Customer');
+    expect(root.querySelector('.menu > hr')).to.exist;
+    const items = [...root.querySelectorAll('zn-menu-item')];
+    expect(items[0].getAttribute('shortcut')).to.equal('E');
+    expect(items[1].getAttribute('color')).to.equal('error');
+  });
 });

package/src/components/menu-item/menu-item.component.ts

@@ -28,6 +28,7 @@ import styles from './menu-item.scss';
  * @slot example - An example slot.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart shortcut - The key cap showing the item's `shortcut`.
  *
  * @cssproperty --example - An example CSS custom property.
  */
@@ -100,6 +101,9 @@ export default class ZnMenuItem extends ZincElement {
   /** Marks the menu item as currently active/selected. */
   @property({type: Boolean, reflect: true}) active = false;
 
+  /** A keyboard shortcut shown as a key cap at the end of the item, such as `E` or `⌘K`. */
+  @property() shortcut: string;
+
   private readonly localize = new LocalizeController(this);
   private readonly hasSlotController = new HasSlotController(this, 'submenu');
   private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
@@ -142,9 +146,13 @@ export default class ZnMenuItem extends ZincElement {
     if (!this.isSubmenu()) {
       const composedPath = event.composedPath();
       const closestMenu: Element | null = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu') as Element;
-      if (this.confirm) return;
-
       const dropdown = closestMenu?.closest('zn-dropdown') as ZnDropdown | null;
+      if (this.confirm) {
+        // The confirm dialog lives inside the dropdown panel, so the dropdown can only close once the dialog does
+        dropdown?.addEventListener('zn-close', () => dropdown.hide(), {once: true});
+        return;
+      }
+
       if (!dropdown?.stayOpenOnSelect && !this.keepOpen) {
         dropdown?.hide();
       }
@@ -215,6 +223,7 @@ export default class ZnMenuItem extends ZincElement {
         part="base"
         data-path=${ifDefined(this.dataPath)}
         href=${ifDefined(this.href)}
+        tabindex=${ifDefined(isLink ? '-1' : undefined)}
         target=${ifDefined(isLink ? this.target : undefined)}
         data-target=${ifDefined(isLink ? this.dataTarget : undefined)}
         rel=${ifDefined(isLink ? this.rel : undefined)}
@@ -254,6 +263,8 @@ export default class ZnMenuItem extends ZincElement {
 
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
+        ${this.shortcut ? html`<kbd part="shortcut" class="menu-item__shortcut">${this.shortcut}</kbd>` : ''}
+
         ${this.checkedPosition === 'right' ? html`
           <span part="checked-icon" class="menu-item__check">
             <zn-icon src="check@lu" size="18" aria-hidden="true"></zn-icon>

package/src/components/menu-item/menu-item.scss

@@ -1,8 +1,6 @@
 @use "../../wc";
 
 :host {
-  // Overlaps the parent menu's padding so the submenu's border lands on the parent's.
-  --submenu-offset: 1px;
   // Baseline — standalone items (e.g. app/sidebar navigation): primary hover
   --color: var(--zn-text-menu-link-color);
   --hover-color: rgb(var(--zn-primary));
@@ -15,7 +13,7 @@
 // its colour), no separators between rows. Set by the parent zn-menu.
 :host([variant="dropdown"]) {
   --hover-color: var(--color);
-  --hover-bg: rgba(0, 0, 0, 0.06);
+  --hover-bg: var(--zn-menu-item-hover-background, rgba(0, 0, 0, 0.06));
 }
 
 // Shell — app-shell header dropdown look: dark text, primary hover. Set by the
@@ -51,8 +49,10 @@
 
 :host([variant="dropdown"]) .menu-item {
   align-items: center;
-  padding: var(--zn-spacing-small) var(--zn-spacing-large);
+  min-height: var(--zn-menu-item-min-height, auto);
+  padding: var(--zn-menu-item-padding, var(--zn-spacing-small) var(--zn-spacing-large));
   border-bottom-width: 0;
+  border-radius: var(--zn-menu-item-border-radius, 0);
 }
 
 :host([variant="shell"]) .menu-item {
@@ -69,6 +69,11 @@
   color: inherit;
 }
 
+// A zn-confirm only contributes its dialog, so it must not take part in the label's layout.
+.menu-item__label::slotted(zn-confirm) {
+  display: contents;
+}
+
 .menu-item.menu-item--disabled {
   outline: none;
   opacity: 0.5;
@@ -167,7 +172,17 @@
 
 .menu-item .menu-item__prefix::slotted(*) {
   --icon-size: var(--zn-font-size-small);
-  margin-inline-end: var(--zn-spacing-small);
+  margin-inline-end: var(--zn-menu-item-icon-gap, var(--zn-spacing-small));
+  color: var(--zn-menu-item-icon-color, inherit);
+}
+
+// A status item's icon takes the item's colour
+.menu-item--primary .menu-item__prefix::slotted(*),
+.menu-item--info .menu-item__prefix::slotted(*),
+.menu-item--error .menu-item__prefix::slotted(*),
+.menu-item--warning .menu-item__prefix::slotted(*),
+.menu-item--success .menu-item__prefix::slotted(*) {
+  color: inherit;
 }
 
 // Shell items space the icon via the row gap instead
@@ -185,6 +200,29 @@
   margin-inline-start: var(--zn-spacing-x-small);
 }
 
+// A keyboard shortcut, drawn as a key cap at the end of the row
+.menu-item__shortcut {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 20px;
+  height: 20px;
+  margin-inline-start: var(--zn-spacing-medium);
+  padding: 0 5px;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: rgb(var(--zn-panel));
+  font-family: inherit;
+  font-style: normal;
+  font-size: 11px;
+  font-weight: var(--zn-font-weight-medium);
+  line-height: 1;
+  color: var(--zn-color-neutral-500);
+}
+
 /* Safe triangle */
 .menu-item--submenu-expanded::after {
   content: '';
@@ -256,11 +294,6 @@
 
 zn-popup::part(popup) {
   z-index: 100;
-  margin-left: var(--submenu-offset);
-}
-
-.menu-item--rtl zn-popup::part(popup) {
-  margin-left: calc(-1 * var(--submenu-offset));
 }
 
 @media (forced-colors: active) {
@@ -282,32 +315,32 @@ zn-popup::part(popup) {
 // light accent such as velocity's neon lime).
 .menu-item--primary {
   --color: rgba(var(--zn-primary), 0.9);
-  --hover-color: rgb(var(--zn-color-on-primary, 255, 255, 255));
-  --hover-bg: rgba(var(--zn-primary), 0.9);
+  --hover-color: var(--zn-menu-item-primary-hover-color, rgb(var(--zn-color-on-primary, 255, 255, 255)));
+  --hover-bg: var(--zn-menu-item-primary-hover-background, rgba(var(--zn-primary), 0.9));
 }
 
 .menu-item--error {
-  --color: rgb(var(--zn-color-error));
-  --hover-color: rgb(var(--zn-color-on-error, 255, 255, 255));
-  --hover-bg: rgba(var(--zn-color-error), 0.9);
+  --color: var(--zn-color-danger-fg);
+  --hover-color: var(--zn-menu-item-danger-hover-color, rgb(var(--zn-color-on-error, 255, 255, 255)));
+  --hover-bg: var(--zn-menu-item-danger-hover-background, rgba(var(--zn-color-error), 0.9));
 }
 
 .menu-item--info {
   --color: rgb(var(--zn-color-info));
-  --hover-color: rgb(var(--zn-color-on-info, 255, 255, 255));
-  --hover-bg: rgba(var(--zn-color-info), 0.9);
+  --hover-color: var(--zn-menu-item-info-hover-color, rgb(var(--zn-color-on-info, 255, 255, 255)));
+  --hover-bg: var(--zn-menu-item-info-hover-background, rgba(var(--zn-color-info), 0.9));
 }
 
 .menu-item--warning {
-  --color: rgb(var(--zn-color-warning));
-  --hover-color: rgb(var(--zn-color-on-warning, 255, 255, 255));
-  --hover-bg: rgba(var(--zn-color-warning), 0.9);
+  --color: var(--zn-color-warning-fg, rgb(var(--zn-color-warning)));
+  --hover-color: var(--zn-menu-item-warning-hover-color, rgb(var(--zn-color-on-warning, 255, 255, 255)));
+  --hover-bg: var(--zn-menu-item-warning-hover-background, rgba(var(--zn-color-warning), 0.9));
 }
 
 .menu-item--success {
-  --color: rgb(var(--zn-color-success));
-  --hover-color: rgb(var(--zn-color-on-success, 255, 255, 255));
-  --hover-bg: rgba(var(--zn-color-success), 0.9);
+  --color: var(--zn-color-success-fg, rgb(var(--zn-color-success)));
+  --hover-color: var(--zn-menu-item-success-hover-color, rgb(var(--zn-color-on-success, 255, 255, 255)));
+  --hover-bg: var(--zn-menu-item-success-hover-background, rgba(var(--zn-color-success), 0.9));
 }
 
 .menu-item--secondary {