@editora/ui-core 0.1.25 → 0.2.1

package/dist/pagination.cjs.js

@@ -2,18 +2,19 @@
   :host {
     display: inline-flex;
     max-width: 100%;
-    --ui-pagination-gap: 6px;
-    --ui-pagination-radius: 10px;
-    --ui-pagination-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-pagination-item-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
-    --ui-pagination-item-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent);
+    --ui-pagination-gap: 2px;
+    --ui-pagination-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-pagination-bg: transparent;
+    --ui-pagination-item-bg: transparent;
+    --ui-pagination-item-bg-hover: var(--ui-color-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent));
     --ui-pagination-active-bg: var(--ui-color-primary, #2563eb);
-    --ui-pagination-active-color: #ffffff;
-    --ui-pagination-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
-    --ui-pagination-color: var(--ui-color-text, #0f172a);
-    --ui-pagination-muted: var(--ui-color-muted, #526175);
-    --ui-pagination-padding: 6px 11px;
-    --ui-pagination-font-size: 13px;
+    --ui-pagination-active-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-pagination-border: transparent;
+    --ui-pagination-color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-pagination-muted: var(--ui-color-text-secondary, var(--ui-color-muted, #526175));
+    --ui-pagination-h: var(--ui-control-height-2, 32px);
+    --ui-pagination-padding: 0 8px;
+    --ui-pagination-font-size: var(--ui-control-font-size-2, 14px);
     --ui-pagination-shadow: none;
     color-scheme: light dark;
   }
@@ -24,9 +25,9 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ui-pagination-gap);
-    padding: 6px;
-    border: 1px solid var(--ui-pagination-border);
-    border-radius: calc(var(--ui-pagination-radius) + 2px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-pagination-radius);
     background: var(--ui-pagination-bg);
     box-shadow: var(--ui-pagination-shadow);
   }
@@ -45,22 +46,22 @@
     background: var(--ui-pagination-item-bg);
     color: var(--ui-pagination-color);
     font-size: var(--ui-pagination-font-size);
-    font-weight: 600;
+    font-weight: 500;
     line-height: 1.2;
     box-sizing: border-box;
-    min-width: 34px;
+    min-width: var(--ui-pagination-h);
+    min-height: var(--ui-pagination-h);
     cursor: pointer;
     transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease, transform 130ms ease;
   }
 
   button:hover:not(:disabled) {
     background: var(--ui-pagination-item-bg-hover);
-    border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 34%, var(--ui-pagination-border));
   }
 
   button:focus-visible {
-    outline: 2px solid var(--ui-color-focus-ring, #2563eb);
-    outline-offset: 1px;
+    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"] {
@@ -77,15 +78,17 @@
   :host([size="sm"]) {
     --ui-pagination-gap: 4px;
     --ui-pagination-radius: 8px;
-    --ui-pagination-padding: 4px 8px;
-    --ui-pagination-font-size: 12px;
+    --ui-pagination-h: var(--ui-control-height-1, 24px);
+    --ui-pagination-padding: 0 6px;
+    --ui-pagination-font-size: var(--ui-control-font-size-1, 12px);
   }
 
   :host([size="lg"]) {
     --ui-pagination-gap: 8px;
     --ui-pagination-radius: 12px;
-    --ui-pagination-padding: 7px 13px;
-    --ui-pagination-font-size: 14px;
+    --ui-pagination-h: var(--ui-control-height-3, 40px);
+    --ui-pagination-padding: 0 12px;
+    --ui-pagination-font-size: var(--ui-control-font-size-3, 16px);
   }
 
   :host([variant="classic"]) .pagination {
@@ -193,9 +196,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 a=Math.max(1,Number(t)||1);this.setAttribute("count",String(a)),this._page>a&&this.setAttribute("page",String(a))}attributeChangedCallback(t,a,i){(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 a=this._getPageRange(this._page,this._count);a[0]>1&&(t+='<button type="button" data-page="1">1</button>',a[0]>2&&(t+='<span class="ellipsis" aria-hidden="true">…</span>'));for(let n=a[0];n<=a[1];n++)t+=`<button type="button" data-page="${n}" ${n===this._page?'aria-current="page"':""}>${n}</button>`;a[1]<this._count&&(a[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(`
+`;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>
       <nav class="pagination" role="navigation" aria-label="${this.getAttribute("aria-label")||"Pagination"}" tabindex="0">
         ${t}
       </nav>
-    `);const i=this.root.querySelector(".pagination");i&&(i.removeEventListener("click",this._onClick),i.addEventListener("click",this._onClick),i.removeEventListener("keydown",this._onKeyDown),i.addEventListener("keydown",this._onKeyDown))}goToPage(t){const a=Math.max(1,Math.min(this._count,Number(t)||1));a!==this._page&&this._applyPageChange(a)}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,a){return a<=5?[1,a]:t<=3?[1,5]:t>=a-2?[a-4,a]:[t-2,t+2]}_onClick(t){const a=t.target.closest("button[data-page]");if(!a||a.hasAttribute("disabled"))return;const i=Number(a.getAttribute("data-page"));isNaN(i)||i<1||i>this._count||i===this._page||this._applyPageChange(i)}_onKeyDown(t){const a=this.root.querySelector(".pagination");if(!a)return;const i=Array.from(a.querySelectorAll("button:not(:disabled)")),n=this.root.activeElement;let o=i.indexOf(n);t.key==="ArrowRight"||t.key==="ArrowDown"?(o=(o+1)%i.length,i[o].focus(),t.preventDefault()):t.key==="ArrowLeft"||t.key==="ArrowUp"?(o=(o-1+i.length)%i.length,i[o].focus(),t.preventDefault()):t.key==="Home"?(i[0].focus(),t.preventDefault()):t.key==="End"&&(i[i.length-1].focus(),t.preventDefault())}_applyPageChange(t){const a=this._page,i=Math.max(1,Math.min(this._count,Number(t)||1));if(i===a)return;const n=i===1&&a!==1?"first":i===this._count&&a!==this._count?"last":i===a-1?"prev":i===a+1?"next":"change";this.setAttribute("page",String(i));const o={page:i,previousPage:a,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 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;

package/dist/pagination.esm.js

@@ -3,18 +3,19 @@ const r = `
   :host {
     display: inline-flex;
     max-width: 100%;
-    --ui-pagination-gap: 6px;
-    --ui-pagination-radius: 10px;
-    --ui-pagination-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-pagination-item-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
-    --ui-pagination-item-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent);
+    --ui-pagination-gap: 2px;
+    --ui-pagination-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-pagination-bg: transparent;
+    --ui-pagination-item-bg: transparent;
+    --ui-pagination-item-bg-hover: var(--ui-color-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent));
     --ui-pagination-active-bg: var(--ui-color-primary, #2563eb);
-    --ui-pagination-active-color: #ffffff;
-    --ui-pagination-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
-    --ui-pagination-color: var(--ui-color-text, #0f172a);
-    --ui-pagination-muted: var(--ui-color-muted, #526175);
-    --ui-pagination-padding: 6px 11px;
-    --ui-pagination-font-size: 13px;
+    --ui-pagination-active-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-pagination-border: transparent;
+    --ui-pagination-color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-pagination-muted: var(--ui-color-text-secondary, var(--ui-color-muted, #526175));
+    --ui-pagination-h: var(--ui-control-height-2, 32px);
+    --ui-pagination-padding: 0 8px;
+    --ui-pagination-font-size: var(--ui-control-font-size-2, 14px);
     --ui-pagination-shadow: none;
     color-scheme: light dark;
   }
@@ -25,9 +26,9 @@ const r = `
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ui-pagination-gap);
-    padding: 6px;
-    border: 1px solid var(--ui-pagination-border);
-    border-radius: calc(var(--ui-pagination-radius) + 2px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-pagination-radius);
     background: var(--ui-pagination-bg);
     box-shadow: var(--ui-pagination-shadow);
   }
@@ -46,22 +47,22 @@ const r = `
     background: var(--ui-pagination-item-bg);
     color: var(--ui-pagination-color);
     font-size: var(--ui-pagination-font-size);
-    font-weight: 600;
+    font-weight: 500;
     line-height: 1.2;
     box-sizing: border-box;
-    min-width: 34px;
+    min-width: var(--ui-pagination-h);
+    min-height: var(--ui-pagination-h);
     cursor: pointer;
     transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease, transform 130ms ease;
   }
 
   button:hover:not(:disabled) {
     background: var(--ui-pagination-item-bg-hover);
-    border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 34%, var(--ui-pagination-border));
   }
 
   button:focus-visible {
-    outline: 2px solid var(--ui-color-focus-ring, #2563eb);
-    outline-offset: 1px;
+    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"] {
@@ -78,15 +79,17 @@ const r = `
   :host([size="sm"]) {
     --ui-pagination-gap: 4px;
     --ui-pagination-radius: 8px;
-    --ui-pagination-padding: 4px 8px;
-    --ui-pagination-font-size: 12px;
+    --ui-pagination-h: var(--ui-control-height-1, 24px);
+    --ui-pagination-padding: 0 6px;
+    --ui-pagination-font-size: var(--ui-control-font-size-1, 12px);
   }
 
   :host([size="lg"]) {
     --ui-pagination-gap: 8px;
     --ui-pagination-radius: 12px;
-    --ui-pagination-padding: 7px 13px;
-    --ui-pagination-font-size: 14px;
+    --ui-pagination-h: var(--ui-control-height-3, 40px);
+    --ui-pagination-padding: 0 12px;
+    --ui-pagination-font-size: var(--ui-control-font-size-3, 16px);
   }
 
   :host([variant="classic"]) .pagination {
@@ -212,10 +215,10 @@ class s extends e {
     return this._count;
   }
   set count(t) {
-    const a = Math.max(1, Number(t) || 1);
-    this.setAttribute("count", String(a)), this._page > a && this.setAttribute("page", String(a));
+    const i = Math.max(1, Number(t) || 1);
+    this.setAttribute("count", String(i)), this._page > i && this.setAttribute("page", String(i));
   }
-  attributeChangedCallback(t, a, 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() {
@@ -225,22 +228,22 @@ class s extends e {
     }
     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 a = this._getPageRange(this._page, this._count);
-    a[0] > 1 && (t += '<button type="button" data-page="1">1</button>', a[0] > 2 && (t += '<span class="ellipsis" aria-hidden="true">…</span>'));
-    for (let n = a[0]; n <= a[1]; n++)
+    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>`;
-    a[1] < this._count && (a[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(`
+    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>
       <nav class="pagination" role="navigation" aria-label="${this.getAttribute("aria-label") || "Pagination"}" tabindex="0">
         ${t}
       </nav>
     `);
-    const i = this.root.querySelector(".pagination");
-    i && (i.removeEventListener("click", this._onClick), i.addEventListener("click", this._onClick), i.removeEventListener("keydown", this._onKeyDown), i.addEventListener("keydown", this._onKeyDown));
+    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 a = Math.max(1, Math.min(this._count, Number(t) || 1));
-    a !== this._page && this._applyPageChange(a);
+    const i = Math.max(1, Math.min(this._count, Number(t) || 1));
+    i !== this._page && this._applyPageChange(i);
   }
   nextPage() {
     this.goToPage(this._page + 1);
@@ -257,30 +260,30 @@ class s extends e {
   focusCurrent() {
     this.root.querySelector('button[aria-current="page"]')?.focus();
   }
-  _getPageRange(t, a) {
-    return a <= 5 ? [1, a] : t <= 3 ? [1, 5] : t >= a - 2 ? [a - 4, a] : [t - 2, t + 2];
+  _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 a = t.target.closest("button[data-page]");
-    if (!a || a.hasAttribute("disabled")) return;
-    const i = Number(a.getAttribute("data-page"));
-    isNaN(i) || i < 1 || i > this._count || i === this._page || this._applyPageChange(i);
+    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 a = this.root.querySelector(".pagination");
-    if (!a) return;
-    const i = Array.from(a.querySelectorAll("button:not(:disabled)")), n = this.root.activeElement;
-    let o = i.indexOf(n);
-    t.key === "ArrowRight" || t.key === "ArrowDown" ? (o = (o + 1) % i.length, i[o].focus(), t.preventDefault()) : t.key === "ArrowLeft" || t.key === "ArrowUp" ? (o = (o - 1 + i.length) % i.length, i[o].focus(), t.preventDefault()) : t.key === "Home" ? (i[0].focus(), t.preventDefault()) : t.key === "End" && (i[i.length - 1].focus(), t.preventDefault());
+    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 a = this._page, i = Math.max(1, Math.min(this._count, Number(t) || 1));
-    if (i === a) return;
-    const n = i === 1 && a !== 1 ? "first" : i === this._count && a !== this._count ? "last" : i === a - 1 ? "prev" : i === a + 1 ? "next" : "change";
-    this.setAttribute("page", String(i));
+    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: i,
-      previousPage: a,
+      page: a,
+      previousPage: i,
       count: this._count,
       reason: n
     };

package/dist/password-field.cjs.js

@@ -15,20 +15,23 @@
   </svg>
 `,M=`
   :host {
-    --ui-input-padding: var(--ui-padding, 10px 12px);
-    --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-input-action-size: 24px;
+    --ui-input-padding: var(--ui-padding, 0);
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-input-border-color: var(--ui-color-line, var(--ui-color-border, var(--ui-border-color, #cbd5e1)));
     --ui-input-border-width: 1px;
     --ui-input-border-style: solid;
     --ui-input-border: var(--ui-input-border-width) var(--ui-input-border-style) var(--ui-input-border-color);
-    --ui-input-border-radius: var(--ui-radius, 10px);
-    --ui-input-min-height: var(--ui-min-height, 40px);
+    --ui-input-border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-md, var(--ui-control-height-2, 32px)));
     --ui-input-width: 100%;
     --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-label-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-input-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-input-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-input-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-input-success: var(--ui-color-success, var(--ui-success, #15803d));
     --ui-input-warning: var(--ui-color-warning, var(--ui-warning, #b45309));
     --ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
@@ -36,7 +39,7 @@
     --ui-input-gap: 8px;
     --ui-input-meta-gap: 4px;
     --ui-input-shell-gap: 8px;
-    --ui-input-placeholder: color-mix(in srgb, var(--ui-input-color) 40%, transparent);
+    --ui-input-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-input-color) 62%, transparent));
     --ui-password-field-strength-gap: 8px;
     --ui-password-field-track-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 10%, transparent);
     --ui-password-field-strength-weak: var(--ui-color-danger, #dc2626);
@@ -115,7 +118,7 @@
     gap: var(--ui-input-shell-gap);
     box-sizing: border-box;
     min-block-size: var(--ui-input-min-height);
-    padding-inline: 10px;
+    padding-inline: var(--ui-input-pad-x);
     border: var(--ui-input-border);
     border-radius: var(--ui-input-border-radius);
     background: var(--ui-input-bg);
@@ -124,8 +127,13 @@
   }
 
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-input-focus-ring) 56%, var(--ui-input-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-focus-ring) 24%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline-offset: -1px;
+  }
+
+  .shell:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-input-border-color));
   }
 
   .prefix,
@@ -189,7 +197,7 @@
     border: none;
     background: transparent;
     color: inherit;
-    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 var(--ui-input-font-size)/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     padding: var(--ui-input-padding);
     min-block-size: calc(var(--ui-input-min-height) - 2px);
     margin: 0;
@@ -213,8 +221,9 @@
     border: none;
     outline: none;
     cursor: pointer;
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-input-action-size);
+    block-size: var(--ui-input-action-size);
+    margin-block: var(--ui-input-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -252,7 +261,6 @@
   }
 
   .toggle-btn:hover {
-    transform: translateY(-1px);
   }
 
   .clear-btn:focus-visible,
@@ -366,30 +374,27 @@
     pointer-events: none;
   }
 
-  :host([size="sm"]),
+    :host([size="sm"]),
   :host([size="1"]) {
-    --ui-input-min-height: 34px;
-    --ui-input-padding: 7px 8px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-sm, var(--ui-control-height-1, 24px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-input-border-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
+    --ui-input-action-size: 24px;
+    --ui-input-action-bleed: -1px;
     --ui-input-shell-gap: 6px;
   }
 
-  :host([size="sm"]) input,
-  :host([size="1"]) input {
-    font-size: 12px;
-  }
-
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-input-min-height: 46px;
-    --ui-input-padding: 11px 14px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-lg, var(--ui-control-height-3, 40px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-input-border-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
+    --ui-input-action-size: 28px;
     --ui-input-shell-gap: 10px;
   }
 
-  :host([size="lg"]) input,
-  :host([size="3"]) input {
-    font-size: 16px;
-  }
-
   :host([variant="classic"]),
   :host([variant="outlined"]) {
     --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
@@ -491,7 +496,7 @@
   }
 
   :host([validation="error"]) .shell {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-error) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-input-error);
   }
 
   :host([radius="none"]) {
@@ -573,13 +578,13 @@
       box-shadow: none;
     }
   }
-`,I=["value","placeholder","disabled","clearable","debounce","validation","size","minlength","maxlength","readonly","autofocus","counter","floating-label","name","required","pattern","autocomplete","spellcheck","variant","tone","density","shape","color","radius","label","description","data-error"];function u(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(o){if(!o)return!1;const t=o.assignedNodes({flatten:!0});return t.length?t.some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function c(o,t){const e=o.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function U(o){return o==="none"||o==="large"||o==="full"}function L(o){let t=0;switch(o.length>=8&&(t+=1),/[a-z]/.test(o)&&/[A-Z]/.test(o)&&(t+=1),/\d/.test(o)&&(t+=1),(/[^A-Za-z0-9]/.test(o)||o.length>=14)&&(t+=1),Math.max(1,Math.min(4,t||1))){case 1:return{score:1,label:"Weak",caption:"Use more characters and mix case, numbers, or symbols."};case 2:return{score:2,label:"Fair",caption:"Add numbers or symbols to reduce guessability."};case 3:return{score:3,label:"Good",caption:"Solid baseline. Longer passphrases are even better."};default:return{score:4,label:"Strong",caption:"Strong password shape for production accounts."}}}class E extends q.ElementBase{constructor(){super(),this._input=null,this._clearBtn=null,this._toggleBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._revealed=!1,this._lastStrengthKey="",this.strengthEvaluator=null,this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return[...I,"aria-label","aria-description","aria-describedby","show-strength","revealable"]}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get revealed(){return this._revealed}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._registerWithForm()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._autofocusApplied=!1,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="name"&&this.isConnected&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),!(!this.isConnected||!this._input))){if(t==="value"){this._syncInputValue(this.value),this._syncStrengthUi();return}this._syncUi(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}}shouldRenderOnAttributeChange(){return!1}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){this._input?.blur()}select(){this._input?.select()}toggleVisibility(t){if(c(this,"disabled")||this.hasAttribute("readonly")||this.getAttribute("revealable")==="false")return;const e=typeof t=="boolean"?t:!this._revealed;if(e===this._revealed)return;const i=this._input?.selectionStart??null,r=this._input?.selectionEnd??null;this._revealed=e,this._syncToggleUi(),this.dispatchEvent(new CustomEvent("visibility-change",{detail:{revealed:this._revealed},bubbles:!0,composed:!0})),queueMicrotask(()=>{const n=this._input;if(n){try{n.focus({preventScroll:!0})}catch{n.focus()}if(i!=null&&r!=null&&typeof n.setSelectionRange=="function")try{n.setSelectionRange(i,r)}catch{}}})}render(){const t=this.value,e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",r=this.getAttribute("data-error")||"",n=this.getAttribute("placeholder")||"",s=this.hasAttribute("required")?'<span class="required" aria-hidden="true">*</span>':"",a=this.hasAttribute("floating-label");this.setContent(`
+`,I=["value","placeholder","disabled","clearable","debounce","validation","size","minlength","maxlength","readonly","autofocus","counter","floating-label","name","required","pattern","autocomplete","spellcheck","variant","tone","density","shape","color","radius","label","description","data-error"];function u(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(o){if(!o)return!1;const t=o.assignedNodes({flatten:!0});return t.length?t.some(e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE):!1}function c(o,t){const e=o.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function U(o){return o==="none"||o==="large"||o==="full"}function L(o){let t=0;switch(o.length>=8&&(t+=1),/[a-z]/.test(o)&&/[A-Z]/.test(o)&&(t+=1),/\d/.test(o)&&(t+=1),(/[^A-Za-z0-9]/.test(o)||o.length>=14)&&(t+=1),Math.max(1,Math.min(4,t||1))){case 1:return{score:1,label:"Weak",caption:"Use more characters and mix case, numbers, or symbols."};case 2:return{score:2,label:"Fair",caption:"Add numbers or symbols to reduce guessability."};case 3:return{score:3,label:"Good",caption:"Solid baseline. Longer passphrases are even better."};default:return{score:4,label:"Strong",caption:"Strong password shape for production accounts."}}}class z extends q.ElementBase{constructor(){super(),this._input=null,this._clearBtn=null,this._toggleBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._revealed=!1,this._lastStrengthKey="",this.strengthEvaluator=null,this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return[...I,"aria-label","aria-description","aria-describedby","show-strength","revealable"]}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get revealed(){return this._revealed}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._registerWithForm()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._autofocusApplied=!1,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="name"&&this.isConnected&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),!(!this.isConnected||!this._input))){if(t==="value"){this._syncInputValue(this.value),this._syncStrengthUi();return}this._syncUi(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}}shouldRenderOnAttributeChange(){return!1}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){this._input?.blur()}select(){this._input?.select()}toggleVisibility(t){if(c(this,"disabled")||this.hasAttribute("readonly")||this.getAttribute("revealable")==="false")return;const e=typeof t=="boolean"?t:!this._revealed;if(e===this._revealed)return;const i=this._input?.selectionStart??null,r=this._input?.selectionEnd??null;this._revealed=e,this._syncToggleUi(),this.dispatchEvent(new CustomEvent("visibility-change",{detail:{revealed:this._revealed},bubbles:!0,composed:!0})),queueMicrotask(()=>{const s=this._input;if(s){try{s.focus({preventScroll:!0})}catch{s.focus()}if(i!=null&&r!=null&&typeof s.setSelectionRange=="function")try{s.setSelectionRange(i,r)}catch{}}})}render(){const t=this.value,e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",r=this.getAttribute("data-error")||"",s=this.getAttribute("placeholder")||"",n=this.hasAttribute("required")?'<span class="required" aria-hidden="true">*</span>':"",a=this.hasAttribute("floating-label");this.setContent(`
       <style>${M}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
             <slot name="label">${u(e)}</slot>
-            ${s}
+            ${n}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
             <slot name="description">${u(i)}</slot>
@@ -594,9 +599,9 @@
               part="input"
               type="password"
               value="${u(t)}"
-              placeholder="${u(n)}"
+              placeholder="${u(s)}"
             />
-            ${a?`<span class="floating-label" part="floating-label">${u(e||n||"Password")}</span>`:""}
+            ${a?`<span class="floating-label" part="floating-label">${u(e||s||"Password")}</span>`:""}
           </div>
 
           <div class="actions" part="actions">
@@ -623,4 +628,4 @@
           </div>
         </div>
       </div>
-    `),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector(".clear-btn"),this._toggleBtn=this.root.querySelector(".toggle-btn"),this._input?.addEventListener("input",this._onNativeInput),this._input?.addEventListener("change",this._onNativeChange),this._clearBtn?.addEventListener("click",this._onClearClick),this._toggleBtn?.addEventListener("click",this._onToggleClick),this._syncUi()}_detachListeners(){this._input?.removeEventListener("input",this._onNativeInput),this._input?.removeEventListener("change",this._onNativeChange),this._clearBtn?.removeEventListener("click",this._onClearClick),this._toggleBtn?.removeEventListener("click",this._onToggleClick),this._clearBtn=null,this._toggleBtn=null}_syncHostTokens(){const t=this.getAttribute("color");t?this.style.setProperty("--ui-input-accent",t):this.style.removeProperty("--ui-input-accent");const e=this.getAttribute("radius")||"";e&&!U(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;const t=c(this,"disabled"),e=this.hasAttribute("required"),i=this.hasAttribute("readonly"),r=this.getAttribute("maxlength")||"",n=this.getAttribute("minlength")||"",s=this.getAttribute("pattern")||"",a=this.getAttribute("autocomplete")||"current-password",l=this.getAttribute("spellcheck")||"",h=this.getAttribute("placeholder")||"",d=this.getAttribute("name")||"";this._input.disabled=t,this._input.required=e,this._input.readOnly=i,this._input.placeholder=h,this._input.name=d,this._input.type=this._revealed?"text":"password",this._input.setAttribute("autocomplete",a),s?this._input.setAttribute("pattern",s):this._input.removeAttribute("pattern"),l?this._input.setAttribute("spellcheck",l):this._input.removeAttribute("spellcheck"),r&&Number.isFinite(Number(r))?this._input.setAttribute("maxlength",r):this._input.removeAttribute("maxlength"),n&&Number.isFinite(Number(n))?this._input.setAttribute("minlength",n):this._input.removeAttribute("minlength")}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t);const e=this.root.querySelector(".shell");e&&e.setAttribute("data-has-value",t?"true":"false"),this._clearBtn&&(c(this,"clearable")&&t.length>0&&!c(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const i=this.root.querySelector(".counter");if(i&&this.hasAttribute("counter")){const r=this.getAttribute("maxlength");i.textContent=r?`${t.length}/${r}`:String(t.length)}else i&&(i.textContent="")}_syncToggleUi(){if(!this._toggleBtn||!this._input)return;this._input.type=this._revealed?"text":"password";const t=this.getAttribute("revealable")!=="false",e=c(this,"disabled")||this.hasAttribute("readonly");this._toggleBtn.hidden=!t,this._toggleBtn.disabled=e,this._toggleBtn.setAttribute("aria-pressed",this._revealed?"true":"false"),this._toggleBtn.setAttribute("aria-label",this._revealed?"Hide password":"Show password");const i=this._revealed?"revealed":"hidden";this._toggleBtn.dataset.iconState!==i&&(this._toggleBtn.dataset.iconState=i,this._toggleBtn.innerHTML=this._revealed?N:C)}_syncStrengthUi(){const t=this.root.querySelector(".strength"),e=this.root.querySelector(".strength-label"),i=this.root.querySelector(".strength-caption");if(!t||!e||!i)return;const r=this.value,n=this.hasAttribute("show-strength")&&r.length>0;if(t.hidden=!n,!n){delete t.dataset.score,e.textContent="",i.textContent="",this._lastStrengthKey="";return}const s=(this.strengthEvaluator||L)(r);t.dataset.score=String(s.score),e.textContent=s.label,i.textContent=s.caption;const a=`${r}|${s.score}|${s.label}|${s.caption}`;a!==this._lastStrengthKey&&(this._lastStrengthKey=a,this.dispatchEvent(new CustomEvent("strength-change",{detail:{value:r,score:s.score,label:s.label,caption:s.caption},bubbles:!0,composed:!0})))}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),r=this.root.querySelector('slot[name="prefix"]'),n=this.root.querySelector('slot[name="suffix"]'),s=(this.getAttribute("label")||"").trim(),a=(this.getAttribute("description")||"").trim(),l=(this.getAttribute("data-error")||"").trim(),h=!!s||g(t),d=!!a||g(e),b=!!l||g(i),z=g(r),T=g(n),v=this.root.querySelector(".label"),m=this.root.querySelector(".description"),_=this.root.querySelector(".prefix"),x=this.root.querySelector(".suffix-slot"),y=this.root.querySelector(".meta"),w=this.root.querySelector(".footer"),A=this.root.querySelector(".error"),k=this.root.querySelector(".counter");p.syncSlotFallbackText(t,s),p.syncSlotFallbackText(e,a),p.syncSlotFallbackText(i,l),v&&v.toggleAttribute("hidden",!h),m&&m.toggleAttribute("hidden",!d),_&&_.toggleAttribute("hidden",!z),x&&x.toggleAttribute("hidden",!T),y&&y.toggleAttribute("hidden",!h&&!d);const S=this.hasAttribute("counter");if(k&&k.toggleAttribute("hidden",!S),A&&A.toggleAttribute("hidden",!b),w&&w.toggleAttribute("hidden",!b&&!S),!this._input)return;p.syncControlName(this._input,this,h?`${this._uid}-label`:null);const f=[];d&&f.push(`${this._uid}-description`),b&&f.push(`${this._uid}-error`),p.syncControlDescription(this._input,this,this._uid,f),this.getAttribute("validation")==="error"||!!l?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid"),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required")}_syncUi(){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),this._syncToggleUi(),this._syncStrengthUi(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}_emitValueEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0}))}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");r&&typeof r.registerField=="function"&&n&&(this._formUnregister=r.registerField(n,{name:n,getValue:()=>this.value,setValue:s=>{this.value=String(s??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:s=>{s?(this.setAttribute("validation","error"),this.setAttribute("data-error",s)):(this.removeAttribute("validation"),this.removeAttribute("data-error")),this._syncUi()}}))}catch{}}_onSlotChange(){this._syncDerivedState()}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?e?this.setAttribute("value",e):this.removeAttribute("value"):(this._syncInputValue(e),this._syncStrengthUi()),this._emitValueEvent("input",e);const i=Number(this.getAttribute("debounce")||0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emitValueEvent("debounced-input",e),this._debounceTimer=null},i)):this._emitValueEvent("debounced-input",e)}_onNativeChange(t){const e=t.target.value;this._emitValueEvent("change",e)}_onClearClick(t){if(t.preventDefault(),!(c(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}_onToggleClick(t){t.preventDefault(),t.stopPropagation(),this.toggleVisibility()}}typeof customElements<"u"&&!customElements.get("ui-password-field")&&customElements.define("ui-password-field",E);exports.UIPasswordField=E;
+    `),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector(".clear-btn"),this._toggleBtn=this.root.querySelector(".toggle-btn"),this._input?.addEventListener("input",this._onNativeInput),this._input?.addEventListener("change",this._onNativeChange),this._clearBtn?.addEventListener("click",this._onClearClick),this._toggleBtn?.addEventListener("click",this._onToggleClick),this._syncUi()}_detachListeners(){this._input?.removeEventListener("input",this._onNativeInput),this._input?.removeEventListener("change",this._onNativeChange),this._clearBtn?.removeEventListener("click",this._onClearClick),this._toggleBtn?.removeEventListener("click",this._onToggleClick),this._clearBtn=null,this._toggleBtn=null}_syncHostTokens(){const t=this.getAttribute("color");t?this.style.setProperty("--ui-input-accent",t):this.style.removeProperty("--ui-input-accent");const e=this.getAttribute("radius")||"";e&&!U(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;const t=c(this,"disabled"),e=this.hasAttribute("required"),i=this.hasAttribute("readonly"),r=this.getAttribute("maxlength")||"",s=this.getAttribute("minlength")||"",n=this.getAttribute("pattern")||"",a=this.getAttribute("autocomplete")||"current-password",l=this.getAttribute("spellcheck")||"",h=this.getAttribute("placeholder")||"",d=this.getAttribute("name")||"";this._input.disabled=t,this._input.required=e,this._input.readOnly=i,this._input.placeholder=h,this._input.name=d,this._input.type=this._revealed?"text":"password",this._input.setAttribute("autocomplete",a),n?this._input.setAttribute("pattern",n):this._input.removeAttribute("pattern"),l?this._input.setAttribute("spellcheck",l):this._input.removeAttribute("spellcheck"),r&&Number.isFinite(Number(r))?this._input.setAttribute("maxlength",r):this._input.removeAttribute("maxlength"),s&&Number.isFinite(Number(s))?this._input.setAttribute("minlength",s):this._input.removeAttribute("minlength")}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t);const e=this.root.querySelector(".shell");e&&e.setAttribute("data-has-value",t?"true":"false"),this._clearBtn&&(c(this,"clearable")&&t.length>0&&!c(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const i=this.root.querySelector(".counter");if(i&&this.hasAttribute("counter")){const r=this.getAttribute("maxlength");i.textContent=r?`${t.length}/${r}`:String(t.length)}else i&&(i.textContent="")}_syncToggleUi(){if(!this._toggleBtn||!this._input)return;this._input.type=this._revealed?"text":"password";const t=this.getAttribute("revealable")!=="false",e=c(this,"disabled")||this.hasAttribute("readonly");this._toggleBtn.hidden=!t,this._toggleBtn.disabled=e,this._toggleBtn.setAttribute("aria-pressed",this._revealed?"true":"false"),this._toggleBtn.setAttribute("aria-label",this._revealed?"Hide password":"Show password");const i=this._revealed?"revealed":"hidden";this._toggleBtn.dataset.iconState!==i&&(this._toggleBtn.dataset.iconState=i,this._toggleBtn.innerHTML=this._revealed?N:C)}_syncStrengthUi(){const t=this.root.querySelector(".strength"),e=this.root.querySelector(".strength-label"),i=this.root.querySelector(".strength-caption");if(!t||!e||!i)return;const r=this.value,s=this.hasAttribute("show-strength")&&r.length>0;if(t.hidden=!s,!s){delete t.dataset.score,e.textContent="",i.textContent="",this._lastStrengthKey="";return}const n=(this.strengthEvaluator||L)(r);t.dataset.score=String(n.score),e.textContent=n.label,i.textContent=n.caption;const a=`${r}|${n.score}|${n.label}|${n.caption}`;a!==this._lastStrengthKey&&(this._lastStrengthKey=a,this.dispatchEvent(new CustomEvent("strength-change",{detail:{value:r,score:n.score,label:n.label,caption:n.caption},bubbles:!0,composed:!0})))}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),r=this.root.querySelector('slot[name="prefix"]'),s=this.root.querySelector('slot[name="suffix"]'),n=(this.getAttribute("label")||"").trim(),a=(this.getAttribute("description")||"").trim(),l=(this.getAttribute("data-error")||"").trim(),h=!!n||g(t),d=!!a||g(e),b=!!l||g(i),E=g(r),T=g(s),v=this.root.querySelector(".label"),m=this.root.querySelector(".description"),x=this.root.querySelector(".prefix"),_=this.root.querySelector(".suffix-slot"),y=this.root.querySelector(".meta"),w=this.root.querySelector(".footer"),A=this.root.querySelector(".error"),k=this.root.querySelector(".counter");p.syncSlotFallbackText(t,n),p.syncSlotFallbackText(e,a),p.syncSlotFallbackText(i,l),v&&v.toggleAttribute("hidden",!h),m&&m.toggleAttribute("hidden",!d),x&&x.toggleAttribute("hidden",!E),_&&_.toggleAttribute("hidden",!T),y&&y.toggleAttribute("hidden",!h&&!d);const S=this.hasAttribute("counter");if(k&&k.toggleAttribute("hidden",!S),A&&A.toggleAttribute("hidden",!b),w&&w.toggleAttribute("hidden",!b&&!S),!this._input)return;p.syncControlName(this._input,this,h?`${this._uid}-label`:null);const f=[];d&&f.push(`${this._uid}-description`),b&&f.push(`${this._uid}-error`),p.syncControlDescription(this._input,this,this._uid,f),this.getAttribute("validation")==="error"||!!l?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid"),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required")}_syncUi(){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),this._syncToggleUi(),this._syncStrengthUi(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{if(this.isConnected)try{this._input?.focus({preventScroll:!0})}catch{this._input?.focus()}}))}_emitValueEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0}))}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,getValue:()=>this.value,setValue:n=>{this.value=String(n??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:n=>{n?(this.setAttribute("validation","error"),this.setAttribute("data-error",n)):(this.removeAttribute("validation"),this.removeAttribute("data-error")),this._syncUi()}}))}catch{}}_onSlotChange(){this._syncDerivedState()}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?e?this.setAttribute("value",e):this.removeAttribute("value"):(this._syncInputValue(e),this._syncStrengthUi()),this._emitValueEvent("input",e);const i=Number(this.getAttribute("debounce")||0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emitValueEvent("debounced-input",e),this._debounceTimer=null},i)):this._emitValueEvent("debounced-input",e)}_onNativeChange(t){const e=t.target.value;this._emitValueEvent("change",e)}_onClearClick(t){if(t.preventDefault(),!(c(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}_onToggleClick(t){t.preventDefault(),t.stopPropagation(),this.toggleVisibility()}}typeof customElements<"u"&&!customElements.get("ui-password-field")&&customElements.define("ui-password-field",z);exports.UIPasswordField=z;