aeico-components 0.1.3 → 0.1.4

package/dist/chunks/tag.cjs

@@ -0,0 +1,108 @@
+"use strict";
+const variables = require("./variables.cjs");
+const size = require("./size.cjs");
+const color = require("./color.cjs");
+const aeicoComponent = require("./aeico-component.cjs");
+const aeico = require("aeico");
+const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\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, 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 _pill_dec, _disabled_dec, _dismissible_dec, _size_dec, _variant_dec, _color_dec, _a, _init, _color, _variant, _size, _dismissible, _disabled, _pill;
+class Tag extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _size_dec = [aeico.prop({ type: String })], _dismissible_dec = [aeico.prop({ type: Boolean })], _disabled_dec = [aeico.prop({ type: Boolean })], _pill_dec = [aeico.prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _color, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _variant, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _size, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _dismissible, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _pill, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
+  }
+  render() {
+    return aeico.html(({ span, button, slot }) => {
+      span({ part: "tag", className: "tag" }, () => {
+        slot({ name: "start" });
+        span({ className: "tag-content" }, () => {
+          slot();
+        });
+        slot({ name: "end" });
+        button(
+          {
+            type: "button",
+            className: "tag-dismiss",
+            "aria-label": "dismiss",
+            "@click": (e) => {
+              e.stopPropagation();
+              if (this.disabled) return;
+              this.emit("dismiss");
+            }
+          },
+          () => {
+            span({ textContent: "×" });
+          }
+        );
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_color = /* @__PURE__ */ new WeakMap();
+_variant = /* @__PURE__ */ new WeakMap();
+_size = /* @__PURE__ */ new WeakMap();
+_dismissible = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_pill = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "color", _color_dec, Tag, _color);
+__decorateElement(_init, 4, "variant", _variant_dec, Tag, _variant);
+__decorateElement(_init, 4, "size", _size_dec, Tag, _size);
+__decorateElement(_init, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
+__decorateElement(_init, 4, "disabled", _disabled_dec, Tag, _disabled);
+__decorateElement(_init, 4, "pill", _pill_dec, Tag, _pill);
+__decoratorMetadata(_init, Tag);
+__publicField(Tag, "styles", [variables.styleVariables, size.sizeCSS, color.colorCSS, tagStyle]);
+Tag.register();
+exports.Tag = Tag;
+//# sourceMappingURL=tag.cjs.map

package/dist/chunks/tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.cjs","sources":["../../src/tag/tag.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 tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n *   <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n *   Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n  @prop({ type: String })\n  accessor color: TagColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: TagVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: TagSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor dismissible: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor pill: boolean = false;\n\n  protected render() {\n    return html(({ span, button, slot }) => {\n      span({ part: 'tag', className: 'tag' }, () => {\n        slot({ name: 'start' });\n        span({ className: 'tag-content' }, () => {\n          slot();\n        });\n        slot({ name: 'end' });\n        button(\n          {\n            type: 'button',\n            className: 'tag-dismiss',\n            'aria-label': 'dismiss',\n            '@click': (e: Event) => {\n              e.stopPropagation();\n              if (this.disabled) return;\n              this.emit('dismiss');\n            },\n          },\n          () => {\n            span({ textContent: '\\u00d7' });\n          },\n        );\n      });\n    });\n  }\n}\n\nTag.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tag': Tag;\n  }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":["prop","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,oCAGhB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAACA,WAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAACC,UAAAA,gBAAgBC,KAAAA,SAASC,MAAAA,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;;"}

package/dist/chunks/tag.js

@@ -0,0 +1,109 @@
+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 tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\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, 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 _pill_dec, _disabled_dec, _dismissible_dec, _size_dec, _variant_dec, _color_dec, _a, _init, _color, _variant, _size, _dismissible, _disabled, _pill;
+class Tag extends (_a = AeicoComponent, _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _dismissible_dec = [prop({ type: Boolean })], _disabled_dec = [prop({ type: Boolean })], _pill_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _color, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _variant, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _size, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _dismissible, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _pill, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
+  }
+  render() {
+    return html(({ span, button, slot }) => {
+      span({ part: "tag", className: "tag" }, () => {
+        slot({ name: "start" });
+        span({ className: "tag-content" }, () => {
+          slot();
+        });
+        slot({ name: "end" });
+        button(
+          {
+            type: "button",
+            className: "tag-dismiss",
+            "aria-label": "dismiss",
+            "@click": (e) => {
+              e.stopPropagation();
+              if (this.disabled) return;
+              this.emit("dismiss");
+            }
+          },
+          () => {
+            span({ textContent: "×" });
+          }
+        );
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_color = /* @__PURE__ */ new WeakMap();
+_variant = /* @__PURE__ */ new WeakMap();
+_size = /* @__PURE__ */ new WeakMap();
+_dismissible = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_pill = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "color", _color_dec, Tag, _color);
+__decorateElement(_init, 4, "variant", _variant_dec, Tag, _variant);
+__decorateElement(_init, 4, "size", _size_dec, Tag, _size);
+__decorateElement(_init, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
+__decorateElement(_init, 4, "disabled", _disabled_dec, Tag, _disabled);
+__decorateElement(_init, 4, "pill", _pill_dec, Tag, _pill);
+__decoratorMetadata(_init, Tag);
+__publicField(Tag, "styles", [styleVariables, sizeCSS, colorCSS, tagStyle]);
+Tag.register();
+export {
+  Tag as T
+};
+//# sourceMappingURL=tag.js.map

package/dist/chunks/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":["../../src/tag/tag.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 tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n *   <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n *   Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n  @prop({ type: String })\n  accessor color: TagColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: TagVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: TagSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor dismissible: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor pill: boolean = false;\n\n  protected render() {\n    return html(({ span, button, slot }) => {\n      span({ part: 'tag', className: 'tag' }, () => {\n        slot({ name: 'start' });\n        span({ className: 'tag-content' }, () => {\n          slot();\n        });\n        slot({ name: 'end' });\n        button(\n          {\n            type: 'button',\n            className: 'tag-dismiss',\n            'aria-label': 'dismiss',\n            '@click': (e: Event) => {\n              e.stopPropagation();\n              if (this.disabled) return;\n              this.emit('dismiss');\n            },\n          },\n          () => {\n            span({ textContent: '\\u00d7' });\n          },\n        );\n      });\n    });\n  }\n}\n\nTag.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tag': Tag;\n  }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,qBAGhB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAAC,gBAAgB,SAAS,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;"}

package/dist/chunks/text-input.cjs

@@ -0,0 +1,59 @@
+"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 style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--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-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\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(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Clear button styles */\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n/* Reset button styles */\n.reset-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\n\n";
+class TextInput extends aeicoField.AeicoField {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+  }
+  render() {
+    return aeico.html(({ div, input }) => {
+      div({ className: "input-container" }, () => {
+        this.fieldElement = input({
+          type: this.type || "text",
+          placeholder: this.placeholder || "",
+          "@input": this.boundOnChange
+        });
+        this.renderActionButtons();
+      });
+      if (this.fieldElement && this.value != null) {
+        this.fieldElement.value = String(this.value);
+      }
+      this.updateClearButtonVisibility();
+    });
+  }
+  /**
+   * Update clear button visibility based on input value
+   */
+  updateClearButtonVisibility() {
+    if (this.clearBtn && this.fieldElement) {
+      const hasValue = this.fieldElement.value.length > 0;
+      this.clearBtn.style.display = hasValue ? "" : "none";
+    }
+  }
+  /**
+   * Write value to the input element (DOM only)
+   */
+  writeValue(value) {
+    const strValue = String(value || "");
+    if (this.fieldElement) {
+      this.fieldElement.value = strValue;
+    }
+    this.updateClearButtonVisibility();
+  }
+}
+__publicField(TextInput, "tagName", "text-input");
+__publicField(TextInput, "props", {
+  placeholder: { type: String },
+  type: { type: String }
+});
+__publicField(TextInput, "styles", [variables.styleVariables, size.sizeCSS, style]);
+TextInput.register();
+exports.TextInput = TextInput;
+//# sourceMappingURL=text-input.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.cjs","sources":["../../src/text-input/text-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 style from '../styles/components/text-input.css?inline';\n\nclass TextInput extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'text-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    type: { type: String },\n  };\n\n  declare placeholder?: string;\n  declare type?: string;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  render() {\n    return html(({ div, input }) => {\n      div({ className: 'input-container' }, () => {\n        this.fieldElement = input({\n          type: this.type || 'text',\n          placeholder: this.placeholder || '',\n          '@input': this.boundOnChange,\n        });\n\n        this.renderActionButtons();\n      });\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n      this.updateClearButtonVisibility();\n    });\n  }\n\n  /**\n   * Update clear button visibility based on input value\n   */\n  private updateClearButtonVisibility() {\n    if (this.clearBtn && this.fieldElement) {\n      const hasValue = this.fieldElement.value.length > 0;\n      this.clearBtn.style.display = hasValue ? '' : 'none';\n    }\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: string): void {\n    const strValue = String(value || '');\n\n    if (this.fieldElement) {\n      this.fieldElement.value = strValue;\n    }\n\n    this.updateClearButtonVisibility();\n  }\n}\n\nTextInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-text-input': TextInput;\n  }\n}\n\nexport default TextInput;\nexport type TextInputProps = InferProps<typeof TextInput>;\n"],"names":["AeicoField","html","variables","sizeCSS"],"mappings":";;;;;;;;;AAOA,MAAM,kBAAkBA,WAAAA,WAAW;AAAA,EAAnC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAclD,SAAS;AACP,WAAOC,WAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,UAAI,EAAE,WAAW,kBAAA,GAAqB,MAAM;AAC1C,aAAK,eAAe,MAAM;AAAA,UACxB,MAAM,KAAK,QAAQ;AAAA,UACnB,aAAa,KAAK,eAAe;AAAA,UACjC,UAAU,KAAK;AAAA,QAAA,CAChB;AAED,aAAK,oBAAA;AAAA,MACP,CAAC;AAED,UAAI,KAAK,gBAAgB,KAAK,SAAS,MAAM;AAC3C,aAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,MAC7C;AACA,WAAK,4BAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKQ,8BAA8B;AACpC,QAAI,KAAK,YAAY,KAAK,cAAc;AACtC,YAAM,WAAW,KAAK,aAAa,MAAM,SAAS;AAClD,WAAK,SAAS,MAAM,UAAU,WAAW,KAAK;AAAA,IAChD;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKU,WAAW,OAAqB;AACxC,UAAM,WAAW,OAAO,SAAS,EAAE;AAEnC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ;AAAA,IAC5B;AAEA,SAAK,4BAAA;AAAA,EACP;AACF;AArDE,cAHI,WAGG,WAAU;AAEjB,cALI,WAKG,SAAe;AAAA,EACpB,aAAa,EAAE,MAAM,OAAA;AAAA,EACrB,MAAM,EAAE,MAAM,OAAA;AAAO;AAMvB,cAbI,WAaa,UAAS,CAACC,0BAAWC,KAAAA,SAAS,KAAK;AA6CtD,UAAU,SAAA;;"}

package/dist/chunks/text-input.js

@@ -0,0 +1,60 @@
+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 } from "./aeico-field.js";
+import { html } from "aeico";
+import { s as styleVariables } 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(--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-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\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(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Clear button styles */\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n/* Reset button styles */\n.reset-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\n\n";
+class TextInput extends AeicoField {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+  }
+  render() {
+    return html(({ div, input }) => {
+      div({ className: "input-container" }, () => {
+        this.fieldElement = input({
+          type: this.type || "text",
+          placeholder: this.placeholder || "",
+          "@input": this.boundOnChange
+        });
+        this.renderActionButtons();
+      });
+      if (this.fieldElement && this.value != null) {
+        this.fieldElement.value = String(this.value);
+      }
+      this.updateClearButtonVisibility();
+    });
+  }
+  /**
+   * Update clear button visibility based on input value
+   */
+  updateClearButtonVisibility() {
+    if (this.clearBtn && this.fieldElement) {
+      const hasValue = this.fieldElement.value.length > 0;
+      this.clearBtn.style.display = hasValue ? "" : "none";
+    }
+  }
+  /**
+   * Write value to the input element (DOM only)
+   */
+  writeValue(value) {
+    const strValue = String(value || "");
+    if (this.fieldElement) {
+      this.fieldElement.value = strValue;
+    }
+    this.updateClearButtonVisibility();
+  }
+}
+__publicField(TextInput, "tagName", "text-input");
+__publicField(TextInput, "props", {
+  placeholder: { type: String },
+  type: { type: String }
+});
+__publicField(TextInput, "styles", [styleVariables, sizeCSS, style]);
+TextInput.register();
+export {
+  TextInput as T
+};
+//# sourceMappingURL=text-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sources":["../../src/text-input/text-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 style from '../styles/components/text-input.css?inline';\n\nclass TextInput extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'text-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    type: { type: String },\n  };\n\n  declare placeholder?: string;\n  declare type?: string;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  render() {\n    return html(({ div, input }) => {\n      div({ className: 'input-container' }, () => {\n        this.fieldElement = input({\n          type: this.type || 'text',\n          placeholder: this.placeholder || '',\n          '@input': this.boundOnChange,\n        });\n\n        this.renderActionButtons();\n      });\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n      this.updateClearButtonVisibility();\n    });\n  }\n\n  /**\n   * Update clear button visibility based on input value\n   */\n  private updateClearButtonVisibility() {\n    if (this.clearBtn && this.fieldElement) {\n      const hasValue = this.fieldElement.value.length > 0;\n      this.clearBtn.style.display = hasValue ? '' : 'none';\n    }\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: string): void {\n    const strValue = String(value || '');\n\n    if (this.fieldElement) {\n      this.fieldElement.value = strValue;\n    }\n\n    this.updateClearButtonVisibility();\n  }\n}\n\nTextInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-text-input': TextInput;\n  }\n}\n\nexport default TextInput;\nexport type TextInputProps = InferProps<typeof TextInput>;\n"],"names":["variables"],"mappings":";;;;;;;;AAOA,MAAM,kBAAkB,WAAW;AAAA,EAAnC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAclD,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,UAAI,EAAE,WAAW,kBAAA,GAAqB,MAAM;AAC1C,aAAK,eAAe,MAAM;AAAA,UACxB,MAAM,KAAK,QAAQ;AAAA,UACnB,aAAa,KAAK,eAAe;AAAA,UACjC,UAAU,KAAK;AAAA,QAAA,CAChB;AAED,aAAK,oBAAA;AAAA,MACP,CAAC;AAED,UAAI,KAAK,gBAAgB,KAAK,SAAS,MAAM;AAC3C,aAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,MAC7C;AACA,WAAK,4BAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKQ,8BAA8B;AACpC,QAAI,KAAK,YAAY,KAAK,cAAc;AACtC,YAAM,WAAW,KAAK,aAAa,MAAM,SAAS;AAClD,WAAK,SAAS,MAAM,UAAU,WAAW,KAAK;AAAA,IAChD;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKU,WAAW,OAAqB;AACxC,UAAM,WAAW,OAAO,SAAS,EAAE;AAEnC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ;AAAA,IAC5B;AAEA,SAAK,4BAAA;AAAA,EACP;AACF;AArDE,cAHI,WAGG,WAAU;AAEjB,cALI,WAKG,SAAe;AAAA,EACpB,aAAa,EAAE,MAAM,OAAA;AAAA,EACrB,MAAM,EAAE,MAAM,OAAA;AAAO;AAMvB,cAbI,WAaa,UAAS,CAACA,gBAAW,SAAS,KAAK;AA6CtD,UAAU,SAAA;"}