@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { computed, defineComponent, html } from '@vielzeug/craftit';\nimport { each } from '@vielzeug/craftit/directives';\n\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport styles from './pagination.css?inline';\n\nexport type BitPaginationEvents = {\n  change: { page: number };\n};\n\n/** Pagination props */\nexport type BitPaginationProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the nav landmark */\n  label?: string;\n  /** Current page (1-indexed) */\n  page?: number;\n  /** Show first/last page navigation buttons */\n  'show-first-last'?: boolean;\n  /** Show prev/next navigation buttons */\n  'show-prev-next'?: boolean;\n  /** Number of sibling pages shown around the current page */\n  siblings?: number;\n  /** Size */\n  size?: ComponentSize;\n  /** Total number of pages */\n  'total-pages'?: number;\n  /** Visual variant for nav buttons */\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 bit-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\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' | 'glass' (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 * @example\n * ```html\n * <bit-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></bit-pagination>\n * ```\n */\nexport const PAGINATION_TAG = defineComponent<BitPaginationProps, BitPaginationEvents>({\n  props: {\n    color: { default: undefined },\n    label: { default: 'Pagination' },\n    page: { default: 1 },\n    'show-first-last': { default: false, type: Boolean },\n    'show-prev-next': { default: false, type: Boolean },\n    siblings: { default: 1 },\n    size: { default: undefined },\n    'total-pages': { default: 1 },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    function goTo(page: number) {\n      const total = Number(props['total-pages'].value) || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === Number(props.page.value)) return;\n\n      host.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    function handlePageClick(event: Event) {\n      const btn = (event.target as HTMLElement)?.closest('[part=\"page-btn\"]') as HTMLButtonElement | null;\n\n      if (!btn) return;\n\n      const ariaLabel = btn.getAttribute('aria-label');\n\n      if (!ariaLabel) return;\n\n      const pageMatch = ariaLabel.match(/\\d+/);\n\n      if (!pageMatch) return;\n\n      const page = Number(pageMatch[0]);\n\n      goTo(page);\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(\n        Number(props.page.value) || 1,\n        Number(props['total-pages'].value) || 1,\n        // eslint-disable-next-line no-constant-binary-expression\n        Number(props.siblings.value) ?? 1,\n      ),\n    );\n    const isFirst = computed(() => (Number(props.page.value) || 1) <= 1);\n    const isLast = computed(() => (Number(props.page.value) || 1) >= (Number(props['total-pages'].value) || 1));\n\n    return html`\n      <nav :aria-label=\"${() => props.label.value}\" part=\"nav\" @click=${handlePageClick}>\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.value}\n                    @click=${() => goTo(1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"11 17 6 12 11 7\" />\n                      <polyline points=\"18 17 13 12 18 7\" />\n                    </svg>\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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) - 1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"15 18 9 12 15 6\" />\n                    </svg>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${each(\n              pageItems,\n              (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 === (Number(props.page.value) || 1);\n\n                return isCurrent\n                  ? html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\" aria-current=\"page\">\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\">${pg}</button>`;\n              },\n              undefined,\n              { key: (item) => `${item}` },\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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) + 1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"9 18 15 12 9 6\" />\n                    </svg>\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.value}\n                    @click=${() => goTo(Number(props['total-pages'].value) || 1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"13 17 18 12 13 7\" />\n                      <polyline points=\"6 17 11 12 6 7\" />\n                    </svg>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, styles],\n  tag: 'bit-pagination',\n});\n"],"mappings":"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"}
+{"version":3,"file":"pagination.cjs","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { define, computed, html } from '@vielzeug/craftit';\nimport { each } from '@vielzeug/craftit/directives';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport styles from './pagination.css?inline';\n\nexport type BitPaginationEvents = {\n  change: { page: number };\n};\n\nexport type BitPaginationProps = {\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 bit-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\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' | 'glass' (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 * @example\n * ```html\n * <bit-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></bit-pagination>\n * ```\n */\nexport const PAGINATION_TAG = define<BitPaginationProps, BitPaginationEvents>('bit-pagination', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    label: 'Pagination',\n    page: 1,\n    'show-first-last': false,\n    'show-prev-next': false,\n    siblings: 1,\n    'total-pages': 1,\n    variant: undefined,\n  } satisfies PropBundle<BitPaginationProps>,\n  setup({ emit, host, props }) {\n    function goTo(page: number) {\n      const total = Number(props['total-pages'].value) || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === Number(props.page.value)) return;\n\n      host.el.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    function handlePageClick(event: Event) {\n      const btn = (event.target as HTMLElement)?.closest('[part=\"page-btn\"]') as HTMLButtonElement | null;\n\n      if (!btn) return;\n\n      const ariaLabel = btn.getAttribute('aria-label');\n\n      if (!ariaLabel) return;\n\n      const pageMatch = ariaLabel.match(/\\d+/);\n\n      if (!pageMatch) return;\n\n      const page = Number(pageMatch[0]);\n\n      goTo(page);\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(\n        Number(props.page.value) || 1,\n        Number(props['total-pages'].value) || 1,\n        // eslint-disable-next-line no-constant-binary-expression\n        Number(props.siblings.value) ?? 1,\n      ),\n    );\n    const isFirst = computed(() => (Number(props.page.value) || 1) <= 1);\n    const isLast = computed(() => (Number(props.page.value) || 1) >= (Number(props['total-pages'].value) || 1));\n\n    return html`\n      <nav :aria-label=\"${() => props.label.value}\" part=\"nav\" @click=${handlePageClick}>\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.value}\n                    @click=${() => goTo(1)}>\n                    <bit-icon name=\"chevrons-left\" size=\"16\" aria-hidden=\"true\"></bit-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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) - 1)}>\n                    <bit-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></bit-icon>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${each(pageItems, {\n              key: (item) => `${item}`,\n              render: (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 === (Number(props.page.value) || 1);\n\n                return isCurrent\n                  ? html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\" aria-current=\"page\">\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\">${pg}</button>`;\n              },\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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) + 1)}>\n                    <bit-icon name=\"chevron-right\" size=\"16\" aria-hidden=\"true\"></bit-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.value}\n                    @click=${() => goTo(Number(props['total-pages'].value) || 1)}>\n                    <bit-icon name=\"chevrons-right\" size=\"16\" aria-hidden=\"true\"></bit-icon>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, styles],\n});\n"],"mappings":"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"}

package/dist/pagination.js

@@ -1,14 +1,16 @@
-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 { each as e } from "./packages/craftit/src/directives/each.js";
+import "./packages/craftit/src/directives/index.js";
+import "./icon.js";
+import { sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { coarsePointerMixin as r } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as a } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import { d as r } from "./craftit/dist/directives/each.js";
-import "./craftit/dist/directives/index.js";
 import "./button.js";
-import i from "./content/pagination/pagination.css?inline.js";
-import { computed as a, defineComponent as o, html as s } from "@vielzeug/craftit";
+import o from "./content/pagination/pagination.css?inline.js";
+import { computed as s, define as c, html as l } from "@vielzeug/craftit";
 //#region src/content/pagination/pagination.ts
-function c(e, t, n) {
+function u(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);
@@ -16,30 +18,24 @@ function c(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 l = o({
+var d = c("bit-pagination", {
 	props: {
-		color: { default: void 0 },
-		label: { default: "Pagination" },
-		page: { default: 1 },
-		"show-first-last": {
-			default: !1,
-			type: Boolean
-		},
-		"show-prev-next": {
-			default: !1,
-			type: Boolean
-		},
-		siblings: { default: 1 },
-		size: { default: void 0 },
-		"total-pages": { default: 1 },
-		variant: { default: void 0 }
+		...n,
+		...t,
+		label: "Pagination",
+		page: 1,
+		"show-first-last": !1,
+		"show-prev-next": !1,
+		siblings: 1,
+		"total-pages": 1,
+		variant: void 0
 	},
-	setup({ emit: e, host: t, props: n }) {
-		function i(r) {
-			let i = Number(n["total-pages"].value) || 1, a = Math.min(Math.max(1, r), i);
-			a !== Number(n.page.value) && (t.setAttribute("page", String(a)), e("change", { page: a }));
+	setup({ emit: t, host: n, props: r }) {
+		function i(e) {
+			let i = Number(r["total-pages"].value) || 1, a = Math.min(Math.max(1, e), i);
+			a !== Number(r.page.value) && (n.el.setAttribute("page", String(a)), t("change", { page: a }));
 		}
-		function o(e) {
+		function a(e) {
 			let t = e.target?.closest("[part=\"page-btn\"]");
 			if (!t) return;
 			let n = t.getAttribute("aria-label");
@@ -47,107 +43,64 @@ var l = o({
 			let r = n.match(/\d+/);
 			r && i(Number(r[0]));
 		}
-		let l = a(() => c(Number(n.page.value) || 1, Number(n["total-pages"].value) || 1, Number(n.siblings.value) ?? 1)), u = a(() => (Number(n.page.value) || 1) <= 1), d = a(() => (Number(n.page.value) || 1) >= (Number(n["total-pages"].value) || 1));
-		return s`
-      <nav :aria-label="${() => n.label.value}" part="nav" @click=${o}>
+		let o = s(() => u(Number(r.page.value) || 1, Number(r["total-pages"].value) || 1, Number(r.siblings.value) ?? 1)), c = s(() => (Number(r.page.value) || 1) <= 1), d = s(() => (Number(r.page.value) || 1) >= (Number(r["total-pages"].value) || 1));
+		return l`
+      <nav :aria-label="${() => r.label.value}" part="nav" @click=${a}>
         <ol class="pagination" part="list">
-          ${() => n["show-first-last"].value ? s`<li>
+          ${() => r["show-first-last"].value ? l`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="first-btn"
                     aria-label="First page"
-                    ?disabled=${() => u.value}
+                    ?disabled=${() => c.value}
                     @click=${() => i(1)}>
-                    <svg
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      aria-hidden="true">
-                      <polyline points="11 17 6 12 11 7" />
-                      <polyline points="18 17 13 12 18 7" />
-                    </svg>
+                    <bit-icon name="chevrons-left" size="16" aria-hidden="true"></bit-icon>
                   </button>
                 </li>` : ""}
-          ${() => n["show-prev-next"].value ? s`<li>
+          ${() => r["show-prev-next"].value ? l`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="prev-btn"
                     aria-label="Previous page"
-                    ?disabled=${() => u.value}
-                    @click=${() => i((Number(n.page.value) || 1) - 1)}>
-                    <svg
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      aria-hidden="true">
-                      <polyline points="15 18 9 12 15 6" />
-                    </svg>
+                    ?disabled=${() => c.value}
+                    @click=${() => i((Number(r.page.value) || 1) - 1)}>
+                    <bit-icon name="chevron-left" size="16" aria-hidden="true"></bit-icon>
                   </button>
                 </li>` : ""}
           <li style="display: contents;">
-            ${r(l, (e) => {
-			if (e === "ellipsis-start" || e === "ellipsis-end") return s`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;
-			let t = e;
-			return t === (Number(n.page.value) || 1) ? s`<button type="button" part="page-btn" aria-label="Page ${t}" aria-current="page">
+            ${e(o, {
+			key: (e) => `${e}`,
+			render: (e) => {
+				if (e === "ellipsis-start" || e === "ellipsis-end") return l`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;
+				let t = e;
+				return t === (Number(r.page.value) || 1) ? l`<button type="button" part="page-btn" aria-label="Page ${t}" aria-current="page">
                       ${t}
-                    </button>` : s`<button type="button" part="page-btn" aria-label="Page ${t}">${t}</button>`;
-		}, void 0, { key: (e) => `${e}` })}
+                    </button>` : l`<button type="button" part="page-btn" aria-label="Page ${t}">${t}</button>`;
+			}
+		})}
           </li>
-          ${() => n["show-prev-next"].value ? s`<li>
+          ${() => r["show-prev-next"].value ? l`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="next-btn"
                     aria-label="Next page"
                     ?disabled=${() => d.value}
-                    @click=${() => i((Number(n.page.value) || 1) + 1)}>
-                    <svg
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      aria-hidden="true">
-                      <polyline points="9 18 15 12 9 6" />
-                    </svg>
+                    @click=${() => i((Number(r.page.value) || 1) + 1)}>
+                    <bit-icon name="chevron-right" size="16" aria-hidden="true"></bit-icon>
                   </button>
                 </li>` : ""}
-          ${() => n["show-first-last"].value ? s`<li>
+          ${() => r["show-first-last"].value ? l`<li>
                   <button
                     type="button"
                     class="nav-btn"
                     part="last-btn"
                     aria-label="Last page"
                     ?disabled=${() => d.value}
-                    @click=${() => i(Number(n["total-pages"].value) || 1)}>
-                    <svg
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      aria-hidden="true">
-                      <polyline points="13 17 18 12 13 7" />
-                      <polyline points="6 17 11 12 6 7" />
-                    </svg>
+                    @click=${() => i(Number(r["total-pages"].value) || 1)}>
+                    <bit-icon name="chevrons-right" size="16" aria-hidden="true"></bit-icon>
                   </button>
                 </li>` : ""}
         </ol>
@@ -155,14 +108,13 @@ var l = o({
     `;
 	},
 	styles: [
-		n,
-		t({}),
-		e,
-		i
-	],
-	tag: "bit-pagination"
+		a,
+		i({}),
+		r,
+		o
+	]
 });
 //#endregion
-export { l as PAGINATION_TAG };
+export { d 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 { computed, defineComponent, html } from '@vielzeug/craftit';\nimport { each } from '@vielzeug/craftit/directives';\n\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport styles from './pagination.css?inline';\n\nexport type BitPaginationEvents = {\n  change: { page: number };\n};\n\n/** Pagination props */\nexport type BitPaginationProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the nav landmark */\n  label?: string;\n  /** Current page (1-indexed) */\n  page?: number;\n  /** Show first/last page navigation buttons */\n  'show-first-last'?: boolean;\n  /** Show prev/next navigation buttons */\n  'show-prev-next'?: boolean;\n  /** Number of sibling pages shown around the current page */\n  siblings?: number;\n  /** Size */\n  size?: ComponentSize;\n  /** Total number of pages */\n  'total-pages'?: number;\n  /** Visual variant for nav buttons */\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 bit-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\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' | 'glass' (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 * @example\n * ```html\n * <bit-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></bit-pagination>\n * ```\n */\nexport const PAGINATION_TAG = defineComponent<BitPaginationProps, BitPaginationEvents>({\n  props: {\n    color: { default: undefined },\n    label: { default: 'Pagination' },\n    page: { default: 1 },\n    'show-first-last': { default: false, type: Boolean },\n    'show-prev-next': { default: false, type: Boolean },\n    siblings: { default: 1 },\n    size: { default: undefined },\n    'total-pages': { default: 1 },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    function goTo(page: number) {\n      const total = Number(props['total-pages'].value) || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === Number(props.page.value)) return;\n\n      host.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    function handlePageClick(event: Event) {\n      const btn = (event.target as HTMLElement)?.closest('[part=\"page-btn\"]') as HTMLButtonElement | null;\n\n      if (!btn) return;\n\n      const ariaLabel = btn.getAttribute('aria-label');\n\n      if (!ariaLabel) return;\n\n      const pageMatch = ariaLabel.match(/\\d+/);\n\n      if (!pageMatch) return;\n\n      const page = Number(pageMatch[0]);\n\n      goTo(page);\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(\n        Number(props.page.value) || 1,\n        Number(props['total-pages'].value) || 1,\n        // eslint-disable-next-line no-constant-binary-expression\n        Number(props.siblings.value) ?? 1,\n      ),\n    );\n    const isFirst = computed(() => (Number(props.page.value) || 1) <= 1);\n    const isLast = computed(() => (Number(props.page.value) || 1) >= (Number(props['total-pages'].value) || 1));\n\n    return html`\n      <nav :aria-label=\"${() => props.label.value}\" part=\"nav\" @click=${handlePageClick}>\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.value}\n                    @click=${() => goTo(1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"11 17 6 12 11 7\" />\n                      <polyline points=\"18 17 13 12 18 7\" />\n                    </svg>\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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) - 1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"15 18 9 12 15 6\" />\n                    </svg>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${each(\n              pageItems,\n              (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 === (Number(props.page.value) || 1);\n\n                return isCurrent\n                  ? html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\" aria-current=\"page\">\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\">${pg}</button>`;\n              },\n              undefined,\n              { key: (item) => `${item}` },\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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) + 1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"9 18 15 12 9 6\" />\n                    </svg>\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.value}\n                    @click=${() => goTo(Number(props['total-pages'].value) || 1)}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\">\n                      <polyline points=\"13 17 18 12 13 7\" />\n                      <polyline points=\"6 17 11 12 6 7\" />\n                    </svg>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, styles],\n  tag: 'bit-pagination',\n});\n"],"mappings":"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"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../src/content/pagination/pagination.ts"],"sourcesContent":["import { define, computed, html } from '@vielzeug/craftit';\nimport { each } from '@vielzeug/craftit/directives';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { coarsePointerMixin, colorThemeMixin, sizeVariantMixin } from '../../styles';\nimport styles from './pagination.css?inline';\n\nexport type BitPaginationEvents = {\n  change: { page: number };\n};\n\nexport type BitPaginationProps = {\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 bit-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\n * @attr {string} variant - Visual variant for nav buttons: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost' | 'glass' (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 * @example\n * ```html\n * <bit-pagination page=\"3\" total-pages=\"10\" color=\"primary\"></bit-pagination>\n * ```\n */\nexport const PAGINATION_TAG = define<BitPaginationProps, BitPaginationEvents>('bit-pagination', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    label: 'Pagination',\n    page: 1,\n    'show-first-last': false,\n    'show-prev-next': false,\n    siblings: 1,\n    'total-pages': 1,\n    variant: undefined,\n  } satisfies PropBundle<BitPaginationProps>,\n  setup({ emit, host, props }) {\n    function goTo(page: number) {\n      const total = Number(props['total-pages'].value) || 1;\n      const next = Math.min(Math.max(1, page), total);\n\n      if (next === Number(props.page.value)) return;\n\n      host.el.setAttribute('page', String(next));\n      emit('change', { page: next });\n    }\n\n    function handlePageClick(event: Event) {\n      const btn = (event.target as HTMLElement)?.closest('[part=\"page-btn\"]') as HTMLButtonElement | null;\n\n      if (!btn) return;\n\n      const ariaLabel = btn.getAttribute('aria-label');\n\n      if (!ariaLabel) return;\n\n      const pageMatch = ariaLabel.match(/\\d+/);\n\n      if (!pageMatch) return;\n\n      const page = Number(pageMatch[0]);\n\n      goTo(page);\n    }\n\n    const pageItems = computed(() =>\n      buildPageRange(\n        Number(props.page.value) || 1,\n        Number(props['total-pages'].value) || 1,\n        // eslint-disable-next-line no-constant-binary-expression\n        Number(props.siblings.value) ?? 1,\n      ),\n    );\n    const isFirst = computed(() => (Number(props.page.value) || 1) <= 1);\n    const isLast = computed(() => (Number(props.page.value) || 1) >= (Number(props['total-pages'].value) || 1));\n\n    return html`\n      <nav :aria-label=\"${() => props.label.value}\" part=\"nav\" @click=${handlePageClick}>\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.value}\n                    @click=${() => goTo(1)}>\n                    <bit-icon name=\"chevrons-left\" size=\"16\" aria-hidden=\"true\"></bit-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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) - 1)}>\n                    <bit-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></bit-icon>\n                  </button>\n                </li>`\n              : ''}\n          <li style=\"display: contents;\">\n            ${each(pageItems, {\n              key: (item) => `${item}`,\n              render: (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 === (Number(props.page.value) || 1);\n\n                return isCurrent\n                  ? html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\" aria-current=\"page\">\n                      ${pg}\n                    </button>`\n                  : html`<button type=\"button\" part=\"page-btn\" aria-label=\"Page ${pg}\">${pg}</button>`;\n              },\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.value}\n                    @click=${() => goTo((Number(props.page.value) || 1) + 1)}>\n                    <bit-icon name=\"chevron-right\" size=\"16\" aria-hidden=\"true\"></bit-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.value}\n                    @click=${() => goTo(Number(props['total-pages'].value) || 1)}>\n                    <bit-icon name=\"chevrons-right\" size=\"16\" aria-hidden=\"true\"></bit-icon>\n                  </button>\n                </li>`\n              : ''}\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, styles],\n});\n"],"mappings":";;;;;;;;;;;;AA2BA,SAAS,EACP,GACA,GACA,GACmD;CACnD,IACM,IAAQ,GACR,IAA2D,EAAE;AAGnE,KAAI,KAAS,IAAe,IAAI,IAAW,EACzC,QAAO,MAAM,KAAK,EAAE,QAAQ,GAAO,GAAG,GAAG,MAAM,IAAI,EAAE;CAGvD,IAAM,IAAc,KAAK,IAAI,IAAc,GAAU,EAAa,EAC5D,IAAe,KAAK,IAAI,IAAc,GAAU,IAAQ,EAAS;AAIvE,CAFA,EAAM,KAAK,EAAE,EAET,IAAc,IAAc,EAAM,KAAK,iBAAiB,GACnD,MAAgB,KAAc,EAAM,KAAK,EAAa;AAE/D,MAAK,IAAI,IAAI,GAAa,KAAK,GAAc,IAAK,GAAM,KAAK,EAAE;AAO/D,QALI,IAAe,IAAQ,IAAW,IAAG,EAAM,KAAK,eAAe,GAC1D,MAAiB,IAAQ,IAAW,KAAG,EAAM,KAAK,IAAQ,EAAS,EAE5E,EAAM,KAAK,EAAM,EAEV;;AA6BT,IAAa,IAAiB,EAAgD,kBAAkB;CAC9F,OAAO;EACL,GAAG;EACH,GAAG;EACH,OAAO;EACP,MAAM;EACN,mBAAmB;EACnB,kBAAkB;EAClB,UAAU;EACV,eAAe;EACf,SAAS,KAAA;EACV;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,SAAS,EAAK,GAAc;GAC1B,IAAM,IAAQ,OAAO,EAAM,eAAe,MAAM,IAAI,GAC9C,IAAO,KAAK,IAAI,KAAK,IAAI,GAAG,EAAK,EAAE,EAAM;AAE3C,SAAS,OAAO,EAAM,KAAK,MAAM,KAErC,EAAK,GAAG,aAAa,QAAQ,OAAO,EAAK,CAAC,EAC1C,EAAK,UAAU,EAAE,MAAM,GAAM,CAAC;;EAGhC,SAAS,EAAgB,GAAc;GACrC,IAAM,IAAO,EAAM,QAAwB,QAAQ,sBAAoB;AAEvE,OAAI,CAAC,EAAK;GAEV,IAAM,IAAY,EAAI,aAAa,aAAa;AAEhD,OAAI,CAAC,EAAW;GAEhB,IAAM,IAAY,EAAU,MAAM,MAAM;AAEnC,QAIL,EAFa,OAAO,EAAU,GAAG,CAEvB;;EAGZ,IAAM,IAAY,QAChB,EACE,OAAO,EAAM,KAAK,MAAM,IAAI,GAC5B,OAAO,EAAM,eAAe,MAAM,IAAI,GAEtC,OAAO,EAAM,SAAS,MAAM,IAAI,EACjC,CACF,EACK,IAAU,SAAgB,OAAO,EAAM,KAAK,MAAM,IAAI,MAAM,EAAE,EAC9D,IAAS,SAAgB,OAAO,EAAM,KAAK,MAAM,IAAI,OAAO,OAAO,EAAM,eAAe,MAAM,IAAI,GAAG;AAE3G,SAAO,CAAI;gCACiB,EAAM,MAAM,MAAM,sBAAsB,EAAgB;;kBAG5E,EAAM,mBAAmB,QACrB,CAAI;;;;;;sCAMkB,EAAQ,MAAM;mCACjB,EAAK,EAAE,CAAC;;;yBAI3B,GAAG;kBAEP,EAAM,kBAAkB,QACpB,CAAI;;;;;;sCAMkB,EAAQ,MAAM;mCACjB,GAAM,OAAO,EAAM,KAAK,MAAM,IAAI,KAAK,EAAE,CAAC;;;yBAI7D,GAAG;;cAEL,EAAK,GAAW;GAChB,MAAM,MAAS,GAAG;GAClB,SAAS,MAAS;AAChB,QAAI,MAAS,oBAAoB,MAAS,eACxC,QAAO,CAAI;IAGb,IAAM,IAAK;AAGX,WAFkB,OAAQ,OAAO,EAAM,KAAK,MAAM,IAAI,KAGlD,CAAI,0DAA0D,EAAG;wBAC7D,EAAG;iCAEP,CAAI,0DAA0D,EAAG,IAAI,EAAG;;GAE/E,CAAC,CAAC;;kBAGH,EAAM,kBAAkB,QACpB,CAAI;;;;;;sCAMkB,EAAO,MAAM;mCAChB,GAAM,OAAO,EAAM,KAAK,MAAM,IAAI,KAAK,EAAE,CAAC;;;yBAI7D,GAAG;kBAEP,EAAM,mBAAmB,QACrB,CAAI;;;;;;sCAMkB,EAAO,MAAM;mCAChB,EAAK,OAAO,EAAM,eAAe,MAAM,IAAI,EAAE,CAAC;;;yBAIjE,GAAG;;;;;CAKjB,QAAQ;EAAC;EAAiB,EAAiB,EAAE,CAAC;EAAE;EAAoB;EAAO;CAC5E,CAAC"}

package/dist/popover.cjs

@@ -1,16 +1,16 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./overlay/popover/popover.css?inline.cjs`);let n=require(`@vielzeug/craftit`),r=require(`@vielzeug/floatit`);var i=8,a=new Set([`click`,`hover`,`focus`]);function o(e){let t=String(e).split(`,`).map(e=>e.trim()).filter(e=>a.has(e));return t.length>0?t:[`click`]}var s=(0,n.defineComponent)({props:{disabled:{default:!1},label:{default:void 0},offset:{default:i},open:{default:void 0},placement:{default:`bottom`},trigger:{default:`click`}},setup({emit:e,host:t,props:a}){let s=(0,n.signal)(!1),c=(0,n.createId)(`popover`),l=null,u=null,d=null,f=(0,n.computed)(()=>o(a.trigger.value));function p(){!l||!u||(0,r.positionFloat)(u,l,{middleware:[(0,r.offset)(a.offset.value??i),(0,r.flip)(),(0,r.shift)({padding:8})],placement:a.placement.value}).then(e=>{l&&(l.dataset.placement=e)})}function m(){s.value=!0,u?.setAttribute(`aria-expanded`,`true`),l&&!l.matches(`:popover-open`)&&l.showPopover(),u&&l&&(d?.(),d=(0,r.autoUpdate)(u,l,p)),p()}function h(){d?.(),d=null,u?.setAttribute(`aria-expanded`,`false`),s.value=!1,l?.matches(`:popover-open`)&&l.hidePopover()}function g(){a.open.value===void 0&&(a.disabled.value||s.value||(m(),e(`open`)))}function _(){a.open.value===void 0&&s.value&&(h(),e(`close`))}function v(){s.value?_():g()}function y(e){e.key===`Escape`&&_()}function b(e){if(!s.value)return;let n=e.composedPath();n.includes(t)||l&&n.includes(l)||u&&n.includes(u)||_()}function x(e){let t=e.relatedTarget;t&&l?.contains(t)||t&&u?.contains(t)||_()}return(0,n.onMount)(()=>{let r=t.shadowRoot?.querySelector(`slot:not([name])`);if(!r)return;let i=()=>{o();let e=r.assignedElements({flatten:!0})[0];if(!e)return;u=e,e.setAttribute(`aria-controls`,c),e.setAttribute(`aria-haspopup`,`dialog`),e.setAttribute(`aria-expanded`,String(s.value)),e.setAttribute(`aria-disabled`,String(!!a.disabled.value));let t=f.value;t.includes(`click`)&&(e.addEventListener(`click`,v),document.addEventListener(`click`,b,{capture:!0})),t.includes(`hover`)&&(e.addEventListener(`pointerenter`,g),e.addEventListener(`pointerleave`,_),l?.addEventListener(`pointerenter`,g),l?.addEventListener(`pointerleave`,_)),t.includes(`focus`)&&(e.addEventListener(`focusin`,g),e.addEventListener(`focusout`,x),l?.addEventListener(`focusout`,x)),document.addEventListener(`keydown`,y)},o=()=>{u&&=(u.removeAttribute(`aria-controls`),u.removeAttribute(`aria-haspopup`),u.removeAttribute(`aria-expanded`),u.removeAttribute(`aria-disabled`),u.removeEventListener(`click`,v),u.removeEventListener(`pointerenter`,g),u.removeEventListener(`pointerleave`,_),u.removeEventListener(`focusin`,g),u.removeEventListener(`focusout`,x),l?.removeEventListener(`pointerenter`,g),l?.removeEventListener(`pointerleave`,_),l?.removeEventListener(`focusout`,x),document.removeEventListener(`click`,b,{capture:!0}),document.removeEventListener(`keydown`,y),null)};return(0,n.onSlotChange)(`default`,i),(0,n.watch)(a.open,t=>{t!=null&&(t?(m(),e(`open`)):(h(),e(`close`)))}),(0,n.watch)(a.trigger,i),(0,n.watch)(a.disabled,e=>{u?.setAttribute(`aria-disabled`,String(!!e)),e&&_()}),()=>{o(),d?.(),d=null,l?.matches(`:popover-open`)&&l.hidePopover()}}),n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const n=require(`./packages/craftit/dist/controls/overlay-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const r=require(`./utils/aria.cjs`),i=require(`./overlay/popover/popover.css?inline.cjs`);let a=require(`@vielzeug/craftit`),o=require(`@vielzeug/floatit`);var s=8,c=new Set([`click`,`hover`,`focus`]);function l(e){let t=String(e).split(`,`).map(e=>e.trim()).filter(e=>c.has(e));return t.length>0?t:[`click`]}var u={...e.disablableBundle,label:void 0,offset:s,open:void 0,placement:`bottom`,trigger:`click`},d=(0,a.define)(`bit-popover`,{props:u,setup({emit:e,host:t,props:i,slots:c}){let u=(0,a.signal)(!1),d=(0,a.computed)(()=>!!i.disabled.value),f=(0,a.computed)(()=>String(d.value)),p=(0,a.computed)(()=>i.open.value!==void 0),m=e=>{p.value||e()},h=(0,a.createId)(`popover`),g=null,_=null,v=(0,a.computed)(()=>l(i.trigger.value)),y=n.i({disabled:d,elements:{boundary:t.el,panel:g,trigger:_},isOpen:u,onClose:t=>e(`close`,{reason:t}),onOpen:t=>e(`open`,{reason:t}),positioner:{floating:()=>g,reference:()=>_,update:b},restoreFocus:!1,setOpen:e=>{if(!p.value){if(e){x();return}S()}}});function b(){if(!g||!_)return;let e=(0,o.positionFloat)(_,g,{middleware:[(0,o.offset)(i.offset.value??s),(0,o.flip)(),(0,o.shift)({padding:8})],placement:i.placement.value});g&&(g.dataset.placement=e)}function x(){u.value=!0,g&&!g.matches(`:popover-open`)&&g.showPopover(),b()}function S(){u.value=!1,g?.matches(`:popover-open`)&&g.hidePopover()}function C(e=`trigger`){m(()=>y.open(e))}function w(e=`trigger`){m(()=>y.close(e,!1))}function T(){m(()=>y.toggle())}function E(e){e.key===`Escape`&&w(`escape`)}function D(e){return e.includes(t.el)||!!(g&&e.includes(g))||!!(_&&e.includes(_))}function O(e){u.value&&(D(e.composedPath())||w(`outside-click`))}function k(e){let t=e.relatedTarget;t&&g?.contains(t)||t&&_?.contains(t)||w(`trigger`)}return(0,a.onMount)(()=>{let n=t.shadowRoot?.querySelector(`slot:not([name])`),o=(0,a.createCleanupSignal)();if(!n)return;let s=()=>{o.clear();let e=n.assignedElements({flatten:!0})[0];if(!e){_=null;return}_=e;let t=r.syncAria(e,{controls:()=>h,disabled:()=>f.value,expanded:()=>String(u.value),haspopup:`dialog`}),i=[],a=(e,t,n,r)=>{e.addEventListener(t,n,r),i.push(()=>e.removeEventListener(t,n,r))},s=v.value,c=e=>s.includes(e);c(`click`)&&(a(e,`click`,T),a(document,`click`,O,{capture:!0})),c(`hover`)&&(a(e,`pointerenter`,()=>C(`trigger`)),a(e,`pointerleave`,()=>w(`trigger`)),g&&(a(g,`pointerenter`,()=>C(`trigger`)),a(g,`pointerleave`,()=>w(`trigger`)))),c(`focus`)&&(a(e,`focusin`,()=>C(`trigger`)),a(e,`focusout`,k),g&&a(g,`focusout`,k)),a(document,`keydown`,E),o.set(()=>{t();for(let e of i)e();_=null})};return(0,a.watch)(c.elements(),s,{immediate:!0}),(0,a.watch)(i.open,t=>{t!=null&&(t?(x(),e(`open`,{reason:`programmatic`})):(S(),e(`close`,{reason:`programmatic`})))}),(0,a.watch)(i.trigger,s),(0,a.watch)(i.disabled,e=>{e&&w(`programmatic`)}),()=>{o.clear(),g?.matches(`:popover-open`)&&g.hidePopover()}}),a.html`
       <slot></slot>
       <div
         class="panel"
         part="panel"
-        id="${c}"
+        id="${h}"
         role="dialog"
         aria-modal="false"
         popover="manual"
-        :aria-label="${()=>a.label.value??null}"
-        :aria-hidden="${()=>String(!s.value)}"
-        ref=${e=>{l=e}}>
+        :aria-label="${()=>i.label.value??null}"
+        :aria-hidden="${()=>String(!u.value)}"
+        ref=${e=>{g=e}}>
         <slot name="content"></slot>
       </div>
-    `},styles:[e.reducedMotionMixin,t.default],tag:`bit-popover`});exports.POPOVER_TAG=s;
+    `},styles:[t.reducedMotionMixin,i.default]});exports.POPOVER_TAG=d;
 //# sourceMappingURL=popover.cjs.map

package/dist/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":[],"sources":["../src/overlay/popover/popover.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/floatit';\n\nimport { computed, createId, defineComponent, html, onMount, onSlotChange, signal, watch } from '@vielzeug/craftit';\nimport { autoUpdate, flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport { reducedMotionMixin } from '../../styles';\n\nexport type PopoverTrigger = 'click' | 'hover' | 'focus';\n\nconst PANEL_OFFSET = 8;\nconst VALID_TRIGGERS = new Set<PopoverTrigger>(['click', 'hover', 'focus']);\n\nfunction normalizeTriggers(value: unknown): PopoverTrigger[] {\n  const parsed = String(value)\n    .split(',')\n    .map((item) => item.trim())\n    .filter((item): item is PopoverTrigger => VALID_TRIGGERS.has(item as PopoverTrigger));\n\n  // Keep behavior predictable for invalid input.\n  return parsed.length > 0 ? parsed : ['click'];\n}\n\nimport styles from './popover.css?inline';\n\nexport type BitPopoverEvents = {\n  /** Emitted when the popover closes */\n  close: undefined;\n  /** Emitted when the popover opens */\n  open: undefined;\n};\n\n/** Popover component properties */\nexport type BitPopoverProps = {\n  /** Disable the popover */\n  disabled?: boolean;\n  /** Accessible label for the panel */\n  label?: string;\n  /** Gap between trigger and panel in px */\n  offset?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to the trigger */\n  placement?: Placement;\n  /** Which trigger(s) open/close the popover — comma-separated */\n  trigger?: string;\n};\n\n/**\n * A floating informational or interactive panel anchored to a trigger element.\n * Unlike tooltips, popovers support arbitrary interactive content via slots.\n *\n * @element bit-popover\n *\n * @attr {string} placement - Preferred placement (default: 'bottom')\n * @attr {string} trigger - 'click' | 'hover' | 'focus' or comma-separated (default: 'click')\n * @attr {boolean} open - Controlled open state\n * @attr {number} offset - Gap in px between trigger and panel (default: 8)\n * @attr {boolean} disabled - Disables the popover\n * @attr {string} label - aria-label on the panel\n *\n * @slot - The trigger element\n * @slot content - Panel content\n *\n * @fires open - When the panel opens\n * @fires close - When the panel closes\n *\n * @cssprop --popover-min-width - Min width of the panel\n * @cssprop --popover-max-width - Max width of the panel\n * @cssprop --popover-max-height - Max height of the panel\n *\n * @example\n * ```html\n * <bit-popover>\n *   <button>Open</button>\n *   <div slot=\"content\">Panel content here</div>\n * </bit-popover>\n * ```\n */\nexport const POPOVER_TAG = defineComponent<BitPopoverProps, BitPopoverEvents>({\n  props: {\n    disabled: { default: false },\n    label: { default: undefined },\n    offset: { default: PANEL_OFFSET },\n    open: { default: undefined },\n    placement: { default: 'bottom' },\n    trigger: { default: 'click' },\n  },\n  setup({ emit, host, props }) {\n    const visible = signal(false);\n    const panelId = createId('popover');\n    let panelEl: HTMLElement | null = null;\n    let currentTrigger: HTMLElement | null = null;\n    let autoUpdateCleanup: (() => void) | null = null;\n    const triggers = computed<PopoverTrigger[]>(() => normalizeTriggers(props.trigger.value));\n\n    function updatePosition() {\n      if (!panelEl || !currentTrigger) return;\n\n      positionFloat(currentTrigger, panelEl, {\n        middleware: [offset(props.offset.value ?? PANEL_OFFSET), flip(), shift({ padding: 8 })],\n        placement: props.placement.value,\n      }).then((resolvedPlacement) => {\n        if (panelEl) panelEl.dataset.placement = resolvedPlacement;\n      });\n    }\n    /** Show the panel and start auto-updating its position. */\n    function showFloat() {\n      visible.value = true;\n      currentTrigger?.setAttribute('aria-expanded', 'true');\n\n      if (panelEl && !panelEl.matches(':popover-open')) panelEl.showPopover();\n\n      if (currentTrigger && panelEl) {\n        autoUpdateCleanup?.();\n        autoUpdateCleanup = autoUpdate(currentTrigger, panelEl, updatePosition);\n      }\n\n      updatePosition();\n    }\n    /** Hide the panel and stop auto-updating its position. */\n    function hideFloat() {\n      autoUpdateCleanup?.();\n      autoUpdateCleanup = null;\n      currentTrigger?.setAttribute('aria-expanded', 'false');\n      visible.value = false;\n\n      if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n    }\n    function open() {\n      if (props.open.value !== undefined) return;\n\n      if (props.disabled.value) return;\n\n      if (visible.value) return;\n\n      showFloat();\n      emit('open');\n    }\n    function close() {\n      if (props.open.value !== undefined) return;\n\n      if (!visible.value) return;\n\n      hideFloat();\n      emit('close');\n    }\n    function toggle() {\n      if (visible.value) close();\n      else open();\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') close();\n    }\n    function handleClickOutside(e: MouseEvent) {\n      if (!visible.value) return;\n\n      const path = e.composedPath();\n\n      if (path.includes(host)) return;\n\n      if (panelEl && path.includes(panelEl)) return;\n\n      if (currentTrigger && path.includes(currentTrigger)) return;\n\n      close();\n    }\n    // Don't close when focus moves from the trigger into the panel content.\n    function handleFocusOut(e: FocusEvent) {\n      const next = e.relatedTarget as Element | null;\n\n      if (next && panelEl?.contains(next)) return;\n\n      if (next && currentTrigger?.contains(next)) return;\n\n      close();\n    }\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n      if (!triggerSlot) return;\n\n      const bindEvents = () => {\n        unbindEvents();\n\n        const el = triggerSlot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!el) return;\n\n        currentTrigger = el;\n        el.setAttribute('aria-controls', panelId);\n        el.setAttribute('aria-haspopup', 'dialog');\n        el.setAttribute('aria-expanded', String(visible.value));\n        el.setAttribute('aria-disabled', String(Boolean(props.disabled.value)));\n\n        const t = triggers.value;\n\n        if (t.includes('click')) {\n          el.addEventListener('click', toggle);\n          document.addEventListener('click', handleClickOutside, { capture: true });\n        }\n\n        if (t.includes('hover')) {\n          el.addEventListener('pointerenter', open);\n          el.addEventListener('pointerleave', close);\n          panelEl?.addEventListener('pointerenter', open);\n          panelEl?.addEventListener('pointerleave', close);\n        }\n\n        if (t.includes('focus')) {\n          el.addEventListener('focusin', open);\n          el.addEventListener('focusout', handleFocusOut);\n          panelEl?.addEventListener('focusout', handleFocusOut);\n        }\n\n        document.addEventListener('keydown', handleKeydown);\n      };\n      const unbindEvents = () => {\n        if (!currentTrigger) return;\n\n        currentTrigger.removeAttribute('aria-controls');\n        currentTrigger.removeAttribute('aria-haspopup');\n        currentTrigger.removeAttribute('aria-expanded');\n        currentTrigger.removeAttribute('aria-disabled');\n        currentTrigger.removeEventListener('click', toggle);\n        currentTrigger.removeEventListener('pointerenter', open);\n        currentTrigger.removeEventListener('pointerleave', close);\n        currentTrigger.removeEventListener('focusin', open);\n        currentTrigger.removeEventListener('focusout', handleFocusOut);\n        panelEl?.removeEventListener('pointerenter', open);\n        panelEl?.removeEventListener('pointerleave', close);\n        panelEl?.removeEventListener('focusout', handleFocusOut);\n        document.removeEventListener('click', handleClickOutside, { capture: true });\n        document.removeEventListener('keydown', handleKeydown);\n        currentTrigger = null;\n      };\n\n      onSlotChange('default', bindEvents);\n      // Controlled mode\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          showFloat();\n          emit('open');\n        } else {\n          hideFloat();\n          emit('close');\n        }\n      });\n      watch(props.trigger, bindEvents);\n      watch(props.disabled, (isDisabled) => {\n        currentTrigger?.setAttribute('aria-disabled', String(Boolean(isDisabled)));\n\n        if (isDisabled) {\n          close();\n        }\n      });\n\n      return () => {\n        unbindEvents();\n        autoUpdateCleanup?.();\n        autoUpdateCleanup = null;\n\n        if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        id=\"${panelId}\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        popover=\"manual\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-hidden=\"${() => String(!visible.value)}\"\n        ref=${(el: HTMLElement) => {\n          panelEl = el;\n        }}>\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n  tag: 'bit-popover',\n});\n"],"mappings":"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"}
+{"version":3,"file":"popover.cjs","names":[],"sources":["../src/overlay/popover/popover.ts"],"sourcesContent":["import type { OverlayCloseDetail, OverlayOpenDetail } from '@vielzeug/craftit/controls';\n\nimport { define, computed, createCleanupSignal, createId, html, onMount, signal, watch } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\nimport { flip, offset, positionFloat, shift, type Placement } from '@vielzeug/floatit';\n\nimport { disablableBundle, type PropBundle } from '../../inputs/shared/bundles';\nimport { reducedMotionMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\nimport styles from './popover.css?inline';\n\nexport type PopoverTrigger = 'click' | 'hover' | 'focus';\n\nconst PANEL_OFFSET = 8;\nconst VALID_TRIGGERS = new Set<PopoverTrigger>(['click', 'hover', 'focus']);\n\nfunction normalizeTriggers(value: unknown): PopoverTrigger[] {\n  const parsed = String(value)\n    .split(',')\n    .map((item) => item.trim())\n    .filter((item): item is PopoverTrigger => VALID_TRIGGERS.has(item as PopoverTrigger));\n\n  // Keep behavior predictable for invalid input.\n  return parsed.length > 0 ? parsed : ['click'];\n}\n\nexport type BitPopoverEvents = {\n  /** Emitted when the popover closes */\n  close: OverlayCloseDetail;\n  /** Emitted when the popover opens */\n  open: OverlayOpenDetail;\n};\n\n/** Popover component properties */\nexport type BitPopoverProps = {\n  /** Disable the popover */\n  disabled?: boolean;\n  /** Accessible label for the panel */\n  label?: string;\n  /** Gap between trigger and panel in px */\n  offset?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to the trigger */\n  placement?: Placement;\n  /** Which trigger(s) open/close the popover — comma-separated */\n  trigger?: string;\n};\n\nconst popoverProps: PropBundle<BitPopoverProps> = {\n  ...disablableBundle,\n  label: undefined,\n  offset: PANEL_OFFSET,\n  open: undefined,\n  placement: 'bottom',\n  trigger: 'click',\n};\n\n/**\n * A floating informational or interactive panel anchored to a trigger element.\n * Unlike tooltips, popovers support arbitrary interactive content via slots.\n *\n * @element bit-popover\n *\n * @attr {string} placement - Preferred placement (default: 'bottom')\n * @attr {string} trigger - 'click' | 'hover' | 'focus' or comma-separated (default: 'click')\n * @attr {boolean} open - Controlled open state\n * @attr {number} offset - Gap in px between trigger and panel (default: 8)\n * @attr {boolean} disabled - Disables the popover\n * @attr {string} label - aria-label on the panel\n *\n * @slot - The trigger element\n * @slot content - Panel content\n *\n * @fires open - When the panel opens with detail: { reason }\n * @fires close - When the panel closes with detail: { reason }\n *\n * @cssprop --popover-min-width - Min width of the panel\n * @cssprop --popover-max-width - Max width of the panel\n * @cssprop --popover-max-height - Max height of the panel\n *\n * @example\n * ```html\n * <bit-popover>\n *   <button>Open</button>\n *   <div slot=\"content\">Panel content here</div>\n * </bit-popover>\n * ```\n */\nexport const POPOVER_TAG = define<BitPopoverProps, BitPopoverEvents>('bit-popover', {\n  props: popoverProps,\n  setup({ emit, host, props, slots }) {\n    const visible = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const ariaDisabled = computed(() => String(isDisabled.value));\n    const isControlled = computed(() => props.open.value !== undefined);\n    const runIfUncontrolled = (action: () => void) => {\n      if (isControlled.value) return;\n\n      action();\n    };\n    const panelId = createId('popover');\n    let panelEl: HTMLElement | null = null;\n    let currentTrigger: HTMLElement | null = null;\n    const triggers = computed<PopoverTrigger[]>(() => normalizeTriggers(props.trigger.value));\n    const overlay = createOverlayControl({\n      disabled: isDisabled,\n      elements: {\n        boundary: host.el,\n        panel: panelEl,\n        trigger: currentTrigger,\n      },\n      isOpen: visible,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => currentTrigger,\n        update: updatePosition,\n      },\n      restoreFocus: false,\n      setOpen: (next) => {\n        if (isControlled.value) return;\n\n        if (next) {\n          showFloat();\n\n          return;\n        }\n\n        hideFloat();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !currentTrigger) return;\n\n      const resolvedPlacement = positionFloat(currentTrigger, panelEl, {\n        middleware: [offset(props.offset.value ?? PANEL_OFFSET), flip(), shift({ padding: 8 })],\n        placement: props.placement.value,\n      });\n\n      if (panelEl) panelEl.dataset.placement = resolvedPlacement;\n    }\n    /** Show the panel and start auto-updating its position. */\n    function showFloat() {\n      visible.value = true;\n\n      if (panelEl && !panelEl.matches(':popover-open')) panelEl.showPopover();\n\n      updatePosition();\n    }\n    /** Hide the panel and stop auto-updating its position. */\n    function hideFloat() {\n      visible.value = false;\n\n      if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n    }\n    function open(reason: OverlayOpenDetail['reason'] = 'trigger') {\n      runIfUncontrolled(() => overlay.open(reason));\n    }\n    function close(reason: OverlayCloseDetail['reason'] = 'trigger') {\n      runIfUncontrolled(() => overlay.close(reason, false));\n    }\n    function toggle() {\n      runIfUncontrolled(() => overlay.toggle());\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') close('escape');\n    }\n    function isPathInside(path: EventTarget[]): boolean {\n      return (\n        path.includes(host.el) ||\n        !!(panelEl && path.includes(panelEl)) ||\n        !!(currentTrigger && path.includes(currentTrigger))\n      );\n    }\n    function handleClickOutside(e: MouseEvent) {\n      if (!visible.value) return;\n\n      const path = e.composedPath();\n\n      if (isPathInside(path)) return;\n\n      close('outside-click');\n    }\n    // Don't close when focus moves from the trigger into the panel content.\n    function handleFocusOut(e: FocusEvent) {\n      const next = e.relatedTarget as Element | null;\n\n      if (next && panelEl?.contains(next)) return;\n\n      if (next && currentTrigger?.contains(next)) return;\n\n      close('trigger');\n    }\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const triggerBinding = createCleanupSignal();\n\n      if (!triggerSlot) return;\n\n      const bindEvents = () => {\n        triggerBinding.clear();\n\n        const el = triggerSlot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!el) {\n          currentTrigger = null;\n\n          return;\n        }\n\n        currentTrigger = el;\n\n        const removeAria = syncAria(el, {\n          controls: () => panelId,\n          disabled: () => ariaDisabled.value,\n          expanded: () => String(visible.value),\n          haspopup: 'dialog',\n        });\n\n        const cleanups: Array<() => void> = [];\n        const add = (\n          target: EventTarget,\n          event: string,\n          listener: EventListener,\n          options?: AddEventListenerOptions,\n        ) => {\n          target.addEventListener(event, listener, options);\n          cleanups.push(() => target.removeEventListener(event, listener, options));\n        };\n\n        const t = triggers.value;\n        const hasTrigger = (trigger: PopoverTrigger) => t.includes(trigger);\n\n        if (hasTrigger('click')) {\n          add(el, 'click', toggle as EventListener);\n          add(document, 'click', handleClickOutside as EventListener, { capture: true });\n        }\n\n        if (hasTrigger('hover')) {\n          add(el, 'pointerenter', () => open('trigger'));\n          add(el, 'pointerleave', () => close('trigger'));\n\n          if (panelEl) {\n            add(panelEl, 'pointerenter', () => open('trigger'));\n            add(panelEl, 'pointerleave', () => close('trigger'));\n          }\n        }\n\n        if (hasTrigger('focus')) {\n          add(el, 'focusin', () => open('trigger'));\n          add(el, 'focusout', handleFocusOut as EventListener);\n\n          if (panelEl) add(panelEl, 'focusout', handleFocusOut as EventListener);\n        }\n\n        add(document, 'keydown', handleKeydown as EventListener);\n\n        triggerBinding.set(() => {\n          removeAria();\n\n          for (const cleanup of cleanups) cleanup();\n\n          currentTrigger = null;\n        });\n      };\n\n      watch(slots.elements(), bindEvents, { immediate: true });\n      // Controlled mode\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          showFloat();\n          emit('open', { reason: 'programmatic' });\n        } else {\n          hideFloat();\n          emit('close', { reason: 'programmatic' });\n        }\n      });\n      watch(props.trigger, bindEvents);\n      watch(props.disabled, (isDisabled) => {\n        if (isDisabled) close('programmatic');\n      });\n\n      return () => {\n        triggerBinding.clear();\n\n        if (panelEl?.matches(':popover-open')) panelEl.hidePopover();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        id=\"${panelId}\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        popover=\"manual\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-hidden=\"${() => String(!visible.value)}\"\n        ref=${(el: HTMLElement) => {\n          panelEl = el;\n        }}>\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"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"}