@haiilo/catalyst 5.2.3 → 5.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-timepicker.js","sourceRoot":"","sources":["../../../src/components/cat-timepicker/cat-timepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n// import log from 'loglevel';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\n// import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { of } from 'rxjs';\nimport { CatSelectMultipleTaggingValue, CatSelectState, CatSelectTaggingValue, Item } from '../cat-select/cat-select';\nimport { Placement } from '@floating-ui/dom';\n// import IMask from 'imask';\n\ninterface Time extends Item {\n  hour: number;\n  minutes: number;\n}\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-timepicker',\n  styleUrl: 'cat-timepicker.scss',\n  shadow: true\n})\nexport class CatTimepicker {\n  private timeSelect?: HTMLCatSelectElement;\n  // private timeMask?: IMask.InputMask<IMask.AnyMaskedOptions>;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() state?: CatSelectState;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Enable multiple selection.\n   */\n  @Prop() multiple = false;\n\n  /**\n   * The placement of the select.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * The value of the select. <br />\n   * <br />\n   * The value of the select depends on whether it is allowed to choose a single item or several items. <br />\n   * When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br />\n   * <br />\n   * In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,\n   * in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created\n   */\n  @Prop({ mutable: true }) value?: string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placeholder text to display within the select.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\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 value is required or must be checked for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Whether the select should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * A maximum value for date, time and numeric values.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The text to display in the dropdown if no results are found.\n   */\n  @Prop() noItems?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() minutesStep = 30;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() hourShort = this.isBrowserHour12();\n\n  /**\n   * Emitted when the select dropdown is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the select dropdown is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the select loses the focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  componentDidLoad(): void {\n    this.timeSelect?.connect(this.timeConnector);\n\n    // IMask spike\n    // const input = this.hostElement.shadowRoot?.querySelector('cat-select')?.shadowRoot?.querySelector('input');\n    // if (input) {\n    //   this.timeMask = this.getTimeMask(input);\n    // }\n  }\n\n  render() {\n    return (\n      <Host>\n        <cat-select\n          requiredMarker={this.requiredMarker}\n          horizontal={this.horizontal}\n          clearable={this.clearable}\n          disabled={this.disabled}\n          hint={this.hint}\n          identifier={this.identifier}\n          label={this.label}\n          labelHidden={this.labelHidden}\n          name={this.name}\n          multiple={this.multiple}\n          placeholder={this.placeholder}\n          placement={this.placement}\n          required={this.required}\n          noItems={this.noItems}\n          ref={el => (this.timeSelect = el)}\n          value={this.value}\n          errors={this.errors}\n          errorUpdate={this.errorUpdate}\n          nativeAttributes={this.nativeAttributes}\n          onCatChange={event => this.onCatChange(event)}\n          onCatOpen={this.onCatOpen.bind(this)}\n          onCatClose={this.onCatClose.bind(this)}\n          onCatBlur={this.onCatBlur.bind(this)}\n        >\n          {this.hasSlottedLabel && (\n            <span slot=\"label\">\n              <slot name=\"label\"></slot>\n            </span>\n          )}\n          {this.hasSlottedHint && (\n            <span slot=\"hint\">\n              <slot name=\"hint\"></slot>\n            </span>\n          )}\n        </cat-select>\n      </Host>\n    );\n  }\n\n  private get timeConnector() {\n    return {\n      resolve: (times: string[]) => {\n        return of(\n          times.map(t =>\n            this.timeArray.find(time => time.hour === this.getHour(t) && time.minutes === this.getMinutes(t))\n          )\n        );\n      },\n      retrieve: (term: string) => {\n        const filteredTimeArray = this.timeArray.filter(t => {\n          if (!term) return true;\n          const formatedTime = this.hourShort ? this.formatAMPM(t.hour, t.minutes) : this.formatTime(t.hour, t.minutes);\n          return formatedTime.toUpperCase().includes(term.toUpperCase());\n        });\n        return of({\n          last: true,\n          totalElements: filteredTimeArray.length,\n          content: filteredTimeArray\n        });\n      },\n      render: ({ hour, minutes }: Time) => ({\n        label: this.hourShort ? this.formatAMPM(hour, minutes) : this.formatTime(hour, minutes)\n      })\n    };\n  }\n\n  private get timeArray() {\n    const times: Time[] = [];\n    for (let hour = 0; hour < 24; hour++) {\n      for (let minutes = 0; minutes < 60; minutes += this.minutesStep) {\n        if (this.isHigherThanMinValue(hour, minutes) && this.isLowerThanMaxValue(hour, minutes)) {\n          times.push({\n            id: this.hourShort ? this.formatAMPM(hour, minutes) : this.formatTime(hour, minutes),\n            hour,\n            minutes\n          });\n        }\n      }\n    }\n    return times;\n  }\n\n  private isBrowserHour12() {\n    const browserLanguage = window?.navigator?.language ?? 'en';\n    const hour = new Intl.DateTimeFormat(browserLanguage, { hour: 'numeric' }).format(new Date().setHours(16));\n    return hour.toLowerCase().includes('pm' || 'am');\n  }\n\n  private getHour(time: string) {\n    let hour = Number(time.split(':')[0]);\n    if (time.toLowerCase().includes('pm') && hour < 12) hour = hour + 12;\n    if (time.toLowerCase().includes('am') && hour == 12) hour = hour - 12;\n\n    return hour;\n  }\n\n  private getMinutes(time: string) {\n    const minutes = time.match(/:(\\d+)/);\n    return Number(minutes ? minutes[1] : 0);\n  }\n\n  private isHigherThanMinValue(hour: number, minutes: number) {\n    if (this.min) {\n      const minHour = this.getHour(this.min);\n      const minMinutes = this.getMinutes(this.min);\n\n      return hour > minHour || (hour === minHour && minutes >= minMinutes);\n    }\n\n    return true;\n  }\n\n  private isLowerThanMaxValue(hour: number, minutes: number) {\n    if (this.max) {\n      const maxHour = this.getHour(this.max);\n      const maxMinutes = this.getMinutes(this.max);\n\n      return hour < maxHour || (hour === maxHour && minutes <= maxMinutes);\n    }\n\n    return true;\n  }\n\n  private formatAMPM(hour: number, minutes: number) {\n    if (hour === 0) {\n      return `12:${minutes < 10 ? `0${minutes}` : minutes} AM`;\n    } else if (hour < 12) {\n      return `${hour < 10 ? `0${hour}` : hour}:${minutes < 10 ? `0${minutes}` : minutes} AM`;\n    } else {\n      return `${hour % 12 < 10 ? `0${hour % 12}` : hour % 12}:${minutes < 10 ? `0${minutes}` : minutes} PM`;\n    }\n  }\n\n  private formatTime(hour: number, minutes: number) {\n    return `${hour < 10 ? `0${hour}` : hour}:${minutes < 10 ? `0${minutes}` : minutes}`;\n  }\n\n  private onCatChange(event: unknown) {\n    (event as CustomEvent).stopPropagation();\n    this.value = this.timeSelect?.value;\n    this.catChange.emit(event);\n  }\n\n  private onCatOpen(event: unknown) {\n    (event as CustomEvent).stopPropagation();\n    this.catOpen.emit(event as FocusEvent);\n  }\n\n  private onCatClose(event: unknown) {\n    (event as CustomEvent).stopPropagation();\n    this.catClose.emit(event as FocusEvent);\n  }\n\n  private onCatBlur(event: unknown) {\n    (event as CustomEvent).stopPropagation();\n    this.catBlur.emit(event as FocusEvent);\n  }\n\n  // IMask spike\n\n  // private getTimeMask(element: HTMLInputElement): IMask.InputMask<IMask.AnyMaskedOptions> {\n  //   return IMask(element, {\n  //     mask: 'HH:MM[ PM]',\n  //     lazy: true,\n  //     blocks: {\n  //       HH: {\n  //         mask: IMask.MaskedRange,\n  //         from: 0,\n  //         to: 23\n  //       },\n\n  //       MM: {\n  //         mask: IMask.MaskedRange,\n  //         from: 0,\n  //         to: 59\n  //       },\n\n  //       PM: {\n  //         mask: IMask.MaskedEnum,\n  //         enum: ['AM', 'PM', 'am', 'pm']\n  //       }\n  //     }\n  //   });\n  // }\n}\n"]}

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

@@ -12,11 +12,30 @@
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
 
+.hint-wrapper {
+  flex: 0 1 auto;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.hint-section {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.input-hint,
+::slotted([slot=hint]) {
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
+  line-height: 1.5;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 :host {
   display: flex;
   flex-direction: column;
@@ -56,6 +75,10 @@ input {
   cursor: inherit;
 }
 
+.toggle-placeholder {
+  width: calc(2rem + 1px);
+}
+
 .toggle {
   flex: 0 0 auto;
   display: flex;

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

@@ -62,7 +62,7 @@ export class CatToggle {
     this.input.click();
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.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.hint || this.hasSlottedHint) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) }))));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.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.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
   }
   onInput(event) {
     this.checked = this.input.checked;
@@ -302,9 +302,13 @@ export class CatToggle {
           "text": "Emitted when the checked status of the toggle is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "catFocus",

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":"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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 get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\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 | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: 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    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the toggle.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.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.hint || this.hasSlottedHint) && (\n          <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n        )}\n      </Host>\n    );\n  }\n\n  private onInput(event: InputEvent) {\n    this.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\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 get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\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 | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter<InputEvent>;\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    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the toggle.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.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.hint || this.hasSlottedHint) && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private onInput(event: InputEvent) {\n    this.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\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.css

@@ -20,7 +20,7 @@
   left: 0;
   box-sizing: border-box;
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: 500;
   background-color: rgb(var(--cat-bg-tooltip, 0, 0, 0));
   border-radius: var(--cat-border-radius-m, 0.25rem);
@@ -71,11 +71,4 @@
 }
 .tooltip-l.tooltip-round {
   padding: 1rem 1.5rem;
-}
-
-.tooltip-trigger {
-  display: inline-block;
-}
-.tooltip-trigger:focus {
-  outline: none;
 }

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

@@ -1,6 +1,5 @@
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { h, Host } from '@stencil/core';
-import firstTabbable from '../../utils/first-tabbable';
 import isTouchScreen from '../../utils/is-touch-screen';
 let nextUniqueId = 0;
 export class CatTooltip {
@@ -21,24 +20,22 @@ export class CatTooltip {
     key === 'Escape' && this.hideListener();
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;
-    if (!this.isTabbable) {
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
-    }
-    if (this.trigger && this.tooltip) {
-      autoUpdate(this.trigger, this.tooltip, () => this.update());
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+    this.trigger = (_c = (_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements) === null || _b === void 0 ? void 0 : _b.call(slot)) === null || _c === void 0 ? void 0 : _c[0];
+    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
+      this.trigger.setAttribute('aria-describedby', this.id);
     }
     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));
+      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('touchstart', this.touchStartListener.bind(this));
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('touchend', this.touchEndListener.bind(this));
     }
     else {
-      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('focusin', this.showListener.bind(this));
-      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('focusout', this.hideListener.bind(this));
-      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseenter', this.showListener.bind(this));
-      (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
+      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.addEventListener('focusin', this.showListener.bind(this));
+      (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('focusout', this.hideListener.bind(this));
+      (_h = this.trigger) === null || _h === void 0 ? void 0 : _h.addEventListener('mouseenter', this.showListener.bind(this));
+      (_j = this.trigger) === null || _j === void 0 ? void 0 : _j.addEventListener('mouseleave', this.hideListener.bind(this));
     }
   }
   componentWillRender() {
@@ -60,16 +57,13 @@ export class CatTooltip {
     }
   }
   render() {
-    return (h(Host, null, h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, h("slot", null)), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
+    return (h(Host, null, h("slot", null), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
         tooltip: true,
         'tooltip-hidden': this.hidden,
         'tooltip-round': this.round,
         [`tooltip-${this.size}`]: Boolean(this.size)
       } }, this.hasSlottedContent ? h("slot", { name: "content" }) : this.content)));
   }
-  get isTabbable() {
-    return firstTabbable(this.trigger);
-  }
   async update() {
     if (this.trigger && this.tooltip) {
       await computePosition(this.trigger, this.tooltip, {
@@ -97,6 +91,7 @@ export class CatTooltip {
     this.hideTimeout = window.setTimeout(() => {
       var _a;
       (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
+      this.hideTooltip();
     }, this.hideDelay);
   }
   touchStartListener(event) {
@@ -108,6 +103,7 @@ export class CatTooltip {
   touchEndListener() {
     if (this.touchTimeout) {
       window.clearTimeout(this.touchTimeout);
+      this.hideTooltip();
     }
   }
   windowTouchStartListener() {
@@ -116,8 +112,16 @@ export class CatTooltip {
   }
   showTooltip() {
     var _a;
+    if (this.trigger && this.tooltip) {
+      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());
+    }
     !this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
   }
+  hideTooltip() {
+    if (this.cleanupFloatingUi) {
+      this.cleanupFloatingUi();
+    }
+  }
   static get is() { return "cat-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {

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 { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport isTouchScreen from '../../utils/is-touch-screen';\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 static readonly SHIFT_PADDING = 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  private hidden = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedContent = false;\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   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\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\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  componentWillRender(): void {\n    this.hasSlottedContent = !!this.hostElement.querySelector('[slot=\"content\"]');\n    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);\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        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          aria-hidden={this.hidden}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.hidden,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          {this.hasSlottedContent ? <slot name=\"content\" /> : this.content}\n        </div>\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\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.showTooltip();\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.showTooltip();\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  private showTooltip() {\n    !this.hidden && this.tooltip?.classList.add('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 { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\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 static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private trigger?: Element;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private hidden = false;\n  private cleanupFloatingUi?: () => void;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedContent = false;\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   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\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    const slot = this.hostElement.shadowRoot?.querySelector('slot');\n    this.trigger = slot?.assignedElements?.()?.[0];\n    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n      this.trigger.setAttribute('aria-describedby', this.id);\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  componentWillRender(): void {\n    this.hasSlottedContent = !!this.hostElement.querySelector('[slot=\"content\"]');\n    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);\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        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          aria-hidden={this.hidden}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.hidden,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          {this.hasSlottedContent ? <slot name=\"content\" /> : this.content}\n        </div>\n      </Host>\n    );\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\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.showTooltip();\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.hideTooltip();\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n      this.hideTooltip();\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    !this.hidden && this.tooltip?.classList.add('tooltip-show');\n  }\n\n  private hideTooltip() {\n    if (this.cleanupFloatingUi) {\n      this.cleanupFloatingUi();\n    }\n  }\n}\n"]}

package/dist/collection/index.cdn.js

@@ -27,6 +27,7 @@
       'input.clear': 'Clear',
       'input.optional': 'Optional',
       'input.required': 'Required',
+      'input.today': 'Today',
       'notification.dismiss': 'Dismiss',
       'pagination.prev': 'Previous',
       'pagination.page': 'Go to page {{page}}',

package/dist/collection/scss/_snippets/_checkbox-hint.scss

@@ -0,0 +1,20 @@
+@use 'variables' as *;
+
+.hint-wrapper {
+  flex: 0 1 auto;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.hint-section {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.input-hint,
+::slotted([slot='hint']) {
+  color: cat-token('color.ui.font.muted');
+  line-height: 1.5;
+  flex: 1 1 auto;
+  min-width: 0;
+}

package/dist/collection/scss/_snippets/_form-label.scss

@@ -47,7 +47,8 @@ $cat-input-height: 2.5rem;
 }
 
 .input-horizontal,
-.textarea-horizontal {
+.textarea-horizontal,
+.select-horizontal {
   .label-wrapper {
     flex-direction: column;
   }

package/dist/collection/scss/utils/_border.scss

@@ -27,6 +27,20 @@
   border: 1px solid cat-token('color.ui.border.default');
 }
 
+@each $side in top, right, bottom, left {
+  .cat-border-#{$side} {
+    border-#{$side}: 1px solid cat-token('color.ui.border.default');
+
+    &-light {
+      border-#{$side}: 1px solid cat-token('color.ui.border.light');
+    }
+
+    &-dark {
+      border-#{$side}: 1px solid cat-token('color.ui.border.dark');
+    }
+  }
+}
+
 .cat-border-dark {
   border: 1px solid cat-token('color.ui.border.dark');
 }

package/dist/collection/scss/utils/_media.mixins.scss

@@ -3,7 +3,6 @@
 // ---- Responsive
 
 @mixin until($size, $media-type: screen) {
-  @debug 'until', $size;
   @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) {
     @content;
   }

package/dist/collection/scss/utils/_typography.mixins.scss

@@ -27,6 +27,7 @@ $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation M
   line-height: cat-head-line-height($size);
   color: cat-token('color.ui.font.head');
   font-weight: $weight;
+  font-feature-settings: 'pnum';
 }
 
 // ---- Body

package/dist/components/cat-alert.js

@@ -15,11 +15,11 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.mapIcon = new Map([
-      ['primary', 'star-circle-filled'],
-      ['secondary', 'clock-filled'],
-      ['success', 'check-circle-filled'],
-      ['warning', 'danger-filled'],
-      ['danger', 'cross-circle-filled']
+      ['primary', '$cat:alert-primary'],
+      ['secondary', '$cat:alert-secondary'],
+      ['success', '$cat:alert-success'],
+      ['warning', '$cat:alert-warning'],
+      ['danger', '$cat:alert-danger']
     ]);
     this.mapRole = new Map([
       ['primary', 'status'],

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

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH;;ACRA,MAAM,WAAW,GAAG,sgCAAsgC;;MCY7gCA,UAAQ;;;;;IACF,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,cAAc,CAAC;MAC7B,CAAC,SAAS,EAAE,qBAAqB,CAAC;MAClC,CAAC,SAAS,EAAE,eAAe,CAAC;MAC5B,CAAC,QAAQ,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;iBAO0F,SAAS;;kBAUrF,KAAK;;EAEtB,iBAAiB;IACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GACjE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAC3G,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/utils/setDefault.ts","./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-icon-colors: (\n  'primary': cat-token('color.theme.primary.text'),\n  'secondary': cat-token('color.base.neutral.400'),\n  'success': cat-token('color.base.green.400'),\n  'warning': cat-token('color.base.orange.400'),\n  'danger': cat-token('color.base.red.400')\n);\n\n// -----\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg', 0.1);\n\n    cat-icon {\n      color: map.get($-icon-colors, $theme);\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', 'star-circle-filled'],\n    ['secondary', 'clock-filled'],\n    ['success', 'check-circle-filled'],\n    ['warning', 'danger-filled'],\n    ['danger', 'cross-circle-filled']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH;;ACRA,MAAM,WAAW,GAAG,sgCAAsgC;;MCY7gCA,UAAQ;;;;;IACF,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;MACrC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;KAChC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;iBAO0F,SAAS;;kBAUrF,KAAK;;EAEtB,iBAAiB;IACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GACjE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAC3G,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/utils/setDefault.ts","./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-icon-colors: (\n  'primary': cat-token('color.theme.primary.text'),\n  'secondary': cat-token('color.base.neutral.400'),\n  'success': cat-token('color.base.green.400'),\n  'warning': cat-token('color.base.orange.400'),\n  'danger': cat-token('color.base.red.400')\n);\n\n// -----\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg', 0.1);\n\n    cat-icon {\n      color: map.get($-icon-colors, $theme);\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-button-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatButtonGroup extends Components.CatButtonGroup, HTMLElement {}
+export const CatButtonGroup: {
+  prototype: CatButtonGroup;
+  new (): CatButtonGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cat-button-group.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const catButtonGroupCss = ":host{position:relative;display:inline-flex;vertical-align:middle}::slotted(cat-button[variant=outlined]),::slotted(cat-button:not([variant])){margin-right:-1px}::slotted(cat-button[variant=outlined]:last-child),::slotted(cat-button:not([variant]):last-child){margin-right:0}";
+
+const CatButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.formElements = [];
+    this.a11yLabel = undefined;
+  }
+  render() {
+    return (h(Host, { role: "group", "aria-label": this.a11yLabel }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
+  }
+  onSlotChange() {
+    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));
+    this.formElements.forEach((element, index) => {
+      element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';
+    });
+  }
+  get hostElement() { return this; }
+  static get style() { return catButtonGroupCss; }
+}, [1, "cat-button-group", {
+    "a11yLabel": [1, "a11y-label"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-button-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-button-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatButtonGroup$1);
+      }
+      break;
+  } });
+}
+
+const CatButtonGroup = CatButtonGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatButtonGroup, defineCustomElement };
+
+//# sourceMappingURL=cat-button-group.js.map

package/dist/components/cat-button-group.js.map

@@ -0,0 +1 @@
+{"file":"cat-button-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,qRAAqR;;MCOlSA,gBAAc;;;;;IACjB,iBAAY,GAA2B,EAAE,CAAC;;;EAUlD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,SAAS,IAC3C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;GACH;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEhF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MACvC,OAAO,CAAC,mBAAmB,GAAG,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ,CAAC;KAClH,CAAC,CAAC;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatButtonGroup"],"sources":["./src/components/cat-button-group/cat-button-group.scss?tag=cat-button-group&encapsulation=shadow","./src/components/cat-button-group/cat-button-group.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n::slotted(cat-button[variant='outlined']),\n::slotted(cat-button:not([variant])) {\n  margin-right: -1px;\n}\n\n::slotted(cat-button[variant='outlined']:last-child),\n::slotted(cat-button:not([variant]):last-child) {\n  margin-right: 0;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cat-button-group',\n  styleUrl: 'cat-button-group.scss',\n  shadow: true\n})\nexport class CatButtonGroup {\n  private formElements: HTMLCatButtonElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Adds an accessible label for the button group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.a11yLabel}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));\n\n    this.formElements.forEach((element, index) => {\n      element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';\n    });\n  }\n}\n"],"version":3}