npm - q2-tecton-elements - Versions diffs - 1.33.0 → 1.34.0 - Mend

q2-tecton-elements 1.33.0 → 1.34.0

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

Files changed (33) hide show

package/dist/cjs/loader.cjs.js +1 -1
package/dist/cjs/q2-btn_2.cjs.entry.js +40 -33
package/dist/cjs/q2-btn_2.cjs.entry.js.map +1 -1
package/dist/cjs/q2-input.cjs.entry.js +1 -1
package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
package/dist/collection/components/q2-btn/index.js +58 -34
package/dist/collection/components/q2-btn/index.js.map +1 -1
package/dist/collection/components/q2-btn/styles.css +822 -100
package/dist/collection/components/q2-input/styles.css +32 -9
package/dist/components/index5.js +42 -34
package/dist/components/index5.js.map +1 -1
package/dist/components/index9.js +1 -1
package/dist/components/index9.js.map +1 -1
package/dist/docs.json +30 -2
package/dist/esm/loader.js +1 -1
package/dist/esm/q2-btn_2.entry.js +41 -34
package/dist/esm/q2-btn_2.entry.js.map +1 -1
package/dist/esm/q2-input.entry.js +1 -1
package/dist/esm/q2-input.entry.js.map +1 -1
package/dist/esm/q2-tecton-elements.js +1 -1
package/dist/q2-tecton-elements/p-3a35c930.entry.js +2 -0
package/dist/q2-tecton-elements/{p-86cbbd89.entry.js.map → p-3a35c930.entry.js.map} +1 -1
package/dist/q2-tecton-elements/p-fdf8abed.entry.js +2 -0
package/dist/q2-tecton-elements/p-fdf8abed.entry.js.map +1 -0
package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
package/dist/types/components/q2-btn/index.d.ts +7 -3
package/dist/types/components.d.ts +14 -2
package/package.json +3 -3
package/dist/q2-tecton-elements/p-02a13a16.entry.js +0 -2
package/dist/q2-tecton-elements/p-02a13a16.entry.js.map +0 -1
package/dist/q2-tecton-elements/p-86cbbd89.entry.js +0 -2

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"q2-calendar.cjs\",[[1,\"q2-calendar\",{\"value\":[1537],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"optional\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[1540],\"open\":[1540],\"typeable\":[516],\"clearable\":[516],\"placeholder\":[513],\"disabledMsg\":[513,\"disabled-msg\"],\"calendarLabel\":[513,\"calendar-label\"],\"disclaimer\":[513],\"displayFormat\":[513,\"display-format\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"cutoffTime\":[513,\"cutoff-time\"],\"daysOfWeekChecksum\":[514,\"days-of-week-checksum\"],\"assume\":[513],\"errors\":[1040],\"invalidDates\":[16],\"validDates\":[16],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1,\"popover-alignment\"],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popDirection\":[513,\"pop-direction\"],\"onsuccess\":[16],\"buttonLabel\":[513,\"button-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"keyboardSelection\":[32],\"typedValue\":[32],\"dateList\":[32],\"hintMessage\":[32],\"hintMessageType\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"error\",\"defaultErrorHandler\"],[0,\"success\",\"defaultSuccessHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"clear\",\"handleClear\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-select.cjs\",[[1,\"q2-select\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[1025],\"selectedOptions\":[1040],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"listLabel\":[1,\"list-label\"],\"errors\":[16],\"multiple\":[516],\"minRows\":[2,\"min-rows\"],\"popDirection\":[513,\"pop-direction\"],\"searchable\":[516],\"multilineOptions\":[516,\"multiline-options\"],\"optional\":[516],\"placeholder\":[513],\"hoist\":[4],\"ariaLabel\":[1537,\"aria-label\"],\"open\":[32],\"showSelected\":[32],\"searchText\":[32],\"hasCustomDisplay\":[32],\"inputFocused\":[32],\"statusMessage\":[32],\"prioritizeSearch\":[32],\"structuredSelectedOptions\":[32]},[[0,\"keydown\",\"keydownHandler\"],[0,\"change\",\"onHostElementChange\"],[0,\"input\",\"onHostElementInput\"],[0,\"focus\",\"delegateFocus\"],[0,\"focusout\",\"handleFocusout\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-action-sheet.cjs\",[[1,\"q2-action-sheet\",{\"data\":[1040],\"title\":[1],\"hideClose\":[4,\"hide-close\"],\"isScrollable\":[32],\"renderStatus\":[32],\"hide\":[64],\"show\":[64]}]]],[\"q2-dropdown.cjs\",[[1,\"q2-dropdown\",{\"type\":[513],\"icon\":[513],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"disabled\":[516],\"name\":[513],\"context\":[513],\"contextValue\":[513,\"context-value\"],\"resolvedType\":[513,\"resolved-type\"],\"additionalContext\":[513,\"additional-context\"],\"block\":[516],\"open\":[1540],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"alignment\":[513],\"popDirection\":[513,\"pop-direction\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-data-table.cjs\",[[1,\"q2-data-table\",{\"density\":[1537],\"bordered\":[1540],\"shadowed\":[1540],\"selectable\":[1540],\"loading\":[1540],\"hideCaption\":[1540,\"hide-caption\"],\"caption\":[1025],\"selectMode\":[1025,\"select-mode\"],\"headers\":[1040],\"rows\":[1040],\"serializedHeaders\":[32],\"serializedRows\":[32],\"hasExpandableRows\":[32],\"hasDropdowns\":[32],\"allRowsSelected\":[32],\"checkSlotCount\":[32]}]]],[\"q2-editable-field.cjs\",[[1,\"q2-editable-field\",{\"value\":[1537],\"editing\":[1540],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"formatModifier\":[513,\"format-modifier\"],\"truncated\":[516],\"maxlength\":[514],\"persistentLabel\":[516,\"persistent-label\"],\"disabled\":[516],\"block\":[516],\"hints\":[16],\"errors\":[16],\"ariaLabel\":[1537,\"aria-label\"],\"formattedValue\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-pagination.cjs\",[[1,\"q2-pagination\",{\"recordType\":[1,\"record-type\"],\"perPage\":[2,\"per-page\"],\"total\":[514],\"page\":[1538],\"pages\":[1538],\"recordsOnly\":[1540,\"records-only\"],\"pagesOnly\":[1540,\"pages-only\"],\"isSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-pill.cjs\",[[1,\"q2-pill\",{\"hoist\":[4],\"disabled\":[516],\"active\":[1540],\"open\":[1540],\"multiple\":[516],\"maxLength\":[514,\"max-length\"],\"label\":[513],\"value\":[1537],\"theme\":[513],\"selectedOptions\":[1040],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32],\"selectedOptionElements\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-tab-container.cjs\",[[1,\"q2-tab-container\",{\"value\":[1537],\"type\":[513],\"name\":[513],\"color\":[513],\"noPrint\":[516,\"no-print\"],\"hasLeft\":[32],\"hasRight\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32],\"tabs\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[9,\"resize\",\"onResize\"],[0,\"focus\",\"onFocus\"],[0,\"badge\",\"onBadge\"]]]]],[\"q2-tag.cjs\",[[1,\"q2-tag\",{\"hoist\":[4],\"open\":[1540],\"label\":[513],\"theme\":[513],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-carousel.cjs\",[[4,\"q2-carousel\",{\"autoPlay\":[516,\"auto-play\"],\"fullWidthPanes\":[516,\"full-width-panes\"],\"hidePagination\":[516,\"hide-pagination\"],\"showNavigationArrows\":[516,\"show-navigation-arrows\"],\"label\":[513],\"index\":[1538],\"ariaLabel\":[513,\"aria-label\"],\"universalCarouselOptions\":[32],\"fullWidthDisplayOptions\":[32],\"activePaneIndex\":[32],\"applyFocus\":[32],\"applyPaginationFocus\":[32],\"autoPlayInProgress\":[32],\"compactMode\":[32],\"carouselWrapperWidth\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"clickCarouselPane\",\"carouselPaneClicked\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-month-picker.cjs\",[[1,\"q2-month-picker\",{\"year\":[1538],\"disabledMonths\":[16],\"today\":[1],\"selectedIndex\":[32],\"focusedIndex\":[32],\"showYearLayer\":[32]}]]],[\"q2-section.cjs\",[[1,\"q2-section\",{\"label\":[513],\"collapsible\":[516],\"noCollapseIcon\":[516,\"no-collapse-icon\"],\"expanded\":[1540],\"contentHeight\":[32],\"hideContent\":[32],\"hasYieldedHeader\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper.cjs\",[[1,\"q2-stepper\",{\"currentStep\":[1538,\"current-step\"],\"stepCount\":[1026,\"step-count\"],\"lastEnabledStep\":[1026,\"last-enabled-step\"],\"contentChangeTriggerCount\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"],[0,\"contentChange\",\"contentChangeHandler\"]]]]],[\"q2-card.cjs\",[[1,\"q2-card\",{\"title\":[513],\"description\":[513],\"avatarName\":[513,\"avatar-name\"],\"avatarInitials\":[513,\"avatar-initials\"],\"avatarIcon\":[513,\"avatar-icon\"],\"avatarSrc\":[513,\"avatar-src\"],\"isSmall\":[516,\"is-small\"],\"bar\":[513],\"isStatic\":[516,\"is-static\"],\"isTouch\":[516,\"is-touch\"],\"url\":[513],\"target\":[513],\"type\":[513],\"isAutoTouch\":[32],\"isAutoSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-chart-donut.cjs\",[[1,\"q2-chart-donut\",{\"chartName\":[513,\"chart-name\"],\"summaryIcon\":[513,\"summary-icon\"],\"summaryName\":[513,\"summary-name\"],\"innerRadius\":[1025,\"inner-radius\"],\"outerRadius\":[1025,\"outer-radius\"],\"minSliceSize\":[1,\"min-slice-size\"],\"selectedOffset\":[2,\"selected-offset\"],\"hoverScaleSize\":[2,\"hover-scale-size\"],\"format\":[513],\"isClickable\":[516,\"is-clickable\"],\"data\":[16],\"selectedId\":[1,\"selected-id\"],\"hoveredId\":[32],\"selectById\":[64],\"selectByIndex\":[64],\"clearSelection\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox-group.cjs\",[[1,\"q2-checkbox-group\",{\"label\":[513],\"value\":[1040],\"disabled\":[516],\"readonly\":[516],\"optional\":[516],\"hasError\":[516,\"has-error\"]},[[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-radio-group.cjs\",[[1,\"q2-radio-group\",{\"label\":[513],\"value\":[1025],\"disabled\":[516],\"name\":[513],\"optional\":[516],\"readonly\":[516],\"tileLayout\":[1540,\"tile-layout\"],\"tileAlignment\":[513,\"tile-alignment\"],\"hasError\":[516,\"has-error\"],\"tilelayout\":[1540]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"],[0,\"keydown\",\"keydownHandler\"]]]]],[\"q2-stepper-vertical.cjs\",[[1,\"q2-stepper-vertical\",{\"currentStepId\":[1537,\"current-step-id\"],\"structuredPanes\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-textarea.cjs\",[[1,\"q2-textarea\",{\"value\":[1025],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"hideMessages\":[516,\"hide-messages\"],\"optional\":[516],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[516],\"spellcheck\":[516],\"maxlength\":[1538],\"rows\":[514],\"cols\":[514],\"resize\":[513],\"errors\":[16],\"hints\":[16],\"hasFocus\":[32],\"downParams\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-carousel-pane.cjs\",[[4,\"q2-carousel-pane\",{\"index\":[2],\"siblingCount\":[2,\"sibling-count\"],\"isActivePane\":[516,\"is-active-pane\"],\"label\":[513]}]]],[\"q2-chart-area.cjs\",[[1,\"q2-chart-area\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"lineColor\":[513,\"line-color\"],\"pointerLineColor\":[513,\"pointer-line-color\"],\"pointerLineStyle\":[513,\"pointer-line-style\"],\"areaColor\":[513,\"area-color\"],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideNameAxisLabels\":[516,\"hide-name-axis-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"showChartName\":[516,\"show-chart-name\"],\"showDatapointLabels\":[516,\"show-datapoint-labels\"],\"showGradient\":[516,\"show-gradient\"],\"gridLines\":[513,\"grid-lines\"]}]]],[\"q2-chart-bar.cjs\",[[1,\"q2-chart-bar\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"color\":[513],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideBarLabels\":[516,\"hide-bar-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"orientation\":[513],\"showChartName\":[516,\"show-chart-name\"],\"sort\":[516]}]]],[\"q2-loading-element.cjs\",[[0,\"q2-loading-element\",{\"shape\":[513],\"width\":[513],\"height\":[513],\"borderRadius\":[513,\"border-radius\"]}]]],[\"q2-loc.cjs\",[[1,\"q2-loc\",{\"value\":[513],\"substitutions\":[16]}]]],[\"q2-radio.cjs\",[[1,\"q2-radio\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[513],\"disabled\":[516],\"checked\":[516],\"tabIndex\":[2,\"tab-index\"],\"name\":[513],\"groupDisabled\":[4,\"group-disabled\"],\"groupReadonly\":[4,\"group-readonly\"],\"groupTileLayout\":[4,\"group-tile-layout\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"click\",\"onHostClick\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper-pane.cjs\",[[1,\"q2-stepper-pane\",{\"label\":[513],\"description\":[513],\"isActive\":[516,\"is-active\"],\"showWithChildren\":[516,\"show-with-children\"],\"status\":[513],\"isChildActive\":[32]},[[0,\"activeChange\",\"checkForActiveChildren\"]]]]],[\"q2-tab-pane.cjs\",[[1,\"q2-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"index\":[2],\"guid\":[2]}]]],[\"q2-tooltip.cjs\",[[1,\"q2-tooltip\",{\"label\":[513],\"block\":[516],\"multiline\":[516],\"persistent\":[516],\"immediate\":[516],\"focusable\":[516],\"position\":[513],\"focusClass\":[32]},[[0,\"keyup\",\"keyUpHandler\"],[2,\"focus\",\"focusCaptureHandler\"],[0,\"focus\",\"focusHandler\"],[0,\"focusout\",\"focusOutHandler\"]]]]],[\"tecton-tab-pane.cjs\",[[1,\"tecton-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"index\":[2],\"guid\":[2],\"provided\":[516],\"url\":[513],\"moduleId\":[513,\"module-id\"],\"minHeight\":[513,\"min-height\"],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"authPayload\":[16],\"showForm\":[4,\"show-form\"],\"_showForm\":[32]}]]],[\"q2-icon.cjs\",[[1,\"q2-icon\",{\"type\":[513],\"label\":[513],\"inline\":[516]}]]],[\"q2-dropdown-item.cjs\",[[1,\"q2-dropdown-item\",{\"disabled\":[516],\"removable\":[516],\"separator\":[516],\"label\":[1537],\"value\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-avatar.cjs\",[[1,\"q2-avatar\",{\"name\":[513],\"initials\":[513],\"src\":[513],\"icon\":[1],\"badSrc\":[32],\"isLoaded\":[32]}]]],[\"q2-checkbox.cjs\",[[1,\"q2-checkbox\",{\"checked\":[1540],\"disabled\":[516],\"hasError\":[516,\"has-error\"],\"hideLabel\":[1540,\"hide-label\"],\"indeterminate\":[516],\"label\":[1537],\"name\":[513],\"readonly\":[516],\"type\":[513],\"value\":[513],\"groupDisabled\":[516,\"group-disabled\"],\"alignment\":[513],\"description\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-optgroup_2.cjs\",[[1,\"q2-option\",{\"role\":[513],\"display\":[1025],\"value\":[513],\"disabled\":[516],\"disabledGroup\":[516,\"disabled-group\"],\"selected\":[516],\"multiline\":[516],\"active\":[516],\"_multiSelectHidden\":[516,\"_multiselecthidden\"]}],[1,\"q2-optgroup\",{\"disabled\":[516],\"label\":[513],\"hidden\":[32]}]]],[\"q2-message.cjs\",[[1,\"q2-message\",{\"type\":[513],\"appearance\":[513],\"description\":[516],\"presentToggle\":[32],\"present\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-input.cjs\",[[1,\"q2-input\",{\"value\":[1025],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"placeholder\":[513],\"disabled\":[516],\"autocomplete\":[513],\"autocorrect\":[513],\"autocapitalize\":[513],\"autofocus\":[516],\"hideMessages\":[516,\"hide-messages\"],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"readonly\":[516],\"clearable\":[516],\"optional\":[516],\"min\":[514],\"max\":[514],\"step\":[514],\"formatModifier\":[513,\"format-modifier\"],\"maxlength\":[1538],\"pseudo\":[516],\"showVisibilityToggle\":[516,\"show-visibility-toggle\"],\"textHidden\":[1540,\"text-hidden\"],\"badgeValue\":[513,\"badge-value\"],\"badgeTheme\":[513,\"badge-theme\"],\"role\":[1],\"ariaControls\":[1,\"aria-controls\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaHaspopup\":[1,\"aria-haspopup\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaActivedescendant\":[1,\"aria-activedescendant\"],\"current\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"errors\":[16],\"hints\":[16],\"formattedValueObject\":[32],\"hasFocus\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-option-list.cjs\",[[1,\"q2-option-list\",{\"role\":[513],\"customSearch\":[516,\"custom-search\"],\"noSelect\":[516,\"no-select\"],\"align\":[513],\"selectedOptions\":[1040],\"multiple\":[516],\"disabled\":[516],\"showSelected\":[1540,\"show-selected\"],\"type\":[1],\"label\":[1],\"hasOptions\":[32],\"setDefaultActiveElement\":[64],\"setActiveElement\":[64],\"handleExternalKeydown\":[64],\"getContents\":[64],\"getOptions\":[64]},[[0,\"focus\",\"delegateFocus\"],[0,\"click\",\"handleClick\"]]]]],[\"q2-badge.cjs\",[[1,\"q2-badge\",{\"value\":[514],\"maxLength\":[514,\"max-length\"],\"size\":[513],\"theme\":[513],\"status\":[513]}]]],[\"click-elsewhere_2.cjs\",[[1,\"q2-popover\",{\"direction\":[513],\"align\":[513],\"open\":[1540],\"block\":[516],\"minHeight\":[2,\"min-height\"],\"controlElement\":[16],\"currentDirection\":[32],\"show\":[32],\"toggle\":[64],\"scrollContainerTo\":[64]},[[0,\"popoverState\",\"popoverStateHandler\"]]],[0,\"click-elsewhere\"]]],[\"q2-btn_2.cjs\",[[1,\"q2-btn\",{\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaHasPopup\":[1,\"aria-has-popup\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaSelected\":[1,\"aria-selected\"],\"ariaPressed\":[1,\"aria-pressed\"],\"description\":[1],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"tabIndex\":[2,\"tab-index\"],\"intent\":[1537],\"disabled\":[516],\"type\":[513],\"loading\":[516],\"badge\":[516],\"active\":[516],\"block\":[516],\"color\":[1537],\"fab\":[516],\"ariaLabel\":[1537,\"aria-label\"],\"iconPosition\":[32]},[[2,\"click\",\"disable\"],[0,\"focus\",\"delegateFocus\"]]],[1,\"q2-loading\",{\"type\":[513],\"shape\":[513],\"modifiers\":[513],\"counts\":[513],\"label\":[1537],\"inline\":[516],\"ariaLabel\":[1537,\"aria-label\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"q2-calendar.cjs\",[[1,\"q2-calendar\",{\"value\":[1537],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"optional\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[1540],\"open\":[1540],\"typeable\":[516],\"clearable\":[516],\"placeholder\":[513],\"disabledMsg\":[513,\"disabled-msg\"],\"calendarLabel\":[513,\"calendar-label\"],\"disclaimer\":[513],\"displayFormat\":[513,\"display-format\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"cutoffTime\":[513,\"cutoff-time\"],\"daysOfWeekChecksum\":[514,\"days-of-week-checksum\"],\"assume\":[513],\"errors\":[1040],\"invalidDates\":[16],\"validDates\":[16],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1,\"popover-alignment\"],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popDirection\":[513,\"pop-direction\"],\"onsuccess\":[16],\"buttonLabel\":[513,\"button-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"keyboardSelection\":[32],\"typedValue\":[32],\"dateList\":[32],\"hintMessage\":[32],\"hintMessageType\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"error\",\"defaultErrorHandler\"],[0,\"success\",\"defaultSuccessHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"clear\",\"handleClear\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-select.cjs\",[[1,\"q2-select\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[1025],\"selectedOptions\":[1040],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"listLabel\":[1,\"list-label\"],\"errors\":[16],\"multiple\":[516],\"minRows\":[2,\"min-rows\"],\"popDirection\":[513,\"pop-direction\"],\"searchable\":[516],\"multilineOptions\":[516,\"multiline-options\"],\"optional\":[516],\"placeholder\":[513],\"hoist\":[4],\"ariaLabel\":[1537,\"aria-label\"],\"open\":[32],\"showSelected\":[32],\"searchText\":[32],\"hasCustomDisplay\":[32],\"inputFocused\":[32],\"statusMessage\":[32],\"prioritizeSearch\":[32],\"structuredSelectedOptions\":[32]},[[0,\"keydown\",\"keydownHandler\"],[0,\"change\",\"onHostElementChange\"],[0,\"input\",\"onHostElementInput\"],[0,\"focus\",\"delegateFocus\"],[0,\"focusout\",\"handleFocusout\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-action-sheet.cjs\",[[1,\"q2-action-sheet\",{\"data\":[1040],\"title\":[1],\"hideClose\":[4,\"hide-close\"],\"isScrollable\":[32],\"renderStatus\":[32],\"hide\":[64],\"show\":[64]}]]],[\"q2-dropdown.cjs\",[[1,\"q2-dropdown\",{\"type\":[513],\"icon\":[513],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"disabled\":[516],\"name\":[513],\"context\":[513],\"contextValue\":[513,\"context-value\"],\"resolvedType\":[513,\"resolved-type\"],\"additionalContext\":[513,\"additional-context\"],\"block\":[516],\"open\":[1540],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"alignment\":[513],\"popDirection\":[513,\"pop-direction\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-data-table.cjs\",[[1,\"q2-data-table\",{\"density\":[1537],\"bordered\":[1540],\"shadowed\":[1540],\"selectable\":[1540],\"loading\":[1540],\"hideCaption\":[1540,\"hide-caption\"],\"caption\":[1025],\"selectMode\":[1025,\"select-mode\"],\"headers\":[1040],\"rows\":[1040],\"serializedHeaders\":[32],\"serializedRows\":[32],\"hasExpandableRows\":[32],\"hasDropdowns\":[32],\"allRowsSelected\":[32],\"checkSlotCount\":[32]}]]],[\"q2-editable-field.cjs\",[[1,\"q2-editable-field\",{\"value\":[1537],\"editing\":[1540],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"formatModifier\":[513,\"format-modifier\"],\"truncated\":[516],\"maxlength\":[514],\"persistentLabel\":[516,\"persistent-label\"],\"disabled\":[516],\"block\":[516],\"hints\":[16],\"errors\":[16],\"ariaLabel\":[1537,\"aria-label\"],\"formattedValue\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-pagination.cjs\",[[1,\"q2-pagination\",{\"recordType\":[1,\"record-type\"],\"perPage\":[2,\"per-page\"],\"total\":[514],\"page\":[1538],\"pages\":[1538],\"recordsOnly\":[1540,\"records-only\"],\"pagesOnly\":[1540,\"pages-only\"],\"isSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-pill.cjs\",[[1,\"q2-pill\",{\"hoist\":[4],\"disabled\":[516],\"active\":[1540],\"open\":[1540],\"multiple\":[516],\"maxLength\":[514,\"max-length\"],\"label\":[513],\"value\":[1537],\"theme\":[513],\"selectedOptions\":[1040],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32],\"selectedOptionElements\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-tab-container.cjs\",[[1,\"q2-tab-container\",{\"value\":[1537],\"type\":[513],\"name\":[513],\"color\":[513],\"noPrint\":[516,\"no-print\"],\"hasLeft\":[32],\"hasRight\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32],\"tabs\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[9,\"resize\",\"onResize\"],[0,\"focus\",\"onFocus\"],[0,\"badge\",\"onBadge\"]]]]],[\"q2-tag.cjs\",[[1,\"q2-tag\",{\"hoist\":[4],\"open\":[1540],\"label\":[513],\"theme\":[513],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-carousel.cjs\",[[4,\"q2-carousel\",{\"autoPlay\":[516,\"auto-play\"],\"fullWidthPanes\":[516,\"full-width-panes\"],\"hidePagination\":[516,\"hide-pagination\"],\"showNavigationArrows\":[516,\"show-navigation-arrows\"],\"label\":[513],\"index\":[1538],\"ariaLabel\":[513,\"aria-label\"],\"universalCarouselOptions\":[32],\"fullWidthDisplayOptions\":[32],\"activePaneIndex\":[32],\"applyFocus\":[32],\"applyPaginationFocus\":[32],\"autoPlayInProgress\":[32],\"compactMode\":[32],\"carouselWrapperWidth\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"clickCarouselPane\",\"carouselPaneClicked\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-month-picker.cjs\",[[1,\"q2-month-picker\",{\"year\":[1538],\"disabledMonths\":[16],\"today\":[1],\"selectedIndex\":[32],\"focusedIndex\":[32],\"showYearLayer\":[32]}]]],[\"q2-section.cjs\",[[1,\"q2-section\",{\"label\":[513],\"collapsible\":[516],\"noCollapseIcon\":[516,\"no-collapse-icon\"],\"expanded\":[1540],\"contentHeight\":[32],\"hideContent\":[32],\"hasYieldedHeader\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper.cjs\",[[1,\"q2-stepper\",{\"currentStep\":[1538,\"current-step\"],\"stepCount\":[1026,\"step-count\"],\"lastEnabledStep\":[1026,\"last-enabled-step\"],\"contentChangeTriggerCount\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"],[0,\"contentChange\",\"contentChangeHandler\"]]]]],[\"q2-card.cjs\",[[1,\"q2-card\",{\"title\":[513],\"description\":[513],\"avatarName\":[513,\"avatar-name\"],\"avatarInitials\":[513,\"avatar-initials\"],\"avatarIcon\":[513,\"avatar-icon\"],\"avatarSrc\":[513,\"avatar-src\"],\"isSmall\":[516,\"is-small\"],\"bar\":[513],\"isStatic\":[516,\"is-static\"],\"isTouch\":[516,\"is-touch\"],\"url\":[513],\"target\":[513],\"type\":[513],\"isAutoTouch\":[32],\"isAutoSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-chart-donut.cjs\",[[1,\"q2-chart-donut\",{\"chartName\":[513,\"chart-name\"],\"summaryIcon\":[513,\"summary-icon\"],\"summaryName\":[513,\"summary-name\"],\"innerRadius\":[1025,\"inner-radius\"],\"outerRadius\":[1025,\"outer-radius\"],\"minSliceSize\":[1,\"min-slice-size\"],\"selectedOffset\":[2,\"selected-offset\"],\"hoverScaleSize\":[2,\"hover-scale-size\"],\"format\":[513],\"isClickable\":[516,\"is-clickable\"],\"data\":[16],\"selectedId\":[1,\"selected-id\"],\"hoveredId\":[32],\"selectById\":[64],\"selectByIndex\":[64],\"clearSelection\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox-group.cjs\",[[1,\"q2-checkbox-group\",{\"label\":[513],\"value\":[1040],\"disabled\":[516],\"readonly\":[516],\"optional\":[516],\"hasError\":[516,\"has-error\"]},[[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-radio-group.cjs\",[[1,\"q2-radio-group\",{\"label\":[513],\"value\":[1025],\"disabled\":[516],\"name\":[513],\"optional\":[516],\"readonly\":[516],\"tileLayout\":[1540,\"tile-layout\"],\"tileAlignment\":[513,\"tile-alignment\"],\"hasError\":[516,\"has-error\"],\"tilelayout\":[1540]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"],[0,\"keydown\",\"keydownHandler\"]]]]],[\"q2-stepper-vertical.cjs\",[[1,\"q2-stepper-vertical\",{\"currentStepId\":[1537,\"current-step-id\"],\"structuredPanes\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-textarea.cjs\",[[1,\"q2-textarea\",{\"value\":[1025],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"hideMessages\":[516,\"hide-messages\"],\"optional\":[516],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[516],\"spellcheck\":[516],\"maxlength\":[1538],\"rows\":[514],\"cols\":[514],\"resize\":[513],\"errors\":[16],\"hints\":[16],\"hasFocus\":[32],\"downParams\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-carousel-pane.cjs\",[[4,\"q2-carousel-pane\",{\"index\":[2],\"siblingCount\":[2,\"sibling-count\"],\"isActivePane\":[516,\"is-active-pane\"],\"label\":[513]}]]],[\"q2-chart-area.cjs\",[[1,\"q2-chart-area\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"lineColor\":[513,\"line-color\"],\"pointerLineColor\":[513,\"pointer-line-color\"],\"pointerLineStyle\":[513,\"pointer-line-style\"],\"areaColor\":[513,\"area-color\"],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideNameAxisLabels\":[516,\"hide-name-axis-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"showChartName\":[516,\"show-chart-name\"],\"showDatapointLabels\":[516,\"show-datapoint-labels\"],\"showGradient\":[516,\"show-gradient\"],\"gridLines\":[513,\"grid-lines\"]}]]],[\"q2-chart-bar.cjs\",[[1,\"q2-chart-bar\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"color\":[513],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideBarLabels\":[516,\"hide-bar-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"orientation\":[513],\"showChartName\":[516,\"show-chart-name\"],\"sort\":[516]}]]],[\"q2-loading-element.cjs\",[[0,\"q2-loading-element\",{\"shape\":[513],\"width\":[513],\"height\":[513],\"borderRadius\":[513,\"border-radius\"]}]]],[\"q2-loc.cjs\",[[1,\"q2-loc\",{\"value\":[513],\"substitutions\":[16]}]]],[\"q2-radio.cjs\",[[1,\"q2-radio\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[513],\"disabled\":[516],\"checked\":[516],\"tabIndex\":[2,\"tab-index\"],\"name\":[513],\"groupDisabled\":[4,\"group-disabled\"],\"groupReadonly\":[4,\"group-readonly\"],\"groupTileLayout\":[4,\"group-tile-layout\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"click\",\"onHostClick\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper-pane.cjs\",[[1,\"q2-stepper-pane\",{\"label\":[513],\"description\":[513],\"isActive\":[516,\"is-active\"],\"showWithChildren\":[516,\"show-with-children\"],\"status\":[513],\"isChildActive\":[32]},[[0,\"activeChange\",\"checkForActiveChildren\"]]]]],[\"q2-tab-pane.cjs\",[[1,\"q2-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"index\":[2],\"guid\":[2]}]]],[\"q2-tooltip.cjs\",[[1,\"q2-tooltip\",{\"label\":[513],\"block\":[516],\"multiline\":[516],\"persistent\":[516],\"immediate\":[516],\"focusable\":[516],\"position\":[513],\"focusClass\":[32]},[[0,\"keyup\",\"keyUpHandler\"],[2,\"focus\",\"focusCaptureHandler\"],[0,\"focus\",\"focusHandler\"],[0,\"focusout\",\"focusOutHandler\"]]]]],[\"tecton-tab-pane.cjs\",[[1,\"tecton-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"index\":[2],\"guid\":[2],\"provided\":[516],\"url\":[513],\"moduleId\":[513,\"module-id\"],\"minHeight\":[513,\"min-height\"],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"authPayload\":[16],\"showForm\":[4,\"show-form\"],\"_showForm\":[32]}]]],[\"q2-icon.cjs\",[[1,\"q2-icon\",{\"type\":[513],\"label\":[513],\"inline\":[516]}]]],[\"q2-dropdown-item.cjs\",[[1,\"q2-dropdown-item\",{\"disabled\":[516],\"removable\":[516],\"separator\":[516],\"label\":[1537],\"value\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-avatar.cjs\",[[1,\"q2-avatar\",{\"name\":[513],\"initials\":[513],\"src\":[513],\"icon\":[1],\"badSrc\":[32],\"isLoaded\":[32]}]]],[\"q2-checkbox.cjs\",[[1,\"q2-checkbox\",{\"checked\":[1540],\"disabled\":[516],\"hasError\":[516,\"has-error\"],\"hideLabel\":[1540,\"hide-label\"],\"indeterminate\":[516],\"label\":[1537],\"name\":[513],\"readonly\":[516],\"type\":[513],\"value\":[513],\"groupDisabled\":[516,\"group-disabled\"],\"alignment\":[513],\"description\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-optgroup_2.cjs\",[[1,\"q2-option\",{\"role\":[513],\"display\":[1025],\"value\":[513],\"disabled\":[516],\"disabledGroup\":[516,\"disabled-group\"],\"selected\":[516],\"multiline\":[516],\"active\":[516],\"_multiSelectHidden\":[516,\"_multiselecthidden\"]}],[1,\"q2-optgroup\",{\"disabled\":[516],\"label\":[513],\"hidden\":[32]}]]],[\"q2-message.cjs\",[[1,\"q2-message\",{\"type\":[513],\"appearance\":[513],\"description\":[516],\"presentToggle\":[32],\"present\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-input.cjs\",[[1,\"q2-input\",{\"value\":[1025],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"placeholder\":[513],\"disabled\":[516],\"autocomplete\":[513],\"autocorrect\":[513],\"autocapitalize\":[513],\"autofocus\":[516],\"hideMessages\":[516,\"hide-messages\"],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"readonly\":[516],\"clearable\":[516],\"optional\":[516],\"min\":[514],\"max\":[514],\"step\":[514],\"formatModifier\":[513,\"format-modifier\"],\"maxlength\":[1538],\"pseudo\":[516],\"showVisibilityToggle\":[516,\"show-visibility-toggle\"],\"textHidden\":[1540,\"text-hidden\"],\"badgeValue\":[513,\"badge-value\"],\"badgeTheme\":[513,\"badge-theme\"],\"role\":[1],\"ariaControls\":[1,\"aria-controls\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaHaspopup\":[1,\"aria-haspopup\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaActivedescendant\":[1,\"aria-activedescendant\"],\"current\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"errors\":[16],\"hints\":[16],\"formattedValueObject\":[32],\"hasFocus\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-option-list.cjs\",[[1,\"q2-option-list\",{\"role\":[513],\"customSearch\":[516,\"custom-search\"],\"noSelect\":[516,\"no-select\"],\"align\":[513],\"selectedOptions\":[1040],\"multiple\":[516],\"disabled\":[516],\"showSelected\":[1540,\"show-selected\"],\"type\":[1],\"label\":[1],\"hasOptions\":[32],\"setDefaultActiveElement\":[64],\"setActiveElement\":[64],\"handleExternalKeydown\":[64],\"getContents\":[64],\"getOptions\":[64]},[[0,\"focus\",\"delegateFocus\"],[0,\"click\",\"handleClick\"]]]]],[\"q2-badge.cjs\",[[1,\"q2-badge\",{\"value\":[514],\"maxLength\":[514,\"max-length\"],\"size\":[513],\"theme\":[513],\"status\":[513]}]]],[\"click-elsewhere_2.cjs\",[[1,\"q2-popover\",{\"direction\":[513],\"align\":[513],\"open\":[1540],\"block\":[516],\"minHeight\":[2,\"min-height\"],\"controlElement\":[16],\"currentDirection\":[32],\"show\":[32],\"toggle\":[64],\"scrollContainerTo\":[64]},[[0,\"popoverState\",\"popoverStateHandler\"]]],[0,\"click-elsewhere\"]]],[\"q2-btn_2.cjs\",[[1,\"q2-btn\",{\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaHasPopup\":[1,\"aria-has-popup\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaSelected\":[1,\"aria-selected\"],\"ariaPressed\":[1,\"aria-pressed\"],\"description\":[1],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"tabIndex\":[2,\"tab-index\"],\"intent\":[1537],\"disabled\":[516],\"type\":[513],\"size\":[513],\"loading\":[516],\"badge\":[516],\"active\":[516],\"block\":[516],\"color\":[1537],\"fab\":[516],\"ariaLabel\":[1537,\"aria-label\"],\"iconPosition\":[32]},[[2,\"click\",\"disable\"],[0,\"focus\",\"delegateFocus\"]]],[1,\"q2-loading\",{\"type\":[513],\"shape\":[513],\"modifiers\":[513],\"counts\":[513],\"label\":[1537],\"inline\":[516],\"ariaLabel\":[1537,\"aria-label\"]}]]]]"), options);
   });
 };

package/dist/cjs/q2-btn_2.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-c2597758.js');
 const index$1 = require('./index-d42bed64.js');
 const shapes = require('./shapes-0560a648.js');
-const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none}:host{--comp-btn-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-secondary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-background:var(--tct-btn-neutral-background, var(--tct-btn-neutral-bg, transparent));--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border, 0);border-radius:var(--tct-btn-border-radius);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-btn-primary-border:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)) var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent)) var(--tct-btn-primary-border-style, var(--t-btn-primary-border-style, solid));border:var(--tct-btn-primary-border, var(--comp-btn-primary-border));background:var(--comp-btn-primary-background);color:var(--comp-btn-primary-font-color);border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-background, var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-btn-secondary-border:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)) var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent)) var(--tct-btn-secondary-border-style, var(--t-btn-secondary-border-style, solid));border:var(--tct-btn-secondary-border, var(--comp-btn-secondary-border));background:var(--comp-btn-secondary-background);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-background, var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{--comp-btn-neutral-border:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)) var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent)) var(--tct-btn-neutral-border-style, var(--t-btn-neutral-border-style, solid));border:var(--tct-btn-neutral-border, var(--comp-btn-neutral-border));background:var(--comp-btn-neutral-background, transparent);color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-background, var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent)));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled,:host([intent=neutral]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-background, var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-background))));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}:host([color=primary]) ::slotted(q2-icon),:host([intent=workflow-primary]) ::slotted(q2-icon){color:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-btn-primary-font-color, red)))}:host([color=secondary]) ::slotted(q2-icon),:host([intent=workflow-secondary]) ::slotted(q2-icon){color:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-btn-secondary-font-color, red)))}:host([intent=neutral]) ::slotted(q2-icon){color:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-btn-neutral-font-color, red)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}";
+const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);border-radius:var(--tct-btn-border-radius);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 12px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 32px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-primary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-primary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-primary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-primary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-primary-outline-color, var(--comp-outline-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-color, var(--comp-color));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-style:var(--tct-btn-primary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-primary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-style:var(--tct-btn-primary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-primary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-style:var(--tct-btn-primary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-primary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){color:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-color, red)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg));--comp-color:var(--tct-btn-secondary-font-color);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-secondary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-secondary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-secondary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-secondary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-secondary-outline-color, var(--comp-outline-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-color, var(--comp-color));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-style:var(--tct-btn-secondary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-style:var(--tct-btn-secondary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-style:var(--tct-btn-secondary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){color:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-color, red)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #c30000));--comp-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-destroy-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-destroy-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-destroy-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));outline-style:var(--tct-btn-destroy-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-destroy-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-destroy-outline-color, var(--comp-outline-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-color, var(--comp-color));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-style:var(--tct-btn-destroy-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-style:var(--tct-btn-destroy-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-style:var(--tct-btn-destroy-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){color:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-color, red)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-escape-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-escape-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-escape-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));outline-style:var(--tct-btn-escape-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-escape-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-escape-outline-color, var(--comp-outline-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-color, var(--comp-color));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-style:var(--tct-btn-escape-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-escape-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-style:var(--tct-btn-escape-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-escape-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-style:var(--tct-btn-escape-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-escape-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){color:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-color, red)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-color, var(--comp-color));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-style:var(--tct-btn-neutral-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-style:var(--tct-btn-neutral-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){color:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-color, red)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-text-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-text-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-text-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-text-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-text-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-color, var(--comp-color));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-style:var(--tct-btn-neutral-text-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-text-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-style:var(--tct-btn-neutral-text-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){color:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-color, red)))}:host([color=primary][loading]) button,:host([intent=workflow-primary][loading]) button{--comp-background:var(--tct-btn-primary-loading-background, #0063a0)}:host([intent=workflow-escape][loading]) button{--comp-background:var(--tct-btn-escape-loading-background, var(--comp-background-alternative))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}";
 const Q2Btn = class {
   constructor(hostRef) {
@@ -14,6 +14,42 @@ const Q2Btn = class {
     this.handleSlotChange = () => {
       this.handleIcons();
     };
+    this.handleIcons = () => {
+      // Only allow one icon in the button
+      const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
+        if (acc)
+          element.remove();
+        else
+          acc = element;
+        return acc;
+      }, null);
+      const hasIcon = !!icon;
+      const hasLoc = !!this.hostElement.querySelector('q2-loc');
+      const hasText = !!this.hostElement.textContent.trim();
+      const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
+      const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
+      const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
+      let iconPosition;
+      if (hasIconOnly)
+        iconPosition = 'only';
+      else if (hasIconLeft)
+        iconPosition = 'left';
+      else if (hasIconRight)
+        iconPosition = 'right';
+      this.iconPosition = iconPosition;
+    };
+    this.renderButton = () => {
+      const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } = this.buttonAttributes;
+      const { iconPosition, loading, badge, label, hideLabel } = this;
+      const renderLoadingSpinner = iconPosition || loading;
+      const isLoadingSpinnerInline = !iconPosition || badge;
+      return (index.h(index.Fragment, null, index.h("button", { ref: el => (this.primaryBtn = el !== null && el !== void 0 ? el : this.primaryBtn), "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && index$1.loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '', "aria-describedby": !!description ? 'hidden-description' : undefined }, index.h("div", null, renderLoadingSpinner && (index.h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? index$1.loc(label) : index.h("slot", { onSlotchange: this.handleSlotChange }))), !!description && (index.h("div", { id: "hidden-description", "aria-hidden": "true", class: "sr" }, description))));
+    };
+    this.render = () => {
+      return this.size === 'small' ? (
+      // wrap only for small sized
+      index.h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el !== null && el !== void 0 ? el : this.primaryBtnWrapper), tabIndex: -1 }, this.renderButton())) : (this.renderButton());
+    };
     this.ariaExpanded = undefined;
     this.ariaHasPopup = undefined;
     this.ariaControls = undefined;
@@ -26,6 +62,7 @@ const Q2Btn = class {
     this.intent = undefined;
     this.disabled = undefined;
     this.type = undefined;
+    this.size = undefined;
     this.loading = undefined;
     this.badge = undefined;
     this.active = undefined;
@@ -48,48 +85,18 @@ const Q2Btn = class {
     if (this.disabled) {
       ev.stopImmediatePropagation();
     }
+    this.primaryBtn.focus();
   }
   delegateFocus(event) {
     if (!index$1.isEventFromElement(event, this.hostElement))
       return;
-    this.hostElement.shadowRoot.querySelector('button').focus();
+    this.primaryBtn.focus();
   }
   //////// Method //////////
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     index$1.handleAriaLabel(this);
   }
-  handleIcons() {
-    // Only allow one icon in the button
-    const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
-      if (acc)
-        element.remove();
-      else
-        acc = element;
-      return acc;
-    }, null);
-    const hasIcon = !!icon;
-    const hasLoc = !!this.hostElement.querySelector('q2-loc');
-    const hasText = !!this.hostElement.textContent.trim();
-    const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
-    const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
-    const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
-    let iconPosition;
-    if (hasIconOnly)
-      iconPosition = 'only';
-    else if (hasIconLeft)
-      iconPosition = 'left';
-    else if (hasIconRight)
-      iconPosition = 'right';
-    this.iconPosition = iconPosition;
-  }
-  render() {
-    const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } = this.buttonAttributes;
-    const { iconPosition, loading, badge, label, hideLabel } = this;
-    const renderLoadingSpinner = iconPosition || loading;
-    const isLoadingSpinnerInline = !iconPosition || badge;
-    return (index.h(index.Fragment, null, index.h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && index$1.loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '', "aria-describedby": !!description ? 'hidden-description' : undefined }, index.h("div", null, renderLoadingSpinner && (index.h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? index$1.loc(label) : index.h("slot", { onSlotchange: this.handleSlotChange }))), !!description && (index.h("div", { id: "hidden-description", "aria-hidden": "true", class: "sr" }, description))));
-  }
   get buttonAttributes() {
     var _a, _b, _c;
     return {

package/dist/cjs/q2-btn_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-btn.q2-loading.entry.cjs.js","mappings":"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","names":["stylesCss","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","h","Fragment","loc","skeletonShapes"],"sources":["./src/components/q2-btn/styles.scss?tag=q2-btn&encapsulation=shadow","./src/components/q2-btn/index.tsx","./src/components/q2-loading/styles.scss?tag=q2-loading&encapsulation=shadow","./src/components/q2-loading/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\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}\n\n:host {\n --comp-btn-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n --comp-btn-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\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-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);\n --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);\n --comp-btn-primary-box-shadow: #{var-list(var-prefixer(btn-primary-box-shadow), --comp-btn-fallback-box-shadow)};\n --comp-btn-primary-hover-box-shadow: #{var-list(\n var-prefixer(btn-primary-hover-box-shadow),\n --comp-btn-fallback-hover-box-shadow\n )};\n --comp-btn-secondary-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-btn-secondary-font-color: #{var-list(\n var-prefixer(btn-secondary-font-color),\n --t-button-default-font-color,\n #2e2e2e\n )};\n --comp-btn-secondary-box-shadow: #{var-list(var-prefixer(btn-secondary-box-shadow), --comp-btn-fallback-box-shadow)};\n --comp-btn-secondary-hover-box-shadow: #{var-list(\n var-prefixer(btn-secondary-hover-box-shadow),\n --comp-btn-fallback-hover-box-shadow\n )};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-neutral-background: #{var-list(--tct-btn-neutral-background, --tct-btn-neutral-bg, transparent)};\n --comp-btn-neutral-font-color: #{var-list(\n var-prefixer(btn-neutral-font-color),\n --t-button-default-font-color,\n #2e2e2e\n )};\n --comp-btn-neutral-box-shadow: #{var-list(var-prefixer(btn-neutral-box-shadow), --comp-btn-fallback-box-shadow)};\n --comp-btn-neutral-hover-box-shadow: #{var-list(\n var-prefixer(btn-neutral-hover-box-shadow),\n --comp-btn-neutral-fallback-hover-box-shadow\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, 0);\n border-radius: var(--tct-btn-border-radius);\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 &: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 // Sizes\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n\n :host([color]:not([size])) &,\n :host([intent]:not([size])) & {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n\n :host([size='2']) & {\n padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n }\n\n :host([size='3']) & {\n padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n }\n\n :host([size='4x']) & {\n padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n }\n\n :host([size='4']) & {\n padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n }\n\n // Colors\n :host([color]) &,\n :host([intent]) & {\n border-style: solid;\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-btn-primary-border: #{var-list(var-prefixer(btn-primary-border-width), 0)\n var-list(var-prefixer(btn-primary-border-color), transparent)\n var-list(var-prefixer(btn-primary-border-style), solid)};\n border: var-list(--tct-btn-primary-border, --comp-btn-primary-border);\n background: var-list(--comp-btn-primary-background);\n color: var-list(--comp-btn-primary-font-color);\n border-radius: var-list(\n var-prefixer(btn-primary-border-radius),\n --tct-btn-border-radius,\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n box-shadow: var-list(--comp-btn-primary-box-shadow);\n font-weight: var-list(var-prefixer(btn-primary-font-weight), 600);\n text-transform: var-list(var-prefixer(btn-primary-text-transform), none);\n letter-spacing: var-list(var-prefixer(btn-primary-letter-spacing), normal);\n\n &:enabled:hover,\n &:enabled:focus,\n &:enabled:active {\n background: var-list(\n --tct-btn-primary-hover-background,\n var-prefixer(btn-primary-hover-bg),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n color: var-list(var-prefixer(btn-primary-hover-font-color), --tct-white, --app-white, #ffffff);\n border-color: var-list(\n var-prefixer(btn-primary-hover-border-color),\n var-prefixer(btn-primary-border-color),\n transparent\n );\n }\n\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var-list(--comp-btn-primary-hover-box-shadow);\n }\n\n &:focus {\n &,\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow);\n }\n }\n\n &:disabled {\n background: var-list(\n --tct-btn-primary-disabled-background,\n var-prefixer(btn-primary-disabled-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-primary-disabled-font-color), --comp-btn-primary-font-color);\n box-shadow: var-list(var-prefixer(btn-primary-disabled-box-shadow), --comp-btn-primary-box-shadow);\n }\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\n --comp-btn-secondary-border: #{var-list(var-prefixer(btn-secondary-border-width), 0)\n var-list(var-prefixer(btn-secondary-border-color), transparent)\n var-list(var-prefixer(btn-secondary-border-style), solid)};\n border: var-list(--tct-btn-secondary-border, --comp-btn-secondary-border);\n background: var(--comp-btn-secondary-background);\n color: var-list(\n --comp-btn-secondary-font-color,\n var-prefixer(btn-secondary-font-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border-radius: var-list(\n var-prefixer(btn-secondary-border-radius),\n --tct-btn-border-radius,\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n box-shadow: var(--comp-btn-secondary-box-shadow);\n font-weight: var-list(var-prefixer(btn-secondary-font-weight), 600);\n text-transform: var-list(var-prefixer(btn-secondary-text-transform), none);\n letter-spacing: var-list(var-prefixer(btn-secondary-letter-spacing), normal);\n\n &:enabled:hover,\n &:enabled:focus,\n &:enabled:active {\n background: var-list(\n --tct-btn-secondary-hover-background,\n var-prefixer(btn-secondary-hover-bg),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n color: var-list(\n var-prefixer(btn-secondary-hover-font-color),\n --t-button-default-hover-font-color,\n --tct-white,\n --app-white,\n #ffffff\n );\n border-color: var-list(\n var-prefixer(btn-secondary-hover-border-color),\n var-prefixer(btn-secondary-border-color),\n transparent\n );\n }\n\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--comp-btn-secondary-hover-box-shadow);\n }\n\n &:focus {\n &,\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow);\n }\n }\n\n &:disabled {\n background: var-list(\n --tct-btn-secondary-disabled-background,\n var-prefixer(btn-secondary-disabled-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-secondary-disabled-font-color), --comp-btn-secondary-font-color);\n box-shadow: var-list(var-prefixer(btn-secondary-disabled-box-shadow), --comp-btn-secondary-box-shadow);\n }\n }\n\n :host([intent='neutral']) & {\n --comp-btn-neutral-border: #{var-list(var-prefixer(btn-neutral-border-width), 0)\n var-list(var-prefixer(btn-neutral-border-color), transparent)\n var-list(var-prefixer(btn-neutral-border-style), solid)};\n border: var-list(--tct-btn-neutral-border, --comp-btn-neutral-border);\n background: var-list(--comp-btn-neutral-background, transparent);\n color: var-list(\n --comp-btn-neutral-font-color,\n var-prefixer(btn-neutral-font-color),\n var-prefixer(gray-1),\n --tct-black,\n --app-black,\n #0d0d0d\n );\n border-radius: var-list(\n var-prefixer(btn-neutral-border-radius),\n --tct-btn-border-radius,\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n box-shadow: var(--comp-btn-neutral-box-shadow);\n font-weight: var-list(var-prefixer(btn-neutral-font-weight), 600);\n text-transform: var-list(var-prefixer(btn-neutral-text-transform), none);\n letter-spacing: var-list(var-prefixer(btn-neutral-letter-spacing), normal);\n\n &:enabled:hover,\n &:enabled:focus,\n &:enabled:active {\n background: var-list(--tct-btn-neutral-hover-background, var-prefixer(btn-neutral-hover-bg), transparent);\n color: var-list(var-prefixer(btn-neutral-hover-font-color), --tct-white, --app-white, #ffffff);\n border-color: var-list(\n var-prefixer(btn-neutral-hover-border-color),\n var-prefixer(btn-neutral-border-color),\n transparent\n );\n }\n\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--comp-btn-neutral-hover-box-shadow);\n }\n\n &:focus {\n &,\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow);\n }\n }\n\n &:disabled {\n background: var-list(\n --tct-btn-neutral-disabled-background,\n var-prefixer(btn-neutral-disabled-bg),\n --comp-btn-neutral-background\n );\n color: var-list(var-prefixer(btn-neutral-disabled-font-color), --comp-btn-neutral-font-color);\n box-shadow: var-list(\n var-prefixer(btn-neutral-disabled-box-shadow),\n --tct-btn-neutral-disabled-box-shadow,\n --comp-btn-neutral-box-shadow\n );\n }\n }\n\n // Icons\n :host &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n 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\n &:hover,\n &:focus {\n background-color: 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 :host(:not([intent])[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 :host(:not([intent])) &.icon-only:hover ,\n :host(:not([intent])) &.icon-only:focus ,\n :host(:not([intent])[active]) &.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // Badges\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 3px\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\n// Allow for custom icon colors based on intent\n:host([color='primary']),\n:host([intent='workflow-primary']) {\n & ::slotted(q2-icon) {\n color: var-list(var-prefixer(btn-primary-icon-color), --comp-btn-primary-font-color, red);\n }\n}\n\n:host([color='secondary']),\n:host([intent='workflow-secondary']) {\n & ::slotted(q2-icon) {\n color: var-list(var-prefixer(btn-secondary-icon-color), --comp-btn-secondary-font-color, red);\n }\n}\n\n:host([intent='neutral']) {\n & ::slotted(q2-icon) {\n color: var-list(var-prefixer(btn-neutral-icon-color), --comp-btn-neutral-font-color, red);\n }\n}\n\ndiv {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\nq2-loading {\n --tct-loading-primary-color: currentColor;\n --tct-loading-secondary-color: currentColor;\n --tct-loading-spinner-size: 24px;\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]) 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","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-btn',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n @Prop() ariaExpanded: string;\n @Prop() ariaHasPopup: string;\n @Prop() ariaControls: string;\n @Prop() ariaSelected: string;\n @Prop() ariaPressed: string;\n @Prop() description: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop() tabIndex: number;\n @Prop({ reflect: true, mutable: true }) intent: 'workflow-primary' \| 'workflow-secondary' \| 'neutral';\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) type: string;\n @Prop({ reflect: true }) loading: boolean;\n @Prop({ reflect: true }) badge: boolean;\n @Prop({ reflect: true }) active: boolean;\n @Prop({ reflect: true }) block: boolean;\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n /* @deprecated /\n @Prop({ reflect: true }) fab: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @State() iconPosition: 'left' \| 'right' \| 'only';\n\n @Element() hostElement: HTMLElement;\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n @Listen('click', { capture: true })\n disable(ev: Event) {\n if (this.disabled) {\n ev.stopImmediatePropagation();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('button').focus();\n }\n\n //////// Method //////////\n\n ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n handleSlotChange = () => {\n this.handleIcons();\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 render() {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition \|\| loading;\n const isLoadingSpinnerInline = !iconPosition \|\| badge;\n\n return (\n <Fragment>\n <button\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={iconPosition ? `icon-${iconPosition}` : ''}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n >\n <div>\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n </div>\n </button>\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 get buttonAttributes() {\n return {\n ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n ariaHasPopup:\n this.ariaHasPopup !== undefined\n ? `${this.ariaHasPopup === 'true' \|\| this.ariaHasPopup === 'menu'}`\n : undefined,\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled \|\| false,\n type: this.type \|\| 'button',\n tabindex: this.tabIndex \|\| undefined,\n };\n }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({\n tag: 'q2-loading',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Loading implements ComponentInterface {\n @Element() hostElement: HTMLElement;\n\n @Prop({ reflect: true }) type: 'spinner' \| 'skeleton';\n @Prop({ reflect: true }) shape: string;\n @Prop({ reflect: true }) modifiers: string;\n @Prop({ reflect: true }) counts: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true }) inline: boolean;\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n get loader() {\n const loaderMap = {\n default: this.spinner,\n spinner: this.spinner,\n skeleton: this.skeletonLoader,\n };\n\n return loaderMap[this.type] \|\| loaderMap.default;\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' \|\| !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' \|\| !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n get spinnerShape() {\n const spinnerMap = {\n default: this.halfCircleSpinner,\n 'half-circle': this.halfCircleSpinner,\n };\n\n return spinnerMap[this.type] \|\| spinnerMap.default;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| 'tecton.element.loading.ariaLabel');\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n render() {\n return this.loader();\n }\n\n halfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-label={this.localizedLabel}\n >\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n </div>\n );\n };\n\n spinner = () => {\n return this.halfCircleSpinner();\n };\n\n skeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-label={this.localizedLabel}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n </div>\n );\n };\n}\n"],"version":3}
1	+ {"file":"q2-btn.q2-loading.entry.cjs.js","mappings":"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","names":["stylesCss","h","Fragment","loc","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","skeletonShapes"],"sources":["./src/components/q2-btn/styles.scss?tag=q2-btn&encapsulation=shadow","./src/components/q2-btn/index.tsx","./src/components/q2-loading/styles.scss?tag=q2-loading&encapsulation=shadow","./src/components/q2-loading/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './mixins';\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}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 3px)};\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 .btn-height-wrapper {\n height: var(--comp-btn-min-height, 44px);\n cursor: pointer;\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 border-radius: var(--tct-btn-border-radius);\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 &: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 // Sizes\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n :host([color]:not([size])) &,\n :host([intent]:not([size])) & {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\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), 12px);\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-small), 16px);\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-small), 32px);\n }\n\n // Colors\n :host([color]) &,\n :host([intent]) & {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-background: #{var-list(--tct-btn-primary-background, --tct-btn-primary-bg)};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-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-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-color);\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\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(--tct-btn-secondary-hover-background, --tct-btn-secondary-hover-bg)};\n --comp-color: var(--tct-btn-secondary-font-color);\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-color, --app-white, null);\n @include btn-ring(secondary, active, 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-color);\n }\n\n :host([intent='workflow-destroy']) & {\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #c30000)};\n --comp-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-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-color);\n }\n\n :host([intent='workflow-escape']) & {\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-color: #{var-list(--tct-btn-escape-font-color, --tct-btn-primary-background, --tct-btn-primary-bg)};\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-color, --comp-background, null);\n @include btn-ring(escape, active, 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-color);\n }\n\n :host([intent='neutral']) & {\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-color: #{var-list(--tct-btn-neutral-font-color, --tct-btn-primary-background, --tct-btn-primary-bg)};\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-color);\n @include btn-ring(neutral, hover, --comp-color, --app-white, null);\n @include btn-ring(neutral, active, 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-color);\n }\n\n :host([intent='neutral-text']) & {\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-color: #{var-list(--tct-btn-neutral-text-font-color, --tct-btn-primary-background, --tct-btn-primary-bg)};\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-color, --comp-background, null);\n @include btn-ring(neutral-text, active, 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-color);\n }\n\n // different background for loading\n :host([color='primary'][loading]) &,\n :host([intent='workflow-primary'][loading]) & {\n --comp-background: var(--tct-btn-primary-loading-background, #0063a0);\n }\n\n :host([intent='workflow-escape'][loading]) & {\n --comp-background: #{var-list(--tct-btn-escape-loading-background, --comp-background-alternative)};\n }\n\n // Icons\n :host &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n 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\n &:hover,\n &:focus {\n background-color: 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 :host(:not([intent])[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 :host(:not([intent])) &.icon-only:hover ,\n :host(:not([intent])) &.icon-only:focus ,\n :host(:not([intent])[active]) &.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // Badges\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 3px\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\ndiv {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\nq2-loading {\n --tct-loading-primary-color: currentColor;\n --tct-loading-secondary-color: currentColor;\n --tct-loading-spinner-size: 24px;\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]) 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","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-btn',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n @Prop() ariaExpanded: string;\n @Prop() ariaHasPopup: string;\n @Prop() ariaControls: string;\n @Prop() ariaSelected: string;\n @Prop() ariaPressed: string;\n @Prop() description: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop() tabIndex: number;\n @Prop({ reflect: true, mutable: true }) intent:\n \| 'workflow-primary'\n \| 'workflow-secondary'\n \| 'workflow-destroy'\n \| 'workflow-escape'\n \| 'neutral'\n \| 'neutral-text';\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) type: string;\n @Prop({ reflect: true }) size: string;\n @Prop({ reflect: true }) loading: boolean;\n @Prop({ reflect: true }) badge: boolean;\n @Prop({ reflect: true }) active: boolean;\n @Prop({ reflect: true }) block: boolean;\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n /* @deprecated /\n @Prop({ reflect: true }) fab: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @State() iconPosition: 'left' \| 'right' \| 'only';\n\n @Element() hostElement: HTMLElement;\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n @Listen('click', { capture: true })\n disable(ev: Event) {\n if (this.disabled) {\n ev.stopImmediatePropagation();\n }\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 //////// Method //////////\n\n ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n handleSlotChange = () => {\n this.handleIcons();\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 renderButton = () => {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, 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={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={iconPosition ? `icon-${iconPosition}` : ''}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n >\n <div>\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n </div>\n </button>\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 render = () => {\n return this.size === 'small' ? (\n // wrap only for small sized\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={-1}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n };\n\n get buttonAttributes() {\n return {\n ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n ariaHasPopup:\n this.ariaHasPopup !== undefined\n ? `${this.ariaHasPopup === 'true' \|\| this.ariaHasPopup === 'menu'}`\n : undefined,\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled \|\| false,\n type: this.type \|\| 'button',\n tabindex: this.tabIndex \|\| undefined,\n };\n }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({\n tag: 'q2-loading',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Loading implements ComponentInterface {\n @Element() hostElement: HTMLElement;\n\n @Prop({ reflect: true }) type: 'spinner' \| 'skeleton';\n @Prop({ reflect: true }) shape: string;\n @Prop({ reflect: true }) modifiers: string;\n @Prop({ reflect: true }) counts: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true }) inline: boolean;\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n get loader() {\n const loaderMap = {\n default: this.spinner,\n spinner: this.spinner,\n skeleton: this.skeletonLoader,\n };\n\n return loaderMap[this.type] \|\| loaderMap.default;\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' \|\| !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' \|\| !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n get spinnerShape() {\n const spinnerMap = {\n default: this.halfCircleSpinner,\n 'half-circle': this.halfCircleSpinner,\n };\n\n return spinnerMap[this.type] \|\| spinnerMap.default;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| 'tecton.element.loading.ariaLabel');\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n render() {\n return this.loader();\n }\n\n halfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-label={this.localizedLabel}\n >\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n </div>\n );\n };\n\n spinner = () => {\n return this.halfCircleSpinner();\n };\n\n skeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-label={this.localizedLabel}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n </div>\n );\n };\n}\n"],"version":3}