aeico-components 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -21,6 +21,104 @@ const divider = require("./chunks/divider.cjs");
 const card = require("./chunks/card.cjs");
 const navbar = require("./chunks/navbar.cjs");
 const detail = require("./chunks/detail.cjs");
+const aeico = require("aeico");
+const aeicoComponent = require("./chunks/aeico-component.cjs");
+const variables = require("./chunks/variables.cjs");
+const color = require("./chunks/color.cjs");
+const style = ":host {\n  display: block;\n  --progress-height: 8px;\n  --color-solid: var(--color-primary);\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
+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 _animated_dec, _color_dec, _label_dec, _value_dec, _a, _init, _value, _label, _color, _animated;
+class ProgressBar extends (_a = aeicoComponent.AeicoComponent, _value_dec = [aeico.prop({ type: Number })], _label_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _animated_dec = [aeico.prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value, __runInitializers(_init, 8, this, 0)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _label, __runInitializers(_init, 12, this, "")), __runInitializers(_init, 15, this);
+    __privateAdd(this, _color, __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
+    __privateAdd(this, _animated, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+  }
+  render() {
+    const clamped = Math.min(100, Math.max(0, this.value));
+    return aeico.html(({ div, span }) => {
+      div({ part: "base" }, () => {
+        div(
+          {
+            part: "track",
+            className: "progress-track",
+            role: "progressbar",
+            "aria-valuenow": String(clamped),
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            ...this.label ? { "aria-label": this.label } : {}
+          },
+          () => {
+            span({
+              part: "bar",
+              className: "progress-bar",
+              style: { width: `${clamped}%` }
+            });
+          }
+        );
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_value = /* @__PURE__ */ new WeakMap();
+_label = /* @__PURE__ */ new WeakMap();
+_color = /* @__PURE__ */ new WeakMap();
+_animated = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, ProgressBar, _value);
+__decorateElement(_init, 4, "label", _label_dec, ProgressBar, _label);
+__decorateElement(_init, 4, "color", _color_dec, ProgressBar, _color);
+__decorateElement(_init, 4, "animated", _animated_dec, ProgressBar, _animated);
+__decoratorMetadata(_init, ProgressBar);
+__publicField(ProgressBar, "tagName", "progress-bar");
+__publicField(ProgressBar, "styles", [variables.styleVariables, color.colorCSS, style]);
+ProgressBar.register();
 exports.TextInput = textInput.TextInput;
 exports.Select = select.Select;
 exports.Slider = slider.Slider;
@@ -49,4 +147,5 @@ exports.Divider = divider.Divider;
 exports.Card = card.Card;
 exports.Navbar = navbar.Navbar;
 exports.Detail = detail.Detail;
+exports.ProgressBar = ProgressBar;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/progress-bar/progress-bar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/progress-bar.css?inline';\nimport type { ProgressBarColor } from './defines';\n\n/**\n * Progress bars show how far along an ongoing operation is as a horizontal fill.\n * Use them for file uploads, multi-step flows, or any task with measurable progress.\n *\n * @prop {number} value - Completion percentage, automatically clamped to 0–100.\n * @prop {string} label - Accessible label applied as `aria-label` on the track.\n * @prop {'default'|'primary'|'secondary'|'success'|'danger'|'warning'|'info'} color\n *   - Preset color variant driven by the shared color system.\n * @prop {boolean} animated - When set, overlays a shimmer sweep animation on the bar.\n *\n * @csspart base - The outermost wrapper `<div>`.\n * @csspart track - The background track `<div>`.\n * @csspart bar - The filled progress `<span>`.\n *\n * @cssproperty [--progress-height=8px] - Height of both the track and the bar.\n * @cssproperty [--progress-bar-color=var(--color-solid)] - Fill color of the bar.\n *   When set, takes precedence over the `color` prop entirely.\n */\nclass ProgressBar extends AeicoComponent {\n  static tagName = 'progress-bar';\n  protected static styles = [styleVariables, colorCSS, style];\n\n  @prop({ type: Number })\n  accessor value: number = 0;\n\n  @prop({ type: String })\n  accessor label: string = '';\n\n  @prop({ type: String })\n  accessor color: ProgressBarColor = 'primary';\n\n  @prop({ type: Boolean })\n  accessor animated: boolean = false;\n\n  protected render() {\n    const clamped = Math.min(100, Math.max(0, this.value));\n\n    return html(({ div, span }) => {\n      div({ part: 'base' }, () => {\n        div(\n          {\n            part: 'track',\n            className: 'progress-track',\n            role: 'progressbar',\n            'aria-valuenow': String(clamped),\n            'aria-valuemin': '0',\n            'aria-valuemax': '100',\n            ...(this.label ? { 'aria-label': this.label } : {}),\n          },\n          () => {\n            span({\n              part: 'bar',\n              className: 'progress-bar',\n              style: { width: `${clamped}%` },\n            });\n          },\n        );\n      });\n    });\n  }\n}\n\nProgressBar.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-progress-bar': ProgressBar;\n  }\n}\n\nexport default ProgressBar;\nexport type ProgressBarProps = InferProps<typeof ProgressBar>;\n"],"names":["AeicoComponent","prop","html","styleVariables","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,YAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,QAAA;AA0BA,MAAM,qBAAoB,KAAAA,eAAAA,gBAIxB,aAAA,CAACC,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,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,IAbC,IAAe;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAKE,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,GAAA,MAAyB,CAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,IAAA,MAAyB,EAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAA0B,kBAAnC,OAAA,IAAA,MAAmC,SAAA,CAAA,GAAnC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,UAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AAErD,WAAOC,WAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,MAAM,OAAA,GAAU,MAAM;AAC1B;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,MAAM;AAAA,YACN,iBAAiB,OAAO,OAAO;AAAA,YAC/B,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,GAAI,KAAK,QAAQ,EAAE,cAAc,KAAK,MAAA,IAAU,CAAA;AAAA,UAAC;AAAA,UAEnD,MAAM;AACJ,iBAAK;AAAA,cACH,MAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,EAAE,OAAO,GAAG,OAAO,IAAA;AAAA,YAAI,CAC/B;AAAA,UACH;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA1CA,QAAA,iBAAA,EAAA;AAKW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAJI,aAKK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAPI,aAQK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAVI,aAWK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAbI,aAcK,SAAA;AAdX,oBAAA,OAAM,WAAA;AACJ,cADI,aACG,WAAU,cAAA;AACjB,cAFI,aAEa,UAAS,CAACC,UAAAA,gBAAgBC,MAAAA,UAAU,KAAK,CAAA;AA0C5D,YAAY,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -6,7 +6,7 @@ import { R, a } from "./chunks/radio.js";
 import { S as S3 } from "./chunks/switch.js";
 import { B, a as a2 } from "./chunks/breadcrumb-item.js";
 import { B as B2 } from "./chunks/button.js";
-import { D, a as a3, b } from "./chunks/dropdown-button.js";
+import { b, D, a as a3 } from "./chunks/dropdown-button.js";
 import { B as B3 } from "./chunks/button-group.js";
 import { B as B4 } from "./chunks/badge.js";
 import { T as T2 } from "./chunks/tag.js";
@@ -19,6 +19,104 @@ import { D as D3 } from "./chunks/divider.js";
 import { C as C2 } from "./chunks/card.js";
 import { N } from "./chunks/navbar.js";
 import { D as D4 } from "./chunks/detail.js";
+import { prop, html } from "aeico";
+import { A as AeicoComponent } from "./chunks/aeico-component.js";
+import { s as styleVariables } from "./chunks/variables.js";
+import { c as colorCSS } from "./chunks/color.js";
+const style = ":host {\n  display: block;\n  --progress-height: 8px;\n  --color-solid: var(--color-primary);\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
+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 _animated_dec, _color_dec, _label_dec, _value_dec, _a, _init, _value, _label, _color, _animated;
+class ProgressBar extends (_a = AeicoComponent, _value_dec = [prop({ type: Number })], _label_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _animated_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value, __runInitializers(_init, 8, this, 0)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _label, __runInitializers(_init, 12, this, "")), __runInitializers(_init, 15, this);
+    __privateAdd(this, _color, __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
+    __privateAdd(this, _animated, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+  }
+  render() {
+    const clamped = Math.min(100, Math.max(0, this.value));
+    return html(({ div, span }) => {
+      div({ part: "base" }, () => {
+        div(
+          {
+            part: "track",
+            className: "progress-track",
+            role: "progressbar",
+            "aria-valuenow": String(clamped),
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            ...this.label ? { "aria-label": this.label } : {}
+          },
+          () => {
+            span({
+              part: "bar",
+              className: "progress-bar",
+              style: { width: `${clamped}%` }
+            });
+          }
+        );
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_value = /* @__PURE__ */ new WeakMap();
+_label = /* @__PURE__ */ new WeakMap();
+_color = /* @__PURE__ */ new WeakMap();
+_animated = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, ProgressBar, _value);
+__decorateElement(_init, 4, "label", _label_dec, ProgressBar, _label);
+__decorateElement(_init, 4, "color", _color_dec, ProgressBar, _color);
+__decorateElement(_init, 4, "animated", _animated_dec, ProgressBar, _animated);
+__decoratorMetadata(_init, ProgressBar);
+__publicField(ProgressBar, "tagName", "progress-bar");
+__publicField(ProgressBar, "styles", [styleVariables, colorCSS, style]);
+ProgressBar.register();
 export {
   A as Alert,
   B4 as Badge,
@@ -31,13 +129,14 @@ export {
   D4 as Detail,
   D2 as Dialog,
   D3 as Divider,
-  D as Dropdown,
-  a3 as DropdownButton,
-  b as DropdownItem,
+  b as Dropdown,
+  D as DropdownButton,
+  a3 as DropdownItem,
   I as Icon,
   I2 as IconButton,
   a4 as IconRegistry,
   N as Navbar,
+  ProgressBar,
   R as Radio,
   a as RadioGroup,
   S as Select,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/progress-bar/progress-bar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/progress-bar.css?inline';\nimport type { ProgressBarColor } from './defines';\n\n/**\n * Progress bars show how far along an ongoing operation is as a horizontal fill.\n * Use them for file uploads, multi-step flows, or any task with measurable progress.\n *\n * @prop {number} value - Completion percentage, automatically clamped to 0–100.\n * @prop {string} label - Accessible label applied as `aria-label` on the track.\n * @prop {'default'|'primary'|'secondary'|'success'|'danger'|'warning'|'info'} color\n *   - Preset color variant driven by the shared color system.\n * @prop {boolean} animated - When set, overlays a shimmer sweep animation on the bar.\n *\n * @csspart base - The outermost wrapper `<div>`.\n * @csspart track - The background track `<div>`.\n * @csspart bar - The filled progress `<span>`.\n *\n * @cssproperty [--progress-height=8px] - Height of both the track and the bar.\n * @cssproperty [--progress-bar-color=var(--color-solid)] - Fill color of the bar.\n *   When set, takes precedence over the `color` prop entirely.\n */\nclass ProgressBar extends AeicoComponent {\n  static tagName = 'progress-bar';\n  protected static styles = [styleVariables, colorCSS, style];\n\n  @prop({ type: Number })\n  accessor value: number = 0;\n\n  @prop({ type: String })\n  accessor label: string = '';\n\n  @prop({ type: String })\n  accessor color: ProgressBarColor = 'primary';\n\n  @prop({ type: Boolean })\n  accessor animated: boolean = false;\n\n  protected render() {\n    const clamped = Math.min(100, Math.max(0, this.value));\n\n    return html(({ div, span }) => {\n      div({ part: 'base' }, () => {\n        div(\n          {\n            part: 'track',\n            className: 'progress-track',\n            role: 'progressbar',\n            'aria-valuenow': String(clamped),\n            'aria-valuemin': '0',\n            'aria-valuemax': '100',\n            ...(this.label ? { 'aria-label': this.label } : {}),\n          },\n          () => {\n            span({\n              part: 'bar',\n              className: 'progress-bar',\n              style: { width: `${clamped}%` },\n            });\n          },\n        );\n      });\n    });\n  }\n}\n\nProgressBar.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-progress-bar': ProgressBar;\n  }\n}\n\nexport default ProgressBar;\nexport type ProgressBarProps = InferProps<typeof ProgressBar>;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,YAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,QAAA;AA0BA,MAAM,qBAAoB,KAAA,gBAIxB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,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,IAbC,IAAe;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAKE,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,GAAA,MAAyB,CAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,IAAA,MAAyB,EAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAA0B,kBAAnC,OAAA,IAAA,MAAmC,SAAA,CAAA,GAAnC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,UAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AAErD,WAAO,KAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,MAAM,OAAA,GAAU,MAAM;AAC1B;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,MAAM;AAAA,YACN,iBAAiB,OAAO,OAAO;AAAA,YAC/B,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,GAAI,KAAK,QAAQ,EAAE,cAAc,KAAK,MAAA,IAAU,CAAA;AAAA,UAAC;AAAA,UAEnD,MAAM;AACJ,iBAAK;AAAA,cACH,MAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,EAAE,OAAO,GAAG,OAAO,IAAA;AAAA,YAAI,CAC/B;AAAA,UACH;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA1CA,QAAA,iBAAA,EAAA;AAKW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAJI,aAKK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAPI,aAQK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAVI,aAWK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAbI,aAcK,SAAA;AAdX,oBAAA,OAAM,WAAA;AACJ,cADI,aACG,WAAU,cAAA;AACjB,cAFI,aAEa,UAAS,CAAC,gBAAgB,UAAU,KAAK,CAAA;AA0C5D,YAAY,SAAA;"}

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.4",
+  "version": "0.1.5",
   "description": "Built-in UI components for the Aeico Web Components framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -52,11 +52,11 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "aeico": "^0.1.3",
+    "aeico": "^0.1.5",
     "aeico-localize": "^0.1.1"
   },
   "devDependencies": {
-    "aeico": "^0.1.3",
+    "aeico": "^0.1.5",
     "aeico-localize": "^0.1.1",
     "@eslint/js": "^10.0.1",
     "@esm-bundle/chai": "^4.3.4-fix.0",

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();
     }
   }
 }