q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -87,109 +87,57 @@ button {
     }
   }
 }
-:host {
-  /**
-   * @prop --tct-card-image-base-blur: (<length>) Controls the blur radius applied to the base card image layer.
-   * @prop --tct-card-image-primary-color: (<color>) Controls the background color of the base layer when bg-primary is applied.
-   * @prop --tct-card-image-secondary-color: (<color>) Controls the background color of the base layer when bg-secondary is applied.
-   * @prop --tct-card-image-tertiary-color: (<color>) Controls the background color of the base layer when bg-tertiary is applied.
-   */
-  --tct-card-image-base-blur: 0px;
-  --tct-card-image-primary-color: var(--t-primary, #5446a4);
-  --tct-card-image-secondary-color: var(--t-secondary, #2a7de1);
-  --tct-card-image-tertiary-color: var(--t-tertiary, #6b7280);
-  /**
-   * @prop --tct-card-image-base-gradient-deg: (<angle>) Controls the angle of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-left-color: (<color>) Controls the left color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-left-stop: (<percentage>) Controls the position of the left color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-middle-color: (<color>) Controls the middle color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-middle-stop: (<percentage>) Controls the position of the middle color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-right-color: (<color>) Controls the right color stop of the base layer gradient.
-   * @prop --tct-card-image-base-gradient-right-stop: (<percentage>) Controls the position of the right color stop of the base layer gradient.
-   */
-  --tct-card-image-base-gradient-deg: 110.95deg;
-  --tct-card-image-base-gradient-left-color: var(--t-gray-2, #1a1a1a);
-  --tct-card-image-base-gradient-left-stop: 0.54%;
-  --tct-card-image-base-gradient-middle-color: var(--t-gray-11, #cccccc);
-  --tct-card-image-base-gradient-middle-stop: 60.22%;
-  --tct-card-image-base-gradient-right-color: var(--t-gray-2, #1a1a1a);
-  --tct-card-image-base-gradient-right-stop: 100%;
-  /**
-   * @prop --tct-card-image-overlay-opacity: (<number>) Controls the opacity of the overlay layer.
-   * @prop --tct-card-image-overlay-mix-blend-mode: (<custom-ident>) Controls the mix-blend-mode of the dot-pattern overlay.
-   */
-  --tct-card-image-overlay-opacity: 1;
-  --tct-card-image-overlay-mix-blend-mode: normal;
-  /**
-   * @prop --tct-card-image-dot-size: (<length>) Controls the size of dots in the dot-pattern overlay.
-   * @prop --tct-card-image-dot-spacing: (<length>) Controls the spacing between dots in the dot-pattern overlay.
-   * @prop --tct-card-image-dot-color: (<color>) Controls the color of dots in the dot-pattern overlay.
-   */
-  --tct-card-image-dot-size: 0.5px;
-  --tct-card-image-dot-spacing: 2px;
-  --tct-card-image-dot-color: rgba(128, 128, 128, 0.5);
-  /**
-   * @prop --tct-card-image-font-color: (<color>) Controls the text color of the card number, holder, and other card details.
-   * @prop --tct-card-image-text-shadow: (*) Controls the text shadow of the card number, holder, and other card details.
-   */
-  --tct-card-image-font-color: var(--t-base, #fff);
-  --tct-card-image-text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
-  /**
-   * @prop --tct-card-image-status-box-shadow: (*) Controls the box shadow of the status banner that straddles the top edge of the card.
-   * @prop --tct-card-image-status-background-digital: (<color>) Controls the background color of the status banner when status is digital.
-   * @prop --tct-card-image-status-color-digital: (<color>) Controls the text color of the status banner when status is digital.
-   * @prop --tct-card-image-status-background-enabled: (<color>) Controls the background color of the status banner when status is enabled.
-   * @prop --tct-card-image-status-color-enabled: (<color>) Controls the text color of the status banner when status is enabled.
-   * @prop --tct-card-image-status-background-disabled: (<color>) Controls the background color of the status banner when status is disabled.
-   * @prop --tct-card-image-status-color-disabled: (<color>) Controls the text color of the status banner when status is disabled.
-   * @prop --tct-card-image-status-background-locked: (<color>) Controls the background color of the status banner when status is locked.
-   * @prop --tct-card-image-status-color-locked: (<color>) Controls the text color of the status banner when status is locked.
-   * @prop --tct-card-image-status-background-damaged: (<color>) Controls the background color of the status banner when status is damaged.
-   * @prop --tct-card-image-status-color-damaged: (<color>) Controls the text color of the status banner when status is damaged.
-   * @prop --tct-card-image-status-background-lost: (<color>) Controls the background color of the status banner when status is lost.
-   * @prop --tct-card-image-status-color-lost: (<color>) Controls the text color of the status banner when status is lost.
-   * @prop --tct-card-image-status-background-stolen: (<color>) Controls the background color of the status banner when status is stolen.
-   * @prop --tct-card-image-status-color-stolen: (<color>) Controls the text color of the status banner when status is stolen.
-   * @prop --tct-card-image-status-background-lost-or-stolen: (<color>) Controls the background color of the status banner when status is lost-or-stolen.
-   * @prop --tct-card-image-status-color-lost-or-stolen: (<color>) Controls the text color of the status banner when status is lost-or-stolen.
-   */
-  --tct-card-image-status-box-shadow: var(
-      --app-shadow-3,
-      0px 0px 2px rgba(0, 0, 0, 0.12),
-      0px 8px 16px rgba(0, 0, 0, 0.14)
-  );
-  --tct-card-image-status-background-digital: var(--tct-black, #000);
-  --tct-card-image-status-color-digital: var(--tct-white, #fff);
-  --tct-card-image-status-background-enabled: var(--tct-stoplight-info, #0079c1);
-  --tct-card-image-status-color-enabled: var(--tct-white, #fff);
-  --tct-card-image-status-background-disabled: var(--tct-stoplight-alert, #d20a0a);
-  --tct-card-image-status-color-disabled: var(--tct-white, #fff);
-  --tct-card-image-status-background-locked: var(--tct-stoplight-alert, #d20a0a);
-  --tct-card-image-status-color-locked: var(--tct-white, #fff);
-  --tct-card-image-status-background-damaged: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-damaged: var(--tct-white, #fff);
-  --tct-card-image-status-background-lost: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-lost: var(--tct-white, #fff);
-  --tct-card-image-status-background-stolen: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-stolen: var(--tct-white, #fff);
-  --tct-card-image-status-background-lost-or-stolen: var(--tct-stoplight-warning, #c35500);
-  --tct-card-image-status-color-lost-or-stolen: var(--tct-white, #fff);
-  /**
-   * @prop --tct-card-image-disabled-opacity: (<number>) Controls the opacity of the card image container when disabled.
-   * @prop --tct-card-image-max-width: (<length-percentage>) Controls the maximum width of the card image container.
-   * @prop --tct-card-image-min-width: (<length>) Controls the minimum width of the card image container.
-   * @prop --tct-card-image-width?: (<length-percentage>) Controls the optional explicit width of the card image container.
-   * @prop --tct-card-image-base-url?: (<image>) Controls the optional background image of the base layer when bg-custom is applied.
-   * @prop --tct-card-image-overlay-url?: (<image>) Controls the optional background image of the overlay layer when bg-custom is applied.
-   * @prop --tct-card-image-fi-logo: (<image>) Controls the financial-institution logo image rendered on the card.
-   * @prop --tct-card-image-logo-padding: (<length-percentage>+) Controls the inner padding around the financial-institution logo.
-   * @prop --tct-card-image-type-color: (<color>) Controls the text color of the card vendor type label.
-   * @prop --tct-card-image-type-font-size: (<length-percentage>) Controls the font size of the card vendor type label.
-   * @prop --tct-card-image-type-margin-bottom: (<length-percentage>) Controls the bottom margin of the card vendor type label.
-   * @prop --tct-card-image-type-margin-right: (<length-percentage>) Controls the right margin of the card vendor type label.
-   */
-}
-
+/**
+ * @prop --tct-card-image-base-blur: (<length>) Controls the blur radius applied to the base card image layer.
+ * @prop --tct-card-image-primary-color: (<color>) Controls the background color of the base layer when bg-primary is applied.
+ * @prop --tct-card-image-secondary-color: (<color>) Controls the background color of the base layer when bg-secondary is applied.
+ * @prop --tct-card-image-tertiary-color: (<color>) Controls the background color of the base layer when bg-tertiary is applied.
+ * @prop --tct-card-image-base-gradient-deg: (<angle>) Controls the angle of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-left-color: (<color>) Controls the left color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-left-stop: (<percentage>) Controls the position of the left color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-middle-color: (<color>) Controls the middle color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-middle-stop: (<percentage>) Controls the position of the middle color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-right-color: (<color>) Controls the right color stop of the base layer gradient.
+ * @prop --tct-card-image-base-gradient-right-stop: (<percentage>) Controls the position of the right color stop of the base layer gradient.
+ * @prop --tct-card-image-overlay-opacity: (<number>) Controls the opacity of the overlay layer.
+ * @prop --tct-card-image-overlay-mix-blend-mode: (<custom-ident>) Controls the mix-blend-mode of the dot-pattern overlay.
+ * @prop --tct-card-image-dot-size: (<length>) Controls the size of dots in the dot-pattern overlay.
+ * @prop --tct-card-image-dot-spacing: (<length>) Controls the spacing between dots in the dot-pattern overlay.
+ * @prop --tct-card-image-dot-color: (<color>) Controls the color of dots in the dot-pattern overlay.
+ * @prop --tct-card-image-font-color: (<color>) Controls the text color of the card number, holder, and other card details.
+ * @prop --tct-card-image-text-shadow: (*) Controls the text shadow of the card number, holder, and other card details.
+ * @prop --tct-card-image-status-box-shadow: (*) Controls the box shadow of the status banner that straddles the top edge of the card.
+ * @prop --tct-card-image-status-background-digital: (<color>) Controls the background color of the status banner when status is digital.
+ * @prop --tct-card-image-status-color-digital: (<color>) Controls the text color of the status banner when status is digital.
+ * @prop --tct-card-image-status-background-enabled: (<color>) Controls the background color of the status banner when status is enabled.
+ * @prop --tct-card-image-status-color-enabled: (<color>) Controls the text color of the status banner when status is enabled.
+ * @prop --tct-card-image-status-background-new: (<color>) Controls the background color of the status banner when status is new.
+ * @prop --tct-card-image-status-color-new: (<color>) Controls the text color of the status banner when status is new.
+ * @prop --tct-card-image-status-background-disabled: (<color>) Controls the background color of the status banner when status is disabled.
+ * @prop --tct-card-image-status-color-disabled: (<color>) Controls the text color of the status banner when status is disabled.
+ * @prop --tct-card-image-status-background-locked: (<color>) Controls the background color of the status banner when status is locked.
+ * @prop --tct-card-image-status-color-locked: (<color>) Controls the text color of the status banner when status is locked.
+ * @prop --tct-card-image-status-background-damaged: (<color>) Controls the background color of the status banner when status is damaged.
+ * @prop --tct-card-image-status-color-damaged: (<color>) Controls the text color of the status banner when status is damaged.
+ * @prop --tct-card-image-status-background-lost: (<color>) Controls the background color of the status banner when status is lost.
+ * @prop --tct-card-image-status-color-lost: (<color>) Controls the text color of the status banner when status is lost.
+ * @prop --tct-card-image-status-background-stolen: (<color>) Controls the background color of the status banner when status is stolen.
+ * @prop --tct-card-image-status-color-stolen: (<color>) Controls the text color of the status banner when status is stolen.
+ * @prop --tct-card-image-status-background-lost-or-stolen: (<color>) Controls the background color of the status banner when status is lost-or-stolen.
+ * @prop --tct-card-image-status-color-lost-or-stolen: (<color>) Controls the text color of the status banner when status is lost-or-stolen.
+ * @prop --tct-card-image-disabled-opacity: (<number>) Controls the opacity of the card image container when disabled.
+ * @prop --tct-card-image-max-width: (<length-percentage>) Controls the maximum width of the card image container.
+ * @prop --tct-card-image-min-width: (<length>) Controls the minimum width of the card image container.
+ * @prop --tct-card-image-width?: (<length-percentage>) Controls the optional explicit width of the card image container.
+ * @prop --tct-card-image-base-url?: (<image>) Controls the optional background image of the base layer when bg-custom is applied.
+ * @prop --tct-card-image-overlay-url?: (<image>) Controls the optional background image of the overlay layer when bg-custom is applied.
+ * @prop --tct-card-image-fi-logo: (<image>) Controls the financial-institution logo image rendered on the card.
+ * @prop --tct-card-image-logo-padding: (<length-percentage>+) Controls the inner padding around the financial-institution logo.
+ * @prop --tct-card-image-type-color: (<color>) Controls the text color of the card vendor type label.
+ * @prop --tct-card-image-type-font-size: (<length-percentage>) Controls the font size of the card vendor type label.
+ * @prop --tct-card-image-type-margin-bottom: (<length-percentage>) Controls the bottom margin of the card vendor type label.
+ * @prop --tct-card-image-type-margin-right: (<length-percentage>) Controls the right margin of the card vendor type label.
+ */
 :host {
   display: flex;
   flex-direction: column;
@@ -248,6 +196,7 @@ button {
 }
 
 .card-wrapper > q2-btn {
+  --tct-btn-default-double-focus-visible-ring: var(--comp-aesthetic-btn-focus-ring, none);
   --const-double-focus-ring: none;
   --tct-btn-min-height-medium: 0;
   --tct-btn-padding-size-medium: 0;
@@ -259,6 +208,7 @@ button {
 .card-wrapper {
   position: relative;
   max-width: 100%;
+  --comp-aesthetic-btn-focus-ring: var(--tct-btn-default-double-focus-visible-ring);
 }
 
 .card-action {
@@ -316,33 +266,33 @@ button {
 
 .card-image {
   z-index: 1;
-  filter: blur(var(--tct-card-image-base-blur));
+  filter: blur(var(--tct-card-image-base-blur, 0px));
 }
 
 .card-image-overlay {
   z-index: 2;
-  opacity: var(--tct-card-image-overlay-opacity);
+  opacity: var(--tct-card-image-overlay-opacity, 1);
 }
 
 .card-image.bg-primary {
-  background-color: var(--tct-card-image-primary-color);
+  background-color: var(--tct-card-image-primary-color, var(--t-primary, #5446a4));
 }
 .card-image.bg-secondary {
-  background-color: var(--tct-card-image-secondary-color);
+  background-color: var(--tct-card-image-secondary-color, var(--t-secondary, #2a7de1));
 }
 .card-image.bg-tertiary {
-  background-color: var(--tct-card-image-tertiary-color);
+  background-color: var(--tct-card-image-tertiary-color, var(--t-tertiary, #6b7280));
 }
 
 .card-image.bg-gradient {
-  background: linear-gradient(var(--tct-card-image-base-gradient-deg), var(--tct-card-image-base-gradient-left-color) var(--tct-card-image-base-gradient-left-stop), var(--tct-card-image-base-gradient-middle-color) var(--tct-card-image-base-gradient-middle-stop), var(--tct-card-image-base-gradient-right-color) var(--tct-card-image-base-gradient-right-stop));
+  background: linear-gradient(var(--tct-card-image-base-gradient-deg, 110.95deg), var(--tct-card-image-base-gradient-left-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-left-stop, 0.54%), var(--tct-card-image-base-gradient-middle-color, var(--t-gray-11, #cccccc)) var(--tct-card-image-base-gradient-middle-stop, 60.22%), var(--tct-card-image-base-gradient-right-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-right-stop, 100%));
 }
 
 .card-image-overlay.bg-dot {
-  background-image: radial-gradient(circle, var(--tct-card-image-dot-color) var(--tct-card-image-dot-size), transparent var(--tct-card-image-dot-size));
-  background-size: var(--tct-card-image-dot-spacing) var(--tct-card-image-dot-spacing);
-  mix-blend-mode: var(--tct-card-image-overlay-mix-blend-mode);
-  opacity: var(--tct-card-image-overlay-opacity);
+  background-image: radial-gradient(circle, var(--tct-card-image-dot-color, rgba(128, 128, 128, 0.5)) var(--tct-card-image-dot-size, 0.5px), transparent var(--tct-card-image-dot-size, 0.5px));
+  background-size: var(--tct-card-image-dot-spacing, 2px) var(--tct-card-image-dot-spacing, 2px);
+  mix-blend-mode: var(--tct-card-image-overlay-mix-blend-mode, normal);
+  opacity: var(--tct-card-image-overlay-opacity, 1);
 }
 
 .card-image.bg-custom {
@@ -368,7 +318,7 @@ button {
   padding: 0 12px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 5px/5px;
-  box-shadow: var(--tct-card-image-status-box-shadow);
+  box-shadow: var(--tct-card-image-status-box-shadow, var(--app-shadow-3));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -389,43 +339,48 @@ button {
 }
 
 .card-status-banner.status-enabled {
-  background-color: var(--tct-card-image-status-background-enabled);
-  color: var(--tct-card-image-status-color-enabled);
+  background-color: var(--tct-card-image-status-background-enabled, var(--const-stoplight-success, #0e8a00));
+  color: var(--tct-card-image-status-color-enabled, var(--tct-white, #fff));
+}
+
+.card-status-banner.status-new {
+  background-color: var(--tct-card-image-status-background-new, var(--const-stoplight-info, #0079c1));
+  color: var(--tct-card-image-status-color-new, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-disabled {
-  background-color: var(--tct-card-image-status-background-disabled);
-  color: var(--tct-card-image-status-color-disabled);
+  background-color: var(--tct-card-image-status-background-disabled, var(--const-stoplight-alert, #d20a0a));
+  color: var(--tct-card-image-status-color-disabled, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-locked {
-  background-color: var(--tct-card-image-status-background-locked);
-  color: var(--tct-card-image-status-color-locked);
+  background-color: var(--tct-card-image-status-background-locked, var(--const-stoplight-alert, #d20a0a));
+  color: var(--tct-card-image-status-color-locked, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-damaged {
-  background-color: var(--tct-card-image-status-background-damaged);
-  color: var(--tct-card-image-status-color-damaged);
+  background-color: var(--tct-card-image-status-background-damaged, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-damaged, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-lost {
-  background-color: var(--tct-card-image-status-background-lost);
-  color: var(--tct-card-image-status-color-lost);
+  background-color: var(--tct-card-image-status-background-lost, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-lost, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-stolen {
-  background-color: var(--tct-card-image-status-background-stolen);
-  color: var(--tct-card-image-status-color-stolen);
+  background-color: var(--tct-card-image-status-background-stolen, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-stolen, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-lost-or-stolen {
-  background-color: var(--tct-card-image-status-background-lost-or-stolen);
-  color: var(--tct-card-image-status-color-lost-or-stolen);
+  background-color: var(--tct-card-image-status-background-lost-or-stolen, var(--const-stoplight-warning, #c35500));
+  color: var(--tct-card-image-status-color-lost-or-stolen, var(--tct-white, #fff));
 }
 
 .card-status-banner.status-digital {
-  background-color: var(--tct-card-image-status-background-digital);
-  color: var(--tct-card-image-status-color-digital);
+  background-color: var(--tct-card-image-status-background-digital, var(--tct-black, #000));
+  color: var(--tct-card-image-status-color-digital, var(--tct-white, #fff));
 }
 
 .card-details-wrapper {
@@ -439,12 +394,12 @@ button {
 }
 
 .card-text {
-  color: var(--tct-card-image-font-color);
+  color: var(--tct-card-image-font-color, var(--t-base, #fff));
   font-family: "Open Sans", Arial, sans-serif;
   font-weight: 600;
   line-height: 1;
   letter-spacing: 1.55px;
-  text-shadow: var(--tct-card-image-text-shadow);
+  text-shadow: var(--tct-card-image-text-shadow, 0px 0px 1px rgba(0, 0, 0, 0.85));
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
@@ -530,7 +485,7 @@ button {
 
 .horizontal-card-type {
   font-size: var(--tct-card-image-type-font-size, 4cqw);
-  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));
+  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));
   margin-right: var(--tct-card-image-type-margin-right, 4.15cqw);
   margin-bottom: var(--tct-card-image-type-margin-bottom, -10.1cqw);
 }
@@ -685,7 +640,7 @@ button {
 .vertical-card-type {
   font-size: var(--tct-card-image-type-font-size, 6.4cqw);
   padding-bottom: 2cqw;
-  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));
+  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));
   margin-right: var(--tct-card-image-type-margin-right, 3cqw);
   margin-bottom: var(--tct-card-image-type-margin-bottom, -19cqw);
 }

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

@@ -369,11 +369,11 @@ export class Q2CardImage {
     render() {
         const cardContent = this.clickable ? (h("q2-btn", { block: true, disabled: this.disabled, label: this.tctAriaLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: '4425c2f04d081d93b56ed67f00b949c8143d0046', class: {
+        return (h(Host, { key: '1210673a91d22bac5106d3807ec08179fb6cfd9f', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: '1d264f88e00805b9153a7ac59f4ea367bf28dc3f', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: 'b81dd3c1b02260e9ff1d7e7321d88a3c2d209f83', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get is() { return "q2-card-image"; }
     static get encapsulation() { return "shadow"; }
@@ -472,8 +472,8 @@ export class Q2CardImage {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'digital' | 'enabled' | 'disabled' | 'locked' | 'damaged' | 'lost' | 'stolen' | 'lost or stolen'",
-                    "resolved": "\"damaged\" | \"digital\" | \"disabled\" | \"enabled\" | \"locked\" | \"lost or stolen\" | \"lost\" | \"stolen\"",
+                    "original": "| 'digital'\n        | 'enabled'\n        | 'new'\n        | 'disabled'\n        | 'locked'\n        | 'damaged'\n        | 'lost'\n        | 'stolen'\n        | 'lost or stolen'",
+                    "resolved": "\"damaged\" | \"digital\" | \"disabled\" | \"enabled\" | \"locked\" | \"lost or stolen\" | \"lost\" | \"new\" | \"stolen\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/q2-card-image/test/q2-card-image-test.vr.js

@@ -61,6 +61,10 @@ const VARIANTS = [
         name: 'status-enabled',
         html: `<q2-card-image background="primary" card-status="enabled" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
     },
+    {
+        name: 'status-new',
+        html: `<q2-card-image background="primary" card-status="new" fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,
+    },
     {
         name: 'status-disabled',
         html: `<q2-card-image background="primary" card-status="disabled" disabled fi-logo="${FI_LOGO}" chip="gold" card-number="${NUMBER}" expiration-date="${EXP}" card-holder="${HOLDER}" vendor="mastercard" ${W_LG}></q2-card-image>`,

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

@@ -68,13 +68,14 @@ export class Q2Carousel {
                         const logicalIndex = this.paneCount > 0 ? swiper.realIndex % this.paneCount : swiper.realIndex;
                         this.index = logicalIndex + 1;
                         this.updateCarouselPaneProps();
-                        const isPaginationFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
+                        const focusSource = document.activeElement;
+                        const isPaginationFocused = !!focusSource.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
                         const isCarouselFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
                         const isFocused = isPaginationFocused || isCarouselFocused;
                         this.handleAriaLive(isFocused);
                         mirrorEmit(this, ['change', 'tctChange'], { index: logicalIndex + 1 });
                         if (isPaginationFocused) {
-                            this.paginationBtns[logicalIndex].focus({ preventScroll: true });
+                            this.pendingPaginationFocus = { index: logicalIndex, source: focusSource };
                         }
                         else if (isCarouselFocused)
                             swiper.slides[swiper.activeIndex].focus({
@@ -349,7 +350,7 @@ export class Q2Carousel {
         };
         this.renderNextNavBtn = () => {
             const disabled = this.loop === false && this.realIndex >= this.paneCount - 1;
-            return (h("div", { class: "next-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", intent: "workflow-primary", label: loc('tecton.element.carousel.nextItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, h("q2-icon", { type: "arrow-right" }))));
+            return (h("div", { class: "next-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", intent: "primary", label: loc('tecton.element.carousel.nextItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideNext(); } }, h("q2-icon", { type: "arrow-right" }))));
         };
         this.renderPaginationArea = () => {
             const { useDynamicPaginationDots, realIndex, paneCount } = this;
@@ -373,13 +374,14 @@ export class Q2Carousel {
         };
         this.renderPrevNavBtn = () => {
             const disabled = this.loop === false && this.realIndex <= 0;
-            return (h("div", { class: "prev-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", intent: "workflow-primary", label: loc('tecton.element.carousel.previousItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, h("q2-icon", { type: "arrow-left" }))));
+            return (h("div", { class: "prev-btn" }, h("q2-btn", { class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", intent: "primary", label: loc('tecton.element.carousel.previousItemLabel'), hideLabel: true, disabled: disabled || undefined, onTctClick: () => { var _a; return (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slidePrev(); } }, h("q2-icon", { type: "arrow-left" }))));
         };
     }
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
         var _a;
+        this.pendingPaginationFocus = undefined;
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
             this.mutationObserver = null;
@@ -412,6 +414,18 @@ export class Q2Carousel {
         this.mutationObserver = observer;
         overrideFocus(this.hostElement);
     }
+    componentDidRender() {
+        var _a;
+        const pendingFocus = this.pendingPaginationFocus;
+        this.pendingPaginationFocus = undefined;
+        if (!pendingFocus)
+            return;
+        const activeElement = document.activeElement;
+        if (activeElement !== pendingFocus.source && activeElement !== document.body)
+            return;
+        // Dynamic pagination hides distant dots until the new active index renders.
+        (_a = this.paginationBtns[pendingFocus.index]) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+    }
     // #endregion
     // #region Listeners
     carouselPaneClicked(event) {
@@ -561,7 +575,7 @@ export class Q2Carousel {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (h(Host, { key: '2c623516b2b0ce7800440110cde323bdf065abc1', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (h(Host, { key: 'e0ebc5ae08102ced9a732ca59217cd3c2c501172', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
             this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&

package/dist/collection/components/q2-carousel/test/q2-carousel-test.vr.js

@@ -62,8 +62,21 @@ const FOCUS_VARIANT = {
     name: 'with-arrows',
     html: carousel('show-navigation-arrows'),
 };
+// frameless-panes variants that are non-deterministic due to the ResizeObserver race
+// in q2-carousel's schedulePaneHeightSync. Post-hydration aesthetic injection changes
+// CSS custom properties that affect pane content height, which fires ResizeObserver and
+// schedules a 1-rAF pane-sync callback. That callback can land after setupPage's rAF
+// wait resolves, producing different screenshots each run. Themes with larger font
+// overrides (default-2026: 14px via --app-font-size; minimalist: similar) are most
+// susceptible. Other themes happen to produce stable output at the same font metrics
+// as base-theme defaults, so only these two are non-deterministic in practice.
+const FRAMELESS_FLAKY_THEMES = new Set(['default-2026', 'minimalist']);
 const restingCase = (variant, theme) => {
     test(`q2-carousel--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        if (variant.name === 'frameless-panes' && FRAMELESS_FLAKY_THEMES.has(theme)) {
+            test.skip();
+            return;
+        }
         await setupPage(page, variant.html, { theme, setupLoc: true });
         await expect(page).toHaveScreenshot(`q2-carousel--${variant.name}--resting--${theme}.png`);
     });
@@ -80,6 +93,11 @@ const focusIndicatorCase = (variant, theme) => {
         await setupPage(page, variant.html, { theme, setupLoc: true });
         await page.keyboard.press('Tab');
         await page.keyboard.press('Tab');
+        await expect(page.locator('.q2-carousel-page-indicator-0')).toBeFocused();
+        await page.keyboard.press('End');
+        await expect(page.locator('.q2-carousel-page-indicator-4')).toBeFocused();
+        await page.keyboard.press('Home');
+        await expect(page.locator('.q2-carousel-page-indicator-0')).toBeFocused();
         await expect(page).toHaveScreenshot(`q2-carousel--${variant.name}--focus-indicator--${theme}.png`);
     });
 };
@@ -90,6 +108,32 @@ const focusPaneCase = (variant, theme) => {
         await expect(page).toHaveScreenshot(`q2-carousel--${variant.name}--focus-pane--${theme}.png`);
     });
 };
+const focusDynamicIndicatorCase = (theme) => {
+    test(`q2-carousel--dynamic-pagination--focus-indicator — ${theme}`, async ({ page }) => {
+        const panes = Array.from({ length: 6 }, (_, index) => PANE(index + 1, 6)).join('');
+        await setupPage(page, `<q2-carousel auto-height>${panes}</q2-carousel>`, { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page.locator('.q2-carousel-page-indicator-0')).toBeFocused();
+        for (const [key, index] of [
+            ['End', 5],
+            ['Home', 0],
+            ['ArrowLeft', 5],
+            ['ArrowRight', 0],
+        ]) {
+            await page.keyboard.press(key);
+            const indicator = page.locator(`.q2-carousel-page-indicator-${index}`);
+            await expect(indicator).toBeFocused();
+            await expect(indicator).toHaveAttribute('aria-selected', 'true');
+            await expect(indicator).toBeVisible();
+            await expect(indicator).not.toHaveCSS('box-shadow', 'none');
+            await page.waitForFunction(() => {
+                const container = document.querySelector('.swiper');
+                return !container.swiper.animating;
+            });
+        }
+        await expect(page).toHaveScreenshot(`q2-carousel--dynamic-pagination--focus-indicator--${theme}.png`);
+    });
+};
 test.describe('q2-carousel — variants × themes', () => {
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
@@ -100,5 +144,6 @@ test.describe('q2-carousel — variants × themes', () => {
         focusArrowCase(FOCUS_VARIANT, theme);
         focusIndicatorCase(FOCUS_VARIANT, theme);
         focusPaneCase(FOCUS_VARIANT, theme);
+        focusDynamicIndicatorCase(theme);
     }
 });

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js

@@ -97,12 +97,12 @@ export class Q2CarouselPane {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '6d221b15545378efa40b54864b2ebca1bcb1e983', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: 'f4a4c10d9e66146fae74ee206bb466563ff70957', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: '394965fb0a46501fcd33aa3acadb2eaae6a1accd', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'a059daeb1c5192cec8594b6c9843828d6b833f12' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '41030b6a419ccd15485eb0b8a04ba6171777f5e9', class: "q2-carousel-pane-main-content" }, h("slot", { key: '33850b8d35a3c134f014a6eb4638be25f7ab76c0' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {

package/dist/collection/components/q2-chart-area/q2-chart-area.css

@@ -98,10 +98,21 @@ button {
 }
 
 .container {
+  position: relative;
   width: 100%;
   height: 100%;
 }
 
+.chart-keyboard-value {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--app-scale-1x);
+  background: var(--t-base);
+  color: var(--t-text);
+  pointer-events: none;
+}
+
 .chart-container {
   width: 100%;
   height: 100%;