atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/aside-panel/aside-panel.js

@@ -123,7 +123,7 @@ export class AsidePanel {
     /**
      * Animation transition duration (e.g. '0.3s' or '500ms')
      */
-    transitionDuration = '1s';
+    transitionDuration = '0.3s';
     /**
      * Animation style for opening and closing
      * @default 'slide-in-out'
@@ -587,7 +587,7 @@ export class AsidePanel {
     }
     render() {
         const activeTheme = this.theme !== 'default' ? this.theme : this.variant;
-        return (h(Host, { key: '96228f17ee1f0fab8f11427ee6055f42234418cb', class: {
+        return (h(Host, { key: '6fe78ffb52aa0a9d3c2659ab49da7bbb8220cd73', class: {
                 'aside-container': true,
                 'open': this.open,
                 'mini': this.mini,
@@ -598,7 +598,7 @@ export class AsidePanel {
                 [`animation-${this.animationType}`]: true,
                 'is-pinned': this.pinned,
                 'rtl': this.rtl
-            }, style: this.hostStyle(), role: "complementary", "aria-expanded": this.open.toString(), "aria-hidden": (!this.open).toString() }, this.showOverlay && !this.mini && (h("div", { key: '5dae19f30e04a7fc18cb0fef62a8319f79296160', class: { 'overlay': true, 'visible': this.open }, style: { backdropFilter: this.backdropBlur !== '0' ? `blur(${this.backdropBlur})` : 'none' }, onClick: this.handleOverlayClick })), h("div", { key: '688ced9dccc2bfe6ee489e8283146f8863044224', class: {
+            }, style: this.hostStyle(), role: "complementary", "aria-expanded": this.open.toString(), "aria-hidden": (!this.open).toString() }, this.showOverlay && !this.mini && (h("div", { key: 'b377c132e1a18b11fe14fea92fb42edea15e7931', class: { 'overlay': true, 'visible': this.open }, style: { backdropFilter: this.backdropBlur !== '0' ? `blur(${this.backdropBlur})` : 'none' }, onClick: this.handleOverlayClick })), h("div", { key: '64557685915ff59acf459637b07eb27a2cdd7960', class: {
                 'panel': true,
                 [`panel-${this.direction}`]: true,
                 'open': this.open,
@@ -606,7 +606,7 @@ export class AsidePanel {
                 'resizing': this.isResizing,
                 'loading': this.loading,
                 'parallax-active': this.enableParallax
-            }, style: this.hostStyle(), onMouseMove: this.handleParallax, onMouseLeave: this.resetParallax }, this.loading && (h("div", { key: 'e78d13a733dbd6e9b2949634c8b107cab6225d24', class: "loading-overlay" }, h("div", { key: 'c7db0694fba52bfbc8d6a90440976556a85056c6', class: "spinner" }))), this.resizable && !this.mini && (h("div", { key: 'ecc06e0c68c743eff86b12e2bb978369743924d7', class: `resize-handle resize-handle-${this.direction}`, style: this.resizeHandleColor ? { backgroundColor: this.resizeHandleColor } : {}, onMouseDown: this.handleResizeStart }, this.showResizeIndicator && (h("div", { key: '28156c16815117726861da00bb93165c174fc1fe', class: "resize-indicator" }, h("span", { key: '6b4e06e9ae3935a5a68dfbd2a51b53b1172fdd0f' }), h("span", { key: '82558b01333dff587f0afd3d723a7e592a757ede' }), h("span", { key: 'c8e3a7ab11462c951e1477b5abcae131e2019129' }))))), h("div", { key: 'ab67f36b3f4dd65dffdb6fd4e12bb09d04fa4d59', class: "panel-header-toolbar" }, h("div", { key: '627055ac7880157e1ccdb43587832fb151800202', class: "toolbar-left" }, this.mini ? (h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-right", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Expand", onClick: () => this.toggleMini() })) : (h("div", { style: { display: 'flex', gap: '4px' } }, h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-left", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Collapse to Mini", onClick: () => this.toggleMini() }), !this.mini && (h("ui-button", { variant: "ghost", size: "sm", icon: this.maximized ? 'minimize' : 'maximize', iconLibrary: "lucide", iconSize: "14px", ariaLabel: this.maximized ? 'Restore' : 'Maximize', onClick: () => this.toggleMaximize() })))), this.enableVoiceControl && (h("ui-button", { key: '67bd0e21f1411391f2ee3bfc9d752ce267012401', variant: "ghost", size: "sm", icon: "mic", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Voice Interaction", class: this.isListening ? 'active' : '', onClick: () => this.initVoice() }))), h("div", { key: 'fa9bad7d620cab7d18cf9234f50f985378b472f5', class: "toolbar-right" }, this.showActions && (h("ui-button", { key: '7688f94038ec6a27423be56b787873631614cdc2', id: "aside-actions-trigger", variant: "ghost", size: "sm", icon: "ellipsis-vertical", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "More Actions", onClick: () => this.asideActionClick.emit() })), this.showActions && (h("ui-context-menu", { key: '32daa2cbf1311059c80058a3ad587946f24b8e59', items: this.actionItems, target: "#aside-actions-trigger", openOn: "click", placement: "bottom", onItemSelect: (ev) => this.asideActionClick.emit(ev.detail) })), this.pinned && h("ui-icon", { key: 'a3e70a59b575c0376c151e0c6a1db1553a9dd1e9', name: "pin", library: "lucide", size: "14px", class: "pin-status" }), this.closeable && !this.pinned && (h("ui-button", { key: 'c686337c8755a0375b4c87239bf95d2838f8bd36', variant: "ghost", size: "sm", icon: "x", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "Close panel", onClick: this.handleClose })))), h("div", { key: 'b4c1294140c10f94287ba98fa86f16627c61bb5b', class: "panel-header" }, h("div", { key: 'cd0533b0730d96b11136e68ce6a1e0372885ff4f', class: "header-main" }, h("slot", { key: '687c43c34a171ff4351e8a41778da102826ce2f8', name: "header" }), this.badge && h("span", { key: '830f3cb27cf809029f686bacbd488a6dcbcedad3', class: "header-badge" }, this.badge)), this.progress > -1 && (h("div", { key: '6c37bd10a8d7bfac71cc7aa619c44b4145400681', class: "header-progress" }, h("div", { key: '07fbdc20712c119f1e345fcd070f2eb33f7380e6', class: "progress-bar", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } })))), h("div", { key: '569c75c3b02918bb22d3ffc4322a882267b92bb9', class: "panel-content" }, h("slot", { key: '9255c9b298178ae03bae04acd856d8b528ddf808', name: "content" }), h("slot", { key: '0c071717c63c6baabfd5350cad38f57621989c6c' })), !this.mini && (h("div", { key: 'd2a629a5864e57d917ca7a5a8256125a8a8ec0a4', class: "panel-footer" }, h("slot", { key: '9b79d14c480eefa03ef84e73e5363bca9cd63e6e', name: "footer" }))))));
+            }, style: this.hostStyle(), onMouseMove: this.handleParallax, onMouseLeave: this.resetParallax }, this.loading && (h("div", { key: '0944112418e5cff5052444dfe972b9097c8a87cc', class: "loading-overlay" }, h("div", { key: 'd78691ea1bd174e74431b7f1e937f5c3a15a7480', class: "spinner" }))), this.resizable && !this.mini && (h("div", { key: 'b6c3327d7f2b2b390e7034f99f26baa9fb5a8e78', class: `resize-handle resize-handle-${this.direction}`, style: this.resizeHandleColor ? { backgroundColor: this.resizeHandleColor } : {}, onMouseDown: this.handleResizeStart }, this.showResizeIndicator && (h("div", { key: '7d0446ab14ce40d3de648647d10b825c4e17255b', class: "resize-indicator" }, h("span", { key: 'fd5a84994e2e84d3934404fe01d990b0741cf69d' }), h("span", { key: '3f5bb3beb076185b6b375485c2eda33a86ce1af4' }), h("span", { key: '1e2fc6fe5129ee60dc91816fb0aecb367a0f5d48' }))))), h("div", { key: 'd5f732ce0f5c0263a47821107c68fb42491423ac', class: "panel-header-toolbar" }, h("div", { key: 'f7c0483a59e5ca7b0e1a1b63f564f0662f92fbf4', class: "toolbar-left" }, this.mini ? (h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-right", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Expand", onClick: () => this.toggleMini() })) : (h("div", { style: { display: 'flex', gap: '4px' } }, h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-left", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Collapse to Mini", onClick: () => this.toggleMini() }), !this.mini && (h("ui-button", { variant: "ghost", size: "sm", icon: this.maximized ? 'minimize' : 'maximize', iconLibrary: "lucide", iconSize: "14px", ariaLabel: this.maximized ? 'Restore' : 'Maximize', onClick: () => this.toggleMaximize() })))), this.enableVoiceControl && (h("ui-button", { key: '779b43eae11da432d5c6f093d8b18bbbb6555d90', variant: "ghost", size: "sm", icon: "mic", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Voice Interaction", class: this.isListening ? 'active' : '', onClick: () => this.initVoice() }))), h("div", { key: 'abb834e57587a11fc4cee2868cfdff72989aafa6', class: "toolbar-right" }, this.showActions && (h("ui-button", { key: '727b404a4d895d83802bf906f77cbf78b79ed4df', id: "aside-actions-trigger", variant: "ghost", size: "sm", icon: "ellipsis-vertical", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "More Actions", onClick: () => this.asideActionClick.emit() })), this.showActions && (h("ui-context-menu", { key: 'b79ede6b5aafe1ab1bfe2dd48b1392aa261c6149', items: this.actionItems, target: "#aside-actions-trigger", openOn: "click", placement: "bottom", onItemSelect: (ev) => this.asideActionClick.emit(ev.detail) })), this.pinned && h("ui-icon", { key: '2c959558d6431ce998868df3f11d0a46e708a8c6', name: "pin", library: "lucide", size: "14px", class: "pin-status" }), this.closeable && !this.pinned && (h("ui-button", { key: '3e09ac4d9d907ffa6479774ae1fe8af67dd48173', variant: "ghost", size: "sm", icon: "x", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "Close panel", onClick: this.handleClose })))), h("div", { key: '88b297a05ea5c189d4301b5fa6ae6da924234f9d', class: "panel-header" }, h("div", { key: '769c42bf0fafef4cd5dd67e19a8c834edd47c212', class: "header-main" }, h("slot", { key: 'b2332bf17c6ad844421beba7842d1195c9b23dd2', name: "header" }), this.badge && h("span", { key: '51ec6d287c748533e817a9d1ac6d5f08ef2a723e', class: "header-badge" }, this.badge)), this.progress > -1 && (h("div", { key: '20cef73dab1865d28bc0c116b55d1fdfed6fb315', class: "header-progress" }, h("div", { key: '7f5ae92599c2625da1e29fb1b1e1d890a7de61d3', class: "progress-bar", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } })))), h("div", { key: 'd38f06820140b669ab0db1160adbd39718cf1d85', class: "panel-content" }, h("slot", { key: 'fd4171defde8576a75373d1f68f47b816fb7f638', name: "content" }), h("slot", { key: 'ed33565d953da868b3039684239aae6029582e2f' })), !this.mini && (h("div", { key: 'c58ffbd97eceba87ff9f85d1782cb357b5e87229', class: "panel-footer" }, h("slot", { key: '5ddc80b5ca138471895d9f86733c524094f4da8d', name: "footer" }))))));
     }
     static get is() { return "ui-aside-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -1268,7 +1268,7 @@ export class AsidePanel {
                 "setter": false,
                 "reflect": false,
                 "attribute": "transition-duration",
-                "defaultValue": "'1s'"
+                "defaultValue": "'0.3s'"
             },
             "animationType": {
                 "type": "string",

package/dist/collection/components/avatar/avatar.js

@@ -1293,7 +1293,7 @@ export class Avatar {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant | 'glass'",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",

package/dist/collection/components/badge/badge.css

@@ -36,6 +36,7 @@
   border-radius: 9999px;
   /* Force pill shape by default */
   font-weight: 600;
+  border: var(--badge-border, none);
 }
 .badge.badge-single:not(.badge-shape-square) {
   border-radius: 50%;

package/dist/collection/components/badge/badge.js

@@ -321,7 +321,7 @@ export class Badge {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -412,7 +412,7 @@ export class Breadcrumb {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant | 'pills'",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"pills\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"pills\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",

package/dist/collection/components/button/button.css

@@ -102,9 +102,24 @@
   vertical-align: middle;
   box-sizing: border-box;
   position: relative;
+  border-radius: var(--button-border-radius, 8px);
   /* Added for absolute badge positioning */
 }
 
+:host([shape=square]) {
+  border-radius: 0;
+}
+
+:host([shape=circle]),
+:host([circle]) {
+  border-radius: 50%;
+}
+
+:host([shape=pill]),
+:host([pill]) {
+  border-radius: 9999px;
+}
+
 :host(.is-full-width) {
   display: block;
   width: 100%;
@@ -1028,6 +1043,7 @@ ui-badge.is-absolute {
   pointer-events: none;
   width: 0;
   height: 0;
+  --badge-border: 2px solid var(--btn-badge-border, var(--bg-primary, #ffffff));
 }
 
 /* Perfect Corner Anchors - Let ui-badge's internal transforms handle the overlap */
@@ -1859,4 +1875,119 @@ ui-badge.is-absolute {
   object-fit: cover;
   border-radius: inherit;
   display: block;
+}
+
+/* ===== INLINE COUNTER BADGE ===== */
+.btn-counter-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  height: 18px;
+  min-width: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--btn-counter-bg, rgba(0, 0, 0, 0.08));
+  color: var(--btn-counter-color, inherit);
+  margin-inline-start: 8px;
+  line-height: 1;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  text-shadow: none;
+}
+
+/* Solid color variants: Use vibrant high-contrast white semi-transparent background with pure white text */
+.btn-primary .btn-counter-badge,
+.btn-success .btn-counter-badge,
+.btn-danger .btn-counter-badge,
+.btn-warning .btn-counter-badge,
+.btn-info .btn-counter-badge,
+.btn-dark .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(255, 255, 255, 0.25));
+  color: var(--btn-counter-color, #ffffff);
+}
+
+.btn-secondary .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(0, 0, 0, 0.12));
+  color: var(--btn-counter-color, inherit);
+}
+
+/* Outline & Ghost variants: Use a soft gray/tinted background with proper readable label/text color */
+.btn-outline .btn-counter-badge,
+.btn-ghost .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(0, 0, 0, 0.08));
+  color: var(--btn-counter-color, var(--btn-label-color, var(--label-color, var(--text-secondary, #374151))));
+}
+
+/* Soft color variants: Use custom premium semi-transparent tinted backgrounds matching their theme color */
+.btn-soft .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(0, 0, 0, 0.06));
+  color: var(--btn-counter-color, inherit);
+}
+
+.btn-soft.btn-primary .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(59, 130, 246, 0.15));
+  color: var(--btn-counter-color, var(--color-primary, #3b82f6));
+}
+
+.btn-soft.btn-success .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(16, 185, 129, 0.15));
+  color: var(--btn-counter-color, var(--color-success, #10b981));
+}
+
+.btn-soft.btn-danger .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(239, 68, 68, 0.15));
+  color: var(--btn-counter-color, var(--color-danger, #ef4444));
+}
+
+.btn-soft.btn-warning .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(245, 158, 11, 0.15));
+  color: var(--btn-counter-color, var(--color-warning, #f59e0b));
+}
+
+.btn-soft.btn-info .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(6, 182, 212, 0.15));
+  color: var(--btn-counter-color, var(--color-info, #06b6d4));
+}
+
+/* Gradient variants: Use beautiful glassmorphic white semi-transparent bubble to let gradient shine */
+.btn-gradient .btn-counter-badge,
+.btn-gradient-blue .btn-counter-badge,
+.btn-gradient-purple .btn-counter-badge,
+.btn-gradient-orange .btn-counter-badge,
+.btn-gradient-ocean .btn-counter-badge,
+.btn-gradient-sunset .btn-counter-badge,
+.btn-gradient-candy .btn-counter-badge,
+.btn-gradient-gold .btn-counter-badge,
+.btn-gradient-midnight .btn-counter-badge,
+.btn-gradient-forest .btn-counter-badge,
+.btn-gradient-blaze .btn-counter-badge {
+  background: var(--btn-counter-bg, rgba(255, 255, 255, 0.25));
+  color: var(--btn-counter-color, #ffffff);
+}
+
+.btn-counter-badge.counter-primary {
+  background-color: var(--color-primary, #3b82f6) !important;
+  color: #ffffff !important;
+}
+.btn-counter-badge.counter-success {
+  background-color: var(--color-success, #10b981) !important;
+  color: #ffffff !important;
+}
+.btn-counter-badge.counter-danger {
+  background-color: var(--color-danger, #ef4444) !important;
+  color: #ffffff !important;
+}
+.btn-counter-badge.counter-warning {
+  background-color: var(--color-warning, #f59e0b) !important;
+  color: #ffffff !important;
+}
+.btn-counter-badge.counter-info {
+  background-color: var(--color-info, #06b6d4) !important;
+  color: #ffffff !important;
+}
+.btn-counter-badge.counter-secondary {
+  background-color: var(--color-secondary, #6b7280) !important;
+  color: #ffffff !important;
 }

package/dist/collection/components/button/button.js

@@ -85,6 +85,14 @@ export class Button {
     grow = false;
     /** Badge content */
     badge;
+    /** Counter badge content (inline right side of text) */
+    counter;
+    /** Counter badge color variant (primary, success, danger, etc.) */
+    counterColor;
+    /** Custom background color for the counter badge */
+    counterCustomColor;
+    /** Custom text color for the counter badge */
+    counterCustomTextColor;
     /** Badge color variant (primary, success, danger, etc.) */
     badgeColor = 'danger';
     /** Custom background color for the badge */
@@ -114,6 +122,21 @@ export class Button {
     copied = false;
     /** Click event */
     buttonClick;
+    getBadgeColor() {
+        const finalBadgeColor = this.badgeColor;
+        if (finalBadgeColor === this.color) {
+            if (this.color === 'danger') {
+                return 'warning';
+            }
+            else if (this.color === 'warning') {
+                return 'danger';
+            }
+            else {
+                return 'danger';
+            }
+        }
+        return finalBadgeColor;
+    }
     handleClick = (event) => {
         if (this.disabled || this.loading) {
             event.preventDefault();
@@ -173,7 +196,8 @@ export class Button {
      * are not needed — the DOM order itself drives the visual order.
      */
     renderButtonContent(iconElement, avatarElement, spinner) {
-        const trimmedLabel = this.label?.trim();
+        const hostTitle = this.el.getAttribute('title') || '';
+        const trimmedLabel = (this.label || hostTitle).trim();
         const trimmedDescription = (this.description || this.subtitle || '').trim();
         const hasLabel = !!trimmedLabel;
         const hasDescription = !!trimmedDescription;
@@ -183,14 +207,25 @@ export class Button {
             return this.loading ? spinner : (avatarElement || iconElement || h("slot", null));
         }
         const badgeInlineLeft = this.badge && (this.badgePosition === 'inline-left' ||
-            (this.rtl && this.badgePosition === 'inline-right')) ? (h("ui-badge", { class: "btn-badge-inline", value: this.badge.toString(), color: this.badgeColor, "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })) : null;
+            (this.rtl && this.badgePosition === 'inline-right')) ? (h("ui-badge", { class: "btn-badge-inline", value: this.badge.toString(), color: this.getBadgeColor(), "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })) : null;
         const badgeInlineRight = this.badge && (this.badgePosition === 'inline-right' ||
-            (this.rtl && this.badgePosition === 'inline-left')) ? (h("ui-badge", { class: "btn-badge-inline", value: this.badge.toString(), color: this.badgeColor, "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })) : null;
+            (this.rtl && this.badgePosition === 'inline-left')) ? (h("ui-badge", { class: "btn-badge-inline", value: this.badge.toString(), color: this.getBadgeColor(), "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })) : null;
         const showSpinnerAtStart = this.loading && (this.loadingPosition === 'left' || (this.loadingPosition === 'icon' && !iconElement && !avatarElement));
         const showSpinnerAtEnd = this.loading && this.loadingPosition === 'right';
         const showSpinnerCentered = this.loading && (this.loadingPosition === 'center' || this.loadingPosition === 'icon');
         const iconBlock = (avatarElement || iconElement || showSpinnerCentered) ? (h("div", { class: "btn-icon-block", part: "icon-block" }, showSpinnerCentered ? spinner : (avatarElement || iconElement))) : null;
-        const labelBlock = showLabel ? (h("div", { class: "btn-label-block", part: "label-block" }, h("div", { class: "btn-title", part: "title" }, this.copied ? '✓ Copied!' : (hasLabel ? trimmedLabel : h("slot", null))), hasDescription && (h("div", { class: `btn-subtitle btn-subtitle-${this.descriptionPosition}`, part: "subtitle" }, trimmedDescription)))) : null;
+        const counterStyles = {};
+        if (this.counterCustomColor) {
+            counterStyles['background-color'] = this.counterCustomColor;
+        }
+        if (this.counterCustomTextColor) {
+            counterStyles['color'] = this.counterCustomTextColor;
+        }
+        const counterElement = this.counter !== undefined && this.counter !== '' ? (h("span", { class: {
+                'btn-counter-badge': true,
+                [`counter-${this.counterColor}`]: !!this.counterColor
+            }, style: counterStyles, part: "counter" }, this.counter)) : null;
+        const labelBlock = showLabel ? (h("div", { class: "btn-label-block", part: "label-block" }, h("div", { class: "btn-title", part: "title" }, this.copied ? '✓ Copied!' : (hasLabel ? trimmedLabel : h("slot", null)), counterElement), hasDescription && (h("div", { class: `btn-subtitle btn-subtitle-${this.descriptionPosition}`, part: "subtitle" }, trimmedDescription)))) : null;
         return (h("div", { class: {
                 'btn-label-row': true,
                 [`icon-pos-${this.iconPosition}`]: true
@@ -203,7 +238,8 @@ export class Button {
         const Tag = (this.href ? 'a' : 'button');
         const normalizedSize = normalizeComponentSize(this.size, 'md');
         const spinner = this.loading ? (h("span", { class: `btn-spinner btn-spinner-${this.loadingPosition}` }, h("ui-loader", { size: "xs", color: "currentColor" }))) : null;
-        const sanitizedLabel = this.ariaLabel || (this.label || this.el.textContent || '').trim();
+        const hostTitle = this.el.getAttribute('title') || '';
+        const sanitizedLabel = this.ariaLabel || (this.label || hostTitle || this.el.textContent || '').trim();
         const finalAriaLabel = sanitizeHTML(sanitizedLabel);
         const renderProps = this.href ? {
             href: this.href,
@@ -252,7 +288,7 @@ export class Button {
             this.rtl && 'btn-rtl',
             this.reveal !== 'none' && `reveal-${this.reveal}`,
         ].filter(Boolean).join(' ');
-        return (h(Tag, { key: 'd8605634f3cc899257ed9d6960ca1cf4e0aaf031', ...renderProps, style: styles, class: hostClass, part: "button", dir: this.rtl ? 'rtl' : 'ltr', onClick: this.handleClick, ref: (el) => (this.nativeButton = el) }, !this.noRipple && h("span", { key: 'cba383c8098e685d8f2ade718daa452e0884a034', class: "btn-ripple-container" }), h("span", { key: '469dd3ab6fe97d66e8aa50434e9407da2806f7c9', class: "btn-content" }, isImageButton ? (h("fragment", null, this.loading && spinner, h("img", { src: this.imgSrc, alt: this.imgAlt || '', class: "btn-image" }))) : (this.renderButtonContent(iconElement, avatarElement, spinner))), this.badge && !this.badgePosition.startsWith('inline') && (h("ui-badge", { key: '7ee2666b4d24ebed0516b6a15cf7c4c194ea1116', class: `btn-badge is-absolute pos-${this.badgePosition}`, value: this.badge.toString(), color: this.badgeColor, "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })), this.progress !== undefined && (h("span", { key: 'a132192aa0c0548de607fcd8f4c1b7d61bb04bfc', class: "btn-progress-fill", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } }))));
+        return (h(Tag, { key: '1a633068acc34fcf0fa27d2035b26452c17446c1', ...renderProps, style: styles, class: hostClass, part: "button", dir: this.rtl ? 'rtl' : 'ltr', onClick: this.handleClick, ref: (el) => (this.nativeButton = el) }, !this.noRipple && h("span", { key: 'c39b6a3c884ddcb8b1123a92fd325a39b6749bdf', class: "btn-ripple-container" }), h("span", { key: 'f7ef1d361081711c95019718ca64b7215b59f235', class: "btn-content" }, isImageButton ? (h("fragment", null, this.loading && spinner, h("img", { src: this.imgSrc, alt: this.imgAlt || '', class: "btn-image" }))) : (this.renderButtonContent(iconElement, avatarElement, spinner))), this.badge && !this.badgePosition.startsWith('inline') && (h("ui-badge", { key: '63cf65ca304184c969dedd157730c116823d9ba9', class: `btn-badge is-absolute pos-${this.badgePosition}`, value: this.badge.toString(), color: this.getBadgeColor(), "custom-color": this.badgeCustomColor, "custom-text-color": this.badgeCustomTextColor, size: "sm" })), this.progress !== undefined && (h("span", { key: 'e9ea36586c110dc064dc9b8676b83765d5ce281a', class: "btn-progress-fill", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } }))));
     }
     static get is() { return "ui-button"; }
     static get encapsulation() { return "shadow"; }
@@ -897,7 +933,7 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "shape",
                 "defaultValue": "'rounded'"
             },
@@ -937,7 +973,7 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "pill",
                 "defaultValue": "false"
             },
@@ -957,7 +993,7 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "circle",
                 "defaultValue": "false"
             },
@@ -1057,6 +1093,89 @@ export class Button {
                 "reflect": false,
                 "attribute": "badge"
             },
+            "counter": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Counter badge content (inline right side of text)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter"
+            },
+            "counterColor": {
+                "type": "string",
+                "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\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Counter badge color variant (primary, success, danger, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter-color"
+            },
+            "counterCustomColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color for the counter badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter-custom-color"
+            },
+            "counterCustomTextColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text color for the counter badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter-custom-text-color"
+            },
             "badgeColor": {
                 "type": "string",
                 "mutable": false,