aeico-components 0.1.5 → 0.1.7

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

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/card/defines.ts

@@ -1,4 +1,4 @@
-export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';
 export type CardColor =
   | 'default'
   | 'primary'

package/src/checkbox/checkbox.ts

@@ -4,6 +4,8 @@ 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';
 
@@ -22,7 +24,14 @@ class Checkbox extends AeicoField<boolean> {
   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;
@@ -62,18 +71,24 @@ class Checkbox extends AeicoField<boolean> {
 
   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,150 @@
+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
+      .reduce<string>((text, n) => {
+        if (n.nodeType === Node.TEXT_NODE) return text + (n.textContent ?? '');
+
+        return text;
+      }, '')
+      .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', size: this.size });
+              });
+              span({ className: 'icon-check' }, () => {
+                aeIcon({ name: 'check', size: this.size });
+              });
+              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 DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';
+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 };

package/src/detail/index.ts

@@ -1,3 +1,3 @@
 export { default, default as Detail } from './detail';
 export type { DetailProps } from './detail';
-export type { DetailVariant, DetailColor } from './defines';
+export type { DetailVariant, DetailColor, DetailIconPlacement } from './defines';

package/src/detail-group/detail-group.ts

@@ -0,0 +1,104 @@
+import type { InferProps, Props } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import detailGroupStyle from '../styles/components/detail-group.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import type Detail from '../detail/detail';
+import type { DetailColor, DetailVariant } from '../detail/defines';
+
+/**
+ * DetailGroup component — wraps multiple `ae-detail` elements into an
+ * accordion-style group. By default only one item can be open at a time;
+ * set `multiple` to allow several items open simultaneously.
+ *
+ * @example
+ * ```html
+ * <ae-detail-group>
+ *   <ae-detail summary="Section 1">Content 1</ae-detail>
+ *   <ae-detail summary="Section 2">Content 2</ae-detail>
+ *   <ae-detail summary="Section 3">Content 3</ae-detail>
+ * </ae-detail-group>
+ * ```
+ */
+class DetailGroup extends AeicoComponent {
+  static tagName = 'detail-group';
+
+  static props: Props = {
+    multiple: { type: Boolean },
+    variant: { type: String },
+    color: { type: String },
+  };
+
+  protected static styles = [styleVariables, detailGroupStyle];
+
+  declare multiple?: boolean;
+  declare variant?: DetailVariant;
+  declare color?: DetailColor;
+
+  private slotEl: HTMLSlotElement | null = null;
+
+  private readonly DETAIL_RADIUS = 6;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('open', this._handleOpen);
+  }
+
+  private _getDetails(): Detail[] {
+    if (!this.slotEl) return [];
+    return (this.slotEl.assignedElements({ flatten: true }) as Detail[]).filter(
+      (el) => el.tagName.toLowerCase() === 'ae-detail',
+    );
+  }
+
+  private _syncChildren(): void {
+    const details = this._getDetails();
+    const r = this.DETAIL_RADIUS;
+
+    details.forEach((detail, i) => {
+      const isFirst = i === 0;
+      const isLast = i === details.length - 1;
+
+      // Collapse borders between adjacent items
+      detail.style.marginTop = isFirst ? '' : '-1px';
+
+      // Adjust per-corner radius so only the outer edges of the group keep it
+      detail.style.setProperty('--detail-r-tl', isFirst ? `${r}px` : '0');
+      detail.style.setProperty('--detail-r-tr', isFirst ? `${r}px` : '0');
+      detail.style.setProperty('--detail-r-br', isLast ? `${r}px` : '0');
+      detail.style.setProperty('--detail-r-bl', isLast ? `${r}px` : '0');
+
+      // Propagate variant / color only when explicitly set on the group
+      if (this.variant !== undefined) detail.variant = this.variant;
+      if (this.color !== undefined) detail.color = this.color;
+    });
+  }
+
+  private _handleOpen = (event: Event): void => {
+    if (this.multiple) return;
+    const opened = event.target as Element;
+    this._getDetails().forEach((detail) => {
+      if (detail !== opened) detail.close();
+    });
+  };
+
+  protected render() {
+    return html(({ slot }) => {
+      this.slotEl = slot({
+        '@slotchange': () => this._syncChildren(),
+      });
+      this._syncChildren();
+    });
+  }
+}
+
+DetailGroup.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-detail-group': DetailGroup;
+  }
+}
+
+export default DetailGroup;
+export type DetailGroupProps = InferProps<typeof DetailGroup>;

package/src/detail-group/index.ts

@@ -0,0 +1,2 @@
+export { default, default as DetailGroup } from './detail-group';
+export type { DetailGroupProps } from './detail-group';

package/src/drawer/defines.ts

@@ -0,0 +1 @@
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';