@brightspot/ui 1.0.1-4 → 1.0.1-pr18.0

package/README.md

@@ -168,11 +168,15 @@ For local development and testing, use `yarn link` to create a symlink between t
    This registers the package globally on your system for linking.
 
 2. **In your consuming project directory:**
+
    ```sh
    yarn link @brightspot/ui
    ```
+
    This creates a symlink from your project's node_modules to the brightspot-ui package.
 
+   > **_Note_** Be sure this is done in the directory where the `package.json` file resides for the CMS UI. Currently that is at `/cms/tool-ui`. You will need to validate your changes via your locally running Brightspot Tool UI Webpack server. It will not work directly over Docker's Tomcat.
+
 #### Working with the linked package
 
 - From within _**this**_ module, run `yarn build` to ensure the `dist` folder is updated with your changes.
@@ -245,39 +249,6 @@ docs: update installation instructions
 chore(deps): upgrade tailwindcss to 3.4.0
 ```
 
-### Publishing
-
-#### Prerelease (Testing)
-
-For testing changes before a full release, create a prerelease version:
-
-```sh
-yarn version --prerelease
-npm publish --tag beta
-```
-
-This automatically increments the version with a prerelease identifier (e.g., `1.2.3-0`) and publishes it under the `beta` tag. Users can install prereleases with:
-
-```sh
-yarn add @brightspot/ui@beta
-```
-
-#### Full Release
-
-For a production release:
-
-```sh
-yarn version --patch  # for bug fixes
-# or
-yarn version --minor  # for new features
-# or
-yarn version --major  # for breaking changes
-
-npm publish
-```
-
-The `yarn version` command automatically updates the version number in package.json and creates a git commit and tag. Choose the appropriate version bump based on the type of changes you're releasing.
-
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## Frequently Asked Questions

package/custom-elements.json

@@ -0,0 +1,187 @@
+{
+  "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-pad-x"
+            },
+            {
+              "description": "Vertical padding (overrides size default)",
+              "name": "--badge-pad-y"
+            },
+            {
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "'pill' | 'rect'"
+              },
+              "default": "'pill'",
+              "description": "The shape of the badge.\n- 'pill': Pill shape (default)\n- 'rect': Rectangle shape",
+              "attribute": "shape"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Inherited from EventEmitterMixin, fired when element connects to DOM",
+              "name": "btu-brightspot-element-connected"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Inherited from EventEmitterMixin, fired when element disconnects from DOM",
+              "name": "btu-brightspot-element-disconnected"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{error: Error}>"
+              },
+              "description": "Inherited from EventEmitterMixin, fired on connection error",
+              "name": "btu-brightspot-element-error"
+            },
+            {
+              "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"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "'pill' | 'rect'"
+              },
+              "default": "'pill'",
+              "description": "The shape of the badge.\n- 'pill': Pill shape (default)\n- 'rect': Rectangle shape",
+              "fieldName": "shape",
+              "attribute": "shape"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/utils/EventEmitterMixin.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/LucideDynamicLoader.d.ts

@@ -0,0 +1,5 @@
+export declare function getIcon(iconName: string): {
+    compat: string;
+    iconSvg: string;
+} | undefined;
+//# sourceMappingURL=LucideDynamicLoader.d.ts.map

package/dist/LucideDynamicLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideDynamicLoader.d.ts","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM;;;cAiBvC"}

package/dist/LucideDynamicLoader.js

@@ -1,7 +1,7 @@
 import * as LucideIcons from 'lucide-static';
-import icons from 'lucide-static/font/info.json';
-import { kebabToPascal } from '../src/util/string';
-import { addNameSpaceXML, encodeSVG } from '../src/util/svg';
+import icons from 'lucide-static/font/info.json' with { type: 'json' };
+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();
@@ -19,3 +19,4 @@ export function getIcon(iconName) {
         console.error('Error loading Lucide icon ${iconName}:', e);
     }
 }
+//# sourceMappingURL=LucideDynamicLoader.js.map

package/dist/LucideDynamicLoader.js.map

@@ -0,0 +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,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'
-import { kebabToPascal } from '../src/util/string'
-import { addNameSpaceXML, encodeSVG } from '../src/util/svg'
+import icons from 'lucide-static/font/info.json' with { type: 'json' }
+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,83 @@
+import { LitElement } from 'lit';
+export interface BadgeProps {
+    variant?: 'info' | 'primary' | 'error' | 'success' | 'warning';
+    dot?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'pill' | 'rect';
+}
+declare const Badge_base: (new (...args: any[]) => import("../../utils/EventEmitterMixin.js").EventEmitterMixinInterface) & 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-brightspot-element-connected - Inherited from EventEmitterMixin, fired when element connects to DOM
+ * @fires {CustomEvent} btu-brightspot-element-disconnected - Inherited from EventEmitterMixin, fired when element disconnects from DOM
+ * @fires {CustomEvent<{error: Error}>} btu-brightspot-element-error - Inherited from EventEmitterMixin, fired on connection error
+ * @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-pad-x - Horizontal padding (overrides size default)
+ * @cssprop --badge-pad-y - 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;
+    /**
+     * The shape of the badge.
+     * - 'pill': Pill shape (default)
+     * - 'rect': Rectangle shape
+     * @attr
+     */
+    shape: 'pill' | 'rect';
+    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;AAItC,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;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAA6B;IAC9D;;;;;;;;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;;;;;OAKG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAS;IAE/B,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,121 @@
+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';
+/**
+ * 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-brightspot-element-connected - Inherited from EventEmitterMixin, fired when element connects to DOM
+ * @fires {CustomEvent} btu-brightspot-element-disconnected - Inherited from EventEmitterMixin, fired when element disconnects from DOM
+ * @fires {CustomEvent<{error: Error}>} btu-brightspot-element-error - Inherited from EventEmitterMixin, fired on connection error
+ * @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-pad-x - Horizontal padding (overrides size default)
+ * @cssprop --badge-pad-y - 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(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';
+        /**
+         * The shape of the badge.
+         * - 'pill': Pill shape (default)
+         * - 'rect': Rectangle shape
+         * @attr
+         */
+        this.shape = 'pill';
+    }
+    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 = [
+            'btu-badge',
+            `btu-badge-${this.size}`,
+            `btu-badge-${colorMap[this.variant]}`,
+            this.shape === 'rect' ? '[--badge-radius-size:0px]' : '',
+            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);
+__decorate([
+    property({ type: String })
+], Badge.prototype, "shape", 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;AASpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAhE;;QACE;;;;;;;;WAQG;QAEH,YAAO,GAAyD,MAAM,CAAA;QAEtE;;;WAGG;QAEH,QAAG,GAAG,KAAK,CAAA;QAEX;;;;;;WAMG;QAEH,SAAI,GAAG,IAAI,CAAA;QAEX;;;;;WAKG;QAEH,UAAK,GAAoB,MAAM,CAAA;IAkCjC,CAAC;IAhCC,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,WAAW;YACX,aAAa,IAAI,CAAC,IAAI,EAAE;YACxB,aAAa,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;YACxD,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;AA5DC;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;AASX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACI;AAoCjC,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/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-DEsdluIh.js

@@ -0,0 +1,121 @@
+import{g as m,x as o}from"./iframe-zcxd989B.js";import"./preload-helper-PPVm8Dsz.js";const{events:g,args:u,argTypes:i}=m("btu-badge"),I=["info","primary","error","success","warning"],h={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:g},controls:{expanded:!0}},args:{...u,variant:"success",dot:!1,size:"sm",shape:"pill",customForegroundColor:"",customBackgroundColor:"",customRadiusSize:"",customPadX:"",customPadY:"",customDotSize:""},argTypes:{...i,"--badge-color-foreground":{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-radius-size":{table:{disable:!0}},"--badge-pad-x":{table:{disable:!0}},"--badge-pad-y":{table:{disable:!0}},"--badge-dot-size":{table:{disable:!0}},variant:{...i.variant,control:{type:"select"},options:I},dot:{...i.dot,control:{type:"boolean"}},size:{...i.size,control:{type:"select"},options:["sm","md","lg"]},shape:{...i.shape,control:{type:"select"},options:["pill","rect"]},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-pad-x",control:{type:"text"},description:"Horizontal padding - overrides the size default",table:{category:"CSS Properties"}},customPadY:{name:"--badge-pad-y",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-pad-x: ${e.customPadX}`),e.customPadY&&a.push(`--badge-pad-y: ${e.customPadY}`),e.customDotSize&&a.push(`--badge-dot-size: ${e.customDotSize}`);const l=a.length>0?a.join("; "):"";return o`<btu-badge
+      variant="${e.variant}"
+      ?dot="${e.dot}"
+      size="${e.size}"
+      shape="${e.shape}"
+      style="${l}"
+      >Badge</btu-badge
+    >`}},t={args:{}},r={args:{variant:"primary",size:"lg",customBackgroundColor:"#dce34d",customForegroundColor:"#a04b4b"},parameters:{docs:{description:{story:"Badge supports custom colors using the CSS custom properties that override theme colors `--badge-color-background` and `--badge-color-foreground`."}}}},s={args:{variant:"success",size:"lg"},render:e=>o`<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."}}}},n={render:()=>o`<div class="flex items-center gap-4">
+      <btu-badge variant="primary" size="md" shape="pill">Pill</btu-badge>
+      <btu-badge variant="success" size="md" shape="rect">Rectangle</btu-badge>
+    </div>`,parameters:{docs:{description:{story:"Badges support two shape variants: pill (default with rounded ends) and rect (rectangle with square corners). A circle shape can be accomplished by using pill and setting equal width and height via custom CSS properties, but you should probably be using a notification component instead."}}}},c={args:{variant:"warning",size:"md",dot:!1},render:e=>o`<btu-badge variant="${e.variant}" size="${e.size}">
+      <div aria-label="warning icon" class="before:btu-icon before:btu-icon-md before:btu-icon-triangle-alert"></div>
+      Warning
+    </btu-badge>`,parameters:{docs:{description:{story:"Badges can have other children besides text. Place an icon element inside the badge along with your label text. The icon will automatically be placed to fit within the badge layout. Icons should always be placed before the label text."}}}},d={args:{variant:"primary",size:"md",dot:!1},render:e=>o`<btu-badge variant="${e.variant}" size="${e.size}">
+      <div
+        class="-ms-[--badge-pad-x] 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>`,parameters:{docs:{description:{story:"Badges can include images like avatars or flags. This example shows a flag icon rendered as a background image on a div element alongside label text."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    variant: 'primary',
+    size: 'lg',
+    customBackgroundColor: '#dce34d',
+    customForegroundColor: '#a04b4b'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Badge supports custom colors using the CSS custom properties that override theme colors \\\`--badge-color-background\\\` and \\\`--badge-color-foreground\\\`.\`
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.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.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex items-center gap-4">
+      <btu-badge variant="primary" size="md" shape="pill">Pill</btu-badge>
+      <btu-badge variant="success" size="md" shape="rect">Rectangle</btu-badge>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Badges support two shape variants: pill (default with rounded ends) and rect (rectangle with square corners). A circle shape can be accomplished by using pill and setting equal width and height via custom CSS properties, but you should probably be using a notification component instead.\`
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    variant: 'warning',
+    size: 'md',
+    dot: false
+  },
+  render: args => html\`<btu-badge variant="\${args.variant}" size="\${args.size}">
+      <div aria-label="warning icon" class="before:btu-icon before:btu-icon-md before:btu-icon-triangle-alert"></div>
+      Warning
+    </btu-badge>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Badges can have other children besides text. Place an icon element inside the badge along with your label text. The icon will automatically be placed to fit within the badge layout. Icons should always be placed before the label text.\`
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    variant: 'primary',
+    size: 'md',
+    dot: false
+  },
+  render: args => html\`<btu-badge variant="\${args.variant}" size="\${args.size}">
+      <div
+        class="-ms-[--badge-pad-x] 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>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Badges can include images like avatars or flags. This example shows a flag icon rendered as a background image on a div element alongside label text.\`
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const z=["Default","CustomColors","InsideAnchor","DifferentShapes","WithIcon","WithImage"];export{r as CustomColors,t as Default,n as DifferentShapes,s as InsideAnchor,c as WithIcon,d as WithImage,z as __namedExportsOrder,h as default};

package/dist/storybook/assets/{Button.stories-Cr7Qwtjy.js → Button.stories-gjqwP9Dd.js}

@@ -1,4 +1,4 @@
-import{x as v}from"./iframe-KLSeZXhG.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-zcxd989B.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(" ")}