aeico-components 0.1.5 → 0.1.6

package/src/pagination/pagination.ts

@@ -0,0 +1,310 @@
+import { html, prop, tags } from 'aeico';
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import styleVariables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import paginationStyle from '../styles/components/pagination.css?inline';
+import type { PaginationSize, PaginationVariant } from './defines';
+import '../icon/icon';
+
+type PageItem = number | 'ellipsis-start' | 'ellipsis-end';
+
+/**
+ * Pagination component for navigating between pages of content.
+ *
+ * @prop {number} page - Current page number (1-indexed). Default: 1.
+ * @prop {number} pageSize - Number of items per page. Default: 10.
+ * @prop {number} total - Total number of items. Used to compute pageCount when pageCount is not set.
+ * @prop {number} pageCount - Total number of pages. Overrides total/pageSize calculation when set.
+ * @prop {number} siblingCount - Number of page buttons to show on each side of the current page. Default: 1.
+ * @prop {'xs'|'sm'|'md'|'lg'} size - Size variant.
+ * @prop {boolean} disabled - Disables all interactive controls.
+ * @prop {boolean} simple - Simple mode: shows only prev/next buttons and a page number input.
+ * @prop {boolean} showFirstLast - Show dedicated first-page and last-page jump buttons.
+ * @prop {'borderless'|'link'} variant - Visual variant. `borderless` removes borders; `link` renders page numbers as plain text links with no borders or backgrounds.
+ *
+ * @event {CustomEvent<{page: number}>} change - Fired when the page changes.
+ *
+ * @slot prev - Custom content for the previous-page button (default: chevron-left icon).
+ * @slot next - Custom content for the next-page button (default: chevron-right icon).
+ * @slot first - Custom content for the first-page button (default: chevrons-left icon). Requires showFirstLast.
+ * @slot last - Custom content for the last-page button (default: chevrons-right icon). Requires showFirstLast.
+ *
+ * @csspart root - The outer <nav> element.
+ * @csspart prev - The previous-page button.
+ * @csspart next - The next-page button.
+ * @csspart first - The first-page button (visible when showFirstLast).
+ * @csspart last - The last-page button (visible when showFirstLast).
+ * @csspart item - A page number button.
+ * @csspart ellipsis - An ellipsis span between page groups.
+ * @csspart page-input - The page number input in simple mode.
+ * @csspart page-total - The "/ N" label in simple mode.
+ *
+ * @example
+ * ```html
+ * <ae-pagination total="100" page-size="10" page="1"></ae-pagination>
+ * ```
+ */
+class Pagination extends AeicoComponent {
+  static tagName = 'pagination';
+
+  protected static styles = [styleVariables, sizeCSS, paginationStyle];
+
+  @prop({ type: Number })
+  accessor page: number = 1;
+
+  @prop({ type: Number })
+  accessor pageSize: number = 10;
+
+  @prop({ type: Number })
+  accessor total: number = 0;
+
+  @prop({ type: Number })
+  accessor pageCount: number | undefined;
+
+  @prop({ type: Number })
+  accessor siblingCount: number = 1;
+
+  @prop({ type: String })
+  accessor size: PaginationSize | undefined;
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor simple: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor showFirstLast: boolean = false;
+
+  @prop({ type: String })
+  accessor variant: PaginationVariant | undefined;
+
+  private _simpleInput: HTMLInputElement | null = null;
+
+  private get _computedPageCount(): number {
+    if (this.pageCount != null) return Math.max(1, this.pageCount);
+    const ps = this.pageSize > 0 ? this.pageSize : 10;
+    return Math.max(1, Math.ceil(this.total / ps));
+  }
+
+  private get _currentPage(): number {
+    const count = this._computedPageCount;
+    return Math.max(1, Math.min(this.page ?? 1, count));
+  }
+
+  private _getPageItems(): PageItem[] {
+    const count = this._computedPageCount;
+    const page = this._currentPage;
+    const sc = Math.max(0, this.siblingCount ?? 1);
+
+    const rangeStart = Math.max(2, page - sc);
+    const rangeEnd = Math.min(count - 1, page + sc);
+
+    const showLeftEllipsis = rangeStart > 2;
+    const showRightEllipsis = rangeEnd < count - 1;
+
+    const items: PageItem[] = [];
+
+    // First page always shown
+    items.push(1);
+
+    if (count <= 1) return items;
+
+    // Left side
+    if (showLeftEllipsis) {
+      items.push('ellipsis-start');
+    } else {
+      for (let i = 2; i < rangeStart; i++) items.push(i);
+    }
+
+    // Sibling range (bounded to 2..count-1)
+    for (let i = rangeStart; i <= rangeEnd; i++) items.push(i);
+
+    // Right side
+    if (showRightEllipsis) {
+      items.push('ellipsis-end');
+    } else {
+      for (let i = rangeEnd + 1; i < count; i++) items.push(i);
+    }
+
+    // Last page always shown
+    items.push(count);
+
+    return items;
+  }
+
+  private _goToPage(page: number): void {
+    const count = this._computedPageCount;
+    const next = Math.max(1, Math.min(count, page));
+    if (next === this._currentPage) return;
+    this.page = next;
+    this.emit('change', { detail: { page: this.page } });
+  }
+
+  private _handleItemClick = (e: Event): void => {
+    const btn = e.currentTarget as HTMLElement;
+    const p = Number(btn.dataset.page);
+    if (!isNaN(p)) this._goToPage(p);
+  };
+
+  private _handlePrevClick = (): void => {
+    this._goToPage(this._currentPage - 1);
+  };
+  private _handleNextClick = (): void => {
+    this._goToPage(this._currentPage + 1);
+  };
+  private _handleFirstClick = (): void => {
+    this._goToPage(1);
+  };
+  private _handleLastClick = (): void => {
+    this._goToPage(this._computedPageCount);
+  };
+
+  private _handleSimpleInputChange = (e: Event): void => {
+    const input = e.target as HTMLInputElement;
+    const val = parseInt(input.value, 10);
+    if (!isNaN(val)) {
+      this._goToPage(val);
+    }
+
+    input.value = String(this._currentPage);
+  };
+
+  protected onUpdated(): void {
+    if (this._simpleInput) {
+      this._simpleInput.value = String(this._currentPage);
+    }
+  }
+
+  private _renderNavBtn(
+    name: 'first' | 'prev' | 'next' | 'last',
+    iconName: string,
+    label: string,
+    disabled: boolean,
+    onClick: () => void,
+  ): void {
+    const { button, slot, aeIcon } = tags;
+
+    button(
+      {
+        key: name,
+        part: name,
+        className: 'nav-btn',
+        disabled,
+        'aria-label': label,
+        '@click': onClick,
+      },
+      () => {
+        slot({ name }, () => {
+          aeIcon({ name: iconName });
+        });
+      },
+    );
+  }
+
+  private _renderSimpleMode(page: number, count: number, disabled: boolean): void {
+    this._simpleInput = tags.input({
+      key: 'page-input',
+      part: 'page-input',
+      type: 'number',
+      min: '1',
+      max: String(count),
+      value: String(page),
+      disabled,
+      'aria-label': 'Page number',
+      '@change': this._handleSimpleInputChange,
+    });
+    tags.span({ key: 'page-total', part: 'page-total', textContent: `/ ${count}` });
+  }
+
+  private _renderPageItems(page: number, disabled: boolean): void {
+    for (const item of this._getPageItems()) {
+      if (item === 'ellipsis-start' || item === 'ellipsis-end') {
+        tags.span({
+          key: item,
+          part: 'ellipsis',
+          className: 'ellipsis',
+          'aria-hidden': 'true',
+          textContent: '…',
+        });
+      } else {
+        const isActive = item === page;
+        tags.button({
+          key: `item-${item}`,
+          part: isActive ? 'item item-active' : 'item',
+          className: isActive ? 'item active' : 'item',
+          disabled,
+          'aria-current': isActive ? 'page' : undefined,
+          'aria-label': `Page ${item}`,
+          'data-page': String(item),
+          textContent: String(item),
+          '@click': this._handleItemClick,
+        });
+      }
+    }
+  }
+
+  protected render() {
+    const count = this._computedPageCount;
+    const page = this._currentPage;
+    const disabled = this.disabled;
+    const isFirst = page <= 1;
+    const isLast = page >= count;
+
+    return html(({ nav }) => {
+      nav({ part: 'root', role: 'navigation', 'aria-label': 'Pagination' }, () => {
+        if (this.showFirstLast)
+          this._renderNavBtn(
+            'first',
+            'chevrons-left',
+            'First page',
+            disabled || isFirst,
+            this._handleFirstClick,
+          );
+
+        this._renderNavBtn(
+          'prev',
+          'chevron-left',
+          'Previous page',
+          disabled || isFirst,
+          this._handlePrevClick,
+        );
+
+        if (this.simple) {
+          this._renderSimpleMode(page, count, disabled);
+        } else {
+          this._renderPageItems(page, disabled);
+        }
+
+        this._renderNavBtn(
+          'next',
+          'chevron-right',
+          'Next page',
+          disabled || isLast,
+          this._handleNextClick,
+        );
+
+        if (this.showFirstLast)
+          this._renderNavBtn(
+            'last',
+            'chevrons-right',
+            'Last page',
+            disabled || isLast,
+            this._handleLastClick,
+          );
+      });
+    });
+  }
+}
+
+Pagination.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-pagination': Pagination;
+  }
+}
+
+export default Pagination;
+export type PaginationProps = InferProps<typeof Pagination>;

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

@@ -2,13 +2,14 @@
 import type { InferProps, Props } from 'aeico';
 import { html, tags } from 'aeico';
 import type { ButtonColor, ButtonVariant, ButtonSize } from '../button';
-import { t } from 'aeico-localize';
 import type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';
 import Radio from './radio';
 import style from '../styles/components/radio-group.css?inline';
 import variables from '../styles/variables.css?inline';
 import sizeCSS from '../styles/size.css?inline';
 import colorCSS from '../styles/color.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 
 class RadioGroup extends AeicoField {
   protected fieldElement: HTMLInputElement | null = null;
@@ -37,7 +38,7 @@ class RadioGroup extends AeicoField {
   declare size?: ButtonSize;
   declare allowEmpty?: boolean;
 
-  protected static styles = [variables, sizeCSS, colorCSS, style];
+  protected static styles = [variables, sizeCSS, colorCSS, fieldLabelCSS, actionButtonCSS, style];
 
   constructor() {
     super();
@@ -46,7 +47,7 @@ class RadioGroup extends AeicoField {
 
   private _optLabel(opt: RadioGroupOption): string {
     if (opt !== null && typeof opt === 'object') {
-      return t(String(opt.label), String(opt.label));
+      return String(opt.label);
     }
     return String(opt);
   }
@@ -137,7 +138,9 @@ class RadioGroup extends AeicoField {
     const current = this.value ?? '';
 
     return html(({ div, slot }) => {
-      div({ className: 'rg-container' }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ id, role: 'group', className: 'rg-container field-body' }, () => {
         if (mode === 'default') {
           this._renderRadio(opts, current);
         } else {
@@ -153,6 +156,9 @@ class RadioGroup extends AeicoField {
         style: { display: 'none' },
         '@slotchange': () => this._onSlotChange(),
       });
+
+      this.renderHelperText();
+      this.renderError();
     });
   }
 
@@ -171,6 +177,7 @@ class RadioGroup extends AeicoField {
           name: this._groupName,
           value: opt.value,
           disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+          required: Boolean(this.required),
           '@click': this._boundOnRadioClick,
         });
         // Sync DOM property directly — setAttribute('checked') doesn't work

package/src/select/select.ts

@@ -1,7 +1,6 @@
 import AeicoField from '../aeico-field';
 import type { InferProps } from 'aeico';
 import { html, tags } from 'aeico';
-import { t } from 'aeico-localize';
 import type {
   SelectOptionValue,
   SelectOption,
@@ -12,6 +11,8 @@ import type {
 import style from '../styles/components/select.css?inline';
 import variables from '../styles/variables.css?inline';
 import sizeCSS from '../styles/size.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 import SelectOptionElement from './select-option';
 import '../tag/tag';
 import { prop } from 'aeico';
@@ -28,7 +29,7 @@ import { prop } from 'aeico';
  *
  */
 class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
-  protected fieldElement = null;
+  protected fieldElement: HTMLInputElement | null = null;
   private _isOpen = false;
   private _triggerEl: HTMLElement | null = null;
   private _dropdownEl: HTMLElement | null = null;
@@ -101,7 +102,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
   })
   override defaultValue: SelectOptionValue | SelectMultiValue | undefined = undefined;
 
-  protected static styles = [variables, sizeCSS, style];
+  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];
 
   protected writeValue(_value: SelectOptionValue | SelectMultiValue): void {
     // Reactive re-render via this.value prop change handles the display update
@@ -124,7 +125,8 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     // disabled is a reactive prop — render() already picks it up automatically
   }
 
-  protected onUpdated(_changedProps: Map<string, unknown>): void {
+  protected onUpdated(changedProps: Map<string, unknown>): void {
+    super.onUpdated(changedProps);
     if (!this.multiple || this.expandable) {
       if (this._expanded) this._expanded = false;
       return;
@@ -140,7 +142,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     if (Array.isArray(this.options)) {
       for (const opt of this.options) {
         if (this._isSelectOption(opt)) {
-          if (String(opt.value) === strVal) return t(opt.label, opt.label);
+          if (String(opt.value) === strVal) return opt.label;
         } else {
           if (String(opt) === strVal) return strVal;
         }
@@ -261,74 +263,113 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     this._syncSlotOptionsSelected();
 
     return html(({ div, span, slot }) => {
-      div({ className: 'container' }, () => {
-        this._triggerEl = div(
-          {
-            className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,
-            '@click': () => {
-              if (isDisabled) return;
-
-              this._toggleDropdown();
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div(
+        {
+          id,
+          'aria-labelledby': this.label ? `${id}-label` : undefined,
+          className: 'container field-body',
+        },
+        () => {
+          this._triggerEl = div(
+            {
+              className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,
+              '@click': () => {
+                if (isDisabled) return;
+
+                this._toggleDropdown();
+              },
             },
-          },
-          () => {
-            if (this.multiple) {
-              if (hasMultiSelection) {
-                this._selectedListEl = div(
-                  {
-                    className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,
-                  },
-                  () => {
-                    for (const v of multiValues) {
-                      const lbl = this._findLabel(v);
-                      tags.aeTag({
-                        key: `sel-${v}`,
-                        color: 'default',
-                        variant: 'faint',
-                        dismissible: true,
-                        disabled: isDisabled,
-                        textContent: lbl,
-                        '@dismiss': (e: Event) => {
-                          e.stopPropagation();
-                          if (isDisabled) return;
-
-                          const next = multiValues.filter((item) => String(item) !== String(v));
-                          this.setValue(next, { silent: false, action: 'change' });
-                        },
-                      });
-                    }
-                  },
-                );
-                if (!this.expandable && this._expanded) {
-                  span({ className: 'overflow-indicator', textContent: '…' });
+            () => {
+              if (this.multiple) {
+                if (hasMultiSelection) {
+                  this._selectedListEl = div(
+                    {
+                      className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,
+                    },
+                    () => {
+                      for (const v of multiValues) {
+                        const lbl = this._findLabel(v);
+                        tags.aeTag({
+                          key: `sel-${v}`,
+                          color: 'default',
+                          variant: 'faint',
+                          dismissible: true,
+                          disabled: isDisabled,
+                          textContent: lbl,
+                          '@dismiss': (e: Event) => {
+                            e.stopPropagation();
+                            if (isDisabled) return;
+
+                            const next = multiValues.filter((item) => String(item) !== String(v));
+                            this.setValue(next, { silent: false, action: 'change' });
+                          },
+                        });
+                      }
+                    },
+                  );
+                  if (!this.expandable && this._expanded) {
+                    span({ className: 'overflow-indicator', textContent: '…' });
+                  }
+                } else {
+                  span({ className: 'value placeholder', textContent: this.placeholder || '' });
                 }
               } else {
-                span({ className: 'value placeholder', textContent: this.placeholder || '' });
-              }
-            } else {
-              if (selectedLabel) {
-                span({ className: 'value', textContent: selectedLabel });
-              } else {
-                span({ className: 'value placeholder', textContent: this.placeholder || '' });
+                if (selectedLabel) {
+                  span({ className: 'value', textContent: selectedLabel });
+                } else {
+                  span({ className: 'value placeholder', textContent: this.placeholder || '' });
+                }
               }
-            }
-            span({ className: 'arrow', textContent: '▾' });
-          },
-        );
-
-        this._dropdownEl = div(
-          {
-            className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,
-          },
-          () => {
-            this._renderProgrammaticOptions();
-            this._slotEl = slot({
-              '@slotchange': () => this._onSlotChange(),
-            });
-          },
-        );
-
-        this.renderActionButtons();
+              span({ className: 'arrow', textContent: '▾' });
+            },
+          );
+
+          this._dropdownEl = div(
+            {
+              className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,
+            },
+            () => {
+              this._renderProgrammaticOptions();
+              this._slotEl = slot({
+                '@slotchange': () => this._onSlotChange(),
+              });
+            },
+          );
+
+          this.renderActionButtons();
+        },
+      );
+      this.renderHelperText();
+      this.renderError();
+
+      // Visually-hidden input so native form constraint validation works for `required`.
+      // type="text" (not "hidden") is required — type="hidden" is exempt from constraint validation.
+      const currentValue =
+        this.value != null &&
+        this.value !== '' &&
+        !(Array.isArray(this.value) && this.value.length === 0)
+          ? String(this.value)
+          : '';
+      this.fieldElement = tags.input({
+        key: 'validation-input',
+        type: 'text',
+        'aria-hidden': 'true',
+        tabIndex: -1,
+        required: Boolean(this.required),
+        value: currentValue,
+        style: {
+          position: 'absolute',
+          width: '0',
+          height: '0',
+          opacity: '0',
+          margin: '0',
+          padding: '0',
+          border: '0',
+          pointerEvents: 'none',
+          overflow: 'hidden',
+        },
       });
     });
   }
@@ -347,7 +388,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
           key: `opt-${opt.value}`,
           value: String(opt.value),
           label: opt.label,
-          textContent: t(opt.label, opt.label),
+          textContent: opt.label,
           selected: isSelected ? true : undefined,
         });
       } else {

package/src/slider/slider.ts

@@ -6,6 +6,8 @@ import style from '../styles/components/slider.css?inline';
 import variables from '../styles/variables.css?inline';
 import sizeCSS from '../styles/size.css?inline';
 import colorCSS from '../styles/color.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 import { prop } from 'aeico';
 
 class Slider extends AeicoField {
@@ -55,7 +57,7 @@ class Slider extends AeicoField {
   })
   accessor marks: SliderMarks | undefined;
 
-  protected static styles = [variables, sizeCSS, colorCSS, style];
+  protected static styles = [variables, sizeCSS, colorCSS, fieldLabelCSS, actionButtonCSS, style];
 
   constructor() {
     super();
@@ -243,11 +245,14 @@ class Slider extends AeicoField {
     const attrs = this._getRangeAttrs(normalized);
 
     return html(({ div, input, span }) => {
-      div({ className: 'range-container' }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: 'range-container field-body' }, () => {
         // Wrap range + optional marks in a column so marks don't push siblings
         div({ key: 'range-wrapper', className: 'range-wrapper' }, () => {
           this.fieldElement = input({
             key: 'range',
+            id,
             type: 'range',
             min: attrs.min,
             max: attrs.max,
@@ -303,6 +308,8 @@ class Slider extends AeicoField {
       });
 
       if (this.value != null) this.writeValue(this.value);
+      this.renderHelperText();
+      this.renderError();
     });
   }
 

package/src/spinner/defines.ts

@@ -0,0 +1,12 @@
+export type SpinnerVariant = 'border' | 'dots';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+export type SpinnerColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';

package/src/spinner/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Spinner } from './spinner';
+export type { SpinnerProps } from './spinner';
+export type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';