q2-tecton-elements 1.12.1 → 1.13.1

package/dist/cjs/q2-textarea.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c2e53804.js');
-const index$1 = require('./index-773c3eec.js');
+const index = require('./index-7febb200.js');
+const index$1 = require('./index-dd823ee6.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;margin-top:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px)));margin-bottom:var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0));padding-right:var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0));margin-top:var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0));margin-bottom:var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px))));color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.optional-tag{margin-left:var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px))));color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 3px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));background-color:var(--tct-textarea-bg, var(--t-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))));border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background-color:var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 
@@ -36,7 +36,7 @@ const Q2Textarea = class {
       index$1.setMessageHeight(this);
     };
     this.onTextareaBlur = () => {
-      const { valueOnFocus, textareaField: { value } } = this;
+      const { valueOnFocus, textareaField: { value }, } = this;
       this.hasFocus = false;
       index$1.setMessageHeight(this);
       if (valueOnFocus !== value)
@@ -58,7 +58,7 @@ const Q2Textarea = class {
         width: contentContainer.offsetWidth,
         height: contentContainer.offsetHeight,
         x: event.clientX,
-        y: event.clientY
+        y: event.clientY,
       };
       document.addEventListener('mousemove', this.onMouseMove);
       document.addEventListener('mouseup', this.onMouseUp);
@@ -77,7 +77,7 @@ const Q2Textarea = class {
         width: contentContainer.offsetWidth,
         height: contentContainer.offsetHeight,
         x: firstTouch.pageX,
-        y: firstTouch.pageY
+        y: firstTouch.pageY,
       };
       document.addEventListener('touchmove', this.onTouchMove);
       document.addEventListener('touchend', this.onTouchMove);
@@ -167,7 +167,7 @@ const Q2Textarea = class {
   }
   setWidth(event) {
     var _a, _b;
-    const { contentContainer, resize, downParams: { width, x } } = this;
+    const { contentContainer, resize, downParams: { width, x }, } = this;
     const resizeX = ['both', 'horizontal'].includes(resize);
     if (!resizeX)
       return;
@@ -177,7 +177,7 @@ const Q2Textarea = class {
   }
   setHeight(event) {
     var _a, _b;
-    const { contentContainer, resize, downParams: { height, y } } = this;
+    const { contentContainer, resize, downParams: { height, y }, } = this;
     const resizeY = ['both', 'vertical'].includes(resize);
     if (!resizeY)
       return;
@@ -194,7 +194,7 @@ const Q2Textarea = class {
     return (index.h("div", { class: "max-length", "aria-hidden": "true" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, "/", this.maxlength));
   }
   inputDOM() {
-    return (index.h("div", { class: "input-container" }, index.h("textarea", { id: this.inputId, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? index.h("q2-icon", { type: "error", class: "icon-error" }) : '', this.showResize && (index.h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": index$1.loc('tecton.element.input.resize'), tabIndex: -1 }, index.h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
+    return (index.h("div", { class: "input-container" }, index.h("textarea", { id: this.inputId, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (index.h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (index.h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": index$1.loc('tecton.element.input.resize'), tabIndex: -1 }, index.h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/{shapes-086c0365.js → shapes-305746b5.js}

@@ -1,25 +1,23 @@
 'use strict';
 
-const index = require('./index-c2e53804.js');
+const index = require('./index-7febb200.js');
 
 const atoms = {
   circle: ({ width, additionalClasses }) => (index.h("div", { class: `skeleton-shape circle ${additionalClasses || ''}`, style: { width, height: width } })),
-  rectangle: ({ width, height, borderRadius, additionalClasses }) => (index.h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } }))
+  rectangle: ({ width, height, borderRadius, additionalClasses }) => (index.h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } })),
 };
 const molecules = {
   field: () => (index.h("div", { class: "skeleton-shape field" },
     index.h("div", { class: "skeleton-field-label" }, atoms.rectangle({ height: '1rem', width: '50%' })),
     atoms.rectangle({
       height: 'var(--tct-input-height, 42px)',
-      borderRadius: '3px'
+      borderRadius: '3px',
     }))),
   text: (counts, modifiers) => {
     var _a;
     const rows = (_a = counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _a !== void 0 ? _a : 1;
     const hasHeader = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('header');
-    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') ||
-      ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') ||
-      'left';
+    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
     const smallHeaderClass = (modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('smallheader')) ? ' smaller' : '';
     const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';
     return (index.h("div", { class: "skeleton-shape text" },
@@ -28,7 +26,7 @@ const molecules = {
         Array(rows)
           .fill(undefined)
           .map(() => atoms.rectangle({ height: '1rem' }))));
-  }
+  },
 };
 const shapes = {
   circle: () => {
@@ -60,7 +58,7 @@ const shapes = {
               .map(() => atoms.rectangle({ height: '1.5rem' }))),
           bordered && (index.h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({
             height: '1px',
-            additionalClasses: 'no-margin'
+            additionalClasses: 'no-margin',
           })))))))));
   },
   field: molecules.field,
@@ -69,17 +67,12 @@ const shapes = {
     const columns = (_a = ((counts === null || counts === void 0 ? void 0 : counts[1]) && (counts === null || counts === void 0 ? void 0 : counts[0]))) !== null && _a !== void 0 ? _a : 1;
     const rows = (_c = (_b = counts === null || counts === void 0 ? void 0 : counts[1]) !== null && _b !== void 0 ? _b : counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _c !== void 0 ? _c : 1;
     const totalItems = columns * rows;
-    return (index.h("div", { class: `skeleton-shape form flex columns-${columns}` }, !!totalItems &&
-      Array(totalItems)
-        .fill(undefined)
-        .map(molecules.field)));
+    return (index.h("div", { class: `skeleton-shape form flex columns-${columns}` }, !!totalItems && Array(totalItems).fill(undefined).map(molecules.field)));
   },
   text: molecules.text,
   'detailed-item': (counts, modifiers) => {
     const isSquare = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('square');
-    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') ||
-      ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') ||
-      'left';
+    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
     return (index.h("div", { class: `skeleton-shape detailed-item flex ${alignment}` },
       index.h("div", { class: `detailed-item-image flex-${alignment}` }, isSquare
         ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })
@@ -94,7 +87,7 @@ const shapes = {
       Array(cells)
         .fill(undefined)
         .map(() => atoms.rectangle({ height: '1rem' }))));
-  }
+  },
 };
 
 exports.atoms = atoms;

package/dist/cjs/tecton-tab-pane.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c2e53804.js');
+const index = require('./index-7febb200.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
 
@@ -17,10 +17,7 @@ const TectonTabPane = class {
     };
   }
   get iframeTitle() {
-    return this.moduleId
-      .split('.')
-      .slice(-2)
-      .join('-');
+    return this.moduleId.split('.').slice(-2).join('-');
   }
   componentWillRender() {
     const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "./components/q2-checkbox/index.js",
     "./components/q2-dropdown/index.js",
     "./components/q2-option-list/index.js",
+    "./components/q2-stepper-pane/index.js",
     "./components/q2-dropdown-item/index.js",
     "./components/q2-editable-field/index.js",
     "./components/q2-loading/index.js",
@@ -15,6 +16,7 @@
     "./components/q2-textarea/index.js",
     "./components/click-elsewhere/index.js",
     "./components/q2-avatar/index.js",
+    "./components/q2-badge/index.js",
     "./components/q2-card/index.js",
     "./components/q2-carousel-pane/index.js",
     "./components/q2-checkbox-group/index.js",
@@ -29,7 +31,7 @@
     "./components/q2-radio-group/index.js",
     "./components/q2-section/index.js",
     "./components/q2-stepper/index.js",
-    "./components/q2-stepper-pane/index.js",
+    "./components/q2-stepper-vertical/index.js",
     "./components/q2-tab-container/index.js",
     "./components/q2-tab-pane/index.js",
     "./components/q2-tag/index.js",
@@ -37,8 +39,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.8.0",
-    "typescriptVersion": "4.2.3"
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/click-elsewhere/index.js

@@ -8,8 +8,7 @@ export class ClickElsewhere {
     this.isCurrentlyFocused = false;
     this.mouseHandler = (event) => {
       const isCurrentlyFocused = this.shadowContains(this.findActiveElement());
-      const aboutToBeFocused = this.shadowContains(this.shadowEventTarget(event)) ||
-        this.originatesInSlots(event.target);
+      const aboutToBeFocused = this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target);
       if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {
         this.isCurrentlyFocused = false;
         this.change.emit();
@@ -66,12 +65,11 @@ export class ClickElsewhere {
   }
   originatesInSlots(target) {
     const slots = this.hostElement.querySelectorAll('slot');
-    for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
-      const currentSlot = slots[slotIndex];
+    for (const currentSlot of Array.from(slots)) {
       const lightNodes = (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||
         this.hostElement.childNodes;
-      for (let nodeIndex = 0; nodeIndex < lightNodes.length; nodeIndex++) {
-        if (lightNodes[nodeIndex].contains(target)) {
+      for (const currentNode of Array.from(lightNodes)) {
+        if (currentNode.contains(target)) {
           return true;
         }
       }

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

@@ -0,0 +1,148 @@
+import { Component, Prop, h, Element, Fragment } from '@stencil/core';
+export class Q2Badge {
+  constructor() {
+    this.value = 0;
+  }
+  get badgeText() {
+    const maxValue = Math.pow(10, this.maxLength || 2) - 1;
+    let value = this.value || 0;
+    if (isNaN(value) || value <= 0) {
+      value = '';
+    }
+    else if (value <= maxValue) {
+      value = Number(value).toLocaleString();
+    }
+    else {
+      value = Number(maxValue).toLocaleString() + '+';
+    }
+    return value;
+  }
+  generateMarkup() {
+    const badgeClass = ['badge'];
+    if (this.badgeText)
+      badgeClass.push(`digit-${this.badgeText.length}`);
+    if (this.size === 'large')
+      badgeClass.push('size-large');
+    return (h("div", { class: "badge-wrapper" },
+      h("slot", null),
+      h("div", { class: badgeClass.join(' ') },
+        h("span", { class: "badge-text" }, this.badgeText))));
+  }
+  render() {
+    return h(Fragment, null, this.badgeText ? this.generateMarkup() : h("slot", null));
+  }
+  static get is() { return "q2-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "maxLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | undefined",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-length",
+      "reflect": true
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'right' | 'left' | undefined",
+        "resolved": "\"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": true
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'large' | undefined",
+        "resolved": "\"default\" | \"large\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'tertiary' | undefined",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": true
+    },
+    "status": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'info' | 'alert' | 'warning' | 'success' | undefined",
+        "resolved": "\"alert\" | \"info\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status",
+      "reflect": true
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,134 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: 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;
+}
+
+.badge-wrapper {
+  --comp-badge-background: var(--t-primary, #61c4ff);
+  --comp-badge-color: var(--t-primary-text, #ffffff);
+}
+:host([status=info]) .badge-wrapper {
+  --comp-badge-background: var(--const-stoplight-info, #0079C1);
+  --comp-badge-color: var(--const-stoplight-info-text, #ffffff);
+}
+:host([status=alert]) .badge-wrapper {
+  --comp-badge-background: var(--const-stoplight-alert, #C30000);
+  --comp-badge-color: var(--const-stoplight-alert-text, #ffffff);
+}
+:host([status=warning]) .badge-wrapper {
+  --comp-badge-background: var(--const-stoplight-warning, #F0B400);
+  --comp-badge-color: var(--const-stoplight-warning-text, #423535);
+}
+:host([status=success]) .badge-wrapper {
+  --comp-badge-background: var(--const-stoplight-success, #0E8A00);
+  --comp-badge-color: var(--const-stoplight-success-text, #ffffff);
+}
+:host([theme=primary]) .badge-wrapper {
+  --comp-badge-background: var(--t-primary, #61c4ff);
+  --comp-badge-color: var(--t-primary-text, #ffffff);
+  --comp-badge-border-color: var(--t-primary-l1, #61c4ff);
+}
+:host([theme=secondary]) .badge-wrapper {
+  --comp-badge-background: var(--t-secondary, #61c4ff);
+  --comp-badge-color: var(--t-secondary-text, #ffffff);
+  --comp-badge-border-color: var(--t-secondary-l1, #61c4ff);
+}
+:host([theme=tertiary]) .badge-wrapper {
+  --comp-badge-background: var(--t-tertiary, #0079C1);
+  --comp-badge-color: var(--t-tertiary-text, #000000);
+  --comp-badge-border-color: var(--t-tertiary-l1, #61c4ff);
+}
+
+.badge {
+  font-size: 10px;
+  line-height: 16px;
+  height: 16px;
+  min-width: 16px;
+  background-color: var(--comp-badge-background);
+  text-align: center;
+  padding: 0 4px;
+  color: var(--comp-badge-color);
+  border-color: var(--comp-badge-border-color);
+  border-width: thin;
+  border-radius: 8px;
+}
+
+.badge.size-large {
+  font-size: 14px;
+  height: 22px;
+  min-width: 22px;
+  border-radius: 11px;
+  line-height: 22px;
+  padding: 0 6px;
+}
+
+.badge-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -61,17 +61,17 @@ export class Q2Btn {
     return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition && `icon-${iconPosition}` },
       h("div", null,
         renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })),
-        !hideLabel && label ? (loc(label)) : (h("slot", { onSlotchange: this.handleSlotChange })))));
+        !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
   }
   get buttonAttributes() {
     return {
-      ariaExpanded: this.ariaExpanded !== undefined ? `${!!this.ariaExpanded}` : undefined,
-      ariaHasPopup: this.ariaHasPopup ? `${this.ariaHasPopup}` : undefined,
+      ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded.toString() === 'true'}` : undefined,
+      ariaHasPopup: this.ariaHasPopup !== undefined ? `${this.ariaHasPopup.toString() === 'true'}` : undefined,
       ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
-      ariaSelected: this.ariaSelected ? `${this.ariaSelected}` : undefined,
+      ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected.toString() === 'true'}` : undefined,
       disabled: this.disabled || false,
       type: this.type || 'button',
-      tabindex: this.tabIndex || undefined
+      tabindex: this.tabIndex || undefined,
     };
   }
   static get is() { return "q2-btn"; }
@@ -84,11 +84,11 @@ export class Q2Btn {
   }; }
   static get properties() { return {
     "ariaExpanded": {
-      "type": "boolean",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -101,11 +101,11 @@ export class Q2Btn {
       "reflect": false
     },
     "ariaHasPopup": {
-      "type": "any",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean | string",
-        "resolved": "boolean | string",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -135,11 +135,11 @@ export class Q2Btn {
       "reflect": false
     },
     "ariaSelected": {
-      "type": "boolean",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,