@sekiui/elements 0.1.2 → 0.1.4

package/dist/collection/components/alert-dialog/seki-alert-dialog-content.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { trapFocus, focusFirst } from "../../utils/dialog/focus-trap";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Alert Dialog Content Component
  *
@@ -14,6 +15,11 @@ import { trapFocus, focusFirst } from "../../utils/dialog/focus-trap";
  */
 export class SekiAlertDialogContent {
     constructor() {
+        this.alertDialogConsumer = new ContextConsumer('seki-alert-dialog', '_alertDialogContext', () => this.onAlertDialogOpenChange());
+        /**
+         * Re-read the parent's context. Runs once on connect (picking up an alert
+         * dialog that is already open) and on every publish.
+         */
         this.onAlertDialogOpenChange = () => {
             var _a, _b;
             const context = this.getContext();
@@ -57,23 +63,10 @@ export class SekiAlertDialogContent {
      * Get context from parent alert dialog
      */
     getContext() {
-        const alertDialog = this.el.closest('seki-alert-dialog');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return alertDialog ? alertDialog._alertDialogContext : null;
+        return this.alertDialogConsumer.context;
     }
-    componentWillRender() {
-        var _a, _b;
-        const context = this.getContext();
-        const wasOpen = this._isOpen;
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-        // Save focus reference when opening
-        if (!wasOpen && this._isOpen) {
-            this.previousActiveElement = document.activeElement;
-        }
-        // Restore focus when closing
-        if (wasOpen && !this._isOpen) {
-            (_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus();
-        }
+    connectedCallback() {
+        this.alertDialogConsumer.connect(this.el);
     }
     componentDidRender() {
         if (this._isOpen && this.contentRef) {
@@ -85,12 +78,6 @@ export class SekiAlertDialogContent {
             });
         }
     }
-    componentDidLoad() {
-        var _a, _b;
-        // Listen for context changes from parent
-        this.alertDialogEl = (_a = this.el.closest('seki-alert-dialog')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.alertDialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onAlertDialogOpenChange);
-    }
     handleKeyDown(event) {
         if (!this._isOpen)
             return;
@@ -108,8 +95,7 @@ export class SekiAlertDialogContent {
         }
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.alertDialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onAlertDialogOpenChange);
+        this.alertDialogConsumer.disconnect();
     }
     render() {
         if (!this._isOpen) {

package/dist/collection/components/alert-dialog/seki-alert-dialog-trigger.js

@@ -22,7 +22,7 @@ export class SekiAlertDialogTrigger {
         };
     }
     render() {
-        return (h(Host, { key: '0499389901b9763d8e71a29c51d677393c52b3d5' }, h("span", { key: 'c5cd138d39c18db66dca14acd3e92aba17172508', part: "trigger", class: "trigger", role: "button", tabindex: "0", "aria-haspopup": "dialog", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'cc9487e7afa45d1a734bb896fae26754e68a1fa3' }))));
+        return (h(Host, { key: '756dfeba5b6caaf6c85fd4758d2781ecdb088034' }, h("span", { key: '893195d2de52fc3cf9379c1d35d089adca9875d0', part: "trigger", class: "trigger", role: "button", tabindex: "0", "aria-haspopup": "dialog", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'd85b47c24f7b28c4eafef848bf9fcffe71af88e0' }))));
     }
     static get is() { return "seki-alert-dialog-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/alert-dialog/seki-alert-dialog.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Alert Dialog root component for confirmation dialogs
  *
@@ -31,6 +32,9 @@ export class SekiAlertDialog {
     }
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
+        // Publish before the first render so `<seki-alert-dialog open>` shows its
+        // content at first paint (#323).
+        this.updateContext();
     }
     openChanged(newValue) {
         var _a, _b;
@@ -71,17 +75,10 @@ export class SekiAlertDialog {
         };
     }
     updateContext() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._alertDialogContext = this.getContext();
-    }
-    componentDidLoad() {
-        this.updateContext();
-    }
-    componentDidUpdate() {
-        this.updateContext();
+        publishContext(this.el, '_alertDialogContext', this.getContext(), this.alertDialogContextChange);
     }
     render() {
-        return (h(Host, { key: '3641646993b17c6f7fff497ea8fc2fe20ffe938e', "data-state": this._isOpen ? 'open' : 'closed' }, h("seki-dialog", { key: 'b86b59b13347082b02a6e4db6a02b092a5f01dc1', ref: (el) => (this.dialogRef = el), open: this._isOpen, modal: true, onSekiOpenChange: this.handleOpenChange }, h("slot", { key: '4765d9f6abd361622e11f97d1c88ced5f95a73ca' }))));
+        return (h(Host, { key: 'f72986a610922423c3c4b59fd96612924d831333', "data-state": this._isOpen ? 'open' : 'closed' }, h("seki-dialog", { key: '153c7b3e814d0d032ae6c3005c2686e209270f34', ref: (el) => (this.dialogRef = el), open: this._isOpen, modal: true, onSekiOpenChange: this.handleOpenChange }, h("slot", { key: '98963ad9cd86e70f8727686b8cbe1cf59bbc6d1b' }))));
     }
     static get is() { return "seki-alert-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +157,21 @@ export class SekiAlertDialog {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "alertDialogContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies alert dialog parts that `_alertDialogContext` changed.\nNot part of the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/aspect-ratio/seki-aspect-ratio.js

@@ -28,7 +28,7 @@ export class SekiAspectRatio {
     render() {
         const safeRatio = this.getSafeRatio();
         const paddingBottom = `${(1 / safeRatio) * 100}%`;
-        return (h(Host, { key: 'ce5ba9c8cced36fb306f775dab3705315c7c34e1' }, h("div", { key: '37ca78286cd55f56be36b4815a8d62e896e6d15c', part: "container", class: "aspect-ratio", style: { paddingBottom } }, h("div", { key: '33c418ac3adc2be22cc8fa9d1ef80d99e0209cc0', class: "aspect-ratio__content" }, h("slot", { key: '44cd8b60041bd39c022af66468da8c83abd0e16e' })))));
+        return (h(Host, { key: '283e7a8f471da88aa6af4f3de5abcaf45a8dfce2' }, h("div", { key: '7f16696ff4287a7c399a67b94f4f36156a884cd5', part: "container", class: "aspect-ratio", style: { paddingBottom } }, h("div", { key: '46f734ae1c4e11282b0161d9921abd063a08a709', class: "aspect-ratio__content" }, h("slot", { key: '2898264781f193e28fe4aea3daab2e9e8af1278f' })))));
     }
     static get is() { return "seki-aspect-ratio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { activateFormButton } from "../../utils/form-control";
 /**
  * seki-attachment-action: Icon button for a `seki-attachment` (remove,
  * download, retry, …).
@@ -28,6 +29,9 @@ export class SekiAttachmentAction {
          */
         this.type = 'button';
     }
+    handleClick(event) {
+        activateFormButton(event, this.type, this.internals, this.disabled);
+    }
     componentWillLoad() {
         if (!this.label) {
             console.warn('[seki-attachment-action] Missing `label`. Icon-only actions require an ' +
@@ -35,10 +39,11 @@ export class SekiAttachmentAction {
         }
     }
     render() {
-        return (h(Host, { key: '517a6e5d09b007e39cbec606a33b0b7f1d2ce2c7' }, h("button", { key: '4a0b202a10eaf1754c376a8eabdea742f0a43d42', class: "action", part: "button", type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.label }, h("slot", { key: '67f4dc325935b5b04508aa079b4f306416051f6d' }))));
+        return (h(Host, { key: 'c7c593b9f7789ec8c4f0747499eea28b56be8336' }, h("button", { key: 'abeef953dfadd1ebc2d853f5c73ff2722c999328', class: "action", part: "button", type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.label }, h("slot", { key: '7eddf00b2b56efad89d2ad8266fcfc53956358e3' }))));
     }
     static get is() { return "seki-attachment-action"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-attachment-action.css"]
@@ -119,4 +124,14 @@ export class SekiAttachmentAction {
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/attachment/seki-attachment-actions.js

@@ -17,7 +17,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiAttachmentActions {
     render() {
-        return (h(Host, { key: '6dfc619fa7d566521aae0583ee639c6d5681e4df' }, h("div", { key: 'f70ec0f1de288f360db379494789fcbc4a743423', class: "actions", part: "actions" }, h("slot", { key: 'c5ece844bfde32cd449440e58b0159daf9fae02b' }))));
+        return (h(Host, { key: '4726b0ea2a11b7dde91bf2219cee5c4af24aa449' }, h("div", { key: '8fc9623925a33687ab584594c8814e82ef0142cf', class: "actions", part: "actions" }, h("slot", { key: '21a7923dfdc6a761bfad600a6c777b6a7900c0aa' }))));
     }
     static get is() { return "seki-attachment-actions"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiAttachmentContent {
     render() {
-        return (h(Host, { key: 'e2187387c8174c0d871045e9ab84f31893fc794b' }, h("div", { key: '0ac6693249a551fb31ef1fbe4f72bb185e2b6db6', class: "content", part: "content" }, h("slot", { key: 'fc4e44d60e4792d8c869f319cf2024b30c01d595' }))));
+        return (h(Host, { key: '9655f21f67882a8314f6fc172a42cb8e8be68d04' }, h("div", { key: '40875c266c3b3979490df4516803e4d84b9a94b9', class: "content", part: "content" }, h("slot", { key: '3d37c780eaca179aebed3f8cadef33e23bffd016' }))));
     }
     static get is() { return "seki-attachment-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiAttachmentDescription {
     render() {
-        return (h(Host, { key: 'c68ec9d987aad56c3ccf77ce7b8a1fe125fd68ec' }, h("div", { key: 'f776f1f3b0eb573d1151bfd2729896ebc5eeb237', class: "description", part: "description" }, h("slot", { key: '3d4f087a78d95cd3188ed63537e7f18c0c60270b' }))));
+        return (h(Host, { key: '1467af37c0b3cc4cc3f2e47bb8ee36ac534638af' }, h("div", { key: '7ddb59cf1fcad1d61cc5f9794e73530f93838d3a', class: "description", part: "description" }, h("slot", { key: '9749c8013f39336255f9e27e0a7f10390636abfe' }))));
     }
     static get is() { return "seki-attachment-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiAttachmentGroup {
     render() {
-        return (h(Host, { key: '0931faf09196e8bed0c873c35cebce1c6ffcd8c5', role: "group", "aria-label": this.label }, h("div", { key: '489b5eb71b2f0aad484217fbca95628d1ca54e42', class: "group", part: "group" }, h("slot", { key: '36ed701ff0753854ee0ec36588ab95d4705086f7' }))));
+        return (h(Host, { key: '803b191f1f458813c674fb80b1c824bd453927ff', role: "group", "aria-label": this.label }, h("div", { key: '9bc1f6f4bd8057201ab87c8bd1c7be8a69cb0001', class: "group", part: "group" }, h("slot", { key: '84fbc9c5626803ab3ce24f5e21b4d2a4b3af718b' }))));
     }
     static get is() { return "seki-attachment-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiAttachmentTitle {
     render() {
-        return (h(Host, { key: 'a247cb4bd44ddc414eefe005307edd7262f31a0f' }, h("div", { key: 'd6272855526cc79b1d104faf715b39d701afc73e', class: "title", part: "title" }, h("slot", { key: 'b5486b23b7e301eeac7a840f40cc7cf05b0f0e5a' }))));
+        return (h(Host, { key: '33c64096eed93cb9d8f84902cfc033c2ea0f295c' }, h("div", { key: '3be3790b0d8229d9ee4e2538928674f9349f0cd2', class: "title", part: "title" }, h("slot", { key: 'd6f5477acf65908a05b3bb9d5a6d28b6ff3182b4' }))));
     }
     static get is() { return "seki-attachment-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/attachment/seki-attachment-trigger.js

@@ -34,7 +34,7 @@ export class SekiAttachmentTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '0a5ab5a57324b2985ddcece0d03774abfe920995' }, h("button", { key: '08cdbccd0c24b0c8581d2a22ac9614649e73b958', class: "trigger", part: "button", type: "button", disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.label })));
+        return (h(Host, { key: '789beaf55b1df60fb98565919cb055af96fd2800' }, h("button", { key: '73ee864a063815d60d8f77f7caed1a022e7db905', class: "trigger", part: "button", type: "button", disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.label })));
     }
     static get is() { return "seki-attachment-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiBreadcrumbEllipsis {
     render() {
-        return (h("span", { key: 'e70d73f22ee6e066820a38c072a18fa5b8591ed4', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-ellipsis", part: "ellipsis" }, h("svg", { key: '4aab36b68cf6acd27f7bfa772b1c263780ce3d04', 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("circle", { key: 'bb8948d02ffd815bf46cc800a1c9a3c45b6b143b', cx: "12", cy: "12", r: "1" }), h("circle", { key: '92fdc4d39056e90c16d22d260f6490b537d5c78a', cx: "19", cy: "12", r: "1" }), h("circle", { key: 'dcf9d6ec93eeb59e24f81edca4c2db081769d427', cx: "5", cy: "12", r: "1" })), h("span", { key: 'c2f836d0c7e0244a2450f1223a3669731e958850', class: "sr-only" }, "More")));
+        return (h("span", { key: 'c0698832bd3e23a837cc19f580533d6b99dfe566', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-ellipsis", part: "ellipsis" }, h("svg", { key: 'bdb070c00b0819f4ff61d21fb4b71bda8e5fb2f7', 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("circle", { key: '9ac114295c47107d98a33567af51eb7fb314708e', cx: "12", cy: "12", r: "1" }), h("circle", { key: '111f8344fb991fa629a1e0dd8bba85fc5d77c110', cx: "19", cy: "12", r: "1" }), h("circle", { key: 'eda55f82599e36df367a8f728e644267034c6fb0', cx: "5", cy: "12", r: "1" })), h("span", { key: '4550671d2afcbea5414a9264cd4874211dc2f978', class: "sr-only" }, "More")));
     }
     static get is() { return "seki-breadcrumb-ellipsis"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiBreadcrumbItem {
     render() {
-        return (h("li", { key: 'e819bfef9e25d4e9ae698683df499ea07f143077', class: "seki-breadcrumb-item", part: "item" }, h("slot", { key: '3be8d9e94fb8d796032c32c165aaf43f029929ed' })));
+        return (h("li", { key: '0f48d1268f7c313b7c5a8aa726a5d14e7b097cff', class: "seki-breadcrumb-item", part: "item" }, h("slot", { key: 'd3562a6aee4ae9aaf19bafe1728a87bd497a1df2' })));
     }
     static get is() { return "seki-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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: 'd16d6f3bb831030fa2339f4b2b46befee3e3826c', href: this.href, target: this.target, class: "seki-breadcrumb-link", part: "link" }, h("slot", { key: '4accfff71980983b206dd39dc1c2112aa8174fce' })));
+        return (h("a", { key: '83ec2956156db1e389e482dd2455a9c900f7dc0d', href: this.href, target: this.target, class: "seki-breadcrumb-link", part: "link" }, h("slot", { key: '1f74c1b2ccb9deb50da6098ebda3ad5f3b64db6b' })));
     }
     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: 'f662a73afb9faa87cba8b52f730fd50a322b8ef2', class: "seki-breadcrumb-list", part: "list" }, h("slot", { key: '0e5b1586f8c42254d59ea6248e278a09b135555c' })));
+        return (h("ol", { key: 'f0d0afb36d72331782b7860d7caa580789219d68', class: "seki-breadcrumb-list", part: "list" }, h("slot", { key: 'ae2d519ed9063c62587a84a96e14541add98ad62' })));
     }
     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: '4181daad1061111fff95815b6afdf8dc5b993782', role: "link", "aria-disabled": "true", "aria-current": "page", class: "seki-breadcrumb-page", part: "page" }, h("slot", { key: '706e736c7138a006321c00eff76bc2382cdb2e9b' })));
+        return (h("span", { key: '33fe8f29c710885a377488707a4eeb3ac3587e35', role: "link", "aria-disabled": "true", "aria-current": "page", class: "seki-breadcrumb-page", part: "page" }, h("slot", { key: '9b749a6bc454104b3d0e7e42dd4236fd9609b610' })));
     }
     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: 'e321cd2853b6edd6be1a108d9347996a381cdb11', 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: '003caa45f78059936fdc8cbe2ffc7cdfe937c0b4', 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: '95424b42cc407ceabd186c75ce879c7af7ddacb5', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: '373dcb82394a27ef400870291bf51c7df4e0afd1' })));
+        return (h("nav", { key: 'b0432210d0e3d2a5116b05ba9dd2cb9ca222b52e', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: '06f898aa9a39ffa1fefdc5c53cd267fa80f00af6' })));
     }
     static get is() { return "seki-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiBubbleContent {
     render() {
-        return (h(Host, { key: '1e4d5b5f35e305f3e5e539b7caf3b7e2f770edeb' }, h("div", { key: '2ea13b118633907b9718af84e565fbb6b9f60790', class: "content", part: "content" }, h("slot", { key: 'de5297a6330986de6c76be8bc9447becd1133be5' }))));
+        return (h(Host, { key: '13e19fca85e408d7b84953fb69229854f939a11a' }, h("div", { key: 'f5d81490b0f563ec87bf060c10988a6a129f6575', class: "content", part: "content" }, h("slot", { key: '5cbbfa343a2b72bdc18fe166084328149a38cc9b' }))));
     }
     static get is() { return "seki-bubble-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiBubbleGroup {
     render() {
-        return (h(Host, { key: '1273ed5dc802a7024891532d05a7afbea8bc30fc' }, h("div", { key: 'affa48ff1e3992cad54976932d2e1e3f6a2e576c', class: "group", part: "group" }, h("slot", { key: '2f0c140f8e1d4720e87d2e2dc4bae80ed3e344b9' }))));
+        return (h(Host, { key: 'a6274157b8c696fd4f8f554a04dd2c0e5ca18efc' }, h("div", { key: 'd4a3bf3ab0941200da726966ee1e2cb63f3c6b8d', class: "group", part: "group" }, h("slot", { key: '064396d2a9d669a6604455abae26c71537fe77ba' }))));
     }
     static get is() { return "seki-bubble-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { activateFormButton } from "../../utils/form-control";
 export class SekiButton {
     constructor() {
         /**
@@ -18,6 +19,9 @@ export class SekiButton {
          */
         this.type = 'button';
     }
+    handleClick(event) {
+        activateFormButton(event, this.type, this.internals, this.disabled);
+    }
     componentWillLoad() {
         // Dev mode warning for missing aria-label on icon-only buttons
         const isIconOnlySize = this.size === 'icon-sm' || this.size === 'icon' || this.size === 'icon-lg';
@@ -27,10 +31,11 @@ export class SekiButton {
         }
     }
     render() {
-        return (h("button", { key: '685e01a2a9193af0e0794d94afb2ab8b683643fb', 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: '5ece87c1b8b623a9aaa2b444acc3f2136468ef98' })));
+        return (h("button", { key: '05a7e03cf991afa220886d10ca52d992e558842c', 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: 'c2d4d215c3f2d0b879ef65b384e3b783f4697ad0' })));
     }
     static get is() { return "seki-button"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-button.css"]
@@ -145,4 +150,14 @@ export class SekiButton {
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -42,10 +42,10 @@ export class SekiButtonGroup {
         });
     }
     render() {
-        return (h(Host, { key: 'a96acffeed3269bdfd7e281c25fcf90a0033c855' }, h("div", { key: 'f3306f4a7ebaf9e2499cd4442c2e56eee6ad29d5', class: {
+        return (h(Host, { key: '8803dd5326124b8fb38acf5c316b931f7b41b411' }, h("div", { key: 'cda7b60f189cfcb3c1b96c41b310ee10c7ce6e75', class: {
                 'button-group': true,
                 [`button-group--${this.orientation}`]: true,
-            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '1dba78e5f3bd5595fe6f1176661ce1b554ff87b7', onSlotchange: () => this.updateChildButtons() }))));
+            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '9bdeddb9d381b4c41af792a418ca3c29e484777b', onSlotchange: () => this.updateChildButtons() }))));
     }
     static get is() { return "seki-button-group"; }
     static get encapsulation() { return "shadow"; }

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: '0283b8c0a43109bd86efbefa35da89dc492c4eab', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: 'dce641688e3dd9adb9ffea87d21629bf00579660' })));
+        return (h("div", { key: '425ed03298cbae0fa57ba231df2b91ae47661b63', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '82ba095024dc5e9ede66586a89dd3b3b13f6892f' })));
     }
     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: '74eff49296161fb2ddc01c89c89a4a2caab2f3a4', class: `card-content ${this.class || ''}` }, h("slot", { key: 'f451c664b89eaf0a0f66f282e5e9b9882515e9d9' })));
+        return (h("div", { key: 'f28a568f4c357e1d0a5d4ffa4ee34dd2815f0134', class: `card-content ${this.class || ''}` }, h("slot", { key: '4566aa37672cae9b273faf9b2b4b78958e7eddcb' })));
     }
     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: '331d258ce5d298bcf3c92a00f97d883dfe92292a', class: `card-description ${this.class || ''}` }, h("slot", { key: '73380a43652c8dd90604596112c07bc68f728364' })));
+        return (h("p", { key: '4b5a4ba12742af7713c43d87aee4b40ed5fc8191', class: `card-description ${this.class || ''}` }, h("slot", { key: 'bc2906286ea0ca7c6d54fc9ca942dc9f1f87dc87' })));
     }
     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: 'c3a595dfc417b0691edd3991511916f6bdcd9925', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '9a009c2b522a60bbf90627932510ce3bfce01c58' })));
+        return (h("footer", { key: 'c411a90d477429ca1a0cc146d3b7340715cb0cd5', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'b49605e15ce186aeb2e78a008123e4927c582fa7' })));
     }
     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: '813f64fb7b956417f431eb835f77b4bdd3f53bcc', class: `card-header ${this.class || ''}` }, h("slot", { key: '980b0db25ac5e9109e93a0ab2d5dd5737d584d04' })));
+        return (h("header", { key: 'df699337f7aa48c43cd25b93701f162c4fa56e72', class: `card-header ${this.class || ''}` }, h("slot", { key: 'b03c5313519bd69e7abbb037f63cb7a488ac703a' })));
     }
     static get is() { return "seki-card-header"; }
     static get encapsulation() { return "shadow"; }

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: '57f75122301f4a7b23874a18909686db5e8cb42a', class: this.class }, h("slot", { key: 'd8f9e8cd66e7cfffb26ce19d0537822af9f305ef' })));
+        return (h("section", { key: '4900d0acf11d8d1e6778e119086b5453c50bec9d', class: this.class }, h("slot", { key: '059d95941c30c6799aadefef8c9d932d7bac814a' })));
     }
     static get is() { return "seki-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCarouselContent {
     render() {
-        return (h(Host, { key: '2ed795aab3ace0020b37fc4aa538f401db74856d', class: "carousel-content-host" }, h("div", { key: 'f5dfff5b4ed31cac0e72bab128e26ea59fa709cf', class: "carousel-content" }, h("slot", { key: '92219191bdd41e8d3eaddb83637ad0b65d64d357' }))));
+        return (h(Host, { key: 'c51da2886b137c940c6c1f94b51cb5d83a6ea07e', class: "carousel-content-host" }, h("div", { key: '5ccc44120e7c27aa3a1b0eea7e8249bc0659d6d1', class: "carousel-content" }, h("slot", { key: 'b830fb110872a0489e3cb0bfd42e381dc3dff92d' }))));
     }
     static get is() { return "seki-carousel-content"; }
     static get encapsulation() { return "scoped"; }

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

@@ -86,7 +86,7 @@ export class SekiCarouselDots {
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (h(Host, { key: 'b763f6b52768681eb32ecab2c931a9cc7e934bbd', class: "carousel-dots" }, h("div", { key: '090d1f346a5e7f0ce3bd99a07b31df4f4711c8b6', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+        return (h(Host, { key: 'ba7d20e42a573cdc43eb4457a93296e9cc94d0d0', class: "carousel-dots" }, h("div", { key: 'd2ebaba1d1fdc6a1fa9d9c033417b7505fded3ce', 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

@@ -13,7 +13,7 @@ export class SekiCarouselItem {
         this.basis = '100%';
     }
     render() {
-        return (h(Host, { key: '75f22e335e45ce20e7b3c1b825110a3bf68b678a', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: '04e6b2f23598b3ffab72f9a0d37cf90bcd2f99f6' })));
+        return (h(Host, { key: '7b6e3eabeedcb73b042a676776809eaceee7e296', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: '7666e0ecf838abb429dfb06c6e28866e4a88f077' })));
     }
     static get is() { return "seki-carousel-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class SekiCarouselNext {
         this.disabled = !context.canScrollNext;
     }
     render() {
-        return (h(Host, { key: '77cad622eb58db78384fb3ede42cd77d3d7654b4', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: 'bd3d5ed7e3617d317658b9c85d2be2e85862188e', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '45f5dfab70e9c5565039e8d925986e083c37ffac', 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: 'bd7b94d433660f5b1a3450a474acfe8f85bc36fc', points: "9 18 15 12 9 6" })))));
+        return (h(Host, { key: '3e9580ad2e7fd152be46658bd1ce5b8ea9858c34', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '31f4c690354887235ff28ffdfb12427a409cdef1', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '63ab340e435f1e3741b4a3302df4b701de7417bf', 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: '4ca2a2ee50ccc878c574cc57b531b7ed1612b754', 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

@@ -50,7 +50,7 @@ export class SekiCarouselPrevious {
         this.disabled = !context.canScrollPrev;
     }
     render() {
-        return (h(Host, { key: '7f8040b6493f1ce6642b04852154d678986cfe9b', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '4059bb5e3aa732a765d2ea78c9619e6b74c25b7d', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '65a625a00190cd83efde4d79b8f9ab8a20a31fd0', 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: '54c568228717b3819f7dd7ed0a0da3c8696f0e67', points: "15 18 9 12 15 6" })))));
+        return (h(Host, { key: '067fa85a1f7912a646a39c4dbab891e74467ea69', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: 'd3568857d419beb3fd611be5a658f1709361e185', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: 'c0962ecbb773310923726c80f3ec12dc452cc0c8', 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: '6761cfc04a57e924773c62c1e0a971a1820bf34d', points: "15 18 9 12 15 6" })))));
     }
     static get is() { return "seki-carousel-previous"; }
     static get encapsulation() { return "shadow"; }