@haiilo/catalyst 0.6.0 → 0.7.0

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

@@ -3,11 +3,15 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Radio Buttons are graphical interface elements that allow user to choose
  * only one of a predefined set of mutually exclusive options.
  *
+ * @slot hint - Optional hint element to be displayed with the radio.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
  * @part label - The label content.
  */
 export declare class CatRadio {
   private readonly id;
   private input;
+  hostElement: HTMLElement;
+  hasSlottedLabel: boolean;
   /**
    * Whether this radio is checked.
    */
@@ -36,6 +40,10 @@ export declare class CatRadio {
    * The value of the radio component.
    */
   value?: string;
+  /**
+   * Optional hint text(s) to be displayed with the radio.
+   */
+  hint?: string | string[];
   /**
    * Emitted when the radio is changed.
    */
@@ -57,6 +65,7 @@ export declare class CatRadio {
    */
   setFocus(options?: FocusOptions): Promise<void>;
   render(): any;
+  private get hintSection();
   private onChange;
   private onFocus;
   private onBlur;

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Breakpoint } from '../../utils/breakpoints';
+/**
+ * A single tab inside a tabs component.
+ */
+export declare class CatTab {
+  hostElement: HTMLElement;
+  /**
+   * The label of the tab.
+   */
+  label: string;
+  /**
+   * The name of an icon to be displayed in the tab.
+   */
+  icon?: string;
+  /**
+   * Hide the actual button content and only display the tab.
+   */
+  iconOnly: boolean | Breakpoint;
+  /**
+   * Display the icon on the right.
+   */
+  iconRight: boolean;
+  /**
+   * A destination to link to, rendered in the href attribute of a link.
+   */
+  url?: string;
+  /**
+   * Specifies where to open the linked document.
+   */
+  urlTarget?: '_blank' | '_self';
+  /**
+   * Specifies that the tab should be deactivated.
+   */
+  deactivated: boolean;
+  /**
+   * Emitted when tab is clicked.
+   */
+  tabClick: EventEmitter<MouseEvent>;
+  connectedCallback(): void;
+  onClick(event: MouseEvent): void;
+  render(): any;
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Tabs are used to display multiple panels to be contained within a single
+ * window, using tabs as a navigational element.
+ *
+ * @part tab - The header of the tab.
+ */
+export declare class CatTabs {
+  private tabs;
+  private buttons;
+  hostElement: HTMLElement;
+  activeTabId?: string;
+  /**
+   * The ID of the active tab.
+   */
+  activeTab: string;
+  /**
+   * The alignment of the tabs.
+   */
+  tabsAlign: 'left' | 'center' | 'right' | 'justify';
+  onActiveTabChanged(newActiveTab: string): void;
+  componentWillLoad(): void;
+  onKeydown(event: KeyboardEvent): void;
+  render(): any;
+  private updateButtonsRef;
+}

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

@@ -4,19 +4,23 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * rows. Used when the expected user input is long. For shorter input, use the
  * input component.
  *
+ * @slot hint - Optional hint element to be displayed with the textarea.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
  * @part label - The label content.
  */
 export declare class CatTextarea {
   private readonly id;
   private textarea;
+  hostElement: HTMLElement;
+  hasSlottedLabel: boolean;
   /**
    * Whether the textarea is disabled.
    */
   disabled: boolean;
   /**
-   * Optional hint text to be displayed with the textarea.
+   * Optional hint text(s) to be displayed with the textarea.
    */
-  hint?: string;
+  hint?: string | string[];
   /**
    * The label for the textarea.
    */
@@ -79,6 +83,7 @@ export declare class CatTextarea {
    */
   setFocus(options?: FocusOptions): Promise<void>;
   render(): any;
+  private get hintSection();
   private onInput;
   private onFocus;
   private onBlur;

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

@@ -3,12 +3,16 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Toggles are graphical interface switches that give user control over a
  * feature or option that can be turned on or off.
  *
+ * @slot hint - Optional hint element to be displayed with the toggle.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
  * @part toggle - The toggle element.
  * @part label - The label content.
  */
 export declare class CatToggle {
   private readonly id;
   private input;
+  hostElement: HTMLElement;
+  hasSlottedLabel: boolean;
   /**
    * Checked state of the toggle.
    */
@@ -37,6 +41,10 @@ export declare class CatToggle {
    * The value of the toggle
    */
   value?: string;
+  /**
+   * Optional hint text(s) to be displayed with the toggle.
+   */
+  hint?: string | string[];
   /**
    * Emitted when the checked status of the toggle is changed.
    */
@@ -58,6 +66,7 @@ export declare class CatToggle {
    */
   setFocus(options?: FocusOptions): Promise<void>;
   render(): any;
+  private get hintSection();
   private onInput;
   private onFocus;
   private onBlur;

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

@@ -43,4 +43,5 @@ export declare class CatTooltip {
   private hideListener;
   private touchStartListener;
   private touchEndListener;
+  private windowTouchStartListener;
 }

package/dist/types/components.d.ts

@@ -160,6 +160,10 @@ export namespace Components {
           * Disabled state of the checkbox
          */
         "disabled": boolean;
+        /**
+          * Optional hint text(s) to be displayed with the checkbox.
+         */
+        "hint"?: string | string[];
         /**
           * Indeterminate state of the checkbox
          */
@@ -222,9 +226,9 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Optional hint text to be displayed with the input.
+          * Optional hint text(s) to be displayed with the input.
          */
-        "hint"?: string;
+        "hint"?: string | string[];
         /**
           * The name of an icon to be displayed in the input.
          */
@@ -314,6 +318,10 @@ export namespace Components {
           * Whether this radio is disabled.
          */
         "disabled": boolean;
+        /**
+          * Optional hint text(s) to be displayed with the radio.
+         */
+        "hint"?: string | string[];
         /**
           * The label of the radio that is visible.
          */
@@ -398,15 +406,55 @@ export namespace Components {
          */
         "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatTab {
+        /**
+          * Specifies that the tab should be deactivated.
+         */
+        "deactivated": boolean;
+        /**
+          * The name of an icon to be displayed in the tab.
+         */
+        "icon"?: string;
+        /**
+          * Hide the actual button content and only display the tab.
+         */
+        "iconOnly": boolean | Breakpoint;
+        /**
+          * Display the icon on the right.
+         */
+        "iconRight": boolean;
+        /**
+          * The label of the tab.
+         */
+        "label": string;
+        /**
+          * A destination to link to, rendered in the href attribute of a link.
+         */
+        "url"?: string;
+        /**
+          * Specifies where to open the linked document.
+         */
+        "urlTarget"?: '_blank' | '_self';
+    }
+    interface CatTabs {
+        /**
+          * The ID of the active tab.
+         */
+        "activeTab": string;
+        /**
+          * The alignment of the tabs.
+         */
+        "tabsAlign": 'left' | 'center' | 'right' | 'justify';
+    }
     interface CatTextarea {
         /**
           * Whether the textarea is disabled.
          */
         "disabled": boolean;
         /**
-          * Optional hint text to be displayed with the textarea.
+          * Optional hint text(s) to be displayed with the textarea.
          */
-        "hint"?: string;
+        "hint"?: string | string[];
         /**
           * The label for the textarea.
          */
@@ -464,6 +512,10 @@ export namespace Components {
           * Disabled state of the toggle.
          */
         "disabled": boolean;
+        /**
+          * Optional hint text(s) to be displayed with the toggle.
+         */
+        "hint"?: string | string[];
         /**
           * The label of the toggle that is visible.
          */
@@ -596,6 +648,18 @@ declare global {
         prototype: HTMLCatSpinnerElement;
         new (): HTMLCatSpinnerElement;
     };
+    interface HTMLCatTabElement extends Components.CatTab, HTMLStencilElement {
+    }
+    var HTMLCatTabElement: {
+        prototype: HTMLCatTabElement;
+        new (): HTMLCatTabElement;
+    };
+    interface HTMLCatTabsElement extends Components.CatTabs, HTMLStencilElement {
+    }
+    var HTMLCatTabsElement: {
+        prototype: HTMLCatTabsElement;
+        new (): HTMLCatTabsElement;
+    };
     interface HTMLCatTextareaElement extends Components.CatTextarea, HTMLStencilElement {
     }
     var HTMLCatTextareaElement: {
@@ -634,6 +698,8 @@ declare global {
         "cat-scrollable": HTMLCatScrollableElement;
         "cat-skeleton": HTMLCatSkeletonElement;
         "cat-spinner": HTMLCatSpinnerElement;
+        "cat-tab": HTMLCatTabElement;
+        "cat-tabs": HTMLCatTabsElement;
         "cat-textarea": HTMLCatTextareaElement;
         "cat-toast-demo": HTMLCatToastDemoElement;
         "cat-toggle": HTMLCatToggleElement;
@@ -800,6 +866,10 @@ declare namespace LocalJSX {
           * Disabled state of the checkbox
          */
         "disabled"?: boolean;
+        /**
+          * Optional hint text(s) to be displayed with the checkbox.
+         */
+        "hint"?: string | string[];
         /**
           * Indeterminate state of the checkbox
          */
@@ -865,9 +935,9 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Optional hint text to be displayed with the input.
+          * Optional hint text(s) to be displayed with the input.
          */
-        "hint"?: string;
+        "hint"?: string | string[];
         /**
           * The name of an icon to be displayed in the input.
          */
@@ -972,6 +1042,10 @@ declare namespace LocalJSX {
           * Whether this radio is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * Optional hint text(s) to be displayed with the radio.
+         */
+        "hint"?: string | string[];
         /**
           * The label of the radio that is visible.
          */
@@ -1079,15 +1153,59 @@ declare namespace LocalJSX {
          */
         "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatTab {
+        /**
+          * Specifies that the tab should be deactivated.
+         */
+        "deactivated"?: boolean;
+        /**
+          * The name of an icon to be displayed in the tab.
+         */
+        "icon"?: string;
+        /**
+          * Hide the actual button content and only display the tab.
+         */
+        "iconOnly"?: boolean | Breakpoint;
+        /**
+          * Display the icon on the right.
+         */
+        "iconRight"?: boolean;
+        /**
+          * The label of the tab.
+         */
+        "label"?: string;
+        /**
+          * Emitted when tab is clicked.
+         */
+        "onTabClick"?: (event: CustomEvent<MouseEvent>) => void;
+        /**
+          * A destination to link to, rendered in the href attribute of a link.
+         */
+        "url"?: string;
+        /**
+          * Specifies where to open the linked document.
+         */
+        "urlTarget"?: '_blank' | '_self';
+    }
+    interface CatTabs {
+        /**
+          * The ID of the active tab.
+         */
+        "activeTab"?: string;
+        /**
+          * The alignment of the tabs.
+         */
+        "tabsAlign"?: 'left' | 'center' | 'right' | 'justify';
+    }
     interface CatTextarea {
         /**
           * Whether the textarea is disabled.
          */
         "disabled"?: boolean;
         /**
-          * Optional hint text to be displayed with the textarea.
+          * Optional hint text(s) to be displayed with the textarea.
          */
-        "hint"?: string;
+        "hint"?: string | string[];
         /**
           * The label for the textarea.
          */
@@ -1152,6 +1270,10 @@ declare namespace LocalJSX {
           * Disabled state of the toggle.
          */
         "disabled"?: boolean;
+        /**
+          * Optional hint text(s) to be displayed with the toggle.
+         */
+        "hint"?: string | string[];
         /**
           * The label of the toggle that is visible.
          */
@@ -1225,6 +1347,8 @@ declare namespace LocalJSX {
         "cat-scrollable": CatScrollable;
         "cat-skeleton": CatSkeleton;
         "cat-spinner": CatSpinner;
+        "cat-tab": CatTab;
+        "cat-tabs": CatTabs;
         "cat-textarea": CatTextarea;
         "cat-toast-demo": CatToastDemo;
         "cat-toggle": CatToggle;
@@ -1248,6 +1372,8 @@ declare module "@stencil/core" {
             "cat-scrollable": LocalJSX.CatScrollable & JSXBase.HTMLAttributes<HTMLCatScrollableElement>;
             "cat-skeleton": LocalJSX.CatSkeleton & JSXBase.HTMLAttributes<HTMLCatSkeletonElement>;
             "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
+            "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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "0.4.1",
-    "@haiilo/catalyst-tokens": "^0.6.0",
+    "@haiilo/catalyst-tokens": "0.7.0",
     "@stencil/core": "2.15.0",
     "autosize": "^5.0.1",
     "focus-trap": "6.8.1",