aeico-components 0.1.1

package/src/styles/components/breadcrumb.css

@@ -0,0 +1,19 @@
+:host {
+  display: block;
+}
+
+/* Hide the separator template slot visually */
+.sep-template {
+  display: none !important;
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: 1.5;
+}

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

@@ -0,0 +1,25 @@
+:host {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+:host([block]) {
+  display: flex;
+  width: 100%;
+}
+
+:host([block]) ::slotted(ae-button) {
+  flex: 1;
+}
+
+:host([compact]) {
+  gap: 0;
+}
+
+/* Raise hovered/focused button so its border shows above neighbours */
+:host([compact]) ::slotted(ae-button:hover),
+:host([compact]) ::slotted(ae-button:focus-within) {
+  position: relative;
+  z-index: 1;
+}

package/src/styles/components/button.css

@@ -0,0 +1,213 @@
+: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 {
+  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 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);
+  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);
+}
+
+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));
+}
+
+button:active:not(:disabled) { background: var(--btn-solid-bg-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); }
+
+/* --- Variants --- */
+
+:host([variant="outlined"]) button {
+  background:   transparent;
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+
+:host([variant="outlined"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+
+:host([variant="outlined"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="subtle"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: transparent;
+  color:        var(--btn-accent);
+}
+
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+  color:      var(--btn-accent-hover);
+}
+
+:host([variant="subtle"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="faint"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border);
+  color:        var(--btn-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);
+}
+
+:host([variant="faint"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="text"]) button {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--btn-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);
+}
+
+:host([variant="text"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+/* Icon-only: single ae-icon child → square compact layout */
+:host([icon-only]) {
+  display: inline-flex;
+}
+
+:host([icon-only]:not([size])) {
+  font-size: var(--size-m);
+}
+
+:host([icon-only]) button {
+  padding:   0;
+  min-width: auto;
+  width:     2.286em;
+  height:    2.286em;
+  line-height: 1;
+}
+
+:host([icon-only]) ::slotted(ae-icon) {
+  font-size: 1.5em;
+}
+
+: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));
+}
+
+.btn-icon {
+  padding: 0;
+  min-width: auto;
+  width: 2.286em;
+  height: 2.286em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.btn-icon.btn-lg {
+  width: 2.857em;
+  height: 2.857em;
+}
+
+.btn-circle {
+  border-radius: 50%;
+}
+
+:host([block]) {
+  display: block;
+}
+
+button.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent;
+}
+
+button.btn-loading::before {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: btn-spin 0.6s linear infinite;
+  color: currentColor;
+  opacity: 0.8;
+}
+
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-icon-left {
+  margin-right: -2px;
+}
+
+.btn-icon-right {
+  margin-left: -2px;
+}
+

package/src/styles/components/card.css

@@ -0,0 +1,64 @@
+: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);
+}
+
+: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="subtle"]) {
+  --card-border:  transparent;
+  --card-divider: 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="outlined"]) {
+  --card-bg:      transparent;
+  --card-color:   var(--color-text-subtle);
+  --card-border:  var(--color-border);
+  --card-divider: var(--color-border-subtle);
+}
+
+.card {
+  border: 1px solid var(--card-border);
+  border-radius: 8px;
+  background: var(--card-bg);
+  color: var(--card-color);
+  overflow: hidden;
+}
+
+.header,
+.footer {
+  display: none;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+:host([has-header]) .header {
+  display: block;
+  border-bottom: 1px solid var(--card-divider);
+}
+
+:host([has-footer]) .footer {
+  display: block;
+  border-top: 1px solid var(--card-divider);
+}
+
+.body {
+  padding: 16px;
+}

package/src/styles/components/checkbox.css

@@ -0,0 +1,78 @@
+:host {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  font-size: var(--size-base);
+
+  /* Layout */
+  --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-container {
+  display: flex;
+  align-items: center;
+  gap: var(--checkbox-field-gap);
+  width: 100%;
+}
+
+.checkbox-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.field-input {
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  cursor: pointer;
+  border: var(--checkbox-border-width) solid var(--checkbox-border-color);
+  border-radius: var(--checkbox-border-radius);
+  background: var(--checkbox-bg);
+  accent-color: var(--checkbox-accent-color);
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.field-input:disabled {
+  opacity: 0.5;
+  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);
+}

package/src/styles/components/detail.css

@@ -0,0 +1,127 @@
+: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);
+}
+
+:host([variant="subtle"]) {
+  --detail-bg:         transparent;
+  --detail-color:      var(--color-text-main);
+  --detail-border:     transparent;
+  --detail-header-bg:  transparent;
+}
+
+: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="outlined"]) {
+  --detail-bg:         transparent;
+  --detail-color:      var(--color-text-subtle);
+  --detail-border:     var(--color-border);
+  --detail-header-bg:  transparent;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.detail {
+  border: 1px solid var(--detail-border);
+  border-radius: var(--detail-radius);
+  color: var(--detail-color);
+  background: var(--detail-bg);
+  overflow: hidden;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--detail-header-bg);
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  outline-offset: -2px;
+  user-select: none;
+}
+
+.summary:hover {
+  filter: brightness(0.93);
+}
+
+.summary:focus-visible {
+  outline: 2px solid var(--color-border);
+}
+
+slot[name="summary"] {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.label {
+  flex: 1;
+}
+
+slot[name="expand"],
+slot[name="collapse"] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+slot[name="collapse"] {
+  display: none;
+}
+
+:host([open]) slot[name="expand"] {
+  display: none;
+}
+
+:host([open]) slot[name="collapse"] {
+  display: inline-flex;
+}
+
+.content-outer {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+:host([open]) .content-outer {
+  grid-template-rows: 1fr;
+}
+
+.content {
+  overflow: hidden;
+  padding: 0 14px;
+  transition: padding 0.25s ease;
+}
+
+:host([open]) .content {
+  padding: 12px 14px;
+}
+

package/src/styles/components/dialog.css

@@ -0,0 +1,103 @@
+:host {
+  display: contents;
+}
+
+dialog {
+  display: none;
+  flex-direction: column;
+  border: none;
+  border-radius: 8px;
+  padding: 0;
+  max-width: min(90vw, 600px);
+  max-height: 90vh;
+  background: var(--surface-overlay);
+  color: var(--color-text-main);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+dialog[open] {
+  display: flex;
+  animation: dialog-slide-in 0.2s ease;
+}
+
+dialog::backdrop {
+  background: var(--color-overlay);
+  animation: dialog-backdrop-in 0.2s ease;
+}
+
+@keyframes dialog-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dialog-slide-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.label {
+  flex: 1;
+  font-size: var(--size-m, 1rem);
+  font-weight: 500;
+  margin: 0;
+  color: var(--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: 4px;
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.close-btn:hover {
+  background: var(--border-subtle);
+  color: var(--color-text-main);
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+::slotted([data-align-left]) {
+  margin-right: auto;
+}

package/src/styles/components/divider.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  width: 100%;
+  height: var(--thickness, 1px);
+  flex-shrink: 0;
+
+  /* Override colorCSS default --color-border from gray to the subtle border token */
+  --color-border: var(--border-default);
+
+  background: var(--color-border);
+}
+
+:host([vertical]) {
+  display: inline-block;
+  width: var(--thickness, 1px);
+  height: 1lh;
+  vertical-align: middle;
+}