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

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, Listen, Event, Watch } from '@stencil/core';
+import { Component, Prop, Element, h, Listen, Event, Watch, Fragment } from '@stencil/core';
 import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2RadioGroup {
   constructor() {
@@ -7,13 +7,16 @@ export class Q2RadioGroup {
     this.hasError = false;
     this.id = `radio-group-${createGuid()}`;
     this.onMutationObserved = () => {
-      this.valueUpdated();
+      this.valueUpdated(this.value);
       this.nameUpdated();
       this.disabledUpdated();
+      this.readonlyUpdated();
       this.tileLayoutUpdated();
     };
     this.onInnerRadioChange = (event) => {
       event.stopImmediatePropagation();
+      if (this.readonly)
+        return;
       this.change.emit({ value: event.detail.value });
     };
   }
@@ -21,17 +24,19 @@ export class Q2RadioGroup {
     return Array.from(this.hostElement.querySelectorAll('q2-radio'));
   }
   /////// LIFECYCLE HOOK ///////
+  componentWillLoad() {
+    this.onMutationObserved();
+  }
   componentDidLoad() {
     const observer = new MutationObserver(this.onMutationObserved);
     observer.observe(this.hostElement, { childList: true });
     this.mutationObserver = observer;
-    this.onMutationObserved();
     overrideFocus(this.hostElement);
   }
   /////// OBSERVERS ///////
-  valueUpdated() {
+  valueUpdated(newVal) {
     this.radioElements.forEach(radio => {
-      radio.checked = this.value === radio.value;
+      radio.checked = newVal === radio.value;
     });
   }
   nameUpdated() {
@@ -44,6 +49,10 @@ export class Q2RadioGroup {
       radio.groupDisabled = this.disabled;
     });
   }
+  readonlyUpdated() {
+    const readonly = this.readonly;
+    this.radioElements.forEach(radio => (radio.groupReadonly = readonly));
+  }
   tileLayoutUpdated() {
     this.radioElements.forEach(radio => {
       radio.groupTileLayout = this.tilelayout;
@@ -67,11 +76,15 @@ export class Q2RadioGroup {
     const currentValue = event.target.getAttribute('value') || this.value;
     let index = this.radioElements.findIndex(el => el === event.target || el.getAttribute('value') === currentValue);
     let sign = 0;
-    if (['ArrowLeft', 'Left', 'ArrowUp', 'Up'].includes(event.key)) {
-      sign = -1;
-    }
-    else if (['ArrowRight', 'Right', 'ArrowDown', 'Down'].includes(event.key)) {
-      sign = 1;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        sign = -1;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        sign = 1;
+        break;
     }
     if (index === -1 || sign === 0) {
       return;
@@ -79,19 +92,31 @@ export class Q2RadioGroup {
     index += sign;
     index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
     event.preventDefault();
-    this.value = this.radioElements[index].value;
+    if (!this.readonly) {
+      this.value = this.radioElements[index].value;
+    }
     this.radioElements[index].dispatchEvent(new FocusEvent('focus'));
   }
+  labelDOM() {
+    const { label, optional, readonly } = this;
+    let helpText = '';
+    if (readonly) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+    }
+    else if (optional) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+    }
+    return (h(Fragment, null,
+      label && loc(label),
+      !!helpText && h("span", { class: "optional-tag" }, helpText)));
+  }
   render() {
+    const showLabel = this.label || this.optional || this.readonly;
     return (h("div", null,
-      this.label || this.optional ? (h("div", { class: "group-legend" },
-        this.label && loc(this.label),
-        this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''),
-      h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}` },
-        this.label || this.optional ? (h("legend", { class: "sr-only" },
-          this.label && loc(this.label),
-          this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''),
-        this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` },
+      showLabel && h("div", { class: "group-legend" }, this.labelDOM()),
+      h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}` },
+        showLabel && h("legend", { class: "sr-only" }, this.labelDOM()),
+        this.hasError ? (h("div", { class: `error-icon-container ${!showLabel && 'no-label'}` },
           h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''),
         this.inputDom())));
   }
@@ -203,6 +228,23 @@ export class Q2RadioGroup {
       "attribute": "optional",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "tilelayout": {
       "type": "boolean",
       "mutable": false,
@@ -283,6 +325,9 @@ export class Q2RadioGroup {
     }, {
       "propName": "disabled",
       "methodName": "disabledUpdated"
+    }, {
+      "propName": "readonly",
+      "methodName": "readonlyUpdated"
     }, {
       "propName": "tilelayout",
       "methodName": "tileLayoutUpdated"

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

@@ -4,6 +4,7 @@ export class Q2Select {
   constructor() {
     this.selectedOptions = [];
     this.disabled = false;
+    this.readonly = false;
     this.multiple = false;
     this.minRows = 3;
     this.searchable = false;
@@ -97,9 +98,10 @@ export class Q2Select {
       event.stopPropagation();
       const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
       const { key, shiftKey } = event;
-      if (multiSelectHeader &&
-        multiSelectHeader.contains(event.target) &&
-        [' ', 'Enter'].includes(key))
+      if (this.readonly ||
+        (multiSelectHeader &&
+          multiSelectHeader.contains(event.target) &&
+          [' ', 'Enter'].includes(key)))
         return;
       switch (key) {
         case ' ':
@@ -415,12 +417,16 @@ export class Q2Select {
     activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
   openDropdownWithoutActiveElement() {
+    if (this.readonly)
+      return;
     this.activeIndex = undefined;
     this.setActiveOption();
     this.dropdownOpen = true;
     this.scheduledAfterRender.push(this.resizeIframe);
   }
   openDropdownWithActiveElement(activeIndex) {
+    if (this.readonly)
+      return;
     this.activeIndex = activeIndex;
     this.dropdownOpen = true;
     this.setActiveOption();
@@ -530,6 +536,8 @@ export class Q2Select {
     });
   }
   onHostElementChange(event) {
+    if (this.readonly)
+      return;
     if (event.target === this.hostElement && !this.hostElement.onchange) {
       if (this.multiple) {
         this.selectedOptions = event.detail.selectedOptions;
@@ -593,7 +601,7 @@ export class Q2Select {
           this.errors.length > 0 &&
           this.errors.map(error => loc(error))) ||
           (this.invalid && ['tecton.element.select.invalid']) ||
-          [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
+          [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
       h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick },
         h("slot", { name: "q2-select-display" })),
       this.optionsDropdown()));
@@ -726,6 +734,24 @@ export class Q2Select {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "invalid": {
       "type": "boolean",
       "mutable": false,

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

@@ -136,9 +136,9 @@ button {
 .custom-display-content {
   position: absolute;
   bottom: 0;
-  left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);
+  left: calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);
   height: 44px;
-  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));
   overflow: hidden;
   cursor: pointer;
   transition: left var(--tct-tween-2, var(--app-tween-1, 0.2s ease));
@@ -151,11 +151,11 @@ button {
 
 .is-searchable.is-focused .custom-display-content,
 .is-searchable .custom-display-content:active {
-  left: calc(var(--tct-scale-3, var(--app-scale-3, 15px)) + 1px);
+  left: calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px);
 }
 
 .has-error .custom-display-content {
-  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px));
 }
 
 .dropdown-open .q2-select-dropdown {

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

@@ -141,7 +141,7 @@ li {
 }
 .step-btn[aria-disabled], .step-btn[aria-disabled] + hr {
   --comp-bullet-font-color: var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));
-  --comp-bullet-bg: var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)));
+  --comp-bullet-bg: var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)));
 }
 
 .step-bubble {
@@ -171,9 +171,9 @@ li {
 }
 
 hr {
-  width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));
-  top: calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));
-  left: calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));
+  width: calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );
+  top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));
+  left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));
   border: 0;
   border-top: 1px solid var(--comp-bullet-bg);
   height: 0;
@@ -190,11 +190,11 @@ hr {
   color: var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));
   font-size: var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));
   height: 1.5em;
+  text-overflow: ellipsis;
+  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 [aria-selected] .step-label {
   font-weight: var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600));
@@ -206,11 +206,11 @@ hr {
 .step-description {
   color: var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
   font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));
+  text-overflow: ellipsis;
+  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-bottom: 0.2em;
 }
 

package/dist/collection/components/q2-tab-container/index.js

@@ -166,6 +166,9 @@ export class Q2TabContainer {
     overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);
     this.scheduledAfterRender.push(() => {
+      const hasTabs = this.tabs.length > 0;
+      if (!hasTabs)
+        return;
       const tab = this.moveFocus(Math.max(index, 0));
       this.value = tab.dataset.value;
       tab.blur();
@@ -174,6 +177,7 @@ export class Q2TabContainer {
   disconnectedCallback() {
     this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
+    this.resizeObserver = null;
     this.mutationObserver = null;
   }
   ///////// Observers /////////

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

@@ -0,0 +1,200 @@
+import { Component, State, Prop, h, Listen, Element, Fragment, Event } from '@stencil/core';
+import { isEventFromElement, loc, overrideFocus } from 'src/utils';
+export class Q2Tag {
+  constructor() {
+    this.role = 'listitem';
+    /// Getters ///
+    /// Helpers
+    this.determineHasOptions = () => {
+      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+      this.hasOptions = hasOptions;
+    };
+    /// Event Handlers ///
+    this.handleChange = event => {
+      event.stopPropagation();
+      if (!this.hasOptions)
+        return;
+      const { value } = event.detail;
+      this.click.emit({ value: value });
+    };
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.optionList.toggle();
+    };
+    this.handleKeydown = (event) => {
+      this.optionList.handleExternalKeydown(event);
+    };
+    this.handleButtonFocusout = (event) => {
+      var _a;
+      const relatedTarget = event.relatedTarget;
+      if ((_a = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.tagName) === 'Q2-OPTION') !== null && _a !== void 0 ? _a : false)
+        return;
+      this.open = false;
+    };
+    this.handleOptionListFocusout = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget && !(event.relatedTarget instanceof HTMLElement))
+        return;
+      if (relatedTarget && relatedTarget.closest('.btn-wrapper'))
+        return;
+      this.open = false;
+    };
+    this.handleWrapperClick = () => {
+      this.dropdownBtn.focus();
+      this.dropdownBtn.click();
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    const observer = new MutationObserver(this.determineHasOptions);
+    observer.observe(this.hostElement, { childList: true, attributes: true });
+    this.mutationObserver = observer;
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    if (!this.hasOptions)
+      return;
+    this.dropdownBtn.focus();
+  }
+  optionListStateEvent({ detail: { open } }) {
+    this.open = open;
+    if (!open)
+      this.dropdownBtn.focus();
+  }
+  /// DOM ///
+  render() {
+    const { hasOptions, open } = this;
+    let wrapperClassNames = ['tag-wrapper'];
+    if (hasOptions)
+      wrapperClassNames.push('has-options');
+    return (h(Fragment, null,
+      h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() },
+        h("div", { class: "tag" }, this.label),
+        this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick },
+          h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') },
+            h("q2-icon", { type: "options" }))))),
+      this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, onFocusout: this.handleOptionListFocusout, align: "right", type: "menu", "no-select": true },
+        h("slot", null)))));
+  }
+  static get is() { return "q2-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true
+    },
+    "role": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "role",
+      "reflect": true,
+      "defaultValue": "'listitem'"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'tertiary'",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "hasOptions": {}
+  }; }
+  static get events() { return [{
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ value: string }",
+        "resolved": "{ value: string; }",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "optionListState",
+      "method": "optionListStateEvent",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,141 @@
+* {
+  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;
+  position: relative;
+}
+
+:host(:not(:last-child)) {
+  margin-inline-end: var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)));
+}
+
+.tag-wrapper {
+  --comp-tag-btn-size: var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));
+  --comp-tag-background: var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));
+  --comp-tag-color: var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));
+  position: relative;
+}
+:host([theme=primary]) .tag-wrapper {
+  --comp-tag-background: var(--t-primary-l5, #61c4ff);
+  --comp-tag-color: var(--t-primary-text, #ffffff);
+}
+:host([theme=secondary]) .tag-wrapper {
+  --comp-tag-background: var(--t-secondary-l5, #61c4ff);
+  --comp-tag-color: var(--t-secondary-text, #000000);
+}
+:host([theme=tertiary]) .tag-wrapper {
+  --comp-tag-background: var(--t-tertiary-l5, #61c4ff);
+  --comp-tag-color: var(--t-tertiary-text, #000000);
+}
+
+.tag {
+  height: var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));
+  line-height: var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));
+  padding-inline: var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)));
+  background: var(--comp-tag-background);
+  color: var(--comp-tag-color);
+  border-radius: var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));
+}
+.has-options .tag {
+  padding-right: var(--comp-tag-btn-size);
+}
+
+.btn-wrapper {
+  --comp-tag-clickable-size: var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));
+  --comp-tag-btn-offset: calc(
+      calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1
+  );
+  height: var(--comp-tag-clickable-size);
+  width: var(--comp-tag-clickable-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: var(--comp-tag-btn-offset);
+  top: var(--comp-tag-btn-offset);
+  cursor: pointer;
+}
+
+button {
+  width: var(--comp-tag-btn-size);
+  height: var(--comp-tag-btn-size);
+  stroke: var(--comp-tag-color);
+  --tct-icon-stroke-primary: var(--comp-tag-color);
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  --tct-icon-size: 18px;
+}
+
+q2-option-list {
+  position: absolute;
+  right: 0;
+}