npm - @haiilo/catalyst - Versions diffs - 2.1.3 → 2.4.0 - Mend

@haiilo/catalyst 2.1.3 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;GAQG;AAMH,MAAM,OAAO,SAAS;EALtB;IAMmB,~~OAAE~~,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;~~IAK5C~~,oBAAe,GAAG,KAAK,CAAC;IAEjC;;OAEG;IACsB,YAAO,GAAG,KAAK,CAAC;IAEzC;;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;IAYzB;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;GA8G3B;~~EA7FC~~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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({ mutable: true }) 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 \| 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 Emitted when the checked status of the toggle is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the toggle received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.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 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.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.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"]}
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 /\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 Emitted when the checked status of the toggle is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the toggle received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.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 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.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.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/scss/core/_typography.scss CHANGED Viewed

@@ -2,7 +2,12 @@
 @use '../mixins' as *;
 :where(h1, h2, h3, h4, h5, h6),
-.cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6 {
+.cat-h1,
+.cat-h2,
+.cat-h3,
+.cat-h4,
+.cat-h5,
+.cat-h6 {
   margin-top: 0;
   margin-bottom: $cat-head-margin-bottom;
 }
@@ -155,8 +160,9 @@ dd {
 }
 blockquote {
-  padding: 0.5rem 0 0.5rem calc(2rem - 4px);
-  border-left: 4px solid cat-token('color.ui.border.default');
+  padding: 0.75rem 0 0.75rem calc(1.5rem - 2px);
+  border-left: 2px solid cat-token('color.ui.border.quote');
+  font-style: italic;
   @include cat-body('l', null);
   > :last-child {
@@ -177,8 +183,8 @@ figcaption {
 }
 figure {
-  padding: 0.5rem 0 0.5rem calc(2rem - 4px);
-  border-left: 4px solid cat-token('color.ui.border.default');
+  padding: 0.75rem 0 0.75rem calc(1.5rem - 2px);
+  border-left: 2px solid cat-token('color.ui.border.quote');
   blockquote {
     margin-bottom: 0;

package/dist/collection/utils/setDefault.js CHANGED Viewed

@@ -3,7 +3,7 @@ export function setAttributeDefault(host, attr, value) {
     host.hostElement.setAttribute(attr, String(value));
   }
 }
-export function setPropertyDefault(host, prop) {
-  setAttributeDefault(host, String(prop), host[prop]);
+export function setAttribute(host, attr, value) {
+  host.hostElement.setAttribute(attr, String(value));
 }
 //# sourceMappingURL=setDefault.js.map

package/dist/collection/utils/setDefault.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"setDefault.js","sourceRoot":"","sources":["../../src/utils/setDefault.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,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,CAAC;AAED,MAAM,UAAU,~~kBAAkB~~,CAAyC,IAAO,EAAE,~~IAAa~~;~~EAC/F~~,~~mBAAmB~~,CAAC,~~IAAI~~,~~EAAE~~,~~MAAM~~,CAAC,IAAI,~~CAAC,~~EAAE,~~IAAI~~,CAAC,~~IAAI~~,CAAC,CAAC,CAAC;~~AACtD~~,CAAC","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 ~~setPropertyDefault~~<T extends { hostElement: HTMLElement }>(host: T, ~~prop~~: ~~keyof~~ T): void {\n ~~setAttributeDefault~~(~~host~~, String(~~prop~~)~~, host[prop]~~);\n}\n"]}
1	+ {"version":3,"file":"setDefault.js","sourceRoot":"","sources":["../../src/utils/setDefault.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,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,CAAC;AAED,MAAM,UAAU,YAAY,CAAyC,IAAO,EAAE,IAAY,EAAE,KAAc;EACxG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACrD,CAAC","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"]}

package/dist/components/cat-alert.js CHANGED Viewed

@@ -1,7 +1,12 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as setAttributeDefault, a as setPropertyDefault } from './setDefault.js';
 import { d as defineCustomElement$2 } from './cat-icon2.js';
+function setAttributeDefault(host, attr, value) {
+  if (!host.hostElement.hasAttribute(attr) && value != null) {
+    host.hostElement.setAttribute(attr, String(value));
+  }
+}
 const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem);margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}:host([color=primary]) cat-icon{color:rgb(var(--cat-primary-text, 0, 129, 148))}:host([color=secondary]){background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(var(--cat-success-bg-, 0, 132, 88), 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(var(--cat-warning-bg, 255, 206, 128), 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -35,7 +40,6 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   connectedCallback() {
     setAttributeDefault(this, 'tabindex', 0);
     setAttributeDefault(this, 'role', this.mapRole.get(this.color));
-    setPropertyDefault(this, 'color');
   }
   render() {
     return (h(Host, null, !this.noIcon && h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), h("div", { class: "content" }, h("slot", null))));
@@ -43,7 +47,7 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get hostElement() { return this; }
   static get style() { return catAlertCss; }
 }, [1, "cat-alert", {
-    "color": [1],
+    "color": [513],
     "icon": [1],
     "noIcon": [4, "no-icon"]
   }]);

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

	@@ -1 +1 @@
1	- {"file":"cat-alert.js","mappings":"~~;;;;AAAA~~,MAAM,WAAW,GAAG,sgCAAsgC;;MCY7gCA,UAAQ;EALrB;;;;IAMmB,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;;;;~~IAOK~~,UAAK,GAA+D,SAAS,CAAC;;;;~~IAU9E~~,WAAM,GAAG,KAAK,CAAC;~~GAkBxB~~;~~EAhBC~~,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;~~IAChE,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC~~;~~GACnC;~~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/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["@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, ~~setPropertyDefault~~ } 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() 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 ~~setPropertyDefault(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}
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;EALrB;;;;IAMmB,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;;;;IAOsB,UAAK,GAA+D,SAAS,CAAC;;;;IAU/F,WAAM,GAAG,KAAK,CAAC;GAiBxB;EAfC,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}

package/dist/components/cat-badge.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { a as setPropertyDefault } from './setDefault.js';
 const catBadgeCss = ":host([hidden]){display:none}:host{display:inline-flex;max-width:100%;vertical-align:baseline;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;line-height:1.5}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgba(var(--bg), 0.1);color:rgb(var(--text));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}:host([color=primary]){--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--border:var(--cat-primary-text, 0, 129, 148)}:host([color=secondary]){--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--border:var(--cat-secondary-bg, 105, 118, 135)}:host([color=success]){--bg:var(--cat-success-bg-, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--border:var(--cat-success-text, 0, 132, 88)}:host([color=warning]){--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--border:var(--cat-warning-text, 159, 97, 0)}:host([color=danger]){--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--border:var(--cat-danger-text, 217, 52, 13)}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}:host([pulse][variant=filled]){animation:1.5s ease 0s infinite normal none running pulse}:host([pulse][variant=outlined]){animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
@@ -29,22 +28,17 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.pulse = false;
   }
-  connectedCallback() {
-    setPropertyDefault(this, 'variant');
-    setPropertyDefault(this, 'color');
-    setPropertyDefault(this, 'size');
-  }
   render() {
     return h("slot", null);
   }
   get hostElement() { return this; }
   static get style() { return catBadgeCss; }
 }, [1, "cat-badge", {
-    "variant": [1],
-    "color": [1],
-    "size": [1],
-    "round": [4],
-    "pulse": [4]
+    "variant": [513],
+    "color": [513],
+    "size": [513],
+    "round": [516],
+    "pulse": [516]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/cat-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-badge.js","mappings":"~~;;;~~AAAA,MAAM,WAAW,GAAG,+jFAA+jF;;~~MCYtkFA~~,UAAQ;EALrB;;;;;;;~~IAWU~~,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;~~GAWvB~~;~~EATC~~,~~iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,kBAAkB,CAAC,IAAI,EAAE,~~MAAM~~,CAAC,CAAC~~;~~GAClC;EAED,MAAM;~~IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatBadge"],"sources":["./src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","./src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n// -----\n\n$-sizes: (\n 'xl': 3rem,\n 'l': 2.5rem,\n 'm': 2rem,\n 's': 1.5rem,\n 'xs': 1rem\n);\n$-paddings: (\n 'xl': 0 1rem,\n 'l': 0 1rem,\n 'm': 0 0.75rem,\n 's': 0 0.5rem,\n 'xs': 0 0.25rem\n);\n\n// -----\n\n:host([hidden]) {\n display: none;\n}\n\n:host {\n display: inline-flex;\n max-width: 100%;\n vertical-align: baseline;\n align-items: center;\n justify-content: center;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n line-height: 1.5;\n\n slot {\n display: inline-block;\n @include cat-ellipsis;\n }\n}\n\n// ----- round\n\n:host([round]) {\n border-radius: 10rem;\n}\n\n// ----- theme\n\n:host([variant='filled']) {\n background-color: cat-token-wrap(var(--bg), 0.1);\n color: cat-token-wrap(var(--text));\n font-weight: 600;\n @include cat-font-smooth;\n}\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n:host([variant='outlined']) {\n background-color: cat-token('color.ui.background.body');\n box-shadow: $-outline;\n color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n :host([color='#{$theme}']) {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\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\n// ----- size\n\n@mixin size($size, $fontSize) {\n :host([size='#{$size}']) {\n height: map.get($-sizes, $size);\n min-width: map.get($-sizes, $size);\n font-size: cat-body-font-size($fontSize);\n padding: map.get($-paddings, $size);\n }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 's');\n@include size('l', 'm');\n@include size('xl', 'l');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n:host([pulse][variant='filled']) {\n animation: 1.5s ease 0s infinite normal none running pulse;\n}\n\n:host([pulse][variant='outlined']) {\n animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: $-pulse-0;\n }\n\n 70% {\n box-shadow: $-pulse-70;\n }\n\n 100% {\n box-shadow: $-pulse-100;\n }\n}\n\n@keyframes pulse-outlined {\n 0% {\n box-shadow: $-pulse-0, $-outline;\n }\n\n 70% {\n box-shadow: $-pulse-70, $-outline;\n }\n\n 100% {\n box-shadow: $-pulse-100, $-outline;\n }\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\~~nimport { setPropertyDefault } from '../../utils/setDefault';\~~n\n/*\n Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n /\n@Component({\n tag: 'cat-badge',\n styleUrl: 'cat-badge.scss',\n shadow: true\n})\nexport class CatBadge {\n @Element() hostElement!: HTMLElement;\n\n /\n The rendering style of the badge.\n /\n @Prop() variant: 'filled' \| 'outlined' = 'filled';\n\n /\n The color palette of the badge.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'primary';\n\n /\n The size of the badge.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n Use round badge edges.\n /\n @Prop() round = false;\n\n /\n Draw attention to the badge with a subtle animation.\n */\n @Prop() pulse = false;\n\n ~~connectedCallback() {\n setPropertyDefault(this, 'variant');\n setPropertyDefault(this, 'color');\n setPropertyDefault(this, 'size');\n }\n\n~~ render() {\n return <slot></slot>;\n }\n}\n"],"version":3}
1	+ {"file":"cat-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+jFAA+jF;;MCWtkFA,UAAQ;EALrB;;;;;;;IAW2B,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;GAKxC;EAHC,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatBadge"],"sources":["./src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","./src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n// -----\n\n$-sizes: (\n 'xl': 3rem,\n 'l': 2.5rem,\n 'm': 2rem,\n 's': 1.5rem,\n 'xs': 1rem\n);\n$-paddings: (\n 'xl': 0 1rem,\n 'l': 0 1rem,\n 'm': 0 0.75rem,\n 's': 0 0.5rem,\n 'xs': 0 0.25rem\n);\n\n// -----\n\n:host([hidden]) {\n display: none;\n}\n\n:host {\n display: inline-flex;\n max-width: 100%;\n vertical-align: baseline;\n align-items: center;\n justify-content: center;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n line-height: 1.5;\n\n slot {\n display: inline-block;\n @include cat-ellipsis;\n }\n}\n\n// ----- round\n\n:host([round]) {\n border-radius: 10rem;\n}\n\n// ----- theme\n\n:host([variant='filled']) {\n background-color: cat-token-wrap(var(--bg), 0.1);\n color: cat-token-wrap(var(--text));\n font-weight: 600;\n @include cat-font-smooth;\n}\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n:host([variant='outlined']) {\n background-color: cat-token('color.ui.background.body');\n box-shadow: $-outline;\n color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n :host([color='#{$theme}']) {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\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\n// ----- size\n\n@mixin size($size, $fontSize) {\n :host([size='#{$size}']) {\n height: map.get($-sizes, $size);\n min-width: map.get($-sizes, $size);\n font-size: cat-body-font-size($fontSize);\n padding: map.get($-paddings, $size);\n }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 's');\n@include size('l', 'm');\n@include size('xl', 'l');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n:host([pulse][variant='filled']) {\n animation: 1.5s ease 0s infinite normal none running pulse;\n}\n\n:host([pulse][variant='outlined']) {\n animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: $-pulse-0;\n }\n\n 70% {\n box-shadow: $-pulse-70;\n }\n\n 100% {\n box-shadow: $-pulse-100;\n }\n}\n\n@keyframes pulse-outlined {\n 0% {\n box-shadow: $-pulse-0, $-outline;\n }\n\n 70% {\n box-shadow: $-pulse-70, $-outline;\n }\n\n 100% {\n box-shadow: $-pulse-100, $-outline;\n }\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/*\n Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n /\n@Component({\n tag: 'cat-badge',\n styleUrl: 'cat-badge.scss',\n shadow: true\n})\nexport class CatBadge {\n @Element() hostElement!: HTMLElement;\n\n /\n The rendering style of the badge.\n /\n @Prop({ reflect: true }) variant: 'filled' \| 'outlined' = 'filled';\n\n /\n The color palette of the badge.\n /\n @Prop({ reflect: true }) color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'primary';\n\n /\n The size of the badge.\n /\n @Prop({ reflect: true }) size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n Use round badge edges.\n /\n @Prop({ reflect: true }) round = false;\n\n /\n Draw attention to the badge with a subtle animation.\n */\n @Prop({ reflect: true }) pulse = false;\n\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}

package/dist/components/cat-checkbox2.js CHANGED Viewed

@@ -13,7 +13,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId++}`;
+    this._id = `cat-checkbox-${nextUniqueId++}`;
     this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
@@ -44,6 +44,9 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.labelLeft = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentDidLoad() {
     if (this.input && this.indeterminate) {
       this.input.indeterminate = true;
@@ -103,6 +106,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "cat-checkbox", {
     "checked": [1028],
     "disabled": [4],
+    "identifier": [1],
     "indeterminate": [4],
     "label": [1],
     "labelHidden": [4, "label-hidden"],

package/dist/components/cat-checkbox2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-checkbox2.js","mappings":"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","names":["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$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\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 position: relative;\n}\n\n.label-left {\n flex-direction: row-reverse;\n\n input {\n right: 1px;\n left: unset;\n }\n}\n\ninput {\n position: absolute;\n width: $checkbox-width;\n height: $checkbox-height;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n left: 1px;\n top: 0.5px;\n}\n\n.box {\n flex: 0 0 auto;\n display: flex;\n position: relative;\n height: $checkbox-height;\n width: $checkbox-width;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\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 pointer-events: none;\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: 50%;\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 .is-disabled & {\n background-color: cat-token('color.ui.background.inputDisabled');\n border-color: cat-token('color.ui.border.dark');\n stroke: cat-token('color.ui.font.muted');\n }\n}\n\n:host(.cat-error) {\n .box {\n border: 1px solid cat-token('color.theme.danger.bg');\n }\n\n :checked + .box,\n :indeterminate + .box {\n background-color: cat-token('color.theme.danger.bg');\n border-color: cat-token('color.theme.danger.bg');\n stroke: cat-token('color.theme.danger.fill');\n }\n}\n\n.label {\n flex: 1 1 auto;\n min-width: 0;\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({ mutable: true }) 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 \| boolean;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\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 this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Programmatically move focus to the checkbox. 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 checkbox. 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 checkbox.\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 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 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.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}
1	+ {"file":"cat-checkbox2.js","mappings":"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","names":["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$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\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 position: relative;\n}\n\n.label-left {\n flex-direction: row-reverse;\n\n input {\n right: 1px;\n left: unset;\n }\n}\n\ninput {\n position: absolute;\n width: $checkbox-width;\n height: $checkbox-height;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n left: 1px;\n top: 0.5px;\n}\n\n.box {\n flex: 0 0 auto;\n display: flex;\n position: relative;\n height: $checkbox-height;\n width: $checkbox-width;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\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 pointer-events: none;\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: 50%;\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 .is-disabled & {\n background-color: cat-token('color.ui.background.inputDisabled');\n border-color: cat-token('color.ui.border.dark');\n stroke: cat-token('color.ui.font.muted');\n }\n}\n\n:host(.cat-error) {\n .box {\n border: 1px solid cat-token('color.theme.danger.bg');\n }\n\n :checked + .box,\n :indeterminate + .box {\n background-color: cat-token('color.theme.danger.bg');\n border-color: cat-token('color.theme.danger.bg');\n stroke: cat-token('color.theme.danger.fill');\n }\n}\n\n.label {\n flex: 1 1 auto;\n min-width: 0;\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 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 /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\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 \| boolean;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\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 this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Programmatically move focus to the checkbox. 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 checkbox. 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 checkbox.\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 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 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.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}

package/dist/components/cat-dropdown2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-dropdown2.js","mappings":"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","names":["focusTrap.createFocusTrap"],"sources":["../tokens/dist/js/variables.js","./src/components/cat-dropdown/cat-dropdown.scss?tag=cat-dropdown&encapsulation=shadow","./src/components/cat-dropdown/cat-dropdown.tsx"],"sourcesContent":["/*\n Auto-generated file. Do not edit directly.\n /\n\nexport const assetFontDmSansName = \"DM Sans\";\nexport const assetFontDmSansWoff2Bold = \"DMSans-Bold.woff2\";\nexport const assetFontDmSansWoff2BoldItalic = \"DMSans-BoldItalic.woff2\";\nexport const assetFontDmSansWoff2Italic = \"DMSans-Italic.woff2\";\nexport const assetFontDmSansWoff2Medium = \"DMSans-Medium.woff2\";\nexport const assetFontDmSansWoff2MediumItalic = \"DMSans-MediumItalic.woff2\";\nexport const assetFontDmSansWoff2Regular = \"DMSans-Regular.woff2\";\nexport const assetFontLatoName = \"Lato\";\nexport const assetFontLatoWoffBlack = \"Lato-Black.woff\";\nexport const assetFontLatoWoff2Black = \"Lato-Black.woff2\";\nexport const assetFontLatoWoffBlackItalic = \"Lato-BlackItalic.woff\";\nexport const assetFontLatoWoff2BlackItalic = \"Lato-BlackItalic.woff2\";\nexport const assetFontLatoWoffBold = \"Lato-Bold.woff\";\nexport const assetFontLatoWoff2Bold = \"Lato-Bold.woff2\";\nexport const assetFontLatoWoffBoldItalic = \"Lato-BoldItalic.woff\";\nexport const assetFontLatoWoff2BoldItalic = \"Lato-BoldItalic.woff2\";\nexport const assetFontLatoWoffHairline = \"Lato-Hairline.woff\";\nexport const assetFontLatoWoff2Hairline = \"Lato-Hairline.woff2\";\nexport const assetFontLatoWoffHairlineItalic = \"Lato-HairlineItalic.woff\";\nexport const assetFontLatoWoff2HairlineItalic = \"Lato-HairlineItalic.woff2\";\nexport const assetFontLatoWoffHeavy = \"Lato-Heavy.woff\";\nexport const assetFontLatoWoff2Heavy = \"Lato-Heavy.woff2\";\nexport const assetFontLatoWoffHeavyItalic = \"Lato-HeavyItalic.woff\";\nexport const assetFontLatoWoff2HeavyItalic = \"Lato-HeavyItalic.woff2\";\nexport const assetFontLatoWoffItalic = \"Lato-Italic.woff\";\nexport const assetFontLatoWoff2Italic = \"Lato-Italic.woff2\";\nexport const assetFontLatoWoffLight = \"Lato-Light.woff\";\nexport const assetFontLatoWoff2Light = \"Lato-Light.woff2\";\nexport const assetFontLatoWoffLightItalic = \"Lato-LightItalic.woff\";\nexport const assetFontLatoWoff2LightItalic = \"Lato-LightItalic.woff2\";\nexport const assetFontLatoWoffMedium = \"Lato-Medium.woff\";\nexport const assetFontLatoWoff2Medium = \"Lato-Medium.woff2\";\nexport const assetFontLatoWoffMediumItalic = \"Lato-MediumItalic.woff\";\nexport const assetFontLatoWoff2MediumItalic = \"Lato-MediumItalic.woff2\";\nexport const assetFontLatoWoffRegular = \"Lato-Regular.woff\";\nexport const assetFontLatoWoff2Regular = \"Lato-Regular.woff2\";\nexport const assetFontLatoWoffSemibold = \"Lato-Semibold.woff\";\nexport const assetFontLatoWoff2Semibold = \"Lato-Semibold.woff2\";\nexport const assetFontLatoWoffSemiboldItalic = \"Lato-SemiboldItalic.woff\";\nexport const assetFontLatoWoff2SemiboldItalic = \"Lato-SemiboldItalic.woff2\";\nexport const assetFontLatoWoffThin = \"Lato-Thin.woff\";\nexport const assetFontLatoWoff2Thin = \"Lato-Thin.woff2\";\nexport const assetFontLatoWoffThinItalic = \"Lato-ThinItalic.woff\";\nexport const assetFontLatoWoff2ThinItalic = \"Lato-ThinItalic.woff2\";\nexport const assetFontAzeretMonoName = \"Azeret Mono\";\nexport const assetFontAzeretMonoWoff2Regular = \"AzeretMono-Regular.woff2\";\nexport const colorBaseWhite = \"#ffffff\";\nexport const colorBaseBlack = \"#000000\";\nexport const colorBaseNeutral100 = \"#f2f4f7\";\nexport const colorBaseNeutral200 = \"#ebecf0\";\nexport const colorBaseNeutral300 = \"#d7dbe0\";\nexport const colorBaseNeutral400 = \"#697687\";\nexport const colorBaseNeutral500 = \"#515c6c\";\nexport const colorBaseNeutral600 = \"#394251\";\nexport const colorBaseNeutral700 = \"#1b1f26\";\nexport const colorBaseNeutralDark400 = \"#697687\";\nexport const colorBaseBrand100 = \"#c9e5e8\";\nexport const colorBaseBrand200 = \"#2db3c3\";\nexport const colorBaseBrand300 = \"#29a3b1\";\nexport const colorBaseBrand400 = \"#008194\";\nexport const colorBaseBrand500 = \"#017384\";\nexport const colorBaseBrand600 = \"#026371\";\nexport const colorBaseBrand700 = \"#175b63\";\nexport const colorBaseBrandDark400 = \"#93b4f2\";\nexport const colorBaseBrandDark500 = \"#93b4f2\";\nexport const colorBaseBrandDark600 = \"#93b4f2\";\nexport const colorBaseGreen100 = \"#d4ede4\";\nexport const colorBaseGreen200 = \"#00bb7d\";\nexport const colorBaseGreen300 = \"#00aa71\";\nexport const colorBaseGreen400 = \"#008458\";\nexport const colorBaseGreen500 = \"#00754e\";\nexport const colorBaseGreen600 = \"#006946\";\nexport const colorBaseGreen700 = \"#005f40\";\nexport const colorBaseOrange100 = \"#ffdea8\";\nexport const colorBaseOrange200 = \"#ffd694\";\nexport const colorBaseOrange300 = \"#ffce80\";\nexport const colorBaseOrange400 = \"#ebb663\";\nexport const colorBaseOrange500 = \"#d6a75a\";\nexport const colorBaseOrange600 = \"#b0853e\";\nexport const colorBaseOrange700 = \"#9f6100\";\nexport const colorBaseRed100 = \"#fbc7bb\";\nexport const colorBaseRed200 = \"#f68368\";\nexport const colorBaseRed300 = \"#f46a49\";\nexport const colorBaseRed400 = \"#d9340d\";\nexport const colorBaseRed500 = \"#c22e0b\";\nexport const colorBaseRed600 = \"#ae2a0a\";\nexport const colorBaseRed700 = \"#9e2609\";\nexport const colorThemePrimaryBg = \"#008194\";\nexport const colorThemePrimaryBgHover = \"#017384\";\nexport const colorThemePrimaryBgActive = \"#026371\";\nexport const colorThemePrimaryFill = \"#ffffff\";\nexport const colorThemePrimaryFillHover = \"#ffffff\";\nexport const colorThemePrimaryFillActive = \"#ffffff\";\nexport const colorThemePrimaryText = \"#008194\";\nexport const colorThemePrimaryTextHover = \"#017384\";\nexport const colorThemePrimaryTextActive = \"#026371\";\nexport const colorThemePrimaryDarkBg = \"#93b4f2\";\nexport const colorThemePrimaryDarkBgHover = \"#93b4f2\";\nexport const colorThemePrimaryDarkBgActive = \"#93b4f2\";\nexport const colorThemePrimaryDarkFill = \"#000000\";\nexport const colorThemePrimaryDarkFillHover = \"#000000\";\nexport const colorThemePrimaryDarkFillActive = \"#000000\";\nexport const colorThemePrimaryDarkText = \"#93b4f2\";\nexport const colorThemePrimaryDarkTextHover = \"#93b4f2\";\nexport const colorThemePrimaryDarkTextActive = \"#93b4f2\";\nexport const colorThemeSecondaryBg = \"#697687\";\nexport const colorThemeSecondaryBgHover = \"#697687\";\nexport const colorThemeSecondaryBgActive = \"#697687\";\nexport const colorThemeSecondaryFill = \"#ffffff\";\nexport const colorThemeSecondaryFillHover = \"#ffffff\";\nexport const colorThemeSecondaryFillActive = \"#ffffff\";\nexport const colorThemeSecondaryText = \"#000000\";\nexport const colorThemeSecondaryTextHover = \"#000000\";\nexport const colorThemeSecondaryTextActive = \"#000000\";\nexport const colorThemeSecondaryDarkBg = \"#697687\";\nexport const colorThemeSecondaryDarkBgHover = \"#697687\";\nexport const colorThemeSecondaryDarkBgActive = \"#697687\";\nexport const colorThemeSecondaryDarkFill = \"#000000\";\nexport const colorThemeSecondaryDarkFillHover = \"#000000\";\nexport const colorThemeSecondaryDarkFillActive = \"#000000\";\nexport const colorThemeSecondaryDarkText = \"#ffffff\";\nexport const colorThemeSecondaryDarkTextHover = \"#ffffff\";\nexport const colorThemeSecondaryDarkTextActive = \"#ffffff\";\nexport const colorThemeSuccessBg = \"#008458\";\nexport const colorThemeSuccessBgHover = \"#00754e\";\nexport const colorThemeSuccessBgActive = \"#006946\";\nexport const colorThemeSuccessFill = \"#ffffff\";\nexport const colorThemeSuccessFillHover = \"#ffffff\";\nexport const colorThemeSuccessFillActive = \"#ffffff\";\nexport const colorThemeSuccessText = \"#008458\";\nexport const colorThemeSuccessTextHover = \"#00754e\";\nexport const colorThemeSuccessTextActive = \"#006946\";\nexport const colorThemeWarningBg = \"#ffce80\";\nexport const colorThemeWarningBgHover = \"#ffd694\";\nexport const colorThemeWarningBgActive = \"#ffdea8\";\nexport const colorThemeWarningFill = \"#000000\";\nexport const colorThemeWarningFillHover = \"#000000\";\nexport const colorThemeWarningFillActive = \"#000000\";\nexport const colorThemeWarningText = \"#9f6100\";\nexport const colorThemeWarningTextHover = \"#9f6100\";\nexport const colorThemeWarningTextActive = \"#9f6100\";\nexport const colorThemeDangerBg = \"#d9340d\";\nexport const colorThemeDangerBgHover = \"#c22e0b\";\nexport const colorThemeDangerBgActive = \"#ae2a0a\";\nexport const colorThemeDangerFill = \"#ffffff\";\nexport const colorThemeDangerFillHover = \"#ffffff\";\nexport const colorThemeDangerFillActive = \"#ffffff\";\nexport const colorThemeDangerText = \"#d9340d\";\nexport const colorThemeDangerTextHover = \"#c22e0b\";\nexport const colorThemeDangerTextActive = \"#ae2a0a\";\nexport const colorUiBackgroundCanvas = \"#f2f4f7\";\nexport const colorUiBackgroundBody = \"#ffffff\";\nexport const colorUiBackgroundBodyDark = \"#1b1f26\";\nexport const colorUiBackgroundMuted = \"#ebecf0\";\nexport const colorUiBackgroundInput = \"#ffffff\";\nexport const colorUiBackgroundInputDisabled = \"#f2f4f7\";\nexport const colorUiBackgroundSkeleton = \"#ebecf0\";\nexport const colorUiBackgroundSkeletonHighlight = \"#d7dbe0\";\nexport const colorUiBackgroundTooltip = \"#000000\";\nexport const colorUiBackgroundBackdrop = \"#000000\";\nexport const colorUiBackgroundSelectPill = \"#f2f4f7\";\nexport const colorUiBorderLight = \"#f2f4f7\";\nexport const colorUiBorderDefault = \"#ebecf0\";\nexport const colorUiBorderDark = \"#d7dbe0\";\nexport const colorUiBorderFocus = \"#0071ff\";\nexport const colorUiFontHead = \"#000000\";\nexport const colorUiFontHeadDark = \"#ffffff\";\nexport const colorUiFontBody = \"#000000\";\nexport const colorUiFontBodyDark = \"#ffffff\";\nexport const colorUiFontMono = \"#000000\";\nexport const colorUiFontMonoDark = \"#ffffff\";\nexport const colorUiFontMuted = \"#697687\";\nexport const colorUiFontQuote = \"#697687\";\nexport const colorUiFontTooltip = \"#ffffff\";\nexport const fontFamilyHead = \"Lato\";\nexport const fontFamilyBody = \"Lato\";\nexport const fontFamilyMono = \"Azeret Mono\";\nexport const fontFamilyEmoji = \"''\";\nexport const fontWeightHead = 500;\nexport const fontWeightBody = 400;\nexport const fontWeightMono = 400;\nexport const fontDecorationLink = \"none\";\nexport const fontDecorationLinkHover = \"underline\";\nexport const fontDecorationLinkButton = \"none\";\nexport const fontDecorationLinkButtonHover = \"none\";\nexport const opacityDisabled = 0.65;\nexport const opacityBackdrop = 0.6;\nexport const opacityTooltip = 1;\nexport const sizeBorderRadiusL = \"0.5rem\";\nexport const sizeBorderRadiusM = \"0.25rem\";\nexport const sizeBorderRadiusS = \"0.125rem\";\nexport const sizeFontHead1 = \"1.75rem\";\nexport const sizeFontHead2 = \"1.5rem\";\nexport const sizeFontHead3 = \"1.25rem\";\nexport const sizeFontHead4 = \"1.125rem\";\nexport const sizeFontHead5 = \"0.9375rem\";\nexport const sizeFontHead6 = \"0.875rem\";\nexport const sizeFontBodyXl = \"1.25rem\";\nexport const sizeFontBodyL = \"1.125rem\";\nexport const sizeFontBodyM = \"0.9375rem\";\nexport const sizeFontBodyS = \"0.875rem\";\nexport const sizeFontBodyXs = \"0.75rem\";\nexport const sizeFontMonoXl = \"1.125rem\";\nexport const sizeFontMonoL = \"0.9375rem\";\nexport const sizeFontMonoM = \"0.875rem\";\nexport const sizeFontMonoS = \"0.75rem\";\nexport const sizeFontMonoXs = \"0.625rem\";\nexport const sizeLineHead1 = \"2rem\";\nexport const sizeLineHead2 = \"1.75rem\";\nexport const sizeLineHead3 = \"1.5rem\";\nexport const sizeLineHead4 = \"1.5rem\";\nexport const sizeLineHead5 = \"1.25rem\";\nexport const sizeLineHead6 = \"1rem\";\nexport const sizeLineBodyXl = \"1.5rem\";\nexport const sizeLineBodyL = \"1.5rem\";\nexport const sizeLineBodyM = \"1.25rem\";\nexport const sizeLineBodyS = \"1rem\";\nexport const sizeLineBodyXs = \"1rem\";\nexport const sizeLineMonoXl = \"1.5rem\";\nexport const sizeLineMonoL = \"1.25rem\";\nexport const sizeLineMonoM = \"1.125rem\";\nexport const sizeLineMonoS = \"1rem\";\nexport const sizeLineMonoXs = \"0.875rem\";\nexport const sizeModalS = \"400rem\";\nexport const sizeModalM = \"600rem\";\nexport const sizeModalL = \"800rem\";\nexport const sizeScreenXs = \"540rem\";\nexport const sizeScreenS = \"768rem\";\nexport const sizeScreenM = \"992rem\";\nexport const sizeScreenL = \"1200rem\";\nexport const sizeScreenXl = \"1400rem\";\nexport const sizeSpacingXl = \"2rem\";\nexport const sizeSpacingL = \"1.5rem\";\nexport const sizeSpacingM = \"1rem\";\nexport const sizeSpacingS = \"0.5rem\";\nexport const sizeSpacingXs = \"0.25rem\";\nexport const timeTransitionL = 500;\nexport const timeTransitionM = 250;\nexport const timeTransitionS = 125;\nexport const timeDelayL = 500;\nexport const timeDelayM = 250;\nexport const timeDelayS = 125;\nexport const timeDurationL = 1000;\nexport const timeDurationM = 500;\nexport const timeDurationS = 250;","@import 'variables';\n@import 'mixins';\n\n$-min-width: 8rem;\n$-max-width: 16rem;\n$-min-height: 2rem;\n$-max-height: calc(100vh - 48px);\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n::slotted(nav) {\n padding-top: $cat-body-margin-bottom 0.5;\n padding-bottom: $cat-body-margin-bottom * 0.5;\n min-width: $-min-width;\n max-width: $-max-width;\n}\n\n.content {\n position: absolute;\n background: cat-token('color.ui.background.body');\n display: none;\n -webkit-overflow-scrolling: touch;\n min-height: $-min-height;\n max-height: $-max-height;\n @include cat-elevation(1);\n border-radius: cat-border-radius('m');\n z-index: $cat-dropdown-z-index;\n opacity: 0;\n transition: transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),\n opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15);\n\n &[data-placement^='top'] {\n transform: translateY(1rem);\n }\n\n &[data-placement^='left'] {\n transform: translateX(1rem);\n }\n\n &[data-placement^='right'] {\n transform: translateX(-1rem);\n }\n\n &[data-placement^='bottom'] {\n transform: translateY(-1rem);\n }\n\n &.show {\n opacity: 1;\n transform: translateX(0);\n transform: translateY(0);\n transition: transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1),\n opacity cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1);\n }\n\n &.overflow-auto {\n overflow: auto;\n }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private keyListener?: (event: KeyboardEvent) => void;\n private isOpen: boolean \| null = false;\n\n /*\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first,\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button click\n if (!this.noAutoClose && event.composedPath().includes(this.content)) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n /\n async open(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.catOpen.emit();\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n !event.composedPath().includes(this.content) &&\n (!this.trigger \|\| !event.composedPath().includes(this.trigger)),\n onPostDeactivate: () => this.close()\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad(): void {\n this.keyListener = event => {\n if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n const activeElement = firstTabbable(document.activeElement);\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].focus();\n event.preventDefault();\n }\n };\n document.addEventListener('keydown', this.keyListener);\n }\n\n disconnectedCallback(): void {\n if (this.keyListener) {\n document.removeEventListener('keydown', this.keyListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n autoUpdate(this.trigger, this.content, () => this.update());\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update() {\n if (this.trigger) {\n computePosition(this.trigger, this.content, {\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip()]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n}\n"],"version":3}
1	+ {"file":"cat-dropdown2.js","mappings":"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","names":["focusTrap.createFocusTrap"],"sources":["../tokens/dist/js/variables.js","./src/components/cat-dropdown/cat-dropdown.scss?tag=cat-dropdown&encapsulation=shadow","./src/components/cat-dropdown/cat-dropdown.tsx"],"sourcesContent":["/*\n Auto-generated file. Do not edit directly.\n /\n\nexport const assetFontDmSansName = \"DM Sans\";\nexport const assetFontDmSansWoff2Bold = \"DMSans-Bold.woff2\";\nexport const assetFontDmSansWoff2BoldItalic = \"DMSans-BoldItalic.woff2\";\nexport const assetFontDmSansWoff2Italic = \"DMSans-Italic.woff2\";\nexport const assetFontDmSansWoff2Medium = \"DMSans-Medium.woff2\";\nexport const assetFontDmSansWoff2MediumItalic = \"DMSans-MediumItalic.woff2\";\nexport const assetFontDmSansWoff2Regular = \"DMSans-Regular.woff2\";\nexport const assetFontLatoName = \"Lato\";\nexport const assetFontLatoWoffBlack = \"Lato-Black.woff\";\nexport const assetFontLatoWoff2Black = \"Lato-Black.woff2\";\nexport const assetFontLatoWoffBlackItalic = \"Lato-BlackItalic.woff\";\nexport const assetFontLatoWoff2BlackItalic = \"Lato-BlackItalic.woff2\";\nexport const assetFontLatoWoffBold = \"Lato-Bold.woff\";\nexport const assetFontLatoWoff2Bold = \"Lato-Bold.woff2\";\nexport const assetFontLatoWoffBoldItalic = \"Lato-BoldItalic.woff\";\nexport const assetFontLatoWoff2BoldItalic = \"Lato-BoldItalic.woff2\";\nexport const assetFontLatoWoffHairline = \"Lato-Hairline.woff\";\nexport const assetFontLatoWoff2Hairline = \"Lato-Hairline.woff2\";\nexport const assetFontLatoWoffHairlineItalic = \"Lato-HairlineItalic.woff\";\nexport const assetFontLatoWoff2HairlineItalic = \"Lato-HairlineItalic.woff2\";\nexport const assetFontLatoWoffHeavy = \"Lato-Heavy.woff\";\nexport const assetFontLatoWoff2Heavy = \"Lato-Heavy.woff2\";\nexport const assetFontLatoWoffHeavyItalic = \"Lato-HeavyItalic.woff\";\nexport const assetFontLatoWoff2HeavyItalic = \"Lato-HeavyItalic.woff2\";\nexport const assetFontLatoWoffItalic = \"Lato-Italic.woff\";\nexport const assetFontLatoWoff2Italic = \"Lato-Italic.woff2\";\nexport const assetFontLatoWoffLight = \"Lato-Light.woff\";\nexport const assetFontLatoWoff2Light = \"Lato-Light.woff2\";\nexport const assetFontLatoWoffLightItalic = \"Lato-LightItalic.woff\";\nexport const assetFontLatoWoff2LightItalic = \"Lato-LightItalic.woff2\";\nexport const assetFontLatoWoffMedium = \"Lato-Medium.woff\";\nexport const assetFontLatoWoff2Medium = \"Lato-Medium.woff2\";\nexport const assetFontLatoWoffMediumItalic = \"Lato-MediumItalic.woff\";\nexport const assetFontLatoWoff2MediumItalic = \"Lato-MediumItalic.woff2\";\nexport const assetFontLatoWoffRegular = \"Lato-Regular.woff\";\nexport const assetFontLatoWoff2Regular = \"Lato-Regular.woff2\";\nexport const assetFontLatoWoffSemibold = \"Lato-Semibold.woff\";\nexport const assetFontLatoWoff2Semibold = \"Lato-Semibold.woff2\";\nexport const assetFontLatoWoffSemiboldItalic = \"Lato-SemiboldItalic.woff\";\nexport const assetFontLatoWoff2SemiboldItalic = \"Lato-SemiboldItalic.woff2\";\nexport const assetFontLatoWoffThin = \"Lato-Thin.woff\";\nexport const assetFontLatoWoff2Thin = \"Lato-Thin.woff2\";\nexport const assetFontLatoWoffThinItalic = \"Lato-ThinItalic.woff\";\nexport const assetFontLatoWoff2ThinItalic = \"Lato-ThinItalic.woff2\";\nexport const assetFontAzeretMonoName = \"Azeret Mono\";\nexport const assetFontAzeretMonoWoff2Regular = \"AzeretMono-Regular.woff2\";\nexport const colorBaseWhite = \"#ffffff\";\nexport const colorBaseBlack = \"#000000\";\nexport const colorBaseNeutral100 = \"#f2f4f7\";\nexport const colorBaseNeutral200 = \"#ebecf0\";\nexport const colorBaseNeutral300 = \"#d7dbe0\";\nexport const colorBaseNeutral400 = \"#697687\";\nexport const colorBaseNeutral500 = \"#515c6c\";\nexport const colorBaseNeutral600 = \"#394251\";\nexport const colorBaseNeutral700 = \"#1b1f26\";\nexport const colorBaseNeutralDark400 = \"#697687\";\nexport const colorBaseBrand100 = \"#c9e5e8\";\nexport const colorBaseBrand200 = \"#2db3c3\";\nexport const colorBaseBrand300 = \"#29a3b1\";\nexport const colorBaseBrand400 = \"#008194\";\nexport const colorBaseBrand500 = \"#017384\";\nexport const colorBaseBrand600 = \"#026371\";\nexport const colorBaseBrand700 = \"#175b63\";\nexport const colorBaseBrandDark400 = \"#93b4f2\";\nexport const colorBaseBrandDark500 = \"#93b4f2\";\nexport const colorBaseBrandDark600 = \"#93b4f2\";\nexport const colorBaseGreen100 = \"#d4ede4\";\nexport const colorBaseGreen200 = \"#00bb7d\";\nexport const colorBaseGreen300 = \"#00aa71\";\nexport const colorBaseGreen400 = \"#008458\";\nexport const colorBaseGreen500 = \"#00754e\";\nexport const colorBaseGreen600 = \"#006946\";\nexport const colorBaseGreen700 = \"#005f40\";\nexport const colorBaseOrange100 = \"#ffdea8\";\nexport const colorBaseOrange200 = \"#ffd694\";\nexport const colorBaseOrange300 = \"#ffce80\";\nexport const colorBaseOrange400 = \"#ebb663\";\nexport const colorBaseOrange500 = \"#d6a75a\";\nexport const colorBaseOrange600 = \"#b0853e\";\nexport const colorBaseOrange700 = \"#9f6100\";\nexport const colorBaseRed100 = \"#fbc7bb\";\nexport const colorBaseRed200 = \"#f68368\";\nexport const colorBaseRed300 = \"#f46a49\";\nexport const colorBaseRed400 = \"#d9340d\";\nexport const colorBaseRed500 = \"#c22e0b\";\nexport const colorBaseRed600 = \"#ae2a0a\";\nexport const colorBaseRed700 = \"#9e2609\";\nexport const colorThemePrimaryBg = \"#008194\";\nexport const colorThemePrimaryBgHover = \"#017384\";\nexport const colorThemePrimaryBgActive = \"#026371\";\nexport const colorThemePrimaryFill = \"#ffffff\";\nexport const colorThemePrimaryFillHover = \"#ffffff\";\nexport const colorThemePrimaryFillActive = \"#ffffff\";\nexport const colorThemePrimaryText = \"#008194\";\nexport const colorThemePrimaryTextHover = \"#017384\";\nexport const colorThemePrimaryTextActive = \"#026371\";\nexport const colorThemePrimaryDarkBg = \"#93b4f2\";\nexport const colorThemePrimaryDarkBgHover = \"#93b4f2\";\nexport const colorThemePrimaryDarkBgActive = \"#93b4f2\";\nexport const colorThemePrimaryDarkFill = \"#000000\";\nexport const colorThemePrimaryDarkFillHover = \"#000000\";\nexport const colorThemePrimaryDarkFillActive = \"#000000\";\nexport const colorThemePrimaryDarkText = \"#93b4f2\";\nexport const colorThemePrimaryDarkTextHover = \"#93b4f2\";\nexport const colorThemePrimaryDarkTextActive = \"#93b4f2\";\nexport const colorThemeSecondaryBg = \"#697687\";\nexport const colorThemeSecondaryBgHover = \"#697687\";\nexport const colorThemeSecondaryBgActive = \"#697687\";\nexport const colorThemeSecondaryFill = \"#ffffff\";\nexport const colorThemeSecondaryFillHover = \"#ffffff\";\nexport const colorThemeSecondaryFillActive = \"#ffffff\";\nexport const colorThemeSecondaryText = \"#000000\";\nexport const colorThemeSecondaryTextHover = \"#000000\";\nexport const colorThemeSecondaryTextActive = \"#000000\";\nexport const colorThemeSecondaryDarkBg = \"#697687\";\nexport const colorThemeSecondaryDarkBgHover = \"#697687\";\nexport const colorThemeSecondaryDarkBgActive = \"#697687\";\nexport const colorThemeSecondaryDarkFill = \"#000000\";\nexport const colorThemeSecondaryDarkFillHover = \"#000000\";\nexport const colorThemeSecondaryDarkFillActive = \"#000000\";\nexport const colorThemeSecondaryDarkText = \"#ffffff\";\nexport const colorThemeSecondaryDarkTextHover = \"#ffffff\";\nexport const colorThemeSecondaryDarkTextActive = \"#ffffff\";\nexport const colorThemeSuccessBg = \"#008458\";\nexport const colorThemeSuccessBgHover = \"#00754e\";\nexport const colorThemeSuccessBgActive = \"#006946\";\nexport const colorThemeSuccessFill = \"#ffffff\";\nexport const colorThemeSuccessFillHover = \"#ffffff\";\nexport const colorThemeSuccessFillActive = \"#ffffff\";\nexport const colorThemeSuccessText = \"#008458\";\nexport const colorThemeSuccessTextHover = \"#00754e\";\nexport const colorThemeSuccessTextActive = \"#006946\";\nexport const colorThemeWarningBg = \"#ffce80\";\nexport const colorThemeWarningBgHover = \"#ffd694\";\nexport const colorThemeWarningBgActive = \"#ffdea8\";\nexport const colorThemeWarningFill = \"#000000\";\nexport const colorThemeWarningFillHover = \"#000000\";\nexport const colorThemeWarningFillActive = \"#000000\";\nexport const colorThemeWarningText = \"#9f6100\";\nexport const colorThemeWarningTextHover = \"#9f6100\";\nexport const colorThemeWarningTextActive = \"#9f6100\";\nexport const colorThemeDangerBg = \"#d9340d\";\nexport const colorThemeDangerBgHover = \"#c22e0b\";\nexport const colorThemeDangerBgActive = \"#ae2a0a\";\nexport const colorThemeDangerFill = \"#ffffff\";\nexport const colorThemeDangerFillHover = \"#ffffff\";\nexport const colorThemeDangerFillActive = \"#ffffff\";\nexport const colorThemeDangerText = \"#d9340d\";\nexport const colorThemeDangerTextHover = \"#c22e0b\";\nexport const colorThemeDangerTextActive = \"#ae2a0a\";\nexport const colorUiBackgroundCanvas = \"#f2f4f7\";\nexport const colorUiBackgroundBody = \"#ffffff\";\nexport const colorUiBackgroundBodyDark = \"#1b1f26\";\nexport const colorUiBackgroundMuted = \"#ebecf0\";\nexport const colorUiBackgroundInput = \"#ffffff\";\nexport const colorUiBackgroundInputDisabled = \"#f2f4f7\";\nexport const colorUiBackgroundSkeleton = \"#ebecf0\";\nexport const colorUiBackgroundSkeletonHighlight = \"#d7dbe0\";\nexport const colorUiBackgroundTooltip = \"#000000\";\nexport const colorUiBackgroundBackdrop = \"#000000\";\nexport const colorUiBackgroundSelectPill = \"#f2f4f7\";\nexport const colorUiBorderLight = \"#f2f4f7\";\nexport const colorUiBorderDefault = \"#ebecf0\";\nexport const colorUiBorderDark = \"#d7dbe0\";\nexport const colorUiBorderFocus = \"#0071ff\";\nexport const colorUiBorderQuote = \"#697687\";\nexport const colorUiFontHead = \"#000000\";\nexport const colorUiFontHeadDark = \"#ffffff\";\nexport const colorUiFontBody = \"#000000\";\nexport const colorUiFontBodyDark = \"#ffffff\";\nexport const colorUiFontMono = \"#000000\";\nexport const colorUiFontMonoDark = \"#ffffff\";\nexport const colorUiFontMuted = \"#697687\";\nexport const colorUiFontQuote = \"#697687\";\nexport const colorUiFontTooltip = \"#ffffff\";\nexport const fontFamilyHead = \"Lato\";\nexport const fontFamilyBody = \"Lato\";\nexport const fontFamilyMono = \"Azeret Mono\";\nexport const fontFamilyEmoji = \"''\";\nexport const fontWeightHead = 500;\nexport const fontWeightBody = 400;\nexport const fontWeightMono = 400;\nexport const fontDecorationLink = \"none\";\nexport const fontDecorationLinkHover = \"underline\";\nexport const fontDecorationLinkButton = \"none\";\nexport const fontDecorationLinkButtonHover = \"none\";\nexport const opacityDisabled = 0.65;\nexport const opacityBackdrop = 0.6;\nexport const opacityTooltip = 1;\nexport const sizeBorderRadiusL = \"0.5rem\";\nexport const sizeBorderRadiusM = \"0.25rem\";\nexport const sizeBorderRadiusS = \"0.125rem\";\nexport const sizeFontHead1 = \"1.75rem\";\nexport const sizeFontHead2 = \"1.5rem\";\nexport const sizeFontHead3 = \"1.25rem\";\nexport const sizeFontHead4 = \"1.125rem\";\nexport const sizeFontHead5 = \"0.9375rem\";\nexport const sizeFontHead6 = \"0.875rem\";\nexport const sizeFontBodyXl = \"1.25rem\";\nexport const sizeFontBodyL = \"1.125rem\";\nexport const sizeFontBodyM = \"0.9375rem\";\nexport const sizeFontBodyS = \"0.875rem\";\nexport const sizeFontBodyXs = \"0.75rem\";\nexport const sizeFontMonoXl = \"1.125rem\";\nexport const sizeFontMonoL = \"0.9375rem\";\nexport const sizeFontMonoM = \"0.875rem\";\nexport const sizeFontMonoS = \"0.75rem\";\nexport const sizeFontMonoXs = \"0.625rem\";\nexport const sizeLineHead1 = \"2rem\";\nexport const sizeLineHead2 = \"1.75rem\";\nexport const sizeLineHead3 = \"1.5rem\";\nexport const sizeLineHead4 = \"1.5rem\";\nexport const sizeLineHead5 = \"1.25rem\";\nexport const sizeLineHead6 = \"1rem\";\nexport const sizeLineBodyXl = \"1.5rem\";\nexport const sizeLineBodyL = \"1.5rem\";\nexport const sizeLineBodyM = \"1.25rem\";\nexport const sizeLineBodyS = \"1rem\";\nexport const sizeLineBodyXs = \"1rem\";\nexport const sizeLineMonoXl = \"1.5rem\";\nexport const sizeLineMonoL = \"1.25rem\";\nexport const sizeLineMonoM = \"1.125rem\";\nexport const sizeLineMonoS = \"1rem\";\nexport const sizeLineMonoXs = \"0.875rem\";\nexport const sizeModalS = \"400rem\";\nexport const sizeModalM = \"600rem\";\nexport const sizeModalL = \"800rem\";\nexport const sizeScreenXs = \"540rem\";\nexport const sizeScreenS = \"768rem\";\nexport const sizeScreenM = \"992rem\";\nexport const sizeScreenL = \"1200rem\";\nexport const sizeScreenXl = \"1400rem\";\nexport const sizeSpacingXl = \"2rem\";\nexport const sizeSpacingL = \"1.5rem\";\nexport const sizeSpacingM = \"1rem\";\nexport const sizeSpacingS = \"0.5rem\";\nexport const sizeSpacingXs = \"0.25rem\";\nexport const timeTransitionL = 500;\nexport const timeTransitionM = 250;\nexport const timeTransitionS = 125;\nexport const timeDelayL = 500;\nexport const timeDelayM = 250;\nexport const timeDelayS = 125;\nexport const timeDurationL = 1000;\nexport const timeDurationM = 500;\nexport const timeDurationS = 250;","@import 'variables';\n@import 'mixins';\n\n$-min-width: 8rem;\n$-max-width: 16rem;\n$-min-height: 2rem;\n$-max-height: calc(100vh - 48px);\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n::slotted(nav) {\n padding-top: $cat-body-margin-bottom 0.5;\n padding-bottom: $cat-body-margin-bottom * 0.5;\n min-width: $-min-width;\n max-width: $-max-width;\n}\n\n.content {\n position: absolute;\n background: cat-token('color.ui.background.body');\n display: none;\n -webkit-overflow-scrolling: touch;\n min-height: $-min-height;\n max-height: $-max-height;\n @include cat-elevation(1);\n border-radius: cat-border-radius('m');\n z-index: $cat-dropdown-z-index;\n opacity: 0;\n transition: transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),\n opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15);\n\n &[data-placement^='top'] {\n transform: translateY(1rem);\n }\n\n &[data-placement^='left'] {\n transform: translateX(1rem);\n }\n\n &[data-placement^='right'] {\n transform: translateX(-1rem);\n }\n\n &[data-placement^='bottom'] {\n transform: translateY(-1rem);\n }\n\n &.show {\n opacity: 1;\n transform: translateX(0);\n transform: translateY(0);\n transition: transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1),\n opacity cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1);\n }\n\n &.overflow-auto {\n overflow: auto;\n }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private keyListener?: (event: KeyboardEvent) => void;\n private isOpen: boolean \| null = false;\n\n /*\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first,\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button click\n if (!this.noAutoClose && event.composedPath().includes(this.content)) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n /\n async open(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.catOpen.emit();\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n !event.composedPath().includes(this.content) &&\n (!this.trigger \|\| !event.composedPath().includes(this.trigger)),\n onPostDeactivate: () => this.close()\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad(): void {\n this.keyListener = event => {\n if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n const activeElement = firstTabbable(document.activeElement);\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].focus();\n event.preventDefault();\n }\n };\n document.addEventListener('keydown', this.keyListener);\n }\n\n disconnectedCallback(): void {\n if (this.keyListener) {\n document.removeEventListener('keydown', this.keyListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n autoUpdate(this.trigger, this.content, () => this.update());\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update() {\n if (this.trigger) {\n computePosition(this.trigger, this.content, {\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip()]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n}\n"],"version":3}

package/dist/components/cat-input.js CHANGED Viewed

@@ -17,7 +17,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-input-${nextUniqueId++}`;
+    this._id = `cat-input-${nextUniqueId++}`;
     this.hasSlottedLabel = false;
     /**
      * Whether the input should show a clear button.
@@ -39,10 +39,6 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
     this.labelHidden = false;
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
     /**
      * The value is not editable.
      */
@@ -60,6 +56,9 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.type = 'text';
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -127,6 +126,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "hint": [1],
     "icon": [1],
     "iconRight": [4, "icon-right"],
+    "identifier": [1],
     "label": [1],
     "labelHidden": [4, "label-hidden"],
     "max": [8],

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

	@@ -1 +1 @@
1	- {"file":"cat-input.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,gkFAAgkF;;ACMplF,IAAI,YAAY,GAAG,CAAC,CAAC;MAkBRA,UAAQ;EALrB;;;;;;;IAMmB,OAAE,GAAG,aAAa,YAAY,EAAE,EAAE,CAAC;IAK3C,oBAAe,GAAG,KAAK,CAAC;;;;IAUzB,cAAS,GAAG,KAAK,CAAC;;;;IAKlB,aAAQ,GAAG,KAAK,CAAC;;;;IAejB,cAAS,GAAG,KAAK,CAAC;;;;IAKlB,UAAK,GAAG,EAAE,CAAC;;;;IAKX,gBAAW,GAAG,KAAK,CAAC;;;;IAyBpB,SAAI,GAAG,EAAE,CAAC;;;;IAoBV,aAAQ,GAAG,KAAK,CAAC;;;;IAKjB,aAAQ,GAAG,KAAK,CAAC;;;;IAKjB,UAAK,GAAG,KAAK,CAAC;;;;IAKd,SAAI,GAAc,MAAM,CAAC;GAmKlC;EA7IC,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxCC,QAAG,CAAC,IAAI,CAAC,oCAAoC,EAAE,IAAI,CAAC,CAAC;KACtD;GACF;;;;;;;;EAUD,MAAM,OAAO,CAAC,OAAsB;IAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC3B;;;;;EAOD,MAAM,MAAM;IACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;GACnB;;;;EAMD,MAAM,OAAO;IACX,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;GACjB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,MAClC,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,IAC1D,YAAM,IAAI,EAAC,OAAO,IACf,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,KAAK,IAAI,CAAC,KAAK,EAClE,CAAC,IAAI,CAAC,QAAQ,KACb,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CC,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,CACI,CACD,CACT,EACD,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;OAChC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAEhC,IAAI,CAAC,UAAU,KACd,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,EACA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY,EACpG,WAAK,KAAK,EAAC,qBAAqB,IAC9B,aACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;QACL,eAAe,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;OAClD,EACD,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,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,GACvB,EACR,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAC7C,kBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,uBAAuB,eAClB,MAAM,EAChB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,gBACFA,eAAI,CAAC,CAAC,CAAC,aAAa,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAClB,CACf,CACG,EACL,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY,EAClG,IAAI,CAAC,UAAU,KACd,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,CACG,EACL,IAAI,CAAC,WAAW,CACZ,EACP;GACH;EAED,IAAY,WAAW;IACrB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzE,QACE,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,MAC1B,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CAC3F,EACD;GACH;EAEO,OAAO,CAAC,KAAY;IAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,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":["CatInput","log","i18n"],"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: 2.5rem;\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.dark');\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.dark');\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n }\n}\n\n:host(.cat-error) {\n .input-wrapper {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg');\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg');\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.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\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 align-items: center;\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: 1.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% - 1rem);\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 as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\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 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 date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\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: InputType = 'text';\n\n /\n The 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 this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. 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 input. 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 input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\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 ({i18n.t('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.min}\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={i18n.t('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}
1	+ {"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"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: 2.5rem;\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.dark');\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.dark');\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n }\n}\n\n:host(.cat-error) {\n .input-wrapper {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg');\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg');\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.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\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 align-items: center;\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: 1.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% - 1rem);\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 as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\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 _id = `cat-input-${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 /\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 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 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 date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\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?: string;\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: InputType = 'text';\n\n /\n The 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 this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. 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 input. 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 input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\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 ({i18n.t('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.min}\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={i18n.t('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}

package/dist/components/cat-label.d.ts ADDED Viewed

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