aeico-components 0.1.3 → 0.1.5

package/src/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import AeicoField from '../aeico-field';
+import AeicoField, { type FieldAction } from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { html } from 'aeico';
 import styleVariables from '../styles/variables.css?inline';
@@ -7,7 +7,7 @@ import colorCSS from '../styles/color.css?inline';
 import styles from '../styles/components/checkbox.css?inline';
 import { CheckboxVariant } from './defines';
 
-class Checkbox extends AeicoField {
+class Checkbox extends AeicoField<boolean> {
   protected fieldElement: HTMLInputElement | null = null;
 
   static tagName = 'checkbox';
@@ -34,11 +34,11 @@ class Checkbox extends AeicoField {
     }
   }
 
-  protected getEventPayload(checked: boolean, oldChecked: boolean, action: any) {
+  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {
     return { checked, oldChecked, action };
   }
 
-  protected setValue(checked: boolean, options?: { silent?: boolean; action?: any }): void {
+  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {
     const oldChecked = this.getValue();
     this.checked = checked;
     this.writeValue(checked);

package/src/index.ts

@@ -57,6 +57,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';
 
 // Component types
 export type { SelectProps, SelectOption, SelectOptions, SelectOptionValue } from './select';
@@ -78,6 +79,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/src/navbar/navbar.ts

@@ -74,8 +74,6 @@ class Navbar extends AeicoComponent {
 
   connectedCallback() {
     super.connectedCallback();
-    // Close menu when a nav link is clicked on mobile
-    this.listen('click', this._handleInnerClick);
     // Close menu when clicking outside the navbar
     this._outsideClickHandler = (e: MouseEvent) => {
       // Event retargeting in shadow DOM means e.target is the host element
@@ -119,7 +117,7 @@ class Navbar extends AeicoComponent {
 
   protected render() {
     return html(({ div, nav, button, span, slot }) => {
-      div({ class: 'inner' }, () => {
+      div({ class: 'inner', '@click': this._handleInnerClick }, () => {
         div({ part: 'brand' }, () => {
           slot({ name: 'brand' });
         });

package/src/progress-bar/defines.ts

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

package/src/progress-bar/index.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/src/progress-bar/progress-bar.ts

@@ -0,0 +1,80 @@
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import styleVariables from '../styles/variables.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import style from '../styles/components/progress-bar.css?inline';
+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.
+ */
+class ProgressBar extends AeicoComponent {
+  static tagName = 'progress-bar';
+  protected static styles = [styleVariables, colorCSS, style];
+
+  @prop({ type: Number })
+  accessor value: number = 0;
+
+  @prop({ type: String })
+  accessor label: string = '';
+
+  @prop({ type: String })
+  accessor color: ProgressBarColor = 'primary';
+
+  @prop({ type: Boolean })
+  accessor animated: boolean = false;
+
+  protected 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}%` },
+            });
+          },
+        );
+      });
+    });
+  }
+}
+
+ProgressBar.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-progress-bar': ProgressBar;
+  }
+}
+
+export default ProgressBar;
+export type ProgressBarProps = InferProps<typeof ProgressBar>;

package/src/radio-group/radio-group.ts

@@ -117,7 +117,7 @@ class RadioGroup extends AeicoField {
     return this.value ?? '';
   }
 
-  protected writeValue(_value: any): void {
+  protected writeValue(_value: string): void {
     // All visual state is driven by builder diff on next render;
     // for native radio inputs we need to sync checked immediately.
     // The render() reads this.value, so update handles the rest.

package/src/select/select.ts

@@ -107,7 +107,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     // Reactive re-render via this.value prop change handles the display update
   }
 
-  protected getValue(): any {
+  protected getValue(): SelectOptionValue | SelectMultiValue {
     if (this.multiple) return this._getMultiValues();
 
     return this.value || '';

package/src/styles/components/progress-bar.css

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+  --progress-height: 8px;
+  --color-solid: var(--color-primary);
+}
+
+.progress-track {
+  width: 100%;
+  height: var(--progress-height);
+  background: var(--border-subtle);
+  border-radius: calc(var(--progress-height) / 2);
+  overflow: hidden;
+}
+
+.progress-bar {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--progress-bar-color, var(--color-solid));
+  width: 0%;
+  transition: width 0.35s ease;
+  position: relative;
+}
+
+/* animated: shimmer sweep on top of the solid fill */
+:host([animated]) .progress-bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.35) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: progress-shimmer 1.4s linear infinite;
+}
+
+@keyframes progress-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

package/src/switch/switch.ts

@@ -1,4 +1,4 @@
-import AeicoField from '../aeico-field';
+import AeicoField, { type FieldAction } from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { html } from 'aeico';
 import styleVariables from '../styles/variables.css?inline';
@@ -6,7 +6,7 @@ import sizeCSS from '../styles/size.css?inline';
 import colorCSS from '../styles/color.css?inline';
 import styles from '../styles/components/switch.css?inline';
 
-class Switch extends AeicoField {
+class Switch extends AeicoField<boolean> {
   protected fieldElement: HTMLInputElement | null = null;
 
   static tagName = 'switch';
@@ -31,11 +31,11 @@ class Switch extends AeicoField {
     }
   }
 
-  protected getEventPayload(checked: boolean, oldChecked: boolean, action: any) {
+  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {
     return { checked, oldChecked, action };
   }
 
-  protected setValue(checked: boolean, options?: { silent?: boolean; action?: any }): void {
+  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {
     const oldChecked = this.getValue();
     this.checked = checked;
     this.writeValue(checked);

package/src/tabs/tab.ts

@@ -19,7 +19,6 @@ class Tab extends AeicoComponent {
   connectedCallback() {
     this.setAttribute('slot', 'tab');
     super.connectedCallback();
-    this.listen('click', this._handleClick);
   }
 
   private _handleClick = () => {
@@ -42,6 +41,7 @@ class Tab extends AeicoComponent {
           'aria-selected': this.active,
           'aria-disabled': this.disabled,
           disabled: this.disabled,
+          '@click': this._handleClick,
         },
         () => {
           slot();

package/src/tabs/tabs.ts

@@ -66,7 +66,6 @@ class Tabs extends AeicoComponent {
 
   connectedCallback() {
     super.connectedCallback();
-    this.listen('_tab-click', this._handleTabClick);
     this._observer = new MutationObserver(() => this.update());
     this._observer.observe(this, { childList: true });
   }
@@ -113,7 +112,7 @@ class Tabs extends AeicoComponent {
 
   protected render() {
     return html(({ nav, div, slot }) => {
-      nav({ part: 'tab-nav', role: 'tablist' }, () => {
+      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {
         slot({ name: 'tab' });
       });
       div({ part: 'panels' }, () => {

package/src/utils.ts

@@ -2,5 +2,6 @@ export const SVG_NS = 'http://www.w3.org/2000/svg';
 
 export function toKebab(str: string): string {
   const cleaned = str.replace(/^[_\d]+/, '');
+
   return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 }