@haiilo/catalyst 14.5.2 → 14.6.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.
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/p-d3951c6a.entry.js +10 -0
- package/dist/catalyst/{p-0fec1fc5.entry.js.map → p-d3951c6a.entry.js.map} +1 -1
- package/dist/cjs/cat-alert_32.cjs.entry.js +8 -4
- package/dist/collection/components/cat-button/cat-button.css +14 -5
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +2 -0
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-menu/cat-menu.js +5 -3
- package/dist/collection/components/cat-menu/cat-menu.js.map +1 -1
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-dropdown2.js +2 -0
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-menu2.js +5 -3
- package/dist/components/cat-menu2.js.map +1 -1
- package/dist/esm/cat-alert_32.entry.js +8 -4
- package/package.json +8 -4
- package/dist/catalyst/p-0fec1fc5.entry.js +0 -10
|
@@ -80,7 +80,9 @@ const CatMenu = /*@__PURE__*/ proxyCustomElement(class CatMenu extends HTMLEleme
|
|
|
80
80
|
return;
|
|
81
81
|
}
|
|
82
82
|
requestAnimationFrame(() => {
|
|
83
|
-
if (!this.isMenuItemInFocus()
|
|
83
|
+
if (!this.isMenuItemInFocus() &&
|
|
84
|
+
document.activeElement !== document.body &&
|
|
85
|
+
document.activeElement !== this.hostElement) {
|
|
84
86
|
this.dropdown?.close(false);
|
|
85
87
|
}
|
|
86
88
|
});
|
|
@@ -158,10 +160,10 @@ const CatMenu = /*@__PURE__*/ proxyCustomElement(class CatMenu extends HTMLEleme
|
|
|
158
160
|
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
159
161
|
}
|
|
160
162
|
render() {
|
|
161
|
-
return (h(Host, { key: '
|
|
163
|
+
return (h(Host, { key: '7f6a8d695af0d7f30b7da9ba5558f0c6983e4315' }, h("cat-dropdown", { key: '722ec1a940599257082c2a7b586dd662e09aab39', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, h("cat-button", { key: 'a1562b313b53ae8a736f096e3717ee3de78b9862', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
|
|
162
164
|
...this.triggerNativeAttributes,
|
|
163
165
|
'aria-haspopup': 'menu'
|
|
164
|
-
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: '
|
|
166
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: 'f8cbc8e8841e4d9c2d28b38bae55bdbde2693a10', name: "trigger-label" }, this.triggerLabel)), h("nav", { key: 'bcd0eebb7e9bdbb23f2dbcfba7d6d13653789c06', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, h("ul", { key: '52ced18c6c0349795e1516090b33cd5c7bebb451' }, h("slot", { key: '3cedc5e3d1392fec9d49222165e9c96e7f40b0f2' }))))));
|
|
165
167
|
}
|
|
166
168
|
get hostElement() { return this; }
|
|
167
169
|
static get style() { return catMenuCss; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-menu2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/cat-menu/cat-menu.scss?tag=cat-menu&encapsulation=shadow","src/components/cat-menu/cat-menu.tsx"],"sourcesContent":[":host(.cat-time-menu) {\n nav {\n max-height: 16rem;\n }\n}\n\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * A menu component that provides a dropdown with a built-in configurable trigger button\n * and proper ARIA semantics and keyboard navigation for menu items.\n *\n * The trigger is always a cat-button with sensible defaults but fully configurable\n * through trigger-specific props.\n */\n@Component({\n tag: 'cat-menu',\n styleUrl: 'cat-menu.scss',\n shadow: true\n})\nexport class CatMenu {\n private dropdown?: HTMLCatDropdownElement;\n private catMenuItems: HTMLCatMenuItemElement[] = [];\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * The arrow key navigation direction for menu items.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * The trigger button variant.\n */\n @Prop() triggerVariant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * The trigger button size.\n */\n @Prop() triggerSize: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The trigger button icon.\n */\n @Prop() triggerIcon?: string;\n\n /**\n * Show only the icon in the trigger button.\n */\n @Prop() triggerIconOnly?: boolean | Breakpoint;\n\n /**\n * The trigger button label.\n */\n @Prop() triggerLabel?: string;\n\n /**\n * The color palette of the trigger button.\n */\n @Prop() triggerColor: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n /**\n * The trigger button accessibility label. If not set, falls back to triggerLabel.\n */\n @Prop() triggerA11yLabel?: string;\n\n /**\n * Additional CSS class for the trigger button.\n */\n @Prop() triggerClass?: string;\n\n /**\n * Test ID for the trigger button.\n */\n @Prop() triggerTestId?: string;\n\n /**\n * Native attributes for the trigger button.\n */\n @Prop() triggerNativeAttributes?: { [key: string]: string };\n\n /**\n * Disable the menu.\n */\n @Prop() disabled = false;\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the trigger button is clicked.\n */\n @Event() catTriggerClick!: EventEmitter<MouseEvent>;\n\n @Listen('focusout')\n onFocusOut(): void {\n if (!this.dropdown?.isOpen) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n this.dropdown?.close(false);\n }\n });\n }\n\n private getDeepActiveElement(): Element | null {\n let active: Element | null = document.activeElement;\n while (active?.shadowRoot?.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active ? (findClosest('cat-menu-item', active) ?? active) : null;\n }\n\n @Listen('keydown', { target: 'document' })\n onDocumentKeydown(event: KeyboardEvent): void {\n const navigationKeys =\n this.arrowNavigation === 'horizontal'\n ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n : ['ArrowDown', 'ArrowUp', 'Home', 'End'];\n\n if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {\n return;\n }\n\n const targetElements = this.catMenuItems.filter(item => !item.disabled);\n if (!targetElements.length) {\n return;\n }\n const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);\n\n let targetIdx: number;\n if (event.key === 'Home') {\n targetIdx = 0;\n } else if (event.key === 'End') {\n targetIdx = targetElements.length - 1;\n } else {\n const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n const activeOff = event.key === forwardKey ? 1 : -1;\n targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n }\n\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n\n componentDidLoad(): void {\n this.syncMenuItems();\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n }\n\n /**\n * Opens the menu.\n */\n @Method()\n async open(): Promise<void> {\n await this.dropdown?.open();\n }\n\n /**\n * Closes the menu.\n */\n @Method()\n async close(): Promise<void> {\n await this.dropdown?.close();\n }\n\n /**\n * Toggles the menu.\n */\n @Method()\n async toggle(): Promise<void> {\n await this.dropdown?.toggle();\n }\n\n private onTriggerClick = (event: CustomEvent<MouseEvent>) => {\n this.catTriggerClick.emit(event.detail);\n };\n\n private onMenuOpen = (event: CustomEvent<FocusEvent>) => {\n this.catOpen.emit(event.detail);\n // Set focus to first non-disabled menu item when menu opens\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);\n firstEnabledItem?.doFocus();\n }\n });\n };\n\n private isMenuItemInFocus(): boolean {\n const activeElement = this.getDeepActiveElement();\n const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);\n\n return !!(activeElement && isInMenu);\n }\n\n private syncMenuItems() {\n this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));\n }\n\n render() {\n return (\n <Host>\n <cat-dropdown\n ref={el => (this.dropdown = el)}\n focusTrap={false}\n placement={this.placement}\n justify={this.justify}\n arrowNavigation=\"none\"\n noResize={this.noResize}\n overflow={this.overflow}\n delayedTriggerInit={this.delayedTriggerInit}\n onCatOpen={this.onMenuOpen}\n onCatClose={() => this.catClose.emit()}\n >\n <cat-button\n slot=\"trigger\"\n part=\"trigger\"\n variant={this.triggerVariant}\n size={this.triggerSize}\n icon={this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined)}\n iconOnly={this.triggerIconOnly ?? this.triggerLabel === undefined}\n color={this.triggerColor}\n a11yLabel={this.triggerA11yLabel ?? this.triggerLabel}\n class={this.triggerClass}\n testId={this.triggerTestId}\n nativeAttributes={{\n ...this.triggerNativeAttributes,\n 'aria-haspopup': 'menu'\n }}\n disabled={this.disabled}\n onCatClick={this.onTriggerClick}\n >\n {!this.triggerIconOnly && <slot name=\"trigger-label\">{this.triggerLabel}</slot>}\n </cat-button>\n <nav role=\"menu\" slot=\"content\" class=\"cat-menu-list\" aria-orientation={this.arrowNavigation}>\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </cat-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-menu2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/cat-menu/cat-menu.scss?tag=cat-menu&encapsulation=shadow","src/components/cat-menu/cat-menu.tsx"],"sourcesContent":[":host(.cat-time-menu) {\n nav {\n max-height: 16rem;\n }\n}\n\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * A menu component that provides a dropdown with a built-in configurable trigger button\n * and proper ARIA semantics and keyboard navigation for menu items.\n *\n * The trigger is always a cat-button with sensible defaults but fully configurable\n * through trigger-specific props.\n */\n@Component({\n tag: 'cat-menu',\n styleUrl: 'cat-menu.scss',\n shadow: true\n})\nexport class CatMenu {\n private dropdown?: HTMLCatDropdownElement;\n private catMenuItems: HTMLCatMenuItemElement[] = [];\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * The arrow key navigation direction for menu items.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * The trigger button variant.\n */\n @Prop() triggerVariant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * The trigger button size.\n */\n @Prop() triggerSize: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The trigger button icon.\n */\n @Prop() triggerIcon?: string;\n\n /**\n * Show only the icon in the trigger button.\n */\n @Prop() triggerIconOnly?: boolean | Breakpoint;\n\n /**\n * The trigger button label.\n */\n @Prop() triggerLabel?: string;\n\n /**\n * The color palette of the trigger button.\n */\n @Prop() triggerColor: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n /**\n * The trigger button accessibility label. If not set, falls back to triggerLabel.\n */\n @Prop() triggerA11yLabel?: string;\n\n /**\n * Additional CSS class for the trigger button.\n */\n @Prop() triggerClass?: string;\n\n /**\n * Test ID for the trigger button.\n */\n @Prop() triggerTestId?: string;\n\n /**\n * Native attributes for the trigger button.\n */\n @Prop() triggerNativeAttributes?: { [key: string]: string };\n\n /**\n * Disable the menu.\n */\n @Prop() disabled = false;\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the trigger button is clicked.\n */\n @Event() catTriggerClick!: EventEmitter<MouseEvent>;\n\n @Listen('focusout')\n onFocusOut(): void {\n if (!this.dropdown?.isOpen) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (\n !this.isMenuItemInFocus() &&\n document.activeElement !== document.body &&\n document.activeElement !== this.hostElement\n ) {\n this.dropdown?.close(false);\n }\n });\n }\n\n private getDeepActiveElement(): Element | null {\n let active: Element | null = document.activeElement;\n while (active?.shadowRoot?.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active ? (findClosest('cat-menu-item', active) ?? active) : null;\n }\n\n @Listen('keydown', { target: 'document' })\n onDocumentKeydown(event: KeyboardEvent): void {\n const navigationKeys =\n this.arrowNavigation === 'horizontal'\n ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n : ['ArrowDown', 'ArrowUp', 'Home', 'End'];\n\n if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {\n return;\n }\n\n const targetElements = this.catMenuItems.filter(item => !item.disabled);\n if (!targetElements.length) {\n return;\n }\n const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);\n\n let targetIdx: number;\n if (event.key === 'Home') {\n targetIdx = 0;\n } else if (event.key === 'End') {\n targetIdx = targetElements.length - 1;\n } else {\n const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n const activeOff = event.key === forwardKey ? 1 : -1;\n targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n }\n\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n\n componentDidLoad(): void {\n this.syncMenuItems();\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n }\n\n /**\n * Opens the menu.\n */\n @Method()\n async open(): Promise<void> {\n await this.dropdown?.open();\n }\n\n /**\n * Closes the menu.\n */\n @Method()\n async close(): Promise<void> {\n await this.dropdown?.close();\n }\n\n /**\n * Toggles the menu.\n */\n @Method()\n async toggle(): Promise<void> {\n await this.dropdown?.toggle();\n }\n\n private onTriggerClick = (event: CustomEvent<MouseEvent>) => {\n this.catTriggerClick.emit(event.detail);\n };\n\n private onMenuOpen = (event: CustomEvent<FocusEvent>) => {\n this.catOpen.emit(event.detail);\n // Set focus to first non-disabled menu item when menu opens\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);\n firstEnabledItem?.doFocus();\n }\n });\n };\n\n private isMenuItemInFocus(): boolean {\n const activeElement = this.getDeepActiveElement();\n const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);\n\n return !!(activeElement && isInMenu);\n }\n\n private syncMenuItems() {\n this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));\n }\n\n render() {\n return (\n <Host>\n <cat-dropdown\n ref={el => (this.dropdown = el)}\n focusTrap={false}\n placement={this.placement}\n justify={this.justify}\n arrowNavigation=\"none\"\n noResize={this.noResize}\n overflow={this.overflow}\n delayedTriggerInit={this.delayedTriggerInit}\n onCatOpen={this.onMenuOpen}\n onCatClose={() => this.catClose.emit()}\n >\n <cat-button\n slot=\"trigger\"\n part=\"trigger\"\n variant={this.triggerVariant}\n size={this.triggerSize}\n icon={this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined)}\n iconOnly={this.triggerIconOnly ?? this.triggerLabel === undefined}\n color={this.triggerColor}\n a11yLabel={this.triggerA11yLabel ?? this.triggerLabel}\n class={this.triggerClass}\n testId={this.triggerTestId}\n nativeAttributes={{\n ...this.triggerNativeAttributes,\n 'aria-haspopup': 'menu'\n }}\n disabled={this.disabled}\n onCatClick={this.onTriggerClick}\n >\n {!this.triggerIconOnly && <slot name=\"trigger-label\">{this.triggerLabel}</slot>}\n </cat-button>\n <nav role=\"menu\" slot=\"content\" class=\"cat-menu-list\" aria-orientation={this.arrowNavigation}>\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </cat-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -345,7 +345,7 @@ function findClosest(selector, element) {
|
|
|
345
345
|
return nextElement ? findClosest(selector, nextElement) : null;
|
|
346
346
|
}
|
|
347
347
|
|
|
348
|
-
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--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:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--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: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: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: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: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: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: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:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
|
|
348
|
+
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button>*{pointer-events:none}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:rgb(var(--outlined-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, rgb(var(--outlined-bg)));color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, rgb(var(--outlined-bg)))}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--outlined-bg:var(--cat-primary-bg-outlined, 255, 255, 255);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--outlined-bg:var(--cat-secondary-bg-outlined, 255, 255, 255);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--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:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--outlined-bg:var(--cat-info-bg-outlined, 255, 255, 255);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--outlined-bg:var(--cat-success-bg-outlined, 255, 255, 255);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--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: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:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--outlined-bg:var(--cat-warning-bg-outlined, 255, 255, 255);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--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: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:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--outlined-bg:var(--cat-danger-bg-outlined, 255, 255, 255);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--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:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
|
|
349
349
|
|
|
350
350
|
const CatButton = class {
|
|
351
351
|
constructor(hostRef) {
|
|
@@ -7861,6 +7861,8 @@ const CatDropdown = class {
|
|
|
7861
7861
|
return (!this.noAutoClose &&
|
|
7862
7862
|
// check if click was outside of the dropdown content
|
|
7863
7863
|
!event.composedPath().includes(this.content) &&
|
|
7864
|
+
// check if click was on trigger - this case is handled by trigger click listener
|
|
7865
|
+
!event.composedPath().includes(this.trigger) &&
|
|
7864
7866
|
// check if click was not on an element marked with data-dropdown-no-close
|
|
7865
7867
|
!event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
|
|
7866
7868
|
}
|
|
@@ -8348,7 +8350,9 @@ const CatMenu = class {
|
|
|
8348
8350
|
return;
|
|
8349
8351
|
}
|
|
8350
8352
|
requestAnimationFrame(() => {
|
|
8351
|
-
if (!this.isMenuItemInFocus()
|
|
8353
|
+
if (!this.isMenuItemInFocus() &&
|
|
8354
|
+
document.activeElement !== document.body &&
|
|
8355
|
+
document.activeElement !== this.hostElement) {
|
|
8352
8356
|
this.dropdown?.close(false);
|
|
8353
8357
|
}
|
|
8354
8358
|
});
|
|
@@ -8426,10 +8430,10 @@ const CatMenu = class {
|
|
|
8426
8430
|
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
8427
8431
|
}
|
|
8428
8432
|
render() {
|
|
8429
|
-
return (h(Host, { key: '
|
|
8433
|
+
return (h(Host, { key: '7f6a8d695af0d7f30b7da9ba5558f0c6983e4315' }, h("cat-dropdown", { key: '722ec1a940599257082c2a7b586dd662e09aab39', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, h("cat-button", { key: 'a1562b313b53ae8a736f096e3717ee3de78b9862', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
|
|
8430
8434
|
...this.triggerNativeAttributes,
|
|
8431
8435
|
'aria-haspopup': 'menu'
|
|
8432
|
-
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: '
|
|
8436
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: 'f8cbc8e8841e4d9c2d28b38bae55bdbde2693a10', name: "trigger-label" }, this.triggerLabel)), h("nav", { key: 'bcd0eebb7e9bdbb23f2dbcfba7d6d13653789c06', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, h("ul", { key: '52ced18c6c0349795e1516090b33cd5c7bebb451' }, h("slot", { key: '3cedc5e3d1392fec9d49222165e9c96e7f40b0f2' }))))));
|
|
8433
8437
|
}
|
|
8434
8438
|
get hostElement() { return getElement(this); }
|
|
8435
8439
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haiilo/catalyst",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.6.0",
|
|
4
4
|
"description": "Catalyst Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -39,11 +39,13 @@
|
|
|
39
39
|
"sanitize.css": "13.0.0",
|
|
40
40
|
"tabbable": "6.2.0",
|
|
41
41
|
"toastify-js": "1.12.0",
|
|
42
|
-
"@haiilo/catalyst-tokens": "14.
|
|
42
|
+
"@haiilo/catalyst-tokens": "14.6.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@haiilo/catalyst-icons": "^2.6.1",
|
|
46
|
+
"@playwright/test": "1.55.1",
|
|
46
47
|
"@stencil/angular-output-target": "1.1.1",
|
|
48
|
+
"@stencil/playwright": "0.2.3",
|
|
47
49
|
"@stencil/react-output-target": "0.5.3",
|
|
48
50
|
"@stencil/sass": "3.2.3",
|
|
49
51
|
"@types/autosize": "^4.0.3",
|
|
@@ -73,8 +75,10 @@
|
|
|
73
75
|
"postbuild": "node replace",
|
|
74
76
|
"postbuild:ci": "node replace",
|
|
75
77
|
"start": "stencil build --dev --watch --serve",
|
|
76
|
-
"test": "stencil test --spec --
|
|
77
|
-
"test:
|
|
78
|
+
"test": "stencil test --spec --runInBand",
|
|
79
|
+
"test:e2e": "playwright test",
|
|
80
|
+
"posttest:e2e": "node replace && pnpm --filter @haiilo/catalyst-angular-workspace run prettier",
|
|
81
|
+
"test:watch": "stencil test --spec --watchAll",
|
|
78
82
|
"generate": "stencil generate",
|
|
79
83
|
"prettier": "prettier --write .",
|
|
80
84
|
"prettier:check": "prettier --check .",
|