@kubex/zinc 1.1.184 → 2.0.0

package/src/components/translation-grid/translation-grid.component.ts

@@ -0,0 +1,157 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './translation-grid.scss';
+
+export type TranslationStatus = 'source' | 'translated' | 'outdated' | 'missing';
+
+export interface TranslationGridLanguage {
+  code: string;
+  label: string;
+  /** The language's status when there are no `fields`. */
+  status?: TranslationStatus;
+  /** Where choosing the language goes, such as its translation form. */
+  href?: string;
+}
+
+export interface TranslationGridCell {
+  status: TranslationStatus;
+  href?: string;
+}
+
+export interface TranslationGridField {
+  key: string;
+  label: string;
+  /** Each language's cell, keyed by language code. */
+  cells: Record<string, TranslationGridCell>;
+}
+
+const STATUS_LABELS: Record<TranslationStatus, string> = {
+  source: 'Source',
+  translated: 'Translated',
+  outdated: 'Source changed',
+  missing: 'Missing',
+};
+
+/**
+ * @summary Shows how far each language's translation has got, with a column per language to choose and enable it,
+ * and optionally a row per translated field.
+ * @documentation https://zinc.style/components/translation-grid
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - Help text under the legend.
+ * @slot enable-{code} - The control that enables the language with that code, such as a `zn-checkbox` in a form.
+ *   The Enable row only shows when at least one is given.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class ZnTranslationGrid extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** The languages, in column order, as a JSON array of `{code, label, status, href}`. */
+  @property({type: Array}) languages: TranslationGridLanguage[] = [];
+
+  /** A row per translated field, as a JSON array of `{key, label, cells}`; without it there is one Translation row. */
+  @property({type: Array}) fields: TranslationGridField[] = [];
+
+  /** The code of the language being edited. */
+  @property({reflect: true}) selected = '';
+
+  /** The key of the field being edited, when there are `fields`. */
+  @property({attribute: 'selected-field', reflect: true}) selectedField = '';
+
+  /** Where the language links open, as a console `data-target`; `self` replaces the content they sit in. */
+  @property({attribute: 'link-target'}) linkTarget = '';
+
+  /** Names the source in the legend, such as "English changed". */
+  @property({attribute: 'source-label'}) sourceLabel = 'English';
+
+  private _statusLabel(status: TranslationStatus) {
+    return status === 'outdated' ? `${this.sourceLabel} changed` : STATUS_LABELS[status];
+  }
+
+  private _link(href: string | undefined, selected: boolean, content: unknown, block: string, label: string,
+                status?: TranslationStatus) {
+    const classes = {
+      [block]: true,
+      [`${block}--${status}`]: !!status,
+      [`${block}--selected`]: selected,
+    };
+    if (!href || status === 'source') {
+      return html`<span class=${classMap(classes)} title=${label} aria-label=${label}>${content}</span>`;
+    }
+    return html`<a class=${classMap(classes)} href=${href} title=${label} aria-label=${label}
+                   data-target=${this.linkTarget || nothing}
+                   aria-current=${selected ? 'true' : nothing}>${content}</a>`;
+  }
+
+  private _cell(language: TranslationGridLanguage, cell: TranslationGridCell | undefined, selected: boolean, row = '') {
+    const status = cell?.status ?? 'missing';
+    const name = row ? `${row}, ${language.label}` : language.label;
+    return html`<td>${this._link(cell?.href, selected, nothing, 'translation-grid__cell',
+      `${name}: ${this._statusLabel(status)}`, status)}</td>`;
+  }
+
+  private _rows() {
+    if (!this.fields.length) {
+      return html`
+        <tr>
+          <th scope="row">Translation</th>
+          ${this.languages.map(language => this._cell(language,
+            {status: language.status ?? 'missing', href: language.href}, language.code === this.selected))}
+        </tr>`;
+    }
+    return this.fields.map(field => html`
+      <tr>
+        <th scope="row">${field.label}</th>
+        ${this.languages.map(language => this._cell(language, field.cells[language.code],
+          field.key === this.selectedField && language.code === this.selected, field.label))}
+      </tr>`);
+  }
+
+  private _legend(status: TranslationStatus) {
+    return html`
+      <span class="translation-grid__key">
+        <span class="translation-grid__cell translation-grid__cell--${status}"></span>${this._statusLabel(status)}
+      </span>`;
+  }
+
+  render() {
+    return html`
+      <div part="base" class="translation-grid">
+        <div class="translation-grid__scroll">
+          <table class="translation-grid__table">
+            <thead>
+            <tr>
+              <th scope="col">Field</th>
+              ${this.languages.map(language => html`
+                <th scope="col">
+                  ${this._link(language.href, language.code === this.selected,
+                    language.code.toUpperCase(), 'translation-grid__code', language.label)}
+                </th>`)}
+            </tr>
+            </thead>
+            <tbody>
+            ${this.querySelector('[slot^="enable-"]') ? html`
+              <tr>
+                <th scope="row">Enable</th>
+                ${this.languages.map(language => html`
+                  <td><div class="translation-grid__slot"><slot name="enable-${language.code}"></slot></div></td>`)}
+              </tr>` : nothing}
+            ${this._rows()}
+            </tbody>
+          </table>
+        </div>
+        <div class="translation-grid__legend">
+          ${this._legend('translated')}
+          ${this._legend('outdated')}
+          ${this._legend('missing')}
+        </div>
+        <div class="translation-grid__help"><slot></slot></div>
+      </div>
+    `;
+  }
+}

package/src/components/translation-grid/translation-grid.scss

@@ -0,0 +1,138 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.translation-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-x-small);
+  color: rgb(var(--zn-text));
+  font-size: var(--zn-input-font-size-medium);
+}
+
+.translation-grid__scroll {
+  @include wc.scrollbars;
+  overflow-x: auto;
+  // Room for the selected cell's ring
+  padding: 4px;
+  margin: -4px;
+}
+
+.translation-grid__table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th, td {
+    padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  th[scope="row"], th:first-child {
+    width: 120px;
+    padding-left: 0;
+    text-align: left;
+    font-weight: var(--zn-font-weight-medium);
+    white-space: nowrap;
+  }
+
+  tbody tr:last-child > * {
+    border-bottom: 0;
+  }
+}
+
+.translation-grid__slot {
+  display: flex;
+  justify-content: center;
+
+  ::slotted(*) {
+    display: inline-flex;
+  }
+}
+
+.translation-grid__code {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: var(--zn-input-border-radius-medium);
+  color: rgb(var(--zn-color-muted-text));
+  font-size: 12px;
+  font-weight: var(--zn-font-weight-semibold);
+  text-decoration: none;
+
+  &:is(a) {
+    color: rgb(var(--zn-text));
+
+    &:hover {
+      background-color: rgb(var(--zn-color-tab));
+    }
+  }
+
+  &--selected {
+    color: rgb(var(--zn-primary));
+  }
+}
+
+.translation-grid__cell {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  vertical-align: middle;
+
+  &--source,
+  &--translated {
+    border-color: rgb(var(--zn-color-success));
+    background-color: rgb(var(--zn-color-success));
+  }
+
+  &--outdated {
+    border-style: dashed;
+    border-color: rgb(var(--zn-color-warning));
+    background-color: rgba(var(--zn-color-warning), 0.12);
+  }
+
+  &--missing {
+    border-color: var(--zn-input-border-color);
+    background-color: rgba(var(--zn-border-color), 0.35);
+  }
+
+  &--selected {
+    box-shadow: 0 0 0 2px rgb(var(--zn-panel)), 0 0 0 4px rgb(var(--zn-primary));
+  }
+
+  &:is(a):focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(var(--zn-panel)), 0 0 0 4px var(--zn-input-focus-ring-color);
+  }
+}
+
+.translation-grid__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zn-spacing-2x-small) var(--zn-spacing-small);
+  color: rgb(var(--zn-color-muted-text));
+  font-size: var(--zn-input-help-text-font-size-medium);
+}
+
+.translation-grid__help {
+  margin-top: var(--zn-spacing-x-small);
+  color: rgb(var(--zn-color-muted-text));
+  font-size: var(--zn-input-help-text-font-size-medium);
+}
+
+.translation-grid__key {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  .translation-grid__cell {
+    width: 14px;
+    height: 14px;
+    border-radius: var(--zn-border-radius-circle);
+  }
+}

package/src/components/translation-grid/translation-grid.test.ts

@@ -0,0 +1,28 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnTranslationGrid from './translation-grid.component';
+
+describe('<zn-translation-grid>', () => {
+  it('renders one Translation row without fields', async () => {
+    const el = await fixture<ZnTranslationGrid>(html`
+      <zn-translation-grid languages='[{"code":"en","label":"English","status":"source"},{"code":"fr","label":"French","status":"missing","href":"#fr"}]'>
+        <zn-checkbox slot="enable-fr"></zn-checkbox>
+      </zn-translation-grid>`);
+    const rows = el.shadowRoot!.querySelectorAll('tbody tr');
+    expect(rows).to.have.length(2);
+    expect(rows[1].querySelector('th')!.textContent).to.equal('Translation');
+  });
+
+  it('renders a row per field and rings the selected cell', async () => {
+    const el = await fixture<ZnTranslationGrid>(html`
+      <zn-translation-grid selected="fr" selected-field="content"
+        languages='[{"code":"en","label":"English"},{"code":"fr","label":"French"}]'
+        fields='[{"key":"name","label":"Name","cells":{"en":{"status":"source"},"fr":{"status":"outdated","href":"#n"}}},{"key":"content","label":"Content","cells":{"en":{"status":"source"},"fr":{"status":"translated","href":"#c"}}}]'></zn-translation-grid>`);
+    const rows = el.shadowRoot!.querySelectorAll('tbody tr');
+    expect(rows).to.have.length(2);
+    expect(rows[0].querySelector('.translation-grid__cell--outdated')).to.exist;
+    const selected = el.shadowRoot!.querySelectorAll('.translation-grid__cell--selected');
+    expect(selected).to.have.length(1);
+    expect(selected[0].getAttribute('href')).to.equal('#c');
+  });
+});

package/src/components/vertical-stepper/vertical-stepper.component.ts

@@ -1,4 +1,5 @@
 import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { HasSlotController } from '../../internal/slot';
 import { property } from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
@@ -15,8 +16,15 @@ import styles from './vertical-stepper.scss';
  * @property {boolean} active - When true, highlights this step as the current active step in the process.
  * @property {string} description - A descriptive text explaining what happens in this step or its current status.
  * @property {string} caption - The main label/title for this step.
+ * @property {string} type - Marker colour: neutral, primary, success, error, warning, info or ai (AI-generated steps only). Overrides `active`.
+ * @property {boolean} selected - When true, rings the marker to show the step is picked.
+ * @property {boolean} dashed - When true, draws the marker's border dashed, for a step that is not yet final.
+ * @property {boolean} highlightLine - When true, colours the line below this step's marker, joining it to the next step.
  *
+ * @slot - Content below the caption and description, such as metadata or chips.
  * @slot icon - Optional slot for adding an icon or indicator before the step content.
+ * @slot suffix - Inline content after the caption and description, such as status chips.
+ * @slot actions - Controls aligned to the end of the step.
  *
  * @csspart vs - The main container for the vertical stepper.
  * @csspart vs__left - The left section containing the icon and connecting line.
@@ -25,6 +33,8 @@ import styles from './vertical-stepper.scss';
  * @csspart vs__right - The right section containing caption and description text.
  * @csspart vs__caption - The caption/title text element.
  * @csspart vs__description - The description text element.
+ * @csspart vs__content - The container for the default slot.
+ * @csspart vs__actions - The container for the actions slot.
  */
 export default class ZnVerticalStepper extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -35,23 +45,39 @@ export default class ZnVerticalStepper extends ZincElement {
   @property({ reflect: true }) description: string;
   @property({ reflect: true }) caption: string;
 
+  @property({ reflect: true }) type: 'neutral' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'ai';
+
+  @property({ type: Boolean, reflect: true }) selected = false;
+  @property({ type: Boolean, reflect: true }) dashed = false;
+  @property({ attribute: 'highlight-line', type: Boolean, reflect: true }) highlightLine = false;
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'suffix', 'actions');
+
   render() {
+    const hasContent = this.hasSlotController.test('[default]');
+    const hasSuffix = this.hasSlotController.test('suffix');
+    const hasActions = this.hasSlotController.test('actions');
     return html`
-      <div class="vs">
-        <div class="vs__left">
-          <div class="vs__icon">
+      <div class="vs" part="vs">
+        <div class="vs__left" part="vs__left">
+          <div class="vs__icon" part="vs__icon">
             <slot name="icon"></slot>
           </div>
-          <div class="vs__line"></div>
+          <div class="vs__line" part="vs__line"></div>
         </div>
-        <div class="vs__right">
-          <div class="vs__caption">
-            ${this.caption}
+        <div class="vs__right" part="vs__right">
+          <div class="vs__heading">
+            <span class="vs__caption" part="vs__caption">${this.caption}</span><span class="vs__description"
+                                                                                       part="vs__description">${this.description}</span>
+            <slot name="suffix" class="vs__suffix" ?hidden=${!hasSuffix}></slot>
           </div>
-          <div class="vs__description">
-            ${this.description}
+          <div class="vs__content" part="vs__content" ?hidden=${!hasContent}>
+            <slot></slot>
           </div>
         </div>
+        <div class="vs__actions" part="vs__actions" ?hidden=${!hasActions}>
+          <slot name="actions"></slot>
+        </div>
       </div>
     `;
   }

package/src/components/vertical-stepper/vertical-stepper.scss

@@ -1,67 +1,112 @@
 @use "../../wc";
 
+@mixin neutral-marker {
+  --marker-fg: rgb(var(--zn-color-muted-text));
+  --marker-bg: var(--zn-vertical-stepper-marker-background, rgba(var(--zn-border-color), .10));
+  --marker-line: var(--zn-vertical-stepper-line-color, rgba(var(--zn-border-color), .60));
+}
+
+:host {
+  @include neutral-marker;
+
+  display: block;
+}
+
 .vs {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  gap: var(--zn-spacing-small);
   width: 100%;
 
   &__left {
-    flex-shrink: 1;
-    flex-grow: 0;
+    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 0 var(--zn-spacing-small);
   }
 
   &__icon {
-    width: var(--zn-spacing-large);
-    height: var(--zn-spacing-large);
+    width: var(--zn-vertical-stepper-marker-size, 28px);
+    height: var(--zn-vertical-stepper-marker-size, 28px);
     display: flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    background-color: rgb(var(--zn-input-bg));
-    border-width: 1px;
+    box-sizing: border-box;
+    color: var(--marker-fg);
+    background-color: var(--marker-bg);
+    border: 1px solid var(--marker-line);
     border-radius: 100%;
+    // Above the line, so a selected step's ring covers it.
+    position: relative;
+    z-index: 1;
+    font-size: 12px;
+    font-weight: 600;
+    transition: box-shadow var(--zn-transition-fast, 150ms);
   }
 
   &__line {
-    min-height: 50px;
-    width: 4px;
-    border-width: 1px;
-    border-top: none;
-    border-bottom: none;
-    background-color: rgba(var(--zn-input-bg));
+    width: var(--zn-vertical-stepper-line-width, 1px);
+    min-height: var(--zn-vertical-stepper-gap, var(--zn-spacing-medium));
     flex-grow: 1;
+    background-color: var(--zn-vertical-stepper-line-color, rgba(var(--zn-border-color), .60));
   }
 
   &__right {
-    display: flex;
-    flex-direction: column;
-    gap: var(--zn-spacing-x-small);
     flex-grow: 1;
-    margin-bottom: 50px;
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
+    min-width: 0;
+    // Centres a single line of text on the marker.
+    padding-top: calc((var(--zn-vertical-stepper-marker-size, 28px) - 20px) / 2);
+    padding-bottom: var(--zn-vertical-stepper-gap, var(--zn-spacing-medium));
+    font-size: var(--zn-vertical-stepper-caption-font-size, 14px);
+    line-height: 20px;
+    color: rgb(var(--zn-text-heading));
   }
 
   &__caption {
-    font-size: 14px;
-    color: rgb(var(--zn-text-heading));
-    line-height: 20px;
+    display: inline;
     font-weight: 600;
   }
 
+  &__suffix {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zn-spacing-2x-small);
+    margin-inline-start: var(--zn-spacing-x-small);
+    vertical-align: middle;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-x-small);
+    margin-top: var(--zn-spacing-2x-small);
+    font-size: var(--zn-font-size-small);
+    color: rgb(var(--zn-color-muted-text));
+  }
+
+  &__actions {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--zn-spacing-x-small);
+    min-height: var(--zn-vertical-stepper-marker-size, 28px);
+    padding-bottom: var(--zn-vertical-stepper-gap, var(--zn-spacing-medium));
+  }
+
+  [hidden] {
+    display: none;
+  }
 
   &__description {
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 18px;
-    color: rgb(var(--zn-text));
+    display: inline;
+    font-weight: var(--zn-vertical-stepper-description-font-weight, 400);
+    color: var(--zn-vertical-stepper-description-color, rgb(var(--zn-text-heading)));
+  }
+
+  &__caption:not(:empty) + &__description:not(:empty)::before {
+    content: " — ";
   }
 }
 
@@ -69,20 +114,46 @@
   .vs__line {
     display: none;
   }
-}
 
-:host([first]) {
-  .vs {
-    margin-top: 10px;
+  .vs__right,
+  .vs__actions {
+    padding-bottom: 0;
   }
 }
 
+:host([dashed]) .vs__icon {
+  border-style: dashed;
+}
+
+:host([selected]) .vs__icon {
+  box-shadow: 0 0 0 2px var(--zn-vertical-stepper-ring-gap-color, rgb(var(--zn-panel))),
+  0 0 0 4px var(--zn-vertical-stepper-selected-color, rgb(var(--zn-primary)));
+}
+
+:host([highlight-line]) .vs__line {
+  background-color: var(--zn-vertical-stepper-selected-color, rgb(var(--zn-primary)));
+}
+
 :host([active]) {
-  .vs__icon {
-    background-color: rgb(var(--zn-primary));
-  }
+  --marker-fg: rgba(var(--zn-primary), .9);
+  --marker-bg: rgba(var(--zn-primary), .10);
+  --marker-line: rgba(var(--zn-primary), .30);
+}
 
-  .vs__line {
-    background-color: rgb(var(--zn-primary));
+@each $type, $role in (error: danger, info: info, warning: warning, success: success, ai: ai) {
+  :host([type="#{$type}"]) {
+    --marker-fg: var(--zn-color-#{$role}-fg);
+    --marker-bg: var(--zn-color-#{$role}-bg);
+    --marker-line: var(--zn-color-#{$role}-line);
   }
 }
+
+:host([type="primary"]) {
+  --marker-fg: rgba(var(--zn-primary), .9);
+  --marker-bg: rgba(var(--zn-primary), .10);
+  --marker-line: rgba(var(--zn-primary), .30);
+}
+
+:host([type="neutral"]) {
+  @include neutral-marker;
+}

package/src/components/vertical-stepper/vertical-stepper.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnVerticalStepper from './vertical-stepper.component';
 
 describe('<zn-vertical-stepper>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,38 @@ describe('<zn-vertical-stepper>', () => {
 
     expect(el).to.exist;
   });
+
+  it('hides the content, suffix and actions containers when nothing is slotted', async () => {
+    const el = await fixture<ZnVerticalStepper>(html` <zn-vertical-stepper caption="Step"></zn-vertical-stepper> `);
+
+    expect(el.shadowRoot!.querySelector('.vs__content')!.hasAttribute('hidden')).to.be.true;
+    expect(el.shadowRoot!.querySelector('.vs__suffix')!.hasAttribute('hidden')).to.be.true;
+    expect(el.shadowRoot!.querySelector('.vs__actions')!.hasAttribute('hidden')).to.be.true;
+  });
+
+  it('shows slotted content, suffix and actions', async () => {
+    const el = await fixture<ZnVerticalStepper>(html`
+      <zn-vertical-stepper caption="Version 3">
+        <span slot="suffix">Live</span>
+        <span>Published 12 Oct 2026</span>
+        <button slot="actions">View</button>
+      </zn-vertical-stepper>
+    `);
+
+    expect(el.shadowRoot!.querySelector('.vs__content')!.hasAttribute('hidden')).to.be.false;
+    expect(el.shadowRoot!.querySelector('.vs__suffix')!.hasAttribute('hidden')).to.be.false;
+    expect(el.shadowRoot!.querySelector('.vs__actions')!.hasAttribute('hidden')).to.be.false;
+  });
+
+  it('reflects selected, dashed and highlight-line', async () => {
+    const el = await fixture<ZnVerticalStepper>(html` <zn-vertical-stepper></zn-vertical-stepper> `);
+    el.selected = true;
+    el.dashed = true;
+    el.highlightLine = true;
+    await el.updateComplete;
+
+    expect(el.hasAttribute('selected')).to.be.true;
+    expect(el.hasAttribute('dashed')).to.be.true;
+    expect(el.hasAttribute('highlight-line')).to.be.true;
+  });
 });

package/src/components/well/well.scss

@@ -3,8 +3,8 @@
 .well {
   display: flex;
 
-  border-radius: 5px;
-  background: rgba(var(--zn-border-color), 0.7);
+  border-radius: var(--zn-well-border-radius, 5px);
+  background: var(--zn-well-background, rgba(var(--zn-border-color), 0.7));
   border: 1px solid rgb(var(--zn-border-color));
 
   padding: var(--zn-spacing-small, 0);

package/src/events/events.ts

@@ -18,7 +18,9 @@ export type {ZnFlowConnectEvent} from './zn-flow-connect';
 export type {ZnPageChangeEvent} from './zn-page-change';
 export type {ZnPageSelectionChangeEvent} from './zn-page-selection-change';
 export type {ZnThemeChangeEvent} from './zn-theme-change';
+export type {ZnReportChangeEvent} from './zn-report-change';
 export type {ZnThemeSubmitEvent} from './zn-theme-submit';
 export type {ZnSlashSelectEvent} from './zn-slash-select';
 export type {ZnSlashInsertEvent} from './zn-slash-insert';
 export type {ZnRepositionEvent} from './zn-reposition';
+export type {ZnChartClickEvent} from './zn-chart-click';

package/src/events/zn-chart-click.ts

@@ -0,0 +1,13 @@
+export type ZnChartClickEvent = CustomEvent<{
+  seriesName: string;
+  /** The clicked category, or the data item's name. */
+  name: string;
+  dataIndex: number;
+  value: unknown;
+}>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-chart-click': ZnChartClickEvent;
+  }
+}