q2-tecton-elements 1.59.0 → 1.60.0

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

@@ -78,7 +78,7 @@ button {
   display: grid;
   gap: var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));
   margin: 0;
-  color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  color: var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))));
   backdrop-filter: var(--tct-card-backdrop-filter);
   --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
   --comp-chevron-size: 0;
@@ -97,11 +97,16 @@ button {
 :host([bar][is-static]) .container {
   padding-left: var(--comp-card-padding);
 }
+:host([is-static]:not([is-static=false])) .container {
+  background: var(--tct-card-static-background, var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff))));
+  color: var(--tct-card-static-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))));
+}
 :host(:not([is-static])) .container {
   --comp-border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));
   --comp-border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
   border: none;
   background: var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));
+  backdrop-filter: var(--tct-card-backdrop-filter, none);
   padding: var(--comp-card-padding);
   text-decoration: none;
   border-width: var(--comp-border-width);
@@ -118,16 +123,13 @@ button {
   :host(:not([is-static])) .container.clickable {
     --comp-card-hover-box-shadow: var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))));
   }
-  :host(:not([is-static])) .container.clickable:hover, :host(:not([is-static])) .container.clickable:active, :host(:not([is-static])) .container.clickable:focus-visible {
+  :host(:not([is-static])) .container.clickable:focus-visible {
     color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
-    box-shadow: var(--const-double-focus-ring);
+    box-shadow: var(--tct-card-focus-visible-box-shadow, var(--const-double-focus-ring));
   }
   :host(:not([is-static])) .container.clickable:hover {
     box-shadow: var(--comp-card-hover-box-shadow);
   }
-  :host(:not([is-static])) .container.clickable:focus:hover {
-    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);
-  }
   :host(:not([is-static])) .container.clickable:active {
     box-shadow: var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))));
   }

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

@@ -189,36 +189,48 @@ label {
   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(--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(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-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));
-  box-shadow: var(--tct-checkbox-error-box-shadow);
 }
 :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));
-  box-shadow: var(--tct-checkbox-hover-box-shadow);
 }
 :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)));
-  box-shadow: var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)));
 }
 :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-checked-color)));
   fill: var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));
-  box-shadow: var(--comp-checkbox-focused-box-shadow);
+  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(--comp-checkbox-focused-box-shadow)));
+  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));
@@ -288,11 +300,12 @@ label {
 }
 
 .toggle-track {
+  --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);
   height: 24px;
   width: 38px;
-  fill: transparent;
+  fill: var(--tct-checkbox-toggle-track-color, transparent);
   border-radius: var(--app-border-radius-3, 12px);
-  box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);
+  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);
 }
 
@@ -311,7 +324,8 @@ label {
 
 :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 {
-  box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);
+  --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));
 }
 :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 {
@@ -346,11 +360,11 @@ label {
 :host([checked]:not([checked=false])) .toggle-indicator {
   left: 18px;
 }
-:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) .toggle-track {
+: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])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) .toggle-circle {
+:host([checked]:not([checked=false])) .toggle-circle {
   mask: url(#checkMask);
   fill: var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff));
 }

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

@@ -80,13 +80,13 @@ export class Q2Checkbox {
         return (h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" }));
     }
     renderToggleSVG() {
-        return (h("div", { class: "toggle-svg-container" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 38 24", class: "toggle-track", "test-id": "toggleTrack" }, h("defs", null, h("mask", { id: "xMask" }, h("rect", { width: "18", height: "18", fill: "white" }), h("line", { class: "toggle-icon", x1: "6.5", y1: "6.5", x2: "11.5", y2: "11.5" }), h("line", { class: "toggle-icon", x1: "6.5", y1: "11.5", x2: "11.5", y2: "6.5" })), h("mask", { id: "checkMask" }, h("rect", { width: "18", height: "18", fill: "white" }), h("polyline", { class: "toggle-icon", points: "6,8.5 8.5,11 12.5,6.5", fill: "none" }))), h("rect", { width: "38", height: "24", rx: "12" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 18 18", class: "toggle-indicator", "test-id": "toggleIndicator" }, h("circle", { class: "toggle-circle", cx: "9", cy: "9", r: "9", mask: "url(#xMask)" }))));
+        return (h("div", { class: "toggle-svg-container" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 38 24", class: "toggle-track", "test-id": "toggleTrack" }, h("rect", { width: "38", height: "24", rx: "12" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 18 18", class: "toggle-indicator", "test-id": "toggleIndicator" }, h("defs", null, h("mask", { id: "xMask", maskUnits: "userSpaceOnUse" }, h("rect", { width: "18", height: "18", fill: "white" }), h("line", { class: "toggle-icon", x1: "6.5", y1: "6.5", x2: "11.5", y2: "11.5", stroke: "black", "stroke-width": "2" }), h("line", { class: "toggle-icon", x1: "6.5", y1: "11.5", x2: "11.5", y2: "6.5", stroke: "black", "stroke-width": "2" })), h("mask", { id: "checkMask" }, h("rect", { width: "18", height: "18", fill: "white" }), h("polyline", { class: "toggle-icon", points: "6,8.5 8.5,11 12.5,6.5", fill: "none" }))), h("circle", { class: "toggle-circle", cx: "9", cy: "9", r: "9", mask: "url(#xMask)" }))));
     }
     render() {
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: '430044e68fc4512d2f1ee8a20ab132c316ad1683', class: "container" }, h("input", { key: '4034224e568f92d79d3a472c60aa4ec26b8f74ec', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: 'f1fb32c12fc20377201d932451fad475bd5e0499', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": loc(this.label) }, this.renderCheckboxSVG()), h("div", { key: '4dfa8764ff780ca470778f2b2e8106886d37c3bb', class: textLabelClasses.join(' ') }, h("label", { key: '382dab72d7b1680af98724b05a34aeade185d59b', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, h("div", { key: '855848a8710513c5a64f9334a9a35dd1cc9ced35' }, loc(this.label), h("slot", { key: 'a101b6d7e8ccb6c0f4e48881467b000b081d86b2' })))), this.description && (h("div", { key: '2365d86a847975a7e1d9e199c48969de6d843313', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '8465026ca4e85c09098832ad9f24a44e837de859', class: "container" }, h("input", { key: '428a6605cdef65840decdd2397c7fbb7e325ce5a', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: 'a325ada8e89c0c1079c5904449b67091127f0205', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": loc(this.label) }, this.renderCheckboxSVG()), h("div", { key: 'e5c851632c21e9ee6740aa216dfa2888a80e373c', class: textLabelClasses.join(' ') }, h("label", { key: 'e99331d0b4d936ece5c3d1a6e7095858c084d77f', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, h("div", { key: '290e1b6975622a1ccbed492706468308797b38c3' }, loc(this.label), h("slot", { key: 'eadde083ef8baafefbfa10e2f71d0baf06e4e545' })))), this.description && (h("div", { key: 'cf5e7088d98acf5327468bbf6add8bdea0d8332d', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     static get is() { return "q2-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-checkbox/q2-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask id=\"xMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                            />\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                            />\n                        </mask>\n\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                    aria-label={loc(this.label)}\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                        aria-hidden=\"true\"\n                    >\n                        <div>\n                            {loc(this.label)}\n                            <slot />\n                        </div>\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    ></rect>\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask\n                            id=\"xMask\"\n                            maskUnits=\"userSpaceOnUse\"\n                        >\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            ></rect>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                        </mask>\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    ></circle>\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                    aria-label={loc(this.label)}\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                        aria-hidden=\"true\"\n                    >\n                        <div>\n                            {loc(this.label)}\n                            <slot />\n                        </div>\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.css

@@ -83,6 +83,11 @@ fieldset {
   grid-template-columns: 1fr 24px;
   grid-template-areas: "label icon";
   column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));
+  color: var(--tct-checkbox-group-label-font-color, inherit);
+  font-size: var(--tct-checkbox-group-label-font-size, inherit);
+  font-weight: var(--tct-checkbox-group-label-font-weight, 600);
+  text-transform: var(--tct-checkbox-group-label-text-transform, none);
+  letter-spacing: var(--tct-checkbox-group-label-letter-spacing, inherit);
 }
 .label-row q2-icon {
   grid-area: icon;
@@ -105,8 +110,9 @@ legend.sr-only {
 }
 
 .slot-container {
-  margin: var(--app-scale-1x, 5px) 0;
-  padding: var(--app-scale-1x, 5px);
+  --comp-default-container-margin: var(--app-scale-1x, 5px) 0;
+  margin: var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));
+  padding: var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));
   border-width: 1px;
   border-color: transparent;
   border-style: solid;

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

@@ -2,75 +2,21 @@
   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 {
   display: block;
-  background-color: var(--tct-context-background, var(--t-tertiary, #e8f5fc));
+  background: var(--tct-context-background, var(--t-tertiary, #e8f5fc));
+  box-shadow: var(--tct-context-box-shadow, none);
+  backdrop-filter: var(--tct-context-backdrop-filter, none);
   border-radius: var(--tct-context-border-radius, var(--app-border-radius-2, 8px));
   padding: var(--tct-context-padding, 10px);
-  width: var(--tct-context-width, fit-content);
+  width: var(--tct-context-width, 100%);
+  border-width: var(--tct-context-border-width, 0px);
+  border-style: var(--tct-context-border-style, solid);
+  border-color: var(--tct-context-border-color, transparent);
 }
 
 .context-wrapper {
@@ -87,7 +33,6 @@ button {
   --tct-item-action-icon-size: 24px;
   --tct-item-avatar-height: 44px;
   --tct-item-avatar-width: 44px;
-  --tct-item-body-color: var(--tct-context-text-color, var(--t-text, #4d4d4d));
 }
 
 .context-body slot:not(:first-child)::before {
@@ -110,15 +55,6 @@ button {
   --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);
 }
 
-::slotted(q2-btn) {
-  --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);
-  --tct-btn-neutral-background: var(--t-tertiary, #e8f5fc);
-  --tct-btn-neutral-font-color: var(--t-primary, #6a4a9e);
-  --tct-btn-neutral-border-color: var(--t-primary, #6a4a9e);
-  --tct-btn-escape-background: var(--t-tertiary, #e8f5fc);
-  --tct-btn-escape-font-color: var(--t-primary, #6a4a9e);
-}
-
 ::slotted(q2-link) {
   --tct-link-border-radius: var(--app-border-radius-1, 4px);
   --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);

package/dist/collection/components/q2-data-table/q2-data-table.css

@@ -111,6 +111,7 @@ table {
   width: var(--tct-data-table-width, var(--tct-table-width));
   min-width: 100%;
   background: var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));
+  backdrop-filter: var(--tct-data-table-backdrop-filter, none);
   caption-side: var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom));
 }
 
@@ -191,10 +192,10 @@ tr.expandable:focus, tr.clickable:focus {
   outline: none;
   box-shadow: none;
 }
-tr.striped:nth-child(even) {
+tr.striped-even {
   background: var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2));
 }
-tr.striped:nth-child(odd) {
+tr.striped-odd {
   background: var(--tct-data-table-row-odd-background, transparent);
 }
 tr.expandable:hover {

package/dist/collection/components/q2-data-table/q2-data-table.js

@@ -410,7 +410,7 @@ export class Q2DataTable {
         if (hideClickable)
             clickableClasses.push('sr');
         const clickableClassString = clickableClasses.join(' ');
-        return (h("tbody", null, rows.map(row => {
+        return (h("tbody", null, rows.map((row, index) => {
             const cellSlotPrefix = `row-${row.id}-cell`;
             const expandableRowName = `row-${row.id}-expandable-content`;
             const dropdownCellName = `row-${row.id}-dropdown`;
@@ -422,7 +422,7 @@ export class Q2DataTable {
             if (clickable)
                 rowClasses.push('clickable');
             if (striped)
-                rowClasses.push('striped');
+                rowClasses.push(`striped-${index % 2 ? 'even' : 'odd'}`);
             if (row.expanded)
                 rowClasses.push('expanded');
             if (row.selected)
@@ -590,7 +590,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableHeader": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
                         }
                     }
@@ -677,7 +677,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableRow": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableRow"
                         }
                     }
@@ -805,7 +805,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableSerializedRow": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
                         }
                     }
@@ -826,7 +826,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableSerializedRow": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
                         }
                     }
@@ -862,7 +862,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableHeader": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
                         }
                     }
@@ -883,7 +883,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableSerializedRow": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
                         }
                     }
@@ -963,7 +963,7 @@ export class Q2DataTable {
                         },
                         "Q2DataTableHeader": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/home/gitlab-runner/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
                         },
                         "HTMLQ2BtnElement": {