aeico-components 0.1.5 → 0.1.7

package/dist/chunks/switch.cjs

@@ -1,21 +1,69 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const aeicoField = require("./aeico-field.cjs");
+const 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 styles = ":host {\n  display: block;\n  font-size: var(--size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--color-gray);\n  --toggle-bg-checked:  var(--color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: 0;\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: 50%;\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n/* action buttons */\n.reset-btn,\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n";
-class Switch extends aeicoField.AeicoField {
+const styles = ":host {\n  display: block;\n  font-size: var(--ae-size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--ae-color-gray);\n  --toggle-bg-checked:  var(--ae-color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: var(--ae-radius-square);\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: var(--ae-radius-circle);\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n.toggle-knob-icon ae-icon,\n.track-icon ae-icon {\n  font-size: var(--toggle-icon-size, calc(var(--toggle-slider-size) * 0.72));\n  width: 1em;\n  height: 1em;\n}\n\n.toggle-knob-icon {\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-knob-icon-color, rgba(0, 0, 0, 0.6));\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.toggle-knob-icon.icon-checked {\n  opacity: 0;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-checked {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-unchecked {\n  opacity: 0;\n}\n\n.track-icon {\n  position: absolute;\n  top: var(--toggle-gap);\n  width: var(--toggle-slider-size);\n  height: var(--toggle-slider-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-track-icon-color, white);\n  transition: opacity var(--toggle-transition);\n}\n\n.track-icon-left {\n  left: var(--toggle-gap);\n  opacity: 0;\n}\n\n.track-icon-right {\n  right: var(--toggle-gap);\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-left {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-right {\n  opacity: 0;\n}\n";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 _iconPlacement_dec, _iconChecked_dec, _icon_dec, _defaultChecked_dec, _checked_dec, _a, _init, _checked, _defaultChecked, _icon, _iconChecked, _iconPlacement;
+class Switch extends (_a = actionButton.AeicoField, _checked_dec = [aeico.prop({ type: Boolean })], _defaultChecked_dec = [aeico.prop({ type: Boolean })], _icon_dec = [aeico.prop({ type: String })], _iconChecked_dec = [aeico.prop({ type: String })], _iconPlacement_dec = [aeico.prop({ type: String })], _a) {
   constructor() {
     super(...arguments);
     __publicField(this, "fieldElement", null);
+    __privateAdd(this, _checked, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _defaultChecked, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _icon, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _iconChecked, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _iconPlacement, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
   }
   getValue() {
-    var _a;
-    return ((_a = this.fieldElement) == null ? void 0 : _a.checked) ?? false;
+    var _a2;
+    return ((_a2 = this.fieldElement) == null ? void 0 : _a2.checked) ?? false;
   }
   writeValue(checked) {
     if (this.fieldElement) {
@@ -45,29 +93,75 @@ class Switch extends aeicoField.AeicoField {
     this.setValue(false, { ...options, action: "clear" });
   }
   render() {
-    return aeico.html(({ div, input, span }) => {
-      div({ className: "switch-container" }, () => {
+    return aeico.html(({ div, input, span, aeIcon }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "switch-container field-body" }, () => {
         div({ className: "switch-wrapper" }, () => {
           this.fieldElement = input({
+            id,
             type: "checkbox",
             className: "field-input",
             checked: Boolean(this.checked),
             disabled: Boolean(this.disabled),
+            required: Boolean(this.required),
             "@change": this.boundOnChange
           });
-          span({ className: "toggle-slider" });
+          const hasIcon = this.icon || this.iconChecked;
+          const placement = this.iconPlacement ?? "knob";
+          span({ className: "toggle-slider" }, () => {
+            if (!hasIcon) return;
+            if (placement === "track") {
+              span({ className: "track-icon track-icon-left" }, () => {
+                aeIcon({ name: this.iconChecked ?? this.icon });
+              });
+              span({ className: "track-icon track-icon-right" }, () => {
+                aeIcon({ name: this.icon ?? this.iconChecked });
+              });
+            } else {
+              if (this.icon && this.iconChecked) {
+                span({ className: "toggle-knob-icon icon-unchecked" }, () => {
+                  aeIcon({ name: this.icon });
+                });
+                span({ className: "toggle-knob-icon icon-checked" }, () => {
+                  aeIcon({ name: this.iconChecked });
+                });
+              } else {
+                span({ className: "toggle-knob-icon" }, () => {
+                  aeIcon({ name: this.icon ?? this.iconChecked });
+                });
+              }
+            }
+          });
         });
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
     });
   }
 }
+_init = __decoratorStart(_a);
+_checked = /* @__PURE__ */ new WeakMap();
+_defaultChecked = /* @__PURE__ */ new WeakMap();
+_icon = /* @__PURE__ */ new WeakMap();
+_iconChecked = /* @__PURE__ */ new WeakMap();
+_iconPlacement = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "checked", _checked_dec, Switch, _checked);
+__decorateElement(_init, 4, "defaultChecked", _defaultChecked_dec, Switch, _defaultChecked);
+__decorateElement(_init, 4, "icon", _icon_dec, Switch, _icon);
+__decorateElement(_init, 4, "iconChecked", _iconChecked_dec, Switch, _iconChecked);
+__decorateElement(_init, 4, "iconPlacement", _iconPlacement_dec, Switch, _iconPlacement);
+__decoratorMetadata(_init, Switch);
 __publicField(Switch, "tagName", "switch");
-__publicField(Switch, "props", {
-  checked: { type: Boolean },
-  defaultChecked: { type: Boolean }
-});
-__publicField(Switch, "styles", [variables.styleVariables, size.sizeCSS, color.colorCSS, styles]);
+__publicField(Switch, "styles", [
+  variables.variables,
+  size.sizeCSS,
+  color.colorCSS,
+  actionButton.fieldLabelCSS,
+  actionButton.actionButtonCSS,
+  styles
+]);
 Switch.register();
 exports.Switch = Switch;
 //# sourceMappingURL=switch.cjs.map

package/dist/chunks/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField<boolean> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  static props: Props = {\n    checked: { type: Boolean },\n    defaultChecked: { type: Boolean },\n  };\n\n  declare checked?: boolean;\n  declare defaultChecked?: boolean;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span }) => {\n      div({ className: 'switch-container' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            '@change': this.boundOnChange,\n          });\n          span({ className: 'toggle-slider' });\n        });\n        this.renderActionButtons();\n      });\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":["AeicoField","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;AAQA,MAAM,eAAeA,WAAAA,WAAoB;AAAA,EAAzC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAcxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAOC,MAAAA,KAAK,CAAC,EAAE,KAAK,OAAO,WAAW;AACpC,UAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,YAAI,EAAE,WAAW,iBAAA,GAAoB,MAAM;AACzC,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AACD,eAAK,EAAE,WAAW,iBAAiB;AAAA,QACrC,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAjEE,cAHI,QAGG,WAAU;AAEjB,cALI,QAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAQ;AAMlC,cAbI,QAaa,UAAS,CAACC,UAAAA,gBAAgBC,KAAAA,SAASC,MAAAA,UAAU,MAAM;AAyDtE,OAAO,SAAA;;"}
+{"version":3,"file":"switch.cjs","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport type { SwitchIconPlacement } from './defines';\nimport '../icon/icon';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField<boolean> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  @prop({ type: Boolean })\n  accessor checked: boolean | undefined;\n\n  @prop({ type: Boolean })\n  accessor defaultChecked: boolean | undefined;\n\n  @prop({ type: String })\n  accessor icon: string | undefined;\n\n  @prop({ type: String })\n  accessor iconChecked: string | undefined;\n\n  @prop({ type: String })\n  accessor iconPlacement: SwitchIconPlacement | undefined;\n\n  protected static styles = [\n    styleVariables,\n    sizeCSS,\n    colorCSS,\n    fieldLabelCSS,\n    actionButtonCSS,\n    styles,\n  ];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span, aeIcon }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'switch-container field-body' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            id,\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            required: Boolean(this.required),\n            '@change': this.boundOnChange,\n          });\n          const hasIcon = this.icon || this.iconChecked;\n          const placement = this.iconPlacement ?? 'knob';\n          span({ className: 'toggle-slider' }, () => {\n            if (!hasIcon) return;\n            if (placement === 'track') {\n              span({ className: 'track-icon track-icon-left' }, () => {\n                aeIcon({ name: this.iconChecked ?? this.icon! });\n              });\n              span({ className: 'track-icon track-icon-right' }, () => {\n                aeIcon({ name: this.icon ?? this.iconChecked! });\n              });\n            } else {\n              if (this.icon && this.iconChecked) {\n                span({ className: 'toggle-knob-icon icon-unchecked' }, () => {\n                  aeIcon({ name: this.icon! });\n                });\n                span({ className: 'toggle-knob-icon icon-checked' }, () => {\n                  aeIcon({ name: this.iconChecked! });\n                });\n              } else {\n                span({ className: 'toggle-knob-icon' }, () => {\n                  aeIcon({ name: (this.icon ?? this.iconChecked)! });\n                });\n              }\n            }\n          });\n        });\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":["AeicoField","prop","_a","html","styleVariables","sizeCSS","colorCSS","fieldLabelCSS","actionButtonCSS"],"mappings":"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"}

package/dist/chunks/switch.js

@@ -1,20 +1,68 @@
+import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
+import { prop, html } from "aeico";
+import { v as variables } from "./variables.js";
+import { s as sizeCSS } from "./size.js";
+import { c as colorCSS } from "./color.js";
+const styles = ":host {\n  display: block;\n  font-size: var(--ae-size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--ae-color-gray);\n  --toggle-bg-checked:  var(--ae-color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: var(--ae-radius-square);\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: var(--ae-radius-circle);\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n.toggle-knob-icon ae-icon,\n.track-icon ae-icon {\n  font-size: var(--toggle-icon-size, calc(var(--toggle-slider-size) * 0.72));\n  width: 1em;\n  height: 1em;\n}\n\n.toggle-knob-icon {\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-knob-icon-color, rgba(0, 0, 0, 0.6));\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.toggle-knob-icon.icon-checked {\n  opacity: 0;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-checked {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .toggle-knob-icon.icon-unchecked {\n  opacity: 0;\n}\n\n.track-icon {\n  position: absolute;\n  top: var(--toggle-gap);\n  width: var(--toggle-slider-size);\n  height: var(--toggle-slider-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--toggle-track-icon-color, white);\n  transition: opacity var(--toggle-transition);\n}\n\n.track-icon-left {\n  left: var(--toggle-gap);\n  opacity: 0;\n}\n\n.track-icon-right {\n  right: var(--toggle-gap);\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-left {\n  opacity: 1;\n}\n\n.field-input:checked + .toggle-slider .track-icon-right {\n  opacity: 0;\n}\n";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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);
-import { A as AeicoField } from "./aeico-field.js";
-import { html } from "aeico";
-import { s as styleVariables } from "./variables.js";
-import { s as sizeCSS } from "./size.js";
-import { c as colorCSS } from "./color.js";
-const styles = ":host {\n  display: block;\n  font-size: var(--size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--color-gray);\n  --toggle-bg-checked:  var(--color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: 0;\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: 50%;\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n/* action buttons */\n.reset-btn,\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n";
-class Switch extends AeicoField {
+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 _iconPlacement_dec, _iconChecked_dec, _icon_dec, _defaultChecked_dec, _checked_dec, _a, _init, _checked, _defaultChecked, _icon, _iconChecked, _iconPlacement;
+class Switch extends (_a = AeicoField, _checked_dec = [prop({ type: Boolean })], _defaultChecked_dec = [prop({ type: Boolean })], _icon_dec = [prop({ type: String })], _iconChecked_dec = [prop({ type: String })], _iconPlacement_dec = [prop({ type: String })], _a) {
   constructor() {
     super(...arguments);
     __publicField(this, "fieldElement", null);
+    __privateAdd(this, _checked, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _defaultChecked, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _icon, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _iconChecked, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _iconPlacement, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
   }
   getValue() {
-    var _a;
-    return ((_a = this.fieldElement) == null ? void 0 : _a.checked) ?? false;
+    var _a2;
+    return ((_a2 = this.fieldElement) == null ? void 0 : _a2.checked) ?? false;
   }
   writeValue(checked) {
     if (this.fieldElement) {
@@ -44,29 +92,75 @@ class Switch extends AeicoField {
     this.setValue(false, { ...options, action: "clear" });
   }
   render() {
-    return html(({ div, input, span }) => {
-      div({ className: "switch-container" }, () => {
+    return html(({ div, input, span, aeIcon }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "switch-container field-body" }, () => {
         div({ className: "switch-wrapper" }, () => {
           this.fieldElement = input({
+            id,
             type: "checkbox",
             className: "field-input",
             checked: Boolean(this.checked),
             disabled: Boolean(this.disabled),
+            required: Boolean(this.required),
             "@change": this.boundOnChange
           });
-          span({ className: "toggle-slider" });
+          const hasIcon = this.icon || this.iconChecked;
+          const placement = this.iconPlacement ?? "knob";
+          span({ className: "toggle-slider" }, () => {
+            if (!hasIcon) return;
+            if (placement === "track") {
+              span({ className: "track-icon track-icon-left" }, () => {
+                aeIcon({ name: this.iconChecked ?? this.icon });
+              });
+              span({ className: "track-icon track-icon-right" }, () => {
+                aeIcon({ name: this.icon ?? this.iconChecked });
+              });
+            } else {
+              if (this.icon && this.iconChecked) {
+                span({ className: "toggle-knob-icon icon-unchecked" }, () => {
+                  aeIcon({ name: this.icon });
+                });
+                span({ className: "toggle-knob-icon icon-checked" }, () => {
+                  aeIcon({ name: this.iconChecked });
+                });
+              } else {
+                span({ className: "toggle-knob-icon" }, () => {
+                  aeIcon({ name: this.icon ?? this.iconChecked });
+                });
+              }
+            }
+          });
         });
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
     });
   }
 }
+_init = __decoratorStart(_a);
+_checked = /* @__PURE__ */ new WeakMap();
+_defaultChecked = /* @__PURE__ */ new WeakMap();
+_icon = /* @__PURE__ */ new WeakMap();
+_iconChecked = /* @__PURE__ */ new WeakMap();
+_iconPlacement = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "checked", _checked_dec, Switch, _checked);
+__decorateElement(_init, 4, "defaultChecked", _defaultChecked_dec, Switch, _defaultChecked);
+__decorateElement(_init, 4, "icon", _icon_dec, Switch, _icon);
+__decorateElement(_init, 4, "iconChecked", _iconChecked_dec, Switch, _iconChecked);
+__decorateElement(_init, 4, "iconPlacement", _iconPlacement_dec, Switch, _iconPlacement);
+__decoratorMetadata(_init, Switch);
 __publicField(Switch, "tagName", "switch");
-__publicField(Switch, "props", {
-  checked: { type: Boolean },
-  defaultChecked: { type: Boolean }
-});
-__publicField(Switch, "styles", [styleVariables, sizeCSS, colorCSS, styles]);
+__publicField(Switch, "styles", [
+  variables,
+  sizeCSS,
+  colorCSS,
+  fieldLabelCSS,
+  actionButtonCSS,
+  styles
+]);
 Switch.register();
 export {
   Switch as S

package/dist/chunks/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField<boolean> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  static props: Props = {\n    checked: { type: Boolean },\n    defaultChecked: { type: Boolean },\n  };\n\n  declare checked?: boolean;\n  declare defaultChecked?: boolean;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span }) => {\n      div({ className: 'switch-container' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            '@change': this.boundOnChange,\n          });\n          span({ className: 'toggle-slider' });\n        });\n        this.renderActionButtons();\n      });\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":[],"mappings":";;;;;;;;;AAQA,MAAM,eAAe,WAAoB;AAAA,EAAzC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAcxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,OAAO,WAAW;AACpC,UAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,YAAI,EAAE,WAAW,iBAAA,GAAoB,MAAM;AACzC,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AACD,eAAK,EAAE,WAAW,iBAAiB;AAAA,QACrC,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAjEE,cAHI,QAGG,WAAU;AAEjB,cALI,QAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAQ;AAMlC,cAbI,QAaa,UAAS,CAAC,gBAAgB,SAAS,UAAU,MAAM;AAyDtE,OAAO,SAAA;"}
+{"version":3,"file":"switch.js","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport type { SwitchIconPlacement } from './defines';\nimport '../icon/icon';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField<boolean> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  @prop({ type: Boolean })\n  accessor checked: boolean | undefined;\n\n  @prop({ type: Boolean })\n  accessor defaultChecked: boolean | undefined;\n\n  @prop({ type: String })\n  accessor icon: string | undefined;\n\n  @prop({ type: String })\n  accessor iconChecked: string | undefined;\n\n  @prop({ type: String })\n  accessor iconPlacement: SwitchIconPlacement | undefined;\n\n  protected static styles = [\n    styleVariables,\n    sizeCSS,\n    colorCSS,\n    fieldLabelCSS,\n    actionButtonCSS,\n    styles,\n  ];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span, aeIcon }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'switch-container field-body' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            id,\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            required: Boolean(this.required),\n            '@change': this.boundOnChange,\n          });\n          const hasIcon = this.icon || this.iconChecked;\n          const placement = this.iconPlacement ?? 'knob';\n          span({ className: 'toggle-slider' }, () => {\n            if (!hasIcon) return;\n            if (placement === 'track') {\n              span({ className: 'track-icon track-icon-left' }, () => {\n                aeIcon({ name: this.iconChecked ?? this.icon! });\n              });\n              span({ className: 'track-icon track-icon-right' }, () => {\n                aeIcon({ name: this.icon ?? this.iconChecked! });\n              });\n            } else {\n              if (this.icon && this.iconChecked) {\n                span({ className: 'toggle-knob-icon icon-unchecked' }, () => {\n                  aeIcon({ name: this.icon! });\n                });\n                span({ className: 'toggle-knob-icon icon-checked' }, () => {\n                  aeIcon({ name: this.iconChecked! });\n                });\n              } else {\n                span({ className: 'toggle-knob-icon' }, () => {\n                  aeIcon({ name: (this.icon ?? this.iconChecked)! });\n                });\n              }\n            }\n          });\n        });\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":["_a","styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,oBAAA,kBAAA,WAAA,qBAAA,cAAA,IAAA,OAAA,UAAA,iBAAA,OAAA,cAAA;AAYA,MAAM,gBAAe,KAAA,YAKnB,eAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,sBAAA,CAAC,KAAK,EAAE,MAAM,SAAS,IAGvB,YAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,mBAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,sBAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IAjBH,IAAoB;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACE,kBAAA,MAAU,gBAAwC,IAAA;AAKlD,iBAAA,MAAS,UAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,iBAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,gBAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAWU,WAAoB;;AAC5B,aAAOA,MAAA,KAAK,iBAAL,gBAAAA,IAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,OAAO,MAAM,aAAa;AAC5C,YAAM,KAAK,KAAK,WAAA;AAChB,WAAK,YAAY,EAAE;AACnB,UAAI,EAAE,WAAW,8BAAA,GAAiC,MAAM;AACtD,YAAI,EAAE,WAAW,iBAAA,GAAoB,MAAM;AACzC,eAAK,eAAe,MAAM;AAAA,YACxB;AAAA,YACA,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AACD,gBAAM,UAAU,KAAK,QAAQ,KAAK;AAClC,gBAAM,YAAY,KAAK,iBAAiB;AACxC,eAAK,EAAE,WAAW,gBAAA,GAAmB,MAAM;AACzC,gBAAI,CAAC,QAAS;AACd,gBAAI,cAAc,SAAS;AACzB,mBAAK,EAAE,WAAW,6BAAA,GAAgC,MAAM;AACtD,uBAAO,EAAE,MAAM,KAAK,eAAe,KAAK,MAAO;AAAA,cACjD,CAAC;AACD,mBAAK,EAAE,WAAW,8BAAA,GAAiC,MAAM;AACvD,uBAAO,EAAE,MAAM,KAAK,QAAQ,KAAK,aAAc;AAAA,cACjD,CAAC;AAAA,YACH,OAAO;AACL,kBAAI,KAAK,QAAQ,KAAK,aAAa;AACjC,qBAAK,EAAE,WAAW,kCAAA,GAAqC,MAAM;AAC3D,yBAAO,EAAE,MAAM,KAAK,KAAA,CAAO;AAAA,gBAC7B,CAAC;AACD,qBAAK,EAAE,WAAW,gCAAA,GAAmC,MAAM;AACzD,yBAAO,EAAE,MAAM,KAAK,YAAA,CAAc;AAAA,gBACpC,CAAC;AAAA,cACH,OAAO;AACL,qBAAK,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC5C,yBAAO,EAAE,MAAO,KAAK,QAAQ,KAAK,aAAe;AAAA,gBACnD,CAAC;AAAA,cACH;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AACD,WAAK,iBAAA;AACL,WAAK,YAAA;AAAA,IACP,CAAC;AAAA,EACH;AACF;AAjHA,QAAA,iBAAA,EAAA;AAMW,WAAA,oBAAA,QAAA;AAGA,kBAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,iBAAA,oBAAA,QAAA;AAZT,kBAAA,OAAA,GAAS,WADT,cALI,QAMK,QAAA;AAGT,kBAAA,OAAA,GAAS,kBADT,qBARI,QASK,eAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAXI,QAYK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAdI,QAeK,YAAA;AAGT,kBAAA,OAAA,GAAS,iBADT,oBAjBI,QAkBK,cAAA;AAlBX,oBAAA,OAAM,MAAA;AAGJ,cAHI,QAGG,WAAU,QAAA;AAiBjB,cApBI,QAoBa,UAAS;AAAA,EACxBC;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAA;AAwFF,OAAO,SAAA;"}

package/dist/chunks/tab-panel.cjs

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

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

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

package/dist/chunks/tab-panel.js

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