@wrrdev/fenix-ui 1.0.0

package/dist/components/button/button.js

@@ -0,0 +1,194 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxButton = class _FxButton extends FxElement {
+  constructor() {
+    super(...arguments);
+    this.spawnRipple = (event) => {
+      if (this.hasAttr("disabled") || this.hasAttr("loading")) return;
+      const enabled = getComputedStyle(this).getPropertyValue("--fx-effect-ripple").trim();
+      if (enabled === "0" || enabled === "false") return;
+      const btn = this.root.querySelector(".btn");
+      if (!btn) return;
+      const rect = btn.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height);
+      const ripple = document.createElement("span");
+      ripple.className = "btn__ripple";
+      ripple.style.width = ripple.style.height = `${size}px`;
+      ripple.style.left = `${event.clientX - rect.left - size / 2}px`;
+      ripple.style.top = `${event.clientY - rect.top - size / 2}px`;
+      btn.appendChild(ripple);
+      ripple.addEventListener("animationend", () => ripple.remove());
+    };
+  }
+  static get observedAttributes() {
+    return ["variant", "size", "disabled", "loading", "type", "full"];
+  }
+  /** Tamanho. Padrão: `'md'`. */
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttr("disabled", Boolean(value));
+  }
+  get loading() {
+    return this.hasAttr("loading");
+  }
+  set loading(value) {
+    this.toggleAttr("loading", Boolean(value));
+  }
+  render() {
+    const loading = this.hasAttr("loading");
+    const disabled = this.hasAttr("disabled") || loading;
+    const btnType = this.getAttr("type", "button");
+    this.setTemplate(`
+      <button class="btn" part="button" type="${btnType}">
+        <span class="btn__icon" part="icon"><slot name="icon"></slot></span>
+        <span class="btn__label" part="label"><slot></slot></span>
+        ${loading ? '<span class="btn__spinner" aria-hidden="true"></span>' : ""}
+      </button>
+    `);
+    const btn = this.root.querySelector(".btn");
+    if (!btn) return;
+    const iconSlot = btn.querySelector(".btn__icon slot");
+    const iconWrap = this.root.querySelector(".btn__icon");
+    const hasIcon = Boolean(iconSlot?.assignedNodes({ flatten: true }).some(
+      (n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? "").trim() !== ""
+    ));
+    iconWrap?.toggleAttribute("hidden", !hasIcon);
+    if (disabled) {
+      btn.setAttribute("disabled", "");
+      btn.setAttribute("aria-disabled", "true");
+    } else {
+      btn.removeAttribute("disabled");
+      btn.removeAttribute("aria-disabled");
+    }
+    if (loading) btn.setAttribute("aria-busy", "true");
+    else btn.removeAttribute("aria-busy");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("pointerdown", this.spawnRipple);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerdown", this.spawnRipple);
+  }
+};
+_FxButton.styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: var(--fx-space-sm);
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      font-weight: var(--fx-font-weight);
+      line-height: var(--fx-font-line-height);
+      padding: var(--fx-space-md) var(--fx-space-xl);
+      border-radius: var(--fx-radius-md);
+      border: 1px solid transparent;
+      color: #fff;
+      background: var(--fx-color-primary);
+      cursor: pointer;
+      user-select: none;
+      text-decoration: none;
+      transition:
+        background-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
+        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
+        transform var(--fx-motion-duration-fast) var(--fx-motion-easing),
+        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    .btn:focus-visible {
+      outline: 2px solid var(--fx-color-primary);
+      outline-offset: 2px;
+    }
+    .btn:hover { filter: brightness(0.88); }
+    .btn:active { transform: translateY(1px); }
+
+    /* Tamanhos — alturas vindas dos tokens (personalizáveis por preset) */
+    .btn { min-height: var(--fx-size-md); }
+    :host([size='sm']) .btn { padding: var(--fx-space-sm) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
+    :host([size='lg']) .btn { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
+
+    /* Full width */
+    :host([full]) .btn { width: 100%; }
+
+    /* Variantes */
+    :host([variant='secondary']) .btn { background: var(--fx-color-secondary); }
+    :host([variant='success']) .btn { background: var(--fx-color-success); }
+    :host([variant='warning']) .btn { background: var(--fx-color-warning); }
+    :host([variant='danger']) .btn { background: var(--fx-color-danger); }
+    :host([variant='ghost']) .btn { background: transparent; color: var(--fx-text-default); }
+    :host([variant='ghost']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }
+    :host([variant='outline']) .btn { background: transparent; color: var(--fx-color-primary); border-color: var(--fx-color-primary); }
+    :host([variant='outline']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }
+
+    /* Ícone e spinner */
+    .btn__icon { display: inline-flex; }
+    .btn__icon[hidden] { display: none; }
+    .btn__label { display: inline-flex; align-items: center; justify-content: center; }
+    .btn[hidden] { display: none; }
+    .btn__spinner {
+      width: 1em;
+      height: 1em;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: var(--fx-radius-full);
+      animation: fx-spin var(--fx-motion-duration-normal) linear infinite;
+    }
+    @keyframes fx-spin { to { transform: rotate(360deg); } }
+
+    /* Estados */
+    :host([disabled]) .btn,
+    :host([loading]) .btn {
+      opacity: 0.55;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    /* Efeito ripple (). Desative com effect.ripple: '0' no preset. */
+    .btn {
+      position: relative;
+      overflow: hidden;
+    }
+    .btn__ripple {
+      position: absolute;
+      border-radius: var(--fx-radius-full);
+      background: currentColor;
+      opacity: 0.28;
+      transform: scale(0);
+      animation: fx-ripple 600ms var(--fx-motion-easing) forwards;
+      pointer-events: none;
+    }
+    @keyframes fx-ripple {
+      to {
+        transform: scale(2.6);
+        opacity: 0;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .btn__ripple { display: none; }
+    }
+  `;
+let FxButton = _FxButton;
+function defineFxButton() {
+  return defineElement("fx-button", FxButton);
+}
+export {
+  FxButton,
+  defineFxButton
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-button> — Componente de ação (piloto).\n *\n * Atributos: variant, size, disabled, loading, type, full.\n * Slots: default (rótulo), `icon` (ícone opcional).\n * Evento: `click` nativo atravessa o Shadow DOM (composed) — ouça no host.\n */\nexport class FxButton extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n    }\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      gap: var(--fx-space-sm);\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      font-weight: var(--fx-font-weight);\n      line-height: var(--fx-font-line-height);\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-radius: var(--fx-radius-md);\n      border: 1px solid transparent;\n      color: #fff;\n      background: var(--fx-color-primary);\n      cursor: pointer;\n      user-select: none;\n      text-decoration: none;\n      transition:\n        background-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        transform var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .btn:focus-visible {\n      outline: 2px solid var(--fx-color-primary);\n      outline-offset: 2px;\n    }\n    .btn:hover { filter: brightness(0.88); }\n    .btn:active { transform: translateY(1px); }\n\n    /* Tamanhos — alturas vindas dos tokens (personalizáveis por preset) */\n    .btn { min-height: var(--fx-size-md); }\n    :host([size='sm']) .btn { padding: var(--fx-space-sm) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n    :host([size='lg']) .btn { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n\n    /* Full width */\n    :host([full]) .btn { width: 100%; }\n\n    /* Variantes */\n    :host([variant='secondary']) .btn { background: var(--fx-color-secondary); }\n    :host([variant='success']) .btn { background: var(--fx-color-success); }\n    :host([variant='warning']) .btn { background: var(--fx-color-warning); }\n    :host([variant='danger']) .btn { background: var(--fx-color-danger); }\n    :host([variant='ghost']) .btn { background: transparent; color: var(--fx-text-default); }\n    :host([variant='ghost']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }\n    :host([variant='outline']) .btn { background: transparent; color: var(--fx-color-primary); border-color: var(--fx-color-primary); }\n    :host([variant='outline']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }\n\n    /* Ícone e spinner */\n    .btn__icon { display: inline-flex; }\n    .btn__icon[hidden] { display: none; }\n    .btn__label { display: inline-flex; align-items: center; justify-content: center; }\n    .btn[hidden] { display: none; }\n    .btn__spinner {\n      width: 1em;\n      height: 1em;\n      border: 2px solid currentColor;\n      border-top-color: transparent;\n      border-radius: var(--fx-radius-full);\n      animation: fx-spin var(--fx-motion-duration-normal) linear infinite;\n    }\n    @keyframes fx-spin { to { transform: rotate(360deg); } }\n\n    /* Estados */\n    :host([disabled]) .btn,\n    :host([loading]) .btn {\n      opacity: 0.55;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    /* Efeito ripple (). Desative com effect.ripple: '0' no preset. */\n    .btn {\n      position: relative;\n      overflow: hidden;\n    }\n    .btn__ripple {\n      position: absolute;\n      border-radius: var(--fx-radius-full);\n      background: currentColor;\n      opacity: 0.28;\n      transform: scale(0);\n      animation: fx-ripple 600ms var(--fx-motion-easing) forwards;\n      pointer-events: none;\n    }\n    @keyframes fx-ripple {\n      to {\n        transform: scale(2.6);\n        opacity: 0;\n      }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .btn__ripple { display: none; }\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'size', 'disabled', 'loading', 'type', 'full'];\n  }\n\n  /** Tamanho. Padrão: `'md'`. */\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(value: string) {\n    this.setAttribute('size', value);\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  get loading(): boolean {\n    return this.hasAttr('loading');\n  }\n  set loading(value: boolean) {\n    this.toggleAttr('loading', Boolean(value));\n  }\n\n  protected override render(): void {\n    const loading = this.hasAttr('loading');\n    const disabled = this.hasAttr('disabled') || loading;\n    const btnType = this.getAttr('type', 'button');\n\n    this.setTemplate(`\n      <button class=\"btn\" part=\"button\" type=\"${btnType}\">\n        <span class=\"btn__icon\" part=\"icon\"><slot name=\"icon\"></slot></span>\n        <span class=\"btn__label\" part=\"label\"><slot></slot></span>\n        ${loading ? '<span class=\"btn__spinner\" aria-hidden=\"true\"></span>' : ''}\n      </button>\n    `);\n\n    const btn = this.root.querySelector<HTMLButtonElement>('.btn');\n    if (!btn) return;\n\n    // Esconde o container do ícone quando o slot está vazio,\n    // evitando espaço fantasma do `gap` que descentraliza o rótulo.\n    const iconSlot = btn.querySelector<HTMLSlotElement>('.btn__icon slot');\n    const iconWrap = this.root.querySelector<HTMLElement>('.btn__icon');\n    const hasIcon = Boolean(iconSlot?.assignedNodes({ flatten: true }).some((n) =>\n      n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? '').trim() !== '',\n    ));\n    iconWrap?.toggleAttribute('hidden', !hasIcon);\n    if (disabled) {\n      btn.setAttribute('disabled', '');\n      btn.setAttribute('aria-disabled', 'true');\n    } else {\n      btn.removeAttribute('disabled');\n      btn.removeAttribute('aria-disabled');\n    }\n    if (loading) btn.setAttribute('aria-busy', 'true');\n    else btn.removeAttribute('aria-busy');\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerdown', this.spawnRipple);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerdown', this.spawnRipple);\n  }\n\n  /**\n   * Efeito ripple : cria um círculo que expande do ponto\n   * de clique e desaparece. Respeita o token `effect.ripple` ('0' desativa)\n   * e `prefers-reduced-motion` (via CSS).\n   */\n  private spawnRipple = (event: PointerEvent): void => {\n    if (this.hasAttr('disabled') || this.hasAttr('loading')) return;\n    const enabled = getComputedStyle(this)\n      .getPropertyValue('--fx-effect-ripple')\n      .trim();\n    if (enabled === '0' || enabled === 'false') return;\n\n    const btn = this.root.querySelector<HTMLElement>('.btn');\n    if (!btn) return;\n\n    const rect = btn.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height);\n    const ripple = document.createElement('span');\n    ripple.className = 'btn__ripple';\n    ripple.style.width = ripple.style.height = `${size}px`;\n    ripple.style.left = `${event.clientX - rect.left - size / 2}px`;\n    ripple.style.top = `${event.clientY - rect.top - size / 2}px`;\n    btn.appendChild(ripple);\n    ripple.addEventListener('animationend', () => ripple.remove());\n  };\n}\n\nexport function defineFxButton(): typeof FxButton {\n  return defineElement('fx-button', FxButton);\n}"],"names":[],"mappings":"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"}

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { FxButton } from './button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,7 @@
+import { defineFxButton } from "./button.js";
+import { FxButton } from "./button.js";
+defineFxButton();
+export {
+  FxButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/button/index.ts"],"sourcesContent":["import { defineFxButton } from './button';\n\n// Reexporta a classe para uso programático (ex.: instanceof, herança).\nexport { FxButton } from './button';\n\n// Auto-registro: basta importar o subpath `@wrrdev/fenix-ui/button`\n// para que o componente seja definido no CustomElementRegistry.\ndefineFxButton();"],"names":[],"mappings":";;AAOA,eAAA;"}

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,39 @@
+import { FxElement } from '../../core/base';
+export declare class FxCalendar extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    private view;
+    private cursor;
+    /** Período em construção (chaves numéricas). */
+    private pickStart;
+    private pickEnd;
+    /** Modo de seleção: 'single' | 'range' | 'multiple'. */
+    get mode(): 'single' | 'range' | 'multiple';
+    set mode(m: 'single' | 'range' | 'multiple');
+    get range(): boolean;
+    set range(value: boolean);
+    /** Datas selecionadas no modo multiple (CSV no atributo). */
+    get values(): string[];
+    set values(list: string[]);
+    get value(): string;
+    set value(v: string);
+    private bounds;
+    private locale;
+    private fmt;
+    private dayDisabled;
+    private monthDisabled;
+    private yearDisabled;
+    private dayKeyOf;
+    private keyToDate;
+    private iso;
+    /** Seleção atual para pintura (chaves). */
+    private selection;
+    private emit;
+    private pickDay;
+    private navigate;
+    protected render(): void;
+    /** Grade de dias com preenchimento do mês anterior. */
+    private daysHtml;
+}
+export declare function defineFxCalendar(): typeof FxCalendar;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAyC5C,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAkFpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,OAAO,CAAC,IAAI,CAAgB;IAC5B,OAAO,CAAC,MAAM,CAA6D;IAC3E,gDAAgD;IAChD,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,OAAO,CAAuB;IAEtC,wDAAwD;IACxD,IAAI,IAAI,IAAI,QAAQ,GAAG,OAAO,GAAG,UAAU,CAI1C;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,EAE1C;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED,6DAA6D;IAC7D,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAElB;IAED,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,GAAG;IAQX,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,GAAG;IAMX,2CAA2C;IAC3C,OAAO,CAAC,SAAS;IAuBjB,OAAO,CAAC,IAAI;IAkBZ,OAAO,CAAC,OAAO;IA2Bf,OAAO,CAAC,QAAQ;cAYG,MAAM,IAAI,IAAI;IAiFjC,uDAAuD;IACvD,OAAO,CAAC,QAAQ;CAuBjB;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}

package/dist/components/calendar/calendar.js

@@ -0,0 +1,346 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const key = (y, m1, d) => y * 1e4 + m1 * 100 + d;
+function parseBound(raw) {
+  const m = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/.exec(raw.trim());
+  if (!m) return null;
+  const y = +m[1];
+  const m1 = m[2] ? +m[2] : 1;
+  const d = m[3] ? +m[3] : null;
+  if (d !== null) return { lo: key(y, m1, d), hi: key(y, m1, d) };
+  if (m[2]) return { lo: key(y, m1, 1), hi: key(y, m1, 31) };
+  return { lo: key(y, 1, 1), hi: key(y, 12, 31) };
+}
+const _FxCalendar = class _FxCalendar extends FxElement {
+  constructor() {
+    super(...arguments);
+    this.view = "days";
+    this.cursor = { y: (/* @__PURE__ */ new Date()).getFullYear(), m: (/* @__PURE__ */ new Date()).getMonth() };
+    this.pickStart = null;
+    this.pickEnd = null;
+  }
+  static get observedAttributes() {
+    return ["value", "start", "end", "min", "max", "range", "mode", "values", "locale", "disabled"];
+  }
+  /** Modo de seleção: 'single' | 'range' | 'multiple'. */
+  get mode() {
+    const m = this.getAttr("mode");
+    if (m === "range" || m === "multiple") return m;
+    return this.hasAttr("range") ? "range" : "single";
+  }
+  set mode(m) {
+    this.setAttribute("mode", m);
+  }
+  get range() {
+    return this.mode === "range";
+  }
+  set range(value) {
+    this.toggleAttr("range", Boolean(value));
+  }
+  /** Datas selecionadas no modo multiple (CSV no atributo). */
+  get values() {
+    const csv = this.getAttr("values");
+    return csv ? csv.split(",").map((v) => v.trim()).filter(Boolean) : [];
+  }
+  set values(list) {
+    this.setAttribute("values", list.join(","));
+  }
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  bounds() {
+    return {
+      min: parseBound(this.getAttr("min", "")),
+      max: parseBound(this.getAttr("max", ""))
+    };
+  }
+  locale() {
+    return this.getAttr("locale", "pt-BR");
+  }
+  fmt(opts, d) {
+    try {
+      return new Intl.DateTimeFormat(this.locale(), opts).format(d);
+    } catch {
+      return new Intl.DateTimeFormat("pt-BR", opts).format(d);
+    }
+  }
+  dayDisabled(y, m, d) {
+    const { min, max } = this.bounds();
+    const k = key(y, m + 1, d);
+    return min !== null && k < min.lo || max !== null && k > max.hi;
+  }
+  monthDisabled(y, m1) {
+    const { min, max } = this.bounds();
+    const lo = key(y, m1, 1);
+    const hi = key(y, m1, 31);
+    return min !== null && hi < min.lo || max !== null && lo > max.hi;
+  }
+  yearDisabled(y) {
+    const { min, max } = this.bounds();
+    const lo = key(y, 1, 1);
+    const hi = key(y, 12, 31);
+    return min !== null && hi < min.lo || max !== null && lo > max.hi;
+  }
+  dayKeyOf(date) {
+    return key(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  }
+  keyToDate(k) {
+    return new Date(Math.floor(k / 1e4), Math.floor(k / 100) % 100 - 1, k % 100);
+  }
+  iso(k) {
+    const d = this.keyToDate(k);
+    const p = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+  }
+  /** Seleção atual para pintura (chaves). */
+  selection() {
+    const multi = new Set(this.values.map((iso) => parseBound(iso)?.lo ?? 0).filter(Boolean));
+    if (this.mode === "range") {
+      let s = this.pickStart;
+      let e = this.pickEnd;
+      const attrS = parseBound(this.getAttr("start", ""));
+      const attrE = parseBound(this.getAttr("end", ""));
+      if (s === null && attrS) s = attrS.lo;
+      if (e === null && attrE) e = attrE.lo;
+      return { start: s, end: e, single: null, multi };
+    }
+    if (this.mode === "multiple") {
+      return { start: null, end: null, single: null, multi };
+    }
+    const v = parseBound(this.getAttr("value", ""));
+    return { start: null, end: null, single: v ? v.lo : null, multi };
+  }
+  emit() {
+    if (this.mode === "range") {
+      const detail = {
+        start: this.pickStart !== null ? this.iso(this.pickStart) : this.getAttr("start", ""),
+        end: this.pickEnd !== null ? this.iso(this.pickEnd) : this.getAttr("end", "")
+      };
+      this.setAttribute("start", detail.start);
+      this.setAttribute("end", detail.end);
+      this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail }));
+    } else if (this.mode === "multiple") {
+      const values = this.values;
+      this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { values } }));
+    } else {
+      const value = this.getAttr("value");
+      this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { value } }));
+    }
+  }
+  pickDay(k) {
+    if (this.mode === "range") {
+      if (this.pickStart === null || this.pickEnd !== null) {
+        this.pickStart = k;
+        this.pickEnd = null;
+        this.setAttribute("start", this.iso(k));
+        this.removeAttribute("end");
+        this.render();
+        return;
+      }
+      if (k < this.pickStart) [this.pickStart, this.pickEnd] = [k, this.pickStart];
+      else this.pickEnd = k;
+      this.emit();
+    } else if (this.mode === "multiple") {
+      const set = new Set(this.values);
+      const iso = this.iso(k);
+      if (set.has(iso)) set.delete(iso);
+      else set.add(iso);
+      this.values = [...set].sort();
+      this.emit();
+    } else {
+      this.value = this.iso(k);
+      this.emit();
+    }
+    this.render();
+  }
+  navigate(dir) {
+    if (this.view === "days") {
+      const d = new Date(this.cursor.y, this.cursor.m + dir, 1);
+      this.cursor = { y: d.getFullYear(), m: d.getMonth() };
+    } else if (this.view === "months") {
+      this.cursor.y += dir;
+    } else {
+      this.cursor.y += dir * 12;
+    }
+    this.render();
+  }
+  render() {
+    const todayK = this.dayKeyOf(/* @__PURE__ */ new Date());
+    const sel = this.selection();
+    const loc = this.locale();
+    const titles = {
+      days: this.fmt({ month: "long", year: "numeric" }, new Date(this.cursor.y, this.cursor.m, 1)),
+      months: String(this.cursor.y),
+      years: `${Math.floor(this.cursor.y / 12) * 12} – ${Math.floor(this.cursor.y / 12) * 12 + 11}`
+    };
+    let cells = "";
+    if (this.view === "days") {
+      const wds = [...Array(7)].map(
+        (_, i) => this.fmt({ weekday: "short" }, new Date(2024, 8, 1 + i))
+        // 01/09/2024 foi domingo
+      );
+      cells = wds.map((w) => `<span class="wd">${w}</span>`).join("") + this.daysHtml(todayK, sel, loc);
+    } else if (this.view === "months") {
+      cells = [...Array(12)].map((_, i) => {
+        const dis = this.monthDisabled(this.cursor.y, i + 1);
+        return `<button type="button" class="cell" data-month="${i}" ${dis ? "disabled" : ""}>${this.fmt({ month: "short" }, new Date(this.cursor.y, i, 1))}</button>`;
+      }).join("");
+    } else {
+      const base = Math.floor(this.cursor.y / 12) * 12;
+      cells = [...Array(12)].map((_, i) => {
+        const y = base + i;
+        const dis = this.yearDisabled(y);
+        return `<button type="button" class="cell" data-year="${y}" ${dis ? "disabled" : ""}>${y}</button>`;
+      }).join("");
+    }
+    const titleAction = this.view === "days" ? `data-goto="months"` : this.view === "months" ? `data-goto="years"` : "";
+    this.setTemplate(`
+      <div class="head">
+        <button type="button" class="nav" data-nav="-1" aria-label="Anterior">‹</button>
+        <button type="button" class="title" part="title" ${titleAction}>${titles[this.view]}</button>
+        <button type="button" class="nav" data-nav="1" aria-label="Próximo">›</button>
+      </div>
+      <div class="grid ${this.view}">${cells}</div>
+    `);
+    this.root.querySelectorAll("[data-nav]").forEach(
+      (b) => b.addEventListener("click", () => this.navigate(Number(b.dataset.nav)))
+    );
+    const gotoBtn = this.root.querySelector("[data-goto]");
+    gotoBtn?.addEventListener("click", () => {
+      this.view = gotoBtn.dataset.goto;
+      this.render();
+    });
+    this.root.querySelectorAll("[data-day]").forEach(
+      (b) => b.addEventListener("click", () => this.pickDay(Number(b.dataset.day)))
+    );
+    this.root.querySelectorAll("[data-month]").forEach(
+      (b) => b.addEventListener("click", () => {
+        this.cursor.m = Number(b.dataset.month);
+        this.view = "days";
+        this.render();
+      })
+    );
+    this.root.querySelectorAll("[data-year]").forEach(
+      (b) => b.addEventListener("click", () => {
+        this.cursor.y = Number(b.dataset.year);
+        this.view = "months";
+        this.render();
+      })
+    );
+  }
+  /** Grade de dias com preenchimento do mês anterior. */
+  daysHtml(todayK, sel, _loc) {
+    const { y, m } = this.cursor;
+    const first = new Date(y, m, 1).getDay();
+    const total = new Date(y, m + 1, 0).getDate();
+    const prevTotal = new Date(y, m, 0).getDate();
+    let html = "";
+    for (let i = first - 1; i >= 0; i--) {
+      html += `<span class="cell muted">${prevTotal - i}</span>`;
+    }
+    for (let d = 1; d <= total; d++) {
+      const k = key(y, m + 1, d);
+      const isSel = sel.single === k || sel.start === k || sel.end === k || sel.multi.has(k);
+      const inRange = sel.start !== null && sel.end !== null && k > sel.start && k < sel.end;
+      const cls = ["cell", isSel ? "sel" : "", inRange ? "in-range" : "", k === todayK ? "today" : ""].filter(Boolean).join(" ");
+      html += `<button type="button" class="${cls}" data-day="${k}" ${this.dayDisabled(y, m, d) ? "disabled" : ""}>${d}</button>`;
+    }
+    return html;
+  }
+};
+_FxCalendar.styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      color: var(--fx-text-default);
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      box-shadow: var(--fx-shadow-sm);
+      padding: var(--fx-space-sm);
+      user-select: none;
+    }
+    :host([disabled]) { opacity: 0.55; pointer-events: none; }
+    .head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--fx-space-xs);
+      margin-bottom: var(--fx-space-xs);
+    }
+    .nav,
+    .title {
+      border: none;
+      background: none;
+      color: var(--fx-text-default);
+      cursor: pointer;
+      font: inherit;
+      border-radius: var(--fx-radius-sm);
+      padding: var(--fx-space-3xs, 4px) var(--fx-space-xs);
+    }
+    .nav:hover, .title:hover { background: var(--fx-surface-surface-hover); }
+    .title { font-weight: var(--fx-font-weight); text-transform: capitalize; flex: 1; }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(7, 34px);
+      gap: 2px;
+    }
+    .grid.months, .grid.years { grid-template-columns: repeat(4, minmax(52px, 1fr)); }
+    .wd {
+      text-align: center;
+      color: var(--fx-text-muted);
+      font-size: calc(var(--fx-font-size) - 2px);
+      padding: var(--fx-space-3xs, 4px) 0;
+      text-transform: capitalize;
+    }
+    .cell {
+      position: relative;
+      border: none;
+      background: none;
+      font: inherit;
+      color: var(--fx-text-default);
+      height: 32px;
+      border-radius: var(--fx-radius-sm);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .cell:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }
+    .cell.muted { color: var(--fx-text-disabled); }
+    .cell.today::after {
+      content: '';
+      position: absolute;
+      bottom: 3px;
+      width: 4px;
+      height: 4px;
+      border-radius: var(--fx-radius-full);
+      background: var(--fx-color-primary);
+    }
+    .cell.sel {
+      background: var(--fx-color-primary);
+      color: #fff;
+      font-weight: var(--fx-font-weight);
+    }
+    .cell.sel::after { background: #fff; }
+    .cell.in-range {
+      background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);
+      border-radius: 0;
+    }
+    .grid.months .cell, .grid.years .cell { height: 40px; }
+    .cell[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
+  `;
+let FxCalendar = _FxCalendar;
+function defineFxCalendar() {
+  return defineElement("fx-calendar", FxCalendar);
+}
+export {
+  FxCalendar,
+  defineFxCalendar
+};
+//# sourceMappingURL=calendar.js.map