aeico-components 0.1.6 → 0.1.8

package/src/styles/components/card.css

@@ -1,44 +1,41 @@
 :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);
+: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="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="outlined"]) .card {
+  border-color: var(--ae-color-border);
+  background: transparent;
+  color: var(--ae-color-text-subtle);
 }
 
-.card {
-  border: 1px solid var(--card-border);
-  border-radius: 8px;
-  background: var(--card-bg);
-  color: var(--card-color);
-  overflow: hidden;
+:host([variant="text"]) .card {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ae-color-text-main);
 }
 
 .header,
@@ -51,12 +48,54 @@
 
 :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);
+}
+
+: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 {

package/src/styles/components/checkbox.css

@@ -2,21 +2,12 @@
   display: block;
   flex: 1;
   min-width: 0;
-  font-size: var(--size-base);
-
-  /* Layout */
+  font-size: var(--ae-size-base);
   --checkbox-field-gap: 4px;
-
-  /* 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 +28,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;
 }
@@ -49,8 +40,23 @@
   cursor: not-allowed;
 }
 
-/* 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;
 }
+
+.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/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-radius-lg));
   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]) {