@haiilo/catalyst 1.2.1 → 1.2.2

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

@@ -7,7 +7,7 @@
   display: flex;
   gap: 0.5rem;
   padding: 1.25rem;
-  border-radius: 0.5rem;
+  border-radius: var(--cat-border-radius-l, 0.5rem);
   margin-bottom: 1rem;
 }
 
@@ -36,28 +36,28 @@
 }
 
 :host([color=secondary]) {
-  background-color: rgba(105, 118, 135, 0.1);
+  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(0, 132, 88, 0.1);
+  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(255, 206, 128, 0.1);
+  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(217, 52, 13, 0.1);
+  background-color: rgba(var(--cat-danger-bg, 217, 52, 13), 0.1);
 }
 :host([color=danger]) cat-icon {
   color: #d9340d;

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

@@ -21,7 +21,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
   text-decoration: inherit;
   color: var(--cat-avatar-fill, white);
   background-color: var(--cat-avatar-bg, #697687);

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

@@ -13,7 +13,7 @@
   vertical-align: baseline;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
   text-decoration: none;
   line-height: 1.5;
 }
@@ -52,31 +52,31 @@
 }
 
 :host([color=secondary]) {
-  --bg: 105, 118, 135;
-  --fill: 255, 255, 255;
-  --text: 0, 0, 0;
-  --border: 105, 118, 135;
+  --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: 0, 132, 88;
-  --fill: 255, 255, 255;
-  --text: 0, 132, 88;
-  --border: 0, 132, 88;
+  --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: 255, 206, 128;
-  --fill: 0, 0, 0;
-  --text: 159, 97, 0;
-  --border: 159, 97, 0;
+  --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: 217, 52, 13;
-  --fill: 255, 255, 255;
-  --text: 217, 52, 13;
-  --border: 217, 52, 13;
+  --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]) {

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

@@ -25,7 +25,7 @@
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
   text-decoration: none;
   width: 100%;
   box-sizing: border-box;
@@ -51,8 +51,7 @@
 
 .cat-button-disabled {
   cursor: not-allowed;
-  opacity: 0.65;
-  filter: grayscale(100%);
+  opacity: var(--cat-opacity-disabled, 0.65);
 }
 
 .cat-button-round {
@@ -76,12 +75,20 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: greyscale;
 }
+.cat-button-filled.cat-button-disabled {
+  --bg: 235, 236, 240;
+  --fill: var(--cat-font-color-muted, 105, 118, 135);
+}
 
 .cat-button-outlined {
   background-color: white;
   box-shadow: inset 0 0 0 1px rgba(var(--base), 0.2);
   color: rgb(var(--text));
 }
+.cat-button-outlined.cat-button-disabled {
+  --base: var(--cat-font-color-muted, 105, 118, 135);
+  --text: var(--cat-font-color-muted, 105, 118, 135);
+}
 .cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading), .cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
   background-color: rgba(var(--base), 0.05);
 }
@@ -94,6 +101,9 @@
   color: rgb(var(--text));
   text-decoration: none;
 }
+.cat-button-text.cat-button-disabled {
+  --text: var(--cat-font-color-muted, 105, 118, 135);
+}
 .cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading), .cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
   text-decoration: none;
   background-color: rgba(var(--base), 0.05);
@@ -117,71 +127,71 @@
 }
 
 .cat-button-secondary {
-  --bg: 105, 118, 135;
-  --fill: 255, 255, 255;
-  --text: 0, 0, 0;
-  --base: 105, 118, 135;
+  --bg: var(--cat-secondary-bg, 105, 118, 135);
+  --fill: var(--cat-secondary-fill, 255, 255, 255);
+  --text: var(--cat-secondary-text, 0, 0, 0);
+  --base: var(--cat-secondary-bg, 105, 118, 135);
 }
 .cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 105, 118, 135;
-  --fill: 255, 255, 255;
-  --text: 0, 0, 0;
+  --bg: var(--cat-secondary-bg-hover, 105, 118, 135);
+  --fill: var(--cat-secondary-fill-hover, 255, 255, 255);
+  --text: var(--cat-secondary-text-hover, 0, 0, 0);
 }
 .cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), .cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 105, 118, 135;
-  --fill: 255, 255, 255;
-  --text: 0, 0, 0;
+  --bg: var(--cat-secondary-bg-active, 105, 118, 135);
+  --fill: var(--cat-secondary-fill-active, 255, 255, 255);
+  --text: var(--cat-catsecondary-text-active, 0, 0, 0);
 }
 
 .cat-button-success {
-  --bg: 0, 132, 88;
-  --fill: 255, 255, 255;
-  --text: 0, 132, 88;
-  --base: 0, 132, 88;
+  --bg: var(--cat-success-bg-, 0, 132, 88);
+  --fill: var(--cat-success-fill, 255, 255, 255);
+  --text: var(--cat-success-text, 0, 132, 88);
+  --base: var(--cat-success-text, 0, 132, 88);
 }
 .cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 0, 117, 78;
-  --fill: 255, 255, 255;
-  --text: 0, 117, 78;
+  --bg: var(--cat-success-bg-hover, 0, 117, 78);
+  --fill: var(--cat-success-fill-hover, 255, 255, 255);
+  --text: var(--cat-success-text-hover, 0, 117, 78);
 }
 .cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), .cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 0, 105, 70;
-  --fill: 255, 255, 255;
-  --text: 0, 105, 70;
+  --bg: var(--cat-success-bg-active, 0, 105, 70);
+  --fill: var(--cat-success-fill-active, 255, 255, 255);
+  --text: var(--cat-success-text-active, 0, 105, 70);
 }
 
 .cat-button-warning {
-  --bg: 255, 206, 128;
-  --fill: 0, 0, 0;
-  --text: 159, 97, 0;
-  --base: 159, 97, 0;
+  --bg: var(--cat-warning-bg, 255, 206, 128);
+  --fill: var(--cat-warning-fill, 0, 0, 0);
+  --text: var(--cat-warning-text, 159, 97, 0);
+  --base: var(--cat-warning-text, 159, 97, 0);
 }
 .cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 255, 214, 148;
-  --fill: 0, 0, 0;
-  --text: 159, 97, 0;
+  --bg: var(--cat-warning-bg-hover, 255, 214, 148);
+  --fill: var(--cat-warning-fill-hover, 0, 0, 0);
+  --text: var(--cat-warning-text-hover, 159, 97, 0);
 }
 .cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), .cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 255, 222, 168;
-  --fill: 0, 0, 0;
-  --text: 159, 97, 0;
+  --bg: var(--cat-warning-bg-active, 255, 222, 168);
+  --fill: var(--cat-warning-fill-active, 0, 0, 0);
+  --text: var(--cat-warning-text-active, 159, 97, 0);
 }
 
 .cat-button-danger {
-  --bg: 217, 52, 13;
-  --fill: 255, 255, 255;
-  --text: 217, 52, 13;
-  --base: 217, 52, 13;
+  --bg: var(--cat-danger-bg, 217, 52, 13);
+  --fill: var(--cat-danger-fill, 255, 255, 255);
+  --text: var(--cat-danger-text, 217, 52, 13);
+  --base: var(--cat-danger-text, 217, 52, 13);
 }
 .cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 194, 46, 11;
-  --fill: 255, 255, 255;
-  --text: 194, 46, 11;
+  --bg: var(--cat-danger-bg-hover, 194, 46, 11);
+  --fill: var(--cat-danger-fill-hover, 255, 255, 255);
+  --text: var(--cat-danger-text-hover, 194, 46, 11);
 }
 .cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), .cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading) {
-  --bg: 174, 42, 10;
-  --fill: 255, 255, 255;
-  --text: 174, 42, 10;
+  --bg: var(--cat-danger-bg-active, 174, 42, 10);
+  --fill: var(--cat-danger-fill-active, 255, 255, 255);
+  --text: var(--cat-catdanger-text-active, 174, 42, 10);
 }
 
 :host(.cat-button-pull:not([size])) {

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

@@ -6,7 +6,7 @@
 :host {
   display: block;
   margin-bottom: 1rem;
-  border-radius: 0.5rem;
+  border-radius: var(--cat-border-radius-l, 0.5rem);
   background-color: white;
   padding: 1.25rem;
 }

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

@@ -17,7 +17,7 @@
 }
 
 :host-context(.cat-error) .hint-section {
-  color: #d9340d;
+  color: rgb(var(--cat-danger-text, 217, 52, 13));
 }
 
 :host {
@@ -73,8 +73,8 @@ input {
   height: 1.25rem;
   width: 1.25rem;
   background-color: white;
-  border: 1px solid #d7dbe0;
-  border-radius: 0.125rem;
+  border: 1px solid rgb(var(--cat-border-color-focus, 215, 219, 224));
+  border-radius: var(--cat-border-radius-s, 0.125rem);
   transition: background-color 0.13s ease, border-color 0.13s ease;
   pointer-events: none;
 }
@@ -114,13 +114,13 @@ input {
 }
 
 :host(.cat-error) .box {
-  border: 1px solid #d9340d;
+  border: 1px solid rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 :host(.cat-error) :checked + .box,
 :host(.cat-error) :indeterminate + .box {
-  background-color: #d9340d;
-  border-color: #d9340d;
-  stroke: white;
+  background-color: rgb(var(--cat-danger-bg, 217, 52, 13));
+  border-color: rgb(var(--cat-danger-bg, 217, 52, 13));
+  stroke: rgb(var(--cat-danger-fill, 255, 255, 255));
 }
 
 .label {

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

@@ -17,7 +17,7 @@
 }
 
 :host-context(.cat-error) .hint-section {
-  color: #d9340d;
+  color: rgb(var(--cat-danger-text, 217, 52, 13));
 }
 
 :host {
@@ -42,8 +42,8 @@
   height: 2.5rem;
   overflow: hidden;
   background: white;
-  border-radius: 0.25rem;
-  box-shadow: 0 0 0 1px #d7dbe0;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
+  box-shadow: 0 0 0 1px rgb(var(--cat-border-color-focus, 215, 219, 224));
   transition: box-shadow 0.13s linear;
 }
 .input-wrapper.input-round {
@@ -55,17 +55,17 @@
   color: rgb(var(--cat-font-color-muted, 105, 118, 135));
 }
 .input-wrapper:not(.input-disabled):hover {
-  box-shadow: 0 0 0 2px #d7dbe0;
+  box-shadow: 0 0 0 2px rgb(var(--cat-border-color-focus, 215, 219, 224));
 }
 .input-wrapper:not(.input-disabled):focus-within {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
 }
 
 :host(.cat-error) .input-wrapper {
-  box-shadow: 0 0 0 1px #d9340d;
+  box-shadow: 0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 :host(.cat-error) .input-wrapper:not(.input-disabled):hover {
-  box-shadow: 0 0 0 2px #d9340d;
+  box-shadow: 0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 
 label {
@@ -103,12 +103,12 @@ label.hidden {
 }
 
 .text-prefix {
-  border-right: 1px solid #d7dbe0;
+  border-right: 1px solid rgb(var(--cat-border-color-focus, 215, 219, 224));
   padding-right: 0.75rem;
 }
 
 .text-suffix {
-  border-left: 1px solid #d7dbe0;
+  border-left: 1px solid rgb(var(--cat-border-color-focus, 215, 219, 224));
   padding-left: 0.75rem;
 }
 

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

@@ -32,6 +32,6 @@
   min-height: 2rem;
   max-height: calc(100vh - 48px);
   box-shadow: 0 1px 4px 0 rgba(16, 29, 48, 0.2);
-  border-radius: 0.25rem;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
   z-index: 100;
 }

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

@@ -1,6 +1,7 @@
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { Component, Event, h, Host, Listen, Method, Prop } from '@stencil/core';
 import * as focusTrap from 'focus-trap';
+import log from 'loglevel';
 import { tabbable } from 'tabbable';
 import firstTabbable from '../../utils/first-tabbable';
 let nextUniqueId = 0;
@@ -27,14 +28,22 @@ export class CatMenu {
     this.hide();
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
+    let trigger = (_b = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.querySelector('[data-trigger]')) !== null && _b !== void 0 ? _b : undefined;
+    if (!trigger) {
+      trigger = firstTabbable(this.triggerSlot);
+    }
+    if (!trigger) {
+      log.error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
+      return;
+    }
     this.trigger = firstTabbable(this.triggerSlot);
-    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
-    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
-    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
-    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
+    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-haspopup', 'true');
+    (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-expanded', 'false');
+    (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-controls', this.contentId);
+    (_f = this.content) === null || _f === void 0 ? void 0 : _f.setAttribute('id', this.contentId);
     if (this.trigger && this.content) {
-      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => this.show());
+      (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('click', () => this.show());
       autoUpdate(this.trigger, this.content, () => this.update());
     }
     this.keyListener = event => {

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

@@ -1 +1 @@
-{"version":3,"file":"cat-menu.js","sourceRoot":"","sources":["../../../src/components/cat-menu/cat-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\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-menu',\n  styleUrl: 'cat-menu.scss',\n  shadow: true\n})\nexport class CatMenu {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot?: Element;\n  private trigger?: FocusableElement;\n  private content?: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private keyListener?: (event: KeyboardEvent) => void;\n\n  /**\n   * The placement of the menu.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Emitted when the menu is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the menu is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    // hide menu on button click\n    if (this.content && event.composedPath().includes(this.content)) {\n      this.close();\n    }\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close(): Promise<void> {\n    this.trap?.deactivate();\n    this.hide();\n  }\n\n  componentDidLoad(): void {\n    this.trigger = firstTabbable(this.triggerSlot);\n    this.trigger?.setAttribute('aria-haspopup', 'true');\n    this.trigger?.setAttribute('aria-expanded', 'false');\n    this.trigger?.setAttribute('aria-controls', this.contentId);\n    this.content?.setAttribute('id', this.contentId);\n    if (this.trigger && this.content) {\n      this.trigger?.addEventListener('click', () => this.show());\n      autoUpdate(this.trigger, this.content, () => this.update());\n    }\n\n    this.keyListener = event => {\n      if (this.content && ['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)}></slot>\n        <div class=\"content\" ref={el => (this.content = el)}>\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-menu-${this.id}`;\n  }\n\n  private show() {\n    if (this.content) {\n      this.content.style.display = 'block';\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 => !this.content || !event.composedPath().includes(this.content),\n            onPostDeactivate: () => this.hide()\n          });\n      this.trap.activate();\n    }\n  }\n\n  private hide() {\n    if (this.content) {\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.catClose.emit();\n    }\n  }\n\n  private update() {\n    if (this.trigger && this.content) {\n      computePosition(this.trigger, this.content, {\n        placement: this.placement,\n        middleware: [offset(CatMenu.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.content) {\n          Object.assign(this.content.style, {\n            left: `${x}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-menu.js","sourceRoot":"","sources":["../../../src/components/cat-menu/cat-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport log from 'loglevel';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-menu',\n  styleUrl: 'cat-menu.scss',\n  shadow: true\n})\nexport class CatMenu {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot?: Element;\n  private trigger?: FocusableElement;\n  private content?: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private keyListener?: (event: KeyboardEvent) => void;\n\n  /**\n   * The placement of the menu.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Emitted when the menu is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the menu is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    // hide menu on button click\n    if (this.content && event.composedPath().includes(this.content)) {\n      this.close();\n    }\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close(): Promise<void> {\n    this.trap?.deactivate();\n    this.hide();\n  }\n\n  componentDidLoad(): void {\n    let trigger: FocusableElement | undefined =\n      this.triggerSlot?.querySelector<HTMLElement>('[data-trigger]') ?? undefined;\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    if (!trigger) {\n      log.error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n      return;\n    }\n    this.trigger = firstTabbable(this.triggerSlot);\n    this.trigger?.setAttribute('aria-haspopup', 'true');\n    this.trigger?.setAttribute('aria-expanded', 'false');\n    this.trigger?.setAttribute('aria-controls', this.contentId);\n    this.content?.setAttribute('id', this.contentId);\n    if (this.trigger && this.content) {\n      this.trigger?.addEventListener('click', () => this.show());\n      autoUpdate(this.trigger, this.content, () => this.update());\n    }\n\n    this.keyListener = event => {\n      if (this.content && ['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)}></slot>\n        <div class=\"content\" ref={el => (this.content = el)}>\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-menu-${this.id}`;\n  }\n\n  private show() {\n    if (this.content) {\n      this.content.style.display = 'block';\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 => !this.content || !event.composedPath().includes(this.content),\n            onPostDeactivate: () => this.hide()\n          });\n      this.trap.activate();\n    }\n  }\n\n  private hide() {\n    if (this.content) {\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.catClose.emit();\n    }\n  }\n\n  private update() {\n    if (this.trigger && this.content) {\n      computePosition(this.trigger, this.content, {\n        placement: this.placement,\n        middleware: [offset(CatMenu.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.content) {\n          Object.assign(this.content.style, {\n            left: `${x}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n}\n"]}

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

@@ -17,7 +17,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgb(rgb(var(--cat-bg-backdrop, 0, 0, 0)), var(--cat-opacity-backdrop, 0.6));
   z-index: 2;
   display: flex;
 }
@@ -30,7 +30,7 @@
   z-index: 2;
   position: relative;
   background-color: white;
-  border-radius: 0.5rem;
+  border-radius: var(--cat-border-radius-l, 0.5rem);
   max-width: 100%;
   padding: 32px;
 }

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

@@ -17,7 +17,7 @@
 }
 
 :host-context(.cat-error) .hint-section {
-  color: #d9340d;
+  color: rgb(var(--cat-danger-text, 217, 52, 13));
 }
 
 :host {
@@ -68,7 +68,7 @@ input {
   height: 1.25rem;
   appearance: none;
   background-color: white;
-  border: 1px solid #d7dbe0;
+  border: 1px solid rgb(var(--cat-border-color-focus, 215, 219, 224));
   border-radius: 10rem;
   cursor: inherit;
 }
@@ -84,10 +84,10 @@ input:focus-visible {
 }
 
 :host(.cat-error) input {
-  border-color: #d9340d;
+  border-color: rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 :host(.cat-error) .circle {
-  background-color: #d9340d;
+  background-color: rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 
 .label {
@@ -113,8 +113,8 @@ input:focus-visible {
   background-color: #f8f8fb;
 }
 .is-disabled input:checked {
-  border-color: #d7dbe0;
+  border-color: rgb(var(--cat-border-color-focus, 215, 219, 224));
 }
 .is-disabled .circle {
-  background-color: #d7dbe0;
+  background-color: rgb(var(--cat-border-color-focus, 215, 219, 224));
 }

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

@@ -17,7 +17,7 @@
 }
 
 :host-context(.cat-error) .hint-section {
-  color: #d9340d;
+  color: rgb(var(--cat-danger-text, 217, 52, 13));
 }
 
 :host {
@@ -59,23 +59,23 @@ label.hidden {
   display: flex;
   align-items: flex-start;
   background: white;
-  border-radius: 0.25rem;
-  box-shadow: 0 0 0 1px #d7dbe0;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
+  box-shadow: 0 0 0 1px rgb(var(--cat-border-color-focus, 215, 219, 224));
   transition: box-shadow 0.13s linear;
   padding: 0.25rem;
 }
 .select-wrapper:not(.select-disabled):hover {
-  box-shadow: 0 0 0 2px #d7dbe0;
+  box-shadow: 0 0 0 2px rgb(var(--cat-border-color-focus, 215, 219, 224));
 }
 .select-wrapper:not(.select-disabled):focus-within {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
 }
 
 :host(.cat-error) .select-wrapper {
-  box-shadow: 0 0 0 1px #d9340d;
+  box-shadow: 0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 :host(.cat-error) .select-wrapper:not(.input-disabled):hover {
-  box-shadow: 0 0 0 2px #d9340d;
+  box-shadow: 0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 
 .select-disabled {
@@ -127,7 +127,7 @@ label.hidden {
   gap: 0.5rem;
   padding: 0.25rem 0.5rem;
   background: #f2f4f7;
-  border-radius: 0.125rem;
+  border-radius: var(--cat-border-radius-s, 0.125rem);
   white-space: nowrap;
   min-width: 0;
 }
@@ -163,7 +163,7 @@ cat-spinner {
   display: none;
   overflow: auto;
   box-shadow: 0 1px 4px 0 rgba(16, 29, 48, 0.2);
-  border-radius: 0.25rem;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
   z-index: 100;
 }
 
@@ -212,7 +212,7 @@ cat-spinner {
 }
 
 .select-option:hover {
-  background-color: rgba(105, 118, 135, 0.05);
+  background-color: rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05);
 }
 
 .select-option-active {

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

@@ -36,7 +36,7 @@
 
 .skeleton {
   display: block;
-  border-radius: 0.25rem;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
   background: var(--background);
 }
 

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

@@ -6,7 +6,7 @@
 :host {
   display: flex;
   flex-direction: row;
-  box-shadow: inset 0 -1px 0 0 #d7dbe0;
+  box-shadow: inset 0 -1px 0 0 rgb(var(--cat-border-color-focus, 215, 219, 224));
 }
 
 :host([hidden]) {

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

@@ -17,7 +17,7 @@
 }
 
 :host-context(.cat-error) .hint-section {
-  color: #d9340d;
+  color: rgb(var(--cat-danger-text, 217, 52, 13));
 }
 
 :host {
@@ -63,9 +63,9 @@ textarea {
   min-height: 2.5rem;
   font: inherit;
   background: white;
-  border-radius: 0.25rem;
+  border-radius: var(--cat-border-radius-m, 0.25rem);
   border: none;
-  box-shadow: 0 0 0 1px #d7dbe0;
+  box-shadow: 0 0 0 1px rgb(var(--cat-border-color-focus, 215, 219, 224));
   transition: box-shadow 0.13s linear;
 }
 textarea:disabled {
@@ -75,7 +75,7 @@ textarea:disabled {
   resize: none;
 }
 textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 2px #d7dbe0;
+  box-shadow: 0 0 0 2px rgb(var(--cat-border-color-focus, 215, 219, 224));
 }
 textarea:focus {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));