aeico-components 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeico-components",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Built-in UI components for the Aeico Web Components framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,6 +24,7 @@
     "src"
   ],
   "sideEffects": [
+    "./src/icon/built-in-icons.ts",
     "./dist/*.js",
     "./dist/*.cjs",
     "./dist/chunks/*.js",
@@ -49,14 +50,13 @@
     "components",
     "aeico"
   ],
-  "author": "",
-  "license": "ISC",
+  "author": "Eowl",
+  "license": "MIT",
   "peerDependencies": {
-    "aeico": "^0.1.3",
-    "aeico-localize": "^0.1.1"
+    "aeico": "^0.1.5"
   },
   "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

@@ -1,10 +1,10 @@
 import type { InferProps, Props, Watchers } from 'aeico';
 import { tags } from 'aeico';
 import AeicoComponent from './aeico-component';
-import { t } from 'aeico-localize';
 
 export type FieldAction = 'clear' | 'reset' | 'change';
 export type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export type ActionButtonStyle = 'standalone' | 'integrated';
 
 /**
  * Base class for form field components
@@ -25,10 +25,18 @@ class AeicoField<TValue = string> extends AeicoComponent {
     defaultValue: { type: String },
     resettable: { type: Boolean },
     resetText: { type: String },
+    resetTitle: { type: String },
     clearable: { type: Boolean },
     clearText: { type: String },
+    clearTitle: { type: String },
+    actionButtonStyle: { type: String },
     size: { type: String },
     disabled: { type: Boolean },
+    label: { type: String },
+    labelPlacement: { type: String },
+    required: { type: Boolean },
+    helperText: { type: String },
+    error: { type: String },
   };
 
   /**
@@ -36,8 +44,17 @@ class AeicoField<TValue = string> extends AeicoComponent {
    */
   static watchers: Watchers = {
     disabled: 'onDisabledChanged',
+    error: 'onErrorChanged',
   };
 
+  private static _fieldIdCounter = 0;
+  private readonly _fieldId: string;
+
+  constructor() {
+    super();
+    this._fieldId = `ae-field-${++AeicoField._fieldIdCounter}`;
+  }
+
   /**
    * The underlying form control element (input, select, etc.)
    * Subclasses should set this to their specific element
@@ -58,10 +75,18 @@ class AeicoField<TValue = string> extends AeicoComponent {
   declare defaultValue?: TValue | string;
   declare resettable?: boolean;
   declare resetText?: string;
+  declare resetTitle?: string;
   declare clearable?: boolean;
   declare clearText?: string;
+  declare clearTitle?: string;
+  declare actionButtonStyle?: ActionButtonStyle;
   declare size?: string;
   declare disabled?: boolean;
+  declare label?: string;
+  declare labelPlacement?: 'top' | 'left';
+  declare required?: boolean;
+  declare helperText?: string;
+  declare error?: string;
 
   /**
    * Lifecycle: Component connected to DOM
@@ -82,18 +107,30 @@ class AeicoField<TValue = string> extends AeicoComponent {
    * Must be called from within a build() callback.
    */
   protected renderActionButtons(force: boolean = false) {
-    this.renderClearButton(force);
-    this.renderResetButton(force);
+    const style = this.actionButtonStyle || 'integrated';
+    const hasActions = force || this.clearable || this.resettable;
+
+    if (hasActions && style === 'integrated') {
+      tags.div({ className: 'action-controls' }, () => {
+        this.renderClearButton(force);
+        this.renderResetButton(force);
+      });
+    } else {
+      this.renderClearButton(force);
+      this.renderResetButton(force);
+    }
   }
 
   protected renderResetButton(force: boolean = false) {
     const { button } = tags;
+    const style = this.actionButtonStyle || 'integrated';
 
     if (force || this.resettable) {
+      const className = style === 'integrated' ? 'reset-btn action-btn' : 'reset-btn';
       this.resetBtn = button({
-        className: 'reset-btn',
+        className,
         textContent: this.resetText || '↺',
-        title: t('buttons.reset', '↺'),
+        title: this.resetTitle || '↺',
         '@click': this.boundOnReset,
       });
     }
@@ -101,17 +138,63 @@ class AeicoField<TValue = string> extends AeicoComponent {
 
   protected renderClearButton(force: boolean = false) {
     const { button } = tags;
+    const style = this.actionButtonStyle || 'integrated';
 
     if (force || this.clearable) {
+      const className = style === 'integrated' ? 'clear-btn action-btn' : 'clear-btn';
       this.clearBtn = button({
-        className: 'clear-btn',
+        className,
         textContent: this.clearText || '✕',
-        title: t('buttons.clear', '✕'),
+        title: this.clearTitle || '✕',
         '@click': this.boundOnClear,
       });
     }
   }
 
+  /**
+   * Returns a stable unique ID for this field instance,
+   * used to associate <label htmlFor> with the underlying input.
+   */
+  protected getFieldId(): string {
+    return this._fieldId;
+  }
+
+  /**
+   * Renders a <label> element when the `label` prop is set.
+   * Call this as the first statement inside the render() html() callback.
+   * @param fieldId - The id to set on the underlying form control element (pass to input via id prop)
+   */
+  protected renderLabel(fieldId: string): void {
+    if (!this.label) return;
+    const { span } = tags;
+    tags.label({ id: `${fieldId}-label`, className: 'field-label', for: fieldId }, () => {
+      span({ textContent: this.label! });
+      if (this.required) {
+        span({ className: 'field-required', 'aria-hidden': 'true', textContent: ' *' });
+      }
+    });
+  }
+
+  /**
+   * Renders helper text below the field. Hidden when `error` is set.
+   * Call this after the field-body div in render().
+   */
+  protected renderHelperText(): void {
+    if (!this.helperText || this.error) return;
+    const { span } = tags;
+    span({ className: 'field-helper', textContent: this.helperText });
+  }
+
+  /**
+   * Renders an error message below the field when `error` is set.
+   * Call this after renderHelperText() in render().
+   */
+  protected renderError(): void {
+    if (!this.error) return;
+    const { span } = tags;
+    span({ className: 'field-error', textContent: this.error });
+  }
+
   /**
    * Watcher for disabled property
    */
@@ -121,6 +204,58 @@ class AeicoField<TValue = string> extends AeicoComponent {
     }
   }
 
+  /**
+   * Watcher for error property — syncs aria-invalid on the field element
+   */
+  protected onErrorChanged(newValue: string | undefined): void {
+    if (this.fieldElement) {
+      if (newValue) {
+        this.fieldElement.setAttribute('aria-invalid', 'true');
+      } else {
+        this.fieldElement.removeAttribute('aria-invalid');
+      }
+    }
+  }
+
+  /**
+   * Lifecycle: called after every render update.
+   * Keeps aria-invalid on fieldElement in sync regardless of watcher timing.
+   */
+  protected onUpdated(_changedProps: Map<string, unknown>): void {
+    if (!this.fieldElement) return;
+    if (this.error) {
+      this.fieldElement.setAttribute('aria-invalid', 'true');
+    } else {
+      this.fieldElement.removeAttribute('aria-invalid');
+    }
+  }
+
+  /**
+   * Returns true if the field passes constraint validation.
+   * Delegates to the underlying fieldElement when available;
+   * falls back to a manual required-check otherwise.
+   */
+  public checkValidity(): boolean {
+    if (this.fieldElement) {
+      return this.fieldElement.checkValidity();
+    }
+    if (this.required) {
+      const v = this.value;
+      return v !== undefined && v !== '' && v !== null;
+    }
+    return true;
+  }
+
+  /**
+   * Reports validity, showing the browser's built-in validation UI when possible.
+   */
+  public reportValidity(): boolean {
+    if (this.fieldElement) {
+      return this.fieldElement.reportValidity();
+    }
+    return this.checkValidity();
+  }
+
   /**
    * Render the field component
    * Override in subclass to provide custom rendering
@@ -136,8 +271,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 +281,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 +294,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 +310,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 +332,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 +343,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/alert/alert.ts

@@ -4,7 +4,6 @@ import colorCSS from '../styles/color.css?inline';
 import alertStyle from '../styles/components/alert.css?inline';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
-import { t } from 'aeico-localize';
 import type { AlertColor, AlertSize, AlertVariant } from './defines';
 
 /**
@@ -39,6 +38,7 @@ class Alert extends AeicoComponent {
     size: { type: String },
     dismissible: { type: Boolean },
     invisible: { type: Boolean },
+    closeText: { type: String },
   };
 
   protected static useStyles = ['alert'];
@@ -49,6 +49,7 @@ class Alert extends AeicoComponent {
   declare size?: AlertSize;
   declare dismissible?: boolean;
   declare invisible?: boolean;
+  declare closeText?: string;
 
   protected render() {
     return html(({ div, slot, button, span }) => {
@@ -67,7 +68,7 @@ class Alert extends AeicoComponent {
               {
                 className: 'alert-close',
                 '@click': () => this._handleClose(),
-                title: t('alert.close', 'Close alert'),
+                title: this.closeText || 'Close alert',
               },
               () => {
                 span({ 'aria-hidden': 'true', textContent: '\u00d7' });

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

package/src/checkbox/checkbox.ts

@@ -1,13 +1,15 @@
-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';
 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 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';
@@ -22,7 +24,14 @@ class Checkbox extends AeicoField {
   declare defaultChecked?: boolean;
   declare variant?: CheckboxVariant;
 
-  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];
+  protected static styles = [
+    styleVariables,
+    sizeCSS,
+    colorCSS,
+    fieldLabelCSS,
+    actionButtonCSS,
+    styles,
+  ];
 
   protected getValue(): boolean {
     return this.fieldElement?.checked ?? false;
@@ -34,11 +43,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);
@@ -62,18 +71,24 @@ class Checkbox extends AeicoField {
 
   render() {
     return html(({ div, input }) => {
-      div({ className: 'checkbox-container', variant: this.variant }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: 'checkbox-container field-body', variant: this.variant }, () => {
         div({ className: 'checkbox-wrapper' }, () => {
           this.fieldElement = input({
+            id,
             type: 'checkbox',
             className: 'field-input',
             checked: Boolean(this.checked),
             disabled: Boolean(this.disabled),
+            required: Boolean(this.required),
             '@change': this.boundOnChange,
           });
         });
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
     });
   }
 }

package/src/copy-button/copy-button.ts

@@ -0,0 +1,146 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import copyButtonStyle from '../styles/components/copy-button.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import { prop } from 'aeico';
+// Ensure ae-icon and ae-tooltip are registered
+import '../icon/icon';
+import '../tooltip/tooltip';
+import type Tooltip from '../tooltip/tooltip';
+import type { TooltipPlacement } from '../tooltip/defines';
+import type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';
+
+class CopyButton extends AeicoComponent {
+  protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];
+
+  @prop({ type: String })
+  accessor text: string | undefined;
+
+  @prop({ type: String })
+  accessor color: CopyButtonColor | undefined;
+
+  @prop({ type: String })
+  accessor variant: CopyButtonVariant | undefined;
+
+  @prop({ type: String })
+  accessor size: CopyButtonSize | undefined;
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean | undefined;
+
+  @prop({ type: Number })
+  accessor duration: number | undefined;
+
+  @prop({ type: String })
+  accessor tooltip: string = 'Copy';
+
+  @prop({ type: String })
+  accessor tooltipCopied: string = 'Copied!';
+
+  @prop({ type: String })
+  accessor tooltipPlacement: TooltipPlacement = 'top';
+
+  private _slotElement: HTMLSlotElement | null = null;
+  private _tooltipEl: Tooltip | null = null;
+  private _resetTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private _getTextToCopy(): string {
+    if (this.text != null) return this.text;
+    const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];
+    return nodes
+      .filter((n) => n.nodeType === Node.TEXT_NODE)
+      .map((n) => n.textContent ?? '')
+      .join('')
+      .trim();
+  }
+
+  private _handleClick = () => {
+    if (this.disabled) return;
+
+    const textToCopy = this._getTextToCopy();
+
+    void navigator.clipboard.writeText(textToCopy).then(() => {
+      this.setAttribute('copied', '');
+
+      if (this._tooltipEl) {
+        this._tooltipEl.content = this.tooltipCopied;
+        this._tooltipEl.open = true;
+      }
+
+      if (this._resetTimer !== null) {
+        clearTimeout(this._resetTimer);
+      }
+      const duration = this.duration ?? 2000;
+      this._resetTimer = setTimeout(() => {
+        this.removeAttribute('copied');
+        if (this._tooltipEl) {
+          this._tooltipEl.content = this.tooltip;
+          this._tooltipEl.open = false;
+        }
+        this._resetTimer = null;
+      }, duration);
+
+      this.dispatchEvent(
+        new CustomEvent('copy', {
+          bubbles: true,
+          composed: true,
+          detail: { text: textToCopy },
+        }),
+      );
+    });
+  };
+
+  protected onUnmounted() {
+    if (this._resetTimer !== null) {
+      clearTimeout(this._resetTimer);
+      this._resetTimer = null;
+    }
+  }
+
+  protected render() {
+    return html(({ aeTooltip, button, span, slot, aeIcon }) => {
+      this._tooltipEl = aeTooltip(
+        {
+          content: this.tooltip,
+          placement: this.tooltipPlacement,
+          disabled: this.disabled,
+        },
+        () => {
+          button(
+            {
+              type: 'button',
+              disabled: this.disabled,
+              part: 'button',
+              'aria-label': this.tooltip,
+              'aria-disabled': this.disabled,
+              '@click': this._handleClick,
+            },
+            () => {
+              span({ className: 'icon-copy' }, () => {
+                aeIcon({ name: 'copy' });
+              });
+              span({ className: 'icon-check' }, () => {
+                aeIcon({ name: 'check' });
+              });
+              this._slotElement = slot();
+            },
+          );
+        },
+      );
+    });
+  }
+}
+
+CopyButton.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-copy-button': CopyButton;
+  }
+}
+
+export default CopyButton;
+export type CopyButtonProps = InferProps<typeof CopyButton>;

package/src/copy-button/defines.ts

@@ -0,0 +1,5 @@
+export type {
+  ButtonColor as CopyButtonColor,
+  ButtonVariant as CopyButtonVariant,
+  ButtonSize as CopyButtonSize,
+} from '../button/defines';

package/src/copy-button/index.ts

@@ -0,0 +1,3 @@
+export { default, default as CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';
+export type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';

package/src/detail/defines.ts

@@ -1,4 +1,5 @@
 export type DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type DetailIconPlacement = 'start' | 'end';
 export type DetailColor =
   | 'default'
   | 'primary'

package/src/detail/detail.ts

@@ -5,7 +5,7 @@ import detailStyle from '../styles/components/detail.css?inline';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import { prop } from 'aeico';
-import type { DetailColor, DetailVariant } from './defines';
+import type { DetailColor, DetailVariant, DetailIconPlacement } from './defines';
 
 /**
  * Detail component that can be used to show/hide additional content.
@@ -35,6 +35,9 @@ class Detail extends AeicoComponent {
   @prop({ type: Boolean })
   accessor disabled: boolean = false;
 
+  @prop({ type: String })
+  accessor iconPlacement: DetailIconPlacement = 'end';
+
   private _open: boolean = false;
 
   /** Opens the detail panel. */
@@ -120,3 +123,4 @@ declare global {
 
 export default Detail;
 export type DetailProps = InferProps<typeof Detail>;
+export type { DetailIconPlacement };