@vielzeug/refine 1.1.3 → 1.3.0

package/dist/pagination.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./content/pagination/pagination.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");function s(e,t,n){let r=t,i=[];if(r<=2+2*n+3)return Array.from({length:r},(e,t)=>t+1);let a=Math.max(e-n,2),o=Math.min(e+n,r-1);i.push(1),a>3?i.push(`ellipsis-start`):a===3&&i.push(2);for(let e=a;e<=o;e++)i.push(e);return o<r-1-1?i.push(`ellipsis-end`):o===r-1-1&&i.push(r-1),i.push(r),i}var c=`ore-pagination`;(0,a.define)(c,{props:{...r.themableBundle,...r.sizableBundle,label:a.prop.string(`Pagination`),page:a.prop.number(1),"show-first-last":a.prop.bool(!1),"show-prev-next":a.prop.bool(!1),siblings:a.prop.number(1),"total-pages":a.prop.number(1),variant:a.prop.string()},setup(e,{bind:t,el:n,emit:r}){function i(t){let i=e[`total-pages`].value||1,a=Math.min(Math.max(1,t),i);a!==e.page.value&&(n.setAttribute(`page`,String(a)),r(`change`,{page:a}))}let c=(0,o.computed)(()=>s(e.page.value||1,e[`total-pages`].value||1,e.siblings.value??1)),l=(0,o.computed)(()=>(e.page.value||1)<=1),u=(0,o.computed)(()=>(e.page.value||1)>=(e[`total-pages`].value||1));return a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./content/pagination/pagination.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");function s(e,t,n){let r=t,i=[];if(r<=2+2*n+3)return Array.from({length:r},(e,t)=>t+1);let a=Math.max(e-n,2),o=Math.min(e+n,r-1);i.push(1),a>3?i.push(`ellipsis-start`):a===3&&i.push(2);for(let e=a;e<=o;e++)i.push(e);return o<r-1-1?i.push(`ellipsis-end`):o===r-1-1&&i.push(r-1),i.push(r),i}var c=`ore-pagination`;(0,a.define)(c,{props:{...r.themableBundle,...r.sizableBundle,label:a.prop.string(`Pagination`),page:a.prop.number(1),"show-first-last":a.prop.bool(!1),"show-prev-next":a.prop.bool(!1),siblings:a.prop.number(1),"total-pages":a.prop.number(1),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),n=(0,a.useEmit)();function r(r){let i=e[`total-pages`].value||1,a=Math.min(Math.max(1,r),i);a!==e.page.value&&(t.setAttribute(`page`,String(a)),n(`change`,{page:a}))}let i=(0,o.computed)(()=>s(e.page.value||1,e[`total-pages`].value||1,e.siblings.value??1)),c=(0,o.computed)(()=>(e.page.value||1)<=1),l=(0,o.computed)(()=>(e.page.value||1)>=(e[`total-pages`].value||1));return a.html`
       <nav :aria-label="${e.label}" part="nav">
         <ol class="pagination" part="list">
           ${()=>e[`show-first-last`].value?a.html`<li>
@@ -7,8 +7,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     class="nav-btn"
                     part="first-btn"
                     aria-label="First page"
-                    ?disabled=${l}
-                    @click=${()=>i(1)}>
+                    ?disabled=${c}
+                    @click=${()=>r(1)}>
                     <ore-icon name="chevrons-left" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>`:``}
@@ -18,20 +18,20 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     class="nav-btn"
                     part="prev-btn"
                     aria-label="Previous page"
-                    ?disabled=${l}
-                    @click=${()=>i((e.page.value||1)-1)}>
+                    ?disabled=${c}
+                    @click=${()=>r((e.page.value||1)-1)}>
                     <ore-icon name="chevron-left" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>`:``}
           <li style="display: contents;">
-            ${()=>c.value.map(t=>{if(t===`ellipsis-start`||t===`ellipsis-end`)return a.html`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;let n=t,r=n===(e.page.value||1),o=`Page ${n}`;return r?a.html`<button
+            ${()=>i.value.map(t=>{if(t===`ellipsis-start`||t===`ellipsis-end`)return a.html`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;let n=t,i=n===(e.page.value||1),o=`Page ${n}`;return i?a.html`<button
                       type="button"
                       part="page-btn"
                       aria-label="${o}"
                       aria-current="page"
-                      @click=${()=>i(n)}>
+                      @click=${()=>r(n)}>
                       ${n}
-                    </button>`:a.html`<button type="button" part="page-btn" aria-label="${o}" @click=${()=>i(n)}>
+                    </button>`:a.html`<button type="button" part="page-btn" aria-label="${o}" @click=${()=>r(n)}>
                       ${n}
                     </button>`})}
           </li>
@@ -41,8 +41,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     class="nav-btn"
                     part="next-btn"
                     aria-label="Next page"
-                    ?disabled=${u}
-                    @click=${()=>i((e.page.value||1)+1)}>
+                    ?disabled=${l}
+                    @click=${()=>r((e.page.value||1)+1)}>
                     <ore-icon name="chevron-right" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>`:``}
@@ -52,8 +52,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     class="nav-btn"
                     part="last-btn"
                     aria-label="Last page"
-                    ?disabled=${u}
-                    @click=${()=>i(e[`total-pages`].value||1)}>
+                    ?disabled=${l}
+                    @click=${()=>r(e[`total-pages`].value||1)}>
                     <ore-icon name="chevrons-right" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>`:``}

package/dist/pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './pagination.css?inline';\n\nexport type OrePaginationEvents = {\n  change: { page: number };\n};\n\nexport type OrePaginationProps = {\n  color?: ThemeColor;\n  label?: string;\n  page?: number;\n  'show-first-last'?: boolean;\n  'show-prev-next'?: boolean;\n  siblings?: number;\n  size?: ComponentSize;\n  'total-pages'?: number;\n  variant?: VisualVariant;\n};\n\nfunction buildPageRange(\n  currentPage: number,\n  totalPages: number,\n  siblings: number,\n): Array<number | 'ellipsis-start' | 'ellipsis-end'> {\n  const BOUNDARY = 1; // always show first and last page\n  const total = totalPages;\n  const pages: Array<number | 'ellipsis-start' | 'ellipsis-end'> = [];\n\n  // If total is small enough, show all pages\n  if (total <= 2 * BOUNDARY + 2 * siblings + 3) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblings, BOUNDARY + 1);\n  const rightSibling = Math.min(currentPage + siblings, total - BOUNDARY);\n\n  pages.push(1);\n\n  if (leftSibling > BOUNDARY + 2) pages.push('ellipsis-start');\n  else if (leftSibling === BOUNDARY + 2) pages.push(BOUNDARY + 1);\n\n  for (let i = leftSibling; i <= rightSibling; i++) pages.push(i);\n\n  if (rightSibling < total - BOUNDARY - 1) pages.push('ellipsis-end');\n  else if (rightSibling === total - BOUNDARY - 1) pages.push(total - BOUNDARY);\n\n  pages.push(total);\n\n  return pages;\n}\n\n/**\n * Page-based navigation control.\n *\n * @element ore-pagination\n *\n * @attr {number} page - Current page (1-indexed, default: 1)\n * @attr {number} total-pages - Total number of pages (required)\n * @attr {number} siblings - Sibling pages around current (default: 1)\n * @attr {boolean} show-first-last - Show first/last page buttons (default: false)\n * @attr {boolean} show-prev-next - Show prev/next buttons (default: false)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' (default: 'ghost')\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav label (default: 'Pagination')\n *\n * @fires change - Emitted when the page changes, with { page: number }\n *\n * @cssprop --pagination-item-size - Width/height of each item\n * @cssprop --pagination-gap - Gap between items\n * @cssprop --pagination-radius - Border radius of items\n *\n * @part page-btn - Page button.\n * @part nav - Navigation container.\n * @part list - List container.\n * @part first-btn - First page button.\n * @part prev-btn - Previous page button.\n * @part next-btn - Next page button.\n * @part last-btn - Last page button.\n * @example\n * ```html\n * <!-- Basic -->\n * <ore-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></ore-pagination>\n *\n * <!-- With prev/next and first/last buttons -->\n * <ore-pagination page=\"5\" total-pages=\"20\" show-prev-next show-first-last siblings=\"2\"></ore-pagination>\n *\n * <!-- Compact size -->\n * <ore-pagination page=\"1\" total-pages=\"5\" size=\"sm\" variant=\"ghost\"></ore-pagination>\n * ```\n */\nexport const PAGINATION_TAG = 'ore-pagination' as const;\ndefine<OrePaginationProps, OrePaginationEvents>(PAGINATION_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    label: prop.string('Pagination'),\n    page: prop.number(1),\n    'show-first-last': prop.bool(false),\n    'show-prev-next': prop.bool(false),\n    siblings: prop.number(1),\n    'total-pages': prop.number(1),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props, { bind: _bind, el, emit }) {\n    function goTo(page: number) {\n      const total = props['total-pages'].value || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === props.page.value) return;\n\n      el.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(props.page.value || 1, props['total-pages'].value || 1, props.siblings.value ?? 1),\n    );\n\n    const isFirst = computed(() => (props.page.value || 1) <= 1);\n    const isLast = computed(() => (props.page.value || 1) >= (props['total-pages'].value || 1));\n\n    return html`\n      <nav :aria-label=\"${props.label}\" part=\"nav\">\n        <ol class=\"pagination\" part=\"list\">\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"first-btn\"\n                    aria-label=\"First page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo(1)}>\n                    <ore-icon name=\"chevrons-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"prev-btn\"\n                    aria-label=\"Previous page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo((props.page.value || 1) - 1)}>\n                    <ore-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${() =>\n              pageItems.value.map((item) => {\n                if (item === 'ellipsis-start' || item === 'ellipsis-end') {\n                  return html`<span class=\"ellipsis\" aria-hidden=\"true\">&hellip;</span>`;\n                }\n\n                const pg = item as number;\n                const isCurrent = pg === (props.page.value || 1);\n                const pgLabel = `Page ${pg}`;\n\n                return isCurrent\n                  ? html`<button\n                      type=\"button\"\n                      part=\"page-btn\"\n                      aria-label=\"${pgLabel}\"\n                      aria-current=\"page\"\n                      @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"${pgLabel}\" @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`;\n              })}\n          </li>\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"next-btn\"\n                    aria-label=\"Next page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo((props.page.value || 1) + 1)}>\n                    <ore-icon name=\"chevron-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"last-btn\"\n                    aria-label=\"Last page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo(props['total-pages'].value || 1)}>\n                    <ore-icon name=\"chevrons-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n\n  styles: [coarsePointerMixin, colorThemeMixin, sizeVariantMixin(), componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"pagination.cjs","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { define, html, prop, getHost, useEmit } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './pagination.css?inline';\n\nexport type OrePaginationEvents = {\n  change: { page: number };\n};\n\nexport type OrePaginationProps = {\n  color?: ThemeColor;\n  label?: string;\n  page?: number;\n  'show-first-last'?: boolean;\n  'show-prev-next'?: boolean;\n  siblings?: number;\n  size?: ComponentSize;\n  'total-pages'?: number;\n  variant?: VisualVariant;\n};\n\nfunction buildPageRange(\n  currentPage: number,\n  totalPages: number,\n  siblings: number,\n): Array<number | 'ellipsis-start' | 'ellipsis-end'> {\n  const BOUNDARY = 1; // always show first and last page\n  const total = totalPages;\n  const pages: Array<number | 'ellipsis-start' | 'ellipsis-end'> = [];\n\n  // If total is small enough, show all pages\n  if (total <= 2 * BOUNDARY + 2 * siblings + 3) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblings, BOUNDARY + 1);\n  const rightSibling = Math.min(currentPage + siblings, total - BOUNDARY);\n\n  pages.push(1);\n\n  if (leftSibling > BOUNDARY + 2) pages.push('ellipsis-start');\n  else if (leftSibling === BOUNDARY + 2) pages.push(BOUNDARY + 1);\n\n  for (let i = leftSibling; i <= rightSibling; i++) pages.push(i);\n\n  if (rightSibling < total - BOUNDARY - 1) pages.push('ellipsis-end');\n  else if (rightSibling === total - BOUNDARY - 1) pages.push(total - BOUNDARY);\n\n  pages.push(total);\n\n  return pages;\n}\n\n/**\n * Page-based navigation control.\n *\n * @element ore-pagination\n *\n * @attr {number} page - Current page (1-indexed, default: 1)\n * @attr {number} total-pages - Total number of pages (required)\n * @attr {number} siblings - Sibling pages around current (default: 1)\n * @attr {boolean} show-first-last - Show first/last page buttons (default: false)\n * @attr {boolean} show-prev-next - Show prev/next buttons (default: false)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' (default: 'ghost')\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav label (default: 'Pagination')\n *\n * @fires change - Emitted when the page changes, with { page: number }\n *\n * @cssprop --pagination-item-size - Width/height of each item\n * @cssprop --pagination-gap - Gap between items\n * @cssprop --pagination-radius - Border radius of items\n *\n * @part page-btn - Page button.\n * @part nav - Navigation container.\n * @part list - List container.\n * @part first-btn - First page button.\n * @part prev-btn - Previous page button.\n * @part next-btn - Next page button.\n * @part last-btn - Last page button.\n * @example\n * ```html\n * <!-- Basic -->\n * <ore-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></ore-pagination>\n *\n * <!-- With prev/next and first/last buttons -->\n * <ore-pagination page=\"5\" total-pages=\"20\" show-prev-next show-first-last siblings=\"2\"></ore-pagination>\n *\n * <!-- Compact size -->\n * <ore-pagination page=\"1\" total-pages=\"5\" size=\"sm\" variant=\"ghost\"></ore-pagination>\n * ```\n */\nexport const PAGINATION_TAG = 'ore-pagination' as const;\ndefine<OrePaginationProps>(PAGINATION_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    label: prop.string('Pagination'),\n    page: prop.number(1),\n    'show-first-last': prop.bool(false),\n    'show-prev-next': prop.bool(false),\n    siblings: prop.number(1),\n    'total-pages': prop.number(1),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OrePaginationEvents>();\n\n    function goTo(page: number) {\n      const total = props['total-pages'].value || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === props.page.value) return;\n\n      el.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(props.page.value || 1, props['total-pages'].value || 1, props.siblings.value ?? 1),\n    );\n\n    const isFirst = computed(() => (props.page.value || 1) <= 1);\n    const isLast = computed(() => (props.page.value || 1) >= (props['total-pages'].value || 1));\n\n    return html`\n      <nav :aria-label=\"${props.label}\" part=\"nav\">\n        <ol class=\"pagination\" part=\"list\">\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"first-btn\"\n                    aria-label=\"First page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo(1)}>\n                    <ore-icon name=\"chevrons-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"prev-btn\"\n                    aria-label=\"Previous page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo((props.page.value || 1) - 1)}>\n                    <ore-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${() =>\n              pageItems.value.map((item) => {\n                if (item === 'ellipsis-start' || item === 'ellipsis-end') {\n                  return html`<span class=\"ellipsis\" aria-hidden=\"true\">&hellip;</span>`;\n                }\n\n                const pg = item as number;\n                const isCurrent = pg === (props.page.value || 1);\n                const pgLabel = `Page ${pg}`;\n\n                return isCurrent\n                  ? html`<button\n                      type=\"button\"\n                      part=\"page-btn\"\n                      aria-label=\"${pgLabel}\"\n                      aria-current=\"page\"\n                      @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"${pgLabel}\" @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`;\n              })}\n          </li>\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"next-btn\"\n                    aria-label=\"Next page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo((props.page.value || 1) + 1)}>\n                    <ore-icon name=\"chevron-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"last-btn\"\n                    aria-label=\"Last page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo(props['total-pages'].value || 1)}>\n                    <ore-icon name=\"chevrons-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n\n  styles: [coarsePointerMixin, colorThemeMixin, sizeVariantMixin(), componentStyles],\n});\n"],"mappings":"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"}

package/dist/pagination.js

@@ -2,11 +2,11 @@ import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
 import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
 import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
 import { sizableBundle as r, themableBundle as i } from "./shared/prop-bundles.js";
-import a from "./content/pagination/pagination.css?inline.js";
-import { define as o, html as s, prop as c } from "@vielzeug/ore";
-import { computed as l } from "@vielzeug/ripple";
+import a from "./content/pagination/pagination.css.js";
+import { define as o, getHost as s, html as c, prop as l, useEmit as u } from "@vielzeug/ore";
+import { computed as d } from "@vielzeug/ripple";
 //#region src/content/pagination/pagination.ts
-function u(e, t, n) {
+function f(e, t, n) {
 	let r = t, i = [];
 	if (r <= 2 + 2 * n + 3) return Array.from({ length: r }, (e, t) => t + 1);
 	let a = Math.max(e - n, 2), o = Math.min(e + n, r - 1);
@@ -14,85 +14,86 @@ function u(e, t, n) {
 	for (let e = a; e <= o; e++) i.push(e);
 	return o < r - 1 - 1 ? i.push("ellipsis-end") : o === r - 1 - 1 && i.push(r - 1), i.push(r), i;
 }
-var d = "ore-pagination";
-o(d, {
+var p = "ore-pagination";
+o(p, {
 	props: {
 		...i,
 		...r,
-		label: c.string("Pagination"),
-		page: c.number(1),
-		"show-first-last": c.bool(!1),
-		"show-prev-next": c.bool(!1),
-		siblings: c.number(1),
-		"total-pages": c.number(1),
-		variant: c.string()
+		label: l.string("Pagination"),
+		page: l.number(1),
+		"show-first-last": l.bool(!1),
+		"show-prev-next": l.bool(!1),
+		siblings: l.number(1),
+		"total-pages": l.number(1),
+		variant: l.string()
 	},
-	setup(e, { bind: t, el: n, emit: r }) {
-		function i(t) {
-			let i = e["total-pages"].value || 1, a = Math.min(Math.max(1, t), i);
-			a !== e.page.value && (n.setAttribute("page", String(a)), r("change", { page: a }));
+	setup(e) {
+		let t = s(), n = u();
+		function r(r) {
+			let i = e["total-pages"].value || 1, a = Math.min(Math.max(1, r), i);
+			a !== e.page.value && (t.setAttribute("page", String(a)), n("change", { page: a }));
 		}
-		let a = l(() => u(e.page.value || 1, e["total-pages"].value || 1, e.siblings.value ?? 1)), o = l(() => (e.page.value || 1) <= 1), c = l(() => (e.page.value || 1) >= (e["total-pages"].value || 1));
-		return s`
+		let i = d(() => f(e.page.value || 1, e["total-pages"].value || 1, e.siblings.value ?? 1)), a = d(() => (e.page.value || 1) <= 1), o = d(() => (e.page.value || 1) >= (e["total-pages"].value || 1));
+		return c`
       <nav :aria-label="${e.label}" part="nav">
         <ol class="pagination" part="list">
-          ${() => e["show-first-last"].value ? s`<li>
+          ${() => e["show-first-last"].value ? c`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="first-btn"
                     aria-label="First page"
-                    ?disabled=${o}
-                    @click=${() => i(1)}>
+                    ?disabled=${a}
+                    @click=${() => r(1)}>
                     <ore-icon name="chevrons-left" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>` : ""}
-          ${() => e["show-prev-next"].value ? s`<li>
+          ${() => e["show-prev-next"].value ? c`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="prev-btn"
                     aria-label="Previous page"
-                    ?disabled=${o}
-                    @click=${() => i((e.page.value || 1) - 1)}>
+                    ?disabled=${a}
+                    @click=${() => r((e.page.value || 1) - 1)}>
                     <ore-icon name="chevron-left" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>` : ""}
           <li style="display: contents;">
-            ${() => a.value.map((t) => {
-			if (t === "ellipsis-start" || t === "ellipsis-end") return s`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;
-			let n = t, r = n === (e.page.value || 1), a = `Page ${n}`;
-			return r ? s`<button
+            ${() => i.value.map((t) => {
+			if (t === "ellipsis-start" || t === "ellipsis-end") return c`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;
+			let n = t, i = n === (e.page.value || 1), a = `Page ${n}`;
+			return i ? c`<button
                       type="button"
                       part="page-btn"
                       aria-label="${a}"
                       aria-current="page"
-                      @click=${() => i(n)}>
+                      @click=${() => r(n)}>
                       ${n}
-                    </button>` : s`<button type="button" part="page-btn" aria-label="${a}" @click=${() => i(n)}>
+                    </button>` : c`<button type="button" part="page-btn" aria-label="${a}" @click=${() => r(n)}>
                       ${n}
                     </button>`;
 		})}
           </li>
-          ${() => e["show-prev-next"].value ? s`<li>
+          ${() => e["show-prev-next"].value ? c`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="next-btn"
                     aria-label="Next page"
-                    ?disabled=${c}
-                    @click=${() => i((e.page.value || 1) + 1)}>
+                    ?disabled=${o}
+                    @click=${() => r((e.page.value || 1) + 1)}>
                     <ore-icon name="chevron-right" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>` : ""}
-          ${() => e["show-first-last"].value ? s`<li>
+          ${() => e["show-first-last"].value ? c`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="last-btn"
                     aria-label="Last page"
-                    ?disabled=${c}
-                    @click=${() => i(e["total-pages"].value || 1)}>
+                    ?disabled=${o}
+                    @click=${() => r(e["total-pages"].value || 1)}>
                     <ore-icon name="chevrons-right" size="16" aria-hidden="true"></ore-icon>
                   </button>
                 </li>` : ""}
@@ -108,6 +109,6 @@ o(d, {
 	]
 });
 //#endregion
-export { d as PAGINATION_TAG };
+export { p as PAGINATION_TAG };
 
 //# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './pagination.css?inline';\n\nexport type OrePaginationEvents = {\n  change: { page: number };\n};\n\nexport type OrePaginationProps = {\n  color?: ThemeColor;\n  label?: string;\n  page?: number;\n  'show-first-last'?: boolean;\n  'show-prev-next'?: boolean;\n  siblings?: number;\n  size?: ComponentSize;\n  'total-pages'?: number;\n  variant?: VisualVariant;\n};\n\nfunction buildPageRange(\n  currentPage: number,\n  totalPages: number,\n  siblings: number,\n): Array<number | 'ellipsis-start' | 'ellipsis-end'> {\n  const BOUNDARY = 1; // always show first and last page\n  const total = totalPages;\n  const pages: Array<number | 'ellipsis-start' | 'ellipsis-end'> = [];\n\n  // If total is small enough, show all pages\n  if (total <= 2 * BOUNDARY + 2 * siblings + 3) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblings, BOUNDARY + 1);\n  const rightSibling = Math.min(currentPage + siblings, total - BOUNDARY);\n\n  pages.push(1);\n\n  if (leftSibling > BOUNDARY + 2) pages.push('ellipsis-start');\n  else if (leftSibling === BOUNDARY + 2) pages.push(BOUNDARY + 1);\n\n  for (let i = leftSibling; i <= rightSibling; i++) pages.push(i);\n\n  if (rightSibling < total - BOUNDARY - 1) pages.push('ellipsis-end');\n  else if (rightSibling === total - BOUNDARY - 1) pages.push(total - BOUNDARY);\n\n  pages.push(total);\n\n  return pages;\n}\n\n/**\n * Page-based navigation control.\n *\n * @element ore-pagination\n *\n * @attr {number} page - Current page (1-indexed, default: 1)\n * @attr {number} total-pages - Total number of pages (required)\n * @attr {number} siblings - Sibling pages around current (default: 1)\n * @attr {boolean} show-first-last - Show first/last page buttons (default: false)\n * @attr {boolean} show-prev-next - Show prev/next buttons (default: false)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' (default: 'ghost')\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav label (default: 'Pagination')\n *\n * @fires change - Emitted when the page changes, with { page: number }\n *\n * @cssprop --pagination-item-size - Width/height of each item\n * @cssprop --pagination-gap - Gap between items\n * @cssprop --pagination-radius - Border radius of items\n *\n * @part page-btn - Page button.\n * @part nav - Navigation container.\n * @part list - List container.\n * @part first-btn - First page button.\n * @part prev-btn - Previous page button.\n * @part next-btn - Next page button.\n * @part last-btn - Last page button.\n * @example\n * ```html\n * <!-- Basic -->\n * <ore-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></ore-pagination>\n *\n * <!-- With prev/next and first/last buttons -->\n * <ore-pagination page=\"5\" total-pages=\"20\" show-prev-next show-first-last siblings=\"2\"></ore-pagination>\n *\n * <!-- Compact size -->\n * <ore-pagination page=\"1\" total-pages=\"5\" size=\"sm\" variant=\"ghost\"></ore-pagination>\n * ```\n */\nexport const PAGINATION_TAG = 'ore-pagination' as const;\ndefine<OrePaginationProps, OrePaginationEvents>(PAGINATION_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    label: prop.string('Pagination'),\n    page: prop.number(1),\n    'show-first-last': prop.bool(false),\n    'show-prev-next': prop.bool(false),\n    siblings: prop.number(1),\n    'total-pages': prop.number(1),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props, { bind: _bind, el, emit }) {\n    function goTo(page: number) {\n      const total = props['total-pages'].value || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === props.page.value) return;\n\n      el.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(props.page.value || 1, props['total-pages'].value || 1, props.siblings.value ?? 1),\n    );\n\n    const isFirst = computed(() => (props.page.value || 1) <= 1);\n    const isLast = computed(() => (props.page.value || 1) >= (props['total-pages'].value || 1));\n\n    return html`\n      <nav :aria-label=\"${props.label}\" part=\"nav\">\n        <ol class=\"pagination\" part=\"list\">\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"first-btn\"\n                    aria-label=\"First page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo(1)}>\n                    <ore-icon name=\"chevrons-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"prev-btn\"\n                    aria-label=\"Previous page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo((props.page.value || 1) - 1)}>\n                    <ore-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${() =>\n              pageItems.value.map((item) => {\n                if (item === 'ellipsis-start' || item === 'ellipsis-end') {\n                  return html`<span class=\"ellipsis\" aria-hidden=\"true\">&hellip;</span>`;\n                }\n\n                const pg = item as number;\n                const isCurrent = pg === (props.page.value || 1);\n                const pgLabel = `Page ${pg}`;\n\n                return isCurrent\n                  ? html`<button\n                      type=\"button\"\n                      part=\"page-btn\"\n                      aria-label=\"${pgLabel}\"\n                      aria-current=\"page\"\n                      @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"${pgLabel}\" @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`;\n              })}\n          </li>\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"next-btn\"\n                    aria-label=\"Next page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo((props.page.value || 1) + 1)}>\n                    <ore-icon name=\"chevron-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"last-btn\"\n                    aria-label=\"Last page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo(props['total-pages'].value || 1)}>\n                    <ore-icon name=\"chevrons-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n\n  styles: [coarsePointerMixin, colorThemeMixin, sizeVariantMixin(), componentStyles],\n});\n"],"mappings":";;;;;;;;AA2BA,SAAS,EACP,GACA,GACA,GACmD;CACnD,IACM,IAAQ,GACR,IAA2D,CAAC;CAGlE,IAAI,KAAS,IAAe,IAAI,IAAW,GACzC,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAGtD,IAAM,IAAc,KAAK,IAAI,IAAc,GAAU,CAAY,GAC3D,IAAe,KAAK,IAAI,IAAc,GAAU,IAAQ,CAAQ;CAItE,AAFA,EAAM,KAAK,CAAC,GAER,IAAc,IAAc,EAAM,KAAK,gBAAgB,IAClD,MAAgB,KAAc,EAAM,KAAK,CAAY;CAE9D,KAAK,IAAI,IAAI,GAAa,KAAK,GAAc,KAAK,EAAM,KAAK,CAAC;CAO9D,OALI,IAAe,IAAQ,IAAW,IAAG,EAAM,KAAK,cAAc,IACzD,MAAiB,IAAQ,IAAW,KAAG,EAAM,KAAK,IAAQ,CAAQ,GAE3E,EAAM,KAAK,CAAK,GAET;AACT;AA0CA,IAAa,IAAiB;AAC9B,EAAgD,GAAgB;CAC9D,OAAO;EACL,GAAG;EACH,GAAG;EACH,OAAO,EAAK,OAAO,YAAY;EAC/B,MAAM,EAAK,OAAO,CAAC;EACnB,mBAAmB,EAAK,KAAK,EAAK;EAClC,kBAAkB,EAAK,KAAK,EAAK;EACjC,UAAU,EAAK,OAAO,CAAC;EACvB,eAAe,EAAK,OAAO,CAAC;EAC5B,SAAS,EAAK,OAAsB;CACtC;CACA,MAAM,GAAO,EAAE,MAAM,GAAO,OAAI,WAAQ;EACtC,SAAS,EAAK,GAAc;GAC1B,IAAM,IAAQ,EAAM,cAAc,CAAC,SAAS,GACtC,IAAO,KAAK,IAAI,KAAK,IAAI,GAAG,CAAI,GAAG,CAAK;GAE1C,MAAS,EAAM,KAAK,UAExB,EAAG,aAAa,QAAQ,OAAO,CAAI,CAAC,GACpC,EAAK,UAAU,EAAE,MAAM,EAAK,CAAC;EAC/B;EAEA,IAAM,IAAY,QAChB,EAAe,EAAM,KAAK,SAAS,GAAG,EAAM,cAAc,CAAC,SAAS,GAAG,EAAM,SAAS,SAAS,CAAC,CAClG,GAEM,IAAU,SAAgB,EAAM,KAAK,SAAS,MAAM,CAAC,GACrD,IAAS,SAAgB,EAAM,KAAK,SAAS,OAAO,EAAM,cAAc,CAAC,SAAS,EAAE;EAE1F,OAAO,CAAI;0BACW,EAAM,MAAM;;kBAG1B,EAAM,kBAAkB,CAAC,QACrB,CAAI;;;;;;gCAMY,EAAQ;mCACL,EAAK,CAAC,EAAE;;;yBAI3B,GAAG;kBAEP,EAAM,iBAAiB,CAAC,QACpB,CAAI;;;;;;gCAMY,EAAQ;mCACL,GAAM,EAAM,KAAK,SAAS,KAAK,CAAC,EAAE;;;yBAIrD,GAAG;;oBAGL,EAAU,MAAM,KAAK,MAAS;GAC5B,IAAI,MAAS,oBAAoB,MAAS,gBACxC,OAAO,CAAI;GAGb,IAAM,IAAK,GACL,IAAY,OAAQ,EAAM,KAAK,SAAS,IACxC,IAAU,QAAQ;GAExB,OAAO,IACH,CAAI;;;oCAGY,EAAQ;;qCAEP,EAAK,CAAE,EAAE;wBACtB,EAAG;iCAEP,CAAI,qDAAqD,EAAQ,iBAAiB,EAAK,CAAE,EAAE;wBACvF,EAAG;;EAEb,CAAC,EAAE;;kBAGL,EAAM,iBAAiB,CAAC,QACpB,CAAI;;;;;;gCAMY,EAAO;mCACJ,GAAM,EAAM,KAAK,SAAS,KAAK,CAAC,EAAE;;;yBAIrD,GAAG;kBAEP,EAAM,kBAAkB,CAAC,QACrB,CAAI;;;;;;gCAMY,EAAO;mCACJ,EAAK,EAAM,cAAc,CAAC,SAAS,CAAC,EAAE;;;yBAIzD,GAAG;;;;CAIjB;CAEA,QAAQ;EAAC;EAAoB;EAAiB,EAAiB;EAAG;CAAe;AACnF,CAAC"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { define, html, prop, getHost, useEmit } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './pagination.css?inline';\n\nexport type OrePaginationEvents = {\n  change: { page: number };\n};\n\nexport type OrePaginationProps = {\n  color?: ThemeColor;\n  label?: string;\n  page?: number;\n  'show-first-last'?: boolean;\n  'show-prev-next'?: boolean;\n  siblings?: number;\n  size?: ComponentSize;\n  'total-pages'?: number;\n  variant?: VisualVariant;\n};\n\nfunction buildPageRange(\n  currentPage: number,\n  totalPages: number,\n  siblings: number,\n): Array<number | 'ellipsis-start' | 'ellipsis-end'> {\n  const BOUNDARY = 1; // always show first and last page\n  const total = totalPages;\n  const pages: Array<number | 'ellipsis-start' | 'ellipsis-end'> = [];\n\n  // If total is small enough, show all pages\n  if (total <= 2 * BOUNDARY + 2 * siblings + 3) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblings, BOUNDARY + 1);\n  const rightSibling = Math.min(currentPage + siblings, total - BOUNDARY);\n\n  pages.push(1);\n\n  if (leftSibling > BOUNDARY + 2) pages.push('ellipsis-start');\n  else if (leftSibling === BOUNDARY + 2) pages.push(BOUNDARY + 1);\n\n  for (let i = leftSibling; i <= rightSibling; i++) pages.push(i);\n\n  if (rightSibling < total - BOUNDARY - 1) pages.push('ellipsis-end');\n  else if (rightSibling === total - BOUNDARY - 1) pages.push(total - BOUNDARY);\n\n  pages.push(total);\n\n  return pages;\n}\n\n/**\n * Page-based navigation control.\n *\n * @element ore-pagination\n *\n * @attr {number} page - Current page (1-indexed, default: 1)\n * @attr {number} total-pages - Total number of pages (required)\n * @attr {number} siblings - Sibling pages around current (default: 1)\n * @attr {boolean} show-first-last - Show first/last page buttons (default: false)\n * @attr {boolean} show-prev-next - Show prev/next buttons (default: false)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' (default: 'ghost')\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} label - Accessible nav label (default: 'Pagination')\n *\n * @fires change - Emitted when the page changes, with { page: number }\n *\n * @cssprop --pagination-item-size - Width/height of each item\n * @cssprop --pagination-gap - Gap between items\n * @cssprop --pagination-radius - Border radius of items\n *\n * @part page-btn - Page button.\n * @part nav - Navigation container.\n * @part list - List container.\n * @part first-btn - First page button.\n * @part prev-btn - Previous page button.\n * @part next-btn - Next page button.\n * @part last-btn - Last page button.\n * @example\n * ```html\n * <!-- Basic -->\n * <ore-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></ore-pagination>\n *\n * <!-- With prev/next and first/last buttons -->\n * <ore-pagination page=\"5\" total-pages=\"20\" show-prev-next show-first-last siblings=\"2\"></ore-pagination>\n *\n * <!-- Compact size -->\n * <ore-pagination page=\"1\" total-pages=\"5\" size=\"sm\" variant=\"ghost\"></ore-pagination>\n * ```\n */\nexport const PAGINATION_TAG = 'ore-pagination' as const;\ndefine<OrePaginationProps>(PAGINATION_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    label: prop.string('Pagination'),\n    page: prop.number(1),\n    'show-first-last': prop.bool(false),\n    'show-prev-next': prop.bool(false),\n    siblings: prop.number(1),\n    'total-pages': prop.number(1),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OrePaginationEvents>();\n\n    function goTo(page: number) {\n      const total = props['total-pages'].value || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === props.page.value) return;\n\n      el.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(props.page.value || 1, props['total-pages'].value || 1, props.siblings.value ?? 1),\n    );\n\n    const isFirst = computed(() => (props.page.value || 1) <= 1);\n    const isLast = computed(() => (props.page.value || 1) >= (props['total-pages'].value || 1));\n\n    return html`\n      <nav :aria-label=\"${props.label}\" part=\"nav\">\n        <ol class=\"pagination\" part=\"list\">\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"first-btn\"\n                    aria-label=\"First page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo(1)}>\n                    <ore-icon name=\"chevrons-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"prev-btn\"\n                    aria-label=\"Previous page\"\n                    ?disabled=${isFirst}\n                    @click=${() => goTo((props.page.value || 1) - 1)}>\n                    <ore-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${() =>\n              pageItems.value.map((item) => {\n                if (item === 'ellipsis-start' || item === 'ellipsis-end') {\n                  return html`<span class=\"ellipsis\" aria-hidden=\"true\">&hellip;</span>`;\n                }\n\n                const pg = item as number;\n                const isCurrent = pg === (props.page.value || 1);\n                const pgLabel = `Page ${pg}`;\n\n                return isCurrent\n                  ? html`<button\n                      type=\"button\"\n                      part=\"page-btn\"\n                      aria-label=\"${pgLabel}\"\n                      aria-current=\"page\"\n                      @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"${pgLabel}\" @click=${() => goTo(pg)}>\n                      ${pg}\n                    </button>`;\n              })}\n          </li>\n          ${() =>\n            props['show-prev-next'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"next-btn\"\n                    aria-label=\"Next page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo((props.page.value || 1) + 1)}>\n                    <ore-icon name=\"chevron-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n          ${() =>\n            props['show-first-last'].value\n              ? html`<li>\n                  <button\n                    type=\"button\"\n                    class=\"nav-btn\"\n                    part=\"last-btn\"\n                    aria-label=\"Last page\"\n                    ?disabled=${isLast}\n                    @click=${() => goTo(props['total-pages'].value || 1)}>\n                    <ore-icon name=\"chevrons-right\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n\n  styles: [coarsePointerMixin, colorThemeMixin, sizeVariantMixin(), componentStyles],\n});\n"],"mappings":";;;;;;;;AA2BA,SAAS,EACP,GACA,GACA,GACmD;CACnD,IACM,IAAQ,GACR,IAA2D,CAAC;CAGlE,IAAI,KAAS,IAAe,IAAI,IAAW,GACzC,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAGtD,IAAM,IAAc,KAAK,IAAI,IAAc,GAAU,CAAY,GAC3D,IAAe,KAAK,IAAI,IAAc,GAAU,IAAQ,CAAQ;CAItE,AAFA,EAAM,KAAK,CAAC,GAER,IAAc,IAAc,EAAM,KAAK,gBAAgB,IAClD,MAAgB,KAAc,EAAM,KAAK,CAAY;CAE9D,KAAK,IAAI,IAAI,GAAa,KAAK,GAAc,KAAK,EAAM,KAAK,CAAC;CAO9D,OALI,IAAe,IAAQ,IAAW,IAAG,EAAM,KAAK,cAAc,IACzD,MAAiB,IAAQ,IAAW,KAAG,EAAM,KAAK,IAAQ,CAAQ,GAE3E,EAAM,KAAK,CAAK,GAET;AACT;AA0CA,IAAa,IAAiB;AAC9B,EAA2B,GAAgB;CACzC,OAAO;EACL,GAAG;EACH,GAAG;EACH,OAAO,EAAK,OAAO,YAAY;EAC/B,MAAM,EAAK,OAAO,CAAC;EACnB,mBAAmB,EAAK,KAAK,EAAK;EAClC,kBAAkB,EAAK,KAAK,EAAK;EACjC,UAAU,EAAK,OAAO,CAAC;EACvB,eAAe,EAAK,OAAO,CAAC;EAC5B,SAAS,EAAK,OAAsB;CACtC;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA6B;EAE1C,SAAS,EAAK,GAAc;GAC1B,IAAM,IAAQ,EAAM,cAAc,CAAC,SAAS,GACtC,IAAO,KAAK,IAAI,KAAK,IAAI,GAAG,CAAI,GAAG,CAAK;GAE1C,MAAS,EAAM,KAAK,UAExB,EAAG,aAAa,QAAQ,OAAO,CAAI,CAAC,GACpC,EAAK,UAAU,EAAE,MAAM,EAAK,CAAC;EAC/B;EAEA,IAAM,IAAY,QAChB,EAAe,EAAM,KAAK,SAAS,GAAG,EAAM,cAAc,CAAC,SAAS,GAAG,EAAM,SAAS,SAAS,CAAC,CAClG,GAEM,IAAU,SAAgB,EAAM,KAAK,SAAS,MAAM,CAAC,GACrD,IAAS,SAAgB,EAAM,KAAK,SAAS,OAAO,EAAM,cAAc,CAAC,SAAS,EAAE;EAE1F,OAAO,CAAI;0BACW,EAAM,MAAM;;kBAG1B,EAAM,kBAAkB,CAAC,QACrB,CAAI;;;;;;gCAMY,EAAQ;mCACL,EAAK,CAAC,EAAE;;;yBAI3B,GAAG;kBAEP,EAAM,iBAAiB,CAAC,QACpB,CAAI;;;;;;gCAMY,EAAQ;mCACL,GAAM,EAAM,KAAK,SAAS,KAAK,CAAC,EAAE;;;yBAIrD,GAAG;;oBAGL,EAAU,MAAM,KAAK,MAAS;GAC5B,IAAI,MAAS,oBAAoB,MAAS,gBACxC,OAAO,CAAI;GAGb,IAAM,IAAK,GACL,IAAY,OAAQ,EAAM,KAAK,SAAS,IACxC,IAAU,QAAQ;GAExB,OAAO,IACH,CAAI;;;oCAGY,EAAQ;;qCAEP,EAAK,CAAE,EAAE;wBACtB,EAAG;iCAEP,CAAI,qDAAqD,EAAQ,iBAAiB,EAAK,CAAE,EAAE;wBACvF,EAAG;;EAEb,CAAC,EAAE;;kBAGL,EAAM,iBAAiB,CAAC,QACpB,CAAI;;;;;;gCAMY,EAAO;mCACJ,GAAM,EAAM,KAAK,SAAS,KAAK,CAAC,EAAE;;;yBAIrD,GAAG;kBAEP,EAAM,kBAAkB,CAAC,QACrB,CAAI;;;;;;gCAMY,EAAO;mCACJ,EAAK,EAAM,cAAc,CAAC,SAAS,CAAC,EAAE;;;yBAIzD,GAAG;;;;CAIjB;CAEA,QAAQ;EAAC;EAAoB;EAAiB,EAAiB;EAAG;CAAe;AACnF,CAAC"}

package/dist/password-strength.cjs

@@ -1,19 +1,19 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./feedback/password-strength/password-strength.css?inline.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-password-strength`;(0,n.define)(i,{props:{label:n.prop.string(`Password strength`),labels:n.prop.json(void 0),score:n.prop.number(-1),"show-label":n.prop.bool(!0),value:n.prop.string()},setup(e,{bind:t,el:i}){let a={empty:``,fair:`Fair`,good:`Good`,strong:`Strong`,weak:`Weak`},o=[`empty`,`weak`,`fair`,`good`,`strong`],s=e=>{if(!e)return 0;if(e.length<6)return 1;let t=/[a-z]/.test(e),n=/[A-Z]/.test(e),r=/\d/.test(e),i=/[^a-zA-Z0-9]/.test(e);return e.length>=12&&t&&n&&r&&i?4:(t||n)&&(r||i)&&e.length>=8?3:(t||n)&&e.length>=8?2:1},c=()=>{let t=e.score.value??-1,n=t>=0?Math.max(0,Math.min(4,Math.trunc(t))):s(e.value.value??``);return o[n]},l=(0,r.computed)(()=>{let t=e.score.value??-1;return t>=0?Math.max(0,Math.min(4,Math.trunc(t))):s(e.value.value??``)}),u=(0,r.computed)(()=>{let t=e.labels.value;return Array.isArray(t)&&t.length===5?String(t[l.value]??``):a[c()]}),d=(0,r.computed)(()=>l.value===0?null:u.value||null);t({attr:{"data-level":()=>c()}});let f=e=>()=>`segment${l.value>=e?` active`:``}`;return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./feedback/password-strength/password-strength.css.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-password-strength`;(0,n.define)(i,{props:{label:n.prop.string(`Password strength`),labels:n.prop.json(void 0),score:n.prop.number(-1),"show-label":n.prop.bool(!0),value:n.prop.string()},setup(e){let t={empty:``,fair:`Fair`,good:`Good`,strong:`Strong`,weak:`Weak`},i=[`empty`,`weak`,`fair`,`good`,`strong`],a=e=>{if(!e)return 0;if(e.length<6)return 1;let t=/[a-z]/.test(e),n=/[A-Z]/.test(e),r=/\d/.test(e),i=/[^a-zA-Z0-9]/.test(e);return e.length>=12&&t&&n&&r&&i?4:(t||n)&&(r||i)&&e.length>=8?3:(t||n)&&e.length>=8?2:1},o=()=>{let t=e.score.value??-1,n=t>=0?Math.max(0,Math.min(4,Math.trunc(t))):a(e.value.value??``);return i[n]},s=(0,r.computed)(()=>{let t=e.score.value??-1;return t>=0?Math.max(0,Math.min(4,Math.trunc(t))):a(e.value.value??``)}),c=(0,r.computed)(()=>{let n=e.labels.value;return Array.isArray(n)&&n.length===5?String(n[s.value]??``):t[o()]}),l=(0,r.computed)(()=>s.value===0?null:c.value||null);(0,n.bind)({attr:{"data-level":()=>o()}});let u=e=>()=>`segment${s.value>=e?` active`:``}`;return n.html`
       <div
         class="meter"
         role="meter"
         :aria-label="${e.label}"
         aria-valuemin="0"
         aria-valuemax="4"
-        :aria-valuenow="${()=>String(l.value)}"
-        :aria-valuetext="${()=>d.value}">
+        :aria-valuenow="${()=>String(s.value)}"
+        :aria-valuetext="${()=>l.value}">
         <div class="segments" aria-hidden="true">
-          <div class="${f(1)}"></div>
-          <div class="${f(2)}"></div>
-          <div class="${f(3)}"></div>
-          <div class="${f(4)}"></div>
+          <div class="${u(1)}"></div>
+          <div class="${u(2)}"></div>
+          <div class="${u(3)}"></div>
+          <div class="${u(4)}"></div>
         </div>
       </div>
-      ${()=>e[`show-label`].value?n.html`<span class="level-label" aria-live="polite" aria-atomic="true">${()=>u.value}</span>`:``}
+      ${()=>e[`show-label`].value?n.html`<span class="level-label" aria-live="polite" aria-atomic="true">${()=>c.value}</span>`:``}
     `},styles:[e.reducedMotionMixin,t.default]}),exports.PASSWORD_STRENGTH_TAG=i;
 //# sourceMappingURL=password-strength.cjs.map

package/dist/password-strength.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"password-strength.cjs","names":[],"sources":["../src/feedback/password-strength/password-strength.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './password-strength.css?inline';\n\n/** Scoring levels for password strength. */\nexport type PasswordStrengthLevel = 'empty' | 'weak' | 'fair' | 'good' | 'strong';\n\n/** Props accepted by <ore-password-strength>. */\nexport type OrePasswordStrengthProps = {\n  /** Accessible name for assistive technology. Default: 'Password strength'. */\n  label?: string;\n  /**\n   * Optional level labels in order: empty, weak, fair, good, strong.\n   * If omitted or invalid length, defaults are used.\n   */\n  labels?: string[];\n  /**\n   * Optional score override (0..4). Use this to integrate external scorers\n   * such as zxcvbn while keeping block rendering and accessibility behavior.\n   * -1 means no override (default).\n   */\n  score?: number;\n  /** Whether to render visible textual feedback. Default: true. */\n  'show-label'?: boolean;\n  /** Password string to evaluate. */\n  value?: string;\n};\n\n/**\n * Strong password meter with segmented progress visualization.\n *\n * Built-in scoring is heuristic and conservative:\n * - length < 6 => weak\n * - length >= 8 with mixed case => fair\n * - + digit or symbol => good\n * - length >= 12 with mixed case, digit and symbol => strong\n *\n * @element ore-password-strength\n *\n * @attr {string} value - Password string to evaluate\n * @attr {number} score - Optional score override (0..4). Use -1 for no override (default: -1)\n * @attr {boolean} show-label - Show visible feedback label (default: true)\n * @attr {string} label - Accessible name (default: 'Password strength')\n *\n * @cssprop --password-strength-height       Segment bar height\n * @cssprop --password-strength-gap          Gap between segments\n * @cssprop --password-strength-radius       Segment corner radius\n * @cssprop --password-strength-track-bg     Inactive segment color\n * @cssprop --password-strength-label-size   Visible label font size\n * @cssprop --password-strength-label-color  Visible label color\n * @cssprop --password-strength-weak-color   Weak state segment color\n * @cssprop --password-strength-fair-color   Fair state segment color\n * @cssprop --password-strength-good-color   Good state segment color\n * @cssprop --password-strength-strong-color Strong state segment color\n *\n * @example\n * ```html\n * <!-- Pair with an ore-input to evaluate in real time -->\n * <ore-input type=\"password\" label=\"Password\" name=\"password\" id=\"pwd\"></ore-input>\n * <ore-password-strength id=\"meter\"></ore-password-strength>\n * <script type=\"module\">\n *   document.getElementById('pwd').addEventListener('input', (e) => {\n *     document.getElementById('meter').value = e.target.value;\n *   });\n * </script>\n *\n * <!-- Fixed score display (e.g. from a server-side score) -->\n * <ore-password-strength score=\"3\"></ore-password-strength>\n * ```\n */\nexport const PASSWORD_STRENGTH_TAG = 'ore-password-strength' as const;\ndefine<OrePasswordStrengthProps>(PASSWORD_STRENGTH_TAG, {\n  props: {\n    label: prop.string('Password strength'),\n    labels: prop.json(undefined as string[] | undefined),\n    score: prop.number(-1),\n    'show-label': prop.bool(true),\n    value: prop.string(),\n  },\n\n  setup(props, { bind, el: _el }) {\n    const defaultLabels: Record<PasswordStrengthLevel, string> = {\n      empty: '',\n      fair: 'Fair',\n      good: 'Good',\n      strong: 'Strong',\n      weak: 'Weak',\n    };\n\n    const levels: PasswordStrengthLevel[] = ['empty', 'weak', 'fair', 'good', 'strong'];\n\n    const computeScore = (password: string): 0 | 1 | 2 | 3 | 4 => {\n      if (!password) return 0;\n\n      if (password.length < 6) return 1;\n\n      const hasLower = /[a-z]/.test(password);\n      const hasUpper = /[A-Z]/.test(password);\n      const hasDigit = /\\d/.test(password);\n      const hasSymbol = /[^a-zA-Z0-9]/.test(password);\n      const long = password.length >= 12;\n\n      if (long && hasLower && hasUpper && hasDigit && hasSymbol) return 4;\n\n      if ((hasLower || hasUpper) && (hasDigit || hasSymbol) && password.length >= 8) return 3;\n\n      if ((hasLower || hasUpper) && password.length >= 8) return 2;\n\n      return 1;\n    };\n\n    const computeLevel = (): PasswordStrengthLevel => {\n      const external = props.score.value ?? -1;\n      const finalScore =\n        external >= 0 ? Math.max(0, Math.min(4, Math.trunc(external))) : computeScore(props.value.value ?? '');\n\n      return levels[finalScore];\n    };\n\n    const score = computed<0 | 1 | 2 | 3 | 4>(() => {\n      // score >= 0 means an external override was provided\n      const external = props.score.value ?? -1;\n\n      if (external >= 0) {\n        return Math.max(0, Math.min(4, Math.trunc(external))) as 0 | 1 | 2 | 3 | 4;\n      }\n\n      return computeScore(props.value.value ?? '');\n    });\n\n    const levelLabel = computed<string>(() => {\n      const custom = props.labels.value;\n\n      if (Array.isArray(custom) && custom.length === 5) return String(custom[score.value] ?? '');\n\n      return defaultLabels[computeLevel()];\n    });\n\n    const ariaValueText = computed<string | null>(() => {\n      if (score.value === 0) return null;\n\n      return levelLabel.value || null;\n    });\n\n    // Sync level change to data-level attribute reactively\n    bind({\n      attr: {\n        'data-level': () => computeLevel(),\n      },\n    });\n\n    const segClass = (threshold: number) => () => `segment${score.value >= threshold ? ' active' : ''}`;\n\n    return html`\n      <div\n        class=\"meter\"\n        role=\"meter\"\n        :aria-label=\"${props.label}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"4\"\n        :aria-valuenow=\"${() => String(score.value)}\"\n        :aria-valuetext=\"${() => ariaValueText.value}\">\n        <div class=\"segments\" aria-hidden=\"true\">\n          <div class=\"${segClass(1)}\"></div>\n          <div class=\"${segClass(2)}\"></div>\n          <div class=\"${segClass(3)}\"></div>\n          <div class=\"${segClass(4)}\"></div>\n        </div>\n      </div>\n      ${() =>\n        props['show-label'].value\n          ? html`<span class=\"level-label\" aria-live=\"polite\" aria-atomic=\"true\">${() => levelLabel.value}</span>`\n          : ''}\n    `;\n  },\n\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"oQAwEA,IAAa,EAAwB,qCACJ,EAAuB,CACtD,MAAO,CACL,MAAO,EAAA,KAAK,OAAO,mBAAmB,EACtC,OAAQ,EAAA,KAAK,KAAK,IAAA,EAAiC,EACnD,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,aAAc,EAAA,KAAK,KAAK,EAAI,EAC5B,MAAO,EAAA,KAAK,OAAO,CACrB,EAEA,MAAM,EAAO,CAAE,OAAM,GAAI,GAAO,CAC9B,IAAM,EAAuD,CAC3D,MAAO,GACP,KAAM,OACN,KAAM,OACN,OAAQ,SACR,KAAM,MACR,EAEM,EAAkC,CAAC,QAAS,OAAQ,OAAQ,OAAQ,QAAQ,EAE5E,EAAgB,GAAwC,CAC5D,GAAI,CAAC,EAAU,MAAO,GAEtB,GAAI,EAAS,OAAS,EAAG,MAAO,GAEhC,IAAM,EAAW,QAAQ,KAAK,CAAQ,EAChC,EAAW,QAAQ,KAAK,CAAQ,EAChC,EAAW,KAAK,KAAK,CAAQ,EAC7B,EAAY,eAAe,KAAK,CAAQ,EAS9C,OARa,EAAS,QAAU,IAEpB,GAAY,GAAY,GAAY,EAAkB,GAE7D,GAAY,KAAc,GAAY,IAAc,EAAS,QAAU,EAAU,GAEjF,GAAY,IAAa,EAAS,QAAU,EAAU,EAEpD,CACT,EAEM,MAA4C,CAChD,IAAM,EAAW,EAAM,MAAM,OAAS,GAChC,EACJ,GAAY,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,EAAI,EAAa,EAAM,MAAM,OAAS,EAAE,EAEvG,OAAO,EAAO,EAChB,EAEM,GAAA,EAAA,EAAA,SAAA,KAA0C,CAE9C,IAAM,EAAW,EAAM,MAAM,OAAS,GAMtC,OAJI,GAAY,EACP,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,EAG/C,EAAa,EAAM,MAAM,OAAS,EAAE,CAC7C,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAAoC,CACxC,IAAM,EAAS,EAAM,OAAO,MAI5B,OAFI,MAAM,QAAQ,CAAM,GAAK,EAAO,SAAW,EAAU,OAAO,EAAO,EAAM,QAAU,EAAE,EAElF,EAAc,EAAa,EACpC,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KACA,EAAM,QAAU,EAAU,KAEvB,EAAW,OAAS,IAC5B,EAGD,EAAK,CACH,KAAM,CACJ,iBAAoB,EAAa,CACnC,CACF,CAAC,EAED,IAAM,EAAY,OAA4B,UAAU,EAAM,OAAS,EAAY,UAAY,KAE/F,MAAO,GAAA,IAAI;;;;uBAIQ,EAAM,MAAM;;;8BAGH,OAAO,EAAM,KAAK,EAAE;+BACnB,EAAc,MAAM;;wBAE7B,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;;;YAI5B,EAAM,aAAa,CAAC,MAChB,EAAA,IAAI,uEAAyE,EAAW,MAAM,SAC9F,GAAG;KAEb,EAEA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}
+{"version":3,"file":"password-strength.cjs","names":[],"sources":["../src/feedback/password-strength/password-strength.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './password-strength.css?inline';\n\n/** Scoring levels for password strength. */\nexport type PasswordStrengthLevel = 'empty' | 'weak' | 'fair' | 'good' | 'strong';\n\n/** Props accepted by <ore-password-strength>. */\nexport type OrePasswordStrengthProps = {\n  /** Accessible name for assistive technology. Default: 'Password strength'. */\n  label?: string;\n  /**\n   * Optional level labels in order: empty, weak, fair, good, strong.\n   * If omitted or invalid length, defaults are used.\n   */\n  labels?: string[];\n  /**\n   * Optional score override (0..4). Use this to integrate external scorers\n   * such as zxcvbn while keeping block rendering and accessibility behavior.\n   * -1 means no override (default).\n   */\n  score?: number;\n  /** Whether to render visible textual feedback. Default: true. */\n  'show-label'?: boolean;\n  /** Password string to evaluate. */\n  value?: string;\n};\n\n/**\n * Strong password meter with segmented progress visualization.\n *\n * Built-in scoring is heuristic and conservative:\n * - length < 6 => weak\n * - length >= 8 with mixed case => fair\n * - + digit or symbol => good\n * - length >= 12 with mixed case, digit and symbol => strong\n *\n * @element ore-password-strength\n *\n * @attr {string} value - Password string to evaluate\n * @attr {number} score - Optional score override (0..4). Use -1 for no override (default: -1)\n * @attr {boolean} show-label - Show visible feedback label (default: true)\n * @attr {string} label - Accessible name (default: 'Password strength')\n *\n * @cssprop --password-strength-height       Segment bar height\n * @cssprop --password-strength-gap          Gap between segments\n * @cssprop --password-strength-radius       Segment corner radius\n * @cssprop --password-strength-track-bg     Inactive segment color\n * @cssprop --password-strength-label-size   Visible label font size\n * @cssprop --password-strength-label-color  Visible label color\n * @cssprop --password-strength-weak-color   Weak state segment color\n * @cssprop --password-strength-fair-color   Fair state segment color\n * @cssprop --password-strength-good-color   Good state segment color\n * @cssprop --password-strength-strong-color Strong state segment color\n *\n * @example\n * ```html\n * <!-- Pair with an ore-input to evaluate in real time -->\n * <ore-input type=\"password\" label=\"Password\" name=\"password\" id=\"pwd\"></ore-input>\n * <ore-password-strength id=\"meter\"></ore-password-strength>\n * <script type=\"module\">\n *   document.getElementById('pwd').addEventListener('input', (e) => {\n *     document.getElementById('meter').value = e.target.value;\n *   });\n * </script>\n *\n * <!-- Fixed score display (e.g. from a server-side score) -->\n * <ore-password-strength score=\"3\"></ore-password-strength>\n * ```\n */\nexport const PASSWORD_STRENGTH_TAG = 'ore-password-strength' as const;\ndefine<OrePasswordStrengthProps>(PASSWORD_STRENGTH_TAG, {\n  props: {\n    label: prop.string('Password strength'),\n    labels: prop.json(undefined as string[] | undefined),\n    score: prop.number(-1),\n    'show-label': prop.bool(true),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const defaultLabels: Record<PasswordStrengthLevel, string> = {\n      empty: '',\n      fair: 'Fair',\n      good: 'Good',\n      strong: 'Strong',\n      weak: 'Weak',\n    };\n\n    const levels: PasswordStrengthLevel[] = ['empty', 'weak', 'fair', 'good', 'strong'];\n\n    const computeScore = (password: string): 0 | 1 | 2 | 3 | 4 => {\n      if (!password) return 0;\n\n      if (password.length < 6) return 1;\n\n      const hasLower = /[a-z]/.test(password);\n      const hasUpper = /[A-Z]/.test(password);\n      const hasDigit = /\\d/.test(password);\n      const hasSymbol = /[^a-zA-Z0-9]/.test(password);\n      const long = password.length >= 12;\n\n      if (long && hasLower && hasUpper && hasDigit && hasSymbol) return 4;\n\n      if ((hasLower || hasUpper) && (hasDigit || hasSymbol) && password.length >= 8) return 3;\n\n      if ((hasLower || hasUpper) && password.length >= 8) return 2;\n\n      return 1;\n    };\n\n    const computeLevel = (): PasswordStrengthLevel => {\n      const external = props.score.value ?? -1;\n      const finalScore =\n        external >= 0 ? Math.max(0, Math.min(4, Math.trunc(external))) : computeScore(props.value.value ?? '');\n\n      return levels[finalScore];\n    };\n\n    const score = computed<0 | 1 | 2 | 3 | 4>(() => {\n      // score >= 0 means an external override was provided\n      const external = props.score.value ?? -1;\n\n      if (external >= 0) {\n        return Math.max(0, Math.min(4, Math.trunc(external))) as 0 | 1 | 2 | 3 | 4;\n      }\n\n      return computeScore(props.value.value ?? '');\n    });\n\n    const levelLabel = computed<string>(() => {\n      const custom = props.labels.value;\n\n      if (Array.isArray(custom) && custom.length === 5) return String(custom[score.value] ?? '');\n\n      return defaultLabels[computeLevel()];\n    });\n\n    const ariaValueText = computed<string | null>(() => {\n      if (score.value === 0) return null;\n\n      return levelLabel.value || null;\n    });\n\n    // Sync level change to data-level attribute reactively\n    bind({\n      attr: {\n        'data-level': () => computeLevel(),\n      },\n    });\n\n    const segClass = (threshold: number) => () => `segment${score.value >= threshold ? ' active' : ''}`;\n\n    return html`\n      <div\n        class=\"meter\"\n        role=\"meter\"\n        :aria-label=\"${props.label}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"4\"\n        :aria-valuenow=\"${() => String(score.value)}\"\n        :aria-valuetext=\"${() => ariaValueText.value}\">\n        <div class=\"segments\" aria-hidden=\"true\">\n          <div class=\"${segClass(1)}\"></div>\n          <div class=\"${segClass(2)}\"></div>\n          <div class=\"${segClass(3)}\"></div>\n          <div class=\"${segClass(4)}\"></div>\n        </div>\n      </div>\n      ${() =>\n        props['show-label'].value\n          ? html`<span class=\"level-label\" aria-live=\"polite\" aria-atomic=\"true\">${() => levelLabel.value}</span>`\n          : ''}\n    `;\n  },\n\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"6PAwEA,IAAa,EAAwB,qCACJ,EAAuB,CACtD,MAAO,CACL,MAAO,EAAA,KAAK,OAAO,mBAAmB,EACtC,OAAQ,EAAA,KAAK,KAAK,IAAA,EAAiC,EACnD,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,aAAc,EAAA,KAAK,KAAK,EAAI,EAC5B,MAAO,EAAA,KAAK,OAAO,CACrB,EAEA,MAAM,EAAO,CACX,IAAM,EAAuD,CAC3D,MAAO,GACP,KAAM,OACN,KAAM,OACN,OAAQ,SACR,KAAM,MACR,EAEM,EAAkC,CAAC,QAAS,OAAQ,OAAQ,OAAQ,QAAQ,EAE5E,EAAgB,GAAwC,CAC5D,GAAI,CAAC,EAAU,MAAO,GAEtB,GAAI,EAAS,OAAS,EAAG,MAAO,GAEhC,IAAM,EAAW,QAAQ,KAAK,CAAQ,EAChC,EAAW,QAAQ,KAAK,CAAQ,EAChC,EAAW,KAAK,KAAK,CAAQ,EAC7B,EAAY,eAAe,KAAK,CAAQ,EAS9C,OARa,EAAS,QAAU,IAEpB,GAAY,GAAY,GAAY,EAAkB,GAE7D,GAAY,KAAc,GAAY,IAAc,EAAS,QAAU,EAAU,GAEjF,GAAY,IAAa,EAAS,QAAU,EAAU,EAEpD,CACT,EAEM,MAA4C,CAChD,IAAM,EAAW,EAAM,MAAM,OAAS,GAChC,EACJ,GAAY,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,EAAI,EAAa,EAAM,MAAM,OAAS,EAAE,EAEvG,OAAO,EAAO,EAChB,EAEM,GAAA,EAAA,EAAA,SAAA,KAA0C,CAE9C,IAAM,EAAW,EAAM,MAAM,OAAS,GAMtC,OAJI,GAAY,EACP,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,EAG/C,EAAa,EAAM,MAAM,OAAS,EAAE,CAC7C,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAAoC,CACxC,IAAM,EAAS,EAAM,OAAO,MAI5B,OAFI,MAAM,QAAQ,CAAM,GAAK,EAAO,SAAW,EAAU,OAAO,EAAO,EAAM,QAAU,EAAE,EAElF,EAAc,EAAa,EACpC,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KACA,EAAM,QAAU,EAAU,KAEvB,EAAW,OAAS,IAC5B,GAGD,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,iBAAoB,EAAa,CACnC,CACF,CAAC,EAED,IAAM,EAAY,OAA4B,UAAU,EAAM,OAAS,EAAY,UAAY,KAE/F,MAAO,GAAA,IAAI;;;;uBAIQ,EAAM,MAAM;;;8BAGH,OAAO,EAAM,KAAK,EAAE;+BACnB,EAAc,MAAM;;wBAE7B,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;;;YAI5B,EAAM,aAAa,CAAC,MAChB,EAAA,IAAI,uEAAyE,EAAW,MAAM,SAC9F,GAAG;KAEb,EAEA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/password-strength.js

@@ -1,69 +1,69 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
-import t from "./feedback/password-strength/password-strength.css?inline.js";
-import { define as n, html as r, prop as i } from "@vielzeug/ore";
-import { computed as a } from "@vielzeug/ripple";
+import t from "./feedback/password-strength/password-strength.css.js";
+import { bind as n, define as r, html as i, prop as a } from "@vielzeug/ore";
+import { computed as o } from "@vielzeug/ripple";
 //#region src/feedback/password-strength/password-strength.ts
-var o = "ore-password-strength";
-n(o, {
+var s = "ore-password-strength";
+r(s, {
 	props: {
-		label: i.string("Password strength"),
-		labels: i.json(void 0),
-		score: i.number(-1),
-		"show-label": i.bool(!0),
-		value: i.string()
+		label: a.string("Password strength"),
+		labels: a.json(void 0),
+		score: a.number(-1),
+		"show-label": a.bool(!0),
+		value: a.string()
 	},
-	setup(e, { bind: t, el: n }) {
-		let i = {
+	setup(e) {
+		let t = {
 			empty: "",
 			fair: "Fair",
 			good: "Good",
 			strong: "Strong",
 			weak: "Weak"
-		}, o = [
+		}, r = [
 			"empty",
 			"weak",
 			"fair",
 			"good",
 			"strong"
-		], s = (e) => {
+		], a = (e) => {
 			if (!e) return 0;
 			if (e.length < 6) return 1;
 			let t = /[a-z]/.test(e), n = /[A-Z]/.test(e), r = /\d/.test(e), i = /[^a-zA-Z0-9]/.test(e);
 			return e.length >= 12 && t && n && r && i ? 4 : (t || n) && (r || i) && e.length >= 8 ? 3 : (t || n) && e.length >= 8 ? 2 : 1;
-		}, c = () => {
-			let t = e.score.value ?? -1, n = t >= 0 ? Math.max(0, Math.min(4, Math.trunc(t))) : s(e.value.value ?? "");
-			return o[n];
-		}, l = a(() => {
+		}, s = () => {
+			let t = e.score.value ?? -1, n = t >= 0 ? Math.max(0, Math.min(4, Math.trunc(t))) : a(e.value.value ?? "");
+			return r[n];
+		}, c = o(() => {
 			let t = e.score.value ?? -1;
-			return t >= 0 ? Math.max(0, Math.min(4, Math.trunc(t))) : s(e.value.value ?? "");
-		}), u = a(() => {
-			let t = e.labels.value;
-			return Array.isArray(t) && t.length === 5 ? String(t[l.value] ?? "") : i[c()];
-		}), d = a(() => l.value === 0 ? null : u.value || null);
-		t({ attr: { "data-level": () => c() } });
-		let f = (e) => () => `segment${l.value >= e ? " active" : ""}`;
-		return r`
+			return t >= 0 ? Math.max(0, Math.min(4, Math.trunc(t))) : a(e.value.value ?? "");
+		}), l = o(() => {
+			let n = e.labels.value;
+			return Array.isArray(n) && n.length === 5 ? String(n[c.value] ?? "") : t[s()];
+		}), u = o(() => c.value === 0 ? null : l.value || null);
+		n({ attr: { "data-level": () => s() } });
+		let d = (e) => () => `segment${c.value >= e ? " active" : ""}`;
+		return i`
       <div
         class="meter"
         role="meter"
         :aria-label="${e.label}"
         aria-valuemin="0"
         aria-valuemax="4"
-        :aria-valuenow="${() => String(l.value)}"
-        :aria-valuetext="${() => d.value}">
+        :aria-valuenow="${() => String(c.value)}"
+        :aria-valuetext="${() => u.value}">
         <div class="segments" aria-hidden="true">
-          <div class="${f(1)}"></div>
-          <div class="${f(2)}"></div>
-          <div class="${f(3)}"></div>
-          <div class="${f(4)}"></div>
+          <div class="${d(1)}"></div>
+          <div class="${d(2)}"></div>
+          <div class="${d(3)}"></div>
+          <div class="${d(4)}"></div>
         </div>
       </div>
-      ${() => e["show-label"].value ? r`<span class="level-label" aria-live="polite" aria-atomic="true">${() => u.value}</span>` : ""}
+      ${() => e["show-label"].value ? i`<span class="level-label" aria-live="polite" aria-atomic="true">${() => l.value}</span>` : ""}
     `;
 	},
 	styles: [e, t]
 });
 //#endregion
-export { o as PASSWORD_STRENGTH_TAG };
+export { s as PASSWORD_STRENGTH_TAG };
 
 //# sourceMappingURL=password-strength.js.map

package/dist/password-strength.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-strength.js","names":[],"sources":["../src/feedback/password-strength/password-strength.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './password-strength.css?inline';\n\n/** Scoring levels for password strength. */\nexport type PasswordStrengthLevel = 'empty' | 'weak' | 'fair' | 'good' | 'strong';\n\n/** Props accepted by <ore-password-strength>. */\nexport type OrePasswordStrengthProps = {\n  /** Accessible name for assistive technology. Default: 'Password strength'. */\n  label?: string;\n  /**\n   * Optional level labels in order: empty, weak, fair, good, strong.\n   * If omitted or invalid length, defaults are used.\n   */\n  labels?: string[];\n  /**\n   * Optional score override (0..4). Use this to integrate external scorers\n   * such as zxcvbn while keeping block rendering and accessibility behavior.\n   * -1 means no override (default).\n   */\n  score?: number;\n  /** Whether to render visible textual feedback. Default: true. */\n  'show-label'?: boolean;\n  /** Password string to evaluate. */\n  value?: string;\n};\n\n/**\n * Strong password meter with segmented progress visualization.\n *\n * Built-in scoring is heuristic and conservative:\n * - length < 6 => weak\n * - length >= 8 with mixed case => fair\n * - + digit or symbol => good\n * - length >= 12 with mixed case, digit and symbol => strong\n *\n * @element ore-password-strength\n *\n * @attr {string} value - Password string to evaluate\n * @attr {number} score - Optional score override (0..4). Use -1 for no override (default: -1)\n * @attr {boolean} show-label - Show visible feedback label (default: true)\n * @attr {string} label - Accessible name (default: 'Password strength')\n *\n * @cssprop --password-strength-height       Segment bar height\n * @cssprop --password-strength-gap          Gap between segments\n * @cssprop --password-strength-radius       Segment corner radius\n * @cssprop --password-strength-track-bg     Inactive segment color\n * @cssprop --password-strength-label-size   Visible label font size\n * @cssprop --password-strength-label-color  Visible label color\n * @cssprop --password-strength-weak-color   Weak state segment color\n * @cssprop --password-strength-fair-color   Fair state segment color\n * @cssprop --password-strength-good-color   Good state segment color\n * @cssprop --password-strength-strong-color Strong state segment color\n *\n * @example\n * ```html\n * <!-- Pair with an ore-input to evaluate in real time -->\n * <ore-input type=\"password\" label=\"Password\" name=\"password\" id=\"pwd\"></ore-input>\n * <ore-password-strength id=\"meter\"></ore-password-strength>\n * <script type=\"module\">\n *   document.getElementById('pwd').addEventListener('input', (e) => {\n *     document.getElementById('meter').value = e.target.value;\n *   });\n * </script>\n *\n * <!-- Fixed score display (e.g. from a server-side score) -->\n * <ore-password-strength score=\"3\"></ore-password-strength>\n * ```\n */\nexport const PASSWORD_STRENGTH_TAG = 'ore-password-strength' as const;\ndefine<OrePasswordStrengthProps>(PASSWORD_STRENGTH_TAG, {\n  props: {\n    label: prop.string('Password strength'),\n    labels: prop.json(undefined as string[] | undefined),\n    score: prop.number(-1),\n    'show-label': prop.bool(true),\n    value: prop.string(),\n  },\n\n  setup(props, { bind, el: _el }) {\n    const defaultLabels: Record<PasswordStrengthLevel, string> = {\n      empty: '',\n      fair: 'Fair',\n      good: 'Good',\n      strong: 'Strong',\n      weak: 'Weak',\n    };\n\n    const levels: PasswordStrengthLevel[] = ['empty', 'weak', 'fair', 'good', 'strong'];\n\n    const computeScore = (password: string): 0 | 1 | 2 | 3 | 4 => {\n      if (!password) return 0;\n\n      if (password.length < 6) return 1;\n\n      const hasLower = /[a-z]/.test(password);\n      const hasUpper = /[A-Z]/.test(password);\n      const hasDigit = /\\d/.test(password);\n      const hasSymbol = /[^a-zA-Z0-9]/.test(password);\n      const long = password.length >= 12;\n\n      if (long && hasLower && hasUpper && hasDigit && hasSymbol) return 4;\n\n      if ((hasLower || hasUpper) && (hasDigit || hasSymbol) && password.length >= 8) return 3;\n\n      if ((hasLower || hasUpper) && password.length >= 8) return 2;\n\n      return 1;\n    };\n\n    const computeLevel = (): PasswordStrengthLevel => {\n      const external = props.score.value ?? -1;\n      const finalScore =\n        external >= 0 ? Math.max(0, Math.min(4, Math.trunc(external))) : computeScore(props.value.value ?? '');\n\n      return levels[finalScore];\n    };\n\n    const score = computed<0 | 1 | 2 | 3 | 4>(() => {\n      // score >= 0 means an external override was provided\n      const external = props.score.value ?? -1;\n\n      if (external >= 0) {\n        return Math.max(0, Math.min(4, Math.trunc(external))) as 0 | 1 | 2 | 3 | 4;\n      }\n\n      return computeScore(props.value.value ?? '');\n    });\n\n    const levelLabel = computed<string>(() => {\n      const custom = props.labels.value;\n\n      if (Array.isArray(custom) && custom.length === 5) return String(custom[score.value] ?? '');\n\n      return defaultLabels[computeLevel()];\n    });\n\n    const ariaValueText = computed<string | null>(() => {\n      if (score.value === 0) return null;\n\n      return levelLabel.value || null;\n    });\n\n    // Sync level change to data-level attribute reactively\n    bind({\n      attr: {\n        'data-level': () => computeLevel(),\n      },\n    });\n\n    const segClass = (threshold: number) => () => `segment${score.value >= threshold ? ' active' : ''}`;\n\n    return html`\n      <div\n        class=\"meter\"\n        role=\"meter\"\n        :aria-label=\"${props.label}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"4\"\n        :aria-valuenow=\"${() => String(score.value)}\"\n        :aria-valuetext=\"${() => ariaValueText.value}\">\n        <div class=\"segments\" aria-hidden=\"true\">\n          <div class=\"${segClass(1)}\"></div>\n          <div class=\"${segClass(2)}\"></div>\n          <div class=\"${segClass(3)}\"></div>\n          <div class=\"${segClass(4)}\"></div>\n        </div>\n      </div>\n      ${() =>\n        props['show-label'].value\n          ? html`<span class=\"level-label\" aria-live=\"polite\" aria-atomic=\"true\">${() => levelLabel.value}</span>`\n          : ''}\n    `;\n  },\n\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;AAwEA,IAAa,IAAwB;AACrC,EAAiC,GAAuB;CACtD,OAAO;EACL,OAAO,EAAK,OAAO,mBAAmB;EACtC,QAAQ,EAAK,KAAK,KAAA,CAAiC;EACnD,OAAO,EAAK,OAAO,EAAE;EACrB,cAAc,EAAK,KAAK,EAAI;EAC5B,OAAO,EAAK,OAAO;CACrB;CAEA,MAAM,GAAO,EAAE,SAAM,IAAI,KAAO;EAC9B,IAAM,IAAuD;GAC3D,OAAO;GACP,MAAM;GACN,MAAM;GACN,QAAQ;GACR,MAAM;EACR,GAEM,IAAkC;GAAC;GAAS;GAAQ;GAAQ;GAAQ;EAAQ,GAE5E,KAAgB,MAAwC;GAC5D,IAAI,CAAC,GAAU,OAAO;GAEtB,IAAI,EAAS,SAAS,GAAG,OAAO;GAEhC,IAAM,IAAW,QAAQ,KAAK,CAAQ,GAChC,IAAW,QAAQ,KAAK,CAAQ,GAChC,IAAW,KAAK,KAAK,CAAQ,GAC7B,IAAY,eAAe,KAAK,CAAQ;GAS9C,OARa,EAAS,UAAU,MAEpB,KAAY,KAAY,KAAY,IAAkB,KAE7D,KAAY,OAAc,KAAY,MAAc,EAAS,UAAU,IAAU,KAEjF,KAAY,MAAa,EAAS,UAAU,IAAU,IAEpD;EACT,GAEM,UAA4C;GAChD,IAAM,IAAW,EAAM,MAAM,SAAS,IAChC,IACJ,KAAY,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,IAAI,EAAa,EAAM,MAAM,SAAS,EAAE;GAEvG,OAAO,EAAO;EAChB,GAEM,IAAQ,QAAkC;GAE9C,IAAM,IAAW,EAAM,MAAM,SAAS;GAMtC,OAJI,KAAY,IACP,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,IAG/C,EAAa,EAAM,MAAM,SAAS,EAAE;EAC7C,CAAC,GAEK,IAAa,QAAuB;GACxC,IAAM,IAAS,EAAM,OAAO;GAI5B,OAFI,MAAM,QAAQ,CAAM,KAAK,EAAO,WAAW,IAAU,OAAO,EAAO,EAAM,UAAU,EAAE,IAElF,EAAc,EAAa;EACpC,CAAC,GAEK,IAAgB,QAChB,EAAM,UAAU,IAAU,OAEvB,EAAW,SAAS,IAC5B;EAGD,EAAK,EACH,MAAM,EACJ,oBAAoB,EAAa,EACnC,EACF,CAAC;EAED,IAAM,KAAY,YAA4B,UAAU,EAAM,SAAS,IAAY,YAAY;EAE/F,OAAO,CAAI;;;;uBAIQ,EAAM,MAAM;;;gCAGH,OAAO,EAAM,KAAK,EAAE;iCACnB,EAAc,MAAM;;wBAE7B,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;;;cAI5B,EAAM,aAAa,CAAC,QAChB,CAAI,yEAAyE,EAAW,MAAM,WAC9F,GAAG;;CAEb;CAEA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}
+{"version":3,"file":"password-strength.js","names":[],"sources":["../src/feedback/password-strength/password-strength.ts"],"sourcesContent":["import { bind, define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './password-strength.css?inline';\n\n/** Scoring levels for password strength. */\nexport type PasswordStrengthLevel = 'empty' | 'weak' | 'fair' | 'good' | 'strong';\n\n/** Props accepted by <ore-password-strength>. */\nexport type OrePasswordStrengthProps = {\n  /** Accessible name for assistive technology. Default: 'Password strength'. */\n  label?: string;\n  /**\n   * Optional level labels in order: empty, weak, fair, good, strong.\n   * If omitted or invalid length, defaults are used.\n   */\n  labels?: string[];\n  /**\n   * Optional score override (0..4). Use this to integrate external scorers\n   * such as zxcvbn while keeping block rendering and accessibility behavior.\n   * -1 means no override (default).\n   */\n  score?: number;\n  /** Whether to render visible textual feedback. Default: true. */\n  'show-label'?: boolean;\n  /** Password string to evaluate. */\n  value?: string;\n};\n\n/**\n * Strong password meter with segmented progress visualization.\n *\n * Built-in scoring is heuristic and conservative:\n * - length < 6 => weak\n * - length >= 8 with mixed case => fair\n * - + digit or symbol => good\n * - length >= 12 with mixed case, digit and symbol => strong\n *\n * @element ore-password-strength\n *\n * @attr {string} value - Password string to evaluate\n * @attr {number} score - Optional score override (0..4). Use -1 for no override (default: -1)\n * @attr {boolean} show-label - Show visible feedback label (default: true)\n * @attr {string} label - Accessible name (default: 'Password strength')\n *\n * @cssprop --password-strength-height       Segment bar height\n * @cssprop --password-strength-gap          Gap between segments\n * @cssprop --password-strength-radius       Segment corner radius\n * @cssprop --password-strength-track-bg     Inactive segment color\n * @cssprop --password-strength-label-size   Visible label font size\n * @cssprop --password-strength-label-color  Visible label color\n * @cssprop --password-strength-weak-color   Weak state segment color\n * @cssprop --password-strength-fair-color   Fair state segment color\n * @cssprop --password-strength-good-color   Good state segment color\n * @cssprop --password-strength-strong-color Strong state segment color\n *\n * @example\n * ```html\n * <!-- Pair with an ore-input to evaluate in real time -->\n * <ore-input type=\"password\" label=\"Password\" name=\"password\" id=\"pwd\"></ore-input>\n * <ore-password-strength id=\"meter\"></ore-password-strength>\n * <script type=\"module\">\n *   document.getElementById('pwd').addEventListener('input', (e) => {\n *     document.getElementById('meter').value = e.target.value;\n *   });\n * </script>\n *\n * <!-- Fixed score display (e.g. from a server-side score) -->\n * <ore-password-strength score=\"3\"></ore-password-strength>\n * ```\n */\nexport const PASSWORD_STRENGTH_TAG = 'ore-password-strength' as const;\ndefine<OrePasswordStrengthProps>(PASSWORD_STRENGTH_TAG, {\n  props: {\n    label: prop.string('Password strength'),\n    labels: prop.json(undefined as string[] | undefined),\n    score: prop.number(-1),\n    'show-label': prop.bool(true),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const defaultLabels: Record<PasswordStrengthLevel, string> = {\n      empty: '',\n      fair: 'Fair',\n      good: 'Good',\n      strong: 'Strong',\n      weak: 'Weak',\n    };\n\n    const levels: PasswordStrengthLevel[] = ['empty', 'weak', 'fair', 'good', 'strong'];\n\n    const computeScore = (password: string): 0 | 1 | 2 | 3 | 4 => {\n      if (!password) return 0;\n\n      if (password.length < 6) return 1;\n\n      const hasLower = /[a-z]/.test(password);\n      const hasUpper = /[A-Z]/.test(password);\n      const hasDigit = /\\d/.test(password);\n      const hasSymbol = /[^a-zA-Z0-9]/.test(password);\n      const long = password.length >= 12;\n\n      if (long && hasLower && hasUpper && hasDigit && hasSymbol) return 4;\n\n      if ((hasLower || hasUpper) && (hasDigit || hasSymbol) && password.length >= 8) return 3;\n\n      if ((hasLower || hasUpper) && password.length >= 8) return 2;\n\n      return 1;\n    };\n\n    const computeLevel = (): PasswordStrengthLevel => {\n      const external = props.score.value ?? -1;\n      const finalScore =\n        external >= 0 ? Math.max(0, Math.min(4, Math.trunc(external))) : computeScore(props.value.value ?? '');\n\n      return levels[finalScore];\n    };\n\n    const score = computed<0 | 1 | 2 | 3 | 4>(() => {\n      // score >= 0 means an external override was provided\n      const external = props.score.value ?? -1;\n\n      if (external >= 0) {\n        return Math.max(0, Math.min(4, Math.trunc(external))) as 0 | 1 | 2 | 3 | 4;\n      }\n\n      return computeScore(props.value.value ?? '');\n    });\n\n    const levelLabel = computed<string>(() => {\n      const custom = props.labels.value;\n\n      if (Array.isArray(custom) && custom.length === 5) return String(custom[score.value] ?? '');\n\n      return defaultLabels[computeLevel()];\n    });\n\n    const ariaValueText = computed<string | null>(() => {\n      if (score.value === 0) return null;\n\n      return levelLabel.value || null;\n    });\n\n    // Sync level change to data-level attribute reactively\n    bind({\n      attr: {\n        'data-level': () => computeLevel(),\n      },\n    });\n\n    const segClass = (threshold: number) => () => `segment${score.value >= threshold ? ' active' : ''}`;\n\n    return html`\n      <div\n        class=\"meter\"\n        role=\"meter\"\n        :aria-label=\"${props.label}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"4\"\n        :aria-valuenow=\"${() => String(score.value)}\"\n        :aria-valuetext=\"${() => ariaValueText.value}\">\n        <div class=\"segments\" aria-hidden=\"true\">\n          <div class=\"${segClass(1)}\"></div>\n          <div class=\"${segClass(2)}\"></div>\n          <div class=\"${segClass(3)}\"></div>\n          <div class=\"${segClass(4)}\"></div>\n        </div>\n      </div>\n      ${() =>\n        props['show-label'].value\n          ? html`<span class=\"level-label\" aria-live=\"polite\" aria-atomic=\"true\">${() => levelLabel.value}</span>`\n          : ''}\n    `;\n  },\n\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;AAwEA,IAAa,IAAwB;AACrC,EAAiC,GAAuB;CACtD,OAAO;EACL,OAAO,EAAK,OAAO,mBAAmB;EACtC,QAAQ,EAAK,KAAK,KAAA,CAAiC;EACnD,OAAO,EAAK,OAAO,EAAE;EACrB,cAAc,EAAK,KAAK,EAAI;EAC5B,OAAO,EAAK,OAAO;CACrB;CAEA,MAAM,GAAO;EACX,IAAM,IAAuD;GAC3D,OAAO;GACP,MAAM;GACN,MAAM;GACN,QAAQ;GACR,MAAM;EACR,GAEM,IAAkC;GAAC;GAAS;GAAQ;GAAQ;GAAQ;EAAQ,GAE5E,KAAgB,MAAwC;GAC5D,IAAI,CAAC,GAAU,OAAO;GAEtB,IAAI,EAAS,SAAS,GAAG,OAAO;GAEhC,IAAM,IAAW,QAAQ,KAAK,CAAQ,GAChC,IAAW,QAAQ,KAAK,CAAQ,GAChC,IAAW,KAAK,KAAK,CAAQ,GAC7B,IAAY,eAAe,KAAK,CAAQ;GAS9C,OARa,EAAS,UAAU,MAEpB,KAAY,KAAY,KAAY,IAAkB,KAE7D,KAAY,OAAc,KAAY,MAAc,EAAS,UAAU,IAAU,KAEjF,KAAY,MAAa,EAAS,UAAU,IAAU,IAEpD;EACT,GAEM,UAA4C;GAChD,IAAM,IAAW,EAAM,MAAM,SAAS,IAChC,IACJ,KAAY,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,IAAI,EAAa,EAAM,MAAM,SAAS,EAAE;GAEvG,OAAO,EAAO;EAChB,GAEM,IAAQ,QAAkC;GAE9C,IAAM,IAAW,EAAM,MAAM,SAAS;GAMtC,OAJI,KAAY,IACP,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,CAAQ,CAAC,CAAC,IAG/C,EAAa,EAAM,MAAM,SAAS,EAAE;EAC7C,CAAC,GAEK,IAAa,QAAuB;GACxC,IAAM,IAAS,EAAM,OAAO;GAI5B,OAFI,MAAM,QAAQ,CAAM,KAAK,EAAO,WAAW,IAAU,OAAO,EAAO,EAAM,UAAU,EAAE,IAElF,EAAc,EAAa;EACpC,CAAC,GAEK,IAAgB,QAChB,EAAM,UAAU,IAAU,OAEvB,EAAW,SAAS,IAC5B;EAGD,EAAK,EACH,MAAM,EACJ,oBAAoB,EAAa,EACnC,EACF,CAAC;EAED,IAAM,KAAY,YAA4B,UAAU,EAAM,SAAS,IAAY,YAAY;EAE/F,OAAO,CAAI;;;;uBAIQ,EAAM,MAAM;;;gCAGH,OAAO,EAAM,KAAK,EAAE;iCACnB,EAAc,MAAM;;wBAE7B,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;wBACZ,EAAS,CAAC,EAAE;;;cAI5B,EAAM,aAAa,CAAC,QAChB,CAAI,yEAAyE,EAAW,MAAM,WAC9F,GAAG;;CAEb;CAEA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/popover.cjs

@@ -1,15 +1,15 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/parse.cjs"),r=require("./overlay/shared/use-floating-trigger.cjs"),i=require("./overlay/popover/popover.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");require("@vielzeug/orbit");var s=8,c=new Set([`click`,`focus`,`hover`]),l=[`click`],u=e=>n.parseStringTriggers(String(e??``),c,l),d=`ore-popover`;(0,a.define)(d,{props:{...t.disablableBundle,label:a.prop.string(),offset:a.prop.number(s),open:a.prop.json(void 0),placement:a.prop.oneOf([`bottom`,`bottom-end`,`bottom-start`,`left`,`left-end`,`left-start`,`right`,`right-end`,`right-start`,`top`,`top-end`,`top-start`],`bottom`),trigger:a.prop.string(`click`)},setup(e,{aria:t,el:n,emit:i,onCleanup:s,onMounted:c,slots:l}){let d=n.shadowRoot,f=(0,o.computed)(()=>!!e.disabled.value),p=(0,a.createStableId)(`popover`),m=(0,o.computed)(()=>u(e.trigger.value)),h=null,g=r.useFloatingTrigger({bindTriggerAria:e=>t(e,{controls:()=>p,disabled:()=>String(f.value),expanded:()=>String(g.visible.value),haspopup:`dialog`}),disabled:f,getHost:()=>n,getPanel:()=>h,offset:e.offset,onCleanup:s,onClose:e=>i(`close`,{reason:e}),onOpen:e=>i(`open`,{reason:e}),openProp:e.open,placement:(0,o.computed)(()=>e.placement.value),slot:()=>d?.querySelector(`slot:not([name])`)??null,slotElements:l.elements(),triggers:m});return c(()=>g.mount()),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/parse.cjs"),r=require("./overlay/shared/use-floating-trigger.cjs"),i=require("./overlay/popover/popover.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");require("@vielzeug/orbit");var s=8,c=new Set([`click`,`focus`,`hover`]),l=[`click`],u=e=>n.parseStringTriggers(String(e??``),c,l),d=`ore-popover`;(0,a.define)(d,{props:{...t.disablableBundle,label:a.prop.string(),offset:a.prop.number(s),open:a.prop.json(void 0),placement:a.prop.oneOf([`bottom`,`bottom-end`,`bottom-start`,`left`,`left-end`,`left-start`,`right`,`right-end`,`right-start`,`top`,`top-end`,`top-start`],`bottom`),trigger:a.prop.string(`click`)},setup(e){let t=(0,a.getHost)(),n=(0,a.useEmit)(),i=(0,a.useSlots)(),s=t.shadowRoot,c=(0,o.computed)(()=>!!e.disabled.value),l=(0,a.createStableId)(`popover`),d=(0,o.computed)(()=>u(e.trigger.value)),f=null,p=r.useFloatingTrigger({bindTriggerAria:e=>(0,a.aria)(e,{controls:()=>l,disabled:()=>String(c.value),expanded:()=>String(p.visible.value),haspopup:`dialog`}),disabled:c,getHost:()=>t,getPanel:()=>f,offset:e.offset,onCleanup:a.onCleanup,onClose:e=>n(`close`,{reason:e}),onOpen:e=>n(`open`,{reason:e}),openProp:e.open,placement:(0,o.computed)(()=>e.placement.value),slot:()=>s?.querySelector(`slot:not([name])`)??null,slotElements:i.elements(),triggers:d});return(0,a.onMounted)(()=>p.mount()),a.html`
       <slot></slot>
       <div
         class="panel"
         part="panel"
-        id="${p}"
+        id="${l}"
         role="dialog"
         aria-modal="false"
         popover="manual"
         :aria-label="${e.label}"
-        :aria-hidden="${()=>String(!g.visible.value)}"
-        ref=${e=>{h=e}}>
+        :aria-hidden="${()=>String(!p.visible.value)}"
+        ref=${e=>{f=e}}>
         <slot name="content"></slot>
       </div>
     `},styles:[e.reducedMotionMixin,i.default]}),exports.POPOVER_TAG=d;