npm - @nuralyui/badge - Versions diffs - 0.0.1 - Mend

@nuralyui/badge 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/badge.component.d.ts ADDED Viewed

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, TemplateResult } from 'lit';
+import { BadgeStatus, BadgeSize, BadgeColor, RibbonPlacement } from './badge.types.js';
+declare const NrBadgeElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * # Badge Component
+ *
+ * Small numerical value or status descriptor for UI elements.
+ * Badge normally appears in proximity to notifications or user avatars with
+ * eye-catching appeal, typically displaying unread messages count.
+ *
+ * ## Features
+ * - Count badge with overflow support
+ * - Dot badge for simple indicators
+ * - Status badge with predefined states
+ * - Ribbon badge for decorative labels
+ * - Customizable colors (preset and custom)
+ * - Offset positioning
+ * - Show zero option
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic count badge -->
+ * <nr-badge count="5">
+ *   <button>Notifications</button>
+ * </nr-badge>
+ *
+ * <!-- Dot badge -->
+ * <nr-badge dot>
+ *   <nr-icon name="notification"></nr-icon>
+ * </nr-badge>
+ *
+ * <!-- Status badge -->
+ * <nr-badge status="success" text="Success"></nr-badge>
+ *
+ * <!-- Ribbon badge -->
+ * <nr-badge ribbon="Recommended">
+ *   <div class="card">Card content</div>
+ * </nr-badge>
+ *
+ * <!-- Standalone badge -->
+ * <nr-badge count="25"></nr-badge>
+ * ```
+ *
+ * @element nr-badge
+ *
+ * @slot - Content to wrap with badge (avatar, icon, etc.)
+ *
+ * @cssproperty --nuraly-badge-text-font-size - Font size of badge text
+ * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text
+ * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator
+ * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge
+ * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge
+ * @cssproperty --nuraly-badge-dot-size - Size of dot badge
+ * @cssproperty --nuraly-badge-status-size - Size of status indicator
+ */
+export declare class NrBadgeElement extends NrBadgeElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Number to show in badge
+     */
+    count?: number;
+    /**
+     * Whether to display a dot instead of count
+     */
+    dot: boolean;
+    /**
+     * Max count to show (shows count+ when exceeded)
+     */
+    overflowCount: number;
+    /**
+     * Whether to show badge when count is zero
+     */
+    showZero: boolean;
+    /**
+     * Set offset of the badge dot [x, y]
+     */
+    offset?: [number, number];
+    /**
+     * Badge color (preset or custom hex/rgb)
+     */
+    color?: BadgeColor | string;
+    /**
+     * Badge size
+     */
+    size: BadgeSize;
+    /**
+     * Set Badge as a status dot
+     */
+    status?: BadgeStatus;
+    /**
+     * Status text to display
+     */
+    text?: string;
+    /**
+     * Title to show on hover
+     */
+    badgeTitle?: string;
+    /**
+     * Ribbon text (enables ribbon mode)
+     */
+    ribbon?: string;
+    /**
+     * Ribbon placement
+     */
+    ribbonPlacement: RibbonPlacement;
+    /**
+     * Get the display count text
+     */
+    private getDisplayCount;
+    /**
+     * Check if badge should be hidden
+     */
+    private shouldHideBadge;
+    /**
+     * Get custom color style
+     */
+    private getCustomColorStyle;
+    /**
+     * Get offset style
+     */
+    private getOffsetStyle;
+    /**
+     * Render status badge
+     */
+    private renderStatusBadge;
+    /**
+     * Render ribbon badge
+     */
+    private renderRibbonBadge;
+    /**
+     * Render count/dot badge
+     */
+    private renderCountBadge;
+    render(): TemplateResult<1 | 2>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-badge': NrBadgeElement;
+    }
+}
+export {};
+//# sourceMappingURL=badge.component.d.ts.map

package/badge.component.js ADDED Viewed

@@ -0,0 +1,270 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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 { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { styles } from './badge.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+/**
+ * # Badge Component
+ *
+ * Small numerical value or status descriptor for UI elements.
+ * Badge normally appears in proximity to notifications or user avatars with
+ * eye-catching appeal, typically displaying unread messages count.
+ *
+ * ## Features
+ * - Count badge with overflow support
+ * - Dot badge for simple indicators
+ * - Status badge with predefined states
+ * - Ribbon badge for decorative labels
+ * - Customizable colors (preset and custom)
+ * - Offset positioning
+ * - Show zero option
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic count badge -->
+ * <nr-badge count="5">
+ *   <button>Notifications</button>
+ * </nr-badge>
+ *
+ * <!-- Dot badge -->
+ * <nr-badge dot>
+ *   <nr-icon name="notification"></nr-icon>
+ * </nr-badge>
+ *
+ * <!-- Status badge -->
+ * <nr-badge status="success" text="Success"></nr-badge>
+ *
+ * <!-- Ribbon badge -->
+ * <nr-badge ribbon="Recommended">
+ *   <div class="card">Card content</div>
+ * </nr-badge>
+ *
+ * <!-- Standalone badge -->
+ * <nr-badge count="25"></nr-badge>
+ * ```
+ *
+ * @element nr-badge
+ *
+ * @slot - Content to wrap with badge (avatar, icon, etc.)
+ *
+ * @cssproperty --nuraly-badge-text-font-size - Font size of badge text
+ * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text
+ * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator
+ * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge
+ * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge
+ * @cssproperty --nuraly-badge-dot-size - Size of dot badge
+ * @cssproperty --nuraly-badge-status-size - Size of status indicator
+ */
+let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to display a dot instead of count
+         */
+        this.dot = false;
+        /**
+         * Max count to show (shows count+ when exceeded)
+         */
+        this.overflowCount = 99;
+        /**
+         * Whether to show badge when count is zero
+         */
+        this.showZero = false;
+        /**
+         * Badge size
+         */
+        this.size = "default" /* BadgeSize.Default */;
+        /**
+         * Ribbon placement
+         */
+        this.ribbonPlacement = "end" /* RibbonPlacement.End */;
+    }
+    /**
+     * Get the display count text
+     */
+    getDisplayCount() {
+        if (this.count === undefined)
+            return '';
+        const count = Number(this.count);
+        if (count > this.overflowCount) {
+            return `${this.overflowCount}+`;
+        }
+        return String(count);
+    }
+    /**
+     * Check if badge should be hidden
+     */
+    shouldHideBadge() {
+        if (this.dot)
+            return false;
+        if (this.count === undefined)
+            return true;
+        if (this.count === 0 && !this.showZero)
+            return true;
+        return false;
+    }
+    /**
+     * Get custom color style
+     */
+    getCustomColorStyle() {
+        if (!this.color)
+            return {};
+        // Preset colors are handled via CSS classes
+        const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green',
+            'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
+        const isCustomColor = !presetColors.includes(this.color);
+        if (isCustomColor) {
+            return {
+                backgroundColor: this.color,
+                color: '#fff'
+            };
+        }
+        return {};
+    }
+    /**
+     * Get offset style
+     */
+    getOffsetStyle() {
+        if (!this.offset)
+            return {};
+        const [x, y] = this.offset;
+        return {
+            right: `calc(0px - ${x}px)`,
+            top: `${y}px`,
+        };
+    }
+    /**
+     * Render status badge
+     */
+    renderStatusBadge() {
+        return html `
+      <span class="badge-status">
+        <span class="badge-status-dot ${this.status}"></span>
+        ${this.text ? html `<span class="badge-status-text">${this.text}</span>` : nothing}
+      </span>
+    `;
+    }
+    /**
+     * Render ribbon badge
+     */
+    renderRibbonBadge() {
+        const ribbonClasses = {
+            'badge-ribbon': true,
+            [this.ribbonPlacement]: true,
+            [this.color || '']: !!this.color,
+        };
+        const ribbonStyle = this.getCustomColorStyle();
+        return html `
+      <div class="badge-ribbon-wrapper">
+        <slot></slot>
+        <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>
+          ${this.ribbon}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Render count/dot badge
+     */
+    renderCountBadge() {
+        const hasChildren = this.querySelector(':not([slot])') !== null;
+        const isStandalone = !hasChildren;
+        const isHidden = this.shouldHideBadge();
+        const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green',
+            'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
+        const isPresetColor = this.color && presetColors.includes(this.color);
+        const indicatorClasses = Object.assign({ 'badge-indicator': true, 'badge-standalone': isStandalone, 'badge-hidden': isHidden, 'dot': this.dot, 'small': this.size === "small" /* BadgeSize.Small */ }, (this.color && isPresetColor ? { [this.color]: true } : {}));
+        const indicatorStyle = Object.assign(Object.assign({}, this.getCustomColorStyle()), this.getOffsetStyle());
+        const badgeContent = this.dot ? nothing : this.getDisplayCount();
+        if (isStandalone) {
+            return html `
+        <span
+          class=${classMap(indicatorClasses)}
+          style=${styleMap(indicatorStyle)}
+          title=${this.badgeTitle || ''}
+        >
+          ${badgeContent}
+        </span>
+      `;
+        }
+        return html `
+      <span class="badge-wrapper">
+        <slot></slot>
+        <span
+          class=${classMap(indicatorClasses)}
+          style=${styleMap(indicatorStyle)}
+          title=${this.badgeTitle || ''}
+        >
+          ${badgeContent}
+        </span>
+      </span>
+    `;
+    }
+    render() {
+        // Ribbon mode
+        if (this.ribbon) {
+            return this.renderRibbonBadge();
+        }
+        // Status mode
+        if (this.status) {
+            return this.renderStatusBadge();
+        }
+        // Count/Dot mode
+        return this.renderCountBadge();
+    }
+};
+NrBadgeElement.styles = styles;
+__decorate([
+    property({ type: Number })
+], NrBadgeElement.prototype, "count", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrBadgeElement.prototype, "dot", void 0);
+__decorate([
+    property({ type: Number, attribute: 'overflow-count' })
+], NrBadgeElement.prototype, "overflowCount", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-zero' })
+], NrBadgeElement.prototype, "showZero", void 0);
+__decorate([
+    property({ type: Array })
+], NrBadgeElement.prototype, "offset", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "status", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "badgeTitle", void 0);
+__decorate([
+    property({ type: String })
+], NrBadgeElement.prototype, "ribbon", void 0);
+__decorate([
+    property({ type: String, attribute: 'ribbon-placement' })
+], NrBadgeElement.prototype, "ribbonPlacement", void 0);
+NrBadgeElement = __decorate([
+    customElement('nr-badge')
+], NrBadgeElement);
+export { NrBadgeElement };
+//# sourceMappingURL=badge.component.js.map

package/badge.component.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"badge.component.js","sourceRoot":"","sources":["../../../src/components/badge/badge.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './badge.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n BadgeStatus,\n BadgeSize,\n BadgeColor,\n RibbonPlacement\n} from './badge.types.js';\n\n/**\n * # Badge Component\n * \n * Small numerical value or status descriptor for UI elements.\n * Badge normally appears in proximity to notifications or user avatars with\n * eye-catching appeal, typically displaying unread messages count.\n * \n * ## Features\n * - Count badge with overflow support\n * - Dot badge for simple indicators\n * - Status badge with predefined states\n * - Ribbon badge for decorative labels\n * - Customizable colors (preset and custom)\n * - Offset positioning\n * - Show zero option\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * \n * <nr-badge count=\"5\">\n * <button>Notifications</button>\n * </nr-badge>\n * \n * \n * <nr-badge dot>\n * <nr-icon name=\"notification\"></nr-icon>\n * </nr-badge>\n * \n * \n * <nr-badge status=\"success\" text=\"Success\"></nr-badge>\n * \n * \n * <nr-badge ribbon=\"Recommended\">\n * <div class=\"card\">Card content</div>\n * </nr-badge>\n * \n * \n * <nr-badge count=\"25\"></nr-badge>\n * ```\n * \n * @element nr-badge\n * \n * @slot - Content to wrap with badge (avatar, icon, etc.)\n * \n * @cssproperty --nuraly-badge-text-font-size - Font size of badge text\n * @cssproperty --nuraly-badge-text-font-weight - Font weight of badge text\n * @cssproperty --nuraly-badge-indicator-height - Height of badge indicator\n * @cssproperty --nuraly-badge-indicator-height-sm - Height of small badge\n * @cssproperty --nuraly-badge-indicator-z-index - Z-index of badge\n * @cssproperty --nuraly-badge-dot-size - Size of dot badge\n * @cssproperty --nuraly-badge-status-size - Size of status indicator\n */\n@customElement('nr-badge')\nexport class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Number to show in badge\n */\n @property({ type: Number })\n count?: number;\n\n /**\n * Whether to display a dot instead of count\n */\n @property({ type: Boolean })\n dot = false;\n\n /**\n * Max count to show (shows count+ when exceeded)\n */\n @property({ type: Number, attribute: 'overflow-count' })\n overflowCount = 99;\n\n /**\n * Whether to show badge when count is zero\n */\n @property({ type: Boolean, attribute: 'show-zero' })\n showZero = false;\n\n /**\n * Set offset of the badge dot [x, y]\n */\n @property({ type: Array })\n offset?: [number, number];\n\n /**\n * Badge color (preset or custom hex/rgb)\n */\n @property({ type: String })\n color?: BadgeColor | string;\n\n /**\n * Badge size\n */\n @property({ type: String })\n size: BadgeSize = BadgeSize.Default;\n\n /**\n * Set Badge as a status dot\n */\n @property({ type: String })\n status?: BadgeStatus;\n\n /**\n * Status text to display\n */\n @property({ type: String })\n text?: string;\n\n /**\n * Title to show on hover\n */\n @property({ type: String })\n badgeTitle?: string;\n\n /**\n * Ribbon text (enables ribbon mode)\n */\n @property({ type: String })\n ribbon?: string;\n\n /**\n * Ribbon placement\n */\n @property({ type: String, attribute: 'ribbon-placement' })\n ribbonPlacement: RibbonPlacement = RibbonPlacement.End;\n\n /**\n * Get the display count text\n */\n private getDisplayCount(): string {\n if (this.count === undefined) return '';\n \n const count = Number(this.count);\n if (count > this.overflowCount) {\n return `${this.overflowCount}+`;\n }\n return String(count);\n }\n\n /**\n * Check if badge should be hidden\n */\n private shouldHideBadge(): boolean {\n if (this.dot) return false;\n if (this.count === undefined) return true;\n if (this.count === 0 && !this.showZero) return true;\n return false;\n }\n\n /**\n * Get custom color style\n */\n private getCustomColorStyle(): Record<string, string> {\n if (!this.color) return {};\n \n // Preset colors are handled via CSS classes\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isCustomColor = !presetColors.includes(this.color);\n \n if (isCustomColor) {\n return {\n backgroundColor: this.color,\n color: '#fff'\n };\n }\n \n return {};\n }\n\n /**\n * Get offset style\n */\n private getOffsetStyle(): Record<string, string> {\n if (!this.offset) return {};\n \n const [x, y] = this.offset;\n return {\n right: `calc(0px - ${x}px)`,\n top: `${y}px`,\n };\n }\n\n /**\n * Render status badge\n */\n private renderStatusBadge(): TemplateResult {\n return html`\n <span class=\"badge-status\">\n <span class=\"badge-status-dot ${this.status}\"></span>\n ${this.text ? html`<span class=\"badge-status-text\">${this.text}</span>` : nothing}\n </span>\n `;\n }\n\n /**\n * Render ribbon badge\n */\n private renderRibbonBadge(): TemplateResult {\n const ribbonClasses = {\n 'badge-ribbon': true,\n [this.ribbonPlacement]: true,\n [this.color || '']: !!this.color,\n };\n\n const ribbonStyle = this.getCustomColorStyle();\n\n return html`\n <div class=\"badge-ribbon-wrapper\">\n <slot></slot>\n <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>\n ${this.ribbon}\n </div>\n </div>\n `;\n }\n\n /**\n * Render count/dot badge\n */\n private renderCountBadge(): TemplateResult {\n const hasChildren = this.querySelector(':not([slot])') !== null;\n const isStandalone = !hasChildren;\n const isHidden = this.shouldHideBadge();\n\n const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', \n 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];\n const isPresetColor = this.color && presetColors.includes(this.color);\n\n const indicatorClasses = {\n 'badge-indicator': true,\n 'badge-standalone': isStandalone,\n 'badge-hidden': isHidden,\n 'dot': this.dot,\n 'small': this.size === BadgeSize.Small,\n ...(this.color && isPresetColor ? { [this.color]: true } : {}),\n };\n\n const indicatorStyle = {\n ...this.getCustomColorStyle(),\n ...this.getOffsetStyle(),\n };\n\n const badgeContent = this.dot ? nothing : this.getDisplayCount();\n\n if (isStandalone) {\n return html`\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n `;\n }\n\n return html`\n <span class=\"badge-wrapper\">\n <slot></slot>\n <span\n class=${classMap(indicatorClasses)}\n style=${styleMap(indicatorStyle)}\n title=${this.badgeTitle || ''}\n >\n ${badgeContent}\n </span>\n </span>\n `;\n }\n\n override render() {\n // Ribbon mode\n if (this.ribbon) {\n return this.renderRibbonBadge();\n }\n\n // Status mode\n if (this.status) {\n return this.renderStatusBadge();\n }\n\n // Count/Dot mode\n return this.renderCountBadge();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-badge': NrBadgeElement;\n }\n}\n"]}

package/badge.style.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Badge component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-badge component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=badge.style.d.ts.map

package/badge.style.js ADDED Viewed

@@ -0,0 +1,249 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * Badge component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-badge component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export const styles = css `
+  :host {
+    display: inline-block;
+    position: relative;
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-badge-text-font-size, 12px);
+    line-height: 1;
+    vertical-align: middle;
+  }
+  /* Badge wrapper for positioning */
+  .badge-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  /* Main badge indicator (count or dot) */
+  .badge-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
+    z-index: var(--nuraly-badge-indicator-z-index, auto);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--nuraly-badge-indicator-height, 20px);
+    height: var(--nuraly-badge-indicator-height, 20px);
+    padding: 0 6px;
+    font-size: var(--nuraly-badge-text-font-size, 12px);
+    font-weight: var(--nuraly-badge-text-font-weight, normal);
+    line-height: var(--nuraly-badge-indicator-height, 20px);
+    white-space: nowrap;
+    text-align: center;
+    background-color: var(--nuraly-color-error, #ff4d4f);
+    color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px var(--nuraly-color-background, #fff);
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+  }
+  /* Small size badge */
+  .badge-indicator.small {
+    min-width: var(--nuraly-badge-indicator-height-sm, 14px);
+    height: var(--nuraly-badge-indicator-height-sm, 14px);
+    padding: 0 4px;
+    font-size: var(--nuraly-badge-text-font-size-sm, 12px);
+    line-height: var(--nuraly-badge-indicator-height-sm, 14px);
+    border-radius: 7px;
+  }
+  /* Dot badge (small indicator without count) */
+  .badge-indicator.dot {
+    min-width: var(--nuraly-badge-dot-size, 6px);
+    width: var(--nuraly-badge-dot-size, 6px);
+    height: var(--nuraly-badge-dot-size, 6px);
+    padding: 0;
+    border-radius: 50%;
+  }
+  /* Standalone badge (no children) */
+  .badge-standalone {
+    position: relative;
+    display: inline-block;
+    transform: none;
+  }
+  /* Status badge styles */
+  .badge-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2, 0.5rem);
+  }
+  .badge-status-dot {
+    width: var(--nuraly-badge-status-size, 6px);
+    height: var(--nuraly-badge-status-size, 6px);
+    border-radius: 50%;
+    display: inline-block;
+  }
+  .badge-status-text {
+    color: var(--nuraly-color-text);
+    font-size: var(--nuraly-font-size-base, 14px);
+  }
+  /* Status colors */
+  .badge-status-dot.success {
+    background-color: var(--nuraly-color-success, #52c41a);
+  }
+  .badge-status-dot.processing {
+    background-color: var(--nuraly-color-primary, #1890ff);
+    position: relative;
+  }
+  .badge-status-dot.processing::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--nuraly-color-primary, #1890ff);
+    border-radius: 50%;
+    animation: badge-processing 1.2s infinite ease-in-out;
+  }
+  @keyframes badge-processing {
+    0% {
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(2.4);
+      opacity: 0;
+    }
+  }
+  .badge-status-dot.default {
+    background-color: var(--nuraly-color-text-secondary, #8c8c8c);
+  }
+  .badge-status-dot.error {
+    background-color: var(--nuraly-color-error, #ff4d4f);
+  }
+  .badge-status-dot.warning {
+    background-color: var(--nuraly-color-warning, #faad14);
+  }
+  /* Color variants for badge indicator */
+  .badge-indicator.pink { background-color: #eb2f96; }
+  .badge-indicator.red { background-color: #f5222d; }
+  .badge-indicator.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
+  .badge-indicator.orange { background-color: #fa8c16; }
+  .badge-indicator.cyan { background-color: #13c2c2; }
+  .badge-indicator.green { background-color: #52c41a; }
+  .badge-indicator.blue { background-color: #1890ff; }
+  .badge-indicator.purple { background-color: #722ed1; }
+  .badge-indicator.geekblue { background-color: #2f54eb; }
+  .badge-indicator.magenta { background-color: #eb2f96; }
+  .badge-indicator.volcano { background-color: #fa541c; }
+  .badge-indicator.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
+  .badge-indicator.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
+  /* Ribbon badge styles */
+  .badge-ribbon-wrapper {
+    position: relative;
+  }
+  .badge-ribbon {
+    position: absolute;
+    top: var(--nuraly-spacing-2, 0.5rem);
+    height: 22px;
+    padding: 0 var(--nuraly-spacing-2, 0.5rem);
+    color: #fff;
+    line-height: 22px;
+    white-space: nowrap;
+    background-color: var(--nuraly-color-primary, #1890ff);
+    border-radius: 2px;
+  }
+  .badge-ribbon.start {
+    left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+    padding-left: var(--nuraly-spacing-2, 0.5rem);
+  }
+  .badge-ribbon.end {
+    right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+    padding-right: var(--nuraly-spacing-2, 0.5rem);
+  }
+  .badge-ribbon::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+  }
+  .badge-ribbon.start::after {
+    left: 0;
+    border-top-color: currentColor;
+    border-left-color: currentColor;
+    filter: brightness(0.7);
+  }
+  .badge-ribbon.end::after {
+    right: 0;
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+    filter: brightness(0.7);
+  }
+  /* Ribbon color variants */
+  .badge-ribbon.pink { background-color: #eb2f96; color: #fff; }
+  .badge-ribbon.red { background-color: #f5222d; color: #fff; }
+  .badge-ribbon.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
+  .badge-ribbon.orange { background-color: #fa8c16; color: #fff; }
+  .badge-ribbon.cyan { background-color: #13c2c2; color: #fff; }
+  .badge-ribbon.green { background-color: #52c41a; color: #fff; }
+  .badge-ribbon.blue { background-color: #1890ff; color: #fff; }
+  .badge-ribbon.purple { background-color: #722ed1; color: #fff; }
+  .badge-ribbon.geekblue { background-color: #2f54eb; color: #fff; }
+  .badge-ribbon.magenta { background-color: #eb2f96; color: #fff; }
+  .badge-ribbon.volcano { background-color: #fa541c; color: #fff; }
+  .badge-ribbon.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
+  .badge-ribbon.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
+  /* Hidden state */
+  .badge-hidden {
+    display: none;
+  }
+  /* RTL Support */
+  :host([dir="rtl"]) .badge-indicator {
+    right: auto;
+    left: 0;
+    transform: translate(-50%, -50%);
+    transform-origin: 0% 0%;
+  }
+  :host([dir="rtl"]) .badge-ribbon.start {
+    left: auto;
+    right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+  }
+  :host([dir="rtl"]) .badge-ribbon.end {
+    right: auto;
+    left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+  }
+`;
+//# sourceMappingURL=badge.style.js.map

package/badge.style.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"badge.style.js","sourceRoot":"","sources":["../../../src/components/badge/badge.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0OxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\n/**\n * Badge component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-badge component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--nuraly-font-family);\n font-size: var(--nuraly-badge-text-font-size, 12px);\n line-height: 1;\n vertical-align: middle;\n }\n\n /* Badge wrapper for positioning */\n .badge-wrapper {\n position: relative;\n display: inline-block;\n }\n\n /* Main badge indicator (count or dot) */\n .badge-indicator {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n transform-origin: 100% 0%;\n z-index: var(--nuraly-badge-indicator-z-index, auto);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--nuraly-badge-indicator-height, 20px);\n height: var(--nuraly-badge-indicator-height, 20px);\n padding: 0 6px;\n font-size: var(--nuraly-badge-text-font-size, 12px);\n font-weight: var(--nuraly-badge-text-font-weight, normal);\n line-height: var(--nuraly-badge-indicator-height, 20px);\n white-space: nowrap;\n text-align: center;\n background-color: var(--nuraly-color-error, #ff4d4f);\n color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 0 1px var(--nuraly-color-background, #fff);\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n\n /* Small size badge */\n .badge-indicator.small {\n min-width: var(--nuraly-badge-indicator-height-sm, 14px);\n height: var(--nuraly-badge-indicator-height-sm, 14px);\n padding: 0 4px;\n font-size: var(--nuraly-badge-text-font-size-sm, 12px);\n line-height: var(--nuraly-badge-indicator-height-sm, 14px);\n border-radius: 7px;\n }\n\n /* Dot badge (small indicator without count) */\n .badge-indicator.dot {\n min-width: var(--nuraly-badge-dot-size, 6px);\n width: var(--nuraly-badge-dot-size, 6px);\n height: var(--nuraly-badge-dot-size, 6px);\n padding: 0;\n border-radius: 50%;\n }\n\n /* Standalone badge (no children) */\n .badge-standalone {\n position: relative;\n display: inline-block;\n transform: none;\n }\n\n /* Status badge styles */\n .badge-status {\n display: inline-flex;\n align-items: center;\n gap: var(--nuraly-spacing-2, 0.5rem);\n }\n\n .badge-status-dot {\n width: var(--nuraly-badge-status-size, 6px);\n height: var(--nuraly-badge-status-size, 6px);\n border-radius: 50%;\n display: inline-block;\n }\n\n .badge-status-text {\n color: var(--nuraly-color-text);\n font-size: var(--nuraly-font-size-base, 14px);\n }\n\n /* Status colors */\n .badge-status-dot.success {\n background-color: var(--nuraly-color-success, #52c41a);\n }\n\n .badge-status-dot.processing {\n background-color: var(--nuraly-color-primary, #1890ff);\n position: relative;\n }\n\n .badge-status-dot.processing::after {\n content: '';\n position: absolute;\n top: -1px;\n left: -1px;\n width: 100%;\n height: 100%;\n border: 1px solid var(--nuraly-color-primary, #1890ff);\n border-radius: 50%;\n animation: badge-processing 1.2s infinite ease-in-out;\n }\n\n @keyframes badge-processing {\n 0% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 100% {\n transform: scale(2.4);\n opacity: 0;\n }\n }\n\n .badge-status-dot.default {\n background-color: var(--nuraly-color-text-secondary, #8c8c8c);\n }\n\n .badge-status-dot.error {\n background-color: var(--nuraly-color-error, #ff4d4f);\n }\n\n .badge-status-dot.warning {\n background-color: var(--nuraly-color-warning, #faad14);\n }\n\n /* Color variants for badge indicator */\n .badge-indicator.pink { background-color: #eb2f96; }\n .badge-indicator.red { background-color: #f5222d; }\n .badge-indicator.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }\n .badge-indicator.orange { background-color: #fa8c16; }\n .badge-indicator.cyan { background-color: #13c2c2; }\n .badge-indicator.green { background-color: #52c41a; }\n .badge-indicator.blue { background-color: #1890ff; }\n .badge-indicator.purple { background-color: #722ed1; }\n .badge-indicator.geekblue { background-color: #2f54eb; }\n .badge-indicator.magenta { background-color: #eb2f96; }\n .badge-indicator.volcano { background-color: #fa541c; }\n .badge-indicator.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }\n .badge-indicator.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }\n\n /* Ribbon badge styles */\n .badge-ribbon-wrapper {\n position: relative;\n }\n\n .badge-ribbon {\n position: absolute;\n top: var(--nuraly-spacing-2, 0.5rem);\n height: 22px;\n padding: 0 var(--nuraly-spacing-2, 0.5rem);\n color: #fff;\n line-height: 22px;\n white-space: nowrap;\n background-color: var(--nuraly-color-primary, #1890ff);\n border-radius: 2px;\n }\n\n .badge-ribbon.start {\n left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n padding-left: var(--nuraly-spacing-2, 0.5rem);\n }\n\n .badge-ribbon.end {\n right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n padding-right: var(--nuraly-spacing-2, 0.5rem);\n }\n\n .badge-ribbon::after {\n content: '';\n position: absolute;\n top: 100%;\n width: 0;\n height: 0;\n border: 4px solid transparent;\n }\n\n .badge-ribbon.start::after {\n left: 0;\n border-top-color: currentColor;\n border-left-color: currentColor;\n filter: brightness(0.7);\n }\n\n .badge-ribbon.end::after {\n right: 0;\n border-top-color: currentColor;\n border-right-color: currentColor;\n filter: brightness(0.7);\n }\n\n /* Ribbon color variants */\n .badge-ribbon.pink { background-color: #eb2f96; color: #fff; }\n .badge-ribbon.red { background-color: #f5222d; color: #fff; }\n .badge-ribbon.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }\n .badge-ribbon.orange { background-color: #fa8c16; color: #fff; }\n .badge-ribbon.cyan { background-color: #13c2c2; color: #fff; }\n .badge-ribbon.green { background-color: #52c41a; color: #fff; }\n .badge-ribbon.blue { background-color: #1890ff; color: #fff; }\n .badge-ribbon.purple { background-color: #722ed1; color: #fff; }\n .badge-ribbon.geekblue { background-color: #2f54eb; color: #fff; }\n .badge-ribbon.magenta { background-color: #eb2f96; color: #fff; }\n .badge-ribbon.volcano { background-color: #fa541c; color: #fff; }\n .badge-ribbon.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }\n .badge-ribbon.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }\n\n /* Hidden state */\n .badge-hidden {\n display: none;\n }\n\n /* RTL Support */\n :host([dir=\"rtl\"]) .badge-indicator {\n right: auto;\n left: 0;\n transform: translate(-50%, -50%);\n transform-origin: 0% 0%;\n }\n\n :host([dir=\"rtl\"]) .badge-ribbon.start {\n left: auto;\n right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n }\n\n :host([dir=\"rtl\"]) .badge-ribbon.end {\n right: auto;\n left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));\n }\n`;\n"]}

package/badge.types.d.ts ADDED Viewed

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Badge status types for status indicators
+ */
+export declare const enum BadgeStatus {
+    Success = "success",
+    Processing = "processing",
+    Default = "default",
+    Error = "error",
+    Warning = "warning"
+}
+/**
+ * Badge size variants
+ */
+export declare const enum BadgeSize {
+    Default = "default",
+    Small = "small"
+}
+/**
+ * Badge color presets
+ */
+export declare const enum BadgeColor {
+    Pink = "pink",
+    Red = "red",
+    Yellow = "yellow",
+    Orange = "orange",
+    Cyan = "cyan",
+    Green = "green",
+    Blue = "blue",
+    Purple = "purple",
+    Geekblue = "geekblue",
+    Magenta = "magenta",
+    Volcano = "volcano",
+    Gold = "gold",
+    Lime = "lime"
+}
+/**
+ * Ribbon placement options
+ */
+export declare const enum RibbonPlacement {
+    Start = "start",
+    End = "end"
+}
+/**
+ * Badge configuration interface
+ */
+export interface BadgeConfig {
+    /** Number to show in badge */
+    count?: number | string;
+    /** Whether to display a dot instead of count */
+    dot?: boolean;
+    /** Max count to show (shows count+ when exceeded) */
+    overflowCount?: number;
+    /** Whether to show badge when count is zero */
+    showZero?: boolean;
+    /** Set offset of the badge dot [x, y] */
+    offset?: [number, number];
+    /** Badge color (preset or custom hex/rgb) */
+    color?: BadgeColor | string;
+    /** Badge size */
+    size?: BadgeSize;
+    /** Set Badge as a status dot */
+    status?: BadgeStatus;
+    /** Status text to display */
+    text?: string;
+    /** Title to show on hover */
+    title?: string;
+}
+/**
+ * Ribbon badge configuration
+ */
+export interface RibbonConfig {
+    /** Content inside the ribbon */
+    text: string;
+    /** Ribbon color (preset or custom) */
+    color?: BadgeColor | string;
+    /** Placement of the ribbon */
+    placement?: RibbonPlacement;
+}
+//# sourceMappingURL=badge.types.d.ts.map

package/badge.types.js ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=badge.types.js.map

package/badge.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"badge.types.js","sourceRoot":"","sources":["../../../src/components/badge/badge.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Badge status types for status indicators\n */\nexport const enum BadgeStatus {\n Success = 'success',\n Processing = 'processing',\n Default = 'default',\n Error = 'error',\n Warning = 'warning',\n}\n\n/**\n * Badge size variants\n */\nexport const enum BadgeSize {\n Default = 'default',\n Small = 'small',\n}\n\n/**\n * Badge color presets\n */\nexport const enum BadgeColor {\n Pink = 'pink',\n Red = 'red',\n Yellow = 'yellow',\n Orange = 'orange',\n Cyan = 'cyan',\n Green = 'green',\n Blue = 'blue',\n Purple = 'purple',\n Geekblue = 'geekblue',\n Magenta = 'magenta',\n Volcano = 'volcano',\n Gold = 'gold',\n Lime = 'lime',\n}\n\n/**\n * Ribbon placement options\n */\nexport const enum RibbonPlacement {\n Start = 'start',\n End = 'end',\n}\n\n/**\n * Badge configuration interface\n */\nexport interface BadgeConfig {\n /** Number to show in badge */\n count?: number | string;\n \n /** Whether to display a dot instead of count */\n dot?: boolean;\n \n /** Max count to show (shows count+ when exceeded) */\n overflowCount?: number;\n \n /** Whether to show badge when count is zero */\n showZero?: boolean;\n \n /** Set offset of the badge dot [x, y] */\n offset?: [number, number];\n \n /** Badge color (preset or custom hex/rgb) */\n color?: BadgeColor | string;\n \n /** Badge size */\n size?: BadgeSize;\n \n /** Set Badge as a status dot */\n status?: BadgeStatus;\n \n /** Status text to display */\n text?: string;\n \n /** Title to show on hover */\n title?: string;\n}\n\n/**\n * Ribbon badge configuration\n */\nexport interface RibbonConfig {\n /** Content inside the ribbon */\n text: string;\n \n /** Ribbon color (preset or custom) */\n color?: BadgeColor | string;\n \n /** Placement of the ribbon */\n placement?: RibbonPlacement;\n}\n"]}

package/bundle.js ADDED Viewed

@@ -0,0 +1,337 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=window,i=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e=Symbol(),s=new WeakMap;class o{constructor(t,i,s){if(this._$cssResult$=!0,s!==e)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=i}get styleSheet(){let t=this.o;const e=this.t;if(i&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=s.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&s.set(e,t))}return t}toString(){return this.cssText}}const r=i?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let i="";for(const e of t.cssRules)i+=e.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,e))(i)})(t):t
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */;var n;const a=window,l=a.trustedTypes,h=l?l.emptyScript:"",d=a.reactiveElementPolyfillSupport,c={toAttribute(t,i){switch(i){case Boolean:t=t?h:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let e=t;switch(i){case Boolean:e=null!==t;break;case Number:e=null===t?null:Number(t);break;case Object:case Array:try{e=JSON.parse(t)}catch(t){e=null}}return e}},u=(t,i)=>i!==t&&(i==i||t==t),v={attribute:!0,type:String,converter:c,reflect:!1,hasChanged:u},g="finalized";class b extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu()}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,e)=>{const s=this._$Ep(e,i);void 0!==s&&(this._$Ev.set(s,e),t.push(s))})),t}static createProperty(t,i=v){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const e="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,e,i);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,i,e){return{get(){return this[i]},set(s){const o=this[t];this[i]=s,this.requestUpdate(t,o,e)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||v}static finalize(){if(this.hasOwnProperty(g))return!1;this[g]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const e of i)this.createProperty(e,t[e])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const i=[];if(Array.isArray(t)){const e=new Set(t.flat(1/0).reverse());for(const t of e)i.unshift(r(t))}else void 0!==t&&i.push(r(t));return i}static _$Ep(t,i){const e=i.attribute;return!1===e?void 0:"string"==typeof e?e:"string"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,e;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(e=t.hostConnected)||void 0===e||e.call(t))}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i])}))}createRenderRoot(){var e;const s=null!==(e=this.shadowRoot)&&void 0!==e?e:this.attachShadow(this.constructor.shadowRootOptions);return((e,s)=>{i?e.adoptedStyleSheets=s.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):s.forEach((i=>{const s=document.createElement("style"),o=t.litNonce;void 0!==o&&s.setAttribute("nonce",o),s.textContent=i.cssText,e.appendChild(s)}))})(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,e){this._$AK(t,e)}_$EO(t,i,e=v){var s;const o=this.constructor._$Ep(t,e);if(void 0!==o&&!0===e.reflect){const r=(void 0!==(null===(s=e.converter)||void 0===s?void 0:s.toAttribute)?e.converter:c).toAttribute(i,e.type);this._$El=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$El=null}}_$AK(t,i){var e;const s=this.constructor,o=s._$Ev.get(t);if(void 0!==o&&this._$El!==o){const t=s.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(e=t.converter)||void 0===e?void 0:e.fromAttribute)?t.converter:c;this._$El=o,this[o]=r.fromAttribute(i,t.type),this._$El=null}}requestUpdate(t,i,e){let s=!0;void 0!==t&&(((e=e||this.constructor.getPropertyOptions(t)).hasChanged||u)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===e.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,e))):s=!1),!this.isUpdatePending&&s&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const e=this._$AL;try{i=this.shouldUpdate(e),i?(this.willUpdate(e),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(e)):this._$Ek()}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(e)}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var f;b[g]=!0,b.elementProperties=new Map,b.elementStyles=[],b.shadowRootOptions={mode:"open"},null==d||d({ReactiveElement:b}),(null!==(n=a.reactiveElementVersions)&&void 0!==n?n:a.reactiveElementVersions=[]).push("1.6.3");const p=window,y=p.trustedTypes,m=y?y.createPolicy("lit-html",{createHTML:t=>t}):void 0,w="$lit$",$=`lit$${(Math.random()+"").slice(9)}$`,x="?"+$,k=`<${x}>`,S=document,A=()=>S.createComment(""),C=t=>null===t||"object"!=typeof t&&"function"!=typeof t,E=Array.isArray,_="[ \t\n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,O=/>/g,T=RegExp(`>|${_}(?:([^\\s"'>=/]+)(${_}*=${_}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),M=/'/g,R=/"/g,U=/^(?:script|style|textarea|title)$/i,N=Symbol.for("lit-noChange"),D=Symbol.for("lit-nothing"),P=new WeakMap,I=S.createTreeWalker(S,129,null,!1);function B(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==m?m.createHTML(i):i}class L{constructor({strings:t,_$litType$:i},e){let s;this.parts=[];let o=0,r=0;const n=t.length-1,a=this.parts,[l,h]=((t,i)=>{const e=t.length-1,s=[];let o,r=2===i?"<svg>":"",n=j;for(let i=0;i<e;i++){const e=t[i];let a,l,h=-1,d=0;for(;d<e.length&&(n.lastIndex=d,l=n.exec(e),null!==l);)d=n.lastIndex,n===j?"!--"===l[1]?n=z:void 0!==l[1]?n=O:void 0!==l[2]?(U.test(l[2])&&(o=RegExp("</"+l[2],"g")),n=T):void 0!==l[3]&&(n=T):n===T?">"===l[0]?(n=null!=o?o:j,h=-1):void 0===l[1]?h=-2:(h=n.lastIndex-l[2].length,a=l[1],n=void 0===l[3]?T:'"'===l[3]?R:M):n===R||n===M?n=T:n===z||n===O?n=j:(n=T,o=void 0);const c=n===T&&t[i+1].startsWith("/>")?" ":"";r+=n===j?e+k:h>=0?(s.push(a),e.slice(0,h)+w+e.slice(h)+$+c):e+$+(-2===h?(s.push(void 0),i):c)}return[B(t,r+(t[e]||"<?>")+(2===i?"</svg>":"")),s]})(t,i);if(this.el=L.createElement(l,e),I.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(s=I.nextNode())&&a.length<n;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const i of s.getAttributeNames())if(i.endsWith(w)||i.startsWith($)){const e=h[r++];if(t.push(i),void 0!==e){const t=s.getAttribute(e.toLowerCase()+w).split($),i=/([.?@])?(.*)/.exec(e);a.push({type:1,index:o,name:i[2],strings:t,ctor:"."===i[1]?V:"?"===i[1]?F:"@"===i[1]?J:q})}else a.push({type:6,index:o})}for(const i of t)s.removeAttribute(i)}if(U.test(s.tagName)){const t=s.textContent.split($),i=t.length-1;if(i>0){s.textContent=y?y.emptyScript:"";for(let e=0;e<i;e++)s.append(t[e],A()),I.nextNode(),a.push({type:2,index:++o});s.append(t[i],A())}}}else if(8===s.nodeType)if(s.data===x)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf($,t+1));)a.push({type:7,index:o}),t+=$.length-1}o++}}static createElement(t,i){const e=S.createElement("template");return e.innerHTML=t,e}}function H(t,i,e=t,s){var o,r,n,a;if(i===N)return i;let l=void 0!==s?null===(o=e._$Co)||void 0===o?void 0:o[s]:e._$Cl;const h=C(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==h&&(null===(r=null==l?void 0:l._$AO)||void 0===r||r.call(l,!1),void 0===h?l=void 0:(l=new h(t),l._$AT(t,e,s)),void 0!==s?(null!==(n=(a=e)._$Co)&&void 0!==n?n:a._$Co=[])[s]=l:e._$Cl=l),void 0!==l&&(i=H(t,l._$AS(t,i.values),l,s)),i}class K{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:e},parts:s}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:S).importNode(e,!0);I.currentNode=o;let r=I.nextNode(),n=0,a=0,l=s[0];for(;void 0!==l;){if(n===l.index){let i;2===l.type?i=new Z(r,r.nextSibling,this,t):1===l.type?i=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(i=new G(r,this,t)),this._$AV.push(i),l=s[++a]}n!==(null==l?void 0:l.index)&&(r=I.nextNode(),n++)}return I.currentNode=S,o}v(t){let i=0;for(const e of this._$AV)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class Z{constructor(t,i,e,s){var o;this.type=2,this._$AH=D,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=s,this._$Cp=null===(o=null==s?void 0:s.isConnected)||void 0===o||o}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=H(this,t,i),C(t)?t===D||null==t||""===t?(this._$AH!==D&&this._$AR(),this._$AH=D):t!==this._$AH&&t!==N&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>E(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==D&&C(this._$AH)?this._$AA.nextSibling.data=t:this.$(S.createTextNode(t)),this._$AH=t}g(t){var i;const{values:e,_$litType$:s}=t,o="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=L.createElement(B(s.h,s.h[0]),this.options)),s);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(e);else{const t=new K(o,this),i=t.u(this.options);t.v(e),this.$(i),this._$AH=t}}_$AC(t){let i=P.get(t.strings);return void 0===i&&P.set(t.strings,i=new L(t)),i}T(t){E(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,s=0;for(const o of t)s===i.length?i.push(e=new Z(this.k(A()),this.k(A()),this,this.options)):e=i[s],e._$AI(o),s++;s<i.length&&(this._$AR(e&&e._$AB.nextSibling,s),i.length=s)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class q{constructor(t,i,e,s,o){this.type=1,this._$AH=D,this._$AN=void 0,this.element=t,this.name=i,this._$AM=s,this.options=o,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=D}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,s){const o=this.strings;let r=!1;if(void 0===o)t=H(this,t,i,0),r=!C(t)||t!==this._$AH&&t!==N,r&&(this._$AH=t);else{const s=t;let n,a;for(t=o[0],n=0;n<o.length-1;n++)a=H(this,s[e+n],i,n),a===N&&(a=this._$AH[n]),r||(r=!C(a)||a!==this._$AH[n]),a===D?t=D:t!==D&&(t+=(null!=a?a:"")+o[n+1]),this._$AH[n]=a}r&&!s&&this.j(t)}j(t){t===D?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class V extends q{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===D?void 0:t}}const W=y?y.emptyScript:"";class F extends q{constructor(){super(...arguments),this.type=4}j(t){t&&t!==D?this.element.setAttribute(this.name,W):this.element.removeAttribute(this.name)}}class J extends q{constructor(t,i,e,s,o){super(t,i,e,s,o),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=H(this,t,i,0))&&void 0!==e?e:D)===N)return;const s=this._$AH,o=t===D&&s!==D||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==D&&(s===D||o);o&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class G{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){H(this,t)}}const Q=p.litHtmlPolyfillSupport;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var X;null==Q||Q(L,Z),(null!==(f=p.litHtmlVersions)&&void 0!==f?f:p.litHtmlVersions=[]).push("2.8.0");const Y=window,tt=Y.trustedTypes,it=tt?tt.createPolicy("lit-html",{createHTML:t=>t}):void 0,et="$lit$",st=`lit$${(Math.random()+"").slice(9)}$`,ot="?"+st,rt=`<${ot}>`,nt=document,at=()=>nt.createComment(""),lt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,ht=Array.isArray,dt="[ \t\n\f\r]",ct=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ut=/-->/g,vt=/>/g,gt=RegExp(`>|${dt}(?:([^\\s"'>=/]+)(${dt}*=${dt}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),bt=/'/g,ft=/"/g,pt=/^(?:script|style|textarea|title)$/i,yt=(t=>(i,...e)=>({_$litType$:t,strings:i,values:e}))(1),mt=Symbol.for("lit-noChange"),wt=Symbol.for("lit-nothing"),$t=new WeakMap,xt=nt.createTreeWalker(nt,129,null,!1);function kt(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==it?it.createHTML(i):i}const St=(t,i)=>{const e=t.length-1,s=[];let o,r=2===i?"<svg>":"",n=ct;for(let i=0;i<e;i++){const e=t[i];let a,l,h=-1,d=0;for(;d<e.length&&(n.lastIndex=d,l=n.exec(e),null!==l);)d=n.lastIndex,n===ct?"!--"===l[1]?n=ut:void 0!==l[1]?n=vt:void 0!==l[2]?(pt.test(l[2])&&(o=RegExp("</"+l[2],"g")),n=gt):void 0!==l[3]&&(n=gt):n===gt?">"===l[0]?(n=null!=o?o:ct,h=-1):void 0===l[1]?h=-2:(h=n.lastIndex-l[2].length,a=l[1],n=void 0===l[3]?gt:'"'===l[3]?ft:bt):n===ft||n===bt?n=gt:n===ut||n===vt?n=ct:(n=gt,o=void 0);const c=n===gt&&t[i+1].startsWith("/>")?" ":"";r+=n===ct?e+rt:h>=0?(s.push(a),e.slice(0,h)+et+e.slice(h)+st+c):e+st+(-2===h?(s.push(void 0),i):c)}return[kt(t,r+(t[e]||"<?>")+(2===i?"</svg>":"")),s]};class At{constructor({strings:t,_$litType$:i},e){let s;this.parts=[];let o=0,r=0;const n=t.length-1,a=this.parts,[l,h]=St(t,i);if(this.el=At.createElement(l,e),xt.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(s=xt.nextNode())&&a.length<n;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const i of s.getAttributeNames())if(i.endsWith(et)||i.startsWith(st)){const e=h[r++];if(t.push(i),void 0!==e){const t=s.getAttribute(e.toLowerCase()+et).split(st),i=/([.?@])?(.*)/.exec(e);a.push({type:1,index:o,name:i[2],strings:t,ctor:"."===i[1]?zt:"?"===i[1]?Tt:"@"===i[1]?Mt:jt})}else a.push({type:6,index:o})}for(const i of t)s.removeAttribute(i)}if(pt.test(s.tagName)){const t=s.textContent.split(st),i=t.length-1;if(i>0){s.textContent=tt?tt.emptyScript:"";for(let e=0;e<i;e++)s.append(t[e],at()),xt.nextNode(),a.push({type:2,index:++o});s.append(t[i],at())}}}else if(8===s.nodeType)if(s.data===ot)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf(st,t+1));)a.push({type:7,index:o}),t+=st.length-1}o++}}static createElement(t,i){const e=nt.createElement("template");return e.innerHTML=t,e}}function Ct(t,i,e=t,s){var o,r,n,a;if(i===mt)return i;let l=void 0!==s?null===(o=e._$Co)||void 0===o?void 0:o[s]:e._$Cl;const h=lt(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==h&&(null===(r=null==l?void 0:l._$AO)||void 0===r||r.call(l,!1),void 0===h?l=void 0:(l=new h(t),l._$AT(t,e,s)),void 0!==s?(null!==(n=(a=e)._$Co)&&void 0!==n?n:a._$Co=[])[s]=l:e._$Cl=l),void 0!==l&&(i=Ct(t,l._$AS(t,i.values),l,s)),i}class Et{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:e},parts:s}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:nt).importNode(e,!0);xt.currentNode=o;let r=xt.nextNode(),n=0,a=0,l=s[0];for(;void 0!==l;){if(n===l.index){let i;2===l.type?i=new _t(r,r.nextSibling,this,t):1===l.type?i=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(i=new Rt(r,this,t)),this._$AV.push(i),l=s[++a]}n!==(null==l?void 0:l.index)&&(r=xt.nextNode(),n++)}return xt.currentNode=nt,o}v(t){let i=0;for(const e of this._$AV)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class _t{constructor(t,i,e,s){var o;this.type=2,this._$AH=wt,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=s,this._$Cp=null===(o=null==s?void 0:s.isConnected)||void 0===o||o}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=Ct(this,t,i),lt(t)?t===wt||null==t||""===t?(this._$AH!==wt&&this._$AR(),this._$AH=wt):t!==this._$AH&&t!==mt&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>ht(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==wt&&lt(this._$AH)?this._$AA.nextSibling.data=t:this.$(nt.createTextNode(t)),this._$AH=t}g(t){var i;const{values:e,_$litType$:s}=t,o="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=At.createElement(kt(s.h,s.h[0]),this.options)),s);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(e);else{const t=new Et(o,this),i=t.u(this.options);t.v(e),this.$(i),this._$AH=t}}_$AC(t){let i=$t.get(t.strings);return void 0===i&&$t.set(t.strings,i=new At(t)),i}T(t){ht(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,s=0;for(const o of t)s===i.length?i.push(e=new _t(this.k(at()),this.k(at()),this,this.options)):e=i[s],e._$AI(o),s++;s<i.length&&(this._$AR(e&&e._$AB.nextSibling,s),i.length=s)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class jt{constructor(t,i,e,s,o){this.type=1,this._$AH=wt,this._$AN=void 0,this.element=t,this.name=i,this._$AM=s,this.options=o,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=wt}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,s){const o=this.strings;let r=!1;if(void 0===o)t=Ct(this,t,i,0),r=!lt(t)||t!==this._$AH&&t!==mt,r&&(this._$AH=t);else{const s=t;let n,a;for(t=o[0],n=0;n<o.length-1;n++)a=Ct(this,s[e+n],i,n),a===mt&&(a=this._$AH[n]),r||(r=!lt(a)||a!==this._$AH[n]),a===wt?t=wt:t!==wt&&(t+=(null!=a?a:"")+o[n+1]),this._$AH[n]=a}r&&!s&&this.j(t)}j(t){t===wt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class zt extends jt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===wt?void 0:t}}const Ot=tt?tt.emptyScript:"";class Tt extends jt{constructor(){super(...arguments),this.type=4}j(t){t&&t!==wt?this.element.setAttribute(this.name,Ot):this.element.removeAttribute(this.name)}}class Mt extends jt{constructor(t,i,e,s,o){super(t,i,e,s,o),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=Ct(this,t,i,0))&&void 0!==e?e:wt)===mt)return;const s=this._$AH,o=t===wt&&s!==wt||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==wt&&(s===wt||o);o&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class Rt{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){Ct(this,t)}}const Ut=Y.litHtmlPolyfillSupport;null==Ut||Ut(At,_t),(null!==(X=Y.litHtmlVersions)&&void 0!==X?X:Y.litHtmlVersions=[]).push("2.8.0");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var Nt,Dt;class Pt extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,i;const e=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&&void 0!==t||(i.renderBefore=e.firstChild),e}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,i,e)=>{var s,o;const r=null!==(s=null==e?void 0:e.renderBefore)&&void 0!==s?s:i;let n=r._$litPart$;if(void 0===n){const t=null!==(o=null==e?void 0:e.renderBefore)&&void 0!==o?o:null;r._$litPart$=n=new _t(i.insertBefore(at(),t),t,void 0,null!=e?e:{})}return n._$AI(t),n})(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return mt}}Pt.finalized=!0,Pt._$litElement$=!0,null===(Nt=globalThis.litElementHydrateSupport)||void 0===Nt||Nt.call(globalThis,{LitElement:Pt});const It=globalThis.litElementPolyfillSupport;null==It||It({LitElement:Pt}),(null!==(Dt=globalThis.litElementVersions)&&void 0!==Dt?Dt:globalThis.litElementVersions=[]).push("3.3.3");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Bt=(t,i)=>"method"===i.kind&&i.descriptor&&!("value"in i.descriptor)?{...i,finisher(e){e.createProperty(i.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:i.key,initializer(){"function"==typeof i.initializer&&(this[i.key]=i.initializer.call(this))},finisher(e){e.createProperty(i.key,t)}};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function Lt(t){return(i,e)=>void 0!==e?((t,i,e)=>{i.constructor.createProperty(e,t)})(t,i,e):Bt(t,i)
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */}var Ht;null===(Ht=window.HTMLSlotElement)||void 0===Ht||Ht.prototype.assignedElements;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Kt=1,Zt=t=>(...i)=>({_$litDirective$:t,values:i});class qt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,e){this._$Ct=t,this._$AM=i,this._$Ci=e}_$AS(t,i){return this.update(t,i)}update(t,i){return this.render(...i)}}
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Vt=Zt(class extends qt{constructor(t){var i;if(super(t),t.type!==Kt||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var e,s;if(void 0===this.it){this.it=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(e=this.nt)||void 0===e?void 0:e.has(t))&&this.it.add(t);return this.render(i)}const o=t.element.classList;this.it.forEach((t=>{t in i||(o.remove(t),this.it.delete(t))}));for(const t in i){const e=!!i[t];e===this.it.has(t)||(null===(s=this.nt)||void 0===s?void 0:s.has(t))||(e?(o.add(t),this.it.add(t)):(o.remove(t),this.it.delete(t)))}return N}}),Wt="important",Ft=" !"+Wt,Jt=Zt(class extends qt{constructor(t){var i;if(super(t),t.type!==Kt||"style"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((i,e)=>{const s=t[e];return null==s?i:i+`${e=e.includes("-")?e:e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(t,[i]){const{style:e}=t.element;if(void 0===this.ht){this.ht=new Set;for(const t in i)this.ht.add(t);return this.render(i)}this.ht.forEach((t=>{null==i[t]&&(this.ht.delete(t),t.includes("-")?e.removeProperty(t):e[t]="")}));for(const t in i){const s=i[t];if(null!=s){this.ht.add(t);const i="string"==typeof s&&s.endsWith(Ft);t.includes("-")||i?e.setProperty(t,i?s.slice(0,-11):s,i?Wt:""):e[t]=s}}return N}}),Gt=((t,...i)=>{const s=1===t.length?t[0]:i.reduce(((i,e,s)=>i+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(e)+t[s+1]),t[0]);return new o(s,t,e)})`
+  :host {
+    display: inline-block;
+    position: relative;
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-badge-text-font-size, 12px);
+    line-height: 1;
+    vertical-align: middle;
+  }
+  /* Badge wrapper for positioning */
+  .badge-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  /* Main badge indicator (count or dot) */
+  .badge-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
+    z-index: var(--nuraly-badge-indicator-z-index, auto);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--nuraly-badge-indicator-height, 20px);
+    height: var(--nuraly-badge-indicator-height, 20px);
+    padding: 0 6px;
+    font-size: var(--nuraly-badge-text-font-size, 12px);
+    font-weight: var(--nuraly-badge-text-font-weight, normal);
+    line-height: var(--nuraly-badge-indicator-height, 20px);
+    white-space: nowrap;
+    text-align: center;
+    background-color: var(--nuraly-color-error, #ff4d4f);
+    color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px var(--nuraly-color-background, #fff);
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+  }
+  /* Small size badge */
+  .badge-indicator.small {
+    min-width: var(--nuraly-badge-indicator-height-sm, 14px);
+    height: var(--nuraly-badge-indicator-height-sm, 14px);
+    padding: 0 4px;
+    font-size: var(--nuraly-badge-text-font-size-sm, 12px);
+    line-height: var(--nuraly-badge-indicator-height-sm, 14px);
+    border-radius: 7px;
+  }
+  /* Dot badge (small indicator without count) */
+  .badge-indicator.dot {
+    min-width: var(--nuraly-badge-dot-size, 6px);
+    width: var(--nuraly-badge-dot-size, 6px);
+    height: var(--nuraly-badge-dot-size, 6px);
+    padding: 0;
+    border-radius: 50%;
+  }
+  /* Standalone badge (no children) */
+  .badge-standalone {
+    position: relative;
+    display: inline-block;
+    transform: none;
+  }
+  /* Status badge styles */
+  .badge-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2, 0.5rem);
+  }
+  .badge-status-dot {
+    width: var(--nuraly-badge-status-size, 6px);
+    height: var(--nuraly-badge-status-size, 6px);
+    border-radius: 50%;
+    display: inline-block;
+  }
+  .badge-status-text {
+    color: var(--nuraly-color-text);
+    font-size: var(--nuraly-font-size-base, 14px);
+  }
+  /* Status colors */
+  .badge-status-dot.success {
+    background-color: var(--nuraly-color-success, #52c41a);
+  }
+  .badge-status-dot.processing {
+    background-color: var(--nuraly-color-primary, #1890ff);
+    position: relative;
+  }
+  .badge-status-dot.processing::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--nuraly-color-primary, #1890ff);
+    border-radius: 50%;
+    animation: badge-processing 1.2s infinite ease-in-out;
+  }
+  @keyframes badge-processing {
+    0% {
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(2.4);
+      opacity: 0;
+    }
+  }
+  .badge-status-dot.default {
+    background-color: var(--nuraly-color-text-secondary, #8c8c8c);
+  }
+  .badge-status-dot.error {
+    background-color: var(--nuraly-color-error, #ff4d4f);
+  }
+  .badge-status-dot.warning {
+    background-color: var(--nuraly-color-warning, #faad14);
+  }
+  /* Color variants for badge indicator */
+  .badge-indicator.pink { background-color: #eb2f96; }
+  .badge-indicator.red { background-color: #f5222d; }
+  .badge-indicator.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
+  .badge-indicator.orange { background-color: #fa8c16; }
+  .badge-indicator.cyan { background-color: #13c2c2; }
+  .badge-indicator.green { background-color: #52c41a; }
+  .badge-indicator.blue { background-color: #1890ff; }
+  .badge-indicator.purple { background-color: #722ed1; }
+  .badge-indicator.geekblue { background-color: #2f54eb; }
+  .badge-indicator.magenta { background-color: #eb2f96; }
+  .badge-indicator.volcano { background-color: #fa541c; }
+  .badge-indicator.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
+  .badge-indicator.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
+  /* Ribbon badge styles */
+  .badge-ribbon-wrapper {
+    position: relative;
+  }
+  .badge-ribbon {
+    position: absolute;
+    top: var(--nuraly-spacing-2, 0.5rem);
+    height: 22px;
+    padding: 0 var(--nuraly-spacing-2, 0.5rem);
+    color: #fff;
+    line-height: 22px;
+    white-space: nowrap;
+    background-color: var(--nuraly-color-primary, #1890ff);
+    border-radius: 2px;
+  }
+  .badge-ribbon.start {
+    left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+    padding-left: var(--nuraly-spacing-2, 0.5rem);
+  }
+  .badge-ribbon.end {
+    right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+    padding-right: var(--nuraly-spacing-2, 0.5rem);
+  }
+  .badge-ribbon::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+  }
+  .badge-ribbon.start::after {
+    left: 0;
+    border-top-color: currentColor;
+    border-left-color: currentColor;
+    filter: brightness(0.7);
+  }
+  .badge-ribbon.end::after {
+    right: 0;
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+    filter: brightness(0.7);
+  }
+  /* Ribbon color variants */
+  .badge-ribbon.pink { background-color: #eb2f96; color: #fff; }
+  .badge-ribbon.red { background-color: #f5222d; color: #fff; }
+  .badge-ribbon.yellow { background-color: #fadb14; color: rgba(0, 0, 0, 0.85); }
+  .badge-ribbon.orange { background-color: #fa8c16; color: #fff; }
+  .badge-ribbon.cyan { background-color: #13c2c2; color: #fff; }
+  .badge-ribbon.green { background-color: #52c41a; color: #fff; }
+  .badge-ribbon.blue { background-color: #1890ff; color: #fff; }
+  .badge-ribbon.purple { background-color: #722ed1; color: #fff; }
+  .badge-ribbon.geekblue { background-color: #2f54eb; color: #fff; }
+  .badge-ribbon.magenta { background-color: #eb2f96; color: #fff; }
+  .badge-ribbon.volcano { background-color: #fa541c; color: #fff; }
+  .badge-ribbon.gold { background-color: #faad14; color: rgba(0, 0, 0, 0.85); }
+  .badge-ribbon.lime { background-color: #a0d911; color: rgba(0, 0, 0, 0.85); }
+  /* Hidden state */
+  .badge-hidden {
+    display: none;
+  }
+  /* RTL Support */
+  :host([dir="rtl"]) .badge-indicator {
+    right: auto;
+    left: 0;
+    transform: translate(-50%, -50%);
+    transform-origin: 0% 0%;
+  }
+  :host([dir="rtl"]) .badge-ribbon.start {
+    left: auto;
+    right: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+  }
+  :host([dir="rtl"]) .badge-ribbon.end {
+    right: auto;
+    left: calc(-1 * var(--nuraly-spacing-1, 0.25rem));
+  }
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,Qt=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,i,e;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(i=this.designSystemObserver)||void 0===i||i.disconnect(),null===(e=this.mediaQuery)||void 0===e||e.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,i;const e=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return e||((null===(i=window.matchMedia)||void 0===i?void 0:i.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const i=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===i?i:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver((()=>{this.requestUpdate()})),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver((()=>{this.requestUpdate()})),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},Xt=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},Yt=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(Xt())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!Xt())return!0;let i=!0;for(const e of this.requiredComponents)if(!this.isComponentAvailable(e)){i=!1;const s=new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(e,s):console.error(s.message)}return i}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter((t=>!this.isComponentAvailable(t)))}areDependenciesAvailable(){return this.requiredComponents.every((t=>this.isComponentAvailable(t)))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const i=this.requiredComponents.indexOf(t);i>-1&&this.requiredComponents.splice(i,1)}},ti=t=>class extends t{dispatchCustomEvent(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,i){var e;const s=Object.assign(Object.assign({},i),{timestamp:Date.now(),componentName:(null===(e=this.tagName)||void 0===e?void 0:e.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,originalEvent:i.originalEvent},i);this.dispatchCustomEvent(t,e)}dispatchFocusEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,focused:i.focused,cursorPosition:i.cursorPosition,selectedText:i.selectedText},i);this.dispatchCustomEvent(t,e)}dispatchValidationEvent(t,i){var e;const s=Object.assign({target:i.target||this,value:i.value,isValid:null!==(e=i.isValid)&&void 0!==e&&e,error:i.error},i);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,i){const e=Object.assign({target:i.target||this,action:i.action,previousValue:i.previousValue,newValue:i.newValue},i);this.dispatchCustomEvent(t,e)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}};
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var ii=function(t,i,e,s){for(var o,r=arguments.length,n=r<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(r<3?o(n):r>3?o(i,e,n):o(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};let ei=class extends((t=>Yt(Qt(ti(t))))(Pt)){constructor(){super(...arguments),this.dot=!1,this.overflowCount=99,this.showZero=!1,this.size="default",this.ribbonPlacement="end"}getDisplayCount(){if(void 0===this.count)return"";const t=Number(this.count);return t>this.overflowCount?`${this.overflowCount}+`:String(t)}shouldHideBadge(){return!this.dot&&(void 0===this.count||0===this.count&&!this.showZero)}getCustomColorStyle(){if(!this.color)return{};return!["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color)?{backgroundColor:this.color,color:"#fff"}:{}}getOffsetStyle(){if(!this.offset)return{};const[t,i]=this.offset;return{right:`calc(0px - ${t}px)`,top:`${i}px`}}renderStatusBadge(){return yt`
+      <span class="badge-status">
+        <span class="badge-status-dot ${this.status}"></span>
+        ${this.text?yt`<span class="badge-status-text">${this.text}</span>`:wt}
+      </span>
+    `}renderRibbonBadge(){const t={"badge-ribbon":!0,[this.ribbonPlacement]:!0,[this.color||""]:!!this.color},i=this.getCustomColorStyle();return yt`
+      <div class="badge-ribbon-wrapper">
+        <slot></slot>
+        <div class=${Vt(t)} style=${Jt(i)}>
+          ${this.ribbon}
+        </div>
+      </div>
+    `}renderCountBadge(){const t=!(null!==this.querySelector(":not([slot])")),i=this.shouldHideBadge(),e=this.color&&["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"].includes(this.color),s=Object.assign({"badge-indicator":!0,"badge-standalone":t,"badge-hidden":i,dot:this.dot,small:"small"===this.size},this.color&&e?{[this.color]:!0}:{}),o=Object.assign(Object.assign({},this.getCustomColorStyle()),this.getOffsetStyle()),r=this.dot?wt:this.getDisplayCount();return t?yt`
+        <span
+          class=${Vt(s)}
+          style=${Jt(o)}
+          title=${this.badgeTitle||""}
+        >
+          ${r}
+        </span>
+      `:yt`
+      <span class="badge-wrapper">
+        <slot></slot>
+        <span
+          class=${Vt(s)}
+          style=${Jt(o)}
+          title=${this.badgeTitle||""}
+        >
+          ${r}
+        </span>
+      </span>
+    `}render(){return this.ribbon?this.renderRibbonBadge():this.status?this.renderStatusBadge():this.renderCountBadge()}};ei.styles=Gt,ii([Lt({type:Number})],ei.prototype,"count",void 0),ii([Lt({type:Boolean})],ei.prototype,"dot",void 0),ii([Lt({type:Number,attribute:"overflow-count"})],ei.prototype,"overflowCount",void 0),ii([Lt({type:Boolean,attribute:"show-zero"})],ei.prototype,"showZero",void 0),ii([Lt({type:Array})],ei.prototype,"offset",void 0),ii([Lt({type:String})],ei.prototype,"color",void 0),ii([Lt({type:String})],ei.prototype,"size",void 0),ii([Lt({type:String})],ei.prototype,"status",void 0),ii([Lt({type:String})],ei.prototype,"text",void 0),ii([Lt({type:String})],ei.prototype,"badgeTitle",void 0),ii([Lt({type:String})],ei.prototype,"ribbon",void 0),ii([Lt({type:String,attribute:"ribbon-placement"})],ei.prototype,"ribbonPlacement",void 0),ei=ii([(t=>i=>"function"==typeof i?((t,i)=>(customElements.define(t,i),i))(t,i):((t,i)=>{const{kind:e,elements:s}=i;return{kind:e,elements:s,finisher(i){customElements.define(t,i)}}})(t,i))("nr-badge")],ei);export{ei as NrBadgeElement};

package/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './badge.component.js';
2	+ //# sourceMappingURL=index.d.ts.map

package/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './badge.component.js';
2	+ //# sourceMappingURL=index.js.map

package/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './badge.component.js';\n"]}

package/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+    "name": "@nuralyui/badge",
+    "version": "0.0.1",
+    "description": "Badge component for NuralyUI library",
+    "main": "index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "badge.bundled.js",
+        "bundle.js"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/NuralyUI/NuralyUI.git",
+        "directory": "src/components/badge"
+    },
+    "keywords": [
+        "badge",
+        "indicator",
+        "notification",
+        "count",
+        "status",
+        "ribbon",
+        "web-components",
+        "lit-element",
+        "nuralyui",
+        "ui-components"
+    ],
+    "author": "Nuraly, Laabidi Aymen",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/NuralyUI/NuralyUI/issues"
+    },
+    "homepage": "https://github.com/NuralyUI/NuralyUI#readme"
+}

package/react.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { NrBadgeElement } from './badge.component.js';
+export declare const NrBadge: import("@lit-labs/react").ReactWebComponent<NrBadgeElement, {}>;
+//# sourceMappingURL=react.d.ts.map

package/react.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrBadgeElement } from './badge.component.js';
+export const NrBadge = createComponent({
+    tagName: 'nr-badge',
+    elementClass: NrBadgeElement,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

package/react.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/badge/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrBadgeElement } from './badge.component.js';\nexport const NrBadge = createComponent({\n tagName: 'nr-badge',\n elementClass: NrBadgeElement,\n react: React,\n events: {},\n});\n"]}