aeico-components 0.1.5 → 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;
 }
@@ -49,30 +44,8 @@
   cursor: not-allowed;
 }
 
-/* action buttons */
-.reset-btn,
-.clear-btn {
-  width: 1.333em;
-  height: 1.333em;
-  border: none;
-  border-radius: var(--reset-btn-border-radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--reset-btn-bg);
-  color: var(--reset-btn-color);
-  transition: var(--reset-btn-transition);
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-.reset-btn:hover {
-  background: var(--reset-btn-bg-hover);
-  color: var(--reset-btn-color-hover);
-}
-
-.clear-btn:hover {
-  background: var(--clear-btn-bg-hover);
-  color: var(--clear-btn-color-hover);
+/* Error state */
+:host([error]) .field-input {
+  outline: 2px solid var(--field-error-color, var(--ae-red));
+  outline-offset: 1px;
 }

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

@@ -0,0 +1,108 @@
+:host {
+  display: inline-block;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+  position: relative;
+  padding: 0.429em 0.571em;
+  font-size: 1em;
+  line-height: 1.5;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  height: 2.286em;
+  width: 2.286em;
+  min-width: unset;
+
+  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(--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(--ae-color-solid-active); }
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Hide the fallback-text slot */
+slot { display: none; }
+
+/* Icon visibility */
+.icon-copy,
+.icon-check {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.icon-copy  { opacity: 1; transform: scale(1); }
+.icon-check { opacity: 0; transform: scale(0.6); }
+
+:host([copied]) .icon-copy  { opacity: 0; transform: scale(0.6); }
+:host([copied]) .icon-check { opacity: 1; transform: scale(1); }
+
+/* Variants */
+:host([variant="outlined"]) button {
+  background: transparent;
+  border-color: var(--ae-color-border);
+  color: var(--ae-color-accent);
+}
+:host([variant="outlined"]) button:hover:not(:disabled) {
+  background: var(--ae-color-subtle);
+  border-color: var(--ae-color-border-hover);
+  color: var(--ae-color-accent-hover);
+}
+
+:host([variant="faint"]) button {
+  background: var(--ae-color-subtle);
+  border-color: transparent;
+  color: var(--ae-color-accent);
+}
+:host([variant="faint"]) button:hover:not(:disabled) {
+  background: var(--ae-color-subtle-hover);
+  color: var(--ae-color-accent-hover);
+}
+
+:host([variant="subtle"]) button {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ae-color-accent);
+}
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--ae-color-subtle);
+  color: var(--ae-color-accent-hover);
+}
+
+:host([variant="text"]) button {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ae-color-accent);
+}
+:host([variant="text"]) button:hover:not(:disabled) {
+  color: var(--ae-color-accent-hover);
+}

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

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+
+/* Raise hovered/focused item so its border shows above neighbours */
+::slotted(ae-detail:hover),
+::slotted(ae-detail:focus-within) {
+  position: relative;
+  z-index: 1;
+}

package/src/styles/components/detail.css

@@ -1,61 +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;
+}
+
+/* variant overrides */
+:host([variant="subtle"]) .detail {
+  border-color: transparent;
+  background: var(--ae-color-bg-subtle);
+  color: var(--ae-color-text-subtle);
 }
 
-:host([variant="subtle"]) {
-  --detail-bg:         transparent;
-  --detail-color:      var(--color-text-main);
-  --detail-border:     transparent;
-  --detail-header-bg:  transparent;
+: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="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="faint"]) .summary { background: var(--ae-color-bg-subtle); }
+
+:host([variant="text"]) .detail {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ae-color-text-main);
 }
 
-:host([variant="outlined"]) {
-  --detail-bg:         transparent;
-  --detail-color:      var(--color-text-subtle);
-  --detail-border:     var(--color-border);
-  --detail-header-bg:  transparent;
+:host([variant="text"]) .summary {
+  background: transparent;
 }
 
-:host([disabled]) {
-  opacity: 0.5;
-  pointer-events: none;
+:host([variant="text"]) .label {
+  color: var(--ae-color-accent);
 }
 
-.detail {
-  border: 1px solid var(--detail-border);
-  border-radius: var(--detail-radius);
-  color: var(--detail-color);
-  background: var(--detail-bg);
-  overflow: hidden;
+: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;
@@ -72,7 +88,7 @@
 }
 
 .summary:focus-visible {
-  outline: 2px solid var(--color-border);
+  outline: 2px solid var(--ae-color-border);
 }
 
 slot[name="summary"] {
@@ -93,6 +109,11 @@ slot[name="collapse"] {
   flex-shrink: 0;
 }
 
+:host([icon-placement="start"]) slot[name="expand"],
+:host([icon-placement="start"]) slot[name="collapse"] {
+  order: -1;
+}
+
 slot[name="collapse"] {
   display: none;
 }