q2-tecton-elements 1.28.3 → 1.29.0

package/dist/collection/components/q2-data-table/styles.css

@@ -0,0 +1,192 @@
+* {
+  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;
+}
+
+.container {
+  --comp-cell-padding: var(--tct-table-cell-padding, var(--app-scale-3x, 15px));
+  --comp-select-column-width: var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px));
+  --comp-dropdown-column-width: var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px));
+  --comp-expandable-row-control-column-width: var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px));
+  overflow: auto;
+}
+:host([shadowed]:not([shadowed=false])) .container {
+  box-shadow: var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));
+}
+:host([density=compact]) .container {
+  --comp-cell-padding: var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px));
+}
+:host([density=comfortable]) .container {
+  --comp-cell-padding: var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px));
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: var(--tct-table-width);
+  min-width: 100%;
+  background: var(--tct-table-background, var(--t-base, #ffffff));
+  caption-side: var(--tct-table-caption-side, bottom);
+}
+
+thead {
+  border-width: var(--tct-table-header-border-width, 0 0 2px 0);
+  border-style: var(--tct-table-header-border-style, solid);
+  border-color: var(--tct-table-header-border-color, var(--t-gray-9, #999999));
+  background: var(--tct-table-header-background);
+}
+
+col.select-column {
+  width: var(--comp-select-column-width);
+}
+col.expandable-row-control-column {
+  width: var(--comp-expandable-row-control-column-width);
+}
+col.dropdown-column {
+  width: var(--comp-dropdown-column-width);
+}
+
+td,
+th {
+  padding: var(--comp-cell-padding);
+  text-align: start;
+}
+td.align-end,
+th.align-end {
+  text-align: end;
+}
+td.align-center,
+th.align-center {
+  text-align: center;
+}
+
+th .header-content {
+  font-weight: var(--tct-table-header-font-weight, 400);
+}
+th.sorted .header-content {
+  font-weight: var(--tct-table-header-sorted-font-weight, 600);
+}
+th .sorted-indicator {
+  --comp-header-sortable-icon-size: var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px));
+  --tct-icon-stroke-width: 2;
+  width: var(--comp-header-sortable-icon-size);
+  height: var(--comp-header-sortable-icon-size);
+}
+th .sorted-indicator.direction-ASC {
+  transform: rotate(180deg);
+}
+th q2-btn .header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--tct-table-header-content-gap, var(--app-scale-2x, 10px));
+}
+
+td.expandable-row-control-column {
+  --tct-btn-icon-hover-bg: transparent;
+  padding: var(--tct-table-expandable-row-control-column-padding, 0 var(--app-scale-1x, 5px));
+}
+td.dropdown-column {
+  padding: var(--tct-table-dropdown-column-padding, 0 var(--app-scale-1x, 5px));
+}
+
+tbody tr.expandable {
+  cursor: pointer;
+}
+tbody tr.expandable:hover {
+  background: var(--tct-table-expandable-row-background, var(--t-gray-14, #f2f2f2));
+}
+:host([bordered]:not([bordered=false])) tbody tr {
+  border-width: var(--tct-table-row-border-width, 0 0 1px 0);
+  border-style: var(--tct-table-row-border-style, solid);
+  border-color: var(--tct-table-row-border-color, var(--t-gray-9, #999999));
+}
+tbody.expandable-row.loading-row {
+  background: var(--tct-table-loading-row-background, var(--t-base, #ffffff));
+}
+tbody.expandable-row.loading-row td {
+  text-align: center;
+}
+tbody.expandable-row.loading-row q2-loading {
+  font-size: 4em;
+}
+tbody.expandable-row.open .toggle-expandable-row {
+  transform: rotate(180deg);
+}
+
+caption {
+  padding: var(--tct-table-caption-padding, var(--app-scale-2x, 10px));
+  font-size: var(--tct-table-caption-font-size, inherit);
+  font-weight: var(--tct-table-caption-font-weight, 600);
+  text-align: var(--tct-table-caption-text-align, center);
+  color: var(--tct-table-caption-color, inherit);
+}
+
+q2-checkbox {
+  padding: 0;
+}

package/dist/collection/components/q2-input/styles.css

@@ -107,7 +107,7 @@ label {
 }
 
 .input-container {
-  background-color: var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)));
+  background: var(--tct-input-background, var(--t-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))));
   display: flex;
   align-items: center;
   --comp-input-horizontal-gap: var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));

package/dist/collection/components/q2-popover/index.js

@@ -76,7 +76,7 @@ export class Q2Popover {
     this.show = true;
   }
   async determinePopDirection() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
@@ -94,8 +94,9 @@ export class Q2Popover {
     const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) ||
       ((_d = window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) || // Only Android Chrome provides this which we need when scrolled
       0;
-    const innerHeight = ((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.innerHeight) || ((_g = window.visualViewport) === null || _g === void 0 ? void 0 : _g.height) || window.innerHeight;
-    const bottomOffset = scrollY + innerHeight - topOffset - height;
+    const outletOffset = scrollY + (((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.outletOffset) || 0);
+    const innerHeight = ((_h = (_g = window.Tecton) === null || _g === void 0 ? void 0 : _g.platformDimensions) === null || _h === void 0 ? void 0 : _h.innerHeight) || ((_j = window.visualViewport) === null || _j === void 0 ? void 0 : _j.height) || window.innerHeight;
+    const bottomOffset = scrollY + innerHeight - topOffset - height - outletOffset;
     const canShowFullSizeBelow = bottomOffset > contentHeight;
     const canShowFullSizeAbove = contentHeight <= topOffset;
     let determinedDirection;

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { Q2ChartBar as Q2ChartBar } from '../types/components/q2-chart-bar/index
 export { Q2ChartDonut as Q2ChartDonut } from '../types/components/q2-chart-donut/index';
 export { Q2Checkbox as Q2Checkbox } from '../types/components/q2-checkbox/index';
 export { Q2CheckboxGroup as Q2CheckboxGroup } from '../types/components/q2-checkbox-group/index';
+export { Q2DataTable as Q2DataTable } from '../types/components/q2-data-table/index';
 export { Q2Dropdown as Q2Dropdown } from '../types/components/q2-dropdown/index';
 export { Q2DropdownItem as Q2DropdownItem } from '../types/components/q2-dropdown-item/index';
 export { Q2EditableField as Q2EditableField } from '../types/components/q2-editable-field/index';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export { Q2ChartBar, defineCustomElement as defineCustomElementQ2ChartBar } from
 export { Q2ChartDonut, defineCustomElement as defineCustomElementQ2ChartDonut } from './q2-chart-donut.js';
 export { Q2Checkbox, defineCustomElement as defineCustomElementQ2Checkbox } from './q2-checkbox.js';
 export { Q2CheckboxGroup, defineCustomElement as defineCustomElementQ2CheckboxGroup } from './q2-checkbox-group.js';
+export { Q2DataTable, defineCustomElement as defineCustomElementQ2DataTable } from './q2-data-table.js';
 export { Q2Dropdown, defineCustomElement as defineCustomElementQ2Dropdown } from './q2-dropdown.js';
 export { Q2DropdownItem, defineCustomElement as defineCustomElementQ2DropdownItem } from './q2-dropdown-item.js';
 export { Q2EditableField, defineCustomElement as defineCustomElementQ2EditableField } from './q2-editable-field.js';

package/dist/components/index10.js

@@ -1,84 +1,101 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { p as isFirefox, o as overrideFocus, n as nextPaint, a as isEventFromElement } from './index15.js';
-import { d as defineCustomElement$1 } from './index7.js';
+import { l as loc, h as handleAriaLabel } from './index16.js';
+import { s as shapes } from './shapes.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-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, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}: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))}";
+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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.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%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
 
-const Q2Message = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2Loading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.type = 'info';
-    this.appearance = 'standard';
-    this.description = false;
-    this.presentToggle = undefined;
+    this.halfCircleSpinner = () => {
+      return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-label": this.localizedLabel }, h("div", { class: "circle circle-1" }), h("div", { class: "circle circle-2" })));
+    };
+    this.spinner = () => {
+      return this.halfCircleSpinner();
+    };
+    this.skeletonLoader = () => {
+      return (h("div", { class: "q2-loading-skeleton", "aria-label": this.localizedLabel }, this.shape === 'custom' ? h("slot", null) : this.skeletonShape, h("div", { class: "q2-loading-skeleton-shimmer" })));
+    };
+    this.type = undefined;
+    this.shape = undefined;
+    this.modifiers = undefined;
+    this.counts = undefined;
+    this.label = undefined;
+    this.inline = undefined;
+    this.ariaLabel = undefined;
   }
-  get isFirefox() {
-    return isFirefox();
+  get loader() {
+    const loaderMap = {
+      default: this.spinner,
+      spinner: this.spinner,
+      skeleton: this.skeletonLoader,
+    };
+    return loaderMap[this.type] || loaderMap.default;
   }
-  componentDidLoad() {
-    overrideFocus(this.hostElement);
+  get modifiersSet() {
+    if (this.type !== 'skeleton' || !this.modifiers) {
+      return undefined;
+    }
+    return new Set(this.modifiers.split('-'));
   }
-  async present() {
-    const { isFirefox } = this;
-    this.presentToggle = !this.presentToggle;
-    if (!isFirefox)
-      return;
-    nextPaint(() => {
-      this.presentToggle = false;
-    });
+  get countsArray() {
+    if (this.type !== 'skeleton' || !this.counts) {
+      return undefined;
+    }
+    return this.counts.split('x').map(Number);
   }
-  delegateFocus(event) {
-    if (!isEventFromElement(event, this.hostElement))
-      return;
-    this.hostElement.shadowRoot.querySelector('.message').focus();
+  get skeletonShape() {
+    var _a, _b;
+    return (_b = (_a = shapes[this.shape]) === null || _a === void 0 ? void 0 : _a.call(shapes, this.countsArray, this.modifiersSet)) !== null && _b !== void 0 ? _b : '';
+  }
+  get spinnerShape() {
+    const spinnerMap = {
+      default: this.halfCircleSpinner,
+      'half-circle': this.halfCircleSpinner,
+    };
+    return spinnerMap[this.type] || spinnerMap.default;
+  }
+  get localizedLabel() {
+    return loc(this.label || 'tecton.element.loading.ariaLabel');
+  }
+  componentWillLoad() {
+    handleAriaLabel(this);
+  }
+  ariaLabelObserver() {
+    handleAriaLabel(this);
   }
   render() {
-    const { isFirefox } = this;
-    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))));
+    return this.loader();
   }
   get hostElement() { return this; }
+  static get watchers() { return {
+    "ariaLabel": ["ariaLabelObserver"]
+  }; }
   static get style() { return stylesCss; }
-}, [1, "q2-message", {
+}, [1, "q2-loading", {
     "type": [513],
-    "appearance": [513],
-    "description": [516],
-    "presentToggle": [32],
-    "present": [64]
-  }, [[0, "focus", "delegateFocus"]]]);
-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" }));
-}
+    "shape": [513],
+    "modifiers": [513],
+    "counts": [513],
+    "label": [1537],
+    "inline": [516],
+    "ariaLabel": [1537, "aria-label"]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-message", "q2-icon"];
+  const components = ["q2-loading"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-message":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Message);
-      }
-      break;
-    case "q2-icon":
+    case "q2-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$1();
+        customElements.define(tagName, Q2Loading);
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2Message as Q, defineCustomElement as d };
+export { Q2Loading as Q, defineCustomElement as d };

package/dist/components/index11.js

@@ -1,72 +1,84 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as createGuid, l as loc } from './index15.js';
+import { p as isFirefox, o as overrideFocus, n as nextPaint, a as isEventFromElement } from './index16.js';
+import { d as defineCustomElement$1 } from './index8.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:calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
+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-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, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}: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))}";
 
-const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2Message = /*@__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;
+    this.type = 'info';
+    this.appearance = 'standard';
+    this.description = false;
+    this.presentToggle = undefined;
   }
-  /// 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);
+  get isFirefox() {
+    return isFirefox();
   }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
-    this.mutationObserver = null;
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
   }
-  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;
+  async present() {
+    const { isFirefox } = this;
+    this.presentToggle = !this.presentToggle;
+    if (!isFirefox)
+      return;
+    nextPaint(() => {
+      this.presentToggle = false;
     });
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector('.message').focus();
+  }
   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))));
+    const { isFirefox } = this;
+    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))));
   }
   get hostElement() { return this; }
-  static get watchers() { return {
-    "disabled": ["disabledWatcher"]
-  }; }
   static get style() { return stylesCss; }
-}, [1, "q2-optgroup", {
-    "disabled": [516],
-    "label": [513],
-    "hidden": [32]
-  }]);
+}, [1, "q2-message", {
+    "type": [513],
+    "appearance": [513],
+    "description": [516],
+    "presentToggle": [32],
+    "present": [64]
+  }, [[0, "focus", "delegateFocus"]]]);
+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" }));
+}
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-optgroup"];
+  const components = ["q2-message", "q2-icon"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-optgroup":
+    case "q2-message":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Message);
+      }
+      break;
+    case "q2-icon":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Optgroup);
+        defineCustomElement$1();
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2Optgroup as Q, defineCustomElement as d };
+export { Q2Message as Q, defineCustomElement as d };