aeico-components 0.1.5 → 0.1.7

package/src/spinner/spinner.ts

@@ -0,0 +1,81 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import style from '../styles/components/spinner.css?inline';
+import type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';
+
+/**
+ * Spinner — animated loading indicator.
+ *
+ * Supports two visual variants: a rotating ring (`border`, default) and
+ * three bouncing dots (`dots`). Size and colour are driven by the shared
+ * design-token system.
+ *
+ * @example
+ * ```html
+ * <ae-spinner></ae-spinner>
+ * <ae-spinner variant="dots" color="primary" size="lg"></ae-spinner>
+ * <ae-spinner color="success" speed="0.5s" label="Saving…"></ae-spinner>
+ * ```
+ */
+class Spinner extends AeicoComponent {
+  static tagName = 'spinner';
+
+  @prop({ type: String })
+  accessor variant: SpinnerVariant = 'border';
+
+  @prop({ type: String })
+  accessor size: SpinnerSize = 'md';
+
+  @prop({ type: String })
+  accessor color: SpinnerColor = 'default';
+
+  @prop({ type: String })
+  accessor label: string = 'Loading…';
+
+  @prop({ type: String })
+  accessor speed: string | undefined;
+
+  protected static styles = [styleVariables, sizeCSS, colorCSS, style];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'status');
+  }
+
+  protected render() {
+    this.setAttribute('aria-label', this.label);
+
+    if (this.speed) {
+      this.style.setProperty('--spinner-speed', this.speed);
+    } else {
+      this.style.removeProperty('--spinner-speed');
+    }
+
+    const isDots = this.variant === 'dots';
+
+    return html(({ span }) => {
+      span({ part: 'track', className: 'track', 'aria-hidden': 'true' }, () => {
+        if (isDots) {
+          span({ className: 'dot' });
+          span({ className: 'dot' });
+          span({ className: 'dot' });
+        }
+      });
+    });
+  }
+}
+
+Spinner.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-spinner': Spinner;
+  }
+}
+
+export default Spinner;
+export type SpinnerProps = InferProps<typeof Spinner>;

package/src/styles/color.css

@@ -1,117 +1,117 @@
 :host {
-  --color-solid:           var(--color-gray);
-  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));
-  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-gray);
-  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));
-  --color-accent:          var(--color-text-muted);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--border-subtle);
-  --color-subtle-hover:    var(--border-default);
-  --color-bg-subtle:       var(--border-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--border-default);
+  --ae-color-solid:           var(--ae-color-gray);
+  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));
+  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));
+  --ae-color-on-solid:        var(--ae-color-text-main);
+  --ae-color-border:          var(--ae-color-gray);
+  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));
+  --ae-color-accent:          var(--ae-color-text-muted);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          var(--ae-border-subtle);
+  --ae-color-subtle-hover:    var(--ae-border-default);
+  --ae-color-bg-subtle:       var(--ae-border-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-muted);
+  --ae-color-border-subtle:   var(--ae-border-default);
 }
 
 :host([color="primary"]) {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-primary);
-  --color-accent:          var(--color-text-link);
-  --color-accent-hover:    var(--color-text-link-hover);
-  --color-subtle:          var(--color-primary-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
+  --ae-color-solid:           var(--ae-color-primary);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-primary);
+  --ae-color-accent:          var(--ae-color-text-link);
+  --ae-color-accent-hover:    var(--ae-color-text-link-hover);
+  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);
 }
 
 :host([color="secondary"]) {
-  --color-solid:           var(--color-secondary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-secondary-hover);
-  --color-accent:          var(--color-secondary-text-emphasis);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          rgb(from var(--slate) r g b / 0.06);
-  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);
-  --color-bg-subtle:       var(--color-secondary-bg-subtle);
-  --color-text-subtle:     var(--color-secondary-text-emphasis);
-  --color-border-subtle:   var(--color-secondary-border-subtle);
+  --ae-color-solid:           var(--ae-color-secondary);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-secondary-hover);
+  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);
+  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);
+  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);
 }
 
 :host([color="success"]) {
-  --color-solid:           var(--color-success);
-  --color-on-solid:        white;
-  --color-border:          var(--color-success);
-  --color-accent:          var(--color-success-text-emphasis);
-  --color-accent-hover:    var(--color-success-hover);
-  --color-subtle:          var(--color-success-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);
-  --color-bg-subtle:       var(--color-success-bg-subtle);
-  --color-text-subtle:     var(--color-success-text-emphasis);
-  --color-border-subtle:   var(--color-success-border-subtle);
+  --ae-color-solid:           var(--ae-color-success);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-success);
+  --ae-color-accent:          var(--ae-color-success-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-success-hover);
+  --ae-color-subtle:          var(--ae-color-success-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);
 }
 
 :host([color="danger"]) {
-  --color-solid:           var(--color-danger);
-  --color-on-solid:        white;
-  --color-border:          var(--color-danger);
-  --color-accent:          var(--color-danger-text-emphasis);
-  --color-accent-hover:    var(--color-danger-hover);
-  --color-subtle:          var(--color-danger-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);
-  --color-bg-subtle:       var(--color-danger-bg-subtle);
-  --color-text-subtle:     var(--color-danger-text-emphasis);
-  --color-border-subtle:   var(--color-danger-border-subtle);
+  --ae-color-solid:           var(--ae-color-danger);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-danger);
+  --ae-color-accent:          var(--ae-color-danger-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-danger-hover);
+  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);
 }
 
 :host([color="warning"]) {
-  --color-solid:           var(--color-warning);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--color-warning);
-  --color-accent:          var(--color-warning-text-emphasis);
-  --color-accent-hover:    var(--color-warning-hover);
-  --color-subtle:          var(--color-warning-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);
-  --color-bg-subtle:       var(--color-warning-bg-subtle);
-  --color-text-subtle:     var(--color-warning-text-emphasis);
-  --color-border-subtle:   var(--color-warning-border-subtle);
+  --ae-color-solid:           var(--ae-color-warning);
+  --ae-color-on-solid:        var(--ae-gray-900);
+  --ae-color-border:          var(--ae-color-warning);
+  --ae-color-accent:          var(--ae-color-warning-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-warning-hover);
+  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);
 }
 
 :host([color="info"]) {
-  --color-solid:           var(--color-info);
-  --color-on-solid:        white;
-  --color-border:          var(--color-info);
-  --color-accent:          var(--color-info-text-emphasis);
-  --color-accent-hover:    var(--color-info-hover);
-  --color-subtle:          var(--color-info-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);
-  --color-bg-subtle:       var(--color-info-bg-subtle);
-  --color-text-subtle:     var(--color-info-text-emphasis);
-  --color-border-subtle:   var(--color-info-border-subtle);
+  --ae-color-solid:           var(--ae-color-info);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-info);
+  --ae-color-accent:          var(--ae-color-info-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-info-hover);
+  --ae-color-subtle:          var(--ae-color-info-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);
 }
 
 :host([color="light"]) {
-  --color-solid:           var(--light);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--border-hover);
-  --color-subtle:          var(--color-light-bg-subtle);
-  --color-subtle-hover:    var(--color-light-border-subtle);
-  --color-bg-subtle:       var(--color-light-bg-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--color-light-border-subtle);
+  --ae-color-solid:           var(--ae-light);
+  --ae-color-on-solid:        var(--ae-gray-900);
+  --ae-color-border:          var(--ae-border-hover);
+  --ae-color-subtle:          var(--ae-color-light-bg-subtle);
+  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);
+  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-muted);
+  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);
 }
 
 :host([color="dark"]) {
-  --color-solid:           var(--dark-500);
-  --color-on-solid:        white;
-  --color-border:          var(--dark-500);
-  --color-accent:          var(--color-text-main);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--color-dark-bg-subtle);
-  --color-subtle-hover:    var(--color-dark-border-subtle);
-  --color-bg-subtle:       var(--color-dark-bg-subtle);
-  --color-text-subtle:     var(--color-text-main);
-  --color-border-subtle:   var(--color-dark-border-subtle);
+  --ae-color-solid:           var(--ae-dark-500);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-dark-500);
+  --ae-color-accent:          var(--ae-color-text-main);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);
+  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);
+  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-main);
+  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);
 }

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

@@ -0,0 +1,37 @@
+/* Action button base styles — shared by clear-btn and reset-btn (standalone mode) */
+.clear-btn:not(.action-btn),
+.reset-btn:not(.action-btn) {
+  width: 1.333em;
+  height: 1.333em;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.clear-btn:not(.action-btn) {
+  border-radius: var(--ae-clear-btn-border-radius);
+  background: var(--ae-clear-btn-bg);
+  color: var(--ae-clear-btn-color);
+  transition: var(--ae-clear-btn-transition);
+}
+
+.reset-btn:not(.action-btn) {
+  border-radius: var(--ae-reset-btn-border-radius);
+  background: var(--ae-reset-btn-bg);
+  color: var(--ae-reset-btn-color);
+  transition: var(--ae-reset-btn-transition);
+}
+
+.clear-btn:not(.action-btn):hover {
+  background: var(--ae-clear-btn-bg-hover);
+  color: var(--ae-clear-btn-color-hover);
+}
+
+.reset-btn:not(.action-btn):hover {
+  background: var(--ae-reset-btn-bg-hover);
+  color: var(--ae-reset-btn-color-hover);
+}

package/src/styles/components/alert.css

@@ -2,57 +2,51 @@
   position: relative;
   padding: 12px 16px;
   margin-bottom: 12px;
-  border-radius: 4px;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   font-size: 12px;
   line-height: 1.6;
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border: 1px solid var(--alert-solid-bg);
+  background-color: var(--ae-color-solid);
+  color:            var(--ae-color-on-solid);
+  border: 1px solid var(--ae-color-solid);
 }
 
 .alert:last-child {
   margin-bottom: 0;
 }
 
-:host {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-primary);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
-
-  --alert-solid-bg:     var(--color-solid);
-  --alert-solid-color:  var(--color-on-solid);
-  --alert-border:       var(--color-border);
-  --alert-subtle-bg:    var(--color-bg-subtle);
-  --alert-subtle-color: var(--color-text-subtle);
-  --alert-subtle-border:var(--color-border-subtle);
+/* default color (no [color] attribute) — primary */
+:host(:not([color])) {
+  --ae-color-solid:           var(--ae-color-primary);
+  --ae-color-on-solid:        var(--ae-color-text-main);
+  --ae-color-border:          var(--ae-color-primary);
+  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);
 }
 
 
 :host([variant="faint"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-subtle-border);
+  background-color: var(--ae-color-bg-subtle);
+  color:            var(--ae-color-text-subtle);
+  border-color:     var(--ae-color-border-subtle);
 }
 
 :host([variant="subtle"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
+  background-color: var(--ae-color-bg-subtle);
+  color:            var(--ae-color-text-subtle);
   border-color:     transparent;
 }
 
 :host([variant="filled"]) .alert {
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border-color:     var(--alert-solid-bg);
+  background-color: var(--ae-color-solid);
+  color:            var(--ae-color-on-solid);
+  border-color:     var(--ae-color-solid);
 }
 
 :host([variant="outlined"]) .alert {
   background-color: transparent;
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-border);
+  color:            var(--ae-color-text-subtle);
+  border-color:     var(--ae-color-border);
 }
 
 :host([dismissible]) .alert {

package/src/styles/components/badge.css

@@ -1,13 +1,6 @@
 :host {
   display: inline-flex;
   align-items: center;
-  --badge-solid-bg:       var(--color-solid);
-  --badge-solid-color:    var(--color-on-solid);
-  --badge-border:         var(--color-border);
-  --badge-accent:         var(--color-accent);
-  --badge-subtle-bg:      var(--color-bg-subtle);
-  --badge-subtle-color:   var(--color-text-subtle);
-  --badge-subtle-border:  var(--color-border-subtle);
 }
 
 .badge {
@@ -21,10 +14,10 @@
   line-height: 1.2;
   font-size: 1em;
   padding: 0.15em 0.6em;
-  border-radius: 4px;
-  border: 1px solid var(--badge-solid-bg);
-  background: var(--badge-solid-bg);
-  color: var(--badge-solid-color);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  border: 1px solid var(--ae-color-solid);
+  background: var(--ae-color-solid);
+  color: var(--ae-color-on-solid);
 }
 
 /* Default (no [variant]) = filled */
@@ -33,32 +26,32 @@
 
 :host([variant="outlined"]) .badge {
   background:   transparent;
-  border-color: var(--badge-border);
-  color:        var(--badge-accent);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="faint"]) .badge {
-  background:   var(--badge-subtle-bg);
-  border-color: var(--badge-subtle-border);
-  color:        var(--badge-subtle-color);
+  background:   var(--ae-color-bg-subtle);
+  border-color: var(--ae-color-border-subtle);
+  color:        var(--ae-color-text-subtle);
 }
 
 :host([variant="subtle"]) .badge {
-  background:   var(--badge-subtle-bg);
+  background:   var(--ae-color-bg-subtle);
   border-color: transparent;
-  color:        var(--badge-subtle-color);
+  color:        var(--ae-color-text-subtle);
 }
 
 :host([variant="text"]) .badge {
   background:   transparent;
   border-color: transparent;
-  color:        var(--badge-accent);
+  color:        var(--ae-color-accent);
   padding-left:  0;
   padding-right: 0;
 }
 
 :host([pill]) .badge {
-  border-radius: 999px;
+  border-radius: var(--ae-radius-pill);
 }
 
 /* Icon slots */

package/src/styles/components/breadcrumb-item.css

@@ -13,7 +13,7 @@
 .sep {
   display: inline-flex;
   align-items: center;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   padding: 0 0.35em;
   user-select: none;
   pointer-events: none;
@@ -30,30 +30,30 @@
 .label {
   display: inline-flex;
   align-items: center;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
 }
 
 /* Current page — last item */
 :host([aria-current="page"]) .label {
-  color: var(--color-text-main);
+  color: var(--ae-color-text-main);
   font-weight: 500;
   cursor: default;
 }
 
 /* Link items */
 .label a {
-  color: var(--color-accent, var(--color-text-link));
+  color: var(--ae-color-accent, var(--ae-color-text-link));
   text-decoration: none;
   outline: none;
 }
 
 .label a:hover {
-  color: var(--color-accent-hover, var(--color-text-link-hover));
+  color: var(--ae-color-accent-hover, var(--ae-color-text-link-hover));
   text-decoration: underline;
 }
 
 .label a:focus-visible {
-  outline: 2px solid var(--color-accent, var(--focus-ring-color));
+  outline: 2px solid var(--ae-color-accent, var(--ae-focus-ring-color));
   outline-offset: 2px;
-  border-radius: 2px;
+  border-radius: var(--ae-radius-xs);
 }