q2-tecton-elements 1.54.5 → 1.55.1

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

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as e, g as o } from "./index-7a5365e2.js";
 
-import { m as r, o as n, i as a, w as s, l as c } from "./index-504f1a9e.js";
+import { m as r, o as n, i as a, w as s, l as c } from "./index-f2a66217.js";
 
 import { a as l, s as d } from "./action-sheet-1e24cb38.js";
 
@@ -344,19 +344,19 @@ const v = class {
     if (t || i) r.push("has-icon");
     if (t) r.push("has-options");
     return e("click-elsewhere", {
-      key: "42dced5b6e9014362980f4f6310fe3538ff3ced9",
+      key: "c6dfa2ec426f3a2e3f2623fa0f218045cf22bf65",
       onChange: this.onClickElsewhere
     }, e("div", {
-      key: "7cc2a6e5a9dad73564d7127d3adc2a55f5465d82",
+      key: "b06ee5e8fd7c66e535ae786bbc41b7bbb2f890f0",
       class: r.join(" ")
     }, e("div", {
-      key: "43bc33de012bd7de5369037f19cfabc31688afa0",
+      key: "33cfc2f0ac6d50cde4ff3c4d301b81081018faa0",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, e("button", {
-      key: "a2421c3c6a0219cebb68d31679b3877b87090fe8",
+      key: "ce96d775d2cd1349ac8e982862bce850bfb7ff00",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -372,10 +372,10 @@ const v = class {
       "aria-label": this.buttonContent,
       "aria-describedby": t && "option-description" || undefined
     }, this.truncatedButtonContent, !t && i && e("span", {
-      key: "f760cc0a9cebbf45328510ed928025ed88f1da00",
+      key: "d7def68e55ecd39072d2b7a268459d01fa9f0715",
       class: "sr"
     }, "(", c("tecton.element.pill.active"), ")"))), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
-      key: "5f33a1298dda8fdf0b858afaac71adb5ca6c2429",
+      key: "962a7145528d951a7a56e51a8290e2a3d22fe469",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -385,20 +385,20 @@ const v = class {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, e("div", {
-      key: "b568df98d6b7c5a7fefc4261e4cf437ca47c6666",
+      key: "35da2a4a0f9487329dd2f6599433278b842f5730",
       class: "popover-content"
     }, e("div", {
-      key: "1198cd47cfed3fe5eb2971b1872046eeb912a377",
+      key: "084bad243e6946269d3a4525bf98a6b717101a65",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleKeydown
     }, e("slot", {
-      key: "5cbd8b646ed30b03d27503c4fe9fc19bf2f926d4",
+      key: "5f2e3b51085f841e816f5052f56a7ed89214e169",
       name: "popover-top"
     })), e("q2-option-list", {
-      key: "512825dd2d6736d8b2ed09d607bf2479c1febe50",
+      key: "d176a943fd4a94ed519c42dcf1182931d02a8b13",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -408,16 +408,16 @@ const v = class {
       onReady: () => this.updateSelectedOptionElements(),
       label: c("tecton.element.optionList.label", [ this.optionListLabel ])
     }, e("slot", {
-      key: "3c6081da6094ff75ea383d917c4a627e2c43805e"
+      key: "34b6eb444aefb59b23c85d4354861135cf63919f"
     })), e("div", {
-      key: "3353abb362573e54905a74d564010c36db5fa068",
+      key: "b30d3f4dd110de4cc4ccc2887f9e936af5986db1",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleKeydown
     }, e("slot", {
-      key: "0e47b0b2f6701b5beba8f4a8fc367ee25e53ee81",
+      key: "003d70ef29d638287629f4af176cf3d1852168be",
       name: "popover-bottom"
     })))));
   }

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

@@ -1,17 +1,17 @@
-import { r as t, c as i, h as e, F as a, g as o } from "./index-7a5365e2.js";
+import { r as t, c as i, h as a, F as e, g as r } from "./index-7a5365e2.js";
 
-import { c as r, o as n, i as s, f as d } from "./index-504f1a9e.js";
+import { c as o, o as n, i as s, f as d } from "./index-f2a66217.js";
 
-const l = '*{box-sizing:border-box}*:active{outline:none}*:focus{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{margin-top:var(--tct-radio-group-margin-top, var(--app-scale-2x, 10px))}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))}.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, 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-1x, 5px)));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}';
+const l = '*{box-sizing:border-box}*:active{outline:none}*:focus{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{--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))}.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, 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: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}';
 
 const p = l;
 
 const c = class {
-  constructor(e) {
-    t(this, e);
+  constructor(a) {
+    t(this, a);
     this.change = i(this, "change", 7);
     // #region Own Properties
-        this._id = `radio-group-${r()}`;
+        this._id = `radio-group-${o()}`;
     this.checkedRadioExists = () => {
       // Returns first checked individual q2-radio or undefined if none are set to checked={true}
       const t = this.radioElements.find((t => t.checked === true)) || undefined;
@@ -81,29 +81,29 @@ const c = class {
   }
   keydownHandler(t) {
     const i = t.target.getAttribute("value") || this.value;
-    let e = this.radioElements.findIndex((e => e === t.target || e.getAttribute("value") === i));
-    let a = 0;
+    let a = this.radioElements.findIndex((a => a === t.target || a.getAttribute("value") === i));
+    let e = 0;
     switch (t.key) {
      case "ArrowLeft":
      case "ArrowUp":
-      a = -1;
+      e = -1;
       break;
 
      case "ArrowRight":
      case "ArrowDown":
-      a = 1;
+      e = 1;
       break;
     }
-    if (e === -1 || a === 0) {
+    if (a === -1 || e === 0) {
       return;
     }
-    e += a;
-    e = a < 0 ? Math.max(0, e) : Math.min(this.radioElements.length - 1, e);
+    a += e;
+    a = e < 0 ? Math.max(0, a) : Math.min(this.radioElements.length - 1, a);
     t.preventDefault();
     if (!this.readonly) {
-      this.value = this.radioElements[e].value;
+      this.value = this.radioElements[a].value;
     }
-    this.radioElements[e].dispatchEvent(new FocusEvent("focus"));
+    this.radioElements[a].dispatchEvent(new FocusEvent("focus"));
   }
   // #endregion
   // #region Public Methods API
@@ -168,15 +168,15 @@ const c = class {
     if (this.tileLayout) {
       const {tileAlignment: t} = this;
       const i = [ "left", "center", "right" ].includes(t) ? t : "center";
-      return e("div", {
+      return a("div", {
         class: `tile-container ${i}`
-      }, e("div", {
+      }, a("div", {
         class: "options-container"
-      }, e("slot", null)));
+      }, a("slot", null)));
     } else {
-      return e("div", {
+      return a("div", {
         class: "options-container"
-      }, e("slot", null));
+      }, a("slot", null));
     }
   }
   // #endregion
@@ -184,30 +184,30 @@ const c = class {
   render() {
     const t = this.label || this.optional || this.readonly;
     const {hasError: i} = this;
-    const o = t && !this.hideLabel || i;
-    return e(a, {
+    const r = t && !this.hideLabel || i;
+    return a(e, {
       key: "d1d5bc5ec6dd3fc33332fa49e64ccb1dac4b542e"
-    }, o && e("div", {
+    }, r && a("div", {
       key: "f2de38984a59682953612d73981a2de1afa1bc58",
       class: "label-row"
-    }, t && !this.hideLabel && e("div", {
+    }, t && !this.hideLabel && a("div", {
       key: "24d1a40c5ad7546e5901dd96e46a15e71d8ca4c3",
       class: "group-legend"
-    }, d(this)), i && e("q2-icon", {
+    }, d(this)), i && a("q2-icon", {
       key: "24be48ddc9c8cc60fa356056da6c59224a358a59",
       type: "error",
       "test-id": "iconError"
-    })), e("fieldset", {
+    })), a("fieldset", {
       key: "48da393294f67ac8349606b563a122e0b6e70917",
       onChange: this.onInnerRadioChange,
       "aria-invalid": i ? `${i}` : undefined
-    }, t && e("legend", {
+    }, t && a("legend", {
       key: "544ba2b62bebcb501806527fec2354aaa70c3dd9",
       class: "sr-only"
     }, d(this)), this.inputDom()));
   }
   get hostElement() {
-    return o(this);
+    return r(this);
   }
   static get watchers() {
     return {

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

@@ -1 +1 @@
-{"version":3,"names":["q2RadioGroupCss","Q2RadioGroupStyle0","Q2RadioGroup","this","_id","createGuid","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","value","length","tabIndex","onInnerRadioChange","event","stopImmediatePropagation","readonly","change","emit","detail","onMutationObserved","valueUpdated","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","mutationObserver","overrideFocus","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","setValue","forEach","click","groupDisabled","disabled","name","groupReadonly","groupTileLayout","newVal","removeAttribute","inputId","Array","from","querySelectorAll","inputDom","tileAlignment","alignment","includes","h","class","render","showLabel","label","optional","hasError","showLabelRow","hideLabel","Fragment","renderLabel","type","onChange"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-radio-group-margin-top, --app-scale-2x, 10px);\n}\n\nfieldset {\n    padding: var(--tct-radio-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={hasError ? `${hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2RadioGroupCss","Q2RadioGroupStyle0","Q2RadioGroup","this","_id","createGuid","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","value","length","tabIndex","onInnerRadioChange","event","stopImmediatePropagation","readonly","change","emit","detail","onMutationObserved","valueUpdated","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","mutationObserver","overrideFocus","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","setValue","forEach","click","groupDisabled","disabled","name","groupReadonly","groupTileLayout","newVal","removeAttribute","inputId","Array","from","querySelectorAll","inputDom","tileAlignment","alignment","includes","h","class","render","showLabel","label","optional","hasError","showLabelRow","hideLabel","Fragment","renderLabel","type","onChange"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-radio-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={hasError ? `${hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as r, g as o } from "./index-7a5365e2.js";
 
-import { c as a, a as i, o as c, l } from "./index-504f1a9e.js";
+import { c as a, a as i, o as c, l } from "./index-f2a66217.js";
 
 const n = '*{box-sizing:border-box}*:active{outline:none}*:focus{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-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%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));fill:var(--tct-radio-background-fill, transparent)}.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 svg{box-shadow:var(--const-double-focus-ring)}.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-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))}';
 

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

@@ -2,7 +2,7 @@ import { r as e, h as t, F as i, g as s } from "./index-7a5365e2.js";
 
 import { d as n } from "./index-3184c760.js";
 
-import { l as a } from "./index-504f1a9e.js";
+import { l as a } from "./index-f2a66217.js";
 
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
 
@@ -60,7 +60,7 @@ const d = class {
       this.displayedMessage = a("tecton.element.relativeTime.invalidDate");
       return;
     }
-    const p = n.intlFormatDistance(new Date(s), new Date(r), {
+    const f = n.intlFormatDistance(new Date(s), new Date(r), {
       locale: o,
       localeMatcher: "best fit",
       numeric: d,
@@ -68,9 +68,9 @@ const d = class {
       unit: l ? u : null
     });
     if (c) {
-      this.displayedMessage = this.trimMessage(p);
+      this.displayedMessage = this.trimMessage(f);
     } else {
-      this.displayedMessage = p;
+      this.displayedMessage = f;
     }
   }
   syncUpdated() {
@@ -135,7 +135,7 @@ const d = class {
   render() {
     const {shouldShow: e, displayedMessage: s} = this;
     return t(i, {
-      key: "bb2afb6a702c88e41eed0cad8ad263e7d7014406"
+      key: "9026e0194b08d067c04188fc4c7c9ffa05727fb6"
     }, e ? t("time", {
       dateTime: s
     }, s) : null);

package/dist/q2-tecton-elements/q2-resize-observer.entry.js

@@ -63,7 +63,10 @@ const r = class {
       flatten: true
     })) !== null && t !== void 0 ? t : [];
     // Unwatch previous elements
-        (e = this.observedElements) === null || e === void 0 ? void 0 : e.forEach((i => this.resizeObserver.unobserve(i)));
+        (e = this.observedElements) === null || e === void 0 ? void 0 : e.forEach((i => {
+      var t;
+      return (t = this.resizeObserver) === null || t === void 0 ? void 0 : t.unobserve(i);
+    }));
     this.observedElements = [];
     // Watch new elements
         n.forEach((i => {
@@ -80,7 +83,7 @@ const r = class {
   // #region Render Methods
   render() {
     return e("slot", {
-      key: "e704a2aa1c38da509b0e366e03cd33397ffdbf5d",
+      key: "fa058a508d2397d7844acd6b67d4d2414c0822f1",
       onSlotchange: this.handleSlotChange
     });
   }

package/dist/q2-tecton-elements/q2-resize-observer.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ResizeObserverCss","Q2ResizeObserverStyle0","Q2ResizeObserver","this","observedElements","handleSlotChange","disabled","startObserver","disconnectedCallback","stopObserver","resizeObserver","componentDidLoad","window","ResizeObserver","resizeEntries","tctResize","emit","entries","currentResizeObserverEntries","console","warn","getCurrentResizeEntries","disabledUpdated","newVal","slot","hostElement","shadowRoot","querySelector","elements","_b","_a","assignedElements","call","flatten","_c","forEach","el","unobserve","observe","push","disconnect","render","h","key","onSlotchange"],"sources":["src/components/q2-resize-observer/q2-resize-observer.scss?tag=q2-resize-observer&encapsulation=shadow","src/components/q2-resize-observer/q2-resize-observer.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n}\n","import { Component, ComponentInterface, Element, EventEmitter, h, Prop, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-resize-observer',\n    styleUrl: 'q2-resize-observer.scss',\n    shadow: true,\n})\nexport class Q2ResizeObserver implements ComponentInterface {\n    // #region Own Properties\n\n    currentResizeObserverEntries: ResizeObserverEntry[];\n    observedElements: HTMLElement[] = [];\n    resizeObserver?: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines wheter or not events will be emitted from the component.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when any of the observed elements are resized.\n     */\n    @Event()\n    tctResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.stopObserver();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(resizeEntries => {\n                this.tctResize.emit({ entries: resizeEntries });\n                this.currentResizeObserverEntries = resizeEntries;\n            });\n        } else {\n            console.warn('ResizeObserver is not defined.');\n        }\n\n        if (!this.disabled) {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the latest entries reported by the component.\n     */\n    @Method()\n    async getCurrentResizeEntries(): Promise<ResizeObserverEntry[]> {\n        return this.currentResizeObserverEntries || [];\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated(newVal: boolean) {\n        if (newVal) {\n            this.stopObserver();\n        } else {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleSlotChange = () => {\n        if (this.disabled) return;\n        this.startObserver();\n    };\n\n    startObserver() {\n        const slot = this.hostElement.shadowRoot!.querySelector('slot');\n        if (slot === null) return;\n\n        const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n        // Unwatch previous elements\n        this.observedElements?.forEach(el => this.resizeObserver.unobserve(el));\n        this.observedElements = [];\n\n        // Watch new elements\n        elements.forEach(el => {\n            this.resizeObserver?.observe(el);\n            this.observedElements.push(el);\n        });\n    }\n\n    stopObserver() {\n        this.resizeObserver?.disconnect();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAsB;;AAC5B,MAAAC,IAAeD;;MCMFE,IAAgB;;;;IAIzBC,KAAAC,mBAAkC;;;QA4ElCD,KAAAE,mBAAmB;MACf,IAAIF,KAAKG,UAAU;MACnBH,KAAKI;AAAe;;;;;EAhDxB,oBAAAC;IACIL,KAAKM;IACLN,KAAKO,iBAAiB;;EAG1B,gBAAAC;IACI,IAAI,oBAAoBC,QAAQ;MAC5BT,KAAKO,iBAAiB,IAAIG,gBAAeC;QACrCX,KAAKY,UAAUC,KAAK;UAAEC,SAASH;;QAC/BX,KAAKe,+BAA+BJ;AAAa;WAElD;MACHK,QAAQC,KAAK;;IAGjB,KAAKjB,KAAKG,UAAU;MAChBH,KAAKI;;;;;;;;EAWb,6BAAMc;IACF,OAAOlB,KAAKe,gCAAgC;;;;EAOhD,eAAAI,CAAgBC;IACZ,IAAIA,GAAQ;MACRpB,KAAKM;WACF;MACHN,KAAKI;;;EAYb,aAAAA;;IACI,MAAMiB,IAAOrB,KAAKsB,YAAYC,WAAYC,cAAc;IACxD,IAAIH,MAAS,MAAM;IAEnB,MAAMI,KAAWC,KAACC,IAAAN,EAAKO,sBAAgB,QAAAD,WAAA,aAAAA,EAAAE,KAAAR,GAAG;MAAES,SAAS;YAAyB,QAAAJ,WAAA,IAAAA,IAAI;;SAGlFK,IAAA/B,KAAKC,sBAAgB,QAAA8B,WAAA,aAAAA,EAAEC,SAAQC,KAAMjC,KAAKO,eAAe2B,UAAUD;IACnEjC,KAAKC,mBAAmB;;QAGxBwB,EAASO,SAAQC;;OACbN,IAAA3B,KAAKO,oBAAc,QAAAoB,WAAA,aAAAA,EAAEQ,QAAQF;MAC7BjC,KAAKC,iBAAiBmC,KAAKH;AAAG;;EAItC,YAAA3B;;KACIqB,IAAA3B,KAAKO,oBAAc,QAAAoB,WAAA,aAAAA,EAAEU;;;;EAMzB,MAAAC;IACI,OAAOC,EAAA;MAAAC,KAAA;MAAMC,cAAczC,KAAKE"}
+{"version":3,"names":["q2ResizeObserverCss","Q2ResizeObserverStyle0","Q2ResizeObserver","this","observedElements","handleSlotChange","disabled","startObserver","disconnectedCallback","stopObserver","resizeObserver","componentDidLoad","window","ResizeObserver","resizeEntries","tctResize","emit","entries","currentResizeObserverEntries","console","warn","getCurrentResizeEntries","disabledUpdated","newVal","slot","hostElement","shadowRoot","querySelector","elements","_b","_a","assignedElements","call","flatten","_c","forEach","el","unobserve","observe","push","disconnect","render","h","key","onSlotchange"],"sources":["src/components/q2-resize-observer/q2-resize-observer.scss?tag=q2-resize-observer&encapsulation=shadow","src/components/q2-resize-observer/q2-resize-observer.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n}\n","import { Component, ComponentInterface, Element, EventEmitter, h, Prop, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-resize-observer',\n    styleUrl: 'q2-resize-observer.scss',\n    shadow: true,\n})\nexport class Q2ResizeObserver implements ComponentInterface {\n    // #region Own Properties\n\n    currentResizeObserverEntries: ResizeObserverEntry[];\n    observedElements: HTMLElement[] = [];\n    resizeObserver?: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines wheter or not events will be emitted from the component.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when any of the observed elements are resized.\n     */\n    @Event()\n    tctResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.stopObserver();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(resizeEntries => {\n                this.tctResize.emit({ entries: resizeEntries });\n                this.currentResizeObserverEntries = resizeEntries;\n            });\n        } else {\n            console.warn('ResizeObserver is not defined.');\n        }\n\n        if (!this.disabled) {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the latest entries reported by the component.\n     */\n    @Method()\n    async getCurrentResizeEntries(): Promise<ResizeObserverEntry[]> {\n        return this.currentResizeObserverEntries || [];\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated(newVal: boolean) {\n        if (newVal) {\n            this.stopObserver();\n        } else {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleSlotChange = () => {\n        if (this.disabled) return;\n        this.startObserver();\n    };\n\n    startObserver() {\n        const slot = this.hostElement.shadowRoot!.querySelector('slot');\n        if (slot === null) return;\n\n        const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n        // Unwatch previous elements\n        this.observedElements?.forEach(el => this.resizeObserver?.unobserve(el));\n        this.observedElements = [];\n\n        // Watch new elements\n        elements.forEach(el => {\n            this.resizeObserver?.observe(el);\n            this.observedElements.push(el);\n        });\n    }\n\n    stopObserver() {\n        this.resizeObserver?.disconnect();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAsB;;AAC5B,MAAAC,IAAeD;;MCMFE,IAAgB;;;;IAIzBC,KAAAC,mBAAkC;;;QA4ElCD,KAAAE,mBAAmB;MACf,IAAIF,KAAKG,UAAU;MACnBH,KAAKI;AAAe;;;;;EAhDxB,oBAAAC;IACIL,KAAKM;IACLN,KAAKO,iBAAiB;;EAG1B,gBAAAC;IACI,IAAI,oBAAoBC,QAAQ;MAC5BT,KAAKO,iBAAiB,IAAIG,gBAAeC;QACrCX,KAAKY,UAAUC,KAAK;UAAEC,SAASH;;QAC/BX,KAAKe,+BAA+BJ;AAAa;WAElD;MACHK,QAAQC,KAAK;;IAGjB,KAAKjB,KAAKG,UAAU;MAChBH,KAAKI;;;;;;;;EAWb,6BAAMc;IACF,OAAOlB,KAAKe,gCAAgC;;;;EAOhD,eAAAI,CAAgBC;IACZ,IAAIA,GAAQ;MACRpB,KAAKM;WACF;MACHN,KAAKI;;;EAYb,aAAAA;;IACI,MAAMiB,IAAOrB,KAAKsB,YAAYC,WAAYC,cAAc;IACxD,IAAIH,MAAS,MAAM;IAEnB,MAAMI,KAAWC,KAACC,IAAAN,EAAKO,sBAAgB,QAAAD,WAAA,aAAAA,EAAAE,KAAAR,GAAG;MAAES,SAAS;YAAyB,QAAAJ,WAAA,IAAAA,IAAI;;SAGlFK,IAAA/B,KAAKC,sBAAgB,QAAA8B,WAAA,aAAAA,EAAEC,SAAQC;MAAE,IAAAN;MAAI,QAAAA,IAAA3B,KAAKO,oBAAc,QAAAoB,WAAA,aAAAA,EAAEO,UAAUD;AAAG;IACvEjC,KAAKC,mBAAmB;;QAGxBwB,EAASO,SAAQC;;OACbN,IAAA3B,KAAKO,oBAAc,QAAAoB,WAAA,aAAAA,EAAEQ,QAAQF;MAC7BjC,KAAKC,iBAAiBmC,KAAKH;AAAG;;EAItC,YAAA3B;;KACIqB,IAAA3B,KAAKO,oBAAc,QAAAoB,WAAA,aAAAA,EAAEU;;;;EAMzB,MAAAC;IACI,OAAOC,EAAA;MAAAC,KAAA;MAAMC,cAAczC,KAAKE"}

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as n } from "./index-7a5365e2.js";
 
-import { m as a, o as s, i as r, n as o, l as c } from "./index-504f1a9e.js";
+import { m as s, o as a, i as r, n as o, l as c } from "./index-f2a66217.js";
 
 const d = "*{box-sizing:border-box}*:active{outline:none}*:focus{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;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
 
@@ -14,10 +14,10 @@ const p = class {
     this.titleId = "title";
     this.addContentSlotListener = () => {
       if (this.contentSlot) {
-        this.contentSlot.addEventListener("slotchange", a);
+        this.contentSlot.addEventListener("slotchange", s);
         return;
       }
-      const t = new MutationObserver(a);
+      const t = new MutationObserver(s);
       t.observe(this.contentContainer, {
         childList: true,
         subtree: true
@@ -65,7 +65,7 @@ const p = class {
     this.removeContentSlotListener = () => {
       var t;
       if (this.contentSlot) {
-        this.contentSlot.removeEventListener("slotchange", a);
+        this.contentSlot.removeEventListener("slotchange", s);
         return;
       }
       (t = this.contentSlotMutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
@@ -101,7 +101,7 @@ const p = class {
   componentDidLoad() {
     this.addHeaderSlotListener();
     this.addContentSlotListener();
-    s(this.hostElement);
+    a(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -121,7 +121,7 @@ const p = class {
   }
   async expandedObserver(t) {
     this.clearResizeInterval();
-    this.resizerFn = setInterval(a, 5);
+    this.resizerFn = setInterval(s, 5);
     if (t) {
       this.expandSection();
     } else {
@@ -181,35 +181,35 @@ const p = class {
   render() {
     const t = this.label || this.hasYieldedHeader;
     const e = [ "content-wrapper" ];
-    const {collapsible: n, hideContent: a, contentHeight: s} = this;
+    const {collapsible: n, hideContent: s, contentHeight: a} = this;
     if (n) {
-      if (a) e.push("is-closed"); else if (s) e.push("is-transitioning");
+      if (s) e.push("is-closed"); else if (a) e.push("is-transitioning");
     }
     const r = !this.hasYieldedHeader && !!this.label;
     return i("section", {
-      key: "cc309ddb28c1a874a6ceeb59b8289a4346e459a8",
+      key: "59a073f2fbbc37bb7e7f1c6823610e150fd1e256",
       class: "wrapper"
     }, i("header", {
-      key: "84ddd7d53237e38fe42f4760a71526e560856305",
+      key: "c02e2e531cb0ad833752f9254b95f6eb76d8b317",
       class: t ? "has-header" : ""
     }, i("div", {
-      key: "b0574a853b76014816a5eac89a2c6cf9eabbb52d",
+      key: "7d3b12f0640b7dd8b49bbca7ce710f6bb75325a2",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, r && i("h2", {
-      key: "89265a8681b994611de1f858b47b3424aaf2c77a",
+      key: "7552c47106c63ce813145a13bf29e6fa4db74c58",
       class: "title"
     }, c(this.label)), i("div", {
-      key: "735702090c9b6744c7575f71260dec2a10f2032e",
+      key: "4823d86d58f2a214a31987b8892802d861388a5d",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, i("slot", {
-      key: "25d45885176b19c778fd8a5698f17c33c6daef45",
+      key: "f70123a46f2077c23cb0a25c56e83d59e3432485",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
-      key: "27549707494cde6a1be6d2eaac5f41b6ba0cbd10",
+      key: "7330e6657cd6eeb8e448a04b2b3530e3843d1763",
       label: c(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: `${!!this.expanded}`,
       ariaControls: this.contentId,
@@ -217,10 +217,10 @@ const p = class {
       "hide-label": true,
       onClick: this.onHeaderClick
     }, i("q2-icon", {
-      key: "66e2fcb947a4b49c4d39b432304c6ef9a22254c3",
+      key: "8a953908c20c980198ad77e66b41d5da3337ea28",
       type: "chevron-up"
     }))), i("div", {
-      key: "82cbe836aea28dcde1f34edeab8efae89d3a10d5",
+      key: "caa5b37b95099c0959b048f6d7f030c1e0bdf16f",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -230,12 +230,12 @@ const p = class {
         height: this.contentHeight
       }
     }, i("div", {
-      key: "ce7c2e8bfb7f1c8fc8c5a1d8de241d9c509db9bb",
+      key: "c4e83982d85944756eb7f9f379a3671ce7faee6b",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, i("slot", {
-      key: "a564c7267342a8de26e25b8a0083c3708ea46cab",
+      key: "336a133e83f81a21da1e3008b0b4f35ffe25a4a6",
       ref: t => this.contentSlot = t
     }))));
   }