aeico-components 0.1.6 → 0.1.7

package/src/styles/components/button.css

@@ -1,16 +1,5 @@
 :host {
   display: inline-block;
-  --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);
 }
 
 button {
@@ -31,100 +20,100 @@ button {
   padding: 0.429em 1.071em;
   font-size: 1em;
   line-height: 1.5;
-  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
+  border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));
   min-width: 4.571em;
   height: 2.286em;
   width: 100%;
 
-  background:   var(--btn-solid-bg);
-  border: 1px solid var(--btn-solid-bg);
-  color:        var(--btn-solid-color);
+  background:   var(--ae-color-solid);
+  border: 1px solid var(--ae-color-solid);
+  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;
   cursor: not-allowed;
 }
 
-:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
-:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+:host([size="xs"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
+:host([size="sm"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
 
 /* --- Variants --- */
 
 :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="faint"]) button {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
+  background:   var(--ae-color-subtle);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="faint"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
+  background:   var(--ae-color-subtle-hover);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-accent-hover);
 }
 
 :host([variant="faint"]) 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);
   min-width:     auto;
   padding-left:  4px;
   padding-right: 4px;
 }
 
 :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-only: single ae-icon child → square compact layout */
@@ -133,7 +122,7 @@ button:disabled {
 }
 
 :host([icon-only]:not([size])) {
-  font-size: var(--size-m);
+  font-size: var(--ae-size-m);
 }
 
 :host([icon-only]) button {
@@ -149,9 +138,9 @@ button:disabled {
 }
 
 :host([active]) button {
-  background:   var(--btn-solid-bg-active);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+  background:   var(--ae-color-solid-active);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
 }
 
 .btn-icon {
@@ -162,7 +151,7 @@ button:disabled {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: var(--ae-radius-sm);
 }
 
 .btn-icon.btn-lg {
@@ -171,7 +160,7 @@ button:disabled {
 }
 
 .btn-circle {
-  border-radius: 50%;
+  border-radius: var(--ae-radius-circle);
 }
 
 :host([block]) {
@@ -191,7 +180,7 @@ button.btn-loading::before {
   height: 1em;
   border: 2px solid currentColor;
   border-top-color: transparent;
-  border-radius: 50%;
+  border-radius: var(--ae-radius-circle);
   animation: btn-spin 0.6s linear infinite;
   color: currentColor;
   opacity: 0.8;

package/src/styles/components/card.css

@@ -1,46 +1,61 @@
 :host {
   display: block;
+}
 
-  --card-bg:      var(--color-bg-subtle);
-  --card-color:   var(--color-text-subtle);
-  --card-border:  var(--color-border-subtle);
-  --card-divider: var(--color-border-subtle);
+.card {
+  border: 1px solid var(--ae-color-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-radius-lg));
+  background: var(--ae-color-bg-subtle);
+  color: var(--ae-color-text-subtle);
+  overflow: hidden;
 }
 
-:host([variant="faint"]) {
-  --card-bg:      var(--color-bg-subtle);
-  --card-color:   var(--color-text-subtle);
-  --card-border:  var(--color-border-subtle);
-  --card-divider: var(--color-border-subtle);
+/* variant overrides */
+:host([variant="faint"]) .card {
+  border-color: var(--ae-color-border-subtle);
+  background: var(--ae-color-bg-subtle);
+  color: var(--ae-color-text-subtle);
 }
 
-:host([variant="subtle"]) {
-  --card-border:  transparent;
-  --card-divider: transparent;
+:host([variant="subtle"]) .card {
+  border-color: transparent;
 }
 
-:host([variant="filled"]) {
-  --card-bg:      var(--color-solid);
-  --card-color:   var(--color-on-solid);
-  --card-border:  var(--color-solid);
-  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);
+: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="outlined"]) {
-  --card-bg:      transparent;
-  --card-color:   var(--color-text-subtle);
-  --card-border:  var(--color-border);
-  --card-divider: var(--color-border-subtle);
+:host([variant="filled"]) .header {
+  border-bottom-color: color-mix(in srgb, var(--ae-color-solid), black 15%);
 }
 
-.card {
-  border: 1px solid var(--card-border);
-  border-radius: 8px;
-  background: var(--card-bg);
-  color: var(--card-color);
-  overflow: hidden;
+: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;
@@ -51,12 +66,12 @@
 
 :host([has-header]) .header {
   display: block;
-  border-bottom: 1px solid var(--card-divider);
+  border-bottom: 1px solid var(--ae-color-border-subtle);
 }
 
 :host([has-footer]) .footer {
   display: block;
-  border-top: 1px solid var(--card-divider);
+  border-top: 1px solid var(--ae-color-border-subtle);
 }
 
 .body {

package/src/styles/components/checkbox.css

@@ -2,7 +2,7 @@
   display: block;
   flex: 1;
   min-width: 0;
-  font-size: var(--size-base);
+  font-size: var(--ae-size-base);
 
   /* Layout */
   --checkbox-field-gap: 4px;
@@ -10,13 +10,8 @@
   /* Checkbox */
   --checkbox-size: 1.167em;
   --checkbox-border-width: 1px;
-  --checkbox-border-radius: 2px;
-  --checkbox-border-color: var(--border-subtle);
-  --checkbox-bg: var(--surface-base);
-  --checkbox-accent-color: var(--color-solid);
-
-  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
-  --color-solid: var(--color-primary);
+  --checkbox-border-color: var(--ae-border-subtle);
+  --checkbox-bg: var(--ae-surface-base);
 }
 
 .checkbox-container {
@@ -37,9 +32,9 @@
   height: var(--checkbox-size);
   cursor: pointer;
   border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-  border-radius: var(--checkbox-border-radius);
+  border-radius: var(--ae-border-radius, var(--ae-radius-xs));
   background: var(--checkbox-bg);
-  accent-color: var(--checkbox-accent-color);
+  accent-color: var(--ae-color-solid);
   margin: 0;
   flex-shrink: 0;
 }
@@ -51,6 +46,6 @@
 
 /* Error state */
 :host([error]) .field-input {
-  outline: 2px solid var(--field-error-color, var(--red));
+  outline: 2px solid var(--field-error-color, var(--ae-red));
   outline-offset: 1px;
 }

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

@@ -1,16 +1,5 @@
 :host {
   display: inline-block;
-  --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);
 }
 
 button {
@@ -31,26 +20,26 @@ button {
   padding: 0.429em 0.571em;
   font-size: 1em;
   line-height: 1.5;
-  border-radius: 4px;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   height: 2.286em;
   width: 2.286em;
   min-width: unset;
 
-  background:  var(--btn-solid-bg);
-  border: 1px solid var(--btn-solid-bg);
-  color:       var(--btn-solid-color);
+  background:  var(--ae-color-solid);
+  border: 1px solid var(--ae-color-solid);
+  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;
@@ -80,40 +69,40 @@ slot { display: none; }
 /* Variants */
 :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="faint"]) 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="faint"]) 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 {
   background: transparent;
   border-color: transparent;
-  color: var(--btn-accent);
+  color: var(--ae-color-accent);
 }
 :host([variant="subtle"]) 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 {
   background: transparent;
   border-color: transparent;
-  color: var(--btn-accent);
+  color: var(--ae-color-accent);
 }
 :host([variant="text"]) button:hover:not(:disabled) {
-  color: var(--btn-accent-hover);
+  color: var(--ae-color-accent-hover);
 }

package/src/styles/components/detail.css

@@ -1,65 +1,77 @@
 :host {
   display: block;
 
-  --detail-bg:         var(--color-solid);
-  --detail-color:      var(--color-on-solid);
-  --detail-border:     var(--color-solid);
-  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);
   --detail-radius:     6px;
 }
 
-:host([variant="faint"]) {
-  --detail-bg:         var(--color-bg-subtle);
-  --detail-color:      var(--color-text-subtle);
-  --detail-border:     var(--color-border-subtle);
-  --detail-header-bg:  var(--color-bg-subtle);
+.detail {
+  border: 1px solid var(--ae-color-solid);
+  border-radius:
+    var(--detail-r-tl, var(--detail-radius))
+    var(--detail-r-tr, var(--detail-radius))
+    var(--detail-r-br, var(--detail-radius))
+    var(--detail-r-bl, var(--detail-radius));
+  color: var(--ae-color-on-solid);
+  background: var(--ae-color-solid);
+  overflow: hidden;
 }
 
-:host([variant="subtle"]) {
-  --detail-bg:         transparent;
-  --detail-color:      var(--color-text-main);
-  --detail-border:     transparent;
-  --detail-header-bg:  transparent;
+/* variant overrides */
+:host([variant="subtle"]) .detail {
+  border-color: transparent;
+  background: var(--ae-color-bg-subtle);
+  color: var(--ae-color-text-subtle);
 }
 
-:host([variant="filled"]) {
-  --detail-bg:         var(--color-solid);
-  --detail-color:      var(--color-on-solid);
-  --detail-border:     var(--color-solid);
-  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);
+:host([variant="subtle"]) .summary { background: var(--ae-color-bg-subtle); }
+
+:host([variant="faint"]) .detail {
+  border-color: var(--ae-color-border-subtle);
+  background: var(--ae-color-bg-subtle);
+  color: var(--ae-color-text-subtle);
 }
 
-:host([variant="outlined"]) {
-  --detail-bg:         transparent;
-  --detail-color:      var(--color-text-subtle);
-  --detail-border:     var(--color-border);
-  --detail-header-bg:  transparent;
+:host([variant="faint"]) .summary { background: var(--ae-color-bg-subtle); }
+
+:host([variant="text"]) .detail {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ae-color-text-main);
 }
 
-:host([disabled]) {
-  opacity: 0.5;
-  pointer-events: none;
+:host([variant="text"]) .summary {
+  background: transparent;
 }
 
-.detail {
-  border: 1px solid var(--detail-border);
-  border-radius:
-    var(--detail-r-tl, var(--detail-radius))
-    var(--detail-r-tr, var(--detail-radius))
-    var(--detail-r-br, var(--detail-radius))
-    var(--detail-r-bl, var(--detail-radius));
-  color: var(--detail-color);
-  background: var(--detail-bg);
-  overflow: hidden;
+:host([variant="text"]) .label {
+  color: var(--ae-color-accent);
+}
+
+:host([variant="filled"]) .detail {
+  border-color: var(--ae-color-solid);
+  background: var(--ae-color-solid);
+  color: var(--ae-color-on-solid);
 }
 
+:host([variant="filled"]) .summary {
+  background: color-mix(in srgb, var(--ae-color-solid), black 10%);
+}
+
+:host([variant="outlined"]) .detail {
+  border-color: var(--ae-color-border);
+  background: transparent;
+  color: var(--ae-color-text-subtle);
+}
+
+:host([variant="outlined"]) .summary { background: transparent; }
+
 .summary {
   display: flex;
   align-items: center;
   gap: 6px;
   width: 100%;
   padding: 10px 14px;
-  background: var(--detail-header-bg);
+  background: color-mix(in srgb, var(--ae-color-solid), black 10%);
   color: inherit;
   font-size: inherit;
   font-family: inherit;
@@ -76,7 +88,7 @@
 }
 
 .summary:focus-visible {
-  outline: 2px solid var(--color-border);
+  outline: 2px solid var(--ae-color-border);
 }
 
 slot[name="summary"] {

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]) {