aeico-components 0.1.6 → 0.1.7

package/dist/chunks/number-input.cjs

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

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

@@ -0,0 +1,111 @@
+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

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

package/dist/chunks/pagination.cjs

@@ -6,7 +6,7 @@ const size = require("./size.cjs");
 const paginationStyle = `:host {
   display: inline-flex;
   align-items: center;
-  font-size: var(--size-m);
+  font-size: var(--ae-size-m);
 }
 
 nav {
@@ -29,27 +29,27 @@ button {
   line-height: 1;
   cursor: pointer;
   user-select: none;
-  border-radius: 4px;
-  border: 1px solid var(--border-default);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  border: 1px solid var(--ae-border-default);
   background: transparent;
-  color: var(--color-text-main);
+  color: var(--ae-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);
+  box-shadow: 0 0 0 2px var(--ae-focus-ring);
+  border-color: var(--ae-border-focus);
 }
 
 button:hover:not(:disabled) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  background: var(--color-primary-bg-subtle);
+  border-color: var(--ae-color-primary);
+  color: var(--ae-color-primary);
+  background: var(--ae-color-primary-bg-subtle);
 }
 
 button:active:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary-bg-subtle), var(--color-primary) 10%);
+  background: color-mix(in srgb, var(--ae-color-primary-bg-subtle), var(--ae-color-primary) 10%);
 }
 
 button:disabled {
@@ -58,16 +58,16 @@ button:disabled {
 }
 
 button.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
+  background: var(--ae-color-primary);
+  border-color: var(--ae-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);
+  background: var(--ae-color-primary-hover);
+  border-color: var(--ae-color-primary-hover);
   color: white;
 }
 
@@ -83,7 +83,7 @@ button.nav-btn {
   justify-content: center;
   min-width: 2em;
   height: 2em;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   user-select: none;
   letter-spacing: 0.1em;
   padding-bottom: 0.2em;
@@ -94,12 +94,12 @@ input[part="page-input"] {
   height: 2em;
   padding: 0 0.4em;
   text-align: center;
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
+  border: 1px solid var(--ae-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-border-radius));
   font-size: inherit;
   font-family: inherit;
-  color: var(--color-text-main);
-  background: var(--surface-base);
+  color: var(--ae-color-text-main);
+  background: var(--ae-surface-base);
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: textfield;
@@ -109,7 +109,7 @@ input[part="page-input"] {
 }
 
 input[part="page-input"]:hover:not(:disabled) {
-  border-color: var(--border-default);
+  border-color: var(--ae-border-default);
 }
 
 input[part="page-input"]::-webkit-inner-spin-button,
@@ -119,8 +119,8 @@ input[part="page-input"]::-webkit-outer-spin-button {
 }
 
 input[part="page-input"]:focus {
-  border-color: var(--border-focus);
-  box-shadow: 0 0 0 2px var(--focus-ring);
+  border-color: var(--ae-border-focus);
+  box-shadow: 0 0 0 2px var(--ae-focus-ring);
 }
 
 input[part="page-input"]:disabled {
@@ -129,7 +129,7 @@ input[part="page-input"]:disabled {
 }
 
 [part="page-total"] {
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   white-space: nowrap;
   padding: 0 0.25em;
   line-height: 2em;
@@ -157,7 +157,7 @@ input[part="page-input"]:disabled {
 }
 
 :host([variant='borderless']) input[part='page-input']:focus {
-  border-color: var(--border-focus);
+  border-color: var(--ae-border-focus);
 }
 
 /* ── Link variant ────────────────────────────────────────────────────── */
@@ -169,7 +169,7 @@ input[part="page-input"]:disabled {
 :host([variant='link']) button:hover:not(:disabled) {
   border-color: transparent;
   background: transparent;
-  color: var(--color-primary);
+  color: var(--ae-color-primary);
 }
 
 :host([variant='link']) button:active:not(:disabled) {
@@ -183,29 +183,29 @@ input[part="page-input"]:disabled {
 :host([variant='link']) button.active {
   background: transparent;
   border-color: transparent;
-  color: var(--color-primary);
+  color: var(--ae-color-primary);
   font-weight: 600;
 }
 
 :host([variant='link']) button.active:hover:not(:disabled) {
   background: transparent;
-  color: var(--color-primary);
+  color: var(--ae-color-primary);
 }
 
 :host([variant='link']) input[part='page-input'] {
   border-color: transparent;
-  border-bottom-color: var(--border-subtle);
-  border-radius: 0;
+  border-bottom-color: var(--ae-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
 }
 
 :host([variant='link']) input[part='page-input']:hover:not(:disabled) {
   border-color: transparent;
-  border-bottom-color: var(--border-default);
+  border-bottom-color: var(--ae-border-default);
 }
 
 :host([variant='link']) input[part='page-input']:focus {
   border-color: transparent;
-  border-bottom-color: var(--border-focus);
+  border-bottom-color: var(--ae-border-focus);
   box-shadow: none;
 }
 `;

package/dist/chunks/pagination.js

@@ -5,7 +5,7 @@ import { s as sizeCSS } from "./size.js";
 const paginationStyle = `:host {
   display: inline-flex;
   align-items: center;
-  font-size: var(--size-m);
+  font-size: var(--ae-size-m);
 }
 
 nav {
@@ -28,27 +28,27 @@ button {
   line-height: 1;
   cursor: pointer;
   user-select: none;
-  border-radius: 4px;
-  border: 1px solid var(--border-default);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  border: 1px solid var(--ae-border-default);
   background: transparent;
-  color: var(--color-text-main);
+  color: var(--ae-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);
+  box-shadow: 0 0 0 2px var(--ae-focus-ring);
+  border-color: var(--ae-border-focus);
 }
 
 button:hover:not(:disabled) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  background: var(--color-primary-bg-subtle);
+  border-color: var(--ae-color-primary);
+  color: var(--ae-color-primary);
+  background: var(--ae-color-primary-bg-subtle);
 }
 
 button:active:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary-bg-subtle), var(--color-primary) 10%);
+  background: color-mix(in srgb, var(--ae-color-primary-bg-subtle), var(--ae-color-primary) 10%);
 }
 
 button:disabled {
@@ -57,16 +57,16 @@ button:disabled {
 }
 
 button.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
+  background: var(--ae-color-primary);
+  border-color: var(--ae-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);
+  background: var(--ae-color-primary-hover);
+  border-color: var(--ae-color-primary-hover);
   color: white;
 }
 
@@ -82,7 +82,7 @@ button.nav-btn {
   justify-content: center;
   min-width: 2em;
   height: 2em;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   user-select: none;
   letter-spacing: 0.1em;
   padding-bottom: 0.2em;
@@ -93,12 +93,12 @@ input[part="page-input"] {
   height: 2em;
   padding: 0 0.4em;
   text-align: center;
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
+  border: 1px solid var(--ae-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-border-radius));
   font-size: inherit;
   font-family: inherit;
-  color: var(--color-text-main);
-  background: var(--surface-base);
+  color: var(--ae-color-text-main);
+  background: var(--ae-surface-base);
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: textfield;
@@ -108,7 +108,7 @@ input[part="page-input"] {
 }
 
 input[part="page-input"]:hover:not(:disabled) {
-  border-color: var(--border-default);
+  border-color: var(--ae-border-default);
 }
 
 input[part="page-input"]::-webkit-inner-spin-button,
@@ -118,8 +118,8 @@ input[part="page-input"]::-webkit-outer-spin-button {
 }
 
 input[part="page-input"]:focus {
-  border-color: var(--border-focus);
-  box-shadow: 0 0 0 2px var(--focus-ring);
+  border-color: var(--ae-border-focus);
+  box-shadow: 0 0 0 2px var(--ae-focus-ring);
 }
 
 input[part="page-input"]:disabled {
@@ -128,7 +128,7 @@ input[part="page-input"]:disabled {
 }
 
 [part="page-total"] {
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   white-space: nowrap;
   padding: 0 0.25em;
   line-height: 2em;
@@ -156,7 +156,7 @@ input[part="page-input"]:disabled {
 }
 
 :host([variant='borderless']) input[part='page-input']:focus {
-  border-color: var(--border-focus);
+  border-color: var(--ae-border-focus);
 }
 
 /* ── Link variant ────────────────────────────────────────────────────── */
@@ -168,7 +168,7 @@ input[part="page-input"]:disabled {
 :host([variant='link']) button:hover:not(:disabled) {
   border-color: transparent;
   background: transparent;
-  color: var(--color-primary);
+  color: var(--ae-color-primary);
 }
 
 :host([variant='link']) button:active:not(:disabled) {
@@ -182,29 +182,29 @@ input[part="page-input"]:disabled {
 :host([variant='link']) button.active {
   background: transparent;
   border-color: transparent;
-  color: var(--color-primary);
+  color: var(--ae-color-primary);
   font-weight: 600;
 }
 
 :host([variant='link']) button.active:hover:not(:disabled) {
   background: transparent;
-  color: var(--color-primary);
+  color: var(--ae-color-primary);
 }
 
 :host([variant='link']) input[part='page-input'] {
   border-color: transparent;
-  border-bottom-color: var(--border-subtle);
-  border-radius: 0;
+  border-bottom-color: var(--ae-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
 }
 
 :host([variant='link']) input[part='page-input']:hover:not(:disabled) {
   border-color: transparent;
-  border-bottom-color: var(--border-default);
+  border-bottom-color: var(--ae-border-default);
 }
 
 :host([variant='link']) input[part='page-input']:focus {
   border-color: transparent;
-  border-bottom-color: var(--border-focus);
+  border-bottom-color: var(--ae-border-focus);
   box-shadow: none;
 }
 `;

package/dist/chunks/progress-bar.cjs

@@ -3,7 +3,7 @@ const aeico = require("aeico");
 const aeicoComponent = require("./aeico-component.cjs");
 const variables = require("./variables.cjs");
 const color = require("./color.cjs");
-const style = ":host {\n  display: block;\n  --progress-height: 8px;\n  --color-solid: var(--color-primary);\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
+const style = ":host {\n  display: block;\n  --progress-height: 8px;\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--ae-border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--ae-color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/progress-bar.js

@@ -2,7 +2,7 @@ import { prop, html } from "aeico";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { v as variables } from "./variables.js";
 import { c as colorCSS } from "./color.js";
-const style = ":host {\n  display: block;\n  --progress-height: 8px;\n  --color-solid: var(--color-primary);\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
+const style = ":host {\n  display: block;\n  --progress-height: 8px;\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--ae-border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--ae-color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;