q2-tecton-elements 1.65.0 → 1.66.1

package/dist/q2-tecton-elements/q2-radio.entry.js

@@ -1,18 +1,18 @@
-import { r as t, c as r, h as e, g as o } from "./index-CGkHOjh1.js";
+import { r as e, c as t, h as o, g as c } from "./index-CGkHOjh1.js";
 
-import { c as a, d as i, o as c, l } from "./index-B4WYBDS9.js";
+import { c as r, d as a, o as i, l } from "./index-B4WYBDS9.js";
 
-import { m as d } from "./mirror-emit-DUjY_ucm.js";
+import { m as n } from "./mirror-emit-DUjY_ucm.js";
 
-const n = '*{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}.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)));margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:var(--tct-radio-label-margin-right, 1rem);display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container label[for].label-hidden{grid-template-columns:var(--tct-radio-label-hidden-columns, 18px 1fr)}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%;box-shadow:var(--tct-radio-box-shadow, none)}.radio-container circle:nth-child(1){stroke-width:var(--tct-radio-stroke-width, 2);stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));fill:var(--tct-radio-background-fill, transparent);transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}.radio-container input:checked+label circle:nth-child(1){fill:var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600));letter-spacing:var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, 0.25));color:var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit))}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:hover+label circle:nth-child(1){fill:var(--tct-radio-hover-background-fill, transparent);stroke:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:hover+label .label-content{color:var(--tct-radio-hover-label-color, inherit)}.radio-container input:focus+label circle:nth-child(1){fill:var(--tct-radio-focus-background-fill, transparent);stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:focus+label .label-content{color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-container input:focus-visible+label svg{box-shadow:var(--tct-radio-focus-box-shadow, --const-double-focus-ring)}.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: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;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-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-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{border-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(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
+const s = '*{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}.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, --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, --tct-radio-focus-box-shadow, --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, 14px);align-items:center;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 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, 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{border-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(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);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-focus-stroke-color, #2e2e2e)}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
 
-const s = class {
-  constructor(e) {
-    t(this, e);
-    this.change = r(this, "change", 7);
-    this.tctChange = r(this, "tctChange", 7);
+const d = class {
+  constructor(o) {
+    e(this, o);
+    this.change = t(this, "change", 7);
+    this.tctChange = t(this, "tctChange", 7);
     // #region Own Properties
-        this._id = `radio-${a()}`;
+        this._id = `radio-${r()}`;
     this.isLoaded = false;
     /** The state of the radio. This modifies the visual appearance of the element. */    this.checked = false;
     /** Disables the radio and prevents interaction. */    this.disabled = false;
@@ -31,25 +31,25 @@ const s = class {
     /** @private */    this.tabIndex = 0;
     // #endregion
     // #region Local Methods
-        this.inputChange = t => {
-      t.stopPropagation();
+        this.inputChange = e => {
+      e.stopPropagation();
       if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {
-        t.preventDefault();
+        e.preventDefault();
         return false;
       }
-      if (t.target instanceof HTMLInputElement) {
-        this.checked = t.target.checked;
+      if (e.target instanceof HTMLInputElement) {
+        this.checked = e.target.checked;
       }
     };
   }
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
-    i(this);
+    a(this);
   }
   componentDidLoad() {
     this.isLoaded = true;
-    c(this.hostElement);
+    i(this.hostElement);
     this.hostElement.click = () => {
       this.inputField.focus();
       this.inputField.click();
@@ -57,41 +57,41 @@ const s = class {
   }
   // #endregion
   // #region Listeners
-  onHostClick(t) {
+  onHostClick(e) {
     if (this.disabled) {
-      t.stopImmediatePropagation();
+      e.stopImmediatePropagation();
     } else if (this.groupReadonly) {
-      t.preventDefault();
-      t.stopImmediatePropagation();
+      e.preventDefault();
+      e.stopImmediatePropagation();
       this.inputField.focus();
     }
   }
-  delegateFocus(t) {
-    if (t.target === this.hostElement) {
+  delegateFocus(e) {
+    if (e.target === this.hostElement) {
       this.inputField.focus();
     }
   }
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    i(this);
+    a(this);
   }
   checkedObserver() {
     if (!this.isLoaded) return;
     if (!this.checked) return;
-    d(this, [ "change", "tctChange" ], {
+    n(this, [ "change", "tctChange" ], {
       value: this.value
     });
   }
   // #endregion
   // #region Render Methods
   render() {
-    return e("div", {
-      key: "ce2734df98d729ebbf73614e24b0762737ed49cc",
+    return o("div", {
+      key: "1819bf1b409bdb257c590c95fd059f48e9ec2ebb",
       class: this.groupTileLayout ? "radio-tile" : "radio-container"
-    }, e("input", {
-      key: "58625ce598bf6da01ae959342c18dba76891f6cf",
-      ref: t => this.inputField = t,
+    }, o("input", {
+      key: "a6ef43c7dbb5da2e42dc24bad503ce48dc537080",
+      ref: e => this.inputField = e,
       class: "sr",
       id: this._id,
       type: "radio",
@@ -102,37 +102,39 @@ const s = class {
       "aria-label": this.label && this.hideLabel ? l(this.label) : undefined,
       onChange: this.inputChange,
       "test-id": "q2RadioInnerRadioBox"
-    }), e("label", {
-      key: "5fcc7cd31571138bcdefb50369fd0c670d0e3afd",
+    }), o("label", {
+      key: "1da75f9e58a0b461d9bbab4bc09ed839a0364b11",
       htmlFor: this._id,
       class: this.hideLabel ? "label-hidden" : undefined,
       "test-id": "radioButton"
-    }, !this.groupTileLayout && e("svg", {
-      key: "a7a05060cd97fd26b58ed1d4c7a97c821c261449",
+    }, !this.groupTileLayout && o("svg", {
+      key: "a85fa6abe0998cf6f1e377f1242788c41aae034d",
       viewBox: "0 0 18 18"
-    }, e("circle", {
-      key: "d8024cbed1bf1e81e55b067dcb0ab9d97df25564",
+    }, o("circle", {
+      key: "3c0ce4521a486e2f4d8890b844ca960a3f732b66",
+      class: "big-circle",
       stroke: "none",
       fill: "none",
       cx: "9",
       cy: "9",
       r: "8"
-    }), e("circle", {
-      key: "b4b59222059be7e1fdcb740fa06a06b64009866b",
+    }), o("circle", {
+      key: "95d480099459712896b5941542fef02002f1bd64",
+      class: "small-circle",
       stroke: "none",
       fill: "none",
       cx: "9",
       cy: "9",
       r: "4"
-    })), !this.hideLabel && e("div", {
-      key: "300c8d282314d851e16be944b4ea32a0a9111bde",
+    })), !this.hideLabel && o("div", {
+      key: "3d217b5973322972a84dfafafb30055665840544",
       class: "label-content"
-    }, this.label && l(this.label) || "", e("slot", {
-      key: "a36ec0e3b5c9604bb07e957ad0fe9dce4be8d5d8"
+    }, this.label && l(this.label) || "", o("slot", {
+      key: "1ae3f23813fe800de5e7fa75e6ebfa33205c3961"
     }))));
   }
   get hostElement() {
-    return o(this);
+    return c(this);
   }
   static get watchers() {
     return {
@@ -142,8 +144,8 @@ const s = class {
   }
 };
 
-s.style = n;
+d.style = s;
 
-export { s as q2_radio };
+export { d as q2_radio };
 //# sourceMappingURL=q2-radio.entry.esm.js.map
 //# sourceMappingURL=q2-radio.entry.js.map

package/dist/q2-tecton-elements/q2-radio.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2RadioCss","Q2Radio","constructor","hostRef","this","_id","createGuid","isLoaded","checked","disabled","groupDisabled","groupReadonly","groupTileLayout","tabIndex","inputChange","event","stopPropagation","readonly","preventDefault","target","HTMLInputElement","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","inputField","focus","onHostClick","stopImmediatePropagation","delegateFocus","ariaLabelObserver","checkedObserver","mirrorEmit","value","render","h","key","class","ref","el","id","type","name","label","hideLabel","loc","undefined","onChange","htmlFor","viewBox","stroke","fill","cx","cy","r"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n        &.label-hidden {\n            grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        outline: 0;\n        width: 100%;\n        box-shadow: var-list(--tct-radio-box-shadow, none);\n    }\n\n    circle:nth-child(1) {\n        stroke-width: var-list(--tct-radio-stroke-width, 2);\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        fill: var-list(--tct-radio-background-fill, transparent);\n        transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n    }\n\n    input {\n        &:checked {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n                stroke: var-list(\n                    --tct-radio-checked-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(\n                    --tct-radio-checked-label-letter-spacing,\n                    --tct-checkbox-selected-letter-spacing,\n                    0.25\n                );\n                color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n            }\n            & + label circle:nth-child(2) {\n                fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n            }\n        }\n\n        &:hover {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-hover-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-hover-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-hover-label-color, inherit);\n            }\n        }\n\n        &:focus {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-focus-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-focus-stroke-color,\n                    --tct-checkbox-check-stroke-color,\n                    --t-checkbox-fill,\n                    #2e2e2e\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n            }\n        }\n\n        &:focus-visible {\n            & + label svg {\n                box-shadow: var(--tct-radio-focus-box-shadow, --const-double-focus-ring);\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: 3px;\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        background: var-list(--tct-radio-background-fill, transparent);\n        cursor: pointer;\n        display: block;\n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:checked + label {\n            border-color: var-list(\n                --tct-radio-checked-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            box-shadow: inset 0 0 0 2px #ffffff;\n            background: var-list(--tct-radio-checked-background-fill, transparent);\n            color: var-list(--tct-radio-checked-label-color, inherit);\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid\n                    var-list(\n                        --tct-radio-checked-stroke-color,\n                        var-prefixer(checkbox-check-stroke-color),\n                        --t-checkbox-fill,\n                        #2e2e2e\n                    );\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &:hover + label {\n            border-color: var-list(\n                --tct-radio-hover-stroke-color,\n                --tct-radio-stroke-color,\n                --t-a11y-gray-color-AA,\n                #949494\n            );\n            background: var-list(--tct-radio-hover-background-fill, transparent);\n            color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n        }\n\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(\n                --tct-radio-focus-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            background: var-list(--tct-radio-focus-background-fill, transparent);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAa;;MCUNC,IAAO;EADpB,WAAAC,CAAAC;;;;;QAIIC,KAAAC,MAAc,SAASC;IAEvBF,KAAQG,WAAY;0FAiBpBH,KAAOI,UAAY;2DAInBJ,KAAQK,WAAY;;;;eAOpBL,KAAaM,gBAAY;;;;eAOzBN,KAAaO,gBAAY;;;;eAOzBP,KAAeQ,kBAAY;uBA+B3BR,KAAQS,WAAW;;;QA6EnBT,KAAAU,cAAeC;MACXA,EAAMC;MACN,IAAIZ,KAAKK,YAAYL,KAAKa,YAAYb,KAAKO,iBAAiBP,KAAKM,eAAe;QAC5EK,EAAMG;QACN,OAAO;;MAGX,IAAIH,EAAMI,kBAAkBC,kBAAkB;QAC1ChB,KAAKI,UAAUO,EAAMI,OAAOX;;;AA2DvC;;;EAvHG,iBAAAa;IACIC,EAAgBlB;;EAGpB,gBAAAmB;IACInB,KAAKG,WAAW;IAChBiB,EAAcpB,KAAKqB;IACnBrB,KAAKqB,YAAYC,QAAQ;MACrBtB,KAAKuB,WAAWC;MAChBxB,KAAKuB,WAAWD;AAAO;;;;EAQ/B,WAAAG,CAAYd;IACR,IAAIX,KAAKK,UAAU;MACfM,EAAMe;WACH,IAAI1B,KAAKO,eAAe;MAC3BI,EAAMG;MACNH,EAAMe;MACN1B,KAAKuB,WAAWC;;;EAKxB,aAAAG,CAAchB;IACV,IAAIA,EAAMI,WAAWf,KAAKqB,aAAa;MACnCrB,KAAKuB,WAAWC;;;;;EAQxB,iBAAAI;IACIV,EAAgBlB;;EAIpB,eAAA6B;IACI,KAAK7B,KAAKG,UAAU;IACpB,KAAKH,KAAKI,SAAS;IACnB0B,EAAW9B,MAAM,EAAC,UAAU,eAAc;MAAE+B,OAAO/B,KAAK+B;;;;;EAqB5D,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAOnC,KAAKQ,kBAAkB,eAAe;OAC9CyB,EAAA;MAAAC,KAAA;MACIE,KAAKC,KAAOrC,KAAKuB,aAAac;MAC9BF,OAAM;MACNG,IAAItC,KAAKC;MACTsC,MAAK;MACLC,MAAMxC,KAAKwC;MACXT,OAAO/B,KAAK+B;MACZ1B,UAAUL,KAAKK,YAAYL,KAAKM;MAChCF,SAASJ,KAAKI;MAAO,cACTJ,KAAKyC,SAASzC,KAAK0C,YAAYC,EAAI3C,KAAKyC,SAASG;MAC7DC,UAAU7C,KAAKU;MAAW,WAClB;QAGZuB,EACI;MAAAC,KAAA;MAAAY,SAAS9C,KAAKC;MACdkC,OAAOnC,KAAK0C,YAAY,iBAAiBE;MAAS,WAC1C;QAEN5C,KAAKQ,mBACHyB,EAAK;MAAAC,KAAA;MAAAa,SAAQ;OACTd,EAAA;MAAAC,KAAA;MACIc,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;QAENnB,EACI;MAAAC,KAAA;MAAAc,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;UAIZpD,KAAK0C,aACHT,EAAK;MAAAC,KAAA;MAAAC,OAAM;OACLnC,KAAKyC,SAASE,EAAI3C,KAAKyC,UAAW,IACpCR,EAAA;MAAAC,KAAA","ignoreList":[]}
+{"version":3,"names":["q2RadioCss","Q2Radio","constructor","hostRef","this","_id","createGuid","isLoaded","checked","disabled","groupDisabled","groupReadonly","groupTileLayout","tabIndex","inputChange","event","stopPropagation","readonly","preventDefault","target","HTMLInputElement","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","inputField","focus","onHostClick","stopImmediatePropagation","delegateFocus","ariaLabelObserver","checkedObserver","mirrorEmit","value","render","h","key","class","ref","el","id","type","name","label","hideLabel","loc","undefined","onChange","htmlFor","viewBox","stroke","fill","cx","cy","r"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n\n    //Default State\n    --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n    --comp-big-circle-stroke: #{var-list(\n            --tct-radio-background-stroke,\n            --tct-radio-stroke-color,\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n    --comp-big-circle-transition: #{fill\n        var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n    --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n    --comp-label-content-color: #{var-list(\n            --tct-radio-label-color,\n            --tct-radio-label-font-color,\n            --tct-radio-label-color,\n            inherit\n        )};\n    --comp-label-content-font-weight: #{var-list(\n            --tct-radio-label-font-weight,\n            --tct-radio-font-weight,\n            --tct-checkbox-font-weight,\n            400\n        )};\n    --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n    --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n    --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n    --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n    --comp-svg-transition: #{box-shadow\n        var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n    //Checked State\n    --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-checked: #{var-list(\n            --tct-radio-select-fill-checked,\n            --tct-radio-checked-fill,\n            --tct-checkbox-check-stroke-color,\n            --t-checkbox-fill,\n            #2e2e2e\n        )};\n    --comp-label-content-font-weight-checked: #{var-list(\n            --tct-radio-label-font-weight-checked,\n            --tct-radio-checked-label-font-weight,\n            --tct-checkbox-selected-font-weight,\n            600\n        )};\n    --comp-label-content-letter-spacing-checked: #{var-list(\n            --tct-radio-label-letter-spacing-checked,\n            --tct-radio-checked-label-letter-spacing,\n            --tct-checkbox-selected-letter-spacing,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-checked: #{var-list(\n            --tct-radio-label-font-color-checked,\n            --tct-radio-checked-label-font-color,\n            --tct-radio-checked-label-color,\n            inherit\n        )};\n\n    // Active State\n    --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n    --comp-label-content-font-weight-active: #{var-list(\n            --tct-radio-label-font-weight-active,\n            --comp-label-content-font-weight\n        )};\n    --comp-label-content-letter-spacing-active: #{var-list(\n            --tct-radio-label-letter-spacing-active,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n    // Hover State\n    --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n    // Focus State\n    --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n    // Focus Visible\n    --comp-svg-box-shadow-focus-visible: #{var(\n            --tct-radio-box-shadow-focus-visible,\n            --tct-radio-focus-box-shadow,\n            --const-double-focus-ring\n        )};\n\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var(---comp-label-content-color);\n        font-weight: var(---comp-label-content-font-weight);\n        font-size: var(--tct-radio-label-font-size, 14px);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var(---comp-label-content-margin-right);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var(--comp-label-content-gap);\n        letter-spacing: var(--comp-label-content-letter-spacing);\n\n        &.label-hidden {\n            grid-template-columns: var(--comp-label-hidden-columns);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: var(--comp-svg-transition);\n        outline: 0;\n        width: 100%;\n        box-shadow: var(--comp-svg-box-shadow);\n    }\n\n    .big-circle {\n        fill: var(--comp-big-circle-fill);\n        stroke: var(--comp-big-circle-stroke);\n        stroke-width: var(--comp-big-circle-stroke-width);\n        transition: var(--comp-big-circle-transition);\n    }\n    .small-circle {\n        fill: var(--comp-small-circle-fill);\n    }\n\n    input {\n        &:checked {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-checked);\n                    stroke: var(--comp-big-circle-stroke-checked);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-checked);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-checked);\n                    letter-spacing: var(--comp-label-content-letter-spacing-checked);\n                    color: var(--comp-label-content-color-checked);\n                }\n            }\n        }\n\n        &:hover {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-hover);\n                    stroke: var(--comp-big-circle-stroke-hover);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-active);\n                    stroke: var(--comp-big-circle-stroke-active);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-active);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-active);\n                    letter-spacing: var(--comp-label-content-letter-spacing-active);\n                    color: var(--comp-label-content-color-active);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-focus);\n                    stroke: var(--comp-big-circle-stroke-focus);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-focus);\n                }\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 3px);\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        background: var-list(--tct-radio-background-fill, transparent);\n        cursor: pointer;\n        display: block;\n        font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px); \n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:checked + label {\n            border-color: var-list(\n                --tct-radio-tile-checked-stroke-color,\n                --tct-radio-checked-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            box-shadow: inset 0 0 0 2px #ffffff;\n            background: var-list(--tct-radio-checked-background-fill, transparent);\n            color: var-list(--tct-radio-checked-label-color, inherit);\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid\n                    var-list(\n                        --tct-radio-tile-checked-stroke-color,\n                        --tct-radio-checked-stroke-color,\n                        var-prefixer(checkbox-check-stroke-color),\n                        --t-checkbox-fill,\n                        #2e2e2e\n                    );\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &:hover + label {\n            border-color: var-list(\n                --tct-radio-hover-stroke-color,\n                --tct-radio-stroke-color,\n                --t-a11y-gray-color-AA,\n                #949494\n            );\n            background: var-list(--tct-radio-hover-background-fill, transparent);\n            color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n        }\n\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(\n                --tct-radio-focus-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            background: var-list(--tct-radio-focus-background-fill, transparent);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n\n        &:focus:checked + label:after {\n            border-bottom: 5px solid var(--tct-radio-focus-stroke-color, #2e2e2e);\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAa;;MCUNC,IAAO;EADpB,WAAAC,CAAAC;;;;;QAIIC,KAAAC,MAAc,SAASC;IAEvBF,KAAQG,WAAY;0FAiBpBH,KAAOI,UAAY;2DAInBJ,KAAQK,WAAY;;;;eAOpBL,KAAaM,gBAAY;;;;eAOzBN,KAAaO,gBAAY;;;;eAOzBP,KAAeQ,kBAAY;uBA+B3BR,KAAQS,WAAW;;;QA6EnBT,KAAAU,cAAeC;MACXA,EAAMC;MACN,IAAIZ,KAAKK,YAAYL,KAAKa,YAAYb,KAAKO,iBAAiBP,KAAKM,eAAe;QAC5EK,EAAMG;QACN,OAAO;;MAGX,IAAIH,EAAMI,kBAAkBC,kBAAkB;QAC1ChB,KAAKI,UAAUO,EAAMI,OAAOX;;;AA6DvC;;;EAzHG,iBAAAa;IACIC,EAAgBlB;;EAGpB,gBAAAmB;IACInB,KAAKG,WAAW;IAChBiB,EAAcpB,KAAKqB;IACnBrB,KAAKqB,YAAYC,QAAQ;MACrBtB,KAAKuB,WAAWC;MAChBxB,KAAKuB,WAAWD;AAAO;;;;EAQ/B,WAAAG,CAAYd;IACR,IAAIX,KAAKK,UAAU;MACfM,EAAMe;WACH,IAAI1B,KAAKO,eAAe;MAC3BI,EAAMG;MACNH,EAAMe;MACN1B,KAAKuB,WAAWC;;;EAKxB,aAAAG,CAAchB;IACV,IAAIA,EAAMI,WAAWf,KAAKqB,aAAa;MACnCrB,KAAKuB,WAAWC;;;;;EAQxB,iBAAAI;IACIV,EAAgBlB;;EAIpB,eAAA6B;IACI,KAAK7B,KAAKG,UAAU;IACpB,KAAKH,KAAKI,SAAS;IACnB0B,EAAW9B,MAAM,EAAC,UAAU,eAAc;MAAE+B,OAAO/B,KAAK+B;;;;;EAqB5D,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAOnC,KAAKQ,kBAAkB,eAAe;OAC9CyB,EAAA;MAAAC,KAAA;MACIE,KAAKC,KAAOrC,KAAKuB,aAAac;MAC9BF,OAAM;MACNG,IAAItC,KAAKC;MACTsC,MAAK;MACLC,MAAMxC,KAAKwC;MACXT,OAAO/B,KAAK+B;MACZ1B,UAAUL,KAAKK,YAAYL,KAAKM;MAChCF,SAASJ,KAAKI;MAAO,cACTJ,KAAKyC,SAASzC,KAAK0C,YAAYC,EAAI3C,KAAKyC,SAASG;MAC7DC,UAAU7C,KAAKU;MAAW,WAClB;QAGZuB,EACI;MAAAC,KAAA;MAAAY,SAAS9C,KAAKC;MACdkC,OAAOnC,KAAK0C,YAAY,iBAAiBE;MAAS,WAC1C;QAEN5C,KAAKQ,mBACHyB,EAAK;MAAAC,KAAA;MAAAa,SAAQ;OACTd,EACI;MAAAC,KAAA;MAAAC,OAAM;MACNa,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;QAENnB,EACI;MAAAC,KAAA;MAAAC,OAAM;MACNa,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;UAIZpD,KAAK0C,aACHT,EAAK;MAAAC,KAAA;MAAAC,OAAM;OACLnC,KAAKyC,SAASE,EAAI3C,KAAKyC,UAAW,IACpCR,EAAA;MAAAC,KAAA","ignoreList":[]}

package/dist/q2-tecton-elements/q2-relative-time.entry.js

@@ -141,7 +141,7 @@ const o = class {
   render() {
     const {shouldShow: e, displayedMessage: s} = this;
     return t(i, {
-      key: "569e87bba45a32bc28d5754509e40a3941e0053e"
+      key: "cb780607f4db81492c93d54366e0e177a4aee498"
     }, e ? t("time", {
       dateTime: s
     }, s) : null);

package/dist/q2-tecton-elements/q2-section-container.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-section-container.entry.esm.js","sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n */\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines if a single or multiple sections can be open at a time.\n     */\n    @Prop({ mutable: true })\n    openMode: 'multiple' | 'single' = 'single';\n\n    /**\n     * Determines which section starts open.\n     */\n    @Prop()\n    openPaneIndex: number = 0;\n\n    /**\n     * Determines if all sections inside the section-container start opened or closed.\n     *\n     * @info\n     * If you have openMode set to multiple, all panes will start open.\n     */\n    @Prop({ mutable: true })\n    startAllOpen: boolean = false;\n\n    /**\n     * Determines if the section-container starts opened or closed.\n     *\n     * @info\n     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n     * @warning\n     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n     */\n    @Prop({ mutable: true })\n    startOpen: boolean = true;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.filterSlottedElements();\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('openMode')\n    @Watch('openPaneIndex')\n    @Watch('startAllOpen')\n    @Watch('startOpen')\n    handleOpenStateChange() {\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach(el => {\n            if ('Q2-SECTION' !== el.tagName) {\n                el.remove();\n            }\n        });\n    };\n\n    fixSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach((el, i) => {\n            el.setAttribute('collapsible', '');\n            if (this.openMode === 'single') {\n                el.addEventListener('change', event => {\n                    const target = event.target as HTMLElement;\n                    const children = Array.from(target.parentElement.children);\n                    const siblings = children.filter(child => child !== target);\n                    siblings.forEach(el => el.setAttribute('expanded', 'false'));\n                });\n            }\n\n            if (!el.getAttribute('label')) {\n                el.setAttribute('label', 'Section ' + (i + 1));\n            }\n\n            if (!this.startOpen) {\n                el.removeAttribute('expanded');\n            } else {\n                if (this.openPaneIndex === i || (this.openMode === 'multiple' && this.startAllOpen)) {\n                    el.setAttribute('expanded', '');\n                } else {\n                    el.removeAttribute('expanded');\n                }\n            }\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => <slot />;\n\n    // #endregion\n}\n"],"names":[],"mappings":";;MAQa,iBAAiB,GAAA,MAAA;AAD9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAA0B,QAAQ;AAE1C;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAEzB;;;;;AAKG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B;;;;;;;;AAQG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;;AAwBzB,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/C,gBAAA,IAAI,YAAY,KAAK,EAAE,CAAC,OAAO,EAAE;oBAC7B,EAAE,CAAC,MAAM,EAAE;;AAEnB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACpD,gBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAClC,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC5B,oBAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAG;AAClC,wBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,wBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,wBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAC3D,wBAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,qBAAC,CAAC;;gBAGN,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC3B,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlD,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,oBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;qBAC3B;AACH,oBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE;AACjF,wBAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;yBAC5B;AACH,wBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;;AAG1C,aAAC,CAAC;AACN,SAAC;;;AAKD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,eAAQ;AAG1B;;;IA/DG,iBAAiB,GAAA;QACb,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;;;IAU7B,qBAAqB,GAAA;QACjB,IAAI,CAAC,kBAAkB,EAAE;;;;;;;;;;;;;"}
+{"version":3,"file":"q2-section-container.entry.esm.js","sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { hasValidChildren } from '@/utils/component';\nimport { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n */\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines if a single or multiple sections can be open at a time.\n     */\n    @Prop({ mutable: true })\n    openMode: 'multiple' | 'single' = 'single';\n\n    /**\n     * Determines which section starts open.\n     */\n    @Prop()\n    openPaneIndex: number = 0;\n\n    /**\n     * Determines if all sections inside the section-container start opened or closed.\n     *\n     * @info\n     * If you have openMode set to multiple, all panes will start open.\n     */\n    @Prop({ mutable: true })\n    startAllOpen: boolean = false;\n\n    /**\n     * Determines if the section-container starts opened or closed.\n     *\n     * @info\n     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n     * @warning\n     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n     */\n    @Prop({ mutable: true })\n    startOpen: boolean = true;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        hasValidChildren(this.hostElement, 'q2-section');\n        this.filterSlottedElements();\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('openMode')\n    @Watch('openPaneIndex')\n    @Watch('startAllOpen')\n    @Watch('startOpen')\n    handleOpenStateChange() {\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach(el => {\n            if ('Q2-SECTION' !== el.tagName) {\n                el.remove();\n            }\n        });\n    };\n\n    fixSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach((el, i) => {\n            el.setAttribute('collapsible', '');\n            if (this.openMode === 'single') {\n                el.addEventListener('change', event => {\n                    const target = event.target as HTMLElement;\n                    const children = Array.from(target.parentElement.children);\n                    const siblings = children.filter(child => child !== target);\n                    siblings.forEach(el => el.setAttribute('expanded', 'false'));\n                });\n            }\n\n            if (!el.getAttribute('label')) {\n                el.setAttribute('label', 'Section ' + (i + 1));\n            }\n\n            if (!this.startOpen) {\n                el.removeAttribute('expanded');\n            } else {\n                if (this.openPaneIndex === i || (this.openMode === 'multiple' && this.startAllOpen)) {\n                    el.setAttribute('expanded', '');\n                } else {\n                    el.removeAttribute('expanded');\n                }\n            }\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => <slot />;\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;MASa,iBAAiB,GAAA,MAAA;AAD9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAA0B,QAAQ;AAE1C;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAEzB;;;;;AAKG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B;;;;;;;;AAQG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;;AAyBzB,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/C,gBAAA,IAAI,YAAY,KAAK,EAAE,CAAC,OAAO,EAAE;oBAC7B,EAAE,CAAC,MAAM,EAAE;;AAEnB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACpD,gBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAClC,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC5B,oBAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAG;AAClC,wBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,wBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,wBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAC3D,wBAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,qBAAC,CAAC;;gBAGN,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC3B,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlD,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,oBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;qBAC3B;AACH,oBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE;AACjF,wBAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;yBAC5B;AACH,wBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;;AAG1C,aAAC,CAAC;AACN,SAAC;;;AAKD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,eAAQ;AAG1B;;;IAhEG,iBAAiB,GAAA;AACb,QAAA,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC;QAChD,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;;;IAU7B,qBAAqB,GAAA;QACjB,IAAI,CAAC,kBAAkB,EAAE;;;;;;;;;;;;;"}

package/dist/q2-tecton-elements/q2-section-container.entry.js

@@ -1,6 +1,8 @@
 import { r as e, h as t, g as n } from "./index-CGkHOjh1.js";
 
-const s = class {
+import { h as s } from "./component-DVxzK3WH.js";
+
+const i = class {
   constructor(n) {
     e(this, n);
     // #endregion
@@ -69,6 +71,7 @@ const s = class {
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
+    s(this.hostElement, "q2-section");
     this.filterSlottedElements();
     this.fixSlottedElements();
   }
@@ -90,6 +93,6 @@ const s = class {
   }
 };
 
-export { s as q2_section_container };
+export { i as q2_section_container };
 //# sourceMappingURL=q2-section-container.entry.esm.js.map
 //# sourceMappingURL=q2-section-container.entry.js.map

package/dist/q2-tecton-elements/q2-section-container.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["Q2SectonContainer","constructor","hostRef","this","openMode","openPaneIndex","startAllOpen","startOpen","filterSlottedElements","window","Array","from","hostElement","children","forEach","el","tagName","remove","fixSlottedElements","i","setAttribute","addEventListener","event","target","parentElement","siblings","filter","child","getAttribute","removeAttribute","render","h","componentWillLoad","handleOpenStateChange"],"sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n */\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines if a single or multiple sections can be open at a time.\n     */\n    @Prop({ mutable: true })\n    openMode: 'multiple' | 'single' = 'single';\n\n    /**\n     * Determines which section starts open.\n     */\n    @Prop()\n    openPaneIndex: number = 0;\n\n    /**\n     * Determines if all sections inside the section-container start opened or closed.\n     *\n     * @info\n     * If you have openMode set to multiple, all panes will start open.\n     */\n    @Prop({ mutable: true })\n    startAllOpen: boolean = false;\n\n    /**\n     * Determines if the section-container starts opened or closed.\n     *\n     * @info\n     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n     * @warning\n     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n     */\n    @Prop({ mutable: true })\n    startOpen: boolean = true;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.filterSlottedElements();\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('openMode')\n    @Watch('openPaneIndex')\n    @Watch('startAllOpen')\n    @Watch('startOpen')\n    handleOpenStateChange() {\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach(el => {\n            if ('Q2-SECTION' !== el.tagName) {\n                el.remove();\n            }\n        });\n    };\n\n    fixSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach((el, i) => {\n            el.setAttribute('collapsible', '');\n            if (this.openMode === 'single') {\n                el.addEventListener('change', event => {\n                    const target = event.target as HTMLElement;\n                    const children = Array.from(target.parentElement.children);\n                    const siblings = children.filter(child => child !== target);\n                    siblings.forEach(el => el.setAttribute('expanded', 'false'));\n                });\n            }\n\n            if (!el.getAttribute('label')) {\n                el.setAttribute('label', 'Section ' + (i + 1));\n            }\n\n            if (!this.startOpen) {\n                el.removeAttribute('expanded');\n            } else {\n                if (this.openPaneIndex === i || (this.openMode === 'multiple' && this.startAllOpen)) {\n                    el.setAttribute('expanded', '');\n                } else {\n                    el.removeAttribute('expanded');\n                }\n            }\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => <slot />;\n\n    // #endregion\n}\n"],"mappings":";;MAQaA,IAAiB;EAD9B,WAAAC,CAAAC;;;;;;eAcIC,KAAQC,WAA0B;;;eAMlCD,KAAaE,gBAAW;;;;;;eASxBF,KAAYG,eAAY;;;;;;;;;eAYxBH,KAASI,YAAY;;;QAwBrBJ,KAAqBK,wBAAG;MACpB,MAAM,qBAAqBC,SAAS;MACpCC,MAAMC,KAAKR,KAAKS,YAAYC,UAAUC,SAAQC;QAC1C,IAAI,iBAAiBA,EAAGC,SAAS;UAC7BD,EAAGE;;;AAET;IAGNd,KAAkBe,qBAAG;MACjB,MAAM,qBAAqBT,SAAS;MACpCC,MAAMC,KAAKR,KAAKS,YAAYC,UAAUC,SAAQ,CAACC,GAAII;QAC/CJ,EAAGK,aAAa,eAAe;QAC/B,IAAIjB,KAAKC,aAAa,UAAU;UAC5BW,EAAGM,iBAAiB,WAAUC;YAC1B,MAAMC,IAASD,EAAMC;YACrB,MAAMV,IAAWH,MAAMC,KAAKY,EAAOC,cAAcX;YACjD,MAAMY,IAAWZ,EAASa,QAAOC,KAASA,MAAUJ;YACpDE,EAASX,SAAQC,KAAMA,EAAGK,aAAa,YAAY;AAAS;;QAIpE,KAAKL,EAAGa,aAAa,UAAU;UAC3Bb,EAAGK,aAAa,SAAS,cAAcD,IAAI;;QAG/C,KAAKhB,KAAKI,WAAW;UACjBQ,EAAGc,gBAAgB;eAChB;UACH,IAAI1B,KAAKE,kBAAkBc,KAAMhB,KAAKC,aAAa,cAAcD,KAAKG,cAAe;YACjFS,EAAGK,aAAa,YAAY;iBACzB;YACHL,EAAGc,gBAAgB;;;;AAG7B;;;QAMN1B,KAAA2B,SAAS,MAAMC,EAAA;AAGlB;;;EA/DG,iBAAAC;IACI7B,KAAKK;IACLL,KAAKe;;;;EAUT,qBAAAe;IACI9B,KAAKe","ignoreList":[]}
+{"version":3,"names":["Q2SectonContainer","constructor","hostRef","this","openMode","openPaneIndex","startAllOpen","startOpen","filterSlottedElements","window","Array","from","hostElement","children","forEach","el","tagName","remove","fixSlottedElements","i","setAttribute","addEventListener","event","target","parentElement","siblings","filter","child","getAttribute","removeAttribute","render","h","componentWillLoad","hasValidChildren","handleOpenStateChange"],"sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { hasValidChildren } from '@/utils/component';\nimport { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @name Section Container\n * @category Display\n * @summary Use for managing multiple collapsible sections with single or multiple open modes.\n */\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines if a single or multiple sections can be open at a time.\n     */\n    @Prop({ mutable: true })\n    openMode: 'multiple' | 'single' = 'single';\n\n    /**\n     * Determines which section starts open.\n     */\n    @Prop()\n    openPaneIndex: number = 0;\n\n    /**\n     * Determines if all sections inside the section-container start opened or closed.\n     *\n     * @info\n     * If you have openMode set to multiple, all panes will start open.\n     */\n    @Prop({ mutable: true })\n    startAllOpen: boolean = false;\n\n    /**\n     * Determines if the section-container starts opened or closed.\n     *\n     * @info\n     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n     * @warning\n     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n     */\n    @Prop({ mutable: true })\n    startOpen: boolean = true;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        hasValidChildren(this.hostElement, 'q2-section');\n        this.filterSlottedElements();\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('openMode')\n    @Watch('openPaneIndex')\n    @Watch('startAllOpen')\n    @Watch('startOpen')\n    handleOpenStateChange() {\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach(el => {\n            if ('Q2-SECTION' !== el.tagName) {\n                el.remove();\n            }\n        });\n    };\n\n    fixSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach((el, i) => {\n            el.setAttribute('collapsible', '');\n            if (this.openMode === 'single') {\n                el.addEventListener('change', event => {\n                    const target = event.target as HTMLElement;\n                    const children = Array.from(target.parentElement.children);\n                    const siblings = children.filter(child => child !== target);\n                    siblings.forEach(el => el.setAttribute('expanded', 'false'));\n                });\n            }\n\n            if (!el.getAttribute('label')) {\n                el.setAttribute('label', 'Section ' + (i + 1));\n            }\n\n            if (!this.startOpen) {\n                el.removeAttribute('expanded');\n            } else {\n                if (this.openPaneIndex === i || (this.openMode === 'multiple' && this.startAllOpen)) {\n                    el.setAttribute('expanded', '');\n                } else {\n                    el.removeAttribute('expanded');\n                }\n            }\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => <slot />;\n\n    // #endregion\n}\n"],"mappings":";;;;MASaA,IAAiB;EAD9B,WAAAC,CAAAC;;;;;;eAcIC,KAAQC,WAA0B;;;eAMlCD,KAAaE,gBAAW;;;;;;eASxBF,KAAYG,eAAY;;;;;;;;;eAYxBH,KAASI,YAAY;;;QAyBrBJ,KAAqBK,wBAAG;MACpB,MAAM,qBAAqBC,SAAS;MACpCC,MAAMC,KAAKR,KAAKS,YAAYC,UAAUC,SAAQC;QAC1C,IAAI,iBAAiBA,EAAGC,SAAS;UAC7BD,EAAGE;;;AAET;IAGNd,KAAkBe,qBAAG;MACjB,MAAM,qBAAqBT,SAAS;MACpCC,MAAMC,KAAKR,KAAKS,YAAYC,UAAUC,SAAQ,CAACC,GAAII;QAC/CJ,EAAGK,aAAa,eAAe;QAC/B,IAAIjB,KAAKC,aAAa,UAAU;UAC5BW,EAAGM,iBAAiB,WAAUC;YAC1B,MAAMC,IAASD,EAAMC;YACrB,MAAMV,IAAWH,MAAMC,KAAKY,EAAOC,cAAcX;YACjD,MAAMY,IAAWZ,EAASa,QAAOC,KAASA,MAAUJ;YACpDE,EAASX,SAAQC,KAAMA,EAAGK,aAAa,YAAY;AAAS;;QAIpE,KAAKL,EAAGa,aAAa,UAAU;UAC3Bb,EAAGK,aAAa,SAAS,cAAcD,IAAI;;QAG/C,KAAKhB,KAAKI,WAAW;UACjBQ,EAAGc,gBAAgB;eAChB;UACH,IAAI1B,KAAKE,kBAAkBc,KAAMhB,KAAKC,aAAa,cAAcD,KAAKG,cAAe;YACjFS,EAAGK,aAAa,YAAY;iBACzB;YACHL,EAAGc,gBAAgB;;;;AAG7B;;;QAMN1B,KAAA2B,SAAS,MAAMC,EAAA;AAGlB;;;EAhEG,iBAAAC;IACIC,EAAiB9B,KAAKS,aAAa;IACnCT,KAAKK;IACLL,KAAKe;;;;EAUT,qBAAAgB;IACI/B,KAAKe","ignoreList":[]}

package/dist/q2-tecton-elements/q2-section.entry.js

@@ -183,29 +183,29 @@ const p = class {
     }
     const r = !this.hasYieldedHeader && !!this.label;
     return i("section", {
-      key: "72e39ebc94cc5e4a1dfc8e6d919e036bb97d292d",
+      key: "d75ff1baca078adfbe4a8160b7cc93aedbd2b633",
       class: "wrapper"
     }, i("header", {
-      key: "a8e31aaa8fba0222b10f50624d27bfec2556e9a6",
+      key: "8d7b0501fa215c7a03b4c7731a80d1e72b101436",
       class: t ? "has-header" : ""
     }, i("div", {
-      key: "76e6ccb47c00adf0bdcda3324344f098f41a6cd9",
+      key: "9daa8ed7468f00dd996a7bc41ca7307be573376c",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, r && i("h2", {
-      key: "d35a32df0bf3b6c87dbd30dcbd6a60ddf01c7093",
+      key: "2bdd67ba18ba96ba58348b69e6d31a3b57afd46f",
       class: "title"
     }, c(this.label)), i("div", {
-      key: "1994e8d76552892bff165c63a5d47f25159d86e2",
+      key: "7ee904d99bf8f36565b7b6221f328e3caf176179",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, i("slot", {
-      key: "23803b2f996e6647de62f24803139e6ac3cfd36c",
+      key: "a4235e3a0835992b13dec77be7fe7b649dd06ac3",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
-      key: "e3071b4e4c32347390955545b3085bec2e023c11",
+      key: "3a79fd3ec731c7705f648bd312eae8e4bc27cccd",
       label: c(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: `${!!this.expanded}`,
       ariaControls: this.contentId,
@@ -213,10 +213,10 @@ const p = class {
       "hide-label": true,
       onClick: this.onHeaderClick
     }, i("q2-icon", {
-      key: "d378a5c6005496f8253faa657a9bae3c13314fd3",
+      key: "a0015837062a6089cb40db4eb7a83641920acb5a",
       type: "chevron-up"
     }))), i("div", {
-      key: "a7cc7075290dbcd106a534b9c0b74f5875eb97d2",
+      key: "401b248658a0033ef6d45a12b57d8aefc3b00799",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -226,12 +226,12 @@ const p = class {
         height: this.contentHeight
       }
     }, i("div", {
-      key: "5f63656a3e7a64b7b2ae3809a154cc46f692a100",
+      key: "816137034e779961bc9469697403be6f59bade26",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, i("slot", {
-      key: "999a2d04c56ec72fc716dba1d6b2f3aea1798833",
+      key: "a7824eeccf0662bee8766071bcd9017d5a7d2226",
       ref: t => this.contentSlot = t
     }))));
   }