aeico-components 0.1.7 → 0.1.8

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

@@ -12,6 +12,8 @@ export type IconColor =
 export interface IconPathDef {
   d: string;
   fill?: string;
+  stroke?: boolean;
+  strokeWidth?: number;
 }
 
 export interface IconDefinition {

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';

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';
 
 /**

package/src/styles/components/button-group.css

@@ -15,6 +15,8 @@
 
 :host([compact]) {
   gap: 0;
+  /* Reset --ae-border-radius so individual --_btn-r-* corners take effect */
+  --ae-border-radius: initial;
 }
 
 /* Raise hovered/focused button so its border shows above neighbours */

package/src/styles/components/card.css

@@ -10,7 +10,6 @@
   overflow: hidden;
 }
 
-/* variant overrides */
 :host([variant="faint"]) .card {
   border-color: var(--ae-color-border-subtle);
   background: var(--ae-color-bg-subtle);
@@ -21,41 +20,24 @@
   border-color: transparent;
 }
 
-:host([variant="subtle"]) .header { border-bottom-color: transparent; }
-:host([variant="subtle"]) .footer { border-top-color: transparent; }
-
 :host([variant="filled"]) .card {
   border-color: var(--ae-color-solid);
   background: var(--ae-color-solid);
   color: var(--ae-color-on-solid);
 }
 
-:host([variant="filled"]) .header {
-  border-bottom-color: color-mix(in srgb, var(--ae-color-solid), black 15%);
-}
-
-:host([variant="filled"]) .footer {
-  border-top-color: color-mix(in srgb, var(--ae-color-solid), black 15%);
-}
-
 :host([variant="outlined"]) .card {
   border-color: var(--ae-color-border);
   background: transparent;
   color: var(--ae-color-text-subtle);
 }
 
-:host([variant="outlined"]) .header { border-bottom-color: var(--ae-color-border-subtle); }
-:host([variant="outlined"]) .footer { border-top-color: var(--ae-color-border-subtle); }
-
 :host([variant="text"]) .card {
   border-color: transparent;
   background: transparent;
   color: var(--ae-color-text-main);
 }
 
-:host([variant="text"]) .header { border-bottom-color: transparent; color: var(--ae-color-accent); }
-:host([variant="text"]) .footer { border-top-color: transparent; color: var(--ae-color-accent); }
-
 .header,
 .footer {
   display: none;
@@ -74,6 +56,48 @@
   border-top: 1px solid var(--ae-color-border-subtle);
 }
 
+:host([variant="faint"][has-header]) .header {
+  border-bottom-color: var(--ae-color-border-subtle);
+}
+
+:host([variant="faint"][has-footer]) .footer {
+  border-top-color: var(--ae-color-border-subtle);
+}
+
+:host([variant="subtle"][has-header]) .header {
+  border-bottom-color: var(--ae-color-border-subtle);
+}
+
+:host([variant="subtle"][has-footer]) .footer {
+  border-top-color: var(--ae-color-border-subtle);
+}
+
+:host([variant="filled"][has-header]) .header {
+  border-bottom-color: rgba(0, 0, 0, 0.15);
+}
+
+:host([variant="filled"][has-footer]) .footer {
+  border-top-color: rgba(0, 0, 0, 0.15);
+}
+
+:host([variant="outlined"][has-header]) .header {
+  border-bottom-color: var(--ae-color-border-subtle);
+}
+
+:host([variant="outlined"][has-footer]) .footer {
+  border-top-color: var(--ae-color-border-subtle);
+}
+
+:host([variant="text"][has-header]) .header {
+  border-bottom-color: transparent;
+  color: var(--ae-color-accent);
+}
+
+:host([variant="text"][has-footer]) .footer {
+  border-top-color: transparent;
+  color: var(--ae-color-accent);
+}
+
 .body {
   padding: 16px;
 }

package/src/styles/components/checkbox.css

@@ -3,11 +3,7 @@
   flex: 1;
   min-width: 0;
   font-size: var(--ae-size-base);
-
-  /* Layout */
   --checkbox-field-gap: 4px;
-
-  /* Checkbox */
   --checkbox-size: 1.167em;
   --checkbox-border-width: 1px;
   --checkbox-border-color: var(--ae-border-subtle);
@@ -44,8 +40,23 @@
   cursor: not-allowed;
 }
 
-/* Error state */
 :host([error]) .field-input {
   outline: 2px solid var(--field-error-color, var(--ae-red));
   outline-offset: 1px;
 }
+
+.checkbox-container .action-controls {
+  display: flex;
+  margin-left: 2px;
+  border: var(--checkbox-border-width) solid var(--field-action-border-color, var(--ae-border-subtle));
+  border-radius: var(--ae-radius-sm);
+  overflow: hidden;
+  background: var(--field-action-bg, var(--ae-surface-base));
+  height: 1.333em;
+  box-sizing: border-box;
+}
+
+.checkbox-container .action-controls .action-btn {
+  padding: 0 0.35em;
+  font-size: 0.7em;
+}

package/src/styles/components/dialog.css

@@ -6,7 +6,7 @@ dialog {
   display: none;
   flex-direction: column;
   border: none;
-  border-radius: var(--ae-border-radius, var(--ae-border-radius));
+  border-radius: var(--ae-border-radius, var(--ae-radius-lg));
   padding: 0;
   max-width: min(90vw, 600px);
   max-height: 90vh;