bromcom-ui-next 0.1.29 → 0.1.31

package/dist/cjs/bcm-avatar.cjs.entry.js

@@ -1,23 +1,33 @@
 'use strict';
 
-var index = require('./index-BtiU-G2W.js');
+var index = require('./index-1Qal-onT.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 
-const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 
 const BcmAvatar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**  Shape of the avatar (ellipse/square) */
-        this.shape = 'ellipse';
-        /** Size of the avatar */
-        this.size = 'medium';
-        /** Fallback icon class */
-        this.icon = 'fas fa-user';
-        /**  Status indicator animation */
-        this.blink = false;
-        this.isFallback = false;
     }
+    /** Source URL for avatar image */
+    image;
+    /** Alternative text for image */
+    alt;
+    /**  Shape of the avatar (ellipse/square) */
+    shape = 'ellipse';
+    /** Size of the avatar */
+    size = 'medium';
+    /** Custom background color */
+    color;
+    /** Fallback icon class */
+    icon = 'fas fa-user';
+    /**  Status indicator type */
+    status;
+    /**  Status indicator animation */
+    blink = false;
+    /**  Display name (used for initials) */
+    name;
+    isFallback = false;
     getFirstLetters(name) {
         const words = name.split(' ');
         const initials = words.map(word => word.charAt(0).toUpperCase()).join('');
@@ -76,12 +86,10 @@ const BcmAvatar = class {
                 return index.h("i", { class: this.icon });
             }
         };
-        return (index.h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: Object.assign(Object.assign({}, style), customSize) }, index.h(RenderContent, null), this.status && index.h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), index.h("slot", null)));
+        return (index.h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: { ...style, ...customSize } }, index.h(RenderContent, null), this.status && index.h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), index.h("slot", null)));
     }
 };
 BcmAvatar.style = avatarCss;
 
 exports.bcm_avatar = BcmAvatar;
 //# sourceMappingURL=bcm-avatar.entry.cjs.js.map
-
-//# sourceMappingURL=bcm-avatar.cjs.entry.js.map

package/dist/cjs/bcm-avatar.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-avatar.entry.cjs.js","sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n  --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-avatar-text: var(--bcm-ui-color-text-default);\n  --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n  tag: 'bcm-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class BcmAvatar {\n  /** Source URL for avatar image */\n  @Prop()\n  image: string;\n\n  /** Alternative text for image */\n  @Prop()\n  alt: string;\n\n  /**  Shape of the avatar (ellipse/square) */\n  @Prop()\n  shape: AvatarShape = 'ellipse';\n\n  /** Size of the avatar */\n  @Prop()\n  size: AvatarSize = 'medium';\n\n  /** Custom background color */\n  @Prop()\n  color: string;\n\n  /** Fallback icon class */\n  @Prop()\n  icon: string = 'fas fa-user';\n\n  /**  Status indicator type */\n  @Prop()\n  status: AvatarStatus;\n\n  /**  Status indicator animation */\n  @Prop()\n  blink = false;\n\n  /**  Display name (used for initials) */\n  @Prop()\n  name: string;\n\n  @State() isFallback: boolean = false;\n\n  private getFirstLetters(name: string): string {\n    const words = name.split(' ');\n    const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n    return initials.substring(0, 2);\n  }\n\n  render() {\n    const baseClass = cs(\n      'bcm-avatar bcm-ui-element bcm-ui-content-display',\n      'uppercase font-medium',\n      'inline-flex items-center justify-center',\n      'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n      {\n        'shape-ellipse rounded-full': this.shape === 'ellipse',\n        'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n        'size-small text-size-4 w-6 h-6': this.size === 'small',\n        'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n        'size-large text-size-6 w-10 h-10': this.size === 'large',\n      },\n    );\n\n    const badgeClass = cs('badge', {\n      'top-0 right-0': this.shape === 'ellipse',\n      '-top-0.5 -right-0.5': this.shape === 'square',\n    });\n\n    const imageClass = cs('image w-full h-full', {\n      'rounded-full': this.shape === 'ellipse',\n      'rounded-[--bcm-ui-radius]': this.shape === 'square',\n    });\n\n    let style = {};\n\n    if (this.color) {\n      const isColorTone = this.color.includes('-');\n      const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n      const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n      const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n      style = {\n        '--bcm-avatar-bg': bgColor,\n        '--bcm-avatar-text': textColor,\n      };\n    }\n\n    const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n      ? {\n        width: `${this.size}px`,\n        height: `${this.size}px`,\n        fontSize: `${+this.size / 2}px`,\n      }\n      : {};\n\n    const RenderContent = () => {\n      if (this.isFallback) {\n        if (this.name) {\n          return this.getFirstLetters(this.name);\n        } else {\n          return <i class={this.icon}></i>;\n        }\n      } else if (this.image) {\n        return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt || this.name || 'Avatar'} />;\n      } else if (this.name) {\n        return this.getFirstLetters(this.name);\n      } else {\n        return <i class={this.icon}></i>;\n      }\n    };\n\n    return (\n      <div role=\"img\" aria-label={this.alt || this.name || 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n        <RenderContent />\n        {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":["cs","h"],"mappings":"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"}
+{"version":3,"file":"bcm-avatar.entry.cjs.js","sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n  --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-avatar-text: var(--bcm-ui-color-text-default);\n  --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n  tag: 'bcm-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class BcmAvatar {\n  /** Source URL for avatar image */\n  @Prop()\n  image: string;\n\n  /** Alternative text for image */\n  @Prop()\n  alt: string;\n\n  /**  Shape of the avatar (ellipse/square) */\n  @Prop()\n  shape: AvatarShape = 'ellipse';\n\n  /** Size of the avatar */\n  @Prop()\n  size: AvatarSize = 'medium';\n\n  /** Custom background color */\n  @Prop()\n  color: string;\n\n  /** Fallback icon class */\n  @Prop()\n  icon: string = 'fas fa-user';\n\n  /**  Status indicator type */\n  @Prop()\n  status: AvatarStatus;\n\n  /**  Status indicator animation */\n  @Prop()\n  blink = false;\n\n  /**  Display name (used for initials) */\n  @Prop()\n  name: string;\n\n  @State() isFallback: boolean = false;\n\n  private getFirstLetters(name: string): string {\n    const words = name.split(' ');\n    const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n    return initials.substring(0, 2);\n  }\n\n  render() {\n    const baseClass = cs(\n      'bcm-avatar bcm-ui-element bcm-ui-content-display',\n      'uppercase font-medium',\n      'inline-flex items-center justify-center',\n      'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n      {\n        'shape-ellipse rounded-full': this.shape === 'ellipse',\n        'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n        'size-small text-size-4 w-6 h-6': this.size === 'small',\n        'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n        'size-large text-size-6 w-10 h-10': this.size === 'large',\n      },\n    );\n\n    const badgeClass = cs('badge', {\n      'top-0 right-0': this.shape === 'ellipse',\n      '-top-0.5 -right-0.5': this.shape === 'square',\n    });\n\n    const imageClass = cs('image w-full h-full', {\n      'rounded-full': this.shape === 'ellipse',\n      'rounded-[--bcm-ui-radius]': this.shape === 'square',\n    });\n\n    let style = {};\n\n    if (this.color) {\n      const isColorTone = this.color.includes('-');\n      const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n      const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n      const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n      style = {\n        '--bcm-avatar-bg': bgColor,\n        '--bcm-avatar-text': textColor,\n      };\n    }\n\n    const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n      ? {\n        width: `${this.size}px`,\n        height: `${this.size}px`,\n        fontSize: `${+this.size / 2}px`,\n      }\n      : {};\n\n    const RenderContent = () => {\n      if (this.isFallback) {\n        if (this.name) {\n          return this.getFirstLetters(this.name);\n        } else {\n          return <i class={this.icon}></i>;\n        }\n      } else if (this.image) {\n        return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt || this.name || 'Avatar'} />;\n      } else if (this.name) {\n        return this.getFirstLetters(this.name);\n      } else {\n        return <i class={this.icon}></i>;\n      }\n    };\n\n    return (\n      <div role=\"img\" aria-label={this.alt || this.name || 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n        <RenderContent />\n        {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":["cs","h"],"mappings":"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"}

package/dist/cjs/bcm-badge.cjs.entry.js

@@ -1,94 +1,123 @@
 'use strict';
 
-var index = require('./index-BtiU-G2W.js');
+var index = require('./index-1Qal-onT.js');
 var tv = require('./tv-ngpIbGlG.js');
 
-const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}";
+const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}";
 
 const Badge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Determines the size of the badge.
-         * @type {'small' | 'medium' | 'large'}
-         * @default 'medium'
-         */
-        this.size = 'medium';
-        /**
-         * Sets the visual variant of the badge.
-         * 'dot': Appears as a small dot indicator
-         * 'text': Displays content as text
-         * @type {'dot' | 'text'}
-         * @default 'text'
-         */
-        this.variant = 'text';
-        /**
-         * Enables soft color mode for the badge.
-         * When true, uses lighter tones and pastel colors.
-         * @type {boolean}
-         * @default false
-         */
-        this.soft = false;
-        /**
-         * Enables blinking animation for the badge.
-         * Useful for drawing attention or indicating active status.
-         * @type {boolean}
-         * @default false
-         */
-        this.blink = false;
-        /**
-         * Sets the position of the badge relative to its container.
-         * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
-         * @default 'top-right'
-         */
-        this.position = 'top-right';
-        this.classes = tv.tv({
-            base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',
-            variants: {
-                size: {
-                    small: 'gap-1 px-1 text-size-3',
-                    medium: 'gap-1 py-0.5 px-1.5 text-size-4',
-                    large: 'gap-2 py-1 px-2 text-size-5',
-                },
-                variant: {
-                    dot: 'gap-0 p-0 text-[0px] leading-none',
-                    text: '',
-                },
-                position: {
-                    'top-right': '-top-1 -right-1',
-                    'top-left': '-top-1 -left-1',
-                    'bottom-right': '-bottom-1 -right-1',
-                    'bottom-left': '-bottom-1 -left-1',
-                },
-                blink: {
-                    true: 'after:content-[""] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',
-                },
+    }
+    /**
+     * Determines the size of the badge.
+     * @type {'small' | 'medium' | 'large'}
+     * @default 'medium'
+     */
+    size = 'medium';
+    /**
+     * Sets the visual variant of the badge.
+     * 'dot': Appears as a small dot indicator
+     * 'text': Displays content as text
+     * @type {'dot' | 'text'}
+     * @default 'text'
+     */
+    variant = 'text';
+    /**
+     * Defines the color of the badge.
+     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+     * @type {string}
+     * @optional
+     */
+    color;
+    /**
+     * Enables soft color mode for the badge.
+     * When true, uses lighter tones and pastel colors.
+     * @type {boolean}
+     * @default false
+     */
+    soft = false;
+    /**
+     * Enables blinking animation for the badge.
+     * Useful for drawing attention or indicating active status.
+     * @type {boolean}
+     * @default false
+     */
+    blink = false;
+    /**
+     * Status message for accessibility purposes.
+     * Will be read by screen readers.
+     * @type {string}
+     * @optional
+     */
+    status;
+    /**
+     * Sets the position of the badge relative to its container.
+     * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
+     * @default 'top-right'
+     */
+    position = 'top-right';
+    /**
+     * Fine-tune the badge position with custom offset.
+     * Format: "x,y" in pixels (e.g., "10,-5")
+     * @type {string}
+     * @optional
+     */
+    offset;
+    /**
+     * Text to be displayed inside the badge.
+     * Used when variant is set to 'text'.
+     * Can be overridden using the "badge" slot.
+     * @type {string}
+     * @optional
+     */
+    text;
+    classes = tv.tv({
+        base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',
+        variants: {
+            size: {
+                small: 'gap-1 px-1 text-size-3',
+                medium: 'gap-1 py-0.5 px-1.5 text-size-4',
+                large: 'gap-2 py-1 px-2 text-size-5',
+            },
+            variant: {
+                dot: 'gap-0 p-0 text-[0px] leading-none',
+                text: '',
+            },
+            position: {
+                'top-right': '-top-1 -right-1',
+                'top-left': '-top-1 -left-1',
+                'bottom-right': '-bottom-1 -right-1',
+                'bottom-left': '-bottom-1 -left-1',
+            },
+            blink: {
+                true: 'after:content-[""] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',
             },
-            compoundVariants: [
-                {
-                    variant: 'dot',
-                    size: 'small',
-                    class: 'size-1',
-                },
-                {
-                    variant: 'dot',
-                    size: 'medium',
-                    class: 'size-1.5',
-                },
-                {
-                    variant: 'dot',
-                    size: 'large',
-                    class: 'size-2',
-                },
-            ],
-            defaultVariants: {
-                variant: 'text',
+        },
+        compoundVariants: [
+            {
+                variant: 'dot',
+                size: 'small',
+                class: 'size-1',
+            },
+            {
+                variant: 'dot',
                 size: 'medium',
-                position: 'top-right',
-                blink: false,
+                class: 'size-1.5',
             },
-        });
-    }
+            {
+                variant: 'dot',
+                size: 'large',
+                class: 'size-2',
+            },
+        ],
+        defaultVariants: {
+            variant: 'text',
+            size: 'medium',
+            position: 'top-right',
+            blink: false,
+        },
+    });
     get offsetStyle() {
         if (!this.offset)
             return {};
@@ -105,17 +134,18 @@ const Badge = class {
         };
     }
     render() {
-        return (index.h("div", { key: '74e45ce818da173ddd7222ec5d69c74dafa32efd', class: "relative inline-flex" }, index.h("slot", { key: '440ab1febafad8cdb6a16413f95449c23be51dd6' }), index.h("div", { key: 'd8ca98c7b8918fba57f3594b0e42850d47fbf639', role: "status", "aria-live": "polite", "aria-label": this.status ? `Status: ${this.status}` : undefined, class: this.classes({
+        return (index.h("div", { key: '18c634f88fdae46495b121abecb75047fedbcb3c', class: "relative inline-flex" }, index.h("slot", { key: 'fe3f798b2d3b8cfa8770f109be31fddc40c03a03' }), index.h("div", { key: '67d1effdcb853b550a30350521e19900cf1c716e', role: "status", "aria-live": "polite", "aria-label": this.status ? `Status: ${this.status}` : undefined, class: this.classes({
                 size: this.size,
                 variant: this.variant,
                 position: this.position,
                 blink: this.blink,
-            }), style: Object.assign(Object.assign({}, this.badgeStyle), this.offsetStyle) }, this.variant == 'text' && index.h("slot", { key: '8226b21ba3e24218e15f5eda598ccde83973edb2', name: "badge" }, this.text))));
+            }), style: {
+                ...this.badgeStyle,
+                ...this.offsetStyle,
+            } }, this.variant == 'text' && index.h("slot", { key: 'ec18851053e0b744112c63a65e9a0b91d886884d', name: "badge" }, this.text))));
     }
 };
 Badge.style = badgeCss;
 
 exports.bcm_badge = Badge;
 //# sourceMappingURL=bcm-badge.entry.cjs.js.map
-
-//# sourceMappingURL=bcm-badge.cjs.entry.js.map

package/dist/cjs/bcm-badge.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-badge.entry.cjs.js","sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n  tag: 'bcm-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class Badge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Enables blinking animation for the badge.\n   * Useful for drawing attention or indicating active status.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  blink: boolean = false;\n\n  /**\n   * Status message for accessibility purposes.\n   * Will be read by screen readers.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  status?: string;\n\n  /**\n   * Sets the position of the badge relative to its container.\n   * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n   * @default 'top-right'\n   */\n  @Prop()\n  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n  /**\n   * Fine-tune the badge position with custom offset.\n   * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  offset: string;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * Can be overridden using the \"badge\" slot.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n    variants: {\n      size: {\n        small: 'gap-1 px-1 text-size-3',\n        medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n        large: 'gap-2 py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n      position: {\n        'top-right': '-top-1 -right-1',\n        'top-left': '-top-1 -left-1',\n        'bottom-right': '-bottom-1 -right-1',\n        'bottom-left': '-bottom-1 -left-1',\n      },\n      blink: {\n        true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      position: 'top-right',\n      blink: false,\n    },\n  });\n\n  private get offsetStyle() {\n    if (!this.offset) return {};\n    const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n    return { transform: `translate(${x}px, ${y}px)` };\n  }\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'soft' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <div class=\"relative inline-flex\">\n        <slot></slot>\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label={this.status ? `Status: ${this.status}` : undefined}\n          class={this.classes({\n            size: this.size,\n            variant: this.variant,\n            position: this.position,\n            blink: this.blink,\n          })}\n          style={{\n            ...this.badgeStyle,\n            ...this.offsetStyle,\n          }}\n        >\n          {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["tv","h"],"mappings":"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"}
+{"version":3,"file":"bcm-badge.entry.cjs.js","sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n  tag: 'bcm-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class Badge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Enables blinking animation for the badge.\n   * Useful for drawing attention or indicating active status.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  blink: boolean = false;\n\n  /**\n   * Status message for accessibility purposes.\n   * Will be read by screen readers.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  status?: string;\n\n  /**\n   * Sets the position of the badge relative to its container.\n   * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n   * @default 'top-right'\n   */\n  @Prop()\n  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n  /**\n   * Fine-tune the badge position with custom offset.\n   * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  offset: string;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * Can be overridden using the \"badge\" slot.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n    variants: {\n      size: {\n        small: 'gap-1 px-1 text-size-3',\n        medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n        large: 'gap-2 py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n      position: {\n        'top-right': '-top-1 -right-1',\n        'top-left': '-top-1 -left-1',\n        'bottom-right': '-bottom-1 -right-1',\n        'bottom-left': '-bottom-1 -left-1',\n      },\n      blink: {\n        true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      position: 'top-right',\n      blink: false,\n    },\n  });\n\n  private get offsetStyle() {\n    if (!this.offset) return {};\n    const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n    return { transform: `translate(${x}px, ${y}px)` };\n  }\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'soft' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <div class=\"relative inline-flex\">\n        <slot></slot>\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label={this.status ? `Status: ${this.status}` : undefined}\n          class={this.classes({\n            size: this.size,\n            variant: this.variant,\n            position: this.position,\n            blink: this.blink,\n          })}\n          style={{\n            ...this.badgeStyle,\n            ...this.offsetStyle,\n          }}\n        >\n          {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["tv","h"],"mappings":"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"}

package/dist/cjs/bcm-basic-badge.cjs.entry.js

@@ -1,71 +1,85 @@
 'use strict';
 
-var index = require('./index-BtiU-G2W.js');
+var index = require('./index-1Qal-onT.js');
 var tv = require('./tv-ngpIbGlG.js');
 
-const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 
 const BasicBadge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Determines the size of the badge.
-         * @type {'small' | 'medium' | 'large'}
-         * @default 'medium'
-         */
-        this.size = 'medium';
-        /**
-         * Sets the visual variant of the badge.
-         * 'dot': Appears as a small dot indicator
-         * 'text': Displays content as text
-         * @type {'dot' | 'text'}
-         * @default 'text'
-         */
-        this.variant = 'text';
-        /**
-         * Enables soft color mode for the badge.
-         * When true, uses lighter tones and pastel colors.
-         * @type {boolean}
-         * @default false
-         */
-        this.soft = false;
-        this.classes = tv.tv({
-            base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',
-            variants: {
-                size: {
-                    small: 'px-1 text-size-3',
-                    medium: 'py-0.5 px-1.5 text-size-4',
-                    large: 'py-1 px-2 text-size-5',
-                },
-                variant: {
-                    dot: 'gap-0 p-0 text-[0px] leading-none',
-                    text: '',
-                },
+    }
+    /**
+     * Determines the size of the badge.
+     * @type {'small' | 'medium' | 'large'}
+     * @default 'medium'
+     */
+    size = 'medium';
+    /**
+     * Sets the visual variant of the badge.
+     * 'dot': Appears as a small dot indicator
+     * 'text': Displays content as text
+     * @type {'dot' | 'text'}
+     * @default 'text'
+     */
+    variant = 'text';
+    /**
+     * Defines the color of the badge.
+     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+     * @type {string}
+     * @optional
+     */
+    color;
+    /**
+     * Enables soft color mode for the badge.
+     * When true, uses lighter tones and pastel colors.
+     * @type {boolean}
+     * @default false
+     */
+    soft = false;
+    /**
+     * Text to be displayed inside the badge.
+     * Used when variant is set to 'text'.
+     * @type {string}
+     * @optional
+     */
+    text;
+    classes = tv.tv({
+        base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',
+        variants: {
+            size: {
+                small: 'px-1 text-size-3',
+                medium: 'py-0.5 px-1.5 text-size-4',
+                large: 'py-1 px-2 text-size-5',
+            },
+            variant: {
+                dot: 'gap-0 p-0 text-[0px] leading-none',
+                text: '',
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'dot',
+                size: 'small',
+                class: 'size-1',
             },
-            compoundVariants: [
-                {
-                    variant: 'dot',
-                    size: 'small',
-                    class: 'size-1',
-                },
-                {
-                    variant: 'dot',
-                    size: 'medium',
-                    class: 'size-1.5',
-                },
-                {
-                    variant: 'dot',
-                    size: 'large',
-                    class: 'size-2',
-                },
-            ],
-            defaultVariants: {
-                variant: 'text',
+            {
+                variant: 'dot',
                 size: 'medium',
-                blink: false,
+                class: 'size-1.5',
             },
-        });
-    }
+            {
+                variant: 'dot',
+                size: 'large',
+                class: 'size-2',
+            },
+        ],
+        defaultVariants: {
+            variant: 'text',
+            size: 'medium',
+            blink: false,
+        },
+    });
     get badgeStyle() {
         if (!this.color)
             return {};
@@ -76,15 +90,13 @@ const BasicBadge = class {
         };
     }
     render() {
-        return (index.h("span", { key: 'c0b2efa62977ff8a63f1aee47dc30d2591c3034a', part: "base", role: "status", "aria-live": "polite", style: this.badgeStyle, class: this.classes({
+        return (index.h("span", { key: '09e1e15f50a0c093d218babac09d7cb548bab50a', part: "base", role: "status", "aria-live": "polite", style: this.badgeStyle, class: this.classes({
                 size: this.size,
                 variant: this.variant,
-            }) }, this.variant === 'text' && (index.h("span", { key: '1e1b7c171f0ad0b217a7fc19fa8915ca987d7153', class: "badge-content" }, index.h("slot", { key: 'e8d3d89c8b510df67966baff42998cd2c7f0493a' })))));
+            }) }, this.variant === 'text' && (index.h("span", { key: 'a30f9d24a37da1f3ca2abd55ec727ce5fcbeb5b1', class: "badge-content" }, index.h("slot", { key: 'e452a2805971aee82fd5d99d72df04a0d3c96bb3' })))));
     }
 };
 BasicBadge.style = basicBadgeCss;
 
 exports.bcm_basic_badge = BasicBadge;
 //# sourceMappingURL=bcm-basic-badge.entry.cjs.js.map
-
-//# sourceMappingURL=bcm-basic-badge.cjs.entry.js.map

package/dist/cjs/bcm-basic-badge.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-basic-badge.entry.cjs.js","sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n.badge-content {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n *\n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n *\n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n  tag: 'bcm-basic-badge',\n  styleUrl: 'basic-badge.css',\n  shadow: true,\n})\nexport class BasicBadge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n    variants: {\n      size: {\n        small: 'px-1 text-size-3',\n        medium: 'py-0.5 px-1.5 text-size-4',\n        large: 'py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      blink: false,\n    },\n  });\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'palette' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        role=\"status\"\n        aria-live=\"polite\"\n        style={this.badgeStyle}\n        class={this.classes({\n          size: this.size,\n          variant: this.variant,\n        })}\n      >\n        {this.variant === 'text' && (\n          <span class=\"badge-content\">\n            <slot></slot>\n          </span>\n        )}\n      </span>\n    );\n  }\n}\n"],"names":["tv","h"],"mappings":";;;;;AAAA,MAAM,aAAa,GAAG,ovDAAovD;;MCsB7vD,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;AAIG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAE7C;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAmB,MAAM;AAWhC;;;;;AAKG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAWb,QAAA,IAAO,CAAA,OAAA,GAAGA,KAAE,CAAC;AACnB,YAAA,IAAI,EAAE,iLAAiL;AACvL,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,kBAAkB;AACzB,oBAAA,MAAM,EAAE,2BAA2B;AACnC,oBAAA,KAAK,EAAE,uBAAuB;AAC/B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,GAAG,EAAE,mCAAmC;AACxC,oBAAA,IAAI,EAAE,EAAE;AACT,iBAAA;AACF,aAAA;AACD,YAAA,gBAAgB,EAAE;AAChB,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,QAAQ;AAChB,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,QAAQ;AACd,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,QAAQ;AAChB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,KAAK;AACb,aAAA;AACF,SAAA,CAAC;AAgCH;AA9BC,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAC1B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO;QAEnD,OAAO;AACL,YAAA,gBAAgB,EAAE,CAAiC,8BAAA,EAAA,WAAW,IAAI,IAAI,CAAC,KAAK,CAAW,SAAA,CAAA;AACvF,YAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,CAAmC,gCAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,GAAG,+BAA+B;SACnH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACEC,mEACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,aAAA,CAAC,EAAA,EAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACR,CACI;;;;;;;"}
+{"version":3,"file":"bcm-basic-badge.entry.cjs.js","sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n.badge-content {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n *\n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n *\n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n  tag: 'bcm-basic-badge',\n  styleUrl: 'basic-badge.css',\n  shadow: true,\n})\nexport class BasicBadge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n    variants: {\n      size: {\n        small: 'px-1 text-size-3',\n        medium: 'py-0.5 px-1.5 text-size-4',\n        large: 'py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      blink: false,\n    },\n  });\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'palette' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        role=\"status\"\n        aria-live=\"polite\"\n        style={this.badgeStyle}\n        class={this.classes({\n          size: this.size,\n          variant: this.variant,\n        })}\n      >\n        {this.variant === 'text' && (\n          <span class=\"badge-content\">\n            <slot></slot>\n          </span>\n        )}\n      </span>\n    );\n  }\n}\n"],"names":["tv","h"],"mappings":";;;;;AAAA,MAAM,aAAa,GAAG,4tDAA4tD;;MCsBruD,UAAU,GAAA,MAAA;;;;AACrB;;;;AAIG;IAEH,IAAI,GAAiC,QAAQ;AAE7C;;;;;;AAMG;IAEH,OAAO,GAAmB,MAAM;AAEhC;;;;;AAKG;AAEH,IAAA,KAAK;AAEL;;;;;AAKG;IAEH,IAAI,GAAY,KAAK;AAErB;;;;;AAKG;AAEH,IAAA,IAAI;IAEI,OAAO,GAAGA,KAAE,CAAC;AACnB,QAAA,IAAI,EAAE,iLAAiL;AACvL,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,kBAAkB;AACzB,gBAAA,MAAM,EAAE,2BAA2B;AACnC,gBAAA,KAAK,EAAE,uBAAuB;AAC/B,aAAA;AACD,YAAA,OAAO,EAAE;AACP,gBAAA,GAAG,EAAE,mCAAmC;AACxC,gBAAA,IAAI,EAAE,EAAE;AACT,aAAA;AACF,SAAA;AACD,QAAA,gBAAgB,EAAE;AAChB,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,UAAU;AAClB,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,KAAK,EAAE,KAAK;AACb,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAC1B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO;QAEnD,OAAO;AACL,YAAA,gBAAgB,EAAE,CAAiC,8BAAA,EAAA,WAAW,IAAI,IAAI,CAAC,KAAK,CAAW,SAAA,CAAA;AACvF,YAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,CAAmC,gCAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,GAAG,+BAA+B;SACnH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACEC,mEACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,aAAA,CAAC,EAAA,EAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACR,CACI;;;;;;;"}