aeico-components 0.1.4 → 0.1.6

package/src/select/select.ts

@@ -1,7 +1,6 @@
 import AeicoField from '../aeico-field';
 import type { InferProps } from 'aeico';
 import { html, tags } from 'aeico';
-import { t } from 'aeico-localize';
 import type {
   SelectOptionValue,
   SelectOption,
@@ -12,6 +11,8 @@ import type {
 import style from '../styles/components/select.css?inline';
 import variables from '../styles/variables.css?inline';
 import sizeCSS from '../styles/size.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 import SelectOptionElement from './select-option';
 import '../tag/tag';
 import { prop } from 'aeico';
@@ -28,7 +29,7 @@ import { prop } from 'aeico';
  *
  */
 class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
-  protected fieldElement = null;
+  protected fieldElement: HTMLInputElement | null = null;
   private _isOpen = false;
   private _triggerEl: HTMLElement | null = null;
   private _dropdownEl: HTMLElement | null = null;
@@ -101,13 +102,13 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
   })
   override defaultValue: SelectOptionValue | SelectMultiValue | undefined = undefined;
 
-  protected static styles = [variables, sizeCSS, style];
+  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];
 
   protected writeValue(_value: SelectOptionValue | SelectMultiValue): void {
     // Reactive re-render via this.value prop change handles the display update
   }
 
-  protected getValue(): any {
+  protected getValue(): SelectOptionValue | SelectMultiValue {
     if (this.multiple) return this._getMultiValues();
 
     return this.value || '';
@@ -124,7 +125,8 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     // disabled is a reactive prop — render() already picks it up automatically
   }
 
-  protected onUpdated(_changedProps: Map<string, unknown>): void {
+  protected onUpdated(changedProps: Map<string, unknown>): void {
+    super.onUpdated(changedProps);
     if (!this.multiple || this.expandable) {
       if (this._expanded) this._expanded = false;
       return;
@@ -140,7 +142,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     if (Array.isArray(this.options)) {
       for (const opt of this.options) {
         if (this._isSelectOption(opt)) {
-          if (String(opt.value) === strVal) return t(opt.label, opt.label);
+          if (String(opt.value) === strVal) return opt.label;
         } else {
           if (String(opt) === strVal) return strVal;
         }
@@ -261,74 +263,113 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     this._syncSlotOptionsSelected();
 
     return html(({ div, span, slot }) => {
-      div({ className: 'container' }, () => {
-        this._triggerEl = div(
-          {
-            className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,
-            '@click': () => {
-              if (isDisabled) return;
-
-              this._toggleDropdown();
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div(
+        {
+          id,
+          'aria-labelledby': this.label ? `${id}-label` : undefined,
+          className: 'container field-body',
+        },
+        () => {
+          this._triggerEl = div(
+            {
+              className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,
+              '@click': () => {
+                if (isDisabled) return;
+
+                this._toggleDropdown();
+              },
             },
-          },
-          () => {
-            if (this.multiple) {
-              if (hasMultiSelection) {
-                this._selectedListEl = div(
-                  {
-                    className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,
-                  },
-                  () => {
-                    for (const v of multiValues) {
-                      const lbl = this._findLabel(v);
-                      tags.aeTag({
-                        key: `sel-${v}`,
-                        color: 'default',
-                        variant: 'faint',
-                        dismissible: true,
-                        disabled: isDisabled,
-                        textContent: lbl,
-                        '@dismiss': (e: Event) => {
-                          e.stopPropagation();
-                          if (isDisabled) return;
-
-                          const next = multiValues.filter((item) => String(item) !== String(v));
-                          this.setValue(next, { silent: false, action: 'change' });
-                        },
-                      });
-                    }
-                  },
-                );
-                if (!this.expandable && this._expanded) {
-                  span({ className: 'overflow-indicator', textContent: '…' });
+            () => {
+              if (this.multiple) {
+                if (hasMultiSelection) {
+                  this._selectedListEl = div(
+                    {
+                      className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,
+                    },
+                    () => {
+                      for (const v of multiValues) {
+                        const lbl = this._findLabel(v);
+                        tags.aeTag({
+                          key: `sel-${v}`,
+                          color: 'default',
+                          variant: 'faint',
+                          dismissible: true,
+                          disabled: isDisabled,
+                          textContent: lbl,
+                          '@dismiss': (e: Event) => {
+                            e.stopPropagation();
+                            if (isDisabled) return;
+
+                            const next = multiValues.filter((item) => String(item) !== String(v));
+                            this.setValue(next, { silent: false, action: 'change' });
+                          },
+                        });
+                      }
+                    },
+                  );
+                  if (!this.expandable && this._expanded) {
+                    span({ className: 'overflow-indicator', textContent: '…' });
+                  }
+                } else {
+                  span({ className: 'value placeholder', textContent: this.placeholder || '' });
                 }
               } else {
-                span({ className: 'value placeholder', textContent: this.placeholder || '' });
-              }
-            } else {
-              if (selectedLabel) {
-                span({ className: 'value', textContent: selectedLabel });
-              } else {
-                span({ className: 'value placeholder', textContent: this.placeholder || '' });
+                if (selectedLabel) {
+                  span({ className: 'value', textContent: selectedLabel });
+                } else {
+                  span({ className: 'value placeholder', textContent: this.placeholder || '' });
+                }
               }
-            }
-            span({ className: 'arrow', textContent: '▾' });
-          },
-        );
-
-        this._dropdownEl = div(
-          {
-            className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,
-          },
-          () => {
-            this._renderProgrammaticOptions();
-            this._slotEl = slot({
-              '@slotchange': () => this._onSlotChange(),
-            });
-          },
-        );
-
-        this.renderActionButtons();
+              span({ className: 'arrow', textContent: '▾' });
+            },
+          );
+
+          this._dropdownEl = div(
+            {
+              className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,
+            },
+            () => {
+              this._renderProgrammaticOptions();
+              this._slotEl = slot({
+                '@slotchange': () => this._onSlotChange(),
+              });
+            },
+          );
+
+          this.renderActionButtons();
+        },
+      );
+      this.renderHelperText();
+      this.renderError();
+
+      // Visually-hidden input so native form constraint validation works for `required`.
+      // type="text" (not "hidden") is required — type="hidden" is exempt from constraint validation.
+      const currentValue =
+        this.value != null &&
+        this.value !== '' &&
+        !(Array.isArray(this.value) && this.value.length === 0)
+          ? String(this.value)
+          : '';
+      this.fieldElement = tags.input({
+        key: 'validation-input',
+        type: 'text',
+        'aria-hidden': 'true',
+        tabIndex: -1,
+        required: Boolean(this.required),
+        value: currentValue,
+        style: {
+          position: 'absolute',
+          width: '0',
+          height: '0',
+          opacity: '0',
+          margin: '0',
+          padding: '0',
+          border: '0',
+          pointerEvents: 'none',
+          overflow: 'hidden',
+        },
       });
     });
   }
@@ -347,7 +388,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
           key: `opt-${opt.value}`,
           value: String(opt.value),
           label: opt.label,
-          textContent: t(opt.label, opt.label),
+          textContent: opt.label,
           selected: isSelected ? true : undefined,
         });
       } else {

package/src/slider/slider.ts

@@ -6,6 +6,8 @@ import style from '../styles/components/slider.css?inline';
 import variables from '../styles/variables.css?inline';
 import sizeCSS from '../styles/size.css?inline';
 import colorCSS from '../styles/color.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 import { prop } from 'aeico';
 
 class Slider extends AeicoField {
@@ -55,7 +57,7 @@ class Slider extends AeicoField {
   })
   accessor marks: SliderMarks | undefined;
 
-  protected static styles = [variables, sizeCSS, colorCSS, style];
+  protected static styles = [variables, sizeCSS, colorCSS, fieldLabelCSS, actionButtonCSS, style];
 
   constructor() {
     super();
@@ -243,11 +245,14 @@ class Slider extends AeicoField {
     const attrs = this._getRangeAttrs(normalized);
 
     return html(({ div, input, span }) => {
-      div({ className: 'range-container' }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: 'range-container field-body' }, () => {
         // Wrap range + optional marks in a column so marks don't push siblings
         div({ key: 'range-wrapper', className: 'range-wrapper' }, () => {
           this.fieldElement = input({
             key: 'range',
+            id,
             type: 'range',
             min: attrs.min,
             max: attrs.max,
@@ -303,6 +308,8 @@ class Slider extends AeicoField {
       });
 
       if (this.value != null) this.writeValue(this.value);
+      this.renderHelperText();
+      this.renderError();
     });
   }
 

package/src/spinner/defines.ts

@@ -0,0 +1,12 @@
+export type SpinnerVariant = 'border' | 'dots';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+export type SpinnerColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';

package/src/spinner/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Spinner } from './spinner';
+export type { SpinnerProps } from './spinner';
+export type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';

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;
 }