aeico-components 0.1.6 → 0.1.8

package/dist/chunks/navbar.js

@@ -1,143 +0,0 @@
-import { v as variables } from "./variables.js";
-import { c as colorCSS } from "./color.js";
-import { A as AeicoComponent } from "./aeico-component.js";
-import { prop, html } from "aeico";
-const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--surface-base));\n  color: var(--ae-navbar-color, var(--color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: 0;\n  --ae-navbar-link-hover-color: var(--color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--color-solid);\n  --ae-navbar-color: var(--color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n  --ae-navbar-link-active-color: var(--color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: 0;\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp(target, name, desc), target;
-};
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _open_dec, _appearance_dec, _sticky_dec, _color_dec, _a, _init, _color, _sticky, _appearance, _open;
-class Navbar extends (_a = AeicoComponent, _color_dec = [prop({ type: String })], _sticky_dec = [prop({ type: Boolean })], _appearance_dec = [prop({ type: String })], _open_dec = [prop({ type: Boolean })], _a) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _color, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
-    __privateAdd(this, _sticky, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _appearance, __runInitializers(_init, 16, this, "text")), __runInitializers(_init, 19, this);
-    __privateAdd(this, _open, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
-    __publicField(this, "_outsideClickHandler", null);
-    __publicField(this, "_handleInnerClick", (e) => {
-      if (!this.open) return;
-      const path = e.composedPath();
-      if (path.some((el) => el.tagName === "A")) {
-        this._closeMenu();
-      }
-    });
-    __publicField(this, "_toggleMenu", () => {
-      this.open = !this.open;
-    });
-    __publicField(this, "_closeMenu", () => {
-      if (this.open) this.open = false;
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._outsideClickHandler = (e) => {
-      var _a2;
-      if (!this.contains(e.target) && !((_a2 = this.shadowRoot) == null ? void 0 : _a2.contains(e.target))) {
-        this._closeMenu();
-      }
-    };
-    document.addEventListener("click", this._outsideClickHandler);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._outsideClickHandler) {
-      document.removeEventListener("click", this._outsideClickHandler);
-      this._outsideClickHandler = null;
-    }
-  }
-  /** Toggle the mobile menu open/closed. */
-  toggleMenu() {
-    this.open = !this.open;
-  }
-  render() {
-    return html(({ div, nav, button, span, slot }) => {
-      div({ class: "inner", "@click": this._handleInnerClick }, () => {
-        div({ part: "brand" }, () => {
-          slot({ name: "brand" });
-        });
-        nav({ part: "nav", "aria-label": "Main navigation" }, () => {
-          div({ part: "start" }, () => {
-            slot({ name: "start" });
-          });
-          div({ part: "end" }, () => {
-            slot({ name: "end" });
-          });
-        });
-        button(
-          {
-            part: "hamburger",
-            type: "button",
-            "aria-expanded": String(this.open),
-            "aria-label": "Toggle navigation",
-            "@click": this._toggleMenu
-          },
-          () => {
-            span({ "aria-hidden": "true" });
-            span({ "aria-hidden": "true" });
-            span({ "aria-hidden": "true" });
-          }
-        );
-      });
-    });
-  }
-}
-_init = __decoratorStart(_a);
-_color = /* @__PURE__ */ new WeakMap();
-_sticky = /* @__PURE__ */ new WeakMap();
-_appearance = /* @__PURE__ */ new WeakMap();
-_open = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "color", _color_dec, Navbar, _color);
-__decorateElement(_init, 4, "sticky", _sticky_dec, Navbar, _sticky);
-__decorateElement(_init, 4, "appearance", _appearance_dec, Navbar, _appearance);
-__decorateElement(_init, 4, "open", _open_dec, Navbar, _open);
-__decoratorMetadata(_init, Navbar);
-__publicField(Navbar, "tagName", "navbar");
-__publicField(Navbar, "styles", [variables, colorCSS, navbarStyle]);
-Navbar.register();
-export {
-  Navbar as N
-};
-//# sourceMappingURL=navbar.js.map

package/dist/chunks/navbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navbar.js","sources":["../../src/navbar/navbar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport navbarStyle from '../styles/components/navbar.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand`  — leftmost area, typically a logo or site name link\n * - `start`  — main navigation links / dropdowns\n * - `end`    — right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n *   <a slot=\"brand\" href=\"/\">MyApp</a>\n *   <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n *   <a slot=\"start\" href=\"/docs\">Docs</a>\n *   <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n *   --ae-navbar-height: 4rem;\n *   --ae-navbar-bg: transparent;\n *   --ae-navbar-border-width: 0;\n *   --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n  static tagName = 'navbar';\n\n  protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n  /** Background color using the design-system color token set. */\n  @prop({ type: String })\n  accessor color: NavbarColor | undefined;\n\n  /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n  @prop({ type: Boolean })\n  accessor sticky: boolean = false;\n\n  /**\n   * Hover style preset for slotted `<a>` links.\n   * - `text`  — only the font color changes on hover (default)\n   * - `block` — a subtle filled background block appears on hover\n   *\n   * Fine-tune further with `--ae-navbar-link-hover-color` /\n   * `--ae-navbar-link-hover-bg` CSS variables.\n   */\n  @prop({ type: String })\n  accessor appearance: NavbarAppearance = 'text';\n\n  /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Close menu when clicking outside the navbar\n    this._outsideClickHandler = (e: MouseEvent) => {\n      // Event retargeting in shadow DOM means e.target is the host element\n      // when the click originates inside the shadow root, so this check is safe.\n      if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n        this._closeMenu();\n      }\n    };\n    document.addEventListener('click', this._outsideClickHandler);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n  }\n\n  /** Toggle the mobile menu open/closed. */\n  toggleMenu(): void {\n    this.open = !this.open;\n  }\n\n  private _handleInnerClick = (e: Event) => {\n    if (!this.open) return;\n    // Close mobile menu when a slotted <a> link is clicked\n    const path = e.composedPath() as Element[];\n    if (path.some((el) => (el as HTMLElement).tagName === 'A')) {\n      this._closeMenu();\n    }\n  };\n\n  private _toggleMenu = () => {\n    this.open = !this.open;\n  };\n\n  private _closeMenu = () => {\n    if (this.open) this.open = false;\n  };\n\n  protected render() {\n    return html(({ div, nav, button, span, slot }) => {\n      div({ class: 'inner', '@click': this._handleInnerClick }, () => {\n        div({ part: 'brand' }, () => {\n          slot({ name: 'brand' });\n        });\n        nav({ part: 'nav', 'aria-label': 'Main navigation' }, () => {\n          div({ part: 'start' }, () => {\n            slot({ name: 'start' });\n          });\n          div({ part: 'end' }, () => {\n            slot({ name: 'end' });\n          });\n        });\n        button(\n          {\n            part: 'hamburger',\n            type: 'button',\n            'aria-expanded': String(this.open),\n            'aria-label': 'Toggle navigation',\n            '@click': this._toggleMenu,\n          },\n          () => {\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n          },\n        );\n      });\n    });\n  }\n}\n\nNavbar.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-navbar': Navbar;\n  }\n}\n\nexport default Navbar;\nexport type NavbarProps = InferProps<typeof Navbar>;\n"],"names":["_a","styleVariables"],"mappings":"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"}

package/dist/chunks/pagination.cjs

@@ -1,475 +0,0 @@
-"use strict";
-const aeico = require("aeico");
-const aeicoComponent = require("./aeico-component.cjs");
-const variables = require("./variables.cjs");
-const size = require("./size.cjs");
-const paginationStyle = `:host {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--size-m);
-}
-
-nav {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2em;
-  height: 2em;
-  padding: 0 0.5em;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 4px;
-  border: 1px solid var(--border-default);
-  background: transparent;
-  color: var(--color-text-main);
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
-  outline: none;
-}
-
-button:focus-visible {
-  box-shadow: 0 0 0 2px var(--focus-ring);
-  border-color: var(--border-focus);
-}
-
-button:hover:not(:disabled) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  background: var(--color-primary-bg-subtle);
-}
-
-button:active:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary-bg-subtle), var(--color-primary) 10%);
-}
-
-button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-button.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: white;
-  font-weight: 600;
-  cursor: default;
-}
-
-button.active:hover:not(:disabled) {
-  background: var(--color-primary-hover);
-  border-color: var(--color-primary-hover);
-  color: white;
-}
-
-button.nav-btn {
-  min-width: 2em;
-  width: 2em;
-  padding: 0;
-}
-
-[part="ellipsis"] {
-  display: inline-flex;
-  align-items: flex-end;
-  justify-content: center;
-  min-width: 2em;
-  height: 2em;
-  color: var(--color-text-muted);
-  user-select: none;
-  letter-spacing: 0.1em;
-  padding-bottom: 0.2em;
-}
-
-input[part="page-input"] {
-  width: 3em;
-  height: 2em;
-  padding: 0 0.4em;
-  text-align: center;
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
-  font-size: inherit;
-  font-family: inherit;
-  color: var(--color-text-main);
-  background: var(--surface-base);
-  box-shadow: none;
-  -webkit-appearance: none;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-input[part="page-input"]:hover:not(:disabled) {
-  border-color: var(--border-default);
-}
-
-input[part="page-input"]::-webkit-inner-spin-button,
-input[part="page-input"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-input[part="page-input"]:focus {
-  border-color: var(--border-focus);
-  box-shadow: 0 0 0 2px var(--focus-ring);
-}
-
-input[part="page-input"]:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-[part="page-total"] {
-  color: var(--color-text-muted);
-  white-space: nowrap;
-  padding: 0 0.25em;
-  line-height: 2em;
-}
-
-/* ── Borderless variant ──────────────────────────────────────────────── */
-:host([variant='borderless']) button {
-  border-color: transparent;
-}
-
-:host([variant='borderless']) button:hover:not(:disabled) {
-  border-color: transparent;
-}
-
-:host([variant='borderless']) button.active {
-  border-color: transparent;
-}
-
-:host([variant='borderless']) input[part='page-input'] {
-  border-color: transparent;
-}
-
-:host([variant='borderless']) input[part='page-input']:hover:not(:disabled) {
-  border-color: transparent;
-}
-
-:host([variant='borderless']) input[part='page-input']:focus {
-  border-color: var(--border-focus);
-}
-
-/* ── Link variant ────────────────────────────────────────────────────── */
-:host([variant='link']) button {
-  border-color: transparent;
-  background: transparent;
-}
-
-:host([variant='link']) button:hover:not(:disabled) {
-  border-color: transparent;
-  background: transparent;
-  color: var(--color-primary);
-}
-
-:host([variant='link']) button:active:not(:disabled) {
-  background: transparent;
-}
-
-:host([variant='link']) button:focus-visible {
-  border-color: transparent;
-}
-
-:host([variant='link']) button.active {
-  background: transparent;
-  border-color: transparent;
-  color: var(--color-primary);
-  font-weight: 600;
-}
-
-:host([variant='link']) button.active:hover:not(:disabled) {
-  background: transparent;
-  color: var(--color-primary);
-}
-
-:host([variant='link']) input[part='page-input'] {
-  border-color: transparent;
-  border-bottom-color: var(--border-subtle);
-  border-radius: 0;
-}
-
-:host([variant='link']) input[part='page-input']:hover:not(:disabled) {
-  border-color: transparent;
-  border-bottom-color: var(--border-default);
-}
-
-:host([variant='link']) input[part='page-input']:focus {
-  border-color: transparent;
-  border-bottom-color: var(--border-focus);
-  box-shadow: none;
-}
-`;
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp(target, name, desc), target;
-};
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _variant_dec, _showFirstLast_dec, _simple_dec, _disabled_dec, _size_dec, _siblingCount_dec, _pageCount_dec, _total_dec, _pageSize_dec, _page_dec, _a, _init, _page, _pageSize, _total, _pageCount, _siblingCount, _size, _disabled, _simple, _showFirstLast, _variant;
-class Pagination extends (_a = aeicoComponent.AeicoComponent, _page_dec = [aeico.prop({ type: Number })], _pageSize_dec = [aeico.prop({ type: Number })], _total_dec = [aeico.prop({ type: Number })], _pageCount_dec = [aeico.prop({ type: Number })], _siblingCount_dec = [aeico.prop({ type: Number })], _size_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _simple_dec = [aeico.prop({ type: Boolean })], _showFirstLast_dec = [aeico.prop({ type: Boolean })], _variant_dec = [aeico.prop({ type: String })], _a) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _page, __runInitializers(_init, 8, this, 1)), __runInitializers(_init, 11, this);
-    __privateAdd(this, _pageSize, __runInitializers(_init, 12, this, 10)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _total, __runInitializers(_init, 16, this, 0)), __runInitializers(_init, 19, this);
-    __privateAdd(this, _pageCount, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __privateAdd(this, _siblingCount, __runInitializers(_init, 24, this, 1)), __runInitializers(_init, 27, this);
-    __privateAdd(this, _size, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
-    __privateAdd(this, _disabled, __runInitializers(_init, 32, this, false)), __runInitializers(_init, 35, this);
-    __privateAdd(this, _simple, __runInitializers(_init, 36, this, false)), __runInitializers(_init, 39, this);
-    __privateAdd(this, _showFirstLast, __runInitializers(_init, 40, this, false)), __runInitializers(_init, 43, this);
-    __privateAdd(this, _variant, __runInitializers(_init, 44, this)), __runInitializers(_init, 47, this);
-    __publicField(this, "_simpleInput", null);
-    __publicField(this, "_handleItemClick", (e) => {
-      const btn = e.currentTarget;
-      const p = Number(btn.dataset.page);
-      if (!isNaN(p)) this._goToPage(p);
-    });
-    __publicField(this, "_handlePrevClick", () => {
-      this._goToPage(this._currentPage - 1);
-    });
-    __publicField(this, "_handleNextClick", () => {
-      this._goToPage(this._currentPage + 1);
-    });
-    __publicField(this, "_handleFirstClick", () => {
-      this._goToPage(1);
-    });
-    __publicField(this, "_handleLastClick", () => {
-      this._goToPage(this._computedPageCount);
-    });
-    __publicField(this, "_handleSimpleInputChange", (e) => {
-      const input = e.target;
-      const val = parseInt(input.value, 10);
-      if (!isNaN(val)) {
-        this._goToPage(val);
-      }
-      input.value = String(this._currentPage);
-    });
-  }
-  get _computedPageCount() {
-    if (this.pageCount != null) return Math.max(1, this.pageCount);
-    const ps = this.pageSize > 0 ? this.pageSize : 10;
-    return Math.max(1, Math.ceil(this.total / ps));
-  }
-  get _currentPage() {
-    const count = this._computedPageCount;
-    return Math.max(1, Math.min(this.page ?? 1, count));
-  }
-  _getPageItems() {
-    const count = this._computedPageCount;
-    const page = this._currentPage;
-    const sc = Math.max(0, this.siblingCount ?? 1);
-    const rangeStart = Math.max(2, page - sc);
-    const rangeEnd = Math.min(count - 1, page + sc);
-    const showLeftEllipsis = rangeStart > 2;
-    const showRightEllipsis = rangeEnd < count - 1;
-    const items = [];
-    items.push(1);
-    if (count <= 1) return items;
-    if (showLeftEllipsis) {
-      items.push("ellipsis-start");
-    } else {
-      for (let i = 2; i < rangeStart; i++) items.push(i);
-    }
-    for (let i = rangeStart; i <= rangeEnd; i++) items.push(i);
-    if (showRightEllipsis) {
-      items.push("ellipsis-end");
-    } else {
-      for (let i = rangeEnd + 1; i < count; i++) items.push(i);
-    }
-    items.push(count);
-    return items;
-  }
-  _goToPage(page) {
-    const count = this._computedPageCount;
-    const next = Math.max(1, Math.min(count, page));
-    if (next === this._currentPage) return;
-    this.page = next;
-    this.emit("change", { detail: { page: this.page } });
-  }
-  onUpdated() {
-    if (this._simpleInput) {
-      this._simpleInput.value = String(this._currentPage);
-    }
-  }
-  _renderNavBtn(name, iconName, label, disabled, onClick) {
-    const { button, slot, aeIcon } = aeico.tags;
-    button(
-      {
-        key: name,
-        part: name,
-        className: "nav-btn",
-        disabled,
-        "aria-label": label,
-        "@click": onClick
-      },
-      () => {
-        slot({ name }, () => {
-          aeIcon({ name: iconName });
-        });
-      }
-    );
-  }
-  _renderSimpleMode(page, count, disabled) {
-    this._simpleInput = aeico.tags.input({
-      key: "page-input",
-      part: "page-input",
-      type: "number",
-      min: "1",
-      max: String(count),
-      value: String(page),
-      disabled,
-      "aria-label": "Page number",
-      "@change": this._handleSimpleInputChange
-    });
-    aeico.tags.span({ key: "page-total", part: "page-total", textContent: `/ ${count}` });
-  }
-  _renderPageItems(page, disabled) {
-    for (const item of this._getPageItems()) {
-      if (item === "ellipsis-start" || item === "ellipsis-end") {
-        aeico.tags.span({
-          key: item,
-          part: "ellipsis",
-          className: "ellipsis",
-          "aria-hidden": "true",
-          textContent: "…"
-        });
-      } else {
-        const isActive = item === page;
-        aeico.tags.button({
-          key: `item-${item}`,
-          part: isActive ? "item item-active" : "item",
-          className: isActive ? "item active" : "item",
-          disabled,
-          "aria-current": isActive ? "page" : void 0,
-          "aria-label": `Page ${item}`,
-          "data-page": String(item),
-          textContent: String(item),
-          "@click": this._handleItemClick
-        });
-      }
-    }
-  }
-  render() {
-    const count = this._computedPageCount;
-    const page = this._currentPage;
-    const disabled = this.disabled;
-    const isFirst = page <= 1;
-    const isLast = page >= count;
-    return aeico.html(({ nav }) => {
-      nav({ part: "root", role: "navigation", "aria-label": "Pagination" }, () => {
-        if (this.showFirstLast)
-          this._renderNavBtn(
-            "first",
-            "chevrons-left",
-            "First page",
-            disabled || isFirst,
-            this._handleFirstClick
-          );
-        this._renderNavBtn(
-          "prev",
-          "chevron-left",
-          "Previous page",
-          disabled || isFirst,
-          this._handlePrevClick
-        );
-        if (this.simple) {
-          this._renderSimpleMode(page, count, disabled);
-        } else {
-          this._renderPageItems(page, disabled);
-        }
-        this._renderNavBtn(
-          "next",
-          "chevron-right",
-          "Next page",
-          disabled || isLast,
-          this._handleNextClick
-        );
-        if (this.showFirstLast)
-          this._renderNavBtn(
-            "last",
-            "chevrons-right",
-            "Last page",
-            disabled || isLast,
-            this._handleLastClick
-          );
-      });
-    });
-  }
-}
-_init = __decoratorStart(_a);
-_page = /* @__PURE__ */ new WeakMap();
-_pageSize = /* @__PURE__ */ new WeakMap();
-_total = /* @__PURE__ */ new WeakMap();
-_pageCount = /* @__PURE__ */ new WeakMap();
-_siblingCount = /* @__PURE__ */ new WeakMap();
-_size = /* @__PURE__ */ new WeakMap();
-_disabled = /* @__PURE__ */ new WeakMap();
-_simple = /* @__PURE__ */ new WeakMap();
-_showFirstLast = /* @__PURE__ */ new WeakMap();
-_variant = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "page", _page_dec, Pagination, _page);
-__decorateElement(_init, 4, "pageSize", _pageSize_dec, Pagination, _pageSize);
-__decorateElement(_init, 4, "total", _total_dec, Pagination, _total);
-__decorateElement(_init, 4, "pageCount", _pageCount_dec, Pagination, _pageCount);
-__decorateElement(_init, 4, "siblingCount", _siblingCount_dec, Pagination, _siblingCount);
-__decorateElement(_init, 4, "size", _size_dec, Pagination, _size);
-__decorateElement(_init, 4, "disabled", _disabled_dec, Pagination, _disabled);
-__decorateElement(_init, 4, "simple", _simple_dec, Pagination, _simple);
-__decorateElement(_init, 4, "showFirstLast", _showFirstLast_dec, Pagination, _showFirstLast);
-__decorateElement(_init, 4, "variant", _variant_dec, Pagination, _variant);
-__decoratorMetadata(_init, Pagination);
-__publicField(Pagination, "tagName", "pagination");
-__publicField(Pagination, "styles", [variables.variables, size.sizeCSS, paginationStyle]);
-Pagination.register();
-exports.Pagination = Pagination;
-//# sourceMappingURL=pagination.cjs.map