atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/tag/tag.js

@@ -207,10 +207,52 @@ export class Tag {
             this.isOpening = false;
         }, 50);
     }
+    isCircleShape() {
+        return this.shape === 'circle';
+    }
+    hasCircleVisualContent() {
+        return !!(this.loading || this.userAvatar || this.image || this.icon);
+    }
+    resolveMediaSrc(src) {
+        if (!src)
+            return undefined;
+        const normalizedSrc = src.trim().replaceAll('\\', '/');
+        if (!normalizedSrc)
+            return undefined;
+        if (/^(https?:|data:|blob:|file:|\/\/)/i.test(normalizedSrc)) {
+            return normalizedSrc;
+        }
+        if (/^(\.\/|\.\.\/|\/)?build\//i.test(normalizedSrc)) {
+            return normalizedSrc;
+        }
+        if (normalizedSrc.startsWith('/assets/')) {
+            return `/build${normalizedSrc}`;
+        }
+        if (/^(\.\/|\.\.\/)?assets\//i.test(normalizedSrc)) {
+            return normalizedSrc.replace(/^((?:\.\/|\.\.\/)?)assets\//i, '$1build/assets/');
+        }
+        if (/^(\.\/|\.\.\/)?images\//i.test(normalizedSrc)) {
+            return normalizedSrc.replace(/^((?:\.\/|\.\.\/)?)images\//i, '$1build/assets/images/');
+        }
+        if (!normalizedSrc.includes('/')) {
+            return `./build/assets/images/${normalizedSrc}`;
+        }
+        return normalizedSrc;
+    }
+    getDisplayLabel() {
+        const label = this.loading && !this.label ? 'Loading...' : this.label || '';
+        if (!this.isCircleShape() || this.hasCircleVisualContent()) {
+            return label;
+        }
+        return Array.from(label.trim()).slice(0, 2).join('');
+    }
     render() {
         if (!this.visible)
             return null;
         const autoColorData = this.autoColor ? this.getColorFromHash(this.label ?? '') : null;
+        const isCircle = this.isCircleShape();
+        const displayLabel = this.getDisplayLabel();
+        const showCircleMediaOnly = isCircle && this.hasCircleVisualContent();
         const classes = {
             'tag': true,
             [`tag-${this.color}`]: !this.autoColor && !this.gradient,
@@ -257,28 +299,31 @@ export class Tag {
             style['border-color'] = 'transparent';
             style['--tag-glow-color'] = autoColorData.rgb;
         }
-        const titleText = this.tooltip || (this.showTooltip ? this.label : undefined);
+        const shouldExposeFullCircleLabel = isCircle && !showCircleMediaOnly && !!this.label && displayLabel !== this.label;
+        const titleText = this.tooltip || (shouldExposeFullCircleLabel ? this.label : (this.showTooltip ? this.label : undefined));
         const isInteractive = this.clickable || this.checkable || this.removable;
         return (h("span", { class: classes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, style: style, title: titleText, dir: this.rtl ? 'rtl' : 'ltr', tabIndex: isInteractive && !this.disabled ? 0 : -1, role: isInteractive ? 'button' : undefined, "aria-pressed": this.checkable ? this.checked : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, this.skeleton ? (h("span", { class: "tag-skeleton-content" })) : [
             this.variant === 'dot' && h("span", { class: "tag-dot-indicator" }),
-            this.iconPosition === 'left' && this.renderMedia(),
-            h("span", { class: "tag-label" }, this.loading && !this.label ? 'Loading...' : this.label),
+            (showCircleMediaOnly || this.iconPosition === 'left') && this.renderMedia(),
+            !showCircleMediaOnly && h("span", { class: "tag-label" }, displayLabel),
             (this.shape === 'ticket' || this.shape === 'coupon') && h("span", { class: "tag-ticket-hole tag-hole-right" }),
             this.shape === 'coupon' && h("span", { class: "tag-ticket-hole tag-hole-left" }),
-            this.iconPosition === 'right' && this.renderMedia(),
-            this.badge && (h("span", { class: `tag-badge tag-badge-${this.badgeColor}` }, this.badge)),
-            this.counter && (h("span", { class: "tag-counter" }, this.counter)),
-            this.removable && !this.disabled && (h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, class: "tag-remove", onClick: this.handleRemove, ariaLabel: "Remove tag", tabIndex: -1, icon: this.closeIcon || "x", iconLibrary: "lucide", iconSize: "14px" }))
+            this.iconPosition === 'right' && !showCircleMediaOnly && this.renderMedia(),
+            !isCircle && this.badge && (h("span", { class: `tag-badge tag-badge-${this.badgeColor}` }, this.badge)),
+            !isCircle && this.counter && (h("span", { class: "tag-counter" }, this.counter)),
+            !isCircle && this.removable && !this.disabled && (h("button", { class: "tag-remove", onClick: this.handleRemove, "aria-label": "Remove tag", tabIndex: -1 }, h("ui-icon", { name: this.closeIcon || "x", library: "lucide", size: "1em" })))
         ]));
     }
     renderMedia() {
         if (this.loading && this.variant !== 'dot') {
             return h("ui-loader", { type: "spinner", size: "0.8em", color: "inherit" });
         }
-        if (this.userAvatar)
-            return h("img", { src: this.userAvatar, alt: "", class: "tag-avatar" });
-        if (this.image)
-            return h("img", { src: this.image, alt: "", class: "tag-image" });
+        const userAvatarSrc = this.resolveMediaSrc(this.userAvatar);
+        const imageSrc = this.resolveMediaSrc(this.image);
+        if (userAvatarSrc)
+            return h("img", { src: userAvatarSrc, alt: "", class: "tag-avatar" });
+        if (imageSrc)
+            return h("img", { src: imageSrc, alt: "", class: "tag-image" });
         if (this.icon)
             return (h("span", { class: { 'tag-icon': true, 'tag-icon-spin': this.iconSpin } }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: this.iconSize })));
         return null;
@@ -340,7 +385,7 @@ export class Tag {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1032,7 +1077,7 @@ export class Tag {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",

package/dist/collection/components/tag-group/tag-group.css

@@ -35,7 +35,6 @@
   border-radius: 10px;
   background: var(--bg-primary, #f8fafc);
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  min-height: 42px;
 }
 
 .tag-group-container:focus-within {

package/dist/collection/components/tag-group/tag-group.js

@@ -371,11 +371,11 @@ export class TagGroup {
         const isEmpty = allTags.length === 0;
         const noResults = allTags.length > 0 && visibleTags.length === 0;
         const showInlineInput = (this.searchable || this.creatable) && !this.readOnly;
-        return (h(Host, { key: 'a27c92c78b6c9072b966c299c67ce1677ee9e036' }, h("div", { key: 'f043228fbbe2f79c2800384c2dacaa1cb0148505', class: {
+        return (h(Host, { key: '6c10d465949f447fa8e70506522ccf0c5bbbb16d' }, h("div", { key: 'f119d30704ba77309e2556f41f179ffa7e3c05f2', class: {
                 'tag-group-container': true,
                 'is-readonly': this.readOnly,
                 'is-empty': isEmpty
-            } }, h("ui-stack", { key: 'ca9b9a02f7650193b1633fc4a1b0c5c37e51229a', spacing: this.spacing, overlap: this.overlap, max: this.isExpanded ? 0 : this.max, wrap: "wrap" }, h("slot", { key: 'd764e67e7dc971c7949d24db226ab9154a657e27' }), showInlineInput && (h("ui-input", { key: '271591fa4b6bdca9aa879a0179c87018bcd744fc', type: "text", class: "tag-group-inline-input", placeholder: isEmpty ? this.placeholder : '', value: this.searchQuery, onInputChange: this.handleSearch, onInputKeydown: this.handleAddTag, size: "sm", variant: "borderless", hideBorder: true, fullWidth: true }))), noResults && (h("div", { key: '32a338d6978df6192b25a0e98f27079aa3b39ef9', class: "tag-group-empty no-results" }, h("span", { key: 'ce1d744f56bbd0c85eab6e9c458fade4c1b12fd1' }, "No tags match \"", this.searchQuery, "\""))) || (isEmpty && this.readOnly && (h("div", { key: '306938778dae4c4c1890278a67a1df651850792b', class: "tag-group-empty" }, h("ui-icon", { key: 'b0d025b5476d3895ff968b72eb06d5afff79b870', name: "tag", library: "lucide", size: "1.4em" }), h("span", { key: '52debfaff2c840d1a8c56119f81ec22380082392' }, "No items assigned")))), this.collapsible && canShowExpand && (h("ui-button", { key: 'a689ec4aa7f4536f0babc1edf0edeae22a151630', variant: "ghost", size: "sm", class: "tag-group-overflow-toggle", onClick: this.toggleExpand, label: this.isExpanded ? 'Show less' : `View all ${allTags.length} items` })))));
+            } }, h("ui-stack", { key: 'afe10b0b6142a688eed69d1a6817c6efcac002cb', spacing: this.spacing, overlap: this.overlap, max: this.isExpanded ? 0 : this.max, wrap: "wrap" }, h("slot", { key: 'a3f61d253532ea24995c8c594b227fe389d1bce0' }), showInlineInput && (h("ui-input", { key: 'd2513ef2ea36f1c74db509f27ffcc51cf2b5b625', type: "text", class: "tag-group-inline-input", placeholder: isEmpty ? this.placeholder : '', value: this.searchQuery, onInputChange: this.handleSearch, onInputKeydown: this.handleAddTag, size: "sm", variant: "borderless", hideBorder: true, fullWidth: true }))), noResults && (h("div", { key: 'bb89ba2759c045e62522ca64fb4ba480717ffc2b', class: "tag-group-empty no-results" }, h("span", { key: '7ff0d17ae03cbb6415092177c6866143b82b6fda' }, "No tags match \"", this.searchQuery, "\""))) || (isEmpty && this.readOnly && (h("div", { key: 'f05bf41a4c408107c88e19c866d28a74563bd134', class: "tag-group-empty" }, h("ui-icon", { key: 'd688dc6f2c9093749469cbab269cd137e62d5889', name: "tag", library: "lucide", size: "1.4em" }), h("span", { key: '9a364908f459d9b8586310e8a6f0388e722637ed' }, "No items assigned")))), this.collapsible && canShowExpand && (h("ui-button", { key: 'ba66f535b3c914bd54ccfbb3f376229e3a061524', variant: "ghost", size: "sm", class: "tag-group-overflow-toggle", onClick: this.toggleExpand, label: this.isExpanded ? 'Show less' : `View all ${allTags.length} items` })))));
     }
     static get is() { return "ui-tag-group"; }
     static get encapsulation() { return "shadow"; }
@@ -541,7 +541,7 @@ export class TagGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",