aeico-components 0.1.6 → 0.1.7

package/dist/chunks/slider.js

@@ -7,10 +7,7 @@ const style = `:host {
   display: block;
   flex: 1;
   min-width: 0;
-  font-size: var(--size-base);
-
-  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
-  --color-solid: var(--color-primary);
+  font-size: var(--ae-size-base);
 }
 
 .range-container {
@@ -33,8 +30,8 @@ input[type="range"] {
   appearance: none;
   width: 100%;
   height: 0.333em;
-  border-radius: 2px;
-  background: var(--border-subtle);
+  border-radius: var(--ae-radius-xs);
+  background: var(--ae-border-subtle);
   outline: none;
   cursor: pointer;
   margin: 0;
@@ -51,8 +48,8 @@ input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   width: 1.167em;
   height: 1.167em;
-  border-radius: 50%;
-  background: var(--color-solid);
+  border-radius: var(--ae-radius-circle);
+  background: var(--ae-color-solid);
   cursor: pointer;
   transition: background 0.12s, transform 0.12s;
 }
@@ -60,21 +57,21 @@ input[type="range"]::-webkit-slider-thumb {
 .input-range::-webkit-slider-thumb:hover,
 .slider-input::-webkit-slider-thumb:hover,
 input[type="range"]:hover::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   transform: scale(1.1);
 }
 
 .input-range::-webkit-slider-thumb:active,
 .slider-input::-webkit-slider-thumb:active,
 input[type="range"]:active::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   transform: scale(1.2);
 }
 
 .input-range:focus::-webkit-slider-thumb,
 .slider-input:focus::-webkit-slider-thumb,
 input[type="range"]:focus::-webkit-slider-thumb {
-  background: var(--color-solid);
+  background: var(--ae-color-solid);
   outline: none;
   box-shadow: none;
 }
@@ -82,7 +79,7 @@ input[type="range"]:focus::-webkit-slider-thumb {
 .input-range:focus:hover::-webkit-slider-thumb,
 .slider-input:focus:hover::-webkit-slider-thumb,
 input[type="range"]:focus:hover::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   outline: none;
   box-shadow: none;
 }
@@ -90,7 +87,7 @@ input[type="range"]:focus:hover::-webkit-slider-thumb {
 .input-range:focus:active::-webkit-slider-thumb,
 .slider-input:focus:active::-webkit-slider-thumb,
 input[type="range"]:focus:active::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   outline: none;
   box-shadow: none;
 }
@@ -101,8 +98,8 @@ input[type="range"]::-moz-range-thumb {
   width: 1.167em;
   height: 1.167em;
   border: none;
-  border-radius: 50%;
-  background: var(--color-solid);
+  border-radius: var(--ae-radius-circle);
+  background: var(--ae-color-solid);
   cursor: pointer;
   transition: background 0.12s, transform 0.12s;
 }
@@ -110,21 +107,21 @@ input[type="range"]::-moz-range-thumb {
 .input-range::-moz-range-thumb:hover,
 .slider-input::-moz-range-thumb:hover,
 input[type="range"]:hover::-moz-range-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   transform: scale(1.1);
 }
 
 .input-range::-moz-range-thumb:active,
 .slider-input::-moz-range-thumb:active,
 input[type="range"]:active::-moz-range-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   transform: scale(1.2);
 }
 
 .input-range:focus::-moz-range-thumb,
 .slider-input:focus::-moz-range-thumb,
 input[type="range"]:focus::-moz-range-thumb {
-  background: var(--color-solid);
+  background: var(--ae-color-solid);
   outline: none;
   box-shadow: none;
 }
@@ -132,7 +129,7 @@ input[type="range"]:focus::-moz-range-thumb {
 .input-range:focus:hover::-moz-range-thumb,
 .slider-input:focus:hover::-moz-range-thumb,
 input[type="range"]:focus:hover::-moz-range-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   outline: none;
   box-shadow: none;
 }
@@ -140,7 +137,7 @@ input[type="range"]:focus:hover::-moz-range-thumb {
 .input-range:focus:active::-moz-range-thumb,
 .slider-input:focus:active::-moz-range-thumb,
 input[type="range"]:focus:active::-moz-range-thumb {
-  background: var(--color-solid-hover);
+  background: var(--ae-color-solid-hover);
   outline: none;
   box-shadow: none;
 }
@@ -168,7 +165,7 @@ input[type="range"]:disabled::-moz-range-thumb {
   min-width: 14px;
   text-align: center;
   font-size: 12px;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   font-weight: 500;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
@@ -203,10 +200,10 @@ input[type="range"]::-moz-range-thumb {
   width: 56px;
   padding: 0 4px;
   height: 22px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
+  border: 1px solid var(--ae-border-subtle);
+  border-radius: var(--ae-radius-sm);
   background: transparent;
-  color: var(--color-text);
+  color: var(--ae-color-text);
   font-size: 12px;
   text-align: center;
   outline: none;
@@ -214,7 +211,7 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .value-input:focus {
-  border-color: var(--color-solid);
+  border-color: var(--ae-color-solid);
 }
 
 .value-input:disabled {
@@ -227,8 +224,8 @@ input[type="range"]::-moz-range-thumb {
 :host([tracked]) input[type="range"] {
   background: linear-gradient(
     to right,
-    var(--color-solid) var(--fill-pct, 0%),
-    var(--border-subtle) var(--fill-pct, 0%)
+    var(--ae-color-solid) var(--fill-pct, 0%),
+    var(--ae-border-subtle) var(--fill-pct, 0%)
   );
 }
 
@@ -272,13 +269,13 @@ input[type="range"]::-moz-range-thumb {
   display: block;
   width: 1px;
   height: 4px;
-  background: var(--border-default, var(--border-subtle));
+  background: var(--ae-border-default, var(--ae-border-subtle));
   border-radius: 1px;
 }
 
 .mark-label {
   font-size: 10px;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   white-space: nowrap;
 }
 

package/dist/chunks/slider.js.map

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

package/dist/chunks/spinner.cjs

@@ -4,7 +4,7 @@ const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const size = require("./size.cjs");
 const color = require("./color.cjs");
-const style = ':host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --spinner-size: 1.75em;\n  --spinner-thickness: 0.15em;\n  --spinner-color: var(--color-solid);\n  --spinner-track-color: var(--color-bg-subtle, rgba(0, 0, 0, 0.08));\n  --spinner-speed: 0.75s;\n}\n\n:host([size="xs"]) { font-size: 0.75rem; }\n:host([size="sm"]) { font-size: 0.875rem; }\n:host([size="md"]) { font-size: 1rem; }\n:host([size="lg"]) { font-size: 1.5rem; }\n\n.track {\n  display: inline-block;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  border-radius: 50%;\n  border: var(--spinner-thickness) solid var(--spinner-track-color);\n  border-top-color: var(--spinner-color);\n  animation: ae-spin var(--spinner-speed) linear infinite;\n  box-sizing: border-box;\n}\n\n:host([variant="dots"]) .track {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: calc(var(--spinner-size) * 0.2);\n  width: auto;\n  height: var(--spinner-size);\n  border: none;\n  border-radius: 0;\n  animation: none;\n  background: transparent;\n}\n\n:host([variant="dots"]) .dot {\n  display: inline-block;\n  width: calc(var(--spinner-size) * 0.28);\n  height: calc(var(--spinner-size) * 0.28);\n  border-radius: 50%;\n  background: var(--spinner-color);\n  animation: ae-bounce var(--spinner-speed) ease-in-out infinite;\n}\n\n:host([variant="dots"]) .dot:nth-child(2) {\n  animation-delay: calc(var(--spinner-speed) / 6);\n}\n\n:host([variant="dots"]) .dot:nth-child(3) {\n  animation-delay: calc(var(--spinner-speed) / 3);\n}\n\n@keyframes ae-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes ae-bounce {\n  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n  40%           { transform: scale(1);   opacity: 1;   }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track {\n    animation: none;\n    border-top-color: var(--spinner-color);\n    opacity: 0.6;\n  }\n\n  :host([variant="dots"]) .dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n';
+const style = ':host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --spinner-size: 1.75em;\n  --spinner-thickness: 0.15em;\n  --spinner-speed: 0.75s;\n}\n\n:host([size="xs"]) { font-size: 0.75rem; }\n:host([size="sm"]) { font-size: 0.875rem; }\n:host([size="md"]) { font-size: 1rem; }\n:host([size="lg"]) { font-size: 1.5rem; }\n\n.track {\n  display: inline-block;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  border-radius: var(--ae-radius-circle);\n  border: var(--spinner-thickness) solid var(--ae-color-bg-subtle, rgba(0, 0, 0, 0.08));\n  border-top-color: var(--ae-color-solid);\n  animation: ae-spin var(--spinner-speed) linear infinite;\n  box-sizing: border-box;\n}\n\n:host([variant="dots"]) .track {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: calc(var(--spinner-size) * 0.2);\n  width: auto;\n  height: var(--spinner-size);\n  border: none;\n  border-radius: var(--ae-radius-square);\n  animation: none;\n  background: transparent;\n}\n\n:host([variant="dots"]) .dot {\n  display: inline-block;\n  width: calc(var(--spinner-size) * 0.28);\n  height: calc(var(--spinner-size) * 0.28);\n  border-radius: var(--ae-radius-circle);\n  background: var(--ae-color-solid);\n  animation: ae-bounce var(--spinner-speed) ease-in-out infinite;\n}\n\n:host([variant="dots"]) .dot:nth-child(2) {\n  animation-delay: calc(var(--spinner-speed) / 6);\n}\n\n:host([variant="dots"]) .dot:nth-child(3) {\n  animation-delay: calc(var(--spinner-speed) / 3);\n}\n\n@keyframes ae-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes ae-bounce {\n  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n  40%           { transform: scale(1);   opacity: 1;   }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track {\n    animation: none;\n    border-top-color: var(--ae-color-solid);\n    opacity: 0.6;\n  }\n\n  :host([variant="dots"]) .dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/spinner.js

@@ -3,7 +3,7 @@ import { prop, html } from "aeico";
 import { v as variables } from "./variables.js";
 import { s as sizeCSS } from "./size.js";
 import { c as colorCSS } from "./color.js";
-const style = ':host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --spinner-size: 1.75em;\n  --spinner-thickness: 0.15em;\n  --spinner-color: var(--color-solid);\n  --spinner-track-color: var(--color-bg-subtle, rgba(0, 0, 0, 0.08));\n  --spinner-speed: 0.75s;\n}\n\n:host([size="xs"]) { font-size: 0.75rem; }\n:host([size="sm"]) { font-size: 0.875rem; }\n:host([size="md"]) { font-size: 1rem; }\n:host([size="lg"]) { font-size: 1.5rem; }\n\n.track {\n  display: inline-block;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  border-radius: 50%;\n  border: var(--spinner-thickness) solid var(--spinner-track-color);\n  border-top-color: var(--spinner-color);\n  animation: ae-spin var(--spinner-speed) linear infinite;\n  box-sizing: border-box;\n}\n\n:host([variant="dots"]) .track {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: calc(var(--spinner-size) * 0.2);\n  width: auto;\n  height: var(--spinner-size);\n  border: none;\n  border-radius: 0;\n  animation: none;\n  background: transparent;\n}\n\n:host([variant="dots"]) .dot {\n  display: inline-block;\n  width: calc(var(--spinner-size) * 0.28);\n  height: calc(var(--spinner-size) * 0.28);\n  border-radius: 50%;\n  background: var(--spinner-color);\n  animation: ae-bounce var(--spinner-speed) ease-in-out infinite;\n}\n\n:host([variant="dots"]) .dot:nth-child(2) {\n  animation-delay: calc(var(--spinner-speed) / 6);\n}\n\n:host([variant="dots"]) .dot:nth-child(3) {\n  animation-delay: calc(var(--spinner-speed) / 3);\n}\n\n@keyframes ae-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes ae-bounce {\n  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n  40%           { transform: scale(1);   opacity: 1;   }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track {\n    animation: none;\n    border-top-color: var(--spinner-color);\n    opacity: 0.6;\n  }\n\n  :host([variant="dots"]) .dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n';
+const style = ':host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --spinner-size: 1.75em;\n  --spinner-thickness: 0.15em;\n  --spinner-speed: 0.75s;\n}\n\n:host([size="xs"]) { font-size: 0.75rem; }\n:host([size="sm"]) { font-size: 0.875rem; }\n:host([size="md"]) { font-size: 1rem; }\n:host([size="lg"]) { font-size: 1.5rem; }\n\n.track {\n  display: inline-block;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  border-radius: var(--ae-radius-circle);\n  border: var(--spinner-thickness) solid var(--ae-color-bg-subtle, rgba(0, 0, 0, 0.08));\n  border-top-color: var(--ae-color-solid);\n  animation: ae-spin var(--spinner-speed) linear infinite;\n  box-sizing: border-box;\n}\n\n:host([variant="dots"]) .track {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: calc(var(--spinner-size) * 0.2);\n  width: auto;\n  height: var(--spinner-size);\n  border: none;\n  border-radius: var(--ae-radius-square);\n  animation: none;\n  background: transparent;\n}\n\n:host([variant="dots"]) .dot {\n  display: inline-block;\n  width: calc(var(--spinner-size) * 0.28);\n  height: calc(var(--spinner-size) * 0.28);\n  border-radius: var(--ae-radius-circle);\n  background: var(--ae-color-solid);\n  animation: ae-bounce var(--spinner-speed) ease-in-out infinite;\n}\n\n:host([variant="dots"]) .dot:nth-child(2) {\n  animation-delay: calc(var(--spinner-speed) / 6);\n}\n\n:host([variant="dots"]) .dot:nth-child(3) {\n  animation-delay: calc(var(--spinner-speed) / 3);\n}\n\n@keyframes ae-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes ae-bounce {\n  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n  40%           { transform: scale(1);   opacity: 1;   }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track {\n    animation: none;\n    border-top-color: var(--ae-color-solid);\n    opacity: 0.6;\n  }\n\n  :host([variant="dots"]) .dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/switch.cjs

@@ -4,7 +4,7 @@ const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const size = require("./size.cjs");
 const color = require("./color.cjs");
-const styles = ":host {\n  display: block;\n  font-size: var(--size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--color-gray);\n  --toggle-bg-checked:  var(--color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: 0;\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: 50%;\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n/* ===== Icon size override ===== */\n/* ae-icon shadow DOM sets :host { font-size: 20px }, external styles beat it.\n   Font-size on the CONTAINER span must NOT be set here — doing so causes\n   double-multiplying (container 0.72× then ae-icon 0.72× again = tiny icons).\n   Only the ae-icon element itself is targeted. */\n.toggle-knob-icon ae-icon,\n.track-icon ae-icon {\n  font-size: var(--toggle-icon-size, calc(var(--toggle-slider-size) * 0.72));\n  width: 1em;\n  height: 1em;\n}\n\n/* ===== Knob icons ===== */\n.toggle-knob-icon {\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-knob-icon-color, rgba(0, 0, 0, 0.6));\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.toggle-knob-icon.icon-checked {\n  opacity: 0;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-checked {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-unchecked {\n  opacity: 0;\n}\n\n/* ===== Track icons ===== */\n/* Positioned at the same location as the knob in each state (the circular ends),\n   so the icon appears to live inside the circle, not on the flat track sides. */\n.track-icon {\n  position: absolute;\n  top: var(--toggle-gap);\n  width: var(--toggle-slider-size);\n  height: var(--toggle-slider-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-track-icon-color, white);\n  transition: opacity var(--toggle-transition);\n}\n\n.track-icon-left {\n  left: var(--toggle-gap);\n  opacity: 0;\n}\n\n.track-icon-right {\n  right: var(--toggle-gap);\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-left {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-right {\n  opacity: 0;\n}\n";
+const styles = ":host {\n  display: block;\n  font-size: var(--ae-size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--ae-color-gray);\n  --toggle-bg-checked:  var(--ae-color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: var(--ae-radius-square);\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: var(--ae-radius-circle);\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n.toggle-knob-icon ae-icon,\n.track-icon ae-icon {\n  font-size: var(--toggle-icon-size, calc(var(--toggle-slider-size) * 0.72));\n  width: 1em;\n  height: 1em;\n}\n\n.toggle-knob-icon {\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-knob-icon-color, rgba(0, 0, 0, 0.6));\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.toggle-knob-icon.icon-checked {\n  opacity: 0;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-checked {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-unchecked {\n  opacity: 0;\n}\n\n.track-icon {\n  position: absolute;\n  top: var(--toggle-gap);\n  width: var(--toggle-slider-size);\n  height: var(--toggle-slider-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-track-icon-color, white);\n  transition: opacity var(--toggle-transition);\n}\n\n.track-icon-left {\n  left: var(--toggle-gap);\n  opacity: 0;\n}\n\n.track-icon-right {\n  right: var(--toggle-gap);\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-left {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-right {\n  opacity: 0;\n}\n";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/switch.js

@@ -3,7 +3,7 @@ import { prop, html } from "aeico";
 import { v as variables } from "./variables.js";
 import { s as sizeCSS } from "./size.js";
 import { c as colorCSS } from "./color.js";
-const styles = ":host {\n  display: block;\n  font-size: var(--size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--color-gray);\n  --toggle-bg-checked:  var(--color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: 0;\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: 50%;\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n/* ===== Icon size override ===== */\n/* ae-icon shadow DOM sets :host { font-size: 20px }, external styles beat it.\n   Font-size on the CONTAINER span must NOT be set here — doing so causes\n   double-multiplying (container 0.72× then ae-icon 0.72× again = tiny icons).\n   Only the ae-icon element itself is targeted. */\n.toggle-knob-icon ae-icon,\n.track-icon ae-icon {\n  font-size: var(--toggle-icon-size, calc(var(--toggle-slider-size) * 0.72));\n  width: 1em;\n  height: 1em;\n}\n\n/* ===== Knob icons ===== */\n.toggle-knob-icon {\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-knob-icon-color, rgba(0, 0, 0, 0.6));\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.toggle-knob-icon.icon-checked {\n  opacity: 0;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-checked {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-unchecked {\n  opacity: 0;\n}\n\n/* ===== Track icons ===== */\n/* Positioned at the same location as the knob in each state (the circular ends),\n   so the icon appears to live inside the circle, not on the flat track sides. */\n.track-icon {\n  position: absolute;\n  top: var(--toggle-gap);\n  width: var(--toggle-slider-size);\n  height: var(--toggle-slider-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-track-icon-color, white);\n  transition: opacity var(--toggle-transition);\n}\n\n.track-icon-left {\n  left: var(--toggle-gap);\n  opacity: 0;\n}\n\n.track-icon-right {\n  right: var(--toggle-gap);\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-left {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-right {\n  opacity: 0;\n}\n";
+const styles = ":host {\n  display: block;\n  font-size: var(--ae-size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--ae-color-gray);\n  --toggle-bg-checked:  var(--ae-color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: var(--ae-radius-square);\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: var(--ae-radius-circle);\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n.toggle-knob-icon ae-icon,\n.track-icon ae-icon {\n  font-size: var(--toggle-icon-size, calc(var(--toggle-slider-size) * 0.72));\n  width: 1em;\n  height: 1em;\n}\n\n.toggle-knob-icon {\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-knob-icon-color, rgba(0, 0, 0, 0.6));\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.toggle-knob-icon.icon-checked {\n  opacity: 0;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-checked {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-unchecked {\n  opacity: 0;\n}\n\n.track-icon {\n  position: absolute;\n  top: var(--toggle-gap);\n  width: var(--toggle-slider-size);\n  height: var(--toggle-slider-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-track-icon-color, white);\n  transition: opacity var(--toggle-transition);\n}\n\n.track-icon-left {\n  left: var(--toggle-gap);\n  opacity: 0;\n}\n\n.track-icon-right {\n  right: var(--toggle-gap);\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-left {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-right {\n  opacity: 0;\n}\n";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/tab-panel.cjs

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 const variables = require("./variables.cjs");
 const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
-const tabsStyle = ':host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ae-tabs-gap, 0);\n  overflow: hidden;\n}\n\n[part="tab-nav"] {\n  display: flex;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));\n}\n\n[part="panels"] {\n  flex: 1;\n  overflow: auto;\n}\n';
+const tabsStyle = ':host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ae-tabs-gap, 0);\n  overflow: hidden;\n  border: 1px solid transparent;\n  border-radius: var(--ae-border-radius, var(--ae-radius-lg));\n  background: transparent;\n}\n\n[part="tab-nav"] {\n  display: flex;\n  flex-shrink: 0;\n}\n\n[part="panels"] {\n  flex: 1;\n  overflow: auto;\n}\n\n:host([variant="filled"]) {\n  border-color: var(--ae-color-gray);\n  background: var(--ae-color-gray);\n}\n\n:host([variant="filled"]) [part="tab-nav"] {\n  border-bottom: 1px solid color-mix(in srgb, var(--ae-color-gray), black 15%);\n}\n\n:host([variant="outlined"]) {\n  border-color: var(--ae-border-hover);\n  background: transparent;\n}\n\n:host([variant="outlined"]) [part="tab-nav"] {\n  border-bottom: 1px solid var(--ae-border-hover);\n}\n\n:host([variant="faint"]) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-border-subtle);\n}\n\n:host([variant="faint"]) [part="tab-nav"] {\n  border-bottom: 1px solid var(--ae-border-default);\n}\n\n:host([variant="subtle"]) {\n  border-color: transparent;\n  background: var(--ae-border-subtle);\n}\n\n:host([variant="subtle"]) [part="tab-nav"] {\n  border-bottom: 1px solid transparent;\n}\n\n:host([variant="text"]) {\n  border-color: transparent;\n  background: transparent;\n}\n\n:host([variant="text"]) [part="tab-nav"] {\n  border-bottom: 1px solid transparent;\n}\n';
 class Tabs extends aeicoComponent.AeicoComponent {
   constructor() {
     super(...arguments);
@@ -67,8 +67,16 @@ class Tabs extends aeicoComponent.AeicoComponent {
     this._observer = null;
   }
   onUpdated() {
+    this._syncVariant();
     this._syncActive();
   }
+  _syncVariant() {
+    const variant = this.variant ?? "text";
+    this.setAttribute("variant", variant);
+    for (const tab of this._tabs) {
+      tab.setAttribute("variant", variant);
+    }
+  }
   _syncActive() {
     const activeIndex = this.activeIndex ?? 0;
     const pairs = this._getPairs();
@@ -101,11 +109,12 @@ class Tabs extends aeicoComponent.AeicoComponent {
   }
 }
 __publicField(Tabs, "props", {
-  activeIndex: { type: Number }
+  activeIndex: { type: Number },
+  variant: { type: String }
 });
 __publicField(Tabs, "styles", [variables.variables, tabsStyle]);
 Tabs.register();
-const tabStyle = ":host {\n  display: inline-flex;\n  cursor: pointer;\n  margin-bottom: -1px;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--ae-tab-color, #909090);\n  font-size: var(--ae-tab-font-size, inherit);\n  transition: color 0.15s, border-color 0.15s;\n  outline: none;\n  white-space: nowrap;\n  user-select: none;\n}\n\nbutton:hover {\n  color: var(--ae-tab-hover-color, var(--color-primary));\n}\n\nbutton:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n}\n\n:host([active]) button {\n  color: var(--ae-tab-active-color, var(--color-primary));\n  border-bottom-color: var(--ae-tab-active-color, var(--color-primary));\n}\n\n:host([disabled]) button {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n";
+const tabStyle = ":host {\n  display: inline-flex;\n  cursor: pointer;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--ae-tab-color, #909090);\n  font-size: var(--ae-tab-font-size, inherit);\n  transition: color 0.15s, border-color 0.15s;\n  outline: none;\n  white-space: nowrap;\n  user-select: none;\n}\n\nbutton:hover {\n  color: var(--ae-tab-hover-color, var(--ae-color-primary));\n}\n\nbutton:focus-visible {\n  outline: 2px solid var(--ae-color-primary);\n  outline-offset: -2px;\n}\n\n:host([active]) button {\n  color: var(--ae-tab-active-color, var(--ae-color-primary));\n  border-bottom-color: var(--ae-tab-active-color, var(--ae-color-primary));\n}\n\n:host([disabled]) button {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n";
 class Tab extends aeicoComponent.AeicoComponent {
   constructor() {
     super(...arguments);

package/dist/chunks/tab-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.cjs","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n  };\n\n  declare activeIndex?: number;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncActive();\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":"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"}
+{"version":3,"file":"tab-panel.cjs","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\nimport type { TabVariant } from './defines';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n    variant: { type: String },\n  };\n\n  declare activeIndex?: number;\n  declare variant?: TabVariant;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncVariant();\n    this._syncActive();\n  }\n\n  private _syncVariant() {\n    const variant = this.variant ?? 'text';\n    this.setAttribute('variant', variant);\n    for (const tab of this._tabs) {\n      tab.setAttribute('variant', variant);\n    }\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":"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"}

package/dist/chunks/tab-panel.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { v as variables } from "./variables.js";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { html } from "aeico";
-const tabsStyle = ':host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ae-tabs-gap, 0);\n  overflow: hidden;\n}\n\n[part="tab-nav"] {\n  display: flex;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));\n}\n\n[part="panels"] {\n  flex: 1;\n  overflow: auto;\n}\n';
+const tabsStyle = ':host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ae-tabs-gap, 0);\n  overflow: hidden;\n  border: 1px solid transparent;\n  border-radius: var(--ae-border-radius, var(--ae-radius-lg));\n  background: transparent;\n}\n\n[part="tab-nav"] {\n  display: flex;\n  flex-shrink: 0;\n}\n\n[part="panels"] {\n  flex: 1;\n  overflow: auto;\n}\n\n:host([variant="filled"]) {\n  border-color: var(--ae-color-gray);\n  background: var(--ae-color-gray);\n}\n\n:host([variant="filled"]) [part="tab-nav"] {\n  border-bottom: 1px solid color-mix(in srgb, var(--ae-color-gray), black 15%);\n}\n\n:host([variant="outlined"]) {\n  border-color: var(--ae-border-hover);\n  background: transparent;\n}\n\n:host([variant="outlined"]) [part="tab-nav"] {\n  border-bottom: 1px solid var(--ae-border-hover);\n}\n\n:host([variant="faint"]) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-border-subtle);\n}\n\n:host([variant="faint"]) [part="tab-nav"] {\n  border-bottom: 1px solid var(--ae-border-default);\n}\n\n:host([variant="subtle"]) {\n  border-color: transparent;\n  background: var(--ae-border-subtle);\n}\n\n:host([variant="subtle"]) [part="tab-nav"] {\n  border-bottom: 1px solid transparent;\n}\n\n:host([variant="text"]) {\n  border-color: transparent;\n  background: transparent;\n}\n\n:host([variant="text"]) [part="tab-nav"] {\n  border-bottom: 1px solid transparent;\n}\n';
 class Tabs extends AeicoComponent {
   constructor() {
     super(...arguments);
@@ -66,8 +66,16 @@ class Tabs extends AeicoComponent {
     this._observer = null;
   }
   onUpdated() {
+    this._syncVariant();
     this._syncActive();
   }
+  _syncVariant() {
+    const variant = this.variant ?? "text";
+    this.setAttribute("variant", variant);
+    for (const tab of this._tabs) {
+      tab.setAttribute("variant", variant);
+    }
+  }
   _syncActive() {
     const activeIndex = this.activeIndex ?? 0;
     const pairs = this._getPairs();
@@ -100,11 +108,12 @@ class Tabs extends AeicoComponent {
   }
 }
 __publicField(Tabs, "props", {
-  activeIndex: { type: Number }
+  activeIndex: { type: Number },
+  variant: { type: String }
 });
 __publicField(Tabs, "styles", [variables, tabsStyle]);
 Tabs.register();
-const tabStyle = ":host {\n  display: inline-flex;\n  cursor: pointer;\n  margin-bottom: -1px;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--ae-tab-color, #909090);\n  font-size: var(--ae-tab-font-size, inherit);\n  transition: color 0.15s, border-color 0.15s;\n  outline: none;\n  white-space: nowrap;\n  user-select: none;\n}\n\nbutton:hover {\n  color: var(--ae-tab-hover-color, var(--color-primary));\n}\n\nbutton:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n}\n\n:host([active]) button {\n  color: var(--ae-tab-active-color, var(--color-primary));\n  border-bottom-color: var(--ae-tab-active-color, var(--color-primary));\n}\n\n:host([disabled]) button {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n";
+const tabStyle = ":host {\n  display: inline-flex;\n  cursor: pointer;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--ae-tab-color, #909090);\n  font-size: var(--ae-tab-font-size, inherit);\n  transition: color 0.15s, border-color 0.15s;\n  outline: none;\n  white-space: nowrap;\n  user-select: none;\n}\n\nbutton:hover {\n  color: var(--ae-tab-hover-color, var(--ae-color-primary));\n}\n\nbutton:focus-visible {\n  outline: 2px solid var(--ae-color-primary);\n  outline-offset: -2px;\n}\n\n:host([active]) button {\n  color: var(--ae-tab-active-color, var(--ae-color-primary));\n  border-bottom-color: var(--ae-tab-active-color, var(--ae-color-primary));\n}\n\n:host([disabled]) button {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n";
 class Tab extends AeicoComponent {
   constructor() {
     super(...arguments);

package/dist/chunks/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n  };\n\n  declare activeIndex?: number;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncActive();\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":["styleVariables"],"mappings":"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"}
+{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\nimport type { TabVariant } from './defines';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n    variant: { type: String },\n  };\n\n  declare activeIndex?: number;\n  declare variant?: TabVariant;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncVariant();\n    this._syncActive();\n  }\n\n  private _syncVariant() {\n    const variant = this.variant ?? 'text';\n    this.setAttribute('variant', variant);\n    for (const tab of this._tabs) {\n      tab.setAttribute('variant', variant);\n    }\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":["styleVariables"],"mappings":"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"}

package/dist/chunks/tag.cjs

@@ -4,7 +4,7 @@ const size = require("./size.cjs");
 const color = require("./color.cjs");
 const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
-const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
+const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  border: 1px solid var(--ae-color-solid);\n  background: var(--ae-color-solid);\n  color: var(--ae-color-on-solid);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--ae-color-border);\n  color:        var(--ae-color-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: var(--ae-color-border-subtle);\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--ae-color-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: var(--ae-radius-pill); }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/tag.js

@@ -3,7 +3,7 @@ import { s as sizeCSS } from "./size.js";
 import { c as colorCSS } from "./color.js";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
-const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
+const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  border: 1px solid var(--ae-color-solid);\n  background: var(--ae-color-solid);\n  color: var(--ae-color-on-solid);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--ae-color-border);\n  color:        var(--ae-color-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: var(--ae-color-border-subtle);\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--ae-color-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: var(--ae-radius-pill); }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;