q2-tecton-elements 1.21.2 → 1.22.1

package/dist/components/index3.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { i as icons, d as defineCustomElement$1 } from './index7.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:unset}.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:var(--tct-avatar-bg, #9e9e9e)}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background-color:var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-color, #ffffff);font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-br, var(--tct-avatar-img-br, 50%));background-color:var(--tct-avatar-fallback-bg, var(--tct-avatar-bg, #9e9e9e));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-fallback-icon-size, 65%);--t-icon-fill:var(--tct-avatar-fallback-fill, transparent);--t-icon-stroke-primary:var(--tct-avatar-fallback-stroke-primary, currentcolor);--t-icon-stroke-secondary:var(--tct-avatar-fallback-stroke-secondary, currentcolor);color:var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff)));width:var(--t-icon-size);height:var(--t-icon-size)}";
+
+const Q2Avatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onError = () => {
+      this.badSrc = true;
+    };
+    this.onLoad = () => {
+      this.isLoaded = true;
+    };
+    this.name = undefined;
+    this.initials = undefined;
+    this.src = undefined;
+    this.icon = 'person';
+    this.badSrc = false;
+    this.isLoaded = false;
+  }
+  srcDidUpdate() {
+    this.badSrc = false;
+  }
+  get fallbackIcon() {
+    return (icons[this.icon] && icons[this.icon].markup()) || icons.error.markup();
+  }
+  get computedInitials() {
+    const { initials, name } = this;
+    if (!initials && !name)
+      return;
+    let result = '';
+    if (initials) {
+      result = initials.substr(0, 4);
+    }
+    else if (name) {
+      const parts = name.split(' ');
+      const firstCharacter = parts[0][0];
+      const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;
+      result += firstCharacter;
+      if (lastCharacter)
+        result += lastCharacter;
+    }
+    result = result === null || result === void 0 ? void 0 : result.toUpperCase();
+    return result;
+  }
+  render() {
+    const { computedInitials } = this;
+    const showImg = this.src && !this.badSrc;
+    const isLoaded = this.isLoaded;
+    const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
+    const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
+    return (h("div", null, showImg && (h("img", { class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { type: this.icon })))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "src": ["srcDidUpdate"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-avatar", {
+    "name": [513],
+    "initials": [513],
+    "src": [513],
+    "icon": [1],
+    "badSrc": [32],
+    "isLoaded": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-avatar", "q2-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Avatar);
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Q2Avatar as Q, defineCustomElement as d };

package/dist/components/index4.js

@@ -0,0 +1,62 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.badge-wrapper{--comp-badge-background:var(--t-gray8, #61c4ff);--comp-badge-color:var(--t-base, #ffffff);--comp-badge-border-color:var(--t-secondary-l1, #9a9898)}:host([status=info]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-info, #0079C1);--comp-badge-color:var(--const-stoplight-info-text, #ffffff);--comp-badge-border-color:var(--const-stoplight-info-l1, #3a9bd6)}:host([status=alert]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-alert, #C30000);--comp-badge-color:var(--const-stoplight-alert-text, #ffffff);--comp-badge-border-color:var(--const-stoplight-alert-l1, #e42929)}:host([status=warning]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-warning, #F0B400);--comp-badge-color:var(--const-stoplight-warning-text, #423535);--comp-badge-border-color:var(--const-stoplight-warning-l1, #f9ce4c)}:host([status=success]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-success, #57fc45);--comp-badge-color:var(--const-stoplight-success-text, #ffffff);--comp-badge-border-color:var(--const-stoplight-success-l1, #2eaa21)}:host([theme=primary]) .badge-wrapper{--comp-badge-background:var(--t-primary, #0079c2);--comp-badge-color:var(--t-primary-text, #ffffff);--comp-badge-border-color:var(--t-primary-l1, #3a9bd6)}:host([theme=secondary]) .badge-wrapper{--comp-badge-background:var(--t-secondary, #b4c2cd);--comp-badge-color:var(--t-secondary-text, #ffffff);--comp-badge-border-color:var(--t-secondary-l1, #c6d1db)}:host([theme=tertiary]) .badge-wrapper{--comp-badge-background:var(--t-tertiary, #e9f5fc);--comp-badge-color:var(--t-tertiary-text, #000000);--comp-badge-border-color:var(--t-tertiary-l1, #f3f4f5)}.badge{font-size:10px;line-height:16px;height:16px;min-width:16px;text-align:center;padding:0 4px;color:var(--comp-badge-color);background-color:var(--comp-badge-background);border-style:solid;border-color:var(--comp-badge-border-color);border-width:var(--tct-badge-border-width, var(--t-badge-border-width, 1px));border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px))}.badge.size-large{font-size:14px;height:22px;min-width:22px;border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 11px));line-height:22px;padding:0 6px;border-color:var(--comp-badge-border-color)}.badge-wrapper{display:flex;align-items:center;justify-content:center}";
+
+const Q2Badge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = 0;
+    this.maxLength = undefined;
+    this.position = undefined;
+    this.size = undefined;
+    this.theme = undefined;
+    this.status = undefined;
+  }
+  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;
+  }
+  render() {
+    const badgeClass = ['badge'];
+    if (this.size === 'large')
+      badgeClass.push('size-large');
+    return (h("div", { class: "badge-wrapper" }, h("div", { class: badgeClass.join(' ') }, h("span", { class: "badge-text" }, h("slot", null, this.badgeText)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return stylesCss; }
+}, [1, "q2-badge", {
+    "value": [514],
+    "maxLength": [514, "max-length"],
+    "position": [513],
+    "size": [513],
+    "theme": [513],
+    "status": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Badge);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Q2Badge as Q, defineCustomElement as d };

package/dist/components/index5.js

@@ -0,0 +1,146 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h as handleAriaLabel, g as handleColor, o as overrideFocus, i as isEventFromElement, l as loc } from './index13.js';
+import { d as defineCustomElement$1 } from './index9.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}:host{--comp-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:0;background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{background:var(--comp-btn-primary-bg);color:var(--comp-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent));border-width:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0));border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{background:var(--comp-btn-secondary-bg);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent));border-width:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg)));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{background:var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, var(--t-btn-neutral-bg, transparent)));color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent));border-width:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled,:host([intent=neutral]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg)));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, 0))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}";
+
+const Q2Btn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.handleSlotChange = () => {
+      this.handleIcons();
+    };
+    this.ariaExpanded = undefined;
+    this.ariaHasPopup = undefined;
+    this.ariaControls = undefined;
+    this.ariaSelected = undefined;
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.ariaLabel = undefined;
+    this.tabIndex = undefined;
+    this.intent = undefined;
+    this.color = undefined;
+    this.disabled = undefined;
+    this.type = undefined;
+    this.loading = undefined;
+    this.badge = undefined;
+    this.active = undefined;
+    this.fab = undefined;
+    this.block = undefined;
+    this.iconPosition = undefined;
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    this.handleIcons();
+    handleAriaLabel(this);
+    handleColor(this);
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  disable(ev) {
+    if (this.disabled) {
+      ev.stopImmediatePropagation();
+    }
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector('button').focus();
+  }
+  //////// Method //////////
+  ////////// OBSERVERS //////////
+  ariaLabelObserver() {
+    handleAriaLabel(this);
+  }
+  handleIcons() {
+    // Only allow one icon in the button
+    const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
+      if (acc)
+        element.remove();
+      else
+        acc = element;
+      return acc;
+    }, null);
+    const hasIcon = !!icon;
+    const hasLoc = !!this.hostElement.querySelector('q2-loc');
+    const hasText = !!this.hostElement.textContent.trim();
+    const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
+    const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
+    const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
+    let iconPosition;
+    if (hasIconOnly)
+      iconPosition = 'only';
+    else if (hasIconLeft)
+      iconPosition = 'left';
+    else if (hasIconRight)
+      iconPosition = 'right';
+    this.iconPosition = iconPosition;
+  }
+  render() {
+    const { ariaExpanded, ariaHasPopup, ariaSelected, disabled, type, tabindex } = this.buttonAttributes;
+    const { iconPosition, loading, badge, label, hideLabel } = this;
+    const renderLoadingSpinner = iconPosition || loading;
+    const isLoadingSpinnerInline = !iconPosition || badge;
+    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 }))));
+  }
+  get buttonAttributes() {
+    var _a, _b, _c;
+    return {
+      ariaExpanded: this.ariaExpanded !== undefined ? `${((_a = this.ariaExpanded) === null || _a === void 0 ? void 0 : _a.toString()) === 'true'}` : undefined,
+      ariaHasPopup: this.ariaHasPopup !== undefined ? `${((_b = this.ariaHasPopup) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
+      ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
+      ariaSelected: this.ariaSelected !== undefined ? `${((_c = this.ariaSelected) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
+      disabled: this.disabled || false,
+      type: this.type || 'button',
+      tabindex: this.tabIndex || undefined,
+    };
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "ariaLabel": ["ariaLabelObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-btn", {
+    "ariaExpanded": [1, "aria-expanded"],
+    "ariaHasPopup": [1, "aria-has-popup"],
+    "ariaControls": [1, "aria-controls"],
+    "ariaSelected": [1, "aria-selected"],
+    "label": [1537],
+    "hideLabel": [1540, "hide-label"],
+    "ariaLabel": [1537, "aria-label"],
+    "tabIndex": [2, "tab-index"],
+    "intent": [513],
+    "color": [513],
+    "disabled": [516],
+    "type": [513],
+    "loading": [516],
+    "badge": [516],
+    "active": [516],
+    "fab": [516],
+    "block": [516],
+    "iconPosition": [32]
+  }, [[2, "click", "disable"], [0, "focus", "delegateFocus"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-btn", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Btn);
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Q2Btn as Q, defineCustomElement as d };

package/dist/components/index6.js

@@ -0,0 +1,145 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h as handleAriaLabel, l as loc } from './index13.js';
+import { d as defineCustomElement$3 } from './index5.js';
+import { d as defineCustomElement$2 } from './index7.js';
+import { d as defineCustomElement$1 } from './index9.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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background-color:var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff)))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2)))))));color:var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
+
+const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onItemClick = (event) => {
+      event.stopImmediatePropagation();
+      this.hostElement.dispatchEvent(new CustomEvent('click', {
+        detail: {
+          type: 'select',
+          value: this.value || '',
+        },
+        bubbles: true,
+      }));
+    };
+    this.onItemKeydown = (event) => {
+      if (['ArrowRight', 'Right'].includes(event.key)) {
+        this.focusRemoveBtn();
+      }
+    };
+    this.onItemFocus = (event) => {
+      event.stopPropagation();
+    };
+    this.onRemoveBtnClick = (event) => {
+      event.stopImmediatePropagation();
+      this.hostElement.dispatchEvent(new CustomEvent('click', {
+        detail: {
+          type: 'remove',
+          value: this.value || '',
+        },
+        bubbles: true,
+      }));
+    };
+    this.onRemoveBtnKeydown = (event) => {
+      if (['ArrowLeft', 'Left'].includes(event.key)) {
+        this.focusItem();
+      }
+    };
+    this.onRemoveBtnFocus = (event) => {
+      event.stopPropagation();
+    };
+    this.disabled = undefined;
+    this.removable = undefined;
+    this.separator = undefined;
+    this.label = undefined;
+    this.ariaLabel = undefined;
+    this.value = undefined;
+  }
+  /////// LIFECYCLE HOOKS //////
+  componentWillLoad() {
+    handleAriaLabel(this);
+  }
+  //////// OBSERVERS //////////
+  ariaLabelObserver() {
+    handleAriaLabel(this);
+  }
+  get removeLabel() {
+    return loc('tecton.element.dropdownItem.remove', [this.label || '']);
+  }
+  get dropdownItemBtn() {
+    return this.hostElement.shadowRoot.querySelector('.dropdown-item');
+  }
+  get innerLabel() {
+    return this.label || this.hostElement.textContent;
+  }
+  get removeBtn() {
+    return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');
+  }
+  ///////// Host Element Events //////
+  onHostElementFocus() {
+    if (event.target === this.hostElement) {
+      this.focusItem();
+    }
+  }
+  ///////// Actions /////////
+  focusItem() {
+    this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
+  }
+  focusRemoveBtn() {
+    this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
+  }
+  render() {
+    if (!!this.separator) {
+      return this.separatorDOM();
+    }
+    return this.itemDOM();
+  }
+  separatorDOM() {
+    return (h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" }));
+  }
+  itemDOM() {
+    return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable ? (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" }))) : ('')));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "ariaLabel": ["ariaLabelObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-dropdown-item", {
+    "disabled": [516],
+    "removable": [516],
+    "separator": [516],
+    "label": [513],
+    "ariaLabel": [513, "aria-label"],
+    "value": [513]
+  }, [[0, "focus", "onHostElementFocus"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-dropdown-item", "q2-btn", "q2-icon", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-dropdown-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2DropdownItem);
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Q2DropdownItem as Q, defineCustomElement as d };