@haiilo/catalyst 0.1.0 → 0.1.1

package/dist/catalyst/cat-spinner.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-72a1bbba.js';
+import { r as registerInstance, h } from './index-45406d3b.js';
 
 const catSpinnerCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.cat-spinner-xs svg{font-size:0.75rem}.cat-spinner-s svg{font-size:1rem}.cat-spinner-m svg{font-size:1.25rem}.cat-spinner-l svg{font-size:1.5rem}.cat-spinner-xl svg{font-size:1.75rem}@keyframes cat-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
 

package/dist/catalyst/catalyst.css

@@ -551,6 +551,13 @@ dl dl {
   margin-bottom: 0;
 }
 
+nav ol,
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
 dt {
   font-weight: 600;
 }

package/dist/catalyst/catalyst.esm.js

@@ -1,5 +1,5 @@
-import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-72a1bbba.js';
-import { g as globalScripts } from './app-globals-622e4f87.js';
+import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-45406d3b.js';
+import { g as globalScripts } from './app-globals-f83c9e4a.js';
 import './cat-icon-registry-59da2e37.js';
 
 /*
@@ -122,5 +122,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["cat-icon",[[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-spinner",[[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-button",[[1,"cat-button",{"variant":[1],"color":[1],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"ellipsed":[4],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconSuffix":[4,"icon-suffix"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]]]]], options);
+  return bootstrapLazy([["cat-button",[[1,"cat-button",{"variant":[1],"color":[1],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"ellipsed":[4],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconSuffix":[4,"icon-suffix"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]]]],["cat-menu",[[4,"cat-menu",{"placement":[1]}]]],["cat-icon",[[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-spinner",[[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
 });

package/dist/{esm/index-72a1bbba.js → catalyst/index-45406d3b.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'catalyst';
-const BUILD = /* catalyst */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: false, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: true, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: true, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: false, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* catalyst */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: true, disconnectedCallback: false, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: false, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 const Env = /* catalyst */ {};
 
 let scopeId;
@@ -3028,4 +3028,4 @@ const Build = {
     isTesting: BUILD.isTesting ? true : false,
 };
 
-export { BUILD as B, CSS as C, H, NAMESPACE as N, promiseResolve as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, createEvent as e, h, plt as p, registerInstance as r, win as w };
+export { BUILD as B, CSS as C, H, NAMESPACE as N, promiseResolve as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, createEvent as e, Host as f, getElement as g, h, plt as p, registerInstance as r, win as w };

package/dist/components/cat-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatMenu extends Components.CatMenu, HTMLElement {}
+export const CatMenu: {
+  prototype: CatMenu;
+  new (): CatMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,23 @@
+import { Placement } from '@floating-ui/dom';
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CatMenu {
+  private static OFFSET;
+  private trigger;
+  private content;
+  private trap?;
+  host: HTMLElement;
+  placement: Placement;
+  /**
+   * Emitted when the menu is opened.
+   */
+  catOpen: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the menu is closed.
+   */
+  catClose: EventEmitter<FocusEvent>;
+  componentDidLoad(): void;
+  render(): any;
+  private show;
+  private hide;
+  private update;
+}

package/dist/types/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
+import { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface CatButton {
         /**
@@ -96,6 +97,9 @@ export namespace Components {
          */
         "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatMenu {
+        "placement": Placement;
+    }
     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.
@@ -120,6 +124,12 @@ declare global {
         prototype: HTMLCatIconElement;
         new (): HTMLCatIconElement;
     };
+    interface HTMLCatMenuElement extends Components.CatMenu, HTMLStencilElement {
+    }
+    var HTMLCatMenuElement: {
+        prototype: HTMLCatMenuElement;
+        new (): HTMLCatMenuElement;
+    };
     interface HTMLCatSpinnerElement extends Components.CatSpinner, HTMLStencilElement {
     }
     var HTMLCatSpinnerElement: {
@@ -129,6 +139,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "cat-button": HTMLCatButtonElement;
         "cat-icon": HTMLCatIconElement;
+        "cat-menu": HTMLCatMenuElement;
         "cat-spinner": HTMLCatSpinnerElement;
     }
 }
@@ -225,6 +236,17 @@ 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;
+        "placement"?: Placement;
+    }
     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.
@@ -238,6 +260,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "cat-button": CatButton;
         "cat-icon": CatIcon;
+        "cat-menu": CatMenu;
         "cat-spinner": CatSpinner;
     }
 }
@@ -247,6 +270,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "cat-button": LocalJSX.CatButton & JSXBase.HTMLAttributes<HTMLCatButtonElement>;
             "cat-icon": LocalJSX.CatIcon & JSXBase.HTMLAttributes<HTMLCatIconElement>;
+            "cat-menu": LocalJSX.CatMenu & JSXBase.HTMLAttributes<HTMLCatMenuElement>;
             "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -43,18 +43,21 @@
     "reset": "rm -rf ./dist ./loader ./node_modules ./www"
   },
   "dependencies": {
+    "@floating-ui/dom": "^0.4.1",
     "@stencil/core": "2.13.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.3"
   },
   "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.3",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/react-output-target": "^0.2.1",
     "@stencil/sass": "^1.5.2",