@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/cjs/{tttx-button-v2_1_9_101.cjs.entry.js → tttx-button-v2_1_9_103.cjs.entry.js}

@@ -4,153 +4,153 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2c07dc57.js');
 
-const tttxButtonV2Css = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:inline-block}button{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;white-space:nowrap;vertical-align:middle;font-weight:600;text-transform:none;cursor:pointer;background:transparent;min-width:96px;max-width:240px;box-sizing:border-box}button:disabled{cursor:not-allowed}button.notext{min-width:40px;max-width:40px;height:40px;padding:8px;aspect-ratio:1/1;justify-content:center;align-items:center;box-sizing:border-box}button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.label-text{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button.button.btn-size-s{font-size:13px;padding:6px 10px;gap:4px;min-height:32px}button.button.btn-size-m{font-size:14px;padding:8px 12px;gap:4px;min-height:40px}button.button.btn-size-l{font-size:16px;padding:12px 24px;gap:8px;min-height:48px}button.btn-primary{background-color:#1479c6;border:1px solid #1479c6;color:#ffffff;transition:background-color 0.2s ease}button.btn-primary:hover:not(:disabled){background-color:#146eb3}button.btn-primary:active:not(:disabled){background-color:#115a8f}button.btn-primary:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-secondary{background-color:#ffffff;color:#17272b;border:1px solid #D4D4D4;transition:background-color 0.2s ease}button.btn-secondary:hover:not(:disabled){background-color:#fafafa}button.btn-secondary:active:not(:disabled){background-color:#f5f5f5}button.btn-secondary:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-danger{background-color:#dc2626;color:#ffffff;transition:background-color 0.2s ease;border:1px solid #DC2626}button.btn-danger:hover:not(:disabled){background-color:#b91c1c}button.btn-danger:active:not(:disabled){background-color:#991b1b}button.btn-danger:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-success{background-color:#16a34a;color:#ffffff;transition:background-color 0.2s ease;border:1px solid #16a34a}button.btn-success:hover:not(:disabled){background-color:#15803d}button.btn-success:active:not(:disabled){background-color:#166534}button.btn-success:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-warning{background-color:#eab308;color:#ffffff;transition:background-color 0.2s ease;border:1px solid #eab308}button.btn-warning:hover:not(:disabled){background-color:#ca8a04}button.btn-warning:active:not(:disabled){background-color:#885544}button.btn-warning:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-light{background-color:#000000;color:#ffffff;border:1px solid #000000}button.btn-light:hover:not(:disabled){background-color:#222222}button.btn-light:active:not(:disabled){background-color:#1a1a1a}button.btn-transparent{background:transparent;border:1px solid transparent;box-shadow:none;color:#1479c6;border:1px solid transparent}button.btn-transparent:hover:not(:disabled){background:rgba(0, 0, 0, 0.04)}button.btn-transparent:disabled{opacity:0.4;pointer-events:none}button.btn-default{background-color:var(--button-bg, transparent);border:1px solid var(--button-border, transparent);color:var(--button-color, inherit);transition:background-color 0.2s ease, border-color 0.2s ease}button.btn-default:hover:not(:disabled){background-color:var(--button-bg-hover, var(--button-bg, transparent));border-color:var(--button-border-hover, var(--button-border, transparent))}button.btn-default:active:not(:disabled){background-color:var(--button-bg-active, var(--button-bg, transparent));border-color:var(--button-border-active, var(--button-border, transparent))}button.btn-default:focus-visible{outline:var(--button-focus-outline, 2px solid currentColor);outline-offset:var(--button-focus-offset, 2px)}button.btn-default:disabled{background-color:var(--button-bg-disabled, #e5e5e5);color:var(--button-color-disabled, #525252);border-color:var(--button-border-disabled, #d4d4d4);opacity:var(--button-opacity-disabled, 1)}button.icon-start .button-content,button.icon-end .button-content{gap:8px}button.icon-start .icon-left,button.icon-end .icon-right{display:flex;align-items:center;justify-content:center}button.icon-start.btn-size-s{padding-right:14px}button.icon-end.btn-size-s{padding-left:14px}button.icon-start.btn-size-m{padding-right:16px}button.icon-end.btn-size-m{padding-left:16px}button.icon-start.btn-size-l{padding-right:28px}button.icon-end.btn-size-l{padding-left:28px}.button-content{font-family:Roboto;display:inline-flex;align-items:center;justify-content:center;width:100%}.button-content:not(:has(.icon-left,.icon-right)){justify-content:center}button.notext .button-content{justify-content:center !important;align-items:center;width:100%;display:flex;gap:0}tttx-icon,tttx-icon_1_9_101{cursor:inherit;display:inline-flex;vertical-align:middle;font-size:16px}.button-wrapper{position:relative}.button-wrapper .dropdown-list{position:absolute;top:100%;left:0;list-style:none;z-index:1;width:260px;border-radius:8px;padding:4px;background-color:white;border:1px solid #d4d4d4;margin-top:8px}.button-wrapper .dropdown-list .dropdown-option{padding:8px;cursor:pointer;white-space:nowrap;font-family:Roboto;font-size:14px;font-weight:400;line-height:16px}.button-wrapper .dropdown-list .dropdown-option:hover,.button-wrapper .dropdown-list .dropdown-option:focus{background-color:#f5f5f5;border-radius:8px}.button-wrapper .dropdown-list.dropdown-left{left:auto;right:0;top:100%;list-style:none;z-index:1;width:260px;border-radius:8px;padding:4px;margin-top:8px}.button-wrapper .dropdown-button{border-radius:4px;width:100%;justify-content:space-between}.button-wrapper .dropdown-button:hover{background-color:#f0f0f0}.button-wrapper .dropdown-button:active{background-color:#e3e3e3}.button-wrapper .dropdown-button .dropdown-arrow{display:flex;align-items:center;margin-left:8px}.button-wrapper .dropdown-button .dropdown-arrow .hydrated{display:flex;align-items:center}.dropdown-item-content{display:flex;align-items:center;gap:8px}.dropdown-item-icon{display:flex;align-items:center;justify-content:center}";
+const tttxButtonV2Css = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:inline-block}button{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;white-space:nowrap;vertical-align:middle;font-weight:600;text-transform:none;cursor:pointer;background:transparent;min-width:96px;max-width:240px;box-sizing:border-box}button:disabled{cursor:not-allowed}button.notext{min-width:40px;max-width:40px;height:40px;padding:8px;aspect-ratio:1/1;justify-content:center;align-items:center;box-sizing:border-box}button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.label-text{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button.button.btn-size-s{font-size:13px;padding:6px 10px;gap:4px;min-height:32px}button.button.btn-size-m{font-size:14px;padding:8px 12px;gap:4px;min-height:40px}button.button.btn-size-l{font-size:16px;padding:12px 24px;gap:8px;min-height:48px}button.btn-primary{background-color:#1479c6;border:1px solid #1479c6;color:#ffffff;transition:background-color 0.2s ease}button.btn-primary:hover:not(:disabled){background-color:#146eb3}button.btn-primary:active:not(:disabled){background-color:#115a8f}button.btn-primary:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-secondary{background-color:#ffffff;color:#17272b;border:1px solid #D4D4D4;transition:background-color 0.2s ease}button.btn-secondary:hover:not(:disabled){background-color:#fafafa}button.btn-secondary:active:not(:disabled){background-color:#f5f5f5}button.btn-secondary:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-danger{background-color:#dc2626;color:#ffffff;transition:background-color 0.2s ease;border:1px solid #DC2626}button.btn-danger:hover:not(:disabled){background-color:#b91c1c}button.btn-danger:active:not(:disabled){background-color:#991b1b}button.btn-danger:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-success{background-color:#16a34a;color:#ffffff;transition:background-color 0.2s ease;border:1px solid #16a34a}button.btn-success:hover:not(:disabled){background-color:#15803d}button.btn-success:active:not(:disabled){background-color:#166534}button.btn-success:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-warning{background-color:#eab308;color:#ffffff;transition:background-color 0.2s ease;border:1px solid #eab308}button.btn-warning:hover:not(:disabled){background-color:#ca8a04}button.btn-warning:active:not(:disabled){background-color:#885544}button.btn-warning:disabled{background-color:#e5e5e5;color:#525252;border-color:#d4d4d4}button.btn-light{background-color:#000000;color:#ffffff;border:1px solid #000000}button.btn-light:hover:not(:disabled){background-color:#222222}button.btn-light:active:not(:disabled){background-color:#1a1a1a}button.btn-transparent{background:transparent;border:1px solid transparent;box-shadow:none;color:#1479c6;border:1px solid transparent}button.btn-transparent:hover:not(:disabled){background:rgba(0, 0, 0, 0.04)}button.btn-transparent:disabled{opacity:0.4;pointer-events:none}button.btn-default{background-color:var(--button-bg, transparent);border:1px solid var(--button-border, transparent);color:var(--button-color, inherit);transition:background-color 0.2s ease, border-color 0.2s ease}button.btn-default:hover:not(:disabled){background-color:var(--button-bg-hover, var(--button-bg, transparent));border-color:var(--button-border-hover, var(--button-border, transparent))}button.btn-default:active:not(:disabled){background-color:var(--button-bg-active, var(--button-bg, transparent));border-color:var(--button-border-active, var(--button-border, transparent))}button.btn-default:focus-visible{outline:var(--button-focus-outline, 2px solid currentColor);outline-offset:var(--button-focus-offset, 2px)}button.btn-default:disabled{background-color:var(--button-bg-disabled, #e5e5e5);color:var(--button-color-disabled, #525252);border-color:var(--button-border-disabled, #d4d4d4);opacity:var(--button-opacity-disabled, 1)}button.icon-start .button-content,button.icon-end .button-content{gap:8px}button.icon-start .icon-left,button.icon-end .icon-right{display:flex;align-items:center;justify-content:center}button.icon-start.btn-size-s{padding-right:14px}button.icon-end.btn-size-s{padding-left:14px}button.icon-start.btn-size-m{padding-right:16px}button.icon-end.btn-size-m{padding-left:16px}button.icon-start.btn-size-l{padding-right:28px}button.icon-end.btn-size-l{padding-left:28px}.button-content{font-family:Roboto;display:inline-flex;align-items:center;justify-content:center;width:100%}.button-content:not(:has(.icon-left,.icon-right)){justify-content:center}button.notext .button-content{justify-content:center !important;align-items:center;width:100%;display:flex;gap:0}tttx-icon,tttx-icon_1_9_103{cursor:inherit;display:inline-flex;vertical-align:middle;font-size:16px}.button-wrapper{position:relative}.button-wrapper .dropdown-list{position:absolute;top:100%;left:0;list-style:none;z-index:1;width:260px;border-radius:8px;padding:4px;background-color:white;border:1px solid #d4d4d4;margin-top:8px}.button-wrapper .dropdown-list .dropdown-option{padding:8px;cursor:pointer;white-space:nowrap;font-family:Roboto;font-size:14px;font-weight:400;line-height:16px}.button-wrapper .dropdown-list .dropdown-option:hover,.button-wrapper .dropdown-list .dropdown-option:focus{background-color:#f5f5f5;border-radius:8px}.button-wrapper .dropdown-list.dropdown-left{left:auto;right:0;top:100%;list-style:none;z-index:1;width:260px;border-radius:8px;padding:4px;margin-top:8px}.button-wrapper .dropdown-button{border-radius:4px;width:100%;justify-content:space-between}.button-wrapper .dropdown-button:hover{background-color:#f0f0f0}.button-wrapper .dropdown-button:active{background-color:#e3e3e3}.button-wrapper .dropdown-button .dropdown-arrow{display:flex;align-items:center;margin-left:8px}.button-wrapper .dropdown-button .dropdown-arrow .hydrated{display:flex;align-items:center}.dropdown-item-content{display:flex;align-items:center;gap:8px}.dropdown-item-icon{display:flex;align-items:center;justify-content:center}";
 
-const TttxButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.optionSelect = index.createEvent(this, "optionSelect", 7);
-    this.dropdownCloseEvent = index.createEvent(this, "dropdownCloseEvent", 7);
-    this.calculateDropdownDirection = () => {
-      const rect = this.host.getBoundingClientRect();
-      const dropdownEl = this.host.querySelector('.dropdown-list');
-      const dropdownWidth = dropdownEl ? dropdownEl.offsetWidth : 260;
-      const spaceRight = window.innerWidth - rect.right;
-      const spaceLeft = rect.left;
-      if (spaceRight > dropdownWidth) {
-        this.dropdownDirection = 'right';
-      }
-      else if (spaceLeft > dropdownWidth) {
-        this.dropdownDirection = 'left';
-      }
-      else {
-        this.dropdownDirection = 'left';
-      }
-    };
-    this.toggleDropdown = () => {
-      if (!this.isDisabled) {
-        if (!this.dropdownOpen) {
-          this.calculateDropdownDirection();
-        }
-        this.dropdownOpen = !this.dropdownOpen;
-      }
-    };
-    this.handleDropdownItemClick = (index) => {
-      this.dropdownOpen = false;
-      this.optionSelect.emit(index);
-    };
-    this.notext = false;
-    this.icon = undefined;
-    this.label = undefined;
-    this.iconcolor = 'black';
-    this.iconposition = 'left';
-    this.iconStart = undefined;
-    this.iconEnd = undefined;
-    this.design = 'primary';
-    this.disabled = false;
-    this.type = 'button';
-    this.href = undefined;
-    this.options = [];
-    this.size = 'M';
-    this.dropdownOpen = false;
-    this.dropdownDirection = 'left';
-  }
-  get isDisabled() {
-    return this.disabled || this.design === 'disabled';
-  }
-  get parsedOptions() {
-    if (Array.isArray(this.options)) {
-      return this.options.map(opt => typeof opt === 'string'
-        ? { label: opt }
-        : {
-          id: opt.id,
-          label: opt.label,
-          icon: opt.icon,
-        });
-    }
-    try {
-      const parsed = JSON.parse(this.options);
-      return parsed.map((opt) => typeof opt === 'string'
-        ? { label: opt }
-        : {
-          id: opt.id,
-          label: opt.label,
-          icon: opt.icon,
-        });
-    }
-    catch (_a) {
-      return [];
-    }
-  }
-  get iconSize() {
-    switch (this.size) {
-      case 'L':
-        return 24;
-      case 'M':
-        return 20;
-      case 'S':
-      default:
-        return 16;
-    }
-  }
-  componentWillLoad() {
-    const validDesigns = [
-      'primary',
-      'secondary',
-      'default',
-      'disabled',
-      'danger',
-      'light',
-      'success',
-      'warning',
-      'transparent',
-    ];
-    const validSizes = ['S', 'M', 'L'];
-    if (!validDesigns.includes(this.design)) {
-      this.design = 'primary';
-    }
-    if (!validSizes.includes(this.size)) {
-      this.size = 'M';
-    }
-    if (['primary', 'danger', 'light', 'success', 'warning'].includes(this.design)) {
-      this.iconcolor = 'white';
-    }
-    if (this.design === 'transparent') {
-      this.iconcolor = '#1479c6';
-    }
-  }
-  handleClickOutside(event) {
-    if (this.dropdownOpen && !this.host.contains(event.target)) {
-      this.dropdownOpen = false;
-      this.dropdownCloseEvent.emit();
-    }
-  }
-  renderButtonContent() {
-    var _a;
-    return (index.h("div", { class: "button-content" }, this.iconStart && (index.h("div", { class: "icon-left" }, index.h("tttx-icon_1_9_101", { icon: this.iconStart, color: this.iconcolor, size: this.iconSize }))), !this.notext && (index.h("div", { class: "label-text" }, index.h("span", null, (_a = this.label) !== null && _a !== void 0 ? _a : index.h("slot", null)))), this.iconEnd && (index.h("div", { class: "icon-right" }, index.h("tttx-icon_1_9_101", { icon: this.iconEnd, color: this.iconcolor, size: this.iconSize }))), this.type === 'dropdown' && (index.h("div", { class: "dropdown-arrow" }, index.h("tttx-icon_1_9_101", { icon: "keyboard_arrow_down", color: this.iconcolor, size: this.iconSize })))));
-  }
-  renderDropdownList() {
-    if (this.type !== 'dropdown' || !this.dropdownOpen)
-      return null;
-    const dropdownClasses = `dropdown-list dropdown-${this.dropdownDirection}`;
-    return (index.h("ul", { class: dropdownClasses, role: "listbox" }, this.parsedOptions.map((item, index$1) => (index.h("li", { class: "dropdown-option", role: "option", tabindex: 0, key: index$1, onClick: () => this.handleDropdownItemClick(index$1) }, index.h("div", { class: "dropdown-item-content" }, item.icon && (index.h("tttx-icon_1_9_101", { icon: item.icon, color: "black", size: this.iconSize, class: "dropdown-item-icon" })), index.h("span", { class: "dropdown-item-label" }, item.label)))))));
-  }
-  render() {
-    const classes = [
-      'button',
-      `btn-${this.design}`,
-      this.iconStart ? 'icon-start' : '',
-      this.iconEnd ? 'icon-end' : '',
-      this.notext ? 'notext' : '',
-      this.type === 'dropdown' ? 'dropdown-button' : '',
-      `btn-size-${this.size.toLowerCase()}`,
-    ]
-      .filter(Boolean)
-      .join(' ');
-    return (index.h(index.Host, null, index.h("div", { class: "button-wrapper" }, index.h("button", { class: classes, disabled: this.isDisabled, onClick: this.type === 'dropdown' ? this.toggleDropdown : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.dropdownOpen) : undefined }, this.renderButtonContent()), this.renderDropdownList())));
-  }
-  get host() { return index.getElement(this); }
-};
+const TttxButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.optionSelect = index.createEvent(this, "optionSelect", 7);
+    this.dropdownCloseEvent = index.createEvent(this, "dropdownCloseEvent", 7);
+    this.calculateDropdownDirection = () => {
+      const rect = this.host.getBoundingClientRect();
+      const dropdownEl = this.host.querySelector('.dropdown-list');
+      const dropdownWidth = dropdownEl ? dropdownEl.offsetWidth : 260;
+      const spaceRight = window.innerWidth - rect.right;
+      const spaceLeft = rect.left;
+      if (spaceRight > dropdownWidth) {
+        this.dropdownDirection = 'right';
+      }
+      else if (spaceLeft > dropdownWidth) {
+        this.dropdownDirection = 'left';
+      }
+      else {
+        this.dropdownDirection = 'left';
+      }
+    };
+    this.toggleDropdown = () => {
+      if (!this.isDisabled) {
+        if (!this.dropdownOpen) {
+          this.calculateDropdownDirection();
+        }
+        this.dropdownOpen = !this.dropdownOpen;
+      }
+    };
+    this.handleDropdownItemClick = (index) => {
+      this.dropdownOpen = false;
+      this.optionSelect.emit(index);
+    };
+    this.notext = false;
+    this.icon = undefined;
+    this.label = undefined;
+    this.iconcolor = 'black';
+    this.iconposition = 'left';
+    this.iconStart = undefined;
+    this.iconEnd = undefined;
+    this.design = 'primary';
+    this.disabled = false;
+    this.type = 'button';
+    this.href = undefined;
+    this.options = [];
+    this.size = 'M';
+    this.dropdownOpen = false;
+    this.dropdownDirection = 'left';
+  }
+  get isDisabled() {
+    return this.disabled || this.design === 'disabled';
+  }
+  get parsedOptions() {
+    if (Array.isArray(this.options)) {
+      return this.options.map(opt => typeof opt === 'string'
+        ? { label: opt }
+        : {
+          id: opt.id,
+          label: opt.label,
+          icon: opt.icon,
+        });
+    }
+    try {
+      const parsed = JSON.parse(this.options);
+      return parsed.map((opt) => typeof opt === 'string'
+        ? { label: opt }
+        : {
+          id: opt.id,
+          label: opt.label,
+          icon: opt.icon,
+        });
+    }
+    catch (_a) {
+      return [];
+    }
+  }
+  get iconSize() {
+    switch (this.size) {
+      case 'L':
+        return 24;
+      case 'M':
+        return 20;
+      case 'S':
+      default:
+        return 16;
+    }
+  }
+  componentWillLoad() {
+    const validDesigns = [
+      'primary',
+      'secondary',
+      'default',
+      'disabled',
+      'danger',
+      'light',
+      'success',
+      'warning',
+      'transparent',
+    ];
+    const validSizes = ['S', 'M', 'L'];
+    if (!validDesigns.includes(this.design)) {
+      this.design = 'primary';
+    }
+    if (!validSizes.includes(this.size)) {
+      this.size = 'M';
+    }
+    if (['primary', 'danger', 'light', 'success', 'warning'].includes(this.design)) {
+      this.iconcolor = 'white';
+    }
+    if (this.design === 'transparent') {
+      this.iconcolor = '#1479c6';
+    }
+  }
+  handleClickOutside(event) {
+    if (this.dropdownOpen && !this.host.contains(event.target)) {
+      this.dropdownOpen = false;
+      this.dropdownCloseEvent.emit();
+    }
+  }
+  renderButtonContent() {
+    var _a;
+    return (index.h("div", { class: "button-content" }, this.iconStart && (index.h("div", { class: "icon-left" }, index.h("tttx-icon_1_9_103", { icon: this.iconStart, color: this.iconcolor, size: this.iconSize }))), !this.notext && (index.h("div", { class: "label-text" }, index.h("span", null, (_a = this.label) !== null && _a !== void 0 ? _a : index.h("slot", null)))), this.iconEnd && (index.h("div", { class: "icon-right" }, index.h("tttx-icon_1_9_103", { icon: this.iconEnd, color: this.iconcolor, size: this.iconSize }))), this.type === 'dropdown' && (index.h("div", { class: "dropdown-arrow" }, index.h("tttx-icon_1_9_103", { icon: "keyboard_arrow_down", color: this.iconcolor, size: this.iconSize })))));
+  }
+  renderDropdownList() {
+    if (this.type !== 'dropdown' || !this.dropdownOpen)
+      return null;
+    const dropdownClasses = `dropdown-list dropdown-${this.dropdownDirection}`;
+    return (index.h("ul", { class: dropdownClasses, role: "listbox" }, this.parsedOptions.map((item, index$1) => (index.h("li", { class: "dropdown-option", role: "option", tabindex: 0, key: index$1, onClick: () => this.handleDropdownItemClick(index$1) }, index.h("div", { class: "dropdown-item-content" }, item.icon && (index.h("tttx-icon_1_9_103", { icon: item.icon, color: "black", size: this.iconSize, class: "dropdown-item-icon" })), index.h("span", { class: "dropdown-item-label" }, item.label)))))));
+  }
+  render() {
+    const classes = [
+      'button',
+      `btn-${this.design}`,
+      this.iconStart ? 'icon-start' : '',
+      this.iconEnd ? 'icon-end' : '',
+      this.notext ? 'notext' : '',
+      this.type === 'dropdown' ? 'dropdown-button' : '',
+      `btn-size-${this.size.toLowerCase()}`,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    return (index.h(index.Host, null, index.h("div", { class: "button-wrapper" }, index.h("button", { class: classes, disabled: this.isDisabled, onClick: this.type === 'dropdown' ? this.toggleDropdown : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.dropdownOpen) : undefined }, this.renderButtonContent()), this.renderDropdownList())));
+  }
+  get host() { return index.getElement(this); }
+};
 TttxButton.style = tttxButtonV2Css;
 
-exports.tttx_button_v2_1_9_101 = TttxButton;
+exports.tttx_button_v2_1_9_103 = TttxButton;

package/dist/cjs/{tttx-button_1_9_101.cjs.entry.js → tttx-button_1_9_103.cjs.entry.js}

@@ -6,31 +6,31 @@ const index = require('./index-2c07dc57.js');
 
 const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.blackout{background:#363636;border:1px solid #363636;color:white}.blackout:active{background:#212121;border:1px solid #212121}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.blackout:hover{background:#212121;border:1px solid #212121}}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
 
-const TttxButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this._iconcolor = 'black';
-    this.notext = undefined;
-    this.icon = undefined;
-    this.iconposition = 'left';
-    this.iconcolor = 'black';
-    this.design = 'default';
-  }
-  componentWillLoad() {
-    this._design = this.design;
-    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless', 'borderless-circle', 'blackout'];
-    if (!designs.includes(this.design)) {
-      this._design = 'default';
-    }
-    if (this._design === 'primary' || this._design === 'danger' || this._design === 'blackout') {
-      this.iconcolor = 'white';
-    }
-  }
-  render() {
-    this._iconcolor = this.iconcolor;
-    return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon_1_9_101", { icon: this.icon, color: this._iconcolor }))), !this.notext && (index.h("div", { class: "button-content" }, index.h("slot", null))), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon_1_9_101", { icon: this.icon, color: this._iconcolor }))))));
-  }
-};
+const TttxButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._iconcolor = 'black';
+    this.notext = undefined;
+    this.icon = undefined;
+    this.iconposition = 'left';
+    this.iconcolor = 'black';
+    this.design = 'default';
+  }
+  componentWillLoad() {
+    this._design = this.design;
+    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless', 'borderless-circle', 'blackout'];
+    if (!designs.includes(this.design)) {
+      this._design = 'default';
+    }
+    if (this._design === 'primary' || this._design === 'danger' || this._design === 'blackout') {
+      this.iconcolor = 'white';
+    }
+  }
+  render() {
+    this._iconcolor = this.iconcolor;
+    return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon_1_9_103", { icon: this.icon, color: this._iconcolor }))), !this.notext && (index.h("div", { class: "button-content" }, index.h("slot", null))), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon_1_9_103", { icon: this.icon, color: this._iconcolor }))))));
+  }
+};
 TttxButton.style = tttxButtonCss;
 
-exports.tttx_button_1_9_101 = TttxButton;
+exports.tttx_button_1_9_103 = TttxButton;