q2-tecton-elements 1.71.2 → 1.72.0

package/dist/components/q2-popover2.js

@@ -47,12 +47,12 @@ const h =  o(class extends t {
         bottom: 0,
         left: 0,
         right: 0
-      }, u = m, w = (null === (i = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === i ? void 0 : i.width) - v, b = s(e), g = b ? 0 : window.scrollX, f = b ? 0 : window.scrollY;
-      r.style.setProperty("--comp-pop-position", b ? "fixed" : "absolute"), "right" === c ? (r.style.setProperty("--comp-pop-right", w - g + "px"), 
-      r.style.setProperty("--comp-pop-left", "unset")) : (r.style.setProperty("--comp-pop-left", `${u + g}px`), 
+      }, u = m, w = (null === (i = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === i ? void 0 : i.width) - v, g = s(e), b = g ? 0 : window.scrollX, f = g ? 0 : window.scrollY;
+      r.style.setProperty("--comp-pop-position", g ? "fixed" : "absolute"), "right" === c ? (r.style.setProperty("--comp-pop-right", w - b + "px"), 
+      r.style.setProperty("--comp-pop-left", "unset")) : (r.style.setProperty("--comp-pop-left", `${u + b}px`), 
       r.style.setProperty("--comp-pop-right", "unset")), this.block && r.style.setProperty("--comp-pop-width", `${(null == e ? void 0 : e.offsetWidth) || 0}px`);
       const x = l && a(this.hostElement);
-      "up" === n && (l && !x ? r.style.setProperty("--comp-pop-bottom", window.innerHeight - h + "px") : r.style.setProperty("--comp-pop-bottom", window.innerHeight - h - f + "px")), 
+      "up" === n && (l && !x ? r.style.setProperty("--comp-pop-top", `${h}px`) : r.style.setProperty("--comp-pop-top", `${h + f}px`)), 
       "down" === n && (l && !x ? r.style.setProperty("--comp-pop-top", `${d}px`) : r.style.setProperty("--comp-pop-top", `${d + f}px`)), 
       // Wait for one paint to prevent layout thrashing
       await p(), this.containerElement && r.style.setProperty("--comp-pop-opacity", "1");
@@ -163,36 +163,39 @@ const h =  o(class extends t {
     this.containerElement.style.removeProperty("--comp-pop-position"));
   }
   async determinePopDirection() {
-    var o, t, i;
-    const {containerElement: e, controlElement: r, providedDirection: n, displayBuffer: s} = this;
-    if (e && (e.style.maxHeight = null), await p(), !this.containerElement) return;
-    const {isModule: l} = this, {top: c, bottom: h} = null !== (t = null === (o = null == r ? void 0 : r.getBoundingClientRect) || void 0 === o ? void 0 : o.call(r)) && void 0 !== t ? t : {
+    var o, t, i, e;
+    const {containerElement: r, controlElement: n, providedDirection: s, displayBuffer: l} = this;
+    if (r && (r.style.maxHeight = null), await p(), !this.containerElement) return;
+    const {isModule: c} = this, {top: h, bottom: d} = null !== (t = null === (o = null == n ? void 0 : n.getBoundingClientRect) || void 0 === o ? void 0 : o.call(n)) && void 0 !== t ? t : {
       top: 0,
       bottom: 0
     };
-    let d, m, v;
-    const u = l && a(this.hostElement);
-    if (l && !u) {
-      const {outletOffset: o = 0, innerHeight: t = window.innerHeight, top: e = 0, bottom: r = 0} = (null === (i = window.Tecton) || void 0 === i ? void 0 : i.platformDimensions) || {}, n = window.innerHeight - h, p = t - r - (o + h - e);
-      m = (o > 0 ? c : c + o - e) - s, v = n < p ? n - s : p - s;
-    } else d = window.innerHeight, m = c - s, v = d - h - s;
-    const w = m > v ? "up" : "down", b = !(null == e ? void 0 : e.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
+    let m, v, u;
+    const w = c && a(this.hostElement);
+    if (c && !w) {
+      const {outletOffset: o = 0, innerHeight: t = window.innerHeight, top: e = 0, bottom: r = 0} = (null === (i = window.Tecton) || void 0 === i ? void 0 : i.platformDimensions) || {}, n = window.innerHeight - d, p = t - r - (o + d - e);
+      v = (o > 0 ? h : h + o - e) - l, u = n < p ? n - l : p - l;
+    } else {
+      const {height: o = window.innerHeight, offsetTop: t = 0} = null !== (e = window.visualViewport) && void 0 !== e ? e : {};
+      m = o, v = h - t - l, u = t + m - d - l;
+    }
+    const g = v > u ? "up" : "down", b = !(null == r ? void 0 : r.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
     this.orientationChanged = !1;
-    switch (this.currentDirection || n || w) {
+    switch (this.currentDirection || s || g) {
      case "up":
-      if (b && e) {
-        const o = this.validatedMaxHeight || m, t = Math.min(m, o);
-        e.style.setProperty("--comp-pop-max-height", `${t}px`);
+      if (b && r) {
+        const o = this.validatedMaxHeight || v, t = Math.min(v, o);
+        r.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("up");
       break;
 
      case "down":
-      if (b && e) {
-        const o = this.validatedMaxHeight || v, t = Math.min(v, o);
-        e.style.setProperty("--comp-pop-max-height", `${t}px`);
+      if (b && r) {
+        const o = this.validatedMaxHeight || u, t = Math.min(u, o);
+        r.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("down");
     }
@@ -220,18 +223,18 @@ const h =  o(class extends t {
     return l() && o.push("mobile"), this.show && o.push("show"), this.block && o.push("block"), 
     "legacy" === this.mode && o.push("legacy"), "opening" === this.animationState && o.push("animating-open"), 
     "closing" === this.animationState && o.push("animating-close"), e("div", {
-      key: "4fe0c06793144eb83fe53cfc568af81226f78345",
+      key: "680ad8a90ef98d3a8c2c1f5ba2284d7cdfc3d2a6",
       ref: o => this.containerElement = o,
       class: o.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
       popover: "manual"
     }, e("div", {
-      key: "ed5d7c9f5efba8b129d580e68ab6692849332cf4",
+      key: "dfe4d6f72df0dfa029d9296e27ceb60a75131d83",
       ref: o => this.contentElement = o,
       class: "content"
     }, e("slot", {
-      key: "4c5d5b9682014b2e94b153ca33a3e0c4dd58d6bb"
+      key: "22144006d226160fe790d156255d54e24bcad8ce"
     })));
   }
   get hostElement() {
@@ -248,7 +251,7 @@ const h =  o(class extends t {
     };
   }
   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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}';
+    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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:var(--comp-pop-top);bottom:unset;translate:0 calc(-100% - var(--app-scale-2x, 10px))}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}';
   }
 }, [ 257, "q2-popover", {
   align: [ 513 ],

package/dist/components/q2-radio-group.js

@@ -1,23 +1,36 @@
-import { proxyCustomElement as t, HTMLElement as a, createEvent as o, h as e, Fragment as r, transformTag as i } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as o, createEvent as r, h as e, Fragment as i, transformTag as a } from "@stencil/core/internal/client";
 
 import { c as n, o as s, i as d, r as l } from "./index2.js";
 
-import { m as p } from "./mirror-emit.js";
+import { m as c } from "./mirror-emit.js";
 
-import { d as c } from "./q2-icon2.js";
+import { d as p } from "./q2-icon2.js";
 
-const h =  t(class extends a {
+import { d as h } from "./q2-resize-observer2.js";
+
+const u =  t(class extends o {
   constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = o(this, "change", 7), 
-    this.tctChange = o(this, "tctChange", 7), 
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = r(this, "change", 7), 
+    this.tctChange = r(this, "tctChange", 7), 
     // #region Own Properties
     this._id = "radio-group-" + n(), 
     // #endregion
+    // #region State Properties
+    this.responsiveOrientation = "vertical", 
+    // #endregion
     // #region Public Property API
     /** Determines if all radios in the group are put into a `disabled` state. */
     this.disabled = !1, 
     /** Determines if the component should display in an errant state. */
     this.hasError = !1, 
+    /** The layout direction of radio options when `tileLayout` is not enabled. */
+    this.orientation = "vertical", 
+    /**
+         * The width, in pixels, below which a horizontal non-tile layout displays vertically.
+         *
+         * @info The component determines this based on its own width, not the browser window.
+         */
+    this.orientationThreshold = 440, 
     /** Provides alignment direction for tile-style radio group. */
     this.tileAlignment = "center", this.checkedRadioExists = () => {
       // Returns first checked individual q2-radio or undefined if none are set to checked={true}
@@ -26,8 +39,11 @@ const h =  t(class extends a {
             !this.value && t ? this.value = t.value : this.value || t || 
       // if no radios are meant to be checked, then assign first radio tabIndex of 0
       this.radioElements.length && (this.radioElements[0].tabIndex = 0);
+    }, this.handleResize = t => {
+      const o = t.detail.entries[0].contentRect.width;
+      this.responsiveOrientation = o < this.orientationThreshold ? "vertical" : "horizontal";
     }, this.onInnerRadioChange = t => {
-      t.stopImmediatePropagation(), this.readonly || p(this, [ "change", "tctChange" ], {
+      t.stopImmediatePropagation(), this.readonly || c(this, [ "change", "tctChange" ], {
         value: t.detail.value
       });
     }, this.onMutationObserved = () => {
@@ -53,12 +69,12 @@ const h =  t(class extends a {
   }
   delegateFocus(t) {
     if (!d(t, this.hostElement)) return;
-    const a = this.hostElement.querySelector("q2-radio[checked]") || this.hostElement.querySelector("q2-radio");
-    null == a || a.dispatchEvent(new FocusEvent("focus"));
+    const o = this.hostElement.querySelector("q2-radio[checked]") || this.hostElement.querySelector("q2-radio");
+    null == o || o.dispatchEvent(new FocusEvent("focus"));
   }
   keydownHandler(t) {
-    const a = t.target.getAttribute("value") || this.value;
-    let o = this.radioElements.findIndex((o => o === t.target || o.getAttribute("value") === a)), e = 0;
+    const o = t.target.getAttribute("value") || this.value;
+    let r = this.radioElements.findIndex((r => r === t.target || r.getAttribute("value") === o)), e = 0;
     switch (t.key) {
      case "ArrowLeft":
      case "ArrowUp":
@@ -69,9 +85,9 @@ const h =  t(class extends a {
      case "ArrowDown":
       e = 1;
     }
-    -1 !== o && 0 !== e && (o += e, o = e < 0 ? Math.max(0, o) : Math.min(this.radioElements.length - 1, o), 
-    t.preventDefault(), this.readonly || (this.value = this.radioElements[o].value), 
-    this.radioElements[o].dispatchEvent(new FocusEvent("focus")));
+    -1 !== r && 0 !== e && (r += e, r = e < 0 ? Math.max(0, r) : Math.min(this.radioElements.length - 1, r), 
+    t.preventDefault(), this.readonly || (this.value = this.radioElements[r].value), 
+    this.radioElements[r].dispatchEvent(new FocusEvent("focus")));
   }
   // #endregion
   // #region Public Methods API
@@ -81,8 +97,8 @@ const h =  t(class extends a {
      * @testOnly
      */
   setValue(t) {
-    this.radioElements.forEach((a => {
-      t === a.value && a.click();
+    this.radioElements.forEach((o => {
+      t === o.value && o.click();
     }));
   }
   // #endregion
@@ -99,25 +115,28 @@ const h =  t(class extends a {
   }
   readonlyUpdated() {
     const t = this.readonly;
-    this.radioElements.forEach((a => a.groupReadonly = t));
+    this.radioElements.forEach((o => o.groupReadonly = t));
   }
   handleDeprecatedTilelayout(t) {
     "boolean" == typeof t && (this.tileLayout = t, this.tilelayout = void 0);
   }
   tileLayoutUpdated(t) {
-    this.radioElements.forEach((a => {
-      a.groupTileLayout = t;
+    this.radioElements.forEach((o => {
+      o.groupTileLayout = t;
     }));
   }
   valueUpdated(t) {
-    this.radioElements.forEach((a => {
-      a.checked = t === a.value, 
+    this.radioElements.forEach((o => {
+      o.checked = t === o.value, 
       // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad
-      a.checked ? a.checked && (a.tabIndex = 0) : (a.removeAttribute("checked"), a.tabIndex = -1);
+      o.checked ? o.checked && (o.tabIndex = 0) : (o.removeAttribute("checked"), o.tabIndex = -1);
     }));
   }
   // #endregion
   // #region Local Methods
+  get computedOrientation() {
+    return "horizontal" === this.orientation ? this.responsiveOrientation : "vertical";
+  }
   get inputId() {
     return this._id;
   }
@@ -134,33 +153,37 @@ const h =  t(class extends a {
       }, e("slot", null)));
     }
     return e("div", {
-      class: "options-container"
+      class: "options-container " + this.computedOrientation
     }, e("slot", null));
   }
   // #endregion
   // #region Render Methods
   render() {
-    const t = this.label || this.optional || this.readonly, {hasError: a} = this, o = t && !this.hideLabel || a;
-    return e(r, {
-      key: "9aadfcdafda1190aac1d1d23f02d73d9d0982cfb"
-    }, o && e("div", {
-      key: "80ffd1095a810f95e89b839bd4c9e9b10b10c56a",
+    const t = this.label || this.optional || this.readonly, {hasError: o} = this, r = t && !this.hideLabel || o;
+    return e(i, {
+      key: "25ec8b2089b54a5d968c3cfb99a1740c5dcbd0d0"
+    }, r && e("div", {
+      key: "1ff216a3e27dd4284dbb2f0300e25728f376df62",
       class: "label-row"
     }, t && !this.hideLabel && e("div", {
-      key: "82663c3dc58235e5a15c6a96d61c0f899e51b34c",
+      key: "462c3833b83b524426ef2f937e0bf60c1cc841f7",
       class: "group-legend"
-    }, l(this)), a && e("q2-icon", {
-      key: "75aab19da924c83a43c311c8718213e554e1e41d",
+    }, l(this)), o && e("q2-icon", {
+      key: "249e09338abad9e55fa472bcc9807ce2297cd4c3",
       type: "error",
       "test-id": "iconError"
     })), e("fieldset", {
-      key: "df81b71c57ac1c2b7812b1e12dc4f85b95563895",
+      key: "2085294bc3fc10c2f3cf20e6a1a0553cb0829e7d",
       onChange: this.onInnerRadioChange,
-      "aria-invalid": a ? "" + a : void 0
+      "aria-invalid": o ? "" + o : void 0
     }, t && e("legend", {
-      key: "c3aff2496cb12cfaa774aac545f399508f0a679c",
+      key: "ad2686c2e07d168a0cf1cbe0baf844121add6ecd",
       class: "sr-only"
-    }, l(this)), this.inputDom()));
+    }, l(this)), e("q2-resize-observer", {
+      key: "e183977bae5484f38356b17b274d6e3125d4d603",
+      onTctResize: this.handleResize,
+      disabled: this.tileLayout || "horizontal" !== this.orientation
+    }, this.inputDom())));
   }
   get hostElement() {
     return this;
@@ -188,7 +211,7 @@ const h =  t(class extends a {
     };
   }
   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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-radio-group-margin:var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-radio-group-margin, var(--comp-default-radio-group-margin))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-radio-group-label-font-color, inherit);font-size:var(--tct-radio-group-label-font-size, inherit);font-weight:var(--tct-radio-group-label-font-weight, 600);text-transform:var(--tct-radio-group-label-text-transform, none);letter-spacing:var(--tct-radio-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, var(--const-px-12, 12px)));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-0x, 0px)));border-width:var(--tct-radio-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content: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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-radio-group-margin:var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-radio-group-margin, var(--comp-default-radio-group-margin))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-radio-group-label-font-color, inherit);font-size:var(--tct-radio-group-label-font-size, inherit);font-weight:var(--tct-radio-group-label-font-weight, 600);text-transform:var(--tct-radio-group-label-text-transform, none);letter-spacing:var(--tct-radio-group-label-letter-spacing, inherit);line-height:var(--tct-radio-group-label-line-height, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, var(--const-px-12, 12px)));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-0x, 0px)));border-width:var(--tct-radio-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.options-container.horizontal,.options-container.vertical{display:flex;flex-wrap:wrap;justify-content:var(--tct-radio-group-justify-content, start)}.options-container.horizontal{flex-direction:row;column-gap:var(--tct-radio-group-horizontal-gap, var(--app-scale-4x, 20px))}.options-container.vertical{flex-direction:column}.options-container.vertical ::slotted(q2-radio:not(:first-child)){position:relative}.options-container.vertical ::slotted(q2-radio:not(:first-child))::before{border-block-start:var(--tct-radio-group-separator-width, 0) solid var(--tct-radio-group-separator-color, var(--t-gray-12, #d9d9d9));content:"";inset-block-start:calc(var(--tct-radio-group-separator-width, 0) / -2);inset-inline:0;pointer-events:none;position:absolute}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{border-color:var(--tct-radio-group-tile-border-color, var(--t-gray-13, #e6e6e6));border-radius:var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));flex-grow:0;flex-wrap:nowrap;justify-content:inherit;overflow:visible}:host([has-error]) .tile-container .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}';
   }
 }, [ 257, "q2-radio-group", {
   disabled: [ 516 ],
@@ -197,11 +220,14 @@ const h =  t(class extends a {
   label: [ 513 ],
   name: [ 513 ],
   optional: [ 516 ],
+  orientation: [ 513 ],
+  orientationThreshold: [ 2, "orientation-threshold" ],
   readonly: [ 516 ],
   tileAlignment: [ 513, "tile-alignment" ],
   tilelayout: [ 1540 ],
   tileLayout: [ 1540, "tile-layout" ],
   value: [ 1025 ],
+  responsiveOrientation: [ 32 ],
   setValue: [ 64 ]
 }, [ [ 0, "change", "onHostElementChange" ], [ 0, "focus", "delegateFocus" ], [ 0, "keydown", "keydownHandler" ] ], {
   disabled: [ {
@@ -224,16 +250,20 @@ const h =  t(class extends a {
   } ]
 } ]);
 
-const g = h, defineCustomElement = function() {
+const g = u, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-radio-group", "q2-icon" ].forEach((t => {
+  [ "q2-radio-group", "q2-icon", "q2-resize-observer" ].forEach((t => {
     switch (t) {
      case "q2-radio-group":
-      customElements.get(i(t)) || customElements.define(i(t), h);
+      customElements.get(a(t)) || customElements.define(a(t), u);
       break;
 
      case "q2-icon":
-      customElements.get(i(t)) || c();
+      customElements.get(a(t)) || p();
+      break;
+
+     case "q2-resize-observer":
+      customElements.get(a(t)) || h();
     }
   }));
 };

package/dist/components/q2-radio.js

@@ -1,15 +1,15 @@
-import { proxyCustomElement as e, HTMLElement as t, createEvent as o, h as r, transformTag as c } from "@stencil/core/internal/client";
+import { proxyCustomElement as r, HTMLElement as a, createEvent as o, h as t, transformTag as e } from "@stencil/core/internal/client";
 
-import { c as a, h as i, o as l, l as n } from "./index2.js";
+import { c as i, h as c, o as d, l } from "./index2.js";
 
-import { m as s } from "./mirror-emit.js";
+import { m as n } from "./mirror-emit.js";
 
-const d =  e(class extends t {
-  constructor(e) {
-    super(), !1 !== e && this.__registerHost(), this.__attachShadow(), this.change = o(this, "change", 7), 
+const s =  r(class extends a {
+  constructor(r) {
+    super(), !1 !== r && this.__registerHost(), this.__attachShadow(), this.change = o(this, "change", 7), 
     this.tctChange = o(this, "tctChange", 7), 
     // #region Own Properties
-    this._id = "radio-" + a(), this.isLoaded = !1, 
+    this._id = "radio-" + i(), this.isLoaded = !1, 
     /** The state of the radio. This modifies the visual appearance of the element. */
     this.checked = !1, 
     /** Disables the radio and prevents interaction. */
@@ -33,50 +33,50 @@ const d =  e(class extends t {
     this.tabIndex = 0, 
     // #endregion
     // #region Local Methods
-    this.inputChange = e => {
-      if (e.stopPropagation(), this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) return e.preventDefault(), 
+    this.inputChange = r => {
+      if (r.stopPropagation(), this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) return r.preventDefault(), 
       !1;
-      e.target instanceof HTMLInputElement && (this.checked = e.target.checked);
+      r.target instanceof HTMLInputElement && (this.checked = r.target.checked);
     };
   }
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
-    i(this);
+    c(this);
   }
   componentDidLoad() {
-    this.isLoaded = !0, l(this.hostElement), this.hostElement.click = () => {
+    this.isLoaded = !0, d(this.hostElement), this.hostElement.click = () => {
       this.inputField.focus(), this.inputField.click();
     };
   }
   // #endregion
   // #region Listeners
-  onHostClick(e) {
-    this.disabled ? e.stopImmediatePropagation() : this.groupReadonly && (e.preventDefault(), 
-    e.stopImmediatePropagation(), this.inputField.focus());
+  onHostClick(r) {
+    this.disabled ? r.stopImmediatePropagation() : this.groupReadonly && (r.preventDefault(), 
+    r.stopImmediatePropagation(), this.inputField.focus());
   }
-  delegateFocus(e) {
-    e.target === this.hostElement && this.inputField.focus();
+  delegateFocus(r) {
+    r.target === this.hostElement && this.inputField.focus();
   }
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    i(this);
+    c(this);
   }
   checkedObserver() {
-    this.isLoaded && this.checked && s(this, [ "change", "tctChange" ], {
+    this.isLoaded && this.checked && n(this, [ "change", "tctChange" ], {
       value: this.value
     });
   }
   // #endregion
   // #region Render Methods
   render() {
-    return r("div", {
-      key: "699970d6bed602cbd0e6954d36ca3b03b2122fdc",
+    return t("div", {
+      key: "8fbe0ad9c8b0712fd51dbac67baae6209ebf2532",
       class: this.groupTileLayout ? "radio-tile" : "radio-container"
-    }, r("input", {
-      key: "edaaa6bbba5eb256fed9e02863b3cf3b706b4e73",
-      ref: e => this.inputField = e,
+    }, t("input", {
+      key: "a9322154f304963731fb3d6ee99632c06938f27f",
+      ref: r => this.inputField = r,
       class: "sr",
       id: this._id,
       type: "radio",
@@ -84,38 +84,23 @@ const d =  e(class extends t {
       value: this.value,
       disabled: this.disabled || this.groupDisabled,
       checked: this.checked,
-      "aria-label": this.label && this.hideLabel ? n(this.label) : void 0,
+      "aria-label": this.label && this.hideLabel ? l(this.label) : void 0,
       onChange: this.inputChange,
       "test-id": "q2RadioInnerRadioBox"
-    }), r("label", {
-      key: "fd0c67c56535a53f3cbbeddd32f3817b430b9075",
+    }), t("label", {
+      key: "234f95d4c4656e4325a15853bacf888d7a4ae446",
       htmlFor: this._id,
       class: this.hideLabel ? "label-hidden" : void 0,
       "test-id": "radioButton"
-    }, !this.groupTileLayout && r("svg", {
-      key: "2cfaa2fa7393ff369a319adb780f3667dc11194d",
-      viewBox: "0 0 18 18"
-    }, r("circle", {
-      key: "157a1a5b430a0e63e695aec87bba111f60357444",
-      class: "big-circle",
-      stroke: "none",
-      fill: "none",
-      cx: "9",
-      cy: "9",
-      r: "8"
-    }), r("circle", {
-      key: "4c4daede7d3414b1e7a9c037ba4d9e919300a9ca",
-      class: "small-circle",
-      stroke: "none",
-      fill: "none",
-      cx: "9",
-      cy: "9",
-      r: "4"
-    })), !this.hideLabel && r("div", {
-      key: "e9b3ba9aceb316988bf570a3dd50cf99166fb248",
+    }, !this.groupTileLayout && t("span", {
+      key: "ac98c34734a5e54b347cc2a48dc23d3ea2eb31ce",
+      class: "radio-mark",
+      "aria-hidden": "true"
+    }), !this.hideLabel && t("div", {
+      key: "41dd2c195bc03dd8af8d5722e4aa2323cbeaab76",
       class: "label-content"
-    }, this.label && n(this.label) || "", r("slot", {
-      key: "a6ae2c01e62af90255f836a69458d530136daccb"
+    }, this.label && l(this.label) || "", t("slot", {
+      key: "595014c6a32c2e98f7612dc51f0bd89579770988"
     }))));
   }
   get hostElement() {
@@ -132,7 +117,7 @@ const d =  e(class extends t {
     };
   }
   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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}.radio-container{--comp-radio-margin:var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));--comp-big-circle-fill:var(--tct-radio-background-fill, transparent);--comp-big-circle-stroke:var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-big-circle-stroke-width:var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));--comp-big-circle-transition:fill var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease)));--comp-small-circle-fill:var(--tct-radio-select-fill-default, transparent);--comp-label-content-color:var(--tct-radio-label-color, inherit);--comp-label-content-font-weight:var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));--comp-label-content-letter-spacing:var(--tct-radio-label-letter-spacing, 0.25);--comp-label-content-margin-right:var(--tct-radio-label-margin-right, 1rem);--comp-label-content-gap:var(--tct-radio-label-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));--comp-label-hidden-columns:var(--tct-radio-hidden-columns, var(--tct-radio-label-hidden-columns, 18px 1fr));--comp-svg-transition:box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--comp-svg-box-shadow:var(--tct-radio-box-shadow, none);--comp-big-circle-fill-checked:var(--tct-radio-checked-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-checked:var(--tct-radio-checked-stroke-color, var(--comp-big-circle-stroke));--comp-small-circle-fill-checked:var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));--comp-label-content-font-weight-checked:var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600)));--comp-label-content-letter-spacing-checked:var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--comp-label-content-letter-spacing))));--comp-label-content-color-checked:var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));--comp-big-circle-fill-active:var(--tct-radio-background-fill-active, var(--comp-big-circle-fill));--comp-big-circle-stroke-active:var(--tct-radio-background-stroke-active, var(--comp-big-circle-stroke));--comp-small-circle-fill-active:var(--tct-radio-selected-fill-active, var(--comp-small-circle-fill-checked));--comp-label-content-font-weight-active:var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));--comp-label-content-letter-spacing-active:var(--tct-radio-label-letter-spacing-active, var(--comp-label-content-letter-spacing));--comp-label-content-color-active:var(--tct-radio-label-color-active, var(--comp-label-content-color));--comp-big-circle-fill-hover:var(--tct-radio-hover-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-hover:var(--tct-radio-hover-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-hover:var(--tct-radio-hover-label-color, var(--comp-label-content-color));--comp-big-circle-fill-focus:var(--tct-radio-focus-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-focus:var(--tct-radio-focus-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-focus:var(--tct-radio-focus-label-color, var(--comp-label-content-color));--comp-svg-box-shadow-focus-visible:var(--tct-radio-box-shadow-focus-visible, var(--tct-radio-focus-box-shadow, var(--const-double-focus-ring)));margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(---comp-label-content-color);font-weight:var(---comp-label-content-font-weight);font-size:var(--tct-radio-label-font-size, var(--const-px-14, 14px));align-items:start;cursor:pointer;margin-right:var(---comp-label-content-margin-right);display:grid;grid-template-columns:18px 1fr;gap:var(--comp-label-content-gap);letter-spacing:var(--comp-label-content-letter-spacing)}.radio-container label[for].label-hidden{grid-template-columns:var(--comp-label-hidden-columns)}.radio-container label[for] .description-content{grid-column:2}.radio-container svg{border-radius:50%;transition:var(--comp-svg-transition);outline:0;width:100%;box-shadow:var(--comp-svg-box-shadow)}.radio-container .big-circle{fill:var(--comp-big-circle-fill);stroke:var(--comp-big-circle-stroke);stroke-width:var(--comp-big-circle-stroke-width);transition:var(--comp-big-circle-transition)}.radio-container .small-circle{fill:var(--comp-small-circle-fill)}.radio-container input:checked+label .big-circle{fill:var(--comp-big-circle-fill-checked);stroke:var(--comp-big-circle-stroke-checked)}.radio-container input:checked+label .small-circle{fill:var(--comp-small-circle-fill-checked)}.radio-container input:checked+label .label-content{font-weight:var(--comp-label-content-font-weight-checked);letter-spacing:var(--comp-label-content-letter-spacing-checked);color:var(--comp-label-content-color-checked)}.radio-container input:hover+label .big-circle{fill:var(--comp-big-circle-fill-hover);stroke:var(--comp-big-circle-stroke-hover)}.radio-container input:hover+label .label-content{color:var(--comp-label-content-color-hover)}.radio-container input:active+label .big-circle{fill:var(--comp-big-circle-fill-active);stroke:var(--comp-big-circle-stroke-active)}.radio-container input:active+label .small-circle{fill:var(--comp-small-circle-fill-active)}.radio-container input:active+label .label-content{font-weight:var(--comp-label-content-font-weight-active);letter-spacing:var(--comp-label-content-letter-spacing-active);color:var(--comp-label-content-color-active)}.radio-container input:focus+label .big-circle{fill:var(--comp-big-circle-fill-focus);stroke:var(--comp-big-circle-stroke-focus)}.radio-container input:focus+label .label-content{color:var(--comp-label-content-color-focus)}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border-radius:var(--tct-radio-tile-border-radius, var(--app-border-radius-1, 3px));border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));background:var(--tct-radio-background-fill, transparent);cursor:pointer;display:block;font-size:var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, var(--const-px-14, 14px)));padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:checked+label{border-color:var(--tct-radio-tile-checked-stroke-color, var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));box-shadow:inset 0 0 0 2px #ffffff;background:var(--tct-radio-checked-background-fill, transparent);color:var(--tct-radio-checked-label-color, inherit)}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-radio-tile-checked-stroke-color, var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:"";height:0;left:50%;margin-left:-5px;position:absolute;width:0}.radio-tile input:hover+label{border-color:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));background:var(--tct-radio-hover-background-fill, transparent);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{--comp-radio-tile-focus-box-shadow-fallback:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);border-color:var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))));background:var(--tct-radio-focus-background-fill, transparent);box-shadow:var(--tct-radio-tile-focus-box-shadow, var(--comp-radio-tile-focus-box-shadow-fallback));color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-tile input:focus:checked+label:after{border-bottom:5px solid var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, #2e2e2e))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
+    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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block;letter-spacing:var(--tct-radio-label-letter-spacing, inherit)}:host([checked]:not([checked=false])){letter-spacing:var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--tct-radio-label-letter-spacing, inherit))))}:host(:active){letter-spacing:var(--tct-radio-label-letter-spacing-active, var(--tct-radio-label-letter-spacing, inherit))}.radio-container{--comp-radio-mark-track-size:36px;--comp-radio-mark-size:var(--tct-radio-mark-size, 20px);--comp-radio-mark-fill:var(--tct-radio-background-fill, transparent);--comp-radio-mark-stroke:var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-radio-mark-stroke-width:var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));--comp-radio-mark-color-transition:background-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease))), border-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease)));--comp-radio-mark-dot-fill:var(--tct-radio-select-fill-default, transparent);--comp-label-content-color:var(--tct-radio-label-color, inherit);--comp-label-content-font-weight:var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));--comp-label-content-margin-right:var(--tct-radio-label-margin-right, 0);--comp-label-content-gap:var(--tct-radio-label-gap, 0);--comp-label-hidden-columns:var(--tct-radio-hidden-columns, var(--tct-radio-label-hidden-columns, var(--comp-radio-mark-track-size) 1fr));--comp-radio-mark-transition:box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease))), transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));--comp-radio-mark-box-shadow:var(--tct-radio-box-shadow, none);--comp-radio-mark-fill-checked:var(--tct-radio-checked-background-fill, var(--t-base, #ffffff));--comp-radio-mark-stroke-checked:var(--tct-radio-checked-stroke-color, var(--t-primary, #6a4a9e));--comp-radio-mark-dot-fill-checked:var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-primary, #6a4a9e)))));--comp-label-content-font-weight-checked:var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, var(--comp-label-content-font-weight))));--comp-label-content-color-checked:var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));--comp-radio-mark-fill-active:var(--tct-radio-background-fill-active, #e8ddef);--comp-radio-mark-stroke-active:var(--tct-radio-background-stroke-active, var(--t-primary-d2, #553b7e));--comp-radio-mark-dot-fill-active:var(--tct-radio-selected-fill-active, var(--comp-radio-mark-dot-fill-checked));--comp-label-content-font-weight-active:var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));--comp-label-content-color-active:var(--tct-radio-label-color-active, var(--comp-label-content-color));--comp-radio-mark-fill-hover:var(--tct-radio-hover-background-fill, #f3eefa);--comp-radio-mark-stroke-hover:var(--tct-radio-hover-stroke-color, var(--t-primary, #6a4a9e));--comp-radio-mark-stroke-checked-hover:var(--tct-radio-checked-hover-stroke-color, var(--t-primary-d2, #553b7e));--comp-label-content-color-hover:var(--tct-radio-hover-label-color, var(--comp-label-content-color));--comp-radio-mark-fill-focus:var(--tct-radio-focus-background-fill, var(--comp-radio-mark-fill));--comp-radio-mark-stroke-focus:var(--tct-radio-focus-stroke-color, var(--comp-radio-mark-stroke));--comp-label-content-color-focus:var(--tct-radio-focus-label-color, var(--comp-label-content-color));--comp-radio-mark-box-shadow-focus-visible:var(--tct-radio-box-shadow-focus-visible, var(--tct-radio-focus-box-shadow, var(--const-double-focus-ring)))}.radio-container label[for]{color:var(--comp-label-content-color);font-weight:var(--comp-label-content-font-weight);font-size:var(--tct-radio-label-font-size, var(--const-px-14, 14px));align-items:center;cursor:pointer;margin-right:var(--comp-label-content-margin-right);display:grid;grid-template-columns:var(--comp-radio-mark-track-size) 1fr;gap:var(--comp-label-content-gap);min-height:var(--tct-radio-min-height, var(--comp-radio-mark-track-size));user-select:none}.radio-container label[for].label-hidden{grid-template-columns:var(--comp-label-hidden-columns)}.radio-container label[for] .description-content{grid-column:2}.radio-container .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke);border-radius:50%;box-shadow:var(--comp-radio-mark-box-shadow);height:var(--comp-radio-mark-size);justify-self:center;overflow:hidden;position:relative;transition:var(--comp-radio-mark-transition);width:var(--comp-radio-mark-size)}.radio-container .radio-mark::before{background:var(--comp-radio-mark-current-fill);border-color:var(--comp-radio-mark-current-stroke);border-radius:50%;border-style:solid;border-width:calc(var(--comp-radio-mark-stroke-width) * 1px);box-sizing:border-box;content:"";height:calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);transition:var(--comp-radio-mark-color-transition);width:calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px)}.radio-container .radio-mark::after{background:var(--comp-radio-mark-dot-fill);border-radius:50%;content:"";height:calc(var(--comp-radio-mark-size) / 2);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%) scale(0);transition:transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));width:calc(var(--comp-radio-mark-size) / 2)}.radio-container input:focus-visible{box-shadow:none}.radio-container input:checked+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-checked);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-checked)}.radio-container input:checked+label .radio-mark::after{background:var(--comp-radio-mark-dot-fill-checked);transform:translate(-50%, -50%) scale(1)}.radio-container input:checked+label .label-content{font-weight:var(--comp-label-content-font-weight-checked);color:var(--comp-label-content-color-checked)}.radio-container input:hover:not(:disabled)+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-hover);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-hover)}.radio-container input:hover:not(:disabled)+label .label-content{color:var(--comp-label-content-color-hover)}.radio-container input:active:not(:disabled)+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-active);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-active);transform:scale(0.9)}.radio-container input:active:not(:disabled)+label .radio-mark::after{background:var(--comp-radio-mark-dot-fill-active)}.radio-container input:active:not(:disabled)+label .label-content{font-weight:var(--comp-label-content-font-weight-active);color:var(--comp-label-content-color-active)}.radio-container input:focus+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-focus);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-focus)}.radio-container input:focus+label .label-content{color:var(--comp-label-content-color-focus)}.radio-container input:focus-visible+label .radio-mark{box-shadow:var(--comp-radio-mark-box-shadow-focus-visible)}.radio-container input:checked:hover:not(:disabled)+label .radio-mark{--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-checked-hover)}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border:0;background:var(--tct-radio-background-fill, var(--t-base, #ffffff));cursor:pointer;display:block;font-size:var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, var(--const-px-14, 14px)));overflow:hidden;padding:var(--tct-radio-tile-padding, 10px 20px);position:relative;text-align:center;transition:background var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), box-shadow var(--tct-tween-1, var(--app-tween-1, 0.15s ease));white-space:nowrap;user-select:none}.radio-tile input:focus-visible{box-shadow:none}.radio-tile input:checked+label{background:var(--tct-radio-tile-checked-background-fill, var(--tct-radio-checked-background-fill, #f3eefa));color:var(--tct-radio-tile-checked-label-color, var(--tct-radio-checked-label-color, var(--t-primary, #6a4a9e)))}.radio-tile input:checked+label:after{background:var(--tct-radio-tile-checked-stroke-color, var(--t-primary, #6a4a9e));border-radius:var(--tct-radio-tile-indicator-border-radius, 9999px 9999px 0 0);bottom:0;content:"";height:var(--tct-radio-tile-indicator-height, 2px);left:0;position:absolute;right:0}.radio-tile input:not(:checked):hover:not(:disabled)+label{background:var(--tct-radio-tile-hover-background-fill, #fafafa);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:not(:checked):active:not(:disabled)+label{background:var(--tct-radio-tile-active-background-fill, var(--t-gray-14, #f2f2f2))}.radio-tile input:focus-visible+label{z-index:1;box-shadow:var(--tct-radio-tile-focus-box-shadow, var(--const-double-focus-ring))}:host(:not(:first-child)) .radio-tile label[for]{border-left:var(--tct-radio-tile-divider-width, 1px) solid var(--tct-radio-tile-divider-color, var(--t-gray-13, #e6e6e6))}:host(:first-child) .radio-tile label[for]{border-radius:var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0 0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px))}:host(:last-child) .radio-tile label[for]{border-radius:0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0}:host(:only-child) .radio-tile label[for]{border-radius:var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
   }
 }, [ 257, "q2-radio", {
   ariaLabel: [ 1537, "aria-label" ],
@@ -156,11 +141,11 @@ const d =  e(class extends t {
   } ]
 } ]);
 
-const b = d, defineCustomElement = function() {
+const p = s, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-radio" ].forEach((e => {
-    if ("q2-radio" === e) customElements.get(c(e)) || customElements.define(c(e), d);
+  [ "q2-radio" ].forEach((r => {
+    if ("q2-radio" === r) customElements.get(e(r)) || customElements.define(e(r), s);
   }));
 };
 
-export { b as Q2Radio, defineCustomElement }
+export { p as Q2Radio, defineCustomElement }

package/dist/components/q2-relative-time.js

@@ -63,16 +63,16 @@ const r =  e(class extends t {
   // #endregion
   // #region Watchers
   updateMessage() {
-    const {isValidDate: e, isBaseDateProvided: t, isValidBaseDate: i, dateObject: s, baseDateObject: a, locale: r, handleNumeric: d, messageFormat: l, isValidUnit: u, unit: h, trimSuffix: c} = this;
+    const {isValidDate: e, isBaseDateProvided: t, isValidBaseDate: i, dateObject: s, baseDateObject: a, locale: r, handleNumeric: d, messageFormat: l, isValidUnit: u, unit: c, trimSuffix: h} = this;
     if (!e || t && !i) return this.sync = !1, void (this.displayedMessage = o("tecton.element.relativeTime.invalidDate"));
     const m = n.intlFormatDistance(new Date(s), new Date(a), {
-      locale: r,
+      locale: r || document.documentElement.lang || "en-US",
       localeMatcher: "best fit",
       numeric: d,
       style: l,
-      unit: u ? h : null
+      unit: u ? c : null
     });
-    this.displayedMessage = c ? this.trimMessage(m) : m;
+    this.displayedMessage = h ? this.trimMessage(m) : m;
   }
   syncUpdated() {
     this.sync ? this.syncTimer = window.setInterval((() => {
@@ -118,7 +118,7 @@ const r =  e(class extends t {
   render() {
     const {shouldShow: e, displayedMessage: t} = this;
     return i(s, {
-      key: "48a6ad8165ea3380500edb280142a47e0a7a6848"
+      key: "7bcf2e8d9cb391ea43664b9cf01ec6d474a1743e"
     }, e ? i("time", {
       dateTime: t
     }, t) : null);