aeico-components 0.1.3 → 0.1.5

package/dist/select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.cjs","sources":["../src/select/select-option.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport style from '../styles/components/select-option.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport { prop } from 'aeico';\n\nclass SelectOption extends AeicoComponent {\n  static tagName = 'select-option';\n\n  @prop({ type: String })\n  accessor value: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean | undefined = false;\n\n  protected static styles = [variables, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    const displayLabel = this.label || this.textContent?.trim() || '';\n    this.emit('selectoption', { detail: { value: this.value ?? '', label: displayLabel } });\n  };\n\n  render() {\n    return html(({ div, slot }) => {\n      div({ className: 'option-item' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nSelectOption.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select-option': SelectOption;\n  }\n}\n\nexport default SelectOption;\nexport type SelectOptionProps = InferProps<typeof SelectOption>;\n"],"names":["AeicoComponent","prop","_a","html","variables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,eAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,WAAA;AAOA,MAAM,sBAAqB,KAAAA,eAAAA,gBAGzB,aAAA,CAACC,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,IAZE,IAAe;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAgC,kBAAzC,OAAA,IAAA,MAAyC,KAAA,CAAA,GAAzC,kBAAA,OAAA,IAAA,IAAA;AASA,kBAAA,MAAQ,gBAAe,CAAC,MAAmB;;AACzC,UAAI,KAAK,UAAU;AACjB,UAAE,gBAAA;AAEF;AAAA,MACF;AAEA,YAAM,eAAe,KAAK,WAASC,MAAA,KAAK,gBAAL,gBAAAA,IAAkB,WAAU;AAC/D,WAAK,KAAK,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,aAAA,EAAa,CAAG;AAAA,IACxF,CAAA;AAAA,EAAA;AAAA,EAdA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,OAAO,SAAS,KAAK,YAAY;AAAA,EACxC;AAAA,EAaA,SAAS;AACP,WAAOC,WAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,WAAW,cAAA,GAAiB,MAAM;AACtC,aAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAxCA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAHI,cAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YANI,cAOK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eATI,cAUK,SAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAZI,cAaK,SAAA;AAbX,oBAAA,OAAM,YAAA;AACJ,cADI,cACG,WAAU,eAAA;AAcjB,cAfI,cAea,UAAS,CAACC,UAAAA,gBAAW,KAAK,CAAA;AA2B7C,aAAa,SAAA;;;;"}

package/dist/select.js

@@ -0,0 +1,99 @@
+import { S, S as S2 } from "./chunks/select.js";
+import { A as AeicoComponent } from "./chunks/aeico-component.js";
+import { prop, html } from "aeico";
+import { s as styleVariables } from "./chunks/variables.js";
+const style = ":host {\n  display: block;\n\n  --option-padding: 0.417em 0.667em;\n  --option-bg: transparent;\n  --option-bg-hover: var(--surface-raised);\n  --option-bg-selected: color-mix(in srgb, var(--color-primary) 12%, transparent);\n  --option-color: var(--color-text-main);\n  --option-color-disabled: var(--color-text-disabled);\n  --option-color-selected: var(--color-primary);\n  --option-font-size: 1em;\n  --option-transition: background 0.1s;\n}\n\n.option-item {\n  padding: var(--option-padding);\n  font-size: var(--option-font-size);\n  color: var(--option-color);\n  background: var(--option-bg);\n  cursor: pointer;\n  transition: var(--option-transition);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n}\n\n:host(:hover:not([disabled])) .option-item {\n  background: var(--option-bg-hover);\n}\n\n:host([selected]) .option-item {\n  background: var(--option-bg-selected);\n  color: var(--option-color-selected);\n}\n\n:host([disabled]) .option-item {\n  color: var(--option-color-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n\n";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1, key = __decoratorStrings[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _selected_dec, _disabled_dec, _label_dec, _value_dec, _a, _init, _value, _label, _disabled, _selected;
+class SelectOption extends (_a = AeicoComponent, _value_dec = [prop({ type: String })], _label_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _selected_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _label, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _selected, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __publicField(this, "_handleClick", (e) => {
+      var _a2;
+      if (this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      const displayLabel = this.label || ((_a2 = this.textContent) == null ? void 0 : _a2.trim()) || "";
+      this.emit("selectoption", { detail: { value: this.value ?? "", label: displayLabel } });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen("click", this._handleClick);
+  }
+  render() {
+    return html(({ div, slot }) => {
+      div({ className: "option-item" }, () => {
+        slot();
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_value = /* @__PURE__ */ new WeakMap();
+_label = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_selected = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, SelectOption, _value);
+__decorateElement(_init, 4, "label", _label_dec, SelectOption, _label);
+__decorateElement(_init, 4, "disabled", _disabled_dec, SelectOption, _disabled);
+__decorateElement(_init, 4, "selected", _selected_dec, SelectOption, _selected);
+__decoratorMetadata(_init, SelectOption);
+__publicField(SelectOption, "tagName", "select-option");
+__publicField(SelectOption, "styles", [styleVariables, style]);
+SelectOption.register();
+export {
+  S as Select,
+  SelectOption,
+  S2 as default
+};
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../src/select/select-option.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport style from '../styles/components/select-option.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport { prop } from 'aeico';\n\nclass SelectOption extends AeicoComponent {\n  static tagName = 'select-option';\n\n  @prop({ type: String })\n  accessor value: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean | undefined = false;\n\n  protected static styles = [variables, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    const displayLabel = this.label || this.textContent?.trim() || '';\n    this.emit('selectoption', { detail: { value: this.value ?? '', label: displayLabel } });\n  };\n\n  render() {\n    return html(({ div, slot }) => {\n      div({ className: 'option-item' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nSelectOption.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select-option': SelectOption;\n  }\n}\n\nexport default SelectOption;\nexport type SelectOptionProps = InferProps<typeof SelectOption>;\n"],"names":["_a","variables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,eAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,WAAA;AAOA,MAAM,sBAAqB,KAAA,gBAGzB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAZE,IAAe;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAgC,kBAAzC,OAAA,IAAA,MAAyC,KAAA,CAAA,GAAzC,kBAAA,OAAA,IAAA,IAAA;AASA,kBAAA,MAAQ,gBAAe,CAAC,MAAmB;;AACzC,UAAI,KAAK,UAAU;AACjB,UAAE,gBAAA;AAEF;AAAA,MACF;AAEA,YAAM,eAAe,KAAK,WAASA,MAAA,KAAK,gBAAL,gBAAAA,IAAkB,WAAU;AAC/D,WAAK,KAAK,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,aAAA,EAAa,CAAG;AAAA,IACxF,CAAA;AAAA,EAAA;AAAA,EAdA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,OAAO,SAAS,KAAK,YAAY;AAAA,EACxC;AAAA,EAaA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,WAAW,cAAA,GAAiB,MAAM;AACtC,aAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAxCA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAHI,cAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YANI,cAOK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eATI,cAUK,SAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAZI,cAaK,SAAA;AAbX,oBAAA,OAAM,YAAA;AACJ,cADI,cACG,WAAU,eAAA;AAcjB,cAfI,cAea,UAAS,CAACC,gBAAW,KAAK,CAAA;AA2B7C,aAAa,SAAA;"}

package/dist/slider.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const slider = require("./chunks/slider.cjs");
+exports.Slider = slider.Slider;
+exports.default = slider.Slider;
+//# sourceMappingURL=slider.cjs.map

package/dist/slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/slider.js

@@ -0,0 +1,6 @@
+import { S, S as S2 } from "./chunks/slider.js";
+export {
+  S as Slider,
+  S2 as default
+};
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/switch.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const _switch = require("./chunks/switch.cjs");
+exports.Switch = _switch.Switch;
+exports.default = _switch.Switch;
+//# sourceMappingURL=switch.cjs.map

package/dist/switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/switch.js

@@ -0,0 +1,6 @@
+import { S, S as S2 } from "./chunks/switch.js";
+export {
+  S as Switch,
+  S2 as default
+};
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/tabs.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const tabPanel = require("./chunks/tab-panel.cjs");
+exports.Tab = tabPanel.Tab;
+exports.TabPanel = tabPanel.TabPanel;
+exports.Tabs = tabPanel.Tabs;
+exports.default = tabPanel.Tabs;
+//# sourceMappingURL=tabs.cjs.map

package/dist/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/tabs.js

@@ -0,0 +1,8 @@
+import { T, a, b, b as b2 } from "./chunks/tab-panel.js";
+export {
+  T as Tab,
+  a as TabPanel,
+  b as Tabs,
+  b2 as default
+};
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/tag.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const tag = require("./chunks/tag.cjs");
+exports.default = tag.Tag;
+//# sourceMappingURL=tag.cjs.map

package/dist/tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/tag.js

@@ -0,0 +1,5 @@
+import { T } from "./chunks/tag.js";
+export {
+  T as default
+};
+//# sourceMappingURL=tag.js.map

package/dist/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/text-input.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const textInput = require("./chunks/text-input.cjs");
+exports.TextInput = textInput.TextInput;
+exports.default = textInput.TextInput;
+//# sourceMappingURL=text-input.cjs.map

package/dist/text-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/text-input.js

@@ -0,0 +1,6 @@
+import { T, T as T2 } from "./chunks/text-input.js";
+export {
+  T as TextInput,
+  T2 as default
+};
+//# sourceMappingURL=text-input.js.map

package/dist/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/aeico-field.d.ts

@@ -70,14 +70,14 @@ declare class AeicoField<TValue = string> extends AeicoComponent {
      *
      * @returns Current field value
      */
-    protected getValue(): any;
+    protected getValue(): TValue;
     /**
      * Write value to the underlying UI element and sync props
      * Subclasses must override this to update their specific UI element
      *
      * @param _value New value to write to the element
      */
-    protected writeValue(_value: any): void;
+    protected writeValue(_value: TValue): void;
     /**
      * Get event payload for change events
      * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)
@@ -87,7 +87,7 @@ declare class AeicoField<TValue = string> extends AeicoComponent {
      * @param action Action type
      * @returns Event payload object
      */
-    protected getEventPayload(value: any, oldValue: any, action: FieldAction): Record<string, any>;
+    protected getEventPayload(value: TValue, oldValue: TValue, action: FieldAction): Record<string, unknown>;
     /**
      * Update field value programmatically (internal method)
      * Subclasses should provide type-safe public wrappers (e.g., change() method)
@@ -96,7 +96,7 @@ declare class AeicoField<TValue = string> extends AeicoComponent {
      * @param options.silent If true, won't emit change event (default: true)
      * @param options.action Action type for the event (default: 'change')
      */
-    protected setValue(value: any, options?: {
+    protected setValue(value: TValue, options?: {
         silent?: boolean;
         action?: FieldAction;
     }): void;
@@ -106,7 +106,7 @@ declare class AeicoField<TValue = string> extends AeicoComponent {
      * @param value Value to reset to, defaults to defaultValue prop
      * @param options.silent If false, will emit reset event (default: true)
      */
-    reset(value?: any, options?: {
+    reset(value?: TValue, options?: {
         silent?: boolean;
     }): void;
     /**

package/dist/types/button/button.d.ts

@@ -33,7 +33,8 @@ declare class Button extends AeicoComponent {
     type?: 'button' | 'submit' | 'reset';
     active?: boolean;
     block?: boolean;
-    private buttonElement;
+    private _buttonElement;
+    private _slotElement;
     private _autoAriaLabel;
     protected onMounted(): void;
     private _handleSlotChange;

package/dist/types/checkbox/checkbox.d.ts

@@ -1,7 +1,7 @@
-import AeicoField from '../aeico-field';
+import AeicoField, { type FieldAction } from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { CheckboxVariant } from './defines';
-declare class Checkbox extends AeicoField {
+declare class Checkbox extends AeicoField<boolean> {
     protected fieldElement: HTMLInputElement | null;
     static tagName: string;
     static props: Props;
@@ -11,14 +11,14 @@ declare class Checkbox extends AeicoField {
     protected static styles: string[];
     protected getValue(): boolean;
     protected writeValue(checked: boolean): void;
-    protected getEventPayload(checked: boolean, oldChecked: boolean, action: any): {
+    protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction): {
         checked: boolean;
         oldChecked: boolean;
-        action: any;
+        action: FieldAction;
     };
     protected setValue(checked: boolean, options?: {
         silent?: boolean;
-        action?: any;
+        action?: FieldAction;
     }): void;
     reset(checked?: boolean, options?: {
         silent?: boolean;

package/dist/types/index.d.ts

@@ -53,6 +53,7 @@ export { default as Divider } from './divider';
 export { default as Card } from './card';
 export { default as Navbar } from './navbar';
 export { default as Detail } from './detail';
+export { default as ProgressBar } from './progress-bar';
 export type { SelectProps, SelectOption, SelectOptions, SelectOptionValue } from './select';
 export type { SliderProps, SliderOption, SliderOptions, SliderOptionValue } from './slider';
 export type { CheckboxProps, CheckboxVariant } from './checkbox';
@@ -67,6 +68,7 @@ export type { BadgeProps, BadgeColor, BadgeSize, BadgeVariant } from './badge';
 export type { TagProps, TagColor, TagSize, TagVariant } from './tag';
 export type { DialogProps } from './dialog';
 export type { IconProps, IconSize, IconColor, IconDefinition, IconRegistryData } from './icon';
+export type { ProgressBarProps, ProgressBarColor } from './progress-bar';
 export type { IconButtonProps, IconButtonVariant, IconButtonSize } from './icon-button';
 export type { DividerProps } from './divider';
 export type { CardProps, CardVariant, CardColor } from './card';

package/dist/types/progress-bar/defines.d.ts

@@ -0,0 +1 @@
+export type ProgressBarColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';

package/dist/types/progress-bar/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as ProgressBar } from './progress-bar';
+export type { ProgressBarProps } from './progress-bar';
+export type { ProgressBarColor } from './defines';

package/dist/types/progress-bar/progress-bar.d.ts

@@ -0,0 +1,37 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { ProgressBarColor } from './defines';
+/**
+ * Progress bars show how far along an ongoing operation is as a horizontal fill.
+ * Use them for file uploads, multi-step flows, or any task with measurable progress.
+ *
+ * @prop {number} value - Completion percentage, automatically clamped to 0–100.
+ * @prop {string} label - Accessible label applied as `aria-label` on the track.
+ * @prop {'default'|'primary'|'secondary'|'success'|'danger'|'warning'|'info'} color
+ *   - Preset color variant driven by the shared color system.
+ * @prop {boolean} animated - When set, overlays a shimmer sweep animation on the bar.
+ *
+ * @csspart base - The outermost wrapper `<div>`.
+ * @csspart track - The background track `<div>`.
+ * @csspart bar - The filled progress `<span>`.
+ *
+ * @cssproperty [--progress-height=8px] - Height of both the track and the bar.
+ * @cssproperty [--progress-bar-color=var(--color-solid)] - Fill color of the bar.
+ *   When set, takes precedence over the `color` prop entirely.
+ */
+declare class ProgressBar extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    accessor value: number;
+    accessor label: string;
+    accessor color: ProgressBarColor;
+    accessor animated: boolean;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-progress-bar': ProgressBar;
+    }
+}
+export default ProgressBar;
+export type ProgressBarProps = InferProps<typeof ProgressBar>;

package/dist/types/radio-group/radio-group.d.ts

@@ -25,7 +25,7 @@ declare class RadioGroup extends AeicoField {
     private _boundOnRadioClick;
     private _boundOnButtonClick;
     protected getValue(): string;
-    protected writeValue(_value: any): void;
+    protected writeValue(_value: string): void;
     protected onReset(): void;
     protected onClear(): void;
     render(): import("aeico-view").RenderResult;

package/dist/types/select/select.d.ts

@@ -32,7 +32,7 @@ declare class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     defaultValue: SelectOptionValue | SelectMultiValue | undefined;
     protected static styles: string[];
     protected writeValue(_value: SelectOptionValue | SelectMultiValue): void;
-    protected getValue(): any;
+    protected getValue(): SelectOptionValue | SelectMultiValue;
     private _getMultiValues;
     protected onDisabledChanged(_newValue: boolean): void;
     protected onUpdated(_changedProps: Map<string, unknown>): void;

package/dist/types/switch/switch.d.ts

@@ -1,6 +1,6 @@
-import AeicoField from '../aeico-field';
+import AeicoField, { type FieldAction } from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
-declare class Switch extends AeicoField {
+declare class Switch extends AeicoField<boolean> {
     protected fieldElement: HTMLInputElement | null;
     static tagName: string;
     static props: Props;
@@ -9,14 +9,14 @@ declare class Switch extends AeicoField {
     protected static styles: string[];
     protected getValue(): boolean;
     protected writeValue(checked: boolean): void;
-    protected getEventPayload(checked: boolean, oldChecked: boolean, action: any): {
+    protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction): {
         checked: boolean;
         oldChecked: boolean;
-        action: any;
+        action: FieldAction;
     };
     protected setValue(checked: boolean, options?: {
         silent?: boolean;
-        action?: any;
+        action?: FieldAction;
     }): void;
     reset(checked?: boolean, options?: {
         silent?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeico-components",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Built-in UI components for the Aeico Web Components framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -11,6 +11,11 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/types/*/index.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
     }
   },
   "files": [
@@ -18,7 +23,12 @@
     "!dist/*.tsbuildinfo",
     "src"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/*.js",
+    "./dist/*.cjs",
+    "./dist/chunks/*.js",
+    "./dist/chunks/*.cjs"
+  ],
   "scripts": {
     "build": "vite build && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
     "dev": "vite build --watch",
@@ -41,11 +51,13 @@
   ],
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "aeico": "^0.1.3",
+  "peerDependencies": {
+    "aeico": "^0.1.5",
     "aeico-localize": "^0.1.1"
   },
   "devDependencies": {
+    "aeico": "^0.1.5",
+    "aeico-localize": "^0.1.1",
     "@eslint/js": "^10.0.1",
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@types/mocha": "^10.0.10",

package/src/aeico-field.ts

@@ -136,8 +136,8 @@ class AeicoField<TValue = string> extends AeicoComponent {
    *
    * @returns Current field value
    */
-  protected getValue(): any {
-    return this.fieldElement?.value || '';
+  protected getValue(): TValue {
+    return (this.fieldElement?.value || '') as TValue;
   }
 
   /**
@@ -146,7 +146,7 @@ class AeicoField<TValue = string> extends AeicoComponent {
    *
    * @param _value New value to write to the element
    */
-  protected writeValue(_value: any): void {
+  protected writeValue(_value: TValue): void {
     // Base implementation - subclasses override
   }
 
@@ -159,7 +159,11 @@ class AeicoField<TValue = string> extends AeicoComponent {
    * @param action Action type
    * @returns Event payload object
    */
-  protected getEventPayload(value: any, oldValue: any, action: FieldAction): Record<string, any> {
+  protected getEventPayload(
+    value: TValue,
+    oldValue: TValue,
+    action: FieldAction,
+  ): Record<string, unknown> {
     return { value, oldValue, action };
   }
 
@@ -171,7 +175,7 @@ class AeicoField<TValue = string> extends AeicoComponent {
    * @param options.silent If true, won't emit change event (default: true)
    * @param options.action Action type for the event (default: 'change')
    */
-  protected setValue(value: any, options?: { silent?: boolean; action?: FieldAction }): void {
+  protected setValue(value: TValue, options?: { silent?: boolean; action?: FieldAction }): void {
     const oldValue = this.getValue();
 
     // Update property value
@@ -193,9 +197,9 @@ class AeicoField<TValue = string> extends AeicoComponent {
    * @param value Value to reset to, defaults to defaultValue prop
    * @param options.silent If false, will emit reset event (default: true)
    */
-  public reset(value?: any, options?: { silent?: boolean }): void {
+  public reset(value?: TValue, options?: { silent?: boolean }): void {
     const resetValue = value !== undefined ? value : this.defaultValue;
-    this.setValue(resetValue, { ...options, action: 'reset' });
+    this.setValue(resetValue as TValue, { ...options, action: 'reset' });
   }
 
   /**
@@ -204,7 +208,7 @@ class AeicoField<TValue = string> extends AeicoComponent {
    * @param options.silent If false, will emit clear event (default: true)
    */
   public clear(options?: { silent?: boolean }): void {
-    this.setValue('', { ...options, action: 'clear' });
+    this.setValue('' as TValue, { ...options, action: 'clear' });
   }
 
   /**

package/src/button/button.ts

@@ -55,18 +55,16 @@ class Button extends AeicoComponent {
   @prop({ type: Boolean })
   block?: boolean;
 
-  private buttonElement: HTMLButtonElement | null = null;
+  private _buttonElement: HTMLButtonElement | null = null;
+  private _slotElement: HTMLSlotElement | null = null;
   private _autoAriaLabel = false;
 
   protected onMounted() {
-    const slot = this.shadowRoot?.querySelector('slot:not([name])');
-    if (slot) this.listen(slot, 'slotchange', this._handleSlotChange);
     this._handleSlotChange();
   }
 
   private _handleSlotChange = () => {
-    const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;
-    const nodes = slot?.assignedNodes() ?? [];
+    const nodes = this._slotElement?.assignedNodes() ?? [];
     // Icon-only: exactly one element (ae-icon) and no meaningful text nodes
     const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);
     const hasText = nodes.some(
@@ -92,7 +90,7 @@ class Button extends AeicoComponent {
 
   protected render() {
     return html(({ button, slot }) => {
-      this.buttonElement = button(
+      this._buttonElement = button(
         {
           type: this.type || 'button',
           disabled: this.disabled,
@@ -101,7 +99,7 @@ class Button extends AeicoComponent {
           'aria-disabled': this.disabled,
         },
         () => {
-          slot();
+          this._slotElement = slot({ '@slotchange': this._handleSlotChange });
         },
       );
     });
@@ -111,8 +109,8 @@ class Button extends AeicoComponent {
    * Programmatically click the button
    */
   click() {
-    if (!this.disabled && this.buttonElement) {
-      this.buttonElement.click();
+    if (!this.disabled && this._buttonElement) {
+      this._buttonElement.click();
     }
   }
 
@@ -120,8 +118,8 @@ class Button extends AeicoComponent {
    * Focus the button
    */
   focus() {
-    if (this.buttonElement) {
-      this.buttonElement.focus();
+    if (this._buttonElement) {
+      this._buttonElement.focus();
     }
   }
 
@@ -129,8 +127,8 @@ class Button extends AeicoComponent {
    * Blur the button
    */
   blur() {
-    if (this.buttonElement) {
-      this.buttonElement.blur();
+    if (this._buttonElement) {
+      this._buttonElement.blur();
     }
   }
 }