q2-tecton-elements 1.14.3 → 1.16.0

package/dist/collection/components/q2-badge/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element, Fragment } from '@stencil/core';
+import { Component, Prop, h, Element } from '@stencil/core';
 export class Q2Badge {
   constructor() {
     this.value = 0;
@@ -17,19 +17,14 @@ export class Q2Badge {
     }
     return value;
   }
-  generateMarkup() {
+  render() {
     const badgeClass = ['badge'];
-    if (this.badgeText)
-      badgeClass.push(`digit-${this.badgeText.length}`);
     if (this.size === 'large')
       badgeClass.push('size-large');
     return (h("div", { class: "badge-wrapper" },
-      h("slot", null),
       h("div", { class: badgeClass.join(' ') },
-        h("span", { class: "badge-text" }, this.badgeText))));
-  }
-  render() {
-    return h(Fragment, null, this.badgeText ? this.generateMarkup() : h("slot", null));
+        h("span", { class: "badge-text" },
+          h("slot", null, this.badgeText)))));
   }
   static get is() { return "q2-badge"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-badge/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -69,39 +69,44 @@ button {
 }
 
 .badge-wrapper {
-  --comp-badge-background: var(--t-primary, #61c4ff);
-  --comp-badge-color: var(--t-primary-text, #ffffff);
+  --comp-badge-background: var(--t-gray8, #61c4ff);
+  --comp-badge-color: var(--t-base, #ffffff);
+  --comp-badge-border-color: var(--t-secondary-l1, #9a9898);
 }
 :host([status=info]) .badge-wrapper {
   --comp-badge-background: var(--const-stoplight-info, #0079C1);
   --comp-badge-color: var(--const-stoplight-info-text, #ffffff);
+  --comp-badge-border-color: var(--const-stoplight-info-l1, #3a9bd6);
 }
 :host([status=alert]) .badge-wrapper {
   --comp-badge-background: var(--const-stoplight-alert, #C30000);
   --comp-badge-color: var(--const-stoplight-alert-text, #ffffff);
+  --comp-badge-border-color: var(--const-stoplight-alert-l1, #e42929);
 }
 :host([status=warning]) .badge-wrapper {
   --comp-badge-background: var(--const-stoplight-warning, #F0B400);
   --comp-badge-color: var(--const-stoplight-warning-text, #423535);
+  --comp-badge-border-color: var(--const-stoplight-warning-l1, #f9ce4c);
 }
 :host([status=success]) .badge-wrapper {
-  --comp-badge-background: var(--const-stoplight-success, #0E8A00);
+  --comp-badge-background: var(--const-stoplight-success, #57fc45);
   --comp-badge-color: var(--const-stoplight-success-text, #ffffff);
+  --comp-badge-border-color: var(--const-stoplight-success-l1, #2eaa21);
 }
 :host([theme=primary]) .badge-wrapper {
-  --comp-badge-background: var(--t-primary, #61c4ff);
+  --comp-badge-background: var(--t-primary, #0079c2);
   --comp-badge-color: var(--t-primary-text, #ffffff);
-  --comp-badge-border-color: var(--t-primary-l1, #61c4ff);
+  --comp-badge-border-color: var(--t-primary-l1, #3a9bd6);
 }
 :host([theme=secondary]) .badge-wrapper {
-  --comp-badge-background: var(--t-secondary, #61c4ff);
+  --comp-badge-background: var(--t-secondary, #b4c2cd);
   --comp-badge-color: var(--t-secondary-text, #ffffff);
-  --comp-badge-border-color: var(--t-secondary-l1, #61c4ff);
+  --comp-badge-border-color: var(--t-secondary-l1, #c6d1db);
 }
 :host([theme=tertiary]) .badge-wrapper {
-  --comp-badge-background: var(--t-tertiary, #0079C1);
+  --comp-badge-background: var(--t-tertiary, #e9f5fc);
   --comp-badge-color: var(--t-tertiary-text, #000000);
-  --comp-badge-border-color: var(--t-tertiary-l1, #61c4ff);
+  --comp-badge-border-color: var(--t-tertiary-l1, #f3f4f5);
 }
 
 .badge {
@@ -109,22 +114,24 @@ button {
   line-height: 16px;
   height: 16px;
   min-width: 16px;
-  background-color: var(--comp-badge-background);
   text-align: center;
   padding: 0 4px;
   color: var(--comp-badge-color);
+  background-color: var(--comp-badge-background);
+  border-style: solid;
   border-color: var(--comp-badge-border-color);
-  border-width: thin;
-  border-radius: 8px;
+  border-width: var(--tct-badge-border-width, var(--t-badge-border-width, 1px));
+  border-radius: var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));
 }
 
 .badge.size-large {
   font-size: 14px;
   height: 22px;
   min-width: 22px;
-  border-radius: 11px;
+  border-radius: var(--tct-badge-border-radius, var(--t-badge-border-radius, 11px));
   line-height: 22px;
   padding: 0 6px;
+  border-color: var(--comp-badge-border-color);
 }
 
 .badge-wrapper {

package/dist/collection/components/q2-btn/index.js

@@ -64,11 +64,12 @@ export class Q2Btn {
         !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
   }
   get buttonAttributes() {
+    var _a, _b, _c;
     return {
-      ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded.toString() === 'true'}` : undefined,
-      ariaHasPopup: this.ariaHasPopup !== undefined ? `${this.ariaHasPopup.toString() === 'true'}` : undefined,
+      ariaExpanded: this.ariaExpanded !== undefined ? `${((_a = this.ariaExpanded) === null || _a === void 0 ? void 0 : _a.toString()) === 'true'}` : undefined,
+      ariaHasPopup: this.ariaHasPopup !== undefined ? `${((_b = this.ariaHasPopup) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
       ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
-      ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected.toString() === 'true'}` : undefined,
+      ariaSelected: this.ariaSelected !== undefined ? `${((_c = this.ariaSelected) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
       disabled: this.disabled || false,
       type: this.type || 'button',
       tabindex: this.tabIndex || undefined,
@@ -153,7 +154,7 @@ export class Q2Btn {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -170,7 +171,7 @@ export class Q2Btn {
     },
     "hideLabel": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -187,7 +188,7 @@ export class Q2Btn {
     },
     "ariaLabel": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -81,10 +81,8 @@ button {
   --comp-btn-primary-bg: var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));
   --comp-btn-primary-font-color: var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));
   --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  --comp-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19),
-      0 3px 3px rgba(0, 0, 0, 0.23);
-  --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24),
-      0 3px 3px rgba(0, 0, 0, 0.36);
+  --comp-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);
+  --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);
   --comp-btn-primary-box-shadow: var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));
   --comp-btn-primary-hover-box-shadow: var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));
   --comp-btn-secondary-bg: var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));
@@ -99,8 +97,8 @@ button {
 }
 
 button {
-  margin: var(--tct-scale-0, var(--app-scale-0, 0));
-  padding: var(--tct-scale-0, var(--app-scale-0, 0));
+  margin: var(--tct-scale-0, var(--app-scale-0x, 0));
+  padding: var(--tct-scale-0, var(--app-scale-0x, 0));
   display: inline-block;
   width: 100%;
   border: 0;
@@ -119,16 +117,16 @@ button:disabled {
   cursor: not-allowed;
 }
 :host([size="1"]) button {
-  padding: var(--tct-scale-1, var(--app-scale-1, 5px));
+  padding: var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 :host([color]:not([size])) button, :host([intent]:not([size])) button {
-  padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
+  padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
 }
 :host([size="2"]) button {
-  padding: var(--tct-scale-2, var(--app-scale-2, 10px));
+  padding: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 :host([size="3"]) button {
-  padding: var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: var(--tct-scale-3, var(--app-scale-3x, 15px));
 }
 :host([size="4x"]) button {
   padding: var(--tct-scale-4x, var(--app-scale-4x, 20px));
@@ -258,7 +256,7 @@ div {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--app-scale-1, 5px);
+  gap: var(--app-scale-1x, 5px);
 }
 :host([loading]) .icon-right div {
   flex-direction: row-reverse;

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

@@ -15,7 +15,7 @@ export function formatDateShort(value) {
     month: '2-digit',
     day: '2-digit',
     year: 'numeric',
-    timeZone: 'UTC',
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   }).format(new Date(isoDate));
 }
 export function formatDateLong(value) {

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

@@ -181,8 +181,7 @@ export class Q2Calendar {
       const dateCell = event.target.closest('td:not([aria-hidden])');
       if (!dateCell)
         return;
-      const day = parseInt(dateCell.dataset.day);
-      this.selectDate(this.generateDateFromDay(day));
+      this.selectDate(removeTimezoneOffset(new Date(dateCell.dataset.date)));
       this.closeCalendar();
     };
     this.onDateKeydown = (event) => {
@@ -302,7 +301,7 @@ export class Q2Calendar {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
-      timeZone: 'UTC',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     }).format(dateValue);
   }
   get computedPlaceholder() {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -67,18 +67,18 @@ button {
 .q2-element-dropdown {
   display: none;
   position: absolute;
-  background-color: var(--app-white);
-  color: var(--t-font-color);
+  background-color: var(--app-white, #ffffff);
+  color: var(--t-text, #4d4d4d);
   left: 0;
   width: 100%;
   z-index: 100;
   margin-top: 1px;
-  box-shadow: var(--app-shadow-1);
+  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
   height: 0;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
-  transition: opacity var(--app-tween-1);
+  transition: opacity var(--app-tween-1, 0.2s ease);
   border-radius: var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);
   --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
   --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));
@@ -156,7 +156,7 @@ q2-input {
   flex: 1 1;
   flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));
   margin: 0;
-  padding: var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0;
+  padding: var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0;
 }
 
 .calendar-hint {
@@ -228,6 +228,6 @@ td[aria-selected] {
 .calendar-disclaimer {
   font-size: var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));
   border-top: 1px solid var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));
-  padding: var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
+  padding: var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));
   text-align: left;
 }

package/dist/collection/components/q2-card/index.js

@@ -70,6 +70,8 @@ export class Q2Card {
   }
   determineAutoSmall() {
     var _a, _b;
+    if (this.isStatic)
+      return;
     if (this.hostElement.hasAttribute('is-small'))
       return;
     const { containerElement, avatarElement } = this;
@@ -91,28 +93,34 @@ export class Q2Card {
     return (h(Fragment, null,
       this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })),
       this.generateAvatar(),
-      h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) },
+      h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) },
         this.title && h("h3", { "test-id": "title" }, this.title),
-        this.description && h("p", { "test-id": "description" }, this.description)),
-      this.isTouch && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+        this.description && h("p", { "test-id": "description" }, this.description),
+        h("slot", null)),
+      this.isTouch && !this.isStatic && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
   }
   generateContainerClasses() {
-    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
-    const result = [];
+    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch, isStatic, } = this;
+    const result = ['container'];
     const showSmall = isSmall || isAutoSmall;
     const showTouch = isTouch || isAutoTouch;
     const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
     if (showSmall)
       result.push('is-small');
-    if (showTouch)
+    if (showTouch && !isStatic)
       result.push('is-touch');
     if (hasAvatar)
       result.push('has-avatar');
     return result.join(' ');
   }
   render() {
-    const { url } = this;
-    return !!url ? (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent())) : (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
+    const { url, isStatic } = this;
+    if (!!url)
+      return (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent()));
+    else if (isStatic)
+      return (h("div", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement" }, this.generateContent()));
+    else
+      return (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
   }
   static get is() { return "q2-card"; }
   static get encapsulation() { return "shadow"; }
@@ -259,6 +267,23 @@ export class Q2Card {
       "attribute": "bar",
       "reflect": true
     },
+    "isStatic": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-static",
+      "reflect": true
+    },
     "isTouch": {
       "type": "boolean",
       "mutable": false,

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -68,22 +68,39 @@ button {
   display: block;
 }
 
-button,
-a {
-  --comp-border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));
-  --comp-border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
+.container {
   position: relative;
   width: 100%;
   text-align: start;
-  cursor: pointer;
   height: 100%;
   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)));
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
+  --comp-chevron-size: 0;
+  --comp-bar-width: var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));
+  --comp-card-padding: var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));
+}
+.container.is-small {
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px));
+}
+.container.has-avatar {
+  grid-template-columns: var(--comp-avatar-size) 1fr;
+  --tct-avatar-width: var(--comp-avatar-size);
+  --tct-avatar-height: var(--comp-avatar-size);
+  --tct-icon-size: var(--comp-avatar-size);
+}
+:host([bar][is-static]) .container {
+  padding-left: var(--comp-card-padding);
+}
+.container:is(button), .container:is(a) {
+  --comp-border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));
+  --comp-border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
+  cursor: pointer;
   border: none;
   background: var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));
-  padding: var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));
-  color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  padding: var(--comp-card-padding);
   text-decoration: none;
   border-width: var(--comp-border-width);
   border-color: var(--tct-card-border-color, var(--t-card-border-color, transparent));
@@ -91,50 +108,30 @@ a {
   border-radius: var(--comp-border-radius);
   transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
   box-shadow: var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));
-  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
-  --comp-chevron-size: 0;
 }
 @media (hover: hover) {
-  button:hover, button:active, button:focus,
-a:hover,
-a:active,
-a:focus {
+  .container:is(button):hover, .container:is(button):active, .container:is(button):focus, .container:is(a):hover, .container:is(a):active, .container:is(a):focus {
     color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
   }
-  button:hover,
-a:hover {
+  .container:is(button):hover, .container:is(a):hover {
     box-shadow: var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))));
   }
-  button:active,
-a:active {
+  .container:is(button):active, .container:is(a):active {
     box-shadow: var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
   }
 }
-button.is-small,
-a.is-small {
-  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px));
-}
-button.is-touch,
-a.is-touch {
+.container:is(button).is-touch, .container:is(a).is-touch {
   --comp-chevron-size: var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));
   grid-template-columns: 1fr var(--comp-chevron-size);
 }
-button.has-avatar,
-a.has-avatar {
-  grid-template-columns: var(--comp-avatar-size) 1fr;
-  --tct-avatar-width: var(--comp-avatar-size);
-  --tct-avatar-height: var(--comp-avatar-size);
-  --tct-icon-size: var(--comp-avatar-size);
-}
-button.has-avatar.is-touch,
-a.has-avatar.is-touch {
+.container:is(button).has-avatar.is-touch, .container:is(a).has-avatar.is-touch {
   grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);
 }
 
-.container {
+.content {
   overflow: hidden;
   display: grid;
-  gap: var(--tct-card-container-gap, var(--t-card-container-gap, var(--app-scale-1x, 5px)));
+  gap: var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));
   align-content: start;
 }
 
@@ -166,7 +163,7 @@ p {
   border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);
   position: absolute;
   inset: 0 auto auto 0;
-  width: var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));
+  width: var(--comp-bar-width);
   background: var(--comp-bar-color);
   height: 100%;
 }

package/dist/collection/components/q2-carousel/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {

package/dist/collection/components/q2-carousel-pane/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {

package/dist/collection/components/q2-chart-donut/index.js

@@ -64,6 +64,7 @@ export class Q2ChartDonut {
       if (!(event.target instanceof HTMLElement))
         return;
       this.clearSelection();
+      event.stopPropagation();
     };
   }
   /// LifeCycle Hooks ///
@@ -167,6 +168,10 @@ export class Q2ChartDonut {
     chart.on('mouseover', (params) => {
       this.hoveredId = params.data.id;
     });
+    chart.on('click', params => {
+      // Don't emit click event when clicking a chart slice
+      params.event.event.stopPropagation();
+    });
     chart.on('mouseout', () => {
       this.hoveredId = null;
     });
@@ -305,7 +310,7 @@ export class Q2ChartDonut {
         'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
       }
       : null;
-    return (h("div", { class: "center-card-container" },
+    return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } },
       h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props),
         icon && (h("q2-icon", { type: icon, style: color && { color } })),
         name && h("div", { class: "name" }, name),

package/dist/collection/components/q2-chart-donut/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -73,6 +73,9 @@ button {
 .container {
   aspect-ratio: 1/1;
   width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .chart-container {
@@ -98,7 +101,7 @@ button {
 }
 
 button {
-  --comp-button-vertical-padding: var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1, 5px)));
+  --comp-button-vertical-padding: var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px)));
   transition: box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));
   padding: var(--comp-button-vertical-padding) 0;
 }
@@ -113,14 +116,14 @@ button:focus {
 }
 
 .center-card-container {
-  width: 100%;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+  padding: var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));
 }
 
 .center-card {
-  width: 60%;
+  width: 100%;
   text-align: center;
   color: var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));
   margin-inline: auto;
@@ -134,7 +137,7 @@ button:focus {
 }
 
 q2-icon {
-  --t-icon-size: var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));
+  --tct-icon-size: var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));
   margin-bottom: var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px)));
 }
 

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

@@ -6,23 +6,21 @@ export class Q2Checkbox {
     this.id = `checkbox-${createGuid()}`;
     ///// Actions ////////
     this.onInputClick = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      if (this.disabled || this.readonly)
+      const hasCustomHandler = !!this.hostElement.onchange;
+      const isNotInteractive = this.disabled || this.readonly;
+      if (isNotInteractive || hasCustomHandler)
+        event.preventDefault();
+      if (isNotInteractive)
         return;
       if (!(event.target instanceof HTMLInputElement))
         return;
+      const { value, checked } = event.target;
       this.change.emit({
-        value: event.target.value,
-        checked: event.target.checked,
+        value,
+        checked,
       });
       this.inputElement.focus();
     };
-    this.onKeyDown = (event) => {
-      if (this.readonly && event.code === 'Space') {
-        event.preventDefault();
-      }
-    };
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -30,6 +28,7 @@ export class Q2Checkbox {
   }
   componentDidLoad() {
     overrideFocus(this.hostElement);
+    this.hostElement.click = () => this.inputElement.click();
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
@@ -52,7 +51,7 @@ export class Q2Checkbox {
     if (this.hideLabel)
       textLabelClasses.push('sr');
     return (h("div", { class: "container" },
-      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label ? loc(this.label) : undefined, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onKeyDown: this.onKeyDown, onClick: this.onInputClick }),
+      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }),
       h("label", { htmlFor: this.id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()),
       h("div", { class: textLabelClasses.join(' ') },
         h("label", { "test-id": "checkboxLabel", htmlFor: this.id },