@sekiui/elements 0.0.63 → 0.0.65

package/dist/collection/components/breadcrumb/seki-breadcrumb-link.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiBreadcrumbLink {
     render() {
-        return (h("a", { key: 'f3ec124d88cac375dc5d5bb3407e8a3e7b692866', href: this.href, target: this.target, class: "seki-breadcrumb-link", part: "link" }, h("slot", { key: '1dede3df395a4423c4e14065e8613a6014651658' })));
+        return (h("a", { key: 'c5b6ec1f700246cb6a8bbdc9074403a0c37063e6', href: this.href, target: this.target, class: "seki-breadcrumb-link", part: "link" }, h("slot", { key: '2dceb677e3cba14a3bdef00a3cf26b9cb56dab24' })));
     }
     static get is() { return "seki-breadcrumb-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/seki-breadcrumb-list.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiBreadcrumbList {
     render() {
-        return (h("ol", { key: '9f99d9bc4e344fbfb5f0f59b345f093d5749d5cd', class: "seki-breadcrumb-list", part: "list" }, h("slot", { key: '31a7e18de584f162e2165a454640ed56d31cc9b4' })));
+        return (h("ol", { key: '2a8606c6462afd60c302580f5a307b81d74e79e1', class: "seki-breadcrumb-list", part: "list" }, h("slot", { key: '0fce9599a327e7923ce83fd59f300f77399b53d2' })));
     }
     static get is() { return "seki-breadcrumb-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/seki-breadcrumb-page.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiBreadcrumbPage {
     render() {
-        return (h("span", { key: '4da8666d70d7de92b571a241d57ddf8ef9025cba', role: "link", "aria-disabled": "true", "aria-current": "page", class: "seki-breadcrumb-page", part: "page" }, h("slot", { key: '6b3e507adfb0a965420b3a041581055c15a0a4a5' })));
+        return (h("span", { key: '2afdfd60d66896dac935f0606f8efb724ba6df40', role: "link", "aria-disabled": "true", "aria-current": "page", class: "seki-breadcrumb-page", part: "page" }, h("slot", { key: '0410afe8ad1e54cdbc6b350f78b708225b63e912' })));
     }
     static get is() { return "seki-breadcrumb-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/seki-breadcrumb-separator.js

@@ -10,7 +10,7 @@ export class SekiBreadcrumbSeparator {
     }
     render() {
         const hasContent = this.hasCustomContent();
-        return (h("li", { key: '270d0f8a8399de9c2ebe3df94ad39d38589eed9e', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-separator", part: "separator" }, hasContent ? (h("slot", null)) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "m9 18 6-6-6-6" })))));
+        return (h("li", { key: '108b2c41bd3f0569b98183de41dedc99996e4486', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-separator", part: "separator" }, hasContent ? (h("slot", null)) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "m9 18 6-6-6-6" })))));
     }
     static get is() { return "seki-breadcrumb-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class SekiBreadcrumb {
         this.label = 'breadcrumb';
     }
     render() {
-        return (h("nav", { key: '32eae19249e237de2f93951e25429397951b1b39', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: '2b0fa9a3d77c4d1397929b875ee4bdce4a383008' })));
+        return (h("nav", { key: '90f4c5b40e8c4fa1c7f538f5edd69d5e8d14a0c2', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: '9024736e84099acc44f972e451327f4dea69a216' })));
     }
     static get is() { return "seki-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class SekiButton {
         }
     }
     render() {
-        return (h("button", { key: 'e63ecc7698e83a796f82a1324e229aad797cac4d', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '3947a83f06f4579d7f85290b1aea8dc57251db4d' })));
+        return (h("button", { key: '8dcbfc724a5f97cf12ebbfbaea16e4acea92bae9', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: 'e3b7a70eb678587ef88367ac3ac50d06ee5de2ad' })));
     }
     static get is() { return "seki-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button-group/seki-button-group.js

@@ -42,10 +42,10 @@ export class SekiButtonGroup {
         });
     }
     render() {
-        return (h(Host, { key: 'fa2ddc4ba0257bdc3e0ac6b22a9184ecdeba0672' }, h("div", { key: '336137921a9b47510a3f23c80f289ab7e99361b2', class: {
+        return (h(Host, { key: '1a793cbd24a8d424e3815fd7beabf292b62fa50d' }, h("div", { key: 'b7c02ddcd45c8b081a63d3d446e56abd36dd778e', class: {
                 'button-group': true,
                 [`button-group--${this.orientation}`]: true,
-            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '50c2c43a3dfba4dc08aa6fe82545e934819d1c6d', onSlotchange: () => this.updateChildButtons() }))));
+            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '29ec991c2e3dd1157179c4f040d942caf0d0d7a1', onSlotchange: () => this.updateChildButtons() }))));
     }
     static get is() { return "seki-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@
   /* Sizing */
   --seki-calendar-cell-size: 36px;
   --seki-calendar-nav-button-size: 28px;
-  --seki-calendar-radius: var(--radius-md, 8px);
+  --seki-calendar-radius: var(--seki-radius-md, 8px);
 
   /* Typography */
   --seki-calendar-font-size: var(--seki-font-size-sm, 14px);
@@ -61,7 +61,7 @@
 }
 
 .seki-calendar__month {
-  font-weight: 500;
+  font-weight: var(--seki-font-weight-medium, 500);
 }
 
 .seki-calendar__year {
@@ -77,7 +77,7 @@
   height: var(--seki-calendar-nav-button-size);
   padding: 0;
   border: 1px solid var(--seki-calendar-border);
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--seki-radius-sm, 4px);
   background-color: transparent;
   color: var(--seki-calendar-text);
   cursor: pointer;
@@ -114,8 +114,8 @@
 .seki-calendar__weekday {
   width: var(--seki-calendar-cell-size);
   height: var(--seki-calendar-cell-size);
-  font-size: 0.75rem;
-  font-weight: 400;
+  font-size: var(--seki-font-size-xs, 0.75rem);
+  font-weight: var(--seki-font-weight-normal, 400);
   color: var(--seki-calendar-muted);
   text-align: center;
   vertical-align: middle;
@@ -143,11 +143,11 @@
   height: var(--seki-calendar-cell-size);
   padding: 0;
   border: none;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--seki-radius-sm, 4px);
   background-color: transparent;
   color: var(--seki-calendar-text);
   font-size: var(--seki-calendar-font-size);
-  font-weight: 400;
+  font-weight: var(--seki-font-weight-normal, 400);
   cursor: pointer;
   transition: background-color 150ms ease, color 150ms ease;
 }
@@ -172,7 +172,7 @@
 .seki-calendar__day--selected {
   background-color: var(--seki-calendar-primary);
   color: var(--seki-calendar-primary-foreground);
-  font-weight: 500;
+  font-weight: var(--seki-font-weight-medium, 500);
 }
 
 .seki-calendar__day--selected:hover {
@@ -211,17 +211,17 @@
 .seki-calendar__day--range-start {
   background-color: var(--seki-calendar-primary);
   color: var(--seki-calendar-primary-foreground);
-  border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px);
+  border-radius: var(--seki-radius-sm, 4px) 0 0 var(--seki-radius-sm, 4px);
 }
 
 .seki-calendar__day--range-end {
   background-color: var(--seki-calendar-primary);
   color: var(--seki-calendar-primary-foreground);
-  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
+  border-radius: 0 var(--seki-radius-sm, 4px) var(--seki-radius-sm, 4px) 0;
 }
 
 .seki-calendar__day--range-start.seki-calendar__day--range-end {
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--seki-radius-sm, 4px);
 }
 
 /* Focused (keyboard navigation) */

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

@@ -10,7 +10,7 @@ import { h } from "@stencil/core";
  */
 export class CardAction {
     render() {
-        return (h("div", { key: '0ef278fc8e115cf8c8f9f0d5609b8201b5f2ab1c', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '8f3340c820a1bc5789a6f0c774a27455dc64cd25' })));
+        return (h("div", { key: '01343b8deb203ec5172610a73f29e9fe4d20ceb2', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '6f5728fa2ff08aefd1d3634dead19c33848fbd0e' })));
     }
     static get is() { return "seki-card-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h("div", { key: 'e33c2d3f498fbd86ba04cb69c851373c4f7af690', class: `card-content ${this.class || ''}` }, h("slot", { key: '926a870d46dbdaeb55c325c64a7566556ed2fa9c' })));
+        return (h("div", { key: '1d152f71dc2cf23e615ca3d10a81ffa69f214652', class: `card-content ${this.class || ''}` }, h("slot", { key: '75e7cbf018c82809d23ad4095546af2cd5a01823' })));
     }
     static get is() { return "seki-card-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ import { h } from "@stencil/core";
  */
 export class CardDescription {
     render() {
-        return (h("p", { key: '97dd8731a1bce2a10164e7dc24919bf0352afbfe', class: `card-description ${this.class || ''}` }, h("slot", { key: '5090b3e4022729fb4fcda1508e153818fe5c5d95' })));
+        return (h("p", { key: 'ee8b90fa83c09c1170e8e983f94ddbb249c0cefa', class: `card-description ${this.class || ''}` }, h("slot", { key: 'b67b1c43b769b70b23ea883d7b839f9935ed58ab' })));
     }
     static get is() { return "seki-card-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class CardFooter {
         this.alignment = 'flex-start';
     }
     render() {
-        return (h("footer", { key: '9783db8558ae190ae2454df9feeee1ecacbbbc60', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '7e029f52d42a2f82f2f3f35a15ddec8608e2c7cb' })));
+        return (h("footer", { key: '6b19ac36822ab00c916557f798683526518eb009', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '10e4ad24216317524cfae114fb1e9c05f90842c3' })));
     }
     static get is() { return "seki-card-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ import { h } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h("header", { key: 'c7944129e0bdebbadb31398c4c470a6aec05f4c0', class: `card-header ${this.class || ''}` }, h("slot", { key: 'd34a614f53ce00ba9738dc19c779b2ec14c21a2a' })));
+        return (h("header", { key: 'e617d4bd27f67bc41edb9c2705c956e314048874', class: `card-header ${this.class || ''}` }, h("slot", { key: '986906e925a6d1b735971fdb07c718693504ae65' })));
     }
     static get is() { return "seki-card-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -770,14 +770,14 @@
   --seki-card-text-color: var(--color-text-primary, #1f2937);
   --seki-card-text-secondary: var(--color-text-secondary, #6b7280);
   --seki-card-padding: clamp(0.75rem, 4vw, 1.5rem);
-  --seki-card-border-radius: 0.5rem;
+  --seki-card-border-radius: var(--seki-radius-lg, 0.5rem);
   --seki-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   --seki-card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
   --seki-card-header-padding: clamp(0.75rem, 4vw, 1.5rem);
   --seki-card-content-padding: clamp(0.75rem, 4vw, 1.5rem);
   --seki-card-footer-padding: clamp(0.75rem, 4vw, 1.5rem);
   --seki-card-title-font-size: 1.5rem;
-  --seki-card-title-font-weight: 600;
+  --seki-card-title-font-weight: var(--seki-font-weight-semibold, 600);
   --seki-card-title-color: var(--seki-card-text-color);
   --seki-card-description-font-size: 0.875rem;
   --seki-card-description-color: var(--seki-card-text-secondary);

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

@@ -13,7 +13,7 @@ import { h } from "@stencil/core";
  */
 export class Card {
     render() {
-        return (h("section", { key: '8daade9abdf02787586072112555e189dcb81da2', class: this.class }, h("slot", { key: 'ba888b8c4c687df4d9f9d4486b7f1d83ecf1d4a9' })));
+        return (h("section", { key: 'fb7f38217354b898038ef588476e8163f378f4c1', class: this.class }, h("slot", { key: 'a875303ebc48eaa0f8bc5bc21d92aa32ef3a589f' })));
     }
     static get is() { return "seki-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel-content {
+  display: flex;
+  gap: var(--seki-carousel-gap, 1rem);
+  touch-action: pan-y pinch-zoom;
+  margin-left: calc(var(--seki-carousel-gap, 1rem) * -1);
+}
+
+/* Ensure items don't shrink */
+.carousel-content ::slotted(*) {
+  flex: 0 0 auto;
+  min-width: 0;
+}

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

@@ -0,0 +1,24 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Container for carousel slides. This component serves as the viewport
+ * for the Embla carousel.
+ *
+ * @slot - Carousel items (seki-carousel-item)
+ */
+export class SekiCarouselContent {
+    render() {
+        return (h(Host, { key: 'e8ba3c9a4ef861336d66954dbc13a0250520c590', class: "carousel-content-host" }, h("div", { key: '2e0520a2e279509d3f5ae38745cc41df4cf5b02f', class: "carousel-content" }, h("slot", { key: 'a43f5a1ea69ce53f4a9cc18ac9f0a7dbc1268399' }))));
+    }
+    static get is() { return "seki-carousel-content"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-carousel-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-carousel-content.css"]
+        };
+    }
+}

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

@@ -0,0 +1,57 @@
+:host {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding-top: 0.75rem;
+}
+
+.carousel-dots__container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--seki-carousel-dot-gap, 0.5rem);
+}
+
+.carousel-dots__dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.carousel-dots__dot:hover {
+  transform: scale(1.2);
+}
+
+.carousel-dots__dot:focus-visible {
+  outline: 2px solid var(--seki-color-ring, #3b82f6);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+.carousel-dots__dot-inner {
+  display: block;
+  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);
+  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);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .carousel-dots__dot,
+  .carousel-dots__dot-inner {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,110 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Dot indicators for carousel navigation.
+ * Automatically syncs with parent seki-carousel.
+ */
+export class SekiCarouselDots {
+    constructor() {
+        this.selectedIndex = 0;
+        this.scrollSnapCount = 0;
+        this.parentCarousel = null;
+        this.unsubscribe = null;
+        this.handleSlideChange = async () => {
+            await this.updateState();
+        };
+        this.handleDotClick = async (index) => {
+            if (!this.parentCarousel)
+                return;
+            await this.parentCarousel.goToSlide(index);
+        };
+        this.handleKeyDown = (event, index) => {
+            var _a, _b;
+            const dots = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.carousel-dots__dot');
+            if (!dots)
+                return;
+            let targetIndex = null;
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    targetIndex = index > 0 ? index - 1 : this.scrollSnapCount - 1;
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    targetIndex = index < this.scrollSnapCount - 1 ? index + 1 : 0;
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    targetIndex = 0;
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    targetIndex = this.scrollSnapCount - 1;
+                    break;
+            }
+            if (targetIndex !== null) {
+                (_b = dots[targetIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                this.handleDotClick(targetIndex);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.findParentCarousel();
+    }
+    componentDidLoad() {
+        this.subscribeToCarousel();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    findParentCarousel() {
+        this.parentCarousel = this.el.closest('seki-carousel');
+    }
+    async subscribeToCarousel() {
+        if (!this.parentCarousel)
+            return;
+        // Initial state
+        await this.updateState();
+        // Listen for slide changes
+        this.parentCarousel.addEventListener('seki-slide-change', this.handleSlideChange);
+        this.unsubscribe = () => {
+            var _a;
+            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('seki-slide-change', this.handleSlideChange);
+        };
+    }
+    async updateState() {
+        if (!this.parentCarousel)
+            return;
+        const context = await this.parentCarousel.getContext();
+        this.selectedIndex = context.selectedIndex;
+        this.scrollSnapCount = context.scrollSnapCount;
+    }
+    render() {
+        const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
+        return (h(Host, { key: '94362738e93936733be8af0e087772cfeea490f1', class: "carousel-dots" }, h("div", { key: '0b69b089634ee151104b1586bd5ed50b4b56b981', 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" })))))));
+    }
+    static get is() { return "seki-carousel-dots"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-carousel-dots.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-carousel-dots.css"]
+        };
+    }
+    static get states() {
+        return {
+            "selectedIndex": {},
+            "scrollSnapCount": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding-left: var(--seki-carousel-gap, 1rem);
+}
+
+/* Ensure images and content fill the item */
+:host ::slotted(img) {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}

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

@@ -0,0 +1,54 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Individual carousel slide item.
+ *
+ * @slot - Slide content (images, cards, any content)
+ */
+export class SekiCarouselItem {
+    constructor() {
+        /**
+         * Width of the item as CSS flex-basis.
+         * Examples: '100%' (full width), '50%' (half), '33.33%' (third)
+         */
+        this.basis = '100%';
+    }
+    render() {
+        return (h(Host, { key: '54a39ec4d98934294fe9351d1f7ff5a05fe6cd13', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: 'f3bad935c7602fd9f6e5fb1180dd4a72751402f4' })));
+    }
+    static get is() { return "seki-carousel-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-carousel-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-carousel-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "basis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the item as CSS flex-basis.\nExamples: '100%' (full width), '50%' (half), '33.33%' (third)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "basis",
+                "defaultValue": "'100%'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,78 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+:host(.carousel-nav--prev) {
+  left: 0.5rem;
+}
+
+:host(.carousel-nav--next) {
+  right: 0.5rem;
+}
+
+.carousel-nav__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--seki-carousel-arrow-size, 2.5rem);
+  height: var(--seki-carousel-arrow-size, 2.5rem);
+  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);
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-nav__button:hover:not(:disabled) {
+  background: var(--seki-carousel-arrow-bg-hover, rgba(255, 255, 255, 0.95));
+  transform: scale(1.05);
+}
+
+.carousel-nav__button:focus-visible {
+  outline: 2px solid var(--seki-color-ring, #3b82f6);
+  outline-offset: 2px;
+}
+
+.carousel-nav__button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.carousel-nav__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+/* Responsive: hide on very small screens if needed */
+@media (max-width: 480px) {
+  :host(.carousel-nav--prev) {
+    left: 0.25rem;
+  }
+
+  :host(.carousel-nav--next) {
+    right: 0.25rem;
+  }
+
+  .carousel-nav__button {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .carousel-nav__icon {
+    width: 1rem;
+    height: 1rem;
+  }
+}