@haiilo/catalyst 0.6.0 → 0.7.2

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

@@ -1,16 +1,20 @@
-import { Component, Event, h, Prop, Method } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
 import log from 'loglevel';
+import { CatFormHint } from '../cat-form-hint/cat-form-hint';
 let nextUniqueId = 0;
 /**
  * Toggles are graphical interface switches that give user control over a
  * feature or option that can be turned on or off.
  *
+ * @slot hint - Optional hint element to be displayed with the toggle.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
  * @part toggle - The toggle element.
  * @part label - The label content.
  */
 export class CatToggle {
   constructor() {
     this.id = `cat-toggle-${nextUniqueId++}`;
+    this.hasSlottedLabel = false;
     /**
      * Checked state of the toggle.
      */
@@ -33,7 +37,8 @@ export class CatToggle {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label) {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
       log.error('[A11y] Missing ARIA label on toggle', this);
     }
   }
@@ -47,12 +52,19 @@ export class CatToggle {
     this.input.focus(options);
   }
   render() {
-    return (h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } },
-      h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
-      h("span", { class: "toggle", part: "toggle" }),
-      h("span", { class: "label", part: "label" }, this.label)));
+    return (h(Host, null,
+      h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } },
+        h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
+        h("span", { class: "toggle", part: "toggle" }),
+        h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)),
+      this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -179,7 +191,7 @@ export class CatToggle {
     },
     "value": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string | undefined",
@@ -193,8 +205,28 @@ export class CatToggle {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "hint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optional hint text(s) to be displayed with the toggle."
+      },
+      "attribute": "hint",
+      "reflect": false
     }
   }; }
+  static get states() { return {
+    "hasSlottedLabel": {}
+  }; }
   static get events() { return [{
       "method": "catChange",
       "name": "catChange",
@@ -279,5 +311,6 @@ export class CatToggle {
       }
     }
   }; }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=cat-toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.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;;;;;;GAMG;AAMH,MAAM,OAAO,SAAS;EALtB;IAMmB,OAAE,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;IAGrD;;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,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACxD;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,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,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,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B;MACF,YAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ;MAC1C,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,KAAK,CACN,CACD,CACT,CAAC;EACJ,CAAC;EAEO,OAAO,CAAC,KAAY;IAC1B,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 * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle 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 input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.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        <input\n          ref={el => (this.input = el as HTMLInputElement)}\n          id={this.id}\n          type=\"checkbox\"\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          class=\"form-check-input\"\n          role=\"switch\"\n          onInput={this.onInput.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        />\n        <span class=\"toggle\" part=\"toggle\"></span>\n        <span class=\"label\" part=\"label\">\n          {this.label}\n        </span>\n      </label>\n    );\n  }\n\n  private onInput(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"]}
+{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle 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 input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.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      <Host>\n        <label htmlFor={this.id} class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled }}>\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\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-tooltip/cat-tooltip.js

@@ -45,6 +45,7 @@ export class CatTooltip {
       autoUpdate(this.trigger, this.tooltip, () => this.update());
     }
     if (isTouchScreen) {
+      window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));
       (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.addEventListener('touchstart', this.touchStartListener.bind(this));
       (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.addEventListener('touchend', this.touchEndListener.bind(this));
     }
@@ -58,6 +59,7 @@ export class CatTooltip {
   disconnectedCallback() {
     var _a, _b, _c, _d, _e, _f;
     if (isTouchScreen) {
+      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));
       (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.touchStartListener.bind(this));
       (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchend', this.touchEndListener.bind(this));
     }
@@ -95,28 +97,31 @@ export class CatTooltip {
   showListener() {
     window.clearTimeout(this.hideTimeout);
     this.showTimeout = window.setTimeout(() => {
-      var _a, _b;
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
-      (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.classList.add('tooltip-show');
+      var _a;
+      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
     }, this.showDelay);
   }
   hideListener() {
     window.clearTimeout(this.showTimeout);
     this.hideTimeout = window.setTimeout(() => {
-      var _a, _b;
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.blur();
-      (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.classList.remove('tooltip-show');
+      var _a;
+      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
     }, this.hideDelay);
   }
-  touchStartListener() {
+  touchStartListener(event) {
+    event.stopPropagation();
     this.touchTimeout = window.setTimeout(() => {
       var _a;
       (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
     }, this.longTouchDuration);
   }
   touchEndListener() {
+    if (this.touchTimeout) {
+      window.clearTimeout(this.touchTimeout);
+    }
+  }
+  windowTouchStartListener() {
     var _a;
-    window.clearTimeout(this.touchTimeout);
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
   }
   static get is() { return "cat-tooltip"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 500;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\n  }\n\n  componentDidLoad(): void {\n    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n\n    if (isTouchScreen) {\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\n        {this.content && !this.disabled && (\n          <div ref={el => (this.tooltip = el)} id={this.id} class=\"tooltip\">\n            {this.content}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private update() {\n    if (this.trigger && this.tooltip) {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.showTimeout = window.setTimeout(() => {\n      this.trigger?.focus();\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.trigger?.blur();\n      this.tooltip?.classList.remove('tooltip-show');\n    }, this.hideDelay);\n  }\n\n  private touchStartListener() {\n    this.touchTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    window.clearTimeout(this.touchTimeout);\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n}\n"]}
+{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 500;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\n  }\n\n  componentDidLoad(): void {\n    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\n        {this.content && !this.disabled && (\n          <div ref={el => (this.tooltip = el)} id={this.id} class=\"tooltip\">\n            {this.content}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private update() {\n    if (this.trigger && this.tooltip) {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.showTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.remove('tooltip-show');\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n}\n"]}

package/dist/collection/scss/_mixins.scss

@@ -0,0 +1,9 @@
+@forward 'fonts/fonts.mixins';
+@forward 'utils/disabled.mixins';
+@forward 'utils/elevation.mixins';
+@forward 'utils/media.mixins';
+@forward 'utils/sizing.mixins';
+@forward 'utils/spacing.mixins';
+@forward 'utils/typography.mixins';
+@forward 'utils/visibility.mixins';
+@forward 'utils/ratio.mixins';

package/dist/collection/scss/_variables.scss

@@ -0,0 +1,64 @@
+@use 'variables.tokens' as *;
+@forward 'variables.tokens';
+
+// --------
+// -- Composits
+// --------
+
+$cat-head-margin-bottom: cat-token('size.spacing.s');
+$cat-body-margin-bottom: cat-token('size.spacing.m');
+$cat-nav-padding-horizontal: cat-token('size.spacing.m');
+
+// --------
+// -- z-indexes
+// --------
+
+$cat-menu-z-index: 100;
+$cat-tooltip-z-index: 200;
+
+// --------
+// -- Typography
+// --------
+
+/* stylelint-disable value-keyword-case */
+$font-fallback-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
+  'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+$cat-link-text-decoration: none;
+$cat-link-text-decoration-hover: underline;
+$cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
+/* stylelint-enable value-keyword-case */
+
+// --------
+// -- Scrollable
+// --------
+
+$cat-scrollable-shadow: 0 0 4px 1px rgba(16, 29, 48, 20%);
+$cat-scrollable-shadow-transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+// --------
+// -- Elevations
+// --------
+
+$cat-elevation-transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+$cat-elevation: (
+  0: none,
+  1: (
+    0 1px 4px 0 rgba(16, 29, 48, 20%)
+  ),
+  2: (
+    0 2px 4px -1px rgba(16, 29, 48, 20%),
+    0 4px 5px 0 rgba(16, 29, 48, 26%),
+    0 1px 10px -1px rgba(16, 29, 48, 12%)
+  ),
+  3: (
+    0 2px 4px -1px rgba(16, 29, 48, 20%),
+    0 9px 16px -3px rgba(16, 29, 48, 14%),
+    0 10px 20px -8px rgba(16, 29, 48, 12%)
+  ),
+  4: (
+    0 2px 4px -1px rgba(16, 29, 48, 5%),
+    0 9px 16px -3px rgba(16, 29, 48, 14%),
+    0 32px 20px -20px rgba(16, 29, 48, 20%)
+  )
+);

package/dist/collection/scss/_variables.tokens.scss

@@ -0,0 +1,84 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:string';
+
+@use '~@haiilo/catalyst-tokens/dist/scss/variables' as *;
+@forward '~@haiilo/catalyst-tokens/dist/scss/variables' show $tokens;
+
+// -----
+// -- Split a string using the given separator.
+// -----
+@function -cat-split($string, $separator: ' ') {
+  $result: ();
+  $index: string.index($string, $separator);
+  @while $index != null {
+    $item: string.slice($string, 1, $index - 1);
+    $result: list.append($result, $item);
+    $string: string.slice($string, $index + string.length($separator));
+    $index: string.index($string, $separator);
+  }
+  $result: list.append($result, $string);
+  @return $result;
+}
+
+// -----
+// -- Join strings using the given separator.
+// -----
+@function -cat-join($strings, $separator: ' ') {
+  $result: '';
+  @each $string in $strings {
+    $result: $result + $separator + $string;
+  }
+  @return string.slice($result, string.length($separator) + 1);
+}
+
+// -----
+// -- Deep map.get using a dot-separated key.
+// -----
+@function -cat-get($map, $key) {
+  $keys: -cat-split('' + $key, '.');
+  @each $key in $keys {
+    @if $map {
+      $map: map.get($map, $key);
+    }
+  }
+  @return $map;
+}
+
+@function cat-token-wrap($value, $alpha: 1) {
+  @if meta.type-of($value) == 'string' {
+    @if $alpha < 1 {
+      @return rgba($value, $alpha);
+    } @else {
+      @return rgb($value);
+    }
+  } @else if meta.type-of($value) == 'list' {
+    @return color.adjust(
+      #00000000,
+      $red: list.nth($value, 1),
+      $green: list.nth($value, 2),
+      $blue: list.nth($value, 3),
+      $alpha: $alpha
+    );
+  } @else {
+    @return $value;
+  }
+}
+
+// -----
+// -- Accessor for $tokens using a dot-separated key.
+// -- Automatically wraps RGB partials into an rgb() expression and
+// -- optionally adds an RGB alpha value.
+// -----
+@function cat-token($key, $alpha: 1, $wrap: true) {
+  $value: -cat-get($tokens, $key);
+  @if not $value {
+    @error 'Unknown token "#{-cat-join($key, '.')}".';
+  }
+  @if $wrap and string.index($key, 'color.') == 1 {
+    @return cat-token-wrap($value, $alpha);
+  }
+  @return $value;
+}

package/dist/collection/scss/core/_base.scss

@@ -0,0 +1,12 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+// ---- Typography
+
+body {
+  @include cat-body('m');
+  font-family: cat-body-font-family();
+  font-weight: cat-token('font.weight.body');
+  color: cat-token('color.ui.font.body');
+  background-color: cat-token('color.ui.background.canvas');
+}

package/dist/collection/scss/core/_nav.scss

@@ -0,0 +1,23 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+nav {
+  hr,
+  .cat-hr {
+    margin-top: $cat-nav-padding-horizontal * 0.5;
+    margin-bottom: $cat-nav-padding-horizontal * 0.5;
+  }
+
+  .cat-head,
+  .cat-text {
+    padding: $cat-nav-padding-horizontal * 0.5 $cat-nav-padding-horizontal;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .cat-head {
+    @include cat-head(5);
+  }
+}

package/dist/collection/scss/core/_typography.scss

@@ -0,0 +1,237 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.cat-h1,
+.cat-h2,
+.cat-h3,
+.cat-h4,
+.cat-h5,
+.cat-h6 {
+  margin-top: 0;
+  margin-bottom: $cat-head-margin-bottom;
+  font-weight: cat-token('font.weight.head');
+}
+
+// -- head styles
+@each $key, $value in cat-token('size.font.head') {
+  h#{$key},
+  .cat-h#{$key} {
+    @include cat-head($key);
+  }
+}
+
+// -- body styles
+@each $key, $value in cat-token('size.font.body') {
+  .cat-text-#{$key} {
+    @include cat-body($key);
+  }
+}
+
+// -- mono styles
+@each $key, $value in cat-token('size.font.mono') {
+  .cat-mono-#{$key} {
+    @include cat-mono($key);
+  }
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: $cat-body-margin-bottom;
+}
+
+hr,
+.cat-hr {
+  display: block;
+  margin: $cat-body-margin-bottom 0;
+  border: 0;
+  height: 1px;
+  background-color: cat-token('color.ui.border.default');
+  overflow: hidden;
+}
+
+// ----- links
+
+a {
+  color: cat-token('color.theme.primary.text');
+  text-decoration: $cat-link-text-decoration;
+  transition: color cat-token('time.transition.s') linear;
+
+  &:hover {
+    color: cat-token('color.theme.primary.textHover');
+    text-decoration: $cat-link-text-decoration-hover;
+  }
+
+  &:active {
+    color: cat-token('color.theme.primary.textActive');
+  }
+
+  &:focus-visible {
+    outline: 2px solid cat-token('color.ui.border.focus');
+    // outline-offset: -2px;
+  }
+}
+
+a[tabindex='-1']:focus {
+  outline: none;
+}
+
+// ----- emphasis
+
+b,
+strong,
+.cat-strong {
+  font-weight: 600;
+}
+
+mark,
+.cat-mark {
+  padding: 0.125rem 0.25rem;
+  background-color: $cat-mark-color;
+}
+
+small,
+.cat-small {
+  font-size: 0.875em;
+}
+
+.cat-underline {
+  text-decoration: underline;
+}
+
+.cat-line-through {
+  text-decoration: line-through;
+}
+
+.cat-muted {
+  color: cat-token('color.ui.font.muted');
+}
+
+// ----- lists
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+
+  ol,
+  ul,
+  dl {
+    margin-bottom: 0;
+  }
+}
+
+nav {
+  ol,
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+dt {
+  font-weight: 600;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+// ----- lead
+
+.cat-lead {
+  @include cat-body('xl', 300);
+}
+
+// ----- blockquotes & figures
+
+blockquote {
+  margin: 0 0 $cat-body-margin-bottom;
+  font-style: italic;
+  @include cat-body('l');
+  color: cat-token('color.ui.font.quote');
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+figure {
+  margin: 0 0 $cat-body-margin-bottom;
+
+  figcaption {
+    margin-top: -$cat-body-margin-bottom * 0.5;
+    margin-bottom: 0;
+    @include cat-body('s');
+    color: cat-token('color.ui.font.muted');
+
+    &::before {
+      content: '\2014\00A0'; // em dash, nbsp
+    }
+  }
+}
+
+// ----- code
+
+code,
+samp,
+kbd,
+pre {
+  @include cat-mono('m');
+  font-weight: cat-token('font.weight.mono');
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: $cat-body-margin-bottom;
+  overflow: auto;
+
+  code {
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    word-wrap: normal;
+    word-break: normal;
+  }
+}
+
+kbd,
+code {
+  margin: 0 0.125rem;
+  color: cat-token('color.ui.font.muted');
+  background: cat-token('color.ui.background.body');
+  box-shadow: 0 0 0 2px cat-token('color.ui.border.default');
+  border-radius: cat-border-radius('s');
+}
+
+kbd {
+  font-size: cat-mono-font-size('s');
+  display: inline-block;
+  min-width: 1.5rem;
+  line-height: cat-body-line-height('m');
+  padding: 0 0.375rem;
+  text-align: center;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+code {
+  @include cat-break-word;
+  padding: 0.0625rem 0.25rem;
+}