aeico-components 0.1.5 → 0.1.7

package/src/styles/components/dialog.css

@@ -6,12 +6,12 @@ dialog {
   display: none;
   flex-direction: column;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--ae-border-radius, var(--ae-border-radius));
   padding: 0;
   max-width: min(90vw, 600px);
   max-height: 90vh;
-  background: var(--surface-overlay);
-  color: var(--color-text-main);
+  background: var(--ae-surface-overlay);
+  color: var(--ae-color-text-main);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   overflow: hidden;
 }
@@ -47,16 +47,16 @@ header {
   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 {
@@ -68,9 +68,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;
@@ -78,8 +78,8 @@ 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 {
@@ -94,7 +94,7 @@ footer {
   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/divider.css

@@ -4,10 +4,10 @@
   height: var(--thickness, 1px);
   flex-shrink: 0;
 
-  /* Override colorCSS default --color-border from gray to the subtle border token */
-  --color-border: var(--border-default);
+  /* Override color.css default — divider uses the subtle border token when no [color] is set */
+  --ae-color-border: var(--ae-border-default);
 
-  background: var(--color-border);
+  background: var(--ae-color-border);
 }
 
 :host([vertical]) {

package/src/styles/components/drawer.css

@@ -0,0 +1,152 @@
+:host {
+  display: none;
+}
+
+:host([data-open]) {
+  display: block;
+  position: fixed;
+  inset: 0;
+  z-index: var(--ae-drawer-z-index, 1000);
+  pointer-events: none;
+}
+
+.backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--color-overlay);
+  animation: drawer-backdrop-in 0.2s ease;
+  pointer-events: auto;
+}
+
+.panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  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;
+}
+
+.panel.placement-right {
+  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));
+  animation: drawer-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.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;
+  animation: drawer-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.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));
+  animation: drawer-slide-in-top 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.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;
+  animation: drawer-slide-in-bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Keyframes ───────────────────────────────────────────────────── */
+@keyframes drawer-backdrop-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes drawer-slide-in-right {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes drawer-slide-in-left {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes drawer-slide-in-top {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes drawer-slide-in-bottom {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+/* ── Header ──────────────────────────────────────────────────────── */
+header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ae-border-subtle);
+  flex-shrink: 0;
+}
+
+.label {
+  flex: 1;
+  font-size: var(--ae-size-m, 1rem);
+  font-weight: 500;
+  margin: 0;
+  color: var(--ae-color-text-main);
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--ae-border-radius, var(--ae-border-radius));
+  background: transparent;
+  color: var(--ae-color-text-muted);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.close-btn:hover {
+  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(--ae-border-subtle);
+  flex-shrink: 0;
+}
+
+::slotted([data-align-left]) {
+  margin-right: auto;
+}

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

@@ -0,0 +1,120 @@
+:host {
+  --field-label-gap: 4px;
+  --field-label-col-gap: 8px;
+  --field-label-width: 100px;
+  --field-label-font-size: 0.875em;
+  --field-label-color: inherit;
+  --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]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--field-label-gap);
+}
+
+:host([label][label-placement="left"]) {
+  display: grid;
+  grid-template-columns: var(--field-label-width) 1fr;
+  column-gap: var(--field-label-col-gap);
+  row-gap: var(--field-label-gap);
+  align-items: start;
+}
+
+:host([label][label-placement="left"]) .field-label {
+  align-self: center;
+}
+
+:host([label][label-placement="left"]) .field-helper,
+:host([label][label-placement="left"]) .field-error {
+  grid-column: 2;
+}
+
+.field-label {
+  font-size: var(--field-label-font-size);
+  color: var(--field-label-color);
+  user-select: none;
+  line-height: 1.4;
+}
+
+.field-required {
+  color: var(--field-required-color);
+  margin-left: 2px;
+}
+
+.field-helper {
+  font-size: 0.8em;
+  color: var(--field-helper-color);
+  line-height: 1.4;
+}
+
+.field-error {
+  font-size: 0.8em;
+  color: var(--field-error-color);
+  line-height: 1.4;
+}
+
+/* Action controls container (integrated style) */
+.action-controls {
+  display: flex;
+  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(--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(--ae-surface-base));
+  position: relative;
+  z-index: 1;
+  align-self: stretch;
+}
+
+.action-controls .action-btn {
+  border: none;
+  background: transparent;
+  color: var(--field-action-color, var(--ae-color-text-muted));
+  font-size: 0.875em;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5em;
+  transition: background 0.12s;
+}
+
+.action-controls .action-btn:hover:not(:disabled) {
+  background: var(--field-action-bg-hover, var(--ae-surface-raised));
+}
+
+.action-controls .action-btn:active:not(:disabled) {
+  background: var(--field-action-bg-focus, var(--ae-surface-raised));
+}
+
+.action-controls .action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-controls .action-btn + .action-btn {
+  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(--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(--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 {