@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,69 +1,77 @@
-import{css as r,LitElement as a,html as o}from"lit";import{property as d,customElement as c}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";const e=r`
+import{css as e,html as t,LitElement as r}from"lit";import{property as s,customElement as i}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";const o=e`
   :host {
     display: block;
-    color: var(--nuraly-color-text);
-    background-color: var(--nuraly-color-background);
-    font-family: var(--nuraly-card-font-family);
+    color: var(--nr-text, #161616);
+    background-color: var(--nr-bg, #ffffff);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   }
 
   .card {
-    background-color: var(--nuraly-card-background-color);
-    border-radius: var(--nuraly-card-border-radius);
-    border: var(--nuraly-card-border);
+    background-color: var(--nr-surface, #ffffff);
+    border-radius: 4px;
+    border: 1px solid var(--nr-border, #e0e0e0);
     overflow: hidden;
-    transition: var(--nuraly-card-transition);
-    box-shadow: var(--nuraly-card-shadow);
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 
   .card:hover {
-    cursor: var(--nuraly-card-cursor);
-    box-shadow: var(--nuraly-card-hover-shadow);
-    background-color: var(--nuraly-card-hover-background-color);
-    border-color: var(--nuraly-card-hover-border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 
   .card__header {
-    font-weight: var(--nuraly-card-header-font-weight);
-    border-bottom: var(--nuraly-card-header-border-bottom);
-    padding: var(--nuraly-card-padding);
-    background-color: var(--nuraly-card-header-background-color);
-    font-size: var(--nuraly-card-font-size);
-    color: var(--nuraly-card-header-color);
-    line-height: var(--nuraly-card-line-height);
+    font-weight: 600;
+    border-bottom: 1px solid var(--nr-border, #e0e0e0);
+    padding: 1rem;
+    font-size: 0.875rem;
+    color: var(--nr-text, #161616);
+    line-height: 1.5;
   }
 
   .card__content {
-    padding: var(--nuraly-card-padding);
-    color: var(--nuraly-card-content-color);
-    font-size: var(--nuraly-card-font-size);
-    line-height: var(--nuraly-card-line-height);
+    padding: 1rem;
+    color: var(--nr-text, #161616);
+    font-size: 0.875rem;
+    line-height: 1.5;
   }
 
   /* Size variants */
   .card--small .card__header,
   .card--small .card__content {
-    padding: var(--nuraly-card-small-padding);
-    font-size: var(--nuraly-card-small-font-size);
+    padding: 0.75rem;
+    font-size: 0.75rem;
   }
 
   .card--large .card__header,
   .card--large .card__content {
-    padding: var(--nuraly-card-large-padding);
-    font-size: var(--nuraly-card-large-font-size);
+    padding: 1.5rem;
+    font-size: 1rem;
   }
 
-  /* Focus styles for accessibility */
+  /* Focus */
   .card:focus-within {
-    outline: var(--nuraly-card-focus-outline);
-    outline-offset: var(--nuraly-card-focus-offset);
+    outline: 2px solid var(--nr-focus, #7c3aed);
+    outline-offset: 2px;
   }
-`;var t=function(r,a,o,d){for(var c,n=arguments.length,l=n<3?a:null===d?d=Object.getOwnPropertyDescriptor(a,o):d,e=r.length-1;e>=0;e--)(c=r[e])&&(l=(n<3?c(l):n>3?c(a,o,l):c(a,o))||l);return n>3&&l&&Object.defineProperty(a,o,l),l};let i=class extends(l(a)){constructor(){super(...arguments),this.header="",this.size="default"}render(){return o`
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,a=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,r;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(r=this.mediaQuery)||void 0===r||r.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const r=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return r||((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))}},d=()=>{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)},c=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(d())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(!d())return!0;let t=!0;for(const r of this.requiredComponents)if(!this.isComponentAvailable(r)){t=!1;const s=new Error(`Required component "${r}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(r,s):console.error(s.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)}},l=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var r;const s=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(r=this.tagName)||void 0===r?void 0:r.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,s)}dispatchInputEvent(e,t){const r=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,r)}dispatchFocusEvent(e,t){const r=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,r)}dispatchValidationEvent(e,t){var r;const s=Object.assign({target:t.target||this,value:t.value,isValid:null!==(r=t.isValid)&&void 0!==r&&r,error:t.error},t);this.dispatchCustomEvent(e,s)}dispatchActionEvent(e,t){const r=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,r)}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}},h=new Set,u=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(),r=e.styles;if(r){const e=m(r);e&&function(e,t,r){var s;if(!u.has(e)){const r=new CSSStyleSheet;r.replaceSync(t),u.set(e,r)}const i=u.get(e),n=`doc:${e}`;if(h.has(n)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,i],h.add(n)),r){let t=r;for(;t;){const r=t.getRootNode();if(!(r instanceof ShadowRoot))break;{const n=`shadow:${((null===(s=r.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${e}`;h.has(n)||(r.adoptedStyleSheets=[...r.adoptedStyleSheets,i],h.add(n)),t=r.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:""}var v=function(e,t,r,s){for(var i,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,r):s,a=e.length-1;a>=0;a--)(i=e[a])&&(o=(n<3?i(o):n>3?i(t,r,o):i(t,r))||o);return n>3&&o&&Object.defineProperty(t,r,o),o};let f=class extends((e=>c(a(l(p(e)))))(r)){constructor(){super(...arguments),this.header="",this.size="default"}render(){return t`
       <div
+        part="card"
         class="card ${n({"card--small":"small"===this.size,"card--large":"large"===this.size})}"
       >
-        ${this.header?o`<div class="card__header">${this.header}</div>`:""}
-        <div class="card__content">
+        ${this.header?t`<div part="header" class="card__header">${this.header}</div>`:""}
+        <div part="content" class="card__content">
           <slot name="content"></slot>
         </div>
       </div>
-    `}};i.styles=e,t([d({type:String})],i.prototype,"header",void 0),t([d({type:String})],i.prototype,"size",void 0),i=t([c("nr-card")],i);export{i as NrCardElement};
+    `}};f.styles=o,f.useShadowDom=!0,v([s({type:String})],f.prototype,"header",void 0),v([s({type:String})],f.prototype,"size",void 0),f=v([i("nr-card")],f);export{f as NrCardElement};

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { CardSize } from './card.types.js';
-declare const NrCardElement_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 NrCardElement_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;
 /**
  * Card component for displaying content in a structured container
  *
@@ -13,9 +13,14 @@ declare const NrCardElement_base: (new (...args: any[]) => import("@nuralyui/com
  *   <div slot="content">Card content goes here</div>
  * </nr-card>
  * ```
+ *
+ * @csspart card - The root card wrapper div
+ * @csspart header - The header div shown when the header property is set
+ * @csspart content - The body content div wrapping the content slot
  */
 export declare class NrCardElement extends NrCardElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /**
      * Header text displayed at the top of the card
      */

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

@@ -21,6 +21,10 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  *   <div slot="content">Card content goes here</div>
  * </nr-card>
  * ```
+ *
+ * @csspart card - The root card wrapper div
+ * @csspart header - The header div shown when the header property is set
+ * @csspart content - The body content div wrapping the content slot
  */
 let NrCardElement = class NrCardElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -37,13 +41,14 @@ let NrCardElement = class NrCardElement extends NuralyUIBaseMixin(LitElement) {
     render() {
         return html `
       <div
+        part="card"
         class="card ${classMap({
             'card--small': this.size === "small" /* CardSize.Small */,
             'card--large': this.size === "large" /* CardSize.Large */
         })}"
       >
-        ${this.header ? html `<div class="card__header">${this.header}</div>` : ''}
-        <div class="card__content">
+        ${this.header ? html `<div part="header" class="card__header">${this.header}</div>` : ''}
+        <div part="content" class="card__content">
           <slot name="content"></slot>
         </div>
       </div>
@@ -51,6 +56,7 @@ let NrCardElement = class NrCardElement extends NuralyUIBaseMixin(LitElement) {
     }
 };
 NrCardElement.styles = styles;
+NrCardElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrCardElement.prototype, "header", void 0);

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

@@ -2,61 +2,57 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    color: var(--nuraly-color-text);
-    background-color: var(--nuraly-color-background);
-    font-family: var(--nuraly-card-font-family);
+    color: var(--nr-text, #161616);
+    background-color: var(--nr-bg, #ffffff);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   }
 
   .card {
-    background-color: var(--nuraly-card-background-color);
-    border-radius: var(--nuraly-card-border-radius);
-    border: var(--nuraly-card-border);
+    background-color: var(--nr-surface, #ffffff);
+    border-radius: 4px;
+    border: 1px solid var(--nr-border, #e0e0e0);
     overflow: hidden;
-    transition: var(--nuraly-card-transition);
-    box-shadow: var(--nuraly-card-shadow);
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 
   .card:hover {
-    cursor: var(--nuraly-card-cursor);
-    box-shadow: var(--nuraly-card-hover-shadow);
-    background-color: var(--nuraly-card-hover-background-color);
-    border-color: var(--nuraly-card-hover-border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 
   .card__header {
-    font-weight: var(--nuraly-card-header-font-weight);
-    border-bottom: var(--nuraly-card-header-border-bottom);
-    padding: var(--nuraly-card-padding);
-    background-color: var(--nuraly-card-header-background-color);
-    font-size: var(--nuraly-card-font-size);
-    color: var(--nuraly-card-header-color);
-    line-height: var(--nuraly-card-line-height);
+    font-weight: 600;
+    border-bottom: 1px solid var(--nr-border, #e0e0e0);
+    padding: 1rem;
+    font-size: 0.875rem;
+    color: var(--nr-text, #161616);
+    line-height: 1.5;
   }
 
   .card__content {
-    padding: var(--nuraly-card-padding);
-    color: var(--nuraly-card-content-color);
-    font-size: var(--nuraly-card-font-size);
-    line-height: var(--nuraly-card-line-height);
+    padding: 1rem;
+    color: var(--nr-text, #161616);
+    font-size: 0.875rem;
+    line-height: 1.5;
   }
 
   /* Size variants */
   .card--small .card__header,
   .card--small .card__content {
-    padding: var(--nuraly-card-small-padding);
-    font-size: var(--nuraly-card-small-font-size);
+    padding: 0.75rem;
+    font-size: 0.75rem;
   }
 
   .card--large .card__header,
   .card--large .card__content {
-    padding: var(--nuraly-card-large-padding);
-    font-size: var(--nuraly-card-large-font-size);
+    padding: 1.5rem;
+    font-size: 1rem;
   }
 
-  /* Focus styles for accessibility */
+  /* Focus */
   .card:focus-within {
-    outline: var(--nuraly-card-focus-outline);
-    outline-offset: var(--nuraly-card-focus-offset);
+    outline: 2px solid var(--nr-focus, #7c3aed);
+    outline-offset: 2px;
   }
 `;
 //# sourceMappingURL=card.style.js.map

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

@@ -1,4 +1,4 @@
-import{css as t,LitElement as o,html as s,nothing as e}from"lit";import{property as i,queryAssignedElements as r,state as l,customElement as n}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";const c=t`
+import{css as t,LitElement as o,html as s,nothing as e}from"lit";import{property as i,queryAssignedElements as r,state as l,customElement as a}from"lit/decorators.js";import{repeat as n}from"lit/directives/repeat.js";const c=t`
   :host {
     position: relative;
   }
@@ -62,11 +62,11 @@ import{css as t,LitElement as o,html as s,nothing as e}from"lit";import{property
       }
     }
   }
-`;var d=function(t,o,s,e){for(var i,r=arguments.length,l=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,s):e,n=t.length-1;n>=0;n--)(i=t[n])&&(l=(r<3?i(l):r>3?i(o,s,l):i(o,s))||l);return r>3&&l&&Object.defineProperty(o,s,l),l};let h=class extends o{constructor(){super(...arguments),this.currentIndex=0,this.autoPlay=!1,this.autoplaySpeed=3e3,this.intervalId=null}firstUpdated(){this.displayedElements=this.slideElements.map((t,o)=>(o!==this.currentIndex&&t.classList.add("carousel-item-hidden"),t)),this.autoPlay&&this.startAutoPlay()}startAutoPlay(){this.intervalId=window.setInterval(()=>{this.next()},this.autoplaySpeed)}stopAutoPlay(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null)}next(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.displayedElements.length-1===this.currentIndex?this.currentIndex=0:this.currentIndex++,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}prev(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),0===this.currentIndex?this.currentIndex=this.displayedElements.length-1:this.currentIndex--,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}goTo(t){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.currentIndex=t,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay()}render(){var t;return s`
-      <div class="carousel">
+`;var d=function(t,o,s,e){for(var i,r=arguments.length,l=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(l=(r<3?i(l):r>3?i(o,s,l):i(o,s))||l);return r>3&&l&&Object.defineProperty(o,s,l),l};let h=class extends o{constructor(){super(...arguments),this.currentIndex=0,this.autoPlay=!1,this.autoplaySpeed=3e3,this.intervalId=null}firstUpdated(){this.displayedElements=this.slideElements.map((t,o)=>(o!==this.currentIndex&&t.classList.add("carousel-item-hidden"),t)),this.autoPlay&&this.startAutoPlay()}startAutoPlay(){this.intervalId=window.setInterval(()=>{this.next()},this.autoplaySpeed)}stopAutoPlay(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null)}next(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.displayedElements.length-1===this.currentIndex?this.currentIndex=0:this.currentIndex++,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}prev(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),0===this.currentIndex?this.currentIndex=this.displayedElements.length-1:this.currentIndex--,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}goTo(t){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.currentIndex=t,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay()}render(){var t;return s`
+      <div class="carousel" part="carousel">
         <slot></slot>
         ${this.autoPlay?e:s`
-                <div class="controls">
+                <div class="controls" part="controls">
                   <nr-button
                     @click="${this.prev}"
                     type="ghost"
@@ -84,13 +84,13 @@ import{css as t,LitElement as o,html as s,nothing as e}from"lit";import{property
                 </div>
               `}
 
-           <div class="dots">
-          ${a(Array.from({length:null===(t=this.displayedElements)||void 0===t?void 0:t.length}),(t,o)=>s`
+           <div class="dots" part="dots">
+          ${n(Array.from({length:null===(t=this.displayedElements)||void 0===t?void 0:t.length}),(t,o)=>s`
               <span
                 class="dot ${o===this.currentIndex?"active":""}"
                 @click="${()=>this.goTo(o)}"
               ></span>
             `)}
-        </div
+        </div>
       </div>
-    `}};h.styles=c,d([i({type:Number})],h.prototype,"currentIndex",void 0),d([i({type:Boolean})],h.prototype,"autoPlay",void 0),d([i({type:Number})],h.prototype,"autoplaySpeed",void 0),d([r()],h.prototype,"slideElements",void 0),d([l()],h.prototype,"displayedElements",void 0),h=d([n("hy-carousel")],h);export{h as CarouselComponent};
+    `}};h.styles=c,h.useShadowDom=!0,d([i({type:Number})],h.prototype,"currentIndex",void 0),d([i({type:Boolean})],h.prototype,"autoPlay",void 0),d([i({type:Number})],h.prototype,"autoplaySpeed",void 0),d([r()],h.prototype,"slideElements",void 0),d([l()],h.prototype,"displayedElements",void 0),h=d([a("hy-carousel")],h);export{h as CarouselComponent};

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

@@ -1,6 +1,18 @@
 import { LitElement } from 'lit';
+/**
+ * Carousel / slideshow component with auto-play and navigation controls.
+ *
+ * @element hy-carousel
+ *
+ * @slot - Default slot for carousel slide elements
+ *
+ * @csspart carousel - The main carousel container
+ * @csspart controls - The prev/next button controls wrapper
+ * @csspart dots - The dot navigation wrapper
+ */
 export declare class CarouselComponent extends LitElement {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     currentIndex: number;
     autoPlay: boolean;
     autoplaySpeed: number;

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

@@ -8,6 +8,17 @@ import { html, LitElement, nothing } from 'lit';
 import { styles } from './carousel.style.js';
 import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+/**
+ * Carousel / slideshow component with auto-play and navigation controls.
+ *
+ * @element hy-carousel
+ *
+ * @slot - Default slot for carousel slide elements
+ *
+ * @csspart carousel - The main carousel container
+ * @csspart controls - The prev/next button controls wrapper
+ * @csspart dots - The dot navigation wrapper
+ */
 let CarouselComponent = class CarouselComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -70,11 +81,11 @@ let CarouselComponent = class CarouselComponent extends LitElement {
     render() {
         var _a;
         return html `
-      <div class="carousel">
+      <div class="carousel" part="carousel">
         <slot></slot>
         ${!this.autoPlay
             ? html `
-                <div class="controls">
+                <div class="controls" part="controls">
                   <nr-button
                     @click="${this.prev}"
                     type="ghost"
@@ -93,19 +104,20 @@ let CarouselComponent = class CarouselComponent extends LitElement {
               `
             : nothing}
 
-           <div class="dots">
+           <div class="dots" part="dots">
           ${repeat(Array.from({ length: (_a = this.displayedElements) === null || _a === void 0 ? void 0 : _a.length }), (_, index) => html `
               <span
                 class="dot ${index === this.currentIndex ? 'active' : ''}"
                 @click="${() => this.goTo(index)}"
               ></span>
             `)}
-        </div
+        </div>
       </div>
     `;
     }
 };
 CarouselComponent.styles = styles;
+CarouselComponent.useShadowDom = true;
 __decorate([
     property({ type: Number })
 ], CarouselComponent.prototype, "currentIndex", void 0);