aeico-components 0.1.5 → 0.1.6

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/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(--clear-btn-border-radius);
+  background: var(--clear-btn-bg);
+  color: var(--clear-btn-color);
+  transition: var(--clear-btn-transition);
+}
+
+.reset-btn:not(.action-btn) {
+  border-radius: var(--reset-btn-border-radius);
+  background: var(--reset-btn-bg);
+  color: var(--reset-btn-color);
+  transition: var(--reset-btn-transition);
+}
+
+.clear-btn:not(.action-btn):hover {
+  background: var(--clear-btn-bg-hover);
+  color: var(--clear-btn-color-hover);
+}
+
+.reset-btn:not(.action-btn):hover {
+  background: var(--reset-btn-bg-hover);
+  color: var(--reset-btn-color-hover);
+}

package/src/styles/components/checkbox.css

@@ -49,30 +49,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(--red));
+  outline-offset: 1px;
 }

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

@@ -0,0 +1,119 @@
+: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 0.571em;
+  font-size: 1em;
+  line-height: 1.5;
+  border-radius: 4px;
+  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);
+}
+
+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;
+}
+
+/* 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(--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="faint"]) button {
+  background: var(--btn-subtle-bg);
+  border-color: transparent;
+  color: var(--btn-accent);
+}
+:host([variant="faint"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+  color: var(--btn-accent-hover);
+}
+
+:host([variant="subtle"]) button {
+  background: transparent;
+  border-color: transparent;
+  color: var(--btn-accent);
+}
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg);
+  color: var(--btn-accent-hover);
+}
+
+:host([variant="text"]) button {
+  background: transparent;
+  border-color: transparent;
+  color: var(--btn-accent);
+}
+:host([variant="text"]) button:hover:not(:disabled) {
+  color: var(--btn-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

@@ -43,7 +43,11 @@
 
 .detail {
   border: 1px solid var(--detail-border);
-  border-radius: var(--detail-radius);
+  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;
@@ -93,6 +97,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;
 }

package/src/styles/components/drawer.css

@@ -0,0 +1,161 @@
+/**
+ * :host is placed in the light DOM. Setting position:fixed on it guarantees
+ * viewport-level coverage regardless of any z-index stacking inside the page.
+ */
+:host {
+  display: none;
+}
+
+:host([data-open]) {
+  display: block;
+  position: fixed;
+  inset: 0;
+  z-index: var(--ae-drawer-z-index, 1000);
+  /* Host covers the viewport but passes pointer events through by default.
+     Backdrop and panel re-enable them selectively. */
+  pointer-events: none;
+}
+
+/* ── Backdrop ────────────────────────────────────────────────────── */
+.backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--color-overlay);
+  animation: drawer-backdrop-in 0.2s ease;
+  pointer-events: auto;
+}
+
+/* ── Panel ───────────────────────────────────────────────────────── */
+.panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-overlay);
+  color: var(--color-text-main);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  pointer-events: auto;
+  outline: none;
+}
+
+/* ── Placements ──────────────────────────────────────────────────── */
+.panel.placement-right {
+  inset: 0 0 0 auto;
+  width: var(--ae-drawer-size, 320px);
+  max-width: 100%;
+  border-radius: 8px 0 0 8px;
+  animation: drawer-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.panel.placement-left {
+  inset: 0 auto 0 0;
+  width: var(--ae-drawer-size, 320px);
+  max-width: 100%;
+  border-radius: 0 8px 8px 0;
+  animation: drawer-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.panel.placement-top {
+  inset: 0 0 auto 0;
+  height: var(--ae-drawer-size, 320px);
+  max-height: 100%;
+  border-radius: 0 0 8px 8px;
+  animation: drawer-slide-in-top 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.panel.placement-bottom {
+  inset: auto 0 0 0;
+  height: var(--ae-drawer-size, 320px);
+  max-height: 100%;
+  border-radius: 8px 8px 0 0;
+  animation: drawer-slide-in-bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Keyframes ───────────────────────────────────────────────────── */
+@keyframes drawer-backdrop-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes drawer-slide-in-right {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes drawer-slide-in-left {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes drawer-slide-in-top {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes drawer-slide-in-bottom {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+/* ── Header ──────────────────────────────────────────────────────── */
+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 ────────────────────────────────────────────────────────── */
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* ── Footer ──────────────────────────────────────────────────────── */
+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/field-label.css

@@ -0,0 +1,120 @@
+:host {
+  --field-label-gap: 4px;
+  --field-label-col-gap: 8px;
+  --field-label-width: 100px;
+  --field-label-font-size: 0.875em;
+  --field-label-color: inherit;
+  --field-required-color: var(--red, #dc3545);
+  --field-helper-color: var(--color-text-muted, #6e6e6e);
+  --field-error-color: var(--red, #dc3545);
+}
+
+:host([label]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--field-label-gap);
+}
+
+:host([label][label-placement="left"]) {
+  display: grid;
+  grid-template-columns: var(--field-label-width) 1fr;
+  column-gap: var(--field-label-col-gap);
+  row-gap: var(--field-label-gap);
+  align-items: start;
+}
+
+:host([label][label-placement="left"]) .field-label {
+  align-self: center;
+}
+
+:host([label][label-placement="left"]) .field-helper,
+:host([label][label-placement="left"]) .field-error {
+  grid-column: 2;
+}
+
+.field-label {
+  font-size: var(--field-label-font-size);
+  color: var(--field-label-color);
+  user-select: none;
+  line-height: 1.4;
+}
+
+.field-required {
+  color: var(--field-required-color);
+  margin-left: 2px;
+}
+
+.field-helper {
+  font-size: 0.8em;
+  color: var(--field-helper-color);
+  line-height: 1.4;
+}
+
+.field-error {
+  font-size: 0.8em;
+  color: var(--field-error-color);
+  line-height: 1.4;
+}
+
+/* Action controls container (integrated style) */
+.action-controls {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  margin-left: calc(-1 * var(--field-action-gap, 4px) - 1px);
+  border: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--border-subtle));
+  border-radius: 0 var(--field-action-border-radius, 2px) var(--field-action-border-radius, 2px) 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  transition: border-color 0.12s;
+  background: var(--field-action-bg, var(--surface-base));
+  position: relative;
+  z-index: 1;
+  align-self: stretch;
+}
+
+.action-controls .action-btn {
+  border: none;
+  background: transparent;
+  color: var(--field-action-color, var(--color-text-muted));
+  font-size: 0.875em;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5em;
+  transition: background 0.12s;
+}
+
+.action-controls .action-btn:hover:not(:disabled) {
+  background: var(--field-action-bg-hover, var(--surface-raised));
+}
+
+.action-controls .action-btn:active:not(:disabled) {
+  background: var(--field-action-bg-focus, var(--surface-raised));
+}
+
+.action-controls .action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-controls .action-btn + .action-btn {
+  border-left: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--border-subtle));
+}
+
+.input-container:has(input:focus) ~ .action-controls,
+.input-container:has(input:focus) .action-controls,
+.container:has(.trigger.open) ~ .action-controls,
+.container:has(.trigger.open) .action-controls {
+  border-color: var(--field-action-border-color-focus, var(--border-focus));
+}
+
+.input-container:has(input:hover:not(:focus)) ~ .action-controls,
+.input-container:has(input:hover:not(:focus)) .action-controls,
+.container:has(.trigger:hover:not(.disabled)) ~ .action-controls,
+.container:has(.trigger:hover:not(.disabled)) .action-controls {
+  border-color: var(--field-action-border-color-hover, var(--border-default));
+}