@haiilo/catalyst 0.6.0 → 0.7.0

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,7 @@ export class CatToggle {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       log.error('[A11y] Missing ARIA label on toggle', this);
     }
   }
@@ -47,12 +51,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 +190,7 @@ export class CatToggle {
     },
     "value": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string | undefined",
@@ -193,8 +204,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 +310,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    if (!this.label && !this.hostElement.querySelector('[slot=\"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      <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/components/cat-checkbox.js

@@ -1,7 +1,8 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loglevel } from './loglevel.js';
+import { C as CatFormHint } from './cat-form-hint.js';
 
-const catCheckboxCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.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))}";
+const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.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))}";
 
 let nextUniqueId = 0;
 const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -13,6 +14,7 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
     this.id = `cat-checkbox-${nextUniqueId++}`;
+    this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
      */
@@ -44,7 +46,7 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.error('[A11y] Missing ARIA label on checkbox', this);
     }
   }
@@ -58,9 +60,14 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), 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, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), 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) {
@@ -69,6 +76,7 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  get hostElement() { return this; }
   static get style() { return catCheckboxCss; }
 }, [1, "cat-checkbox", {
     "checked": [4],
@@ -78,7 +86,9 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "labelHidden": [4, "label-hidden"],
     "name": [1],
     "required": [4],
-    "value": [1],
+    "value": [1025],
+    "hint": [1],
+    "hasSlottedLabel": [32],
     "setFocus": [64]
   }]);
 function defineCustomElement$1() {

package/dist/components/cat-checkbox.js.map

@@ -1 +1 @@
-{"file":"cat-checkbox.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,yxDAAyxD;;ACGhzD,IAAI,YAAY,GAAG,CAAC,CAAC;MAcRA,aAAW;EALxB;;;;;;;IAMmB,OAAE,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;;;;IAM/C,YAAO,GAAG,KAAK,CAAC;;;;IAKhB,aAAQ,GAAG,KAAK,CAAC;;;;IAKjB,kBAAa,GAAG,KAAK,CAAC;;;;IAKtB,UAAK,GAAG,EAAE,CAAC;;;;IAKX,gBAAW,GAAG,KAAK,CAAC;;;;IAUpB,aAAQ,GAAG,KAAK,CAAC;GAuF1B;EAjEC,gBAAgB;IACd,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE;MACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;KACjC;GACF;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfC,QAAG,CAAC,KAAK,CAAC,uCAAuC,EAAE,IAAI,CAAC,CAAC;KAC1D;GACF;;;;;;;EASD,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC7F,aACE,GAAG,EAAE,EAAE,KAAK,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,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,EACF,YAAM,KAAK,EAAC,KAAK,iBAAa,MAAM,EAAC,IAAI,EAAC,UAAU,IAClD,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,WAAW,IACpC,gBAAU,MAAM,EAAC,oBAAoB,GAAY,CAC7C,EACN,WAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,IACnC,gBAAU,MAAM,EAAC,cAAc,GAAY,CACvC,CACD,EACP,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,KAAK,CACN,CACD,EACR;GACH;EAEO,OAAO,CAAC,KAAY;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatCheckbox","log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\ninput {\n  @include cat-visually-hidden;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: 1.25rem;\n  width: 1.25rem;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: cat-border-radius(s);\n  transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 70%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Event, EventEmitter, h, Method, Prop } from '@stencil/core';\nimport log from 'loglevel';\n\nlet nextUniqueId = 0;\n\n/**\n * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\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 checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.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          onInput={this.onInput.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        />\n        <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n          <svg class=\"check\" viewBox=\"0 0 12 10\">\n            <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n          </svg>\n          <svg class=\"dash\" viewBox=\"0 0 12 10\">\n            <polyline points=\"1.5 5 10.5 5\"></polyline>\n          </svg>\n        </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-checkbox.js","mappings":"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","names":["CatCheckbox","log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\ninput {\n  @include cat-visually-hidden;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: 1.25rem;\n  width: 1.25rem;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: cat-border-radius(s);\n  transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 70%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","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 * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\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 checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\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 checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    if (!this.label && !this.hostElement.querySelector('[slot=\"label\"]')) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.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            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </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"],"version":3}

package/dist/components/cat-form-hint.js

@@ -0,0 +1,20 @@
+import { h } from '@stencil/core/internal/client';
+
+/**
+ * CatFormHint is a functional component that represents the hint area of form elements.
+ *
+ * @param props - {@link CatFormHintProps}
+ * @return a JSX.Element
+ */
+const CatFormHint = props => {
+  const { hint, slottedHint } = props;
+  return (h("div", { class: "hint-section" }, [
+    hint &&
+      (Array.isArray(hint) ? hint.map(item => h("p", { class: "input-hint" }, item)) : h("p", { class: "input-hint" }, hint)),
+    slottedHint
+  ]));
+};
+
+export { CatFormHint as C };
+
+//# sourceMappingURL=cat-form-hint.js.map

package/dist/components/cat-form-hint.js.map

@@ -0,0 +1 @@
+{"file":"cat-form-hint.js","mappings":";;AAaA;;;;;;MAMa,WAAW,GAA0C,KAAK;EACrE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;EACpC,QACE,WAAK,KAAK,EAAC,cAAc,IACtB;IACC,IAAI;OACD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAK,CAAC,GAAG,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAK,CAAC;IAC/G,WAAW;GACZ,CACG,EACN;AACJ;;;;","names":[],"sources":["./src/components/cat-form-hint/cat-form-hint.tsx"],"sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\n\n/**\n * Properties of CatFormHint.\n *\n * @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n */\ninterface CatFormHintProps {\n  hint?: string | string[];\n  slottedHint?: HTMLSlotElement;\n}\n\n/**\n * CatFormHint is a functional component that represents the hint area of form elements.\n *\n * @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n  const { hint, slottedHint } = props;\n  return (\n    <div class=\"hint-section\">\n      {[\n        hint &&\n          (Array.isArray(hint) ? hint.map(item => <p class=\"input-hint\">{item}</p>) : <p class=\"input-hint\">{hint}</p>),\n        slottedHint\n      ]}\n    </div>\n  );\n};\n"],"version":3}

package/dist/components/cat-input.js

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loglevel } from './loglevel.js';
+import { C as CatFormHint } from './cat-form-hint.js';
 import { C as CatI18nRegistry } from './cat-i18n-registry.js';
 import { d as defineCustomElement$4 } from './cat-button2.js';
 import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
 
-const catInputCss = ":host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.hidden{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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.input-hint{font-size:0.875rem;line-height:1rem;margin:0}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.hidden{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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 
 let nextUniqueId = 0;
 const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -18,7 +19,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.catBlur = createEvent(this, "catBlur", 7);
     this.i18n = CatI18nRegistry.getInstance();
     this.id = `cat-input-${nextUniqueId++}`;
-    this.inputValue = '';
+    this.hasSlottedLabel = false;
     /**
      * Whether the input should show a clear button.
      */
@@ -60,14 +61,8 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.type = 'text';
   }
-  onValueChange(value) {
-    this.inputValue = '' + (value !== null && value !== void 0 ? value : '');
-  }
-  componentWillLoad() {
-    this.onValueChange(this.value);
-  }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.error('[A11y] Missing ARIA label on input', this);
     }
   }
@@ -84,19 +79,23 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * Clear the input.
    */
   async clear() {
-    this.inputValue = '';
+    this.value = '';
   }
   render() {
-    return (h(Host, null, this.label && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), h("div", { class: {
+    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
       }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.inputValue, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.inputValue && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.getMessage('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hint && h("p", { class: "input-hint" }, this.hint)));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.getMessage('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), 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.inputValue = this.input.value;
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -105,9 +104,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   onBlur(event) {
     this.catBlur.emit(event);
   }
-  static get watchers() { return {
-    "value": ["onValueChange"]
-  }; }
+  get hostElement() { return this; }
   static get style() { return catInputCss; }
 }, [1, "cat-input", {
     "autoComplete": [1, "auto-complete"],
@@ -130,8 +127,8 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "required": [4],
     "round": [4],
     "type": [1],
-    "value": [8],
-    "inputValue": [32],
+    "value": [1032],
+    "hasSlottedLabel": [32],
     "setFocus": [64],
     "clear": [64]
   }]);

package/dist/components/cat-input.js.map

@@ -1 +1 @@
-{"file":"cat-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: cat-size('m');\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.input');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.input');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: calc(cat-size('s') - 0.5rem);\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - cat-size('s') / 2);\n  right: -0.5rem;\n}\n\n.input-hint {\n  @include cat-body('s');\n  margin: 0;\n}\n","import { Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @State() private inputValue = '';\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text to be displayed with the input.\n   */\n  @Prop() hint?: string;\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\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   * A maximum value for numeric values.\n   */\n  @Prop() max?: number;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for numeric values.\n   */\n  @Prop() min?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' = 'text';\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('value')\n  onValueChange(value?: string | number) {\n    this.inputValue = '' + (value ?? '');\n  }\n\n  componentWillLoad() {\n    this.onValueChange(this.value);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.error('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.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  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.inputValue = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.getMessage('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.max}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.inputValue}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.inputValue && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={this.i18n.getMessage('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\n        {this.hint && <p class=\"input-hint\">{this.hint}</p>}\n      </Host>\n    );\n  }\n\n  private onInput(event: Event) {\n    this.inputValue = 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"],"version":3}
+{"file":"cat-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: cat-size('m');\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.input');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.input');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: calc(cat-size('s') - 0.5rem);\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - cat-size('s') / 2);\n  right: -0.5rem;\n}\n","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';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\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 label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\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   * A maximum value for numeric values.\n   */\n  @Prop() max?: number;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for numeric values.\n   */\n  @Prop() min?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' = 'text';\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    if (!this.label && !this.hostElement.querySelector('[slot=\"label\"]')) {\n      log.error('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.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  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.getMessage('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.max}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.value}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={this.i18n.getMessage('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\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"],"version":3}