@haiilo/catalyst 0.1.0 → 0.2.1

package/dist/collection/components/cat-badge/cat-badge.js

@@ -0,0 +1,141 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * Badges are used to draw attention and display statuses or counts.
+ *
+ * @part badge - The content of the badge.
+ */
+export class CatBadge {
+  constructor() {
+    /**
+     * The rendering style of the badge.
+     */
+    this.variant = 'filled';
+    /**
+     * The color palette of the badge.
+     */
+    this.color = 'primary';
+    /**
+     * The size of the badge.
+     */
+    this.size = 'm';
+    /**
+     * Use round badge edges.
+     */
+    this.round = false;
+    /**
+     * Draw attention to the badge with a subtle animation.
+     */
+    this.pulse = false;
+  }
+  render() {
+    return (h("span", { part: "badge", class: {
+        'cat-badge': true,
+        'cat-badge-round': this.round,
+        'cat-badge-pulse': this.pulse,
+        [`cat-badge-${this.variant}`]: Boolean(this.variant),
+        [`cat-badge-${this.color}`]: Boolean(this.color),
+        [`cat-badge-${this.size}`]: Boolean(this.size)
+      } },
+      h("slot", null)));
+  }
+  static get is() { return "cat-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-badge.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-badge.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'filled' | 'outlined'",
+        "resolved": "\"filled\" | \"outlined\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The rendering style of the badge."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'filled'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'danger' | 'success' | 'warning'",
+        "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The color palette of the badge."
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
+        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the badge."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
+    },
+    "round": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Use round badge edges."
+      },
+      "attribute": "round",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "pulse": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Draw attention to the badge with a subtle animation."
+      },
+      "attribute": "pulse",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/cat-button/cat-button.css

@@ -13,7 +13,8 @@
   user-select: none;
   /* stylelint-enable property-no-vendor-prefix */
 }
-:host[hidden] {
+
+:host([hidden]) {
   display: none;
 }
 
@@ -114,19 +115,19 @@
 }
 
 .cat-button-secondary {
-  --bg: 248, 248, 251;
-  --fill: 0, 0, 0;
+  --bg: 105, 118, 135;
+  --fill: 255, 255, 255;
   --text: 0, 0, 0;
-  --base: 248, 248, 251;
+  --base: 105, 118, 135;
 }
 .cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 235, 236, 240;
-  --fill: 0, 0, 0;
+  --bg: 105, 118, 135;
+  --fill: 255, 255, 255;
   --text: 0, 0, 0;
 }
 .cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 235, 236, 240;
-  --fill: 0, 0, 0;
+  --bg: 105, 118, 135;
+  --fill: 255, 255, 255;
   --text: 0, 0, 0;
 }
 
@@ -198,6 +199,10 @@
   padding-left: 0;
   padding-right: 0;
 }
+:host-context(nav) .cat-button-xs {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 
 .cat-button-s {
   min-width: 2rem;
@@ -220,6 +225,10 @@
   padding-left: 0;
   padding-right: 0;
 }
+:host-context(nav) .cat-button-s {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 
 .cat-button-m {
   min-width: 2.5rem;
@@ -242,6 +251,10 @@
   padding-left: 0;
   padding-right: 0;
 }
+:host-context(nav) .cat-button-m {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 
 .cat-button-l {
   min-width: 3rem;
@@ -264,6 +277,10 @@
   padding-left: 0;
   padding-right: 0;
 }
+:host-context(nav) .cat-button-l {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 
 .cat-button-xl {
   min-width: 3.5rem;
@@ -281,4 +298,22 @@
   width: 3.5rem;
   padding-left: 0;
   padding-right: 0;
+}
+:host-context(nav) .cat-button-xl {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+:host-context(nav) {
+  width: 100%;
+}
+:host-context(nav) .cat-button {
+  box-shadow: none;
+  border-radius: 0;
+}
+:host-context(nav) .cat-button:focus-visible {
+  outline-offset: -2px;
+}
+:host-context(nav) .cat-button-content {
+  text-align: left;
 }

package/dist/collection/components/cat-button/cat-button.js

@@ -16,11 +16,11 @@ export class CatButton {
     /**
      * The rendering style of the button.
      */
-    this.variant = 'filled';
+    this.variant = 'outlined';
     /**
      * The color palette of the button.
      */
-    this.color = 'primary';
+    this.color = 'secondary';
     /**
      * The size of the button.
      */
@@ -112,7 +112,7 @@ export class CatButton {
           [`cat-button-${this.variant}`]: Boolean(this.variant),
           [`cat-button-${this.color}`]: Boolean(this.color),
           [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
     }
     else {
       return (h("button", { ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
@@ -125,7 +125,7 @@ export class CatButton {
           [`cat-button-${this.variant}`]: Boolean(this.variant),
           [`cat-button-${this.color}`]: Boolean(this.color),
           [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
     }
   }
   get iconSize() {
@@ -162,6 +162,9 @@ export class CatButton {
       this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
     ];
   }
+  onClick(event) {
+    this.catClick.emit(event);
+  }
   onFocus(event) {
     this.catFocus.emit(event);
   }
@@ -193,7 +196,7 @@ export class CatButton {
       },
       "attribute": "variant",
       "reflect": false,
-      "defaultValue": "'filled'"
+      "defaultValue": "'outlined'"
     },
     "color": {
       "type": "string",
@@ -211,7 +214,7 @@ export class CatButton {
       },
       "attribute": "color",
       "reflect": false,
-      "defaultValue": "'primary'"
+      "defaultValue": "'secondary'"
     },
     "size": {
       "type": "string",
@@ -486,6 +489,25 @@ export class CatButton {
     "_iconOnly": {}
   }; }
   static get events() { return [{
+      "method": "catClick",
+      "name": "catClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the button is clicked."
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
       "method": "catFocus",
       "name": "catFocus",
       "bubbles": true,

package/dist/collection/components/cat-icon/cat-icon.css

@@ -12,7 +12,8 @@
   user-select: none;
   /* stylelint-enable property-no-vendor-prefix */
 }
-:host[hidden] {
+
+:host([hidden]) {
   display: none;
 }
 

package/dist/collection/components/cat-menu/cat-menu.css

@@ -0,0 +1,33 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.content {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  position: absolute;
+  background: white;
+  display: none;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  min-width: 8rem;
+  max-width: 16rem;
+  min-height: 2rem;
+  max-height: calc(100vh - 48px);
+  box-shadow: 0 1px 4px 0 rgba(16, 29, 48, 0.2);
+  border-radius: 0.25rem;
+}

package/dist/collection/components/cat-menu/cat-menu.js

@@ -0,0 +1,185 @@
+import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
+import { Component, Event, h, Host, Listen, Prop } from '@stencil/core';
+import * as focusTrap from 'focus-trap';
+import { tabbable } from 'tabbable';
+let nextUniqueId = 0;
+export class CatMenu {
+  constructor() {
+    this.id = nextUniqueId++;
+    /**
+     * The placement of the menu.
+     */
+    this.placement = 'bottom-start';
+  }
+  clickHandler(event) {
+    var _a;
+    // hide menu on button click
+    if (this.content && event.composedPath().includes(this.content)) {
+      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+      this.hide();
+    }
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d, _e;
+    this.trigger = this.firstTabbable(this.triggerSlot);
+    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
+    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
+    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
+    if (this.trigger && this.content) {
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => this.show());
+      autoUpdate(this.trigger, this.content, () => this.update());
+    }
+    this.keyListener = event => {
+      if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
+        const activeElement = this.firstTabbable(document.activeElement);
+        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
+        const activeOff = event.key === 'ArrowDown' ? 1 : -1;
+        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+        targetElements[targetIdx].focus();
+        event.preventDefault();
+      }
+    };
+    document.addEventListener('keydown', this.keyListener);
+  }
+  disconnectedCallback() {
+    if (this.keyListener) {
+      document.removeEventListener('keydown', this.keyListener);
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }),
+      h("div", { class: "content", ref: el => (this.content = el) },
+        h("slot", { name: "content" }))));
+  }
+  get contentId() {
+    return `cat-menu-${this.id}`;
+  }
+  show() {
+    var _a;
+    if (this.content) {
+      this.content.style.display = 'block';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
+      this.catOpen.emit();
+      this.trap = this.trap
+        ? this.trap.updateContainerElements(this.content)
+        : focusTrap.createFocusTrap(this.content, {
+          tabbableOptions: {
+            getShadowRoot: true
+          },
+          allowOutsideClick: true,
+          clickOutsideDeactivates: event => !this.content || !event.composedPath().includes(this.content),
+          onPostDeactivate: () => this.hide()
+        });
+      this.trap.activate();
+    }
+  }
+  hide() {
+    var _a;
+    if (this.content) {
+      this.content.style.display = '';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+      this.catClose.emit();
+    }
+  }
+  update() {
+    if (this.trigger && this.content) {
+      computePosition(this.trigger, this.content, {
+        placement: this.placement,
+        middleware: [offset(CatMenu.OFFSET), flip()]
+      }).then(({ x, y }) => {
+        if (this.content) {
+          Object.assign(this.content.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+        }
+      });
+    }
+  }
+  firstTabbable(container) {
+    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
+  }
+  static get is() { return "cat-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-menu.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-menu.css"]
+  }; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@floating-ui/dom"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placement of the menu."
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom-start'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "catOpen",
+      "name": "catOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the menu is opened."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "catClose",
+      "name": "catClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the menu is closed."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "catClick",
+      "method": "clickHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+CatMenu.OFFSET = 4;