@sekiui/elements 0.0.60 → 0.0.61

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

@@ -0,0 +1,125 @@
+/* Breadcrumb Component Styles with Design Tokens */
+
+/* Root breadcrumb styles */
+:host {
+  --seki-breadcrumb-text-color: var(--color-text-secondary, hsl(220 9% 46%));
+  --seki-breadcrumb-link-color: var(--color-text-primary, hsl(220 9% 20%));
+  --seki-breadcrumb-link-hover: var(--color-primary, hsl(220 90% 56%));
+  --seki-breadcrumb-separator-color: var(--color-text-muted, hsl(220 9% 64%));
+  --seki-breadcrumb-font-size: var(--seki-font-size-sm, 14px);
+  --seki-breadcrumb-font-family: var(--seki-font-sans, system-ui, -apple-system, sans-serif);
+  --seki-breadcrumb-gap: 0.375rem;
+
+  display: block;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-breadcrumb-text-color: var(--color-text-secondary-dark, hsl(215 20% 65%));
+  --seki-breadcrumb-link-color: var(--color-text-primary-dark, hsl(215 20% 85%));
+  --seki-breadcrumb-link-hover: var(--color-primary-dark, hsl(220 90% 70%));
+  --seki-breadcrumb-separator-color: var(--color-text-muted-dark, hsl(215 20% 45%));
+}
+
+/* Nav wrapper */
+.seki-breadcrumb {
+  font-family: var(--seki-breadcrumb-font-family);
+  font-size: var(--seki-breadcrumb-font-size);
+}
+
+/* Breadcrumb list - ordered list */
+.seki-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--seki-breadcrumb-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Breadcrumb item */
+.seki-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--seki-breadcrumb-gap);
+}
+
+/* Breadcrumb link */
+.seki-breadcrumb-link {
+  color: var(--seki-breadcrumb-text-color);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.seki-breadcrumb-link:hover {
+  color: var(--seki-breadcrumb-link-hover);
+}
+
+.seki-breadcrumb-link:focus-visible {
+  outline: 2px solid var(--seki-breadcrumb-link-hover);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Breadcrumb page (current) */
+.seki-breadcrumb-page {
+  color: var(--seki-breadcrumb-link-color);
+  font-weight: var(--seki-font-weight-normal, 400);
+}
+
+/* Breadcrumb separator */
+.seki-breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--seki-breadcrumb-separator-color);
+}
+
+.seki-breadcrumb-separator svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+/* Breadcrumb ellipsis */
+.seki-breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  color: var(--seki-breadcrumb-text-color);
+}
+
+.seki-breadcrumb-ellipsis svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Screen reader only text */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-breadcrumb-link:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-breadcrumb-link {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+/**
+ * seki-breadcrumb: Root breadcrumb navigation component
+ *
+ * @component Breadcrumb
+ * @example
+ * <seki-breadcrumb>
+ *   <seki-breadcrumb-list>
+ *     <seki-breadcrumb-item>
+ *       <seki-breadcrumb-link href="/">Home</seki-breadcrumb-link>
+ *     </seki-breadcrumb-item>
+ *     <seki-breadcrumb-separator></seki-breadcrumb-separator>
+ *     <seki-breadcrumb-item>
+ *       <seki-breadcrumb-page>Current</seki-breadcrumb-page>
+ *     </seki-breadcrumb-item>
+ *   </seki-breadcrumb-list>
+ * </seki-breadcrumb>
+ */
+export class SekiBreadcrumb {
+    constructor() {
+        /**
+         * Accessible label for the breadcrumb navigation
+         * @default 'breadcrumb'
+         */
+        this.label = 'breadcrumb';
+    }
+    render() {
+        return (h("nav", { key: '7923bd2be234aca8cfc32e1d371429afcb6c1f77', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: '4f0cc62f86861d4258ef2f779dd660cb487a7ac8' })));
+    }
+    static get is() { return "seki-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'breadcrumb'"
+                        }],
+                    "text": "Accessible label for the breadcrumb navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'breadcrumb'"
+            }
+        };
+    }
+}

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

@@ -27,7 +27,7 @@ export class SekiButton {
         }
     }
     render() {
-        return (h("button", { key: 'eba484240223b23f2c9f8451469563c8b2a2b721', 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: 'c7e517bad5cb9aa1e4551cfdbd13eb694bba5e74' })));
+        return (h("button", { key: '38c49bea12a1dded4609cd64bd397e53c58e6014', 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: '127f27a6236b0fc6b9f75124a425aca109f9fed4' })));
     }
     static get is() { return "seki-button"; }
     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: '6d74ea64e9fe16be4c1a5fc47f9700e0185e8065', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: 'f9e4c2f3a379e4eed04cabd6b33f3f135679736f' })));
+        return (h("div", { key: '9624fe74a63be86c764c0289c8794f8f53cab0d0', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '6c83e39d38c3794fa030ae023e473cbaebd89bf6' })));
     }
     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: 'dc9863c8b3531a0c05a123d1c731e1272ec765e5', class: `card-content ${this.class || ''}` }, h("slot", { key: '70f5a7763b4535ec00c4217be20e736337b9d0c8' })));
+        return (h("div", { key: '6268ce1ecc77abd5fb65fd8602966f0428648770', class: `card-content ${this.class || ''}` }, h("slot", { key: '01c4ec17c1ad4d1880b60a5e0c2dac4c9cb2af35' })));
     }
     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: '22e17f410c6477b78672e9aba290146bc1aff08d', class: `card-description ${this.class || ''}` }, h("slot", { key: '5ad381a3fd6f95df6d7169ddccaaa3d8b06f595b' })));
+        return (h("p", { key: '50fab4e16bf3eb6f7e15b9699c042e60e63ef82c', class: `card-description ${this.class || ''}` }, h("slot", { key: '604955c4e41d4401684b0b0cff7c298850670830' })));
     }
     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: 'c1eaf8b8cf883b76a39f8b287e2bd1fc5ded5b88', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '560e5b71a9c15203cfd1d5c2b7dce8147e2cfe63' })));
+        return (h("footer", { key: '2391b4b3f62ed8c63e887913b5c1040f5f17baa2', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'a2ebbf322b5e332c682595f5bcbaf91de2e7b0a9' })));
     }
     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: 'fea2758f200ff78d22cf6bf02ce66f0f19f1aa43', class: `card-header ${this.class || ''}` }, h("slot", { key: 'd42f9f44cec692bc9187c64cf966a3391456f37a' })));
+        return (h("header", { key: 'bd96b2fed91554baab84bf0401ac4d02cef78581', class: `card-header ${this.class || ''}` }, h("slot", { key: '2f78099e1467bdcede557cdaf4e84d942fff682f' })));
     }
     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: '07a56984cb773a407f9a2c102cfaa7017e88a82c', class: this.class }, h("slot", { key: '782f7134eb3c57bbec1cfedce91bdd4ebc9b802d' })));
+        return (h("section", { key: 'e923b22f0199ddbd0aea89bc75eaa9142770491b', class: this.class }, h("slot", { key: '55135243be3f0dcbb0cd7b1c160364d204736bea' })));
     }
     static get is() { return "seki-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '368ce17a5c83bb70a72b1b4633f2c4354ce70662', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '02f59f52887c2e37042cb10b9cfc321e30cda93e', class: "field" }, h("div", { key: '7ffeab10176792fb2ade522fdf41adb386d027e7', class: "field-label" }, h("slot", { key: 'a472aa684cbe1e7e7841ff5ac224a2fc36d8d89e', name: "label" })), h("div", { key: '8c9b20d9382b0e9eaec53b769c98c73df01043b6', class: "field-control" }, h("slot", { key: 'c58c728cd6728217e77109ed1e7cbb333bd67bc5' })), h("div", { key: '77d1da52fbb55440652f3904962e3fa370b384dc', class: "field-description" }, h("slot", { key: 'f260220579faa7eaf25e889d417b10505f177b32', name: "description" })), h("div", { key: 'ccf6a599eff2684de07580c0b6fe954667cec138', class: "field-error" }, h("slot", { key: '74ed70df1ee6b688eb924cd7d6c2a66037d51067', name: "error" })))));
+        return (h(Host, { key: 'f3a647b44f6e6cdefebfb0dcc1bf8dad0eeac809', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '90b4dea0201e50d4d5d7412849ee509c7303a6a2', class: "field" }, h("div", { key: 'ce62a386dca006c0b73df49dd4ca700612c968a0', class: "field-label" }, h("slot", { key: '835c99c63b883493725478f91ce18941e148c605', name: "label" })), h("div", { key: 'a1e48c3f88ca68d3016db5c41c4119bc429e724f', class: "field-control" }, h("slot", { key: '10f0f627f36fc9a4b10bf837a1368ab54e7e99c1' })), h("div", { key: 'ad41ab4f324c401e0ebdd321e980e7ff79d0e6ce', class: "field-description" }, h("slot", { key: '0b224e8376545c18ecf3519e9dc3b9800ad3f70f', name: "description" })), h("div", { key: '305738e893aae3afe6b227f18cb421b408d082a5', class: "field-error" }, h("slot", { key: '55d8751da769c191a43797ef8145566be8f169f9', name: "error" })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: '9207d00423c0e63903b843ca2bf0f219e8258222', id: this.componentId, class: "description" }, h("slot", { key: '47042f04a096a1263cc748d49d58a421099f7203' })));
+        return (h("div", { key: '1e9c71c71b85cafe379a2fea13ddb5ad729ff588', id: this.componentId, class: "description" }, h("slot", { key: '92cfc5d4e834ec82252b1f86f359b65880714503' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-error/seki-field-error.js

@@ -49,7 +49,7 @@ export class SekiFieldError {
     }
     render() {
         const style = this.visible ? {} : { display: 'none' };
-        return (h("div", { key: '7eb660083bc38443e4d73bb919626c17ce9eabf7', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '569eaa343aabd80c6a18786f223169d633fa5610' })));
+        return (h("div", { key: '9bde8fbbc4cd7be373a7c753f40b876b06b37ea0', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'c89ee4466dfa36bbdd2a1b586206ca97fdaca33c' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SekiFieldGroup {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: '4cbd65661fa58e524a15802ce1a0377b120e5045', class: "field-group", style: style }, h("slot", { key: '49616f178252d036264a66fdbbcee072c2ca1a1b' })));
+        return (h("div", { key: '7362234ed36f196cf58d5c5a259c226466f668ab', class: "field-group", style: style }, h("slot", { key: '0dccef3a8e0bb25de4765c6f2174f31c771186d5' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/seki-field-label.js

@@ -9,7 +9,7 @@ export class SekiFieldLabel {
     }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'a1293c16a38e5d2567303e642028340491bed83f' }, labelProps), h("slot", { key: '135b2681a5a17faed38ec5ce5af424720789712d' }), this.required && h("span", { key: '7a59489dd34c69cc4cea88772e3fed588bf25737', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: '5ac3e20bcd8766d94cf8087e190c198b811b006d' }, labelProps), h("slot", { key: 'b0c59d2f4eb50457551bbea3c2dec56e807ba76e' }), this.required && h("span", { key: '9f97b0a46495c104ae42621883830085ef9ecd85', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-legend/seki-field-legend.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: '1f3179326f79d2a892ffd995f92f52da0fb274bc' }, h("slot", { key: 'c1676d420920c365c3e14002de7e9ac73dc2f068' })));
+        return (h("legend", { key: 'cd4192deb3885481b0ae0f8dc9b2b9bd3906ff0c' }, h("slot", { key: '287e4fe8b9e5d0f5b7828da40ab00cd59a35d548' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: 'bea8b53e93bdeed59d987ba95e299d4adbe1dc00', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'e62dd293f164c79a55ff89ac2664e4bc5db59d12', name: "legend" }), h("div", { key: 'ff082d64f543988644c742fe39cd70bcec5bf061', class: "fieldset-content" }, h("slot", { key: '4a65b5b6421e0ba04d02f471ac758ba60b6eeda5' }))));
+        return (h("fieldset", { key: '34285dac5da09f995bfafbcac4ba1ee83e54aab0', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '34fc56641ddf0674209bc9741d7deb30962107e5', name: "legend" }), h("div", { key: 'cad20f6bebb5eda89d7d89b9e53fb67624748ace', class: "fieldset-content" }, h("slot", { key: 'e04fd7ca908dc7ba8c740fc15b67f1068230dcdf' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: 'c01552f831d8630ee52f84c54ed7aaffe65ea56e', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'cc7ba7d2045db928a5002702359f2af6b9b46362', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-content: Content container for pagination items
+ *
+ * @component PaginationContent
+ */
+export class SekiPaginationContent {
+    render() {
+        return (h("ul", { key: '1535dad40e5e2b3d7fc31cfc94f71353a20937df', class: "seki-pagination-content", part: "content" }, h("slot", { key: '8bacb2e13f3f0b4a2a95b3ddfa7700a1e335b05e' })));
+    }
+    static get is() { return "seki-pagination-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-ellipsis: Visual indicator for skipped pages
+ *
+ * @component PaginationEllipsis
+ */
+export class SekiPaginationEllipsis {
+    render() {
+        return (h("span", { key: '9a9fc21af9442c16c209bc59f2b4b94090d86cb3', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'dd5f6ce2c7b60635a141353e9ba63331dca91316', 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: '05d5089ebfe256de3ea419840968667cfa5baa05', cx: "12", cy: "12", r: "1" }), h("circle", { key: 'ee6e8aca2f67d6aed1e3a8d82303dac1c3f2deab', cx: "19", cy: "12", r: "1" }), h("circle", { key: '6e59711fa2589088ee0773378e511f15190094f6', cx: "5", cy: "12", r: "1" })), h("span", { key: '29c5afcfb7e11381200ffa550cad0eb7e0085f5d', class: "sr-only" }, "More pages")));
+    }
+    static get is() { return "seki-pagination-ellipsis"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-item: Individual pagination item wrapper
+ *
+ * @component PaginationItem
+ */
+export class SekiPaginationItem {
+    render() {
+        return (h("li", { key: 'a58aef65168e39720ff40cd00a9cee9d3a4ed102', class: "seki-pagination-item", part: "item" }, h("slot", { key: 'd887cb0dbb35994712c41bd8521cfa6b37f92109' })));
+    }
+    static get is() { return "seki-pagination-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

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

@@ -0,0 +1,101 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-link: Clickable page number link
+ *
+ * @component PaginationLink
+ */
+export class SekiPaginationLink {
+    constructor() {
+        /**
+         * Whether this link represents the current/active page
+         */
+        this.active = false;
+        /**
+         * Disables the link
+         */
+        this.disabled = false;
+    }
+    render() {
+        const Tag = this.href && !this.disabled ? 'a' : 'span';
+        return (h(Tag, { key: 'daafd140f5bd5699994ff2d21c25527ee710c53e', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
+                'seki-pagination-link': true,
+                'seki-pagination-link--active': !!this.active,
+                'seki-pagination-link--disabled': !!this.disabled,
+            }, part: "link" }, h("slot", { key: 'dc53ea38a64511be8dc65f4114e11cf3ee78212e' })));
+    }
+    static get is() { return "seki-pagination-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the pagination link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this link represents the current/active page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,77 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-next: Next page navigation button
+ *
+ * @component PaginationNext
+ */
+export class SekiPaginationNext {
+    constructor() {
+        /**
+         * Disables the button
+         */
+        this.disabled = false;
+    }
+    render() {
+        const Tag = this.href && !this.disabled ? 'a' : 'span';
+        return (h(Tag, { key: 'bcd8e5de903f8a92b4ecc81645e5274dbc53565d', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+                'seki-pagination-link': true,
+                'seki-pagination-nav': true,
+                'seki-pagination-link--disabled': !!this.disabled,
+            }, part: "next" }, h("span", { key: '64dfa788b1bf29ce5eb2e8c32b4e58786d23a88b' }, "Next"), h("svg", { key: 'ad6ad6ff9cad77554cec1b38420876e779be7789', 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", { key: '71d13e4c0baf4cc188ad4b41cd4f91ad428aaf88', d: "m9 18 6-6-6-6" }))));
+    }
+    static get is() { return "seki-pagination-next"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the next page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}