npm - q2-tecton-elements - Versions diffs - 1.67.0 → 1.67.1 - Mend

q2-tecton-elements 1.67.0 → 1.67.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (256) hide show

package/dist/components/q2-btn2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-btn2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n\nq2-loading {\n --tct-loading-primary-color: currentcolor;\n --tct-loading-secondary-color: currentcolor;\n --tct-loading-spinner-size: 24px;\n}\n\n.slot-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n pointer-events: none;\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]:not([loading='false'])) button {\n pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n display: block;\n width: 100%;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n}\n\n::slotted(q2-icon) {\n pointer-events: none;\n margin-block: -100px;\n}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 4px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-background-alternative: #ebf8ff;\n\n .btn-height-wrapper {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--app-scale-1x, 5px);\n &:active {\n box-shadow: none;\n }\n }\n}\n\nbutton {\n margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n display: inline-block;\n width: 100%;\n hyphens: auto;\n border: var(--tct-btn-border);\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n font-weight: 400;\n color: inherit;\n cursor: pointer;\n transition: var(--comp-btn-tween);\n transition-property: background, color, box-shadow, fill, border-color, border-width;\n outline: 0;\n min-height: var(--tct-btn-min-height, none);\n\n &:disabled {\n opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n\n &.has-color,\n &.has-intent {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n text-transform: var(--tct-btn-text-transform);\n letter-spacing: var(--tct-btn-letter-spacing, inherit);\n }\n\n &.has-color:not(.has-size),\n &.has-intent:not(.has-size) {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n\n &:not(.has-size) {\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size, 18px);\n }\n }\n }\n\n // #region Size\n\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n :host([size='2']) & {\n padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='3']) & {\n padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n }\n :host([size='4x']) & {\n padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n }\n :host([size='4']) & {\n padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n }\n\n :host([size='small']) & {\n padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n font-size: var-list(var-prefixer(btn-font-size-small), 14px);\n min-height: var(--tct-btn-min-height-small, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-small, 16px);\n }\n }\n }\n\n :host([size='medium']) & {\n padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n font-size: var-list(var-prefixer(btn-font-size-medium), 16px);\n min-height: var(--tct-btn-min-height-medium, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-medium, unset);\n }\n }\n }\n\n :host([size='large']) & {\n padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n font-size: var-list(var-prefixer(btn-font-size-large), 20px);\n min-height: var(--tct-btn-min-height-large, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-large, unset);\n }\n }\n }\n\n // #endregion\n // #region Intent\n\n :host(:not([intent])) &:focus-visible {\n --comp-double-focus-ring-fallback: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;\n box-shadow: var-list(--tct-btn-default-double-focus-visible-ring, --const-double-focus-ring, --comp-double-focus-ring-fallback);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n backdrop-filter: var(--tct-btn-primary-backdrop-filter);\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for active\n --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-font-color);\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\n backdrop-filter: var(--tct-btn-secondary-backdrop-filter);\n --comp-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-hover-background: #{var-list(\n --tct-btn-secondary-hover-background,\n --tct-btn-secondary-hover-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-font-color: var(--app-white, #ffffff);\n --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(secondary, hover, --comp-hover-background, --app-white, null);\n @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(secondary);\n @include btn-icon-color(secondary, --comp-font-color);\n }\n\n :host([intent='workflow-destroy']) & {\n backdrop-filter: var(--tct-btn-destroy-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n --comp-font-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(destroy, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-font-color);\n }\n\n :host([intent='workflow-escape']) & {\n backdrop-filter: var(--tct-btn-escape-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-escape-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for hover/active/focus\n --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n @include btn-ring(escape, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(escape);\n @include btn-icon-color(escape, --comp-font-color);\n }\n\n :host([intent='neutral']) & {\n backdrop-filter: var(--tct-btn-neutral-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n --comp-border-width: 1px;\n --comp-border-style: solid;\n --comp-border-color: var(--comp-font-color);\n @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(neutral);\n @include btn-icon-color(neutral, --comp-font-color);\n }\n\n :host([intent='neutral-text']) & {\n backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);\n --comp-background: #{var-list(\n --tct-btn-neutral-text-background,\n --tct-btn-neutral-text-bg,\n --app-white,\n #ffffff\n )};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-text-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n --comp-hover-text-decoration: underline;\n // different background for focus\n --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n @include btn-ring(neutral-text, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(neutral-text);\n @include btn-icon-color(neutral-text, --comp-font-color);\n }\n\n // #endregion\n // #region Icon Only\n\n &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n min-height: var-list(var-prefixer(btn-icon-height), 44px);\n border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n padding: var(--tct-btn-icon-padding, 0px);\n\n ::slotted(q2-icon) {\n --tct-icon-size: unset;\n }\n\n &.has-size {\n padding: var(--tct-btn-icon-padding, 0px);\n }\n\n &.has-intent {\n padding: var(--tct-btn-icon-padding, 10px);\n border-radius: var-list(--tct-btn-icon-border-radius, --comp-border-radius);\n }\n }\n\n &:not(.has-color):not(.has-intent),\n &.icon-only {\n &:hover,\n &:focus {\n background: var-list(\n --tct-btn-icon-hover-background,\n var-prefixer(btn-icon-hover-bg),\n var-prefixer(gray-13),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n }\n\n &:not(.has-intent).is-active.icon-only {\n background-color: var-list(\n --tct-btn-icon-active-background,\n var-prefixer(btn-icon-active-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n\n &:not(.has-intent).icon-only:hover ,\n &:not(.has-intent).icon-only:focus ,\n &:not(.has-intent).is-active.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // #endregion\n // #region Plain\n\n &:not(.has-intent):not(.icon-only) {\n height: var-list(--tct-btn-height, auto);\n padding-inline: var-list(--tct-btn-padding-inline, 0);\n font-weight: var-list(--tct-btn-font-weight);\n border-radius: var-list(--tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background: var(--tct-btn-hover-background);\n }\n }\n\n // #endregion\n // #region Badges (Deprecated)\n\n :host([badge]) & {\n padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n border-radius: var-list(\n var-prefixer(btn-badge-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 4px\n );\n background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n ::slotted(q2-icon) {\n --tct-icon-size: 1em;\n }\n }\n\n :host([badge]:hover) &:enabled {\n background-color: var-list(\n --tct-btn-badge-hover-background,\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n }\n\n :host(.selected[badge]) &,\n :host([active][badge]) & {\n background-color: var-list(\n --tct-btn-badge-active-background,\n var-prefixer(btn-badge-active-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n }\n\n // #endregion\n // #region Intent Coin\n\n &.intent-coin {\n --tct-avatar-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-avatar-height: #{var-list(--tct-btn-coin-height, 44px)};\n --tct-avatar-width: #{var-list(--tct-btn-coin-width, 44px)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-icon-stroke-secondary: #{var-list(--tct-btn-coin-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-primary: #{var-list(--tct-btn-coin-avatar-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-secondary: #{var-list(--tct-btn-coin-avatar-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-text, #4d4d4d)};\n --tct-icon-stroke-width: #{var-list(--tct-btn-coin-icon-stroke-width, 1px)};\n --tct-btn-padding: 0;\n --tct-avatar-border: #{var-list(--tct-btn-coin-border, 0)};\n --tct-avatar-fallback-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n --tct-btn-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n width: auto;\n backdrop-filter: var(--tct-btn-coin-backdrop-filter);\n box-shadow: var(--tct-btn-coin-box-shadow);\n }\n\n &.intent-coin:hover:not([disabled]),\n &.intent-coin:hover:focus:not(:active):not([disabled])\n {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n --tct-avatar-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-base, #ffffff)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-base, #ffffff)};\n box-shadow: var-list(--tct-btn-coin-hover-box-shadow, --tct-btn-coin-box-shadow, --const-double-focus-ring);\n }\n\n &.intent-coin:focus:not([disabled]) {\n --const-double-focus-ring: 0;\n box-shadow: var-list(--tct-btn-coin-focus-box-shadow, --tct-btn-coin-box-shadow, 0);\n }\n\n &.intent-coin:focus-visible:not([disabled]) {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n box-shadow: var-list(\n --tct-btn-coin-focus-visible-box-shadow,\n --tct-btn-coin-focus-box-shadow,\n --tct-btn-coin-box-shadow,\n --const-double-focus-ring\n );\n }\n\n &.intent-coin:focus:active:not([disabled]) {\n --tct-avatar-background: var(--tct-btn-coin-active-background);\n --tct-avatar-fallback-background: var(--tct-btn-coin-active-background);\n box-shadow: none;\n }\n}\n\n.coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n max-width: 100px;\n text-align: center;\n @include line-clamp(2);\n}\n\n.coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n}\n\n.coin-wrapper {\n --tct-avatar-display: block;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n flex-direction: column;\n width: var(--tct-btn-coin-container-width, 95px);\n\n // only q2-avatar and coin-label slots are allowed for coin buttons\n ::slotted(:not(q2-avatar, [slot='coin-label'])) {\n display: none;\n }\n\n .coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n margin-top: var-list(--tct-btn-coin-gap, --app-scale-2x, 10px);\n max-width: 100px;\n text-align: center;\n\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n }\n}\n// #endregion\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Fragment,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n/*\n @name Button\n * @category Forms\n * @summary Use for triggering actions including submit, save, cancel, or delete.\n * @slot coin-label - An optional slot to display a custom coin button label.\n /\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n // #region Own Properties\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconPosition: 'left' \| 'right' \| 'only';\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Role attribute for better semantic accessibility support\n /\n @Prop({ reflect: true })\n _role: string;\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /\n Displays the component in an active state.\n \n @info\n * Only intended for use with the `badge` property.\n * @deprecated\n /\n @Prop({ reflect: true })\n active: boolean;\n\n @Prop()\n ariaControls: string;\n\n @Prop()\n ariaExpanded: string;\n\n @Prop()\n ariaHasPopup: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n @Prop()\n ariaPressed: string;\n\n @Prop()\n ariaSelected: string;\n\n /\n Displays the component in a smaller, badge style.\n * @deprecated\n /\n @Prop({ reflect: true })\n badge: boolean;\n\n /* The component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n color: string; // deprecated but need it to use utils/handleColor\n\n @Prop()\n description: string;\n\n /* Marks the component as disabled and displays a `not-allowed` cursor on hover. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true })\n fab: boolean;\n\n /\n Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n /\n @Prop({ reflect: true, mutable: true })\n intent:\n \| 'coin'\n \| 'neutral-text'\n \| 'neutral'\n \| 'workflow-destroy'\n \| 'workflow-escape'\n \| 'workflow-primary'\n \| 'workflow-secondary';\n\n /\n Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n \n @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. /\n @Prop({ reflect: true })\n loading: boolean;\n\n /\n Defines the size of q2-btn, it renders as default size if not provided.\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large';\n\n @Prop()\n tabIndex: number;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true })\n type: string = 'button';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the button is clicked.\n */\n @Event()\n tctClick: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.primaryBtn = null;\n this.primaryBtnWrapper = null;\n }\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n this.handleButtonSize();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.loading \|\| this.disabled) {\n event.stopImmediatePropagation();\n return;\n }\n this.tctClick.emit();\n this.primaryBtn.focus();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonAttributes() {\n return {\n ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.composedAriaLabel,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled \|\| false,\n type: this.type,\n tabindex: this.tabIndex \|\| this.tabIndex === 0 ? this.tabIndex : undefined,\n };\n }\n\n get buttonClasses() {\n const classes = [];\n if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n if (this.intent === 'coin') classes.push('intent-coin');\n if (!!this.block) classes.push('is-block');\n if (!!this.color) classes.push('has-color');\n if (!!this.intent) classes.push(`has-intent`);\n if (!!this.size) classes.push('has-size');\n if (!!this.active) classes.push('is-active');\n\n return classes.join(' ');\n }\n\n get coinLabelClasses() {\n const classes = ['coin-label'];\n if (this.disabled) {\n classes.push('disabled');\n }\n\n return classes.join(' ');\n }\n\n get composedAriaLabel(): string \| undefined {\n const baseText =\n this.label && this.hideLabel\n ? loc(this.label)\n : this.label \|\| this.hostElement.textContent.trim() \|\| undefined;\n\n if (!this._tooltip && !baseText) return undefined;\n if (!this._tooltip) return this.hideLabel ? baseText : undefined;\n if (!baseText) return this._tooltip;\n return `${baseText} - ${this._tooltip}`;\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\n };\n\n handleIcons = () => {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc \|\| hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc \|\| hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n };\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n // #endregion\n // #region Render Methods\n\n renderButton() {\n const {\n ariaExpanded,\n ariaHasPopup,\n ariaLabel,\n ariaSelected,\n ariaPressed,\n description,\n disabled,\n type,\n tabindex,\n } = this.buttonAttributes;\n const { iconPosition, loading, badge, hideLabel } = this;\n const renderLoadingSpinner = iconPosition \|\| loading;\n const isLoadingSpinnerInline = !iconPosition \|\| badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={ariaLabel}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={this.buttonClasses}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n role={this._role \|\| undefined}\n >\n <div class=\"slot-container\">\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {this.renderDefaultLabel()}\n {this.renderDefaultCoinSlot()}\n </div>\n </button>\n {this.renderCoinLabel()}\n {!!description && (\n <div\n id=\"hidden-description\"\n aria-hidden=\"true\"\n class=\"sr\"\n >\n {description}\n </div>\n )}\n </Fragment>\n );\n }\n\n renderCoinLabel() {\n if (this.intent !== 'coin' \|\| this.hideLabel) return;\n return (\n <div\n id=\"coin-label\"\n class={this.coinLabelClasses}\n >\n {this.label ? (\n loc(this.label)\n ) : (\n <slot\n name=\"coin-label\"\n onSlotchange={this.handleSlotChange}\n />\n )}\n </div>\n );\n }\n\n renderDefaultCoinSlot() {\n if (this.intent !== 'coin') return;\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n renderDefaultLabel() {\n if (this.intent === 'coin') return;\n if (!this.hideLabel && this.label) return loc(this.label);\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n render() {\n return (this.size === 'small' && this.iconPosition !== 'only') \|\| this.intent === 'coin' ? (\n // wrap only for small sized and coin intent\n <div\n class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={this.size === 'small' ? -1 : undefined}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-btn2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n\nq2-loading {\n --tct-loading-primary-color: currentcolor;\n --tct-loading-secondary-color: currentcolor;\n --tct-loading-spinner-size: 24px;\n}\n\n.slot-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n pointer-events: none;\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]:not([loading='false'])) button {\n pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n display: block;\n width: 100%;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n}\n\n::slotted(q2-icon) {\n pointer-events: none;\n margin-block: -100px;\n}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 4px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-background-alternative: #ebf8ff;\n\n .btn-height-wrapper {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--app-scale-1x, 5px);\n &:active {\n box-shadow: none;\n }\n }\n}\n\nbutton {\n margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n display: inline-block;\n width: 100%;\n hyphens: auto;\n border: var(--tct-btn-border);\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n font-weight: 400;\n color: inherit;\n cursor: pointer;\n transition: var(--comp-btn-tween);\n transition-property: background, color, box-shadow, fill, border-color, border-width;\n outline: 0;\n min-height: var(--tct-btn-min-height, none);\n\n &:disabled {\n opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n\n &.has-color,\n &.has-intent {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n text-transform: var(--tct-btn-text-transform);\n letter-spacing: var(--tct-btn-letter-spacing, inherit);\n }\n\n &.has-color:not(.has-size),\n &.has-intent:not(.has-size) {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n\n &:not(.has-size) {\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size, 18px);\n }\n }\n }\n\n // #region Size\n\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n :host([size='2']) & {\n padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='3']) & {\n padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n }\n :host([size='4x']) & {\n padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n }\n :host([size='4']) & {\n padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n }\n\n :host([size='small']) & {\n padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n font-size: var-list(var-prefixer(btn-font-size-small), 14px);\n min-height: var(--tct-btn-min-height-small, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-small, 16px);\n }\n }\n }\n\n :host([size='medium']) & {\n padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n font-size: var-list(var-prefixer(btn-font-size-medium), 16px);\n min-height: var(--tct-btn-min-height-medium, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-medium, unset);\n }\n }\n }\n\n :host([size='large']) & {\n padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n font-size: var-list(var-prefixer(btn-font-size-large), 20px);\n min-height: var(--tct-btn-min-height-large, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-large, unset);\n }\n }\n }\n\n // #endregion\n // #region Intent\n\n :host(:not([intent])) &:focus-visible {\n --comp-double-focus-ring-fallback: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;\n box-shadow: var-list(--tct-btn-default-double-focus-visible-ring, --const-double-focus-ring, --comp-double-focus-ring-fallback);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n backdrop-filter: var(--tct-btn-primary-backdrop-filter);\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for active\n --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-font-color);\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\n backdrop-filter: var(--tct-btn-secondary-backdrop-filter);\n --comp-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-hover-background: #{var-list(\n --tct-btn-secondary-hover-background,\n --tct-btn-secondary-hover-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-font-color: var(--app-white, #ffffff);\n --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(secondary, hover, --comp-hover-background, --app-white, null);\n @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(secondary);\n @include btn-icon-color(secondary, --comp-font-color);\n }\n\n :host([intent='workflow-destroy']) & {\n backdrop-filter: var(--tct-btn-destroy-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n --comp-font-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(destroy, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-font-color);\n }\n\n :host([intent='workflow-escape']) & {\n backdrop-filter: var(--tct-btn-escape-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-escape-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for hover/active/focus\n --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n @include btn-ring(escape, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(escape);\n @include btn-icon-color(escape, --comp-font-color);\n }\n\n :host([intent='neutral']) & {\n backdrop-filter: var(--tct-btn-neutral-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n --comp-border-width: 1px;\n --comp-border-style: solid;\n --comp-border-color: var(--comp-font-color);\n @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(neutral);\n @include btn-icon-color(neutral, --comp-font-color);\n }\n\n :host([intent='neutral-text']) & {\n backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);\n --comp-background: #{var-list(\n --tct-btn-neutral-text-background,\n --tct-btn-neutral-text-bg,\n --app-white,\n #ffffff\n )};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-text-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n --comp-hover-text-decoration: underline;\n // different background for focus\n --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n @include btn-ring(neutral-text, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(neutral-text);\n @include btn-icon-color(neutral-text, --comp-font-color);\n }\n\n // #endregion\n // #region Icon Only\n\n &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n min-height: var-list(var-prefixer(btn-icon-height), 44px);\n border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n padding: var(--tct-btn-icon-padding, 0px);\n\n ::slotted(q2-icon) {\n --tct-icon-size: unset;\n }\n\n &.has-size {\n padding: var(--tct-btn-icon-padding, 0px);\n }\n\n &.has-intent {\n padding: var(--tct-btn-icon-padding, 10px);\n border-radius: var-list(--tct-btn-icon-border-radius, --comp-border-radius);\n }\n }\n\n &:not(.has-color):not(.has-intent),\n &.icon-only {\n &:hover,\n &:focus {\n background: var-list(\n --tct-btn-icon-hover-background,\n var-prefixer(btn-icon-hover-bg),\n var-prefixer(gray-13),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n }\n\n &:not(.has-intent).is-active.icon-only {\n background-color: var-list(\n --tct-btn-icon-active-background,\n var-prefixer(btn-icon-active-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n\n &:not(.has-intent).icon-only:hover ,\n &:not(.has-intent).icon-only:focus ,\n &:not(.has-intent).is-active.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // #endregion\n // #region Plain\n\n &:not(.has-intent):not(.icon-only) {\n height: var-list(--tct-btn-height, auto);\n padding-inline: var-list(--tct-btn-padding-inline, 0);\n font-weight: var-list(--tct-btn-font-weight);\n border-radius: var-list(--tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background: var(--tct-btn-hover-background);\n }\n }\n\n // #endregion\n // #region Badges (Deprecated)\n\n :host([badge]) & {\n padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n border-radius: var-list(\n var-prefixer(btn-badge-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 4px\n );\n background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n ::slotted(q2-icon) {\n --tct-icon-size: 1em;\n }\n }\n\n :host([badge]:hover) &:enabled {\n background-color: var-list(\n --tct-btn-badge-hover-background,\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n }\n\n :host(.selected[badge]) &,\n :host([active][badge]) & {\n background-color: var-list(\n --tct-btn-badge-active-background,\n var-prefixer(btn-badge-active-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n }\n\n // #endregion\n // #region Intent Coin\n\n &.intent-coin {\n --tct-avatar-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-avatar-height: #{var-list(--tct-btn-coin-height, 44px)};\n --tct-avatar-width: #{var-list(--tct-btn-coin-width, 44px)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-icon-stroke-secondary: #{var-list(--tct-btn-coin-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-primary: #{var-list(--tct-btn-coin-avatar-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-secondary: #{var-list(--tct-btn-coin-avatar-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-text, #4d4d4d)};\n --tct-icon-stroke-width: #{var-list(--tct-btn-coin-icon-stroke-width, 1px)};\n --tct-btn-padding: 0;\n --tct-avatar-border: #{var-list(--tct-btn-coin-border, 0)};\n --tct-avatar-fallback-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n --tct-btn-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n width: auto;\n backdrop-filter: var(--tct-btn-coin-backdrop-filter);\n box-shadow: var(--tct-btn-coin-box-shadow);\n }\n\n &.intent-coin:hover:not([disabled]),\n &.intent-coin:hover:focus:not(:active):not([disabled])\n {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n --tct-avatar-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-base, #ffffff)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-base, #ffffff)};\n box-shadow: var-list(--tct-btn-coin-hover-box-shadow, --tct-btn-coin-box-shadow, --const-double-focus-ring);\n }\n\n &.intent-coin:focus:not([disabled]) {\n --const-double-focus-ring: 0;\n box-shadow: var-list(--tct-btn-coin-focus-box-shadow, --tct-btn-coin-box-shadow, 0);\n }\n\n &.intent-coin:focus-visible:not([disabled]) {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n box-shadow: var-list(\n --tct-btn-coin-focus-visible-box-shadow,\n --tct-btn-coin-focus-box-shadow,\n --tct-btn-coin-box-shadow,\n --const-double-focus-ring\n );\n }\n\n &.intent-coin:focus:active:not([disabled]) {\n --tct-avatar-background: var(--tct-btn-coin-active-background);\n --tct-avatar-fallback-background: var(--tct-btn-coin-active-background);\n box-shadow: none;\n }\n}\n\n.coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n max-width: 100px;\n text-align: center;\n @include line-clamp(2);\n}\n\n.coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n}\n\n.coin-wrapper {\n --tct-avatar-display: block;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n flex-direction: column;\n width: var(--tct-btn-coin-container-width, 95px);\n\n // only q2-avatar and coin-label slots are allowed for coin buttons\n ::slotted(:not(q2-avatar, [slot='coin-label'])) {\n display: none;\n }\n\n .coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n margin-top: var-list(--tct-btn-coin-gap, --app-scale-2x, 10px);\n max-width: 100px;\n text-align: center;\n\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n }\n}\n// #endregion\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Fragment,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n/*\n @name Button\n * @category Forms\n * @summary Use for triggering actions including submit, save, cancel, or delete.\n * @slot coin-label - An optional slot to display a custom coin button label.\n /\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n // #region Own Properties\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconPosition: 'left' \| 'right' \| 'only';\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Role attribute for better semantic accessibility support\n /\n @Prop({ reflect: true })\n _role: string;\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /\n Displays the component in an active state.\n \n @info\n * Only intended for use with the `badge` property.\n * @deprecated\n /\n @Prop({ reflect: true })\n active: boolean;\n\n @Prop()\n ariaControls: string;\n\n @Prop()\n ariaExpanded: string;\n\n @Prop()\n ariaHasPopup: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n @Prop()\n ariaPressed: string;\n\n @Prop()\n ariaSelected: string;\n\n /\n Displays the component in a smaller, badge style.\n * @deprecated\n /\n @Prop({ reflect: true })\n badge: boolean;\n\n /* The component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n color: string; // deprecated but need it to use utils/handleColor\n\n @Prop()\n description: string;\n\n /* Marks the component as disabled and displays a `not-allowed` cursor on hover. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true })\n fab: boolean;\n\n /\n Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n /\n @Prop({ reflect: true, mutable: true })\n intent:\n \| 'coin'\n \| 'neutral-text'\n \| 'neutral'\n \| 'workflow-destroy'\n \| 'workflow-escape'\n \| 'workflow-primary'\n \| 'workflow-secondary';\n\n /\n Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n \n @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. /\n @Prop({ reflect: true })\n loading: boolean;\n\n /\n Defines the size of q2-btn, it renders as default size if not provided.\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large';\n\n @Prop()\n tabIndex: number;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true })\n type: string = 'button';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the button is clicked.\n */\n @Event()\n tctClick: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.primaryBtn = null;\n this.primaryBtnWrapper = null;\n }\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n this.handleButtonSize();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.loading \|\| this.disabled) {\n event.stopImmediatePropagation();\n return;\n }\n this.tctClick.emit();\n this.primaryBtn?.focus();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn?.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonAttributes() {\n return {\n ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.composedAriaLabel,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled \|\| false,\n type: this.type,\n tabindex: this.tabIndex \|\| this.tabIndex === 0 ? this.tabIndex : undefined,\n };\n }\n\n get buttonClasses() {\n const classes = [];\n if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n if (this.intent === 'coin') classes.push('intent-coin');\n if (!!this.block) classes.push('is-block');\n if (!!this.color) classes.push('has-color');\n if (!!this.intent) classes.push(`has-intent`);\n if (!!this.size) classes.push('has-size');\n if (!!this.active) classes.push('is-active');\n\n return classes.join(' ');\n }\n\n get coinLabelClasses() {\n const classes = ['coin-label'];\n if (this.disabled) {\n classes.push('disabled');\n }\n\n return classes.join(' ');\n }\n\n get composedAriaLabel(): string \| undefined {\n const baseText =\n this.label && this.hideLabel\n ? loc(this.label)\n : this.label \|\| this.hostElement.textContent.trim() \|\| undefined;\n\n if (!this._tooltip && !baseText) return undefined;\n if (!this._tooltip) return this.hideLabel ? baseText : undefined;\n if (!baseText) return this._tooltip;\n return `${baseText} - ${this._tooltip}`;\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\n };\n\n handleIcons = () => {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc \|\| hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc \|\| hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n };\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n // #endregion\n // #region Render Methods\n\n renderButton() {\n const {\n ariaExpanded,\n ariaHasPopup,\n ariaLabel,\n ariaSelected,\n ariaPressed,\n description,\n disabled,\n type,\n tabindex,\n } = this.buttonAttributes;\n const { iconPosition, loading, badge, hideLabel } = this;\n const renderLoadingSpinner = iconPosition \|\| loading;\n const isLoadingSpinnerInline = !iconPosition \|\| badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={ariaLabel}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={this.buttonClasses}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n role={this._role \|\| undefined}\n >\n <div class=\"slot-container\">\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {this.renderDefaultLabel()}\n {this.renderDefaultCoinSlot()}\n </div>\n </button>\n {this.renderCoinLabel()}\n {!!description && (\n <div\n id=\"hidden-description\"\n aria-hidden=\"true\"\n class=\"sr\"\n >\n {description}\n </div>\n )}\n </Fragment>\n );\n }\n\n renderCoinLabel() {\n if (this.intent !== 'coin' \|\| this.hideLabel) return;\n return (\n <div\n id=\"coin-label\"\n class={this.coinLabelClasses}\n >\n {this.label ? (\n loc(this.label)\n ) : (\n <slot\n name=\"coin-label\"\n onSlotchange={this.handleSlotChange}\n />\n )}\n </div>\n );\n }\n\n renderDefaultCoinSlot() {\n if (this.intent !== 'coin') return;\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n renderDefaultLabel() {\n if (this.intent === 'coin') return;\n if (!this.hideLabel && this.label) return loc(this.label);\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n render() {\n return (this.size === 'small' && this.iconPosition !== 'only') \|\| this.intent === 'coin' ? (\n // wrap only for small sized and coin intent\n <div\n class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={this.size === 'small' ? -1 : undefined}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-calendar.js CHANGED Viewed

@@ -1233,7 +1233,7 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class Q2Calendar extends H
         return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, "aria-expanded": `${!!this.open}`, "aria-controls": "calendar-popover", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'b56461b08364576460861bfacee8da16e482d85b', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '9bba51d05ce0752dd874361c7f3b9b82db86bc70', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
+        return (h("click-elsewhere", { key: '0982135e2be03261bf81a48de77ef8d564cedb78', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: 'd18140e57015148d2e2bb86e00af20a5d8d8d69f', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-card-image.js CHANGED Viewed

@@ -365,11 +365,11 @@ const Q2CardImage$1 = /*@__PURE__*/ proxyCustomElement(class Q2CardImage extends
     render() {
         const cardContent = this.clickable ? (h("q2-btn", { disabled: this.disabled, label: this.accessibilityLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: 'd1592e6d7239707ec8608f9458bc0066bca5d407', class: {
+        return (h(Host, { key: '3c71f0e8e6fd22ebf3a3e3b98f890767ced6060b', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: 'e45f8f705256b70e527d5e95d3a13b7c9e1938e2', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: '761c7a611ec3f8e0ffd7a5b51e2944f83876f5ae', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/q2-carousel-pane.js CHANGED Viewed

@@ -99,12 +99,12 @@ const Q2CarouselPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2CarouselPane e
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '156420cbdaf48d8d1e6e14c05e745ff0df308a2a', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: '6d221b15545378efa40b54864b2ebca1bcb1e983', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: '2f61bdfa9d9e4413941d0ca2f1edc9fc2cd48e8e', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'd498b8a73ba1a668bb768891d37b2303db976012' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '394965fb0a46501fcd33aa3acadb2eaae6a1accd', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'a059daeb1c5192cec8594b6c9843828d6b833f12' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-carousel.js CHANGED Viewed

@@ -5031,7 +5031,7 @@ const Q2Carousel$1 = /*@__PURE__*/ proxyCustomElement(class Q2Carousel extends H
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (h(Host, { key: '56ecddd3c2bbad43dba7fdb949d539a937b3e5f0', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (h(Host, { key: '7c8a2c87c41d8621971bff9a22ab8de2439276c5', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
             this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&

package/dist/components/q2-chart-area.js CHANGED Viewed

@@ -274,7 +274,7 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '81f8432837d66f500da8403dbc25727c44635a03', class: "container" }, h("div", { key: 'fcd3f4aa43d89467591140cbe211c7d5e35316fa', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '247b79eca7719feab470918648f223675483daf8', class: "container" }, h("div", { key: '349272c0ece24581f05dcadb81d7a19dd71eaa2d', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-bar.js CHANGED Viewed

@@ -220,7 +220,7 @@ const Q2ChartBar$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartBar extends H
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'bea029d1b2ab1650f3a8dd60f64bd5640752632b', class: "container" }, h("div", { key: '1a240fcde7691730648aa698a3cb57b98cb1f95f', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: '36a77a29d5e06363f2cd2267c298429cd2ef9864', class: "container" }, h("div", { key: 'e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-donut.js CHANGED Viewed

@@ -869,7 +869,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '473d5d1b512e2d4d9ad9e215ebf597aaad0854d2', onChange: this.onClickElsewhere }, h("figure", { key: 'aa22d00635231662d6b446066b9fdc33c2f8748d' }, h("div", { key: '71f74bf9dbc69de99a88204ccc51d4d5864dfbf3', class: "container" }, h("div", { key: '9d2ff90b01d25ecd018a5e1a10dbac4726557ebb', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '0795c3b57206c94c65ab1e81162dc9409426dbe9' }, h("q2-legend", { key: '58009cbd37d9ffaea2dd429b074f00b736eea866', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: 'e11f9f591cc6329f91d2017d556cabe0f3f797c9', onChange: this.onClickElsewhere }, h("figure", { key: 'af092b44df48422b76507f557ca6aa6508753de9' }, h("div", { key: '4384fdcb1864496619ab0b097e71faa22eb3aeb5', class: "container" }, h("div", { key: '99f261a2ba8952b598d28599c2b1848fcfdecf6c', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '4ead6e4332aeda66219d3a2c7ac15b0446442734' }, h("q2-legend", { key: '53d5408e4beb519dd9af1a06603ca7f3cc597577', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-checkbox-group.js CHANGED Viewed

@@ -123,7 +123,7 @@ const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (h(Fragment, { key: 'eaff44b5a38dc022c372e375ec153d42b4a52c7f' }, showLabelRow && (h("div", { key: '8252c6b3958656e3891709de3c54eb6a74247bf0', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '7a9e381063cfc689f0828dfb926434a9c042121a', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: 'c6e3ffeab88703d7a39216400e9c56021e918dc6', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '671bef4db48e6181a3d1ac542b3c50495b6d1d70', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: '043796604c9300ba8c04d6d53c7a554ba87dc159', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '045db0eb9522964c61680474aaf53cf75c373804' }, showLabelRow && (h("div", { key: 'e372b876b16c4122c86c4f5573e403965a75b7d2', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: 'b188c3e6715a50a6cb8ba83f4140b2eef3ca688d', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '192f18d69d85d38dc0be8116c207961c9e4dcd28', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '9e66e81e0f6aa9bd54a857ebfccc851f9efa4f68', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: '9bb04149f29a9727e3350f06feeda8a171e41ee0', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-checkbox2.js CHANGED Viewed

@@ -106,7 +106,7 @@ const Q2Checkbox = /*@__PURE__*/ proxyCustomElement(class Q2Checkbox extends HTM
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: 'ef32fc123a8e6205ae9821781d4a74391d68761e', class: "container" }, h("input", { key: '4d2e8c0e0a938a27a7252479ed462f14c286363e', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '79b3f172df48a414ee1d612d73f1c3cbb89c6cc6', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": this.composedAriaLabel }, this.renderCheckboxSVG()), h("div", { key: '16ed427817793e7660fc6912cef776c1e3428468', class: textLabelClasses.join(' ') }, h("label", { key: 'cc58ac3186fc7052f11dafd92dc50837ebdf729d', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, h("div", { key: '62bf345f92850ea1e4e9f8dae1e88c739ef71a91', class: "label-content" }, loc(this.label), h("slot", { key: 'c334401be83f977cd1b53ddf5b64182d528c1106' })))), this.description && (h("div", { key: '2b71f3fb0ce8d4990319bc89a4b924ff4dd75018', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '7997e4f646425502ef9c924581fcdeb8360be82e', class: "container" }, h("input", { key: '75006c1a654bd5ba93dc1971b06e081a4f123af0', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: 'e187b2771f6d8bb20ea77f31fa8dded912b6f295', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": this.composedAriaLabel }, this.renderCheckboxSVG()), h("div", { key: 'd0a189c6d027457baf0b29947d199087fb354467', class: textLabelClasses.join(' ') }, h("label", { key: '15df8e10cae026b83d4ab973140cd7b6c71cc483', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, h("div", { key: 'e868eb6071d299662b7e7ff9581be1dfc192e607', class: "label-content" }, loc(this.label), h("slot", { key: '5bbd14bb697961435495efda9f0fc81801e67992' })))), this.description && (h("div", { key: '2b4783d58e21419b5209a77a7717fcaaa1ff39c3', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-context.js CHANGED Viewed

@@ -121,7 +121,7 @@ const Q2Context$1 = /*@__PURE__*/ proxyCustomElement(class Q2Context extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a27dbbacf5ed1c7dc15b518dc3fee0335d97926b', class: "context-wrapper" }, h("q2-item", { key: 'bc9e829de88f274ec0532377b4bdd84032cef8b3', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '084d99e60dd4dec06cc1beb81efbbfc7fb2663a9', name: "decorator", slot: "decorator" })), h("div", { key: '53c7bd5e403b7442d10fc3bcad8cd7e491eb8fec', class: "context-body", slot: "body" }, h("slot", { key: '60767e189adb1c4140b56611f9bd933fcce0826a', name: "header" }), h("slot", { key: '2013b5f196bcc17fefda3b043055ad665c6d583f', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: 'c3bd6b034484513b78a6c624fa475becf93db41c', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: '6b701240841e7410c8073b4f4ec80f1de2d00233', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: '5a7bdc0302a884d05099b3085ef62f8bf261ea48', class: "action-group", orientation: "horizontal" }, h("slot", { key: '2c9a6533e01e2d54d4fb423098e03d38eb330787', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'b1742a26d9b0ff89e9049af8d82872044d219352', name: "footer" })));
+        return (h("div", { key: 'e5721a07d072dc6fa3db22edfd50c5787946ff9a', class: "context-wrapper" }, h("q2-item", { key: 'f7591f8009e1f28d3e0fffb57dc280bd53a5cafe', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '74215ffc70d4a19a00c921869391843539f28a6a', name: "decorator", slot: "decorator" })), h("div", { key: 'c1f51789a6cdbe7a12a055da39e2a3747639aff3', class: "context-body", slot: "body" }, h("slot", { key: 'a3d4fc206925aa9f23bba1d785b2df9b74cef2a5', name: "header" }), h("slot", { key: '5e4bd0a3f595c52b1a8d60ff2a06b4333919719f', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '26891e4fd22716ff431df7c98814d3086fa7a48e', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: '6f5102f66edfa4bdc043e4907d09e22d70218b7d', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: 'a01f3f19278f94ec67fa21a34a5f8d26823a1000', class: "action-group", orientation: "horizontal" }, h("slot", { key: '86051221e06ac1c4b68bf31228f68724e67474e0', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'f12d517e123e1cc7ef3c85fb53e5d227a82f3132', name: "footer" })));
     }
     get hostElement() { return this; }
     static get style() { return q2ContextCss; }

package/dist/components/q2-currency.js CHANGED Viewed

@@ -142,7 +142,7 @@ const Q2Currency$1 = /*@__PURE__*/ proxyCustomElement(class Q2Currency extends H
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (h("div", { key: 'e88c26d1d9cc2bbb390ca8d6957fdaa693df2b4f', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '208cf499f136d6b865467e0de0583cc3fa171974' }, '('), hasPlusMinusSign && h("span", { key: 'be464d5fa79b176e2745170b99e551fcaafeea47' }, plusMinusSign), currencyIsFront && h("span", { key: '26c9df2005a3e007bdc89ae539e4afcd1f204e00', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: 'b2a2fe99142fdea724ea5e868d164df4fdf93f14' }, amountCore), h("span", { key: '62bd1da9c76dd2eedd3bd596d2d60224f9e5ee27', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '5c6962251aa47a06b19978b9328484fcf34ab944', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '2b4742aede9c30f2657f7f447258b2574bc20668' }, ')')));
+        return (h("div", { key: '53d88008437b187887c49fcfd41d7f9d8c6bb587', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'efce7009afdc9aa7d368f545a118806502801b28' }, '('), hasPlusMinusSign && h("span", { key: '452052007a26cfd879e4ded8540c9f825ebafb14' }, plusMinusSign), currencyIsFront && h("span", { key: '236e79e2e5612ee67d22f44947996d634056abcf', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: 'c69146375af1d37aac010be7fcd41da050c8802e' }, amountCore), h("span", { key: 'd9fe34e10fe29a0ccaee6a6d1fcea0f52aebd0b3', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '741effd6b2ef88b22e38638c100f6d29195ffcb3', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'ee2fd9317e37ac484e6bbc9d458e988d360abe2e' }, ')')));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-data-table.js CHANGED Viewed

@@ -413,7 +413,7 @@ const Q2DataTable$1 = /*@__PURE__*/ proxyCustomElement(class Q2DataTable extends
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: '533488f640cdf4168a700577a4bcf9acd28e1bda', class: "container" }, h("table", { key: 'f4abd2490f9ddba75d625da6c204f28a29401887' }, caption && h("caption", { key: '8abccbdc4a2267866b7c9da434b74376c307134b', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: 'c60810b5cc26058b94829ee4f7942df9804403e9', class: "container" }, h("table", { key: '5fab9778577ef7b24955e3219a1bc054db6703f9' }, caption && h("caption", { key: 'daa8d4647859d4eeace2b9f4103bd73e5494b633', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)

package/dist/components/q2-detail.js CHANGED Viewed

@@ -105,7 +105,7 @@ const Q2Detail$1 = /*@__PURE__*/ proxyCustomElement(class Q2Detail extends HTMLE
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'ce06094f78401084450ccd7e20d93c795ead16e6', class: this.detailClasses }, this.hasLabel && (h("div", { key: '094f194cf4ef5d5d298ccf3e1ae53bcd17b4431c', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'a1512acca65fd932e9d7541b5a30077e5045b786', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: 'd92d66fcec6add5b649aa45fd11c5c778d5be0b3', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'c4538e909b1c4ac9e298a9ec25240e56eba42cfd', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'f6ce65ea2ad6b1d6c64d0ff69a66bd1fa5aa868d', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     get hostElement() { return this; }
     static get style() { return q2DetailCss; }

package/dist/components/q2-dropdown.js CHANGED Viewed

@@ -371,7 +371,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'fddcaea136198e746262b9e39145c2cd54ad8818', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '3c10e2db2387b2d2eb3e252e900936ad90c8c4c7', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: 'ea2a11332207e2ee9d35a9f3acc296e32969efb2', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: 'd4604df87b1f646f7703feb16622a136a695b41a', name: "popover-top" }), h("q2-option-list", { key: '31bc9e561470804a7065389c1017b2f9d1bee62f', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '23045585b7fe0b271e988f530bf597dbab284abd' })), h("slot", { key: '83c9d50b07e8f30f52e2531e541b4a256a41517c', name: "popover-bottom" }))));
+        return (h("click-elsewhere", { key: '23504511d2b87c3159647349f905de98de329db5', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'dc0b8de4939d8ac3414c470b329e775342a4879d', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '25345315dc70726e152793271c446ed34a4fcc0c', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '4c885f96ce096b0a1a2a743892531910c82cfa5c', name: "popover-top" }), h("q2-option-list", { key: 'c4a045130b22ce5e5c462811cb8980310b16d50e', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '9b5955c327df96213e10971fef01aadcc253a1d5' })), h("slot", { key: 'ac3d4f37bfdbef9239e389401cdfc4dfadf497dc', name: "popover-bottom" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-editable-field.js CHANGED Viewed

@@ -216,7 +216,7 @@ const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class Q2EditableField
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6e46732a7663155081c4144e476f30d4b965d92a' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '2a71fc720f0f0ea686e34509d3a78a86a9100bd9' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-example.js CHANGED Viewed

@@ -127,7 +127,7 @@ const Q2Example$1 = /*@__PURE__*/ proxyCustomElement(class Q2Example extends HTM
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: '2477b905f10ebabc95afa6362d5fef0ffa1cf266', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: 'dbe4a678c04f60cc08aabd47cc9fa3871265e0f0', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/q2-form.js CHANGED Viewed

@@ -14,7 +14,7 @@ const Q2Form$1 = /*@__PURE__*/ proxyCustomElement(class Q2Form extends HTMLEleme
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '41d956df983865cc2a6c0fe1bd4ffffefa93486f', class: "container" }, h("slot", { key: '293087685e8a10b88a50eaa032dd2ab91bffd44b' })));
+        return (h("div", { key: '773e56276df2f42dd330167ffba2a9d08a90f2f7', class: "container" }, h("slot", { key: '4d92e4844684a5418edb39c18674042cba90ba58' })));
     }
     static get style() { return q2FormCss; }
 }, [1, "q2-form", {

package/dist/components/q2-formatted-text.js CHANGED Viewed

@@ -72,7 +72,7 @@ const Q2FormattedText$1 = /*@__PURE__*/ proxyCustomElement(class Q2FormattedText
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '21e3c3fd0c2087a24f1420c216cba11c27494057', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: 'e1d25b8e88a28f2ec468de8afd6f56e85955f266' }, this.formattedValue)));
+        return (h("div", { key: 'b9fc58891cbcec6ea19bc8c0b2514df003697f02', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '1b4e77284dc329065a281e7b2f2fce22e6cfc01a' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

package/dist/components/q2-grid-area.js CHANGED Viewed

@@ -109,7 +109,7 @@ const Q2GridArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2GridArea extends H
             '--xl-align-self': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
             '--xl-z-index': `${this.computedXlZIndex}`,
         };
-        return (h(Host, { key: '7e2f7933ba52dd99f90350dfb3a2778d1c1a37d0', style: q2GridAreaStyles }, h("slot", { key: '39371e8a0fb1c1bd9c248ba5b8095f9bdd6022e7' })));
+        return (h(Host, { key: 'd26c984d2ad2022162a1e4bfcb17f3770c0a95d3', style: q2GridAreaStyles }, h("slot", { key: '7951a611fc9bdf5b0f4535f995317765323eca21' })));
     }
     get hostElement() { return this; }
     static get style() { return q2GridAreaCss; }

package/dist/components/q2-grid.js CHANGED Viewed

@@ -91,7 +91,7 @@ const Q2Grid$1 = /*@__PURE__*/ proxyCustomElement(class Q2Grid extends HTMLEleme
             '--xl-justify-items': this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--xl-align-items': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
         };
-        return (h(Fragment, { key: '3fb3de0d4c9b17b30e9b513669b7d12edc702914' }, h("div", { key: 'be68db8fe15dd325f553d5f838cc91f5709f251b', style: q2GridStyles, class: "q2-grid" }, h("slot", { key: '5b9819228a885661846862a619b9a30792bc8ac0' }))));
+        return (h(Fragment, { key: 'ab38b4849ec0cdf8ab49d536bb440df6f21b93d7' }, h("div", { key: '0fd537b2867d871be69269d983234f9f6e47edeb', style: q2GridStyles, class: "q2-grid" }, h("slot", { key: 'd9d7b5d7bbcde66f0bcef49c2c31906e12536e90' }))));
     }
     static get style() { return q2GridCss; }
 }, [1, "q2-grid", {

package/dist/components/q2-input2.js CHANGED Viewed

@@ -3576,7 +3576,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: 'fde8332c0098e6db906a3ae3aa6fb5bda3e5c183', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '258def8229372ba6486aeb04c59a3bbaa8a5b5f9', class: this.wrapperClasses }, h("div", { key: '37b18f4a5802f8fafaf234585fbf05270ab90778', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: 'a52558bdbfb0af1b8c326d4b5b45995342864f1f', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: 'cdad28a61dab48bc95a2aeb4999882ab236cbaf0', class: this.wrapperClasses }, h("div", { key: '7e935a86fda4632f5caf3250d567da0b4f3dc467', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-item2.js CHANGED Viewed

@@ -107,7 +107,7 @@ const Q2Item = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLElement
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: 'ca6b1f858b9857c47204acc08f686727ee8beeeb', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: '230306123ce534b5d581d5d3c8ac43abc51e5b4e', class: this.decoratorClasses }, h("slot", { key: 'a4cf798e99caa5f158bcffcf88a7fa8655c26a83', name: "decorator" }, h("slot", { key: 'e2e97954c5d6b4eacbbd9a39c78296cb273daa06', name: "bullet" })))), h("div", { key: '482f65fea497fbca187cc77849584fd4f3a07aff', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '8863cc54ea1f757f0eafd879e15d9647b5a426e6', class: "header" }, h("slot", { key: '2977d0908edde16d5b3f2c0cddd3254cce20b68a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'ba3e78a5001eb2fe8103b4320781dbc093d5e965', class: "body" }, h("slot", { key: '8c0d7c06c88ba2c3e338db99d99095552c40e787', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '89ba277d280eb8b847252c9cecd556b6308d240d', class: this.actionClasses }, h("slot", { key: 'd690fc381d89367183832c70c48d0de1f263b5bc', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '5cda2ab77b732eb6449b6afe5944a4a68fb5ffb4', class: this.footerClasses }, h("slot", { key: 'ac4fbf27d7af6aa9b383096a415770c972efbade', name: "footer" })))));
+        return (h("div", { key: '9d9c2b041d9e1813b5df96ae96a4efc0a8573e1b', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: 'e6af6612a3856a83c831be21de0c85148b3ad349', class: this.decoratorClasses }, h("slot", { key: '919dfa25724858eb1c81d0d9de9dc0e672be57f1', name: "decorator" }, h("slot", { key: 'ac57ea70bc6ba07e0ba931dbcccc7c7d0f70c293', name: "bullet" })))), h("div", { key: '62ff508897f031fab005787d56c10655903dec99', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'c5d3ef40bdf9c241705117864202d050d5a99646', class: "header" }, h("slot", { key: '3036d8dad872c9be20879c8128ecf3a3a443b305', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '4b95df71025cf46d4026cb42b6c5e06156cd5100', class: "body" }, h("slot", { key: '55a339bbf42143b034f69ac9cdc65f9b74d77b1e', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '2b1ba9dd4ea25d7f168389358563efd93a14b9fc', class: this.actionClasses }, h("slot", { key: '0aa65030b6db7c641ad346040eaa4835596d35e9', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'b2544bdff69493915f4b10789f2b609eaa2176ad', class: this.footerClasses }, h("slot", { key: 'b5417cf58a68cee1a2abdd0cb51a4d1973b1ae38', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return q2ItemCss; }

package/dist/components/q2-legend2.js CHANGED Viewed

@@ -118,7 +118,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '2edad285ad14be5cdee30e071d1e5e11337076f0', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '11104022e84eddd37155299b0833c71bc9a0582d' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '4d2152f5506fd3c000cd13a10d7cb21191fd4a35', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '80a3258fc7fa73aadd20ad7eb0beeb5cee6f47f8' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/components/q2-list2.js CHANGED Viewed

@@ -69,7 +69,7 @@ const Q2List = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLElement
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '627d68ebcba5f0d9dea1ab60481c380916c76ae5', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'f5567987b84f12874e4a8c42b846f5785b99e2bb', class: this.headerClasses }, h("div", { key: '0664369f4d92be4486f8d672f62c0d3478c13c2a', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'faa8de8696790abc591632e5bc182228da532562', name: "filter" }))), h("div", { key: '60a4c2980ea5462df148e31251a59142e001b5f3', role: "list" }, h("slot", { key: '935730bc5de751dcd25111cdd4f9cb6b9d00f10b' }))));
+        return (h("div", { key: 'f4eef6a9600afff93d1c66833138eb88a81edba3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a84cb093f8c32752c3b968fc346727e5128a0bf6', class: this.headerClasses }, h("div", { key: '9f0632191b686ad4eb2f7dac0c5fd6c0fbe3f345', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'f66033fc4039ed99278e0b7978de57bba6b73fb6', name: "filter" }))), h("div", { key: 'bd58bea54efd17e135f1894fe0ed43e3371abe3e', role: "list" }, h("slot", { key: '73df8c2367d93a4a2df07ff0bf3ecc2078e35a6a' }))));
     }
     get hostElement() { return this; }
     static get style() { return q2ListCss; }

package/dist/components/q2-message2.js CHANGED Viewed

@@ -68,7 +68,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'aff2483085e25648ba989847f10c91250df281a9', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '6f416c44047bfce1f0f788edf7545a1d0da4b55c', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'f144ac7da5821a8c7f5df44d2ed7b16ee35d025c', class: "sr" }), h("div", { key: 'ebff5b28951e94eaf1cb83d67b4376c3636f3143', class: "sr message-label" }, messageLabel), h("div", { key: '40f3902af3e4b79ee61c3f2dc0f63cd209694c83', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '6843ae94d50f20f2599a92d5e31122498cee53a5' }))));
+        return (h("div", { key: '18638881b4ef7a62a3681181d2a4339bcb76d0de', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '891ef403fa0d485c83e585d5a3225e39c39b7123', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'fdef50ee27ac0da34438995a985310bcdaeb2338', class: "sr" }), h("div", { key: '111869893bfbea57491ac365247890444602a0c4', class: "sr message-label" }, messageLabel), h("div", { key: '44b73f49446eaada25bf4b05ac32e88c2bfd1cb2', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '09003ab82d44a89c00c06e42d916cd3f7fa930ed' }))));
     }
     get hostElement() { return this; }
     static get style() { return q2MessageCss; }

package/dist/components/q2-meter.js CHANGED Viewed

@@ -116,7 +116,7 @@ const Q2Meter$1 = /*@__PURE__*/ proxyCustomElement(class Q2Meter extends HTMLEle
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '1fcdcdac6a15aa52ac302ec40bc5809ab39fdbe6', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'a4cf43a802e84c0ceaf44c697511c206d0611906', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '8b8bdbcc35dbc2de60063cbf871a4a34bbe7548b', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '624342cfe8f534af2396fe6190e24bfcaecdb0c2', class: "legends" }, h("div", { key: '835efacea1cc4d03092cecbbd6914d54b498fa5f', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '428535e8b751a3316bfb5b5ad19756d3fc09fcd0', class: "right" }, h("div", { key: 'f175ee347bcd84716c5e1971d657c4fbf7dcbbc1', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '114be4db946db69c97b2a9980f8bcd4757653f95', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'dfc5eda2e024fa1c1d6ba204e8e2cfa68329a0a6', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'a54ca24a734890632c07f209ad35d30e2f3c9bc5', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'fa7cc14c41ba679ade93ed7d81cddd2d52bb0319', class: "legends" }, h("div", { key: '9327c024866ccc780916981b899c5e47d8bb61e4', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: 'a010c391768b966bfcefd828cd57bbca82414da4', class: "right" }, h("div", { key: 'eae86a6c446ce32bbc32c22724c9ac18362a4e10', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     get hostElement() { return this; }
     static get style() { return q2MeterCss; }

package/dist/components/q2-modal.js CHANGED Viewed

@@ -144,7 +144,7 @@ const Q2Modal$1 = /*@__PURE__*/ proxyCustomElement(class Q2Modal extends HTMLEle
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '2a1e01cc98af3b7dc4ec4492f3dbe2b61ff060ff', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '6e0c488f59516d53c2e34c80c4fed32f2963e76e', class: interiorClasses }, this.title && (h("header", { key: 'd97209894acdc0c907516395ec4ccb2dea5c93d3' }, this.title && h("h2", { key: '56cd50bf63c72417bb7d640eb64421fa65ed4006', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'e9832d75490902ccac63009208dc805183fc6fed', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '999e4cbad19c10f2938a00e105dc9655dadb4fa1', type: "close" }))))), h("div", { key: 'df57e3809860f06f08ccca9578612d5d204c4cde', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '56ea4df19dab180f4e8847e4b64e2a8784be2ee4', class: "icon" }, h("q2-icon", { key: '50cc9eb841424d1433a5afcac8416a604bc583d7', type: this.icon }))), this.imageSrc && (h("div", { key: '743af68df051cc939799d60ba061cdc0b5680212', class: "image" }, h("img", { key: 'ad69ea057cb66b80338a9d06601c39f1ae5aa3ac', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'ac45807fa0700265591bc194cf0b24cbc233d23b', name: "content" }), this.description && h("p", { key: 'adb8757efc3a2877ccf0eb4affd759158caa38d6', class: "description" }, this.description), this.customMarkup && (h("p", { key: '95f97089b1cf6c411f8e915808f6bf89fe396e0b', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'd41618d7da89c69d604cf762831a26b1a56901b4' }, h("q2-action-group", { key: '6a4d8f77c8c5e2b86b439d76d05b2280786da704', "full-width": true }, h("slot", { key: '87e723189a4c60e2ad0cabe567e6603a368e7c58', name: "action" }))))));
+        return (h("dialog", { key: '1bccb63a37166885ac3fe684141f8c8751569554', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '2e9005f0bd4f93aa0e4e4b5868fddc8e9b2ce267', class: interiorClasses }, this.title && (h("header", { key: '4dc2c5b20e6e766084a300a6b747ccd9bf482d74' }, this.title && h("h2", { key: 'c93f7a66309307761bc2a0b41b94cf17363dc877', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'aa3e5f3fa4f63055f36a8bfbc048f8262c29648b', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'ab8c726d5d6522f2fc41ef8272bd704b27a31739', type: "close" }))))), h("div", { key: 'f259da2c00afb066a3aa30bc04641ee760591e37', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'ecdf6189b3fa6021e6749f92e03fd89327859bb2', class: "icon" }, h("q2-icon", { key: '36b7977b295ceef5471e6b25ff42583bceed87d1', type: this.icon }))), this.imageSrc && (h("div", { key: 'ea9d269d8ced711dc47b8c358e324058a2b00f48', class: "image" }, h("img", { key: 'ecce6985f6f7de5f92f9c2d5f2773c5371735e40', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '6d7f025c0f001d8b2b790bfadb7da9f8afc4b414', name: "content" }), this.description && h("p", { key: '1483ddcbdd4bc12c8d16649ee828335e9fc47c20', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'dd6c85ec7f0496221e0dccde4da15ff0d237908d', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '0a263f6a30c3210f02ea8f54717049d17b30e7d7' }, h("q2-action-group", { key: 'd040e253ed0fd0f38f06719131f006730d588858', "full-width": true }, h("slot", { key: '2b7326223c8dd79de652f8661af2253f19f74a27', name: "action" }))))));
     }
     get hostElement() { return this; }
     static get style() { return q2ModalCss; }