@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/tag/bundle.js

@@ -1,44 +1,43 @@
-import{css as o,LitElement as r,html as a,nothing as t}from"lit";import{property as e,state as l,customElement as c}from"lit/decorators.js";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";
+import{css as e,html as t,nothing as o,LitElement as r}from"lit";import{property as s,state as i,customElement as n}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";
 /**
  * @license
  * Copyright 2025 Nuraly
  * SPDX-License-Identifier: MIT
- */const d=o`
+ */const l=e`
   :host { display: inline-block; }
 
   .tag {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-tag-gap, 6px);
-    height: var(--nuraly-tag-height, auto);
-    padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));
+    gap: 6px;
+    height: auto;
+    padding: 0px 8px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.75rem;
     line-height: 1;
-    color: var(--nuraly-tag-color, var(--nuraly-color-text));
-    background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));
-    border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));
-    border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));
-    transition: all var(--nuraly-transition-fast) ease;
+    color: var(--nr-text, #161616);
+    background-color: var(--nr-bg, #ffffff);
+    border: 1px solid var(--nr-border, #e0e0e0);
+    border-radius: 4px;
+    transition: all 0.15s ease;
     user-select: none;
   }
 
   .tag--borderless { border-color: transparent; }
 
   .tag--small {
-    padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);
-    font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));
+    padding: 0px 6px;
+    font-size: 0.625rem;
   }
 
-  /* Checkable behavior */
   .tag--checkable { cursor: pointer; }
   .tag--checkable:not(.tag--disabled):hover {
-    background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));
+    background-color: var(--nr-bg-hover, #f4f4f4);
   }
   .tag--checkable.tag--checked {
-    background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));
-    color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));
-    border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));
+    background-color: #e6f0ff;
+    color: #0353e9;
+    border-color: #a6c8ff;
   }
 
   .tag--disabled { opacity: 0.6; cursor: not-allowed; }
@@ -58,17 +57,15 @@ import{css as o,LitElement as r,html as a,nothing as t}from"lit";import{property
     background: transparent;
     color: currentColor;
     cursor: pointer;
-    border-radius: var(--nuraly-border-radius-xs);
-    transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;
+    border-radius: 2px;
+    transition: background-color 0.15s ease, opacity 0.15s ease;
   }
-  .tag__close:hover { background-color: var(--nuraly-color-background-hover); }
+  .tag__close:hover { background-color: var(--nr-bg-hover, #f4f4f4); }
   .tag__close:disabled { cursor: not-allowed; opacity: 0.6; }
 
-  /* Closing animation (height/opacity collapse) */
   @keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }
   .tag--closing { animation: tagFadeOut 0.2s ease forwards; }
 
-  /* Preset solid color tags similar to AntD */
   .tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }
   .tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }
   .tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }
@@ -81,28 +78,39 @@ import{css as o,LitElement as r,html as a,nothing as t}from"lit";import{property
   .tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }
   .tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }
 
-  /* Custom color tag hue via inline CSS variable */
-  .tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }
+  .tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: #fff; }
 `
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,d=e=>class extends e{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 e,t,o;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(o=this.mediaQuery)||void 0===o||o.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const o=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return o||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"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))}},h=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},u=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!h())return!0;let t=!0;for(const o of this.requiredComponents)if(!this.isComponentAvailable(o)){t=!1;const r=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(o,r):console.error(r.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},g=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var o;const r=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,r)}dispatchInputEvent(e,t){const o=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,o)}dispatchFocusEvent(e,t){const o=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,o)}dispatchValidationEvent(e,t){var o;const r=Object.assign({target:t.target||this,value:t.value,isValid:null!==(o=t.isValid)&&void 0!==o&&o,error:t.error},t);this.dispatchCustomEvent(e,r)}dispatchActionEvent(e,t){const o=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,o)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},f=new Set,b=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const p=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),o=e.styles;if(o){const e=m(o);e&&function(e,t,o){var r;if(!b.has(e)){const o=new CSSStyleSheet;o.replaceSync(t),b.set(e,o)}const s=b.get(e),i=`doc:${e}`;if(f.has(i)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],f.add(i)),o){let t=o;for(;t;){const o=t.getRootNode();if(!(o instanceof ShadowRoot))break;{const i=`shadow:${((null===(r=o.host)||void 0===r?void 0:r.tagName)||"").toLowerCase()}:${e}`;f.has(i)||(o.adoptedStyleSheets=[...o.adoptedStyleSheets,s],f.add(i)),t=o.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function m(e){return Array.isArray(e)?e.map(e=>m(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}
 /**
  * @license
  * Copyright 2025 Nuraly
  * SPDX-License-Identifier: MIT
- */;var g=function(o,r,a,t){for(var e,l=arguments.length,c=l<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,a):t,i=o.length-1;i>=0;i--)(e=o[i])&&(c=(l<3?e(c):l>3?e(r,a,c):e(r,a))||c);return l>3&&c&&Object.defineProperty(r,a,c),c};let u=class extends(n(r)){constructor(){super(...arguments),this.bordered=!0,this.size="default",this.closable=!1,this.checkable=!1,this.checked=!1,this.disabled=!1,this.closing=!1}connectedCallback(){super.connectedCallback(),this.lightDomObserver=new MutationObserver(()=>{this.requestUpdate()}),this.lightDomObserver.observe(this,{childList:!0,subtree:!1,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){var o;null===(o=this.lightDomObserver)||void 0===o||o.disconnect(),this.lightDomObserver=void 0,super.disconnectedCallback()}onCloseClick(o){o.stopPropagation(),this.closable&&!this.disabled&&(this.closing=!0,setTimeout(()=>{this.dispatchEvent(new CustomEvent("nr-tag-close",{bubbles:!0,composed:!0})),this.closing=!1},200))}onToggleChecked(){this.checkable&&!this.disabled&&(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-tag-checked-change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}isPreset(o){return!!o&&b.has(o)}render(){const o=!!this.querySelector('[slot="icon"]'),r=!!this.color&&!this.isPreset(this.color),e=Object.assign(Object.assign({tag:!0,"tag--small":"small"===this.size,"tag--borderless":!this.bordered,"tag--closable":this.closable,"tag--checkable":this.checkable,"tag--checked":this.checkable&&this.checked,"tag--disabled":this.disabled,"tag--closing":this.closing},this.color&&this.isPreset(this.color)?{[`tag--${this.color}`]:!0}:{}),{"tag--custom":r}),l={};r&&this.color&&(l["--nr-tag-custom-bg"]=this.color);const c=this.checkable?"switch":"button",n=this.checkable?this.checked?"true":"false":void 0;return a`
+ */var v=function(e,t,o,r){for(var s,i=arguments.length,n=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r,a=e.length-1;a>=0;a--)(s=e[a])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};let k=class extends((e=>u(d(g(p(e)))))(r)){constructor(){super(...arguments),this.bordered=!0,this.size="default",this.closable=!1,this.checkable=!1,this.checked=!1,this.disabled=!1,this.closing=!1}onCloseClick(e){e.stopPropagation(),this.closable&&!this.disabled&&(this.closing=!0,setTimeout(()=>{this.dispatchEvent(new CustomEvent("nr-tag-close",{bubbles:!0,composed:!0})),this.closing=!1},200))}onToggleChecked(){this.checkable&&!this.disabled&&(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-tag-checked-change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}isPreset(e){return!!e&&y.has(e)}render(){const e=null!==this.querySelector('[slot="icon"]'),r=!!this.color&&!this.isPreset(this.color),s=Object.assign(Object.assign({tag:!0,"tag--small":"small"===this.size,"tag--borderless":!this.bordered,"tag--closable":this.closable,"tag--checkable":this.checkable,"tag--checked":this.checkable&&this.checked,"tag--disabled":this.disabled,"tag--closing":this.closing},this.color&&this.isPreset(this.color)?{[`tag--${this.color}`]:!0}:{}),{"tag--custom":r}),i={};r&&this.color&&(i["--nr-tag-custom-bg"]=this.color);const n=this.checkable?"switch":"button",l=this.checkable?this.checked?"true":"false":void 0;return t`
       <span
-        class=${i(e)}
-        style=${Object.entries(l).map(([o,r])=>`${o}: ${r}`).join(";")}
-        role=${c}
-        aria-pressed=${s(n)}
+        part="tag"
+        class=${a(s)}
+        style=${Object.entries(i).map(([e,t])=>`${e}: ${t}`).join(";")}
+        role=${n}
+        aria-pressed=${c(l)}
         aria-disabled=${this.disabled?"true":"false"}
         @click=${this.checkable?this.onToggleChecked:void 0}
       >
-        ${o?a`<span class="tag__icon"><slot name="icon"></slot></span>`:t}
-        <span class="tag__content"><slot></slot></span>
-        ${this.closable?a`
+        ${e?t`<span part="icon" class="tag__icon"><slot name="icon"></slot></span>`:o}
+        <span part="content" class="tag__content"><slot></slot></span>
+        ${this.closable?t`
           <button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
             ×
           </button>
-        `:t}
+        `:o}
       </span>
-    `}};u.styles=d,g([e({type:String})],u.prototype,"color",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"bordered",void 0),g([e({type:String})],u.prototype,"size",void 0),g([e({type:Boolean})],u.prototype,"closable",void 0),g([e({type:Boolean})],u.prototype,"checkable",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"checked",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),g([l()],u.prototype,"closing",void 0),u=g([c("nr-tag")],u);const b=new Set(["magenta","red","volcano","orange","gold","lime","green","cyan","blue","geekblue","purple"]);export{u as NrTagElement};
+    `}};k.styles=l,k.useShadowDom=!0,v([s({type:String})],k.prototype,"color",void 0),v([s({type:Boolean,reflect:!0})],k.prototype,"bordered",void 0),v([s({type:String})],k.prototype,"size",void 0),v([s({type:Boolean})],k.prototype,"closable",void 0),v([s({type:Boolean})],k.prototype,"checkable",void 0),v([s({type:Boolean,reflect:!0})],k.prototype,"checked",void 0),v([s({type:Boolean,reflect:!0})],k.prototype,"disabled",void 0),v([i()],k.prototype,"closing",void 0),k=v([n("nr-tag")],k);const y=new Set(["magenta","red","volcano","orange","gold","lime","green","cyan","blue","geekblue","purple"]);export{k as NrTagElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { TagSize } from './tag.types.js';
-declare const NrTagElement_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 NrTagElement_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;
 /**
  * Tag component
  * Features:
@@ -14,15 +14,20 @@ declare const NrTagElement_base: (new (...args: any[]) => import("@nuralyui/comm
  * - Checkable tags with checked state and change event
  * - Small size variant
  * - Disabled state
- * - Theme-aware through CSS variables
  *
  * @slot - Tag content
  * @slot icon - Optional leading icon
  * @fires nr-tag-close - when the close icon is clicked
  * @fires nr-tag-checked-change - when a checkable tag toggles
+ *
+ * @csspart tag - The root span element of the tag
+ * @csspart icon - The wrapper span around the icon slot
+ * @csspart content - The span wrapping the default text slot
+ * @csspart close - The close button shown when closable is true
  */
 export declare class NrTagElement extends NrTagElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Tag color preset or custom color string (hex/rgb) */
     color?: string;
     /** Bordered style */
@@ -39,10 +44,6 @@ export declare class NrTagElement extends NrTagElement_base {
     disabled: boolean;
     /** Internal closing anim state */
     private closing;
-    /** Track if an icon is actually provided via slot */
-    private lightDomObserver?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     private onCloseClick;
     private onToggleChecked;
     private isPreset;

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

@@ -23,12 +23,16 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  * - Checkable tags with checked state and change event
  * - Small size variant
  * - Disabled state
- * - Theme-aware through CSS variables
  *
  * @slot - Tag content
  * @slot icon - Optional leading icon
  * @fires nr-tag-close - when the close icon is clicked
  * @fires nr-tag-checked-change - when a checkable tag toggles
+ *
+ * @csspart tag - The root span element of the tag
+ * @csspart icon - The wrapper span around the icon slot
+ * @csspart content - The span wrapping the default text slot
+ * @csspart close - The close button shown when closable is true
  */
 let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -48,21 +52,6 @@ let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
         /** Internal closing anim state */
         this.closing = false;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // Observe light DOM children to detect when an icon slot is added/removed dynamically
-        this.lightDomObserver = new MutationObserver(() => {
-            // Trigger re-render so we can recompute hasIcon in render()
-            this.requestUpdate();
-        });
-        this.lightDomObserver.observe(this, { childList: true, subtree: false, attributes: true, attributeFilter: ['slot'] });
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.lightDomObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.lightDomObserver = undefined;
-        super.disconnectedCallback();
-    }
     onCloseClick(e) {
         e.stopPropagation();
         if (!this.closable || this.disabled)
@@ -91,7 +80,7 @@ let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
         return PRESET_COLOR_SET.has(color);
     }
     render() {
-        const hasIcon = !!this.querySelector('[slot="icon"]');
+        const hasIcon = this.querySelector('[slot="icon"]') !== null;
         const isCustom = !!this.color && !this.isPreset(this.color);
         const classes = Object.assign(Object.assign({ tag: true, 'tag--small': this.size === "small" /* TagSize.Small */, 'tag--borderless': !this.bordered, 'tag--closable': this.closable, 'tag--checkable': this.checkable, 'tag--checked': this.checkable && this.checked, 'tag--disabled': this.disabled, 'tag--closing': this.closing }, (this.color && this.isPreset(this.color) ? { [`tag--${this.color}`]: true } : {})), { 
             // custom color modifier
@@ -104,6 +93,7 @@ let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
         const ariaPressed = this.checkable ? (this.checked ? 'true' : 'false') : undefined;
         return html `
       <span
+        part="tag"
         class=${classMap(classes)}
         style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}
         role=${role}
@@ -111,8 +101,8 @@ let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
         aria-disabled=${this.disabled ? 'true' : 'false'}
         @click=${this.checkable ? this.onToggleChecked : undefined}
       >
-        ${hasIcon ? html `<span class="tag__icon"><slot name="icon"></slot></span>` : nothing}
-        <span class="tag__content"><slot></slot></span>
+        ${hasIcon ? html `<span part="icon" class="tag__icon"><slot name="icon"></slot></span>` : nothing}
+        <span part="content" class="tag__content"><slot></slot></span>
         ${this.closable ? html `
           <button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
             ×
@@ -123,6 +113,7 @@ let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
     }
 };
 NrTagElement.styles = styles;
+NrTagElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrTagElement.prototype, "color", void 0);

package/dist/src/components/tag/tag.style.js

@@ -10,36 +10,35 @@ export const styles = css `
   .tag {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-tag-gap, 6px);
-    height: var(--nuraly-tag-height, auto);
-    padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));
+    gap: 6px;
+    height: auto;
+    padding: 0px 8px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.75rem;
     line-height: 1;
-    color: var(--nuraly-tag-color, var(--nuraly-color-text));
-    background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));
-    border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));
-    border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));
-    transition: all var(--nuraly-transition-fast) ease;
+    color: var(--nr-text, #161616);
+    background-color: var(--nr-bg, #ffffff);
+    border: 1px solid var(--nr-border, #e0e0e0);
+    border-radius: 4px;
+    transition: all 0.15s ease;
     user-select: none;
   }
 
   .tag--borderless { border-color: transparent; }
 
   .tag--small {
-    padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);
-    font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));
+    padding: 0px 6px;
+    font-size: 0.625rem;
   }
 
-  /* Checkable behavior */
   .tag--checkable { cursor: pointer; }
   .tag--checkable:not(.tag--disabled):hover {
-    background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));
+    background-color: var(--nr-bg-hover, #f4f4f4);
   }
   .tag--checkable.tag--checked {
-    background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));
-    color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));
-    border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));
+    background-color: #e6f0ff;
+    color: #0353e9;
+    border-color: #a6c8ff;
   }
 
   .tag--disabled { opacity: 0.6; cursor: not-allowed; }
@@ -59,17 +58,15 @@ export const styles = css `
     background: transparent;
     color: currentColor;
     cursor: pointer;
-    border-radius: var(--nuraly-border-radius-xs);
-    transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;
+    border-radius: 2px;
+    transition: background-color 0.15s ease, opacity 0.15s ease;
   }
-  .tag__close:hover { background-color: var(--nuraly-color-background-hover); }
+  .tag__close:hover { background-color: var(--nr-bg-hover, #f4f4f4); }
   .tag__close:disabled { cursor: not-allowed; opacity: 0.6; }
 
-  /* Closing animation (height/opacity collapse) */
   @keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }
   .tag--closing { animation: tagFadeOut 0.2s ease forwards; }
 
-  /* Preset solid color tags similar to AntD */
   .tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }
   .tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }
   .tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }
@@ -82,7 +79,6 @@ export const styles = css `
   .tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }
   .tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }
 
-  /* Custom color tag hue via inline CSS variable */
-  .tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }
+  .tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: #fff; }
 `;
 //# sourceMappingURL=tag.style.js.map