aeico-components 0.1.3 → 0.1.4

package/dist/chunks/radio.cjs

@@ -0,0 +1,181 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const aeicoField = require("./aeico-field.cjs");
+const aeico = require("aeico");
+const aeicoLocalize = require("aeico-localize");
+const variables = require("./variables.cjs");
+const size = require("./size.cjs");
+const color = require("./color.cjs");
+const aeicoComponent = require("./aeico-component.cjs");
+const style = ':host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rg-gap, 0.286em);\n  font-size: var(--size-m);\n  --rg-solid-bg:          var(--color-solid);\n  --rg-solid-bg-hover:    var(--color-solid-hover);\n  --rg-solid-bg-active:   var(--color-solid-active);\n  --rg-solid-color:       var(--color-on-solid);\n  --rg-solid-color-hover: var(--color-on-solid-hover, var(--color-on-solid));\n  --rg-border:            var(--color-border);\n  --rg-border-hover:      var(--color-border-hover);\n  --rg-accent:            var(--color-accent);\n  --rg-accent-hover:      var(--color-accent-hover);\n  --rg-subtle-bg:         var(--color-subtle);\n  --rg-subtle-bg-hover:   var(--color-subtle-hover);\n\n  --rg-font-size:    1em;\n  --rg-height:       2.286em;\n  --rg-padding:      0.429em 1.071em;\n  --rg-min-width:    4.571em;\n  --rg-radius:       4px;\n  --rg-font-weight:  400;\n\n  --color-unselected:       var(--surface-base);\n  --color-unselected-hover: var(--color-gray-lighter);\n}\n\n:host([size="xs"]) { --rg-radius: 3px; }\n:host([size="sm"]) { --rg-radius: 3px; }\n\n.rg-container {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\nslot {\n  display: none;\n}\n\n.rg-radio-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  font-size: var(--rg-font-size);\n  color: var(--color-text-main);\n  user-select: none;\n}\n\n.rg-radio-input {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--rg-solid-bg, var(--color-primary));\n  cursor: pointer;\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.rg-radio-label {\n  line-height: 1.5;\n}\n\n.rg-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  font-size: var(--rg-font-size);\n  font-weight: 400;\n  height: var(--rg-height);\n  padding: var(--rg-padding);\n  min-width: var(--rg-min-width);\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;\n  outline: none;\n  border-radius: var(--rg-radius);\n\n  background:   var(--color-unselected);\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n.rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--color-unselected-hover);\n  border-color: var(--color-gray-light);\n  color:        var(--color-text-main);\n}\n\n.rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.22);\n}\n\n.rg-btn.selected:hover:not(:disabled) {\n  background:   var(--rg-solid-bg-hover);\n  border-color: var(--rg-solid-bg-hover);\n}\n\n.rg-btn:active:not(:disabled):not(.selected) {\n  background: var(--rg-subtle-bg-hover);\n  transform: translateY(1px);\n}\n\n.rg-btn:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([variant="outlined"]) .rg-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n:host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: var(--rg-accent);\n  color:        var(--rg-accent-hover);\n}\n:host([variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n}\n\n:host([variant="subtle"]) .rg-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n:host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n:host([variant="subtle"]) .rg-btn.selected {\n  background:   var(--rg-subtle-bg-hover);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n  font-weight:  600;\n  box-shadow:   none;\n}\n\n:host([variant="filled"]) .rg-btn:not(.selected) {\n  background:   var(--surface-base);\n  border-color: var(--border-default);\n  color:        var(--color-text-muted);\n}\n\n:host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--surface-raised);\n  border-color: var(--border-hover);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .rg-container {\n  gap: 6px;\n}\n\n:host([mode="button-group"]) .rg-container {\n  gap: 0;\n}\n\n:host([mode="button-group"]) .rg-btn:not(.first):not(.only) {\n  margin-left: -1px;\n}\n\n:host([mode="button-group"]) .rg-btn.first {\n  border-radius: var(--rg-radius) 0 0 var(--rg-radius);\n}\n:host([mode="button-group"]) .rg-btn.inner {\n  border-radius: 0;\n}\n:host([mode="button-group"]) .rg-btn.last {\n  border-radius: 0 var(--rg-radius) var(--rg-radius) 0;\n}\n:host([mode="button-group"]) .rg-btn.only {\n  border-radius: var(--rg-radius);\n}\n\n:host([mode="button-group"]) .rg-btn:hover:not(:disabled),\n:host([mode="button-group"]) .rg-btn.selected {\n  position: relative;\n  z-index: 1;\n}\n\n:host([mode="segmented"]) .rg-container {\n  gap: 2px;\n  background:    var(--surface-raised);\n  border:        1px solid var(--border-subtle);\n  border-radius: calc(var(--rg-radius) + 2px);\n  padding:       2px;\n  flex-wrap:     nowrap;\n}\n\n:host([mode="segmented"]) .rg-btn {\n  background:    transparent;\n  border-color:  transparent;\n  color:         var(--color-text-muted);\n  border-radius: var(--rg-radius);\n  min-width:     var(--rg-min-width);\n  box-shadow:    none;\n  font-weight:   400;\n}\n\n:host([mode="segmented"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--color-text-secondary, var(--color-text-main));\n}\n\n:host([mode="segmented"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.35);\n}\n\n:host([mode="segmented"]) .rg-btn.selected:hover:not(:disabled) {\n  background: var(--rg-solid-bg-hover);\n}\n\n:host([mode="segmented"]:not([color])) .rg-btn.selected {\n  background: var(--color-gray-lighter);\n  color:      var(--color-text-main);\n}\n\n:host([mode="segmented"][variant="outlined"]) .rg-container {\n  border-color: var(--rg-border);\n}\n:host([mode="segmented"][variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n}\n\n.reset-btn,\n.clear-btn {\n  display:        inline-flex;\n  align-items:    center;\n  justify-content: center;\n  cursor:         pointer;\n  transition:     var(--reset-btn-transition);\n  flex-shrink:    0;\n  line-height:    1;\n  font-family:    inherit;\n  padding:        0;\n\n  width:          1.333em;\n  height:         1.333em;\n  border-radius:  var(--reset-btn-border-radius);\n  border:         none;\n  background:     var(--reset-btn-bg);\n  color:          var(--reset-btn-color);\n}\n\n.reset-btn:hover { background: var(--reset-btn-bg-hover); color: var(--reset-btn-color-hover); }\n.clear-btn:hover  { background: var(--clear-btn-bg-hover);  color: var(--clear-btn-color-hover); }\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  height:        var(--rg-height);\n  width:         var(--rg-height);\n  border-radius: var(--rg-radius);\n  font-size:     var(--rg-font-size);\n}\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n:host([mode="button"]) .reset-btn:hover,\n:host([mode="button-group"]) .reset-btn:hover,\n:host([mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .clear-btn:hover,\n:host([mode="button-group"]) .clear-btn:hover,\n:host([mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-danger);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn,\n:host([variant="outlined"][mode="button"]) .clear-btn,\n:host([variant="outlined"][mode="button-group"]) .reset-btn,\n:host([variant="outlined"][mode="button-group"]) .clear-btn,\n:host([variant="outlined"][mode="segmented"]) .reset-btn,\n:host([variant="outlined"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .reset-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--rg-border-hover);\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="outlined"][mode="button"]) .clear-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .clear-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--rg-border-hover);\n  color:        var(--color-danger);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn,\n:host([variant="subtle"][mode="button"]) .clear-btn,\n:host([variant="subtle"][mode="button-group"]) .reset-btn,\n:host([variant="subtle"][mode="button-group"]) .clear-btn,\n:host([variant="subtle"][mode="segmented"]) .reset-btn,\n:host([variant="subtle"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .reset-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="subtle"][mode="button"]) .clear-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .clear-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: transparent;\n  color:        var(--color-danger);\n}\n';
+const _RadioGroup = class _RadioGroup extends aeicoField.AeicoField {
+  constructor() {
+    super();
+    __publicField(this, "fieldElement", null);
+    __publicField(this, "_slotEl", null);
+    __publicField(this, "_slotOptions", []);
+    __publicField(this, "_groupName");
+    // Single handler for radio inputs — handles both select and deselect.
+    // Only uses `click` (not `change`) because `change` fires before `click`;
+    // if we set value in `change`, the `click` handler would see the updated
+    // value and immediately deselect.
+    __publicField(this, "_boundOnRadioClick", (e) => {
+      const input = e.target;
+      const current = this.value ?? "";
+      if (input.value === current) {
+        if (this.allowEmpty) {
+          input.checked = false;
+          this.setValue("", { silent: false, action: "change" });
+        }
+      } else {
+        this.setValue(input.value, { silent: false, action: "change" });
+      }
+    });
+    __publicField(this, "_boundOnButtonClick", (e) => {
+      const btn = e.currentTarget;
+      const val = btn.dataset.value ?? "";
+      const current = this.value ?? "";
+      if (val === current) {
+        if (this.allowEmpty) {
+          this.setValue("", { silent: false, action: "change" });
+        }
+      } else {
+        this.setValue(val, { silent: false, action: "change" });
+      }
+    });
+    this._groupName = `rg-${++_RadioGroup._instanceCount}`;
+  }
+  _optLabel(opt) {
+    if (opt !== null && typeof opt === "object") {
+      return aeicoLocalize.t(String(opt.label), String(opt.label));
+    }
+    return String(opt);
+  }
+  _optValue(opt) {
+    if (opt !== null && typeof opt === "object") return String(opt.value);
+    return String(opt);
+  }
+  _allOptions() {
+    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({
+      label: this._optLabel(o),
+      value: this._optValue(o)
+    }));
+    const from_slot = this._slotOptions.map((el) => {
+      var _a;
+      return {
+        label: ((_a = el.textContent) == null ? void 0 : _a.trim()) || el.value,
+        value: el.value,
+        disabled: el.disabled
+      };
+    });
+    return [...from_props, ...from_slot];
+  }
+  _onSlotChange() {
+    if (!this._slotEl) return;
+    this._slotOptions = this._slotEl.assignedElements({ flatten: true }).filter(
+      (el) => el.tagName.toLowerCase() === "ae-radio"
+    );
+    this.update();
+  }
+  getValue() {
+    return this.value ?? "";
+  }
+  writeValue(_value) {
+  }
+  onReset() {
+    this.setValue(this.defaultValue ?? "", { silent: false, action: "reset" });
+  }
+  onClear() {
+    this.setValue("", { silent: false, action: "clear" });
+  }
+  render() {
+    const mode = this.mode || "default";
+    const opts = this._allOptions();
+    const current = this.value ?? "";
+    return aeico.html(({ div, slot }) => {
+      div({ className: "rg-container" }, () => {
+        if (mode === "default") {
+          this._renderRadio(opts, current);
+        } else {
+          this._renderButtons(opts, current, mode);
+        }
+      });
+      if (this.allowEmpty) this.renderClearButton();
+      this.renderResetButton();
+      this._slotEl = slot({
+        style: { display: "none" },
+        "@slotchange": () => this._onSlotChange()
+      });
+    });
+  }
+  _renderRadio(opts, current) {
+    const { label, input, span } = aeico.tags;
+    for (const opt of opts) {
+      const isChecked = opt.value === current;
+      label({ key: `opt-${opt.value}`, className: "rg-radio-option" }, () => {
+        const el = input({
+          type: "radio",
+          className: "rg-radio-input",
+          name: this._groupName,
+          value: opt.value,
+          disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+          "@click": this._boundOnRadioClick
+        });
+        el.checked = isChecked;
+        if (!this.fieldElement) this.fieldElement = el;
+        span({ className: "rg-radio-label", textContent: opt.label });
+      });
+    }
+  }
+  _renderButtons(opts, current, mode) {
+    const { button } = aeico.tags;
+    const count = opts.length;
+    for (let i = 0; i < count; i++) {
+      const opt = opts[i];
+      const isSelected = opt.value === current;
+      let posClass = "";
+      if (mode === "button-group") {
+        if (count === 1) posClass = " only";
+        else if (i === 0) posClass = " first";
+        else if (i === count - 1) posClass = " last";
+        else posClass = " inner";
+      }
+      button({
+        key: `opt-${opt.value}`,
+        className: `rg-btn${isSelected ? " selected" : ""}${posClass}`,
+        textContent: opt.label,
+        disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+        "data-value": opt.value,
+        "@click": this._boundOnButtonClick
+      });
+    }
+  }
+};
+__publicField(_RadioGroup, "_instanceCount", 0);
+__publicField(_RadioGroup, "tagName", "radio-group");
+__publicField(_RadioGroup, "props", {
+  options: { type: Array },
+  mode: { type: String },
+  color: { type: String },
+  variant: { type: String },
+  size: { type: String },
+  allowEmpty: { type: Boolean }
+});
+__publicField(_RadioGroup, "styles", [variables.styleVariables, size.sizeCSS, color.colorCSS, style]);
+let RadioGroup = _RadioGroup;
+RadioGroup.register();
+class Radio extends aeicoComponent.AeicoComponent {
+}
+__publicField(Radio, "tagName", "radio");
+/** No shadow DOM — this element is a transparent data/content carrier. */
+__publicField(Radio, "useShadowDOM", false);
+__publicField(Radio, "props", {
+  value: { type: String },
+  disabled: { type: Boolean }
+});
+Radio.register();
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=radio.cjs.map

package/dist/chunks/radio.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.cjs","sources":["../../src/radio-group/radio-group.ts","../../src/radio-group/radio.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport { t } from 'aeico-localize';\nimport type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';\nimport Radio from './radio';\nimport style from '../styles/components/radio-group.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\n\nclass RadioGroup extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptions: Radio[] = [];\n\n  private static _instanceCount = 0;\n  private readonly _groupName: string;\n\n  static tagName = 'radio-group';\n\n  static props: Props = {\n    options: { type: Array },\n    mode: { type: String },\n    color: { type: String },\n    variant: { type: String },\n    size: { type: String },\n    allowEmpty: { type: Boolean },\n  };\n\n  declare options?: RadioGroupOptions;\n  declare mode?: RadioGroupMode;\n  declare color?: ButtonColor;\n  declare variant?: ButtonVariant;\n  declare size?: ButtonSize;\n  declare allowEmpty?: boolean;\n\n  protected static styles = [variables, sizeCSS, colorCSS, style];\n\n  constructor() {\n    super();\n    this._groupName = `rg-${++RadioGroup._instanceCount}`;\n  }\n\n  private _optLabel(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') {\n      return t(String(opt.label), String(opt.label));\n    }\n    return String(opt);\n  }\n\n  private _optValue(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') return String(opt.value);\n    return String(opt);\n  }\n\n  private _allOptions(): Array<{ label: string; value: string; disabled?: boolean }> {\n    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({\n      label: this._optLabel(o),\n      value: this._optValue(o),\n    }));\n\n    const from_slot = this._slotOptions.map((el) => ({\n      label: el.textContent?.trim() || el.value,\n      value: el.value,\n      disabled: el.disabled,\n    }));\n\n    return [...from_props, ...from_slot];\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n\n    this._slotOptions = (this._slotEl.assignedElements({ flatten: true }) as HTMLElement[]).filter(\n      (el) => el.tagName.toLowerCase() === 'ae-radio',\n    ) as Radio[];\n    this.update();\n  }\n\n  // Single handler for radio inputs — handles both select and deselect.\n  // Only uses `click` (not `change`) because `change` fires before `click`;\n  // if we set value in `change`, the `click` handler would see the updated\n  // value and immediately deselect.\n  private _boundOnRadioClick = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const current = this.value ?? '';\n    if (input.value === current) {\n      if (this.allowEmpty) {\n        input.checked = false;\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: do nothing\n    } else {\n      this.setValue(input.value, { silent: false, action: 'change' });\n    }\n  };\n\n  private _boundOnButtonClick = (e: Event) => {\n    const btn = e.currentTarget as HTMLElement;\n    const val = btn.dataset.value ?? '';\n    const current = this.value ?? '';\n    // Toggle off if clicking already-selected option\n    if (val === current) {\n      if (this.allowEmpty) {\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: already selected, do nothing\n    } else {\n      this.setValue(val, { silent: false, action: 'change' });\n    }\n  };\n\n  protected getValue(): string {\n    return this.value ?? '';\n  }\n\n  protected writeValue(_value: any): void {\n    // All visual state is driven by builder diff on next render;\n    // for native radio inputs we need to sync checked immediately.\n    // The render() reads this.value, so update handles the rest.\n  }\n\n  protected onReset(): void {\n    this.setValue(this.defaultValue ?? '', { silent: false, action: 'reset' });\n  }\n\n  protected onClear(): void {\n    this.setValue('', { silent: false, action: 'clear' });\n  }\n\n  render() {\n    const mode = (this.mode as RadioGroupMode) || 'default';\n    const opts = this._allOptions();\n    const current = this.value ?? '';\n\n    return html(({ div, slot }) => {\n      div({ className: 'rg-container' }, () => {\n        if (mode === 'default') {\n          this._renderRadio(opts, current);\n        } else {\n          this._renderButtons(opts, current, mode);\n        }\n      });\n\n      if (this.allowEmpty) this.renderClearButton();\n      this.renderResetButton();\n\n      // Hidden slot — captures <option> light DOM children\n      this._slotEl = slot({\n        style: { display: 'none' },\n        '@slotchange': () => this._onSlotChange(),\n      });\n    });\n  }\n\n  private _renderRadio(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n  ): void {\n    const { label, input, span } = tags;\n    for (const opt of opts) {\n      const isChecked = opt.value === current;\n\n      label({ key: `opt-${opt.value}`, className: 'rg-radio-option' }, () => {\n        const el = input({\n          type: 'radio',\n          className: 'rg-radio-input',\n          name: this._groupName,\n          value: opt.value,\n          disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n          '@click': this._boundOnRadioClick,\n        });\n        // Sync DOM property directly — setAttribute('checked') doesn't work\n        // after user interaction; only the .checked property controls state.\n        el.checked = isChecked;\n        // Keep fieldElement pointing to first radio for base-class compat\n        if (!this.fieldElement) this.fieldElement = el;\n        span({ className: 'rg-radio-label', textContent: opt.label });\n      });\n    }\n  }\n\n  private _renderButtons(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n    mode: RadioGroupMode,\n  ): void {\n    const { button } = tags;\n    const count = opts.length;\n    for (let i = 0; i < count; i++) {\n      const opt = opts[i];\n      const isSelected = opt.value === current;\n\n      // Position class for button-group border-radius (CSS handles all styling)\n      let posClass = '';\n      if (mode === 'button-group') {\n        if (count === 1) posClass = ' only';\n        else if (i === 0) posClass = ' first';\n        else if (i === count - 1) posClass = ' last';\n        else posClass = ' inner';\n      }\n\n      button({\n        key: `opt-${opt.value}`,\n        className: `rg-btn${isSelected ? ' selected' : ''}${posClass}`,\n        textContent: opt.label,\n        disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n        'data-value': opt.value,\n        '@click': this._boundOnButtonClick,\n      });\n    }\n  }\n}\n\nRadioGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio-group': RadioGroup;\n  }\n}\n\nexport default RadioGroup;\nexport type RadioGroupProps = InferProps<typeof RadioGroup>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps, Props } from 'aeico';\n\n/**\n * AeRadio — structured option element for ae-radio-group.\n *\n * Replaces the native `<option>` approach with a custom element that is\n * fully extensible.  Current surface:\n *   - `value`    — option value submitted / matched against radio-group value\n *   - `disabled` — disables this individual option (independent of the group)\n *   - Light DOM  — label content; can be plain text or rich HTML (icons, etc.)\n *\n * This element has **no shadow DOM** — it is a pure data / content carrier.\n * ae-radio-group reads its properties and light-DOM content, then renders\n * the appropriate UI (radio input, button, segmented pill, …).\n *\n * @example Plain text options\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"a\">\n *   <ae-radio value=\"a\">Option A</ae-radio>\n *   <ae-radio value=\"b\">Option B</ae-radio>\n *   <ae-radio value=\"c\" disabled>Option C</ae-radio>\n * </ae-radio-group>\n * ```\n *\n * @example Rich content options (icons)\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"list\">\n *   <ae-radio value=\"list\"><ae-icon name=\"list\"></ae-icon> List</ae-radio>\n *   <ae-radio value=\"grid\"><ae-icon name=\"grid\"></ae-icon> Grid</ae-radio>\n * </ae-radio-group>\n * ```\n */\nclass Radio extends AeicoComponent {\n  static tagName = 'radio';\n\n  /** No shadow DOM — this element is a transparent data/content carrier. */\n  static override useShadowDOM = false;\n\n  static override props: Props = {\n    value: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  declare value: string;\n  declare disabled?: boolean;\n}\n\nRadio.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio': Radio;\n  }\n}\n\nexport default Radio;\nexport type RadioProps = InferProps<typeof Radio>;\n"],"names":["AeicoField","t","html","tags","variables","sizeCSS","colorCSS","AeicoComponent"],"mappings":"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"}

package/dist/chunks/radio.js

@@ -0,0 +1,182 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { A as AeicoField } from "./aeico-field.js";
+import { html, tags } from "aeico";
+import { t } from "aeico-localize";
+import { s as styleVariables } from "./variables.js";
+import { s as sizeCSS } from "./size.js";
+import { c as colorCSS } from "./color.js";
+import { A as AeicoComponent } from "./aeico-component.js";
+const style = ':host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rg-gap, 0.286em);\n  font-size: var(--size-m);\n  --rg-solid-bg:          var(--color-solid);\n  --rg-solid-bg-hover:    var(--color-solid-hover);\n  --rg-solid-bg-active:   var(--color-solid-active);\n  --rg-solid-color:       var(--color-on-solid);\n  --rg-solid-color-hover: var(--color-on-solid-hover, var(--color-on-solid));\n  --rg-border:            var(--color-border);\n  --rg-border-hover:      var(--color-border-hover);\n  --rg-accent:            var(--color-accent);\n  --rg-accent-hover:      var(--color-accent-hover);\n  --rg-subtle-bg:         var(--color-subtle);\n  --rg-subtle-bg-hover:   var(--color-subtle-hover);\n\n  --rg-font-size:    1em;\n  --rg-height:       2.286em;\n  --rg-padding:      0.429em 1.071em;\n  --rg-min-width:    4.571em;\n  --rg-radius:       4px;\n  --rg-font-weight:  400;\n\n  --color-unselected:       var(--surface-base);\n  --color-unselected-hover: var(--color-gray-lighter);\n}\n\n:host([size="xs"]) { --rg-radius: 3px; }\n:host([size="sm"]) { --rg-radius: 3px; }\n\n.rg-container {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\nslot {\n  display: none;\n}\n\n.rg-radio-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  font-size: var(--rg-font-size);\n  color: var(--color-text-main);\n  user-select: none;\n}\n\n.rg-radio-input {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--rg-solid-bg, var(--color-primary));\n  cursor: pointer;\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.rg-radio-label {\n  line-height: 1.5;\n}\n\n.rg-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  font-size: var(--rg-font-size);\n  font-weight: 400;\n  height: var(--rg-height);\n  padding: var(--rg-padding);\n  min-width: var(--rg-min-width);\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;\n  outline: none;\n  border-radius: var(--rg-radius);\n\n  background:   var(--color-unselected);\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n.rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--color-unselected-hover);\n  border-color: var(--color-gray-light);\n  color:        var(--color-text-main);\n}\n\n.rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.22);\n}\n\n.rg-btn.selected:hover:not(:disabled) {\n  background:   var(--rg-solid-bg-hover);\n  border-color: var(--rg-solid-bg-hover);\n}\n\n.rg-btn:active:not(:disabled):not(.selected) {\n  background: var(--rg-subtle-bg-hover);\n  transform: translateY(1px);\n}\n\n.rg-btn:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([variant="outlined"]) .rg-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n:host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: var(--rg-accent);\n  color:        var(--rg-accent-hover);\n}\n:host([variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n}\n\n:host([variant="subtle"]) .rg-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n:host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n:host([variant="subtle"]) .rg-btn.selected {\n  background:   var(--rg-subtle-bg-hover);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n  font-weight:  600;\n  box-shadow:   none;\n}\n\n:host([variant="filled"]) .rg-btn:not(.selected) {\n  background:   var(--surface-base);\n  border-color: var(--border-default);\n  color:        var(--color-text-muted);\n}\n\n:host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--surface-raised);\n  border-color: var(--border-hover);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .rg-container {\n  gap: 6px;\n}\n\n:host([mode="button-group"]) .rg-container {\n  gap: 0;\n}\n\n:host([mode="button-group"]) .rg-btn:not(.first):not(.only) {\n  margin-left: -1px;\n}\n\n:host([mode="button-group"]) .rg-btn.first {\n  border-radius: var(--rg-radius) 0 0 var(--rg-radius);\n}\n:host([mode="button-group"]) .rg-btn.inner {\n  border-radius: 0;\n}\n:host([mode="button-group"]) .rg-btn.last {\n  border-radius: 0 var(--rg-radius) var(--rg-radius) 0;\n}\n:host([mode="button-group"]) .rg-btn.only {\n  border-radius: var(--rg-radius);\n}\n\n:host([mode="button-group"]) .rg-btn:hover:not(:disabled),\n:host([mode="button-group"]) .rg-btn.selected {\n  position: relative;\n  z-index: 1;\n}\n\n:host([mode="segmented"]) .rg-container {\n  gap: 2px;\n  background:    var(--surface-raised);\n  border:        1px solid var(--border-subtle);\n  border-radius: calc(var(--rg-radius) + 2px);\n  padding:       2px;\n  flex-wrap:     nowrap;\n}\n\n:host([mode="segmented"]) .rg-btn {\n  background:    transparent;\n  border-color:  transparent;\n  color:         var(--color-text-muted);\n  border-radius: var(--rg-radius);\n  min-width:     var(--rg-min-width);\n  box-shadow:    none;\n  font-weight:   400;\n}\n\n:host([mode="segmented"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--color-text-secondary, var(--color-text-main));\n}\n\n:host([mode="segmented"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.35);\n}\n\n:host([mode="segmented"]) .rg-btn.selected:hover:not(:disabled) {\n  background: var(--rg-solid-bg-hover);\n}\n\n:host([mode="segmented"]:not([color])) .rg-btn.selected {\n  background: var(--color-gray-lighter);\n  color:      var(--color-text-main);\n}\n\n:host([mode="segmented"][variant="outlined"]) .rg-container {\n  border-color: var(--rg-border);\n}\n:host([mode="segmented"][variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n}\n\n.reset-btn,\n.clear-btn {\n  display:        inline-flex;\n  align-items:    center;\n  justify-content: center;\n  cursor:         pointer;\n  transition:     var(--reset-btn-transition);\n  flex-shrink:    0;\n  line-height:    1;\n  font-family:    inherit;\n  padding:        0;\n\n  width:          1.333em;\n  height:         1.333em;\n  border-radius:  var(--reset-btn-border-radius);\n  border:         none;\n  background:     var(--reset-btn-bg);\n  color:          var(--reset-btn-color);\n}\n\n.reset-btn:hover { background: var(--reset-btn-bg-hover); color: var(--reset-btn-color-hover); }\n.clear-btn:hover  { background: var(--clear-btn-bg-hover);  color: var(--clear-btn-color-hover); }\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  height:        var(--rg-height);\n  width:         var(--rg-height);\n  border-radius: var(--rg-radius);\n  font-size:     var(--rg-font-size);\n}\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n:host([mode="button"]) .reset-btn:hover,\n:host([mode="button-group"]) .reset-btn:hover,\n:host([mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .clear-btn:hover,\n:host([mode="button-group"]) .clear-btn:hover,\n:host([mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-danger);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn,\n:host([variant="outlined"][mode="button"]) .clear-btn,\n:host([variant="outlined"][mode="button-group"]) .reset-btn,\n:host([variant="outlined"][mode="button-group"]) .clear-btn,\n:host([variant="outlined"][mode="segmented"]) .reset-btn,\n:host([variant="outlined"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .reset-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--rg-border-hover);\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="outlined"][mode="button"]) .clear-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .clear-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--rg-border-hover);\n  color:        var(--color-danger);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn,\n:host([variant="subtle"][mode="button"]) .clear-btn,\n:host([variant="subtle"][mode="button-group"]) .reset-btn,\n:host([variant="subtle"][mode="button-group"]) .clear-btn,\n:host([variant="subtle"][mode="segmented"]) .reset-btn,\n:host([variant="subtle"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .reset-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="subtle"][mode="button"]) .clear-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .clear-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: transparent;\n  color:        var(--color-danger);\n}\n';
+const _RadioGroup = class _RadioGroup extends AeicoField {
+  constructor() {
+    super();
+    __publicField(this, "fieldElement", null);
+    __publicField(this, "_slotEl", null);
+    __publicField(this, "_slotOptions", []);
+    __publicField(this, "_groupName");
+    // Single handler for radio inputs — handles both select and deselect.
+    // Only uses `click` (not `change`) because `change` fires before `click`;
+    // if we set value in `change`, the `click` handler would see the updated
+    // value and immediately deselect.
+    __publicField(this, "_boundOnRadioClick", (e) => {
+      const input = e.target;
+      const current = this.value ?? "";
+      if (input.value === current) {
+        if (this.allowEmpty) {
+          input.checked = false;
+          this.setValue("", { silent: false, action: "change" });
+        }
+      } else {
+        this.setValue(input.value, { silent: false, action: "change" });
+      }
+    });
+    __publicField(this, "_boundOnButtonClick", (e) => {
+      const btn = e.currentTarget;
+      const val = btn.dataset.value ?? "";
+      const current = this.value ?? "";
+      if (val === current) {
+        if (this.allowEmpty) {
+          this.setValue("", { silent: false, action: "change" });
+        }
+      } else {
+        this.setValue(val, { silent: false, action: "change" });
+      }
+    });
+    this._groupName = `rg-${++_RadioGroup._instanceCount}`;
+  }
+  _optLabel(opt) {
+    if (opt !== null && typeof opt === "object") {
+      return t(String(opt.label), String(opt.label));
+    }
+    return String(opt);
+  }
+  _optValue(opt) {
+    if (opt !== null && typeof opt === "object") return String(opt.value);
+    return String(opt);
+  }
+  _allOptions() {
+    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({
+      label: this._optLabel(o),
+      value: this._optValue(o)
+    }));
+    const from_slot = this._slotOptions.map((el) => {
+      var _a;
+      return {
+        label: ((_a = el.textContent) == null ? void 0 : _a.trim()) || el.value,
+        value: el.value,
+        disabled: el.disabled
+      };
+    });
+    return [...from_props, ...from_slot];
+  }
+  _onSlotChange() {
+    if (!this._slotEl) return;
+    this._slotOptions = this._slotEl.assignedElements({ flatten: true }).filter(
+      (el) => el.tagName.toLowerCase() === "ae-radio"
+    );
+    this.update();
+  }
+  getValue() {
+    return this.value ?? "";
+  }
+  writeValue(_value) {
+  }
+  onReset() {
+    this.setValue(this.defaultValue ?? "", { silent: false, action: "reset" });
+  }
+  onClear() {
+    this.setValue("", { silent: false, action: "clear" });
+  }
+  render() {
+    const mode = this.mode || "default";
+    const opts = this._allOptions();
+    const current = this.value ?? "";
+    return html(({ div, slot }) => {
+      div({ className: "rg-container" }, () => {
+        if (mode === "default") {
+          this._renderRadio(opts, current);
+        } else {
+          this._renderButtons(opts, current, mode);
+        }
+      });
+      if (this.allowEmpty) this.renderClearButton();
+      this.renderResetButton();
+      this._slotEl = slot({
+        style: { display: "none" },
+        "@slotchange": () => this._onSlotChange()
+      });
+    });
+  }
+  _renderRadio(opts, current) {
+    const { label, input, span } = tags;
+    for (const opt of opts) {
+      const isChecked = opt.value === current;
+      label({ key: `opt-${opt.value}`, className: "rg-radio-option" }, () => {
+        const el = input({
+          type: "radio",
+          className: "rg-radio-input",
+          name: this._groupName,
+          value: opt.value,
+          disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+          "@click": this._boundOnRadioClick
+        });
+        el.checked = isChecked;
+        if (!this.fieldElement) this.fieldElement = el;
+        span({ className: "rg-radio-label", textContent: opt.label });
+      });
+    }
+  }
+  _renderButtons(opts, current, mode) {
+    const { button } = tags;
+    const count = opts.length;
+    for (let i = 0; i < count; i++) {
+      const opt = opts[i];
+      const isSelected = opt.value === current;
+      let posClass = "";
+      if (mode === "button-group") {
+        if (count === 1) posClass = " only";
+        else if (i === 0) posClass = " first";
+        else if (i === count - 1) posClass = " last";
+        else posClass = " inner";
+      }
+      button({
+        key: `opt-${opt.value}`,
+        className: `rg-btn${isSelected ? " selected" : ""}${posClass}`,
+        textContent: opt.label,
+        disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+        "data-value": opt.value,
+        "@click": this._boundOnButtonClick
+      });
+    }
+  }
+};
+__publicField(_RadioGroup, "_instanceCount", 0);
+__publicField(_RadioGroup, "tagName", "radio-group");
+__publicField(_RadioGroup, "props", {
+  options: { type: Array },
+  mode: { type: String },
+  color: { type: String },
+  variant: { type: String },
+  size: { type: String },
+  allowEmpty: { type: Boolean }
+});
+__publicField(_RadioGroup, "styles", [styleVariables, sizeCSS, colorCSS, style]);
+let RadioGroup = _RadioGroup;
+RadioGroup.register();
+class Radio extends AeicoComponent {
+}
+__publicField(Radio, "tagName", "radio");
+/** No shadow DOM — this element is a transparent data/content carrier. */
+__publicField(Radio, "useShadowDOM", false);
+__publicField(Radio, "props", {
+  value: { type: String },
+  disabled: { type: Boolean }
+});
+Radio.register();
+export {
+  Radio as R,
+  RadioGroup as a
+};
+//# sourceMappingURL=radio.js.map

package/dist/chunks/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../src/radio-group/radio-group.ts","../../src/radio-group/radio.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport { t } from 'aeico-localize';\nimport type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';\nimport Radio from './radio';\nimport style from '../styles/components/radio-group.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\n\nclass RadioGroup extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptions: Radio[] = [];\n\n  private static _instanceCount = 0;\n  private readonly _groupName: string;\n\n  static tagName = 'radio-group';\n\n  static props: Props = {\n    options: { type: Array },\n    mode: { type: String },\n    color: { type: String },\n    variant: { type: String },\n    size: { type: String },\n    allowEmpty: { type: Boolean },\n  };\n\n  declare options?: RadioGroupOptions;\n  declare mode?: RadioGroupMode;\n  declare color?: ButtonColor;\n  declare variant?: ButtonVariant;\n  declare size?: ButtonSize;\n  declare allowEmpty?: boolean;\n\n  protected static styles = [variables, sizeCSS, colorCSS, style];\n\n  constructor() {\n    super();\n    this._groupName = `rg-${++RadioGroup._instanceCount}`;\n  }\n\n  private _optLabel(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') {\n      return t(String(opt.label), String(opt.label));\n    }\n    return String(opt);\n  }\n\n  private _optValue(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') return String(opt.value);\n    return String(opt);\n  }\n\n  private _allOptions(): Array<{ label: string; value: string; disabled?: boolean }> {\n    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({\n      label: this._optLabel(o),\n      value: this._optValue(o),\n    }));\n\n    const from_slot = this._slotOptions.map((el) => ({\n      label: el.textContent?.trim() || el.value,\n      value: el.value,\n      disabled: el.disabled,\n    }));\n\n    return [...from_props, ...from_slot];\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n\n    this._slotOptions = (this._slotEl.assignedElements({ flatten: true }) as HTMLElement[]).filter(\n      (el) => el.tagName.toLowerCase() === 'ae-radio',\n    ) as Radio[];\n    this.update();\n  }\n\n  // Single handler for radio inputs — handles both select and deselect.\n  // Only uses `click` (not `change`) because `change` fires before `click`;\n  // if we set value in `change`, the `click` handler would see the updated\n  // value and immediately deselect.\n  private _boundOnRadioClick = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const current = this.value ?? '';\n    if (input.value === current) {\n      if (this.allowEmpty) {\n        input.checked = false;\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: do nothing\n    } else {\n      this.setValue(input.value, { silent: false, action: 'change' });\n    }\n  };\n\n  private _boundOnButtonClick = (e: Event) => {\n    const btn = e.currentTarget as HTMLElement;\n    const val = btn.dataset.value ?? '';\n    const current = this.value ?? '';\n    // Toggle off if clicking already-selected option\n    if (val === current) {\n      if (this.allowEmpty) {\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: already selected, do nothing\n    } else {\n      this.setValue(val, { silent: false, action: 'change' });\n    }\n  };\n\n  protected getValue(): string {\n    return this.value ?? '';\n  }\n\n  protected writeValue(_value: any): void {\n    // All visual state is driven by builder diff on next render;\n    // for native radio inputs we need to sync checked immediately.\n    // The render() reads this.value, so update handles the rest.\n  }\n\n  protected onReset(): void {\n    this.setValue(this.defaultValue ?? '', { silent: false, action: 'reset' });\n  }\n\n  protected onClear(): void {\n    this.setValue('', { silent: false, action: 'clear' });\n  }\n\n  render() {\n    const mode = (this.mode as RadioGroupMode) || 'default';\n    const opts = this._allOptions();\n    const current = this.value ?? '';\n\n    return html(({ div, slot }) => {\n      div({ className: 'rg-container' }, () => {\n        if (mode === 'default') {\n          this._renderRadio(opts, current);\n        } else {\n          this._renderButtons(opts, current, mode);\n        }\n      });\n\n      if (this.allowEmpty) this.renderClearButton();\n      this.renderResetButton();\n\n      // Hidden slot — captures <option> light DOM children\n      this._slotEl = slot({\n        style: { display: 'none' },\n        '@slotchange': () => this._onSlotChange(),\n      });\n    });\n  }\n\n  private _renderRadio(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n  ): void {\n    const { label, input, span } = tags;\n    for (const opt of opts) {\n      const isChecked = opt.value === current;\n\n      label({ key: `opt-${opt.value}`, className: 'rg-radio-option' }, () => {\n        const el = input({\n          type: 'radio',\n          className: 'rg-radio-input',\n          name: this._groupName,\n          value: opt.value,\n          disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n          '@click': this._boundOnRadioClick,\n        });\n        // Sync DOM property directly — setAttribute('checked') doesn't work\n        // after user interaction; only the .checked property controls state.\n        el.checked = isChecked;\n        // Keep fieldElement pointing to first radio for base-class compat\n        if (!this.fieldElement) this.fieldElement = el;\n        span({ className: 'rg-radio-label', textContent: opt.label });\n      });\n    }\n  }\n\n  private _renderButtons(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n    mode: RadioGroupMode,\n  ): void {\n    const { button } = tags;\n    const count = opts.length;\n    for (let i = 0; i < count; i++) {\n      const opt = opts[i];\n      const isSelected = opt.value === current;\n\n      // Position class for button-group border-radius (CSS handles all styling)\n      let posClass = '';\n      if (mode === 'button-group') {\n        if (count === 1) posClass = ' only';\n        else if (i === 0) posClass = ' first';\n        else if (i === count - 1) posClass = ' last';\n        else posClass = ' inner';\n      }\n\n      button({\n        key: `opt-${opt.value}`,\n        className: `rg-btn${isSelected ? ' selected' : ''}${posClass}`,\n        textContent: opt.label,\n        disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n        'data-value': opt.value,\n        '@click': this._boundOnButtonClick,\n      });\n    }\n  }\n}\n\nRadioGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio-group': RadioGroup;\n  }\n}\n\nexport default RadioGroup;\nexport type RadioGroupProps = InferProps<typeof RadioGroup>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps, Props } from 'aeico';\n\n/**\n * AeRadio — structured option element for ae-radio-group.\n *\n * Replaces the native `<option>` approach with a custom element that is\n * fully extensible.  Current surface:\n *   - `value`    — option value submitted / matched against radio-group value\n *   - `disabled` — disables this individual option (independent of the group)\n *   - Light DOM  — label content; can be plain text or rich HTML (icons, etc.)\n *\n * This element has **no shadow DOM** — it is a pure data / content carrier.\n * ae-radio-group reads its properties and light-DOM content, then renders\n * the appropriate UI (radio input, button, segmented pill, …).\n *\n * @example Plain text options\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"a\">\n *   <ae-radio value=\"a\">Option A</ae-radio>\n *   <ae-radio value=\"b\">Option B</ae-radio>\n *   <ae-radio value=\"c\" disabled>Option C</ae-radio>\n * </ae-radio-group>\n * ```\n *\n * @example Rich content options (icons)\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"list\">\n *   <ae-radio value=\"list\"><ae-icon name=\"list\"></ae-icon> List</ae-radio>\n *   <ae-radio value=\"grid\"><ae-icon name=\"grid\"></ae-icon> Grid</ae-radio>\n * </ae-radio-group>\n * ```\n */\nclass Radio extends AeicoComponent {\n  static tagName = 'radio';\n\n  /** No shadow DOM — this element is a transparent data/content carrier. */\n  static override useShadowDOM = false;\n\n  static override props: Props = {\n    value: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  declare value: string;\n  declare disabled?: boolean;\n}\n\nRadio.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio': Radio;\n  }\n}\n\nexport default Radio;\nexport type RadioProps = InferProps<typeof Radio>;\n"],"names":["variables"],"mappings":"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"}