aeico-components 0.1.2 → 0.1.4

package/dist/chunks/button.js

@@ -0,0 +1,352 @@
+import { s as styleVariables } from "./variables.js";
+import { s as sizeCSS } from "./size.js";
+import { c as colorCSS } from "./color.js";
+import { A as AeicoComponent } from "./aeico-component.js";
+import { prop, html } from "aeico";
+const buttonStyle = `:host {
+  display: inline-block;
+  --btn-solid-bg:          var(--color-solid);
+  --btn-solid-bg-hover:    var(--color-solid-hover);
+  --btn-solid-bg-active:   var(--color-solid-active);
+  --btn-solid-color:       var(--color-on-solid);
+  --btn-solid-color-hover: var(--color-on-solid-hover);
+  --btn-border:            var(--color-border);
+  --btn-border-hover:      var(--color-border-hover);
+  --btn-accent:            var(--color-accent);
+  --btn-accent-hover:      var(--color-accent-hover);
+  --btn-subtle-bg:         var(--color-subtle);
+  --btn-subtle-bg-hover:   var(--color-subtle-hover);
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+  position: relative;
+  padding: 0.429em 1.071em;
+  font-size: 1em;
+  line-height: 1.5;
+  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
+  min-width: 4.571em;
+  height: 2.286em;
+  width: 100%;
+
+  background:   var(--btn-solid-bg);
+  border: 1px solid var(--btn-solid-bg);
+  color:        var(--btn-solid-color);
+}
+
+button:focus  { outline: none; }
+button:active { transform: translateY(1px); }
+
+button:hover:not(:disabled) {
+  background:   var(--btn-solid-bg-hover);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+}
+
+button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+
+/* --- Variants --- */
+
+:host([variant="outlined"]) button {
+  background:   transparent;
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+
+:host([variant="outlined"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+
+:host([variant="outlined"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="subtle"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: transparent;
+  color:        var(--btn-accent);
+}
+
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+  color:      var(--btn-accent-hover);
+}
+
+:host([variant="subtle"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="faint"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+
+:host([variant="faint"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg-hover);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+
+:host([variant="faint"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="text"]) button {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--btn-accent);
+  min-width:     auto;
+  padding-left:  4px;
+  padding-right: 4px;
+}
+
+:host([variant="text"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg);
+  color:      var(--btn-accent-hover);
+}
+
+:host([variant="text"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+/* Icon-only: single ae-icon child → square compact layout */
+:host([icon-only]) {
+  display: inline-flex;
+}
+
+:host([icon-only]:not([size])) {
+  font-size: var(--size-m);
+}
+
+:host([icon-only]) button {
+  padding:   0;
+  min-width: auto;
+  width:     2.286em;
+  height:    2.286em;
+  line-height: 1;
+}
+
+:host([icon-only]) ::slotted(ae-icon) {
+  font-size: 1.5em;
+}
+
+:host([active]) button {
+  background:   var(--btn-solid-bg-active);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+}
+
+.btn-icon {
+  padding: 0;
+  min-width: auto;
+  width: 2.286em;
+  height: 2.286em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.btn-icon.btn-lg {
+  width: 2.857em;
+  height: 2.857em;
+}
+
+.btn-circle {
+  border-radius: 50%;
+}
+
+:host([block]) {
+  display: block;
+}
+
+button.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent;
+}
+
+button.btn-loading::before {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: btn-spin 0.6s linear infinite;
+  color: currentColor;
+  opacity: 0.8;
+}
+
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-icon-left {
+  margin-right: -2px;
+}
+
+.btn-icon-right {
+  margin-left: -2px;
+}
+
+`;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+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 it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1;
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  target = target.prototype, k < 5;
+  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])(void 0, ctx), done._ = 1;
+    __expectFn(it) && initializers.unshift(it);
+  }
+  return target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var _block_dec, _active_dec, _type_dec, _disabled_dec, _size_dec, _variant_dec, _color_dec, _a, _init;
+class Button extends (_a = AeicoComponent, _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _type_dec = [prop({ type: String })], _active_dec = [prop({ type: Boolean })], _block_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "color", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "variant", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "size", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "disabled", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "type", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "active", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "block", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
+    __publicField(this, "buttonElement", null);
+    __publicField(this, "_autoAriaLabel", false);
+    __publicField(this, "_handleSlotChange", () => {
+      var _a2;
+      const slot = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("slot:not([name])");
+      const nodes = (slot == null ? void 0 : slot.assignedNodes()) ?? [];
+      const elements = nodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
+      const hasText = nodes.some(
+        (n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== ""
+      );
+      const isIconOnly = !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === "ae-icon";
+      if (isIconOnly) {
+        this.setAttribute("icon-only", "");
+        if (!this.hasAttribute("aria-label") || this._autoAriaLabel) {
+          this.setAttribute("aria-label", elements[0].getAttribute("name") ?? "");
+          this._autoAriaLabel = true;
+        }
+      } else {
+        this.removeAttribute("icon-only");
+        if (this._autoAriaLabel) {
+          this.removeAttribute("aria-label");
+          this._autoAriaLabel = false;
+        }
+      }
+    });
+  }
+  onMounted() {
+    var _a2;
+    const slot = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("slot:not([name])");
+    if (slot) this.listen(slot, "slotchange", this._handleSlotChange);
+    this._handleSlotChange();
+  }
+  render() {
+    return html(({ button, slot }) => {
+      this.buttonElement = button(
+        {
+          type: this.type || "button",
+          disabled: this.disabled,
+          part: "button",
+          "aria-pressed": this.active,
+          "aria-disabled": this.disabled
+        },
+        () => {
+          slot();
+        }
+      );
+    });
+  }
+  /**
+   * Programmatically click the button
+   */
+  click() {
+    if (!this.disabled && this.buttonElement) {
+      this.buttonElement.click();
+    }
+  }
+  /**
+   * Focus the button
+   */
+  focus() {
+    if (this.buttonElement) {
+      this.buttonElement.focus();
+    }
+  }
+  /**
+   * Blur the button
+   */
+  blur() {
+    if (this.buttonElement) {
+      this.buttonElement.blur();
+    }
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 5, "color", _color_dec, Button);
+__decorateElement(_init, 5, "variant", _variant_dec, Button);
+__decorateElement(_init, 5, "size", _size_dec, Button);
+__decorateElement(_init, 5, "disabled", _disabled_dec, Button);
+__decorateElement(_init, 5, "type", _type_dec, Button);
+__decorateElement(_init, 5, "active", _active_dec, Button);
+__decorateElement(_init, 5, "block", _block_dec, Button);
+__decoratorMetadata(_init, Button);
+__publicField(Button, "styles", [styleVariables, sizeCSS, colorCSS, buttonStyle]);
+Button.register();
+export {
+  Button as B
+};
+//# sourceMappingURL=button.js.map

package/dist/chunks/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../src/button/button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport buttonStyle from '../styles/components/button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n *   variant: 'primary',\n *   size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n  @prop({ type: String })\n  color?: ButtonColor;\n\n  @prop({ type: String })\n  variant?: ButtonVariant;\n\n  @prop({ type: String })\n  size?: ButtonSize;\n\n  @prop({ type: Boolean })\n  disabled?: boolean;\n\n  @prop({ type: String })\n  type?: 'button' | 'submit' | 'reset';\n\n  @prop({ type: Boolean })\n  active?: boolean;\n\n  @prop({ type: Boolean })\n  block?: boolean;\n\n  private buttonElement: HTMLButtonElement | null = null;\n  private _autoAriaLabel = false;\n\n  protected onMounted() {\n    const slot = this.shadowRoot?.querySelector('slot:not([name])');\n    if (slot) this.listen(slot, 'slotchange', this._handleSlotChange);\n    this._handleSlotChange();\n  }\n\n  private _handleSlotChange = () => {\n    const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    const nodes = slot?.assignedNodes() ?? [];\n    // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n    const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n    const hasText = nodes.some(\n      (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n    );\n    const isIconOnly =\n      !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n    if (isIconOnly) {\n      this.setAttribute('icon-only', '');\n      if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n        this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n        this._autoAriaLabel = true;\n      }\n    } else {\n      this.removeAttribute('icon-only');\n      if (this._autoAriaLabel) {\n        this.removeAttribute('aria-label');\n        this._autoAriaLabel = false;\n      }\n    }\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      this.buttonElement = button(\n        {\n          type: this.type || 'button',\n          disabled: this.disabled,\n          part: 'button',\n          'aria-pressed': this.active,\n          'aria-disabled': this.disabled,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n\n  /**\n   * Programmatically click the button\n   */\n  click() {\n    if (!this.disabled && this.buttonElement) {\n      this.buttonElement.click();\n    }\n  }\n\n  /**\n   * Focus the button\n   */\n  focus() {\n    if (this.buttonElement) {\n      this.buttonElement.focus();\n    }\n  }\n\n  /**\n   * Blur the button\n   */\n  blur() {\n    if (this.buttonElement) {\n      this.buttonElement.blur();\n    }\n  }\n}\n\nButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-button': Button;\n  }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\n"],"names":["_a"],"mappings":"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"}

package/dist/chunks/card.cjs

@@ -0,0 +1,93 @@
+"use strict";
+const variables = require("./variables.cjs");
+const color = require("./color.cjs");
+const aeicoComponent = require("./aeico-component.cjs");
+const aeico = require("aeico");
+const cardStyle = ':host {\n  display: block;\n\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n  --card-border:  transparent;\n  --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n  --card-bg:      var(--color-solid);\n  --card-color:   var(--color-on-solid);\n  --card-border:  var(--color-solid);\n  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n  --card-bg:      transparent;\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border);\n  --card-divider: var(--color-border-subtle);\n}\n\n.card {\n  border: 1px solid var(--card-border);\n  border-radius: 8px;\n  background: var(--card-bg);\n  color: var(--card-color);\n  overflow: hidden;\n}\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--card-divider);\n}\n\n.body {\n  padding: 16px;\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 _variant_dec, _color_dec, _a, _init, _color, _variant;
+class Card extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _color, __runInitializers(_init, 8, this, "default")), __runInitializers(_init, 11, this);
+    __privateAdd(this, _variant, __runInitializers(_init, 12, this, "filled")), __runInitializers(_init, 15, this);
+  }
+  render() {
+    return aeico.html(({ div, header, footer, slot }) => {
+      div({ className: "card", part: "card" }, () => {
+        header({ className: "header", part: "header" }, () => {
+          slot({ name: "header", "@slotchange": (e) => this._onHeaderSlotChange(e) });
+        });
+        div({ className: "body", part: "body" }, () => {
+          slot();
+        });
+        footer({ className: "footer", part: "footer" }, () => {
+          slot({ name: "footer", "@slotchange": (e) => this._onFooterSlotChange(e) });
+        });
+      });
+    });
+  }
+  _onHeaderSlotChange(e) {
+    const slot = e.target;
+    this.toggleAttribute("has-header", slot.assignedNodes({ flatten: true }).length > 0);
+  }
+  _onFooterSlotChange(e) {
+    const slot = e.target;
+    this.toggleAttribute("has-footer", slot.assignedNodes({ flatten: true }).length > 0);
+  }
+}
+_init = __decoratorStart(_a);
+_color = /* @__PURE__ */ new WeakMap();
+_variant = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "color", _color_dec, Card, _color);
+__decorateElement(_init, 4, "variant", _variant_dec, Card, _variant);
+__decoratorMetadata(_init, Card);
+__publicField(Card, "tagName", "card");
+__publicField(Card, "styles", [variables.styleVariables, color.colorCSS, cardStyle]);
+Card.register();
+exports.Card = Card;
+//# sourceMappingURL=card.cjs.map

package/dist/chunks/card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.cjs","sources":["../../src/card/card.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport cardStyle from '../styles/components/card.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { CardVariant, CardColor } from './defines';\nimport { prop } from 'aeico';\n\nclass Card extends AeicoComponent {\n  static tagName = 'card';\n\n  protected static styles = [styleVariables, colorCSS, cardStyle];\n\n  @prop({ type: String })\n  accessor color: CardColor = 'default';\n\n  @prop({ type: String })\n  accessor variant: CardVariant = 'filled';\n\n  protected render() {\n    return html(({ div, header, footer, slot }) => {\n      div({ className: 'card', part: 'card' }, () => {\n        header({ className: 'header', part: 'header' }, () => {\n          slot({ name: 'header', '@slotchange': (e: Event) => this._onHeaderSlotChange(e) });\n        });\n        div({ className: 'body', part: 'body' }, () => {\n          slot();\n        });\n        footer({ className: 'footer', part: 'footer' }, () => {\n          slot({ name: 'footer', '@slotchange': (e: Event) => this._onFooterSlotChange(e) });\n        });\n      });\n    });\n  }\n\n  private _onHeaderSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.toggleAttribute('has-header', slot.assignedNodes({ flatten: true }).length > 0);\n  }\n\n  private _onFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.toggleAttribute('has-footer', slot.assignedNodes({ flatten: true }).length > 0);\n  }\n}\n\nCard.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-card': Card;\n  }\n}\n\nexport default Card;\nexport type CardProps = InferProps<typeof Card>;\n"],"names":["AeicoComponent","prop","html","styleVariables","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,cAAA,YAAA,IAAA,OAAA,QAAA;AASA,MAAM,cAAa,KAAAA,+BAKjB,aAAA,CAACC,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,WAAK,EAAE,MAAM,OAAA,CAAQ,IARL,IAAe;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAME,iBAAA,MAAS,QAAmB,kBAA5B,OAAA,GAAA,MAA4B,SAAA,CAAA,GAA5B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAuB,kBAAhC,OAAA,IAAA,MAAgC,QAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,KAAK,QAAQ,QAAQ,WAAW;AAC7C,UAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AACD,YAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAA;AAAA,QACF,CAAC;AACD,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AACF;AApCA,QAAA,iBAAA,EAAA;AAMW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAHT,kBAAA,OAAA,GAAS,SADT,YALI,MAMK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cARI,MASK,QAAA;AATX,oBAAA,OAAM,IAAA;AACJ,cADI,MACG,WAAU,MAAA;AAEjB,cAHI,MAGa,UAAS,CAACC,UAAAA,gBAAgBC,MAAAA,UAAU,SAAS,CAAA;AAmChE,KAAK,SAAA;;"}

package/dist/chunks/card.js

@@ -0,0 +1,94 @@
+import { s as styleVariables } from "./variables.js";
+import { c as colorCSS } from "./color.js";
+import { A as AeicoComponent } from "./aeico-component.js";
+import { prop, html } from "aeico";
+const cardStyle = ':host {\n  display: block;\n\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n  --card-border:  transparent;\n  --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n  --card-bg:      var(--color-solid);\n  --card-color:   var(--color-on-solid);\n  --card-border:  var(--color-solid);\n  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n  --card-bg:      transparent;\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border);\n  --card-divider: var(--color-border-subtle);\n}\n\n.card {\n  border: 1px solid var(--card-border);\n  border-radius: 8px;\n  background: var(--card-bg);\n  color: var(--card-color);\n  overflow: hidden;\n}\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--card-divider);\n}\n\n.body {\n  padding: 16px;\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 _variant_dec, _color_dec, _a, _init, _color, _variant;
+class Card extends (_a = AeicoComponent, _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _color, __runInitializers(_init, 8, this, "default")), __runInitializers(_init, 11, this);
+    __privateAdd(this, _variant, __runInitializers(_init, 12, this, "filled")), __runInitializers(_init, 15, this);
+  }
+  render() {
+    return html(({ div, header, footer, slot }) => {
+      div({ className: "card", part: "card" }, () => {
+        header({ className: "header", part: "header" }, () => {
+          slot({ name: "header", "@slotchange": (e) => this._onHeaderSlotChange(e) });
+        });
+        div({ className: "body", part: "body" }, () => {
+          slot();
+        });
+        footer({ className: "footer", part: "footer" }, () => {
+          slot({ name: "footer", "@slotchange": (e) => this._onFooterSlotChange(e) });
+        });
+      });
+    });
+  }
+  _onHeaderSlotChange(e) {
+    const slot = e.target;
+    this.toggleAttribute("has-header", slot.assignedNodes({ flatten: true }).length > 0);
+  }
+  _onFooterSlotChange(e) {
+    const slot = e.target;
+    this.toggleAttribute("has-footer", slot.assignedNodes({ flatten: true }).length > 0);
+  }
+}
+_init = __decoratorStart(_a);
+_color = /* @__PURE__ */ new WeakMap();
+_variant = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "color", _color_dec, Card, _color);
+__decorateElement(_init, 4, "variant", _variant_dec, Card, _variant);
+__decoratorMetadata(_init, Card);
+__publicField(Card, "tagName", "card");
+__publicField(Card, "styles", [styleVariables, colorCSS, cardStyle]);
+Card.register();
+export {
+  Card as C
+};
+//# sourceMappingURL=card.js.map

package/dist/chunks/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport cardStyle from '../styles/components/card.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { CardVariant, CardColor } from './defines';\nimport { prop } from 'aeico';\n\nclass Card extends AeicoComponent {\n  static tagName = 'card';\n\n  protected static styles = [styleVariables, colorCSS, cardStyle];\n\n  @prop({ type: String })\n  accessor color: CardColor = 'default';\n\n  @prop({ type: String })\n  accessor variant: CardVariant = 'filled';\n\n  protected render() {\n    return html(({ div, header, footer, slot }) => {\n      div({ className: 'card', part: 'card' }, () => {\n        header({ className: 'header', part: 'header' }, () => {\n          slot({ name: 'header', '@slotchange': (e: Event) => this._onHeaderSlotChange(e) });\n        });\n        div({ className: 'body', part: 'body' }, () => {\n          slot();\n        });\n        footer({ className: 'footer', part: 'footer' }, () => {\n          slot({ name: 'footer', '@slotchange': (e: Event) => this._onFooterSlotChange(e) });\n        });\n      });\n    });\n  }\n\n  private _onHeaderSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.toggleAttribute('has-header', slot.assignedNodes({ flatten: true }).length > 0);\n  }\n\n  private _onFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.toggleAttribute('has-footer', slot.assignedNodes({ flatten: true }).length > 0);\n  }\n}\n\nCard.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-card': Card;\n  }\n}\n\nexport default Card;\nexport type CardProps = InferProps<typeof Card>;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,cAAA,YAAA,IAAA,OAAA,QAAA;AASA,MAAM,cAAa,KAAA,gBAKjB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IARL,IAAe;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAME,iBAAA,MAAS,QAAmB,kBAA5B,OAAA,GAAA,MAA4B,SAAA,CAAA,GAA5B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAuB,kBAAhC,OAAA,IAAA,MAAgC,QAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,KAAK,QAAQ,QAAQ,WAAW;AAC7C,UAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AACD,YAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAA;AAAA,QACF,CAAC;AACD,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AACF;AApCA,QAAA,iBAAA,EAAA;AAMW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAHT,kBAAA,OAAA,GAAS,SADT,YALI,MAMK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cARI,MASK,QAAA;AATX,oBAAA,OAAM,IAAA;AACJ,cADI,MACG,WAAU,MAAA;AAEjB,cAHI,MAGa,UAAS,CAAC,gBAAgB,UAAU,SAAS,CAAA;AAmChE,KAAK,SAAA;"}

package/dist/chunks/checkbox.cjs

@@ -0,0 +1,73 @@
+"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 aeicoField = require("./aeico-field.cjs");
+const aeico = require("aeico");
+const variables = require("./variables.cjs");
+const size = require("./size.cjs");
+const color = require("./color.cjs");
+const styles = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout */\n  --checkbox-field-gap: 4px;\n\n  /* Checkbox */\n  --checkbox-size: 1.167em;\n  --checkbox-border-width: 1px;\n  --checkbox-border-radius: 2px;\n  --checkbox-border-color: var(--border-subtle);\n  --checkbox-bg: var(--surface-base);\n  --checkbox-accent-color: var(--color-solid);\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: center;\n  gap: var(--checkbox-field-gap);\n  width: 100%;\n}\n\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.field-input {\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  cursor: pointer;\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  background: var(--checkbox-bg);\n  accent-color: var(--checkbox-accent-color);\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.field-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* action buttons */\n.reset-btn,\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n";
+class Checkbox extends aeicoField.AeicoField {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+  }
+  getValue() {
+    var _a;
+    return ((_a = this.fieldElement) == null ? void 0 : _a.checked) ?? false;
+  }
+  writeValue(checked) {
+    if (this.fieldElement) {
+      this.fieldElement.checked = Boolean(checked);
+    }
+  }
+  getEventPayload(checked, oldChecked, action) {
+    return { checked, oldChecked, action };
+  }
+  setValue(checked, options) {
+    const oldChecked = this.getValue();
+    this.checked = checked;
+    this.writeValue(checked);
+    if ((options == null ? void 0 : options.silent) === false) {
+      this.emit("change", {
+        detail: this.getEventPayload(checked, oldChecked, options.action || "change")
+      });
+    }
+  }
+  reset(checked, options) {
+    this.setValue(checked !== void 0 ? checked : this.defaultChecked ?? false, {
+      ...options,
+      action: "reset"
+    });
+  }
+  clear(options) {
+    this.setValue(false, { ...options, action: "clear" });
+  }
+  render() {
+    return aeico.html(({ div, input }) => {
+      div({ className: "checkbox-container", variant: this.variant }, () => {
+        div({ className: "checkbox-wrapper" }, () => {
+          this.fieldElement = input({
+            type: "checkbox",
+            className: "field-input",
+            checked: Boolean(this.checked),
+            disabled: Boolean(this.disabled),
+            "@change": this.boundOnChange
+          });
+        });
+        this.renderActionButtons();
+      });
+    });
+  }
+}
+__publicField(Checkbox, "tagName", "checkbox");
+__publicField(Checkbox, "props", {
+  checked: { type: Boolean },
+  defaultChecked: { type: Boolean },
+  variant: { type: String }
+});
+__publicField(Checkbox, "styles", [variables.styleVariables, size.sizeCSS, color.colorCSS, styles]);
+Checkbox.register();
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=checkbox.cjs.map