@haiilo/catalyst 1.2.0 → 1.2.2

package/dist/cjs/catalyst.cjs.js

@@ -15,7 +15,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["cat-alert_23.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
+  return index.bootstrapLazy([["cat-alert_23.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-menu",{"placement":[1],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
 });
 
 //# sourceMappingURL=catalyst.cjs.js.map

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["cat-alert_23.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
+  return index.bootstrapLazy([["cat-alert_23.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-menu",{"placement":[1],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
   });
 };
 

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

@@ -16,19 +16,22 @@
   display: none;
 }
 
-.content {
+::slotted(nav) {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  min-width: 8rem;
+  max-width: 16rem;
+}
+
+.content {
   position: absolute;
   background: white;
   display: none;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-  min-width: 8rem;
-  max-width: 16rem;
   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, Prop } from '@stencil/core';
+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;
@@ -13,22 +14,36 @@ export class CatMenu {
     this.placement = 'bottom-start';
   }
   clickHandler(event) {
-    var _a;
     // hide menu on button click
     if (this.content && event.composedPath().includes(this.content)) {
-      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-      this.hide();
+      this.close();
     }
   }
+  /**
+   * Closes the menu.
+   */
+  async close() {
+    var _a;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+    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 => {
@@ -172,6 +187,24 @@ export class CatMenu {
         }
       }
     }]; }
+  static get methods() { return {
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Closes the menu.",
+        "tags": []
+      }
+    }
+  }; }
   static get listeners() { return [{
       "name": "catClick",
       "method": "clickHandler",

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, 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.trap?.deactivate();\n      this.hide();\n    }\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;
 }