@haiilo/catalyst 0.1.0 → 0.2.1

package/dist/types/components.d.ts

@@ -6,7 +6,36 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
+import { Placement } from "@floating-ui/dom";
 export namespace Components {
+    interface CatAlert {
+        /**
+          * The color palette of the alert.
+         */
+        "color": 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+    }
+    interface CatBadge {
+        /**
+          * The color palette of the badge.
+         */
+        "color": 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+        /**
+          * Draw attention to the badge with a subtle animation.
+         */
+        "pulse": boolean;
+        /**
+          * Use round badge edges.
+         */
+        "round": boolean;
+        /**
+          * The size of the badge.
+         */
+        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the badge.
+         */
+        "variant": 'filled' | 'outlined';
+    }
     interface CatButton {
         /**
           * 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.
@@ -96,6 +125,30 @@ export namespace Components {
          */
         "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatMenu {
+        /**
+          * The placement of the menu.
+         */
+        "placement": Placement;
+    }
+    interface CatSkeleton {
+        /**
+          * The animation style of the skeleton.
+         */
+        "effect": 'plain' | 'sheen' | 'pulse';
+        /**
+          * The number of text lines to be rendered for "head" and "body" variants. Defaults to 1 for "head" and 3 for "body". Will be ignored for other variants.
+         */
+        "lines"?: number;
+        /**
+          * The size of the skeleton. If the variant is set to "head", the size values "xs" to "xl" translate to the head levels `h1` to `h5`.
+         */
+        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the skeleton.
+         */
+        "variant": 'rectangle' | 'square' | 'circle' | 'head' | 'body';
+    }
     interface CatSpinner {
         /**
           * Adds accessible label for the spinner that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -108,6 +161,18 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLCatAlertElement extends Components.CatAlert, HTMLStencilElement {
+    }
+    var HTMLCatAlertElement: {
+        prototype: HTMLCatAlertElement;
+        new (): HTMLCatAlertElement;
+    };
+    interface HTMLCatBadgeElement extends Components.CatBadge, HTMLStencilElement {
+    }
+    var HTMLCatBadgeElement: {
+        prototype: HTMLCatBadgeElement;
+        new (): HTMLCatBadgeElement;
+    };
     interface HTMLCatButtonElement extends Components.CatButton, HTMLStencilElement {
     }
     var HTMLCatButtonElement: {
@@ -120,6 +185,18 @@ declare global {
         prototype: HTMLCatIconElement;
         new (): HTMLCatIconElement;
     };
+    interface HTMLCatMenuElement extends Components.CatMenu, HTMLStencilElement {
+    }
+    var HTMLCatMenuElement: {
+        prototype: HTMLCatMenuElement;
+        new (): HTMLCatMenuElement;
+    };
+    interface HTMLCatSkeletonElement extends Components.CatSkeleton, HTMLStencilElement {
+    }
+    var HTMLCatSkeletonElement: {
+        prototype: HTMLCatSkeletonElement;
+        new (): HTMLCatSkeletonElement;
+    };
     interface HTMLCatSpinnerElement extends Components.CatSpinner, HTMLStencilElement {
     }
     var HTMLCatSpinnerElement: {
@@ -127,12 +204,44 @@ declare global {
         new (): HTMLCatSpinnerElement;
     };
     interface HTMLElementTagNameMap {
+        "cat-alert": HTMLCatAlertElement;
+        "cat-badge": HTMLCatBadgeElement;
         "cat-button": HTMLCatButtonElement;
         "cat-icon": HTMLCatIconElement;
+        "cat-menu": HTMLCatMenuElement;
+        "cat-skeleton": HTMLCatSkeletonElement;
         "cat-spinner": HTMLCatSpinnerElement;
     }
 }
 declare namespace LocalJSX {
+    interface CatAlert {
+        /**
+          * The color palette of the alert.
+         */
+        "color"?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+    }
+    interface CatBadge {
+        /**
+          * The color palette of the badge.
+         */
+        "color"?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+        /**
+          * Draw attention to the badge with a subtle animation.
+         */
+        "pulse"?: boolean;
+        /**
+          * Use round badge edges.
+         */
+        "round"?: boolean;
+        /**
+          * The size of the badge.
+         */
+        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the badge.
+         */
+        "variant"?: 'filled' | 'outlined';
+    }
     interface CatButton {
         /**
           * 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.
@@ -178,6 +287,10 @@ declare namespace LocalJSX {
           * Emitted when the button loses focus.
          */
         "onCatBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the button is clicked.
+         */
+        "onCatClick"?: (event: CustomEvent<MouseEvent>) => void;
         /**
           * Emitted when the button received focus.
          */
@@ -225,6 +338,38 @@ declare namespace LocalJSX {
          */
         "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatMenu {
+        /**
+          * Emitted when the menu is closed.
+         */
+        "onCatClose"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the menu is opened.
+         */
+        "onCatOpen"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * The placement of the menu.
+         */
+        "placement"?: Placement;
+    }
+    interface CatSkeleton {
+        /**
+          * The animation style of the skeleton.
+         */
+        "effect"?: 'plain' | 'sheen' | 'pulse';
+        /**
+          * The number of text lines to be rendered for "head" and "body" variants. Defaults to 1 for "head" and 3 for "body". Will be ignored for other variants.
+         */
+        "lines"?: number;
+        /**
+          * The size of the skeleton. If the variant is set to "head", the size values "xs" to "xl" translate to the head levels `h1` to `h5`.
+         */
+        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the skeleton.
+         */
+        "variant"?: 'rectangle' | 'square' | 'circle' | 'head' | 'body';
+    }
     interface CatSpinner {
         /**
           * Adds accessible label for the spinner that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -236,8 +381,12 @@ declare namespace LocalJSX {
         "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
     interface IntrinsicElements {
+        "cat-alert": CatAlert;
+        "cat-badge": CatBadge;
         "cat-button": CatButton;
         "cat-icon": CatIcon;
+        "cat-menu": CatMenu;
+        "cat-skeleton": CatSkeleton;
         "cat-spinner": CatSpinner;
     }
 }
@@ -245,8 +394,12 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "cat-alert": LocalJSX.CatAlert & JSXBase.HTMLAttributes<HTMLCatAlertElement>;
+            "cat-badge": LocalJSX.CatBadge & JSXBase.HTMLAttributes<HTMLCatBadgeElement>;
             "cat-button": LocalJSX.CatButton & JSXBase.HTMLAttributes<HTMLCatButtonElement>;
             "cat-icon": LocalJSX.CatIcon & JSXBase.HTMLAttributes<HTMLCatIconElement>;
+            "cat-menu": LocalJSX.CatMenu & JSXBase.HTMLAttributes<HTMLCatMenuElement>;
+            "cat-skeleton": LocalJSX.CatSkeleton & JSXBase.HTMLAttributes<HTMLCatSkeletonElement>;
             "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -43,20 +43,23 @@
     "reset": "rm -rf ./dist ./loader ./node_modules ./www"
   },
   "dependencies": {
-    "@stencil/core": "2.13.0",
+    "@floating-ui/dom": "0.4.1",
+    "@stencil/core": "2.15.0",
+    "focus-trap": "6.8.0-beta.2",
     "loglevel": "1.8.0",
-    "sanitize.css": "13.0.0"
+    "sanitize.css": "13.0.0",
+    "tabbable": "5.3.0-beta.1"
   },
   "peerDependencies": {
-    "@haiilo/catalyst-icons": ">=0.1.1",
-    "@haiilo/catalyst-tokens": ">=0.1.2"
+    "@haiilo/catalyst-icons": ">=0.1.2",
+    "@haiilo/catalyst-tokens": ">=0.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
-    "@haiilo/catalyst-icons": "^0.1.1",
-    "@haiilo/catalyst-tokens": "^0.1.2",
+    "@haiilo/catalyst-icons": "^0.1.2",
+    "@haiilo/catalyst-tokens": "^0.1.4",
     "@stencil/angular-output-target": "^0.4.0",
-    "@stencil/react-output-target": "^0.2.1",
+    "@stencil/react-output-target": "^0.3.1",
     "@stencil/sass": "^1.5.2",
     "@stencil/vue-output-target": "^0.6.0",
     "@types/jest": "^27.4.0",
@@ -68,7 +71,7 @@
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "prettier": "^2.5.1",
-    "puppeteer": "^10.0.0",
+    "puppeteer": "^13.5.2",
     "standard-version": "^9.3.2",
     "stylelint": "^14.4.0",
     "stylelint-config-prettier-scss": "^0.0.1",