@haiilo/catalyst 0.2.0 → 0.2.3

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

@@ -1,89 +0,0 @@
-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

@@ -1,33 +0,0 @@
-/**
- * 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

@@ -1,185 +0,0 @@
-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

@@ -1,177 +0,0 @@
-/**
- * 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

@@ -1,130 +0,0 @@
-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

@@ -1,63 +0,0 @@
-/**
- * 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);
-  }
-}