q2-tecton-elements 1.68.0 → 1.68.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle-report.json +262 -217
- package/dist/cjs/click-elsewhere.q2-option-list.q2-popover.entry.cjs.js.map +1 -1
- package/dist/cjs/click-elsewhere_3.cjs.entry.js +12 -7
- package/dist/cjs/click-elsewhere_3.cjs.entry.js.map +1 -1
- package/dist/cjs/{index-DmGkqdX2.js → index-De6jFdo_.js} +33 -22
- package/dist/cjs/index-De6jFdo_.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-action-group_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/q2-badge.cjs.entry.js +1 -1
- package/dist/cjs/q2-btn_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-calendar.cjs.entry.js +1 -1
- package/dist/cjs/q2-card-image.cjs.entry.js +1 -1
- package/dist/cjs/q2-card.cjs.entry.js +2 -2
- package/dist/cjs/q2-card.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-card.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-donut.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox.q2-tag.entry.cjs.js.map +1 -1
- package/dist/cjs/q2-checkbox_2.cjs.entry.js +47 -5
- package/dist/cjs/q2-checkbox_2.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-context.cjs.entry.js +1 -1
- package/dist/cjs/q2-data-table.cjs.entry.js +1 -1
- package/dist/cjs/q2-detail.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js +1 -1
- package/dist/cjs/q2-icon.cjs.entry.js +1 -1
- package/dist/cjs/q2-input.cjs.entry.js +1 -1
- package/dist/cjs/q2-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-link_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-loc.cjs.entry.js +1 -1
- package/dist/cjs/q2-message.cjs.entry.js +1 -1
- package/dist/cjs/q2-meter.cjs.entry.js +1 -1
- package/dist/cjs/q2-modal.cjs.entry.js +1 -1
- package/dist/cjs/q2-month-picker.cjs.entry.js +1 -1
- package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
- package/dist/cjs/q2-option.cjs.entry.js +1 -1
- package/dist/cjs/q2-otp.cjs.entry.js +1 -1
- package/dist/cjs/q2-pagination.cjs.entry.js +1 -1
- package/dist/cjs/q2-pill.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio.cjs.entry.js +1 -1
- package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
- package/dist/cjs/q2-section.cjs.entry.js +1 -1
- package/dist/cjs/q2-select.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
- package/dist/cjs/q2-tab-container.cjs.entry.js +1 -1
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
- package/dist/cjs/q2-toast.cjs.entry.js +1 -1
- package/dist/cjs/q2-tooltip.cjs.entry.js +1 -1
- package/dist/collection/components/q2-card/q2-card.css +4 -2
- package/dist/collection/components/q2-checkbox/q2-checkbox.css +20 -4
- package/dist/collection/components/q2-checkbox/q2-checkbox.js +53 -3
- package/dist/collection/components/q2-checkbox/q2-checkbox.js.map +1 -1
- package/dist/collection/components/q2-popover/q2-popover.css +1 -1
- package/dist/collection/components/q2-popover/q2-popover.js +11 -6
- package/dist/collection/components/q2-popover/q2-popover.js.map +1 -1
- package/dist/collection/utils/index.js +30 -20
- package/dist/collection/utils/index.js.map +1 -1
- package/dist/components/index2.js +31 -21
- package/dist/components/index2.js.map +1 -1
- package/dist/components/q2-card.js +1 -1
- package/dist/components/q2-card.js.map +1 -1
- package/dist/components/q2-checkbox2.js +51 -6
- package/dist/components/q2-checkbox2.js.map +1 -1
- package/dist/components/q2-popover2.js +12 -7
- package/dist/components/q2-popover2.js.map +1 -1
- package/dist/components/q2-select2.js +1 -1
- package/dist/esm/click-elsewhere.q2-option-list.q2-popover.entry.js.map +1 -1
- package/dist/esm/click-elsewhere_3.entry.js +12 -7
- package/dist/esm/click-elsewhere_3.entry.js.map +1 -1
- package/dist/esm/{index-C5gj0T_3.js → index-CSlW4ulM.js} +33 -23
- package/dist/esm/index-CSlW4ulM.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-action-group_2.entry.js +1 -1
- package/dist/esm/q2-action-sheet.entry.js +1 -1
- package/dist/esm/q2-badge.entry.js +1 -1
- package/dist/esm/q2-btn_2.entry.js +1 -1
- package/dist/esm/q2-calendar.entry.js +1 -1
- package/dist/esm/q2-card-image.entry.js +1 -1
- package/dist/esm/q2-card.entry.js +2 -2
- package/dist/esm/q2-card.entry.js.map +1 -1
- package/dist/esm/q2-carousel-pane.entry.js +1 -1
- package/dist/esm/q2-carousel.entry.js +1 -1
- package/dist/esm/q2-chart-area.entry.js +1 -1
- package/dist/esm/q2-chart-bar.entry.js +1 -1
- package/dist/esm/q2-chart-donut.entry.js +1 -1
- package/dist/esm/q2-checkbox-group.entry.js +1 -1
- package/dist/esm/q2-checkbox.q2-tag.entry.js.map +1 -1
- package/dist/esm/q2-checkbox_2.entry.js +47 -5
- package/dist/esm/q2-checkbox_2.entry.js.map +1 -1
- package/dist/esm/q2-context.entry.js +1 -1
- package/dist/esm/q2-data-table.entry.js +1 -1
- package/dist/esm/q2-detail.entry.js +1 -1
- package/dist/esm/q2-dropdown-item.entry.js +1 -1
- package/dist/esm/q2-dropdown.entry.js +1 -1
- package/dist/esm/q2-editable-field.entry.js +1 -1
- package/dist/esm/q2-file-picker.entry.js +1 -1
- package/dist/esm/q2-icon.entry.js +1 -1
- package/dist/esm/q2-input.entry.js +1 -1
- package/dist/esm/q2-item.entry.js +1 -1
- package/dist/esm/q2-link_2.entry.js +1 -1
- package/dist/esm/q2-loc.entry.js +1 -1
- package/dist/esm/q2-message.entry.js +1 -1
- package/dist/esm/q2-meter.entry.js +1 -1
- package/dist/esm/q2-modal.entry.js +1 -1
- package/dist/esm/q2-month-picker.entry.js +1 -1
- package/dist/esm/q2-optgroup.entry.js +1 -1
- package/dist/esm/q2-option.entry.js +1 -1
- package/dist/esm/q2-otp.entry.js +1 -1
- package/dist/esm/q2-pagination.entry.js +1 -1
- package/dist/esm/q2-pill.entry.js +1 -1
- package/dist/esm/q2-radio-group.entry.js +1 -1
- package/dist/esm/q2-radio.entry.js +1 -1
- package/dist/esm/q2-relative-time.entry.js +1 -1
- package/dist/esm/q2-section.entry.js +1 -1
- package/dist/esm/q2-select.entry.js +1 -1
- package/dist/esm/q2-stepper-pane.entry.js +1 -1
- package/dist/esm/q2-stepper-vertical.entry.js +1 -1
- package/dist/esm/q2-stepper.entry.js +1 -1
- package/dist/esm/q2-tab-container.entry.js +1 -1
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-textarea.entry.js +1 -1
- package/dist/esm/q2-toast.entry.js +1 -1
- package/dist/esm/q2-tooltip.entry.js +1 -1
- package/dist/q2-tecton-elements/click-elsewhere.q2-option-list.q2-popover.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/click-elsewhere_3.entry.js +29 -24
- package/dist/q2-tecton-elements/click-elsewhere_3.entry.js.map +1 -1
- package/dist/q2-tecton-elements/{index-C5gj0T_3.js → index-CSlW4ulM.js} +36 -24
- package/dist/q2-tecton-elements/index-CSlW4ulM.js.map +1 -0
- package/dist/q2-tecton-elements/q2-action-group_2.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-action-sheet.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-badge.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-btn_2.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-calendar.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-card-image.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-card.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-card.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-card.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-carousel-pane.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-carousel.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-chart-area.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-chart-bar.entry.js +3 -3
- package/dist/q2-tecton-elements/q2-chart-donut.entry.js +4 -4
- package/dist/q2-tecton-elements/q2-checkbox-group.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-checkbox.q2-tag.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-checkbox_2.entry.js +62 -23
- package/dist/q2-tecton-elements/q2-checkbox_2.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-context.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-data-table.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-detail.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-dropdown-item.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-dropdown.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-editable-field.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-icon.entry.js +41 -41
- package/dist/q2-tecton-elements/q2-input.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-item.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-link_2.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-loc.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-message.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-meter.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-modal.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-month-picker.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-optgroup.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-option.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-otp.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-pagination.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-pill.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-radio-group.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-radio.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-relative-time.entry.js +4 -4
- package/dist/q2-tecton-elements/q2-section.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-select.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-stepper-pane.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-stepper.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-tab-container.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/q2-tecton-elements/q2-textarea.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-toast.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-tooltip.entry.js +1 -1
- package/dist/types/components/q2-checkbox/q2-checkbox.d.ts +11 -0
- package/dist/types/utils/index.d.ts +8 -2
- package/package.json +3 -3
- package/dist/cjs/index-DmGkqdX2.js.map +0 -1
- package/dist/esm/index-C5gj0T_3.js.map +0 -1
- package/dist/q2-tecton-elements/index-C5gj0T_3.js.map +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { r as e, c as t, h as o, g as c, F as r, H as
|
|
1
|
+
import { r as e, c as t, h as o, g as c, F as r, H as i } from "./index-CGkHOjh1.js";
|
|
2
2
|
|
|
3
|
-
import { c as
|
|
3
|
+
import { c as a, d as s, o as h, i as l, l as d, w as n } from "./index-CSlW4ulM.js";
|
|
4
4
|
|
|
5
5
|
import { m as k } from "./mirror-emit-DUjY_ucm.js";
|
|
6
6
|
|
|
7
7
|
import { s as b, a as v } from "./action-sheet-B7adb3xs.js";
|
|
8
8
|
|
|
9
|
-
const p = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 24px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-track-fill:var(--tct-checkbox-toggle-track-fill, var(--tct-checkbox-toggle-track-color, transparent));--comp-checkbox-toggle-track-fill-active:var(--tct-checkbox-toggle-active-track-fill, var(--tct-checkbox-toggle-active-track-color, var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))));--comp-checkbox-toggle-track-fill-hover:var(--tct-checkbox-toggle-hover-track-fill, var(--tct-checkbox-toggle-hover-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error:var(--tct-checkbox-toggle-error-track-fill, var(--tct-checkbox-toggle-error-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error-hover:var(--tct-checkbox-toggle-error-hover-track-fill, var(--tct-checkbox-toggle-error-hover-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-track-fill-error-active:var(--tct-checkbox-toggle-error-active-track-fill, var(--tct-checkbox-toggle-error-active-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-fill-color:var(--tct-checkbox-checked-fill-color, var(--t-primary, #040404));--comp-checkbox-checked-color:var(--tct-checkbox-checked-stroke-color, var(--tct-white, var(--app-white, #FFFFFF)));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--comp-checkbox-bold-fallback-stroke-width:var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);--comp-checkbox-stroke-width:var(--tct-checkbox-stroke-width, unset);--comp-checkbox-checked-stroke-width:var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-hover-stroke-width:var(--tct-checkbox-hover-stroke-width, unset);--comp-checkbox-focused-stroke-width:var(--tct-checkbox-focused-stroke-width, unset);--comp-checkbox-checked-hover-stroke-width:var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-checked-focused-stroke-width:var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-stroke-width:var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-focused-stroke-width:var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-hover-stroke-width:var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-toggle-circle-fill-active:var(--tct-checkbox-toggle-active-fill, var(--tct-checkbox-toggle-active-color, var(--comp-checkbox-toggle-color)));display:grid;grid-template-areas:"svg label" "svg description";align-items:start;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-stroke-width);text-stroke-width:var(--comp-checkbox-description-stroke-width)}:host([checked]:not([checked=false])) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-stroke-width);text-stroke-width:var(--comp-checkbox-checked-stroke-width)}:host(:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-hover-stroke-width);text-stroke-width:var(--comp-checkbox-hover-stroke-width)}:host(:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-focused-stroke-width);text-stroke-width:var(--comp-checkbox-focused-stroke-width)}:host([description]:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-hover-stroke-width);text-stroke-width:var(--comp-checkbox-description-hover-stroke-width)}:host([checked]:not([checked=false]):hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width);text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width)}:host([description]:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-focused-stroke-width);text-stroke-width:var(--comp-checkbox-description-focused-stroke-width)}:host([checked]:not([checked=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width);text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width)}:host(:active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-active-stroke-width, unset)}:host([checked]:not([checked=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset)}:host([has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset)}:host([has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset)}:host([has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset)}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px)}.label-text label .label-content{display:inline;font-size:var(--tct-checkbox-label-font-size, inherit)}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0;box-shadow:var(--tct-checkbox-box-shadow)}.checkbox-icon rect{transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));box-shadow:var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host([has-error]:not([has-error=false]):not([type=favorite])[checked]:not([checked=false])) .checkbox-icon rect{fill:var(--tct-checkbox-error-checked-outer-fill-color)}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));box-shadow:var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))}:host(:hover:not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{fill:none;stroke:var(--comp-checkbox-checked-color);stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-fill{stroke:var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);stroke-width:var(--tct-checkbox-error-checkmark-stroke-width, 2.5)}.checked-fill{stroke-dasharray:16;stroke-dashoffset:16;animation-name:draw-checkmark;animation-duration:var(--tct-checkbox-animation-duration, var(--t-tween-time-in-4, 300ms));animation-timing-function:var(--tct-checkbox-animation-timing-function, ease-out);animation-fill-mode:var(--tct-checkbox-animation-fill-mode, forwards)}@keyframes draw-checkmark{to{stroke-dashoffset:0}}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{--comp-default-track-box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);height:24px;width:38px;fill:var(--comp-checkbox-toggle-track-fill);border-radius:var(--app-border-radius-3, 12px);box-shadow:var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{--comp-default-hover-track-box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color);box-shadow:var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow));fill:var(--comp-checkbox-toggle-track-fill-hover)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-track-fill-active)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-circle-fill-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error-hover)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--comp-checkbox-toggle-track-fill-error-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-error-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset)}:host([checked]:not([checked=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-label-hover-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-label-active-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-error-label-hover-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-error-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-error-label-active-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset)}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
|
|
9
|
+
const p = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 24px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-label-line-height:var(--tct-checkbox-label-line-height, 24px);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-track-fill:var(--tct-checkbox-toggle-track-fill, var(--tct-checkbox-toggle-track-color, transparent));--comp-checkbox-toggle-track-fill-active:var(--tct-checkbox-toggle-active-track-fill, var(--tct-checkbox-toggle-active-track-color, var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))));--comp-checkbox-toggle-track-fill-hover:var(--tct-checkbox-toggle-hover-track-fill, var(--tct-checkbox-toggle-hover-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error:var(--tct-checkbox-toggle-error-track-fill, var(--tct-checkbox-toggle-error-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error-hover:var(--tct-checkbox-toggle-error-hover-track-fill, var(--tct-checkbox-toggle-error-hover-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-track-fill-error-active:var(--tct-checkbox-toggle-error-active-track-fill, var(--tct-checkbox-toggle-error-active-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-control-height:var(--comp-checkbox-size);--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-fill-color:var(--tct-checkbox-checked-fill-color, var(--t-primary, #040404));--comp-checkbox-checked-color:var(--tct-checkbox-checked-stroke-color, var(--tct-white, var(--app-white, #FFFFFF)));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--comp-checkbox-bold-fallback-stroke-width:var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);--comp-checkbox-stroke-width:var(--tct-checkbox-stroke-width, unset);--comp-checkbox-checked-stroke-width:var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-hover-stroke-width:var(--tct-checkbox-hover-stroke-width, unset);--comp-checkbox-focused-stroke-width:var(--tct-checkbox-focused-stroke-width, unset);--comp-checkbox-checked-hover-stroke-width:var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-checked-focused-stroke-width:var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-stroke-width:var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-focused-stroke-width:var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-hover-stroke-width:var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-toggle-circle-fill-active:var(--tct-checkbox-toggle-active-fill, var(--tct-checkbox-toggle-active-color, var(--comp-checkbox-toggle-color)));display:grid;grid-template-areas:"svg label";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}.container.has-description{grid-template-areas:"svg label" ". description";align-items:start}.container.has-multiline-label{align-items:start}.container.has-description .label-control,.container.has-multiline-label .label-control{margin-top:calc((var(--comp-checkbox-label-line-height) - var(--comp-control-height)) / 2)}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width);--comp-control-height:30px}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}:host([alignment=right]) .container.has-description,:host([type=toggle]:not([alignment])) .container.has-description{grid-template-areas:"label svg" "description ."}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-stroke-width);text-stroke-width:var(--comp-checkbox-description-stroke-width)}:host([checked]:not([checked=false])) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-stroke-width);text-stroke-width:var(--comp-checkbox-checked-stroke-width)}:host(:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-hover-stroke-width);text-stroke-width:var(--comp-checkbox-hover-stroke-width)}:host(:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-focused-stroke-width);text-stroke-width:var(--comp-checkbox-focused-stroke-width)}:host([description]:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-hover-stroke-width);text-stroke-width:var(--comp-checkbox-description-hover-stroke-width)}:host([checked]:not([checked=false]):hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width);text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width)}:host([description]:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-focused-stroke-width);text-stroke-width:var(--comp-checkbox-description-focused-stroke-width)}:host([checked]:not([checked=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width);text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width)}:host(:active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-active-stroke-width, unset)}:host([checked]:not([checked=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset)}:host([has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset)}:host([has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset)}:host([has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset)}.label-text label{line-height:var(--comp-checkbox-label-line-height)}.label-text label .label-content{display:inline;font-size:var(--tct-checkbox-label-font-size, inherit)}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0;box-shadow:var(--tct-checkbox-box-shadow)}.checkbox-icon rect{transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));box-shadow:var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host([has-error]:not([has-error=false]):not([type=favorite])[checked]:not([checked=false])) .checkbox-icon rect{fill:var(--tct-checkbox-error-checked-outer-fill-color)}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));box-shadow:var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))}:host(:hover:not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{fill:none;stroke:var(--comp-checkbox-checked-color);stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-fill{stroke:var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);stroke-width:var(--tct-checkbox-error-checkmark-stroke-width, 2.5)}.checked-fill{stroke-dasharray:16;stroke-dashoffset:16;animation-name:draw-checkmark;animation-duration:var(--tct-checkbox-animation-duration, var(--t-tween-time-in-4, 300ms));animation-timing-function:var(--tct-checkbox-animation-timing-function, ease-out);animation-fill-mode:var(--tct-checkbox-animation-fill-mode, forwards)}@keyframes draw-checkmark{to{stroke-dashoffset:0}}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{--comp-default-track-box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);height:24px;width:38px;fill:var(--comp-checkbox-toggle-track-fill);border-radius:var(--app-border-radius-3, 12px);box-shadow:var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{--comp-default-hover-track-box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color);box-shadow:var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow));fill:var(--comp-checkbox-toggle-track-fill-hover)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-track-fill-active)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-circle-fill-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error-hover)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--comp-checkbox-toggle-track-fill-error-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-error-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset)}:host([checked]:not([checked=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-label-hover-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-label-active-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-error-label-hover-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-error-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-error-label-active-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset)}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
|
|
10
10
|
|
|
11
11
|
const f = class {
|
|
12
12
|
constructor(o) {
|
|
@@ -14,10 +14,11 @@ const f = class {
|
|
|
14
14
|
this.change = t(this, "change", 7);
|
|
15
15
|
this.tctChange = t(this, "tctChange", 7);
|
|
16
16
|
// #region Own Properties
|
|
17
|
-
this._id = `checkbox-${
|
|
17
|
+
this._id = `checkbox-${a()}`;
|
|
18
18
|
// #endregion
|
|
19
19
|
// #region State Properties
|
|
20
20
|
this.hasDescription = false;
|
|
21
|
+
this.hasMultilineLabel = false;
|
|
21
22
|
/** The state of the checkbox. This modifies the visual appearance of the element. */ this.checked = false;
|
|
22
23
|
/** Determines if the component should display in an errant state. */ this.hasError = false;
|
|
23
24
|
this.onInputClick = e => {
|
|
@@ -33,12 +34,17 @@ const f = class {
|
|
|
33
34
|
});
|
|
34
35
|
this.inputElement.focus();
|
|
35
36
|
};
|
|
37
|
+
this.queueLabelLayoutUpdate = () => {
|
|
38
|
+
const e = typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout;
|
|
39
|
+
e((() => this.updateLabelLayout()));
|
|
40
|
+
};
|
|
36
41
|
}
|
|
37
42
|
// #endregion
|
|
38
43
|
// #region Component Lifecycle Events
|
|
39
44
|
disconnectedCallback() {
|
|
40
|
-
var e;
|
|
45
|
+
var e, t;
|
|
41
46
|
(e = this.descriptionObserver) === null || e === void 0 ? void 0 : e.disconnect();
|
|
47
|
+
(t = this.labelResizeObserver) === null || t === void 0 ? void 0 : t.disconnect();
|
|
42
48
|
}
|
|
43
49
|
componentWillLoad() {
|
|
44
50
|
s(this);
|
|
@@ -48,6 +54,8 @@ const f = class {
|
|
|
48
54
|
h(this.hostElement);
|
|
49
55
|
this.hostElement.click = () => this.inputElement.click();
|
|
50
56
|
this.setupDescriptionObserver();
|
|
57
|
+
this.setupLabelResizeObserver();
|
|
58
|
+
this.updateLabelLayout();
|
|
51
59
|
}
|
|
52
60
|
// #endregion
|
|
53
61
|
// #region Listeners
|
|
@@ -64,6 +72,12 @@ const f = class {
|
|
|
64
72
|
ariaLabelObserver() {
|
|
65
73
|
s(this);
|
|
66
74
|
}
|
|
75
|
+
descriptionWatcher() {
|
|
76
|
+
this.checkForDescription();
|
|
77
|
+
}
|
|
78
|
+
labelWatcher() {
|
|
79
|
+
this.queueLabelLayoutUpdate();
|
|
80
|
+
}
|
|
67
81
|
// #endregion
|
|
68
82
|
// #region Local Methods
|
|
69
83
|
get ariaLabelledBy() {
|
|
@@ -95,12 +109,29 @@ const f = class {
|
|
|
95
109
|
setupDescriptionObserver() {
|
|
96
110
|
this.descriptionObserver = new MutationObserver((() => {
|
|
97
111
|
this.checkForDescription();
|
|
112
|
+
this.queueLabelLayoutUpdate();
|
|
98
113
|
}));
|
|
99
114
|
this.descriptionObserver.observe(this.hostElement, {
|
|
100
115
|
childList: true,
|
|
101
116
|
subtree: true
|
|
102
117
|
});
|
|
103
118
|
}
|
|
119
|
+
setupLabelResizeObserver() {
|
|
120
|
+
if (!this.labelTextElement || typeof ResizeObserver !== "function") return;
|
|
121
|
+
this.labelResizeObserver = new ResizeObserver((() => {
|
|
122
|
+
this.updateLabelLayout();
|
|
123
|
+
}));
|
|
124
|
+
this.labelResizeObserver.observe(this.labelTextElement);
|
|
125
|
+
}
|
|
126
|
+
updateLabelLayout() {
|
|
127
|
+
if (!this.labelTextElement) return;
|
|
128
|
+
const e = this.labelTextElement.querySelector("label");
|
|
129
|
+
if (!e) return;
|
|
130
|
+
const t = parseFloat(getComputedStyle(e).lineHeight) || 24;
|
|
131
|
+
const o = e.getBoundingClientRect().height;
|
|
132
|
+
if (!o) return;
|
|
133
|
+
this.hasMultilineLabel = o > t * 1.5;
|
|
134
|
+
}
|
|
104
135
|
// #endregion
|
|
105
136
|
// #region Render Methods
|
|
106
137
|
renderCheckboxSVG() {
|
|
@@ -205,13 +236,16 @@ const f = class {
|
|
|
205
236
|
})));
|
|
206
237
|
}
|
|
207
238
|
render() {
|
|
208
|
-
const e = [ "
|
|
209
|
-
|
|
239
|
+
const e = [ "container" ];
|
|
240
|
+
const t = [ "label-text" ];
|
|
241
|
+
if (this.hasDescription) e.push("has-description");
|
|
242
|
+
if (this.hasMultilineLabel) e.push("has-multiline-label");
|
|
243
|
+
if (this.hideLabel) t.push("sr");
|
|
210
244
|
return o("div", {
|
|
211
|
-
key: "
|
|
212
|
-
class: "
|
|
245
|
+
key: "6674f030817016da274dab80b7e8e8cd090d5c19",
|
|
246
|
+
class: e.join(" ")
|
|
213
247
|
}, o("input", {
|
|
214
|
-
key: "
|
|
248
|
+
key: "34718510a4c2f596183c8391075789214836b602",
|
|
215
249
|
ref: e => this.inputElement = e,
|
|
216
250
|
"aria-describedby": this.hasDescription ? "description" : undefined,
|
|
217
251
|
"aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`,
|
|
@@ -226,39 +260,42 @@ const f = class {
|
|
|
226
260
|
type: "checkbox",
|
|
227
261
|
value: this.value
|
|
228
262
|
}), o("label", {
|
|
229
|
-
key: "
|
|
263
|
+
key: "0639264e1f6bd74f81eddf9ed3d64f5a5df76c73",
|
|
230
264
|
htmlFor: this._id,
|
|
231
265
|
class: "label-control",
|
|
232
266
|
"test-id": "checkboxButton",
|
|
233
267
|
"aria-hidden": "true"
|
|
234
268
|
}, this.renderCheckboxSVG()), o("div", {
|
|
235
|
-
key: "
|
|
236
|
-
class:
|
|
269
|
+
key: "93418a08db91b5c4641ccfa1b990035ead84b9e0",
|
|
270
|
+
class: t.join(" "),
|
|
271
|
+
ref: e => this.labelTextElement = e
|
|
237
272
|
}, o("label", {
|
|
238
|
-
key: "
|
|
273
|
+
key: "255dcaebdd7f81fe3061b25cddab216e18e2eabd",
|
|
239
274
|
"test-id": "checkboxLabel",
|
|
240
275
|
htmlFor: this._id,
|
|
241
276
|
id: this.labelId
|
|
242
277
|
}, o("div", {
|
|
243
|
-
key: "
|
|
278
|
+
key: "1b354949470d2341f7884c512c7f37eedccefb61",
|
|
244
279
|
class: "label-content"
|
|
245
280
|
}, d(this.label), o("slot", {
|
|
246
|
-
key: "
|
|
281
|
+
key: "6b97b3e773d01aff707bebc831e17e9ece478c5a",
|
|
282
|
+
onSlotchange: this.queueLabelLayoutUpdate
|
|
247
283
|
}), o("slot", {
|
|
248
|
-
key: "
|
|
249
|
-
name: "label"
|
|
284
|
+
key: "3f71ed92987be12e4826af409362f0377eee2733",
|
|
285
|
+
name: "label",
|
|
286
|
+
onSlotchange: this.queueLabelLayoutUpdate
|
|
250
287
|
})))), this._tooltip && o("span", {
|
|
251
|
-
key: "
|
|
288
|
+
key: "10d8f3458e5996c31169865e05620cb881613b8f",
|
|
252
289
|
id: this.tooltipId,
|
|
253
290
|
class: "sr",
|
|
254
291
|
"test-id": "checkboxTooltipText"
|
|
255
292
|
}, this._tooltip), this.hasDescription && o("div", {
|
|
256
|
-
key: "
|
|
293
|
+
key: "7f8c838761d05e12f2c7d4c0c061f0a105db1d9d",
|
|
257
294
|
class: "description-text",
|
|
258
295
|
"test-id": "checkboxDescription",
|
|
259
296
|
id: "description"
|
|
260
297
|
}, d(this.description), o("slot", {
|
|
261
|
-
key: "
|
|
298
|
+
key: "27630ad892fd4f3c19c13762696e073c21077f96",
|
|
262
299
|
name: "description"
|
|
263
300
|
})));
|
|
264
301
|
}
|
|
@@ -267,7 +304,9 @@ const f = class {
|
|
|
267
304
|
}
|
|
268
305
|
static get watchers() {
|
|
269
306
|
return {
|
|
270
|
-
ariaLabel: [ "ariaLabelObserver" ]
|
|
307
|
+
ariaLabel: [ "ariaLabelObserver" ],
|
|
308
|
+
description: [ "descriptionWatcher" ],
|
|
309
|
+
label: [ "labelWatcher" ]
|
|
271
310
|
};
|
|
272
311
|
}
|
|
273
312
|
};
|
|
@@ -458,7 +497,7 @@ const g = class {
|
|
|
458
497
|
const t = [ "tag" ];
|
|
459
498
|
if (this.optionCount) t.push("has-options");
|
|
460
499
|
const c = this.optionCount > 0;
|
|
461
|
-
return o(
|
|
500
|
+
return o(i, {
|
|
462
501
|
key: "ac010dec21b5c071855f2a504579aee1e75f7748"
|
|
463
502
|
}, o("click-elsewhere", {
|
|
464
503
|
key: "fb32e3ba62d2cd1e9e2114c8891dc4a646a9c402",
|