aeico-components 0.1.7 → 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(--ae-surface-base));\n  color: var(--ae-navbar-color, var(--ae-color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--ae-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: var(--ae-border-radius, var(--ae-radius-sm));\n  --ae-navbar-link-hover-color: var(--ae-color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--ae-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(--ae-color-solid);\n  --ae-navbar-color: var(--ae-color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--ae-color-on-solid);\n  --ae-navbar-link-active-color: var(--ae-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(--ae-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(--ae-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: var(--ae-border-radius, var(--ae-radius-sm));\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(--ae-surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--ae-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: var(--ae-border-radius, var(--ae-radius-sm));\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/number-input.cjs

@@ -1,110 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const actionButton = require("./action-button.cjs");
-const aeico = require("aeico");
-const variables = require("./variables.cjs");
-const size = require("./size.cjs");
-const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  transition: var(--input-transition);\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n/* Hide number spinner arrows in WebKit browsers */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Number stepper controls (right side, integrated, horizontal) */\n.number-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n  border: var(--input-border-width) solid var(--ae-border-subtle);\n  border-radius: 0 var(--ae-border-radius, var(--ae-radius-xs)) var(--ae-border-radius, var(--ae-radius-xs)) 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: var(--input-transition);\n  background: var(--ae-surface-base);\n  position: relative;\n  z-index: 1;\n  align-self: stretch;\n}\n\n.number-btn {\n  border: none;\n  background: transparent;\n  color: var(--ae-color-text-muted);\n  font-size: 0.875em;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5em;\n  transition: background 0.12s;\n}\n\n.number-btn:hover:not(:disabled) {\n  background: var(--ae-surface-raised);\n}\n\n.number-btn:active:not(:disabled) {\n  background: var(--ae-surface-raised);\n}\n\n.number-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.number-btn-increment {\n  border-right: var(--input-border-width) solid var(--ae-border-subtle);\n}\n\n.input-container:has(input:focus) .number-controls {\n  border-color: var(--ae-border-focus);\n}\n\n.input-container:has(input:hover:not(:focus)) .number-controls {\n  border-color: var(--ae-border-default);\n}\n\n:host(:has(.number-controls)) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n:host(:has(.action-controls)) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.number-controls ~ .action-controls {\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n}\n\n.input-container:has(.number-controls):has(.action-controls) .number-controls {\n  border-right: none;\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.input-container:has(.number-controls) ~ .action-controls,\n.input-container:has(.action-controls) .number-controls {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.input-container:has(.number-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n";
-class NumberInput extends actionButton.AeicoField {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "boundOnIncrement", () => {
-      const current = this.getValue() || 0;
-      const step = this.step ?? 1;
-      let next = current + step;
-      if (this.max != null && next > this.max) {
-        next = this.max;
-      }
-      this.setValue(next, { silent: false, action: "change" });
-    });
-    __publicField(this, "boundOnDecrement", () => {
-      const current = this.getValue() || 0;
-      const step = this.step ?? 1;
-      let next = current - step;
-      if (this.min != null && next < this.min) {
-        next = this.min;
-      }
-      this.setValue(next, { silent: false, action: "change" });
-    });
-  }
-  render() {
-    return aeico.html(({ div, input, button }) => {
-      const id = this.getFieldId();
-      this.renderLabel(id);
-      div({ className: "input-container field-body" }, () => {
-        this.fieldElement = input({
-          id,
-          type: "number",
-          placeholder: this.placeholder || "",
-          required: Boolean(this.required),
-          disabled: Boolean(this.disabled),
-          min: this.min != null ? String(this.min) : void 0,
-          max: this.max != null ? String(this.max) : void 0,
-          step: this.step != null ? String(this.step) : void 0,
-          "@input": this.boundOnChange
-        });
-        if (this.controls) {
-          div({ className: "number-controls" }, () => {
-            button({
-              className: "number-btn number-btn-increment",
-              textContent: "+",
-              disabled: Boolean(this.disabled),
-              "@click": this.boundOnIncrement
-            });
-            button({
-              className: "number-btn number-btn-decrement",
-              textContent: "-",
-              disabled: Boolean(this.disabled),
-              "@click": this.boundOnDecrement
-            });
-          });
-        }
-        this.renderActionButtons();
-      });
-      this.renderHelperText();
-      this.renderError();
-      if (this.fieldElement && this.value != null) {
-        this.fieldElement.value = String(this.value);
-      }
-    });
-  }
-  /**
-   * Get current value as number
-   */
-  getValue() {
-    if (!this.fieldElement) return 0;
-    const val = this.fieldElement.value;
-    if (val === "") return 0;
-    const num = parseFloat(val);
-    return isNaN(num) ? 0 : num;
-  }
-  /**
-   * Write value to the input element (DOM only)
-   */
-  writeValue(value) {
-    if (this.fieldElement) {
-      this.fieldElement.value = value != null ? String(value) : "";
-    }
-  }
-  /**
-   * Get event payload for change events
-   */
-  getEventPayload(value, oldValue, action) {
-    return { value, oldValue, action };
-  }
-}
-__publicField(NumberInput, "tagName", "number-input");
-__publicField(NumberInput, "props", {
-  placeholder: { type: String },
-  min: { type: Number },
-  max: { type: Number },
-  step: { type: Number },
-  controls: { type: Boolean }
-});
-__publicField(NumberInput, "styles", [variables.variables, size.sizeCSS, actionButton.fieldLabelCSS, actionButton.actionButtonCSS, style]);
-NumberInput.register();
-exports.NumberInput = NumberInput;
-//# sourceMappingURL=number-input.cjs.map

package/dist/chunks/number-input.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"number-input.cjs","sources":["../../src/number-input/number-input.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/number-input.css?inline';\n\nclass NumberInput extends AeicoField<number> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'number-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    controls: { type: Boolean },\n  };\n\n  declare placeholder?: string;\n  declare min?: number;\n  declare max?: number;\n  declare step?: number;\n  declare controls?: boolean;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  render() {\n    return html(({ div, input, button }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'input-container field-body' }, () => {\n        this.fieldElement = input({\n          id,\n          type: 'number',\n          placeholder: this.placeholder || '',\n          required: Boolean(this.required),\n          disabled: Boolean(this.disabled),\n          min: this.min != null ? String(this.min) : undefined,\n          max: this.max != null ? String(this.max) : undefined,\n          step: this.step != null ? String(this.step) : undefined,\n          '@input': this.boundOnChange,\n        });\n\n        if (this.controls) {\n          div({ className: 'number-controls' }, () => {\n            button({\n              className: 'number-btn number-btn-increment',\n              textContent: '+',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnIncrement,\n            });\n            button({\n              className: 'number-btn number-btn-decrement',\n              textContent: '-',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnDecrement,\n            });\n          });\n        }\n\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n    });\n  }\n\n  protected readonly boundOnIncrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current + step;\n    if (this.max != null && next > this.max) {\n      next = this.max;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  protected readonly boundOnDecrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current - step;\n    if (this.min != null && next < this.min) {\n      next = this.min;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  /**\n   * Get current value as number\n   */\n  protected getValue(): number {\n    if (!this.fieldElement) return 0;\n    const val = this.fieldElement.value;\n    if (val === '') return 0;\n    const num = parseFloat(val);\n    return isNaN(num) ? 0 : num;\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: number): void {\n    if (this.fieldElement) {\n      this.fieldElement.value = value != null ? String(value) : '';\n    }\n  }\n\n  /**\n   * Get event payload for change events\n   */\n  protected getEventPayload(\n    value: number,\n    oldValue: number,\n    action: import('../aeico-field').FieldAction,\n  ): Record<string, unknown> {\n    return { value, oldValue, action };\n  }\n}\n\nNumberInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-number-input': NumberInput;\n  }\n}\n\nexport default NumberInput;\nexport type NumberInputProps = InferProps<typeof NumberInput>;\n"],"names":["AeicoField","html","variables","sizeCSS","fieldLabelCSS","actionButtonCSS"],"mappings":"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"}

package/dist/chunks/number-input.js

@@ -1,111 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
-import { html } from "aeico";
-import { v as variables } from "./variables.js";
-import { s as sizeCSS } from "./size.js";
-const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  transition: var(--input-transition);\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n/* Hide number spinner arrows in WebKit browsers */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Number stepper controls (right side, integrated, horizontal) */\n.number-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n  border: var(--input-border-width) solid var(--ae-border-subtle);\n  border-radius: 0 var(--ae-border-radius, var(--ae-radius-xs)) var(--ae-border-radius, var(--ae-radius-xs)) 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: var(--input-transition);\n  background: var(--ae-surface-base);\n  position: relative;\n  z-index: 1;\n  align-self: stretch;\n}\n\n.number-btn {\n  border: none;\n  background: transparent;\n  color: var(--ae-color-text-muted);\n  font-size: 0.875em;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5em;\n  transition: background 0.12s;\n}\n\n.number-btn:hover:not(:disabled) {\n  background: var(--ae-surface-raised);\n}\n\n.number-btn:active:not(:disabled) {\n  background: var(--ae-surface-raised);\n}\n\n.number-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.number-btn-increment {\n  border-right: var(--input-border-width) solid var(--ae-border-subtle);\n}\n\n.input-container:has(input:focus) .number-controls {\n  border-color: var(--ae-border-focus);\n}\n\n.input-container:has(input:hover:not(:focus)) .number-controls {\n  border-color: var(--ae-border-default);\n}\n\n:host(:has(.number-controls)) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n:host(:has(.action-controls)) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.number-controls ~ .action-controls {\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n}\n\n.input-container:has(.number-controls):has(.action-controls) .number-controls {\n  border-right: none;\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.input-container:has(.number-controls) ~ .action-controls,\n.input-container:has(.action-controls) .number-controls {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.input-container:has(.number-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n";
-class NumberInput extends AeicoField {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "boundOnIncrement", () => {
-      const current = this.getValue() || 0;
-      const step = this.step ?? 1;
-      let next = current + step;
-      if (this.max != null && next > this.max) {
-        next = this.max;
-      }
-      this.setValue(next, { silent: false, action: "change" });
-    });
-    __publicField(this, "boundOnDecrement", () => {
-      const current = this.getValue() || 0;
-      const step = this.step ?? 1;
-      let next = current - step;
-      if (this.min != null && next < this.min) {
-        next = this.min;
-      }
-      this.setValue(next, { silent: false, action: "change" });
-    });
-  }
-  render() {
-    return html(({ div, input, button }) => {
-      const id = this.getFieldId();
-      this.renderLabel(id);
-      div({ className: "input-container field-body" }, () => {
-        this.fieldElement = input({
-          id,
-          type: "number",
-          placeholder: this.placeholder || "",
-          required: Boolean(this.required),
-          disabled: Boolean(this.disabled),
-          min: this.min != null ? String(this.min) : void 0,
-          max: this.max != null ? String(this.max) : void 0,
-          step: this.step != null ? String(this.step) : void 0,
-          "@input": this.boundOnChange
-        });
-        if (this.controls) {
-          div({ className: "number-controls" }, () => {
-            button({
-              className: "number-btn number-btn-increment",
-              textContent: "+",
-              disabled: Boolean(this.disabled),
-              "@click": this.boundOnIncrement
-            });
-            button({
-              className: "number-btn number-btn-decrement",
-              textContent: "-",
-              disabled: Boolean(this.disabled),
-              "@click": this.boundOnDecrement
-            });
-          });
-        }
-        this.renderActionButtons();
-      });
-      this.renderHelperText();
-      this.renderError();
-      if (this.fieldElement && this.value != null) {
-        this.fieldElement.value = String(this.value);
-      }
-    });
-  }
-  /**
-   * Get current value as number
-   */
-  getValue() {
-    if (!this.fieldElement) return 0;
-    const val = this.fieldElement.value;
-    if (val === "") return 0;
-    const num = parseFloat(val);
-    return isNaN(num) ? 0 : num;
-  }
-  /**
-   * Write value to the input element (DOM only)
-   */
-  writeValue(value) {
-    if (this.fieldElement) {
-      this.fieldElement.value = value != null ? String(value) : "";
-    }
-  }
-  /**
-   * Get event payload for change events
-   */
-  getEventPayload(value, oldValue, action) {
-    return { value, oldValue, action };
-  }
-}
-__publicField(NumberInput, "tagName", "number-input");
-__publicField(NumberInput, "props", {
-  placeholder: { type: String },
-  min: { type: Number },
-  max: { type: Number },
-  step: { type: Number },
-  controls: { type: Boolean }
-});
-__publicField(NumberInput, "styles", [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style]);
-NumberInput.register();
-export {
-  NumberInput as N
-};
-//# sourceMappingURL=number-input.js.map

package/dist/chunks/number-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"number-input.js","sources":["../../src/number-input/number-input.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/number-input.css?inline';\n\nclass NumberInput extends AeicoField<number> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'number-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    controls: { type: Boolean },\n  };\n\n  declare placeholder?: string;\n  declare min?: number;\n  declare max?: number;\n  declare step?: number;\n  declare controls?: boolean;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  render() {\n    return html(({ div, input, button }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'input-container field-body' }, () => {\n        this.fieldElement = input({\n          id,\n          type: 'number',\n          placeholder: this.placeholder || '',\n          required: Boolean(this.required),\n          disabled: Boolean(this.disabled),\n          min: this.min != null ? String(this.min) : undefined,\n          max: this.max != null ? String(this.max) : undefined,\n          step: this.step != null ? String(this.step) : undefined,\n          '@input': this.boundOnChange,\n        });\n\n        if (this.controls) {\n          div({ className: 'number-controls' }, () => {\n            button({\n              className: 'number-btn number-btn-increment',\n              textContent: '+',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnIncrement,\n            });\n            button({\n              className: 'number-btn number-btn-decrement',\n              textContent: '-',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnDecrement,\n            });\n          });\n        }\n\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n    });\n  }\n\n  protected readonly boundOnIncrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current + step;\n    if (this.max != null && next > this.max) {\n      next = this.max;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  protected readonly boundOnDecrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current - step;\n    if (this.min != null && next < this.min) {\n      next = this.min;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  /**\n   * Get current value as number\n   */\n  protected getValue(): number {\n    if (!this.fieldElement) return 0;\n    const val = this.fieldElement.value;\n    if (val === '') return 0;\n    const num = parseFloat(val);\n    return isNaN(num) ? 0 : num;\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: number): void {\n    if (this.fieldElement) {\n      this.fieldElement.value = value != null ? String(value) : '';\n    }\n  }\n\n  /**\n   * Get event payload for change events\n   */\n  protected getEventPayload(\n    value: number,\n    oldValue: number,\n    action: import('../aeico-field').FieldAction,\n  ): Record<string, unknown> {\n    return { value, oldValue, action };\n  }\n}\n\nNumberInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-number-input': NumberInput;\n  }\n}\n\nexport default NumberInput;\nexport type NumberInputProps = InferProps<typeof NumberInput>;\n"],"names":[],"mappings":"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"}