aeico-components 0.1.4 → 0.1.6

package/dist/chunks/copy-button.js

@@ -0,0 +1,169 @@
+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";
+import { prop, html } from "aeico";
+const copyButtonStyle = ':host {\n  display: inline-block;\n  --btn-solid-bg:          var(--color-solid);\n  --btn-solid-bg-hover:    var(--color-solid-hover);\n  --btn-solid-bg-active:   var(--color-solid-active);\n  --btn-solid-color:       var(--color-on-solid);\n  --btn-solid-color-hover: var(--color-on-solid-hover);\n  --btn-border:            var(--color-border);\n  --btn-border-hover:      var(--color-border-hover);\n  --btn-accent:            var(--color-accent);\n  --btn-accent-hover:      var(--color-accent-hover);\n  --btn-subtle-bg:         var(--color-subtle);\n  --btn-subtle-bg-hover:   var(--color-subtle-hover);\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-family: inherit;\n  font-weight: 400;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  outline: none;\n  position: relative;\n  padding: 0.429em 0.571em;\n  font-size: 1em;\n  line-height: 1.5;\n  border-radius: 4px;\n  height: 2.286em;\n  width: 2.286em;\n  min-width: unset;\n\n  background:  var(--btn-solid-bg);\n  border: 1px solid var(--btn-solid-bg);\n  color:       var(--btn-solid-color);\n}\n\nbutton:focus  { outline: none; }\nbutton:active { transform: translateY(1px); }\n\nbutton:hover:not(:disabled) {\n  background:   var(--btn-solid-bg-hover);\n  border-color: var(--btn-border-hover);\n  color:        var(--btn-solid-color-hover, var(--btn-solid-color));\n}\n\nbutton:active:not(:disabled) { background: var(--btn-solid-bg-active); }\n\nbutton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hide the fallback-text slot */\nslot { display: none; }\n\n/* Icon visibility */\n.icon-copy,\n.icon-check {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.icon-copy  { opacity: 1; transform: scale(1); }\n.icon-check { opacity: 0; transform: scale(0.6); }\n\n:host([copied]) .icon-copy  { opacity: 0; transform: scale(0.6); }\n:host([copied]) .icon-check { opacity: 1; transform: scale(1); }\n\n/* Variants */\n:host([variant="outlined"]) button {\n  background: transparent;\n  border-color: var(--btn-border);\n  color: var(--btn-accent);\n}\n:host([variant="outlined"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg);\n  border-color: var(--btn-border-hover);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="faint"]) button {\n  background: var(--btn-subtle-bg);\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="faint"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg-hover);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="subtle"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="subtle"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="text"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="text"]) button:hover:not(:disabled) {\n  color: var(--btn-accent-hover);\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 _tooltipPlacement_dec, _tooltipCopied_dec, _tooltip_dec, _duration_dec, _disabled_dec, _size_dec, _variant_dec, _color_dec, _text_dec, _a, _init, _text, _color, _variant, _size, _disabled, _duration, _tooltip, _tooltipCopied, _tooltipPlacement;
+class CopyButton extends (_a = AeicoComponent, _text_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _duration_dec = [prop({ type: Number })], _tooltip_dec = [prop({ type: String })], _tooltipCopied_dec = [prop({ type: String })], _tooltipPlacement_dec = [prop({ type: String })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _text, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _color, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _variant, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _size, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _duration, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __privateAdd(this, _tooltip, __runInitializers(_init, 32, this, "Copy")), __runInitializers(_init, 35, this);
+    __privateAdd(this, _tooltipCopied, __runInitializers(_init, 36, this, "Copied!")), __runInitializers(_init, 39, this);
+    __privateAdd(this, _tooltipPlacement, __runInitializers(_init, 40, this, "top")), __runInitializers(_init, 43, this);
+    __publicField(this, "_slotElement", null);
+    __publicField(this, "_tooltipEl", null);
+    __publicField(this, "_resetTimer", null);
+    __publicField(this, "_handleClick", () => {
+      if (this.disabled) return;
+      const textToCopy = this._getTextToCopy();
+      void navigator.clipboard.writeText(textToCopy).then(() => {
+        this.setAttribute("copied", "");
+        if (this._tooltipEl) {
+          this._tooltipEl.content = this.tooltipCopied;
+          this._tooltipEl.open = true;
+        }
+        if (this._resetTimer !== null) {
+          clearTimeout(this._resetTimer);
+        }
+        const duration = this.duration ?? 2e3;
+        this._resetTimer = setTimeout(() => {
+          this.removeAttribute("copied");
+          if (this._tooltipEl) {
+            this._tooltipEl.content = this.tooltip;
+            this._tooltipEl.open = false;
+          }
+          this._resetTimer = null;
+        }, duration);
+        this.dispatchEvent(
+          new CustomEvent("copy", {
+            bubbles: true,
+            composed: true,
+            detail: { text: textToCopy }
+          })
+        );
+      });
+    });
+  }
+  _getTextToCopy() {
+    var _a2;
+    if (this.text != null) return this.text;
+    const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes({ flatten: true })) ?? [];
+    return nodes.filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent ?? "").join("").trim();
+  }
+  onUnmounted() {
+    if (this._resetTimer !== null) {
+      clearTimeout(this._resetTimer);
+      this._resetTimer = null;
+    }
+  }
+  render() {
+    return html(({ aeTooltip, button, span, slot, aeIcon }) => {
+      this._tooltipEl = aeTooltip(
+        {
+          content: this.tooltip,
+          placement: this.tooltipPlacement,
+          disabled: this.disabled
+        },
+        () => {
+          button(
+            {
+              type: "button",
+              disabled: this.disabled,
+              part: "button",
+              "aria-label": this.tooltip,
+              "aria-disabled": this.disabled,
+              "@click": this._handleClick
+            },
+            () => {
+              span({ className: "icon-copy" }, () => {
+                aeIcon({ name: "copy" });
+              });
+              span({ className: "icon-check" }, () => {
+                aeIcon({ name: "check" });
+              });
+              this._slotElement = slot();
+            }
+          );
+        }
+      );
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_text = /* @__PURE__ */ new WeakMap();
+_color = /* @__PURE__ */ new WeakMap();
+_variant = /* @__PURE__ */ new WeakMap();
+_size = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_duration = /* @__PURE__ */ new WeakMap();
+_tooltip = /* @__PURE__ */ new WeakMap();
+_tooltipCopied = /* @__PURE__ */ new WeakMap();
+_tooltipPlacement = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "text", _text_dec, CopyButton, _text);
+__decorateElement(_init, 4, "color", _color_dec, CopyButton, _color);
+__decorateElement(_init, 4, "variant", _variant_dec, CopyButton, _variant);
+__decorateElement(_init, 4, "size", _size_dec, CopyButton, _size);
+__decorateElement(_init, 4, "disabled", _disabled_dec, CopyButton, _disabled);
+__decorateElement(_init, 4, "duration", _duration_dec, CopyButton, _duration);
+__decorateElement(_init, 4, "tooltip", _tooltip_dec, CopyButton, _tooltip);
+__decorateElement(_init, 4, "tooltipCopied", _tooltipCopied_dec, CopyButton, _tooltipCopied);
+__decorateElement(_init, 4, "tooltipPlacement", _tooltipPlacement_dec, CopyButton, _tooltipPlacement);
+__decoratorMetadata(_init, CopyButton);
+__publicField(CopyButton, "styles", [variables, sizeCSS, colorCSS, copyButtonStyle]);
+CopyButton.register();
+export {
+  CopyButton as C
+};
+//# sourceMappingURL=copy-button.js.map

package/dist/chunks/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","sources":["../../src/copy-button/copy-button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport copyButtonStyle from '../styles/components/copy-button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n// Ensure ae-icon and ae-tooltip are registered\nimport '../icon/icon';\nimport '../tooltip/tooltip';\nimport type Tooltip from '../tooltip/tooltip';\nimport type { TooltipPlacement } from '../tooltip/defines';\nimport type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';\n\nclass CopyButton extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];\n\n  @prop({ type: String })\n  accessor text: string | undefined;\n\n  @prop({ type: String })\n  accessor color: CopyButtonColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: CopyButtonVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: CopyButtonSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean | undefined;\n\n  @prop({ type: Number })\n  accessor duration: number | undefined;\n\n  @prop({ type: String })\n  accessor tooltip: string = 'Copy';\n\n  @prop({ type: String })\n  accessor tooltipCopied: string = 'Copied!';\n\n  @prop({ type: String })\n  accessor tooltipPlacement: TooltipPlacement = 'top';\n\n  private _slotElement: HTMLSlotElement | null = null;\n  private _tooltipEl: Tooltip | null = null;\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private _getTextToCopy(): string {\n    if (this.text != null) return this.text;\n    const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];\n    return nodes\n      .filter((n) => n.nodeType === Node.TEXT_NODE)\n      .map((n) => n.textContent ?? '')\n      .join('')\n      .trim();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n\n    const textToCopy = this._getTextToCopy();\n\n    void navigator.clipboard.writeText(textToCopy).then(() => {\n      this.setAttribute('copied', '');\n\n      if (this._tooltipEl) {\n        this._tooltipEl.content = this.tooltipCopied;\n        this._tooltipEl.open = true;\n      }\n\n      if (this._resetTimer !== null) {\n        clearTimeout(this._resetTimer);\n      }\n      const duration = this.duration ?? 2000;\n      this._resetTimer = setTimeout(() => {\n        this.removeAttribute('copied');\n        if (this._tooltipEl) {\n          this._tooltipEl.content = this.tooltip;\n          this._tooltipEl.open = false;\n        }\n        this._resetTimer = null;\n      }, duration);\n\n      this.dispatchEvent(\n        new CustomEvent('copy', {\n          bubbles: true,\n          composed: true,\n          detail: { text: textToCopy },\n        }),\n      );\n    });\n  };\n\n  protected onUnmounted() {\n    if (this._resetTimer !== null) {\n      clearTimeout(this._resetTimer);\n      this._resetTimer = null;\n    }\n  }\n\n  protected render() {\n    return html(({ aeTooltip, button, span, slot, aeIcon }) => {\n      this._tooltipEl = aeTooltip(\n        {\n          content: this.tooltip,\n          placement: this.tooltipPlacement,\n          disabled: this.disabled,\n        },\n        () => {\n          button(\n            {\n              type: 'button',\n              disabled: this.disabled,\n              part: 'button',\n              'aria-label': this.tooltip,\n              'aria-disabled': this.disabled,\n              '@click': this._handleClick,\n            },\n            () => {\n              span({ className: 'icon-copy' }, () => {\n                aeIcon({ name: 'copy' });\n              });\n              span({ className: 'icon-check' }, () => {\n                aeIcon({ name: 'check' });\n              });\n              this._slotElement = slot();\n            },\n          );\n        },\n      );\n    });\n  }\n}\n\nCopyButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-copy-button': CopyButton;\n  }\n}\n\nexport default CopyButton;\nexport type CopyButtonProps = InferProps<typeof CopyButton>;\n"],"names":["_a","styleVariables"],"mappings":"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"}

package/dist/chunks/detail.cjs

@@ -3,7 +3,7 @@ const variables = require("./variables.cjs");
 const color = require("./color.cjs");
 const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
-const detailStyle = ':host {\n  display: block;\n\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n  --detail-radius:     6px;\n}\n\n:host([variant="faint"]) {\n  --detail-bg:         var(--color-bg-subtle);\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border-subtle);\n  --detail-header-bg:  var(--color-bg-subtle);\n}\n\n:host([variant="subtle"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-main);\n  --detail-border:     transparent;\n  --detail-header-bg:  transparent;\n}\n\n:host([variant="filled"]) {\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n}\n\n:host([variant="outlined"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border);\n  --detail-header-bg:  transparent;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.detail {\n  border: 1px solid var(--detail-border);\n  border-radius: var(--detail-radius);\n  color: var(--detail-color);\n  background: var(--detail-bg);\n  overflow: hidden;\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--detail-header-bg);\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  outline-offset: -2px;\n  user-select: none;\n}\n\n.summary:hover {\n  filter: brightness(0.93);\n}\n\n.summary:focus-visible {\n  outline: 2px solid var(--color-border);\n}\n\nslot[name="summary"] {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n\n.label {\n  flex: 1;\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n:host([open]) slot[name="expand"] {\n  display: none;\n}\n\n:host([open]) slot[name="collapse"] {\n  display: inline-flex;\n}\n\n.content-outer {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n:host([open]) .content-outer {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  overflow: hidden;\n  padding: 0 14px;\n  transition: padding 0.25s ease;\n}\n\n:host([open]) .content {\n  padding: 12px 14px;\n}\n\n';
+const detailStyle = ':host {\n  display: block;\n\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n  --detail-radius:     6px;\n}\n\n:host([variant="faint"]) {\n  --detail-bg:         var(--color-bg-subtle);\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border-subtle);\n  --detail-header-bg:  var(--color-bg-subtle);\n}\n\n:host([variant="subtle"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-main);\n  --detail-border:     transparent;\n  --detail-header-bg:  transparent;\n}\n\n:host([variant="filled"]) {\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n}\n\n:host([variant="outlined"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border);\n  --detail-header-bg:  transparent;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.detail {\n  border: 1px solid var(--detail-border);\n  border-radius:\n    var(--detail-r-tl, var(--detail-radius))\n    var(--detail-r-tr, var(--detail-radius))\n    var(--detail-r-br, var(--detail-radius))\n    var(--detail-r-bl, var(--detail-radius));\n  color: var(--detail-color);\n  background: var(--detail-bg);\n  overflow: hidden;\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--detail-header-bg);\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  outline-offset: -2px;\n  user-select: none;\n}\n\n.summary:hover {\n  filter: brightness(0.93);\n}\n\n.summary:focus-visible {\n  outline: 2px solid var(--color-border);\n}\n\nslot[name="summary"] {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n\n.label {\n  flex: 1;\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n:host([icon-placement="start"]) slot[name="expand"],\n:host([icon-placement="start"]) slot[name="collapse"] {\n  order: -1;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n:host([open]) slot[name="expand"] {\n  display: none;\n}\n\n:host([open]) slot[name="collapse"] {\n  display: inline-flex;\n}\n\n.content-outer {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n:host([open]) .content-outer {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  overflow: hidden;\n  padding: 0 14px;\n  transition: padding 0.25s ease;\n}\n\n:host([open]) .content {\n  padding: 12px 14px;\n}\n\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -49,14 +49,15 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 _disabled_dec, _color_dec, _variant_dec, _summary_dec, _a, _init, _summary, _variant, _color, _disabled;
-class Detail extends (_a = aeicoComponent.AeicoComponent, _summary_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _a) {
+var _iconPlacement_dec, _disabled_dec, _color_dec, _variant_dec, _summary_dec, _a, _init, _summary, _variant, _color, _disabled, _iconPlacement;
+class Detail extends (_a = aeicoComponent.AeicoComponent, _summary_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _iconPlacement_dec = [aeico.prop({ type: String })], _a) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _summary, __runInitializers(_init, 8, this, "")), __runInitializers(_init, 11, this);
     __privateAdd(this, _variant, __runInitializers(_init, 12, this, "filled")), __runInitializers(_init, 15, this);
     __privateAdd(this, _color, __runInitializers(_init, 16, this, "default")), __runInitializers(_init, 19, this);
     __privateAdd(this, _disabled, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _iconPlacement, __runInitializers(_init, 24, this, "end")), __runInitializers(_init, 27, this);
     __publicField(this, "_open", false);
     __publicField(this, "_handleSummaryClick", () => {
       this.toggle();
@@ -131,13 +132,15 @@ _summary = /* @__PURE__ */ new WeakMap();
 _variant = /* @__PURE__ */ new WeakMap();
 _color = /* @__PURE__ */ new WeakMap();
 _disabled = /* @__PURE__ */ new WeakMap();
+_iconPlacement = /* @__PURE__ */ new WeakMap();
 __decorateElement(_init, 4, "summary", _summary_dec, Detail, _summary);
 __decorateElement(_init, 4, "variant", _variant_dec, Detail, _variant);
 __decorateElement(_init, 4, "color", _color_dec, Detail, _color);
 __decorateElement(_init, 4, "disabled", _disabled_dec, Detail, _disabled);
+__decorateElement(_init, 4, "iconPlacement", _iconPlacement_dec, Detail, _iconPlacement);
 __decoratorMetadata(_init, Detail);
 __publicField(Detail, "tagName", "detail");
-__publicField(Detail, "styles", [variables.styleVariables, color.colorCSS, detailStyle]);
+__publicField(Detail, "styles", [variables.variables, color.colorCSS, detailStyle]);
 Detail.register();
 exports.Detail = Detail;
 //# sourceMappingURL=detail.cjs.map

package/dist/chunks/detail.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"detail.cjs","sources":["../../src/detail/detail.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport detailStyle from '../styles/components/detail.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { DetailColor, DetailVariant } from './defines';\n\n/**\n * Detail component that can be used to show/hide additional content.\n *\n * @example\n * ```html\n * <ae-detail summary=\"Click Me\">\n *  <ae-icon name=\"plus\" slot=\"expand\"></ae-icon>\n *  <ae-icon name=\"minus\" slot=\"collapse\"></ae-icon>\n *  Detail.....\n * </ae-detail>\n */\nclass Detail extends AeicoComponent {\n  static tagName = 'detail';\n\n  protected static styles = [styleVariables, colorCSS, detailStyle];\n\n  @prop({ type: String })\n  accessor summary: string = '';\n\n  @prop({ type: String })\n  accessor variant: DetailVariant = 'filled';\n\n  @prop({ type: String })\n  accessor color: DetailColor = 'default';\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  private _open: boolean = false;\n\n  /** Opens the detail panel. */\n  open(): void {\n    if (this.disabled || this._open) return;\n    this._open = true;\n    this.toggleAttribute('open', true);\n    this.update();\n    this.emit('open');\n  }\n\n  /** Closes the detail panel. */\n  close(): void {\n    if (!this._open) return;\n    this._open = false;\n    this.toggleAttribute('open', false);\n    this.update();\n    this.emit('close');\n  }\n\n  /** Toggles the detail panel open/closed. */\n  toggle(): void {\n    if (this._open) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /** Returns whether the detail panel is currently open. */\n  isOpen(): boolean {\n    return this._open;\n  }\n\n  private _handleSummaryClick = (): void => {\n    this.toggle();\n  };\n\n  protected render() {\n    return html(({ div, button, span, slot }) => {\n      div({ className: 'detail', part: 'detail' }, () => {\n        button(\n          {\n            className: 'summary',\n            part: 'summary',\n            type: 'button',\n            'aria-expanded': String(this._open),\n            disabled: this.disabled || undefined,\n            '@click': this._handleSummaryClick,\n          },\n          () => {\n            slot({ name: 'summary' }, () => {\n              span({ className: 'label', textContent: this.summary });\n            });\n            slot({ name: 'expand' });\n            slot({ name: 'collapse' });\n          },\n        );\n        div({ className: 'content-outer' }, () => {\n          div(\n            {\n              className: 'content',\n              part: 'content',\n              role: 'region',\n            },\n            () => {\n              slot();\n            },\n          );\n        });\n      });\n    });\n  }\n}\n\nDetail.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-detail': Detail;\n  }\n}\n\nexport default Detail;\nexport type DetailProps = InferProps<typeof Detail>;\n"],"names":["AeicoComponent","prop","html","styleVariables","colorCSS"],"mappings":"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"}
+{"version":3,"file":"detail.cjs","sources":["../../src/detail/detail.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport detailStyle from '../styles/components/detail.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { DetailColor, DetailVariant, DetailIconPlacement } from './defines';\n\n/**\n * Detail component that can be used to show/hide additional content.\n *\n * @example\n * ```html\n * <ae-detail summary=\"Click Me\">\n *  <ae-icon name=\"plus\" slot=\"expand\"></ae-icon>\n *  <ae-icon name=\"minus\" slot=\"collapse\"></ae-icon>\n *  Detail.....\n * </ae-detail>\n */\nclass Detail extends AeicoComponent {\n  static tagName = 'detail';\n\n  protected static styles = [styleVariables, colorCSS, detailStyle];\n\n  @prop({ type: String })\n  accessor summary: string = '';\n\n  @prop({ type: String })\n  accessor variant: DetailVariant = 'filled';\n\n  @prop({ type: String })\n  accessor color: DetailColor = 'default';\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor iconPlacement: DetailIconPlacement = 'end';\n\n  private _open: boolean = false;\n\n  /** Opens the detail panel. */\n  open(): void {\n    if (this.disabled || this._open) return;\n    this._open = true;\n    this.toggleAttribute('open', true);\n    this.update();\n    this.emit('open');\n  }\n\n  /** Closes the detail panel. */\n  close(): void {\n    if (!this._open) return;\n    this._open = false;\n    this.toggleAttribute('open', false);\n    this.update();\n    this.emit('close');\n  }\n\n  /** Toggles the detail panel open/closed. */\n  toggle(): void {\n    if (this._open) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /** Returns whether the detail panel is currently open. */\n  isOpen(): boolean {\n    return this._open;\n  }\n\n  private _handleSummaryClick = (): void => {\n    this.toggle();\n  };\n\n  protected render() {\n    return html(({ div, button, span, slot }) => {\n      div({ className: 'detail', part: 'detail' }, () => {\n        button(\n          {\n            className: 'summary',\n            part: 'summary',\n            type: 'button',\n            'aria-expanded': String(this._open),\n            disabled: this.disabled || undefined,\n            '@click': this._handleSummaryClick,\n          },\n          () => {\n            slot({ name: 'summary' }, () => {\n              span({ className: 'label', textContent: this.summary });\n            });\n            slot({ name: 'expand' });\n            slot({ name: 'collapse' });\n          },\n        );\n        div({ className: 'content-outer' }, () => {\n          div(\n            {\n              className: 'content',\n              part: 'content',\n              role: 'region',\n            },\n            () => {\n              slot();\n            },\n          );\n        });\n      });\n    });\n  }\n}\n\nDetail.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-detail': Detail;\n  }\n}\n\nexport default Detail;\nexport type DetailProps = InferProps<typeof Detail>;\nexport type { DetailIconPlacement };\n"],"names":["AeicoComponent","prop","html","styleVariables","colorCSS"],"mappings":"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"}

package/dist/chunks/detail.js

@@ -1,8 +1,8 @@
-import { s as styleVariables } from "./variables.js";
+import { v as variables } from "./variables.js";
 import { c as colorCSS } from "./color.js";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
-const detailStyle = ':host {\n  display: block;\n\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n  --detail-radius:     6px;\n}\n\n:host([variant="faint"]) {\n  --detail-bg:         var(--color-bg-subtle);\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border-subtle);\n  --detail-header-bg:  var(--color-bg-subtle);\n}\n\n:host([variant="subtle"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-main);\n  --detail-border:     transparent;\n  --detail-header-bg:  transparent;\n}\n\n:host([variant="filled"]) {\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n}\n\n:host([variant="outlined"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border);\n  --detail-header-bg:  transparent;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.detail {\n  border: 1px solid var(--detail-border);\n  border-radius: var(--detail-radius);\n  color: var(--detail-color);\n  background: var(--detail-bg);\n  overflow: hidden;\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--detail-header-bg);\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  outline-offset: -2px;\n  user-select: none;\n}\n\n.summary:hover {\n  filter: brightness(0.93);\n}\n\n.summary:focus-visible {\n  outline: 2px solid var(--color-border);\n}\n\nslot[name="summary"] {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n\n.label {\n  flex: 1;\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n:host([open]) slot[name="expand"] {\n  display: none;\n}\n\n:host([open]) slot[name="collapse"] {\n  display: inline-flex;\n}\n\n.content-outer {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n:host([open]) .content-outer {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  overflow: hidden;\n  padding: 0 14px;\n  transition: padding 0.25s ease;\n}\n\n:host([open]) .content {\n  padding: 12px 14px;\n}\n\n';
+const detailStyle = ':host {\n  display: block;\n\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n  --detail-radius:     6px;\n}\n\n:host([variant="faint"]) {\n  --detail-bg:         var(--color-bg-subtle);\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border-subtle);\n  --detail-header-bg:  var(--color-bg-subtle);\n}\n\n:host([variant="subtle"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-main);\n  --detail-border:     transparent;\n  --detail-header-bg:  transparent;\n}\n\n:host([variant="filled"]) {\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n}\n\n:host([variant="outlined"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border);\n  --detail-header-bg:  transparent;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.detail {\n  border: 1px solid var(--detail-border);\n  border-radius:\n    var(--detail-r-tl, var(--detail-radius))\n    var(--detail-r-tr, var(--detail-radius))\n    var(--detail-r-br, var(--detail-radius))\n    var(--detail-r-bl, var(--detail-radius));\n  color: var(--detail-color);\n  background: var(--detail-bg);\n  overflow: hidden;\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--detail-header-bg);\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  outline-offset: -2px;\n  user-select: none;\n}\n\n.summary:hover {\n  filter: brightness(0.93);\n}\n\n.summary:focus-visible {\n  outline: 2px solid var(--color-border);\n}\n\nslot[name="summary"] {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n\n.label {\n  flex: 1;\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n:host([icon-placement="start"]) slot[name="expand"],\n:host([icon-placement="start"]) slot[name="collapse"] {\n  order: -1;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n:host([open]) slot[name="expand"] {\n  display: none;\n}\n\n:host([open]) slot[name="collapse"] {\n  display: inline-flex;\n}\n\n.content-outer {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n:host([open]) .content-outer {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  overflow: hidden;\n  padding: 0 14px;\n  transition: padding 0.25s ease;\n}\n\n:host([open]) .content {\n  padding: 12px 14px;\n}\n\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -48,14 +48,15 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 _disabled_dec, _color_dec, _variant_dec, _summary_dec, _a, _init, _summary, _variant, _color, _disabled;
-class Detail extends (_a = AeicoComponent, _summary_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _a) {
+var _iconPlacement_dec, _disabled_dec, _color_dec, _variant_dec, _summary_dec, _a, _init, _summary, _variant, _color, _disabled, _iconPlacement;
+class Detail extends (_a = AeicoComponent, _summary_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _iconPlacement_dec = [prop({ type: String })], _a) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _summary, __runInitializers(_init, 8, this, "")), __runInitializers(_init, 11, this);
     __privateAdd(this, _variant, __runInitializers(_init, 12, this, "filled")), __runInitializers(_init, 15, this);
     __privateAdd(this, _color, __runInitializers(_init, 16, this, "default")), __runInitializers(_init, 19, this);
     __privateAdd(this, _disabled, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _iconPlacement, __runInitializers(_init, 24, this, "end")), __runInitializers(_init, 27, this);
     __publicField(this, "_open", false);
     __publicField(this, "_handleSummaryClick", () => {
       this.toggle();
@@ -130,13 +131,15 @@ _summary = /* @__PURE__ */ new WeakMap();
 _variant = /* @__PURE__ */ new WeakMap();
 _color = /* @__PURE__ */ new WeakMap();
 _disabled = /* @__PURE__ */ new WeakMap();
+_iconPlacement = /* @__PURE__ */ new WeakMap();
 __decorateElement(_init, 4, "summary", _summary_dec, Detail, _summary);
 __decorateElement(_init, 4, "variant", _variant_dec, Detail, _variant);
 __decorateElement(_init, 4, "color", _color_dec, Detail, _color);
 __decorateElement(_init, 4, "disabled", _disabled_dec, Detail, _disabled);
+__decorateElement(_init, 4, "iconPlacement", _iconPlacement_dec, Detail, _iconPlacement);
 __decoratorMetadata(_init, Detail);
 __publicField(Detail, "tagName", "detail");
-__publicField(Detail, "styles", [styleVariables, colorCSS, detailStyle]);
+__publicField(Detail, "styles", [variables, colorCSS, detailStyle]);
 Detail.register();
 export {
   Detail as D

package/dist/chunks/detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"detail.js","sources":["../../src/detail/detail.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport detailStyle from '../styles/components/detail.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { DetailColor, DetailVariant } from './defines';\n\n/**\n * Detail component that can be used to show/hide additional content.\n *\n * @example\n * ```html\n * <ae-detail summary=\"Click Me\">\n *  <ae-icon name=\"plus\" slot=\"expand\"></ae-icon>\n *  <ae-icon name=\"minus\" slot=\"collapse\"></ae-icon>\n *  Detail.....\n * </ae-detail>\n */\nclass Detail extends AeicoComponent {\n  static tagName = 'detail';\n\n  protected static styles = [styleVariables, colorCSS, detailStyle];\n\n  @prop({ type: String })\n  accessor summary: string = '';\n\n  @prop({ type: String })\n  accessor variant: DetailVariant = 'filled';\n\n  @prop({ type: String })\n  accessor color: DetailColor = 'default';\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  private _open: boolean = false;\n\n  /** Opens the detail panel. */\n  open(): void {\n    if (this.disabled || this._open) return;\n    this._open = true;\n    this.toggleAttribute('open', true);\n    this.update();\n    this.emit('open');\n  }\n\n  /** Closes the detail panel. */\n  close(): void {\n    if (!this._open) return;\n    this._open = false;\n    this.toggleAttribute('open', false);\n    this.update();\n    this.emit('close');\n  }\n\n  /** Toggles the detail panel open/closed. */\n  toggle(): void {\n    if (this._open) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /** Returns whether the detail panel is currently open. */\n  isOpen(): boolean {\n    return this._open;\n  }\n\n  private _handleSummaryClick = (): void => {\n    this.toggle();\n  };\n\n  protected render() {\n    return html(({ div, button, span, slot }) => {\n      div({ className: 'detail', part: 'detail' }, () => {\n        button(\n          {\n            className: 'summary',\n            part: 'summary',\n            type: 'button',\n            'aria-expanded': String(this._open),\n            disabled: this.disabled || undefined,\n            '@click': this._handleSummaryClick,\n          },\n          () => {\n            slot({ name: 'summary' }, () => {\n              span({ className: 'label', textContent: this.summary });\n            });\n            slot({ name: 'expand' });\n            slot({ name: 'collapse' });\n          },\n        );\n        div({ className: 'content-outer' }, () => {\n          div(\n            {\n              className: 'content',\n              part: 'content',\n              role: 'region',\n            },\n            () => {\n              slot();\n            },\n          );\n        });\n      });\n    });\n  }\n}\n\nDetail.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-detail': Detail;\n  }\n}\n\nexport default Detail;\nexport type DetailProps = InferProps<typeof Detail>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"detail.js","sources":["../../src/detail/detail.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport detailStyle from '../styles/components/detail.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { DetailColor, DetailVariant, DetailIconPlacement } from './defines';\n\n/**\n * Detail component that can be used to show/hide additional content.\n *\n * @example\n * ```html\n * <ae-detail summary=\"Click Me\">\n *  <ae-icon name=\"plus\" slot=\"expand\"></ae-icon>\n *  <ae-icon name=\"minus\" slot=\"collapse\"></ae-icon>\n *  Detail.....\n * </ae-detail>\n */\nclass Detail extends AeicoComponent {\n  static tagName = 'detail';\n\n  protected static styles = [styleVariables, colorCSS, detailStyle];\n\n  @prop({ type: String })\n  accessor summary: string = '';\n\n  @prop({ type: String })\n  accessor variant: DetailVariant = 'filled';\n\n  @prop({ type: String })\n  accessor color: DetailColor = 'default';\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor iconPlacement: DetailIconPlacement = 'end';\n\n  private _open: boolean = false;\n\n  /** Opens the detail panel. */\n  open(): void {\n    if (this.disabled || this._open) return;\n    this._open = true;\n    this.toggleAttribute('open', true);\n    this.update();\n    this.emit('open');\n  }\n\n  /** Closes the detail panel. */\n  close(): void {\n    if (!this._open) return;\n    this._open = false;\n    this.toggleAttribute('open', false);\n    this.update();\n    this.emit('close');\n  }\n\n  /** Toggles the detail panel open/closed. */\n  toggle(): void {\n    if (this._open) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /** Returns whether the detail panel is currently open. */\n  isOpen(): boolean {\n    return this._open;\n  }\n\n  private _handleSummaryClick = (): void => {\n    this.toggle();\n  };\n\n  protected render() {\n    return html(({ div, button, span, slot }) => {\n      div({ className: 'detail', part: 'detail' }, () => {\n        button(\n          {\n            className: 'summary',\n            part: 'summary',\n            type: 'button',\n            'aria-expanded': String(this._open),\n            disabled: this.disabled || undefined,\n            '@click': this._handleSummaryClick,\n          },\n          () => {\n            slot({ name: 'summary' }, () => {\n              span({ className: 'label', textContent: this.summary });\n            });\n            slot({ name: 'expand' });\n            slot({ name: 'collapse' });\n          },\n        );\n        div({ className: 'content-outer' }, () => {\n          div(\n            {\n              className: 'content',\n              part: 'content',\n              role: 'region',\n            },\n            () => {\n              slot();\n            },\n          );\n        });\n      });\n    });\n  }\n}\n\nDetail.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-detail': Detail;\n  }\n}\n\nexport default Detail;\nexport type DetailProps = InferProps<typeof Detail>;\nexport type { DetailIconPlacement };\n"],"names":["styleVariables"],"mappings":"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"}

package/dist/chunks/dialog.cjs

@@ -111,7 +111,7 @@ __publicField(Dialog, "props", {
   header: { type: Boolean },
   closeOnOverlayClick: { type: Boolean }
 });
-__publicField(Dialog, "styles", [variables.styleVariables, style]);
+__publicField(Dialog, "styles", [variables.variables, style]);
 Dialog.register();
 exports.Dialog = Dialog;
 //# sourceMappingURL=dialog.cjs.map

package/dist/chunks/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.cjs","sources":["../../src/dialog/dialog.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport style from '../styles/components/dialog.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Dialog extends AeicoComponent {\n  static props: Props = {\n    label: { type: String },\n    width: { type: String },\n    height: { type: String },\n    modal: { type: Boolean },\n    closable: { type: Boolean },\n    header: { type: Boolean },\n    closeOnOverlayClick: { type: Boolean },\n  };\n\n  declare label?: string;\n  declare width?: string;\n  declare height?: string;\n  declare modal?: boolean;\n  declare closable?: boolean;\n  declare header?: boolean;\n  declare closeOnOverlayClick?: boolean;\n\n  protected static styles = [styleVariables, style];\n\n  private _dialogEl: HTMLDialogElement | null = null;\n  private _hasFooter = false;\n\n  protected render() {\n    return html(({ dialog, div, header, footer, span, button, slot }) => {\n      this._dialogEl = dialog(\n        {\n          '@click': this._handleDialogClick,\n          '@close': this._handleNativeClose,\n          style: {\n            width: this.width || '',\n            height: this.height || '',\n          },\n        },\n        () => {\n          // Header\n          if (this.header !== false) {\n            header({}, () => {\n              slot({ name: 'header' }, () => {\n                span({ className: 'label', textContent: this.label || '' });\n              });\n              if (this.closable !== false) {\n                button({\n                  className: 'close-btn',\n                  textContent: '×',\n                  '@click': () => this.close(),\n                });\n              }\n            });\n          }\n\n          // Body\n          div({ className: 'body' }, () => {\n            slot();\n          });\n\n          // Footer — always rendered to capture slotchange, hidden when empty\n          footer(\n            {\n              style: { display: this._hasFooter ? '' : 'none' },\n            },\n            () => {\n              slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });\n            },\n          );\n        },\n      );\n    });\n  }\n\n  private _handleDialogClick = (e: Event) => {\n    const mouseEvent = e as MouseEvent;\n    const path = mouseEvent.composedPath();\n\n    // data-close: any slotted element with [data-close] closes the dialog\n    for (const el of path) {\n      if (el instanceof Element && el.hasAttribute('data-close')) {\n        this.close();\n        return;\n      }\n      if (el === this._dialogEl) break;\n    }\n\n    // Backdrop click (modal mode only)\n    if (this.modal !== false && this.closeOnOverlayClick !== false) {\n      if (mouseEvent.target === this._dialogEl) {\n        const rect = this._dialogEl!.getBoundingClientRect();\n        const outside =\n          mouseEvent.clientX < rect.left ||\n          mouseEvent.clientX > rect.right ||\n          mouseEvent.clientY < rect.top ||\n          mouseEvent.clientY > rect.bottom;\n        if (outside) {\n          this.close();\n        }\n      }\n    }\n  };\n\n  private _handleNativeClose = () => {\n    this.emit('close', { detail: { target: this } });\n  };\n\n  private _handleFooterSlotChange = (e: Event) => {\n    const slotEl = e.target as HTMLSlotElement;\n    const hasContent = slotEl.assignedElements().length > 0;\n    if (hasContent !== this._hasFooter) {\n      this._hasFooter = hasContent;\n      this.update();\n    }\n  };\n\n  open() {\n    if (!this._dialogEl) return;\n    if (this.modal !== false) {\n      this._dialogEl.showModal();\n    } else {\n      this._dialogEl.show();\n    }\n    this.emit('open', { detail: { target: this } });\n  }\n\n  close() {\n    this._dialogEl?.close();\n    // emit('close') is handled by _handleNativeClose via the native 'close' event\n  }\n\n  isOpen(): boolean {\n    return this._dialogEl?.open ?? false;\n  }\n}\n\nDialog.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dialog': Dialog;\n  }\n}\n\nexport default Dialog;\nexport type DialogProps = InferProps<typeof Dialog>;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":"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"}
+{"version":3,"file":"dialog.cjs","sources":["../../src/dialog/dialog.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport style from '../styles/components/dialog.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Dialog extends AeicoComponent {\n  static props: Props = {\n    label: { type: String },\n    width: { type: String },\n    height: { type: String },\n    modal: { type: Boolean },\n    closable: { type: Boolean },\n    header: { type: Boolean },\n    closeOnOverlayClick: { type: Boolean },\n  };\n\n  declare label?: string;\n  declare width?: string;\n  declare height?: string;\n  declare modal?: boolean;\n  declare closable?: boolean;\n  declare header?: boolean;\n  declare closeOnOverlayClick?: boolean;\n\n  protected static styles = [styleVariables, style];\n\n  private _dialogEl: HTMLDialogElement | null = null;\n  private _hasFooter = false;\n\n  protected render() {\n    return html(({ dialog, div, header, footer, span, button, slot }) => {\n      this._dialogEl = dialog(\n        {\n          '@click': this._handleDialogClick,\n          '@close': this._handleNativeClose,\n          style: {\n            width: this.width || '',\n            height: this.height || '',\n          },\n        },\n        () => {\n          // Header\n          if (this.header !== false) {\n            header({}, () => {\n              slot({ name: 'header' }, () => {\n                span({ className: 'label', textContent: this.label || '' });\n              });\n              if (this.closable !== false) {\n                button({\n                  className: 'close-btn',\n                  textContent: '×',\n                  '@click': () => this.close(),\n                });\n              }\n            });\n          }\n\n          // Body\n          div({ className: 'body' }, () => {\n            slot();\n          });\n\n          // Footer — always rendered to capture slotchange, hidden when empty\n          footer(\n            {\n              style: { display: this._hasFooter ? '' : 'none' },\n            },\n            () => {\n              slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });\n            },\n          );\n        },\n      );\n    });\n  }\n\n  private _handleDialogClick = (e: Event) => {\n    const mouseEvent = e as MouseEvent;\n    const path = mouseEvent.composedPath();\n\n    // data-close: any slotted element with [data-close] closes the dialog\n    for (const el of path) {\n      if (el instanceof Element && el.hasAttribute('data-close')) {\n        this.close();\n        return;\n      }\n      if (el === this._dialogEl) break;\n    }\n\n    // Backdrop click (modal mode only)\n    if (this.modal !== false && this.closeOnOverlayClick !== false) {\n      if (mouseEvent.target === this._dialogEl) {\n        const rect = this._dialogEl!.getBoundingClientRect();\n        const outside =\n          mouseEvent.clientX < rect.left ||\n          mouseEvent.clientX > rect.right ||\n          mouseEvent.clientY < rect.top ||\n          mouseEvent.clientY > rect.bottom;\n        if (outside) {\n          this.close();\n        }\n      }\n    }\n  };\n\n  private _handleNativeClose = () => {\n    this.emit('close', { detail: { target: this } });\n  };\n\n  private _handleFooterSlotChange = (e: Event) => {\n    const slotEl = e.target as HTMLSlotElement;\n    const hasContent = slotEl.assignedElements().length > 0;\n    if (hasContent !== this._hasFooter) {\n      this._hasFooter = hasContent;\n      this.update();\n    }\n  };\n\n  open() {\n    if (!this._dialogEl) return;\n    if (this.modal !== false) {\n      this._dialogEl.showModal();\n    } else {\n      this._dialogEl.show();\n    }\n    this.emit('open', { detail: { target: this } });\n  }\n\n  close() {\n    this._dialogEl?.close();\n    // emit('close') is handled by _handleNativeClose via the native 'close' event\n  }\n\n  isOpen(): boolean {\n    return this._dialogEl?.open ?? false;\n  }\n}\n\nDialog.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dialog': Dialog;\n  }\n}\n\nexport default Dialog;\nexport type DialogProps = InferProps<typeof Dialog>;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":"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"}

package/dist/chunks/dialog.js

@@ -1,7 +1,7 @@
 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 style = ":host {\n  display: contents;\n}\n\ndialog {\n  display: none;\n  flex-direction: column;\n  border: none;\n  border-radius: 8px;\n  padding: 0;\n  max-width: min(90vw, 600px);\n  max-height: 90vh;\n  background: var(--surface-overlay);\n  color: var(--color-text-main);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  overflow: hidden;\n}\n\ndialog[open] {\n  display: flex;\n  animation: dialog-slide-in 0.2s ease;\n}\n\ndialog::backdrop {\n  background: var(--color-overlay);\n  animation: dialog-backdrop-in 0.2s ease;\n}\n\n@keyframes dialog-backdrop-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes dialog-slide-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n  font-size: var(--size-m, 1rem);\n  font-weight: 500;\n  margin: 0;\n  color: var(--color-text-main);\n}\n\n.close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--color-text-muted);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.close-btn:hover {\n  background: var(--border-subtle);\n  color: var(--color-text-main);\n}\n\n.body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\nfooter {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 20px;\n  border-top: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n::slotted([data-align-left]) {\n  margin-right: auto;\n}\n";
@@ -110,7 +110,7 @@ __publicField(Dialog, "props", {
   header: { type: Boolean },
   closeOnOverlayClick: { type: Boolean }
 });
-__publicField(Dialog, "styles", [styleVariables, style]);
+__publicField(Dialog, "styles", [variables, style]);
 Dialog.register();
 export {
   Dialog as D

package/dist/chunks/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../src/dialog/dialog.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport style from '../styles/components/dialog.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Dialog extends AeicoComponent {\n  static props: Props = {\n    label: { type: String },\n    width: { type: String },\n    height: { type: String },\n    modal: { type: Boolean },\n    closable: { type: Boolean },\n    header: { type: Boolean },\n    closeOnOverlayClick: { type: Boolean },\n  };\n\n  declare label?: string;\n  declare width?: string;\n  declare height?: string;\n  declare modal?: boolean;\n  declare closable?: boolean;\n  declare header?: boolean;\n  declare closeOnOverlayClick?: boolean;\n\n  protected static styles = [styleVariables, style];\n\n  private _dialogEl: HTMLDialogElement | null = null;\n  private _hasFooter = false;\n\n  protected render() {\n    return html(({ dialog, div, header, footer, span, button, slot }) => {\n      this._dialogEl = dialog(\n        {\n          '@click': this._handleDialogClick,\n          '@close': this._handleNativeClose,\n          style: {\n            width: this.width || '',\n            height: this.height || '',\n          },\n        },\n        () => {\n          // Header\n          if (this.header !== false) {\n            header({}, () => {\n              slot({ name: 'header' }, () => {\n                span({ className: 'label', textContent: this.label || '' });\n              });\n              if (this.closable !== false) {\n                button({\n                  className: 'close-btn',\n                  textContent: '×',\n                  '@click': () => this.close(),\n                });\n              }\n            });\n          }\n\n          // Body\n          div({ className: 'body' }, () => {\n            slot();\n          });\n\n          // Footer — always rendered to capture slotchange, hidden when empty\n          footer(\n            {\n              style: { display: this._hasFooter ? '' : 'none' },\n            },\n            () => {\n              slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });\n            },\n          );\n        },\n      );\n    });\n  }\n\n  private _handleDialogClick = (e: Event) => {\n    const mouseEvent = e as MouseEvent;\n    const path = mouseEvent.composedPath();\n\n    // data-close: any slotted element with [data-close] closes the dialog\n    for (const el of path) {\n      if (el instanceof Element && el.hasAttribute('data-close')) {\n        this.close();\n        return;\n      }\n      if (el === this._dialogEl) break;\n    }\n\n    // Backdrop click (modal mode only)\n    if (this.modal !== false && this.closeOnOverlayClick !== false) {\n      if (mouseEvent.target === this._dialogEl) {\n        const rect = this._dialogEl!.getBoundingClientRect();\n        const outside =\n          mouseEvent.clientX < rect.left ||\n          mouseEvent.clientX > rect.right ||\n          mouseEvent.clientY < rect.top ||\n          mouseEvent.clientY > rect.bottom;\n        if (outside) {\n          this.close();\n        }\n      }\n    }\n  };\n\n  private _handleNativeClose = () => {\n    this.emit('close', { detail: { target: this } });\n  };\n\n  private _handleFooterSlotChange = (e: Event) => {\n    const slotEl = e.target as HTMLSlotElement;\n    const hasContent = slotEl.assignedElements().length > 0;\n    if (hasContent !== this._hasFooter) {\n      this._hasFooter = hasContent;\n      this.update();\n    }\n  };\n\n  open() {\n    if (!this._dialogEl) return;\n    if (this.modal !== false) {\n      this._dialogEl.showModal();\n    } else {\n      this._dialogEl.show();\n    }\n    this.emit('open', { detail: { target: this } });\n  }\n\n  close() {\n    this._dialogEl?.close();\n    // emit('close') is handled by _handleNativeClose via the native 'close' event\n  }\n\n  isOpen(): boolean {\n    return this._dialogEl?.open ?? false;\n  }\n}\n\nDialog.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dialog': Dialog;\n  }\n}\n\nexport default Dialog;\nexport type DialogProps = InferProps<typeof Dialog>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../src/dialog/dialog.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport style from '../styles/components/dialog.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Dialog extends AeicoComponent {\n  static props: Props = {\n    label: { type: String },\n    width: { type: String },\n    height: { type: String },\n    modal: { type: Boolean },\n    closable: { type: Boolean },\n    header: { type: Boolean },\n    closeOnOverlayClick: { type: Boolean },\n  };\n\n  declare label?: string;\n  declare width?: string;\n  declare height?: string;\n  declare modal?: boolean;\n  declare closable?: boolean;\n  declare header?: boolean;\n  declare closeOnOverlayClick?: boolean;\n\n  protected static styles = [styleVariables, style];\n\n  private _dialogEl: HTMLDialogElement | null = null;\n  private _hasFooter = false;\n\n  protected render() {\n    return html(({ dialog, div, header, footer, span, button, slot }) => {\n      this._dialogEl = dialog(\n        {\n          '@click': this._handleDialogClick,\n          '@close': this._handleNativeClose,\n          style: {\n            width: this.width || '',\n            height: this.height || '',\n          },\n        },\n        () => {\n          // Header\n          if (this.header !== false) {\n            header({}, () => {\n              slot({ name: 'header' }, () => {\n                span({ className: 'label', textContent: this.label || '' });\n              });\n              if (this.closable !== false) {\n                button({\n                  className: 'close-btn',\n                  textContent: '×',\n                  '@click': () => this.close(),\n                });\n              }\n            });\n          }\n\n          // Body\n          div({ className: 'body' }, () => {\n            slot();\n          });\n\n          // Footer — always rendered to capture slotchange, hidden when empty\n          footer(\n            {\n              style: { display: this._hasFooter ? '' : 'none' },\n            },\n            () => {\n              slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });\n            },\n          );\n        },\n      );\n    });\n  }\n\n  private _handleDialogClick = (e: Event) => {\n    const mouseEvent = e as MouseEvent;\n    const path = mouseEvent.composedPath();\n\n    // data-close: any slotted element with [data-close] closes the dialog\n    for (const el of path) {\n      if (el instanceof Element && el.hasAttribute('data-close')) {\n        this.close();\n        return;\n      }\n      if (el === this._dialogEl) break;\n    }\n\n    // Backdrop click (modal mode only)\n    if (this.modal !== false && this.closeOnOverlayClick !== false) {\n      if (mouseEvent.target === this._dialogEl) {\n        const rect = this._dialogEl!.getBoundingClientRect();\n        const outside =\n          mouseEvent.clientX < rect.left ||\n          mouseEvent.clientX > rect.right ||\n          mouseEvent.clientY < rect.top ||\n          mouseEvent.clientY > rect.bottom;\n        if (outside) {\n          this.close();\n        }\n      }\n    }\n  };\n\n  private _handleNativeClose = () => {\n    this.emit('close', { detail: { target: this } });\n  };\n\n  private _handleFooterSlotChange = (e: Event) => {\n    const slotEl = e.target as HTMLSlotElement;\n    const hasContent = slotEl.assignedElements().length > 0;\n    if (hasContent !== this._hasFooter) {\n      this._hasFooter = hasContent;\n      this.update();\n    }\n  };\n\n  open() {\n    if (!this._dialogEl) return;\n    if (this.modal !== false) {\n      this._dialogEl.showModal();\n    } else {\n      this._dialogEl.show();\n    }\n    this.emit('open', { detail: { target: this } });\n  }\n\n  close() {\n    this._dialogEl?.close();\n    // emit('close') is handled by _handleNativeClose via the native 'close' event\n  }\n\n  isOpen(): boolean {\n    return this._dialogEl?.open ?? false;\n  }\n}\n\nDialog.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dialog': Dialog;\n  }\n}\n\nexport default Dialog;\nexport type DialogProps = InferProps<typeof Dialog>;\n"],"names":["styleVariables"],"mappings":"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"}

package/dist/chunks/divider.cjs

@@ -74,7 +74,7 @@ __decorateElement(_init, 4, "thickness", _thickness_dec, Divider, _thickness);
 __decorateElement(_init, 4, "color", _color_dec, Divider, _color);
 __decoratorMetadata(_init, Divider);
 __publicField(Divider, "tagName", "divider");
-__publicField(Divider, "styles", [variables.styleVariables, color.colorCSS, style]);
+__publicField(Divider, "styles", [variables.variables, color.colorCSS, style]);
 Divider.register();
 exports.Divider = Divider;
 //# sourceMappingURL=divider.cjs.map

package/dist/chunks/divider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"divider.cjs","sources":["../../src/divider/divider.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/divider.css?inline';\nimport { prop } from 'aeico';\n/**\n * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.\n * @example\n * ```html\n * <ae-divider></ae-divider>\n * <ae-divider vertical></ae-divider>\n * <ae-divider thickness=\"4px\" color=\"primary\"></ae-divider>\n * ```\n * @props\n * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).\n * - `thickness` (string): Custom thickness for the divider (e.g., \"2px\", \"0.5rem\"). If not provided, it will use the default thickness defined in CSS.\n * - `color` (string): Color variant for the divider (e.g., \"primary\", \"secondary\"). If not provided, it will use the default color defined in CSS.\n *\n * @csspart divider - The main divider element that can be styled.\n *\n * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.\n */\nclass Divider extends AeicoComponent {\n  static tagName = 'divider';\n\n  @prop({ type: Boolean })\n  accessor vertical: boolean = false;\n\n  @prop({ type: String })\n  accessor thickness: string | undefined;\n\n  @prop({ type: String })\n  accessor color: string | undefined;\n\n  protected static styles = [styleVariables, colorCSS, style];\n\n  protected render(): void {\n    if (this.thickness) {\n      this.style.setProperty('--thickness', this.thickness);\n    } else {\n      this.style.removeProperty('--thickness');\n    }\n  }\n}\n\nDivider.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-divider': Divider;\n  }\n}\n\nexport default Divider;\nexport type DividerProps = InferProps<typeof Divider>;\n"],"names":["prop","styleVariables","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,gBAAA,eAAA,IAAA,OAAA,WAAA,YAAA;AAuBA,MAAM,iBAAgB,oCAGpB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,iBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GATF,IAAe;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,GAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAIU,SAAe;AACvB,QAAI,KAAK,WAAW;AAClB,WAAK,MAAM,YAAY,eAAe,KAAK,SAAS;AAAA,IACtD,OAAO;AACL,WAAK,MAAM,eAAe,aAAa;AAAA,IACzC;AAAA,EACF;AACF;AArBA,QAAA,iBAAA,EAAA;AAIW,YAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AANT,kBAAA,OAAA,GAAS,YADT,eAHI,SAIK,SAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBANI,SAOK,UAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YATI,SAUK,MAAA;AAVX,oBAAA,OAAM,OAAA;AACJ,cADI,SACG,WAAU,SAAA;AAWjB,cAZI,SAYa,UAAS,CAACC,UAAAA,gBAAgBC,MAAAA,UAAU,KAAK,CAAA;AAW5D,QAAQ,SAAA;;"}
+{"version":3,"file":"divider.cjs","sources":["../../src/divider/divider.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/divider.css?inline';\nimport { prop } from 'aeico';\n/**\n * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.\n * @example\n * ```html\n * <ae-divider></ae-divider>\n * <ae-divider vertical></ae-divider>\n * <ae-divider thickness=\"4px\" color=\"primary\"></ae-divider>\n * ```\n * @props\n * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).\n * - `thickness` (string): Custom thickness for the divider (e.g., \"2px\", \"0.5rem\"). If not provided, it will use the default thickness defined in CSS.\n * - `color` (string): Color variant for the divider (e.g., \"primary\", \"secondary\"). If not provided, it will use the default color defined in CSS.\n *\n * @csspart divider - The main divider element that can be styled.\n *\n * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.\n */\nclass Divider extends AeicoComponent {\n  static tagName = 'divider';\n\n  @prop({ type: Boolean })\n  accessor vertical: boolean = false;\n\n  @prop({ type: String })\n  accessor thickness: string | undefined;\n\n  @prop({ type: String })\n  accessor color: string | undefined;\n\n  protected static styles = [styleVariables, colorCSS, style];\n\n  protected render(): void {\n    if (this.thickness) {\n      this.style.setProperty('--thickness', this.thickness);\n    } else {\n      this.style.removeProperty('--thickness');\n    }\n  }\n}\n\nDivider.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-divider': Divider;\n  }\n}\n\nexport default Divider;\nexport type DividerProps = InferProps<typeof Divider>;\n"],"names":["prop","styleVariables","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,gBAAA,eAAA,IAAA,OAAA,WAAA,YAAA;AAuBA,MAAM,iBAAgB,oCAGpB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,iBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GATF,IAAe;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,GAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAIU,SAAe;AACvB,QAAI,KAAK,WAAW;AAClB,WAAK,MAAM,YAAY,eAAe,KAAK,SAAS;AAAA,IACtD,OAAO;AACL,WAAK,MAAM,eAAe,aAAa;AAAA,IACzC;AAAA,EACF;AACF;AArBA,QAAA,iBAAA,EAAA;AAIW,YAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AANT,kBAAA,OAAA,GAAS,YADT,eAHI,SAIK,SAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBANI,SAOK,UAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YATI,SAUK,MAAA;AAVX,oBAAA,OAAM,OAAA;AACJ,cADI,SACG,WAAU,SAAA;AAWjB,cAZI,SAYa,UAAS,CAACC,UAAAA,WAAgBC,MAAAA,UAAU,KAAK,CAAA;AAW5D,QAAQ,SAAA;;"}

package/dist/chunks/divider.js

@@ -1,5 +1,5 @@
 import { A as AeicoComponent } from "./aeico-component.js";
-import { s as styleVariables } from "./variables.js";
+import { v as variables } from "./variables.js";
 import { c as colorCSS } from "./color.js";
 import { prop } from "aeico";
 const style = ":host {\n  display: block;\n  width: 100%;\n  height: var(--thickness, 1px);\n  flex-shrink: 0;\n\n  /* Override colorCSS default --color-border from gray to the subtle border token */\n  --color-border: var(--border-default);\n\n  background: var(--color-border);\n}\n\n:host([vertical]) {\n  display: inline-block;\n  width: var(--thickness, 1px);\n  height: 1lh;\n  vertical-align: middle;\n}\n";
@@ -73,7 +73,7 @@ __decorateElement(_init, 4, "thickness", _thickness_dec, Divider, _thickness);
 __decorateElement(_init, 4, "color", _color_dec, Divider, _color);
 __decoratorMetadata(_init, Divider);
 __publicField(Divider, "tagName", "divider");
-__publicField(Divider, "styles", [styleVariables, colorCSS, style]);
+__publicField(Divider, "styles", [variables, colorCSS, style]);
 Divider.register();
 export {
   Divider as D

package/dist/chunks/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../src/divider/divider.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/divider.css?inline';\nimport { prop } from 'aeico';\n/**\n * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.\n * @example\n * ```html\n * <ae-divider></ae-divider>\n * <ae-divider vertical></ae-divider>\n * <ae-divider thickness=\"4px\" color=\"primary\"></ae-divider>\n * ```\n * @props\n * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).\n * - `thickness` (string): Custom thickness for the divider (e.g., \"2px\", \"0.5rem\"). If not provided, it will use the default thickness defined in CSS.\n * - `color` (string): Color variant for the divider (e.g., \"primary\", \"secondary\"). If not provided, it will use the default color defined in CSS.\n *\n * @csspart divider - The main divider element that can be styled.\n *\n * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.\n */\nclass Divider extends AeicoComponent {\n  static tagName = 'divider';\n\n  @prop({ type: Boolean })\n  accessor vertical: boolean = false;\n\n  @prop({ type: String })\n  accessor thickness: string | undefined;\n\n  @prop({ type: String })\n  accessor color: string | undefined;\n\n  protected static styles = [styleVariables, colorCSS, style];\n\n  protected render(): void {\n    if (this.thickness) {\n      this.style.setProperty('--thickness', this.thickness);\n    } else {\n      this.style.removeProperty('--thickness');\n    }\n  }\n}\n\nDivider.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-divider': Divider;\n  }\n}\n\nexport default Divider;\nexport type DividerProps = InferProps<typeof Divider>;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,gBAAA,eAAA,IAAA,OAAA,WAAA,YAAA;AAuBA,MAAM,iBAAgB,qBAGpB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,iBAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GATF,IAAe;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,GAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAIU,SAAe;AACvB,QAAI,KAAK,WAAW;AAClB,WAAK,MAAM,YAAY,eAAe,KAAK,SAAS;AAAA,IACtD,OAAO;AACL,WAAK,MAAM,eAAe,aAAa;AAAA,IACzC;AAAA,EACF;AACF;AArBA,QAAA,iBAAA,EAAA;AAIW,YAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AANT,kBAAA,OAAA,GAAS,YADT,eAHI,SAIK,SAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBANI,SAOK,UAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YATI,SAUK,MAAA;AAVX,oBAAA,OAAM,OAAA;AACJ,cADI,SACG,WAAU,SAAA;AAWjB,cAZI,SAYa,UAAS,CAAC,gBAAgB,UAAU,KAAK,CAAA;AAW5D,QAAQ,SAAA;"}
+{"version":3,"file":"divider.js","sources":["../../src/divider/divider.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/divider.css?inline';\nimport { prop } from 'aeico';\n/**\n * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.\n * @example\n * ```html\n * <ae-divider></ae-divider>\n * <ae-divider vertical></ae-divider>\n * <ae-divider thickness=\"4px\" color=\"primary\"></ae-divider>\n * ```\n * @props\n * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).\n * - `thickness` (string): Custom thickness for the divider (e.g., \"2px\", \"0.5rem\"). If not provided, it will use the default thickness defined in CSS.\n * - `color` (string): Color variant for the divider (e.g., \"primary\", \"secondary\"). If not provided, it will use the default color defined in CSS.\n *\n * @csspart divider - The main divider element that can be styled.\n *\n * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.\n */\nclass Divider extends AeicoComponent {\n  static tagName = 'divider';\n\n  @prop({ type: Boolean })\n  accessor vertical: boolean = false;\n\n  @prop({ type: String })\n  accessor thickness: string | undefined;\n\n  @prop({ type: String })\n  accessor color: string | undefined;\n\n  protected static styles = [styleVariables, colorCSS, style];\n\n  protected render(): void {\n    if (this.thickness) {\n      this.style.setProperty('--thickness', this.thickness);\n    } else {\n      this.style.removeProperty('--thickness');\n    }\n  }\n}\n\nDivider.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-divider': Divider;\n  }\n}\n\nexport default Divider;\nexport type DividerProps = InferProps<typeof Divider>;\n"],"names":["styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,gBAAA,eAAA,IAAA,OAAA,WAAA,YAAA;AAuBA,MAAM,iBAAgB,qBAGpB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,iBAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GATF,IAAe;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,GAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAIU,SAAe;AACvB,QAAI,KAAK,WAAW;AAClB,WAAK,MAAM,YAAY,eAAe,KAAK,SAAS;AAAA,IACtD,OAAO;AACL,WAAK,MAAM,eAAe,aAAa;AAAA,IACzC;AAAA,EACF;AACF;AArBA,QAAA,iBAAA,EAAA;AAIW,YAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AANT,kBAAA,OAAA,GAAS,YADT,eAHI,SAIK,SAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBANI,SAOK,UAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YATI,SAUK,MAAA;AAVX,oBAAA,OAAM,OAAA;AACJ,cADI,SACG,WAAU,SAAA;AAWjB,cAZI,SAYa,UAAS,CAACA,WAAgB,UAAU,KAAK,CAAA;AAW5D,QAAQ,SAAA;"}