@haiilo/catalyst 10.0.3 → 10.0.5

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

@@ -21,6 +21,7 @@
 
 .content {
   align-self: center;
+  width: 100%;
 }
 
 ::slotted(:last-child) {

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

@@ -71,7 +71,11 @@ export class CatTooltip {
             await computePosition(this.trigger, this.tooltip, {
                 strategy: 'fixed',
                 placement: this.placement,
-                middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
+                middleware: [
+                    offset(CatTooltip.OFFSET),
+                    flip({ fallbackAxisSideDirection: 'start' }),
+                    shift({ padding: CatTooltip.SHIFT_PADDING })
+                ]
             }).then(({ x, y }) => {
                 if (this.tooltip) {
                     Object.assign(this.tooltip.style, {

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private trigger?: Element;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private inactive = false;\n  private cleanupFloatingUi?: () => void;\n\n  private readonly boundShowListener: () => void;\n  private readonly boundHideListener: () => void;\n  private readonly boundWindowTouchStartListener: () => void;\n  private readonly boundTouchStartListener: (event: Event) => void;\n  private readonly boundTouchEndListener: () => void;\n\n  constructor() {\n    this.boundShowListener = this.showListener.bind(this);\n    this.boundHideListener = this.hideListener.bind(this);\n    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n    this.boundTouchStartListener = this.touchStartListener.bind(this);\n    this.boundTouchEndListener = this.touchEndListener.bind(this);\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() open = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideTooltip();\n  }\n\n  componentDidLoad(): void {\n    const slot = this.hostElement.shadowRoot?.querySelector('slot');\n    this.trigger = slot?.assignedElements?.()?.[0];\n    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n      this.trigger.setAttribute('aria-describedby', this.id);\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.addEventListener('focusin', this.boundShowListener);\n      this.trigger?.addEventListener('focusout', this.boundHideListener);\n      this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n    }\n  }\n\n  componentWillRender(): void {\n    this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n      this.trigger?.removeEventListener('focusin', this.boundShowListener);\n      this.trigger?.removeEventListener('focusout', this.boundHideListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          role=\"tooltip\"\n          aria-hidden={!this.open}\n          aria-live={this.open ? 'polite' : 'off'}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.inactive,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <slot name=\"content\">\n            {/* The paragraph is needed here to make aria-live work properly. */}\n            <p>{this.content}</p>\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.hideTimeout = undefined;\n    if (!this.showTimeout) {\n      this.showTimeout = window.setTimeout(() => {\n        this.showTimeout = undefined;\n        this.showTooltip();\n      }, this.showDelay);\n    }\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.showTimeout = undefined;\n    if (!this.hideTimeout) {\n      this.hideTimeout = window.setTimeout(() => {\n        this.hideTimeout = undefined;\n        this.hideTooltip();\n      }, this.hideDelay);\n    }\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    if (!this.touchTimeout) {\n      this.touchTimeout = window.setTimeout(() => {\n        this.touchTimeout = undefined;\n        this.showTooltip();\n      }, this.longTouchDuration);\n    }\n  }\n\n  private touchEndListener() {\n    window.clearTimeout(this.touchTimeout);\n    this.touchTimeout = undefined;\n    this.hideTooltip();\n  }\n\n  private windowTouchStartListener() {\n    this.hideTooltip();\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    if (!this.inactive) {\n      this.open = true;\n      this.tooltip?.classList.add('tooltip-show');\n    }\n  }\n\n  private hideTooltip() {\n    this.open = false;\n    this.tooltip?.classList.remove('tooltip-show');\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n}\n"]}
+{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private trigger?: Element;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private inactive = false;\n  private cleanupFloatingUi?: () => void;\n\n  private readonly boundShowListener: () => void;\n  private readonly boundHideListener: () => void;\n  private readonly boundWindowTouchStartListener: () => void;\n  private readonly boundTouchStartListener: (event: Event) => void;\n  private readonly boundTouchEndListener: () => void;\n\n  constructor() {\n    this.boundShowListener = this.showListener.bind(this);\n    this.boundHideListener = this.hideListener.bind(this);\n    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n    this.boundTouchStartListener = this.touchStartListener.bind(this);\n    this.boundTouchEndListener = this.touchEndListener.bind(this);\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() open = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideTooltip();\n  }\n\n  componentDidLoad(): void {\n    const slot = this.hostElement.shadowRoot?.querySelector('slot');\n    this.trigger = slot?.assignedElements?.()?.[0];\n    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n      this.trigger.setAttribute('aria-describedby', this.id);\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.addEventListener('focusin', this.boundShowListener);\n      this.trigger?.addEventListener('focusout', this.boundHideListener);\n      this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n    }\n  }\n\n  componentWillRender(): void {\n    this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n      this.trigger?.removeEventListener('focusin', this.boundShowListener);\n      this.trigger?.removeEventListener('focusout', this.boundHideListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          role=\"tooltip\"\n          aria-hidden={!this.open}\n          aria-live={this.open ? 'polite' : 'off'}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.inactive,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <slot name=\"content\">\n            {/* The paragraph is needed here to make aria-live work properly. */}\n            <p>{this.content}</p>\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatTooltip.OFFSET),\n          flip({ fallbackAxisSideDirection: 'start' }),\n          shift({ padding: CatTooltip.SHIFT_PADDING })\n        ]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.hideTimeout = undefined;\n    if (!this.showTimeout) {\n      this.showTimeout = window.setTimeout(() => {\n        this.showTimeout = undefined;\n        this.showTooltip();\n      }, this.showDelay);\n    }\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.showTimeout = undefined;\n    if (!this.hideTimeout) {\n      this.hideTimeout = window.setTimeout(() => {\n        this.hideTimeout = undefined;\n        this.hideTooltip();\n      }, this.hideDelay);\n    }\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    if (!this.touchTimeout) {\n      this.touchTimeout = window.setTimeout(() => {\n        this.touchTimeout = undefined;\n        this.showTooltip();\n      }, this.longTouchDuration);\n    }\n  }\n\n  private touchEndListener() {\n    window.clearTimeout(this.touchTimeout);\n    this.touchTimeout = undefined;\n    this.hideTooltip();\n  }\n\n  private windowTouchStartListener() {\n    this.hideTooltip();\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    if (!this.inactive) {\n      this.open = true;\n      this.tooltip?.classList.add('tooltip-show');\n    }\n  }\n\n  private hideTooltip() {\n    this.open = false;\n    this.tooltip?.classList.remove('tooltip-show');\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n}\n"]}

package/dist/components/cat-alert.js

@@ -7,7 +7,7 @@ function setAttributeDefault(host, attr, value) {
     }
 }
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center;width:100%}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLElement {
     constructor() {

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

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;IAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACpD;AACH;;ACRA,MAAM,WAAW,GAAG,g6EAAg6E;;MCYv6EA,UAAQ;;;;;QACF,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;SAChC,CAAC,CAAC;QACc,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;SACpB,CAAC,CAAC;qBAO0F,SAAS;;sBAUrF,KAAK;;IAEtB,iBAAiB;QACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAChG,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n    // adjust nested links\n    --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n    --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n    --cat-link-decoration: underline;\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['info', '$cat:alert-info'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['info', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon || this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;IAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACpD;AACH;;ACRA,MAAM,WAAW,GAAG,26EAA26E;;MCYl7EA,UAAQ;;;;;QACF,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;SAChC,CAAC,CAAC;QACc,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;SACpB,CAAC,CAAC;qBAO0F,SAAS;;sBAUrF,KAAK;;IAEtB,iBAAiB;QACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAChG,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n  width: 100%;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n    // adjust nested links\n    --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n    --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n    --cat-link-decoration: underline;\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['info', '$cat:alert-info'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['info', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon || this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-tooltip.js

@@ -78,7 +78,11 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CatTooltip extends H
             await computePosition(this.trigger, this.tooltip, {
                 strategy: 'fixed',
                 placement: this.placement,
-                middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
+                middleware: [
+                    offset(CatTooltip.OFFSET),
+                    flip({ fallbackAxisSideDirection: 'start' }),
+                    shift({ padding: CatTooltip.SHIFT_PADDING })
+                ]
             }).then(({ x, y }) => {
                 if (this.tooltip) {
                     Object.assign(this.tooltip.style, {

package/dist/components/cat-tooltip.js.map

@@ -1 +1 @@
-{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["src/utils/is-touch-screen.ts","src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n$-shift-padding: 0.25rem; // padding given to the shift() middleware\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  position: fixed;\n  width: max-content;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition:\n    opacity cat-token('time.transition.m') linear,\n    visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: cat-z-index('tooltip');\n  max-width: min(calc(100vw - 2 * $-shift-padding), $-max-width);\n\n  &-hidden {\n    @include cat-visually-hidden;\n  }\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  p {\n    margin: 0;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private trigger?: Element;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private inactive = false;\n  private cleanupFloatingUi?: () => void;\n\n  private readonly boundShowListener: () => void;\n  private readonly boundHideListener: () => void;\n  private readonly boundWindowTouchStartListener: () => void;\n  private readonly boundTouchStartListener: (event: Event) => void;\n  private readonly boundTouchEndListener: () => void;\n\n  constructor() {\n    this.boundShowListener = this.showListener.bind(this);\n    this.boundHideListener = this.hideListener.bind(this);\n    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n    this.boundTouchStartListener = this.touchStartListener.bind(this);\n    this.boundTouchEndListener = this.touchEndListener.bind(this);\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() open = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideTooltip();\n  }\n\n  componentDidLoad(): void {\n    const slot = this.hostElement.shadowRoot?.querySelector('slot');\n    this.trigger = slot?.assignedElements?.()?.[0];\n    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n      this.trigger.setAttribute('aria-describedby', this.id);\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.addEventListener('focusin', this.boundShowListener);\n      this.trigger?.addEventListener('focusout', this.boundHideListener);\n      this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n    }\n  }\n\n  componentWillRender(): void {\n    this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n      this.trigger?.removeEventListener('focusin', this.boundShowListener);\n      this.trigger?.removeEventListener('focusout', this.boundHideListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          role=\"tooltip\"\n          aria-hidden={!this.open}\n          aria-live={this.open ? 'polite' : 'off'}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.inactive,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <slot name=\"content\">\n            {/* The paragraph is needed here to make aria-live work properly. */}\n            <p>{this.content}</p>\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.hideTimeout = undefined;\n    if (!this.showTimeout) {\n      this.showTimeout = window.setTimeout(() => {\n        this.showTimeout = undefined;\n        this.showTooltip();\n      }, this.showDelay);\n    }\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.showTimeout = undefined;\n    if (!this.hideTimeout) {\n      this.hideTimeout = window.setTimeout(() => {\n        this.hideTimeout = undefined;\n        this.hideTooltip();\n      }, this.hideDelay);\n    }\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    if (!this.touchTimeout) {\n      this.touchTimeout = window.setTimeout(() => {\n        this.touchTimeout = undefined;\n        this.showTooltip();\n      }, this.longTouchDuration);\n    }\n  }\n\n  private touchEndListener() {\n    window.clearTimeout(this.touchTimeout);\n    this.touchTimeout = undefined;\n    this.hideTooltip();\n  }\n\n  private windowTouchStartListener() {\n    this.hideTooltip();\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    if (!this.inactive) {\n      this.open = true;\n      this.tooltip?.classList.add('tooltip-show');\n    }\n  }\n\n  private hideTooltip() {\n    this.open = false;\n    this.tooltip?.classList.remove('tooltip-show');\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n}\n"],"version":3}
+{"file":"cat-tooltip.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC;;ACA9E,MAAM,aAAa,GAAG,yuCAAyuC;;ACI/vC,IAAI,YAAY,GAAG,CAAC,CAAC;MAORA,YAAU;IAkBrB;;;;QAfiB,OAAE,GAAG,eAAe,YAAY,EAAE,EAAE,CAAC;QAM9C,aAAQ,GAAG,KAAK,CAAC;oBAmBT,KAAK;uBAKH,EAAE;wBAMD,KAAK;yBAKO,KAAK;qBAKpB,KAAK;oBAKW,GAAG;yBAKf,GAAG;yBAKH,CAAC;iCAKO,IAAI;QAlD9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,6BAA6B,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9E,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/D;IAgDD,aAAa,CAAC,EAAE,GAAG,EAAiB;QAClC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;KACxC;IAED,gBAAgB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,gBAAgB,IAAI,GAAG,CAAC,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;YAClE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;SACxD;QAED,IAAIC,aAAa,EAAE;YACjB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC3E,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;SACxE;aAAM;YACL,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAClE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACrE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACtE;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;KACzG;IAED,oBAAoB;QAClB,IAAIA,aAAa,EAAE;YACjB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC7E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC9E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;SAC3E;aAAM;YACL,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACrE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACvE;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACH,eAAQ,EACR,WACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,IAAI,eACZ,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,KAAK,EACvC,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,eAAe,EAAE,IAAI,CAAC,KAAK;gBAC3B,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;aAC7C,IAED,YAAM,IAAI,EAAC,SAAS,IAElB,aAAI,IAAI,CAAC,OAAO,CAAK,CAChB,CACH,CACD,EACP;KACH;IAEO,MAAM,MAAM;QAClB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAChC,MAAM,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBAChD,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE;oBACV,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;oBACzB,IAAI,CAAC,EAAE,yBAAyB,EAAE,OAAO,EAAE,CAAC;oBAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,aAAa,EAAE,CAAC;iBAC7C;aACF,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gBACf,IAAI,IAAI,CAAC,OAAO,EAAE;oBAChB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;wBAChC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI;wBAC3B,GAAG,EAAE,GAAG,CAAC,IAAI;qBACd,CAAC,CAAC;iBACJ;aACF,CAAC,CAAC;SACJ;KACF;IAEO,YAAY;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;gBACnC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;gBAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACpB;KACF;IAEO,YAAY;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;gBACnC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;gBAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACpB;KACF;IAEO,kBAAkB,CAAC,KAAY;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC;gBACpC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;gBAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC5B;KACF;IAEO,gBAAgB;QACtB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAEO,wBAAwB;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAChC,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACtF;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SAC7C;KACF;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QAC/C,IAAI,CAAC,iBAAiB,IAAI,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;KACpC;;;;;;;;;;;;;;AAvNuBD,mBAAM,GAAG,CAAH,CAAK;AACXA,0BAAa,GAAG,CAAH,CAAK;;;;;;;;;;;;;;;;;;;;","names":["CatTooltip","isTouchScreen"],"sources":["src/utils/is-touch-screen.ts","src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n$-shift-padding: 0.25rem; // padding given to the shift() middleware\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n  position: fixed;\n  width: max-content;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition:\n    opacity cat-token('time.transition.m') linear,\n    visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: cat-z-index('tooltip');\n  max-width: min(calc(100vw - 2 * $-shift-padding), $-max-width);\n\n  &-hidden {\n    @include cat-visually-hidden;\n  }\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  p {\n    margin: 0;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private trigger?: Element;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private inactive = false;\n  private cleanupFloatingUi?: () => void;\n\n  private readonly boundShowListener: () => void;\n  private readonly boundHideListener: () => void;\n  private readonly boundWindowTouchStartListener: () => void;\n  private readonly boundTouchStartListener: (event: Event) => void;\n  private readonly boundTouchEndListener: () => void;\n\n  constructor() {\n    this.boundShowListener = this.showListener.bind(this);\n    this.boundHideListener = this.hideListener.bind(this);\n    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n    this.boundTouchStartListener = this.touchStartListener.bind(this);\n    this.boundTouchEndListener = this.touchEndListener.bind(this);\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() open = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideTooltip();\n  }\n\n  componentDidLoad(): void {\n    const slot = this.hostElement.shadowRoot?.querySelector('slot');\n    this.trigger = slot?.assignedElements?.()?.[0];\n    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n      this.trigger.setAttribute('aria-describedby', this.id);\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.addEventListener('focusin', this.boundShowListener);\n      this.trigger?.addEventListener('focusout', this.boundHideListener);\n      this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n    }\n  }\n\n  componentWillRender(): void {\n    this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n      this.trigger?.removeEventListener('focusin', this.boundShowListener);\n      this.trigger?.removeEventListener('focusout', this.boundHideListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          role=\"tooltip\"\n          aria-hidden={!this.open}\n          aria-live={this.open ? 'polite' : 'off'}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.inactive,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <slot name=\"content\">\n            {/* The paragraph is needed here to make aria-live work properly. */}\n            <p>{this.content}</p>\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatTooltip.OFFSET),\n          flip({ fallbackAxisSideDirection: 'start' }),\n          shift({ padding: CatTooltip.SHIFT_PADDING })\n        ]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.hideTimeout = undefined;\n    if (!this.showTimeout) {\n      this.showTimeout = window.setTimeout(() => {\n        this.showTimeout = undefined;\n        this.showTooltip();\n      }, this.showDelay);\n    }\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.showTimeout = undefined;\n    if (!this.hideTimeout) {\n      this.hideTimeout = window.setTimeout(() => {\n        this.hideTimeout = undefined;\n        this.hideTooltip();\n      }, this.hideDelay);\n    }\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    if (!this.touchTimeout) {\n      this.touchTimeout = window.setTimeout(() => {\n        this.touchTimeout = undefined;\n        this.showTooltip();\n      }, this.longTouchDuration);\n    }\n  }\n\n  private touchEndListener() {\n    window.clearTimeout(this.touchTimeout);\n    this.touchTimeout = undefined;\n    this.hideTooltip();\n  }\n\n  private windowTouchStartListener() {\n    this.hideTooltip();\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    if (!this.inactive) {\n      this.open = true;\n      this.tooltip?.classList.add('tooltip-show');\n    }\n  }\n\n  private hideTooltip() {\n    this.open = false;\n    this.tooltip?.classList.remove('tooltip-show');\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n}\n"],"version":3}

package/dist/esm/cat-alert_26.entry.js

@@ -786,7 +786,7 @@ function setAttributeDefault(host, attr, value) {
     }
 }
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center;width:100%}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
 
 const CatAlert = class {
     constructor(hostRef) {
@@ -10635,7 +10635,11 @@ const CatTooltip = class {
             await computePosition(this.trigger, this.tooltip, {
                 strategy: 'fixed',
                 placement: this.placement,
-                middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
+                middleware: [
+                    offset(CatTooltip.OFFSET),
+                    flip({ fallbackAxisSideDirection: 'start' }),
+                    shift({ padding: CatTooltip.SHIFT_PADDING })
+                ]
             }).then(({ x, y }) => {
                 if (this.tooltip) {
                     Object.assign(this.tooltip.style, {