@haiilo/catalyst 1.3.0 → 2.0.0

package/dist/types/components/{cat-menu/cat-menu.d.ts → cat-dropdown/cat-dropdown.d.ts}

@@ -1,32 +1,45 @@
 import { Placement } from '@floating-ui/dom';
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class CatMenu {
+export declare class CatDropdown {
   private static readonly OFFSET;
   private readonly id;
-  private triggerSlot?;
+  private triggerSlot;
   private trigger?;
-  private content?;
+  private content;
   private trap?;
   private keyListener?;
+  private isOpen;
   /**
-   * The placement of the menu.
+   * The placement of the dropdown.
    */
   placement: Placement;
   /**
-   * Do not close the menu on outside clicks.
+   * Do not close the dropdown on outside clicks.
    */
   noAutoClose: boolean;
   /**
-   * Emitted when the menu is opened.
+   * Allow overflow when dropdown is open.
+   */
+  overflow: boolean;
+  /**
+   * Emitted when the dropdown is opened.
    */
   catOpen: EventEmitter<FocusEvent>;
   /**
-   * Emitted when the menu is closed.
+   * Emitted when the dropdown is closed.
    */
   catClose: EventEmitter<FocusEvent>;
   clickHandler(event: CustomEvent<MouseEvent>): void;
   /**
-   * Closes the menu.
+   * Toggles the dropdown.
+   */
+  toggle(): Promise<void>;
+  /**
+   * Opens the dropdown.
+   */
+  open(): Promise<void>;
+  /**
+   * Closes the dropdown.
    */
   close(): Promise<void>;
   componentDidLoad(): void;
@@ -34,8 +47,6 @@ export declare class CatMenu {
   render(): any;
   private get contentId();
   private initTrigger;
-  private show;
-  private hide;
-  private update;
   private findTrigger;
+  private update;
 }

package/dist/types/components/cat-i18n/cat-i18n-registry.d.ts

@@ -1,17 +1,15 @@
 export declare class CatI18nRegistry {
   private static instance;
-  private _locale;
-  private readonly _dicts;
+  private readonly i18n;
   private constructor();
   static getInstance(): CatI18nRegistry;
-  locale(locale?: string): string;
-  register(locale: string, i18n: {
+  set(i18n: {
     [key: string]: string;
   }): void;
-  clear(locale?: string): void;
+  clear(): void;
   t(key: string, params?: {
     [key: string]: string | number;
   }): string;
   private buildEvent;
-  private getDict;
 }
+export declare const catI18nRegistry: CatI18nRegistry;

package/dist/types/components/cat-icon/cat-icon-registry.d.ts

@@ -13,3 +13,4 @@ export declare class CatIconRegistry {
   private buildName;
   private buildEvent;
 }
+export declare const catIconRegistry: CatIconRegistry;

package/dist/types/components/cat-input/cat-input.d.ts

@@ -12,7 +12,6 @@ import { InputType } from './input-type';
  * @part suffix - The text suffix.
  */
 export declare class CatInput {
-  private readonly i18n;
   private readonly id;
   private input;
   hostElement: HTMLElement;

package/dist/types/components/cat-notification/cat-notification.d.ts

@@ -1,56 +1,29 @@
-export declare enum TypeIcons {
-  'success' = "check-circle-filled",
-  'error' = "cross-circle-filled",
-  'info' = "danger-filled",
-  'primary' = "star-circle-filled",
-  'secondary' = "info-circle-filled"
-}
-export declare const ToastPositions: {
-  [key: string]: {
-    gravity: 'top' | 'bottom';
-    position: 'left' | 'center' | 'right';
+interface ToastRef {
+  toast?: {
+    showToast: () => void;
+    hideToast: () => void;
   };
-};
-export interface ToastPosition {
-  gravity: 'top' | 'bottom';
-  position: 'left' | 'center' | 'right';
 }
 export interface ToastOptions {
-  /**
-   * HTML content of the toast
-   */
-  content: Node;
-  /**
-   * Show close button
-   */
-  close: boolean;
-  /**
-   * Toast position
-   */
+  mode: 'dark' | 'light';
+  icon: string;
   position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-  /**
-   *  Type of toast
-   */
-  type: 'success' | 'info' | 'error' | 'primary' | 'secondary';
-  /**
-   *  Invoked when the toast is clicked
-   */
-  onClick: () => void;
-  /**
-   * Toggle the default behavior of escaping HTML markup
-   */
+  autoClose: boolean;
+  duration: number;
+  action: string;
   escapeMarkup: boolean;
+  onAction: (toast: ToastRef) => void;
+  onClick: (toast: ToastRef) => void;
+  onDismiss: (toast: ToastRef) => void;
 }
-declare class CatNotificationService {
-  private static DURATION;
-  error(title: string, message?: string, options?: Partial<ToastOptions>): void;
-  success(title: string, message?: string, options?: Partial<ToastOptions>): void;
-  info(title: string, message?: string, options?: Partial<ToastOptions>): void;
-  primary(title: string, message?: string, options?: Partial<ToastOptions>): void;
-  secondary(title: string, message?: string, options?: Partial<ToastOptions>): void;
-  private toastHTMLTemplate;
-  private getPosition;
-  private extractOptions;
+export declare class CatNotificationService {
+  private static instance;
+  private static duration;
+  private constructor();
+  static getInstance(): CatNotificationService;
+  show(content: string | Node, options?: Partial<ToastOptions>): () => void;
+  private getNode;
+  private getOptions;
 }
-export declare const NotificationsService: CatNotificationService;
+export declare const catNotificationService: CatNotificationService;
 export {};

package/dist/types/components/cat-pagination/cat-pagination.d.ts

@@ -0,0 +1,56 @@
+/**
+ * A navigation component to switch between different pages of paged chunks of
+ * data such as a table. Pagination is built with list HTML elements and a
+ * wrapping `<nav>` element to identify it as a navigation section to screen
+ * readers and other assistive technologies. Furthermore, the current page is
+ * correctly highlighted using `aria-current`.
+ */
+export declare class CatPagination {
+  /**
+   * The current page.
+   */
+  page: number;
+  /**
+   * The total number of pages.
+   */
+  pageCount: number;
+  /**
+   * The number of pages to be shown around the current page.
+   */
+  activePadding: number;
+  /**
+   * The number of pages to be shown at the edges.
+   */
+  sidePadding: number;
+  /**
+   * The size of the buttons.
+   */
+  size: 'xs' | 's' | 'm' | 'l' | 'xl';
+  /**
+   * The rendering style of the buttons.
+   */
+  variant: 'filled' | 'outlined' | 'text';
+  /**
+   * Use round button edges.
+   */
+  round: boolean;
+  /**
+   * Use compact pagination mode.
+   */
+  compact: boolean;
+  /**
+   * The icon of the "previous" button.
+   */
+  iconPrev: string;
+  /**
+   * The icon of the "next" button.
+   */
+  iconNext: string;
+  render(): any;
+  get isFirst(): boolean;
+  get isLast(): boolean;
+  get pages(): number[];
+  private addSeq;
+  private clamp;
+  private get content();
+}

package/dist/types/components/cat-select/cat-select.d.ts

@@ -66,7 +66,6 @@ export interface CatSelectTaggingValue {
 export declare class CatSelect {
   private static readonly SKELETON_COUNT;
   private static readonly DROPDOWN_OFFSET;
-  private readonly i18n;
   private readonly id;
   private dropdown?;
   private trigger?;

package/dist/types/components.d.ts

@@ -6,8 +6,8 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
-import { InputType } from "./components/cat-input/input-type";
 import { Placement } from "@floating-ui/dom";
+import { InputType } from "./components/cat-input/input-type";
 import { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select";
 import { Observable } from "rxjs";
 export namespace Components {
@@ -82,6 +82,10 @@ export namespace Components {
         "variant": 'filled' | 'outlined';
     }
     interface CatButton {
+        /**
+          * Sets the `aria-current` attribute on the button.
+         */
+        "a11yCurrent"?: boolean;
         /**
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
@@ -209,6 +213,24 @@ export namespace Components {
          */
         "value"?: string | boolean;
     }
+    interface CatDropdown {
+        /**
+          * Closes the dropdown.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Do not close the dropdown on outside clicks.
+         */
+        "noAutoClose": boolean;
+        /**
+          * Allow overflow when dropdown is open.
+         */
+        "overflow": boolean;
+        /**
+          * The placement of the dropdown.
+         */
+        "placement": Placement;
+    }
     interface CatIcon {
         /**
           * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -318,29 +340,57 @@ export namespace Components {
          */
         "value"?: string | number;
     }
-    interface CatMenu {
+    interface CatModal {
         /**
-          * Closes the menu.
+          * Shows the modal.
          */
-        "close": () => Promise<void>;
+        "show": () => Promise<void>;
         /**
-          * Do not close the menu on outside clicks.
+          * The size of the modal.
          */
-        "noAutoClose": boolean;
+        "size": 's' | 'm' | 'l';
+    }
+    interface CatPagination {
         /**
-          * The placement of the menu.
+          * The number of pages to be shown around the current page.
          */
-        "placement": Placement;
-    }
-    interface CatModal {
+        "activePadding": number;
         /**
-          * Shows the modal.
+          * Use compact pagination mode.
          */
-        "show": () => Promise<void>;
+        "compact": boolean;
         /**
-          * The size of the modal.
+          * The icon of the "next" button.
          */
-        "size": 's' | 'm' | 'l';
+        "iconNext": string;
+        /**
+          * The icon of the "previous" button.
+         */
+        "iconPrev": string;
+        /**
+          * The current page.
+         */
+        "page": number;
+        /**
+          * The total number of pages.
+         */
+        "pageCount": number;
+        /**
+          * Use round button edges.
+         */
+        "round": boolean;
+        /**
+          * The number of pages to be shown at the edges.
+         */
+        "sidePadding": number;
+        /**
+          * The size of the buttons.
+         */
+        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the buttons.
+         */
+        "variant": 'filled' | 'outlined' | 'text';
     }
     interface CatRadio {
         /**
@@ -625,8 +675,6 @@ export namespace Components {
          */
         "value"?: string | number;
     }
-    interface CatToastDemo {
-    }
     interface CatToggle {
         /**
           * Checked state of the toggle.
@@ -713,13 +761,13 @@ export interface CatCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatCheckboxElement;
 }
-export interface CatInputCustomEvent<T> extends CustomEvent<T> {
+export interface CatDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLCatInputElement;
+    target: HTMLCatDropdownElement;
 }
-export interface CatMenuCustomEvent<T> extends CustomEvent<T> {
+export interface CatInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLCatMenuElement;
+    target: HTMLCatInputElement;
 }
 export interface CatRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -786,6 +834,12 @@ declare global {
         prototype: HTMLCatCheckboxElement;
         new (): HTMLCatCheckboxElement;
     };
+    interface HTMLCatDropdownElement extends Components.CatDropdown, HTMLStencilElement {
+    }
+    var HTMLCatDropdownElement: {
+        prototype: HTMLCatDropdownElement;
+        new (): HTMLCatDropdownElement;
+    };
     interface HTMLCatIconElement extends Components.CatIcon, HTMLStencilElement {
     }
     var HTMLCatIconElement: {
@@ -798,18 +852,18 @@ declare global {
         prototype: HTMLCatInputElement;
         new (): HTMLCatInputElement;
     };
-    interface HTMLCatMenuElement extends Components.CatMenu, HTMLStencilElement {
-    }
-    var HTMLCatMenuElement: {
-        prototype: HTMLCatMenuElement;
-        new (): HTMLCatMenuElement;
-    };
     interface HTMLCatModalElement extends Components.CatModal, HTMLStencilElement {
     }
     var HTMLCatModalElement: {
         prototype: HTMLCatModalElement;
         new (): HTMLCatModalElement;
     };
+    interface HTMLCatPaginationElement extends Components.CatPagination, HTMLStencilElement {
+    }
+    var HTMLCatPaginationElement: {
+        prototype: HTMLCatPaginationElement;
+        new (): HTMLCatPaginationElement;
+    };
     interface HTMLCatRadioElement extends Components.CatRadio, HTMLStencilElement {
     }
     var HTMLCatRadioElement: {
@@ -870,12 +924,6 @@ declare global {
         prototype: HTMLCatTextareaElement;
         new (): HTMLCatTextareaElement;
     };
-    interface HTMLCatToastDemoElement extends Components.CatToastDemo, HTMLStencilElement {
-    }
-    var HTMLCatToastDemoElement: {
-        prototype: HTMLCatToastDemoElement;
-        new (): HTMLCatToastDemoElement;
-    };
     interface HTMLCatToggleElement extends Components.CatToggle, HTMLStencilElement {
     }
     var HTMLCatToggleElement: {
@@ -895,10 +943,11 @@ declare global {
         "cat-button": HTMLCatButtonElement;
         "cat-card": HTMLCatCardElement;
         "cat-checkbox": HTMLCatCheckboxElement;
+        "cat-dropdown": HTMLCatDropdownElement;
         "cat-icon": HTMLCatIconElement;
         "cat-input": HTMLCatInputElement;
-        "cat-menu": HTMLCatMenuElement;
         "cat-modal": HTMLCatModalElement;
+        "cat-pagination": HTMLCatPaginationElement;
         "cat-radio": HTMLCatRadioElement;
         "cat-radio-group": HTMLCatRadioGroupElement;
         "cat-scrollable": HTMLCatScrollableElement;
@@ -909,7 +958,6 @@ declare global {
         "cat-tab": HTMLCatTabElement;
         "cat-tabs": HTMLCatTabsElement;
         "cat-textarea": HTMLCatTextareaElement;
-        "cat-toast-demo": HTMLCatToastDemoElement;
         "cat-toggle": HTMLCatToggleElement;
         "cat-tooltip": HTMLCatTooltipElement;
     }
@@ -986,6 +1034,10 @@ declare namespace LocalJSX {
         "variant"?: 'filled' | 'outlined';
     }
     interface CatButton {
+        /**
+          * Sets the `aria-current` attribute on the button.
+         */
+        "a11yCurrent"?: boolean;
         /**
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
@@ -1127,6 +1179,28 @@ declare namespace LocalJSX {
          */
         "value"?: string | boolean;
     }
+    interface CatDropdown {
+        /**
+          * Do not close the dropdown on outside clicks.
+         */
+        "noAutoClose"?: boolean;
+        /**
+          * Emitted when the dropdown is closed.
+         */
+        "onCatClose"?: (event: CatDropdownCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the dropdown is opened.
+         */
+        "onCatOpen"?: (event: CatDropdownCustomEvent<FocusEvent>) => void;
+        /**
+          * Allow overflow when dropdown is open.
+         */
+        "overflow"?: boolean;
+        /**
+          * The placement of the dropdown.
+         */
+        "placement"?: Placement;
+    }
     interface CatIcon {
         /**
           * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -1239,29 +1313,53 @@ declare namespace LocalJSX {
          */
         "value"?: string | number;
     }
-    interface CatMenu {
+    interface CatModal {
+        /**
+          * The size of the modal.
+         */
+        "size"?: 's' | 'm' | 'l';
+    }
+    interface CatPagination {
         /**
-          * Do not close the menu on outside clicks.
+          * The number of pages to be shown around the current page.
          */
-        "noAutoClose"?: boolean;
+        "activePadding"?: number;
         /**
-          * Emitted when the menu is closed.
+          * Use compact pagination mode.
          */
-        "onCatClose"?: (event: CatMenuCustomEvent<FocusEvent>) => void;
+        "compact"?: boolean;
         /**
-          * Emitted when the menu is opened.
+          * The icon of the "next" button.
          */
-        "onCatOpen"?: (event: CatMenuCustomEvent<FocusEvent>) => void;
+        "iconNext"?: string;
         /**
-          * The placement of the menu.
+          * The icon of the "previous" button.
          */
-        "placement"?: Placement;
-    }
-    interface CatModal {
+        "iconPrev"?: string;
         /**
-          * The size of the modal.
+          * The current page.
          */
-        "size"?: 's' | 'm' | 'l';
+        "page"?: number;
+        /**
+          * The total number of pages.
+         */
+        "pageCount"?: number;
+        /**
+          * Use round button edges.
+         */
+        "round"?: boolean;
+        /**
+          * The number of pages to be shown at the edges.
+         */
+        "sidePadding"?: number;
+        /**
+          * The size of the buttons.
+         */
+        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the buttons.
+         */
+        "variant"?: 'filled' | 'outlined' | 'text';
     }
     interface CatRadio {
         /**
@@ -1599,8 +1697,6 @@ declare namespace LocalJSX {
          */
         "value"?: string | number;
     }
-    interface CatToastDemo {
-    }
     interface CatToggle {
         /**
           * Checked state of the toggle.
@@ -1692,10 +1788,11 @@ declare namespace LocalJSX {
         "cat-button": CatButton;
         "cat-card": CatCard;
         "cat-checkbox": CatCheckbox;
+        "cat-dropdown": CatDropdown;
         "cat-icon": CatIcon;
         "cat-input": CatInput;
-        "cat-menu": CatMenu;
         "cat-modal": CatModal;
+        "cat-pagination": CatPagination;
         "cat-radio": CatRadio;
         "cat-radio-group": CatRadioGroup;
         "cat-scrollable": CatScrollable;
@@ -1706,7 +1803,6 @@ declare namespace LocalJSX {
         "cat-tab": CatTab;
         "cat-tabs": CatTabs;
         "cat-textarea": CatTextarea;
-        "cat-toast-demo": CatToastDemo;
         "cat-toggle": CatToggle;
         "cat-tooltip": CatTooltip;
     }
@@ -1721,10 +1817,11 @@ declare module "@stencil/core" {
             "cat-button": LocalJSX.CatButton & JSXBase.HTMLAttributes<HTMLCatButtonElement>;
             "cat-card": LocalJSX.CatCard & JSXBase.HTMLAttributes<HTMLCatCardElement>;
             "cat-checkbox": LocalJSX.CatCheckbox & JSXBase.HTMLAttributes<HTMLCatCheckboxElement>;
+            "cat-dropdown": LocalJSX.CatDropdown & JSXBase.HTMLAttributes<HTMLCatDropdownElement>;
             "cat-icon": LocalJSX.CatIcon & JSXBase.HTMLAttributes<HTMLCatIconElement>;
             "cat-input": LocalJSX.CatInput & JSXBase.HTMLAttributes<HTMLCatInputElement>;
-            "cat-menu": LocalJSX.CatMenu & JSXBase.HTMLAttributes<HTMLCatMenuElement>;
             "cat-modal": LocalJSX.CatModal & JSXBase.HTMLAttributes<HTMLCatModalElement>;
+            "cat-pagination": LocalJSX.CatPagination & JSXBase.HTMLAttributes<HTMLCatPaginationElement>;
             "cat-radio": LocalJSX.CatRadio & JSXBase.HTMLAttributes<HTMLCatRadioElement>;
             "cat-radio-group": LocalJSX.CatRadioGroup & JSXBase.HTMLAttributes<HTMLCatRadioGroupElement>;
             "cat-scrollable": LocalJSX.CatScrollable & JSXBase.HTMLAttributes<HTMLCatScrollableElement>;
@@ -1735,7 +1832,6 @@ declare module "@stencil/core" {
             "cat-tab": LocalJSX.CatTab & JSXBase.HTMLAttributes<HTMLCatTabElement>;
             "cat-tabs": LocalJSX.CatTabs & JSXBase.HTMLAttributes<HTMLCatTabsElement>;
             "cat-textarea": LocalJSX.CatTextarea & JSXBase.HTMLAttributes<HTMLCatTextareaElement>;
-            "cat-toast-demo": LocalJSX.CatToastDemo & JSXBase.HTMLAttributes<HTMLCatToastDemoElement>;
             "cat-toggle": LocalJSX.CatToggle & JSXBase.HTMLAttributes<HTMLCatToggleElement>;
             "cat-tooltip": LocalJSX.CatTooltip & JSXBase.HTMLAttributes<HTMLCatTooltipElement>;
         }

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { Components, JSX } from './components';
-export { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
-export { CatIconRegistry } from './components/cat-icon/cat-icon-registry';
-export { NotificationsService } from './components/cat-notification/cat-notification';
-export { CatSelectTaggingValue, CatSelectMultipleTaggingValue, CatSelectConnector, Item, Page, RenderInfo } from './components/cat-select/cat-select';
+export { catI18nRegistry, CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
+export { catIconRegistry, CatIconRegistry } from './components/cat-icon/cat-icon-registry';
+export { catNotificationService, CatNotificationService, ToastOptions } from './components/cat-notification/cat-notification';
+export { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item, Page, RenderInfo } from './components/cat-select/cat-select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.0.3",
-    "@haiilo/catalyst-tokens": "1.3.0",
+    "@haiilo/catalyst-tokens": "2.0.0",
     "@stencil/core": "2.17.4",
     "autosize": "5.0.1",
     "autosize-input": "1.0.2",
@@ -77,7 +77,7 @@
     "rxjs": "^7.5.5",
     "stylelint": "^14.14.0",
     "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-config-standard-scss": "^6.0.0",
     "typescript": "^4.5.5"
   }
 }