@kubex/zinc 1.0.25 → 1.0.99

package/src/components/toggle/toggle.component.ts

@@ -1,30 +1,30 @@
-import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {defaultValue} from "../../internal/default-value";
-import {FormControlController} from "../../internal/form";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {live} from "lit/directives/live.js";
-import {property, query, state} from 'lit/decorators.js';
-import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+import { classMap } from "lit/directives/class-map.js";
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import { defaultValue } from "../../internal/default-value";
+import { FormControlController } from "../../internal/form";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { property, query, state } from 'lit/decorators.js';
+import ZincElement, { type ZincFormControl } from '../../internal/zinc-element';
 
 import styles from './toggle.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Toggles allow the user to switch an option on or off.
  * @documentation https://zinc.style/components/toggle
- * @status experimental
+ * @status stable
  * @since 1.0
  *
- * @dependency zn-example
+ * @dependency zn-tooltip
  *
- * @event zn-event-name - Emitted as an example.
+ * @event zn-input - Emitted when the toggle receives input.
  *
- * @slot - The default slot.
- * @slot example - An example slot.
+ * @slot - The toggle's label.
  *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's base wrapper containing the toggle switch.
+ * @csspart control - The toggle switch control (the circular button that slides).
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-toggle-margin - The margin around the toggle switch. Defaults to `8px 0`.
  */
 export default class ZnToggle extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -45,30 +45,32 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
   @property() value: string;
 
-  @property({attribute: 'fallback'}) fallbackValue: string = '';
+  @property({ attribute: 'fallback' }) fallbackValue: string = '';
 
-  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
-  @property({type: Boolean, reflect: true}) disabled: boolean = false;
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
 
-  @property({type: Boolean, reflect: true}) checked: boolean = false;
+  @property({ type: Boolean, reflect: true }) checked: boolean = false;
 
   @defaultValue('checked') defaultChecked = false;
 
-  @property({reflect: true}) form = '';
+  @property({ reflect: true }) form = '';
 
-  @property({type: Boolean, reflect: true}) required = false;
+  @property({ type: Boolean, reflect: true }) required = false;
 
-  @property({attribute: 'help-text'}) helpText = "";
+  @property({ attribute: 'help-text' }) helpText = "";
 
-  @property({type: Boolean, attribute: 'trigger-submit'}) triggerSubmit = false;
+  @property({ type: Boolean, attribute: 'trigger-submit' }) triggerSubmit = false;
 
-  @property({attribute: "on-text"}) onText: string = '';
+  @property({ attribute: "on-text" }) onText: string = '';
 
-  @property({attribute: "off-text"}) offText: string = '';
+  @property({ attribute: "off-text" }) offText: string = '';
 
   @property() label: string = '';
 
+  @property({ type: Boolean }) inline: boolean = false;
+
   get validity() {
     return this.input?.validity;
   }
@@ -199,6 +201,7 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
         'switch__wrapper--small': this.size === 'small',
         'switch__wrapper--medium': this.size === 'medium',
         'switch__wrapper--large': this.size === 'large',
+        'switch__wrapper--inline': this.inline
       })}">
         <label>
           ${this.label ? html`<p class="switch-label">${this.label}</p>` : ''}

package/src/components/toggle/toggle.scss

@@ -81,7 +81,7 @@
   width: 35px;
 }
 
-:host([checked])  .switch__wrapper--small .switch__input-wrapper {
+:host([checked]) .switch__wrapper--small .switch__input-wrapper {
   .switch__control {
     transform: translateX(calc(100% - 7px)) scale(0.8);
   }
@@ -91,3 +91,15 @@
   max-width: 20px;
   height: 20px;
 }
+
+// Support inline label
+.switch__wrapper--inline label {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+
+  .switch__input {
+    margin-inline: 1px;
+    margin-inline-end: 1px;
+  }
+}

package/src/components/translation-group/index.ts

@@ -0,0 +1,12 @@
+import ZnTranslationGroup from './translation-group.component';
+
+export * from './translation-group.component';
+export default ZnTranslationGroup;
+
+ZnTranslationGroup.define('zn-translation-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-translation-group': ZnTranslationGroup;
+  }
+}

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

@@ -0,0 +1,207 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
+import {HasSlotController} from '../../internal/slot';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {property, state} from 'lit/decorators.js';
+import ZnButton from '../button';
+import ZnButtonGroup from '../button-group';
+import ZnDropdown from '../dropdown';
+import ZnHeader from '../header';
+import ZnMenu from '../menu';
+import ZnPanel from '../panel/panel.component';
+import type {ZnMenuSelectEvent} from '../../events/zn-menu-select';
+import type ZnTranslations from '../translations/translations.component';
+
+import styles from './translation-group.scss';
+
+/**
+ * @summary A panel-styled container that provides a shared language toggle for multiple zn-translations children.
+ *
+ * @dependency zn-button
+ * @dependency zn-button-group
+ * @dependency zn-dropdown
+ * @dependency zn-menu
+ *
+ * @event zn-language-change - Emitted when the active language changes. Detail: `{ language: string }`.
+ *
+ * @slot - Default slot for `<zn-translations>` elements.
+ * @slot actions - Actions displayed in the panel header alongside language buttons.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class ZnTranslationGroup extends ZnPanel {
+  static styles: CSSResultGroup = [ZnPanel.styles, unsafeCSS(styles)];
+  static dependencies = {
+    'zn-button': ZnButton,
+    'zn-button-group': ZnButtonGroup,
+    'zn-dropdown': ZnDropdown,
+    'zn-header': ZnHeader,
+    'zn-menu': ZnMenu
+  };
+
+  private readonly _slotController = new HasSlotController(this, 'actions', 'footer');
+
+  /** The group label displayed in the panel header. */
+  @property() label = '';
+
+  /** The available languages for the group. */
+  @property({type: Object}) languages: Record<string, string> = {
+    'en': 'EN'
+  };
+
+  @state() private _activeLanguage = 'en';
+
+  /** Tracks all language codes that have been activated across children. */
+  @state() private _activatedLanguages: string[] = ['en'];
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this.syncChildren();
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('languages')) {
+      this.syncChildLanguages();
+    }
+  }
+
+  private getAllTranslations(): ZnTranslations[] {
+    return [...this.querySelectorAll<ZnTranslations>('zn-translations')];
+  }
+
+  /** Sync grouped state, languages, and active language to all children. */
+  private syncChildren() {
+    const children = this.getAllTranslations();
+
+    // Collect all language codes from children's existing values
+    const allLanguageCodes = new Set<string>(this._activatedLanguages);
+    children.forEach(child => {
+      child.getValueLanguages().forEach(code => allLanguageCodes.add(code));
+    });
+    this._activatedLanguages = [...allLanguageCodes];
+
+    children.forEach(child => {
+      child.grouped = true;
+      child.languages = this.languages;
+      // Ensure every activated language exists in each child's values.
+      // This handles the case where one child has a language that another doesn't.
+      for (const code of this._activatedLanguages) {
+        child.addLanguageKey(code);
+      }
+      child.setActiveLanguage(this._activeLanguage);
+    });
+  }
+
+  private syncChildLanguages() {
+    this.getAllTranslations().forEach(child => {
+      child.languages = this.languages;
+    });
+  }
+
+  private handleSlotChange = () => {
+    this.syncChildren();
+  };
+
+  private switchLanguage(lang: string) {
+    this._activeLanguage = lang;
+    this.getAllTranslations().forEach(child => child.setActiveLanguage(lang));
+    this.emit('zn-language-change', {detail: {language: lang}});
+  }
+
+  private handleLanguageAdd = (e: ZnMenuSelectEvent) => {
+    e.stopPropagation();
+    const element = e.detail.element as HTMLElement;
+    const languageCode = element.getAttribute('data-path');
+    if (languageCode) {
+      if (!this._activatedLanguages.includes(languageCode)) {
+        this._activatedLanguages = [...this._activatedLanguages, languageCode];
+      }
+
+      // Add language key to all children first so the key exists in values
+      this.getAllTranslations().forEach(child => child.addLanguageKey(languageCode));
+      this.switchLanguage(languageCode);
+    }
+  };
+
+  render() {
+    const hasActionSlot = this._slotController.test('actions');
+    const hasFooterSlot = this._slotController.test('footer');
+    const headerCaption = this.caption || this.label;
+
+    const availableLanguages = Object.entries(this.languages)
+      .filter(([code]) => code !== 'en' && !this._activatedLanguages.includes(code))
+      .map(([code, name]) => ({
+        title: name,
+        type: 'dropdown',
+        path: code
+      }));
+
+    const visibleTabs = [...this._activatedLanguages];
+    if (!visibleTabs.includes('en')) {
+      visibleTabs.unshift('en');
+    }
+
+    const hasMultipleLanguages = Object.keys(this.languages).length > 1;
+    const hasHeader = headerCaption || hasMultipleLanguages || hasActionSlot;
+
+    return html`
+      <div class="${classMap({
+        panel: true,
+        'panel--flush': this.flush,
+        'panel--has-header': hasHeader,
+        'panel--has-actions': hasMultipleLanguages || hasActionSlot,
+        'panel--has-footer': hasFooterSlot,
+      })}">
+
+        <div class="panel__inner">
+          ${hasHeader ? html`
+            <zn-header class="panel__header"
+                       caption="${ifDefined(headerCaption || undefined)}"
+                       transparent>
+              ${hasMultipleLanguages ? html`
+                <div slot="actions" class="translation-group__languages">
+                  <zn-button-group>
+                    ${visibleTabs.map(code => html`
+                      <zn-button
+                        size="x-small"
+                        color="default"
+                        ?outline="${code !== this._activeLanguage}"
+                        @click="${() => this.switchLanguage(code)}"
+                      >${code.toUpperCase()}
+                      </zn-button>
+                    `)}
+                    ${availableLanguages.length > 0 ? html`
+                      <zn-dropdown placement="bottom-end">
+                        <zn-button
+                          slot="trigger"
+                          size="x-small"
+                          color="default"
+                          outline
+                        >+
+                        </zn-button>
+                        <zn-menu
+                          .actions=${availableLanguages}
+                          @zn-menu-select="${this.handleLanguageAdd}"
+                        ></zn-menu>
+                      </zn-dropdown>
+                    ` : nothing}
+                  </zn-button-group>
+                </div>
+              ` : nothing}
+              ${hasActionSlot ? html`
+                <slot name="actions" slot="actions"></slot>` : null}
+            </zn-header>` : null}
+
+          <div class="panel__content">
+            <div class="panel__body">
+              <slot @slotchange="${this.handleSlotChange}"></slot>
+            </div>
+          </div>
+
+          ${hasFooterSlot ? html`
+            <slot name="footer" class="panel__footer"></slot>` : null}
+        </div>
+      </div>`;
+  }
+}

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

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.translation-group__languages {
+  display: flex;
+  align-items: center;
+}

package/src/components/translations/translations.component.ts

@@ -1,16 +1,18 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { FormControlController, validValidityState } from '../../internal/form';
-import { HasSlotController } from '../../internal/slot';
-import type { PropertyValues } from 'lit';
-import { html, nothing, unsafeCSS } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import type { ZincFormControl } from '../../internal/zinc-element';
+import {classMap} from 'lit/directives/class-map.js';
+import {FormControlController, validValidityState} from '../../internal/form';
+import {HasSlotController} from '../../internal/slot';
+import {html, nothing, unsafeCSS} from 'lit';
+import {keyed} from 'lit/directives/keyed.js';
+import {live} from 'lit/directives/live.js';
+import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnInlineEdit from '../inline-edit';
 import ZnInput from '../input';
 import ZnNavbar from '../navbar';
-import type { ZnMenuSelectEvent } from '../../events/zn-menu-select';
-import type { ZnSelectEvent } from "../../events/zn-select";
+import type {PropertyValues} from 'lit';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type {ZnMenuSelectEvent} from '../../events/zn-menu-select';
+import type {ZnSelectEvent} from "../../events/zn-select";
 
 import styles from './translations.scss';
 
@@ -28,14 +30,17 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property() name = '';
   @property() value = '{"en":""}';
   @property() label: string = '';
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean, reflect: true }) required = false;
-  @property({ type: Boolean, reflect: true }) flush = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) flush = false;
 
-  @property({ type: Object }) languages: Record<string, string> = {
+  /** When true, hides the individual language navbar and defers language control to a parent zn-translation-group. */
+  @property({type: Boolean, reflect: true}) grouped = false;
+
+  @property({type: Object}) languages: Record<string, string> = {
     'en': 'EN'
   };
-  @property({ type: Object }) values: Record<string, string> = {};
+  @property({type: Object}) values: Record<string, string> = {};
 
   @state() private _activeLanguage = 'en';
 
@@ -63,6 +68,31 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     // no-op
   }
 
+  /** Sets the active language externally. Used by zn-translation-group. */
+  public setActiveLanguage(language: string) {
+    this.addLanguageKey(language);
+    this._activeLanguage = language;
+    this.requestUpdate();
+  }
+
+  /** Returns the currently active language. */
+  public getActiveLanguage(): string {
+    return this._activeLanguage;
+  }
+
+  /** Adds a language key to this component's values if not already present. Used by zn-translation-group. */
+  public addLanguageKey(languageCode: string) {
+    if (!Object.prototype.hasOwnProperty.call(this.values, languageCode)) {
+      this.values = {...this.values, [languageCode]: ''};
+      this.updateValue();
+    }
+  }
+
+  /** Returns all language codes that have values. */
+  public getValueLanguages(): string[] {
+    return Object.keys(this.values);
+  }
+
   protected firstUpdated() {
     this.formControlController.updateValidity();
   }
@@ -100,13 +130,17 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     if (processValues) {
       this.value = JSON.stringify(this.values);
 
-      // Ensure active language is valid
-      if (!this._activeLanguage || (!Object.prototype.hasOwnProperty.call(this.values, this._activeLanguage) && this._activeLanguage !== 'en')) {
-        const keys = Object.keys(this.values);
-        if (keys.length > 0) {
-          this._activeLanguage = keys[0];
-        } else {
-          this._activeLanguage = 'en';
+      // Ensure active language is valid, but only when NOT grouped.
+      // In grouped mode the parent zn-translation-group manages the active language,
+      // so we must not override what it set via setActiveLanguage().
+      if (!this.grouped) {
+        if (!this._activeLanguage || (!Object.prototype.hasOwnProperty.call(this.values, this._activeLanguage) && this._activeLanguage !== 'en')) {
+          const keys = Object.keys(this.values);
+          if (keys.length > 0) {
+            this._activeLanguage = keys[0];
+          } else {
+            this._activeLanguage = 'en';
+          }
         }
       }
     }
@@ -117,7 +151,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     const languageCode = element.getAttribute('data-path');
     if (languageCode) {
       // Add new language with empty string
-      this.values = { ...this.values, [languageCode]: '' };
+      this.values = {...this.values, [languageCode]: ''};
       this._activeLanguage = languageCode;
       this.updateValue();
     }
@@ -140,7 +174,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     if (this._activeLanguage) {
       const newValue: string = target.value as string;
       if (newValue !== this.values[this._activeLanguage]) {
-        this.values = { ...this.values, [this._activeLanguage]: newValue };
+        this.values = {...this.values, [this._activeLanguage]: newValue};
         this.updateValue();
       }
     }
@@ -170,6 +204,11 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     this.formControlController.submit();
   };
 
+  private isRTLLanguage(languageCode: string): boolean {
+    // Check if language is Arabic or Hebrew (including variants)
+    return languageCode.startsWith('ar') || languageCode === 'he' || languageCode === 'iw';
+  }
+
   render() {
     const availableLanguages = Object.entries(this.languages)
       .filter(([code]) => code !== 'en' && !Object.prototype.hasOwnProperty.call(this.values, code))
@@ -190,7 +229,8 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       tab: code
     }));
 
-    const currentTranslation = this.values[this._activeLanguage];
+    const currentTranslation = this.values[this._activeLanguage] ?? '';
+    const isRTL = this.isRTLLanguage(this._activeLanguage);
 
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabel = this.label ? true : hasLabelSlot;
@@ -199,6 +239,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       <div part="form-control"
            class="${classMap({
              'translations': true,
+             'translations--grouped': this.grouped,
              'form-control': true,
              'form-control--medium': true,
              'form-control--has-label': hasLabel,
@@ -209,27 +250,32 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
           <slot name="label">${this.label}</slot>
         </label>
 
-        <zn-navbar
-          .navigation="${navigation}"
-          .dropdown="${availableLanguages}"
-          name="${this.name}-translations-navbar"
-          @zn-select="${this.handleNavbarClick}"
-          @zn-menu-select="${this.handleLanguageAdd}"
-          flush=${this.flush || nothing}
-          isolated
-          manual-add-items
-        >
-          <slot name="expand" slot="expand"></slot>
-        </zn-navbar>
+        ${!this.grouped ? html`
+          <zn-navbar
+            .navigation="${navigation}"
+            .dropdown="${availableLanguages}"
+            name="${this.name}-translations-navbar"
+            @zn-select="${this.handleNavbarClick}"
+            @zn-menu-select="${this.handleLanguageAdd}"
+            flush=${this.flush || nothing}
+            isolated
+            manual-add-items
+          >
+            <slot name="expand" slot="expand"></slot>
+          </zn-navbar>
+        ` : nothing}
         <div class="input-container">
-          <zn-inline-edit
-            .value=${currentTranslation}
-            name="${this.name}"
-            placeholder="Enter translation..."
-            @zn-change="${this.handleValueUpdate}"
-            @zn-input="${this.handleValueUpdate}"
-            @zn-submit="${this.handleSubmit}"
-          ></zn-inline-edit>
+          ${keyed(this._activeLanguage, html`
+            <zn-inline-edit
+              .value=${live(currentTranslation)}
+              name="${this.name}"
+              placeholder="Enter translation..."
+              dir="${isRTL ? 'rtl' : 'ltr'}"
+              @zn-change="${this.handleValueUpdate}"
+              @zn-input="${this.handleValueUpdate}"
+              @zn-submit="${this.handleSubmit}"
+            ></zn-inline-edit>
+          `)}
         </div>
       </div>
     `;

package/src/components/translations/translations.scss

@@ -11,6 +11,10 @@
   gap: var(--zn-spacing-3x-small);
 }
 
+.translations--grouped {
+  padding: 0;
+}
+
 .input-container {
   padding: var(--zn-spacing-small) 0;
 }

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

@@ -5,21 +5,26 @@ import ZincElement from '../../internal/zinc-element';
 import styles from './vertical-stepper.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.
  * @documentation https://zinc.style/components/vertical-stepper
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
+ * @property {boolean} last - When true, removes the connecting line below this step (use for the final step in a sequence).
+ * @property {boolean} first - When true, indicates this is the first step in the sequence (affects visual styling).
+ * @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.
  *
- * @event zn-event-name - Emitted as an example.
+ * @slot icon - Optional slot for adding an icon or indicator before the step content.
  *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
+ * @csspart vs - The main container for the vertical stepper.
+ * @csspart vs__left - The left section containing the icon and connecting line.
+ * @csspart vs__icon - The icon container.
+ * @csspart vs__line - The vertical connecting line between steps.
+ * @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.
  */
 export default class ZnVerticalStepper extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);

package/src/events/events.ts

@@ -1,7 +1,12 @@
-export type { ZnAfterHideEvent } from './zn-after-hide';
-export type { ZnAfterShowEvent } from './zn-after-show';
-export type { ZnHideEvent } from './zn-hide';
-export type { ZnBlurEvent } from './zn-blur';
-export type { ZnFocusEvent } from './zn-focus';
-export type { ZnInputEvent } from './zn-input';
-export type { ZnShowEvent } from './zn-show';
+export type {ZnAfterHideEvent} from './zn-after-hide';
+export type {ZnAfterShowEvent} from './zn-after-show';
+export type {ZnHideEvent} from './zn-hide';
+export type {ZnBlurEvent} from './zn-blur';
+export type {ZnFocusEvent} from './zn-focus';
+export type {ZnInputEvent} from './zn-input';
+export type {ZnShowEvent} from './zn-show';
+export type {ZnPurchaseEvent} from './zn-purchase';
+export type {ZnRedirectEvent} from './zn-redirect';
+export type {ZnSearchChangeEvent} from './zn-search-change';
+export type {ZnLanguageChangeEvent} from './zn-language-change';
+export type {ZnReorderEvent} from './zn-reorder';

package/src/events/zn-language-change.ts

@@ -0,0 +1,7 @@
+export type ZnLanguageChangeEvent = CustomEvent<{ language: string }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-language-change': ZnLanguageChangeEvent;
+  }
+}

package/src/events/zn-purchase.ts

@@ -0,0 +1,11 @@
+export type ZnPurchaseEvent = CustomEvent<{
+  value: string;
+  setSuccess: () => void;
+  setFailure: (message?: string) => void;
+}>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-purchase': ZnPurchaseEvent;
+  }
+}

package/src/events/zn-redirect.ts

@@ -0,0 +1,7 @@
+export type ZnRedirectEvent = CustomEvent<{ url: string }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-redirect': ZnRedirectEvent;
+  }
+}