q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-btn/q2-btn.css

@@ -132,6 +132,285 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-btn-border?: (*) Controls the optional border shorthand of the button.
+ * @prop --tct-btn-border-radius: (<length-percentage>) Controls the corner radius of the button.
+ * @prop --tct-btn-tween: (*) Controls the transition timing of button state changes.
+ * @prop --tct-btn-padding: (<length-percentage>+) Controls the inner padding of the button.
+ * @prop --tct-btn-padding-inline?: (<length-percentage>+) Controls the optional inline padding of the plain button (no intent, no icon-only).
+ * @prop --tct-btn-height: (<length>) Controls the height of the plain button (no intent, no icon-only).
+ * @prop --tct-btn-min-height?: (<length>) Controls the optional minimum height of the button.
+ * @prop --tct-btn-font-size?: (<length-percentage>) Controls the optional font size of the button.
+ * @prop --tct-btn-font-weight?: (<number>) Controls the optional font weight of the plain button.
+ * @prop --tct-btn-letter-spacing?: (<length>) Controls the optional letter spacing of the button label.
+ * @prop --tct-btn-text-transform?: (<custom-ident>) Controls the optional text-transform of the button label.
+ * @prop --tct-btn-disabled-opacity: (<number>) Controls the opacity of the button when disabled.
+ * @prop --tct-btn-hover-background?: (<color>) Controls the optional background color of the plain button on hover and focus.
+ * @prop --tct-btn-default-double-focus-visible-ring: (*) Controls the double focus-visible ring box shadow applied to buttons without an intent.
+ * @prop --tct-btn-font-size-small: (<length-percentage>) Controls the font size of the button when size is small.
+ * @prop --tct-btn-font-size-medium: (<length-percentage>) Controls the font size of the button when size is medium.
+ * @prop --tct-btn-font-size-large: (<length-percentage>) Controls the font size of the button when size is large.
+ * @prop --tct-btn-min-height-small?: (<length>) Controls the optional minimum height of the button when size is small.
+ * @prop --tct-btn-min-height-medium?: (<length>) Controls the optional minimum height of the button when size is medium.
+ * @prop --tct-btn-min-height-large?: (<length>) Controls the optional minimum height of the button when size is large.
+ * @prop --tct-btn-padding-size-small: (<length-percentage>+) Controls the inner padding of the button when size is small.
+ * @prop --tct-btn-padding-size-medium: (<length-percentage>+) Controls the inner padding of the button when size is medium.
+ * @prop --tct-btn-padding-size-large: (<length-percentage>+) Controls the inner padding of the button when size is large.
+ * @prop --tct-btn-icon-size: (<length>) Controls the size of slotted icons inside the button.
+ * @prop --tct-btn-icon-size-small: (<length>) Controls the size of slotted icons when size is small.
+ * @prop --tct-btn-icon-size-medium?: (<length>) Controls the optional size of slotted icons when size is medium.
+ * @prop --tct-btn-icon-size-large?: (<length>) Controls the optional size of slotted icons when size is large.
+ * @prop --tct-btn-icon-width: (<length>) Controls the width of the icon-only button.
+ * @prop --tct-btn-icon-height: (<length>) Controls the height of the icon-only button.
+ * @prop --tct-btn-icon-border-radius?: (<length-percentage>) Controls the optional corner radius of the icon-only button.
+ * @prop --tct-btn-icon-padding?: (<length-percentage>+) Controls the optional inner padding of the icon-only button.
+ * @prop --tct-btn-icon-hover-background: (<color>) Controls the background color of the icon-only button on hover and focus.
+ * @prop --tct-btn-icon-active-background: (<color>) Controls the background color of the icon-only button when active.
+ * @prop --tct-btn-icon-hover-color: (<color>) Controls the text/icon color of the icon-only button on hover, focus, and active.
+ * @prop --tct-btn-badge-background?: (<color>) Controls the optional background color of the deprecated badge button.
+ * @prop --tct-btn-badge-font-color?: (<color>) Controls the optional text color of the deprecated badge button.
+ * @prop --tct-btn-badge-font-size?: (<length-percentage>) Controls the optional font size of the deprecated badge button.
+ * @prop --tct-btn-badge-padding: (<length-percentage>+) Controls the inner padding of the deprecated badge button.
+ * @prop --tct-btn-badge-border-radius: (<length-percentage>) Controls the corner radius of the deprecated badge button.
+ * @prop --tct-btn-badge-hover-background: (<color>) Controls the background color of the deprecated badge button on hover.
+ * @prop --tct-btn-badge-hover-font-color: (<color>) Controls the text color of the deprecated badge button on hover.
+ * @prop --tct-btn-badge-active-background: (<color>) Controls the background color of the deprecated badge button when active or selected.
+ * @prop --tct-btn-badge-active-font-color: (<color>) Controls the text color of the deprecated badge button when active or selected.
+ * @prop --tct-btn-coin-container-width: (<length>) Controls the width of the coin button wrapper.
+ * @prop --tct-btn-coin-width: (<length>) Controls the width of the coin button.
+ * @prop --tct-btn-coin-height: (<length>) Controls the height of the coin button.
+ * @prop --tct-btn-coin-background: (<color>) Controls the background color of the coin button.
+ * @prop --tct-btn-coin-backdrop-filter?: (*) Controls the optional backdrop-filter of the coin button.
+ * @prop --tct-btn-coin-border?: (*) Controls the optional border shorthand of the coin button.
+ * @prop --tct-btn-coin-border-radius: (<length-percentage>) Controls the corner radius of the coin button.
+ * @prop --tct-btn-coin-box-shadow?: (*) Controls the optional box shadow of the coin button.
+ * @prop --tct-btn-coin-hover-background: (<color>) Controls the background color of the coin button on hover.
+ * @prop --tct-btn-coin-hover-box-shadow: (*) Controls the box shadow of the coin button on hover.
+ * @prop --tct-btn-coin-focus-box-shadow?: (*) Controls the optional box shadow of the coin button on focus.
+ * @prop --tct-btn-coin-focus-visible-box-shadow: (*) Controls the box shadow of the coin button when focused via keyboard.
+ * @prop --tct-btn-coin-focus-ring: (<color>) Controls the focus ring color of the coin button.
+ * @prop --tct-btn-coin-active-background?: (<color>) Controls the optional background color of the coin button when active.
+ * @prop --tct-btn-coin-icon-stroke-primary: (<color>) Controls the primary stroke color of icons inside the coin button.
+ * @prop --tct-btn-coin-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons inside the coin button.
+ * @prop --tct-btn-coin-icon-stroke-width: (<length>) Controls the stroke width of icons inside the coin button.
+ * @prop --tct-btn-coin-avatar-icon-stroke-primary: (<color>) Controls the primary stroke color of avatar icons inside the coin button.
+ * @prop --tct-btn-coin-avatar-icon-stroke-secondary: (<color>) Controls the secondary stroke color of avatar icons inside the coin button.
+ * @prop --tct-btn-coin-avatar-text-color: (<color>) Controls the text color of avatar initials inside the coin button.
+ * @prop --tct-btn-coin-label-color: (<color>) Controls the text color of the coin button label.
+ * @prop --tct-btn-coin-label-disabled-color: (<color>) Controls the text color of the coin button label when disabled.
+ * @prop --tct-btn-coin-label-font-size: (<length-percentage>) Controls the font size of the coin button label.
+ * @prop --tct-btn-coin-gap: (<length-percentage>) Controls the gap between the coin button and its label.
+ * @prop --tct-btn-primary-background: (<color>) Controls the background color of the primary-intent button.
+ * @prop --tct-btn-primary-backdrop-filter?: (*) Controls the optional backdrop-filter of the primary-intent button.
+ * @prop --tct-btn-primary-border-color: (<color>) Controls the border color of the primary-intent button.
+ * @prop --tct-btn-primary-border-style: (<custom-ident>) Controls the border style of the primary-intent button.
+ * @prop --tct-btn-primary-border-width: (<length>+) Controls the border width of the primary-intent button.
+ * @prop --tct-btn-primary-font-color: (<color>) Controls the text color of the primary-intent button.
+ * @prop --tct-btn-primary-font-weight: (<number>) Controls the font weight of the primary-intent button.
+ * @prop --tct-btn-primary-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button.
+ * @prop --tct-btn-primary-box-shadow: (*) Controls the box shadow of the primary-intent button.
+ * @prop --tct-btn-primary-icon-color: (<color>) Controls the icon color of the primary-intent button.
+ * @prop --tct-btn-primary-hover-background: (<color>) Controls the background color of the primary-intent button on hover.
+ * @prop --tct-btn-primary-hover-border-color: (<color>) Controls the border color of the primary-intent button on hover.
+ * @prop --tct-btn-primary-hover-font-color: (<color>) Controls the text color of the primary-intent button on hover.
+ * @prop --tct-btn-primary-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button on hover.
+ * @prop --tct-btn-primary-hover-inner-ring-color: (<color>) Controls the inner ring color of the primary-intent button on hover.
+ * @prop --tct-btn-primary-hover-outer-ring-color: (<color>) Controls the outer ring color of the primary-intent button on hover.
+ * @prop --tct-btn-primary-focus-background: (<color>) Controls the background color of the primary-intent button on focus.
+ * @prop --tct-btn-primary-focus-border-color: (<color>) Controls the border color of the primary-intent button on focus.
+ * @prop --tct-btn-primary-focus-font-color: (<color>) Controls the text color of the primary-intent button on focus.
+ * @prop --tct-btn-primary-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button on focus.
+ * @prop --tct-btn-primary-focus-box-shadow: (*) Controls the box shadow of the primary-intent button on focus.
+ * @prop --tct-btn-primary-focus-visible-background: (<color>) Controls the background color of the primary-intent button when focused via keyboard.
+ * @prop --tct-btn-primary-focus-visible-border-color: (<color>) Controls the border color of the primary-intent button when focused via keyboard.
+ * @prop --tct-btn-primary-focus-visible-font-color: (<color>) Controls the text color of the primary-intent button when focused via keyboard.
+ * @prop --tct-btn-primary-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button when focused via keyboard.
+ * @prop --tct-btn-primary-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the primary-intent button when focused via keyboard.
+ * @prop --tct-btn-primary-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the primary-intent button when focused via keyboard.
+ * @prop --tct-btn-primary-active-background: (<color>) Controls the background color of the primary-intent button when active.
+ * @prop --tct-btn-primary-active-border-color: (<color>) Controls the border color of the primary-intent button when active.
+ * @prop --tct-btn-primary-active-font-color: (<color>) Controls the text color of the primary-intent button when active.
+ * @prop --tct-btn-primary-active-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button when active.
+ * @prop --tct-btn-primary-disabled-background: (<color>) Controls the background color of the primary-intent button when disabled.
+ * @prop --tct-btn-primary-disabled-border-color: (<color>) Controls the border color of the primary-intent button when disabled.
+ * @prop --tct-btn-primary-disabled-font-color: (<color>) Controls the text color of the primary-intent button when disabled.
+ * @prop --tct-btn-primary-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button when disabled.
+ * @prop --tct-btn-secondary-background: (<color>) Controls the background color of the secondary-intent button.
+ * @prop --tct-btn-secondary-backdrop-filter?: (*) Controls the optional backdrop-filter of the secondary-intent button.
+ * @prop --tct-btn-secondary-border-color: (<color>) Controls the border color of the secondary-intent button.
+ * @prop --tct-btn-secondary-border-style: (<custom-ident>) Controls the border style of the secondary-intent button.
+ * @prop --tct-btn-secondary-border-width: (<length>+) Controls the border width of the secondary-intent button.
+ * @prop --tct-btn-secondary-font-color: (<color>) Controls the text color of the secondary-intent button.
+ * @prop --tct-btn-secondary-font-weight: (<number>) Controls the font weight of the secondary-intent button.
+ * @prop --tct-btn-secondary-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button.
+ * @prop --tct-btn-secondary-box-shadow: (*) Controls the box shadow of the secondary-intent button.
+ * @prop --tct-btn-secondary-icon-color: (<color>) Controls the icon color of the secondary-intent button.
+ * @prop --tct-btn-secondary-hover-background: (<color>) Controls the background color of the secondary-intent button on hover.
+ * @prop --tct-btn-secondary-hover-border-color: (<color>) Controls the border color of the secondary-intent button on hover.
+ * @prop --tct-btn-secondary-hover-font-color: (<color>) Controls the text color of the secondary-intent button on hover.
+ * @prop --tct-btn-secondary-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button on hover.
+ * @prop --tct-btn-secondary-hover-inner-ring-color: (<color>) Controls the inner ring color of the secondary-intent button on hover.
+ * @prop --tct-btn-secondary-hover-outer-ring-color: (<color>) Controls the outer ring color of the secondary-intent button on hover.
+ * @prop --tct-btn-secondary-focus-background: (<color>) Controls the background color of the secondary-intent button on focus.
+ * @prop --tct-btn-secondary-focus-border-color: (<color>) Controls the border color of the secondary-intent button on focus.
+ * @prop --tct-btn-secondary-focus-font-color: (<color>) Controls the text color of the secondary-intent button on focus.
+ * @prop --tct-btn-secondary-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button on focus.
+ * @prop --tct-btn-secondary-focus-box-shadow: (*) Controls the box shadow of the secondary-intent button on focus.
+ * @prop --tct-btn-secondary-focus-visible-background: (<color>) Controls the background color of the secondary-intent button when focused via keyboard.
+ * @prop --tct-btn-secondary-focus-visible-border-color: (<color>) Controls the border color of the secondary-intent button when focused via keyboard.
+ * @prop --tct-btn-secondary-focus-visible-font-color: (<color>) Controls the text color of the secondary-intent button when focused via keyboard.
+ * @prop --tct-btn-secondary-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button when focused via keyboard.
+ * @prop --tct-btn-secondary-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the secondary-intent button when focused via keyboard.
+ * @prop --tct-btn-secondary-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the secondary-intent button when focused via keyboard.
+ * @prop --tct-btn-secondary-active-background: (<color>) Controls the background color of the secondary-intent button when active.
+ * @prop --tct-btn-secondary-active-border-color: (<color>) Controls the border color of the secondary-intent button when active.
+ * @prop --tct-btn-secondary-active-font-color: (<color>) Controls the text color of the secondary-intent button when active.
+ * @prop --tct-btn-secondary-active-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button when active.
+ * @prop --tct-btn-secondary-disabled-background: (<color>) Controls the background color of the secondary-intent button when disabled.
+ * @prop --tct-btn-secondary-disabled-border-color: (<color>) Controls the border color of the secondary-intent button when disabled.
+ * @prop --tct-btn-secondary-disabled-font-color: (<color>) Controls the text color of the secondary-intent button when disabled.
+ * @prop --tct-btn-secondary-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button when disabled.
+ * @prop --tct-btn-neutral-background: (<color>) Controls the background color of the neutral-intent button.
+ * @prop --tct-btn-neutral-backdrop-filter?: (*) Controls the optional backdrop-filter of the neutral-intent button.
+ * @prop --tct-btn-neutral-border-color: (<color>) Controls the border color of the neutral-intent button.
+ * @prop --tct-btn-neutral-border-style: (<custom-ident>) Controls the border style of the neutral-intent button.
+ * @prop --tct-btn-neutral-border-width: (<length>+) Controls the border width of the neutral-intent button.
+ * @prop --tct-btn-neutral-font-color: (<color>) Controls the text color of the neutral-intent button.
+ * @prop --tct-btn-neutral-font-weight: (<number>) Controls the font weight of the neutral-intent button.
+ * @prop --tct-btn-neutral-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button.
+ * @prop --tct-btn-neutral-box-shadow: (*) Controls the box shadow of the neutral-intent button.
+ * @prop --tct-btn-neutral-icon-color: (<color>) Controls the icon color of the neutral-intent button.
+ * @prop --tct-btn-neutral-hover-background: (<color>) Controls the background color of the neutral-intent button on hover.
+ * @prop --tct-btn-neutral-hover-border-color: (<color>) Controls the border color of the neutral-intent button on hover.
+ * @prop --tct-btn-neutral-hover-font-color: (<color>) Controls the text color of the neutral-intent button on hover.
+ * @prop --tct-btn-neutral-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button on hover.
+ * @prop --tct-btn-neutral-hover-inner-ring-color: (<color>) Controls the inner ring color of the neutral-intent button on hover.
+ * @prop --tct-btn-neutral-hover-outer-ring-color: (<color>) Controls the outer ring color of the neutral-intent button on hover.
+ * @prop --tct-btn-neutral-focus-background: (<color>) Controls the background color of the neutral-intent button on focus.
+ * @prop --tct-btn-neutral-focus-border-color: (<color>) Controls the border color of the neutral-intent button on focus.
+ * @prop --tct-btn-neutral-focus-font-color: (<color>) Controls the text color of the neutral-intent button on focus.
+ * @prop --tct-btn-neutral-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button on focus.
+ * @prop --tct-btn-neutral-focus-box-shadow: (*) Controls the box shadow of the neutral-intent button on focus.
+ * @prop --tct-btn-neutral-focus-visible-background: (<color>) Controls the background color of the neutral-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-focus-visible-border-color: (<color>) Controls the border color of the neutral-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-focus-visible-font-color: (<color>) Controls the text color of the neutral-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the neutral-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the neutral-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-active-background: (<color>) Controls the background color of the neutral-intent button when active.
+ * @prop --tct-btn-neutral-active-border-color: (<color>) Controls the border color of the neutral-intent button when active.
+ * @prop --tct-btn-neutral-active-font-color: (<color>) Controls the text color of the neutral-intent button when active.
+ * @prop --tct-btn-neutral-active-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button when active.
+ * @prop --tct-btn-neutral-disabled-background: (<color>) Controls the background color of the neutral-intent button when disabled.
+ * @prop --tct-btn-neutral-disabled-border-color: (<color>) Controls the border color of the neutral-intent button when disabled.
+ * @prop --tct-btn-neutral-disabled-font-color: (<color>) Controls the text color of the neutral-intent button when disabled.
+ * @prop --tct-btn-neutral-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button when disabled.
+ * @prop --tct-btn-neutral-text-background: (<color>) Controls the background color of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-backdrop-filter?: (*) Controls the optional backdrop-filter of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-border-color: (<color>) Controls the border color of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-border-style: (<custom-ident>) Controls the border style of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-border-width: (<length>+) Controls the border width of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-font-color: (<color>) Controls the text color of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-font-weight: (<number>) Controls the font weight of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-box-shadow?: (*) Controls the optional box shadow of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-icon-color: (<color>) Controls the icon color of the neutral-text-intent button.
+ * @prop --tct-btn-neutral-text-hover-background: (<color>) Controls the background color of the neutral-text-intent button on hover.
+ * @prop --tct-btn-neutral-text-hover-border-color: (<color>) Controls the border color of the neutral-text-intent button on hover.
+ * @prop --tct-btn-neutral-text-hover-font-color: (<color>) Controls the text color of the neutral-text-intent button on hover.
+ * @prop --tct-btn-neutral-text-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button on hover.
+ * @prop --tct-btn-neutral-text-hover-inner-ring-color: (<color>) Controls the inner ring color of the neutral-text-intent button on hover.
+ * @prop --tct-btn-neutral-text-hover-outer-ring-color: (<color>) Controls the outer ring color of the neutral-text-intent button on hover.
+ * @prop --tct-btn-neutral-text-focus-background: (<color>) Controls the background color of the neutral-text-intent button on focus.
+ * @prop --tct-btn-neutral-text-focus-border-color: (<color>) Controls the border color of the neutral-text-intent button on focus.
+ * @prop --tct-btn-neutral-text-focus-font-color: (<color>) Controls the text color of the neutral-text-intent button on focus.
+ * @prop --tct-btn-neutral-text-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button on focus.
+ * @prop --tct-btn-neutral-text-focus-visible-background: (<color>) Controls the background color of the neutral-text-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-text-focus-visible-border-color: (<color>) Controls the border color of the neutral-text-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-text-focus-visible-font-color: (<color>) Controls the text color of the neutral-text-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-text-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-text-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the neutral-text-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-text-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the neutral-text-intent button when focused via keyboard.
+ * @prop --tct-btn-neutral-text-active-background: (<color>) Controls the background color of the neutral-text-intent button when active.
+ * @prop --tct-btn-neutral-text-active-border-color: (<color>) Controls the border color of the neutral-text-intent button when active.
+ * @prop --tct-btn-neutral-text-active-font-color: (<color>) Controls the text color of the neutral-text-intent button when active.
+ * @prop --tct-btn-neutral-text-active-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button when active.
+ * @prop --tct-btn-neutral-text-disabled-background: (<color>) Controls the background color of the neutral-text-intent button when disabled.
+ * @prop --tct-btn-neutral-text-disabled-border-color: (<color>) Controls the border color of the neutral-text-intent button when disabled.
+ * @prop --tct-btn-neutral-text-disabled-font-color: (<color>) Controls the text color of the neutral-text-intent button when disabled.
+ * @prop --tct-btn-neutral-text-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button when disabled.
+ * @prop --tct-btn-destroy-background: (<color>) Controls the background color of the destroy-intent button.
+ * @prop --tct-btn-destroy-backdrop-filter?: (*) Controls the optional backdrop-filter of the destroy-intent button.
+ * @prop --tct-btn-destroy-border-color: (<color>) Controls the border color of the destroy-intent button.
+ * @prop --tct-btn-destroy-border-style: (<custom-ident>) Controls the border style of the destroy-intent button.
+ * @prop --tct-btn-destroy-border-width: (<length>+) Controls the border width of the destroy-intent button.
+ * @prop --tct-btn-destroy-font-color: (<color>) Controls the text color of the destroy-intent button.
+ * @prop --tct-btn-destroy-font-weight: (<number>) Controls the font weight of the destroy-intent button.
+ * @prop --tct-btn-destroy-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button.
+ * @prop --tct-btn-destroy-box-shadow: (*) Controls the box shadow of the destroy-intent button.
+ * @prop --tct-btn-destroy-icon-color: (<color>) Controls the icon color of the destroy-intent button.
+ * @prop --tct-btn-destroy-hover-background: (<color>) Controls the background color of the destroy-intent button on hover.
+ * @prop --tct-btn-destroy-hover-border-color: (<color>) Controls the border color of the destroy-intent button on hover.
+ * @prop --tct-btn-destroy-hover-font-color: (<color>) Controls the text color of the destroy-intent button on hover.
+ * @prop --tct-btn-destroy-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button on hover.
+ * @prop --tct-btn-destroy-hover-inner-ring-color: (<color>) Controls the inner ring color of the destroy-intent button on hover.
+ * @prop --tct-btn-destroy-hover-outer-ring-color: (<color>) Controls the outer ring color of the destroy-intent button on hover.
+ * @prop --tct-btn-destroy-focus-background: (<color>) Controls the background color of the destroy-intent button on focus.
+ * @prop --tct-btn-destroy-focus-border-color: (<color>) Controls the border color of the destroy-intent button on focus.
+ * @prop --tct-btn-destroy-focus-font-color: (<color>) Controls the text color of the destroy-intent button on focus.
+ * @prop --tct-btn-destroy-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button on focus.
+ * @prop --tct-btn-destroy-focus-box-shadow: (*) Controls the box shadow of the destroy-intent button on focus.
+ * @prop --tct-btn-destroy-focus-visible-background: (<color>) Controls the background color of the destroy-intent button when focused via keyboard.
+ * @prop --tct-btn-destroy-focus-visible-border-color: (<color>) Controls the border color of the destroy-intent button when focused via keyboard.
+ * @prop --tct-btn-destroy-focus-visible-font-color: (<color>) Controls the text color of the destroy-intent button when focused via keyboard.
+ * @prop --tct-btn-destroy-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button when focused via keyboard.
+ * @prop --tct-btn-destroy-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the destroy-intent button when focused via keyboard.
+ * @prop --tct-btn-destroy-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the destroy-intent button when focused via keyboard.
+ * @prop --tct-btn-destroy-active-background: (<color>) Controls the background color of the destroy-intent button when active.
+ * @prop --tct-btn-destroy-active-border-color: (<color>) Controls the border color of the destroy-intent button when active.
+ * @prop --tct-btn-destroy-active-font-color: (<color>) Controls the text color of the destroy-intent button when active.
+ * @prop --tct-btn-destroy-active-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button when active.
+ * @prop --tct-btn-destroy-disabled-background: (<color>) Controls the background color of the destroy-intent button when disabled.
+ * @prop --tct-btn-destroy-disabled-border-color: (<color>) Controls the border color of the destroy-intent button when disabled.
+ * @prop --tct-btn-destroy-disabled-font-color: (<color>) Controls the text color of the destroy-intent button when disabled.
+ * @prop --tct-btn-destroy-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button when disabled.
+ * @prop --tct-btn-escape-background: (<color>) Controls the background color of the escape-intent button.
+ * @prop --tct-btn-escape-backdrop-filter?: (*) Controls the optional backdrop-filter of the escape-intent button.
+ * @prop --tct-btn-escape-border-color: (<color>) Controls the border color of the escape-intent button.
+ * @prop --tct-btn-escape-border-style: (<custom-ident>) Controls the border style of the escape-intent button.
+ * @prop --tct-btn-escape-border-width: (<length>+) Controls the border width of the escape-intent button.
+ * @prop --tct-btn-escape-font-color: (<color>) Controls the text color of the escape-intent button.
+ * @prop --tct-btn-escape-font-weight: (<number>) Controls the font weight of the escape-intent button.
+ * @prop --tct-btn-escape-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button.
+ * @prop --tct-btn-escape-box-shadow: (*) Controls the box shadow of the escape-intent button.
+ * @prop --tct-btn-escape-icon-color: (<color>) Controls the icon color of the escape-intent button.
+ * @prop --tct-btn-escape-hover-background: (<color>) Controls the background color of the escape-intent button on hover.
+ * @prop --tct-btn-escape-hover-border-color: (<color>) Controls the border color of the escape-intent button on hover.
+ * @prop --tct-btn-escape-hover-font-color: (<color>) Controls the text color of the escape-intent button on hover.
+ * @prop --tct-btn-escape-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button on hover.
+ * @prop --tct-btn-escape-hover-box-shadow: (*) Controls the box shadow of the escape-intent button on hover.
+ * @prop --tct-btn-escape-hover-inner-ring-color: (<color>) Controls the inner ring color of the escape-intent button on hover.
+ * @prop --tct-btn-escape-hover-outer-ring-color: (<color>) Controls the outer ring color of the escape-intent button on hover.
+ * @prop --tct-btn-escape-focus-background: (<color>) Controls the background color of the escape-intent button on focus.
+ * @prop --tct-btn-escape-focus-border-color: (<color>) Controls the border color of the escape-intent button on focus.
+ * @prop --tct-btn-escape-focus-font-color: (<color>) Controls the text color of the escape-intent button on focus.
+ * @prop --tct-btn-escape-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button on focus.
+ * @prop --tct-btn-escape-focus-box-shadow: (*) Controls the box shadow of the escape-intent button on focus.
+ * @prop --tct-btn-escape-focus-visible-background: (<color>) Controls the background color of the escape-intent button when focused via keyboard.
+ * @prop --tct-btn-escape-focus-visible-border-color: (<color>) Controls the border color of the escape-intent button when focused via keyboard.
+ * @prop --tct-btn-escape-focus-visible-font-color: (<color>) Controls the text color of the escape-intent button when focused via keyboard.
+ * @prop --tct-btn-escape-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button when focused via keyboard.
+ * @prop --tct-btn-escape-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the escape-intent button when focused via keyboard.
+ * @prop --tct-btn-escape-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the escape-intent button when focused via keyboard.
+ * @prop --tct-btn-escape-active-background: (<color>) Controls the background color of the escape-intent button when active.
+ * @prop --tct-btn-escape-active-border-color: (<color>) Controls the border color of the escape-intent button when active.
+ * @prop --tct-btn-escape-active-font-color: (<color>) Controls the text color of the escape-intent button when active.
+ * @prop --tct-btn-escape-active-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button when active.
+ * @prop --tct-btn-escape-disabled-background: (<color>) Controls the background color of the escape-intent button when disabled.
+ * @prop --tct-btn-escape-disabled-border-color: (<color>) Controls the border color of the escape-intent button when disabled.
+ * @prop --tct-btn-escape-disabled-font-color: (<color>) Controls the text color of the escape-intent button when disabled.
+ * @prop --tct-btn-escape-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button when disabled.
+ */
 q2-loading {
   --tct-loading-primary-color: currentcolor;
   --tct-loading-secondary-color: currentcolor;

package/dist/collection/components/q2-btn/test/q2-btn-test.vr.js

@@ -0,0 +1,80 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const INTENTS = [
+    'workflow-primary',
+    'workflow-secondary',
+    'workflow-destroy',
+    'workflow-escape',
+    'neutral',
+    'neutral-text',
+    'coin',
+];
+const SIZES = ['small', 'medium', 'large'];
+const coinHtml = () => `<q2-btn intent="coin" label="My Button"><q2-avatar icon="star"></q2-avatar></q2-btn>`;
+const labelAndIconHtml = (intent) => intent === 'coin'
+    ? coinHtml()
+    : `<q2-btn intent="${intent}"><q2-icon type="edit"></q2-icon><span>My Button</span></q2-btn>`;
+const iconOnlyHtml = (intent) => intent === 'coin' ? coinHtml() : `<q2-btn intent="${intent}"><q2-icon type="edit"></q2-icon></q2-btn>`;
+const sizeHtml = (size) => `<q2-btn intent="workflow-primary" size="${size}"><q2-icon type="edit"></q2-icon><span>My Button</span></q2-btn>`;
+const restingCase = (name, html, theme) => {
+    test(`${name} — ${theme}`, async ({ page }) => {
+        await setupPage(page, html, { theme });
+        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
+    });
+};
+const hoverCase = (name, html, theme) => {
+    test(`${name} — ${theme}`, async ({ page }) => {
+        await setupPage(page, html, { theme });
+        await page.locator('q2-btn').hover();
+        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
+    });
+};
+const focusCase = (name, html, theme) => {
+    test(`${name} — ${theme}`, async ({ page }) => {
+        await setupPage(page, html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
+    });
+};
+const activeCase = (name, html, theme) => {
+    test(`${name} — ${theme}`, async ({ page }) => {
+        await setupPage(page, html, { theme });
+        const btn = page.locator('q2-btn');
+        const box = await btn.boundingBox();
+        if (!box)
+            throw new Error('q2-btn bounding box unavailable');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.waitForTimeout(50);
+        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
+        await page.mouse.up();
+    });
+};
+test.describe('q2-btn label+icon — intents × states × themes', () => {
+    for (const intent of INTENTS) {
+        for (const theme of THEMES) {
+            restingCase(`q2-btn--${intent}--resting`, labelAndIconHtml(intent), theme);
+            hoverCase(`q2-btn--${intent}--hover`, labelAndIconHtml(intent), theme);
+            focusCase(`q2-btn--${intent}--focus`, labelAndIconHtml(intent), theme);
+            activeCase(`q2-btn--${intent}--active`, labelAndIconHtml(intent), theme);
+        }
+    }
+});
+test.describe('q2-btn icon-only — intents × themes (resting)', () => {
+    for (const intent of INTENTS) {
+        if (intent === 'coin')
+            continue;
+        for (const theme of THEMES) {
+            restingCase(`q2-btn--${intent}--icon-only`, iconOnlyHtml(intent), theme);
+        }
+    }
+});
+test.describe('q2-btn workflow-primary — sizes × themes (resting)', () => {
+    for (const size of SIZES) {
+        for (const theme of THEMES) {
+            restingCase(`q2-btn--workflow-primary--size-${size}`, sizeHtml(size), theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-btn-test.vr.js.map

package/dist/collection/components/q2-btn/test/q2-btn-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-btn-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-btn/test/q2-btn-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Intent =\n    | 'workflow-primary'\n    | 'workflow-secondary'\n    | 'workflow-destroy'\n    | 'workflow-escape'\n    | 'neutral'\n    | 'neutral-text'\n    | 'coin';\n\nconst INTENTS: Intent[] = [\n    'workflow-primary',\n    'workflow-secondary',\n    'workflow-destroy',\n    'workflow-escape',\n    'neutral',\n    'neutral-text',\n    'coin',\n];\n\nconst SIZES = ['small', 'medium', 'large'] as const;\ntype Size = (typeof SIZES)[number];\n\nconst coinHtml = () => `<q2-btn intent=\"coin\" label=\"My Button\"><q2-avatar icon=\"star\"></q2-avatar></q2-btn>`;\n\nconst labelAndIconHtml = (intent: Intent) =>\n    intent === 'coin'\n        ? coinHtml()\n        : `<q2-btn intent=\"${intent}\"><q2-icon type=\"edit\"></q2-icon><span>My Button</span></q2-btn>`;\n\nconst iconOnlyHtml = (intent: Intent) =>\n    intent === 'coin' ? coinHtml() : `<q2-btn intent=\"${intent}\"><q2-icon type=\"edit\"></q2-icon></q2-btn>`;\n\nconst sizeHtml = (size: Size) =>\n    `<q2-btn intent=\"workflow-primary\" size=\"${size}\"><q2-icon type=\"edit\"></q2-icon><span>My Button</span></q2-btn>`;\n\nconst restingCase = (name: string, html: string, theme: Theme) => {\n    test(`${name} — ${theme}`, async ({ page }) => {\n        await setupPage(page, html, { theme });\n        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);\n    });\n};\n\nconst hoverCase = (name: string, html: string, theme: Theme) => {\n    test(`${name} — ${theme}`, async ({ page }) => {\n        await setupPage(page, html, { theme });\n        await page.locator('q2-btn').hover();\n        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);\n    });\n};\n\nconst focusCase = (name: string, html: string, theme: Theme) => {\n    test(`${name} — ${theme}`, async ({ page }) => {\n        await setupPage(page, html, { theme });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);\n    });\n};\n\nconst activeCase = (name: string, html: string, theme: Theme) => {\n    test(`${name} — ${theme}`, async ({ page }) => {\n        await setupPage(page, html, { theme });\n        const btn = page.locator('q2-btn');\n        const box = await btn.boundingBox();\n        if (!box) throw new Error('q2-btn bounding box unavailable');\n        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);\n        await page.mouse.down();\n        await page.waitForTimeout(50);\n        await expect(page).toHaveScreenshot(`${name}--${theme}.png`);\n        await page.mouse.up();\n    });\n};\n\ntest.describe('q2-btn label+icon — intents × states × themes', () => {\n    for (const intent of INTENTS) {\n        for (const theme of THEMES) {\n            restingCase(`q2-btn--${intent}--resting`, labelAndIconHtml(intent), theme);\n            hoverCase(`q2-btn--${intent}--hover`, labelAndIconHtml(intent), theme);\n            focusCase(`q2-btn--${intent}--focus`, labelAndIconHtml(intent), theme);\n            activeCase(`q2-btn--${intent}--active`, labelAndIconHtml(intent), theme);\n        }\n    }\n});\n\ntest.describe('q2-btn icon-only — intents × themes (resting)', () => {\n    for (const intent of INTENTS) {\n        if (intent === 'coin') continue;\n        for (const theme of THEMES) {\n            restingCase(`q2-btn--${intent}--icon-only`, iconOnlyHtml(intent), theme);\n        }\n    }\n});\n\ntest.describe('q2-btn workflow-primary — sizes × themes (resting)', () => {\n    for (const size of SIZES) {\n        for (const theme of THEMES) {\n            restingCase(`q2-btn--workflow-primary--size-${size}`, sizeHtml(size), theme);\n        }\n    }\n});\n"]}

package/dist/collection/components/q2-calendar/q2-calendar.css

@@ -65,6 +65,42 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-calendar-margin: (<length-percentage>+) Controls the outer margin of the calendar host.
+ * @prop --tct-calendar-margin-top: (<length-percentage>) Controls the top margin of the calendar host when --tct-calendar-margin is not set.
+ * @prop --tct-calendar-margin-bottom: (<length-percentage>) Controls the bottom margin of the calendar host when --tct-calendar-margin is not set.
+ * @prop --tct-calendar-popover-padding: (<length-percentage>+) Controls the inner padding of the calendar popover.
+ * @prop --tct-calendar-label-padding: (<length-percentage>+) Controls the inner padding of the calendar input label.
+ * @prop --tct-calendar-label-font-size: (<length-percentage>) Controls the font size of the calendar input label.
+ * @prop --tct-calendar-month-font-size: (<length-percentage>) Controls the font size of the calendar month heading.
+ * @prop --tct-calendar-month-font-weight: (<number>) Controls the font weight of the calendar month heading.
+ * @prop --tct-calendar-day-heading-font-size?: (<length-percentage>) Controls the optional font size of the calendar day-of-week heading row.
+ * @prop --tct-calendar-day-heading-font-weight: (<number>) Controls the font weight of the calendar day-of-week heading row.
+ * @prop --tct-calendar-day-integer-font-size?: (<length-percentage>) Controls the optional font size of the day number text inside calendar cells.
+ * @prop --tct-calendar-today-decorator-font-size: (<length-percentage>) Controls the font size of the "today" decorator text inside the today cell.
+ * @prop --tct-calendar-day-border?: (*) Controls the optional border shorthand of calendar day cells.
+ * @prop --tct-calendar-day-border-radius?: (<length-percentage>) Controls the optional corner radius of calendar day cells.
+ * @prop --tct-calendar-day-hover-background: (<color>) Controls the background color of valid calendar day cells on hover.
+ * @prop --tct-calendar-day-hover-border?: (*) Controls the optional border shorthand of calendar day cells on hover.
+ * @prop --tct-calendar-day-hover-border-radius?: (<length-percentage>) Controls the optional corner radius of calendar day cells on hover.
+ * @prop --tct-calendar-day-hover-font-color?: (<color>) Controls the optional text color of calendar day cells on hover.
+ * @prop --tct-calendar-day-disabled-opacity: (<number>) Controls the opacity of disabled calendar day cells.
+ * @prop --tct-calendar-day-selected-background: (<color>) Controls the background color of the selected calendar day cell.
+ * @prop --tct-calendar-day-selected-border?: (*) Controls the optional border shorthand of the selected calendar day cell.
+ * @prop --tct-calendar-day-selected-border-radius?: (<length-percentage>) Controls the optional corner radius of the selected calendar day cell.
+ * @prop --tct-calendar-day-selected-font-color?: (<color>) Controls the optional text color of the selected calendar day cell.
+ * @prop --tct-calendar-day-selected-outline-color: (<color>) Controls the outline color of the selected calendar day cell.
+ * @prop --tct-calendar-day-focused-outer-ring-color: (<color>) Controls the outer focus ring color of the selected calendar day cell when focused.
+ * @prop --tct-calendar-day-focus-visible-inner-ring-color: (<color>) Controls the inner focus ring color of calendar day cells when focused via keyboard.
+ * @prop --tct-calendar-day-focus-visible-outer-ring-color: (<color>) Controls the outer focus ring color of calendar day cells when focused via keyboard.
+ * @prop --tct-calendar-btn-hover-background: (<color>) Controls the background color of the calendar input's icon button on hover.
+ * @prop --tct-calendar-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of the calendar input's icon button.
+ * @prop --tct-calendar-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the calendar input's icon button.
+ * @prop --tct-calendar-disclaimer-padding: (<length-percentage>+) Controls the inner padding of the calendar disclaimer text.
+ * @prop --tct-calendar-disclaimer-font-size: (<length-percentage>) Controls the font size of the calendar disclaimer text.
+ * @prop --tct-calendar-disclaimer-border-color: (<color>) Controls the border color of the calendar disclaimer section.
+ * @prop --tct-calendar-disclaimer-border-width: (<length>+) Controls the border width of the calendar disclaimer section.
+ */
 :host {
   --comp-default-calendar-margin: var(--tct-calendar-margin-top, var(--t-calendar-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-calendar-margin-bottom, var(--t-calendar-margin-bottom, var(--app-scale-5x, 25px)));
   display: block;

package/dist/collection/components/q2-calendar/q2-calendar.js

@@ -340,7 +340,10 @@ export class Q2Calendar {
     // #endregion
     // #region Listeners
     defaultChangeHandler(event) {
-        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
+        if (event.target === this.hostElement &&
+            !this.hostElement.onchange &&
+            !!event.detail &&
+            event.detail.value !== null) {
             this.value = event.detail.value;
         }
     }
@@ -799,7 +802,7 @@ export class Q2Calendar {
         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: '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())));
+        return (h("click-elsewhere", { key: '55a24cc7138b3477aced736ad4a8ad9cae84e3cc', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '15637835c0cc04486398dc86dd589f492f487488', 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())));
     }
     static get is() { return "q2-calendar"; }
     static get encapsulation() { return "shadow"; }