@editora/ui-core 0.2.2 → 0.3.0

package/dist/pagination.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-DxbvhLJs.js"),s=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-CbUsP3D6.js"),d=require("./navigate-ChJVIIuS.js"),b=`
   :host {
     display: inline-flex;
     max-width: 100%;
@@ -39,7 +39,8 @@
     padding: 0 3px;
   }
 
-  button {
+  :is(button, a.page-link) {
+    text-decoration: none;
     padding: var(--ui-pagination-padding);
     border-radius: var(--ui-pagination-radius);
     border: 1px solid var(--ui-pagination-border);
@@ -55,22 +56,22 @@
     transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease, transform 130ms ease;
   }
 
-  button:hover:not(:disabled) {
+  :is(button, a.page-link):hover:not(:disabled) {
     background: var(--ui-pagination-item-bg-hover);
   }
 
-  button:focus-visible {
+  :is(button, a.page-link):focus-visible {
     outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
     outline-offset: var(--ui-ring-offset, 2px);
   }
 
-  button[aria-current="page"] {
+  :is(button, a.page-link)[aria-current="page"] {
     background: var(--ui-pagination-active-bg);
     color: var(--ui-pagination-active-color);
     border-color: var(--ui-pagination-active-bg);
   }
 
-  button:disabled {
+  :is(button, a.page-link):disabled {
     opacity: 0.46;
     cursor: not-allowed;
   }
@@ -103,22 +104,22 @@
     padding: 0;
   }
 
-  :host([variant="flat"]) button,
-  :host([variant="minimal"]) button {
+  :host([variant="flat"]) :is(button, a.page-link),
+  :host([variant="minimal"]) :is(button, a.page-link) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     min-width: 30px;
   }
 
-  :host([variant="flat"]) button:hover:not(:disabled),
-  :host([variant="minimal"]) button:hover:not(:disabled) {
+  :host([variant="flat"]) :is(button, a.page-link):hover:not(:disabled),
+  :host([variant="minimal"]) :is(button, a.page-link):hover:not(:disabled) {
     background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
     border-color: transparent;
   }
 
-  :host([variant="flat"]) button[aria-current="page"],
-  :host([variant="minimal"]) button[aria-current="page"] {
+  :host([variant="flat"]) :is(button, a.page-link)[aria-current="page"],
+  :host([variant="minimal"]) :is(button, a.page-link)[aria-current="page"] {
     background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 16%, transparent);
     color: var(--ui-color-primary, #2563eb);
     border-color: transparent;
@@ -130,12 +131,12 @@
     box-shadow: none;
   }
 
-  :host([variant="outline"]) button {
+  :host([variant="outline"]) :is(button, a.page-link) {
     background: var(--ui-color-surface, #ffffff);
     border-color: var(--ui-pagination-border);
   }
 
-  :host([variant="outline"]) button[aria-current="page"] {
+  :host([variant="outline"]) :is(button, a.page-link)[aria-current="page"] {
     background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff));
     color: var(--ui-color-primary, #2563eb);
     border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 45%, var(--ui-pagination-border));
@@ -149,7 +150,7 @@
     --ui-pagination-border: #334155;
     --ui-pagination-color: #e2e8f0;
     --ui-pagination-muted: #93a4bd;
-    --ui-pagination-active-bg: #93c5fd;
+    --ui-pagination-active-bg: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-pagination-active-color: #0f172a;
     --ui-pagination-shadow: none;
   }
@@ -159,15 +160,15 @@
     padding: 8px;
   }
 
-  :host([variant="solid"]) button,
-  :host([variant="contrast"]) button {
+  :host([variant="solid"]) :is(button, a.page-link),
+  :host([variant="contrast"]) :is(button, a.page-link) {
     border-color: transparent;
   }
 
   :host([headless]) .pagination { display: none; }
 
   @media (prefers-reduced-motion: reduce) {
-    button {
+    :is(button, a.page-link) {
       transition: none !important;
     }
   }
@@ -178,7 +179,7 @@
       box-shadow: none;
     }
 
-    button {
+    :is(button, a.page-link) {
       border-width: 2px;
     }
   }
@@ -196,9 +197,9 @@
       --ui-pagination-shadow: none;
     }
   }
-`;class e extends r.ElementBase{constructor(){super(),this._page=1,this._count=1,this._headless=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["page","count","headless","variant","size","aria-label"]}get page(){return this._page}set page(t){this.goToPage(t)}get count(){return this._count}set count(t){const i=Math.max(1,Number(t)||1);this.setAttribute("count",String(i)),this._page>i&&this.setAttribute("page",String(i))}attributeChangedCallback(t,i,a){(t==="page"||t==="count"||t==="headless")&&(this._page=Math.max(1,Number(this.getAttribute("page"))||1),this._count=Math.max(1,Number(this.getAttribute("count"))||1),this._headless=this.hasAttribute("headless"),this._page>this._count&&(this._page=this._count)),this.requestRender()}render(){if(this._headless){this.setContent("");return}let t="";t+=`<button type="button" data-page="1" aria-label="First" ${this._page===1?"disabled":""}>&laquo;</button>`,t+=`<button type="button" data-page="${this._page-1}" aria-label="Previous" ${this._page===1?"disabled":""}>&lsaquo;</button>`;const i=this._getPageRange(this._page,this._count);i[0]>1&&(t+='<button type="button" data-page="1">1</button>',i[0]>2&&(t+='<span class="ellipsis" aria-hidden="true">…</span>'));for(let n=i[0];n<=i[1];n++)t+=`<button type="button" data-page="${n}" ${n===this._page?'aria-current="page"':""}>${n}</button>`;i[1]<this._count&&(i[1]<this._count-1&&(t+='<span class="ellipsis" aria-hidden="true">…</span>'),t+=`<button type="button" data-page="${this._count}">${this._count}</button>`),t+=`<button type="button" data-page="${this._page+1}" aria-label="Next" ${this._page===this._count?"disabled":""}>&rsaquo;</button>`,t+=`<button type="button" data-page="${this._count}" aria-label="Last" ${this._page===this._count?"disabled":""}>&raquo;</button>`,this.setContent(`
-      <style>${s}</style>
+`;class c extends h.ElementBase{constructor(){super(),this._page=1,this._count=1,this._headless=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["page","count","headless","variant","size","aria-label","href-template"]}get page(){return this._page}set page(t){this.goToPage(t)}get count(){return this._count}set count(t){const i=Math.max(1,Number(t)||1);this.setAttribute("count",String(i)),this._page>i&&this.setAttribute("page",String(i))}attributeChangedCallback(t,i,a){(t==="page"||t==="count"||t==="headless")&&(this._page=Math.max(1,Number(this.getAttribute("page"))||1),this._count=Math.max(1,Number(this.getAttribute("count"))||1),this._headless=this.hasAttribute("headless"),this._page>this._count&&(this._page=this._count)),i!==a&&(this.isConnected?this.render():this.requestRender())}render(){if(this._headless){this.setContent("");return}const t=this.root.activeElement,i=t?.matches?.("[data-page][aria-label]")?`[data-page][aria-label="${t.getAttribute("aria-label")}"]`:t?.matches?.("[data-page]")?'[data-page][aria-current="page"]':"",a=this.getAttribute("href-template")||"",n=(o,g,u={})=>{const l=u.label?` aria-label="${u.label}"`:"",p=u.current?' aria-current="page"':"";return a&&!u.disabled?`<a class="page-link" href="${a.split("{page}").join(String(o)).replace(/"/g,"&quot;")}" data-page="${o}"${l}${p}>${g}</a>`:`<button type="button" data-page="${o}"${l}${p} ${u.disabled?"disabled":""}>${g}</button>`};let e="";e+=n(1,"&laquo;",{label:"First",disabled:this._page===1}),e+=n(this._page-1,"&lsaquo;",{label:"Previous",disabled:this._page===1});const r=this._getPageRange(this._page,this._count);r[0]>1&&(e+=n(1,"1"),r[0]>2&&(e+='<span class="ellipsis" aria-hidden="true">…</span>'));for(let o=r[0];o<=r[1];o++)e+=n(o,String(o),{current:o===this._page});r[1]<this._count&&(r[1]<this._count-1&&(e+='<span class="ellipsis" aria-hidden="true">…</span>'),e+=n(this._count,String(this._count))),e+=n(this._page+1,"&rsaquo;",{label:"Next",disabled:this._page===this._count}),e+=n(this._count,"&raquo;",{label:"Last",disabled:this._page===this._count}),this.setContent(`
+      <style>${b}</style>
       <nav class="pagination" role="navigation" aria-label="${this.getAttribute("aria-label")||"Pagination"}" tabindex="0">
-        ${t}
+        ${e}
       </nav>
-    `);const a=this.root.querySelector(".pagination");a&&(a.removeEventListener("click",this._onClick),a.addEventListener("click",this._onClick),a.removeEventListener("keydown",this._onKeyDown),a.addEventListener("keydown",this._onKeyDown))}goToPage(t){const i=Math.max(1,Math.min(this._count,Number(t)||1));i!==this._page&&this._applyPageChange(i)}nextPage(){this.goToPage(this._page+1)}prevPage(){this.goToPage(this._page-1)}firstPage(){this.goToPage(1)}lastPage(){this.goToPage(this._count)}focusCurrent(){this.root.querySelector('button[aria-current="page"]')?.focus()}_getPageRange(t,i){return i<=5?[1,i]:t<=3?[1,5]:t>=i-2?[i-4,i]:[t-2,t+2]}_onClick(t){const i=t.target.closest("button[data-page]");if(!i||i.hasAttribute("disabled"))return;const a=Number(i.getAttribute("data-page"));isNaN(a)||a<1||a>this._count||a===this._page||this._applyPageChange(a)}_onKeyDown(t){const i=this.root.querySelector(".pagination");if(!i)return;const a=Array.from(i.querySelectorAll("button:not(:disabled)")),n=this.root.activeElement;let o=a.indexOf(n);t.key==="ArrowRight"||t.key==="ArrowDown"?(o=(o+1)%a.length,a[o].focus(),t.preventDefault()):t.key==="ArrowLeft"||t.key==="ArrowUp"?(o=(o-1+a.length)%a.length,a[o].focus(),t.preventDefault()):t.key==="Home"?(a[0].focus(),t.preventDefault()):t.key==="End"&&(a[a.length-1].focus(),t.preventDefault())}_applyPageChange(t){const i=this._page,a=Math.max(1,Math.min(this._count,Number(t)||1));if(a===i)return;const n=a===1&&i!==1?"first":a===this._count&&i!==this._count?"last":a===i-1?"prev":a===i+1?"next":"change";this.setAttribute("page",String(a));const o={page:a,previousPage:i,count:this._count,reason:n};this.dispatchEvent(new CustomEvent(n,{detail:o,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:o,bubbles:!0,composed:!0}))}}typeof customElements<"u"&&!customElements.get("ui-pagination")&&customElements.define("ui-pagination",e);exports.UIPagination=e;
+    `);const s=this.root.querySelector(".pagination");if(s&&(s.removeEventListener("click",this._onClick),s.addEventListener("click",this._onClick),s.removeEventListener("keydown",this._onKeyDown),s.addEventListener("keydown",this._onKeyDown)),i&&!this.root.activeElement){const o=this.root.querySelector(i),g=this.root.querySelector('[data-page][aria-current="page"]');(o&&!o.disabled?o:g)?.focus({preventScroll:!0})}}goToPage(t){const i=Math.max(1,Math.min(this._count,Number(t)||1));i!==this._page&&this._applyPageChange(i)}nextPage(){this.goToPage(this._page+1)}prevPage(){this.goToPage(this._page-1)}firstPage(){this.goToPage(1)}lastPage(){this.goToPage(this._count)}focusCurrent(){this.root.querySelector('[data-page][aria-current="page"]')?.focus()}_getPageRange(t,i){return i<=5?[1,i]:t<=3?[1,5]:t>=i-2?[i-4,i]:[t-2,t+2]}_onClick(t){const i=t.target.closest("[data-page]");if(!i||i.hasAttribute("disabled"))return;const a=Number(i.getAttribute("data-page"));if(!(isNaN(a)||a<1||a>this._count)){if(i instanceof HTMLAnchorElement){if(!d.requestNavigate(this,{href:i.getAttribute("href")||"",page:a,previousPage:this._page},t))return;t.preventDefault()}a!==this._page&&this._applyPageChange(a)}}_onKeyDown(t){const i=this.root.querySelector(".pagination");if(!i)return;const a=Array.from(i.querySelectorAll("button:not(:disabled), a[data-page]")),n=this.root.activeElement;let e=a.indexOf(n);t.key==="ArrowRight"||t.key==="ArrowDown"?(e=(e+1)%a.length,a[e].focus(),t.preventDefault()):t.key==="ArrowLeft"||t.key==="ArrowUp"?(e=(e-1+a.length)%a.length,a[e].focus(),t.preventDefault()):t.key==="Home"?(a[0].focus(),t.preventDefault()):t.key==="End"&&(a[a.length-1].focus(),t.preventDefault())}_applyPageChange(t){const i=this._page,a=Math.max(1,Math.min(this._count,Number(t)||1));if(a===i)return;const n=a===1&&i!==1?"first":a===this._count&&i!==this._count?"last":a===i-1?"prev":a===i+1?"next":"change";this.setAttribute("page",String(a));const e={page:a,previousPage:i,count:this._count,reason:n};this.dispatchEvent(new CustomEvent(n,{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}}typeof customElements<"u"&&!customElements.get("ui-pagination")&&customElements.define("ui-pagination",c);exports.UIPagination=c;

package/dist/pagination.esm.js

@@ -1,5 +1,6 @@
-import { E as e } from "./ElementBase-BeZT54Hj.mjs";
-const r = `
+import { E as c } from "./ElementBase-D5QsC5Vw.mjs";
+import { r as h } from "./navigate-CXebafwF.mjs";
+const d = `
   :host {
     display: inline-flex;
     max-width: 100%;
@@ -40,7 +41,8 @@ const r = `
     padding: 0 3px;
   }
 
-  button {
+  :is(button, a.page-link) {
+    text-decoration: none;
     padding: var(--ui-pagination-padding);
     border-radius: var(--ui-pagination-radius);
     border: 1px solid var(--ui-pagination-border);
@@ -56,22 +58,22 @@ const r = `
     transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease, transform 130ms ease;
   }
 
-  button:hover:not(:disabled) {
+  :is(button, a.page-link):hover:not(:disabled) {
     background: var(--ui-pagination-item-bg-hover);
   }
 
-  button:focus-visible {
+  :is(button, a.page-link):focus-visible {
     outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
     outline-offset: var(--ui-ring-offset, 2px);
   }
 
-  button[aria-current="page"] {
+  :is(button, a.page-link)[aria-current="page"] {
     background: var(--ui-pagination-active-bg);
     color: var(--ui-pagination-active-color);
     border-color: var(--ui-pagination-active-bg);
   }
 
-  button:disabled {
+  :is(button, a.page-link):disabled {
     opacity: 0.46;
     cursor: not-allowed;
   }
@@ -104,22 +106,22 @@ const r = `
     padding: 0;
   }
 
-  :host([variant="flat"]) button,
-  :host([variant="minimal"]) button {
+  :host([variant="flat"]) :is(button, a.page-link),
+  :host([variant="minimal"]) :is(button, a.page-link) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     min-width: 30px;
   }
 
-  :host([variant="flat"]) button:hover:not(:disabled),
-  :host([variant="minimal"]) button:hover:not(:disabled) {
+  :host([variant="flat"]) :is(button, a.page-link):hover:not(:disabled),
+  :host([variant="minimal"]) :is(button, a.page-link):hover:not(:disabled) {
     background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
     border-color: transparent;
   }
 
-  :host([variant="flat"]) button[aria-current="page"],
-  :host([variant="minimal"]) button[aria-current="page"] {
+  :host([variant="flat"]) :is(button, a.page-link)[aria-current="page"],
+  :host([variant="minimal"]) :is(button, a.page-link)[aria-current="page"] {
     background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 16%, transparent);
     color: var(--ui-color-primary, #2563eb);
     border-color: transparent;
@@ -131,12 +133,12 @@ const r = `
     box-shadow: none;
   }
 
-  :host([variant="outline"]) button {
+  :host([variant="outline"]) :is(button, a.page-link) {
     background: var(--ui-color-surface, #ffffff);
     border-color: var(--ui-pagination-border);
   }
 
-  :host([variant="outline"]) button[aria-current="page"] {
+  :host([variant="outline"]) :is(button, a.page-link)[aria-current="page"] {
     background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff));
     color: var(--ui-color-primary, #2563eb);
     border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 45%, var(--ui-pagination-border));
@@ -150,7 +152,7 @@ const r = `
     --ui-pagination-border: #334155;
     --ui-pagination-color: #e2e8f0;
     --ui-pagination-muted: #93a4bd;
-    --ui-pagination-active-bg: #93c5fd;
+    --ui-pagination-active-bg: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-pagination-active-color: #0f172a;
     --ui-pagination-shadow: none;
   }
@@ -160,15 +162,15 @@ const r = `
     padding: 8px;
   }
 
-  :host([variant="solid"]) button,
-  :host([variant="contrast"]) button {
+  :host([variant="solid"]) :is(button, a.page-link),
+  :host([variant="contrast"]) :is(button, a.page-link) {
     border-color: transparent;
   }
 
   :host([headless]) .pagination { display: none; }
 
   @media (prefers-reduced-motion: reduce) {
-    button {
+    :is(button, a.page-link) {
       transition: none !important;
     }
   }
@@ -179,7 +181,7 @@ const r = `
       box-shadow: none;
     }
 
-    button {
+    :is(button, a.page-link) {
       border-width: 2px;
     }
   }
@@ -198,12 +200,12 @@ const r = `
     }
   }
 `;
-class s extends e {
+class b extends c {
   constructor() {
     super(), this._page = 1, this._count = 1, this._headless = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
   }
   static get observedAttributes() {
-    return ["page", "count", "headless", "variant", "size", "aria-label"];
+    return ["page", "count", "headless", "variant", "size", "aria-label", "href-template"];
   }
   get page() {
     return this._page;
@@ -219,27 +221,34 @@ class s extends e {
     this.setAttribute("count", String(i)), this._page > i && this.setAttribute("page", String(i));
   }
   attributeChangedCallback(t, i, a) {
-    (t === "page" || t === "count" || t === "headless") && (this._page = Math.max(1, Number(this.getAttribute("page")) || 1), this._count = Math.max(1, Number(this.getAttribute("count")) || 1), this._headless = this.hasAttribute("headless"), this._page > this._count && (this._page = this._count)), this.requestRender();
+    (t === "page" || t === "count" || t === "headless") && (this._page = Math.max(1, Number(this.getAttribute("page")) || 1), this._count = Math.max(1, Number(this.getAttribute("count")) || 1), this._headless = this.hasAttribute("headless"), this._page > this._count && (this._page = this._count)), i !== a && (this.isConnected ? this.render() : this.requestRender());
   }
   render() {
     if (this._headless) {
       this.setContent("");
       return;
     }
-    let t = "";
-    t += `<button type="button" data-page="1" aria-label="First" ${this._page === 1 ? "disabled" : ""}>&laquo;</button>`, t += `<button type="button" data-page="${this._page - 1}" aria-label="Previous" ${this._page === 1 ? "disabled" : ""}>&lsaquo;</button>`;
-    const i = this._getPageRange(this._page, this._count);
-    i[0] > 1 && (t += '<button type="button" data-page="1">1</button>', i[0] > 2 && (t += '<span class="ellipsis" aria-hidden="true">…</span>'));
-    for (let n = i[0]; n <= i[1]; n++)
-      t += `<button type="button" data-page="${n}" ${n === this._page ? 'aria-current="page"' : ""}>${n}</button>`;
-    i[1] < this._count && (i[1] < this._count - 1 && (t += '<span class="ellipsis" aria-hidden="true">…</span>'), t += `<button type="button" data-page="${this._count}">${this._count}</button>`), t += `<button type="button" data-page="${this._page + 1}" aria-label="Next" ${this._page === this._count ? "disabled" : ""}>&rsaquo;</button>`, t += `<button type="button" data-page="${this._count}" aria-label="Last" ${this._page === this._count ? "disabled" : ""}>&raquo;</button>`, this.setContent(`
-      <style>${r}</style>
+    const t = this.root.activeElement, i = t?.matches?.("[data-page][aria-label]") ? `[data-page][aria-label="${t.getAttribute("aria-label")}"]` : t?.matches?.("[data-page]") ? '[data-page][aria-current="page"]' : "", a = this.getAttribute("href-template") || "", e = (o, g, u = {}) => {
+      const p = u.label ? ` aria-label="${u.label}"` : "", l = u.current ? ' aria-current="page"' : "";
+      return a && !u.disabled ? `<a class="page-link" href="${a.split("{page}").join(String(o)).replace(/"/g, "&quot;")}" data-page="${o}"${p}${l}>${g}</a>` : `<button type="button" data-page="${o}"${p}${l} ${u.disabled ? "disabled" : ""}>${g}</button>`;
+    };
+    let n = "";
+    n += e(1, "&laquo;", { label: "First", disabled: this._page === 1 }), n += e(this._page - 1, "&lsaquo;", { label: "Previous", disabled: this._page === 1 });
+    const r = this._getPageRange(this._page, this._count);
+    r[0] > 1 && (n += e(1, "1"), r[0] > 2 && (n += '<span class="ellipsis" aria-hidden="true">…</span>'));
+    for (let o = r[0]; o <= r[1]; o++)
+      n += e(o, String(o), { current: o === this._page });
+    r[1] < this._count && (r[1] < this._count - 1 && (n += '<span class="ellipsis" aria-hidden="true">…</span>'), n += e(this._count, String(this._count))), n += e(this._page + 1, "&rsaquo;", { label: "Next", disabled: this._page === this._count }), n += e(this._count, "&raquo;", { label: "Last", disabled: this._page === this._count }), this.setContent(`
+      <style>${d}</style>
       <nav class="pagination" role="navigation" aria-label="${this.getAttribute("aria-label") || "Pagination"}" tabindex="0">
-        ${t}
+        ${n}
       </nav>
     `);
-    const a = this.root.querySelector(".pagination");
-    a && (a.removeEventListener("click", this._onClick), a.addEventListener("click", this._onClick), a.removeEventListener("keydown", this._onKeyDown), a.addEventListener("keydown", this._onKeyDown));
+    const s = this.root.querySelector(".pagination");
+    if (s && (s.removeEventListener("click", this._onClick), s.addEventListener("click", this._onClick), s.removeEventListener("keydown", this._onKeyDown), s.addEventListener("keydown", this._onKeyDown)), i && !this.root.activeElement) {
+      const o = this.root.querySelector(i), g = this.root.querySelector('[data-page][aria-current="page"]');
+      (o && !o.disabled ? o : g)?.focus({ preventScroll: !0 });
+    }
   }
   goToPage(t) {
     const i = Math.max(1, Math.min(this._count, Number(t) || 1));
@@ -258,39 +267,45 @@ class s extends e {
     this.goToPage(this._count);
   }
   focusCurrent() {
-    this.root.querySelector('button[aria-current="page"]')?.focus();
+    this.root.querySelector('[data-page][aria-current="page"]')?.focus();
   }
   _getPageRange(t, i) {
     return i <= 5 ? [1, i] : t <= 3 ? [1, 5] : t >= i - 2 ? [i - 4, i] : [t - 2, t + 2];
   }
   _onClick(t) {
-    const i = t.target.closest("button[data-page]");
+    const i = t.target.closest("[data-page]");
     if (!i || i.hasAttribute("disabled")) return;
     const a = Number(i.getAttribute("data-page"));
-    isNaN(a) || a < 1 || a > this._count || a === this._page || this._applyPageChange(a);
+    if (!(isNaN(a) || a < 1 || a > this._count)) {
+      if (i instanceof HTMLAnchorElement) {
+        if (!h(this, { href: i.getAttribute("href") || "", page: a, previousPage: this._page }, t)) return;
+        t.preventDefault();
+      }
+      a !== this._page && this._applyPageChange(a);
+    }
   }
   _onKeyDown(t) {
     const i = this.root.querySelector(".pagination");
     if (!i) return;
-    const a = Array.from(i.querySelectorAll("button:not(:disabled)")), n = this.root.activeElement;
-    let o = a.indexOf(n);
-    t.key === "ArrowRight" || t.key === "ArrowDown" ? (o = (o + 1) % a.length, a[o].focus(), t.preventDefault()) : t.key === "ArrowLeft" || t.key === "ArrowUp" ? (o = (o - 1 + a.length) % a.length, a[o].focus(), t.preventDefault()) : t.key === "Home" ? (a[0].focus(), t.preventDefault()) : t.key === "End" && (a[a.length - 1].focus(), t.preventDefault());
+    const a = Array.from(i.querySelectorAll("button:not(:disabled), a[data-page]")), e = this.root.activeElement;
+    let n = a.indexOf(e);
+    t.key === "ArrowRight" || t.key === "ArrowDown" ? (n = (n + 1) % a.length, a[n].focus(), t.preventDefault()) : t.key === "ArrowLeft" || t.key === "ArrowUp" ? (n = (n - 1 + a.length) % a.length, a[n].focus(), t.preventDefault()) : t.key === "Home" ? (a[0].focus(), t.preventDefault()) : t.key === "End" && (a[a.length - 1].focus(), t.preventDefault());
   }
   _applyPageChange(t) {
     const i = this._page, a = Math.max(1, Math.min(this._count, Number(t) || 1));
     if (a === i) return;
-    const n = a === 1 && i !== 1 ? "first" : a === this._count && i !== this._count ? "last" : a === i - 1 ? "prev" : a === i + 1 ? "next" : "change";
+    const e = a === 1 && i !== 1 ? "first" : a === this._count && i !== this._count ? "last" : a === i - 1 ? "prev" : a === i + 1 ? "next" : "change";
     this.setAttribute("page", String(a));
-    const o = {
+    const n = {
       page: a,
       previousPage: i,
       count: this._count,
-      reason: n
+      reason: e
     };
-    this.dispatchEvent(new CustomEvent(n, { detail: o, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: o, bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent(e, { detail: n, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: n, bubbles: !0, composed: !0 }));
   }
 }
-typeof customElements < "u" && !customElements.get("ui-pagination") && customElements.define("ui-pagination", s);
+typeof customElements < "u" && !customElements.get("ui-pagination") && customElements.define("ui-pagination", b);
 export {
-  s as UIPagination
+  b as UIPagination
 };

package/dist/{panel-group-BVHJEdfx.js → panel-group-BIzzpQ5i.js}

@@ -1,4 +1,4 @@
-"use strict";const P=require("./ElementBase-DxbvhLJs.js"),y=require("./panel.cjs.js"),b=require("./splitter.cjs.js");function f(o,e,t){return Math.min(t,Math.max(e,o))}function x(o){return Math.round(o*1e3)/1e3}function v(o){if(o.collapsed){const i=f(o.collapsedSize,0,100);return{min:i,max:i}}const e=f(o.min,0,100),t=f(Math.max(e,o.max),e,100);return{min:e,max:t}}function p(o,e=[]){if(!o.length)return[];const t=o.map((l,c)=>{const d=e[c],{min:h,max:_}=v(l);return Number.isFinite(d)?f(Number(d),h,_):l.collapsed?h:NaN}),i=t.reduce((l,c,d)=>(Number.isFinite(c)||l.push(d),l),[]),n=t.reduce((l,c)=>l+(Number.isFinite(c)?c:0),0),s=Math.max(0,100-n),r=i.length?s/i.length:0;i.forEach(l=>{const{min:c,max:d}=v(o[l]);t[l]=f(r,c,d)});let a=t.reduce((l,c)=>l+c,0),u=x(100-a),m=0;for(;Math.abs(u)>.001&&m<30;){const l=o.reduce((h,_,g)=>{const{min:w,max:S}=v(_);return u>0&&t[g]<S-.001&&h.push(g),u<0&&t[g]>w+.001&&h.push(g),h},[]);if(!l.length)break;const c=u/l.length;let d=0;if(l.forEach(h=>{const{min:_,max:g}=v(o[h]),w=t[h],S=f(w+c,_,g);t[h]=x(S),d+=t[h]-w}),a=t.reduce((h,_)=>h+_,0),u=x(100-a),Math.abs(d)<.001)break;m+=1}return t.map(l=>x(l))}function L(o,e,t,i){const n=t,s=t+1;if(n<0||s>=o.length)return[...o];const r=[...o],a=r[n],u=r[s],m=v(e[n]),l=v(e[s]),c=Math.max(m.min-a,u-l.max),d=Math.min(m.max-a,u-l.min),h=f(i,c,d);return r[n]=x(a+h),r[s]=x(u-h),r}const E=`
+"use strict";const P=require("./ElementBase-CbUsP3D6.js"),y=require("./panel.cjs.js"),b=require("./splitter.cjs.js");function f(o,e,t){return Math.min(t,Math.max(e,o))}function x(o){return Math.round(o*1e3)/1e3}function v(o){if(o.collapsed){const i=f(o.collapsedSize,0,100);return{min:i,max:i}}const e=f(o.min,0,100),t=f(Math.max(e,o.max),e,100);return{min:e,max:t}}function p(o,e=[]){if(!o.length)return[];const t=o.map((l,c)=>{const d=e[c],{min:h,max:_}=v(l);return Number.isFinite(d)?f(Number(d),h,_):l.collapsed?h:NaN}),i=t.reduce((l,c,d)=>(Number.isFinite(c)||l.push(d),l),[]),n=t.reduce((l,c)=>l+(Number.isFinite(c)?c:0),0),s=Math.max(0,100-n),r=i.length?s/i.length:0;i.forEach(l=>{const{min:c,max:d}=v(o[l]);t[l]=f(r,c,d)});let a=t.reduce((l,c)=>l+c,0),u=x(100-a),m=0;for(;Math.abs(u)>.001&&m<30;){const l=o.reduce((h,_,g)=>{const{min:w,max:S}=v(_);return u>0&&t[g]<S-.001&&h.push(g),u<0&&t[g]>w+.001&&h.push(g),h},[]);if(!l.length)break;const c=u/l.length;let d=0;if(l.forEach(h=>{const{min:_,max:g}=v(o[h]),w=t[h],S=f(w+c,_,g);t[h]=x(S),d+=t[h]-w}),a=t.reduce((h,_)=>h+_,0),u=x(100-a),Math.abs(d)<.001)break;m+=1}return t.map(l=>x(l))}function L(o,e,t,i){const n=t,s=t+1;if(n<0||s>=o.length)return[...o];const r=[...o],a=r[n],u=r[s],m=v(e[n]),l=v(e[s]),c=Math.max(m.min-a,u-l.max),d=Math.min(m.max-a,u-l.min),h=f(i,c,d);return r[n]=x(a+h),r[s]=x(u-h),r}const E=`
   :host {
     display: block;
     min-inline-size: 0;

package/dist/{panel-group-BxO_eNW6.mjs → panel-group-CFLjzRWI.mjs}

@@ -1,4 +1,4 @@
-import { E as A } from "./ElementBase-BeZT54Hj.mjs";
+import { E as A } from "./ElementBase-D5QsC5Vw.mjs";
 import { UIPanel as y } from "./panel.esm.js";
 import { UISplitter as b } from "./splitter.esm.js";
 function f(o, e, t) {

package/dist/panel-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./panel-group-BVHJEdfx.js");exports.UIPanelGroup=e.UIPanelGroup;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./panel-group-BIzzpQ5i.js");exports.UIPanelGroup=e.UIPanelGroup;

package/dist/panel-group.esm.js

@@ -1,4 +1,4 @@
-import { U as a } from "./panel-group-BxO_eNW6.mjs";
+import { U as a } from "./panel-group-CFLjzRWI.mjs";
 export {
   a as UIPanelGroup
 };

package/dist/panel.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./ElementBase-DxbvhLJs.js"),s=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./ElementBase-CbUsP3D6.js"),s=`
   :host {
     display: block;
     min-inline-size: 0;

package/dist/panel.esm.js

@@ -1,4 +1,4 @@
-import { E as e } from "./ElementBase-BeZT54Hj.mjs";
+import { E as e } from "./ElementBase-D5QsC5Vw.mjs";
 const s = `
   :host {
     display: block;