npm - @haiilo/catalyst - Versions diffs - 5.2.3 → 5.4.0 - Mend

@haiilo/catalyst 5.2.3 → 5.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 (189) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAqB,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAgCxE,MAAM,OAAO,sBAAsB;EAIjC;IACE,mBAAmB;EACrB,CAAC;EAED,MAAM,CAAC,WAAW;IAChB,IAAI,CAAC,sBAAsB,CAAC,QAAQ,EAAE;MACpC,sBAAsB,CAAC,QAAQ,GAAG,IAAI,sBAAsB,EAAE,CAAC;KAChE;IACD,OAAO,sBAAsB,CAAC,QAAQ,CAAC;EACzC,CAAC;EAED,IAAI,CAAC,OAAsB,EAAE,OAA+B;IAC1D,MAAM,GAAG,GAAa,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACrC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;IAClB,KAAK,CAAC,SAAS,EAAE,CAAC;IAClB,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;EACjC,CAAC;EAEO,OAAO,CAAC,OAAsB,EAAE,GAAa,EAAE,OAA+B;;IACpF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG;QACjB,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAAC,CAAC,CAAC,6CAA6C,OAAO,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,EAAE;;;UAIpG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;MACb,CAAC,CAAC,mGAAmG,OAAO,CAAC,MAAM,eAAe;MAClI,CAAC,CAAC,EACN;;QAGA,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,MAAK,KAAK;MAC1B,CAAC,CAAC,~~mJAAmJ~~,IAAI,CAAC,CAAC,~~CACvJ~~,sBAAsB,CACvB,iBAAiB;MACpB,CAAC,CAAC,EACN;WACK,CAAC;IAER,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAgC,CAAC;IAC/D,MAAA,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,GAAG,CAAC,KAAK,0CAAE,SAAS,EAAE,CAAA,EAAA,CAAC,CAAC;IACnG,MAAA,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,wDAAG,GAAG,CAAC,CAAA,EAAA,CAAC,CAAC;IACtG,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAiB,qBAAqB,CAAC,CAAC;IACxE,IAAI,KAAK,EAAE;MACT,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAC/B,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;OAChC;WAAM,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,MAAK,KAAK,EAAE;QAC1C,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;OAC3B;WAAM;QACL,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;OAC3B;KACF;IAED,OAAO,IAAI,CAAC;EACd,CAAC;EAEO,UAAU,CAAC,IAAU,EAAE,GAAa,EAAE,OAA+B;;IAC3E,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,0CAAE,KAAK,CAAC,GAAG,CAAC,mCAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAGhF,CAAC;IACF,MAAM,QAAQ,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,MAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IAC5G,OAAO;MACL,OAAO;MACP,QAAQ;MACR,IAAI;MACJ,QAAQ;MACR,KAAK,EAAE,KAAK;MACZ,SAAS,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gCAAgC;MACxF,WAAW,EAAE,IAAI;MACjB,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,wDAAG,GAAG,CAAC,CAAA,EAAA;MACtC,QAAQ,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,wDAAG,GAAG,CAAC,CAAA,EAAA;MACzC,MAAM,EAAE;QACN,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;OACV;KACF,CAAC;EACJ,CAAC;;AAlFc,+BAAQ,GAAG,IAAI,CAAC;AAqFjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,WAAW,EAAE,CAAC","sourcesContent":["import Toastify, { Options } from 'toastify-js';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\ninterface ToastRef {\n toast?: {\n showToast: () => void;\n hideToast: () => void;\n };\n}\n\nexport interface ToastOptions {\n /** The appearance mode of the notification. (Default: `dark`) /\n mode: 'dark' \| 'light';\n /* An optional icon to appear in the notification. /\n icon: string;\n /* The placement of the notification on screen. (Default: `bottom-left`) /\n placement: 'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right';\n /* Enables auto-closing of the notification. (Default: `true`) /\n autoClose: boolean;\n /* The duration in ms for the notification to be visible on screen. (Default: `3000`) /\n duration: number;\n /* An optional label for an action button. /\n action: string;\n /* Enable markup escape and sanitise HTML input. (Default: true) /\n escapeMarkup: boolean;\n /* Callback executed when the action button is clicked. Receives a reference to the notification as first argument. /\n onAction: (toast: ToastRef) => void;\n /* Callback executed when the notification is clicked. Receives a reference to the notification as first argument. /\n onClick: (toast: ToastRef) => void;\n /* Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\n onDismiss: (toast: ToastRef) => void;\n}\n\nexport class CatNotificationService {\n private static instance: CatNotificationService;\n private static duration = 3000;\n\n private constructor() {\n // hide constructor\n }\n\n static getInstance(): CatNotificationService {\n if (!CatNotificationService.instance) {\n CatNotificationService.instance = new CatNotificationService();\n }\n return CatNotificationService.instance;\n }\n\n show(content: string \| Node, options?: Partial<ToastOptions>): () => void {\n const ref: ToastRef = {};\n const toastContent = this.getNode(content, ref, options);\n const toastOptions = this.getOptions(toastContent, ref, options);\n const toast = Toastify(toastOptions);\n ref.toast = toast;\n toast.showToast();\n return () => toast.hideToast();\n }\n\n private getNode(content: string \| Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {\n const template = document.createElement('template');\n template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n ${options?.icon ? `<cat-icon class=\"cat-toastify-icon\" icon=\"${options.icon}\" size=\"l\"></cat-icon>` : ''}\n <div class=\"cat-toastify-content\">\n <div class=\"cat-toastify-inner\"></div>\n ${\n options?.action\n ? `<cat-button class=\"cat-toastify-action cat-button-pull\" size=\"s\" variant=\"text\" color=\"primary\">${options.action}</cat-button>`\n : ''\n }\n </div>\n ${\n options?.autoClose === false\n ? `<cat-button class=\"cat-toastify-close cat-button-pull\" size=\"s\" icon=\"~~cross~~-~~outlined~~\" variant=\"text\" icon-only=\"true\" class=\"close\" a11y-label=\"${i18n.t(\n 'notification.dismiss'\n )}\"></cat-button>`\n : ''\n }\n </div>`;\n\n const node = template.content.firstElementChild as HTMLElement;\n node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());\n node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(ref));\n const inner = node.querySelector<HTMLDivElement>('.cat-toastify-inner');\n if (inner) {\n if (typeof content !== 'string') {\n inner.replaceChildren(content);\n } else if (options?.escapeMarkup === false) {\n inner.innerHTML = content;\n } else {\n inner.innerText = content;\n }\n }\n\n return node;\n }\n\n private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {\n const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']) as [\n Options['gravity'],\n Options['position']\n ];\n const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);\n return {\n gravity,\n position,\n node,\n duration,\n close: false,\n className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',\n stopOnFocus: true,\n onClick: () => options?.onClick?.(ref),\n callback: () => options?.onDismiss?.(ref),\n offset: {\n x: '1rem',\n y: '1rem'\n }\n };\n }\n}\n\nexport const catNotificationService = CatNotificationService.getInstance();\n"]}
1	+ {"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\ninterface ToastRef {\n toast?: {\n showToast: () => void;\n hideToast: () => void;\n };\n}\n\nexport interface ToastOptions {\n /** The appearance mode of the notification. (Default: `dark`) /\n mode: 'dark' \| 'light';\n /* An optional icon to appear in the notification. /\n icon: string;\n /* The placement of the notification on screen. (Default: `bottom-left`) /\n placement: 'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right';\n /* Enables auto-closing of the notification. (Default: `true`) /\n autoClose: boolean;\n /* The duration in ms for the notification to be visible on screen. (Default: `3000`) /\n duration: number;\n /* An optional label for an action button. /\n action: string;\n /* Enable markup escape and sanitise HTML input. (Default: true) /\n escapeMarkup: boolean;\n /* Callback executed when the action button is clicked. Receives a reference to the notification as first argument. /\n onAction: (toast: ToastRef) => void;\n /* Callback executed when the notification is clicked. Receives a reference to the notification as first argument. /\n onClick: (toast: ToastRef) => void;\n /* Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\n onDismiss: (toast: ToastRef) => void;\n}\n\nexport class CatNotificationService {\n private static instance: CatNotificationService;\n private static duration = 3000;\n\n private constructor() {\n // hide constructor\n }\n\n static getInstance(): CatNotificationService {\n if (!CatNotificationService.instance) {\n CatNotificationService.instance = new CatNotificationService();\n }\n return CatNotificationService.instance;\n }\n\n show(content: string \| Node, options?: Partial<ToastOptions>): () => void {\n const ref: ToastRef = {};\n const toastContent = this.getNode(content, ref, options);\n const toastOptions = this.getOptions(toastContent, ref, options);\n const toast = Toastify(toastOptions);\n ref.toast = toast;\n toast.showToast();\n return () => toast.hideToast();\n }\n\n private getNode(content: string \| Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {\n const template = document.createElement('template');\n template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n ${options?.icon ? `<cat-icon class=\"cat-toastify-icon\" icon=\"${options.icon}\" size=\"l\"></cat-icon>` : ''}\n <div class=\"cat-toastify-content\">\n <div class=\"cat-toastify-inner\"></div>\n ${\n options?.action\n ? `<cat-button class=\"cat-toastify-action cat-button-pull\" size=\"s\" variant=\"text\" color=\"primary\">${options.action}</cat-button>`\n : ''\n }\n </div>\n ${\n options?.autoClose === false\n ? `<cat-button class=\"cat-toastify-close cat-button-pull\" size=\"s\" icon=\"$cat:notification-close\" variant=\"text\" icon-only=\"true\" class=\"close\" a11y-label=\"${i18n.t(\n 'notification.dismiss'\n )}\"></cat-button>`\n : ''\n }\n </div>`;\n\n const node = template.content.firstElementChild as HTMLElement;\n node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());\n node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(ref));\n const inner = node.querySelector<HTMLDivElement>('.cat-toastify-inner');\n if (inner) {\n if (typeof content !== 'string') {\n inner.replaceChildren(content);\n } else if (options?.escapeMarkup === false) {\n inner.innerHTML = content;\n } else {\n inner.innerText = content;\n }\n }\n\n return node;\n }\n\n private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {\n const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']) as [\n Options['gravity'],\n Options['position']\n ];\n const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);\n return {\n gravity,\n position,\n node,\n duration,\n close: false,\n className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',\n stopOnFocus: true,\n onClick: () => options?.onClick?.(ref),\n callback: () => options?.onDismiss?.(ref),\n offset: {\n x: '1rem',\n y: '1rem'\n }\n };\n }\n}\n\nexport const catNotificationService = CatNotificationService.getInstance();\n"]}

package/dist/collection/components/cat-pagination/cat-pagination.js CHANGED Viewed

@@ -17,13 +17,13 @@ export class CatPagination {
     this.variant = 'text';
     this.round = false;
     this.compact = false;
-    this.iconPrev = 'chevron-left-outlined';
-    this.iconNext = 'chevron-right-outlined';
+    this.iconPrev = '$cat:pagination-left';
+    this.iconNext = '$cat:pagination-right';
   }
   render() {
     return (h("nav", { role: "navigation" }, h("ol", { class: {
         [`cat-pagination-${this.size}`]: Boolean(this.size)
-      } }, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => (this.page = this.page - 1) })), this.content, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => (this.page = this.page + 1) })))));
+      } }, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
   }
   get isFirst() {
     return this.page === 0;
@@ -31,6 +31,10 @@ export class CatPagination {
   get isLast() {
     return this.page === this.pageCount - 1;
   }
+  setPage(value) {
+    this.page = value;
+    this.catChange.emit(this.page);
+  }
   get pages() {
     if (!this.sidePadding && !this.activePadding) {
       return [this.page];
@@ -65,7 +69,7 @@ export class CatPagination {
     }
     return this.pages.map((page, i) => [
       i > 0 && this.pages[i - 1] !== page - 1 ? h("li", { class: "dots" }, "\u2026") : null,
-      h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: i18n.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => (this.page = page) }, page + 1))
+      h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: i18n.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => this.setPage(page) }, page + 1))
     ]);
   }
   static get is() { return "cat-pagination"; }
@@ -242,7 +246,7 @@ export class CatPagination {
         },
         "attribute": "icon-prev",
         "reflect": false,
-        "defaultValue": "'chevron-left-outlined'"
+        "defaultValue": "'$cat:pagination-left'"
       },
       "iconNext": {
         "type": "string",
@@ -260,9 +264,27 @@ export class CatPagination {
         },
         "attribute": "icon-next",
         "reflect": false,
-        "defaultValue": "'chevron-right-outlined'"
+        "defaultValue": "'$cat:pagination-right'"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "catChange",
+        "name": "catChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the page of the pagination has changed."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }
 //# sourceMappingURL=cat-pagination.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AACnD~~,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;;;;;GAMG;AAMH,MAAM,OAAO,aAAa;;gBAIQ,CAAC;qBAKb,CAAC;yBAKG,CAAC;uBAKH,CAAC;gBAKuB,GAAG;mBAKC,MAAM;iBAKxC,KAAK;mBAKH,KAAK;oBAKJ,~~uBAAuB~~;~~oBAKvB~~,~~wBAAwB~~;;~~EAE3C~~,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,YAAY;MACpB,UACE,KAAK,EAAE;UACL,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;SACpD;QAED;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,OAAO,EACtB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,~~CAAC,~~IAAI,CAAC,~~IAAI~~,~~GAAG~~,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAC9B,CACX;QACJ,IAAI,CAAC,OAAO;QACb;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,~~CAAC,~~IAAI,CAAC,~~IAAI~~,~~GAAG~~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~~CAAC,~~IAAI,CAAC,~~IAAI~~,~~GAAG~~,IAAI,CAAC,IAEhC,IAAI,GAAG,CAAC,CACE,CACV;KACN,CAAC,CAAC;EACL,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n /\n@Component({\n tag: 'cat-pagination',\n styleUrl: 'cat-pagination.scss',\n shadow: true\n})\nexport class CatPagination {\n /\n The current page.\n /\n @Prop({ mutable: true }) page = 0;\n\n /\n The total number of pages.\n /\n @Prop() pageCount = 1;\n\n /\n The number of pages to be shown around the current page.\n /\n @Prop() activePadding = 1;\n\n /\n The number of pages to be shown at the edges.\n /\n @Prop() sidePadding = 1;\n\n /\n The size of the buttons.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The rendering style of the buttons.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'text';\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n Use compact pagination mode.\n /\n @Prop() compact = false;\n\n /\n The icon of the \"previous\" button.\n /\n @Prop() iconPrev = '~~chevron~~-left~~-outlined~~';\n\n /\n The icon of the \"next\" button.\n /\n @Prop() iconNext = '~~chevron~~-right~~-outlined~~';\n\n render() {\n return (\n <nav role=\"navigation\">\n <ol\n class={{\n [`cat-pagination-${this.size}`]: Boolean(this.size)\n }}\n >\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isFirst}\n a11yLabel={i18n.t('pagination.prev')}\n icon={this.iconPrev}\n iconOnly\n onClick={() => (this.~~page =~~ this.page - 1)}\n ></cat-button>\n </li>\n {this.content}\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isLast}\n a11yLabel={i18n.t('pagination.next')}\n icon={this.iconNext}\n iconOnly\n onClick={() => (this.~~page =~~ this.page + 1)}\n ></cat-button>\n </li>\n </ol>\n </nav>\n );\n }\n\n get isFirst() {\n return this.page === 0;\n }\n\n get isLast() {\n return this.page === this.pageCount - 1;\n }\n\n get pages() {\n if (!this.sidePadding && !this.activePadding) {\n return [this.page];\n }\n\n const result = new Set<number>();\n const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n const minActivepage = minPage ? this.sidePadding + 2 this.activePadding + 2 : this.sidePadding;\n const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n const maxActivepage = maxPage\n ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n : this.pageCount - this.sidePadding;\n\n this.addSeq(result, 0, minActivepage);\n if (!minPage && !maxPage) {\n this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n }\n this.addSeq(result, maxActivepage, this.pageCount);\n\n return [...result];\n }\n\n private addSeq(set: Set<number>, start: number, end: number) {\n const _start = this.clamp(start, 0, this.pageCount);\n const _end = this.clamp(end, 0, this.pageCount);\n Array(_end - _start)\n .fill(0)\n .forEach((_, i) => set.add(_start + i));\n }\n\n private clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max);\n }\n\n private get content() {\n if (this.compact) {\n return (\n <li class=\"text\">\n {this.page + 1}/{this.pageCount}\n </li>\n );\n }\n\n return this.pages.map((page, i) => [\n i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n color={this.page === page ? 'primary' : undefined}\n active={this.page === page}\n a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n a11yCurrent={this.page === page ? 'step' : undefined}\n onClick={() => (this.page ~~= page~~)}\n >\n {page + 1}\n </cat-button>\n </li>\n ]);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;;;;;GAMG;AAMH,MAAM,OAAO,aAAa;;gBAIQ,CAAC;qBAKb,CAAC;yBAKG,CAAC;uBAKH,CAAC;gBAKuB,GAAG;mBAKC,MAAM;iBAKxC,KAAK;mBAKH,KAAK;oBAKJ,sBAAsB;oBAKtB,uBAAuB;;EAO1C,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,YAAY;MACpB,UACE,KAAK,EAAE;UACL,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;SACpD;QAED;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,OAAO,EACtB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAC9B,CACX;QACJ,IAAI,CAAC,OAAO;QACb;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAC9B,CACX,CACF,CACD,CACP,CAAC;EACJ,CAAC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC;EACzB,CAAC;EAED,IAAI,MAAM;IACR,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;EAC1C,CAAC;EAEO,OAAO,CAAC,KAAa;IAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACjC,CAAC;EAED,IAAI,KAAK;IACP,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC5C,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpB;IAED,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;IACjC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACjG,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACxF,MAAM,aAAa,GAAG,OAAO;MAC3B,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC;MAChE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;IAEtC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC;IACtC,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;MACxB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;KACzF;IACD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAEnD,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;EACrB,CAAC;EAEO,MAAM,CAAC,GAAgB,EAAE,KAAa,EAAE,GAAW;IACzD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAChD,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;OACjB,IAAI,CAAC,CAAC,CAAC;OACP,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;EAC5C,CAAC;EAEO,KAAK,CAAC,GAAW,EAAE,GAAW,EAAE,GAAW;IACjD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;EAC3C,CAAC;EAED,IAAY,OAAO;IACjB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,OAAO,CACL,UAAI,KAAK,EAAC,MAAM;QACb,IAAI,CAAC,IAAI,GAAG,CAAC;;QAAG,IAAI,CAAC,SAAS,CAC5B,CACN,CAAC;KACH;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;MACjC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,UAAI,KAAK,EAAC,MAAM,aAAO,CAAC,CAAC,CAAC,IAAI;MACxE;QACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EAC1B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC,EACxD,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAEhC,IAAI,GAAG,CAAC,CACE,CACV;KACN,CAAC,CAAC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n /\n@Component({\n tag: 'cat-pagination',\n styleUrl: 'cat-pagination.scss',\n shadow: true\n})\nexport class CatPagination {\n /\n The current page.\n /\n @Prop({ mutable: true }) page = 0;\n\n /\n The total number of pages.\n /\n @Prop() pageCount = 1;\n\n /\n The number of pages to be shown around the current page.\n /\n @Prop() activePadding = 1;\n\n /\n The number of pages to be shown at the edges.\n /\n @Prop() sidePadding = 1;\n\n /\n The size of the buttons.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The rendering style of the buttons.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'text';\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n Use compact pagination mode.\n /\n @Prop() compact = false;\n\n /\n The icon of the \"previous\" button.\n /\n @Prop() iconPrev = '$cat:pagination-left';\n\n /\n The icon of the \"next\" button.\n /\n @Prop() iconNext = '$cat:pagination-right';\n\n /\n Emitted when the page of the pagination has changed.\n /\n @Event() catChange!: EventEmitter;\n\n render() {\n return (\n <nav role=\"navigation\">\n <ol\n class={{\n [`cat-pagination-${this.size}`]: Boolean(this.size)\n }}\n >\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isFirst}\n a11yLabel={i18n.t('pagination.prev')}\n icon={this.iconPrev}\n iconOnly\n onClick={() => this.setPage(this.page - 1)}\n ></cat-button>\n </li>\n {this.content}\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isLast}\n a11yLabel={i18n.t('pagination.next')}\n icon={this.iconNext}\n iconOnly\n onClick={() => this.setPage(this.page + 1)}\n ></cat-button>\n </li>\n </ol>\n </nav>\n );\n }\n\n get isFirst() {\n return this.page === 0;\n }\n\n get isLast() {\n return this.page === this.pageCount - 1;\n }\n\n private setPage(value: number) {\n this.page = value;\n this.catChange.emit(this.page);\n }\n\n get pages() {\n if (!this.sidePadding && !this.activePadding) {\n return [this.page];\n }\n\n const result = new Set<number>();\n const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n const minActivepage = minPage ? this.sidePadding + 2 this.activePadding + 2 : this.sidePadding;\n const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n const maxActivepage = maxPage\n ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n : this.pageCount - this.sidePadding;\n\n this.addSeq(result, 0, minActivepage);\n if (!minPage && !maxPage) {\n this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n }\n this.addSeq(result, maxActivepage, this.pageCount);\n\n return [...result];\n }\n\n private addSeq(set: Set<number>, start: number, end: number) {\n const _start = this.clamp(start, 0, this.pageCount);\n const _end = this.clamp(end, 0, this.pageCount);\n Array(_end - _start)\n .fill(0)\n .forEach((_, i) => set.add(_start + i));\n }\n\n private clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max);\n }\n\n private get content() {\n if (this.compact) {\n return (\n <li class=\"text\">\n {this.page + 1}/{this.pageCount}\n </li>\n );\n }\n\n return this.pages.map((page, i) => [\n i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n color={this.page === page ? 'primary' : undefined}\n active={this.page === page}\n a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n a11yCurrent={this.page === page ? 'step' : undefined}\n onClick={() => this.setPage(page)}\n >\n {page + 1}\n </cat-button>\n </li>\n ]);\n }\n}\n"]}

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

@@ -12,11 +12,30 @@
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
+.hint-wrapper {
+  flex: 0 1 auto;
+  display: flex;
+  gap: 0.5rem;
+}
+.hint-section {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.input-hint,
+::slotted([slot=hint]) {
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
+  line-height: 1.5;
+  flex: 1 1 auto;
+  min-width: 0;
+}
 :host {
   display: flex;
   flex-direction: column;
@@ -47,6 +66,10 @@ label {
   align-self: flex-start;
 }
+.circle-placeholder {
+  width: calc(1.25rem + 1px);
+}
 .circle {
   position: absolute;
   width: 0.75rem;

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

@@ -61,7 +61,7 @@ export class CatRadio {
     this.input.click();
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) }))));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
   }
   onChange(event) {
     this.checked = true;
@@ -298,9 +298,13 @@ export class CatRadio {
           "text": "Emitted when the radio is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "catFocus",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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~~CAC7G~~,CACI,CACR,CAAC;EACJ,CAAC;EAEO,QAAQ,CAAC,KAAiB;IAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, 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 Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\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 /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: true\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++nextUniqueId}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\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 radio that is visible.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n @Prop() value?: string;\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\n /\n @Prop() labelLeft = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the radio is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on radio', this);\n }\n }\n\n /\n Programmatically move focus to the radio button. 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 radio button. Use this method\n * instead of `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the radio button.\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 role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onChange.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {(this.hint \|\| this.hasSlottedHint) && (\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n )}\n </Host>\n );\n }\n\n private onChange(event: InputEvent) {\n this.checked = true;\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-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.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 Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\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 /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: true\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++nextUniqueId}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\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 radio that is visible.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n @Prop() value?: string;\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\n /\n @Prop() labelLeft = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the radio is changed.\n /\n @Event() catChange!: EventEmitter<InputEvent>;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on radio', this);\n }\n }\n\n /\n Programmatically move focus to the radio button. 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 radio button. Use this method\n * instead of `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the radio button.\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 role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onChange.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {(this.hint \|\| this.hasSlottedHint) && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"circle-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private onChange(event: InputEvent) {\n this.checked = true;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}

package/dist/collection/components/cat-radio-group/cat-radio-group.js CHANGED Viewed

@@ -185,9 +185,13 @@ export class CatRadioGroup {
           "text": "Emitted when the value is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "catBlur",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/*\n A group of radio buttons.\n /\n@Component({\n tag: 'cat-radio-group',\n styleUrl: 'cat-radio-group.scss',\n shadow: true\n})\nexport class CatRadioGroup {\n private catRadioGroup: HTMLCatRadioElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /\n The name of the radio group component.\n /\n @Prop() name?: string;\n\n /\n The value of the radio group.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n Whether this radio group is disabled.\n /\n @Prop() disabled = false;\n\n /\n Adds an accessible label for the radio group that\n * it is only shown in assistive technologies, like screen readers.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Whether the label of the radios should appear to the left of them.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the radio group loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n @Watch('name')\n onNameChanged(newName?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n }\n\n @Watch('value')\n onValueChanged(newValue?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n this.updateTabIndex();\n }\n\n @Watch('disabled')\n onDisabledChanged(disabled: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n }\n\n @Watch('labelLeft')\n onLabelLeftChanged(labelLeft: boolean) {\n this.catRadioGroup.forEach(catRadio => {\n if (labelLeft) {\n catRadio.labelLeft = labelLeft;\n }\n });\n }\n\n componentDidLoad(): void {\n this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n this.onNameChanged(this.name);\n this.onValueChanged(this.value);\n this.onDisabledChanged(this.disabled);\n this.onLabelLeftChanged(this.labelLeft);\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n const activeElement = document.activeElement as HTMLCatRadioElement;\n const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n this.updateTabIndex();\n event.preventDefault();\n }\n }\n\n @Listen('input')\n onInput(event: MouseEvent): void {\n const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n this.value = catRadioElement?.value;\n this.catChange.emit();\n }\n\n @Listen('blur', { capture: true })\n onBlur(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n render() {\n return (\n <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n <slot></slot>\n </div>\n );\n }\n\n private updateTabIndex() {\n if (this.catRadioGroup.length) {\n this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n ?.querySelector('input')\n ?.setAttribute('tabindex', '0');\n }\n }\n}\n"]}
1	+ {"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/*\n A group of radio buttons.\n /\n@Component({\n tag: 'cat-radio-group',\n styleUrl: 'cat-radio-group.scss',\n shadow: true\n})\nexport class CatRadioGroup {\n private catRadioGroup: HTMLCatRadioElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /\n The name of the radio group component.\n /\n @Prop() name?: string;\n\n /\n The value of the radio group.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n Whether this radio group is disabled.\n /\n @Prop() disabled = false;\n\n /\n Adds an accessible label for the radio group that\n * it is only shown in assistive technologies, like screen readers.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Whether the label of the radios should appear to the left of them.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<InputEvent>;\n\n /\n Emitted when the radio group loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n @Watch('name')\n onNameChanged(newName?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n }\n\n @Watch('value')\n onValueChanged(newValue?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n this.updateTabIndex();\n }\n\n @Watch('disabled')\n onDisabledChanged(disabled: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n }\n\n @Watch('labelLeft')\n onLabelLeftChanged(labelLeft: boolean) {\n this.catRadioGroup.forEach(catRadio => {\n if (labelLeft) {\n catRadio.labelLeft = labelLeft;\n }\n });\n }\n\n componentDidLoad(): void {\n this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n this.onNameChanged(this.name);\n this.onValueChanged(this.value);\n this.onDisabledChanged(this.disabled);\n this.onLabelLeftChanged(this.labelLeft);\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n const activeElement = document.activeElement as HTMLCatRadioElement;\n const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n this.updateTabIndex();\n event.preventDefault();\n }\n }\n\n @Listen('input')\n onInput(event: MouseEvent): void {\n const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n this.value = catRadioElement?.value;\n this.catChange.emit();\n }\n\n @Listen('blur', { capture: true })\n onBlur(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n render() {\n return (\n <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n <slot></slot>\n </div>\n );\n }\n\n private updateTabIndex() {\n if (this.catRadioGroup.length) {\n this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n ?.querySelector('input')\n ?.setAttribute('tabindex', '0');\n }\n }\n}\n"]}

package/dist/collection/components/cat-scrollable/cat-scrollable.css CHANGED Viewed

@@ -42,10 +42,7 @@
 .scrollable-wrapper {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   pointer-events: none;
 }
 .scrollable-wrapper.cat-scrollable-top .shadow-top, .scrollable-wrapper.cat-scrollable-bottom .shadow-bottom, .scrollable-wrapper.cat-scrollable-left .shadow-left, .scrollable-wrapper.cat-scrollable-right .shadow-right {

package/dist/collection/components/cat-select/cat-select.css CHANGED Viewed

@@ -12,7 +12,7 @@
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
@@ -251,6 +251,83 @@
   text-decoration: inherit !important;
 }
+.label {
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+.label-container {
+  flex-basis: var(--label-size, 33.33%);
+}
+.label-container.hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+.label-container .label-wrapper {
+  display: flex;
+  gap: 0.25rem;
+}
+.label-metadata {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  justify-content: space-between;
+  gap: 0.25rem;
+}
+.label-optional {
+  display: flex;
+  align-items: center;
+  max-height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
+}
+.label-character-count {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  max-height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
+}
+.input-horizontal .label-wrapper,
+.textarea-horizontal .label-wrapper,
+.select-horizontal .label-wrapper {
+  flex-direction: column;
+}
+.input-horizontal label,
+.textarea-horizontal label,
+.select-horizontal label {
+  min-height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+}
+.input-horizontal .label-metadata,
+.textarea-horizontal .label-metadata,
+.select-horizontal .label-metadata {
+  justify-content: flex-start;
+}
+.input-horizontal .label-metadata .label-character-count,
+.textarea-horizontal .label-metadata .label-character-count,
+.select-horizontal .label-metadata .label-character-count {
+  margin-left: 0;
+}
 :host {
   display: flex;
   flex-direction: column;
@@ -279,6 +356,19 @@ label.hidden {
   border: 0 !important;
 }
+.select-field,
+.select-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1 1 auto;
+}
+.select-field.select-horizontal {
+  flex-direction: row;
+  gap: 1rem;
+}
 .input-optional {
   margin-left: 0.25rem;
   font-size: 0.75rem;
@@ -292,26 +382,22 @@ label.hidden {
   align-items: flex-start;
   background: white;
   border-radius: var(--cat-border-radius-m, 0.25rem);
-  box-shadow: 0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color));
   transition: box-shadow 0.13s linear;
   padding: 0.25rem;
+  --border-color: var(--cat-border-color-dark, 215, 219, 224);
   /* stylelint-disable property-no-vendor-prefix */
   /* stylelint-enable property-no-vendor-prefix */
 }
 .select-wrapper:not(.select-disabled):hover {
-  box-shadow: 0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224));
-}
-.select-wrapper:not(.select-disabled):hover.select-invalid {
-  box-shadow: 0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color));
 }
-.select-wrapper:not(.select-disabled):focus-within {
+.select-wrapper:focus-within {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
-}
-.select-wrapper:not(.select-disabled):focus-within.select-invalid {
-  outline: 2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  outline-offset: -1px;
 }
 .select-wrapper.select-invalid {
-  box-shadow: 0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  --border-color: var(--cat-danger-bg, 217, 52, 13), 0.2;
 }
 .select-wrapper:has(input:-webkit-autofill), .select-wrapper:has(input:-webkit-autofill):hover, .select-wrapper:has(input:-webkit-autofill):focus {
   background-color: #e8f0fe;
@@ -419,6 +505,7 @@ cat-spinner {
   overflow: auto;
   box-shadow: 0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);
   border-radius: var(--cat-border-radius-m, 0.25rem);
+  border: 1px solid rgb(var(--cat-border-color, 235, 236, 240));
   z-index: 100;
 }