@xlabs-store/core 0.0.1 → 0.0.2

package/dist/esm/x-auto-complete-dropdown-content.entry.js

@@ -1,67 +0,0 @@
-import { r as registerInstance, a as getElement, h } from './index-ig_mFsVk.js';
-
-const autoCompleteDropdownContentCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}.x-auto-complete-dropdown{position:relative;margin:0;padding:var(--x-auto-complete-dropdown-padding, 4px);background-color:var(--x-auto-complete-dropdown-bg, var(--x-color-bg-elevated, #ffffff));border-radius:var(--x-auto-complete-dropdown-border-radius, var(--x-control-border-radius-lg, var(--x-border-radius-lg, 8px)));-webkit-box-shadow:var(--x-auto-complete-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));box-shadow:var(--x-auto-complete-dropdown-shadow, var(--x-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)));outline:none;font-size:var(--x-auto-complete-option-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));line-height:var(--x-auto-complete-option-line-height, var(--x-control-line-height, var(--x-line-height-base, 1.5714285714)));-webkit-transform-origin:top center;transform-origin:top center;-webkit-transition:opacity var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), -webkit-transform var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:opacity var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), -webkit-transform var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:opacity var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), transform var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:opacity var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), transform var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), -webkit-transform var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-auto-complete-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-auto-complete-dropdown-hidden{opacity:0;-webkit-transform:scaleY(0.8);transform:scaleY(0.8);pointer-events:none}.x-auto-complete-dropdown-content{overflow-y:auto;overflow-anchor:none}.x-auto-complete-dropdown-placement-topLeft,.x-auto-complete-dropdown-placement-topRight{-webkit-transform-origin:bottom center;transform-origin:bottom center}.x-auto-complete-empty{display:block;min-height:var(--x-auto-complete-option-height, var(--x-control-height, var(--x-size-control-height, 32px)));padding:var(--x-auto-complete-empty-padding, 8px 12px);color:var(--x-auto-complete-empty-color, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));font-size:var(--x-auto-complete-option-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));line-height:22px;text-align:center}.x-auto-complete-option{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:var(--x-auto-complete-option-height, var(--x-control-height, var(--x-size-control-height, 32px)));padding:var(--x-auto-complete-option-padding, 5px 12px);color:var(--x-auto-complete-option-color, var(--x-control-color, var(--x-color-text, rgba(0, 0, 0, 0.88))));font-size:var(--x-auto-complete-option-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));line-height:var(--x-auto-complete-option-line-height, var(--x-control-line-height, var(--x-line-height-base, 1.5714285714)));border-radius:var(--x-auto-complete-option-border-radius, var(--x-control-border-radius, var(--x-border-radius-base, 6px)));cursor:pointer;-webkit-transition:background-color var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) ease;transition:background-color var(--x-auto-complete-motion-duration, var(--x-motion-duration-mid, 0.2s)) ease}.x-auto-complete-option:hover:not(.x-auto-complete-option-disabled){background-color:var(--x-auto-complete-option-bg-hover, var(--x-control-item-bg-hover, var(--x-color-fill-hover, rgba(0, 0, 0, 0.04))))}.x-auto-complete-option-active{background-color:var(--x-auto-complete-option-bg-active, var(--x-control-item-bg-active, var(--x-color-fill-active, #e6f4ff)))}.x-auto-complete-option-disabled{color:var(--x-auto-complete-option-color-disabled, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))));cursor:not-allowed}.x-auto-complete-option-content{-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-auto-complete-option-group{padding:0}.x-auto-complete-option-group:not(:first-child){margin-top:4px;padding-top:4px;border-top:1px solid rgba(0, 0, 0, 0.06)}.x-auto-complete-option-group-label{padding:var(--x-auto-complete-group-label-padding, 8px 12px 4px);color:var(--x-auto-complete-group-label-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));font-size:var(--x-auto-complete-group-label-font-size, var(--x-font-size-sm, 12px));font-weight:500}.x-auto-complete-option-in-group{padding-left:24px}`;
-
-const XAutoCompleteDropdownContent = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /**
-     * Class map for dropdown wrapper.
-     * @example
-     * <x-auto-complete-dropdown-content dropdownClasses={{ 'x-auto': true }}></x-auto-complete-dropdown-content>
-     */
-    dropdownClasses = {};
-    /**
-     * Inline style map for dropdown wrapper.
-     * @example
-     * <x-auto-complete-dropdown-content dropdownStyle={{ width: '200px' }}></x-auto-complete-dropdown-content>
-     */
-    dropdownStyle = {};
-    /**
-     * Callback to pass dropdown element ref.
-     * @example
-     * <x-auto-complete-dropdown-content setDropdownRef={(el) => console.log(el)}></x-auto-complete-dropdown-content>
-     */
-    setDropdownRef;
-    /**
-     * Dropdown container element reference.
-     */
-    dropdownEl = null;
-    /**
-     * Provide dropdown ref after initial render.
-     * @returns void
-     */
-    componentDidLoad() {
-        this.setDropdownRef?.(this.dropdownEl);
-    }
-    /**
-     * Cleanup dropdown ref on disconnect.
-     * @returns void
-     */
-    disconnectedCallback() {
-        this.setDropdownRef?.(null);
-    }
-    /**
-     * Capture dropdown ref and forward to callback.
-     * @param el - Dropdown element.
-     * @returns void
-     */
-    setRef = (el) => {
-        this.dropdownEl = el;
-        this.setDropdownRef?.(el);
-    };
-    /**
-     * Render dropdown wrapper and slot content.
-     * @returns JSX.Element
-     * @example
-     * <x-auto-complete-dropdown-content dropdownClasses={{ 'x-auto': true }}></x-auto-complete-dropdown-content>
-     */
-    render() {
-        return (h("div", { key: 'f6adbda3f3deb5e9f88db624e233438a02a00547', class: this.dropdownClasses, style: this.dropdownStyle, ref: this.setRef, part: "dropdown", role: "listbox" }, h("div", { key: 'c74c8352f9007682f4d5861e7c16b326af52efd5', class: "x-auto-complete-dropdown-content" }, h("slot", { key: '1213465fae790657a04dc3fd6f4f794a655b5075' }))));
-    }
-};
-XAutoCompleteDropdownContent.style = autoCompleteDropdownContentCss();
-
-export { XAutoCompleteDropdownContent as x_auto_complete_dropdown_content };

package/dist/esm/x-avatar.entry.js

@@ -1,267 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
-
-const xAvatarCss = () => `@charset "UTF-8";:host{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-avatar-color, var(--x-color-white, #fff));font-size:var(--x-avatar-font-size, var(--x-font-size-base, 14px));font-variant:tabular-nums;line-height:1;list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;white-space:nowrap;text-align:center;vertical-align:middle;background:var(--x-avatar-bg, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25)));width:var(--x-avatar-size, var(--x-control-height, 32px));height:var(--x-avatar-size, var(--x-control-height, 32px));border-radius:var(--x-avatar-border-radius-circle, 50%)}:host(.x-avatar-lg){width:var(--x-avatar-size-lg, var(--x-control-height-lg, 40px));height:var(--x-avatar-size-lg, var(--x-control-height-lg, 40px));font-size:var(--x-avatar-font-size-lg, 18px)}:host(.x-avatar-sm){width:var(--x-avatar-size-sm, var(--x-control-height-sm, 24px));height:var(--x-avatar-size-sm, var(--x-control-height-sm, 24px));font-size:var(--x-avatar-font-size-sm, var(--x-font-size-base, 14px))}:host(.x-avatar-default){width:var(--x-avatar-size, var(--x-control-height, 32px));height:var(--x-avatar-size, var(--x-control-height, 32px));font-size:var(--x-avatar-font-size, var(--x-font-size-base, 14px))}:host(.x-avatar-square){border-radius:var(--x-avatar-border-radius-square, var(--x-border-radius-sm, 4px))}:host(.x-avatar-circle){border-radius:var(--x-avatar-border-radius-circle, 50%)}:host(.x-avatar-image){background:transparent}.x-avatar-image{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(.x-avatar-icon) .x-avatar-icon{font-size:var(--x-avatar-font-size-icon, 18px)}:host(.x-avatar-lg.x-avatar-icon) .x-avatar-icon{font-size:var(--x-avatar-icon-size-lg, 24px)}:host(.x-avatar-sm.x-avatar-icon) .x-avatar-icon{font-size:var(--x-avatar-icon-size-sm, 14px)}.x-avatar-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}::slotted([slot=icon]){font-size:inherit;color:inherit}.x-avatar-string{position:absolute;-webkit-transform-origin:0 center;transform-origin:0 center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;line-height:1;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`;
-
-const XAvatar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xError = createEvent(this, "xError", 7);
-    }
-    get el() { return getElement(this); }
-    // ========================================
-    // PROPS
-    // ========================================
-    /**
-     * The shape of avatar.
-     * @example
-     * <x-avatar shape="square"></x-avatar>
-     */
-    shape = 'circle';
-    /**
-     * The size of the avatar.
-     * @example
-     * <x-avatar size="large"></x-avatar>
-     */
-    size = 'default';
-    /**
-     * The address of the image for an image avatar.
-     * @example
-     * <x-avatar src="/avatar.png"></x-avatar>
-     */
-    src;
-    /**
-     * A list of sources to use for different screen resolutions.
-     * @example
-     * <x-avatar srcSet="/avatar@2x.png 2x"></x-avatar>
-     */
-    srcSet;
-    /**
-     * This attribute defines the alternative text describing the image.
-     * @example
-     * <x-avatar src="/avatar.png" alt="User"></x-avatar>
-     */
-    alt = '';
-    /**
-     * Icon type (for icon avatar, use slot="icon" instead).
-     * @example
-     * <x-avatar icon="user"><x-icon slot="icon" name="user"></x-icon></x-avatar>
-     */
-    icon;
-    /**
-     * Letter type unit distance between left and right sides.
-     * @example
-     * <x-avatar gap={6}>AB</x-avatar>
-     */
-    gap = 4;
-    /**
-     * Whether the picture is allowed to be dragged.
-     * @example
-     * <x-avatar src="/avatar.png" imgDraggable={false}></x-avatar>
-     */
-    imgDraggable = true;
-    /**
-     * CORS settings attributes.
-     * @example
-     * <x-avatar src="/avatar.png" crossOrigin="anonymous"></x-avatar>
-     */
-    crossOrigin;
-    // ========================================
-    // STATE
-    // ========================================
-    /**
-     * Track whether image loaded successfully.
-     */
-    isImgExist = true;
-    /**
-     * Scale factor for text content to fit avatar width.
-     */
-    scale = 1;
-    /**
-     * Whether component is mounted to allow measurements.
-     */
-    mounted = false;
-    /**
-     * Text element reference used for measuring width.
-     */
-    textRef;
-    // ========================================
-    // EVENTS
-    // ========================================
-    /**
-     * Handler when img load error.
-     * @example
-     * <x-avatar onXError={(ev) => console.log(ev.detail)}></x-avatar>
-     */
-    xError;
-    // ========================================
-    // LIFECYCLE
-    // ========================================
-    /**
-     * Mark mounted and compute initial text scale.
-     * @returns void
-     * @example
-     * <x-avatar>AB</x-avatar>
-     */
-    componentDidLoad() {
-        this.mounted = true;
-        this.setScale();
-    }
-    /**
-     * Recompute scale on updates.
-     * @returns void
-     * @example
-     * <x-avatar>AB</x-avatar>
-     */
-    componentDidUpdate() {
-        this.setScale();
-    }
-    // ========================================
-    // PRIVATE METHODS
-    // ========================================
-    /**
-     * Handle image load error and fall back to text/icon.
-     * @param e - Image error event.
-     * @returns void
-     * @example
-     * <x-avatar src="/bad.png" onXError={(ev) => console.log(ev.detail)}></x-avatar>
-     */
-    handleImgLoadError = (e) => {
-        this.isImgExist = false;
-        this.xError.emit({ event: e });
-    };
-    /**
-     * Compute scale for text content based on available width.
-     *
-     * Flow:
-     * 1. Checks if text element (`textRef`) and component are mounted.
-     * 2. Measures `offsetWidth` of the text content.
-     * 3. Measures `clientWidth` of the host element (defaulting to 32px).
-     * 4. Calculates `availableWidth` by subtracting gaps.
-     * 5. If text width exceeds available width:
-     *    - Sets `scale` to `availableWidth / textWidth`.
-     *    - This shrinks the text to fit within the avatar circle/square.
-     * 6. Otherwise, resets `scale` to 1.
-     *
-     * @returns void
-     * @example
-     * <x-avatar>AB</x-avatar>
-     */
-    setScale() {
-        // Guard until text element exists and component is mounted.
-        if (!this.textRef || !this.mounted)
-            return;
-        const textWidth = this.textRef.offsetWidth;
-        const avatarWidth = this.el.shadowRoot?.host?.clientWidth || 32;
-        const availableWidth = avatarWidth - this.gap * 2;
-        // Scale down when text is wider than available space.
-        if (textWidth && availableWidth < textWidth) {
-            this.scale = availableWidth / textWidth;
-        }
-        else {
-            this.scale = 1;
-        }
-    }
-    /**
-     * Compute inline size style when size is numeric.
-     * @returns Record of CSS properties.
-     * @example
-     * <x-avatar size={48}></x-avatar>
-     */
-    getSizeStyle() {
-        // Numeric size maps to width/height/lineHeight/fontSize.
-        if (typeof this.size === 'number') {
-            return {
-                width: `${this.size}px`,
-                height: `${this.size}px`,
-                lineHeight: `${this.size}px`,
-                fontSize: `${this.size / 2}px`,
-            };
-        }
-        return {};
-    }
-    /**
-     * Get size class when size is a string token.
-     * @returns string
-     * @example
-     * <x-avatar size="small"></x-avatar>
-     */
-    getSizeClass() {
-        // String sizes map to CSS class.
-        if (typeof this.size === 'string') {
-            return `x-avatar-${this.size}`;
-        }
-        return '';
-    }
-    // ========================================
-    // RENDER
-    // ========================================
-    /**
-     * Render avatar content based on src/icon/text.
-     *
-     * Flow:
-     * 1. Priority 1: Image.
-     *    - If `src` exists and `isImgExist` is true.
-     *    - Renders `<img>` with handlers for load errors.
-     * 2. Priority 2: Icon.
-     *    - If `icon` prop is present.
-     *    - Renders `slot[name="icon"]`.
-     * 3. Priority 3: Text/String.
-     *    - Applies calculated `scale` transform if needed to fit text.
-     *    - Renders default slot content inside a span.
-     *
-     * @returns JSX.Element
-     * @example
-     * <x-avatar src="/avatar.png"></x-avatar>
-     */
-    renderContent() {
-        // Image avatar
-        if (this.src && this.isImgExist) {
-            return (h("img", { class: "x-avatar-image", src: this.src, srcSet: this.srcSet, alt: this.alt, draggable: this.imgDraggable, crossOrigin: this.crossOrigin || undefined, onError: this.handleImgLoadError }));
-        }
-        // Icon avatar (via slot)
-        if (this.icon) {
-            return (h("span", { class: "x-avatar-icon" }, h("slot", { name: "icon" })));
-        }
-        // Text/Letter avatar
-        const textStyle = {};
-        // Apply scale and centering when text exceeds container.
-        if (this.scale !== 1) {
-            textStyle.transform = `scale(${this.scale})`;
-            textStyle.position = 'absolute';
-            textStyle.left = '50%';
-            textStyle.transformOrigin = '0 center';
-            textStyle.marginLeft = `-${Math.round((this.textRef?.offsetWidth || 0) / 2)}px`;
-        }
-        return (h("span", { class: "x-avatar-string", ref: (el) => (this.textRef = el), style: textStyle }, h("slot", null)));
-    }
-    /**
-     * Build host class map based on size, shape, and content type.
-     * @returns Record of class flags.
-     * @example
-     * <x-avatar shape="square"></x-avatar>
-     */
-    getHostClasses() {
-        const sizeClass = this.getSizeClass();
-        const hasImage = this.src && this.isImgExist;
-        const hasIcon = !!this.icon;
-        return {
-            'x-avatar': true,
-            [`x-avatar-${this.shape}`]: true,
-            [sizeClass]: !!sizeClass,
-            'x-avatar-image': hasImage,
-            'x-avatar-icon': hasIcon && !hasImage,
-        };
-    }
-    /**
-     * Render avatar host with computed classes and size style.
-     * @returns JSX.Element
-     * @example
-     * <x-avatar size={40}>AB</x-avatar>
-     */
-    render() {
-        return (h(Host, { key: 'f4ec3bed6c5f9e11b1c603da7b22db56462abe5d', class: this.getHostClasses(), style: this.getSizeStyle() }, this.renderContent()));
-    }
-};
-XAvatar.style = xAvatarCss();
-
-export { XAvatar as x_avatar };

package/dist/esm/x-button.entry.js

@@ -1,172 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
-
-const xButtonCss = () => `@charset "UTF-8";:host{display:inline-block;vertical-align:middle;font-family:var(--x-font-family)}:host([block]){display:block;width:100%}.x-btn{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:var(--x-button-height, var(--x-control-height, 32px));padding:var(--x-button-padding-block, var(--x-spacing-xxs, 4px)) var(--x-button-padding-inline, var(--x-spacing-md, 15px));font-size:var(--x-button-font-size, var(--x-font-size-base, 14px));font-weight:var(--x-button-font-weight, var(--x-font-weight-normal, 400));line-height:var(--x-button-line-height, var(--x-line-height-base, 1.5714));white-space:nowrap;text-align:center;text-decoration:none;color:var(--x-button-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-button-bg, var(--x-color-bg-container, #ffffff));background-image:none;border:var(--x-button-border-width, var(--x-border-width-base, 1px)) var(--x-button-border-style, solid) var(--x-button-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-button-border-radius, var(--x-border-radius-base, 6px));-webkit-box-shadow:var(--x-button-shadow, 0 2px 0 rgba(0, 0, 0, 0.015));box-shadow:var(--x-button-shadow, 0 2px 0 rgba(0, 0, 0, 0.015));cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:manipulation;touch-action:manipulation;outline:none;-webkit-transition:color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), border-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), -webkit-box-shadow var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), border-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), -webkit-box-shadow var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), border-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), box-shadow var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), border-color var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), box-shadow var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), -webkit-box-shadow var(--x-button-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-button-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));}.x-btn.x-btn-default:hover,.x-btn.x-btn-default:focus{color:var(--x-button-color-hover, var(--x-color-primary, #1677ff));border-color:var(--x-button-border-color-hover, var(--x-color-primary, #1677ff))}.x-btn.x-btn-default:active{color:var(--x-button-color-active, var(--x-color-primary-active, #0958d9));border-color:var(--x-button-border-color-active, var(--x-color-primary-active, #0958d9))}.x-btn{}.x-btn.x-btn-primary{color:var(--x-button-primary-color, var(--x-color-text-light-solid, #ffffff));background-color:var(--x-button-primary-bg, var(--x-color-primary, #1677ff));border-color:var(--x-button-primary-border-color, var(--x-color-primary, #1677ff));-webkit-box-shadow:var(--x-button-shadow-primary, 0 2px 0 rgba(5, 145, 255, 0.1));box-shadow:var(--x-button-shadow-primary, 0 2px 0 rgba(5, 145, 255, 0.1))}.x-btn.x-btn-primary:hover,.x-btn.x-btn-primary:focus{background-color:var(--x-button-primary-bg-hover, var(--x-color-primary-hover, #4096ff));border-color:var(--x-button-primary-bg-hover, var(--x-color-primary-hover, #4096ff))}.x-btn.x-btn-primary:active{background-color:var(--x-button-primary-bg-active, var(--x-color-primary-active, #0958d9));border-color:var(--x-button-primary-bg-active, var(--x-color-primary-active, #0958d9))}.x-btn{}.x-btn.x-btn-dashed{border-style:dashed}.x-btn.x-btn-dashed:hover,.x-btn.x-btn-dashed:focus{color:var(--x-button-color-hover, var(--x-color-primary, #1677ff));border-color:var(--x-button-border-color-hover, var(--x-color-primary, #1677ff))}.x-btn{}.x-btn.x-btn-text{background-color:transparent;border-color:transparent;-webkit-box-shadow:var(--x-button-shadow-none, none);box-shadow:var(--x-button-shadow-none, none)}.x-btn.x-btn-text:hover,.x-btn.x-btn-text:focus{background-color:var(--x-button-text-bg-hover, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)))}.x-btn{}.x-btn.x-btn-link{color:var(--x-button-link-color, var(--x-color-link, #1677ff));background-color:transparent;border-color:transparent;-webkit-box-shadow:var(--x-button-shadow-none, none);box-shadow:var(--x-button-shadow-none, none)}.x-btn.x-btn-link:hover,.x-btn.x-btn-link:focus{color:var(--x-button-link-color-hover, var(--x-color-link-hover, #69b1ff))}.x-btn.x-btn-link:active{color:var(--x-button-link-color-active, var(--x-color-link-active, #0958d9))}.x-btn{}.x-btn.x-btn-danger{color:var(--x-button-danger-color, var(--x-color-error, #ff4d4f));border-color:var(--x-button-danger-border-color, var(--x-color-error, #ff4d4f))}.x-btn.x-btn-danger:hover,.x-btn.x-btn-danger:focus{color:var(--x-button-danger-primary-bg-hover, var(--x-color-error-hover, #ff7875));border-color:var(--x-button-danger-primary-bg-hover, var(--x-color-error-hover, #ff7875))}.x-btn.x-btn-danger.x-btn-primary{color:var(--x-button-danger-primary-color, var(--x-color-text-light-solid, #ffffff));background-color:var(--x-button-danger-primary-bg, var(--x-color-error, #ff4d4f));border-color:var(--x-button-danger-primary-bg, var(--x-color-error, #ff4d4f))}.x-btn.x-btn-danger.x-btn-primary:hover,.x-btn.x-btn-danger.x-btn-primary:focus{background-color:var(--x-button-danger-primary-bg-hover, var(--x-color-error-hover, #ff7875));border-color:var(--x-button-danger-primary-bg-hover, var(--x-color-error-hover, #ff7875))}.x-btn{}.x-btn.x-btn-ghost{color:inherit;background-color:transparent;border-color:var(--x-button-ghost-border-color, var(--x-color-text-light-solid, #ffffff))}.x-btn{}.x-btn.x-btn-disabled,.x-btn[disabled]{cursor:not-allowed;color:var(--x-button-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));background-color:var(--x-button-bg-disabled, var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04)));border-color:var(--x-button-border-color-disabled, var(--x-color-border, #d9d9d9));-webkit-box-shadow:var(--x-button-shadow-none, none);box-shadow:var(--x-button-shadow-none, none)}.x-btn.x-btn-disabled:hover,.x-btn.x-btn-disabled:focus,.x-btn.x-btn-disabled:active,.x-btn[disabled]:hover,.x-btn[disabled]:focus,.x-btn[disabled]:active{color:var(--x-button-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));background-color:var(--x-button-bg-disabled, var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04)));border-color:var(--x-button-border-color-disabled, var(--x-color-border, #d9d9d9))}.x-btn{}.x-btn.x-btn-small{height:var(--x-button-height-sm, var(--x-control-height-sm, 24px));padding:var(--x-button-padding-block-sm, 0) var(--x-button-padding-inline-sm, var(--x-spacing-sm, 7px));font-size:var(--x-button-font-size-sm, var(--x-font-size-base, 14px));border-radius:var(--x-button-border-radius-sm, var(--x-border-radius-sm, 4px))}.x-btn.x-btn-large{height:var(--x-button-height-lg, var(--x-control-height-lg, 40px));padding:var(--x-button-padding-block-lg, var(--x-spacing-sm, 7px)) var(--x-button-padding-inline-lg, var(--x-spacing-lg, 15px));font-size:var(--x-button-font-size-lg, var(--x-font-size-lg, 16px));border-radius:var(--x-button-border-radius-lg, var(--x-border-radius-lg, 8px))}.x-btn{}.x-btn.x-btn-circle{min-width:var(--x-button-height, var(--x-control-height, 32px));padding-inline:0;border-radius:50%}.x-btn.x-btn-circle.x-btn-small{min-width:var(--x-button-height-sm, var(--x-control-height-sm, 24px))}.x-btn.x-btn-circle.x-btn-large{min-width:var(--x-button-height-lg, var(--x-control-height-lg, 40px))}.x-btn.x-btn-round{border-radius:var(--x-button-height, var(--x-control-height, 32px));padding-inline:var(--x-button-round-padding-inline, var(--x-spacing-md, 16px))}.x-btn.x-btn-round.x-btn-small{border-radius:var(--x-button-height-sm, var(--x-control-height-sm, 24px))}.x-btn.x-btn-round.x-btn-large{border-radius:var(--x-button-height-lg, var(--x-control-height-lg, 40px))}.x-btn{}.x-btn.x-btn-block{width:100%}.x-btn{}.x-btn .x-btn-loading-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--x-button-loading-icon-size, var(--x-font-size-base, 14px));height:var(--x-button-loading-icon-size, var(--x-font-size-base, 14px));margin-right:var(--x-button-loading-icon-margin, var(--x-spacing-xs, 8px));border:2px solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:x-btn-spin 1s linear infinite;animation:x-btn-spin 1s linear infinite}@-webkit-keyframes x-btn-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes x-btn-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}::slotted([slot=icon]){display:-ms-inline-flexbox;display:inline-flex;margin-right:var(--x-button-icon-margin, var(--x-spacing-xs, 8px))}.x-btn-icon-only{padding-inline:var(--x-button-padding-block, var(--x-spacing-xxs, 4px))}.x-btn-icon-only ::slotted([slot=icon]){margin-right:0}.x-btn-icon-only .x-btn-content{display:none}.x-btn:empty{padding-inline:var(--x-button-padding-block, var(--x-spacing-xxs, 4px))}`;
-
-const XButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.xClick = createEvent(this, "xClick", 7);
-    }
-    get el() { return getElement(this); }
-    /** Internal state to track if the button contains only an icon */
-    isIconOnly = false;
-    /**
-     * Lifecycle hook to detect if the button is "icon-only".
-     *
-     * Flow:
-     * 1. Converts child nodes to an array.
-     * 2. Checks for presence of an element with `slot="icon"`.
-     * 3. Checks for presence of any text nodes (non-empty) or other elements.
-     * 4. Sets `isIconOnly` state if icon slot exists AND no other content exists.
-     *    - This state is used to adjust padding/shape in CSS.
-     */
-    componentWillRender() {
-        const children = Array.from(this.el.childNodes);
-        // Check if there's an element assigned to the 'icon' slot
-        const hasIconSlot = children.some(node => node.nodeType === 1 && node.getAttribute('slot') === 'icon');
-        // Check if there's any visible text or other non-icon elements
-        const hasText = children.some(node => {
-            // Check for standalone text nodes that aren't empty
-            if (node.nodeType === 3 && node.textContent.trim().length > 0)
-                return true;
-            // Check for other elements that are not part of the 'icon' slot
-            if (node.nodeType === 1 && node.getAttribute('slot') !== 'icon')
-                return true;
-            return false;
-        });
-        this.isIconOnly = hasIconSlot && !hasText;
-    }
-    /**
-     * Option to fit button width to its parent width.
-     * @example
-     * <x-button block>Full width</x-button>
-     */
-    block = false;
-    /**
-     * Set the danger status of button.
-     * @example
-     * <x-button danger>Delete</x-button>
-     */
-    danger = false;
-    /**
-     * Disabled state of button.
-     * @example
-     * <x-button disabled>Disabled</x-button>
-     */
-    disabled = false;
-    /**
-     * Make background transparent and invert text color.
-     * @example
-     * <x-button ghost type="primary">Ghost</x-button>
-     */
-    ghost = false;
-    /**
-     * Redirect url of link button.
-     * @example
-     * <x-button href="https://example.com" target="_blank">Go</x-button>
-     */
-    href;
-    /**
-     * Set the original html type of button.
-     * @example
-     * <x-button htmlType="submit">Submit</x-button>
-     */
-    htmlType = 'button';
-    /**
-     * Set the loading status of button.
-     * @example
-     * <x-button loading>Loading</x-button>
-     */
-    loading = false;
-    /**
-     * Can be set to circle, round or omitted.
-     * @example
-     * <x-button shape="circle" aria-label="Add">
-     *   <x-icon name="add"></x-icon>
-     * </x-button>
-     */
-    shape = 'default';
-    /**
-     * Set the size of button.
-     * @example
-     * <x-button size="large">Large</x-button>
-     */
-    size = 'middle';
-    /**
-     * Same as target attribute of a, works when href is specified.
-     * @example
-     * <x-button href="https://example.com" target="_blank">Open</x-button>
-     */
-    target;
-    /**
-     * Set the type of button.
-     * @example
-     * <x-button type="primary">Primary</x-button>
-     */
-    type = 'default';
-    /**
-     * Set the handler to handle click event.
-     * @example
-     * <x-button onXClick={(ev) => console.log(ev.detail)}>Click</x-button>
-     */
-    xClick;
-    /**
-     * Handles click interaction and emits xClick when allowed.
-     *
-     * Flow:
-     * 1. Checks if button is `disabled` or `loading`.
-     * 2. If so:
-     *    - Prevents default action.
-     *    - Stops propagation.
-     *    - Returns immediately.
-     * 3. If enabled:
-     *    - Emits `xClick` event.
-     *
-     * @param ev - Mouse click event from anchor or button element.
-     * @returns void
-     * @example
-     * // Emitted only when not disabled/loading
-     * <x-button onXClick={(ev) => console.log(ev)}></x-button>
-     */
-    handleClick = (ev) => {
-        // Block interaction when button is disabled or showing loading state.
-        if (this.disabled || this.loading) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            return;
-        }
-        // Emit click event for consumers when interaction is valid.
-        this.xClick.emit(ev);
-    };
-    /**
-     * Renders anchor for link buttons or native button otherwise.
-     * @returns JSX.Element
-     * @example
-     * <x-button type="primary" size="small">Save</x-button>
-     */
-    render() {
-        const { type, shape, size, block, danger, ghost, loading, disabled, href, htmlType, target } = this;
-        // Build class map from props to reflect visual variants.
-        const classes = {
-            'x-btn': true,
-            [`x-btn-${type}`]: true,
-            [`x-btn-${shape}`]: shape !== 'default',
-            [`x-btn-${size}`]: size !== 'middle',
-            'x-btn-block': block,
-            'x-btn-danger': danger,
-            'x-btn-ghost': ghost,
-            'x-btn-loading': loading,
-            'x-btn-disabled': disabled,
-            'x-btn-icon-only': this.isIconOnly,
-        };
-        // If href is provided, render as anchor to support navigation behavior.
-        if (href) {
-            return (h(Host, null, h("a", { class: classes, href: href, target: target, onClick: this.handleClick }, loading && h("span", { class: "x-btn-loading-icon" }), h("slot", { name: "icon" }), h("span", { class: "x-btn-content" }, h("slot", null)))));
-        }
-        // Otherwise render a native button with htmlType and disabled state.
-        return (h(Host, null, h("button", { class: classes, type: htmlType, disabled: disabled, onClick: this.handleClick }, loading && h("span", { class: "x-btn-loading-icon" }), h("slot", { name: "icon" }), h("span", { class: "x-btn-content" }, h("slot", null)))));
-    }
-};
-XButton.style = xButtonCss();
-
-export { XButton as x_button };