aeico-components 0.1.7 → 0.1.8

package/src/styles/components/drawer.css

@@ -18,6 +18,10 @@
   pointer-events: auto;
 }
 
+:host([data-closing]) .backdrop {
+  animation: drawer-backdrop-out 0.2s ease forwards;
+}
+
 .panel {
   position: absolute;
   display: flex;
@@ -34,61 +38,100 @@
   inset: 0 0 0 auto;
   width: var(--ae-drawer-size, 320px);
   max-width: 100%;
-  border-radius: var(--ae-border-radius, var(--ae-border-radius)) 0 0 var(--ae-border-radius, var(--ae-border-radius));
+  border-radius: var(--ae-border-radius, var(--ae-radius-lg)) 0 0 var(--ae-border-radius, var(--ae-radius-lg));
   animation: drawer-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+:host([data-closing]) .panel.placement-right {
+  animation: drawer-slide-out-right 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
 .panel.placement-left {
   inset: 0 auto 0 0;
   width: var(--ae-drawer-size, 320px);
   max-width: 100%;
-  border-radius: 0 var(--ae-border-radius, var(--ae-border-radius)) var(--ae-border-radius, var(--ae-border-radius)) 0;
+  border-radius: 0 var(--ae-border-radius, var(--ae-radius-lg)) var(--ae-border-radius, var(--ae-radius-lg)) 0;
   animation: drawer-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+:host([data-closing]) .panel.placement-left {
+  animation: drawer-slide-out-left 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
 .panel.placement-top {
   inset: 0 0 auto 0;
   height: var(--ae-drawer-size, 320px);
   max-height: 100%;
-  border-radius: 0 0 var(--ae-border-radius, var(--ae-border-radius)) var(--ae-border-radius, var(--ae-border-radius));
+  border-radius: 0 0 var(--ae-border-radius, var(--ae-radius-lg)) var(--ae-border-radius, var(--ae-radius-lg));
   animation: drawer-slide-in-top 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+:host([data-closing]) .panel.placement-top {
+  animation: drawer-slide-out-top 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
 .panel.placement-bottom {
   inset: auto 0 0 0;
   height: var(--ae-drawer-size, 320px);
   max-height: 100%;
-  border-radius: var(--ae-border-radius, var(--ae-border-radius)) var(--ae-border-radius, var(--ae-border-radius)) 0 0;
+  border-radius: var(--ae-border-radius, var(--ae-radius-lg)) var(--ae-border-radius, var(--ae-radius-lg)) 0 0;
   animation: drawer-slide-in-bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* ── Keyframes ───────────────────────────────────────────────────── */
+:host([data-closing]) .panel.placement-bottom {
+  animation: drawer-slide-out-bottom 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
 @keyframes drawer-backdrop-in {
   from { opacity: 0; }
   to   { opacity: 1; }
 }
 
+@keyframes drawer-backdrop-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
 @keyframes drawer-slide-in-right {
   from { transform: translateX(100%); }
   to   { transform: translateX(0); }
 }
 
+@keyframes drawer-slide-out-right {
+  from { transform: translateX(0); }
+  to   { transform: translateX(100%); }
+}
+
 @keyframes drawer-slide-in-left {
   from { transform: translateX(-100%); }
   to   { transform: translateX(0); }
 }
 
+@keyframes drawer-slide-out-left {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-100%); }
+}
+
 @keyframes drawer-slide-in-top {
   from { transform: translateY(-100%); }
   to   { transform: translateY(0); }
 }
 
+@keyframes drawer-slide-out-top {
+  from { transform: translateY(0); }
+  to   { transform: translateY(-100%); }
+}
+
 @keyframes drawer-slide-in-bottom {
   from { transform: translateY(100%); }
   to   { transform: translateY(0); }
 }
 
-/* ── Header ──────────────────────────────────────────────────────── */
+@keyframes drawer-slide-out-bottom {
+  from { transform: translateY(0); }
+  to   { transform: translateY(100%); }
+}
+
 header {
   display: flex;
   align-items: center;
@@ -115,7 +158,7 @@ header {
   height: 28px;
   padding: 0;
   border: none;
-  border-radius: var(--ae-border-radius, var(--ae-border-radius));
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   background: transparent;
   color: var(--ae-color-text-muted);
   font-size: 18px;
@@ -129,14 +172,12 @@ header {
   color: var(--ae-color-text-main);
 }
 
-/* ── Body ────────────────────────────────────────────────────────── */
 .body {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
 
-/* ── Footer ──────────────────────────────────────────────────────── */
 footer {
   display: flex;
   align-items: center;

package/src/styles/components/field-label.css

@@ -21,7 +21,7 @@
   grid-template-columns: var(--field-label-width) 1fr;
   column-gap: var(--field-label-col-gap);
   row-gap: var(--field-label-gap);
-  align-items: start;
+  align-items: center;
 }
 
 :host([label][label-placement="left"]) .field-label {

package/src/styles/components/menu-item.css

@@ -51,6 +51,12 @@
   border-bottom: none;
 }
 
+.item--wrap {
+  white-space: normal;
+  height: auto;
+  min-height: var(--menu-item-height);
+}
+
 .item:hover:not(:disabled) {
   background: var(--menu-item-bg-hover);
 }

package/src/styles/components/navbar.css

@@ -1,5 +1,4 @@
 :host {
-  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */
   display: block;
   position: static;
   top: auto;
@@ -8,26 +7,17 @@
   height: var(--ae-navbar-height, 3.25rem);
   border-radius: var(--ae-navbar-radius, 0);
 
-  /* color */
   background: var(--ae-navbar-bg, var(--ae-surface-base));
   color: var(--ae-navbar-color, var(--ae-color-text-main));
   border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--ae-border-default));
   box-shadow: var(--ae-navbar-shadow, none);
 
-  /* layout tokens — declared here so they are clearly part of the public API */
   --ae-navbar-radius: 0;
-  /* Default padding-x references the global layout token so ae-navbar content
-     automatically aligns with .container / .container-fluid in light DOM.
-     Override with --ae-navbar-padding-x to decouple if needed. */
   --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);
   --ae-navbar-gap: 0.5rem;
-
-  /* link style tokens — text mode defaults.
-     CSS custom properties inherit into slotted content, so
-     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */
   --ae-navbar-link-color: inherit;
   --ae-navbar-link-font-size: inherit;
-  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */
+  --ae-navbar-link-padding-x: 0.75rem;
   --ae-navbar-link-radius: var(--ae-border-radius, var(--ae-radius-sm));
   --ae-navbar-link-hover-color: var(--ae-color-text-link-hover);
   --ae-navbar-link-hover-bg: transparent;
@@ -48,16 +38,16 @@
   --ae-navbar-link-active-color: var(--ae-color-on-solid);
 }
 
-/* block preset: hover shows a subtle filled block */
 :host([appearance="block"]) {
   --ae-navbar-link-hover-bg: var(--ae-color-bg-subtle);
   --ae-navbar-link-hover-color: inherit;
+  --ae-navbar-link-radius: 0;
 }
 
-/* block preset on colored navbar: use semi-transparent white */
 :host([color][appearance="block"]) {
   --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);
   --ae-navbar-link-hover-color: var(--ae-color-on-solid);
+  --ae-navbar-link-radius: 0;
 }
 
 .inner {
@@ -75,11 +65,10 @@
   align-items: center;
 }
 
-/* nav wraps start + end; takes all remaining space */
 [part="nav"] {
   flex: 1 1 auto;
   display: flex;
-  align-self: stretch;   /* stretch to host height so children can fill it */
+  align-self: stretch;
   align-items: stretch;
   min-width: 0;
 }
@@ -92,17 +81,16 @@
 }
 
 [part="start"] {
-  align-items: stretch;  /* slotted <a> will stretch to full height */
+  align-items: stretch;
   gap: var(--ae-navbar-start-gap, 0);
 }
 
 [part="end"] {
-  align-items: center;   /* buttons / avatars stay vertically centred */
+  align-items: center;
   gap: var(--ae-navbar-end-gap, 0.5rem);
   margin-left: auto;
 }
 
-/* hamburger — hidden on desktop */
 [part="hamburger"] {
   display: none;
   flex-direction: column;
@@ -134,7 +122,6 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
-/* Brand link — sensible defaults, no full-height stretch */
 ::slotted(a[slot="brand"]) {
   display: inline-flex;
   align-items: center;
@@ -145,13 +132,11 @@
   white-space: nowrap;
 }
 
-/* Nav links (start / end slots) — fill full navbar height for block hover effect */
 ::slotted(a[slot="start"]),
 ::slotted(a[slot="end"]) {
   display: inline-flex;
   align-items: center;
-  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */
-  /* !important overrides document-level * { padding: 0 } reset */
+  height: var(--ae-navbar-height, 3.25rem);
   padding: 0 var(--ae-navbar-link-padding-x) !important;
   border-radius: var(--ae-navbar-link-radius);
   color: var(--ae-navbar-link-color);
@@ -174,7 +159,6 @@
   font-weight: var(--ae-navbar-link-active-font-weight);
 }
 
-/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */
 ::slotted(ae-dropdown) {
   align-self: stretch;
   --dropdown-trigger-height: 100%;
@@ -188,7 +172,6 @@
 }
 
 @media (max-width: 768px) {
-  /* collapse the nav container */
   [part="nav"] {
     display: none;
     position: absolute;
@@ -209,7 +192,6 @@
     display: flex;
   }
 
-  /* stack start/end vertically inside the panel */
   [part="start"],
   [part="end"] {
     flex-direction: column;
@@ -220,7 +202,6 @@
     width: 100%;
   }
 
-  /* Mobile: links revert to auto height and add vertical padding */
   ::slotted(a[slot="start"]),
   ::slotted(a[slot="end"]) {
     height: auto;
@@ -229,12 +210,10 @@
     border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   }
 
-  /* show hamburger */
   [part="hamburger"] {
     display: flex;
   }
 
-  /* hamburger → × animation */
   :host([open]) [part="hamburger"] span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
   }

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

@@ -22,6 +22,25 @@
   gap: 6px;
 }
 
+:host(:not([mode])) .rg-container .action-controls,
+:host([mode="default"]) .rg-container .action-controls {
+  display: flex;
+  align-self: center;
+  margin-left: 2px;
+  border: 1px solid var(--field-action-border-color, var(--ae-border-subtle));
+  border-radius: var(--rg-radius);
+  overflow: hidden;
+  background: var(--field-action-bg, var(--ae-surface-base));
+  height: 1.333em;
+  box-sizing: border-box;
+}
+
+:host(:not([mode])) .rg-container .action-controls .action-btn,
+:host([mode="default"]) .rg-container .action-controls .action-btn {
+  padding: 0 0.35em;
+  font-size: 0.7em;
+}
+
 slot {
   display: none;
 }

package/src/styles/components/slider.css

@@ -195,6 +195,7 @@ input[type="range"]::-moz-range-thumb {
   width: 56px;
   padding: 0 4px;
   height: 22px;
+  line-height: 20px;
   border: 1px solid var(--ae-border-subtle);
   border-radius: var(--ae-radius-sm);
   background: transparent;
@@ -203,6 +204,7 @@ input[type="range"]::-moz-range-thumb {
   text-align: center;
   outline: none;
   flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .value-input:focus {
@@ -214,6 +216,31 @@ input[type="range"]::-moz-range-thumb {
   cursor: not-allowed;
 }
 
+.range-container .action-controls {
+  display: flex;
+  align-self: center;
+  border: 1px 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: 22px;
+  box-sizing: border-box;
+}
+
+.range-container .action-controls .action-btn {
+  padding: 0 0.35em;
+  font-size: 12px;
+}
+
+.range-container:has(.value-input) .action-controls {
+  border-radius: var(--ae-radius-sm) 0 0 var(--ae-radius-sm);
+}
+
+.range-container:has(.action-controls) .value-input {
+  margin-left: -7px;
+  border-radius: 0 var(--ae-radius-sm) var(--ae-radius-sm) 0;
+}
+
 :host([tracked]) .input-range,
 :host([tracked]) .slider-input,
 :host([tracked]) input[type="range"] {
@@ -229,7 +256,7 @@ input[type="range"]::-moz-range-thumb {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  position: relative;  /* marks-container positions against this */
+  position: relative;
 }
 
 .range-wrapper input[type="range"] {
@@ -237,11 +264,10 @@ input[type="range"]::-moz-range-thumb {
   flex: none;
 }
 
-/* Marks are absolutely positioned so they don't affect range-wrapper's layout height */
 .marks-container {
   position: absolute;
   top: 100%;
-  left: 7px;   /* inset by half thumb so 0%/100% align with track ends */
+  left: 7px;
   right: 7px;
   height: 18px;
   margin-top: 2px;
@@ -274,8 +300,7 @@ input[type="range"]::-moz-range-thumb {
   white-space: nowrap;
 }
 
-/* When marks are active, add padding-bottom to make room for the absolute-positioned marks */
 :host([marks]) .range-container {
-  padding-bottom: 24px; /* marks-container height (18px) + margin-top (2px) + extra (4px) */
+  padding-bottom: 24px;
   height: auto;
 }

package/src/styles/components/switch.css

@@ -1,9 +1,7 @@
 :host {
   display: block;
   font-size: var(--ae-size-base);
-
   --switch-field-gap: 4px;
-
   --toggle-width:       2.667em;
   --toggle-height:      1.333em;
   --toggle-slider-size: 1em;
@@ -152,3 +150,19 @@
 .field-input:checked + .toggle-slider .track-icon-right {
   opacity: 0;
 }
+
+.switch-container:has(.action-controls) .switch-wrapper .toggle-slider {
+  border-radius: var(--toggle-border-radius) 0 0 var(--toggle-border-radius);
+}
+
+.switch-container .action-controls {
+  margin-left: calc(-1 * var(--switch-field-gap) - 1px);
+  border: 1px solid var(--field-action-border-color, var(--ae-border-subtle));
+  border-left: none;
+  border-radius: 0 var(--toggle-border-radius) var(--toggle-border-radius) 0;
+  overflow: hidden;
+  background: var(--field-action-bg, var(--ae-surface-base));
+  transition: border-color 0.12s;
+  height: var(--toggle-height);
+  box-sizing: border-box;
+}

package/src/styles/layout.css

@@ -4,9 +4,12 @@
    NOT imported by any Web Component internally.
 
    Import it once in your page:
-     import 'aeico/styles/layout.css'
+     import 'aeico-components/styles/layout.css'
    or:
-     <link rel="stylesheet" href="path/to/layout.css">
+     <link rel="stylesheet" href="node_modules/aeico-components/src/styles/layout.css">
+
+   Requires variables.css for the --space-* and --container-* tokens:
+     import 'aeico-components/styles/variables.css'
 
    All utility rules live inside @layer aeico-layout so that your own
    un-layered (or later-layered) styles always override them without !important.

package/src/styles/radius.css

@@ -1,3 +1,18 @@
+/*
+   radius.css — Light DOM border-radius utility classes
+   This file is for use in the user's light DOM (regular HTML),
+   NOT imported by any Web Component internally.
+
+   Import it once in your page:
+     import 'aeico-components/styles/radius.css'
+
+   Requires variables.css for the --ae-radius-* tokens:
+     import 'aeico-components/styles/variables.css'
+
+   All utility rules live inside @layer aeico-radius so that your own
+   un-layered (or later-layered) styles always override them without !important.
+*/
+
 @layer aeico-radius {
   .ae-radius-square  { border-radius: var(--ae-radius-square);  }
   .ae-radius-xs      { border-radius: var(--ae-radius-xs);      }

package/src/switch/switch.ts

@@ -3,12 +3,12 @@ import type { InferProps } from 'aeico';
 import { html, prop } from 'aeico';
 import type { SwitchIconPlacement } from './defines';
 import '../icon/icon';
-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/switch.css?inline';
+import styleVariables 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 styles from '../styles/components/switch.css';
 
 class Switch extends AeicoField<boolean> {
   protected fieldElement: HTMLInputElement | null = null;

package/src/tabs/tab-panel.ts

@@ -1,4 +1,4 @@
-import tabPanelStyle from '../styles/components/tab-panel.css?inline';
+import tabPanelStyle from '../styles/components/tab-panel.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 

package/src/tabs/tab.ts

@@ -1,5 +1,5 @@
 import type { Props } from 'aeico';
-import tabStyle from '../styles/components/tab.css?inline';
+import tabStyle from '../styles/components/tab.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 

package/src/tabs/tabs.ts

@@ -1,6 +1,6 @@
 import type { Props } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import tabsStyle from '../styles/components/tabs.css?inline';
+import styleVariables from '../styles/variables.css';
+import tabsStyle from '../styles/components/tabs.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type Tab from './tab';

package/src/tag/tag.ts

@@ -1,8 +1,8 @@
 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 tagStyle from '../styles/components/tag.css?inline';
+import styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import tagStyle from '../styles/components/tag.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type { TagColor, TagSize, TagVariant } from './defines';

package/src/text-input/text-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/text-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/text-input.css';
 
 class TextInput extends AeicoField {
   protected fieldElement: HTMLInputElement | null = null;

package/src/textarea/textarea.ts

@@ -1,11 +1,11 @@
 import AeicoField from '../aeico-field';
 import type { InferProps } from 'aeico';
 import { html, prop } 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/textarea.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/textarea.css';
 
 export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 

package/src/tooltip/tooltip.ts

@@ -1,6 +1,6 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import tooltipStyle from '../styles/components/tooltip.css?inline';
+import styleVariables from '../styles/variables.css';
+import tooltipStyle from '../styles/components/tooltip.css';
 import AeicoComponent from '../aeico-component';
 import { html, prop } from 'aeico';
 import type { TooltipPlacement, TooltipTrigger } from './defines';

package/src/tree/tree-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/tree-item.css?inline';
-import variables from '../styles/variables.css?inline';
+import style from '../styles/components/tree-item.css';
+import variables from '../styles/variables.css';
 import type { ParentTreeLike } from './defines';
 import { SVG_NS } from '../utils';
 import '../icon';

package/src/tree/tree.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/tree.css?inline';
-import variables from '../styles/variables.css?inline';
+import style from '../styles/components/tree.css';
+import variables from '../styles/variables.css';
 import type { TreeSelectDetail, TreeExpandDetail, TreeCheckDetail } from './defines';
 import './tree-item';
 import type TreeItem from './tree-item';