@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -1,7 +1,5 @@
-import{css as t,LitElement as e,html as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{classMap as i}from"lit/directives/class-map.js";import{styleMap as r}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";const l=t`
-  :host {
-    display: block;
-  }
+import{css as t,html as e,LitElement as i}from"lit";import{property as s,customElement as n}from"lit/decorators.js";import{classMap as o}from"lit/directives/class-map.js";import{styleMap as r}from"lit/directives/style-map.js";const a=t`
+  :host { display: block; }
 
   .skeleton {
     display: flex;
@@ -15,51 +13,30 @@ import{css as t,LitElement as e,html as o}from"lit";import{property as a,customE
     gap: 16px;
   }
 
-  .skeleton-content {
-    flex: 1;
-  }
+  .skeleton-content { flex: 1; }
 
   /* Avatar */
   .skeleton-avatar {
     flex-shrink: 0;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
-    border-radius: 4px;
-  }
-
-  .skeleton-avatar--circle {
-    border-radius: 50%;
-  }
-
-  .skeleton-avatar--square {
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-avatar--small {
-    width: 32px;
-    height: 32px;
-  }
-
-  .skeleton-avatar--default {
-    width: 40px;
-    height: 40px;
-  }
-
-  .skeleton-avatar--large {
-    width: 48px;
-    height: 48px;
-  }
+  .skeleton-avatar--circle { border-radius: 50%; }
+  .skeleton-avatar--square { border-radius: 4px; }
+  .skeleton-avatar--small { width: 32px; height: 32px; }
+  .skeleton-avatar--default { width: 40px; height: 40px; }
+  .skeleton-avatar--large { width: 48px; height: 48px; }
 
   /* Title */
   .skeleton-title {
     height: 16px;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
     margin-bottom: 12px;
   }
 
-  .skeleton-title--round {
-    border-radius: 8px;
-  }
+  .skeleton-title--round { border-radius: 8px; }
 
   /* Paragraph */
   .skeleton-paragraph {
@@ -70,82 +47,45 @@ import{css as t,LitElement as e,html as o}from"lit";import{property as a,customE
 
   .skeleton-paragraph-line {
     height: 16px;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-paragraph-line--round {
-    border-radius: 8px;
-  }
+  .skeleton-paragraph-line--round { border-radius: 8px; }
 
   /* Button */
   .skeleton-button {
     display: inline-block;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-button--block {
-    display: block;
-    width: 100%;
-  }
-
-  .skeleton-button--circle {
-    border-radius: 50%;
-  }
-
-  .skeleton-button--round {
-    border-radius: 16px;
-  }
-
-  .skeleton-button--square {
-    border-radius: 4px;
-  }
-
-  .skeleton-button--small {
-    width: 64px;
-    height: 24px;
-  }
-
-  .skeleton-button--default {
-    width: 80px;
-    height: 32px;
-  }
-
-  .skeleton-button--large {
-    width: 96px;
-    height: 40px;
-  }
+  .skeleton-button--block { display: block; width: 100%; }
+  .skeleton-button--circle { border-radius: 50%; }
+  .skeleton-button--round { border-radius: 16px; }
+  .skeleton-button--square { border-radius: 4px; }
+  .skeleton-button--small { width: 64px; height: 24px; }
+  .skeleton-button--default { width: 80px; height: 32px; }
+  .skeleton-button--large { width: 96px; height: 40px; }
 
   /* Input */
   .skeleton-input {
     display: block;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-input--small {
-    height: 24px;
-  }
-
-  .skeleton-input--default {
-    height: 32px;
-  }
-
-  .skeleton-input--large {
-    height: 40px;
-  }
-
-  .skeleton-input--block {
-    width: 100%;
-  }
+  .skeleton-input--small { height: 24px; }
+  .skeleton-input--default { height: 32px; }
+  .skeleton-input--large { height: 40px; }
+  .skeleton-input--block { width: 100%; }
 
   /* Image */
   .skeleton-image {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
     width: 100%;
     height: 200px;
@@ -153,17 +93,13 @@ import{css as t,LitElement as e,html as o}from"lit";import{property as a,customE
 
   .skeleton-image-icon {
     font-size: 48px;
-    color: var(--nuraly-skeleton-icon-color, rgba(0, 0, 0, 0.15));
+    color: rgba(0, 0, 0, 0.15);
   }
 
   /* Active animation */
   @keyframes skeleton-loading {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
+    0% { background-position: 100% 50%; }
+    100% { background-position: 0 50%; }
   }
 
   .skeleton--active .skeleton-avatar,
@@ -174,80 +110,61 @@ import{css as t,LitElement as e,html as o}from"lit";import{property as a,customE
   .skeleton--active .skeleton-image {
     background: linear-gradient(
       90deg,
-      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 25%,
-      var(--nuraly-skeleton-gradient-to, rgba(0, 0, 0, 0.15)) 37%,
-      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 63%
+      rgba(0, 0, 0, 0.06) 25%,
+      rgba(0, 0, 0, 0.15) 37%,
+      rgba(0, 0, 0, 0.06) 63%
     );
     background-size: 400% 100%;
     animation: skeleton-loading 1.4s ease infinite;
   }
 
-  /* Dark theme support */
-  :host([theme='carbon-dark']) .skeleton-avatar,
-  :host([theme='carbon-dark']) .skeleton-title,
-  :host([theme='carbon-dark']) .skeleton-paragraph-line,
-  :host([theme='carbon-dark']) .skeleton-button,
-  :host([theme='carbon-dark']) .skeleton-input,
-  :host([theme='carbon-dark']) .skeleton-image {
-    background: rgba(255, 255, 255, 0.08);
-  }
-
-  :host([theme='carbon-dark']) .skeleton-image-icon {
-    color: rgba(255, 255, 255, 0.15);
-  }
-
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-avatar,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-title,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-paragraph-line,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-button,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-input,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-image {
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.08) 25%,
-      rgba(255, 255, 255, 0.15) 37%,
-      rgba(255, 255, 255, 0.08) 63%
-    );
-    background-size: 400% 100%;
-  }
-
-  /* Content wrapper for loading state */
-  .skeleton-wrapper {
-    display: block;
-  }
-
-  .skeleton-wrapper--hidden {
-    display: none;
-  }
+  .skeleton-wrapper { display: block; }
+  .skeleton-wrapper--hidden { display: none; }
 `
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var d=function(t,e,o,a){for(var n,i=arguments.length,r=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,o):a,s=t.length-1;s>=0;s--)(n=t[s])&&(r=(i<3?n(r):i>3?n(e,o,r):n(e,o))||r);return i>3&&r&&Object.defineProperty(e,o,r),r};let h=class extends(s(e)){constructor(){super(...arguments),this.active=!1,this.avatar=!1,this.avatarConfig={},this.loading=!0,this.paragraph=!0,this.paragraphConfig={},this.round=!1,this.showTitle=!0,this.titleConfig={},this.buttonConfig={},this.inputConfig={},this.imageConfig={},this.block=!1,this.shape="default",this.size="default"}renderAvatar(){const t="object"==typeof this.avatar?this.avatar:this.avatarConfig,e=t.shape||"circle",a=t.size||"default",n="number"==typeof a?"":a,s="number"==typeof a?{width:`${a}px`,height:`${a}px`}:{};return o`
+ */,l=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,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"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))}},d=()=>{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)},h=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(d())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(!d())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.message)}return e}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 e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},c=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}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}},p=new Set,u=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const v=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=g(i);t&&function(t,e,i){var s;if(!u.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),u.set(t,i)}const n=u.get(t),o=`doc:${t}`;if(p.has(o)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],p.add(o)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const o=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;p.has(o)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,n],p.add(o)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function g(t){return Array.isArray(t)?t.map(t=>g(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var b=function(t,e,i,s){for(var n,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};let k=class extends((t=>h(l(c(v(t)))))(i)){constructor(){super(...arguments),this.active=!1,this.avatar=!1,this.avatarConfig={},this.loading=!0,this.paragraph=!0,this.paragraphConfig={},this.round=!1,this.showTitle=!0,this.titleConfig={},this.buttonConfig={},this.inputConfig={},this.imageConfig={},this.block=!1,this.shape="default",this.size="default"}renderAvatar(){const t="object"==typeof this.avatar?this.avatar:this.avatarConfig,i=t.shape||"circle",s=t.size||"default",n="number"==typeof s?"":s,a="number"==typeof s?{width:`${s}px`,height:`${s}px`}:{};return e`
       <div
-        class=${i({"skeleton-avatar":!0,[`skeleton-avatar--${e}`]:!0,[`skeleton-avatar--${n}`]:!!n})}
-        style=${r(s)}></div>
-    `}renderTitle(){const t=("object"==typeof this.showTitle?this.showTitle:this.titleConfig).width,e=t?{width:"number"==typeof t?`${t}px`:t}:{width:"38%"};return o`
+        part="avatar"
+        class=${o({"skeleton-avatar":!0,[`skeleton-avatar--${i}`]:!0,[`skeleton-avatar--${n}`]:!!n})}
+        style=${r(a)}></div>
+    `}renderTitle(){const t=("object"==typeof this.showTitle?this.showTitle:this.titleConfig).width,i=t?{width:"number"==typeof t?`${t}px`:t}:{width:"38%"};return e`
       <div
-        class=${i({"skeleton-title":!0,"skeleton-title--round":this.round})}
-        style=${r(e)}></div>
-    `}renderParagraph(){const t="object"==typeof this.paragraph?this.paragraph:this.paragraphConfig,e=t.rows||3,a=t.width;return o`
-      <div class="skeleton-paragraph">
-        ${Array.from({length:e},(t,n)=>o`
+        part="title"
+        class=${o({"skeleton-title":!0,"skeleton-title--round":this.round})}
+        style=${r(i)}></div>
+    `}renderParagraph(){const t="object"==typeof this.paragraph?this.paragraph:this.paragraphConfig,i=t.rows||3,s=t.width;return e`
+      <div part="paragraph" class="skeleton-paragraph">
+        ${Array.from({length:i},(t,n)=>e`
           <div
-            class=${i({"skeleton-paragraph-line":!0,"skeleton-paragraph-line--round":this.round})}
-            style=${r((t=>{if(Array.isArray(a)){const e=a[t];return e?{width:"number"==typeof e?`${e}px`:e}:{}}return t===e-1?a?{width:"number"==typeof a?`${a}px`:a}:{width:"61%"}:{}})(n))}></div>
+            part="paragraph-line"
+            class=${o({"skeleton-paragraph-line":!0,"skeleton-paragraph-line--round":this.round})}
+            style=${r((t=>{if(Array.isArray(s)){const e=s[t];return e?{width:"number"==typeof e?`${e}px`:e}:{}}return t===i-1?s?{width:"number"==typeof s?`${s}px`:s}:{width:"61%"}:{}})(n))}></div>
         `)}
       </div>
-    `}renderButton(){const t=this.buttonConfig,e=t.shape||this.shape,a=t.size||this.size,n=void 0!==t.block?t.block:this.block;return o`
+    `}renderButton(){const t=this.buttonConfig,i=t.shape||this.shape,s=t.size||this.size,n=void 0!==t.block?t.block:this.block;return e`
       <div
-        class=${i({"skeleton-button":!0,[`skeleton-button--${e}`]:!0,[`skeleton-button--${a}`]:!0,"skeleton-button--block":n})}></div>
-    `}renderInput(){const t=this.inputConfig,e=t.size||this.size,a=void 0!==t.block?t.block:this.block;return o`
+        part="button"
+        class=${o({"skeleton-button":!0,[`skeleton-button--${i}`]:!0,[`skeleton-button--${s}`]:!0,"skeleton-button--block":n})}></div>
+    `}renderInput(){const t=this.inputConfig,i=t.size||this.size,s=void 0!==t.block?t.block:this.block;return e`
       <div
-        class=${i({"skeleton-input":!0,[`skeleton-input--${e}`]:!0,"skeleton-input--block":a})}></div>
-    `}renderImage(){return o`
-      <div class="skeleton-image">
+        part="input"
+        class=${o({"skeleton-input":!0,[`skeleton-input--${i}`]:!0,"skeleton-input--block":s})}></div>
+    `}renderImage(){return e`
+      <div part="image" class="skeleton-image">
         <svg
           class="skeleton-image-icon"
           viewBox="0 0 1024 1024"
@@ -259,26 +176,28 @@ import{css as t,LitElement as e,html as o}from"lit";import{property as a,customE
             fill="currentColor" />
         </svg>
       </div>
-    `}renderStandaloneElement(){switch(this.element){case"button":return this.renderButton();case"input":return this.renderInput();case"image":return this.renderImage();case"avatar":return this.renderAvatar();default:return o``}}renderSkeleton(){return this.element?o`
+    `}renderStandaloneElement(){switch(this.element){case"button":return this.renderButton();case"input":return this.renderInput();case"image":return this.renderImage();case"avatar":return this.renderAvatar();default:return e``}}renderSkeleton(){return this.element?e`
         <div
-          class=${i({skeleton:!0,"skeleton--active":this.active||"avatar"===this.element&&!!this.avatarConfig.active})}>
+          part="skeleton"
+          class=${o({skeleton:!0,"skeleton--active":this.active||"avatar"===this.element&&!!this.avatarConfig.active})}>
           ${this.renderStandaloneElement()}
         </div>
-      `:o`
+      `:e`
       <div
-        class=${i({skeleton:!0,"skeleton--active":this.active})}>
-        ${this.avatar||this.showTitle||this.paragraph?o`
-              ${this.avatar?o`
+        part="skeleton"
+        class=${o({skeleton:!0,"skeleton--active":this.active})}>
+        ${this.avatar||this.showTitle||this.paragraph?e`
+              ${this.avatar?e`
                     <div class="skeleton-header">
                       ${this.renderAvatar()}
-                      ${this.showTitle||this.paragraph?o`
+                      ${this.showTitle||this.paragraph?e`
                             <div class="skeleton-content">
                               ${this.showTitle?this.renderTitle():""}
                               ${this.paragraph?this.renderParagraph():""}
                             </div>
                           `:""}
                     </div>
-                  `:o`
+                  `:e`
                     <div class="skeleton-content">
                       ${this.showTitle?this.renderTitle():""}
                       ${this.paragraph?this.renderParagraph():""}
@@ -286,8 +205,9 @@ import{css as t,LitElement as e,html as o}from"lit";import{property as a,customE
                   `}
             `:""}
       </div>
-    `}render(){return this.loading?this.renderSkeleton():o`
+    `}render(){return this.loading?this.renderSkeleton():e`
         <div class="skeleton-wrapper">
-          <slot name="content"><slot></slot></slot>
+          <slot name="content"></slot>
+          <slot></slot>
         </div>
-      `}};h.styles=l,d([a({type:Boolean})],h.prototype,"active",void 0),d([a({type:Boolean})],h.prototype,"avatar",void 0),d([a({type:Object,attribute:"avatar-config"})],h.prototype,"avatarConfig",void 0),d([a({type:Boolean})],h.prototype,"loading",void 0),d([a({type:Boolean})],h.prototype,"paragraph",void 0),d([a({type:Object,attribute:"paragraph-config"})],h.prototype,"paragraphConfig",void 0),d([a({type:Boolean})],h.prototype,"round",void 0),d([a({type:Boolean,attribute:"show-title"})],h.prototype,"showTitle",void 0),d([a({type:Object,attribute:"title-config"})],h.prototype,"titleConfig",void 0),d([a({type:String})],h.prototype,"element",void 0),d([a({type:Object,attribute:"button-config"})],h.prototype,"buttonConfig",void 0),d([a({type:Object,attribute:"input-config"})],h.prototype,"inputConfig",void 0),d([a({type:Object,attribute:"image-config"})],h.prototype,"imageConfig",void 0),d([a({type:Boolean})],h.prototype,"block",void 0),d([a({type:String})],h.prototype,"shape",void 0),d([a({type:String})],h.prototype,"size",void 0),h=d([n("nr-skeleton")],h);export{h as NrSkeletonElement};
+      `}};k.styles=a,k.useShadowDom=!0,b([s({type:Boolean})],k.prototype,"active",void 0),b([s({type:Boolean})],k.prototype,"avatar",void 0),b([s({type:Object,attribute:"avatar-config"})],k.prototype,"avatarConfig",void 0),b([s({type:Boolean})],k.prototype,"loading",void 0),b([s({type:Boolean})],k.prototype,"paragraph",void 0),b([s({type:Object,attribute:"paragraph-config"})],k.prototype,"paragraphConfig",void 0),b([s({type:Boolean})],k.prototype,"round",void 0),b([s({type:Boolean,attribute:"show-title"})],k.prototype,"showTitle",void 0),b([s({type:Object,attribute:"title-config"})],k.prototype,"titleConfig",void 0),b([s({type:String})],k.prototype,"element",void 0),b([s({type:Object,attribute:"button-config"})],k.prototype,"buttonConfig",void 0),b([s({type:Object,attribute:"input-config"})],k.prototype,"inputConfig",void 0),b([s({type:Object,attribute:"image-config"})],k.prototype,"imageConfig",void 0),b([s({type:Boolean})],k.prototype,"block",void 0),b([s({type:String})],k.prototype,"shape",void 0),b([s({type:String})],k.prototype,"size",void 0),k=b([n("nr-skeleton")],k);export{k as NrSkeletonElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { SkeletonShape, SkeletonSize, SkeletonElementType, SkeletonAvatarConfig, SkeletonTitleConfig, SkeletonParagraphConfig, SkeletonButtonConfig, SkeletonInputConfig, SkeletonImageConfig } from './skeleton.types.js';
-declare const NrSkeletonElement_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 NrSkeletonElement_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;
 /**
  * # Skeleton Component
  *
@@ -51,13 +51,18 @@ declare const NrSkeletonElement_base: (new (...args: any[]) => import("@nuralyui
  *
  * @slot content - Content to show when loading is false
  *
- * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements
- * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient
- * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient
- * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon
+ * @csspart skeleton - The root skeleton wrapper element
+ * @csspart avatar - The avatar placeholder circle/square element
+ * @csspart title - The title placeholder bar
+ * @csspart paragraph - The paragraph placeholder container
+ * @csspart paragraph-line - Each individual line in the paragraph placeholder
+ * @csspart button - The button placeholder element (element="button")
+ * @csspart input - The input placeholder element (element="input")
+ * @csspart image - The image placeholder element (element="image")
  */
 export declare class NrSkeletonElement extends NrSkeletonElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * Show animation effect
      */

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

@@ -60,10 +60,14 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  *
  * @slot content - Content to show when loading is false
  *
- * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements
- * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient
- * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient
- * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon
+ * @csspart skeleton - The root skeleton wrapper element
+ * @csspart avatar - The avatar placeholder circle/square element
+ * @csspart title - The title placeholder bar
+ * @csspart paragraph - The paragraph placeholder container
+ * @csspart paragraph-line - Each individual line in the paragraph placeholder
+ * @csspart button - The button placeholder element (element="button")
+ * @csspart input - The input placeholder element (element="input")
+ * @csspart image - The image placeholder element (element="image")
  */
 let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -140,6 +144,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
         const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};
         return html `
       <div
+        part="avatar"
         class=${classMap({
             'skeleton-avatar': true,
             [`skeleton-avatar--${shape}`]: true,
@@ -157,6 +162,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
         const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };
         return html `
       <div
+        part="title"
         class=${classMap({
             'skeleton-title': true,
             'skeleton-title--round': this.round,
@@ -186,9 +192,10 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
             return {};
         };
         return html `
-      <div class="skeleton-paragraph">
+      <div part="paragraph" class="skeleton-paragraph">
         ${Array.from({ length: rows }, (_, i) => html `
           <div
+            part="paragraph-line"
             class=${classMap({
             'skeleton-paragraph-line': true,
             'skeleton-paragraph-line--round': this.round,
@@ -208,6 +215,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
         const buttonBlock = config.block !== undefined ? config.block : this.block;
         return html `
       <div
+        part="button"
         class=${classMap({
             'skeleton-button': true,
             [`skeleton-button--${buttonShape}`]: true,
@@ -225,6 +233,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
         const inputBlock = config.block !== undefined ? config.block : this.block;
         return html `
       <div
+        part="input"
         class=${classMap({
             'skeleton-input': true,
             [`skeleton-input--${inputSize}`]: true,
@@ -237,7 +246,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
      */
     renderImage() {
         return html `
-      <div class="skeleton-image">
+      <div part="image" class="skeleton-image">
         <svg
           class="skeleton-image-icon"
           viewBox="0 0 1024 1024"
@@ -276,6 +285,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
         if (this.element) {
             return html `
         <div
+          part="skeleton"
           class=${classMap({
                 'skeleton': true,
                 'skeleton--active': this.active || (this.element === "avatar" /* SkeletonElementType.Avatar */ && !!this.avatarConfig.active),
@@ -287,6 +297,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
         // Render full skeleton layout
         return html `
       <div
+        part="skeleton"
         class=${classMap({
             'skeleton': true,
             'skeleton--active': this.active,
@@ -323,7 +334,8 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
         if (!this.loading) {
             return html `
         <div class="skeleton-wrapper">
-          <slot name="content"><slot></slot></slot>
+          <slot name="content"></slot>
+          <slot></slot>
         </div>
       `;
         }
@@ -332,6 +344,7 @@ let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitEle
     }
 };
 NrSkeletonElement.styles = styles;
+NrSkeletonElement.useShadowDom = true;
 __decorate([
     property({ type: Boolean })
 ], NrSkeletonElement.prototype, "active", void 0);