@brightspot/ui 1.0.1-5 → 1.0.1-6

package/dist/LucideDynamicLoader.js

@@ -1,7 +1,7 @@
 import * as LucideIcons from 'lucide-static';
 import icons from 'lucide-static/font/info.json' with { type: 'json' };
-import { kebabToPascal } from '../src/util/string';
-import { addNameSpaceXML, encodeSVG } from '../src/util/svg';
+import { kebabToPascal } from './util/string.js';
+import { addNameSpaceXML, encodeSVG } from './util/svg.js';
 export function getIcon(iconName) {
     try {
         const kebabName = iconName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

package/dist/LucideDynamicLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"LucideDynamicLoader.js","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE5D,MAAM,UAAU,OAAO,CAAC,QAAgB;IACtC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;QAC5E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAE3C,IAAI,WAAW,CAAC,UAAsC,CAAC,EAAE,CAAC;YACxD,MAAM,GAAG,GAAG,WAAW,CAAC,UAAsC,CAAW,CAAA;YACzE,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;YAElD,OAAO;gBACL,MAAM,EAAE,KAAK,CAAC,SAA+B,CAAC,EAAE,WAAW,IAAI,EAAE;gBACjE,OAAO,EAAE,UAAU;aACpB,CAAA;QACH,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAA;IAC5D,CAAC;AACH,CAAC"}
+{"version":3,"file":"LucideDynamicLoader.js","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE1D,MAAM,UAAU,OAAO,CAAC,QAAgB;IACtC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;QAC5E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAE3C,IAAI,WAAW,CAAC,UAAsC,CAAC,EAAE,CAAC;YACxD,MAAM,GAAG,GAAG,WAAW,CAAC,UAAsC,CAAW,CAAA;YACzE,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;YAElD,OAAO;gBACL,MAAM,EAAE,KAAK,CAAC,SAA+B,CAAC,EAAE,WAAW,IAAI,EAAE;gBACjE,OAAO,EAAE,UAAU;aACpB,CAAA;QACH,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAA;IAC5D,CAAC;AACH,CAAC"}

package/dist/LucideDynamicLoader.ts

@@ -1,7 +1,7 @@
 import * as LucideIcons from 'lucide-static'
 import icons from 'lucide-static/font/info.json' with { type: 'json' }
-import { kebabToPascal } from '../src/util/string'
-import { addNameSpaceXML, encodeSVG } from '../src/util/svg'
+import { kebabToPascal } from './util/string.js'
+import { addNameSpaceXML, encodeSVG } from './util/svg.js'
 
 export function getIcon(iconName: string) {
   try {

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+export interface BadgeProps {
+    variant?: 'info' | 'primary' | 'error' | 'success' | 'warning';
+    dot?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Badge_base: (new (...args: any[]) => import("../../utils/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../utils/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A badge component for highlighting important information.
+ *
+ * Badges help highlight notifications, status, or new messages.
+ * Primarily used for communicating secondary or additional information.
+ *
+ * @element btu-badge
+ *
+ * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
+ *
+ * @cssprop --badge-color-foreground - Text color (overrides theme color)
+ * @cssprop --badge-color-background - Background color (overrides theme color)
+ * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
+ * @cssprop --badge-px - Horizontal padding (overrides size default)
+ * @cssprop --badge-py - Vertical padding (overrides size default)
+ * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
+ *
+ * @example
+ * ```html
+ * <!-- Badge with dot -->
+ * <btu-badge variant="info" size="sm" dot>New</btu-badge>
+ *
+ * <!-- Badge with icon -->
+ * <btu-badge variant="success" size="md">
+ *   <btu-icon symbol="check"></btu-icon>
+ *   Success
+ * </btu-badge>
+ * ```
+ */
+export default class Badge extends Badge_base {
+    /**
+     * Style of the badge.
+     * - 'info': Informational (default)
+     * - 'primary': Primary action or emphasis
+     * - 'error': Error or danger state
+     * - 'success': Success or completion state
+     * - 'warning': Warning or caution state
+     * @attr
+     */
+    variant: 'info' | 'primary' | 'error' | 'success' | 'warning';
+    /**
+     * Should a dot be displayed before the label?
+     * @attr
+     */
+    dot: boolean;
+    /**
+     * Size variant.
+     * - 'sm': Small (default)
+     * - 'md': Medium
+     * - 'lg': Large
+     * @attr
+     */
+    size: string;
+    /** @internal */
+    private initialClasses;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-badge': Badge;
+    }
+}
+export {};
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IAC9D,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAyC;IAC1E;;;;;;;;OAQG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAS;IAEtE;;;OAGG;IAEH,GAAG,UAAQ;IAEX;;;;;;OAMG;IAEH,IAAI,SAAO;IAEX,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAqBlB,YAAY,IAAI,IAAI;IAIpB,MAAM;CAGP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAA;KACnB;CACF"}

package/dist/components/badge/Badge.js

@@ -0,0 +1,118 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../utils/EventEmitterMixin.js';
+import { ReadyMixin } from '../../utils/ReadyMixin.js';
+/**
+ * A badge component for highlighting important information.
+ *
+ * Badges help highlight notifications, status, or new messages.
+ * Primarily used for communicating secondary or additional information.
+ *
+ * @element btu-badge
+ *
+ * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
+ *
+ * @cssprop --badge-color-foreground - Text color (overrides theme color)
+ * @cssprop --badge-color-background - Background color (overrides theme color)
+ * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
+ * @cssprop --badge-px - Horizontal padding (overrides size default)
+ * @cssprop --badge-py - Vertical padding (overrides size default)
+ * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
+ *
+ * @example
+ * ```html
+ * <!-- Badge with dot -->
+ * <btu-badge variant="info" size="sm" dot>New</btu-badge>
+ *
+ * <!-- Badge with icon -->
+ * <btu-badge variant="success" size="md">
+ *   <btu-icon symbol="check"></btu-icon>
+ *   Success
+ * </btu-badge>
+ * ```
+ */
+export default class Badge extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Style of the badge.
+         * - 'info': Informational (default)
+         * - 'primary': Primary action or emphasis
+         * - 'error': Error or danger state
+         * - 'success': Success or completion state
+         * - 'warning': Warning or caution state
+         * @attr
+         */
+        this.variant = 'info';
+        /**
+         * Should a dot be displayed before the label?
+         * @attr
+         */
+        this.dot = false;
+        /**
+         * Size variant.
+         * - 'sm': Small (default)
+         * - 'md': Medium
+         * - 'lg': Large
+         * @attr
+         */
+        this.size = 'sm';
+        /** @internal */
+        this.initialClasses = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Capture initial classes from backend HTML
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        // Map variant to theme color (info → gray)
+        const colorMap = {
+            info: 'gray',
+            primary: 'primary',
+            error: 'error',
+            success: 'success',
+            warning: 'warning',
+        };
+        const classes = [
+            ...this.initialClasses,
+            'btu-badge',
+            `btu-badge-${this.size}`,
+            `btu-badge-${colorMap[this.variant]}`,
+            this.dot ? 'btu-badge-dot' : '',
+        ];
+        this.className = classes.filter(Boolean).join(' ');
+    }
+    firstUpdated() {
+        this.emit('btu-badge-ready');
+    }
+    render() {
+        return html ``;
+    }
+}
+__decorate([
+    property({ type: String })
+], Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], Badge.prototype, "dot", void 0);
+__decorate([
+    property({ type: String })
+], Badge.prototype, "size", void 0);
+// Register custom element with guard to prevent double registration
+// (common with yarn link, HMR, or webpack bundle duplication)
+if (!customElements.get('btu-badge')) {
+    customElements.define('btu-badge', Badge);
+}
+//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAQtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,iBAAiB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAA5E;;QACE;;;;;;;;WAQG;QAEH,YAAO,GAAyD,MAAM,CAAA;QAEtE;;;WAGG;QAEH,QAAG,GAAG,KAAK,CAAA;QAEX;;;;;;WAMG;QAEH,SAAI,GAAG,IAAI,CAAA;QAEX,gBAAgB;QACR,mBAAc,GAAa,EAAE,CAAA;IA0CvC,CAAC;IAxCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,4CAA4C;QAC5C,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;QACvE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,UAAU;QACR,2CAA2C;QAC3C,MAAM,QAAQ,GAAmD;YAC/D,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;SACnB,CAAA;QAED,MAAM,OAAO,GAAG;YACd,GAAG,IAAI,CAAC,cAAc;YACtB,WAAW;YACX,aAAa,IAAI,CAAC,IAAI,EAAE;YACxB,aAAa,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;SAChC,CAAA;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;CACF;AA9DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAC2C;AAOtE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCACjB;AAUX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAChB;AA+Cb,oEAAoE;AACpE,8DAA8D;AAC9D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;AAC3C,CAAC"}

package/dist/custom-elements.json

@@ -0,0 +1,150 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A badge component for highlighting important information.\n\nBadges help highlight notifications, status, or new messages.\nPrimarily used for communicating secondary or additional information.",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "Text color (overrides theme color)",
+              "name": "--badge-color-foreground"
+            },
+            {
+              "description": "Background color (overrides theme color)",
+              "name": "--badge-color-background"
+            },
+            {
+              "description": "Border radius size (overrides shape default, default: 999px)",
+              "name": "--badge-radius-size"
+            },
+            {
+              "description": "Horizontal padding (overrides size default)",
+              "name": "--badge-px"
+            },
+            {
+              "description": "Vertical padding (overrides size default)",
+              "name": "--badge-py"
+            },
+            {
+              "description": "Size of the dot affordance (default: 6px)",
+              "name": "--badge-dot-size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+              },
+              "default": "'info'",
+              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "attribute": "dot"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'sm'",
+              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "attribute": "size"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render and initialization",
+              "name": "btu-badge-ready"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+              },
+              "default": "'info'",
+              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
+              "fieldName": "variant",
+              "attribute": "variant"
+            },
+            {
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "fieldName": "dot",
+              "attribute": "dot"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'sm'",
+              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "fieldName": "size",
+              "attribute": "size"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/utils/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/utils/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/global.d.ts

@@ -0,0 +1,14 @@
+declare global {
+  interface Window {
+    BRIGHTSPOT?: {
+      ui?: {
+        tooltips?: {
+          collapse?: string
+          expand?: string
+        }
+      }
+    }
+  }
+}
+
+export {}

package/dist/storybook/assets/Badge.stories-IDiQBqoG.js

@@ -0,0 +1,134 @@
+import{g as c,x as s}from"./iframe-DEAT_PRS.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:l,argTypes:o}=c("btu-badge"),g=["info","primary","error","success","warning"],u={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"A component for highlighting important information",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To call attention to something</li>
+  <li>For presenting status</li>
+  <li>For anything longer than a very short number</li>
+</ul>
+
+<h3>When not to use:</h3>
+<ul>
+  <li>For very short numbers. Instead use a notification</li>
+  <li>For circled notifications</li>
+</ul>
+        `}},actions:{handles:d},controls:{expanded:!0}},args:{...l,variant:"success",dot:!1,size:"sm"},argTypes:{...o,"--badge-color-foreground":{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-radius-size":{table:{disable:!0}},"--badge-px":{table:{disable:!0}},"--badge-py":{table:{disable:!0}},"--badge-dot-size":{table:{disable:!0}},variant:{...o.variant,control:{type:"select"},options:g},dot:{...o.dot,control:{type:"boolean"}},size:{...o.size,control:{type:"select"},options:["sm","md","lg"]},customBackgroundColor:{name:"--badge-color-background",control:{type:"color"},description:"Custom background color - overrides the theme color",table:{category:"CSS Properties"}},customForegroundColor:{name:"--badge-color-foreground",control:{type:"color"},description:"Custom foreground (text) color - overrides the theme color",table:{category:"CSS Properties"}},customRadiusSize:{name:"--badge-radius-size",control:{type:"text"},description:"Custom border radius size - overrides the shape default (default: 999px)",table:{category:"CSS Properties"}},customPadX:{name:"--badge-px",control:{type:"text"},description:"Horizontal padding - overrides the size default",table:{category:"CSS Properties"}},customPadY:{name:"--badge-py",control:{type:"text"},description:"Vertical padding - overrides the size default",table:{category:"CSS Properties"}},customDotSize:{name:"--badge-dot-size",control:{type:"text"},description:"Size of the dot affordance (default: 6px)",table:{category:"CSS Properties"}}},render:e=>{const a=[];e.customBackgroundColor&&a.push(`--badge-color-background: ${e.customBackgroundColor}`),e.customForegroundColor&&a.push(`--badge-color-foreground: ${e.customForegroundColor}`),e.customRadiusSize&&a.push(`--badge-radius-size: ${e.customRadiusSize}`),e.customPadX&&a.push(`--badge-px: ${e.customPadX}`),e.customPadY&&a.push(`--badge-py: ${e.customPadY}`),e.customDotSize&&a.push(`--badge-dot-size: ${e.customDotSize}`);const n=a.length>0?a.join("; "):"";return s`<btu-badge variant="${e.variant}" ?dot="${e.dot}" size="${e.size}" style="${n}"
+      >Badge</btu-badge
+    >`}},i={args:{}},t={args:{variant:"success",size:"lg"},render:e=>s`<a href="#" class="hover:text-primary inline-flex items-center gap-2 hover:underline">
+      Hover over me to see the
+      <btu-badge variant="${e.variant}" size="${e.size}">Linked Badge</btu-badge>
+      in action.
+    </a>`,parameters:{docs:{description:{story:"Badges inside anchor elements automatically handle underlines properly. The underline uses the badge background color instead of the default link color, ensuring proper visual hierarchy when badges are used within linked elements."}}}},r={render:()=>s`<div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <strong>With Icon:</strong>
+        <btu-badge variant="warning" size="md">
+          <div
+            aria-label="warning icon"
+            class="before:btu-icon before:btu-icon-md before:btu-icon-triangle-alert"
+          ></div>
+          Warning
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>With Image:</strong>
+        <btu-badge variant="primary" size="md">
+          <div
+            class="-ms-[--badge-px] aspect-square w-[20px] bg-cover bg-center bg-no-repeat [clipPath:circle(50%_at_center)]"
+            style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM1IDY1MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8ZyBpZD0idW5pb24iPg0KPHVzZSB5PSItLjIxNiIgeGxpbms6aHJlZj0iI3g0Ii8+DQo8dXNlIHhsaW5rOmhyZWY9IiN4NCIvPg0KPHVzZSB5PSIuMjE2IiB4bGluazpocmVmPSIjczYiLz4NCjwvZz4NCjxnIGlkPSJ4NCI+DQo8dXNlIHhsaW5rOmhyZWY9IiNzNiIvPg0KPHVzZSB5PSIuMDU0IiB4bGluazpocmVmPSIjczUiLz4NCjx1c2UgeT0iLjEwOCIgeGxpbms6aHJlZj0iI3M2Ii8+DQo8dXNlIHk9Ii4xNjIiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPC9nPg0KPGcgaWQ9InM1Ij4NCjx1c2UgeD0iLS4yNTIiIHhsaW5rOmhyZWY9IiNzdGFyIi8+DQo8dXNlIHg9Ii0uMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMjUyIiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InM2Ij4NCjx1c2UgeD0iLS4wNjMiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPHVzZSB4PSIuMzE1IiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InN0YXIiPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0ibWF0cml4KC0uODA5MDIgLS41ODc3OSAuNTg3NzkgLS44MDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIgdHJhbnNmb3JtPSJtYXRyaXgoLjMwOTAyIC0uOTUxMDYgLjk1MTA2IC4zMDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDcyKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDE0NCkiLz4NCjwvZz4NCjxwYXRoIGZpbGw9IiNmZmYiIGlkPSJwdCIgZD0iTS0uMTYyNSwwIDAtLjUgLjE2MjUsMHoiIHRyYW5zZm9ybT0ic2NhbGUoLjA2MTYpIi8+DQo8cGF0aCBmaWxsPSIjYmYwYTMwIiBpZD0ic3RyaXBlIiBkPSJtMCwwaDEyMzV2NTBoLTEyMzV6Ii8+DQo8L2RlZnM+DQo8cGF0aCBmaWxsPSIjZmZmIiBkPSJtMCwwaDEyMzV2NjUwaC0xMjM1eiIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjEwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSIyMDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iMzAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjQwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSI1MDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iNjAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8cGF0aCBmaWxsPSIjMDAyODY4IiBkPSJtMCwwaDQ5NHYzNTBoLTQ5NHoiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3VuaW9uIiB0cmFuc2Zvcm09Im1hdHJpeCg2NTAgMCAwIDY1MCAyNDcgMTc1KSIvPg0KPC9zdmc+DQo=')"
+            aria-label="Flag"
+          ></div>
+          United States
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>Rectangular Shape:</strong>
+        <btu-badge variant="success" size="md" style="--badge-radius-size: 0px">Rectangle</btu-badge>
+      </div>
+      <div class="story-custom-colors flex items-center gap-2">
+        <strong>Custom Colors:</strong>
+        <btu-badge
+          dot
+          variant="primary"
+          size="lg"
+          style="--badge-color-background: oklch(70% 0.3 var(--hue)); --badge-color-foreground: oklch(95% 0.1 calc(-1 * var(--hue)));"
+          >Custom Badge</btu-badge
+        >
+      </div>
+    </div>`,parameters:{docs:{description:{story:`
+Badges support advanced customization through CSS properties and content composition:
+
+**With Icons and Images:** Place icon or image elements inside the badge along with your label text. Visual elements should always be placed before the label text.
+
+**Custom Shape:** The badge shape defaults to pill (rounded), but can be made rectangular by setting \`--badge-radius-size: 0px\`.
+
+**Custom Colors:** Override theme colors using \`--badge-color-background\` and \`--badge-color-foreground\` CSS properties. The foreground color controls the text color (and any child elements that inherit text color, such as the dot and icons). The background color controls the badge's background fill.`}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...i.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    variant: 'success',
+    size: 'lg'
+  },
+  render: args => html\`<a href="#" class="hover:text-primary inline-flex items-center gap-2 hover:underline">
+      Hover over me to see the
+      <btu-badge variant="\${args.variant}" size="\${args.size}">Linked Badge</btu-badge>
+      in action.
+    </a>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Badges inside anchor elements automatically handle underlines properly. The underline uses the badge background color instead of the default link color, ensuring proper visual hierarchy when badges are used within linked elements.\`
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <strong>With Icon:</strong>
+        <btu-badge variant="warning" size="md">
+          <div
+            aria-label="warning icon"
+            class="before:btu-icon before:btu-icon-md before:btu-icon-triangle-alert"
+          ></div>
+          Warning
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>With Image:</strong>
+        <btu-badge variant="primary" size="md">
+          <div
+            class="-ms-[--badge-px] aspect-square w-[20px] bg-cover bg-center bg-no-repeat [clipPath:circle(50%_at_center)]"
+            style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM1IDY1MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8ZyBpZD0idW5pb24iPg0KPHVzZSB5PSItLjIxNiIgeGxpbms6aHJlZj0iI3g0Ii8+DQo8dXNlIHhsaW5rOmhyZWY9IiN4NCIvPg0KPHVzZSB5PSIuMjE2IiB4bGluazpocmVmPSIjczYiLz4NCjwvZz4NCjxnIGlkPSJ4NCI+DQo8dXNlIHhsaW5rOmhyZWY9IiNzNiIvPg0KPHVzZSB5PSIuMDU0IiB4bGluazpocmVmPSIjczUiLz4NCjx1c2UgeT0iLjEwOCIgeGxpbms6aHJlZj0iI3M2Ii8+DQo8dXNlIHk9Ii4xNjIiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPC9nPg0KPGcgaWQ9InM1Ij4NCjx1c2UgeD0iLS4yNTIiIHhsaW5rOmhyZWY9IiNzdGFyIi8+DQo8dXNlIHg9Ii0uMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMjUyIiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InM2Ij4NCjx1c2UgeD0iLS4wNjMiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPHVzZSB4PSIuMzE1IiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InN0YXIiPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0ibWF0cml4KC0uODA5MDIgLS41ODc3OSAuNTg3NzkgLS44MDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIgdHJhbnNmb3JtPSJtYXRyaXgoLjMwOTAyIC0uOTUxMDYgLjk1MTA2IC4zMDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDcyKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDE0NCkiLz4NCjwvZz4NCjxwYXRoIGZpbGw9IiNmZmYiIGlkPSJwdCIgZD0iTS0uMTYyNSwwIDAtLjUgLjE2MjUsMHoiIHRyYW5zZm9ybT0ic2NhbGUoLjA2MTYpIi8+DQo8cGF0aCBmaWxsPSIjYmYwYTMwIiBpZD0ic3RyaXBlIiBkPSJtMCwwaDEyMzV2NTBoLTEyMzV6Ii8+DQo8L2RlZnM+DQo8cGF0aCBmaWxsPSIjZmZmIiBkPSJtMCwwaDEyMzV2NjUwaC0xMjM1eiIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjEwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSIyMDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iMzAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjQwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSI1MDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iNjAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8cGF0aCBmaWxsPSIjMDAyODY4IiBkPSJtMCwwaDQ5NHYzNTBoLTQ5NHoiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3VuaW9uIiB0cmFuc2Zvcm09Im1hdHJpeCg2NTAgMCAwIDY1MCAyNDcgMTc1KSIvPg0KPC9zdmc+DQo=')"
+            aria-label="Flag"
+          ></div>
+          United States
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>Rectangular Shape:</strong>
+        <btu-badge variant="success" size="md" style="--badge-radius-size: 0px">Rectangle</btu-badge>
+      </div>
+      <div class="story-custom-colors flex items-center gap-2">
+        <strong>Custom Colors:</strong>
+        <btu-badge
+          dot
+          variant="primary"
+          size="lg"
+          style="--badge-color-background: oklch(70% 0.3 var(--hue)); --badge-color-foreground: oklch(95% 0.1 calc(-1 * var(--hue)));"
+          >Custom Badge</btu-badge
+        >
+      </div>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+Badges support advanced customization through CSS properties and content composition:
+
+**With Icons and Images:** Place icon or image elements inside the badge along with your label text. Visual elements should always be placed before the label text.
+
+**Custom Shape:** The badge shape defaults to pill (rounded), but can be made rectangular by setting \\\`--badge-radius-size: 0px\\\`.
+
+**Custom Colors:** Override theme colors using \\\`--badge-color-background\\\` and \\\`--badge-color-foreground\\\` CSS properties. The foreground color controls the text color (and any child elements that inherit text color, such as the dot and icons). The background color controls the badge's background fill.\`
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};const b=["Default","InsideAnchor","AdvancedUsage"];export{r as AdvancedUsage,i as Default,t as InsideAnchor,b as __namedExportsOrder,u as default};

package/dist/storybook/assets/{Button.stories-BxwD2JsV.js → Button.stories-BJ7xYoAn.js}

@@ -1,4 +1,4 @@
-import{x as v}from"./iframe-D3S76tLX.js";import"./preload-helper-PPVm8Dsz.js";const I=({color:r="primary",pressed:a,fill:i,contained:c,outlined:l,size:d="sm",label:u,icon:b,hideText:p,disabled:m})=>{const g=i?"":"btu-button-fill-none",y=c?"":"btu-button-container-none",h=l?"btu-button-outline":"",f=p?"btu-button-text-hidden":"",x=b?["before:btu-icon","before:btu-icon-smile"]:[];return v`
+import{x as v}from"./iframe-DEAT_PRS.js";import"./preload-helper-PPVm8Dsz.js";const I=({color:r="primary",pressed:a,fill:i,contained:c,outlined:l,size:d="sm",label:u,icon:b,hideText:p,disabled:m})=>{const g=i?"":"btu-button-fill-none",y=c?"":"btu-button-container-none",h=l?"btu-button-outline":"",f=p?"btu-button-text-hidden":"",x=b?["before:btu-icon","before:btu-icon-smile"]:[];return v`
     <button
       type="button"
       class=${["btu-button",`btu-button-${r}`,`btu-button-${d}`,g,y,h,f,...x].join(" ")}