@haiilo/catalyst 0.4.0 → 0.5.0

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

@@ -0,0 +1,84 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: flex;
+  margin-bottom: 1rem;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+label {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+}
+
+.radio {
+  display: flex;
+  position: relative;
+}
+
+.circle {
+  position: absolute;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: rgb(var(--cat-primary-bg, 32, 127, 138));
+  border-radius: 10rem;
+  top: calc(50% - 0.375rem);
+  left: calc(50% - 0.375rem);
+  visibility: hidden;
+}
+
+input {
+  margin: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  appearance: none;
+  background-color: white;
+  border: 1px solid #d7dbe0;
+  border-radius: 10rem;
+  cursor: inherit;
+}
+input:checked {
+  border-color: rgb(var(--cat-primary-bg, 32, 127, 138));
+}
+input:checked + .circle {
+  visibility: visible;
+}
+input:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
+.is-hidden .label {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.is-disabled {
+  cursor: not-allowed;
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
+}
+.is-disabled input {
+  background-color: #f8f8fb;
+}
+.is-disabled input:checked {
+  border-color: #d7dbe0;
+}
+.is-disabled .circle {
+  background-color: #d7dbe0;
+}

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

@@ -0,0 +1,283 @@
+import { Component, Event, h, Prop, Method } from '@stencil/core';
+import log from 'loglevel';
+let nextUniqueId = 0;
+/**
+ * Radio Buttons are graphical interface elements that allow user to choose
+ * only one of a predefined set of mutually exclusive options.
+ *
+ * @part label - The label content.
+ */
+export class CatRadio {
+  constructor() {
+    this.id = `cat-radio-${++nextUniqueId}`;
+    /**
+     * Whether this radio is checked.
+     */
+    this.checked = false;
+    /**
+     * Whether this radio is disabled.
+     */
+    this.disabled = false;
+    /**
+     * The label of the radio that is visible.
+     */
+    this.label = '';
+    /**
+     * Visually hide the label, but still show it to assistive technologies like screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Whether the radio is required.
+     */
+    this.required = false;
+  }
+  componentWillRender() {
+    if (!this.label) {
+      log.error('[A11y] Missing ARIA label on radio', this);
+    }
+  }
+  /**
+   * Sets focus on the radio. Use this method instead of `radio.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  render() {
+    return (h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } },
+      h("span", { class: "radio" },
+        h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
+        h("span", { class: "circle" })),
+      h("span", { class: "label", part: "label" }, this.label)));
+  }
+  onChange(event) {
+    this.catChange.emit(event);
+  }
+  onFocus(event) {
+    this.catFocus.emit(event);
+  }
+  onBlur(event) {
+    this.catBlur.emit(event);
+  }
+  static get is() { return "cat-radio"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-radio.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-radio.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether this radio is checked."
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether this radio is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label of the radio that is visible."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "labelHidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+      },
+      "attribute": "label-hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of the radio component."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the radio is required."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The value of the radio component."
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "catChange",
+      "name": "catChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the radio is changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "catFocus",
+      "name": "catFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the radio received focus."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "catBlur",
+      "name": "catBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the radio loses focus."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(options?: FocusOptions | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "options An optional object providing options to control aspects of\nthe focusing process."
+              }],
+            "text": "An optional object providing options to control aspects of\nthe focusing process."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FocusOptions": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the radio. Use this method instead of `radio.focus()`.",
+        "tags": [{
+            "name": "param",
+            "text": "options An optional object providing options to control aspects of\nthe focusing process."
+          }]
+      }
+    }
+  }; }
+}
+//# sourceMappingURL=cat-radio.js.map

package/dist/collection/components/cat-radio/cat-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,GAAG,MAAM,UAAU,CAAC;AAE3B,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAMmB,OAAE,GAAG,aAAa,EAAE,YAAY,EAAE,CAAC;IAGpD;;OAEG;IACK,YAAO,GAAG,KAAK,CAAC;IAExB;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IAO5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;GA4E1B;EAtDC,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,GAAG,CAAC,KAAK,CAAC,oCAAoC,EAAE,IAAI,CAAC,CAAC;KACvD;EACH,CAAC;EAED;;;;;KAKG;EAEH,KAAK,CAAC,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;MAC7F,YAAM,KAAK,EAAC,OAAO;QACjB,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B;QACF,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACvB;MACP,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,KAAK,CACN,CACD,CACT,CAAC;EACJ,CAAC;EAEO,QAAQ,CAAC,KAAY;IAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Method } from '@stencil/core';\nimport log from 'loglevel';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly id = `cat-radio-${++nextUniqueId}`;\n  private input!: HTMLInputElement;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.error('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Sets focus on the radio. Use this method instead of `radio.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <label htmlFor={this.id} class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled }}>\n        <span class=\"radio\">\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onInput={this.onChange.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"circle\"></span>\n        </span>\n        <span class=\"label\" part=\"label\">\n          {this.label}\n        </span>\n      </label>\n    );\n  }\n\n  private onChange(event: Event) {\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}

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

@@ -1,6 +1,9 @@
-import { Component, Element, Event, h, Prop } from '@stencil/core';
+import { Component, Event, h, Prop } from '@stencil/core';
 import { fromEvent, merge, Subject } from 'rxjs';
 import { distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';
+/**
+ * An element to display scrollable content.
+ */
 export class CatScrollable {
   constructor() {
     this.init = new Subject();
@@ -304,6 +307,5 @@ export class CatScrollable {
         "references": {}
       }
     }]; }
-  static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=cat-scrollable.js.map

package/dist/collection/components/cat-scrollable/cat-scrollable.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-scrollable.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';\n\n@Component({\n  tag: 'cat-scrollable',\n  styleUrl: 'cat-scrollable.scss',\n  shadow: true\n})\nexport class CatScrollable {\n  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private scrolled!: Observable<Event>;\n\n  @Element() el!: HTMLElement;\n\n  /** Flags to enable/disable scroll shadowX. */\n  @Prop()\n  shadowX = true;\n\n  /** Flags to enable/disable scroll shadowY. */\n  @Prop()\n  shadowY = true;\n\n  /** Flags to enable/disable overflowX. */\n  @Prop()\n  overflowX = true;\n\n  /** Flags to enable/disable overflowY. */\n  @Prop()\n  overflowY = true;\n\n  /** Flag to enable/disable overscroll behavior. */\n  @Prop()\n  overscroll = true;\n\n  /**\n   * Flag to fire an initial event after content initialization.\n   */\n  @Prop() scrolledInit = true;\n\n  /**\n   * Buffer to be used to calculate the scroll distance.\n   */\n  @Prop()\n  scrolledBuffer = 0;\n\n  /**\n   * Emitted when the content is fully scrolled to the top.\n   */\n  @Event() scrolledTop!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the left.\n   */\n  @Event() scrolledLeft!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the right.\n   */\n  @Event() scrolledRight!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the bottom.\n   */\n  @Event() scrolledBottom!: EventEmitter<void>;\n\n  componentDidRender() {\n    if (this.scrollElement) {\n      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));\n    }\n    this.attachEmitter('left', this.scrolledLeft, this.scrolledBuffer);\n    this.attachEmitter('right', this.scrolledRight, this.scrolledBuffer);\n    this.attachEmitter('bottom', this.scrolledBottom, this.scrolledBuffer);\n    this.attachEmitter('top', this.scrolledTop, this.scrolledBuffer);\n    merge(this.init, this.scrolled)\n      .pipe(\n        map(() => ({\n          top: this.getScrollOffset('top') > 0,\n          left: this.getScrollOffset('left') > 0,\n          right: this.getScrollOffset('right') > 0,\n          bottom: this.getScrollOffset('bottom') > 0\n        })),\n        distinctUntilChanged(),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(({ top, left, right, bottom }) => {\n        this.toggleClass('cat-scrollable-top', top);\n        this.toggleClass('cat-scrollable-left', left);\n        this.toggleClass('cat-scrollable-right', right);\n        this.toggleClass('cat-scrollable-bottom', bottom);\n      });\n  }\n\n  componentDidLoad() {\n    if (this.scrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {this.shadowY && <div class=\"shadow-top\"></div>}\n        {this.shadowX && <div class=\"shadow-left\"></div>}\n        {this.shadowX && <div class=\"shadow-right\"></div>}\n        {this.shadowY && <div class=\"shadow-bottom\"></div>}\n      </div>,\n      <div\n        ref={el => (this.scrollElement = el)}\n        class={{\n          'scrollable-content': true,\n          'scroll-x': this.overflowX,\n          'scroll-y': this.overflowY,\n          'no-overscroll': !this.overscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>, buffer: number) {\n    merge(this.init, this.scrolled)\n      .pipe(map(() => this.getScrollOffset(from)))\n      .pipe(map(offset => offset <= buffer))\n      .pipe(distinctUntilChanged())\n      .pipe(filter(isLower => isLower))\n      .pipe(takeUntil(this.destroyed))\n      .subscribe(() => emitter.emit());\n  }\n\n  private getScrollOffset(from: 'top' | 'left' | 'right' | 'bottom') {\n    if (this.scrollElement) {\n      switch (from) {\n        case 'top':\n          return this.scrollElement.scrollTop;\n        case 'left':\n          return this.scrollElement.scrollLeft;\n        case 'right':\n          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;\n        case 'bottom':\n          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;\n        default:\n          return 0;\n      }\n    }\n    return 0;\n  }\n\n  private toggleClass(name: string, value: boolean) {\n    if (value) {\n      this.scrollWrapperElement?.classList.add(name);\n    } else {\n      this.scrollWrapperElement?.classList.remove(name);\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-scrollable.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';\n\n/**\n * An element to display scrollable content.\n */\n@Component({\n  tag: 'cat-scrollable',\n  styleUrl: 'cat-scrollable.scss',\n  shadow: true\n})\nexport class CatScrollable {\n  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private scrolled!: Observable<Event>;\n\n  /** Flags to enable/disable scroll shadowX. */\n  @Prop()\n  shadowX = true;\n\n  /** Flags to enable/disable scroll shadowY. */\n  @Prop()\n  shadowY = true;\n\n  /** Flags to enable/disable overflowX. */\n  @Prop()\n  overflowX = true;\n\n  /** Flags to enable/disable overflowY. */\n  @Prop()\n  overflowY = true;\n\n  /** Flag to enable/disable overscroll behavior. */\n  @Prop()\n  overscroll = true;\n\n  /**\n   * Flag to fire an initial event after content initialization.\n   */\n  @Prop() scrolledInit = true;\n\n  /**\n   * Buffer to be used to calculate the scroll distance.\n   */\n  @Prop() scrolledBuffer = 0;\n\n  /**\n   * Emitted when the content is fully scrolled to the top.\n   */\n  @Event() scrolledTop!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the left.\n   */\n  @Event() scrolledLeft!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the right.\n   */\n  @Event() scrolledRight!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the bottom.\n   */\n  @Event() scrolledBottom!: EventEmitter<void>;\n\n  componentDidRender() {\n    if (this.scrollElement) {\n      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));\n    }\n    this.attachEmitter('left', this.scrolledLeft, this.scrolledBuffer);\n    this.attachEmitter('right', this.scrolledRight, this.scrolledBuffer);\n    this.attachEmitter('bottom', this.scrolledBottom, this.scrolledBuffer);\n    this.attachEmitter('top', this.scrolledTop, this.scrolledBuffer);\n    merge(this.init, this.scrolled)\n      .pipe(\n        map(() => ({\n          top: this.getScrollOffset('top') > 0,\n          left: this.getScrollOffset('left') > 0,\n          right: this.getScrollOffset('right') > 0,\n          bottom: this.getScrollOffset('bottom') > 0\n        })),\n        distinctUntilChanged(),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(({ top, left, right, bottom }) => {\n        this.toggleClass('cat-scrollable-top', top);\n        this.toggleClass('cat-scrollable-left', left);\n        this.toggleClass('cat-scrollable-right', right);\n        this.toggleClass('cat-scrollable-bottom', bottom);\n      });\n  }\n\n  componentDidLoad() {\n    if (this.scrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {this.shadowY && <div class=\"shadow-top\"></div>}\n        {this.shadowX && <div class=\"shadow-left\"></div>}\n        {this.shadowX && <div class=\"shadow-right\"></div>}\n        {this.shadowY && <div class=\"shadow-bottom\"></div>}\n      </div>,\n      <div\n        ref={el => (this.scrollElement = el)}\n        class={{\n          'scrollable-content': true,\n          'scroll-x': this.overflowX,\n          'scroll-y': this.overflowY,\n          'no-overscroll': !this.overscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>, buffer: number) {\n    merge(this.init, this.scrolled)\n      .pipe(map(() => this.getScrollOffset(from)))\n      .pipe(map(offset => offset <= buffer))\n      .pipe(distinctUntilChanged())\n      .pipe(filter(isLower => isLower))\n      .pipe(takeUntil(this.destroyed))\n      .subscribe(() => emitter.emit());\n  }\n\n  private getScrollOffset(from: 'top' | 'left' | 'right' | 'bottom') {\n    if (this.scrollElement) {\n      switch (from) {\n        case 'top':\n          return this.scrollElement.scrollTop;\n        case 'left':\n          return this.scrollElement.scrollLeft;\n        case 'right':\n          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;\n        case 'bottom':\n          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;\n        default:\n          return 0;\n      }\n    }\n    return 0;\n  }\n\n  private toggleClass(name: string, value: boolean) {\n    if (value) {\n      this.scrollWrapperElement?.classList.add(name);\n    } else {\n      this.scrollWrapperElement?.classList.remove(name);\n    }\n  }\n}\n"]}

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

@@ -34,127 +34,127 @@
   margin-bottom: 1rem;
 }
 
-.cat-skeleton {
+.skeleton {
   display: block;
   border-radius: 0.25rem;
   background: var(--background);
 }
 
-.cat-skeleton-circle {
+.skeleton-circle {
   border-radius: 10rem;
 }
 
-.cat-skeleton-xs.cat-skeleton-rectangle {
+.skeleton-xs.skeleton-rectangle {
   width: var(--width, 100%);
   height: var(--height, 1.5rem);
 }
-.cat-skeleton-xs.cat-skeleton-square, .cat-skeleton-xs.cat-skeleton-circle {
+.skeleton-xs.skeleton-square, .skeleton-xs.skeleton-circle {
   width: var(--width, 1.5rem);
   height: var(--height, 1.5rem);
 }
-.cat-skeleton-xs.cat-skeleton-head, .cat-skeleton-xs.cat-skeleton-body {
+.skeleton-xs.skeleton-head, .skeleton-xs.skeleton-body {
   width: var(--width, var(--line-width, 100%));
 }
-.cat-skeleton-xs.cat-skeleton-head {
+.skeleton-xs.skeleton-head {
   height: calc(0.9375rem - 4px);
   margin: calc((1.25rem - 0.9375rem + 4px) * 0.5) 0;
 }
-.cat-skeleton-xs.cat-skeleton-body {
+.skeleton-xs.skeleton-body {
   height: calc(0.75rem - 4px);
   margin: calc((1rem - 0.75rem + 4px) * 0.5) 0;
 }
 
-.cat-skeleton-s.cat-skeleton-rectangle {
+.skeleton-s.skeleton-rectangle {
   width: var(--width, 100%);
   height: var(--height, 2rem);
 }
-.cat-skeleton-s.cat-skeleton-square, .cat-skeleton-s.cat-skeleton-circle {
+.skeleton-s.skeleton-square, .skeleton-s.skeleton-circle {
   width: var(--width, 2rem);
   height: var(--height, 2rem);
 }
-.cat-skeleton-s.cat-skeleton-head, .cat-skeleton-s.cat-skeleton-body {
+.skeleton-s.skeleton-head, .skeleton-s.skeleton-body {
   width: var(--width, var(--line-width, 100%));
 }
-.cat-skeleton-s.cat-skeleton-head {
+.skeleton-s.skeleton-head {
   height: calc(1.125rem - 4px);
   margin: calc((1.5rem - 1.125rem + 4px) * 0.5) 0;
 }
-.cat-skeleton-s.cat-skeleton-body {
+.skeleton-s.skeleton-body {
   height: calc(0.875rem - 4px);
   margin: calc((1rem - 0.875rem + 4px) * 0.5) 0;
 }
 
-.cat-skeleton-m.cat-skeleton-rectangle {
+.skeleton-m.skeleton-rectangle {
   width: var(--width, 100%);
   height: var(--height, 2.5rem);
 }
-.cat-skeleton-m.cat-skeleton-square, .cat-skeleton-m.cat-skeleton-circle {
+.skeleton-m.skeleton-square, .skeleton-m.skeleton-circle {
   width: var(--width, 2.5rem);
   height: var(--height, 2.5rem);
 }
-.cat-skeleton-m.cat-skeleton-head, .cat-skeleton-m.cat-skeleton-body {
+.skeleton-m.skeleton-head, .skeleton-m.skeleton-body {
   width: var(--width, var(--line-width, 100%));
 }
-.cat-skeleton-m.cat-skeleton-head {
+.skeleton-m.skeleton-head {
   height: calc(1.25rem - 4px);
   margin: calc((1.5rem - 1.25rem + 4px) * 0.5) 0;
 }
-.cat-skeleton-m.cat-skeleton-body {
+.skeleton-m.skeleton-body {
   height: calc(0.9375rem - 4px);
   margin: calc((1.25rem - 0.9375rem + 4px) * 0.5) 0;
 }
 
-.cat-skeleton-l.cat-skeleton-rectangle {
+.skeleton-l.skeleton-rectangle {
   width: var(--width, 100%);
   height: var(--height, 3rem);
 }
-.cat-skeleton-l.cat-skeleton-square, .cat-skeleton-l.cat-skeleton-circle {
+.skeleton-l.skeleton-square, .skeleton-l.skeleton-circle {
   width: var(--width, 3rem);
   height: var(--height, 3rem);
 }
-.cat-skeleton-l.cat-skeleton-head, .cat-skeleton-l.cat-skeleton-body {
+.skeleton-l.skeleton-head, .skeleton-l.skeleton-body {
   width: var(--width, var(--line-width, 100%));
 }
-.cat-skeleton-l.cat-skeleton-head {
+.skeleton-l.skeleton-head {
   height: calc(1.5rem - 4px);
   margin: calc((1.75rem - 1.5rem + 4px) * 0.5) 0;
 }
-.cat-skeleton-l.cat-skeleton-body {
+.skeleton-l.skeleton-body {
   height: calc(1.125rem - 4px);
   margin: calc((1.5rem - 1.125rem + 4px) * 0.5) 0;
 }
 
-.cat-skeleton-xl.cat-skeleton-rectangle {
+.skeleton-xl.skeleton-rectangle {
   width: var(--width, 100%);
   height: var(--height, 3.5rem);
 }
-.cat-skeleton-xl.cat-skeleton-square, .cat-skeleton-xl.cat-skeleton-circle {
+.skeleton-xl.skeleton-square, .skeleton-xl.skeleton-circle {
   width: var(--width, 3.5rem);
   height: var(--height, 3.5rem);
 }
-.cat-skeleton-xl.cat-skeleton-head, .cat-skeleton-xl.cat-skeleton-body {
+.skeleton-xl.skeleton-head, .skeleton-xl.skeleton-body {
   width: var(--width, var(--line-width, 100%));
 }
-.cat-skeleton-xl.cat-skeleton-head {
+.skeleton-xl.skeleton-head {
   height: calc(1.75rem - 4px);
   margin: calc((2rem - 1.75rem + 4px) * 0.5) 0;
 }
-.cat-skeleton-xl.cat-skeleton-body {
+.skeleton-xl.skeleton-body {
   height: calc(1.25rem - 4px);
   margin: calc((1.5rem - 1.25rem + 4px) * 0.5) 0;
 }
 
-.cat-skeleton-sheen {
+.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 {
+.skeleton-pulse {
   position: relative;
   overflow: hidden;
 }
-.cat-skeleton-pulse::before {
+.skeleton-pulse::before {
   content: "";
   display: block;
   position: absolute;

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

@@ -20,10 +20,10 @@ export class CatSkeleton {
   }
   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)
+        skeleton: true,
+        [`skeleton-${this.effect}`]: Boolean(this.effect),
+        [`skeleton-${this.variant}`]: Boolean(this.variant),
+        [`skeleton-${this.size}`]: Boolean(this.size)
       } })))));
   }
   get count() {

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

@@ -1 +1 @@
-{"version":3,"file":"cat-skeleton.js","sourceRoot":"","sources":["../../../src/components/cat-skeleton/cat-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,WAAW;EALxB;IAME;;OAEG;IACK,WAAM,GAAgC,OAAO,CAAC;IAEtD;;OAEG;IACK,YAAO,GAAwD,WAAW,CAAC;IAEnF;;;OAGG;IACK,SAAI,GAAkC,GAAG,CAAC;GAiDnD;EAxCC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CACvC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,CAAC,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACrD,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACvD,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAClD,GACI,CACR,CAAC,CACG,CACR,CAAC;EACJ,CAAC;EAED,IAAY,KAAK;IACf,QAAQ,IAAI,CAAC,OAAO,EAAE;MACpB,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC;QACE,OAAO,CAAC,CAAC;KACZ;EACH,CAAC;EAED,IAAY,KAAK;IACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;MACvD,CAAC,CAAC;QACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;OAC3C;MACH,CAAC,CAAC,SAAS,CAAC;EAChB,CAAC;EAEO,MAAM,CAAC,GAAW,EAAE,GAAW;IACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;EAC3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * 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`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              'cat-skeleton': true,\n              [`cat-skeleton-${this.effect}`]: Boolean(this.effect),\n              [`cat-skeleton-${this.variant}`]: Boolean(this.variant),\n              [`cat-skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"]}
+{"version":3,"file":"cat-skeleton.js","sourceRoot":"","sources":["../../../src/components/cat-skeleton/cat-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,WAAW;EALxB;IAME;;OAEG;IACK,WAAM,GAAgC,OAAO,CAAC;IAEtD;;OAEG;IACK,YAAO,GAAwD,WAAW,CAAC;IAEnF;;;OAGG;IACK,SAAI,GAAkC,GAAG,CAAC;GAiDnD;EAxCC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CACvC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACjD,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACnD,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC9C,GACI,CACR,CAAC,CACG,CACR,CAAC;EACJ,CAAC;EAED,IAAY,KAAK;IACf,QAAQ,IAAI,CAAC,OAAO,EAAE;MACpB,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC;QACE,OAAO,CAAC,CAAC;KACZ;EACH,CAAC;EAED,IAAY,KAAK;IACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;MACvD,CAAC,CAAC;QACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;OAC3C;MACH,CAAC,CAAC,SAAS,CAAC;EAChB,CAAC;EAEO,MAAM,CAAC,GAAW,EAAE,GAAW;IACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;EAC3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * 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`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              skeleton: true,\n              [`skeleton-${this.effect}`]: Boolean(this.effect),\n              [`skeleton-${this.variant}`]: Boolean(this.variant),\n              [`skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"]}