aeico-components 0.1.1

package/src/slider/slider.ts

@@ -0,0 +1,364 @@
+import AeicoField from '../aeico-field';
+import type { InferProps } from 'aeico';
+import { html, tags } from 'aeico';
+import type { NormalizedOption, SliderMarks, SliderOption, SliderOptions } from './defines';
+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 { prop } from 'aeico';
+
+class Slider extends AeicoField {
+  protected fieldElement: HTMLInputElement | null = null;
+  private _valueLabel: HTMLSpanElement | null = null;
+  private _numberInput: HTMLInputElement | null = null;
+
+  private _boundOnRangeInput: () => void;
+  private _boundOnNumberInput: () => void;
+
+  static tagName = 'slider';
+
+  @prop({ type: Array })
+  accessor options: SliderOptions = [];
+
+  @prop({ type: Boolean })
+  accessor percentage = false;
+
+  @prop({ type: Number })
+  accessor min = 0;
+
+  @prop({ type: Number })
+  accessor max = 100;
+
+  @prop({ type: Number })
+  accessor step = 1;
+
+  @prop({ type: Boolean })
+  accessor editable = false;
+
+  @prop({ type: Boolean })
+  accessor tracked = false;
+
+  @prop({
+    type: Array,
+    // bare attribute (<ae-slider marks>) → true; JSON array → MarkItem[]
+    parser: (value: string | null) => {
+      if (value === null) return undefined;
+      if (value === '' || value === 'true') return true;
+      if (value === 'false') return false;
+      try {
+        return JSON.parse(value);
+      } catch {
+        return true;
+      }
+    },
+  })
+  accessor marks: SliderMarks | undefined;
+
+  protected static styles = [variables, sizeCSS, colorCSS, style];
+
+  constructor() {
+    super();
+    this._boundOnRangeInput = this._onRangeInput.bind(this);
+    this._boundOnNumberInput = this._onNumberInput.bind(this);
+  }
+
+  private _normalizeOptions(): NormalizedOption[] | null {
+    if (!Array.isArray(this.options) || this.options.length === 0) return null;
+
+    const opts = this.options.map((opt) =>
+      this._isSliderOption(opt)
+        ? { label: opt.label, value: String(opt.value) }
+        : { label: String(opt), value: String(opt) },
+    );
+
+    // Sort by numeric value if all values are numeric; otherwise keep original order
+    const allNumeric = opts.every((o) => o.value !== '' && !isNaN(Number(o.value)));
+
+    if (allNumeric) {
+      return [...opts]
+        .sort((a, b) => Number(a.value) - Number(b.value))
+        .map((o) => ({ ...o, rangeValue: Number(o.value) }));
+    } else {
+      return opts.map((o, i) => ({ ...o, rangeValue: i }));
+    }
+  }
+
+  private _getRangeAttrs(normalized: NormalizedOption[] | null): {
+    min: string;
+    max: string;
+    step: string;
+    inOptionsMode: boolean;
+  } {
+    if (normalized && normalized.length >= 1) {
+      const vals = normalized.map((o) => o.rangeValue);
+      const min = Math.min(...vals);
+      const max = Math.max(...vals);
+
+      // Compute step from minimum gap between adjacent sorted values
+      const sorted = [...vals].sort((a, b) => a - b);
+      let minGap = Infinity;
+      for (let i = 1; i < sorted.length; i++) {
+        const d = sorted[i] - sorted[i - 1];
+        if (d > 0 && d < minGap) minGap = d;
+      }
+
+      return {
+        min: String(min),
+        max: String(max),
+        step: minGap === Infinity ? '1' : String(minGap),
+        inOptionsMode: true,
+      };
+    }
+
+    return {
+      min: String(this.min),
+      max: String(this.max),
+      step: String(this.step),
+      inOptionsMode: false,
+    };
+  }
+
+  private _toRangeValue(value: string | undefined, normalized: NormalizedOption[] | null): string {
+    if (value == null || value === '') return '';
+    if (normalized) {
+      const found = normalized.find((o) => o.value === value);
+
+      return found !== undefined ? String(found.rangeValue) : '';
+    }
+
+    return value;
+  }
+
+  private _fromRangeValue(rv: string, normalized: NormalizedOption[] | null): string {
+    if (normalized) {
+      const n = Number(rv);
+
+      return normalized.find((o) => o.rangeValue === n)?.value ?? normalized[0]?.value ?? rv;
+    }
+    return rv;
+  }
+
+  private _displayLabel(value: string | undefined, normalized: NormalizedOption[] | null): string {
+    if (value == null || value === '') return '';
+    const label = normalized ? (normalized.find((o) => o.value === value)?.label ?? value) : value;
+
+    return this.percentage ? `${label}%` : label;
+  }
+
+  private _maxValueLabelWidth(
+    normalized: NormalizedOption[] | null,
+    attrs: { min: string; max: string },
+  ): string {
+    const candidates = normalized
+      ? normalized.map((o) => this._displayLabel(o.value, normalized))
+      : [this._displayLabel(attrs.min, null), this._displayLabel(attrs.max, null)];
+    const maxLen = Math.max(...candidates.map((l) => l.length), 1);
+
+    return `${maxLen}ch`;
+  }
+
+  private _updateTrackFill(): void {
+    if (!this.tracked || !this.fieldElement) return;
+    const min = Number(this.fieldElement.min);
+    const max = Number(this.fieldElement.max);
+    const val = Number(this.fieldElement.value);
+    const range = max - min || 1;
+    const pct = Math.max(0, Math.min(100, ((val - min) / range) * 100));
+    this.style.setProperty('--fill-pct', `${pct}%`);
+  }
+
+  private _getMarksData(
+    normalized: NormalizedOption[] | null,
+    attrs: { min: string; max: string; inOptionsMode: boolean },
+  ): Array<{ value: string; label: string; pct: number }> {
+    const minVal = Number(attrs.min);
+    const maxVal = Number(attrs.max);
+    const range = maxVal - minVal || 1;
+
+    const marks = this.marks;
+
+    // Custom marks array — purely visual, no snapping effect
+    if (Array.isArray(marks)) {
+      const result: Array<{ value: string; label: string; pct: number }> = [];
+      for (const m of marks) {
+        const isObj = m !== null && typeof m === 'object';
+        const numVal = isObj ? (m as { value: number }).value : m;
+        if (numVal < minVal || numVal > maxVal) continue;
+        const rawLabel = isObj ? (m.label ?? String(numVal)) : String(numVal);
+        result.push({
+          value: String(numVal),
+          label: this.percentage ? `${rawLabel}%` : rawLabel,
+          pct: ((numVal - minVal) / range) * 100,
+        });
+      }
+
+      return result;
+    }
+
+    // marks === true — auto-generate from options or free-mode endpoints
+    if (normalized) {
+      return normalized.map((o) => ({
+        value: o.value,
+        label: this.percentage ? `${o.label}%` : o.label,
+        pct: ((o.rangeValue - minVal) / range) * 100,
+      }));
+    }
+
+    // Free mode — show min and max endpoints only
+    return [
+      { value: attrs.min, label: this.percentage ? `${minVal}%` : String(minVal), pct: 0 },
+      { value: attrs.max, label: this.percentage ? `${maxVal}%` : String(maxVal), pct: 100 },
+    ];
+  }
+
+  protected writeValue(value: string): void {
+    const normalized = this._normalizeOptions();
+    const rv = this._toRangeValue(value, normalized);
+
+    if (this.fieldElement && rv !== '' && this.fieldElement.value !== rv) {
+      this.fieldElement.value = rv;
+    }
+
+    if (this._valueLabel) {
+      this._valueLabel.textContent = this._displayLabel(value, normalized);
+    }
+
+    // Sync number input only in free mode (options mode disables it)
+    if (this._numberInput && !normalized && this._numberInput.value !== rv) {
+      this._numberInput.value = rv;
+    }
+
+    this._updateTrackFill();
+  }
+
+  protected getValue(): string {
+    if (!this.fieldElement) return '';
+
+    return this._fromRangeValue(this.fieldElement.value, this._normalizeOptions());
+  }
+
+  render() {
+    const normalized = this._normalizeOptions();
+    const attrs = this._getRangeAttrs(normalized);
+
+    return html(({ div, input, span }) => {
+      div({ className: 'range-container' }, () => {
+        // 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',
+            type: 'range',
+            min: attrs.min,
+            max: attrs.max,
+            step: attrs.step,
+            '@input': this._boundOnRangeInput,
+            '@change': this.boundOnChange,
+          });
+
+          if (this.marks) {
+            const marksData = this._getMarksData(normalized, attrs);
+            div({ key: 'marks', className: 'marks-container' }, () => {
+              for (const m of marksData) {
+                tags.span(
+                  {
+                    key: `mark-${m.value}`,
+                    className: 'mark',
+                    style: { left: `${m.pct}%` },
+                  },
+                  () => {
+                    tags.span({ className: 'mark-label', textContent: m.label });
+                  },
+                );
+              }
+            });
+          }
+        });
+
+        this._valueLabel = span({
+          key: 'label',
+          className: 'value-label',
+          style: { minWidth: this._maxValueLabelWidth(normalized, attrs) },
+          textContent: this._displayLabel(this.value, normalized),
+        });
+
+        // Action buttons first so the number input can be toggled without disrupting button reuse
+        this.renderActionButtons();
+
+        if (this.editable) {
+          this._numberInput = input({
+            key: 'number',
+            type: 'number',
+            className: 'value-input',
+            min: attrs.min,
+            max: attrs.max,
+            step: attrs.step,
+            // Disabled in options mode: valid values are discrete, free text makes no sense
+            disabled: attrs.inOptionsMode,
+            '@input': this._boundOnNumberInput,
+          });
+        } else {
+          this._numberInput = null;
+        }
+      });
+
+      if (this.value != null) this.writeValue(this.value);
+    });
+  }
+
+  private _onRangeInput(): void {
+    if (!this.fieldElement) return;
+
+    const normalized = this._normalizeOptions();
+    const actualValue = this._fromRangeValue(this.fieldElement.value, normalized);
+
+    if (this._valueLabel) {
+      this._valueLabel.textContent = this._displayLabel(actualValue, normalized);
+    }
+    // Keep number input in sync during drag
+    if (this._numberInput && !normalized) {
+      this._numberInput.value = this.fieldElement.value;
+    }
+
+    this._updateTrackFill();
+  }
+
+  private _onNumberInput(): void {
+    if (!this._numberInput || !this.fieldElement) return;
+    const v = this._numberInput.value;
+
+    if (this.fieldElement.value === v) return;
+
+    this.fieldElement.value = v;
+    if (this._valueLabel) {
+      this._valueLabel.textContent = this._displayLabel(v, null);
+    }
+  }
+
+  public clear(options?: { silent?: boolean }): void {
+    const normalized = this._normalizeOptions();
+    const attrs = this._getRangeAttrs(normalized);
+    // Reset to the option whose rangeValue === min, or to attrs.min in free mode
+    const clearTo = normalized
+      ? (normalized.find((o) => String(o.rangeValue) === attrs.min)?.value ??
+        normalized[0]?.value ??
+        attrs.min)
+      : attrs.min;
+    this.setValue(clearTo, { ...options, action: 'clear' });
+  }
+
+  private _isSliderOption(opt: unknown): opt is SliderOption {
+    return opt !== null && typeof opt === 'object' && 'label' in opt && 'value' in opt;
+  }
+}
+
+Slider.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-slider': Slider;
+  }
+}
+
+export default Slider;
+export type SliderProps = InferProps<typeof Slider>;

package/src/styles/color.css

@@ -0,0 +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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}

package/src/styles/components/alert.css

@@ -0,0 +1,104 @@
+.alert {
+  position: relative;
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  border-radius: 4px;
+  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);
+}
+
+.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);
+}
+
+
+:host([variant="faint"]) .alert {
+  background-color: var(--alert-subtle-bg);
+  color:            var(--alert-subtle-color);
+  border-color:     var(--alert-subtle-border);
+}
+
+:host([variant="subtle"]) .alert {
+  background-color: var(--alert-subtle-bg);
+  color:            var(--alert-subtle-color);
+  border-color:     transparent;
+}
+
+:host([variant="filled"]) .alert {
+  background-color: var(--alert-solid-bg);
+  color:            var(--alert-solid-color);
+  border-color:     var(--alert-solid-bg);
+}
+
+:host([variant="outlined"]) .alert {
+  background-color: transparent;
+  color:            var(--alert-subtle-color);
+  border-color:     var(--alert-border);
+}
+
+:host([dismissible]) .alert {
+  padding-right: 40px;
+}
+
+:host([icon]) .alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+:host([icon]) .alert::before {
+  content: '';
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+.alert-close {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 18px;
+  line-height: 1;
+  transition: opacity 0.15s;
+}
+
+.alert-close:hover {
+  opacity: 1;
+}
+
+:host([size="sm"]) .alert {
+  padding: 8px 12px;
+  font-size: 11px;
+}
+
+:host([size="lg"]) .alert {
+  padding: 16px 20px;
+  font-size: 13px;
+}

package/src/styles/components/badge.css

@@ -0,0 +1,67 @@
+: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 {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  vertical-align: middle;
+  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);
+}
+
+/* Default (no [variant]) = filled */
+
+/* --- Variants --- */
+
+:host([variant="outlined"]) .badge {
+  background:   transparent;
+  border-color: var(--badge-border);
+  color:        var(--badge-accent);
+}
+
+:host([variant="faint"]) .badge {
+  background:   var(--badge-subtle-bg);
+  border-color: var(--badge-subtle-border);
+  color:        var(--badge-subtle-color);
+}
+
+:host([variant="subtle"]) .badge {
+  background:   var(--badge-subtle-bg);
+  border-color: transparent;
+  color:        var(--badge-subtle-color);
+}
+
+:host([variant="text"]) .badge {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--badge-accent);
+  padding-left:  0;
+  padding-right: 0;
+}
+
+:host([pill]) .badge {
+  border-radius: 999px;
+}
+
+/* Icon slots */
+::slotted(ae-icon) {
+  font-size: 1.1em;
+}

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

@@ -0,0 +1,59 @@
+:host {
+  display: contents;
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  list-style: none;
+  white-space: nowrap;
+}
+
+/* Separator — uses a fixed muted color that does NOT follow the breadcrumb's color prop */
+.sep {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-muted);
+  padding: 0 0.35em;
+  user-select: none;
+  pointer-events: none;
+  flex-shrink: 0;
+  font-size: 0.85em;
+}
+
+/* Hide separator on the first item */
+:host(:first-child) .sep,
+:host(:first-of-type) .sep {
+  display: none;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-muted);
+}
+
+/* Current page — last item */
+:host([aria-current="page"]) .label {
+  color: var(--color-text-main);
+  font-weight: 500;
+  cursor: default;
+}
+
+/* Link items */
+.label a {
+  color: var(--color-accent, var(--color-text-link));
+  text-decoration: none;
+  outline: none;
+}
+
+.label a:hover {
+  color: var(--color-accent-hover, var(--color-text-link-hover));
+  text-decoration: underline;
+}
+
+.label a:focus-visible {
+  outline: 2px solid var(--color-accent, var(--focus-ring-color));
+  outline-offset: 2px;
+  border-radius: 2px;
+}