atomicuilibrary 0.0.1 → 0.1.3

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%;
@@ -209,7 +210,7 @@
 
 /* Colors - Outlined */
 .badge-outlined {
-  background-color: var(--bg-primary, var(--text-standard, #ffffff));
+  background-color: transparent;
 }
 
 .badge-outlined.badge-primary {
@@ -268,26 +269,34 @@
   transform: scale(0.95);
 }
 
-/* Closeable badges need pointer events and a chip/rectangle shape */
+/* Closeable badges need pointer events and auto width to fit both text and icon */
 .badge.badge-closable {
   pointer-events: auto !important;
-  border-radius: 6px !important;
-  /* Chip/Rectangle shape */
-  padding-left: 10px !important;
-  padding-right: 10px !important;
+  width: auto !important;
+  min-width: var(--badge-size, 20px) !important;
+  padding-left: 0.6em !important;
+  padding-right: 0.3em !important;
+}
+
+.badge.badge-closable.badge-shape-circle {
+  border-radius: 9999px; /* Gracefully become a pill instead of an elliptical oval */
 }
 
 /* Close Button */
 .badge-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   color: inherit;
   cursor: pointer;
-  padding: 0 0 0 4px;
+  padding: 2px;
   margin-left: 4px;
-  font-size: 0.9em;
-  opacity: 0.8;
-  transition: opacity 0.2s ease;
+  border-radius: 50%;
+  font-size: 1em;
+  opacity: 0.7;
+  transition: opacity 0.2s ease, transform 0.1s ease, background-color 0.2s ease;
   line-height: 1;
   pointer-events: auto;
   position: relative;
@@ -296,11 +305,13 @@
 
 .badge-close:hover {
   opacity: 1;
+  transform: scale(1.1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 /* Bordered Variant */
 .badge-bordered {
-  background-color: var(--bg-primary, var(--text-standard, #ffffff));
+  background-color: transparent;
   border: 2px solid currentColor;
 }
 
@@ -336,32 +347,32 @@
 
 /* Soft Variant */
 .badge-soft.badge-primary {
-  background-color: var(--bg-primary, #eff6ff);
+  background-color: var(--color-primary-soft, #ecfdf5);
   color: var(--color-primary, #10b981);
 }
 
 .badge-soft.badge-secondary {
-  background-color: var(--bg-secondary, #f3f4f6);
+  background-color: var(--color-secondary-soft, #f3f4f6);
   color: var(--text-muted, #6b7280);
 }
 
 .badge-soft.badge-success {
-  background-color: var(--bg-primary, #d1fae5);
+  background-color: var(--color-success-soft, #ecfdf5);
   color: var(--color-success, #10b981);
 }
 
 .badge-soft.badge-danger {
-  background-color: var(--bg-primary, #fee2e2);
+  background-color: var(--color-danger-soft, #fef2f2);
   color: var(--color-danger, #ef4444);
 }
 
 .badge-soft.badge-warning {
-  background-color: var(--bg-primary, #fef3c7);
+  background-color: var(--color-warning-soft, #fffbeb);
   color: var(--color-warning, #f59e0b);
 }
 
 .badge-soft.badge-info {
-  background-color: var(--bg-primary, #cffafe);
+  background-color: var(--color-info-soft, #ecfeff);
   color: var(--color-info, #06b6d4);
 }
 

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class Badge {
+    hostElement;
     /**
      * Content/number to display in badge
      */
@@ -132,7 +133,8 @@ export class Badge {
         if (!this.isVisible)
             return null;
         const displayValue = this.getDisplayValue();
-        const shouldShow = this.dot || displayValue !== '' || this.icon;
+        const hasSlotContent = !!this.hostElement.querySelector('[slot="badge-content"]');
+        const shouldShow = this.dot || displayValue !== '' || this.icon || hasSlotContent;
         const displayValueStr = displayValue.toString();
         const isSingleChar = displayValueStr.length === 1 && !this.icon;
         const classes = [
@@ -160,7 +162,7 @@ export class Badge {
             style['background-color'] = this.customColor;
         if (this.customTextColor)
             style['color'] = this.customTextColor;
-        return (h(Host, { dir: this.rtl ? 'rtl' : undefined }, h("div", { class: "badge-wrapper" }, h("slot", null), shouldShow && (h("span", { class: classes, style: style, onClick: this.handleClick }, this.icon && this.iconPosition === 'left' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("slot", { name: "badge-content" }, !this.dot && displayValue), this.icon && this.iconPosition === 'right' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), this.closeable && (h("ui-button", { variant: "ghost", class: "badge-close", onClick: this.handleClose, ariaLabel: "Close badge", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))))));
+        return (h(Host, { dir: this.rtl ? 'rtl' : undefined }, h("div", { class: "badge-wrapper" }, h("slot", null), shouldShow && (h("span", { class: classes, style: style, onClick: this.handleClick }, this.icon && this.iconPosition === 'left' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("slot", { name: "badge-content" }, !this.dot && displayValue), this.icon && this.iconPosition === 'right' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), this.closeable && (h("span", { class: "badge-close", onClick: this.handleClose, "aria-label": "Close badge", role: "button", tabindex: "0" }, h("ui-icon", { name: "x", library: "lucide", size: "1em" }))))))));
     }
     static get is() { return "ui-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -220,7 +222,7 @@ export class Badge {
                 "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",
@@ -321,7 +323,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",
@@ -720,4 +722,5 @@ export class Badge {
                 }
             }];
     }
+    static get elementRef() { return "hostElement"; }
 }

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

@@ -39,8 +39,8 @@ export class BreadcrumbItemComponent {
             'disabled': this.disabled,
             [`size-${this.size}`]: true,
         };
-        const content = (h("span", { key: '7247bee3f00e6cc3de54c9860d014243b5d9c4cb', class: "breadcrumb-content" }, this.icon && (h("span", { key: '2537f399d8d557033b72f63a9bc190b208ebdf88', class: "breadcrumb-icon" }, h("ui-icon", { key: '951ece78e4e9936fd8f459bb041940c9f6632390', name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("span", { key: '9b2cc37dc1ae16e0b4f73ee0b12ecd168c930c49', class: "breadcrumb-label" }, h("slot", { key: 'd150b1d67baaa1f1ee0a679a4eded9fb2fe70e88' }, this.label)), this.badge !== undefined && (h("span", { key: '90d28ba9ab8e41cb81e4956fb4eb2a06fc940145', class: "breadcrumb-badge" }, this.badge))));
-        return (h(Host, { key: '867a980816ed6ca77aeedd631e00f284a8cccbf5', class: "breadcrumb-item-wrapper" }, this.href && !this.disabled && !this.active ? (h("a", { href: this.href, class: classes, "aria-current": this.active ? 'page' : undefined }, content)) : (h("span", { class: classes, "aria-current": this.active ? 'page' : undefined }, content))));
+        const content = (h("span", { key: '05f34f83d3f1bf069dce5942c543969be61213b9', class: "breadcrumb-content" }, this.icon && (h("span", { key: 'a7f149671e841edc15caafb4c3f9bafc71a7271a', class: "breadcrumb-icon" }, h("ui-icon", { key: 'c3c58f5cd81851e138fbce645f57bfff0dc1cbb8', name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("span", { key: 'cf7f46a53174ffebe4d51288164b9ffc798fb428', class: "breadcrumb-label" }, h("slot", { key: 'd93e29958c18269d8fdb2c9e3fc46554cf191ed7' }, this.label)), this.badge !== undefined && (h("span", { key: '96f4c6783184aedb03161046018c179a089c94b5', class: "breadcrumb-badge" }, this.badge))));
+        return (h(Host, { key: 'db0123ea2494998e20fa67557bdc2ea374811767', class: "breadcrumb-item-wrapper" }, this.href && !this.disabled && !this.active ? (h("a", { href: this.href, class: classes, "aria-current": this.active ? 'page' : undefined }, content)) : (h("span", { class: classes, "aria-current": this.active ? 'page' : undefined }, content))));
     }
     static get is() { return "ui-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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%;
@@ -406,6 +421,7 @@
 
 /* Soft Variant (Premium Refinement) */
 .btn-soft {
+  background: var(--btn-soft-bg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.15));
   color: var(--label-color, var(--text-primary, #1e293b));
   border-color: transparent;
   box-shadow: none;
@@ -1028,6 +1044,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 +1876,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"; }
@@ -700,7 +736,7 @@ export class Button {
                 "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",
@@ -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,12 +1093,95 @@ 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": "\"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",
+                            "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,
                 "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/button-toggle/button-toggle.js

@@ -64,10 +64,10 @@ export class ButtonToggle {
         if (this.reveal !== 'none' && this.revealDelay > 0) {
             style['animation-delay'] = `${this.revealDelay}ms`;
         }
-        return (h("ui-button", { key: '97cc24c55a704ecd85f39d443f4cc098b3194138', part: "button", label: this.label, description: this.description, descriptionPosition: this.descriptionPosition, shape: this.shape, variant: this.variant, size: this.size, selected: this.selected, style: style, icon: this.icon || this.iconLeft || this.iconRight, iconPosition: this.iconPosition, iconLibrary: this.library, iconOnly: this.iconOnly, avatarSrc: this.avatarSrc, avatarAlt: this.avatarAlt, avatarStatus: this.status, disabled: this.disabled || this.loading, "aria-pressed": this.selected ? 'true' : 'false', "aria-label": this.label, role: "radio", onClick: this.handleClick, tabIndex: this.disabled ? -1 : 0, class: {
+        return (h("ui-button", { key: 'faf3faae2f92535d6336b53616c8013ff533e7d6', part: "button", label: this.label, description: this.description, descriptionPosition: this.descriptionPosition, shape: this.shape, variant: this.variant, size: this.size, selected: this.selected, style: style, icon: this.icon || this.iconLeft || this.iconRight, iconPosition: this.iconPosition, iconLibrary: this.library, iconOnly: this.iconOnly, avatarSrc: this.avatarSrc, avatarAlt: this.avatarAlt, avatarStatus: this.status, disabled: this.disabled || this.loading, "aria-pressed": this.selected ? 'true' : 'false', "aria-label": this.label, role: "radio", onClick: this.handleClick, tabIndex: this.disabled ? -1 : 0, class: {
                 'button-toggle-item': true,
                 'full-width': this.fullWidth
-            } }, h("slot", { key: '2d5cdcb204273dbd82191ff0da555eec5d79ed6d' })));
+            } }, h("slot", { key: '4423b19bae11878c48a5ae7d66bd332aa8d6015f' })));
     }
     static get is() { return "ui-button-toggle"; }
     static get encapsulation() { return "shadow"; }