@sekiui/elements 0.0.80 → 0.0.82

package/dist/collection/components/card/seki-card-footer.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Bottom section of a card for action buttons or footer content.
  * Provides flex layout with optional alignment control.
@@ -17,8 +18,14 @@ export class CardFooter {
          */
         this.alignment = 'flex-start';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("footer", { key: '593fb209434061873884309fa30e7c370cb40572', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '77598829060d2cea482885dcb083a7c9cd0f09ce' })));
+        return (h("footer", { key: '7acb8e8932c44f26c0cbed1b17422906c4b04069', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '971fc9b2a153bc3282fc11e851bd67a705a16246' })));
     }
     static get is() { return "seki-card-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -80,4 +87,5 @@ export class CardFooter {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/card/seki-card-header.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Header section of a card, typically containing title and description.
  * Provides flex layout for arranging title + action elements.
@@ -13,8 +14,14 @@ import { h } from "@stencil/core";
  * </seki-card-header>
  */
 export class CardHeader {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("header", { key: '9e56e481b03b6e86ef4db19eb73ed947ab58c628', class: `card-header ${this.class || ''}` }, h("slot", { key: '055e8b9ed87b2e998ef47e97f3be70c02da2239b' })));
+        return (h("header", { key: 'd651f0cf0c0ea6348d44e2dd3276aa221620454e', class: `card-header ${this.class || ''}` }, h("slot", { key: '64514bade426b044f315fa2e157925ed51c85f9d' })));
     }
     static get is() { return "seki-card-header"; }
     static get encapsulation() { return "shadow"; }
@@ -51,4 +58,5 @@ export class CardHeader {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/card/seki-card-title.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Primary heading text within a card header.
  * Renders as semantic heading (h1-h6) with typography tokens.
@@ -13,6 +14,12 @@ export class CardTitle {
          */
         this.level = 'h2';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const headingClass = `card-title ${this.class || ''}`;
         switch (this.level) {
@@ -92,4 +99,5 @@ export class CardTitle {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/card/seki-card.css

@@ -789,7 +789,7 @@
    ============================================ */
 
 :host([data-theme='dark']),
-:host-context([data-theme='dark']) {
+:host([data-theme='dark']) {
   --seki-card-background: var(--color-background-dark, #1f2937);
   --seki-card-border: var(--color-border-dark, #374151);
   --seki-card-text-color: var(--color-text-primary-dark, #f3f4f6);

package/dist/collection/components/card/seki-card.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Flexible container for organizing related content with optional header,
  * content, and footer sections. Composition-based using subcomponents.
@@ -12,8 +13,14 @@ import { h } from "@stencil/core";
  * </seki-card>
  */
 export class Card {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("section", { key: '918de36b9aea098e91351ae2d0be6facfc628878', class: this.class }, h("slot", { key: '1a53391034900bdae051e7203860efad4f054004' })));
+        return (h("section", { key: 'aa3a3390eec9a67e8437f3a36214e72058110146', class: this.class }, h("slot", { key: '29943519f123a6f990047d24cb471825c32b20b5' })));
     }
     static get is() { return "seki-card"; }
     static get encapsulation() { return "shadow"; }
@@ -69,4 +76,5 @@ export class Card {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/carousel/seki-carousel-content.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Container for carousel slides. This component serves as the viewport
  * for the Embla carousel.
@@ -6,8 +7,14 @@ import { h, Host } from "@stencil/core";
  * @slot - Carousel items (seki-carousel-item)
  */
 export class SekiCarouselContent {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '5c0f9c9c98b39ea1fe8bde47c65b4435df097fbc', class: "carousel-content-host" }, h("div", { key: '641fbc156c0b6dc20c13501c5ce69ea2de9b1068', class: "carousel-content" }, h("slot", { key: '903252c40d960c9525cf0a94e99b7ec6098b7027' }))));
+        return (h(Host, { key: '9f9e3a8012188c78c332a3470472d5e02811956d', class: "carousel-content-host" }, h("div", { key: '7316c22687a7c8926bf6526b640d58576cbfa369', class: "carousel-content" }, h("slot", { key: '20fda69158d884eaf9ef8e5c1521cd4b18a6bbc9' }))));
     }
     static get is() { return "seki-carousel-content"; }
     static get encapsulation() { return "scoped"; }
@@ -21,4 +28,5 @@ export class SekiCarouselContent {
             "$": ["seki-carousel-content.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/carousel/seki-carousel-dots.css

@@ -28,7 +28,7 @@
 }
 
 .carousel-dots__dot:focus-visible {
-  outline: 2px solid var(--seki-color-ring, #3b82f6);
+  outline: 2px solid var(--seki-ring, hsl(0, 0%, 3.9%));
   outline-offset: 2px;
   border-radius: 50%;
 }
@@ -38,14 +38,14 @@
   width: var(--seki-carousel-dot-size, 0.5rem);
   height: var(--seki-carousel-dot-size, 0.5rem);
   border-radius: 50%;
-  background: var(--seki-carousel-dot-color, #94a3b8);
+  background: var(--seki-carousel-dot-color, var(--seki-muted-foreground, hsl(0, 0%, 45.1%)));
   transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
 }
 
 .carousel-dots__dot--active .carousel-dots__dot-inner {
   width: var(--seki-carousel-dot-active-size, 0.625rem);
   height: var(--seki-carousel-dot-active-size, 0.625rem);
-  background: var(--seki-carousel-dot-active-color, #0f172a);
+  background: var(--seki-carousel-dot-active-color, var(--seki-foreground, hsl(0, 0%, 3.9%)));
 }
 
 /* Reduced motion */

package/dist/collection/components/carousel/seki-carousel-dots.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dot indicators for carousel navigation.
  * Automatically syncs with parent seki-carousel.
@@ -55,8 +56,12 @@ export class SekiCarouselDots {
     componentDidLoad() {
         this.subscribeToCarousel();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
         var _a;
+        unregisterThemeSync(this.el);
         (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     findParentCarousel() {
@@ -83,7 +88,7 @@ export class SekiCarouselDots {
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (h(Host, { key: '08b1b215ee2e41c0cbd07c16679d8fd38cf7bbd0', class: "carousel-dots" }, h("div", { key: '52a2102fef194e9c6aba376cade35f7023cc6103', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+        return (h(Host, { key: 'bd3c1c3112189f28d54d482f0fffce6cbe090d71', class: "carousel-dots" }, h("div", { key: '2a3fedff1c1ddf4eae91099b3053c3594194e99c', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
                 'carousel-dots__dot': true,
                 'carousel-dots__dot--active': index === this.selectedIndex,
             }, role: "tab", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-label": `Go to slide ${index + 1}`, tabindex: index === this.selectedIndex ? '0' : '-1', onClick: () => this.handleDotClick(index), onKeyDown: (e) => this.handleKeyDown(e, index) }, h("span", { class: "carousel-dots__dot-inner" })))))));

package/dist/collection/components/carousel/seki-carousel-item.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Individual carousel slide item.
  *
@@ -12,8 +13,14 @@ export class SekiCarouselItem {
          */
         this.basis = '100%';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'b52928457219d8a42c32868bb8308b731f2b0174', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: 'df60d34fcb509657b1860da278a97971279b0928' })));
+        return (h(Host, { key: '37860139aab64ded084aeab799cccc6a10fddc94', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: '329e22206c589d60220a31ac19402d8437a18d84' })));
     }
     static get is() { return "seki-carousel-item"; }
     static get encapsulation() { return "shadow"; }
@@ -51,4 +58,5 @@ export class SekiCarouselItem {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/carousel/seki-carousel-navigation.css

@@ -25,8 +25,8 @@
   padding: 0;
   border: none;
   border-radius: 50%;
-  background: var(--seki-carousel-arrow-bg, rgba(255, 255, 255, 0.8));
-  color: var(--seki-carousel-arrow-color, #0f172a);
+  background: var(--seki-carousel-arrow-bg, var(--seki-background, hsl(0, 0%, 100%)));
+  color: var(--seki-carousel-arrow-color, var(--seki-foreground, hsl(0, 0%, 3.9%)));
   cursor: pointer;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
@@ -35,12 +35,12 @@
 }
 
 .carousel-nav__button:hover:not(:disabled) {
-  background: var(--seki-carousel-arrow-bg-hover, rgba(255, 255, 255, 0.95));
+  background: var(--seki-carousel-arrow-bg-hover, var(--seki-accent, hsl(0, 0%, 96.1%)));
   transform: scale(1.05);
 }
 
 .carousel-nav__button:focus-visible {
-  outline: 2px solid var(--seki-color-ring, #3b82f6);
+  outline: 2px solid var(--seki-ring, hsl(0, 0%, 3.9%));
   outline-offset: 2px;
 }
 

package/dist/collection/components/carousel/seki-carousel-next.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Next slide navigation button.
  * Automatically connects to parent seki-carousel.
@@ -23,8 +24,12 @@ export class SekiCarouselNext {
     componentDidLoad() {
         this.subscribeToCarousel();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
         var _a;
+        unregisterThemeSync(this.el);
         (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     findParentCarousel() {
@@ -49,7 +54,7 @@ export class SekiCarouselNext {
         this.disabled = !context.canScrollNext;
     }
     render() {
-        return (h(Host, { key: '35366b7a247803c255d9d5147874ec739bb87047', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: 'd2caa00fdd558ec94f1bf1e9dda3b28f995b8be3', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '465b029b570f4a5f6ed35ed7f52513ae51e01a4a', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'c4a0327f92a9823329a4e057f4d7e929d34dad12', points: "9 18 15 12 9 6" })))));
+        return (h(Host, { key: '9053780aa30fbb12f31a8a3f6e21cb88c3830db6', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '3cec362457512dcc35e4689c7cbe9be09c808b74', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '773bf46ed6baf45a4dba098f167f135cd7c5d8d7', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '760fce67ba7c60eef8be5d781d790a20e80fd3fa', points: "9 18 15 12 9 6" })))));
     }
     static get is() { return "seki-carousel-next"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel-previous.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Previous slide navigation button.
  * Automatically connects to parent seki-carousel.
@@ -23,8 +24,12 @@ export class SekiCarouselPrevious {
     componentDidLoad() {
         this.subscribeToCarousel();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
         var _a;
+        unregisterThemeSync(this.el);
         (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     findParentCarousel() {
@@ -49,7 +54,7 @@ export class SekiCarouselPrevious {
         this.disabled = !context.canScrollPrev;
     }
     render() {
-        return (h(Host, { key: '9bc5b457b2bcedd9700fb317229dfbe023f1b461', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '7dfa76a88840f2db0532ec78195798e2c79db0b4', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '8edc2dcdab776a995d7a240c7d583fdc975174a0', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '871d98d0aa55ff7036ed4a23296ee92d5c1b3ba7', points: "15 18 9 12 15 6" })))));
+        return (h(Host, { key: 'd17472f9b95ee28bd1428ce441a848ed4677dd3f', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '0a8eb4b1d448e6b7ab417caacf29ccf356c6f389', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '444b771ffdecf2db2de226edac2121abce9ebdb6', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '0a06f076ac8a1183228330bfe74b4286f3ef99e9', points: "15 18 9 12 15 6" })))));
     }
     static get is() { return "seki-carousel-previous"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel.css

@@ -44,13 +44,12 @@
 }
 
 /* Dark mode support */
-:host([data-theme="dark"]),
-:host-context([data-theme="dark"]) {
+:host([data-theme='dark']) {
   --seki-carousel-arrow-bg: rgba(30, 41, 59, 0.8);
   --seki-carousel-arrow-bg-hover: rgba(30, 41, 59, 0.95);
-  --seki-carousel-arrow-color: #f8fafc;
-  --seki-carousel-dot-color: #64748b;
-  --seki-carousel-dot-active-color: #f8fafc;
+  --seki-carousel-arrow-color: var(--seki-foreground, hsl(0, 0%, 98%));
+  --seki-carousel-dot-color: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
+  --seki-carousel-dot-active-color: var(--seki-foreground, hsl(0, 0%, 98%));
 }
 
 /* Reduced motion */

package/dist/collection/components/carousel/seki-carousel.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import EmblaCarousel from "embla-carousel";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Carousel content (seki-carousel-content, arrows, dots)
  */
@@ -112,8 +113,12 @@ export class SekiCarousel {
     componentDidLoad() {
         this.initEmbla();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
         var _a;
+        unregisterThemeSync(this.el);
         this.stopAutoplay();
         (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.destroy();
     }
@@ -251,7 +256,7 @@ export class SekiCarousel {
     // Render
     // =========================================================================
     render() {
-        return (h(Host, { key: 'c36c7b0ee60c76891b222f1a0bb5e3175ad80a7f', class: "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.ariaLabel, tabindex: "0", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onKeyDown: this.handleKeyDown }, h("div", { key: '1c209253af84ddeffcd1f0e3b251652979dbe9e2', class: "carousel__container" }, h("slot", { key: 'fd73801a89aefd91573017c7c988926a3107a782' })), h("div", { key: '12bba43c1158a11032350fe6097268ecc882c8fd', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
+        return (h(Host, { key: '7e151bbdee88a944d2b9ad74bcbd93bd1f53104b', class: "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.ariaLabel, tabindex: "0", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onKeyDown: this.handleKeyDown }, h("div", { key: '5cc47d28a19c0d083f83d13f284764ee46e96b7e', class: "carousel__container" }, h("slot", { key: '93f7c9893c7e8998fd2afefd6cf11837ee6ca97d' })), h("div", { key: '8f6b20d9c4e4aa6522c49800e2733950ecc0f6ed', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
     }
     static get is() { return "seki-carousel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chart/chart-config.js

@@ -49,6 +49,50 @@ export function getDefaultOptions(type, gridColor, textColor, backgroundColor) {
                 },
             } });
     }
+    // Scatter charts need numeric x/y scales
+    if (type === 'scatter') {
+        return Object.assign(Object.assign({}, baseOptions), { scales: {
+                x: {
+                    type: 'linear',
+                    position: 'bottom',
+                    grid: {
+                        color: gridColor,
+                    },
+                    ticks: {
+                        color: textColor,
+                    },
+                },
+                y: {
+                    grid: {
+                        color: gridColor,
+                    },
+                    ticks: {
+                        color: textColor,
+                    },
+                },
+            } });
+    }
+    // Radar charts use a radial axis
+    if (type === 'radar') {
+        return Object.assign(Object.assign({}, baseOptions), { scales: {
+                r: {
+                    grid: {
+                        color: gridColor,
+                    },
+                    angleLines: {
+                        color: gridColor,
+                    },
+                    pointLabels: {
+                        color: textColor,
+                    },
+                    ticks: {
+                        color: textColor,
+                        backdropColor: 'transparent',
+                    },
+                },
+            } });
+    }
+    // Pie, polarArea, and doughnut don't need x/y scales
     return baseOptions;
 }
 export function deepMerge(target, source) {

package/dist/collection/components/chart/chart-tooltip.js

@@ -0,0 +1,105 @@
+/**
+ * Creates a Chart.js external tooltip handler that renders a styled tooltip
+ * inside the component's Shadow DOM.
+ *
+ * Uses SekiUI design tokens for consistent styling with the rest of the library.
+ * The tooltip displays the category label, dataset name, colored indicator dot,
+ * and formatted value.
+ *
+ * @param shadowRoot - The Shadow DOM root where the tooltip element will be created
+ * @returns A function matching Chart.js's `tooltip.external` callback signature
+ */
+// eslint-disable-next-line no-undef
+export function createExternalTooltipHandler(shadowRoot) {
+    let tooltipEl = null;
+    return function (context) {
+        const { chart, tooltip } = context;
+        // Create tooltip element on first use
+        if (!tooltipEl) {
+            tooltipEl = document.createElement('div');
+            tooltipEl.classList.add('chart-tooltip');
+            shadowRoot.appendChild(tooltipEl);
+        }
+        // Hide if no tooltip should be shown
+        if (tooltip.opacity === 0) {
+            tooltipEl.style.opacity = '0';
+            tooltipEl.style.pointerEvents = 'none';
+            return;
+        }
+        // Build tooltip content
+        tooltipEl.innerHTML = '';
+        // Title (category label)
+        if (tooltip.title && tooltip.title.length > 0) {
+            const titleEl = document.createElement('div');
+            titleEl.classList.add('chart-tooltip-title');
+            titleEl.textContent = tooltip.title.join(', ');
+            tooltipEl.appendChild(titleEl);
+        }
+        // Body items (dataset values)
+        const bodyLines = tooltip.body || [];
+        bodyLines.forEach((bodyItem, i) => {
+            const colors = tooltip.labelColors[i];
+            const itemEl = document.createElement('div');
+            itemEl.classList.add('chart-tooltip-item');
+            // Colored dot indicator
+            const indicatorEl = document.createElement('span');
+            indicatorEl.classList.add('chart-tooltip-indicator');
+            indicatorEl.style.backgroundColor = colors.backgroundColor || '';
+            indicatorEl.style.borderColor = colors.borderColor || '';
+            itemEl.appendChild(indicatorEl);
+            // Dataset label
+            const labelEl = document.createElement('span');
+            labelEl.classList.add('chart-tooltip-label');
+            // Extract label and value from the body line
+            const text = bodyItem.lines.join(', ');
+            const colonIndex = text.indexOf(':');
+            if (colonIndex > -1) {
+                labelEl.textContent = text.substring(0, colonIndex).trim();
+                itemEl.appendChild(labelEl);
+                const valueEl = document.createElement('span');
+                valueEl.classList.add('chart-tooltip-value');
+                valueEl.textContent = text.substring(colonIndex + 1).trim();
+                itemEl.appendChild(valueEl);
+            }
+            else {
+                labelEl.textContent = text;
+                itemEl.appendChild(labelEl);
+            }
+            tooltipEl.appendChild(itemEl);
+        });
+        // Position the tooltip
+        const chartRect = chart.canvas.getBoundingClientRect();
+        const canvasOffsetLeft = chart.canvas.offsetLeft;
+        const canvasOffsetTop = chart.canvas.offsetTop;
+        // Calculate position relative to the canvas within the shadow DOM
+        const left = canvasOffsetLeft + tooltip.caretX;
+        const top = canvasOffsetTop + tooltip.caretY;
+        tooltipEl.style.opacity = '1';
+        tooltipEl.style.pointerEvents = 'none';
+        tooltipEl.style.left = `${left}px`;
+        tooltipEl.style.top = `${top}px`;
+        // Adjust if tooltip goes beyond chart boundaries
+        const tooltipWidth = tooltipEl.offsetWidth;
+        const tooltipHeight = tooltipEl.offsetHeight;
+        const chartWidth = chartRect.width;
+        // Flip horizontally if overflowing right edge
+        if (left + tooltipWidth / 2 > canvasOffsetLeft + chartWidth) {
+            tooltipEl.style.left = `${left - tooltipWidth - 8}px`;
+            tooltipEl.style.transform = 'translateY(-50%)';
+        }
+        else if (left - tooltipWidth / 2 < canvasOffsetLeft) {
+            tooltipEl.style.left = `${left + 8}px`;
+            tooltipEl.style.transform = 'translateY(-50%)';
+        }
+        else {
+            tooltipEl.style.transform = 'translate(-50%, -100%)';
+            tooltipEl.style.left = `${left}px`;
+            tooltipEl.style.top = `${top - 8}px`;
+        }
+        // Flip vertically if overflowing top
+        if (top - tooltipHeight - 8 < canvasOffsetTop) {
+            tooltipEl.style.transform = 'translate(-50%, 8px)';
+            tooltipEl.style.top = `${top}px`;
+        }
+    };
+}

package/dist/collection/components/chart/seki-chart.css

@@ -15,7 +15,7 @@
   --seki-chart-background: var(--seki-color-background, #ffffff);
 }
 
-[data-theme='dark'] :host {
+:host([data-theme='dark']) {
   --seki-chart-grid-color: var(--seki-color-border, #374151);
   --seki-chart-text-color: var(--seki-color-text, #f8fafc);
   --seki-chart-background: var(--seki-color-background, #0f172a);
@@ -62,3 +62,73 @@ canvas {
   max-width: 100%;
   height: 100%;
 }
+
+/* ── Chart Tooltip ── */
+.chart-tooltip {
+  position: absolute;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  min-width: 8rem;
+  max-width: 20rem;
+  padding: var(--seki-spacing-2, 0.5rem) var(--seki-spacing-3, 0.75rem);
+  background: var(--seki-chart-background);
+  border: 1px solid var(--seki-chart-grid-color);
+  border-radius: var(--seki-radius-md, 0.375rem);
+  box-shadow: var(--seki-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
+  font-family: var(--seki-font-sans, system-ui, -apple-system, sans-serif);
+  font-size: var(--seki-font-size-xs, 0.75rem);
+  line-height: var(--seki-line-height-normal, 1.5);
+  color: var(--seki-chart-text-color);
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chart-tooltip-title {
+  font-weight: var(--seki-font-weight-medium, 500);
+  font-size: var(--seki-font-size-xs, 0.75rem);
+  color: var(--seki-chart-text-color);
+  margin-bottom: var(--seki-spacing-1, 0.25rem);
+  padding-bottom: var(--seki-spacing-1, 0.25rem);
+  border-bottom: 1px solid var(--seki-chart-grid-color);
+}
+
+.chart-tooltip-item {
+  display: flex;
+  align-items: center;
+  gap: var(--seki-spacing-2, 0.5rem);
+  padding: 1px 0;
+  font-size: var(--seki-font-size-xs, 0.75rem);
+}
+
+.chart-tooltip-indicator {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--seki-radius-full, 9999px);
+  border: 1px solid transparent;
+}
+
+.chart-tooltip-label {
+  flex: 1;
+  color: var(--seki-color-muted-foreground, #64748b);
+  font-weight: var(--seki-font-weight-normal, 400);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chart-tooltip-value {
+  font-weight: var(--seki-font-weight-semibold, 600);
+  font-variant-numeric: tabular-nums;
+  color: var(--seki-chart-text-color);
+  margin-left: auto;
+  padding-left: var(--seki-spacing-2, 0.5rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-tooltip {
+    transition: none;
+  }
+}