q2-tecton-elements 1.14.2 → 1.15.1-alpha.0

package/dist/collection/components/q2-select/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)));
@@ -136,14 +136,21 @@ button {
 
 .q2-select-input {
   margin: 0;
+  --tct-input-min-height: var(--tct-select-input-min-height, var(--t-select-input-min-height));
+  --tct-input-max-height: var(--tct-select-input-max-height, var(--t-select-input-max-height, 100px));
+}
+
+::slotted([slot=_selected-display]) {
+  width: 100%;
+  min-height: var(--comp-selected-display-height, 44px);
 }
 
 .custom-display-content {
   position: absolute;
   bottom: 0;
-  left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);
+  left: calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);
   height: 44px;
-  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
   overflow: hidden;
   cursor: pointer;
   transition: left var(--tct-tween-2, var(--app-tween-1, 0.2s ease));
@@ -156,11 +163,11 @@ button {
 
 .is-searchable.is-focused .custom-display-content,
 .is-searchable .custom-display-content:active {
-  left: calc(var(--tct-scale-3, var(--app-scale-3, 15px)) + 1px);
+  left: calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px);
 }
 
 .has-error .custom-display-content {
-  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
 }
 
 .dropdown-open .q2-select-dropdown {
@@ -169,14 +176,18 @@ button {
 }
 
 .multi-select-header {
-  padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px));
+  padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--app-white);
 }
 
 .show-all-options {
-  margin-right: var(--tct-scale-1, var(--app-scale-1, 5px));
-  margin-left: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-right: var(--tct-scale-1, var(--app-scale-1x, 5px));
+  margin-left: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 
 .q2-element-dropdown.dropup {
-  bottom: 40px;
+  bottom: var(--comp-dropup-offset);
 }

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

@@ -109,6 +109,13 @@ export class Q2Stepper {
       return;
     this.focusStep(this.currentStep, true, true);
   }
+  statusChangeHandler(event) {
+    const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);
+    if (index > -1) {
+      this.allPanes[index].status = event.detail.status;
+      this.renderStepBtn(index);
+    }
+  }
   ////////// GETTER METHODS ////////
   get allPanes() {
     return this.hostElement.querySelectorAll('q2-stepper-pane');
@@ -159,18 +166,29 @@ export class Q2Stepper {
   renderStepBtn(stepIndex) {
     var _a;
     const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
-    const { id, label, description } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
+    const { id, label, description, status } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
     const stepNumber = stepIndex + 1;
     const isCurrentStep = stepNumber === currentStep;
     const labelId = label && `label-${id}`;
     const descriptionId = label && description && `description-${id}`;
     const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);
+    let statusIcon;
+    if (status === 'complete')
+      statusIcon = 'success';
+    else if (status === 'error')
+      statusIcon = 'warning';
+    const stepClasses = ['step-btn'];
+    if (status)
+      stepClasses.push(`status-${status}`);
+    const isLocked = status === 'locked';
+    const disabled = isLocked || stepNumber > lastEnabledStep;
     return (h("li", { role: "presentation" },
-      h("button", { class: "step-btn", type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": stepNumber > lastEnabledStep ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => this.onStepClick(ev, stepNumber) },
-        h("div", { class: "step-bubble" }, stepNumber),
-        label && (h(Fragment, null,
-          h("div", { class: "step-label", id: labelId }, loc(label)),
-          description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))),
+      h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) },
+        h(Fragment, null,
+          statusIcon ? (h("div", { class: "step-icon" },
+            h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)),
+          label && (h("div", { class: "step-label", id: labelId }, loc(label))),
+          label && description && (h("div", { class: "step-description", id: descriptionId }, loc(description))))),
       stepIndex ? h("hr", null) : ''));
   }
   render() {
@@ -291,5 +309,11 @@ export class Q2Stepper {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "statusChange",
+      "method": "statusChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/q2-stepper/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 {
@@ -72,13 +72,18 @@ button {
 ul {
   --comp-bullet-bg: var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));
   --comp-bullet-font-color: var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));
-  --comp-bullet-size: var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));
-  --comp-bullet-gap: var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));
+  --comp-bullet-size: var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));
+  --comp-bullet-gap: var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));
   --comp-bullet-border-offset: var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));
-  --comp-bullet-border: var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));
-  --comp-bullet-font-size: var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));
+  --comp-bullet-border: var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3, #21acff)));
+  --comp-bullet-font-size: var-list(var-prefixer(stepper-btn-label-font-size), 16px);
   --comp-step-width: var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));
   --comp-step-gap: var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));
+  --comp-top-btn-icon-size: var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));
+  --comp-btn-icon-size: var(--comp-top-btn-icon-size);
+  --comp-btn-content-gap: var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));
+  --comp-btn-label-font-size: var-list(var-prefixer(stepper-btn-label-font-size), 16px);
+  --comp-btn-label-color: var(--tct-stepper-label-color, var(--t-stepper-label-color, var(--t-text, #4d4d4d)));
   --comp-tween: var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));
   overflow-x: auto;
   display: flex;
@@ -135,31 +140,55 @@ li {
   padding: 0;
   transition-property: box-shadow;
   outline: none;
+  --comp-active-color: var(--t-primary, #0079c1);
+}
+.step-btn.status-complete {
+  --comp-active-color: var(--const-stoplight-success, #0e8a00);
+}
+.step-btn.status-error {
+  --comp-active-color: var(--const-stoplight-alert, #c30000);
 }
 .step-btn[aria-disabled] {
-  cursor: default;
+  cursor: not-allowed;
 }
 .step-btn[aria-disabled], .step-btn[aria-disabled] + hr {
   --comp-bullet-font-color: var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));
   --comp-bullet-bg: var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)));
 }
 
+.step-icon,
 .step-bubble {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 0;
   margin: var(--comp-bullet-gap) auto;
-  background: var(--comp-bullet-bg);
   color: var(--comp-bullet-font-color);
-  width: var(--comp-bullet-size);
-  height: var(--comp-bullet-size);
-  min-height: var(--comp-bullet-size);
+  width: var(--comp-btn-icon-size);
+  height: var(--comp-btn-icon-size);
+  min-height: var(--comp-btn-icon-size);
   font-size: var(--comp-bullet-font-size);
   transition: var(--comp-tween);
   transition-property: background, color;
   border-radius: 50%;
   position: relative;
 }
+.step-icon q2-icon,
+.step-bubble q2-icon {
+  fill: var(--comp-active-color);
+  --tct-icon-stroke-primary: var(--comp-active-color);
+  --tct-icon-stroke-secondary: var(--t-base, #ffffff);
+}
+.status-complete .step-icon, .status-error .step-icon,
+.status-complete .step-bubble,
+.status-error .step-bubble {
+  background: var(--comp-active-color);
+}
+[aria-selected] .step-icon,
 [aria-selected] .step-bubble {
   font-weight: var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600));
 }
+[aria-selected] .step-icon:before,
 [aria-selected] .step-bubble:before {
   content: "";
   position: absolute;
@@ -168,6 +197,11 @@ li {
   height: calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));
   border-radius: 50%;
   border: var(--comp-bullet-border);
+  border-color: var(--comp-active-color);
+}
+
+.step-bubble {
+  background: var(--comp-bullet-bg);
 }
 
 hr {
@@ -224,12 +258,12 @@ hr {
 }
 
 .gradient-left {
-  background-image: linear-gradient(to right, var(--t-base), var(--t-base-a0));
+  background-image: linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);
   left: 0;
 }
 
 .gradient-right {
-  background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base));
+  background-image: linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);
   right: 0;
 }
 
@@ -243,6 +277,10 @@ hr {
   top: calc(50% - 22px);
   z-index: 2;
 }
+.btn-left q2-icon,
+.btn-right q2-icon {
+  --tct-icon-stroke-width: 3;
+}
 
 .btn-left {
   left: 0;

package/dist/collection/components/q2-stepper-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-stepper-vertical/index.js

@@ -173,6 +173,7 @@ export class Q2AdvancedStepper {
         spacer.addEventListener('transitionend', () => {
           spacer.classList.remove('is-opening');
           spacer.classList.add('is-open');
+          this.resizeIframe();
         }, { once: true });
       }
       else {

package/dist/collection/components/q2-stepper-vertical/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 {
@@ -158,20 +158,20 @@ ul ul[aria-hidden=true] {
 .step-btn {
   min-height: var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px));
   font-size: var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px));
-  --comp-active-color: var(--t-primary);
+  --comp-active-color: var(--t-primary, #0079c1);
 }
 .step-btn.status-complete {
-  --comp-active-color: var(--const-stoplight-success);
+  --comp-active-color: var(--const-stoplight-success, #0e8a00);
 }
 .step-btn.status-error {
-  --comp-active-color: var(--const-stoplight-alert);
+  --comp-active-color: var(--const-stoplight-alert, #c30000);
 }
 .step-btn.status-locked {
   cursor: not-allowed;
 }
 
 .step-child-btn {
-  --comp-active-color: var(--t-primary);
+  --comp-active-color: var(--t-primary, #0079c1);
   min-height: var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px));
   padding-left: var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px)));
   font-size: var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px));
@@ -184,8 +184,8 @@ ul ul[aria-hidden=true] {
   border-left-color: var(--comp-active-color);
 }
 .step-child-btn.status-error {
-  --comp-btn-label-color: var(--const-stoplight-alert);
-  --comp-active-color: var(--const-stoplight-alert);
+  --comp-btn-label-color: var(--const-stoplight-alert, #c30000);
+  --comp-active-color: var(--const-stoplight-alert, #c30000);
 }
 .step-child-btn.status-locked {
   cursor: not-allowed;
@@ -212,8 +212,8 @@ ul ul[aria-hidden=true] {
 
 .step-icon,
 .step-bubble {
-  background: var(--t-primary);
-  color: var(--t-base);
+  background: var(--t-primary, #0079c1);
+  color: var(--t-base, #ffffff);
   border-radius: 50%;
 }
 .status-complete .step-icon, .status-error .step-icon,
@@ -223,16 +223,16 @@ ul ul[aria-hidden=true] {
 }
 .step-icon q2-icon,
 .step-bubble q2-icon {
-  --tct-icon-stroke-secondary: var(--t-base);
+  --tct-icon-stroke-secondary: var(--t-base, #ffffff);
 }
 .status-locked .step-icon,
 .status-locked .step-bubble {
-  background: var(--t-gray-12);
-  color: var(--t-text);
+  background: var(--t-gray-12, #d9d9d9);
+  color: var(--t-text, #4d4d4d);
 }
 [aria-selected=true] .step-icon,
 [aria-selected=true] .step-bubble {
-  box-shadow: 0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-active-color);
+  box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);
 }
 
 .step-bubble {
@@ -248,7 +248,7 @@ ul ul[aria-hidden=true] {
 }
 [aria-selected=true] .step-child-icon q2-icon {
   fill: var(--comp-active-color);
-  --tct-icon-stroke-secondary: var(--t-base);
+  --tct-icon-stroke-secondary: var(--t-base, #ffffff);
 }
 
 .spacer {

package/dist/collection/components/q2-tab-container/index.js

@@ -25,17 +25,21 @@ export class Q2TabContainer {
       });
     };
     this.setTabs = () => {
-      this.tabs = this.tabPanes.map(({ label, value }) => ({
+      this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription }) => ({
         label: (label && loc(label)) || '',
         value,
+        badgeCount,
+        badgeDescription,
       }));
     };
     this.onTabClick = (event) => {
-      const isAlreadySelected = this.value === event.target.dataset.value;
+      const targetValue = event.target.closest('button[role="tab"]')
+        .dataset.value;
+      const isAlreadySelected = this.value === targetValue;
       if (isAlreadySelected)
         return;
       this.change.emit({
-        value: event.target.dataset.value,
+        value: targetValue,
       });
     };
     this.onTabKeyDown = (event) => {
@@ -147,6 +151,9 @@ export class Q2TabContainer {
     const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
     this.moveFocus(index);
   }
+  onBadge() {
+    this.setTabs();
+  }
   ///////// Lifecycle Hooks /////////
   componentWillLoad() {
     const observer = new MutationObserver(this.updateTabData);
@@ -211,7 +218,12 @@ export class Q2TabContainer {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
     return (h("li", { role: "presentation" },
-      h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
+      h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected))));
+  }
+  generateTabWithBadge(tab, isSelected) {
+    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${tab.badgeDescription || loc('tecton.element.tab.pane.new')}` },
+      tab.label,
+      h("q2-badge", { value: tab.badgeCount, theme: isSelected ? 'primary' : undefined })));
   }
   static get is() { return "q2-tab-container"; }
   static get encapsulation() { return "shadow"; }
@@ -374,5 +386,11 @@ export class Q2TabContainer {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "badge",
+      "method": "onBadge",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/q2-tab-container/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 {
@@ -79,10 +79,10 @@ button {
 }
 
 ul {
-  --comp-container-padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  --comp-container-padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;
   padding: var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));
   display: flex;
-  gap: var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  gap: var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));
   list-style: none;
   border-bottom: 1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
   overflow-x: auto;
@@ -118,14 +118,14 @@ li button {
   width: var(--tct-tab-width, var(--t-tab-width, 100%));
   text-align: var(--tct-tab-text-align, var(--t-tab-text-align, center));
   text-decoration: var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));
-  padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
+  padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
   color: var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));
   font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
   display: block;
   transition: color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
 }
 :host([type=section]) li button {
-  --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+  --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
   font-size: inherit;
   padding: var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)));
 }
@@ -149,14 +149,14 @@ li button[aria-selected=true] {
 }
 @media screen and (max-width: 767px) {
   li button {
-    --comp-tab-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+    --comp-tab-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
     font-size: inherit;
     padding: var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)));
   }
 }
 
 .tab-content {
-  --comp-tab-content-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) 0;
+  --comp-tab-content-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;
   padding: var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)));
 }
 .tab-content:focus {
@@ -174,12 +174,12 @@ li button[aria-selected=true] {
 }
 
 .gradient-left {
-  background-image: linear-gradient(to right, var(--t-base), var(--t-base-a0));
+  background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
   left: 0;
 }
 
 .gradient-right {
-  background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base));
+  background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
   right: 0;
 }
 
@@ -193,6 +193,10 @@ li button[aria-selected=true] {
   top: calc(50% - 22px);
   z-index: 2;
 }
+.btn-left q2-icon,
+.btn-right q2-icon {
+  --tct-icon-stroke-width: 3;
+}
 
 .btn-left {
   left: 0;
@@ -200,4 +204,14 @@ li button[aria-selected=true] {
 
 .btn-right {
   right: 0;
+}
+
+.tab-pane-badge {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tab-pane-badge q2-badge {
+  margin-left: 5px;
+  margin-right: 5px;
 }

package/dist/collection/components/q2-tab-pane/index.js

@@ -1,5 +1,8 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop, Event, Watch, h } from '@stencil/core';
 export class Q2TabPane {
+  badgeObserver() {
+    this.badge.emit();
+  }
   render() {
     return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` },
       h("slot", null)));
@@ -81,6 +84,40 @@ export class Q2TabPane {
       "attribute": "selected",
       "reflect": true
     },
+    "badgeCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge-count",
+      "reflect": true
+    },
+    "badgeDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge-description",
+      "reflect": true
+    },
     "index": {
       "type": "number",
       "mutable": false,
@@ -116,4 +153,24 @@ export class Q2TabPane {
       "reflect": false
     }
   }; }
+  static get events() { return [{
+      "method": "badge",
+      "name": "badge",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "badgeCount",
+      "methodName": "badgeObserver"
+    }]; }
 }

package/dist/collection/components/q2-tab-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-tag/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 {
@@ -84,11 +84,11 @@ button {
   --comp-tag-color: var(--t-primary-text, #ffffff);
 }
 :host([theme=secondary]) .tag-wrapper {
-  --comp-tag-background: var(--t-secondary-l5, #61c4ff);
+  --comp-tag-background: var(--t-secondary-l5, #d9e1e6);
   --comp-tag-color: var(--t-secondary-text, #000000);
 }
 :host([theme=tertiary]) .tag-wrapper {
-  --comp-tag-background: var(--t-tertiary-l5, #61c4ff);
+  --comp-tag-background: var(--t-tertiary-l5, #f4fafe);
   --comp-tag-color: var(--t-tertiary-text, #000000);
 }
 
@@ -106,9 +106,7 @@ button {
 
 .btn-wrapper {
   --comp-tag-clickable-size: var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));
-  --comp-tag-btn-offset: calc(
-      calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1
-  );
+  --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);
   height: var(--comp-tag-clickable-size);
   width: var(--comp-tag-clickable-size);
   display: flex;