q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { o as overrideFocus, l as loc, i as isEventFromElement } from './index13.js';
+import { o as overrideFocus, l as loc, i as isEventFromElement } from './index15.js';
 import { d as defineCustomElement$3 } from './index2.js';
 import { d as defineCustomElement$2 } from './index7.js';
-import { aG as normalizeCssArray, Z as Rect, _ as __extends, w as ComponentModel, aH as toCamelCase, aI as env, aJ as normalizeEvent, aK as convertToColorString, ai as isString, j as isArray, aL as isDom, e as each$1, aM as bind, P as indexOf, aN as getPaddingFromTooltipModel, aO as transformLocalCoord, N as isObject, aP as throwError, ab as ZRText, aQ as getTooltipRenderMode, aR as createOrUpdate, aS as clear, aT as register, ae as getECData, aU as findPointFromSeries, aV as findEventDispatcher, aW as createTooltipMarkup, aX as getValueLabel, aY as trim, aZ as getAxisRawValue, a_ as normalizeTooltipFormatResult, a$ as buildTooltipMarkup, b0 as clone, b1 as format, b2 as formatTpl, i as isFunction, b3 as parsePercent, L as getLayoutRect, b4 as unregister, a7 as ComponentView, b5 as Model, b6 as preParseFinder, b7 as queryReferringComponents, b8 as TooltipMarkupStyleCreator, a2 as extend, a8 as use, a9 as install$5, b9 as noop, y as merge, ba as isNameSpecified, c as createHashMap, g as map, E as filter, an as isNumber, z as defaults, bb as parse, bc as stringify, av as setLabelStyle, bd as enableHoverEmphasis, ac as createTextStyle, be as setTooltipConfig, bf as box, bg as createOrUpdatePatternFromDecal, bh as createSymbol, b as curry$1, $ as Group$2, A as getLayoutParams, ak as inheritDefaultOption, B as mergeLayoutParam, bi as createIcon, aa as retrieve2, ap as updateProps, u as linearMap, bj as Point, bk as limitTurnAngle, bl as limitSurfaceAngle, bm as shiftLayoutOnY, bn as parsePercent$1, ag as initProps, aq as saveOldStyle, ay as setStatesStylesFromModel, ax as toggleHoverEmphasis, au as getLabelStatesModels, bo as Polyline, bp as setLabelLineStyle, bq as retrieve3, br as getLabelLineStatesModels, ah as Sector, as as removeElementWithFadeOut, at as ChartView, p as prepareSeriesDataSchema, f as SeriesData, n as makeInner, bs as makeSeriesEncodeForNameBased, bt as getPercentSeats, bu as defaultEmphasis, aj as SeriesModel, bv as createLegacyDataSelectAction, aD as install$6, aC as install$7, aE as installLabelLayout, aF as init } from './installCanvasRenderer.js';
+import { al as normalizeCssArray, V as Rect, _ as __extends, am as ComponentModel, an as toCamelCase, ao as env, ap as normalizeEvent, x as convertToColorString, aq as isString, a0 as isArray, ar as isDom, I as each$1, as as bind, at as indexOf, au as getPaddingFromTooltipModel, av as transformLocalCoord, j as isObject, aw as throwError, E as ZRText, ax as getTooltipRenderMode, ay as createOrUpdate, az as clear, aA as register, d as getECData, aB as findPointFromSeries, aC as findEventDispatcher, aD as createTooltipMarkup, aE as getValueLabel, aF as trim, aG as getAxisRawValue, aH as normalizeTooltipFormatResult, aI as buildTooltipMarkup, aJ as clone, aK as format, aL as formatTpl, D as isFunction, aM as parsePercent, aN as getLayoutRect, aO as unregister, aP as ComponentView, aQ as Model, aR as preParseFinder, aS as queryReferringComponents, aT as TooltipMarkupStyleCreator, a as extend, a9 as use, aU as install$5, aV as noop, aW as merge, aX as isNameSpecified, a6 as createHashMap, m as map, a5 as filter, o as isNumber, y as defaults, aY as parse, aZ as stringify, b as setLabelStyle, a_ as enableHoverEmphasis, a$ as createTextStyle, b0 as setTooltipConfig, b1 as box, b2 as createOrUpdatePatternFromDecal, c as createSymbol, ai as curry$1, G as Group$2, b3 as getLayoutParams, ad as inheritDefaultOption, b4 as mergeLayoutParam, b5 as createIcon, b6 as retrieve2, u as updateProps, b7 as linearMap, W as Point, b8 as shiftLayoutOnY, b9 as parsePercent$1, i as initProps, s as saveOldStyle, z as setStatesStylesFromModel, t as toggleHoverEmphasis, g as getLabelStatesModels, ba as Polyline, bb as retrieve3, U as Sector, af as removeElementWithFadeOut, C as ChartView, bc as prepareSeriesDataSchema, bd as SeriesData, a3 as makeInner, be as makeSeriesEncodeForNameBased, bf as getPercentSeats, bg as defaultEmphasis, S as SeriesModel, bh as createLegacyDataSelectAction, ab as install$6, aa as install$7, ac as init } from './installCanvasRenderer.js';
+import { l as limitTurnAngle, a as limitSurfaceAngle, s as setLabelLineStyle, g as getLabelLineStatesModels, i as installLabelLayout } from './installLabelLayout.js';
 
 function makeBackground(rect, componentModel) {
   var padding = normalizeCssArray(componentModel.get('padding'));
@@ -4575,7 +4576,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.chart = chart;
     overrideFocus(this.hostElement);
   }
-  willDestroyElement() {
+  disconnectedCallback() {
     this.resizeObserver = null;
   }
   /// Getters ///

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createGuid, l as loc } from './index13.js';
+import { c as createGuid, l as loc } from './index15.js';
 import { d as defineCustomElement$2 } from './index7.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:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, white)))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";

package/dist/components/q2-checkbox.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index13.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index15.js';
 import { d as defineCustomElement$2 } from './index7.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;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
+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;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
 
 const Q2Checkbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/q2-dropdown.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { s as setPopProperties, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index13.js';
+import { s as setPopProperties, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index15.js';
 import { d as defineCustomElement$6 } from './index2.js';
 import { d as defineCustomElement$5 } from './index5.js';
 import { d as defineCustomElement$4 } from './index6.js';
@@ -289,7 +289,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "icon": [513],
     "label": [513],
     "hideLabel": [516, "hide-label"],
-    "ariaLabel": [513, "aria-label"],
+    "ariaLabel": [1537, "aria-label"],
     "disabled": [516],
     "popDirection": [513, "pop-direction"],
     "name": [513],

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index13.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index15.js';
 import { d as defineCustomElement$6 } from './index4.js';
 import { d as defineCustomElement$5 } from './index5.js';
 import { d as defineCustomElement$4 } from './index7.js';

package/dist/components/q2-loading-element.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { a as atoms } from './shapes.js';
 
-const stylesCss = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";
+const stylesCss = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";
 
 const Q2Loading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/q2-loc.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { l as loc } from './index13.js';
+import { l as loc } from './index15.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/components/q2-month-picker.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, o as overrideFocus } from './index13.js';
+import { l as loc, o as overrideFocus } from './index15.js';
 import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index7.js';
 import { d as defineCustomElement$2 } from './index9.js';

package/dist/components/q2-optgroup.js

@@ -1,73 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as createGuid, l as loc } from './index13.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}.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-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));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:var(--comp-multi-select-header-height, 0);z-index:1}";
-
-const Q2Optgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.guid = createGuid();
-    this.setHidden = () => {
-      this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
-    };
-    this.disabled = false;
-    this.label = undefined;
-    this.hidden = false;
-  }
-  /// LIFECYCLE HOOKS ///
-  componentWillLoad() {
-    const observer = new MutationObserver(this.setHidden);
-    observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
-    this.mutationObserver = observer;
-    // set initially
-    this.setHidden();
-    this.disabledWatcher(this.disabled);
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
-    this.mutationObserver = null;
-  }
-  get headerId() {
-    return `q2-optgroup-header-${this.guid}`;
-  }
-  get options() {
-    return Array.from(this.hostElement.querySelectorAll('q2-option'));
-  }
-  ///// OBSERVERS ///////
-  disabledWatcher(disabled) {
-    this.options.forEach(opt => {
-      opt.disabledGroup = !!disabled;
-    });
-  }
-  render() {
-    return (h("div", { class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { class: "q2-optgroup-options" }, h("slot", null))));
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "disabled": ["disabledWatcher"]
-  }; }
-  static get style() { return stylesCss; }
-}, [1, "q2-optgroup", {
-    "disabled": [516],
-    "label": [513],
-    "hidden": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["q2-optgroup"];
-  components.forEach(tagName => { switch (tagName) {
-    case "q2-optgroup":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Optgroup$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { Q as Q2Optgroup$1, d as defineCustomElement$1 } from './index11.js';
 
 const Q2Optgroup = Q2Optgroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-option-list.js

@@ -1,4 +1,4 @@
-import { Q as Q2OptionList$1, d as defineCustomElement$1 } from './index11.js';
+import { Q as Q2OptionList$1, d as defineCustomElement$1 } from './index13.js';
 
 const Q2OptionList = Q2OptionList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-option.js

@@ -1,79 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './index7.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{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
-
-const Q2Option$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.role = 'option';
-    this.tabindex = '-1';
-    this.display = undefined;
-    this.value = undefined;
-    this.disabled = undefined;
-    this.optionId = undefined;
-    this.disabledGroup = undefined;
-    this.selected = undefined;
-    this.hidden = undefined;
-    this.multiline = undefined;
-    this.active = undefined;
-    this.noSelect = undefined;
-    this._multiSelectHidden = false;
-  }
-  componentWillLoad() {
-    this.handleDisplay();
-  }
-  handleDisplay() {
-    if (this.display || this.multiline)
-      return;
-    this.display = this.hostElement.textContent.trim();
-  }
-  render() {
-    const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
-    const isDisabled = disabled || disabledGroup;
-    return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-  static get style() { return stylesCss; }
-}, [1, "q2-option", {
-    "role": [513],
-    "tabindex": [513],
-    "display": [1025],
-    "value": [513],
-    "disabled": [516],
-    "optionId": [513, "option-id"],
-    "disabledGroup": [516, "disabled-group"],
-    "selected": [516],
-    "hidden": [516],
-    "multiline": [516],
-    "active": [516],
-    "noSelect": [516, "_no-select"],
-    "_multiSelectHidden": [516, "_multiselecthidden"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["q2-option", "q2-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "q2-option":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Option$1);
-      }
-      break;
-    case "q2-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { Q as Q2Option$1, d as defineCustomElement$1 } from './index12.js';
 
 const Q2Option = Q2Option$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-pagination.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { o as overrideFocus, i as isEventFromElement, l as loc, n as nextPaint } from './index13.js';
+import { o as overrideFocus, i as isEventFromElement, l as loc, n as nextPaint } from './index15.js';
 import { d as defineCustomElement$6 } from './index4.js';
 import { d as defineCustomElement$5 } from './index5.js';
 import { d as defineCustomElement$4 } from './index7.js';

package/dist/components/q2-pill.js

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, l as loc, i as isEventFromElement } from './index13.js';
+import { r as resizeIframe, o as overrideFocus, l as loc, i as isEventFromElement } from './index15.js';
+import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
 import { d as defineCustomElement$5 } from './index2.js';
 import { d as defineCustomElement$4 } from './index7.js';
-import { d as defineCustomElement$3 } from './index11.js';
-import { d as defineCustomElement$2 } from './index12.js';
+import { d as defineCustomElement$3 } from './index13.js';
+import { d as defineCustomElement$2 } from './index14.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)));--compt-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(--t-primary-l5, #61c4ff);--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-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-gray-9, #999999)));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{position:relative;top:calc((var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2 * -1)}";
+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)));--compt-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(--t-primary-l5, #61c4ff);--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-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-gray-9, #999999)));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)}";
 
 const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,9 +14,17 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.change = createEvent(this, "change", 7);
+    var _a;
     this.scheduledAfterRender = [];
     this.activateFirstOption = false;
     /// Helpers ///
+    this.updateSelectedOptionElements = async () => {
+      var _a;
+      const { selectedOptions } = this;
+      const selectedValues = selectedOptions.map(option => option.value);
+      const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+      this.selectedOptionElements = options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value));
+    };
     this.determineHasOptions = () => {
       const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
       this.hasOptions = hasOptions;
@@ -35,7 +44,12 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         return;
       if (this.hasOptions) {
         this.activateFirstOption = false;
-        await this.popoverElement.toggle();
+        if (shouldShowActionSheet(this)) {
+          this.executeActionSheet(event);
+        }
+        else {
+          await this.popoverElement.toggle();
+        }
       }
       else {
         const { value, label } = this;
@@ -49,23 +63,22 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         });
       }
     };
-    this.handleKeydown = (event) => {
+    this.handleKeydown = async (event) => {
       if (!this.hasOptions || this.disabled)
         return;
-      this.activateFirstOption = true;
-      this.optionList.handleExternalKeydown(event);
+      if (shouldShowActionSheet(this, event)) {
+        this.executeActionSheet(event);
+      }
+      else {
+        this.activateFirstOption = true;
+        this.optionList.handleExternalKeydown(event);
+      }
     };
     this.handleChange = event => {
       event.stopPropagation();
       if (!this.hasOptions)
         return;
-      const { value, values } = event.detail;
-      const isActive = !!values.length;
-      if (!this.hostElement.onchange) {
-        this.selectedOptions = values;
-        this.active = isActive;
-      }
-      this.change.emit({ value, values, active: isActive });
+      this.handleSelectionChanges(event.detail);
     };
     this.handleWrapperClick = () => {
       this.primaryBtn.focus();
@@ -78,6 +91,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.popoverElement.open = false;
       }
     };
+    this.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
     this.disabled = undefined;
     this.active = undefined;
     this.open = undefined;
@@ -90,6 +104,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
     this.hasOptions = undefined;
+    this.selectedOptionElements = [];
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
@@ -110,11 +125,11 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /// Getters ///
   get buttonContent() {
-    const { label, selectedOptions, hasOptions } = this;
-    if (!hasOptions || selectedOptions.length === 0)
+    const { label, selectedOptions, selectedOptionElements, hasOptions } = this;
+    if (!hasOptions || selectedOptionElements.length === 0)
       return label;
-    else if (selectedOptions.length === 1)
-      return selectedOptions[0].display;
+    else if (selectedOptionElements.length === 1)
+      return selectedOptionElements[0].display;
     return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
   }
   get truncatedButtonContent() {
@@ -124,6 +139,27 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     else
       return buttonContent;
   }
+  async executeActionSheet(event) {
+    const result = await showActionSheetList(this, event);
+    this.handleSelectionChanges(result);
+  }
+  handleSelectionChanges(changeDetails) {
+    const { value = '', values = [] } = changeDetails;
+    const isActive = !!values.length;
+    if (!this.hostElement.onchange) {
+      this.selectedOptions = values;
+      this.active = isActive;
+    }
+    this.change.emit({
+      value,
+      values,
+      active: isActive,
+    });
+  }
+  /// Watchers ///
+  selectedOptionsWatcher() {
+    this.updateSelectedOptionElements();
+  }
   /// Listeners ///
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
@@ -157,11 +193,15 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       wrapperClassNames.push('has-icon');
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtnWrapper, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection }, h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions }, h("slot", null))))));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtnWrapper, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements() }, h("slot", null))))));
   }
   get hostElement() { return this; }
+  static get watchers() { return {
+    "selectedOptions": ["selectedOptionsWatcher"]
+  }; }
   static get style() { return stylesCss; }
 }, [1, "q2-pill", {
+    "hoist": [4],
     "disabled": [516],
     "active": [1540],
     "open": [1540],
@@ -173,7 +213,8 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "selectedOptions": [1040],
     "popoverMinHeight": [2, "popover-min-height"],
     "popoverDirection": [1, "popover-direction"],
-    "hasOptions": [32]
+    "hasOptions": [32],
+    "selectedOptionElements": [32]
   }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/q2-popover.js

@@ -1,4 +1,4 @@
-import { Q as Q2Popover$1, d as defineCustomElement$1 } from './index12.js';
+import { Q as Q2Popover$1, d as defineCustomElement$1 } from './index14.js';
 
 const Q2Popover = Q2Popover$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index13.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index15.js';
 import { d as defineCustomElement$2 } from './index7.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}";

package/dist/components/q2-radio.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index13.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index15.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{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}.radio-container label[for]{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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}.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){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.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]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));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:#0079c1;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-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;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))}";
 
@@ -73,13 +73,13 @@ const Q2Radio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return stylesCss; }
 }, [1, "q2-radio", {
-    "label": [513],
+    "label": [1537],
     "hideLabel": [516, "hide-label"],
     "value": [513],
     "disabled": [516],
     "checked": [516],
     "name": [513],
-    "ariaLabel": [513, "aria-label"],
+    "ariaLabel": [1537, "aria-label"],
     "groupDisabled": [4, "group-disabled"],
     "groupReadonly": [4, "group-readonly"],
     "groupTileLayout": [4, "group-tile-layout"]

package/dist/components/q2-section.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index13.js';
+import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index15.js';
 import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index7.js';
 import { d as defineCustomElement$2 } from './index9.js';