@vielzeug/buildit 2.0.0

package/dist/overlay/menu/menu.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.css?inline.js","names":[],"sources":["../../../src/overlay/menu/menu.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_menu-panel-bg: var(\n      --menu-panel-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_menu-panel-border-color: var(\n      --menu-panel-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n    --_menu-panel-blur: var(--menu-panel-blur, var(--blur-md));\n    --_menu-panel-shadow: var(--menu-panel-shadow, var(--shadow-xl));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  /* ========================================\n       Menu Panel\n       ======================================== */\n\n  .menu-panel {\n    position: fixed;\n    inset-inline-start: 0;\n    top: 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    visibility: hidden;\n    min-width: var(--menu-panel-min-width, 10rem);\n    padding: var(--size-1);\n    margin: 0;\n    pointer-events: none;\n    background: var(--_menu-panel-bg);\n    border: var(--border) solid var(--_menu-panel-border-color);\n    border-radius: var(--menu-panel-radius, var(--rounded-lg));\n    box-shadow: var(--_menu-panel-shadow);\n    opacity: 0;\n    backdrop-filter: blur(var(--_menu-panel-blur));\n    transform: translateY(-4px) scale(0.97);\n    transform-origin: top;\n    transition:\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      visibility var(--transition-fast);\n  }\n\n  .menu-panel[data-open] {\n    visibility: visible;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  /* ========================================\n       Menu Items (slotted bit-menu-item)\n       ======================================== */\n\n  ::slotted(bit-menu-item) {\n    display: block;\n  }\n\n  ::slotted(bit-menu-separator) {\n    display: block;\n  }\n}\n"],"mappings":""}

package/dist/overlay/menu/menu.d.ts

@@ -0,0 +1,45 @@
+import { type OverlayOpenReason, type OverlayCloseReason } from '@vielzeug/craftit/labs';
+import type { AddEventListeners, ComponentSize, ThemeColor } from '../../types';
+export interface MenuSelectDetail {
+    value: string;
+    checked?: boolean;
+}
+export type BitMenuItemType = 'checkbox' | 'radio';
+export type BitMenuEvents = {
+    close: {
+        reason: OverlayCloseReason;
+    };
+    open: {
+        reason: OverlayOpenReason;
+    };
+    select: MenuSelectDetail;
+};
+export type BitMenuItemProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    type?: BitMenuItemType;
+    value?: string;
+};
+export type BitMenuProps = {
+    color?: ThemeColor;
+    disabled?: boolean;
+    placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+    size?: ComponentSize;
+};
+export declare const MENU_ITEM_TAG: string;
+export declare const SEPARATOR_TAG: string;
+/**
+ * `bit-menu` — Action dropdown menu triggered by a slotted trigger element.
+ * Nest `<bit-menu-item>` elements inside for menu options.
+ *
+ * @example
+ * ```html
+ * <bit-menu>
+ *   <button slot="trigger">Actions</button>
+ *   <bit-menu-item value="edit">Edit</bit-menu-item>
+ *   <bit-menu-item value="delete">Delete</bit-menu-item>
+ * </bit-menu>
+ * ```
+ */
+export declare const MENU_TAG: AddEventListeners<BitMenuEvents>;
+//# sourceMappingURL=menu.d.ts.map

package/dist/overlay/menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/overlay/menu/menu.ts"],"names":[],"mappings":"AAaA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQhF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE;QAAE,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;IACtC,IAAI,EAAE;QAAE,MAAM,EAAE,iBAAiB,CAAA;KAAE,CAAC;IACpC,MAAM,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;IACvF,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAkBF,eAAO,MAAM,aAAa,QAoJxB,CAAC;AAMH,eAAO,MAAM,aAAa,QAaxB,CAAC;AAMH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,EAmOJ,iBAAiB,CAAC,aAAa,CAAC,CAAC"}

package/dist/overlay/popover/popover.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_panel-bg:var(--popover-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--popover-panel-blur,var(--blur-md));--_panel-border-color:var(--popover-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));--_panel-shadow:var(--popover-shadow,var(--shadow-xl));display:inline-block;position:relative}.panel{inset:unset;box-sizing:border-box;min-width:var(--popover-min-width,12rem);max-width:var(--popover-max-width,24rem);max-height:var(--popover-max-height,min(70vh, 32rem));word-break:auto-phrase;overflow-wrap:anywhere;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_panel-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transform:scale(.96) translateY(var(--size-2));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-normal) cubic-bezier(.16, 1, .3, 1), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete);margin:0;padding:0;position:fixed;overflow:auto}.panel:popover-open{opacity:1;transform:scale(1)translateY(0)}@starting-style{.panel:popover-open{opacity:0;transform:scale(.96) translateY(var(--size-2))}}}`;exports.default=e;
+//# sourceMappingURL=popover.css?inline.cjs.map

package/dist/overlay/popover/popover.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.css?inline.cjs","names":[],"sources":["../../../src/overlay/popover/popover.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_panel-bg: var(\n      --popover-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--popover-panel-blur, var(--blur-md));\n    --_panel-border-color: var(\n      --popover-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n    --_panel-shadow: var(--popover-shadow, var(--shadow-xl));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  .panel {\n    position: fixed;\n\n    /* Popover UA resets */\n    inset: unset;\n    box-sizing: border-box;\n    min-width: var(--popover-min-width, 12rem);\n    max-width: var(--popover-max-width, 24rem);\n    max-height: var(--popover-max-height, min(70vh, 32rem));\n    padding: 0;\n    margin: 0;\n    overflow: auto;\n    word-break: auto-phrase;\n    overflow-wrap: anywhere;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_panel-shadow);\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: scale(0.96) translateY(var(--size-2));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete\n    );\n  }\n\n  .panel:popover-open {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(0.96) translateY(var(--size-2));\n    }\n  }\n}\n"],"mappings":""}

package/dist/overlay/popover/popover.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/overlay/popover/popover.css?inline
+var e = "@layer buildit.base{:host{--_panel-bg:var(--popover-bg,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-50) 85%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 85%, transparent)));--_panel-blur:var(--popover-panel-blur,var(--blur-md));--_panel-border-color:var(--popover-border-color,var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 8%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 8%, transparent)));--_panel-shadow:var(--popover-shadow,var(--shadow-xl));display:inline-block;position:relative}.panel{inset:unset;box-sizing:border-box;min-width:var(--popover-min-width,12rem);max-width:var(--popover-max-width,24rem);max-height:var(--popover-max-height,min(70vh, 32rem));word-break:auto-phrase;overflow-wrap:anywhere;background:var(--_panel-bg);border:var(--border) solid var(--_panel-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_panel-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transform:scale(.96) translateY(var(--size-2));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-normal) cubic-bezier(.16, 1, .3, 1), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete);margin:0;padding:0;position:fixed;overflow:auto}.panel:popover-open{opacity:1;transform:scale(1)translateY(0)}@starting-style{.panel:popover-open{opacity:0;transform:scale(.96) translateY(var(--size-2))}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=popover.css?inline.js.map

package/dist/overlay/popover/popover.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.css?inline.js","names":[],"sources":["../../../src/overlay/popover/popover.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_panel-bg: var(\n      --popover-bg,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-50) 85%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 85%, transparent)\n      )\n    );\n    --_panel-blur: var(--popover-panel-blur, var(--blur-md));\n    --_panel-border-color: var(\n      --popover-border-color,\n      light-dark(\n        color-mix(in srgb, var(--color-contrast-900) 8%, transparent),\n        color-mix(in srgb, var(--color-contrast-100) 8%, transparent)\n      )\n    );\n    --_panel-shadow: var(--popover-shadow, var(--shadow-xl));\n\n    position: relative;\n    display: inline-block;\n  }\n\n  .panel {\n    position: fixed;\n\n    /* Popover UA resets */\n    inset: unset;\n    box-sizing: border-box;\n    min-width: var(--popover-min-width, 12rem);\n    max-width: var(--popover-max-width, 24rem);\n    max-height: var(--popover-max-height, min(70vh, 32rem));\n    padding: 0;\n    margin: 0;\n    overflow: auto;\n    word-break: auto-phrase;\n    overflow-wrap: anywhere;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_panel-shadow);\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: scale(0.96) translateY(var(--size-2));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete\n    );\n  }\n\n  .panel:popover-open {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(0.96) translateY(var(--size-2));\n    }\n  }\n}\n"],"mappings":""}

package/dist/overlay/popover/popover.d.ts

@@ -0,0 +1,56 @@
+import type { Placement } from '@vielzeug/floatit';
+export type PopoverTrigger = 'click' | 'hover' | 'focus';
+export type BitPopoverEvents = {
+    /** Emitted when the popover closes */
+    close: undefined;
+    /** Emitted when the popover opens */
+    open: undefined;
+};
+/** Popover component properties */
+export type BitPopoverProps = {
+    /** Disable the popover */
+    disabled?: boolean;
+    /** Accessible label for the panel */
+    label?: string;
+    /** Gap between trigger and panel in px */
+    offset?: number;
+    /** Controlled open state */
+    open?: boolean;
+    /** Preferred placement relative to the trigger */
+    placement?: Placement;
+    /** Which trigger(s) open/close the popover — comma-separated */
+    trigger?: string;
+};
+/**
+ * A floating informational or interactive panel anchored to a trigger element.
+ * Unlike tooltips, popovers support arbitrary interactive content via slots.
+ *
+ * @element bit-popover
+ *
+ * @attr {string} placement - Preferred placement (default: 'bottom')
+ * @attr {string} trigger - 'click' | 'hover' | 'focus' or comma-separated (default: 'click')
+ * @attr {boolean} open - Controlled open state
+ * @attr {number} offset - Gap in px between trigger and panel (default: 8)
+ * @attr {boolean} disabled - Disables the popover
+ * @attr {string} label - aria-label on the panel
+ *
+ * @slot - The trigger element
+ * @slot content - Panel content
+ *
+ * @fires open - When the panel opens
+ * @fires close - When the panel closes
+ *
+ * @cssprop --popover-min-width - Min width of the panel
+ * @cssprop --popover-max-width - Max width of the panel
+ * @cssprop --popover-max-height - Max height of the panel
+ *
+ * @example
+ * ```html
+ * <bit-popover>
+ *   <button>Open</button>
+ *   <div slot="content">Panel content here</div>
+ * </bit-popover>
+ * ```
+ */
+export declare const POPOVER_TAG: string;
+//# sourceMappingURL=popover.d.ts.map

package/dist/overlay/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/overlay/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAOnD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAiBzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sCAAsC;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,mCAAmC;AACnC,MAAM,MAAM,eAAe,GAAG;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,WAAW,QAiNtB,CAAC"}

package/dist/overlay/tooltip/tooltip.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`.tooltip{inset:unset;padding:var(--size-1-5) var(--size-3);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;will-change:opacity, transform, filter;margin:0;overflow:visible}@layer buildit.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-100))var(--lightningcss-dark,var(--color-contrast-900));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 80%, transparent));--_tooltip-border-width:var(--border);--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 12%, transparent));--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(var(--size-1)) scale(.98);max-width:var(--tooltip-max-width,var(--size-72));font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--_tooltip-fg);word-break:auto-phrase;white-space:pre-line;pointer-events:none;background:var(--_tooltip-bg);border-radius:var(--rounded);box-shadow:var(--_tooltip-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:var(--_tooltip-closed-transform);transition:opacity var(--transition-fast), transform var(--transition-normal) var(--ease-out), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(var(--size-2)) scale(.96)}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(calc(var(--size-2) * -1)) scale(.96)}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(var(--size-2)) scale(.96)}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(calc(var(--size-2) * -1)) scale(.96)}.tooltip:popover-open{opacity:1;transition:opacity var(--transition-normal), transform var(--transition-spring), display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer buildit.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-900))var(--lightningcss-dark,var(--color-contrast-100));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 80%, transparent));--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 12%, transparent));--_tooltip-shadow:var(--shadow-md)}}@layer buildit.utilities{:host([size=sm]) .tooltip{font-size:var(--text-xs)}:host([size=lg]) .tooltip{font-size:var(--text-base)}}`;exports.default=e;
+//# sourceMappingURL=tooltip.css?inline.cjs.map

package/dist/overlay/tooltip/tooltip.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.css?inline.cjs","names":[],"sources":["../../../src/overlay/tooltip/tooltip.css?inline"],"sourcesContent":["/* ========================================\n   Popover UA resets — unlayered so they unconditionally beat\n   the browser's [popover] UA stylesheet (padding / inset / border / margin).\n   Must NOT be inside @layer; unlayered author rules win over every layer and\n   every UA default.\n   ======================================== */\n.tooltip {\n  inset: unset;\n  padding: var(--size-1-5) var(--size-3);\n  margin: 0;\n  overflow: visible;\n  border: var(--_tooltip-border-width, var(--border-0)) solid var(--_tooltip-border-color, transparent);\n  transform-origin: center;\n  will-change: opacity, transform, filter;\n}\n\n@layer buildit.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-100), var(--color-contrast-900));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent)\n    );\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(var(--size-1)) scale(0.98);\n\n    /* Positioning — JS sets top/left inline */\n    position: fixed;\n    max-width: var(--tooltip-max-width, var(--size-72));\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--_tooltip-fg);\n    word-break: auto-phrase;\n    white-space: pre-line;\n    pointer-events: none;\n    background: var(--_tooltip-bg);\n    border-radius: var(--rounded);\n    box-shadow: var(--_tooltip-shadow);\n\n    /* Hidden by default (also serves as exit state) */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: var(--_tooltip-closed-transform);\n    transition:\n      opacity var(--transition-fast),\n      transform var(--transition-normal) var(--ease-out),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-open {\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n    transition:\n      opacity var(--transition-normal),\n      transform var(--transition-spring),\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete;\n\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer buildit.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-900), var(--color-contrast-100));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent)\n    );\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) .tooltip {\n    font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) .tooltip {\n    font-size: var(--text-base);\n  }\n}\n"],"mappings":""}

package/dist/overlay/tooltip/tooltip.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/overlay/tooltip/tooltip.css?inline
+var e = ".tooltip{inset:unset;padding:var(--size-1-5) var(--size-3);border:var(--_tooltip-border-width,var(--border-0)) solid var(--_tooltip-border-color,transparent);transform-origin:50%;will-change:opacity, transform, filter;margin:0;overflow:visible}@layer buildit.base{:host{display:inline-block;position:relative}.tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-100))var(--lightningcss-dark,var(--color-contrast-900));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 80%, transparent));--_tooltip-border-width:var(--border);--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 12%, transparent));--_tooltip-shadow:var(--shadow-md);--_tooltip-closed-transform:translateY(var(--size-1)) scale(.98);max-width:var(--tooltip-max-width,var(--size-72));font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--_tooltip-fg);word-break:auto-phrase;white-space:pre-line;pointer-events:none;background:var(--_tooltip-bg);border-radius:var(--rounded);box-shadow:var(--_tooltip-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transform:var(--_tooltip-closed-transform);transition:opacity var(--transition-fast), transform var(--transition-normal) var(--ease-out), display var(--transition-fast) allow-discrete, overlay var(--transition-fast) allow-discrete;position:fixed}.tooltip[data-placement=top]{--_tooltip-closed-transform:translateY(var(--size-2)) scale(.96)}.tooltip[data-placement=bottom]{--_tooltip-closed-transform:translateY(calc(var(--size-2) * -1)) scale(.96)}.tooltip[data-placement=left]{--_tooltip-closed-transform:translateX(var(--size-2)) scale(.96)}.tooltip[data-placement=right]{--_tooltip-closed-transform:translateX(calc(var(--size-2) * -1)) scale(.96)}.tooltip:popover-open{opacity:1;transition:opacity var(--transition-normal), transform var(--transition-spring), display var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;transform:translate(0)scale(1)}@starting-style{.tooltip:popover-open{opacity:0;transform:var(--_tooltip-closed-transform)}}}@layer buildit.variants{:host([variant=light]) .tooltip{--_tooltip-fg:var(--lightningcss-light,var(--color-contrast-900))var(--lightningcss-dark,var(--color-contrast-100));--_tooltip-bg:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-100) 80%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-900) 80%, transparent));--_tooltip-border-color:var(--lightningcss-light,color-mix(in srgb, var(--color-contrast-900) 12%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--color-contrast-100) 12%, transparent));--_tooltip-shadow:var(--shadow-md)}}@layer buildit.utilities{:host([size=sm]) .tooltip{font-size:var(--text-xs)}:host([size=lg]) .tooltip{font-size:var(--text-base)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tooltip.css?inline.js.map

package/dist/overlay/tooltip/tooltip.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.css?inline.js","names":[],"sources":["../../../src/overlay/tooltip/tooltip.css?inline"],"sourcesContent":["/* ========================================\n   Popover UA resets — unlayered so they unconditionally beat\n   the browser's [popover] UA stylesheet (padding / inset / border / margin).\n   Must NOT be inside @layer; unlayered author rules win over every layer and\n   every UA default.\n   ======================================== */\n.tooltip {\n  inset: unset;\n  padding: var(--size-1-5) var(--size-3);\n  margin: 0;\n  overflow: visible;\n  border: var(--_tooltip-border-width, var(--border-0)) solid var(--_tooltip-border-color, transparent);\n  transform-origin: center;\n  will-change: opacity, transform, filter;\n}\n\n@layer buildit.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-100), var(--color-contrast-900));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent)\n    );\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(var(--size-1)) scale(0.98);\n\n    /* Positioning — JS sets top/left inline */\n    position: fixed;\n    max-width: var(--tooltip-max-width, var(--size-72));\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--_tooltip-fg);\n    word-break: auto-phrase;\n    white-space: pre-line;\n    pointer-events: none;\n    background: var(--_tooltip-bg);\n    border-radius: var(--rounded);\n    box-shadow: var(--_tooltip-shadow);\n\n    /* Hidden by default (also serves as exit state) */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: var(--_tooltip-closed-transform);\n    transition:\n      opacity var(--transition-fast),\n      transform var(--transition-normal) var(--ease-out),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(var(--size-2)) scale(0.96);\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(calc(var(--size-2) * -1)) scale(0.96);\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-open {\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n    transition:\n      opacity var(--transition-normal),\n      transform var(--transition-spring),\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete;\n\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer buildit.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: light-dark(var(--color-contrast-900), var(--color-contrast-100));\n    --_tooltip-bg: light-dark(\n      color-mix(in srgb, var(--color-contrast-100) 80%, transparent),\n      color-mix(in srgb, var(--color-contrast-900) 80%, transparent)\n    );\n    --_tooltip-border-color: light-dark(\n      color-mix(in srgb, var(--color-contrast-900) 12%, transparent),\n      color-mix(in srgb, var(--color-contrast-100) 12%, transparent)\n    );\n    --_tooltip-shadow: var(--shadow-md);\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) .tooltip {\n    font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) .tooltip {\n    font-size: var(--text-base);\n  }\n}\n"],"mappings":""}

package/dist/overlay/tooltip/tooltip.d.ts

@@ -0,0 +1,55 @@
+import type { ComponentSize } from '../../types';
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/** Tooltip component properties */
+export type BitTooltipProps = {
+    /** Hide delay in ms (useful to keep tooltip open when moving focus between trigger and tooltip) */
+    'close-delay'?: number;
+    /** Tooltip text content */
+    content?: string;
+    /** Show delay in ms */
+    delay?: number;
+    /** Disable the tooltip */
+    disabled?: boolean;
+    /** Controlled open state. When provided, the tooltip acts as a controlled component and ignores trigger events for open/close. */
+    open?: boolean;
+    /** Preferred placement relative to trigger */
+    placement?: TooltipPlacement;
+    /** Tooltip size */
+    size?: ComponentSize;
+    /** Which trigger(s) show/hide the tooltip — comma-separated if multiple, e.g. "hover,focus" */
+    trigger?: string;
+    /** Visual variant: 'dark' (default) or 'light' */
+    variant?: 'dark' | 'light';
+};
+/**
+ * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.
+ *
+ * @element bit-tooltip
+ *
+ * @attr {string} content - Tooltip text content
+ * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')
+ * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination
+ * @attr {number} delay - Show delay in milliseconds (default: 0)
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - 'dark' (default) | 'light'
+ * @attr {boolean} disabled - Disable the tooltip
+ *
+ * @slot - Trigger element that the tooltip is anchored to
+ * @slot content - Complex tooltip content (overrides the `content` attribute)
+ *
+ * @cssprop --tooltip-max-width - Max width of the tooltip bubble
+ *
+ * @example
+ * ```html
+ * <bit-tooltip content="Copy to clipboard">
+ *   <button>Copy</button>
+ * </bit-tooltip>
+ *
+ * <bit-tooltip placement="right" trigger="focus,hover" content="Required field">
+ *   <input type="text" />
+ * </bit-tooltip>
+ * ```
+ */
+export declare const TOOLTIP_TAG: string;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/overlay/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlay/tooltip/tooltip.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,KAAK,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAQ5D,mCAAmC;AACnC,MAAM,MAAM,eAAe,GAAG;IAC5B,mGAAmG;IACnG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kIAAkI;IAClI,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,WAAW,QA6OtB,CAAC"}

package/dist/pagination.cjs

@@ -0,0 +1,102 @@
+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`);require(`./styles/index.cjs`);const r=require(`./craftit/dist/directives/each.cjs`);require(`./craftit/dist/directives/index.cjs`),require(`./button.cjs`);const i=require(`./content/pagination/pagination.css?inline.cjs`);let a=require(`@vielzeug/craftit`);function o(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 s=(0,a.defineComponent)({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}},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}))}function s(e){let t=e.target?.closest(`[part="page-btn"]`);if(!t)return;let n=t.getAttribute(`aria-label`);if(!n)return;let r=n.match(/\d+/);r&&i(Number(r[0]))}let c=(0,a.computed)(()=>o(Number(n.page.value)||1,Number(n[`total-pages`].value)||1,Number(n.siblings.value)??1)),l=(0,a.computed)(()=>(Number(n.page.value)||1)<=1),u=(0,a.computed)(()=>(Number(n.page.value)||1)>=(Number(n[`total-pages`].value)||1));return a.html`
+      <nav :aria-label="${()=>n.label.value}" part="nav" @click=${s}>
+        <ol class="pagination" part="list">
+          ${()=>n[`show-first-last`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="first-btn"
+                    aria-label="First page"
+                    ?disabled=${()=>l.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>
+                  </button>
+                </li>`:``}
+          ${()=>n[`show-prev-next`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="prev-btn"
+                    aria-label="Previous page"
+                    ?disabled=${()=>l.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>
+                  </button>
+                </li>`:``}
+          <li style="display: contents;">
+            ${r.d(c,e=>{if(e===`ellipsis-start`||e===`ellipsis-end`)return a.html`<span class="ellipsis" aria-hidden="true">&hellip;</span>`;let t=e;return t===(Number(n.page.value)||1)?a.html`<button type="button" part="page-btn" aria-label="Page ${t}" aria-current="page">
+                      ${t}
+                    </button>`:a.html`<button type="button" part="page-btn" aria-label="Page ${t}">${t}</button>`},void 0,{key:e=>`${e}`})}
+          </li>
+          ${()=>n[`show-prev-next`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="next-btn"
+                    aria-label="Next 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="9 18 15 12 9 6" />
+                    </svg>
+                  </button>
+                </li>`:``}
+          ${()=>n[`show-first-last`].value?a.html`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="last-btn"
+                    aria-label="Last page"
+                    ?disabled=${()=>u.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>
+                  </button>
+                </li>`:``}
+        </ol>
+      </nav>
+    `},styles:[n.colorThemeMixin,t.sizeVariantMixin({}),e.coarsePointerMixin,i.default],tag:`bit-pagination`});exports.PAGINATION_TAG=s;
+//# sourceMappingURL=pagination.cjs.map

package/dist/pagination.cjs.map

@@ -0,0 +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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"}

package/dist/pagination.js

@@ -0,0 +1,168 @@
+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 "./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";
+//#region src/content/pagination/pagination.ts
+function c(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 l = o({
+	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 }
+	},
+	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 }));
+		}
+		function o(e) {
+			let t = e.target?.closest("[part=\"page-btn\"]");
+			if (!t) return;
+			let n = t.getAttribute("aria-label");
+			if (!n) return;
+			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}>
+        <ol class="pagination" part="list">
+          ${() => n["show-first-last"].value ? s`<li>
+                  <button
+                    type="button"
+                    class="nav-btn"
+                    part="first-btn"
+                    aria-label="First page"
+                    ?disabled=${() => u.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>
+                  </button>
+                </li>` : ""}
+          ${() => n["show-prev-next"].value ? s`<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>
+                  </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">
+                      ${t}
+                    </button>` : s`<button type="button" part="page-btn" aria-label="Page ${t}">${t}</button>`;
+		}, void 0, { key: (e) => `${e}` })}
+          </li>
+          ${() => n["show-prev-next"].value ? s`<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>
+                  </button>
+                </li>` : ""}
+          ${() => n["show-first-last"].value ? s`<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>
+                  </button>
+                </li>` : ""}
+        </ol>
+      </nav>
+    `;
+	},
+	styles: [
+		n,
+		t({}),
+		e,
+		i
+	],
+	tag: "bit-pagination"
+});
+//#endregion
+export { l as PAGINATION_TAG };
+
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -0,0 +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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"}

package/dist/popover.cjs

@@ -0,0 +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`
+      <slot></slot>
+      <div
+        class="panel"
+        part="panel"
+        id="${c}"
+        role="dialog"
+        aria-modal="false"
+        popover="manual"
+        :aria-label="${()=>a.label.value??null}"
+        :aria-hidden="${()=>String(!s.value)}"
+        ref=${e=>{l=e}}>
+        <slot name="content"></slot>
+      </div>
+    `},styles:[e.reducedMotionMixin,t.default],tag:`bit-popover`});exports.POPOVER_TAG=s;
+//# sourceMappingURL=popover.cjs.map