aeico-components 0.1.4 → 0.1.6

package/dist/chunks/progress-bar.js

@@ -0,0 +1,102 @@
+import { prop, html } from "aeico";
+import { A as AeicoComponent } from "./aeico-component.js";
+import { v as variables } from "./variables.js";
+import { c as colorCSS } from "./color.js";
+const style = ":host {\n  display: block;\n  --progress-height: 8px;\n  --color-solid: var(--color-primary);\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1, key = __decoratorStrings[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _animated_dec, _color_dec, _label_dec, _value_dec, _a, _init, _value, _label, _color, _animated;
+class ProgressBar extends (_a = AeicoComponent, _value_dec = [prop({ type: Number })], _label_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _animated_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value, __runInitializers(_init, 8, this, 0)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _label, __runInitializers(_init, 12, this, "")), __runInitializers(_init, 15, this);
+    __privateAdd(this, _color, __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
+    __privateAdd(this, _animated, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+  }
+  render() {
+    const clamped = Math.min(100, Math.max(0, this.value));
+    return html(({ div, span }) => {
+      div({ part: "base" }, () => {
+        div(
+          {
+            part: "track",
+            className: "progress-track",
+            role: "progressbar",
+            "aria-valuenow": String(clamped),
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            ...this.label ? { "aria-label": this.label } : {}
+          },
+          () => {
+            span({
+              part: "bar",
+              className: "progress-bar",
+              style: { width: `${clamped}%` }
+            });
+          }
+        );
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_value = /* @__PURE__ */ new WeakMap();
+_label = /* @__PURE__ */ new WeakMap();
+_color = /* @__PURE__ */ new WeakMap();
+_animated = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, ProgressBar, _value);
+__decorateElement(_init, 4, "label", _label_dec, ProgressBar, _label);
+__decorateElement(_init, 4, "color", _color_dec, ProgressBar, _color);
+__decorateElement(_init, 4, "animated", _animated_dec, ProgressBar, _animated);
+__decoratorMetadata(_init, ProgressBar);
+__publicField(ProgressBar, "tagName", "progress-bar");
+__publicField(ProgressBar, "styles", [variables, colorCSS, style]);
+ProgressBar.register();
+export {
+  ProgressBar as P
+};
+//# sourceMappingURL=progress-bar.js.map

package/dist/chunks/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sources":["../../src/progress-bar/progress-bar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/progress-bar.css?inline';\nimport type { ProgressBarColor } from './defines';\n\n/**\n * Progress bars show how far along an ongoing operation is as a horizontal fill.\n * Use them for file uploads, multi-step flows, or any task with measurable progress.\n *\n * @prop {number} value - Completion percentage, automatically clamped to 0–100.\n * @prop {string} label - Accessible label applied as `aria-label` on the track.\n * @prop {'default'|'primary'|'secondary'|'success'|'danger'|'warning'|'info'} color\n *   - Preset color variant driven by the shared color system.\n * @prop {boolean} animated - When set, overlays a shimmer sweep animation on the bar.\n *\n * @csspart base - The outermost wrapper `<div>`.\n * @csspart track - The background track `<div>`.\n * @csspart bar - The filled progress `<span>`.\n *\n * @cssproperty [--progress-height=8px] - Height of both the track and the bar.\n * @cssproperty [--progress-bar-color=var(--color-solid)] - Fill color of the bar.\n *   When set, takes precedence over the `color` prop entirely.\n */\nclass ProgressBar extends AeicoComponent {\n  static tagName = 'progress-bar';\n  protected static styles = [styleVariables, colorCSS, style];\n\n  @prop({ type: Number })\n  accessor value: number = 0;\n\n  @prop({ type: String })\n  accessor label: string = '';\n\n  @prop({ type: String })\n  accessor color: ProgressBarColor = 'primary';\n\n  @prop({ type: Boolean })\n  accessor animated: boolean = false;\n\n  protected render() {\n    const clamped = Math.min(100, Math.max(0, this.value));\n\n    return html(({ div, span }) => {\n      div({ part: 'base' }, () => {\n        div(\n          {\n            part: 'track',\n            className: 'progress-track',\n            role: 'progressbar',\n            'aria-valuenow': String(clamped),\n            'aria-valuemin': '0',\n            'aria-valuemax': '100',\n            ...(this.label ? { 'aria-label': this.label } : {}),\n          },\n          () => {\n            span({\n              part: 'bar',\n              className: 'progress-bar',\n              style: { width: `${clamped}%` },\n            });\n          },\n        );\n      });\n    });\n  }\n}\n\nProgressBar.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-progress-bar': ProgressBar;\n  }\n}\n\nexport default ProgressBar;\nexport type ProgressBarProps = InferProps<typeof ProgressBar>;\n"],"names":["styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,YAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,QAAA;AA0BA,MAAM,qBAAoB,KAAA,gBAIxB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAbC,IAAe;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAKE,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,GAAA,MAAyB,CAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,IAAA,MAAyB,EAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAA0B,kBAAnC,OAAA,IAAA,MAAmC,SAAA,CAAA,GAAnC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,UAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AAErD,WAAO,KAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,MAAM,OAAA,GAAU,MAAM;AAC1B;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,MAAM;AAAA,YACN,iBAAiB,OAAO,OAAO;AAAA,YAC/B,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,GAAI,KAAK,QAAQ,EAAE,cAAc,KAAK,MAAA,IAAU,CAAA;AAAA,UAAC;AAAA,UAEnD,MAAM;AACJ,iBAAK;AAAA,cACH,MAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,EAAE,OAAO,GAAG,OAAO,IAAA;AAAA,YAAI,CAC/B;AAAA,UACH;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA1CA,QAAA,iBAAA,EAAA;AAKW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAJI,aAKK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAPI,aAQK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAVI,aAWK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAbI,aAcK,SAAA;AAdX,oBAAA,OAAM,WAAA;AACJ,cADI,aACG,WAAU,cAAA;AACjB,cAFI,aAEa,UAAS,CAACA,WAAgB,UAAU,KAAK,CAAA;AA0C5D,YAAY,SAAA;"}

package/dist/chunks/radio.cjs

@@ -2,15 +2,14 @@
 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 actionButton = require("./action-button.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 {
+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: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 actionButton.AeicoField {
   constructor() {
     super();
     __publicField(this, "fieldElement", null);
@@ -49,7 +48,7 @@ const _RadioGroup = class _RadioGroup extends aeicoField.AeicoField {
   }
   _optLabel(opt) {
     if (opt !== null && typeof opt === "object") {
-      return aeicoLocalize.t(String(opt.label), String(opt.label));
+      return String(opt.label);
     }
     return String(opt);
   }
@@ -95,7 +94,9 @@ const _RadioGroup = class _RadioGroup extends aeicoField.AeicoField {
     const opts = this._allOptions();
     const current = this.value ?? "";
     return aeico.html(({ div, slot }) => {
-      div({ className: "rg-container" }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ id, role: "group", className: "rg-container field-body" }, () => {
         if (mode === "default") {
           this._renderRadio(opts, current);
         } else {
@@ -108,6 +109,8 @@ const _RadioGroup = class _RadioGroup extends aeicoField.AeicoField {
         style: { display: "none" },
         "@slotchange": () => this._onSlotChange()
       });
+      this.renderHelperText();
+      this.renderError();
     });
   }
   _renderRadio(opts, current) {
@@ -121,6 +124,7 @@ const _RadioGroup = class _RadioGroup extends aeicoField.AeicoField {
           name: this._groupName,
           value: opt.value,
           disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+          required: Boolean(this.required),
           "@click": this._boundOnRadioClick
         });
         el.checked = isChecked;
@@ -163,7 +167,7 @@ __publicField(_RadioGroup, "props", {
   size: { type: String },
   allowEmpty: { type: Boolean }
 });
-__publicField(_RadioGroup, "styles", [variables.styleVariables, size.sizeCSS, color.colorCSS, style]);
+__publicField(_RadioGroup, "styles", [variables.variables, size.sizeCSS, color.colorCSS, actionButton.fieldLabelCSS, actionButton.actionButtonCSS, style]);
 let RadioGroup = _RadioGroup;
 RadioGroup.register();
 class Radio extends aeicoComponent.AeicoComponent {

package/dist/chunks/radio.cjs.map

@@ -1 +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":";;;;;;;;;;;;AAYA,MAAM,cAAN,MAAM,oBAAmBA,WAAAA,WAAW;AAAA,EA6BlC,cAAc;AACZ,UAAA;AA7BQ,wCAAwC;AAE1C,mCAAkC;AAClC,wCAAwB,CAAA;AAGf;AAmET;AAAA;AAAA;AAAA;AAAA,8CAAqB,CAAC,MAAa;AACzC,YAAM,QAAQ,EAAE;AAChB,YAAM,UAAU,KAAK,SAAS;AAC9B,UAAI,MAAM,UAAU,SAAS;AAC3B,YAAI,KAAK,YAAY;AACnB,gBAAM,UAAU;AAChB,eAAK,SAAS,IAAI,EAAE,QAAQ,OAAO,QAAQ,UAAU;AAAA,QACvD;AAAA,MAEF,OAAO;AACL,aAAK,SAAS,MAAM,OAAO,EAAE,QAAQ,OAAO,QAAQ,UAAU;AAAA,MAChE;AAAA,IACF;AAEQ,+CAAsB,CAAC,MAAa;AAC1C,YAAM,MAAM,EAAE;AACd,YAAM,MAAM,IAAI,QAAQ,SAAS;AACjC,YAAM,UAAU,KAAK,SAAS;AAE9B,UAAI,QAAQ,SAAS;AACnB,YAAI,KAAK,YAAY;AACnB,eAAK,SAAS,IAAI,EAAE,QAAQ,OAAO,QAAQ,UAAU;AAAA,QACvD;AAAA,MAEF,OAAO;AACL,aAAK,SAAS,KAAK,EAAE,QAAQ,OAAO,QAAQ,UAAU;AAAA,MACxD;AAAA,IACF;AAtEE,SAAK,aAAa,MAAM,EAAE,YAAW,cAAc;AAAA,EACrD;AAAA,EAEQ,UAAU,KAA+B;AAC/C,QAAI,QAAQ,QAAQ,OAAO,QAAQ,UAAU;AAC3C,aAAOC,cAAAA,EAAE,OAAO,IAAI,KAAK,GAAG,OAAO,IAAI,KAAK,CAAC;AAAA,IAC/C;AACA,WAAO,OAAO,GAAG;AAAA,EACnB;AAAA,EAEQ,UAAU,KAA+B;AAC/C,QAAI,QAAQ,QAAQ,OAAO,QAAQ,SAAU,QAAO,OAAO,IAAI,KAAK;AACpE,WAAO,OAAO,GAAG;AAAA,EACnB;AAAA,EAEQ,cAA2E;AACjF,UAAM,cAAc,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,UAAU,CAAA,GAAI,IAAI,CAAC,OAAO;AAAA,MAC/E,OAAO,KAAK,UAAU,CAAC;AAAA,MACvB,OAAO,KAAK,UAAU,CAAC;AAAA,IAAA,EACvB;AAEF,UAAM,YAAY,KAAK,aAAa,IAAI,CAAC,OAAA;;AAAQ;AAAA,QAC/C,SAAO,QAAG,gBAAH,mBAAgB,WAAU,GAAG;AAAA,QACpC,OAAO,GAAG;AAAA,QACV,UAAU,GAAG;AAAA,MAAA;AAAA,KACb;AAEF,WAAO,CAAC,GAAG,YAAY,GAAG,SAAS;AAAA,EACrC;AAAA,EAEQ,gBAAsB;AAC5B,QAAI,CAAC,KAAK,QAAS;AAEnB,SAAK,eAAgB,KAAK,QAAQ,iBAAiB,EAAE,SAAS,KAAA,CAAM,EAAoB;AAAA,MACtF,CAAC,OAAO,GAAG,QAAQ,kBAAkB;AAAA,IAAA;AAEvC,SAAK,OAAA;AAAA,EACP;AAAA,EAmCU,WAAmB;AAC3B,WAAO,KAAK,SAAS;AAAA,EACvB;AAAA,EAEU,WAAW,QAAmB;AAAA,EAIxC;AAAA,EAEU,UAAgB;AACxB,SAAK,SAAS,KAAK,gBAAgB,IAAI,EAAE,QAAQ,OAAO,QAAQ,SAAS;AAAA,EAC3E;AAAA,EAEU,UAAgB;AACxB,SAAK,SAAS,IAAI,EAAE,QAAQ,OAAO,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,UAAM,OAAQ,KAAK,QAA2B;AAC9C,UAAM,OAAO,KAAK,YAAA;AAClB,UAAM,UAAU,KAAK,SAAS;AAE9B,WAAOC,WAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,WAAW,eAAA,GAAkB,MAAM;AACvC,YAAI,SAAS,WAAW;AACtB,eAAK,aAAa,MAAM,OAAO;AAAA,QACjC,OAAO;AACL,eAAK,eAAe,MAAM,SAAS,IAAI;AAAA,QACzC;AAAA,MACF,CAAC;AAED,UAAI,KAAK,WAAY,MAAK,kBAAA;AAC1B,WAAK,kBAAA;AAGL,WAAK,UAAU,KAAK;AAAA,QAClB,OAAO,EAAE,SAAS,OAAA;AAAA,QAClB,eAAe,MAAM,KAAK,cAAA;AAAA,MAAc,CACzC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,aACN,MACA,SACM;AACN,UAAM,EAAE,OAAO,OAAO,KAAA,IAASC,MAAAA;AAC/B,eAAW,OAAO,MAAM;AACtB,YAAM,YAAY,IAAI,UAAU;AAEhC,YAAM,EAAE,KAAK,OAAO,IAAI,KAAK,IAAI,WAAW,kBAAA,GAAqB,MAAM;AACrE,cAAM,KAAK,MAAM;AAAA,UACf,MAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAM,KAAK;AAAA,UACX,OAAO,IAAI;AAAA,UACX,UAAU,QAAQ,KAAK,QAAQ,KAAK,QAAQ,IAAI,QAAQ;AAAA,UACxD,UAAU,KAAK;AAAA,QAAA,CAChB;AAGD,WAAG,UAAU;AAEb,YAAI,CAAC,KAAK,aAAc,MAAK,eAAe;AAC5C,aAAK,EAAE,WAAW,kBAAkB,aAAa,IAAI,OAAO;AAAA,MAC9D,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,eACN,MACA,SACA,MACM;AACN,UAAM,EAAE,WAAWA,MAAAA;AACnB,UAAM,QAAQ,KAAK;AACnB,aAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,YAAM,MAAM,KAAK,CAAC;AAClB,YAAM,aAAa,IAAI,UAAU;AAGjC,UAAI,WAAW;AACf,UAAI,SAAS,gBAAgB;AAC3B,YAAI,UAAU,EAAG,YAAW;AAAA,iBACnB,MAAM,EAAG,YAAW;AAAA,iBACpB,MAAM,QAAQ,EAAG,YAAW;AAAA,YAChC,YAAW;AAAA,MAClB;AAEA,aAAO;AAAA,QACL,KAAK,OAAO,IAAI,KAAK;AAAA,QACrB,WAAW,SAAS,aAAa,cAAc,EAAE,GAAG,QAAQ;AAAA,QAC5D,aAAa,IAAI;AAAA,QACjB,UAAU,QAAQ,KAAK,QAAQ,KAAK,QAAQ,IAAI,QAAQ;AAAA,QACxD,cAAc,IAAI;AAAA,QAClB,UAAU,KAAK;AAAA,MAAA,CAChB;AAAA,IACH;AAAA,EACF;AACF;AArME,cANI,aAMW,kBAAiB;AAGhC,cATI,aASG,WAAU;AAEjB,cAXI,aAWG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,MAAA;AAAA,EACjB,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,SAAS,EAAE,MAAM,OAAA;AAAA,EACjB,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,YAAY,EAAE,MAAM,QAAA;AAAQ;AAU9B,cA3BI,aA2Ba,UAAS,CAACC,UAAAA,gBAAWC,KAAAA,SAASC,MAAAA,UAAU,KAAK;AA3BhE,IAAM,aAAN;AA6MA,WAAW,SAAA;ACxLX,MAAM,cAAcC,eAAAA,eAAe;AAanC;AAZE,cADI,OACG,WAAU;AAAA;AAGjB,cAJI,OAIY,gBAAe;AAE/B,cANI,OAMY,SAAe;AAAA,EAC7B,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,UAAU,EAAE,MAAM,QAAA;AAAQ;AAO9B,MAAM,SAAA;;;"}
+{"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 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';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.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, fieldLabelCSS, actionButtonCSS, 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 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: string): 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      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ id, role: 'group', className: 'rg-container field-body' }, () => {\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      this.renderHelperText();\n      this.renderError();\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          required: Boolean(this.required),\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","html","tags","variables","sizeCSS","colorCSS","fieldLabelCSS","actionButtonCSS","AeicoComponent"],"mappings":"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"}

package/dist/chunks/radio.js

@@ -1,14 +1,13 @@
 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 { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
 import { html, tags } from "aeico";
-import { t } from "aeico-localize";
-import { s as styleVariables } from "./variables.js";
+import { v as variables } 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 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: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();
@@ -48,7 +47,7 @@ const _RadioGroup = class _RadioGroup extends AeicoField {
   }
   _optLabel(opt) {
     if (opt !== null && typeof opt === "object") {
-      return t(String(opt.label), String(opt.label));
+      return String(opt.label);
     }
     return String(opt);
   }
@@ -94,7 +93,9 @@ const _RadioGroup = class _RadioGroup extends AeicoField {
     const opts = this._allOptions();
     const current = this.value ?? "";
     return html(({ div, slot }) => {
-      div({ className: "rg-container" }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ id, role: "group", className: "rg-container field-body" }, () => {
         if (mode === "default") {
           this._renderRadio(opts, current);
         } else {
@@ -107,6 +108,8 @@ const _RadioGroup = class _RadioGroup extends AeicoField {
         style: { display: "none" },
         "@slotchange": () => this._onSlotChange()
       });
+      this.renderHelperText();
+      this.renderError();
     });
   }
   _renderRadio(opts, current) {
@@ -120,6 +123,7 @@ const _RadioGroup = class _RadioGroup extends AeicoField {
           name: this._groupName,
           value: opt.value,
           disabled: Boolean(this.disabled) || Boolean(opt.disabled),
+          required: Boolean(this.required),
           "@click": this._boundOnRadioClick
         });
         el.checked = isChecked;
@@ -162,7 +166,7 @@ __publicField(_RadioGroup, "props", {
   size: { type: String },
   allowEmpty: { type: Boolean }
 });
-__publicField(_RadioGroup, "styles", [styleVariables, sizeCSS, colorCSS, style]);
+__publicField(_RadioGroup, "styles", [variables, sizeCSS, colorCSS, fieldLabelCSS, actionButtonCSS, style]);
 let RadioGroup = _RadioGroup;
 RadioGroup.register();
 class Radio extends AeicoComponent {

package/dist/chunks/radio.js.map

@@ -1 +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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"}
+{"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 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';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.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, fieldLabelCSS, actionButtonCSS, 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 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: string): 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      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ id, role: 'group', className: 'rg-container field-body' }, () => {\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      this.renderHelperText();\n      this.renderError();\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          required: Boolean(this.required),\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":[],"mappings":"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"}