q2-tecton-elements 1.69.1 → 1.70.0

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

@@ -26,6 +26,8 @@ const h =  t(class extends a {
     // #endregion
     // #region State Properties
     this.computedSize = "medium", 
+    // #endregion
+    // #region Public Property API
     /**
          * Background style for the base layer.
          * - `'primary'` | `'secondary'` | `'tertiary'`: Solid theme colors
@@ -253,7 +255,7 @@ const h =  t(class extends a {
     const t = "horizontal" === this.orientation ? this.renderHorizontalCardDetails() : this.renderVerticalCardDetails();
     return e("div", {
       role: this.isDecorative || this.clickable ? void 0 : "img",
-      "aria-label": this.isDecorative || this.clickable ? void 0 : this.accessibilityLabel,
+      "aria-label": this.isDecorative || this.clickable ? void 0 : this.tctAriaLabel,
       "aria-hidden": this.isDecorative || this.clickable ? "true" : void 0,
       class: {
         "card-image-container": !0,
@@ -397,20 +399,21 @@ const h =  t(class extends a {
   }
   render() {
     const t = this.clickable ? e("q2-btn", {
+      block: !0,
       disabled: this.disabled,
-      label: this.accessibilityLabel,
+      label: this.tctAriaLabel,
       hideLabel: !0,
       onClick: this.handleCardClick
     }, this.renderCardContent()) : this.renderCardContent(), a = !!this.cardStatus && "large" === this.size;
     return e(c, {
-      key: "3c71f0e8e6fd22ebf3a3e3b98f890767ced6060b",
+      key: "4425c2f04d081d93b56ed67f00b949c8143d0046",
       class: {
         ["" + this.orientation]: !0,
         "has-action": this.hasActionSlotContent,
         "has-banner": a
       }
     }, this.renderStatusBanner(), e("div", {
-      key: "761c7a611ec3f8e0ffd7a5b51e2944f83876f5ae",
+      key: "1d264f88e00805b9153a7ac59f4ea367bf28dc3f",
       class: "card-wrapper"
     }, t, this.renderAction()));
   }
@@ -421,10 +424,9 @@ const h =  t(class extends a {
     return this;
   }
   static get style() {
-    return '*{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{--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);--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%;--tct-card-image-overlay-opacity:1;--tct-card-image-overlay-mix-blend-mode:normal;--tct-card-image-dot-size:0.5px;--tct-card-image-dot-spacing:2px;--tct-card-image-dot-color:rgba(128, 128, 128, 0.5);--tct-card-image-font-color:var(--t-base, #fff);--tct-card-image-text-shadow:0px 0px 1px rgba(0, 0, 0, 0.85);--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);}:host{display:flex;flex-direction:column;max-width:100%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}:host([inline]){display:inline-flex}:host(.horizontal){max-width:var(--tct-card-image-max-width, min(400px, 100%));min-width:var(--tct-card-image-min-width, 40px);width:var(--tct-card-image-width)}:host(.vertical){max-width:var(--tct-card-image-max-width, min(250px, 100%));min-width:var(--tct-card-image-min-width, 25px);width:var(--tct-card-image-width)}:host(.has-action){margin-top:22px;margin-right:22px}:host(.has-action.has-banner){margin-top:11px}:host(:hover) .card-image-container.clickable,:host(:focus-within) .card-image-container.clickable{transform:translateY(-8px) scale(1.03);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(:hover) .card-status-banner.clickable,:host(:focus-within) .card-status-banner.clickable{transform:translateY(-8px) scale(1.03)}:host([disabled]:not([disabled=false])) .card-image-container{opacity:var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([disabled]:not([disabled=false])) .card-status-banner{cursor:not-allowed}.card-wrapper>q2-btn{--const-double-focus-ring:none;width:100%;max-width:100%}.card-wrapper{position:relative;max-width:100%}.card-action{position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:5}.card-image-container{overflow:hidden;position:relative;border:1px solid transparent;background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(200, 200, 200) 33%, rgb(150, 150, 150)) border-box;background-origin:border-box;background-clip:padding-box, border-box;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))}.card-image-container.inline{display:inline-block}.card-image-container.clickable{cursor:pointer;will-change:transform;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-image-container.block{display:block}.card-image-container.horizontal{aspect-ratio:8/5;border-radius:3%/4.8%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 400px);min-width:var(--tct-card-image-min-width, 40px);flex-shrink:0}.card-image-container.vertical{aspect-ratio:5/8;border-radius:4.8%/3%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 250px);min-width:var(--tct-card-image-min-width, 25px);flex-shrink:0}.card-image,.card-image-overlay{position:absolute;inset:0;width:100%;height:100%}.card-image{z-index:1;filter:blur(var(--tct-card-image-base-blur))}.card-image-overlay{z-index:2;opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-primary{background-color:var(--tct-card-image-primary-color)}.card-image.bg-secondary{background-color:var(--tct-card-image-secondary-color)}.card-image.bg-tertiary{background-color:var(--tct-card-image-tertiary-color)}.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))}.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)}.card-image.bg-custom{background-image:var(--tct-card-image-base-url);background-size:cover;background-position:center}.card-image-overlay.bg-custom{background-image:var(--tct-card-image-overlay-url);background-size:cover;background-position:center}.card-status-banner{position:relative;z-index:4;width:fit-content;min-width:33.33%;max-width:72%;height:22px;margin:0 auto -11px;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);display:flex;align-items:center;justify-content:center}.card-status-banner.vertical{min-width:60%}.card-status-banner.clickable{cursor:pointer;transition:transform 0.3s ease}.card-status-text{font-size:14px;font-family:var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);text-transform:uppercase;white-space:nowrap}.card-status-banner.status-enabled{background-color:var(--tct-card-image-status-background-enabled);color:var(--tct-card-image-status-color-enabled)}.card-status-banner.status-disabled{background-color:var(--tct-card-image-status-background-disabled);color:var(--tct-card-image-status-color-disabled)}.card-status-banner.status-locked{background-color:var(--tct-card-image-status-background-locked);color:var(--tct-card-image-status-color-locked)}.card-status-banner.status-damaged{background-color:var(--tct-card-image-status-background-damaged);color:var(--tct-card-image-status-color-damaged)}.card-status-banner.status-lost{background-color:var(--tct-card-image-status-background-lost);color:var(--tct-card-image-status-color-lost)}.card-status-banner.status-stolen{background-color:var(--tct-card-image-status-background-stolen);color:var(--tct-card-image-status-color-stolen)}.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)}.card-status-banner.status-digital{background-color:var(--tct-card-image-status-background-digital);color:var(--tct-card-image-status-color-digital)}.card-details-wrapper{container-type:inline-size;position:relative;z-index:3;height:calc(100% + 2px);width:calc(100% + 2px);margin-left:-1px;margin-top:-1px}.card-text{color:var(--tct-card-image-font-color);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-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card-details-horizontal{padding:2.5cqw;height:100%;width:100%;overflow:hidden}.horizontal-logo-wrapper{padding:0 1.25cqw;margin:1.25cqw 0 2.5cqw 0;width:70cqw;height:11.25cqw}.horizontal-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:left center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 2.5cqw 0);width:100%;height:100%}.horizontal-chip{width:15cqw;height:10cqw;margin-left:8.75cqw}.horizontal-chip img{display:block;width:100%;height:100%;object-fit:contain}.horizontal-card-number{padding-top:2.5cqw;text-align:left;font-size:5cqw;height:7.5cqw;width:85cqw;margin-left:5cqw}.horizontal-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:10cqw;margin:1.25cqw 0}.horizontal-exp-date-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:25cqw;height:100%;margin-left:1.25cqw}.horizontal-exp-date-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-exp-date-value{font-size:3.5cqw}.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));margin-right:var(--tct-card-image-type-margin-right, 4.15cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10.1cqw)}.horizontal-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 1.25cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.horizontal-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 0.09cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -6.25cqw)}.horizontal-card-holder-vendor-row{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.horizontal-card-holder-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:73.75cqw;height:10cqw;padding:0 1.25cqw;margin-right:1.25cqw;min-width:0}.horizontal-card-holder-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-card-holder-value{font-size:4.5cqw}.horizontal-vendor{width:20cqw;height:12.5cqw;flex-shrink:0}.horizontal-vendor img{display:block;width:100%;height:100%;object-fit:contain}.card-details-vertical{position:relative;z-index:3;padding:4cqw;height:100%;width:100%;overflow:hidden}.vertical-chip{width:16cqw;height:24cqw;margin:12cqw 0 30cqw 46cqw}.vertical-chip img{display:block;width:100%;height:100%;object-fit:contain}.vertical-logo-wrapper{padding:0 2cqw;margin-bottom:4cqw;width:100%;height:18cqw}.vertical-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:center center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 4cqw 0);width:100%;height:100%}.vertical-card-number{text-align:left;font-size:8cqw;height:12cqw;width:100%;padding:0 2cqw}.vertical-card-holder-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:16cqw;padding:0 2cqw;min-width:0}.vertical-card-holder-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-card-holder-value{font-size:7.2cqw}.vertical-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:16cqw}.vertical-exp-date-wrapper{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:40cqw;height:100%;margin-left:2cqw;padding-bottom:2cqw}.vertical-exp-date-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-exp-date-value{font-size:5.6cqw}.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));margin-right:var(--tct-card-image-type-margin-right, 3cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -19cqw)}.vertical-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 2cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.vertical-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 0.05625cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10cqw)}.vertical-vendor-row{display:flex;justify-content:end}.vertical-vendor{width:32cqw;height:20cqw;flex-shrink:0}.vertical-vendor img{display:block;width:100%;height:100%;object-fit:contain}';
+    return '*{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{--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);--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%;--tct-card-image-overlay-opacity:1;--tct-card-image-overlay-mix-blend-mode:normal;--tct-card-image-dot-size:0.5px;--tct-card-image-dot-spacing:2px;--tct-card-image-dot-color:rgba(128, 128, 128, 0.5);--tct-card-image-font-color:var(--t-base, #fff);--tct-card-image-text-shadow:0px 0px 1px rgba(0, 0, 0, 0.85);--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);}:host{display:flex;flex-direction:column;max-width:100%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}:host([inline]){display:inline-flex}:host(.horizontal){max-width:var(--tct-card-image-max-width, min(400px, 100%));min-width:var(--tct-card-image-min-width, 40px);width:var(--tct-card-image-width)}:host(.vertical){max-width:var(--tct-card-image-max-width, min(250px, 100%));min-width:var(--tct-card-image-min-width, 25px);width:var(--tct-card-image-width)}:host(.has-action){margin-top:22px;margin-right:22px}:host(.has-action.has-banner){margin-top:11px}:host(:hover) .card-image-container.clickable,:host(:focus-within) .card-image-container.clickable{transform:translateY(-8px) scale(1.03);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(:hover) .card-status-banner.clickable,:host(:focus-within) .card-status-banner.clickable{transform:translateY(-8px) scale(1.03)}:host([disabled]:not([disabled=false])) .card-image-container{opacity:var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([disabled]:not([disabled=false])) .card-status-banner{cursor:not-allowed}.card-wrapper>q2-btn{--const-double-focus-ring:none;--tct-btn-min-height-medium:0;--tct-btn-padding-size-medium:0;--tct-btn-font-size-medium:inherit;width:100%;max-width:100%}.card-wrapper{position:relative;max-width:100%}.card-action{position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:5}.card-image-container{overflow:hidden;position:relative;border:1px solid transparent;background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(200, 200, 200) 33%, rgb(150, 150, 150)) border-box;background-origin:border-box;background-clip:padding-box, border-box;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))}.card-image-container.inline{display:inline-block}.card-image-container.clickable{cursor:pointer;will-change:transform;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-image-container.block{display:block}.card-image-container.horizontal{aspect-ratio:8/5;border-radius:3%/4.8%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 400px);min-width:var(--tct-card-image-min-width, 40px);flex-shrink:0}.card-image-container.vertical{aspect-ratio:5/8;border-radius:4.8%/3%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 250px);min-width:var(--tct-card-image-min-width, 25px);flex-shrink:0}.card-image,.card-image-overlay{position:absolute;inset:0;width:100%;height:100%}.card-image{z-index:1;filter:blur(var(--tct-card-image-base-blur))}.card-image-overlay{z-index:2;opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-primary{background-color:var(--tct-card-image-primary-color)}.card-image.bg-secondary{background-color:var(--tct-card-image-secondary-color)}.card-image.bg-tertiary{background-color:var(--tct-card-image-tertiary-color)}.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))}.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)}.card-image.bg-custom{background-image:var(--tct-card-image-base-url);background-size:cover;background-position:center}.card-image-overlay.bg-custom{background-image:var(--tct-card-image-overlay-url);background-size:cover;background-position:center}.card-status-banner{position:relative;z-index:4;width:fit-content;min-width:33.33%;max-width:72%;height:22px;margin:0 auto -11px;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);display:flex;align-items:center;justify-content:center}.card-status-banner.vertical{min-width:60%}.card-status-banner.clickable{cursor:pointer;transition:transform 0.3s ease}.card-status-text{font-size:14px;font-family:var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);text-transform:uppercase;white-space:nowrap}.card-status-banner.status-enabled{background-color:var(--tct-card-image-status-background-enabled);color:var(--tct-card-image-status-color-enabled)}.card-status-banner.status-disabled{background-color:var(--tct-card-image-status-background-disabled);color:var(--tct-card-image-status-color-disabled)}.card-status-banner.status-locked{background-color:var(--tct-card-image-status-background-locked);color:var(--tct-card-image-status-color-locked)}.card-status-banner.status-damaged{background-color:var(--tct-card-image-status-background-damaged);color:var(--tct-card-image-status-color-damaged)}.card-status-banner.status-lost{background-color:var(--tct-card-image-status-background-lost);color:var(--tct-card-image-status-color-lost)}.card-status-banner.status-stolen{background-color:var(--tct-card-image-status-background-stolen);color:var(--tct-card-image-status-color-stolen)}.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)}.card-status-banner.status-digital{background-color:var(--tct-card-image-status-background-digital);color:var(--tct-card-image-status-color-digital)}.card-details-wrapper{container-type:inline-size;position:relative;z-index:3;height:calc(100% + 2px);width:calc(100% + 2px);margin-left:-1px;margin-top:-1px}.card-text{color:var(--tct-card-image-font-color);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-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card-details-horizontal{padding:2.5cqw;height:100%;width:100%;overflow:hidden}.horizontal-logo-wrapper{padding:0 1.25cqw;margin:1.25cqw 0 2.5cqw 0;width:70cqw;height:11.25cqw}.horizontal-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:left center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 2.5cqw 0);width:100%;height:100%}.horizontal-chip{width:15cqw;height:10cqw;margin-left:8.75cqw}.horizontal-chip img{display:block;width:100%;height:100%;object-fit:contain}.horizontal-card-number{padding-top:2.5cqw;text-align:left;font-size:5cqw;height:7.5cqw;width:85cqw;margin-left:5cqw}.horizontal-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:10cqw;margin:1.25cqw 0}.horizontal-exp-date-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:25cqw;height:100%;margin-left:1.25cqw}.horizontal-exp-date-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-exp-date-value{font-size:3.5cqw}.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));margin-right:var(--tct-card-image-type-margin-right, 4.15cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10.1cqw)}.horizontal-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 1.25cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.horizontal-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 0.09cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -6.25cqw)}.horizontal-card-holder-vendor-row{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.horizontal-card-holder-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:73.75cqw;height:10cqw;padding:0 1.25cqw;margin-right:1.25cqw;min-width:0}.horizontal-card-holder-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-card-holder-value{font-size:4.5cqw}.horizontal-vendor{width:20cqw;height:12.5cqw;flex-shrink:0}.horizontal-vendor img{display:block;width:100%;height:100%;object-fit:contain}.card-details-vertical{position:relative;z-index:3;padding:4cqw;height:100%;width:100%;overflow:hidden}.vertical-chip{width:16cqw;height:24cqw;margin:12cqw 0 30cqw 46cqw}.vertical-chip img{display:block;width:100%;height:100%;object-fit:contain}.vertical-logo-wrapper{padding:0 2cqw;margin-bottom:4cqw;width:100%;height:18cqw}.vertical-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:center center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 4cqw 0);width:100%;height:100%}.vertical-card-number{text-align:left;font-size:8cqw;height:12cqw;width:100%;padding:0 2cqw}.vertical-card-holder-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:16cqw;padding:0 2cqw;min-width:0}.vertical-card-holder-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-card-holder-value{font-size:7.2cqw}.vertical-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:16cqw}.vertical-exp-date-wrapper{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:40cqw;height:100%;margin-left:2cqw;padding-bottom:2cqw}.vertical-exp-date-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-exp-date-value{font-size:5.6cqw}.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));margin-right:var(--tct-card-image-type-margin-right, 3cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -19cqw)}.vertical-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 2cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.vertical-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 0.05625cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10cqw)}.vertical-vendor-row{display:flex;justify-content:end}.vertical-vendor{width:32cqw;height:20cqw;flex-shrink:0}.vertical-vendor img{display:block;width:100%;height:100%;object-fit:contain}';
   }
 }, [ 257, "q2-card-image", {
-  accessibilityLabel: [ 1, "accessibility-label" ],
   background: [ 513 ],
   cardHolder: [ 1, "card-holder" ],
   cardHolderLabel: [ 4, "card-holder-label" ],
@@ -442,6 +444,7 @@ const h =  t(class extends a {
   orientation: [ 1 ],
   overlay: [ 513 ],
   statusTextOverride: [ 1, "status-text-override" ],
+  tctAriaLabel: [ 1, "tct-aria-label" ],
   vendor: [ 513 ],
   vendorColor: [ 1, "vendor-color" ],
   vendorLogo: [ 1, "vendor-logo" ],

package/dist/components/q2-card.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as a, HTMLElement as t, createEvent as r, h as c, Fragment as o, transformTag as e } from "@stencil/core/internal/client";
+import { proxyCustomElement as a, HTMLElement as r, createEvent as t, h as c, Fragment as o, transformTag as e } from "@stencil/core/internal/client";
 
 import { o as i, i as n } from "./index2.js";
 
@@ -8,10 +8,10 @@ import { d } from "./q2-avatar2.js";
 
 import { d as l } from "./q2-icon2.js";
 
-const p = [ "primary", "secondary", "tertiary", "info", "success", "warning", "alert", "accent-1", "accent-2", "accent-3", "accent-4", "accent-5", "accent-6", "accent-7", "accent-8", "accent-9", "accent-10", "accent-11", "accent-12" ], v =  a(class extends t {
+const p = [ "primary", "secondary", "tertiary", "info", "success", "warning", "alert", "accent-1", "accent-2", "accent-3", "accent-4", "accent-5", "accent-6", "accent-7", "accent-8", "accent-9", "accent-10", "accent-11", "accent-12" ], v =  a(class extends r {
   constructor(a) {
-    super(), !1 !== a && this.__registerHost(), this.__attachShadow(), this.click = r(this, "click", 7), 
-    this.tctClick = r(this, "tctClick", 7), 
+    super(), !1 !== a && this.__registerHost(), this.__attachShadow(), this.click = t(this, "click", 7), 
+    this.tctClick = t(this, "tctClick", 7), 
     /**
          * The size of the box-shadow applied to the component, giving it a sense of depth.
          *
@@ -34,8 +34,8 @@ const p = [ "primary", "secondary", "tertiary", "info", "success", "warning", "a
     this.avatarElement = null, this.clickableElement = null, this.containerElement = null;
   }
   componentDidLoad() {
-    const {hostElement: a, clickableElement: t} = this;
-    a.click = () => t.click(), i(this.hostElement);
+    const {hostElement: a, clickableElement: r} = this;
+    a.click = () => r.click(), i(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -45,21 +45,21 @@ const p = [ "primary", "secondary", "tertiary", "info", "success", "warning", "a
   // #endregion
   // #region Local Methods
   generateAvatar() {
-    const {avatarName: a, avatarInitials: t, avatarSrc: r, avatarIcon: o} = this;
+    const {avatarName: a, avatarInitials: r, avatarSrc: t, avatarIcon: o} = this;
     return o ? c("q2-icon", {
       type: o,
       ref: a => this.avatarElement = a,
       "test-id": "avatar"
-    }) : a || t || r ? c("q2-avatar", {
+    }) : a || r || t ? c("q2-avatar", {
       name: a,
-      initials: t,
-      src: r,
+      initials: r,
+      src: t,
       ref: a => this.avatarElement = a,
       "test-id": "avatar"
     }) : void 0;
   }
   generateContainerClasses() {
-    const {isSmall: a, avatarName: t, avatarInitials: r, avatarSrc: c, avatarIcon: o, isStatic: e, type: i, elevation: n} = this, s = [ "container", i ], d = t || r || c || o;
+    const {isSmall: a, avatarName: r, avatarInitials: t, avatarSrc: c, avatarIcon: o, isStatic: e, type: i, elevation: n} = this, s = [ "container", i ], d = r || t || c || o;
     return a && s.push("is-small"), d && s.push("has-avatar"), e && s.push("is-static"), 
     !e && n && n > 0 && s.push("elevation-" + n), s.join(" ");
   }
@@ -97,8 +97,8 @@ const p = [ "primary", "secondary", "tertiary", "info", "success", "warning", "a
   // #endregion
   // #region Render Methods
   render() {
-    const {url: a, isStatic: t, type: r} = this;
-    return t || "non-clickable" === r ? c("div", {
+    const {url: a, isStatic: r, type: t} = this;
+    return r || "non-clickable" === t ? c("div", {
       ref: a => this.clickableElement = a,
       class: this.generateContainerClasses(),
       "test-id": "clickableElement"
@@ -122,7 +122,7 @@ const p = [ "primary", "secondary", "tertiary", "info", "success", "warning", "a
     return this;
   }
   static get style() {
-    return "*{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}.container{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--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)));position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;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);background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));backdrop-filter:var(--tct-card-backdrop-filter, none);padding:var(--comp-card-padding);text-decoration:none;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:var(--tct-card-overflow, auto);max-height:var(--tct-card-max-height, none);box-shadow:var(--comp-card-shadow), 0 0 0 rgba(0, 0, 0, 0)}.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)}.container.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable{cursor:pointer}.container.clickable:hover.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-hover-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-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)))}.container.clickable:hover.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-hover-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-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)))}.container.clickable:active.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-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)))}.container.clickable:active.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-active-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-active-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-active-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:focus-visible{--comp-focus-visible-shadow:var(--comp-card-shadow), var(--const-double-focus-ring);box-shadow:var(--tct-card-focus-visible-box-shadow, var(--comp-focus-visible-shadow))}.container.is-static{cursor:auto;background:var(--tct-card-static-background, var(--tct-card-background, none));color:var(--tct-card-static-font-color, var(--tct-card-color, var(--t-text, #4d4d4d)));backdrop-filter:none;border-radius:0;border:0;text-decoration:initial;padding:0}:host([bar]) .container.is-static{padding-left:var(--comp-card-padding)}.container.is-static,.container.is-static:hover,.container.is-static:active{box-shadow:none}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));line-height:var(--tct-card-title-line-height, var(--app-line-height, 1.428571429em));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical;font-size:var(--tct-card-description-font-size, inherit);line-height:var(--tct-card-description-line-height, var(--app-line-height, 1.428571429em))}.bar{position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}";
+    return "*{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}.container{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--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)));position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, inherit)));backdrop-filter:var(--tct-card-backdrop-filter);background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));backdrop-filter:var(--tct-card-backdrop-filter, none);padding:var(--comp-card-padding);text-decoration:none;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:var(--tct-card-overflow, auto);max-height:var(--tct-card-max-height, none);box-shadow:var(--comp-card-shadow), 0 0 0 rgba(0, 0, 0, 0)}.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)}.container.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable{cursor:pointer}.container.clickable:hover.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-hover-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-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)))}.container.clickable:hover.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-hover-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-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)))}.container.clickable:active.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-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)))}.container.clickable:active.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-active-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-active-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-active-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:focus-visible{--comp-focus-visible-shadow:var(--comp-card-shadow), var(--const-double-focus-ring);box-shadow:var(--tct-card-focus-visible-box-shadow, var(--comp-focus-visible-shadow))}.container.is-static{cursor:auto;background:var(--tct-card-static-background, var(--tct-card-background, none));color:var(--tct-card-static-font-color, var(--tct-card-color, inherit));backdrop-filter:none;border-radius:0;border:0;text-decoration:initial;padding:0}:host([bar]) .container.is-static{padding-left:var(--comp-card-padding)}.container.is-static,.container.is-static:hover,.container.is-static:active{box-shadow:none}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));line-height:var(--tct-card-title-line-height, var(--app-line-height, 1.428571429em));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical;font-size:var(--tct-card-description-font-size, inherit);line-height:var(--tct-card-description-line-height, var(--app-line-height, 1.428571429em))}.bar{position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}";
   }
 }, [ 257, "q2-card", {
   avatarIcon: [ 513, "avatar-icon" ],

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

@@ -3128,7 +3128,7 @@ const Be =  t(class extends e {
     };
   }
   static get style() {
-    return "*{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{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container:focus-visible{box-shadow:var(--tct-chart-donut-focus-visible-box-shadow, var(--const-double-focus-ring))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);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-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{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)));border-radius:50%}.center-card{height:100%;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;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%}.center-card:is(button){cursor:pointer;background:var(--tct-chart-donut-button-background, transparent);border:0}.center-card:is(button):hover{background:var(--tct-chart-donut-button-hover-background, transparent)}.center-card:is(button):active{background:var(--tct-chart-donut-button-active-background, transparent)}.center-card:is(button):focus-visible{background:var(--tct-chart-donut-button-focus-background, transparent)}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
+    return "*{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{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container:focus-visible{box-shadow:var(--tct-chart-donut-focus-visible-box-shadow, var(--const-double-focus-ring))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);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-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{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)));border-radius:50%}.center-card{height:100%;width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, inherit));margin-inline:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%}.center-card:is(button){cursor:pointer;background:var(--tct-chart-donut-button-background, transparent);border:0}.center-card:is(button):hover{background:var(--tct-chart-donut-button-hover-background, transparent)}.center-card:is(button):active{background:var(--tct-chart-donut-button-active-background, transparent)}.center-card:is(button):focus-visible{background:var(--tct-chart-donut-button-focus-background, transparent)}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
   }
 }, [ 1, "q2-chart-donut", {
   chartName: [ 513, "chart-name" ],

package/dist/components/q2-checkbox2.js

@@ -23,7 +23,7 @@ const b =  e(class extends o {
       if (this.disabled || this.readonly || this.slotReadonly) return;
       if (!(e.target instanceof HTMLInputElement)) return;
       const {value: o, checked: t} = e.target;
-      k(this, [ "change", "tctChange" ], {
+      this.checked = t, k(this, [ "change", "tctChange" ], {
         value: o,
         checked: t
       }), this.inputElement.focus();
@@ -208,10 +208,10 @@ const b =  e(class extends o {
     const e = [ "container" ], o = [ "label-text" ];
     return this.hasDescription && e.push("has-description"), this.hasMultilineLabel && e.push("has-multiline-label"), 
     this.hideLabel && o.push("sr"), c("div", {
-      key: "071518056d28c0c4d0693a202d554bc456d046cf",
+      key: "0dff5141bf9fd0eb9b9d92f55c80b046a8224bad",
       class: e.join(" ")
     }, c("input", {
-      key: "ad8a499e028c52c59610fff14f5149fde9afdbc6",
+      key: "ac0565c29bcb4b2e29403215ceb5fc0221578209",
       ref: e => this.inputElement = e,
       "aria-describedby": this.hasDescription ? "description" : void 0,
       "aria-invalid": void 0 === this.hasError ? void 0 : `${this.hasError}`,
@@ -226,42 +226,42 @@ const b =  e(class extends o {
       type: "checkbox",
       value: this.value
     }), c("label", {
-      key: "073cb174831c555ec1ec4a4dc951393a9767b731",
+      key: "56684f4fb63b0f6d136e69420f2e632a807ab03a",
       htmlFor: this._id,
       class: "label-control",
       "test-id": "checkboxButton",
       "aria-hidden": "true"
     }, this.renderCheckboxSVG()), c("div", {
-      key: "75feec3b0db261773e26788e4a000d49522efbbb",
+      key: "4f40ff7c46337d002e3097e849e8a6d163271787",
       class: o.join(" "),
       ref: e => this.labelTextElement = e
     }, c("label", {
-      key: "551c209e99da0fe58fcf73b8cb0350230133500b",
+      key: "3d9803210e8462137d28205891762da8a9fa19cd",
       "test-id": "checkboxLabel",
       htmlFor: this._id,
       id: this.labelId
     }, c("div", {
-      key: "af6e9d20ae62270abb3e860024705780cc02d824",
+      key: "de644e9efa49bfb2c84400d4f748678f1724786d",
       class: "label-content"
     }, d(this.label), c("slot", {
-      key: "81a79439a4503ee2d0820985ad05a915ec6d8864",
+      key: "f537a700ad48155f2896ae1880fcfdc4f1e60226",
       onSlotchange: this.queueLabelLayoutUpdate
     }), c("slot", {
-      key: "d86de89110f4bba45ff40e998ef115256c544056",
+      key: "184d686720af904c8f5cda2d4508cd07add7b1bf",
       name: "label",
       onSlotchange: this.queueLabelLayoutUpdate
     })))), this._tooltip && c("span", {
-      key: "d3819c91a4c7ddf4d93f2da0050dbace7b1854d7",
+      key: "05a8eacb9150b56ce30183561c72b0c607c60c8c",
       id: this.tooltipId,
       class: "sr",
       "test-id": "checkboxTooltipText"
     }, this._tooltip), this.hasDescription && c("div", {
-      key: "9cdf914b053273605322cb9125544ee119a18aec",
+      key: "7b06216cede51eb0bc13932ed17e3237854c1316",
       class: "description-text",
       "test-id": "checkboxDescription",
       id: "description"
     }, d(this.description), c("slot", {
-      key: "87fa1308868d32ca5c912ca57a7111f12d30a83b",
+      key: "723ac0aa53756d0bd9f06e7bb2a1231056cdca50",
       name: "description"
     })));
   }

package/dist/components/q2-currency.js

@@ -159,7 +159,7 @@ const n =  t(class extends e {
     };
   }
   static get style() {
-    return "*{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:inline-block}.currency{--comp-currency-color:var(--tct-currency-color, var(--t-text, #4d4d4d));color:var(--comp-currency-color);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency.positive{color:var(--tct-currency-positive-color, var(--comp-currency-color))}.currency.negative{color:var(--tct-currency-negative-color, var(--comp-currency-color))}.currency.debit.positive{color:var(--tct-currency-debit-positive-color, var(--const-stoplight-success, #0e8a00))}.currency.debit.negative{color:var(--tct-currency-debit-negative-color, var(--const-stoplight-alert, #d20a0a))}.currency.credit.positive{color:var(--tct-currency-credit-positive-color, var(--const-stoplight-alert, #d20a0a))}.currency.credit.negative{color:var(--tct-currency-credit-negative-color, var(--const-stoplight-success, #0e8a00))}.currency.masked{line-height:1}.currency.masked.positive{background:var(--tct-currency-masked-positive-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.currency.masked.negative{background:var(--tct-currency-masked-negative-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, 0.5em);font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 0.5em);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 0.5em);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";
+    return "*{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:inline-block}.currency{--comp-currency-color:var(--tct-currency-color, inherit);color:var(--comp-currency-color);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency.positive{color:var(--tct-currency-positive-color, var(--comp-currency-color))}.currency.negative{color:var(--tct-currency-negative-color, var(--comp-currency-color))}.currency.debit.positive{color:var(--tct-currency-debit-positive-color, var(--const-stoplight-success, #0e8a00))}.currency.debit.negative{color:var(--tct-currency-debit-negative-color, var(--const-stoplight-alert, #d20a0a))}.currency.credit.positive{color:var(--tct-currency-credit-positive-color, var(--const-stoplight-alert, #d20a0a))}.currency.credit.negative{color:var(--tct-currency-credit-negative-color, var(--const-stoplight-success, #0e8a00))}.currency.masked{line-height:1}.currency.masked.positive{background:var(--tct-currency-masked-positive-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.currency.masked.negative{background:var(--tct-currency-masked-negative-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, 0.5em);font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 0.5em);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 0.5em);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";
   }
 }, [ 1, "q2-currency", {
   amount: [ 514 ],

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

@@ -83,7 +83,7 @@ const m =  t(class extends e {
         row: s,
         rows: c,
         allSelected: n
-      }).defaultPrevented || (this.serializedRows = this.serializedRows.map((t => t.id === s.id ? s : t)), 
+      }).defaultPrevented ? t.target && (t.target.checked = e.selected) : (this.serializedRows = this.serializedRows.map((t => t.id === s.id ? s : t)), 
       this.allRowsSelected = n, this.someRowsSelected = i);
     }, this.onSort = t => {
       const e = "ASC" === t.sorted ? "DESC" : "ASC", a = t.key;
@@ -337,12 +337,12 @@ const m =  t(class extends e {
   render() {
     const {caption: t} = this;
     return o("div", {
-      key: "ce5dfe7dc753ee2f2a8419e742bf4afef6eccdb0",
+      key: "9f2281aae60f873a2755db7ed67aaab73c79f499",
       class: "container"
     }, o("table", {
-      key: "f899c9959a20da0dec2d4b9011e01af4f2c05a49"
+      key: "2d057320dad36ea04d1037546ef2b9a8135b0a08"
     }, t && o("caption", {
-      key: "1e8d106a6524baf6d228003907d48b7515dc0561",
+      key: "2b4ae6daf2d2f3c75e1819166cf758b5ff5f3ab4",
       class: this.hideCaption ? "sr" : void 0
     }, t), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows()));
   }

package/dist/components/q2-detail.js

@@ -101,7 +101,7 @@ const s =  t(class extends e {
     };
   }
   static get style() {
-    return "*{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}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.detail-stacked-alignment-center{align-items:center}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, #141430)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-label-xsmall-font-size, 14px);font-weight:var(--tct-detail-label-xsmall-font-weight, 400)}.label-size-small{color:var(--tct-detail-label-small-font-color);font-size:var(--tct-detail-label-small-font-size, 14px);font-weight:var(--tct-detail-label-small-font-weight, 400)}.label-size-medium{color:var(--tct-detail-label-medium-font-color);font-size:var(--tct-detail-label-medium-font-size, 14px);font-weight:var(--tct-detail-label-medium-font-weight, 400)}.label-size-large{color:var(--tct-detail-label-large-font-color);font-size:var(--tct-detail-label-large-font-size, 16px);font-weight:var(--tct-detail-label-large-font-weight, 400)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color);font-size:var(--tct-detail-label-xlarge-font-size, 18px);font-weight:var(--tct-detail-label-xlarge-font-weight, 400)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);font-weight:var(--tct-detail-label-inline-font-weight, 400);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, #141430);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-description-xsmall-font-size, 14px);font-weight:var(--tct-detail-description-xsmall-font-weight, 400)}.description-size-small{color:var(--tct-detail-description-small-font-color);font-size:var(--tct-detail-description-small-font-size, 14px);font-weight:var(--tct-detail-description-small-font-weight, 400)}.description-size-medium{color:var(--tct-detail-description-medium-font-color);font-size:var(--tct-detail-description-medium-font-size, 24px);font-weight:var(--tct-detail-description-medium-font-weight, 600)}.description-size-large{color:var(--tct-detail-description-large-font-color);font-size:var(--tct-detail-description-large-font-size, 28px);font-weight:var(--tct-detail-description-large-font-weight, 600)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color);font-size:var(--tct-detail-description-xlarge-font-size, 32px);font-weight:var(--tct-detail-description-xlarge-font-weight, 700)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
+    return "*{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}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.detail-stacked-alignment-center{align-items:center}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, inherit)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, var(--tct-detail-label-font-color, inherit));font-size:var(--tct-detail-label-xsmall-font-size, 14px);font-weight:var(--tct-detail-label-xsmall-font-weight, 400)}.label-size-small{color:var(--tct-detail-label-small-font-color, var(--tct-detail-label-font-color, inherit));font-size:var(--tct-detail-label-small-font-size, 14px);font-weight:var(--tct-detail-label-small-font-weight, 400)}.label-size-medium{color:var(--tct-detail-label-medium-font-color, var(--tct-detail-label-font-color, inherit));font-size:var(--tct-detail-label-medium-font-size, 14px);font-weight:var(--tct-detail-label-medium-font-weight, 400)}.label-size-large{color:var(--tct-detail-label-large-font-color, var(--tct-detail-label-font-color, inherit));font-size:var(--tct-detail-label-large-font-size, 16px);font-weight:var(--tct-detail-label-large-font-weight, 400)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color, var(--tct-detail-label-font-color, inherit));font-size:var(--tct-detail-label-xlarge-font-size, 18px);font-weight:var(--tct-detail-label-xlarge-font-weight, 400)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);font-weight:var(--tct-detail-label-inline-font-weight, 400);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, inherit);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, var(--tct-detail-description-font-color, inherit));font-size:var(--tct-detail-description-xsmall-font-size, 14px);font-weight:var(--tct-detail-description-xsmall-font-weight, 400)}.description-size-small{color:var(--tct-detail-description-small-font-color, var(--tct-detail-description-font-color, inherit));font-size:var(--tct-detail-description-small-font-size, 14px);font-weight:var(--tct-detail-description-small-font-weight, 400)}.description-size-medium{color:var(--tct-detail-description-medium-font-color, var(--tct-detail-description-font-color, inherit));font-size:var(--tct-detail-description-medium-font-size, 24px);font-weight:var(--tct-detail-description-medium-font-weight, 600)}.description-size-large{color:var(--tct-detail-description-large-font-color, var(--tct-detail-description-font-color, inherit));font-size:var(--tct-detail-description-large-font-size, 28px);font-weight:var(--tct-detail-description-large-font-weight, 600)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color, var(--tct-detail-description-font-color, inherit));font-size:var(--tct-detail-description-xlarge-font-size, 32px);font-weight:var(--tct-detail-description-xlarge-font-weight, 700)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
   }
 }, [ 257, "q2-detail", {
   align: [ 1537 ],

package/dist/components/q2-dropdown.js

@@ -180,7 +180,7 @@ const x =  t(class extends e {
   // #endregion
   // #region Local Methods
   get determineDropdownItemCount() {
-    return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;
+    return this.hostElement.querySelectorAll(`${this.dropdownItemSelector}, ${this.optionSelector}`).length;
   }
   get hasCustomControl() {
     return !!this.hostElement.querySelector("[slot=control]");
@@ -264,12 +264,12 @@ const x =  t(class extends e {
   render() {
     const t = this.toggleButtonProps;
     return o("click-elsewhere", {
-      key: "1fb0465b5d0a0228c12e53161f795e9039c3e482",
+      key: "27e7a560b21894fb10175be18c9cb07e37f59db3",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
     }, o("q2-btn", {
-      key: "ca2afb3f037229568969431724617e82f817d892",
+      key: "b53dace27e75fdbcd87a1689470a1466ad9e07d3",
       tabIndex: 0,
       ref: t => this.controlElement = t,
       class: t.className,
@@ -297,7 +297,7 @@ const x =  t(class extends e {
     }, c(this.label)), this.icon ? o("q2-icon", {
       type: this.icon
     }) : " ")), o("q2-popover", {
-      key: "5e65c0527e6f3950c1d02df536f336c2f5a63fed",
+      key: "4a15e7d6d8f474c8464e39e35437cd8edcc9487d",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
@@ -309,10 +309,10 @@ const x =  t(class extends e {
       mode: this.popoverMode || void 0,
       block: this.block
     }, o("slot", {
-      key: "6304f30a52d2a72359d78aef3ae1983560d8ad97",
+      key: "7854254650f81b8d5a229acbec55aa8beab36882",
       name: "popover-top"
     }), o("q2-option-list", {
-      key: "b4eee650726da0455eb8fe625f78b6bdcd4a6418",
+      key: "a38c9411306ad8d39456dce81bb50e9af13bf1f6",
       onPopoverState: this.onPopoverState,
       id: "option-list",
       ref: t => this.optionList = t,
@@ -320,9 +320,9 @@ const x =  t(class extends e {
       label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": !0
     }, o("slot", {
-      key: "29e19ea60b40e3b52025c67161030000d2723a20"
+      key: "7472127d019366f76eff86cd744d050d197b25c1"
     })), o("slot", {
-      key: "d9497a3f4f0d2f9624af5628d6a304d954f5461e",
+      key: "5af670e8f5ed273175100ddc9202c44e2c06f7b3",
       name: "popover-bottom"
     })));
   }

package/dist/components/q2-editable-field.js

@@ -32,7 +32,8 @@ const f =  t(class extends e {
       null == t || t.stopPropagation(), h(this, [ "change", "tctChange" ], {
         editing: !1,
         name: "cancel"
-      }), this.inputElement.setValue(this.defaultValue);
+      }), this.innerValue = void 0, this.formattedValue = void 0, this.inputElement.value = "", 
+      this.inputElement.value = this.defaultValue;
     }, this.editClick = t => {
       null == t || t.stopPropagation(), h(this, [ "change", "tctChange" ], {
         editing: !0,
@@ -50,7 +51,7 @@ const f =  t(class extends e {
     this.saveClick = t => {
       t && t.stopPropagation();
       const e = this.hostElement.shadowRoot.querySelector("q2-input").value;
-      this.defaultValue = e, h(this, [ "change", "tctChange" ], {
+      h(this, [ "change", "tctChange" ], {
         editing: !1,
         name: "save",
         value: this.innerValue || e,
@@ -149,6 +150,9 @@ const f =  t(class extends e {
     const {editing: t, hasErrors: e} = this, i = this.hostElement.shadowRoot.activeElement;
     !("Q2-INPUT" === (null == i ? void 0 : i.tagName)) && i && t && e && this.inputElement.focus();
   }
+  valueObserver(t) {
+    this.defaultValue = t;
+  }
   // #endregion
   // #region Local Methods
   get hasErrors() {
@@ -248,7 +252,7 @@ const f =  t(class extends e {
   // #region Render Methods
   render() {
     return s("div", {
-      key: "bd5759fc666e43c948cf4826e2075ba5566038cc"
+      key: "8231300cc04b5b2dce65d3c39ef2e4c0bc892696"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {
@@ -264,6 +268,9 @@ const f =  t(class extends e {
       } ],
       errors: [ {
         errorsObserver: 0
+      } ],
+      value: [ {
+        valueObserver: 0
       } ]
     };
   }
@@ -299,10 +306,13 @@ const f =  t(class extends e {
   } ],
   errors: [ {
     errorsObserver: 0
+  } ],
+  value: [ {
+    valueObserver: 0
   } ]
 } ]);
 
-const g = f, defineCustomElement = function() {
+const v = f, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-editable-field", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading" ].forEach((t => {
     switch (t) {
@@ -332,4 +342,4 @@ const g = f, defineCustomElement = function() {
   }));
 };
 
-export { g as Q2EditableField, defineCustomElement }
+export { v as Q2EditableField, defineCustomElement }