bromcom-ui-next 0.1.29 → 0.1.31

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

@@ -1,92 +1,121 @@
-import { r as registerInstance, h } from './index-BuuGCw0z.js';
+import { r as registerInstance, h } from './index-B6Ppbs5O.js';
 import { t as tv } from './tv-CEcVC0yX.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) {
         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({
-            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({
+        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 {};
@@ -103,17 +132,18 @@ const Badge = class {
         };
     }
     render() {
-        return (h("div", { key: '74e45ce818da173ddd7222ec5d69c74dafa32efd', class: "relative inline-flex" }, h("slot", { key: '440ab1febafad8cdb6a16413f95449c23be51dd6' }), h("div", { key: 'd8ca98c7b8918fba57f3594b0e42850d47fbf639', role: "status", "aria-live": "polite", "aria-label": this.status ? `Status: ${this.status}` : undefined, class: this.classes({
+        return (h("div", { key: '18c634f88fdae46495b121abecb75047fedbcb3c', class: "relative inline-flex" }, h("slot", { key: 'fe3f798b2d3b8cfa8770f109be31fddc40c03a03' }), 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' && h("slot", { key: '8226b21ba3e24218e15f5eda598ccde83973edb2', name: "badge" }, this.text))));
+            }), style: {
+                ...this.badgeStyle,
+                ...this.offsetStyle,
+            } }, this.variant == 'text' && h("slot", { key: 'ec18851053e0b744112c63a65e9a0b91d886884d', name: "badge" }, this.text))));
     }
 };
 Badge.style = badgeCss;
 
 export { Badge as bcm_badge };
 //# sourceMappingURL=bcm-badge.entry.js.map
-
-//# sourceMappingURL=bcm-badge.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"bcm-badge.entry.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":[],"mappings":"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"}
+{"version":3,"file":"bcm-badge.entry.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":[],"mappings":"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"}

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

@@ -1,69 +1,83 @@
-import { r as registerInstance, h } from './index-BuuGCw0z.js';
+import { r as registerInstance, h } from './index-B6Ppbs5O.js';
 import { t as tv } from './tv-CEcVC0yX.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) {
         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({
-            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({
+        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 {};
@@ -74,15 +88,13 @@ const BasicBadge = class {
         };
     }
     render() {
-        return (h("span", { key: 'c0b2efa62977ff8a63f1aee47dc30d2591c3034a', part: "base", role: "status", "aria-live": "polite", style: this.badgeStyle, class: this.classes({
+        return (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' && (h("span", { key: '1e1b7c171f0ad0b217a7fc19fa8915ca987d7153', class: "badge-content" }, h("slot", { key: 'e8d3d89c8b510df67966baff42998cd2c7f0493a' })))));
+            }) }, this.variant === 'text' && (h("span", { key: 'a30f9d24a37da1f3ca2abd55ec727ce5fcbeb5b1', class: "badge-content" }, h("slot", { key: 'e452a2805971aee82fd5d99d72df04a0d3c96bb3' })))));
     }
 };
 BasicBadge.style = basicBadgeCss;
 
 export { BasicBadge as bcm_basic_badge };
 //# sourceMappingURL=bcm-basic-badge.entry.js.map
-
-//# sourceMappingURL=bcm-basic-badge.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"bcm-basic-badge.entry.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":[],"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,GAAG,EAAE,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,QACE,6DACE,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,KACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACR,CACI;;;;;;;"}
+{"version":3,"file":"bcm-basic-badge.entry.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":[],"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,GAAG,EAAE,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,QACE,6DACE,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,KACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACR,CACI;;;;;;;"}

package/dist/esm/bcm-button-group.entry.js

@@ -1,31 +1,27 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BuuGCw0z.js';
+import { r as registerInstance, a as getElement, h, H as Host } from './index-B6Ppbs5O.js';
 import { t as tv } from './tv-CEcVC0yX.js';
 
-const buttonGroupCss = ".block{display:block}.flex{display:flex}:host{display:block}.bcm-button-group{display:flex}.static{position:static}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.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 buttonGroupCss = ".block{display:block}.flex{display:flex}:host{display:block}.bcm-button-group{display:flex}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.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 BcmButtonGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** Button orientation */
-        this.orientation = 'horizontal';
-        this.buttonGroupClass = tv({
-            base: 'bcm-button-group',
-            variants: {
-                orientation: {
-                    horizontal: 'flex flex-row',
-                    vertical: 'flex flex-col',
-                },
-                fullWidth: {
-                    true: 'w-full',
-                },
-            },
-            defaultVariants: {
-                orientation: 'horizontal',
-            },
-        }, {
-            twMerge: false,
-        });
     }
+    get host() { return getElement(this); }
+    /** Defines the main visual style of buttons */
+    kind;
+    /** Controls the button size */
+    size;
+    /** Defines the button's status/state color */
+    status;
+    /** Full width buttons */
+    fullWidth;
+    /** Loading state */
+    loading;
+    /** Disabled state */
+    disabled;
+    /** Button orientation */
+    orientation = 'horizontal';
     componentDidLoad() {
         this.applyPropertiesToButtons();
         this.setButtonPositions();
@@ -77,17 +73,31 @@ const BcmButtonGroup = class {
             }
         });
     }
+    buttonGroupClass = tv({
+        base: 'bcm-button-group',
+        variants: {
+            orientation: {
+                horizontal: 'flex flex-row',
+                vertical: 'flex flex-col',
+            },
+            fullWidth: {
+                true: 'w-full',
+            },
+        },
+        defaultVariants: {
+            orientation: 'horizontal',
+        },
+    }, {
+        twMerge: false,
+    });
     render() {
-        return (h(Host, { key: '7ce4697e9471c9d546703cdb6fa5bf42ec0d374a' }, h("div", { key: '04cfb647c992d1e7ce7eedfd05e952ca6ef1eb15', class: this.buttonGroupClass({
+        return (h(Host, { key: 'f3d708e07b30b60e417fff5d6126fc9803842129' }, h("div", { key: 'b64af84e07104263f8149ccaf80576309a2010ee', class: this.buttonGroupClass({
                 orientation: this.orientation,
                 fullWidth: this.fullWidth,
-            }) }, h("slot", { key: '46eae1d4993d950328fbdf5432a85c18e6793960' }))));
+            }) }, h("slot", { key: '099df427a2028e6756d83eb8a27f743cc328bcef' }))));
     }
-    get host() { return getElement(this); }
 };
 BcmButtonGroup.style = buttonGroupCss;
 
 export { BcmButtonGroup as bcm_button_group };
 //# sourceMappingURL=bcm-button-group.entry.js.map
-
-//# sourceMappingURL=bcm-button-group.entry.js.map

package/dist/esm/bcm-button-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-button-group.entry.js","sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-button-group.entry.js","sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}