aeico-components 0.1.6 → 0.1.8

package/src/dialog/dialog.ts

@@ -1,8 +1,9 @@
 import type { InferProps, Props } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import style from '../styles/components/dialog.css?inline';
+import styleVariables from '../styles/variables.css';
+import style from '../styles/components/dialog.css';
 import AeicoComponent from '../aeico-component';
-import { html } from 'aeico';
+import { html, tags } from 'aeico';
+import '../icon/icon';
 
 class Dialog extends AeicoComponent {
   static props: Props = {
@@ -40,28 +41,31 @@ class Dialog extends AeicoComponent {
           },
         },
         () => {
-          // 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(),
-                });
+                const { aeIcon } = tags;
+                button(
+                  {
+                    className: 'close-btn',
+                    'aria-label': 'close',
+                    '@click': () => this.close(),
+                  },
+                  () => {
+                    aeIcon({ name: 'close' });
+                  },
+                );
               }
             });
           }
 
-          // Body
           div({ className: 'body' }, () => {
             slot();
           });
 
-          // Footer — always rendered to capture slotchange, hidden when empty
           footer(
             {
               style: { display: this._hasFooter ? '' : 'none' },
@@ -79,7 +83,6 @@ class Dialog extends AeicoComponent {
     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();
@@ -88,7 +91,6 @@ class Dialog extends AeicoComponent {
       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();
@@ -129,7 +131,6 @@ class Dialog extends AeicoComponent {
 
   close() {
     this._dialogEl?.close();
-    // emit('close') is handled by _handleNativeClose via the native 'close' event
   }
 
   isOpen(): boolean {

package/src/divider/divider.ts

@@ -1,8 +1,8 @@
 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 styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import style from '../styles/components/divider.css';
 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.

package/src/drawer/drawer.ts

@@ -1,9 +1,10 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import style from '../styles/components/drawer.css?inline';
+import styleVariables from '../styles/variables.css';
+import style from '../styles/components/drawer.css';
 import AeicoComponent from '../aeico-component';
-import { html, prop } from 'aeico';
+import { html, prop, tags } from 'aeico';
 import type { DrawerPlacement } from './defines';
+import '../icon/icon';
 
 class Drawer extends AeicoComponent {
   protected static styles = [styleVariables, style];
@@ -63,11 +64,17 @@ class Drawer extends AeicoComponent {
                 span({ className: 'label', textContent: this.label || '' });
               });
               if (this.closable) {
-                button({
-                  className: 'close-btn',
-                  textContent: '×',
-                  '@click': () => this.close(),
-                });
+                const { aeIcon } = tags;
+                button(
+                  {
+                    className: 'close-btn',
+                    'aria-label': 'close',
+                    '@click': () => this.close(),
+                  },
+                  () => {
+                    aeIcon({ name: 'close' });
+                  },
+                );
               }
             });
           }
@@ -119,7 +126,11 @@ class Drawer extends AeicoComponent {
     }
   };
 
+  private _closeTimeout: ReturnType<typeof setTimeout> | null = null;
+
   open() {
+    clearTimeout(this._closeTimeout!);
+    this.removeAttribute('data-closing');
     this.setAttribute('data-open', '');
     document.addEventListener('keydown', this._handleKeydown);
     requestAnimationFrame(() => {
@@ -130,17 +141,23 @@ class Drawer extends AeicoComponent {
   }
 
   close() {
-    this.removeAttribute('data-open');
+    if (this.hasAttribute('data-closing')) return;
+    this.setAttribute('data-closing', '');
     document.removeEventListener('keydown', this._handleKeydown);
-    this.emit('close', { detail: { target: this } });
+    this._closeTimeout = setTimeout(() => {
+      this.removeAttribute('data-open');
+      this.removeAttribute('data-closing');
+      this.emit('close', { detail: { target: this } });
+    }, 220);
   }
 
   isOpen(): boolean {
-    return this.hasAttribute('data-open');
+    return this.hasAttribute('data-open') && !this.hasAttribute('data-closing');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    clearTimeout(this._closeTimeout!);
     document.removeEventListener('keydown', this._handleKeydown);
   }
 }

package/src/dropdown/dropdown-item.ts

@@ -1,8 +1,8 @@
 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 style from '../styles/components/dropdown-item.css';
+import variables from '../styles/variables.css';
 import { prop } from 'aeico';
 // Ensure ae-icon is registered when icons are used
 import '../icon/icon';

package/src/dropdown/dropdown.ts

@@ -2,8 +2,8 @@
 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 style from '../styles/components/dropdown.css';
+import variables from '../styles/variables.css';
 import type { DropdownPlacement } from './defines';
 // Ensure ae-dropdown-item is registered when this module is used
 import './dropdown-item';

package/src/icon/defines.ts

@@ -9,8 +9,15 @@ export type IconColor =
   | 'warning'
   | 'info';
 
+export interface IconPathDef {
+  d: string;
+  fill?: string;
+  stroke?: boolean;
+  strokeWidth?: number;
+}
+
 export interface IconDefinition {
-  path: string;
+  paths: string | IconPathDef[];
   viewBox?: string;
   stroke?: boolean;
   strokeWidth?: number;

package/src/icon/icon.ts

@@ -2,10 +2,10 @@
 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 styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import style from '../styles/components/icon.css';
 import type { IconSize, IconColor } from './defines';
 import { defaultViewBox } from './defines';
 import IconRegistry from './registry';
@@ -41,22 +41,32 @@ class Icon extends AeicoComponent {
       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 (!def) return;
+
+    const { paths } = def;
+    const isMultiPath = Array.isArray(paths);
+
+    // Stroke CSS variables only apply in single-path mode (component props)
+    if (!isMultiPath) {
+      const useStroke =
+        this.stroke ?? (this.strokeWidth !== undefined ? true : (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));
+      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');
+      }
     } 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(
         {
@@ -66,7 +76,15 @@ class Icon extends AeicoComponent {
           xmlns: SVG_NS,
         },
         () => {
-          path({ d: def.path });
+          if (typeof paths === 'string') {
+            path({ d: paths });
+          } else {
+            for (const p of paths) {
+              const attrs: Record<string, unknown> = { d: p.d };
+              if (p.fill) attrs.style = { fill: p.fill };
+              path(attrs);
+            }
+          }
         },
       );
     });

package/src/icon/index.ts

@@ -1,4 +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';
+export type { IconSize, IconColor, IconDefinition, IconPathDef, IconRegistryData } from './defines';

package/src/icon/registry.ts

@@ -9,7 +9,7 @@ class IconRegistry {
   static add(icons: IconRegistryData) {
     for (const [name, data] of Object.entries(icons)) {
       if (typeof data === 'string') {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }
@@ -27,7 +27,7 @@ class IconRegistry {
       // Skip if the user has already registered this icon
       if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;
       if (typeof data === 'string') {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }

package/src/menu/defines.ts

@@ -8,6 +8,7 @@ export interface ParentMenuLike extends Element {
   mode?: MenuMode;
   orientation?: MenuOrientation;
   trigger?: MenuTrigger;
+  wrapText?: boolean;
 }
 
 export interface MenuSelectDetail {

package/src/menu/menu-item.ts

@@ -1,8 +1,8 @@
 import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html, prop } from 'aeico';
-import style from '../styles/components/menu-item.css?inline';
-import variables from '../styles/variables.css?inline';
+import style from '../styles/components/menu-item.css';
+import variables from '../styles/variables.css';
 import type {
   MenuMode,
   MenuOrientation,
@@ -113,6 +113,10 @@ class MenuItem extends AeicoComponent {
     return this._parentMenu?.trigger ?? 'click';
   }
 
+  private get _wrapText(): boolean {
+    return this._parentMenu?.wrapText ?? false;
+  }
+
   private get _isParent(): boolean {
     return this.label != null && this.label !== '';
   }
@@ -212,6 +216,7 @@ class MenuItem extends AeicoComponent {
     // Arrow direction: inline always shows ► (rotates to ▼ on open)
     // flyout-bottom shows ▼; flyout-right shows ►
     const arrowDir = !isInline && panelPlacement === 'bottom' ? 'bottom' : 'right';
+    const wrapText = this._wrapText;
     // Leaf items inside a submenu panel (depth > 0) need different padding
     const isNested = !!this.parentElement?.closest('ae-menu-item');
 
@@ -221,7 +226,12 @@ class MenuItem extends AeicoComponent {
           button(
             {
               type: 'button',
-              className: { item: true, 'item--parent': true, 'item--open': this.open },
+              className: {
+                item: true,
+                'item--parent': true,
+                'item--open': this.open,
+                'item--wrap': wrapText,
+              },
               disabled: this.disabled,
               'aria-haspopup': 'menu',
               'aria-expanded': String(this.open),
@@ -268,7 +278,7 @@ class MenuItem extends AeicoComponent {
       } else {
         // Leaf item
         const sharedProps = {
-          className: { item: true, 'item--leaf-in-panel': isNested },
+          className: { item: true, 'item--leaf-in-panel': isNested, 'item--wrap': wrapText },
           role: 'menuitem',
           '@click': this._handleLeafClick,
           '@keydown': this._handleKeydown,

package/src/menu/menu.ts

@@ -1,8 +1,8 @@
 import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html, prop } from 'aeico';
-import style from '../styles/components/menu.css?inline';
-import variables from '../styles/variables.css?inline';
+import style from '../styles/components/menu.css';
+import variables from '../styles/variables.css';
 import type { MenuMode, MenuOrientation, MenuSelectDetail, MenuTrigger } from './defines';
 // Ensure ae-menu-item is registered when this module is used
 import './menu-item';
@@ -36,6 +36,9 @@ class Menu extends AeicoComponent {
   @prop({ type: String })
   accessor selectedKey: string | undefined;
 
+  @prop({ type: Boolean })
+  accessor wrapText: boolean = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.listen('_menu-item-select', this._handleItemSelect as EventListener);

package/src/navbar/navbar.ts

@@ -1,7 +1,7 @@
 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 styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import navbarStyle from '../styles/components/navbar.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import { prop } from 'aeico';

package/src/number-input/number-input.ts

@@ -1,11 +1,11 @@
 import AeicoField from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { html } from 'aeico';
-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 style from '../styles/components/number-input.css?inline';
+import variables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import fieldLabelCSS from '../styles/components/field-label.css';
+import actionButtonCSS from '../styles/components/action-button.css';
+import style from '../styles/components/number-input.css';
 
 class NumberInput extends AeicoField<number> {
   protected fieldElement: HTMLInputElement | null = null;

package/src/pagination/pagination.ts

@@ -1,9 +1,9 @@
 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 styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import paginationStyle from '../styles/components/pagination.css';
 import type { PaginationSize, PaginationVariant } from './defines';
 import '../icon/icon';
 

package/src/progress-bar/progress-bar.ts

@@ -1,9 +1,9 @@
 import type { InferProps } from 'aeico';
 import { html, prop } from 'aeico';
 import AeicoComponent from '../aeico-component';
-import styleVariables from '../styles/variables.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import style from '../styles/components/progress-bar.css?inline';
+import styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import style from '../styles/components/progress-bar.css';
 import type { ProgressBarColor } from './defines';
 
 /**

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

@@ -4,12 +4,12 @@ import { html, tags } from 'aeico';
 import type { ButtonColor, ButtonVariant, ButtonSize } from '../button';
 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';
+import style from '../styles/components/radio-group.css';
+import variables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import fieldLabelCSS from '../styles/components/field-label.css';
+import actionButtonCSS from '../styles/components/action-button.css';
 
 class RadioGroup extends AeicoField {
   protected fieldElement: HTMLInputElement | null = null;
@@ -29,6 +29,7 @@ class RadioGroup extends AeicoField {
     variant: { type: String },
     size: { type: String },
     allowEmpty: { type: Boolean },
+    actionButtonStyle: { type: String },
   };
 
   declare options?: RadioGroupOptions;
@@ -143,13 +144,16 @@ class RadioGroup extends AeicoField {
       div({ id, role: 'group', className: 'rg-container field-body' }, () => {
         if (mode === 'default') {
           this._renderRadio(opts, current);
+          this.renderActionButtons();
         } else {
           this._renderButtons(opts, current, mode);
         }
       });
 
-      if (this.allowEmpty) this.renderClearButton();
-      this.renderResetButton();
+      if (mode !== 'default') {
+        if (this.allowEmpty) this.renderClearButton();
+        this.renderResetButton();
+      }
 
       // Hidden slot — captures <option> light DOM children
       this._slotEl = slot({

package/src/select/select-option.ts

@@ -1,8 +1,8 @@
 import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html } from 'aeico';
-import style from '../styles/components/select-option.css?inline';
-import variables from '../styles/variables.css?inline';
+import style from '../styles/components/select-option.css';
+import variables from '../styles/variables.css';
 import { prop } from 'aeico';
 
 class SelectOption extends AeicoComponent {

package/src/select/select.ts

@@ -8,11 +8,11 @@ import type {
   SelectPosition,
   SelectMultiValue,
 } from './defines';
-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 style from '../styles/components/select.css';
+import variables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import fieldLabelCSS from '../styles/components/field-label.css';
+import actionButtonCSS from '../styles/components/action-button.css';
 import SelectOptionElement from './select-option';
 import '../tag/tag';
 import { prop } from 'aeico';

package/src/slider/slider.ts

@@ -2,12 +2,12 @@
 import type { InferProps } from 'aeico';
 import { html, tags } from 'aeico';
 import type { NormalizedOption, SliderMarks, SliderOption, SliderOptions } from './defines';
-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 style from '../styles/components/slider.css';
+import variables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import fieldLabelCSS from '../styles/components/field-label.css';
+import actionButtonCSS from '../styles/components/action-button.css';
 import { prop } from 'aeico';
 
 class Slider extends AeicoField {

package/src/spinner/spinner.ts

@@ -1,10 +1,10 @@
 import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html, prop } 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/spinner.css?inline';
+import styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import style from '../styles/components/spinner.css';
 import type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';
 
 /**