@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/badge/badge.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement, TemplateResult } from 'lit';
 import { BadgeStatus, BadgeSize, BadgeColor, RibbonPlacement } from './badge.types.js';
-declare const NrBadgeElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrBadgeElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * # Badge Component
  *
@@ -51,16 +51,17 @@ declare const NrBadgeElement_base: (new (...args: any[]) => import("@nuralyui/co
  *
  * @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
+ * @csspart indicator - The count or dot indicator bubble
+ * @csspart wrapper - The wrapper span that contains the slot and indicator (when children are present)
+ * @csspart status - The status dot container (status mode only)
+ * @csspart status-dot - The colored status indicator dot (status mode only)
+ * @csspart status-text - The label text shown alongside the status dot
+ * @csspart ribbon - The ribbon decoration element (ribbon mode only)
+ * @csspart ribbon-wrapper - The wrapper around slotted content in ribbon mode
  */
 export declare class NrBadgeElement extends NrBadgeElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * Number to show in badge
      */

package/dist/src/components/badge/badge.component.js

@@ -60,13 +60,13 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  *
  * @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
+ * @csspart indicator - The count or dot indicator bubble
+ * @csspart wrapper - The wrapper span that contains the slot and indicator (when children are present)
+ * @csspart status - The status dot container (status mode only)
+ * @csspart status-dot - The colored status indicator dot (status mode only)
+ * @csspart status-text - The label text shown alongside the status dot
+ * @csspart ribbon - The ribbon decoration element (ribbon mode only)
+ * @csspart ribbon-wrapper - The wrapper around slotted content in ribbon mode
  */
 let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -151,9 +151,9 @@ let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement)
      */
     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 part="status" class="badge-status">
+        <span part="status-dot" class="badge-status-dot ${this.status}"></span>
+        ${this.text ? html `<span part="status-text" class="badge-status-text">${this.text}</span>` : nothing}
       </span>
     `;
     }
@@ -168,9 +168,9 @@ let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement)
         };
         const ribbonStyle = this.getCustomColorStyle();
         return html `
-      <div class="badge-ribbon-wrapper">
+      <div part="ribbon-wrapper" class="badge-ribbon-wrapper">
         <slot></slot>
-        <div class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>
+        <div part="ribbon" class=${classMap(ribbonClasses)} style=${styleMap(ribbonStyle)}>
           ${this.ribbon}
         </div>
       </div>
@@ -180,7 +180,7 @@ let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement)
      * Render count/dot badge
      */
     renderCountBadge() {
-        const hasChildren = this.querySelector(':not([slot])') !== null;
+        const hasChildren = this.childNodes.length > 0;
         const isStandalone = !hasChildren;
         const isHidden = this.shouldHideBadge();
         const presetColors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green',
@@ -192,6 +192,7 @@ let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement)
         if (isStandalone) {
             return html `
         <span
+          part="indicator"
           class=${classMap(indicatorClasses)}
           style=${styleMap(indicatorStyle)}
           title=${this.badgeTitle || ''}
@@ -201,9 +202,10 @@ let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement)
       `;
         }
         return html `
-      <span class="badge-wrapper">
+      <span part="wrapper" class="badge-wrapper">
         <slot></slot>
         <span
+          part="indicator"
           class=${classMap(indicatorClasses)}
           style=${styleMap(indicatorStyle)}
           title=${this.badgeTitle || ''}
@@ -227,6 +229,7 @@ let NrBadgeElement = class NrBadgeElement extends NuralyUIBaseMixin(LitElement)
     }
 };
 NrBadgeElement.styles = styles;
+NrBadgeElement.useShadowDom = true;
 __decorate([
     property({ type: Number })
 ], NrBadgeElement.prototype, "count", void 0);

package/dist/src/components/badge/badge.style.d.ts

@@ -3,12 +3,5 @@
  * 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/dist/src/components/badge/badge.style.js

@@ -4,108 +4,87 @@
  * 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);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    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;
-    /* Temporarily disabled for demo - positions badge at exact corner */
-    /* 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);
+    min-width: 20px;
+    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);
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 20px;
     white-space: nowrap;
     text-align: center;
-    background-color: var(--nuraly-color-error, #ff4d4f);
+    background-color: #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;
+    box-shadow: 0 0 0 1px var(--nr-bg, #ffffff);
+    transition: all 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);
+    min-width: 14px;
+    height: 14px;
     padding: 0 4px;
-    font-size: var(--nuraly-badge-text-font-size-sm, 12px);
-    line-height: var(--nuraly-badge-indicator-height-sm, 14px);
+    font-size: 12px;
+    line-height: 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);
+    min-width: 6px;
+    width: 6px;
+    height: 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);
+    gap: 0.5rem;
   }
 
   .badge-status-dot {
-    width: var(--nuraly-badge-status-size, 6px);
-    height: var(--nuraly-badge-status-size, 6px);
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
     display: inline-block;
   }
 
   .badge-status-text {
-    color: var(--nuraly-color-text);
-    font-size: var(--nuraly-font-size-base, 14px);
+    color: var(--nr-text, #161616);
+    font-size: 14px;
   }
 
-  /* Status colors */
-  .badge-status-dot.success {
-    background-color: var(--nuraly-color-success, #52c41a);
-  }
+  .badge-status-dot.success { background-color: #52c41a; }
 
   .badge-status-dot.processing {
-    background-color: var(--nuraly-color-primary, #1890ff);
+    background-color: var(--nr-primary, #7c3aed);
     position: relative;
   }
 
@@ -116,35 +95,20 @@ export const styles = css `
     left: -1px;
     width: 100%;
     height: 100%;
-    border: 1px solid var(--nuraly-color-primary, #1890ff);
+    border: 1px solid var(--nr-primary, #7c3aed);
     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;
-    }
+    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.default { background-color: #8c8c8c; }
+  .badge-status-dot.error { background-color: #ff4d4f; }
+  .badge-status-dot.warning { background-color: #faad14; }
 
-  .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); }
@@ -159,32 +123,22 @@ export const styles = css `
   .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-wrapper { position: relative; }
 
   .badge-ribbon {
     position: absolute;
-    top: var(--nuraly-spacing-2, 0.5rem);
+    top: 0.5rem;
     height: 22px;
-    padding: 0 var(--nuraly-spacing-2, 0.5rem);
+    padding: 0 0.5rem;
     color: #fff;
     line-height: 22px;
     white-space: nowrap;
-    background-color: var(--nuraly-color-primary, #1890ff);
+    background-color: var(--nr-primary, #7c3aed);
     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.start { left: -0.25rem; padding-left: 0.5rem; }
+  .badge-ribbon.end { right: -0.25rem; padding-right: 0.5rem; }
 
   .badge-ribbon::after {
     content: '';
@@ -209,27 +163,22 @@ export const styles = css `
     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.pink { background-color: #eb2f96; }
+  .badge-ribbon.red { background-color: #f5222d; }
   .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.orange { background-color: #fa8c16; }
+  .badge-ribbon.cyan { background-color: #13c2c2; }
+  .badge-ribbon.green { background-color: #52c41a; }
+  .badge-ribbon.blue { background-color: #1890ff; }
+  .badge-ribbon.purple { background-color: #722ed1; }
+  .badge-ribbon.geekblue { background-color: #2f54eb; }
+  .badge-ribbon.magenta { background-color: #eb2f96; }
+  .badge-ribbon.volcano { background-color: #fa541c; }
   .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;
-  }
+  .badge-hidden { display: none; }
 
-  /* RTL Support */
   :host([dir="rtl"]) .badge-indicator {
     right: auto;
     left: 0;
@@ -237,14 +186,7 @@ export const styles = css `
     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));
-  }
+  :host([dir="rtl"]) .badge-ribbon.start { left: auto; right: -0.25rem; }
+  :host([dir="rtl"]) .badge-ribbon.end { right: auto; left: -0.25rem; }
 `;
 //# sourceMappingURL=badge.style.js.map