q2-tecton-elements 1.36.0 → 1.37.0

package/dist/esm/q2-loc.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-ebc7f269.js';
-import { l as loc } from './index-35ff2881.js';
+import { l as loc } from './index-74a659a5.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}: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}";
 

package/dist/esm/q2-message.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-ebc7f269.js';
-import { j as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement } from './index-35ff2881.js';
+import { j as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement, l as loc } from './index-74a659a5.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}: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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";
 
@@ -36,21 +36,22 @@ const Q2Message = class {
     const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;
     const addDivForAriaLive = !isFirefox && this.presentToggle;
     const { description } = this;
-    return (h("div", { tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? generateIcon(this.type) : '', addDivForAriaLive && h("div", { class: "sr" }), h("div", { class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", null))));
+    const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
+    return (h("div", { tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { class: "sr" }), h("div", { class: "sr message-label" }, messageLabel), h("div", { class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", null))));
+  }
+  messageIcon(type) {
+    const iconMap = {
+      success: 'success',
+      warning: 'warning',
+      danger: 'error',
+      error: 'error',
+      info: 'info',
+    };
+    const iconType = iconMap[type] || iconMap.info;
+    return (h("q2-icon", { type: iconType, class: "message-icon" }));
   }
   get hostElement() { return getElement(this); }
 };
-function generateIcon(type) {
-  const iconMap = {
-    success: 'success',
-    warning: 'warning',
-    danger: 'error',
-    error: 'error',
-    info: 'info',
-  };
-  const icon = iconMap[type] || iconMap.info;
-  return (h("q2-icon", { type: icon, class: "message-icon" }));
-}
 Q2Message.style = stylesCss;
 
 export { Q2Message as q2_message };

package/dist/esm/q2-message.entry.js.map

@@ -1 +1 @@
-{"file":"q2-message.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,8yIAA8yI;;MCQnzI,SAAS;;;gBACmE,MAAM;sBAC7B,UAAU;uBACxB,KAAK;;;EAMrD,IAAI,SAAS;IACT,OAAOA,SAAc,EAAE,CAAC;GAC3B;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EAGD,MAAM,OAAO;IACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS;MAAE,OAAO;IACvB,SAAS,CAAC;MACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B,CAAC,CAAC;GACN;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9E;EAED,MAAM;IACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAC7B,QACI,WACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,GAAG,SAAS,GAAG,KAAK,aACtC,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EAC7D,iBAAiB,IAAI,WAAK,KAAK,EAAC,IAAI,GAAO,EAC5C,WACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1D,eAAQ,CACN,CACJ,EACR;GACL;;;AAGL,SAAS,YAAY,CAAC,IAAY;EAC9B,MAAM,OAAO,GAAG;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;GACf,CAAC;EAEF,MAAM,IAAI,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;EAEnD,QACI,eACI,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,cAAc,GACtB,EACJ;AACN,CAAC;;;;;","names":["checkIfFirefox"],"sources":["./src/components/q2-message/styles.scss?tag=q2-message&encapsulation=shadow","./src/components/q2-message/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n    padding-left: var-list(--tct-scale-l3, --app-scale-3x, 15px);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    }\n}\n\n:host([type='success']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    }\n}\n\n:host([type='warning']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-message',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Message {\n    @Prop({ reflect: true }) type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n    @Prop({ reflect: true }) appearance: 'minimal' | 'standard' = 'standard';\n    @Prop({ reflect: true }) description: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() presentToggle: boolean;\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? generateIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n\nfunction generateIcon(type: string) {\n    const iconMap = {\n        success: 'success',\n        warning: 'warning',\n        danger: 'error',\n        error: 'error',\n        info: 'info',\n    };\n\n    const icon: string = iconMap[type] || iconMap.info;\n\n    return (\n        <q2-icon\n            type={icon}\n            class=\"message-icon\"\n        />\n    );\n}\n"],"version":3}
+{"file":"q2-message.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,8yIAA8yI;;MCQnzI,SAAS;;;gBACmE,MAAM;sBAC7B,UAAU;uBACxB,KAAK;;;EAMrD,IAAI,SAAS;IACT,OAAOA,SAAc,EAAE,CAAC;GAC3B;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EAGD,MAAM,OAAO;IACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS;MAAE,OAAO;IACvB,SAAS,CAAC;MACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B,CAAC,CAAC;GACN;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9E;EAED,MAAM;IACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAC7B,MAAM,YAAY,GAAW,GAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;IAElG,QACI,WACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,GAAG,SAAS,GAAG,KAAK,aACtC,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAI,WAAK,KAAK,EAAC,IAAI,GAAO,EAC5C,WAAK,KAAK,EAAC,kBAAkB,IAAE,YAAY,CAAO,EAClD,WACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1D,eAAQ,CACN,CACJ,EACR;GACL;EAED,WAAW,CAAC,IAAY;IACpB,MAAM,OAAO,GAAG;MACZ,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE,SAAS;MAClB,MAAM,EAAE,OAAO;MACf,KAAK,EAAE,OAAO;MACd,IAAI,EAAE,MAAM;KACf,CAAC;IAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;IAEvD,QACI,eACI,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,GACtB,EACJ;GACL;;;;;;;","names":["checkIfFirefox"],"sources":["./src/components/q2-message/styles.scss?tag=q2-message&encapsulation=shadow","./src/components/q2-message/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n    padding-left: var-list(--tct-scale-l3, --app-scale-3x, 15px);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    }\n}\n\n:host([type='success']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    }\n}\n\n:host([type='warning']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-message',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Message {\n    @Prop({ reflect: true }) type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n    @Prop({ reflect: true }) appearance: 'minimal' | 'standard' = 'standard';\n    @Prop({ reflect: true }) description: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() presentToggle: boolean;\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n}\n"],"version":3}

package/dist/esm/q2-month-picker.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { l as loc, o as overrideFocus } from './index-35ff2881.js';
+import { l as loc, o as overrideFocus } from './index-74a659a5.js';
 
 const q2MonthPickerCss = "*{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 #33b4ff #06C)}: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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 

package/dist/esm/q2-optgroup_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-ebc7f269.js';
-import { c as createGuid, l as loc } from './index-35ff2881.js';
+import { c as createGuid, l as loc } from './index-74a659a5.js';
 
 const stylesCss$1 = "*{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 #33b4ff #06C)}: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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 

package/dist/esm/q2-option-list.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ebc7f269.js';
-import { n as nextPaint, l as loc, o as overrideFocus, w as waitForNextPaint, i as isEventFromElement } from './index-35ff2881.js';
+import { n as nextPaint, l as loc, o as overrideFocus, w as waitForNextPaint, i as isEventFromElement } from './index-74a659a5.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 

package/dist/esm/q2-pagination.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { n as nextPaint, o as overrideFocus, i as isEventFromElement, l as loc } from './index-35ff2881.js';
+import { n as nextPaint, o as overrideFocus, i as isEventFromElement, l as loc } from './index-74a659a5.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}: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{text-align:right;display:block;width:100%}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
 

package/dist/esm/q2-pill.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { r as resizeIframe, o as overrideFocus, l as loc, i as isEventFromElement } from './index-35ff2881.js';
+import { r as resizeIframe, o as overrideFocus, l as loc, i as isEventFromElement } from './index-74a659a5.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-bfcbe154.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary-l5, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary-l5, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary-l5, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary-l5, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary-l5, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary-l5, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";
@@ -152,9 +152,9 @@ const Q2Pill = class {
   get buttonContent() {
     const { label, selectedOptions, selectedOptionElements, optionCount } = this;
     if (!optionCount || selectedOptionElements.length === 0)
-      return label;
+      return loc(label);
     else if (selectedOptionElements.length === 1)
-      return selectedOptionElements[0].display;
+      return loc(selectedOptionElements[0].display);
     return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
   }
   get truncatedButtonContent() {

package/dist/esm/q2-pill.entry.js.map

@@ -1 +1 @@
-{"file":"q2-pill.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    :host(:not(:empty)) &,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary-l5, #61c4ff)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary-l5, #61c4ff)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary-l5, #d9e1e6)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary-l5, #d9e1e6)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary-l5, #f4fafe)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary-l5, #f4fafe)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentColor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n    tag: 'q2-pill',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true, mutable: true }) active: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) multiple: boolean;\n    @Prop({ reflect: true }) maxLength: number;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string;\n\n    @State() optionCount: number;\n    @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n    scheduledAfterRender: (() => void)[] = [];\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n    popoverElement: HTMLQ2PopoverElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return label;\n        else if (selectedOptionElements.length === 1) return selectedOptionElements[0].display;\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    /// Helpers ///\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value,\n            values,\n            active: isActive,\n        });\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    /// Watchers ///\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (multiple) return;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n    /// Event Handlers ///\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    /// DOM ///\n    generateIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={isButton && this.clearSelectedOptions}\n                disabled={isButton && this.disabled}\n                aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n                type={isButton && 'button'}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role=\"combobox\"\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={optionCount && 'option-list'}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.maxLength && this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.generateIcon()}\n                    {this.generateHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <q2-option-list\n                            type=\"listbox\"\n                            ref={el => (this.optionList = el)}\n                            id=\"option-list\"\n                            onChange={this.handleChange}\n                            multiple={this.multiple}\n                            selectedOptions={this.selectedOptions}\n                            onReady={() => this.updateSelectedOptionElements()}\n                            label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        >\n                            <slot />\n                        </q2-option-list>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-pill.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    :host(:not(:empty)) &,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary-l5, #61c4ff)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary-l5, #61c4ff)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary-l5, #d9e1e6)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary-l5, #d9e1e6)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary-l5, #f4fafe)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary-l5, #f4fafe)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentColor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n    tag: 'q2-pill',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true, mutable: true }) active: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) multiple: boolean;\n    @Prop({ reflect: true }) maxLength: number;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string;\n\n    @State() optionCount: number;\n    @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n    scheduledAfterRender: (() => void)[] = [];\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n    popoverElement: HTMLQ2PopoverElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    /// Helpers ///\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value,\n            values,\n            active: isActive,\n        });\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    /// Watchers ///\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (multiple) return;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n    /// Event Handlers ///\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    /// DOM ///\n    generateIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={isButton && this.clearSelectedOptions}\n                disabled={isButton && this.disabled}\n                aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n                type={isButton && 'button'}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role=\"combobox\"\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={optionCount && 'option-list'}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.maxLength && this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.generateIcon()}\n                    {this.generateHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <q2-option-list\n                            type=\"listbox\"\n                            ref={el => (this.optionList = el)}\n                            id=\"option-list\"\n                            onChange={this.handleChange}\n                            multiple={this.multiple}\n                            selectedOptions={this.selectedOptions}\n                            onReady={() => this.updateSelectedOptionElements()}\n                            label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        >\n                            <slot />\n                        </q2-option-list>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/q2-radio-group.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-ebc7f269.js';
-import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-35ff2881.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-74a659a5.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}: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-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-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-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}: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}";
 
@@ -100,6 +100,14 @@ const Q2RadioGroup = class {
       radio.groupTileLayout = tileLayout;
     });
   }
+  /// Methods ///
+  setValue(value) {
+    this.radioElements.forEach(radio => {
+      if (value !== radio.value)
+        return;
+      radio.click();
+    });
+  }
   onHostElementChange(event) {
     if (event.target === this.hostElement) {
       if (!this.hostElement.onchange) {

package/dist/esm/q2-radio-group.entry.js.map

@@ -1 +1 @@
-{"file":"q2-radio-group.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-radio-group/styles.scss?tag=q2-radio-group&encapsulation=shadow","./src/components/q2-radio-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-scale-2, --app-scale-2x, 10px);\n}\n\nfieldset {\n    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    gap: var-list(--app-scale-1x, 5px);\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\n.optional-tag {\n    margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(input-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(input-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-border-radius-1, --app-border-radius-1, 2px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #c30000);\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} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\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    /////// LIFECYCLE HOOK ///////\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    /////// OBSERVERS ///////\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    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\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    /////// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\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    labelDOM() {\n        const { label, optional, readonly } = this;\n        let helpText = '';\n        if (readonly) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        } else if (optional) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n        }\n        return (\n            <Fragment>\n                {label && loc(label)}\n                {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n            </Fragment>\n        );\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{this.labelDOM()}</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={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\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"],"version":3}
+{"file":"q2-radio-group.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2gFAA2gF;;MCoBhhF,YAAY;;;;IAerB,QAAG,GAAW,eAAe,UAAU,EAAE,EAAE,CAAC;IAO5C,uBAAkB,GAAG;MACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,IAAI,CAAC,eAAe,EAAE,CAAC;MACvB,IAAI,CAAC,eAAe,EAAE,CAAC;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,CAAC;IAEF,uBAAkB,GAAG,CAAC,KAAkB;MACpC,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAE1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;KACnD,CAAC;IAEF,uBAAkB,GAAG;;MAEjB,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,SAAS,CAAC;;MAGhG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,iBAAiB,EAAE;QACpC,IAAI,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC;OACxC;WAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,iBAAiB,EAAE;;QAE1C,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM;UAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;OACrE;KACJ,CAAC;;;oBA7C2C,KAAK;;;;;yBAKoB,QAAQ;oBACjC,KAAK;;;EASlD,IAAI,aAAa;IACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAyB,CAAC;GAC5F;;EA+BD,iBAAiB;IACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GACpD;EAED,gBAAgB;IACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACjC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC7B;;EAKD,YAAY,CAAC,MAAc;IACvB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,OAAO,GAAG,MAAM,KAAK,KAAK,CAAC,KAAK,CAAC;;MAEvC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;QAChB,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;OACvB;WAAM,IAAI,KAAK,CAAC,OAAO,EAAE;QACtB,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;OACtB;KACJ,CAAC,CAAC;GACN;EAGD,WAAW;IACP,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC;KACtC,CAAC,CAAC;GACN;EAGD,eAAe;IACX,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;KACvC,CAAC,CAAC;GACN;EAGD,eAAe;IACX,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;GACzE;EAGD,0BAA0B,CAAC,UAAmB;IAC1C,IAAI,OAAO,UAAU,KAAK,SAAS;MAAE,OAAO;IAC5C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;GAC/B;EAGD,iBAAiB,CAAC,UAAmB;IACjC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,eAAe,GAAG,UAAU,CAAC;KACtC,CAAC,CAAC;GACN;;EAID,QAAQ,CAAC,KAAa;IAClB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,IAAI,KAAK,KAAK,KAAK,CAAC,KAAK;QAAE,OAAO;MAClC,KAAK,CAAC,KAAK,EAAE,CAAC;KACjB,CAAC,CAAC;GACN;EAOD,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;MACnC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;OACnC;KACJ;GACJ;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAChH,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;GACjD;EAGD,cAAc,CAAC,KAAoB;IAC/B,MAAM,YAAY,GAAI,KAAK,CAAC,MAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;IACvF,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CACpC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,MAAM,IAAK,EAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,YAAY,CAC1F,CAAC;IACF,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,QAAQ,KAAK,CAAC,GAAG;MACb,KAAK,WAAW,CAAC;MACjB,KAAK,SAAS;QACV,IAAI,GAAG,CAAC,CAAC,CAAC;QACV,MAAM;MAEV,KAAK,YAAY,CAAC;MAClB,KAAK,WAAW;QACZ,IAAI,GAAG,CAAC,CAAC;QACT,MAAM;KACb;IAED,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;MAC5B,OAAO;KACV;IACD,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;IACvF,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;KAChD;IACD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;GACpE;EAED,QAAQ;IACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC3C,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,QAAQ,EAAE;MACV,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;SAAM,IAAI,QAAQ,EAAE;MACjB,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;IACD,QACI,EAAC,QAAQ,QACJ,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,EACnB,CAAC,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,QAAQ,CAAQ,CACpD,EACb;GACL;EAED,MAAM;IACF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC1B,MAAM,YAAY,GAAG,SAAS,IAAI,QAAQ,CAAC;IAC3C,QACI,EAAC,QAAQ,QACJ,YAAY,KACT,WAAK,KAAK,EAAC,WAAW,IACjB,SAAS,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,EAAE,CAAO,EAC9D,QAAQ,KACL,eACI,IAAI,EAAC,OAAO,aACJ,WAAW,GACZ,CACd,CACC,CACT,EACD,gBACI,QAAQ,EAAE,IAAI,CAAC,kBAAkB,kBACnB,GAAG,IAAI,CAAC,QAAQ,EAAE,IAE/B,SAAS,IAAI,cAAQ,KAAK,EAAC,IAAI,IAAE,IAAI,CAAC,QAAQ,EAAE,CAAU,EAC1D,IAAI,CAAC,QAAQ,EAAE,CACT,CACJ,EACb;GACL;EAED,QAAQ;IACJ,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;MAC/B,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,aAAa,GAAG,QAAQ,CAAC;MACjG,QACI,WAAK,KAAK,EAAE,kBAAkB,SAAS,EAAE,IACrC,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,CACJ,EACR;KACL;SAAM;MACH,QACI,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,EACR;KACL;GACJ;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/q2-radio-group/styles.scss?tag=q2-radio-group&encapsulation=shadow","./src/components/q2-radio-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-scale-2, --app-scale-2x, 10px);\n}\n\nfieldset {\n    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    gap: var-list(--app-scale-1x, 5px);\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\n.optional-tag {\n    margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(input-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(input-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-border-radius-1, --app-border-radius-1, 2px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #c30000);\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, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\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    /////// LIFECYCLE HOOK ///////\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    /////// OBSERVERS ///////\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    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\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    /// Methods ///\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\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    labelDOM() {\n        const { label, optional, readonly } = this;\n        let helpText = '';\n        if (readonly) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        } else if (optional) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n        }\n        return (\n            <Fragment>\n                {label && loc(label)}\n                {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n            </Fragment>\n        );\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{this.labelDOM()}</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={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\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"],"version":3}

package/dist/esm/q2-radio.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-35ff2881.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-74a659a5.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}: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);font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.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))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.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-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.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-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-color);align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));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:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-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}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid 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}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 
@@ -11,7 +11,7 @@ const Q2Radio = class {
     this.isLoaded = false;
     this.inputChange = (event) => {
       event.stopPropagation();
-      if (this.groupReadonly) {
+      if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {
         event.preventDefault();
         return false;
       }
@@ -24,6 +24,7 @@ const Q2Radio = class {
     this.value = undefined;
     this.disabled = false;
     this.checked = false;
+    this.readonly = undefined;
     this.tabIndex = 0;
     this.name = undefined;
     this.groupDisabled = false;
@@ -38,7 +39,10 @@ const Q2Radio = class {
   componentDidLoad() {
     this.isLoaded = true;
     overrideFocus(this.hostElement);
-    this.hostElement.click = () => this.inputField.click();
+    this.hostElement.click = () => {
+      this.inputField.focus();
+      this.inputField.click();
+    };
   }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
@@ -56,6 +60,11 @@ const Q2Radio = class {
     if (this.disabled) {
       event.stopImmediatePropagation();
     }
+    else if (this.groupReadonly) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.inputField.focus();
+    }
   }
   delegateFocus(event) {
     if (event.target === this.hostElement) {

package/dist/esm/q2-radio.entry.js.map

@@ -1 +1 @@
-{"file":"q2-radio.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-radio/styles.scss?tag=q2-radio&encapsulation=shadow","./src/components/q2-radio/index.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-color);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        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\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    }\n\n    circle:nth-child(1) {\n        stroke-width: 2;\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n    }\n\n    input {\n        &:focus {\n            & + label svg {\n                box-shadow: var(--const-double-focus-ring);\n            }\n            & + label circle:nth-child(1) {\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        }\n\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-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(--tct-checkbox-selected-letter-spacing, 0.25);\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}\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-color);\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        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        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n        }\n\n        &:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: inset 0 0 0 2px #ffffff;\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\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}\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';\n\n@Component({\n    tag: 'q2-radio',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) checked: boolean = false;\n    @Prop() tabIndex: number = 0;\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) name: string;\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false }) groupDisabled: boolean = false;\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false }) groupReadonly: boolean = false;\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    @Event() change: EventEmitter;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputField.click();\n    }\n\n    ////////// OBSERVERS //////////\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        this.change.emit({ value: this.value });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.groupReadonly) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\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                    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"],"version":3}
+{"file":"q2-radio.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,mmHAAmmH;;MCQxmH,OAAO;;;;IAiChB,QAAG,GAAW,SAAS,UAAU,EAAE,EAAE,CAAC;IAEtC,aAAQ,GAAY,KAAK,CAAC;IAoD1B,gBAAW,GAAG,CAAC,KAAY;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;QAC5E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;OACvC;KACJ,CAAC;;;;oBA7F2C,KAAK;mBACS,KAAK;;oBAErC,CAAC;;yBAUuB,KAAK;yBAKL,KAAK;2BAKH,KAAK;;;;EAc1D,iBAAiB;IACb,eAAe,CAAC,IAAI,CAAC,CAAC;GACzB;EAED,gBAAgB;IACZ,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG;MACrB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;MACxB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KAC3B,CAAC;GACL;;EAKD,iBAAiB;IACb,eAAe,CAAC,IAAI,CAAC,CAAC;GACzB;EAGD,eAAe;IACX,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC3B,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO;IAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;GAC3C;;EAID,WAAW,CAAC,KAAY;IACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,KAAK,CAAC,wBAAwB,EAAE,CAAC;KACpC;SAAM,IAAI,IAAI,CAAC,aAAa,EAAE;MAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KAC3B;GACJ;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;MACnC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KAC3B;GACJ;EAcD,MAAM;IACF,QACI,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,GAAG,YAAY,GAAG,iBAAiB,IAC/D,aACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAC,IAAI,EACV,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAC7C,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,EACtE,QAAQ,EAAE,IAAI,CAAC,WAAW,aAClB,sBAAsB,GACzB,EAET,aACI,OAAO,EAAE,IAAI,CAAC,GAAG,aACT,aAAa,IAEpB,CAAC,IAAI,CAAC,eAAe,KAClB,WAAK,OAAO,EAAC,WAAW,IACpB,cACI,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,GACP,EACF,cACI,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,GACP,CACA,CACT,EACA,CAAC,IAAI,CAAC,SAAS,KACZ,WAAK,KAAK,EAAC,eAAe,IACrB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACtC,eAAa,CACX,CACT,CACG,CACN,EACR;GACL;;;;;;;;;;;","names":[],"sources":["./src/components/q2-radio/styles.scss?tag=q2-radio&encapsulation=shadow","./src/components/q2-radio/index.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-color);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        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\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    }\n\n    circle:nth-child(1) {\n        stroke-width: 2;\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n    }\n\n    input {\n        &:focus {\n            & + label svg {\n                box-shadow: var(--const-double-focus-ring);\n            }\n            & + label circle:nth-child(1) {\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        }\n\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-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(--tct-checkbox-selected-letter-spacing, 0.25);\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}\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-color);\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        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        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n        }\n\n        &:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: inset 0 0 0 2px #ffffff;\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\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}\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';\n\n@Component({\n    tag: 'q2-radio',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop() tabIndex: number = 0;\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) name: string;\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false }) groupDisabled: boolean = false;\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false }) groupReadonly: boolean = false;\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    @Event() change: EventEmitter;\n\n    ////////// LIFECYCLE HOOKS ////////\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    ////////// OBSERVERS //////////\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        this.change.emit({ value: this.value });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\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    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    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                    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"],"version":3}

package/dist/esm/q2-section.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index-35ff2881.js';
+import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index-74a659a5.js';
 
 const stylesCss = "*{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 #33b4ff #06C)}: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, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)))}@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:0;font-size:20px;font-weight:600;text-transform:uppercase;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}";