aeico-components 0.1.1

package/src/dropdown/dropdown.ts

@@ -0,0 +1,211 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html } from 'aeico';
+import { prop } from 'aeico';
+import style from '../styles/components/dropdown.css?inline';
+import variables from '../styles/variables.css?inline';
+import type { DropdownPlacement } from './defines';
+// Ensure ae-dropdown-item is registered when this module is used
+import './dropdown-item';
+
+/**
+ * Dropdown component — renders a floating menu panel anchored to a trigger slot.
+ *
+ * The trigger is provided via `slot="trigger"` (typically an `<ae-button>`).
+ * Menu items are provided as `<ae-dropdown-item>` default-slot children.
+ *
+ * Emits:
+ * - `open`   — when the panel opens
+ * - `close`  — when the panel closes
+ * - `select` — `{ detail: { value, label } }` when a menu item is clicked
+ *
+ * @example
+ * ```html
+ * <ae-dropdown>
+ *   <ae-button slot="trigger">Actions</ae-button>
+ *   <ae-dropdown-item value="edit" icon="edit">Edit</ae-dropdown-item>
+ *   <ae-dropdown-item value="delete" danger icon="trash">Delete</ae-dropdown-item>
+ * </ae-dropdown>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Inside ae-navbar -->
+ * <ae-navbar>
+ *   <a slot="brand" href="/">MyApp</a>
+ *   <ae-dropdown slot="end">
+ *     <ae-button slot="trigger" variant="outlined" size="sm">User</ae-button>
+ *     <ae-dropdown-item href="/profile" icon="user">Profile</ae-dropdown-item>
+ *     <ae-dropdown-item value="logout" danger>Sign out</ae-dropdown-item>
+ *   </ae-dropdown>
+ * </ae-navbar>
+ * ```
+ */
+class Dropdown extends AeicoComponent {
+  static tagName = 'dropdown';
+
+  protected static styles = [variables, style];
+
+  /**
+   * Position of the panel relative to the trigger.
+   * Defaults to `'bottom-start'` (left-aligned, below trigger).
+   */
+  @prop({ type: String })
+  accessor placement: DropdownPlacement = 'bottom-start';
+
+  /**
+   * Whether the dropdown panel is visible. Reflects as the `open` attribute.
+   * Can be used for controlled open/close state.
+   */
+  @prop({ type: Boolean })
+  accessor open: boolean = false;
+
+  /**
+   * When `true` (default), clicking a menu item automatically closes the panel.
+   */
+  @prop({ type: Boolean })
+  accessor closeOnSelect: boolean = true;
+
+  /** Disables the trigger and prevents opening. */
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  /**
+   * Optional label text. When set, `ae-dropdown` renders its own trigger button
+   * in the shadow DOM (no `slot="trigger"` needed). Inherits `--ae-navbar-link-*`
+   * CSS variables so it automatically matches navbar link styles.
+   */
+  @prop({ type: String })
+  accessor label: string = '';
+
+  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.listen('_item-select', this._handleItemSelect as EventListener);
+    this.listen('keydown', this._handleKeydown as EventListener);
+
+    this._outsideClickHandler = (e: MouseEvent) => {
+      if (!this.open) return;
+      const path = e.composedPath();
+      if (!path.includes(this)) {
+        this._closePanel();
+      }
+    };
+    document.addEventListener('click', this._outsideClickHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._outsideClickHandler) {
+      document.removeEventListener('click', this._outsideClickHandler);
+      this._outsideClickHandler = null;
+    }
+  }
+
+  /** Opens the dropdown panel. */
+  show(): void {
+    if (this.disabled || this.open) return;
+    this.open = true;
+    this.emit('open');
+  }
+
+  /** Closes the dropdown panel. */
+  hide(): void {
+    if (!this.open) return;
+    this.open = false;
+    this.emit('close');
+  }
+
+  /** Toggles the dropdown panel open/closed. */
+  toggle(): void {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  private _closePanel(): void {
+    if (this.open) this.hide();
+  }
+
+  // Called via declarative @click on the trigger-wrapper div inside the shadow DOM.
+  // Events from slotted trigger content bubble through the shadow DOM slot path,
+  // so this fires for trigger clicks only — not for panel item clicks.
+  private _handleTriggerClick = (): void => {
+    this.toggle();
+  };
+
+  private _handleItemSelect = (e: CustomEvent): void => {
+    this.emit('select', { detail: e.detail });
+    if (this.closeOnSelect) {
+      this._closePanel();
+    }
+  };
+
+  private _handleKeydown = (e: KeyboardEvent): void => {
+    if (e.key === 'Escape' && this.open) {
+      e.stopPropagation();
+      this._closePanel();
+    }
+  };
+
+  protected render() {
+    const placementClass = `placement-${this.placement}`;
+    const hasLabel = !!this.label;
+    const dir = this.placement.split('-')[0];
+    return html(({ div, slot, button, span }) => {
+      div(
+        {
+          className: 'trigger-wrapper',
+          'aria-haspopup': 'menu',
+          'aria-expanded': String(this.open),
+          '@click': this.disabled ? undefined : this._handleTriggerClick,
+        },
+        () => {
+          if (hasLabel) {
+            button(
+              {
+                className: 'trigger-label',
+                type: 'button',
+                disabled: this.disabled || undefined,
+              },
+              () => {
+                span({ text: this.label });
+                span({
+                  className: `ae-dropdown-arrow ae-dropdown-arrow--${dir}`,
+                  'aria-hidden': 'true',
+                });
+              },
+            );
+          } else {
+            slot({ name: 'trigger' });
+          }
+        },
+      );
+      div(
+        {
+          part: 'panel',
+          className: { panel: true, open: this.open, [placementClass]: true },
+          role: 'menu',
+        },
+        () => {
+          slot();
+        },
+      );
+    });
+  }
+}
+
+Dropdown.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-dropdown': Dropdown;
+  }
+}
+
+export default Dropdown;
+export type DropdownProps = InferProps<typeof Dropdown>;

package/src/dropdown/index.ts

@@ -0,0 +1,7 @@
+export { default } from './dropdown';
+export { default as DropdownItem } from './dropdown-item';
+export { default as DropdownButton } from './dropdown-button';
+export type { DropdownProps } from './dropdown';
+export type { DropdownItemProps } from './dropdown-item';
+export type { DropdownButtonProps } from './dropdown-button';
+export type { DropdownPlacement } from './defines';

package/src/icon/defines.ts

@@ -0,0 +1,21 @@
+export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+
+export type IconColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info';
+
+export interface IconDefinition {
+  path: string;
+  viewBox?: string;
+  stroke?: boolean;
+  strokeWidth?: number;
+}
+
+export const defaultViewBox = '0 0 24 24';
+
+export type IconRegistryData = Record<string, string | IconDefinition>;

package/src/icon/icon.ts

@@ -0,0 +1,84 @@
+import type { InferProps, Props } from 'aeico';
+import { SVG_NS } from '../utils';
+import AeicoComponent from '../aeico-component';
+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 style from '../styles/components/icon.css?inline';
+import type { IconSize, IconColor } from './defines';
+import { defaultViewBox } from './defines';
+import IconRegistry from './registry';
+
+class Icon extends AeicoComponent {
+  static tagName = 'icon';
+
+  static props: Props = {
+    name: { type: String },
+    size: { type: String },
+    color: { type: String },
+    stroke: { type: Boolean },
+    strokeWidth: { type: Number },
+  };
+
+  declare name?: string;
+  declare size?: IconSize;
+  declare color?: IconColor;
+  declare stroke?: boolean;
+  declare strokeWidth?: number;
+
+  protected static styles = [styleVariables, sizeCSS, colorCSS, style];
+
+  protected render() {
+    const def = this.name ? IconRegistry.get(this.name) : undefined;
+
+    // Numeric size: set font-size directly (string sizes are handled by size.css)
+    const numericSize = Number(this.size);
+    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {
+      this.style.setProperty('font-size', `${numericSize}px`);
+    } else {
+      this.style.removeProperty('font-size');
+    }
+
+    // Resolve stroke: component prop takes priority over registry definition
+    const useStroke = this.stroke ?? def?.stroke ?? false;
+    const useStrokeWidth = this.strokeWidth ?? def?.strokeWidth ?? 2;
+
+    if (useStroke) {
+      this.style.setProperty('--icon-fill', 'none');
+      this.style.setProperty('--icon-stroke', 'currentColor');
+      this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));
+    } else {
+      this.style.removeProperty('--icon-fill');
+      this.style.removeProperty('--icon-stroke');
+      this.style.removeProperty('--icon-stroke-width');
+    }
+
+    if (!def) return;
+
+    return html(({ svg, path }) => {
+      svg(
+        {
+          className: 'icon-svg',
+          viewBox: def.viewBox ?? defaultViewBox,
+          'aria-hidden': 'true',
+          xmlns: SVG_NS,
+        },
+        () => {
+          path({ d: def.path });
+        },
+      );
+    });
+  }
+}
+
+Icon.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-icon': Icon;
+  }
+}
+
+export default Icon;
+export type IconProps = InferProps<typeof Icon>;

package/src/icon/index.ts

@@ -0,0 +1,4 @@
+export { default as Icon } from './icon';
+export type { IconProps } from './icon';
+export { default as IconRegistry } from './registry';
+export type { IconSize, IconColor, IconDefinition, IconRegistryData } from './defines';

package/src/icon/registry.ts

@@ -0,0 +1,25 @@
+import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';
+
+class IconRegistry {
+  private static _icons: Map<string, IconDefinition> = new Map();
+
+  static add(icons: IconRegistryData) {
+    for (const [name, data] of Object.entries(icons)) {
+      if (typeof data === 'string') {
+        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+      } else {
+        this._icons.set(name, data);
+      }
+    }
+  }
+
+  static get(name: string): IconDefinition | undefined {
+    return this._icons.get(name);
+  }
+
+  static has(name: string): boolean {
+    return this._icons.has(name);
+  }
+}
+
+export default IconRegistry;

package/src/icon-button/icon-button.ts

@@ -0,0 +1,64 @@
+import type { InferProps, Props } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import type { IconColor } from '../icon/defines';
+// Ensure ae-button and ae-icon are registered
+import '../button/button';
+import '../icon/icon';
+
+export type IconButtonVariant = 'filled' | 'outlined' | 'subtle' | 'text';
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * @deprecated Use `<ae-button>` with an `<ae-icon>` slot instead.
+ *
+ * ```html
+ * <ae-button color="primary"><ae-icon name="star"></ae-icon></ae-button>
+ * ```
+ */
+class IconButton extends AeicoComponent {
+  static tagName = 'icon-button';
+
+  static props: Props = {
+    icon: { type: String },
+    size: { type: String },
+    color: { type: String },
+    variant: { type: String },
+    disabled: { type: Boolean },
+  };
+
+  declare icon?: string;
+  declare size?: IconButtonSize;
+  declare color?: IconColor;
+  declare variant?: IconButtonVariant;
+  declare disabled?: boolean;
+
+  protected static styles = [':host { display: contents; }'];
+
+  protected render() {
+    return html(({ aeButton, aeIcon }) => {
+      aeButton(
+        {
+          color: this.color,
+          variant: this.variant,
+          size: this.size,
+          disabled: this.disabled,
+        },
+        () => {
+          aeIcon({ name: this.icon });
+        },
+      );
+    });
+  }
+}
+
+IconButton.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-icon-button': IconButton;
+  }
+}
+
+export default IconButton;
+export type IconButtonProps = InferProps<typeof IconButton>;

package/src/icon-button/index.ts

@@ -0,0 +1,2 @@
+export { default, default as IconButton } from './icon-button';
+export type { IconButtonProps, IconButtonVariant, IconButtonSize } from './icon-button';

package/src/index.ts

@@ -0,0 +1,85 @@
+/**
+ * Components module exports
+ *
+ * All Aeico Web Components are available here for on-demand registration.
+ * Import only the components you need to keep your bundle size small.
+ *
+ * @example
+ * ```typescript
+ * import { SelectField, RangeField, Button } from 'aeico/components'
+ *
+ * // Manually register components
+ * SelectField.register()
+ * RangeField.register()
+ * Button.register()
+ *
+ * // Or use with custom names
+ * SelectField.register('my-select')
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Use the static create method for programmatic creation
+ * import { Button } from 'aeico/components'
+ *
+ * const button = Button.create({
+ *   variant: 'primary',
+ *   size: 'md'
+ * })
+ * button.textContent = 'Click me'
+ * document.body.appendChild(button)
+ * ```
+ */
+
+// Field components
+export { default as TextInput } from './text-input';
+export { default as Select } from './select';
+export { default as Slider } from './slider';
+export { default as Checkbox } from './checkbox';
+export { default as RadioGroup } from './radio-group';
+export { Radio } from './radio-group';
+export { default as Switch } from './switch';
+
+// UI components
+export { default as Breadcrumb, BreadcrumbItem } from './breadcrumb';
+export { default as Button } from './button';
+export { default as Dropdown, DropdownItem, DropdownButton } from './dropdown';
+export { default as ButtonGroup } from './button-group';
+export { default as Badge } from './badge';
+export { default as Tag } from './tag';
+export { default as Alert } from './alert';
+export { default as Dialog } from './dialog';
+export { default as Icon } from './icon/icon';
+export { default as IconRegistry } from './icon/registry';
+export { default as IconButton } from './icon-button';
+export { Tabs, Tab, TabPanel } from './tabs';
+export { default as Divider } from './divider';
+export { default as Card } from './card';
+export { default as Navbar } from './navbar';
+export { default as Detail } from './detail';
+
+// Component types
+export type { SelectProps, SelectOption, SelectOptions, SelectOptionValue } from './select';
+export type { SliderProps, SliderOption, SliderOptions, SliderOptionValue } from './slider';
+export type { CheckboxProps, CheckboxVariant } from './checkbox';
+export type {
+  RadioGroupProps,
+  RadioGroupMode,
+  RadioGroupOption,
+  RadioGroupOptions,
+} from './radio-group';
+export type { RadioProps } from './radio-group';
+export type { SwitchProps } from './switch';
+export type { TextInputProps } from './text-input';
+export type { ButtonProps, ButtonColor, ButtonSize, ButtonVariant } from './button';
+export type { ButtonGroupProps } from './button-group';
+export type { AlertProps, AlertColor, AlertSize, AlertVariant } from './alert';
+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 { IconButtonProps, IconButtonVariant, IconButtonSize } from './icon-button';
+export type { DividerProps } from './divider';
+export type { CardProps, CardVariant, CardColor } from './card';
+export type { NavbarProps, NavbarColor, NavbarAppearance } from './navbar';
+export type { DetailProps, DetailVariant, DetailColor } from './detail';

package/src/navbar/defines.ts

@@ -0,0 +1,11 @@
+export type NavbarColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';
+export type NavbarAppearance = 'text' | 'block';

package/src/navbar/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Navbar } from './navbar';
+export type { NavbarProps } from './navbar';
+export type { NavbarColor, NavbarAppearance } from './defines';

package/src/navbar/navbar.ts

@@ -0,0 +1,162 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import navbarStyle from '../styles/components/navbar.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import { prop } from 'aeico';
+import type { NavbarColor, NavbarAppearance } from './defines';
+
+/**
+ * Navbar Component
+ *
+ * A sticky top navigation bar with three slot regions and built-in
+ * mobile hamburger collapse.
+ *
+ * Slots:
+ * - `brand`  — leftmost area, typically a logo or site name link
+ * - `start`  — main navigation links / dropdowns
+ * - `end`    — right-side actions (login button, avatar, etc.)
+ *
+ * Slotted `<a>` elements receive default link styling controlled via
+ * CSS custom properties. Mark the active link with `aria-current="page"`.
+ *
+ * @example
+ * ```html
+ * <ae-navbar color="primary" appearance="block">
+ *   <a slot="brand" href="/">MyApp</a>
+ *   <a slot="start" href="/" aria-current="page">Home</a>
+ *   <a slot="start" href="/docs">Docs</a>
+ *   <ae-button slot="end" size="sm" variant="outlined">Sign in</ae-button>
+ * </ae-navbar>
+ * ```
+ *
+ * @example
+ * ```css
+ * /* Custom height and transparent background *\/
+ * ae-navbar {
+ *   --ae-navbar-height: 4rem;
+ *   --ae-navbar-bg: transparent;
+ *   --ae-navbar-border-width: 0;
+ *   --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+ * }
+ * ```
+ */
+class Navbar extends AeicoComponent {
+  static tagName = 'navbar';
+
+  protected static styles = [styleVariables, colorCSS, navbarStyle];
+
+  /** Background color using the design-system color token set. */
+  @prop({ type: String })
+  accessor color: NavbarColor | undefined;
+
+  /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */
+  @prop({ type: Boolean })
+  accessor sticky: boolean = false;
+
+  /**
+   * Hover style preset for slotted `<a>` links.
+   * - `text`  — only the font color changes on hover (default)
+   * - `block` — a subtle filled background block appears on hover
+   *
+   * Fine-tune further with `--ae-navbar-link-hover-color` /
+   * `--ae-navbar-link-hover-bg` CSS variables.
+   */
+  @prop({ type: String })
+  accessor appearance: NavbarAppearance = 'text';
+
+  /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */
+  @prop({ type: Boolean })
+  accessor open: boolean = false;
+
+  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+  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
+      // when the click originates inside the shadow root, so this check is safe.
+      if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {
+        this._closeMenu();
+      }
+    };
+    document.addEventListener('click', this._outsideClickHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._outsideClickHandler) {
+      document.removeEventListener('click', this._outsideClickHandler);
+      this._outsideClickHandler = null;
+    }
+  }
+
+  /** Toggle the mobile menu open/closed. */
+  toggleMenu(): void {
+    this.open = !this.open;
+  }
+
+  private _handleInnerClick = (e: Event) => {
+    if (!this.open) return;
+    // Close mobile menu when a slotted <a> link is clicked
+    const path = e.composedPath() as Element[];
+    if (path.some((el) => (el as HTMLElement).tagName === 'A')) {
+      this._closeMenu();
+    }
+  };
+
+  private _toggleMenu = () => {
+    this.open = !this.open;
+  };
+
+  private _closeMenu = () => {
+    if (this.open) this.open = false;
+  };
+
+  protected render() {
+    return html(({ div, nav, button, span, slot }) => {
+      div({ class: 'inner' }, () => {
+        div({ part: 'brand' }, () => {
+          slot({ name: 'brand' });
+        });
+        nav({ part: 'nav', 'aria-label': 'Main navigation' }, () => {
+          div({ part: 'start' }, () => {
+            slot({ name: 'start' });
+          });
+          div({ part: 'end' }, () => {
+            slot({ name: 'end' });
+          });
+        });
+        button(
+          {
+            part: 'hamburger',
+            type: 'button',
+            'aria-expanded': String(this.open),
+            'aria-label': 'Toggle navigation',
+            '@click': this._toggleMenu,
+          },
+          () => {
+            span({ 'aria-hidden': 'true' });
+            span({ 'aria-hidden': 'true' });
+            span({ 'aria-hidden': 'true' });
+          },
+        );
+      });
+    });
+  }
+}
+
+Navbar.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-navbar': Navbar;
+  }
+}
+
+export default Navbar;
+export type NavbarProps = InferProps<typeof Navbar>;