aeico-components 0.1.7 → 0.1.8

package/dist/chunks/progress-bar.js

@@ -1,102 +0,0 @@
-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}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--ae-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(--ae-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

@@ -1 +0,0 @@
-{"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

@@ -1,185 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const actionButton = require("./action-button.cjs");
-const aeico = require("aeico");
-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(--ae-size-m);\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\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(--ae-color-text-main);\n  user-select: none;\n}\n\n.rg-radio-input {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--ae-color-solid, var(--ae-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(--ae-surface-base);\n  border:       1px solid var(--ae-color-gray-light);\n  color:        var(--ae-color-text-muted);\n}\n\n.rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-surface-base-hover);\n  border-color: var(--ae-color-gray-light);\n  color:        var(--ae-color-text-main);\n}\n\n.rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: var(--ae-color-solid);\n  color:        var(--ae-color-on-solid);\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(--ae-color-solid-hover);\n  border-color: var(--ae-color-solid-hover);\n}\n\n.rg-btn:active:not(:disabled):not(.selected) {\n  background: var(--ae-color-subtle-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(--ae-color-border);\n  color:        var(--ae-color-accent);\n}\n:host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-color-subtle);\n  border-color: var(--ae-color-accent);\n  color:        var(--ae-color-accent-hover);\n}\n:host([variant="outlined"]) .rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: var(--ae-color-solid);\n  color:        var(--ae-color-on-solid);\n}\n\n:host([variant="subtle"]) .rg-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--ae-color-accent);\n}\n:host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-color-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-accent-hover);\n}\n:host([variant="subtle"]) .rg-btn.selected {\n  background:   var(--ae-color-subtle-hover);\n  border-color: transparent;\n  color:        var(--ae-color-accent-hover);\n  font-weight:  600;\n  box-shadow:   none;\n}\n\n:host([variant="filled"]) .rg-btn:not(.selected) {\n  background:   var(--ae-surface-base);\n  border-color: var(--ae-border-default);\n  color:        var(--ae-color-text-muted);\n}\n\n:host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-surface-raised);\n  border-color: var(--ae-border-hover);\n  color:        var(--ae-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: var(--ae-radius-square);\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(--ae-surface-raised);\n  border:        1px solid var(--ae-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(--ae-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(--ae-color-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-text-secondary, var(--ae-color-text-main));\n}\n\n:host([mode="segmented"]) .rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: transparent;\n  color:        var(--ae-color-on-solid);\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(--ae-color-solid-hover);\n}\n\n:host([mode="segmented"]:not([color])) .rg-btn.selected {\n  background: var(--ae-color-gray-lighter);\n  color:      var(--ae-color-text-main);\n}\n\n:host([mode="segmented"][variant="outlined"]) .rg-container {\n  border-color: var(--ae-color-border);\n}\n:host([mode="segmented"][variant="outlined"]) .rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: transparent;\n  color:        var(--ae-color-on-solid);\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(--ae-color-gray-light);\n  color:        var(--ae-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(--ae-border-subtle);\n  border-color: var(--ae-color-gray-lighter);\n  color:        var(--ae-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(--ae-red) r g b / 0.10);\n  border-color: var(--ae-color-gray-lighter);\n  color:        var(--ae-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(--ae-color-border);\n  color:        var(--ae-color-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(--ae-border-subtle);\n  border-color: var(--ae-color-border-hover);\n  color:        var(--ae-color-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(--ae-red) r g b / 0.10);\n  border-color: var(--ae-color-border-hover);\n  color:        var(--ae-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(--ae-color-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(--ae-border-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-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(--ae-red) r g b / 0.10);\n  border-color: transparent;\n  color:        var(--ae-color-danger);\n}\n';
-const _RadioGroup = class _RadioGroup extends actionButton.AeicoField {
-  constructor() {
-    super();
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "_slotEl", null);
-    __publicField(this, "_slotOptions", []);
-    __publicField(this, "_groupName");
-    // Single handler for radio inputs — handles both select and deselect.
-    // Only uses `click` (not `change`) because `change` fires before `click`;
-    // if we set value in `change`, the `click` handler would see the updated
-    // value and immediately deselect.
-    __publicField(this, "_boundOnRadioClick", (e) => {
-      const input = e.target;
-      const current = this.value ?? "";
-      if (input.value === current) {
-        if (this.allowEmpty) {
-          input.checked = false;
-          this.setValue("", { silent: false, action: "change" });
-        }
-      } else {
-        this.setValue(input.value, { silent: false, action: "change" });
-      }
-    });
-    __publicField(this, "_boundOnButtonClick", (e) => {
-      const btn = e.currentTarget;
-      const val = btn.dataset.value ?? "";
-      const current = this.value ?? "";
-      if (val === current) {
-        if (this.allowEmpty) {
-          this.setValue("", { silent: false, action: "change" });
-        }
-      } else {
-        this.setValue(val, { silent: false, action: "change" });
-      }
-    });
-    this._groupName = `rg-${++_RadioGroup._instanceCount}`;
-  }
-  _optLabel(opt) {
-    if (opt !== null && typeof opt === "object") {
-      return String(opt.label);
-    }
-    return String(opt);
-  }
-  _optValue(opt) {
-    if (opt !== null && typeof opt === "object") return String(opt.value);
-    return String(opt);
-  }
-  _allOptions() {
-    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({
-      label: this._optLabel(o),
-      value: this._optValue(o)
-    }));
-    const from_slot = this._slotOptions.map((el) => {
-      var _a;
-      return {
-        label: ((_a = el.textContent) == null ? void 0 : _a.trim()) || el.value,
-        value: el.value,
-        disabled: el.disabled
-      };
-    });
-    return [...from_props, ...from_slot];
-  }
-  _onSlotChange() {
-    if (!this._slotEl) return;
-    this._slotOptions = this._slotEl.assignedElements({ flatten: true }).filter(
-      (el) => el.tagName.toLowerCase() === "ae-radio"
-    );
-    this.update();
-  }
-  getValue() {
-    return this.value ?? "";
-  }
-  writeValue(_value) {
-  }
-  onReset() {
-    this.setValue(this.defaultValue ?? "", { silent: false, action: "reset" });
-  }
-  onClear() {
-    this.setValue("", { silent: false, action: "clear" });
-  }
-  render() {
-    const mode = this.mode || "default";
-    const opts = this._allOptions();
-    const current = this.value ?? "";
-    return aeico.html(({ div, slot }) => {
-      const id = this.getFieldId();
-      this.renderLabel(id);
-      div({ id, role: "group", className: "rg-container field-body" }, () => {
-        if (mode === "default") {
-          this._renderRadio(opts, current);
-        } else {
-          this._renderButtons(opts, current, mode);
-        }
-      });
-      if (this.allowEmpty) this.renderClearButton();
-      this.renderResetButton();
-      this._slotEl = slot({
-        style: { display: "none" },
-        "@slotchange": () => this._onSlotChange()
-      });
-      this.renderHelperText();
-      this.renderError();
-    });
-  }
-  _renderRadio(opts, current) {
-    const { label, input, span } = aeico.tags;
-    for (const opt of opts) {
-      const isChecked = opt.value === current;
-      label({ key: `opt-${opt.value}`, className: "rg-radio-option" }, () => {
-        const el = input({
-          type: "radio",
-          className: "rg-radio-input",
-          name: this._groupName,
-          value: opt.value,
-          disabled: Boolean(this.disabled) || Boolean(opt.disabled),
-          required: Boolean(this.required),
-          "@click": this._boundOnRadioClick
-        });
-        el.checked = isChecked;
-        if (!this.fieldElement) this.fieldElement = el;
-        span({ className: "rg-radio-label", textContent: opt.label });
-      });
-    }
-  }
-  _renderButtons(opts, current, mode) {
-    const { button } = aeico.tags;
-    const count = opts.length;
-    for (let i = 0; i < count; i++) {
-      const opt = opts[i];
-      const isSelected = opt.value === current;
-      let posClass = "";
-      if (mode === "button-group") {
-        if (count === 1) posClass = " only";
-        else if (i === 0) posClass = " first";
-        else if (i === count - 1) posClass = " last";
-        else posClass = " inner";
-      }
-      button({
-        key: `opt-${opt.value}`,
-        className: `rg-btn${isSelected ? " selected" : ""}${posClass}`,
-        textContent: opt.label,
-        disabled: Boolean(this.disabled) || Boolean(opt.disabled),
-        "data-value": opt.value,
-        "@click": this._boundOnButtonClick
-      });
-    }
-  }
-};
-__publicField(_RadioGroup, "_instanceCount", 0);
-__publicField(_RadioGroup, "tagName", "radio-group");
-__publicField(_RadioGroup, "props", {
-  options: { type: Array },
-  mode: { type: String },
-  color: { type: String },
-  variant: { type: String },
-  size: { type: String },
-  allowEmpty: { type: Boolean }
-});
-__publicField(_RadioGroup, "styles", [variables.variables, size.sizeCSS, color.colorCSS, actionButton.fieldLabelCSS, actionButton.actionButtonCSS, style]);
-let RadioGroup = _RadioGroup;
-RadioGroup.register();
-class Radio extends aeicoComponent.AeicoComponent {
-}
-__publicField(Radio, "tagName", "radio");
-/** No shadow DOM — this element is a transparent data/content carrier. */
-__publicField(Radio, "useShadowDOM", false);
-__publicField(Radio, "props", {
-  value: { type: String },
-  disabled: { type: Boolean }
-});
-Radio.register();
-exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
-//# sourceMappingURL=radio.cjs.map

package/dist/chunks/radio.cjs.map

@@ -1 +0,0 @@
-{"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,186 +0,0 @@
-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, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
-import { html, tags } from "aeico";
-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(--ae-size-m);\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\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(--ae-color-text-main);\n  user-select: none;\n}\n\n.rg-radio-input {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--ae-color-solid, var(--ae-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(--ae-surface-base);\n  border:       1px solid var(--ae-color-gray-light);\n  color:        var(--ae-color-text-muted);\n}\n\n.rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-surface-base-hover);\n  border-color: var(--ae-color-gray-light);\n  color:        var(--ae-color-text-main);\n}\n\n.rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: var(--ae-color-solid);\n  color:        var(--ae-color-on-solid);\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(--ae-color-solid-hover);\n  border-color: var(--ae-color-solid-hover);\n}\n\n.rg-btn:active:not(:disabled):not(.selected) {\n  background: var(--ae-color-subtle-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(--ae-color-border);\n  color:        var(--ae-color-accent);\n}\n:host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-color-subtle);\n  border-color: var(--ae-color-accent);\n  color:        var(--ae-color-accent-hover);\n}\n:host([variant="outlined"]) .rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: var(--ae-color-solid);\n  color:        var(--ae-color-on-solid);\n}\n\n:host([variant="subtle"]) .rg-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--ae-color-accent);\n}\n:host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-color-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-accent-hover);\n}\n:host([variant="subtle"]) .rg-btn.selected {\n  background:   var(--ae-color-subtle-hover);\n  border-color: transparent;\n  color:        var(--ae-color-accent-hover);\n  font-weight:  600;\n  box-shadow:   none;\n}\n\n:host([variant="filled"]) .rg-btn:not(.selected) {\n  background:   var(--ae-surface-base);\n  border-color: var(--ae-border-default);\n  color:        var(--ae-color-text-muted);\n}\n\n:host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--ae-surface-raised);\n  border-color: var(--ae-border-hover);\n  color:        var(--ae-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: var(--ae-radius-square);\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(--ae-surface-raised);\n  border:        1px solid var(--ae-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(--ae-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(--ae-color-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-text-secondary, var(--ae-color-text-main));\n}\n\n:host([mode="segmented"]) .rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: transparent;\n  color:        var(--ae-color-on-solid);\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(--ae-color-solid-hover);\n}\n\n:host([mode="segmented"]:not([color])) .rg-btn.selected {\n  background: var(--ae-color-gray-lighter);\n  color:      var(--ae-color-text-main);\n}\n\n:host([mode="segmented"][variant="outlined"]) .rg-container {\n  border-color: var(--ae-color-border);\n}\n:host([mode="segmented"][variant="outlined"]) .rg-btn.selected {\n  background:   var(--ae-color-solid);\n  border-color: transparent;\n  color:        var(--ae-color-on-solid);\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(--ae-color-gray-light);\n  color:        var(--ae-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(--ae-border-subtle);\n  border-color: var(--ae-color-gray-lighter);\n  color:        var(--ae-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(--ae-red) r g b / 0.10);\n  border-color: var(--ae-color-gray-lighter);\n  color:        var(--ae-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(--ae-color-border);\n  color:        var(--ae-color-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(--ae-border-subtle);\n  border-color: var(--ae-color-border-hover);\n  color:        var(--ae-color-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(--ae-red) r g b / 0.10);\n  border-color: var(--ae-color-border-hover);\n  color:        var(--ae-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(--ae-color-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(--ae-border-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-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(--ae-red) r g b / 0.10);\n  border-color: transparent;\n  color:        var(--ae-color-danger);\n}\n';
-const _RadioGroup = class _RadioGroup extends AeicoField {
-  constructor() {
-    super();
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "_slotEl", null);
-    __publicField(this, "_slotOptions", []);
-    __publicField(this, "_groupName");
-    // Single handler for radio inputs — handles both select and deselect.
-    // Only uses `click` (not `change`) because `change` fires before `click`;
-    // if we set value in `change`, the `click` handler would see the updated
-    // value and immediately deselect.
-    __publicField(this, "_boundOnRadioClick", (e) => {
-      const input = e.target;
-      const current = this.value ?? "";
-      if (input.value === current) {
-        if (this.allowEmpty) {
-          input.checked = false;
-          this.setValue("", { silent: false, action: "change" });
-        }
-      } else {
-        this.setValue(input.value, { silent: false, action: "change" });
-      }
-    });
-    __publicField(this, "_boundOnButtonClick", (e) => {
-      const btn = e.currentTarget;
-      const val = btn.dataset.value ?? "";
-      const current = this.value ?? "";
-      if (val === current) {
-        if (this.allowEmpty) {
-          this.setValue("", { silent: false, action: "change" });
-        }
-      } else {
-        this.setValue(val, { silent: false, action: "change" });
-      }
-    });
-    this._groupName = `rg-${++_RadioGroup._instanceCount}`;
-  }
-  _optLabel(opt) {
-    if (opt !== null && typeof opt === "object") {
-      return String(opt.label);
-    }
-    return String(opt);
-  }
-  _optValue(opt) {
-    if (opt !== null && typeof opt === "object") return String(opt.value);
-    return String(opt);
-  }
-  _allOptions() {
-    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({
-      label: this._optLabel(o),
-      value: this._optValue(o)
-    }));
-    const from_slot = this._slotOptions.map((el) => {
-      var _a;
-      return {
-        label: ((_a = el.textContent) == null ? void 0 : _a.trim()) || el.value,
-        value: el.value,
-        disabled: el.disabled
-      };
-    });
-    return [...from_props, ...from_slot];
-  }
-  _onSlotChange() {
-    if (!this._slotEl) return;
-    this._slotOptions = this._slotEl.assignedElements({ flatten: true }).filter(
-      (el) => el.tagName.toLowerCase() === "ae-radio"
-    );
-    this.update();
-  }
-  getValue() {
-    return this.value ?? "";
-  }
-  writeValue(_value) {
-  }
-  onReset() {
-    this.setValue(this.defaultValue ?? "", { silent: false, action: "reset" });
-  }
-  onClear() {
-    this.setValue("", { silent: false, action: "clear" });
-  }
-  render() {
-    const mode = this.mode || "default";
-    const opts = this._allOptions();
-    const current = this.value ?? "";
-    return html(({ div, slot }) => {
-      const id = this.getFieldId();
-      this.renderLabel(id);
-      div({ id, role: "group", className: "rg-container field-body" }, () => {
-        if (mode === "default") {
-          this._renderRadio(opts, current);
-        } else {
-          this._renderButtons(opts, current, mode);
-        }
-      });
-      if (this.allowEmpty) this.renderClearButton();
-      this.renderResetButton();
-      this._slotEl = slot({
-        style: { display: "none" },
-        "@slotchange": () => this._onSlotChange()
-      });
-      this.renderHelperText();
-      this.renderError();
-    });
-  }
-  _renderRadio(opts, current) {
-    const { label, input, span } = tags;
-    for (const opt of opts) {
-      const isChecked = opt.value === current;
-      label({ key: `opt-${opt.value}`, className: "rg-radio-option" }, () => {
-        const el = input({
-          type: "radio",
-          className: "rg-radio-input",
-          name: this._groupName,
-          value: opt.value,
-          disabled: Boolean(this.disabled) || Boolean(opt.disabled),
-          required: Boolean(this.required),
-          "@click": this._boundOnRadioClick
-        });
-        el.checked = isChecked;
-        if (!this.fieldElement) this.fieldElement = el;
-        span({ className: "rg-radio-label", textContent: opt.label });
-      });
-    }
-  }
-  _renderButtons(opts, current, mode) {
-    const { button } = tags;
-    const count = opts.length;
-    for (let i = 0; i < count; i++) {
-      const opt = opts[i];
-      const isSelected = opt.value === current;
-      let posClass = "";
-      if (mode === "button-group") {
-        if (count === 1) posClass = " only";
-        else if (i === 0) posClass = " first";
-        else if (i === count - 1) posClass = " last";
-        else posClass = " inner";
-      }
-      button({
-        key: `opt-${opt.value}`,
-        className: `rg-btn${isSelected ? " selected" : ""}${posClass}`,
-        textContent: opt.label,
-        disabled: Boolean(this.disabled) || Boolean(opt.disabled),
-        "data-value": opt.value,
-        "@click": this._boundOnButtonClick
-      });
-    }
-  }
-};
-__publicField(_RadioGroup, "_instanceCount", 0);
-__publicField(_RadioGroup, "tagName", "radio-group");
-__publicField(_RadioGroup, "props", {
-  options: { type: Array },
-  mode: { type: String },
-  color: { type: String },
-  variant: { type: String },
-  size: { type: String },
-  allowEmpty: { type: Boolean }
-});
-__publicField(_RadioGroup, "styles", [variables, sizeCSS, colorCSS, fieldLabelCSS, actionButtonCSS, style]);
-let RadioGroup = _RadioGroup;
-RadioGroup.register();
-class Radio extends AeicoComponent {
-}
-__publicField(Radio, "tagName", "radio");
-/** No shadow DOM — this element is a transparent data/content carrier. */
-__publicField(Radio, "useShadowDOM", false);
-__publicField(Radio, "props", {
-  value: { type: String },
-  disabled: { type: Boolean }
-});
-Radio.register();
-export {
-  Radio as R,
-  RadioGroup as a
-};
-//# sourceMappingURL=radio.js.map

package/dist/chunks/radio.js.map

@@ -1 +0,0 @@
-{"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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"}