aeico-components 0.1.6 → 0.1.8

package/src/styles/components/drawer.css

@@ -1,7 +1,3 @@
-/**
- * :host is placed in the light DOM. Setting position:fixed on it guarantees
- * viewport-level coverage regardless of any z-index stacking inside the page.
- */
 :host {
   display: none;
 }
@@ -11,12 +7,9 @@
   position: fixed;
   inset: 0;
   z-index: var(--ae-drawer-z-index, 1000);
-  /* Host covers the viewport but passes pointer events through by default.
-     Backdrop and panel re-enable them selectively. */
   pointer-events: none;
 }
 
-/* ── Backdrop ────────────────────────────────────────────────────── */
 .backdrop {
   position: absolute;
   inset: 0;
@@ -25,94 +18,135 @@
   pointer-events: auto;
 }
 
-/* ── Panel ───────────────────────────────────────────────────────── */
+:host([data-closing]) .backdrop {
+  animation: drawer-backdrop-out 0.2s ease forwards;
+}
+
 .panel {
   position: absolute;
   display: flex;
   flex-direction: column;
-  background: var(--surface-overlay);
-  color: var(--color-text-main);
+  background: var(--ae-surface-overlay);
+  color: var(--ae-color-text-main);
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   pointer-events: auto;
   outline: none;
 }
 
-/* ── Placements ──────────────────────────────────────────────────── */
 .panel.placement-right {
   inset: 0 0 0 auto;
   width: var(--ae-drawer-size, 320px);
   max-width: 100%;
-  border-radius: 8px 0 0 8px;
+  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 8px 8px 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 8px 8px;
+  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: 8px 8px 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;
   gap: 8px;
   padding: 16px 20px;
-  border-bottom: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--ae-border-subtle);
   flex-shrink: 0;
 }
 
 .label {
   flex: 1;
-  font-size: var(--size-m, 1rem);
+  font-size: var(--ae-size-m, 1rem);
   font-weight: 500;
   margin: 0;
-  color: var(--color-text-main);
+  color: var(--ae-color-text-main);
 }
 
 .close-btn {
@@ -124,9 +158,9 @@ header {
   height: 28px;
   padding: 0;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   background: transparent;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
@@ -134,25 +168,23 @@ header {
 }
 
 .close-btn:hover {
-  background: var(--border-subtle);
-  color: var(--color-text-main);
+  background: var(--ae-border-subtle);
+  color: var(--ae-color-text-main);
 }
 
-/* ── Body ────────────────────────────────────────────────────────── */
 .body {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
 
-/* ── Footer ──────────────────────────────────────────────────────── */
 footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   padding: 12px 20px;
-  border-top: 1px solid var(--border-subtle);
+  border-top: 1px solid var(--ae-border-subtle);
   flex-shrink: 0;
 }
 

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

@@ -3,14 +3,13 @@
 
   --dropdown-item-padding: 0.5rem 0.875rem;
   --dropdown-item-bg: transparent;
-  --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
-  --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));
-  --dropdown-item-color: var(--color-text-main, inherit);
-  --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));
+  --dropdown-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.05));
+  --dropdown-item-bg-active: var(--ae-surface-raised-active, rgba(0, 0, 0, 0.1));
+  --dropdown-item-color: var(--ae-color-text-main, inherit);
+  --dropdown-item-color-disabled: var(--ae-color-text-disabled, rgba(0, 0, 0, 0.35));
   --dropdown-item-font-size: 0.9375rem;
   --dropdown-item-gap: 0.5rem;
   --dropdown-item-transition: background 0.1s;
-  --dropdown-item-border-radius: var(--ae-radius-sm, 4px);
 }
 
 .item {
@@ -24,7 +23,7 @@
   color: var(--dropdown-item-color);
   background: var(--dropdown-item-bg);
   border: none;
-  border-radius: var(--dropdown-item-border-radius);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   text-align: left;
   text-decoration: none;
   cursor: pointer;
@@ -45,7 +44,7 @@
 
 .item:focus-visible {
   background: var(--dropdown-item-bg-hover);
-  outline: 2px solid var(--color-primary, #0e639c);
+  outline: 2px solid var(--ae-color-primary, #0e639c);
   outline-offset: -2px;
 }
 
@@ -60,7 +59,7 @@
 /* Active item — current selection, current route, etc. */
 :host([active]) .item {
   background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
-  color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));
+  color: var(--dropdown-item-color-active, var(--ae-color-primary, #0e639c));
   font-weight: 500;
 }
 

package/src/styles/components/dropdown.css

@@ -3,9 +3,8 @@
   position: relative;
 
   --dropdown-z-index: 1000;
-  --dropdown-bg: var(--surface-overlay, #fff);
-  --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
-  --dropdown-border-radius: var(--ae-radius-md, 6px);
+  --dropdown-bg: var(--ae-surface-overlay, #fff);
+  --dropdown-border: 1px solid var(--ae-color-border, rgba(0, 0, 0, 0.12));
   --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   --dropdown-min-width: 10rem;
   --dropdown-padding: 0.25rem 0;
@@ -86,7 +85,7 @@
   z-index: var(--dropdown-z-index);
   background: var(--dropdown-bg);
   border: var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
+  border-radius: var(--ae-border-radius, var(--ae-radius-md));
   box-shadow: var(--dropdown-shadow);
   min-width: var(--dropdown-min-width);
   padding: var(--dropdown-padding);

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

@@ -4,9 +4,9 @@
   --field-label-width: 100px;
   --field-label-font-size: 0.875em;
   --field-label-color: inherit;
-  --field-required-color: var(--red, #dc3545);
-  --field-helper-color: var(--color-text-muted, #6e6e6e);
-  --field-error-color: var(--red, #dc3545);
+  --field-required-color: var(--ae-red, #dc3545);
+  --field-helper-color: var(--ae-color-text-muted, #6e6e6e);
+  --field-error-color: var(--ae-red, #dc3545);
 }
 
 :host([label]) {
@@ -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 {
@@ -63,12 +63,12 @@
   flex-direction: row;
   align-items: stretch;
   margin-left: calc(-1 * var(--field-action-gap, 4px) - 1px);
-  border: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--border-subtle));
-  border-radius: 0 var(--field-action-border-radius, 2px) var(--field-action-border-radius, 2px) 0;
+  border: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--ae-border-subtle));
+  border-radius: 0 var(--field-action-border-radius, var(--ae-radius-xs)) var(--field-action-border-radius, var(--ae-radius-xs)) 0;
   overflow: hidden;
   flex-shrink: 0;
   transition: border-color 0.12s;
-  background: var(--field-action-bg, var(--surface-base));
+  background: var(--field-action-bg, var(--ae-surface-base));
   position: relative;
   z-index: 1;
   align-self: stretch;
@@ -77,7 +77,7 @@
 .action-controls .action-btn {
   border: none;
   background: transparent;
-  color: var(--field-action-color, var(--color-text-muted));
+  color: var(--field-action-color, var(--ae-color-text-muted));
   font-size: 0.875em;
   line-height: 1;
   cursor: pointer;
@@ -89,11 +89,11 @@
 }
 
 .action-controls .action-btn:hover:not(:disabled) {
-  background: var(--field-action-bg-hover, var(--surface-raised));
+  background: var(--field-action-bg-hover, var(--ae-surface-raised));
 }
 
 .action-controls .action-btn:active:not(:disabled) {
-  background: var(--field-action-bg-focus, var(--surface-raised));
+  background: var(--field-action-bg-focus, var(--ae-surface-raised));
 }
 
 .action-controls .action-btn:disabled {
@@ -102,19 +102,19 @@
 }
 
 .action-controls .action-btn + .action-btn {
-  border-left: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--border-subtle));
+  border-left: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--ae-border-subtle));
 }
 
 .input-container:has(input:focus) ~ .action-controls,
 .input-container:has(input:focus) .action-controls,
 .container:has(.trigger.open) ~ .action-controls,
 .container:has(.trigger.open) .action-controls {
-  border-color: var(--field-action-border-color-focus, var(--border-focus));
+  border-color: var(--field-action-border-color-focus, var(--ae-border-focus));
 }
 
 .input-container:has(input:hover:not(:focus)) ~ .action-controls,
 .input-container:has(input:hover:not(:focus)) .action-controls,
 .container:has(.trigger:hover:not(.disabled)) ~ .action-controls,
 .container:has(.trigger:hover:not(.disabled)) .action-controls {
-  border-color: var(--field-action-border-color-hover, var(--border-default));
+  border-color: var(--field-action-border-color-hover, var(--ae-border-default));
 }

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

@@ -2,18 +2,7 @@
 
 :host {
   display: inline-flex;
-  font-size: var(--size-m);
-  --btn-solid-bg:          var(--color-solid);
-  --btn-solid-bg-hover:    var(--color-solid-hover);
-  --btn-solid-bg-active:   var(--color-solid-active);
-  --btn-solid-color:       var(--color-on-solid);
-  --btn-solid-color-hover: var(--color-on-solid-hover);
-  --btn-border:            var(--color-border);
-  --btn-border-hover:      var(--color-border-hover);
-  --btn-accent:            var(--color-accent);
-  --btn-accent-hover:      var(--color-accent-hover);
-  --btn-subtle-bg:         var(--color-subtle);
-  --btn-subtle-bg-hover:   var(--color-subtle-hover);
+  font-size: var(--ae-size-m);
 }
 
 button {
@@ -23,7 +12,7 @@ button {
   padding: 0;
   font-size: 1em;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   outline: none;
   user-select: none;
@@ -31,21 +20,21 @@ button {
   width:  2.286em;
   height: 2.286em;
   --ib-icon-size: 1.286em;
-  background:  var(--btn-solid-bg);
-  border: 1px solid var(--btn-border);
-  color:       var(--btn-solid-color);
+  background:  var(--ae-color-solid);
+  border: 1px solid var(--ae-color-border);
+  color:       var(--ae-color-on-solid);
 }
 
 button:focus  { outline: none; }
 button:active { transform: translateY(1px); }
 
 button:hover:not(:disabled) {
-  background:   var(--btn-solid-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+  background:   var(--ae-color-solid-hover);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
 }
 
-button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
+button:active:not(:disabled) { background: var(--ae-color-solid-active); }
 
 button:disabled {
   opacity: 0.5;
@@ -53,52 +42,52 @@ button:disabled {
 }
 
 :host([size="xs"]) button,
-:host([size="sm"]) button { border-radius: 3px; }
+:host([size="sm"]) button { border-radius: var(--ae-border-radius, var(--ae-radius-xs)); }
 
 :host([variant="outlined"]) button {
   background:   transparent;
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="outlined"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
+  background:   var(--ae-color-subtle);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-accent-hover);
 }
 
 :host([variant="outlined"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="subtle"]) button {
-  background:   var(--btn-subtle-bg);
+  background:   var(--ae-color-subtle);
   border-color: transparent;
-  color:        var(--btn-accent);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="subtle"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-  color:      var(--btn-accent-hover);
+  background: var(--ae-color-subtle-hover);
+  color:      var(--ae-color-accent-hover);
 }
 
 :host([variant="subtle"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="text"]) button {
   background:   transparent;
   border-color: transparent;
-  color:        var(--btn-accent);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="text"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg);
-  color:      var(--btn-accent-hover);
+  background: var(--ae-color-subtle);
+  color:      var(--ae-color-accent-hover);
 }
 
 :host([variant="text"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 .icon-svg {

package/src/styles/components/icon.css

@@ -12,7 +12,7 @@
 }
 
 :host([color]) {
-  color: var(--color-solid);
+  color: var(--ae-color-solid);
 }
 
 .icon-svg {

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

@@ -6,16 +6,15 @@
   --menu-item-padding-x: 0.875rem;
   --menu-item-font-size: 0.9375rem;
   --menu-item-color: inherit;
-  --menu-item-color-disabled: var(--color-text-disabled);
+  --menu-item-color-disabled: var(--ae-color-text-disabled);
   --menu-item-bg: transparent;
-  --menu-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
-  --menu-item-active-color: var(--color-primary, var(--blue-500));
-  --menu-item-active-border-color: var(--color-primary, var(--blue-500));
+  --menu-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.05));
+  --menu-item-active-color: var(--ae-color-primary, var(--ae-blue-500));
+  --menu-item-active-border-color: var(--ae-color-primary, var(--ae-blue-500));
 
   --submenu-z-index: 1001;
-  --submenu-bg: var(--surface-overlay, #fff);
-  --submenu-border: 1px solid var(--border-default);
-  --submenu-border-radius: var(--ae-radius-md, 6px);
+  --submenu-bg: var(--ae-surface-overlay, #fff);
+  --submenu-border: 1px solid var(--ae-border-default);
   --submenu-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   --submenu-min-width: 10rem;
   --submenu-padding: 0.25rem 0;
@@ -52,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);
 }
@@ -134,7 +139,7 @@ slot[name="collapse"] .item-arrow--right {
   z-index: var(--submenu-z-index);
   background: var(--submenu-bg);
   border: var(--submenu-border);
-  border-radius: var(--submenu-border-radius);
+  border-radius: var(--ae-border-radius, var(--ae-radius-md));
   box-shadow: var(--submenu-shadow);
   min-width: var(--submenu-min-width);
   padding: var(--submenu-padding);