q2-tecton-elements 1.13.0-alpha.0 → 1.13.0

package/dist/collection/components/q2-input/formatting/postal.js

@@ -195,7 +195,7 @@ const postalCodeFormats = {
   WF: '986##',
   ZM: '#####',
   US: '#####',
-  'US+4': '#####-####'
+  'US+4': '#####-####',
 };
 export default function formatPostalCode(value, modifier = 'US') {
   const mask = postalCodeFormats[modifier];

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

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, State, Event, h, Watch, Listen } from '@stencil/core';
-import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';
+import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement, } from 'src/utils';
 import formatCurrency from './formatting/currency';
 import formatPhoneNumber from './formatting/phone';
 import formatSSN from './formatting/ssn';
@@ -59,7 +59,7 @@ export class Q2Input {
       const eventDetail = {
         value: '',
         formattedValue: '',
-        minFormattedLength: this.formattedValueObject.minFormattedLength
+        minFormattedLength: this.formattedValueObject.minFormattedLength,
       };
       this.input.emit(eventDetail);
       this.change.emit(eventDetail);
@@ -98,17 +98,17 @@ export class Q2Input {
       percentage: formatPercentage,
       postal: formatPostalCode,
       date: formatDate,
-      'credit-card': formatCreditCard.format
+      'credit-card': formatCreditCard.format,
     };
     if (formattingFunctions[this.type]) {
       return formattingFunctions[this.type](value, this.formatModifier, valueChangedFromProperty);
     }
     return {
-      value: value,
+      value,
       formattedValue: value,
       fullyFormattedValue: value,
       formattingCharacterCount: 0,
-      unformattedValue: value
+      unformattedValue: value,
     };
   }
   get canClear() {
@@ -145,7 +145,7 @@ export class Q2Input {
       'percentage',
       'postal',
       'date',
-      'credit-card'
+      'credit-card',
     ];
     return maskedTypes.includes(this.type);
   }
@@ -180,7 +180,7 @@ export class Q2Input {
       percentage: 'tel',
       postal: 'tel',
       date: 'tel',
-      'credit-card': 'tel'
+      'credit-card': 'tel',
     };
     if (['password', 'text'].includes(this.type) && this.textHidden) {
       return 'password';
@@ -260,15 +260,14 @@ export class Q2Input {
   handleDataInput(newFormattedValue) {
     if (this.maxlength === undefined ||
       newFormattedValue.unformattedValue.length <= this.maxlength ||
-      newFormattedValue.unformattedValue.length <=
-        this.formattedValueObject.unformattedValue.length) {
+      newFormattedValue.unformattedValue.length <= this.formattedValueObject.unformattedValue.length) {
       this.formattedValueObject = newFormattedValue;
     }
     else if (this.maxlength) {
       newFormattedValue = this.getFormattedValue(newFormattedValue.unformattedValue.substring(0, this.maxlength), false);
       this.formattedValueObject = newFormattedValue;
     }
-    //ORDER IMPORTANT:  calculate cursor position -> set value -> set cursor position
+    // ORDER IMPORTANT:  calculate cursor position -> set value -> set cursor position
     const cursorPosition = this.calculateCursorPositionOnInput();
     this.inputField.value = this.formattedValueObject.formattedValue;
     this.input.emit(Object.assign({ value: this.formattedValueObject.value, formattedValue: this.formattedValueObject.fullyFormattedValue, minFormattedLength: this.formattedValueObject.minFormattedLength }, (this.formattedValueObject.type && { type: this.formattedValueObject.type })));
@@ -281,6 +280,7 @@ export class Q2Input {
       this.inputDOM(),
       messagesDOM(this)));
   }
+  /* tslint:disable:cyclomatic-complexity */
   inputDOM() {
     return (h("div", { class: "input-container" },
       h("div", { class: "input-icons-container-left" },
@@ -288,7 +288,7 @@ export class Q2Input {
         this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })),
         this.showIconSeperator && h("div", { class: "vertical-separator" }),
         this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))),
-      this.pseudo ? (this.pseudoInputDOM()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })),
+      this.pseudo ? (this.pseudoInputDOM()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })),
       h("div", { class: "input-icons-container-right" },
         this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput },
           h("q2-icon", { type: "close", class: "icon-clear" }))),
@@ -297,23 +297,30 @@ export class Q2Input {
         this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })),
         this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
   }
+  /* tslint:enable:cyclomatic-complexity */
   pseudoInputDOM() {
     const showPlaceholder = !this.value && !!this.placeholder;
-    return (h("button", { class: "pseudo-input input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}${(this
-        .optional &&
-        loc('tecton.element.input.optional')) ||
-        ''}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
-      h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value)));
+    let ariaLabelSuffix = '';
+    if (this.optional) {
+      ariaLabelSuffix = loc('tecton.element.input.optional');
+    }
+    if (this.readonly) {
+      ariaLabelSuffix = loc('tecton.element.input.readonly');
+    }
+    return (h("div", { class: "pseudo-input" },
+      h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}${ariaLabelSuffix}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
+        h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))));
   }
   calculateCursorPositionOnInput() {
     const input = this.inputField;
     const formattedLength = this.formattedValueObject.formattedValue.length;
     const currentValueLength = input.value.length;
+    const defaultPosition = this.type === 'currency' ? formattedLength : 0;
     return {
-      startingPosition: (input && input.selectionStart) || formattedLength,
+      startingPosition: (input && input.selectionStart) || defaultPosition,
       valueLength: formattedLength,
       previousValueLength: input && currentValueLength,
-      hasSelection: false
+      hasSelection: false,
     };
   }
   calculateCursorPositionOnFocus() {
@@ -324,16 +331,14 @@ export class Q2Input {
       startingPosition,
       valueLength,
       previousValueLength: valueLength,
-      hasSelection: getSelection().toString().length > 0
+      hasSelection: getSelection().toString().length > 0,
     };
   }
   setCursorPosition(cursorData) {
     if (this.canSetSelection && !cursorData.hasSelection) {
       const input = this.inputField;
       const { valueLength, previousValueLength, startingPosition } = cursorData;
-      if (startingPosition === valueLength &&
-        valueLength >= previousValueLength &&
-        this.type === 'currency') {
+      if (startingPosition === valueLength && valueLength >= previousValueLength && this.type === 'currency') {
         input.setSelectionRange(valueLength, valueLength);
       }
       else {
@@ -610,6 +615,40 @@ export class Q2Input {
       "attribute": "optional",
       "reflect": true
     },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": true
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": true
+    },
     "formatModifier": {
       "type": "string",
       "mutable": false,
@@ -782,11 +821,11 @@ export class Q2Input {
       "reflect": false
     },
     "ariaExpanded": {
-      "type": "boolean",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -815,6 +854,23 @@ export class Q2Input {
       "attribute": "aria-activedescendant",
       "reflect": false
     },
+    "current": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'",
+        "resolved": "\"date\" | \"false\" | \"location\" | \"page\" | \"step\" | \"time\" | \"true\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current",
+      "reflect": false
+    },
     "errors": {
       "type": "unknown",
       "mutable": false,

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

@@ -128,7 +128,7 @@ label {
       3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)
   );
   --comp-input-icon-clearance: 34px;
-  --comp-input-min-height: 44px;
+  --comp-input-min-height: var(--tct-input-min-height, 44px);
   border-width: var(--comp-input-border-width);
   border-style: solid;
   border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
@@ -153,6 +153,8 @@ label {
   padding: 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
   background-color: transparent;
   color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
+  display: inline-block;
+  text-align: var(--tct-input-align, "start");
   /* To remove up/down arrow in number field for webkit based browser */
   /* For Firefox */
 }
@@ -167,12 +169,25 @@ label {
 .input-field[type=number] {
   -moz-appearance: textfield;
 }
+.input-field::-ms-clear {
+  display: none;
+}
+.input-field[type=search]::-webkit-search-decoration, .input-field[type=search]::-webkit-search-cancel-button, .input-field[type=search]::-webkit-search-results-button, .input-field[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
 .input-field[disabled] {
   cursor: not-allowed;
 }
 .right-aligned .input-field {
   text-align: right;
 }
+.input-field:is(input) {
+  flex: 1;
+}
+.input-field:is(button) {
+  display: inline-flex;
+  align-items: center;
+}
 
 .input-container:focus-within {
   border-width: var(--comp-input-focus-border-width, 1px);
@@ -180,24 +195,14 @@ label {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent));
 }
 
-input {
-  display: inline-block;
-}
-input::-ms-clear {
-  display: none;
-}
-input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
-  display: none;
-}
-
-input::placeholder,
+.input-field::placeholder,
 .placeholder-text {
   color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));
 }
 
 .pseudo-input {
-  display: inline-flex;
-  align-items: center;
+  min-width: 0;
+  flex: 1;
 }
 .pseudo-input span {
   white-space: nowrap;

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

@@ -21,9 +21,9 @@ export class Q2Loading {
     const loaderMap = {
       default: this.spinner,
       spinner: this.spinner,
-      skeleton: this.skeletonLoader
+      skeleton: this.skeletonLoader,
     };
-    return loaderMap[this.type] || loaderMap['default'];
+    return loaderMap[this.type] || loaderMap.default;
   }
   get modifiersSet() {
     if (this.type !== 'skeleton' || !this.modifiers) {
@@ -44,9 +44,9 @@ export class Q2Loading {
   get spinnerShape() {
     const spinnerMap = {
       default: this.halfCircleSpinner,
-      'half-circle': this.halfCircleSpinner
+      'half-circle': this.halfCircleSpinner,
     };
-    return spinnerMap[this.type] || spinnerMap['default'];
+    return spinnerMap[this.type] || spinnerMap.default;
   }
   get localizedLabel() {
     return loc(this.label || 'tecton.element.loading.ariaLabel');

package/dist/collection/components/q2-loading/skeleton/q2-loading-element/index.js

@@ -6,7 +6,7 @@ export class Q2Loading {
       ? atoms[this.shape]({
         width: this.width,
         height: this.height,
-        borderRadius: this.borderRadius
+        borderRadius: this.borderRadius,
       })
       : '';
   }

package/dist/collection/components/q2-loading/skeleton/shapes.js

@@ -1,22 +1,20 @@
 import { h } from '@stencil/core';
 export const atoms = {
   circle: ({ width, additionalClasses }) => (h("div", { class: `skeleton-shape circle ${additionalClasses || ''}`, style: { width, height: width } })),
-  rectangle: ({ width, height, borderRadius, additionalClasses }) => (h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } }))
+  rectangle: ({ width, height, borderRadius, additionalClasses }) => (h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } })),
 };
 export const molecules = {
   field: () => (h("div", { class: "skeleton-shape field" },
     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 (h("div", { class: "skeleton-shape text" },
@@ -25,7 +23,7 @@ export const molecules = {
         Array(rows)
           .fill(undefined)
           .map(() => atoms.rectangle({ height: '1rem' }))));
-  }
+  },
 };
 export const shapes = {
   circle: () => {
@@ -57,7 +55,7 @@ export const shapes = {
               .map(() => atoms.rectangle({ height: '1.5rem' }))),
           bordered && (h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({
             height: '1px',
-            additionalClasses: 'no-margin'
+            additionalClasses: 'no-margin',
           })))))))));
   },
   field: molecules.field,
@@ -66,17 +64,12 @@ export 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 (h("div", { class: `skeleton-shape form flex columns-${columns}` }, !!totalItems &&
-      Array(totalItems)
-        .fill(undefined)
-        .map(molecules.field)));
+    return (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 (h("div", { class: `skeleton-shape detailed-item flex ${alignment}` },
       h("div", { class: `detailed-item-image flex-${alignment}` }, isSquare
         ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })
@@ -91,6 +84,6 @@ export const shapes = {
       Array(cells)
         .fill(undefined)
         .map(() => atoms.rectangle({ height: '1rem' }))));
-  }
+  },
 };
 export default shapes;

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

@@ -137,8 +137,8 @@ function generateIcon(type) {
     warning: 'warning',
     danger: 'error',
     error: 'error',
-    info: 'info'
+    info: 'info',
   };
-  const icon = iconMap[type] || iconMap['info'];
-  return h("q2-icon", { type: icon, class: "message-icon" });
+  const icon = iconMap[type] || iconMap.info;
+  return (h("q2-icon", { type: icon, class: "message-icon" }));
 }

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

@@ -14,7 +14,7 @@ export class Q2Optgroup {
     const observer = new MutationObserver(this.setHidden);
     observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
     this.mutationObserver = observer;
-    //set initially
+    // set initially
     this.setHidden();
     this.disabledWatcher(this.disabled);
   }

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

@@ -1,23 +1,16 @@
-import { Component, Prop, h, Event, Element, Host } from '@stencil/core';
+import { Component, Prop, h, Element, Host } from '@stencil/core';
 export class Q2Option {
   constructor() {
     this.role = 'option';
     this.tabindex = '-1';
     this._multiSelectHidden = false;
-    this.onClick = (event) => {
-      event.stopImmediatePropagation();
-      const { disabled, disabledGroup } = this;
-      if (disabled || disabledGroup)
-        return;
-      this.click.emit();
-    };
   }
   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", onClick: this.onClick },
+      h("div", { class: "content" },
         h("slot", null))));
   }
   static get is() { return "q2-option"; }
@@ -218,6 +211,23 @@ export class Q2Option {
       "attribute": "active",
       "reflect": true
     },
+    "noSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_no-select",
+      "reflect": true
+    },
     "_multiSelectHidden": {
       "type": "boolean",
       "mutable": false,
@@ -237,21 +247,5 @@ export class Q2Option {
       "defaultValue": "false"
     }
   }; }
-  static get events() { return [{
-      "method": "click",
-      "name": "click",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
   static get elementRef() { return "hostElement"; }
 }

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

@@ -75,6 +75,11 @@ button {
   gap: var(--tct-scale-1, var(--app-scale-1, 5px));
 }
 
+: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));