aeico-components 0.1.1

package/src/checkbox/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Checkbox } from './checkbox';
+export type { CheckboxVariant } from './defines';
+export type { CheckboxProps } from './checkbox';

package/src/detail/defines.ts

@@ -0,0 +1,11 @@
+export type DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type DetailColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';

package/src/detail/detail.ts

@@ -0,0 +1,122 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import colorCSS from '../styles/color.css?inline';
+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';
+
+/**
+ * Detail component that can be used to show/hide additional content.
+ *
+ * @example
+ * ```html
+ * <ae-detail summary="Click Me">
+ *  <ae-icon name="plus" slot="expand"></ae-icon>
+ *  <ae-icon name="minus" slot="collapse"></ae-icon>
+ *  Detail.....
+ * </ae-detail>
+ */
+class Detail extends AeicoComponent {
+  static tagName = 'detail';
+
+  protected static styles = [styleVariables, colorCSS, detailStyle];
+
+  @prop({ type: String })
+  accessor summary: string = '';
+
+  @prop({ type: String })
+  accessor variant: DetailVariant = 'filled';
+
+  @prop({ type: String })
+  accessor color: DetailColor = 'default';
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  private _open: boolean = false;
+
+  /** Opens the detail panel. */
+  open(): void {
+    if (this.disabled || this._open) return;
+    this._open = true;
+    this.toggleAttribute('open', true);
+    this.update();
+    this.emit('open');
+  }
+
+  /** Closes the detail panel. */
+  close(): void {
+    if (!this._open) return;
+    this._open = false;
+    this.toggleAttribute('open', false);
+    this.update();
+    this.emit('close');
+  }
+
+  /** Toggles the detail panel open/closed. */
+  toggle(): void {
+    if (this._open) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /** Returns whether the detail panel is currently open. */
+  isOpen(): boolean {
+    return this._open;
+  }
+
+  private _handleSummaryClick = (): void => {
+    this.toggle();
+  };
+
+  protected render() {
+    return html(({ div, button, span, slot }) => {
+      div({ className: 'detail', part: 'detail' }, () => {
+        button(
+          {
+            className: 'summary',
+            part: 'summary',
+            type: 'button',
+            'aria-expanded': String(this._open),
+            disabled: this.disabled || undefined,
+            '@click': this._handleSummaryClick,
+          },
+          () => {
+            slot({ name: 'summary' }, () => {
+              span({ className: 'label', textContent: this.summary });
+            });
+            slot({ name: 'expand' });
+            slot({ name: 'collapse' });
+          },
+        );
+        div({ className: 'content-outer' }, () => {
+          div(
+            {
+              className: 'content',
+              part: 'content',
+              role: 'region',
+            },
+            () => {
+              slot();
+            },
+          );
+        });
+      });
+    });
+  }
+}
+
+Detail.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-detail': Detail;
+  }
+}
+
+export default Detail;
+export type DetailProps = InferProps<typeof Detail>;

package/src/detail/index.ts

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

package/src/dialog/dialog.ts

@@ -0,0 +1,149 @@
+import type { InferProps, Props } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import style from '../styles/components/dialog.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+
+class Dialog extends AeicoComponent {
+  static props: Props = {
+    label: { type: String },
+    width: { type: String },
+    height: { type: String },
+    modal: { type: Boolean },
+    closable: { type: Boolean },
+    header: { type: Boolean },
+    closeOnOverlayClick: { type: Boolean },
+  };
+
+  declare label?: string;
+  declare width?: string;
+  declare height?: string;
+  declare modal?: boolean;
+  declare closable?: boolean;
+  declare header?: boolean;
+  declare closeOnOverlayClick?: boolean;
+
+  protected static styles = [styleVariables, style];
+
+  private _dialogEl: HTMLDialogElement | null = null;
+  private _hasFooter = false;
+
+  protected render() {
+    return html(({ dialog, div, header, footer, span, button, slot }) => {
+      this._dialogEl = dialog(
+        {
+          '@click': this._handleDialogClick,
+          '@close': this._handleNativeClose,
+          style: {
+            width: this.width || '',
+            height: this.height || '',
+          },
+        },
+        () => {
+          // Header
+          if (this.header !== false) {
+            header({}, () => {
+              slot({ name: 'header' }, () => {
+                span({ className: 'label', textContent: this.label || '' });
+              });
+              if (this.closable !== false) {
+                button({
+                  className: 'close-btn',
+                  textContent: '×',
+                  '@click': () => this.close(),
+                });
+              }
+            });
+          }
+
+          // Body
+          div({ className: 'body' }, () => {
+            slot();
+          });
+
+          // Footer — always rendered to capture slotchange, hidden when empty
+          footer(
+            {
+              style: { display: this._hasFooter ? '' : 'none' },
+            },
+            () => {
+              slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });
+            },
+          );
+        },
+      );
+    });
+  }
+
+  private _handleDialogClick = (e: Event) => {
+    const mouseEvent = e as MouseEvent;
+    const path = mouseEvent.composedPath();
+
+    // data-close: any slotted element with [data-close] closes the dialog
+    for (const el of path) {
+      if (el instanceof Element && el.hasAttribute('data-close')) {
+        this.close();
+        return;
+      }
+      if (el === this._dialogEl) break;
+    }
+
+    // Backdrop click (modal mode only)
+    if (this.modal !== false && this.closeOnOverlayClick !== false) {
+      if (mouseEvent.target === this._dialogEl) {
+        const rect = this._dialogEl!.getBoundingClientRect();
+        const outside =
+          mouseEvent.clientX < rect.left ||
+          mouseEvent.clientX > rect.right ||
+          mouseEvent.clientY < rect.top ||
+          mouseEvent.clientY > rect.bottom;
+        if (outside) {
+          this.close();
+        }
+      }
+    }
+  };
+
+  private _handleNativeClose = () => {
+    this.emit('close', { detail: { target: this } });
+  };
+
+  private _handleFooterSlotChange = (e: Event) => {
+    const slotEl = e.target as HTMLSlotElement;
+    const hasContent = slotEl.assignedElements().length > 0;
+    if (hasContent !== this._hasFooter) {
+      this._hasFooter = hasContent;
+      this.update();
+    }
+  };
+
+  open() {
+    if (!this._dialogEl) return;
+    if (this.modal !== false) {
+      this._dialogEl.showModal();
+    } else {
+      this._dialogEl.show();
+    }
+    this.emit('open', { detail: { target: this } });
+  }
+
+  close() {
+    this._dialogEl?.close();
+    // emit('close') is handled by _handleNativeClose via the native 'close' event
+  }
+
+  isOpen(): boolean {
+    return this._dialogEl?.open ?? false;
+  }
+}
+
+Dialog.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-dialog': Dialog;
+  }
+}
+
+export default Dialog;
+export type DialogProps = InferProps<typeof Dialog>;

package/src/dialog/index.ts

@@ -0,0 +1,2 @@
+export { default, default as Dialog } from './dialog';
+export type { DialogProps } from './dialog';

package/src/divider/divider.ts

@@ -0,0 +1,56 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import style from '../styles/components/divider.css?inline';
+import { prop } from 'aeico';
+/**
+ * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.
+ * @example
+ * ```html
+ * <ae-divider></ae-divider>
+ * <ae-divider vertical></ae-divider>
+ * <ae-divider thickness="4px" color="primary"></ae-divider>
+ * ```
+ * @props
+ * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).
+ * - `thickness` (string): Custom thickness for the divider (e.g., "2px", "0.5rem"). If not provided, it will use the default thickness defined in CSS.
+ * - `color` (string): Color variant for the divider (e.g., "primary", "secondary"). If not provided, it will use the default color defined in CSS.
+ *
+ * @csspart divider - The main divider element that can be styled.
+ *
+ * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.
+ */
+class Divider extends AeicoComponent {
+  static tagName = 'divider';
+
+  @prop({ type: Boolean })
+  accessor vertical: boolean = false;
+
+  @prop({ type: String })
+  accessor thickness: string | undefined;
+
+  @prop({ type: String })
+  accessor color: string | undefined;
+
+  protected static styles = [styleVariables, colorCSS, style];
+
+  protected render(): void {
+    if (this.thickness) {
+      this.style.setProperty('--thickness', this.thickness);
+    } else {
+      this.style.removeProperty('--thickness');
+    }
+  }
+}
+
+Divider.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-divider': Divider;
+  }
+}
+
+export default Divider;
+export type DividerProps = InferProps<typeof Divider>;

package/src/divider/index.ts

@@ -0,0 +1,2 @@
+export { default, default as Divider } from './divider';
+export type { DividerProps } from './divider';

package/src/dropdown/defines.ts

@@ -0,0 +1,13 @@
+export type DropdownPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';

package/src/dropdown/dropdown-button.ts

@@ -0,0 +1,130 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html } from 'aeico';
+import { prop } from 'aeico';
+import type { ButtonColor, ButtonSize, ButtonVariant } from '../button/defines';
+import type { DropdownPlacement } from './defines';
+import type Dropdown from './dropdown';
+import './dropdown';
+import '../button/button';
+
+/**
+ * DropdownButton — a pre-composed trigger + dropdown panel.
+ *
+ * Renders an `ae-button`-styled trigger with a built-in chevron,
+ * and a floating panel for `<ae-dropdown-item>` children.
+ * Accepts the same `variant`, `color`, `size`, and `disabled` props
+ * as `ae-button`, making it a drop-in inside `ae-button-group`.
+ *
+ * @example
+ * ```html
+ * <ae-dropdown-button variant="outlined" color="primary">
+ *   Actions
+ *   <ae-dropdown-item value="edit">Edit</ae-dropdown-item>
+ *   <ae-dropdown-item value="delete">Delete</ae-dropdown-item>
+ * </ae-dropdown-button>
+ *
+ * <!-- Inside ae-button-group -->
+ * <ae-button-group compact color="primary">
+ *   <ae-button>Save</ae-button>
+ *   <ae-dropdown-button placement="bottom-end">
+ *     <ae-dropdown-item value="draft">Save as draft</ae-dropdown-item>
+ *     <ae-dropdown-item value="template">Save as template</ae-dropdown-item>
+ *   </ae-dropdown-button>
+ * </ae-button-group>
+ * ```
+ *
+ * Emits:
+ * - `open`   — when the panel opens
+ * - `close`  — when the panel closes
+ * - `select` — `{ detail: { value, label } }` when a menu item is selected
+ */
+class DropdownButton extends AeicoComponent {
+  static tagName = 'dropdown-button';
+
+  // ae-button and ae-dropdown each carry their own shadow DOM styles.
+  // Only the host display is set here so button-group compact layout works.
+  protected static styles = [
+    ':host { display: inline-block; }',
+    '.caret { display: inline-block; width: 0; height: 0; margin-left: 0.3em; vertical-align: 0.2em; flex-shrink: 0; }',
+    '.caret--bottom { border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }',
+    '.caret--top { border-bottom: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }',
+    '.caret--right { border-left: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }',
+    '.caret--left { border-right: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }',
+  ];
+
+  @prop({ type: String })
+  accessor variant: ButtonVariant = 'filled';
+
+  @prop({ type: String })
+  accessor color: ButtonColor = 'default';
+
+  @prop({ type: String })
+  accessor size: ButtonSize = 'md';
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @prop({ type: String })
+  accessor placement: DropdownPlacement = 'bottom-start';
+
+  @prop({ type: Boolean })
+  accessor closeOnSelect: boolean = true;
+
+  private _dropdownEl: Dropdown | null = null;
+
+  show(): void {
+    if (this.disabled) return;
+    this._dropdownEl?.show();
+  }
+  hide(): void {
+    this._dropdownEl?.hide();
+  }
+  toggle(): void {
+    if (this.disabled) return;
+    this._dropdownEl?.toggle();
+  }
+
+  get open(): boolean {
+    return this._dropdownEl?.open ?? false;
+  }
+
+  protected render() {
+    const dir = this.placement.split('-')[0];
+    return html(({ aeDropdown, aeButton, slot, span }) => {
+      this._dropdownEl = aeDropdown(
+        {
+          placement: this.placement,
+          'close-on-select': this.closeOnSelect,
+        },
+        () => {
+          aeButton(
+            {
+              slot: 'trigger',
+              variant: this.variant,
+              color: this.color,
+              size: this.size,
+              disabled: this.disabled || undefined,
+            },
+            () => {
+              slot({ name: 'label' });
+              span({ className: `caret caret--${dir}`, 'aria-hidden': 'true' });
+            },
+          );
+          slot();
+        },
+      );
+    });
+  }
+}
+
+DropdownButton.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-dropdown-button': DropdownButton;
+  }
+}
+
+export default DropdownButton;
+export type DropdownButtonProps = InferProps<typeof DropdownButton>;

package/src/dropdown/dropdown-item.ts

@@ -0,0 +1,136 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html } from 'aeico';
+import style from '../styles/components/dropdown-item.css?inline';
+import variables from '../styles/variables.css?inline';
+import { prop } from 'aeico';
+// Ensure ae-icon is registered when icons are used
+import '../icon/icon';
+
+/**
+ * Dropdown menu item — used as a direct child of `<ae-dropdown>`.
+ *
+ * Renders as a `<button>` by default, or as an `<a>` anchor when `href` is set.
+ * Use `<ae-icon>` inside to add icons, and CSS `color` / `--dropdown-item-color`
+ * to apply danger or custom colours.
+ *
+ * @example
+ * ```html
+ * <ae-dropdown-item value="edit"><ae-icon name="edit"></ae-icon>Edit</ae-dropdown-item>
+ * <ae-dropdown-item value="delete" style="--dropdown-item-color:var(--color-danger)">Delete</ae-dropdown-item>
+ * <ae-dropdown-item href="/profile">Profile</ae-dropdown-item>
+ * ```
+ */
+class DropdownItem extends AeicoComponent {
+  static tagName = 'dropdown-item';
+
+  /** Value emitted in the `select` event detail on the parent dropdown. */
+  @prop({ type: String })
+  accessor value: string | undefined;
+
+  /** Disables the item — it becomes non-interactive and visually dimmed. */
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  /**
+   * When set, the item renders as an `<a>` anchor element instead of a
+   * `<button>`. Useful for navigation items.
+   */
+  @prop({ type: String })
+  accessor href: string | undefined;
+
+  /**
+   * When `type="checkbox"`, the item behaves as a toggle: each click flips
+   * `checked` and includes the new state in the `select` event detail.
+   */
+  @prop({ type: String })
+  accessor type: 'checkbox' | undefined;
+
+  /**
+   * Whether the item is checked. Only meaningful when `type="checkbox"`.
+   * Reflects as the `checked` attribute.
+   */
+  @prop({ type: Boolean })
+  accessor checked: boolean = false;
+
+  /**
+   * Marks the item as the currently active/selected option (e.g. current route,
+   * current sort order). Purely visual — applies a highlighted background and
+   * accent colour.
+   */
+  @prop({ type: Boolean })
+  accessor active: boolean = false;
+
+  protected static styles = [variables, style];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('click', this._handleClick);
+    this.setAttribute('role', 'menuitem');
+  }
+
+  private _handleClick = (e: Event): void => {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      return;
+    }
+    if (this.type === 'checkbox') {
+      this.checked = !this.checked;
+    }
+    const label = this.textContent?.trim() ?? '';
+    this.dispatchEvent(
+      new CustomEvent('_item-select', {
+        bubbles: true,
+        composed: true,
+        detail: { value: this.value ?? '', label, checked: this.checked },
+      }),
+    );
+  };
+
+  protected render() {
+    const isCheckbox = this.type === 'checkbox';
+    const sharedProps = {
+      part: 'item',
+      className: 'item',
+      'aria-checked': isCheckbox ? String(this.checked) : undefined,
+    };
+    return html(({ button, a, span, slot }) => {
+      const children = () => {
+        if (isCheckbox) span({ className: 'check-indicator', 'aria-hidden': 'true' });
+        slot();
+      };
+      if (this.href) {
+        a(
+          {
+            ...sharedProps,
+            href: this.disabled ? undefined : this.href,
+            'aria-disabled': this.disabled || undefined,
+          },
+          children,
+        );
+      } else {
+        button(
+          {
+            ...sharedProps,
+            type: 'button',
+            disabled: this.disabled,
+          },
+          children,
+        );
+      }
+    });
+  }
+}
+
+DropdownItem.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-dropdown-item': DropdownItem;
+  }
+}
+
+export default DropdownItem;
+export type DropdownItemProps = InferProps<typeof DropdownItem>;