@haiilo/catalyst 0.1.1 → 0.2.0

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

@@ -0,0 +1,89 @@
+import { Component, h, Prop } from '@stencil/core';
+import { CatIconRegistry } from './cat-icon-registry';
+/**
+ * Icons are used to provide additional meaning or in places where text label
+ * doesn't fit.
+ *
+ * @part icon - The native span element wrapping the SVG icon.
+ */
+export class CatIcon {
+  constructor() {
+    this.iconRegistry = CatIconRegistry.getInstance();
+    /**
+     * The name of the icon.
+     */
+    this.icon = '';
+    /**
+     * The size of the icon.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { innerHTML: this.iconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        [`cat-icon-${this.size}`]: this.size !== 'inline'
+      } }));
+  }
+  static get is() { return "cat-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-icon.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the icon."
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xs' | 's' | 'm' | 'l' | 'xl' | 'inline'",
+        "resolved": "\"inline\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the icon."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
+    },
+    "a11yLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds accessible label for the icon that is only shown for screen\nreaders. The `aria-hidden` attribute will be set if no label is present."
+      },
+      "attribute": "a11y-label",
+      "reflect": false
+    }
+  }; }
+}

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;

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

@@ -0,0 +1,177 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  /**
+   * @prop --background: The background color of the skeleton.
+   * @prop --highlight: The highlight color of the skeleton.
+   * @prop --speed: The animation speed.
+   */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  --background: #ebecf0;
+  --highlight: #d7dbe0;
+  --speed: 2s;
+}
+
+:host([variant=square]),
+:host([variant=circle]) {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([variant=head]) {
+  margin-bottom: 0.5rem;
+}
+
+:host([variant=body]) {
+  margin-bottom: 1rem;
+}
+
+.cat-skeleton {
+  display: block;
+  border-radius: 0.25rem;
+  background: var(--background);
+}
+
+.cat-skeleton-circle {
+  border-radius: 10rem;
+}
+
+.cat-skeleton-xs.cat-skeleton-rectangle {
+  width: var(--width, 100%);
+  height: var(--height, 1.5rem);
+}
+.cat-skeleton-xs.cat-skeleton-square, .cat-skeleton-xs.cat-skeleton-circle {
+  width: var(--width, 1.5rem);
+  height: var(--height, 1.5rem);
+}
+.cat-skeleton-xs.cat-skeleton-head, .cat-skeleton-xs.cat-skeleton-body {
+  width: var(--width, var(--line-width, 100%));
+}
+.cat-skeleton-xs.cat-skeleton-head {
+  height: calc(0.9375rem - 4px);
+  margin: calc((1.25rem - 0.9375rem + 4px) * 0.5) 0;
+}
+.cat-skeleton-xs.cat-skeleton-body {
+  height: calc(0.75rem - 4px);
+  margin: calc((1rem - 0.75rem + 4px) * 0.5) 0;
+}
+
+.cat-skeleton-s.cat-skeleton-rectangle {
+  width: var(--width, 100%);
+  height: var(--height, 2rem);
+}
+.cat-skeleton-s.cat-skeleton-square, .cat-skeleton-s.cat-skeleton-circle {
+  width: var(--width, 2rem);
+  height: var(--height, 2rem);
+}
+.cat-skeleton-s.cat-skeleton-head, .cat-skeleton-s.cat-skeleton-body {
+  width: var(--width, var(--line-width, 100%));
+}
+.cat-skeleton-s.cat-skeleton-head {
+  height: calc(1.125rem - 4px);
+  margin: calc((1.5rem - 1.125rem + 4px) * 0.5) 0;
+}
+.cat-skeleton-s.cat-skeleton-body {
+  height: calc(0.875rem - 4px);
+  margin: calc((1rem - 0.875rem + 4px) * 0.5) 0;
+}
+
+.cat-skeleton-m.cat-skeleton-rectangle {
+  width: var(--width, 100%);
+  height: var(--height, 2.5rem);
+}
+.cat-skeleton-m.cat-skeleton-square, .cat-skeleton-m.cat-skeleton-circle {
+  width: var(--width, 2.5rem);
+  height: var(--height, 2.5rem);
+}
+.cat-skeleton-m.cat-skeleton-head, .cat-skeleton-m.cat-skeleton-body {
+  width: var(--width, var(--line-width, 100%));
+}
+.cat-skeleton-m.cat-skeleton-head {
+  height: calc(1.25rem - 4px);
+  margin: calc((1.5rem - 1.25rem + 4px) * 0.5) 0;
+}
+.cat-skeleton-m.cat-skeleton-body {
+  height: calc(0.9375rem - 4px);
+  margin: calc((1.25rem - 0.9375rem + 4px) * 0.5) 0;
+}
+
+.cat-skeleton-l.cat-skeleton-rectangle {
+  width: var(--width, 100%);
+  height: var(--height, 3rem);
+}
+.cat-skeleton-l.cat-skeleton-square, .cat-skeleton-l.cat-skeleton-circle {
+  width: var(--width, 3rem);
+  height: var(--height, 3rem);
+}
+.cat-skeleton-l.cat-skeleton-head, .cat-skeleton-l.cat-skeleton-body {
+  width: var(--width, var(--line-width, 100%));
+}
+.cat-skeleton-l.cat-skeleton-head {
+  height: calc(1.5rem - 4px);
+  margin: calc((1.75rem - 1.5rem + 4px) * 0.5) 0;
+}
+.cat-skeleton-l.cat-skeleton-body {
+  height: calc(1.125rem - 4px);
+  margin: calc((1.5rem - 1.125rem + 4px) * 0.5) 0;
+}
+
+.cat-skeleton-xl.cat-skeleton-rectangle {
+  width: var(--width, 100%);
+  height: var(--height, 3.5rem);
+}
+.cat-skeleton-xl.cat-skeleton-square, .cat-skeleton-xl.cat-skeleton-circle {
+  width: var(--width, 3.5rem);
+  height: var(--height, 3.5rem);
+}
+.cat-skeleton-xl.cat-skeleton-head, .cat-skeleton-xl.cat-skeleton-body {
+  width: var(--width, var(--line-width, 100%));
+}
+.cat-skeleton-xl.cat-skeleton-head {
+  height: calc(1.75rem - 4px);
+  margin: calc((2rem - 1.75rem + 4px) * 0.5) 0;
+}
+.cat-skeleton-xl.cat-skeleton-body {
+  height: calc(1.25rem - 4px);
+  margin: calc((1.5rem - 1.25rem + 4px) * 0.5) 0;
+}
+
+.cat-skeleton-sheen {
+  background: linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);
+  background-size: 300% 100%;
+  animation: sheen var(--speed) ease-in-out infinite;
+}
+
+.cat-skeleton-pulse {
+  position: relative;
+  overflow: hidden;
+}
+.cat-skeleton-pulse::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--highlight);
+  animation: var(--speed) ease-in-out 0.5s infinite normal none running pulse;
+  opacity: 0;
+}
+
+@keyframes sheen {
+  0% {
+    background-position: right;
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,130 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+/**
+ * Skeletons are used to show where content will eventually be drawn.
+ */
+export class CatSkeleton {
+  constructor() {
+    /**
+     * The animation style of the skeleton.
+     */
+    this.effect = 'sheen';
+    /**
+     * The rendering style of the skeleton.
+     */
+    this.variant = 'rectangle';
+    /**
+     * 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`.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
+        'cat-skeleton': true,
+        [`cat-skeleton-${this.effect}`]: Boolean(this.effect),
+        [`cat-skeleton-${this.variant}`]: Boolean(this.variant),
+        [`cat-skeleton-${this.size}`]: Boolean(this.size)
+      } })))));
+  }
+  get count() {
+    switch (this.variant) {
+      case 'head':
+        return Math.max(1, this.lines || 1);
+      case 'body':
+        return Math.max(1, this.lines || 3);
+      default:
+        return 1;
+    }
+  }
+  get style() {
+    return this.variant === 'head' || this.variant === 'body'
+      ? {
+        '--line-width': `${this.random(50, 100)}%`
+      }
+      : undefined;
+  }
+  random(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+  static get is() { return "cat-skeleton"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-skeleton.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-skeleton.css"]
+  }; }
+  static get properties() { return {
+    "effect": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'plain' | 'sheen' | 'pulse'",
+        "resolved": "\"plain\" | \"pulse\" | \"sheen\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The animation style of the skeleton."
+      },
+      "attribute": "effect",
+      "reflect": false,
+      "defaultValue": "'sheen'"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'rectangle' | 'square' | 'circle' | 'head' | 'body'",
+        "resolved": "\"body\" | \"circle\" | \"head\" | \"rectangle\" | \"square\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The rendering style of the skeleton."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'rectangle'"
+    },
+    "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 skeleton. If the variant is set to \"head\", the size values\n\"xs\" to \"xl\" translate to the head levels `h1` to `h5`."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
+    },
+    "lines": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The number of text lines to be rendered for \"head\" and \"body\" variants.\nDefaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\nvariants."
+      },
+      "attribute": "lines",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,63 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+: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);
+  }
+}