@wrrdev/fenix-ui 1.0.0

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-pagination> — Paginação standalone.\n *\n * Atributos: page (atual), total (itens), rows (por página), rows-options,\n * position (left|center|right).\n * Evento: `page-change` (composed, detail: { page, rows }).\n */\nexport class FxPagination extends FxElement {\n  static override styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      color: var(--fx-text-default);\n    }\n    :host([position='center']) { justify-content: center; }\n    :host([position='right']) { justify-content: flex-end; }\n    .nav {\n      min-width: var(--fx-size-sm);\n      height: var(--fx-size-sm);\n      border: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      color: var(--fx-text-default);\n      font-family: inherit;\n      font-size: calc(var(--fx-font-size) - 2px);\n      border-radius: var(--fx-radius-sm);\n      cursor: pointer;\n      padding: 0 var(--fx-space-sm);\n      transition:\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .nav:hover:not([disabled]) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }\n    .nav[disabled] { opacity: 0.5; cursor: not-allowed; }\n    .nav.active {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n      font-weight: 600;\n    }\n    .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }\n    select.nav { cursor: pointer; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['page', 'total', 'rows', 'rows-options', 'position'];\n  }\n\n  get page(): number { return Number(this.getAttr('page', '1')) || 1; }\n  set page(v: number) { this.setAttribute('page', String(v)); }\n  get total(): number { return Number(this.getAttr('total', '0')) || 0; }\n  set total(v: number) { this.setAttribute('total', String(v)); }\n  get rows(): number { return Number(this.getAttr('rows', '10')) || 10; }\n  set rows(v: number) { this.setAttribute('rows', String(v)); }\n\n  private get pages(): number {\n    return Math.max(1, Math.ceil(this.total / this.rows));\n  }\n\n  protected override render(): void {\n    const pages = this.pages;\n    const current = Math.min(Math.max(1, this.page), pages);\n    const opts = (this.getAttr('rows-options', '5,10,20,50') || '').split(',').map((s) => s.trim()).filter(Boolean);\n\n    // Janela de páginas: mostra até 5 com elipses simplificada\n    const window_: number[] = [];\n    for (let p = Math.max(1, current - 2); p <= Math.min(pages, current + 2); p++) window_.push(p);\n\n    const from = total0(current, this.rows);\n    const to = Math.min(current * this.rows, this.total);\n\n    this.setTemplate(`\n      <span class=\"info\">${this.total ? `${from}-${to} de ${this.total}` : '0 itens'}</span>\n      <button type=\"button\" class=\"nav\" part=\"prev\" data-go=\"${current - 1}\" ${current <= 1 ? 'disabled' : ''}>‹</button>\n      ${window_[0] !== 1 && pages > 5 ? `<button type=\"button\" class=\"nav\" data-go=\"1\">1</button>` : ''}\n      ${window_.map((p) => `<button type=\"button\" class=\"nav ${p === current ? 'active' : ''}\" data-go=\"${p}\">${p}</button>`).join('')}\n      ${window_[window_.length - 1] !== pages && pages > 5 ? `<button type=\"button\" class=\"nav\" data-go=\"${pages}\">${pages}</button>` : ''}\n      <button type=\"button\" class=\"nav\" part=\"next\" data-go=\"${current + 1}\" ${current >= pages ? 'disabled' : ''}>›</button>\n      ${opts.length ? `\n        <select class=\"nav\" part=\"rows\" aria-label=\"Itens por página\">\n          ${opts.map((o) => `<option value=\"${o}\" ${Number(o) === this.rows ? 'selected' : ''}>${o}</option>`).join('')}\n        </select>` : ''}\n    `);\n\n    function total0(page: number, rows: number): number {\n      return (page - 1) * rows + 1;\n    }\n\n    this.root.querySelectorAll<HTMLButtonElement>('.nav[data-go]').forEach((btn) => {\n      btn.addEventListener('click', () => {\n        const target = Number(btn.dataset.go);\n        if (target >= 1 && target <= pages && target !== current) {\n          this.page = target;\n          this.emit();\n        }\n      });\n    });\n    const sel = this.root.querySelector<HTMLSelectElement>('select.nav');\n    sel?.addEventListener('change', () => {\n      this.rows = Number(sel.value);\n      this.page = 1;\n      this.emit();\n    });\n  }\n\n  private emit(): void {\n    this.dispatchEvent(new CustomEvent('page-change', {\n      bubbles: true, composed: true,\n      detail: { page: this.page, rows: this.rows },\n    }));\n  }\n}\n\nexport function defineFxPagination(): typeof FxPagination {\n  return defineElement('fx-pagination', FxPagination);\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { FxProgress } from './progress';
+export { FxProgress };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-progress': FxProgress;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAoB,MAAM,YAAY,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,CAAC;AAKtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/progress/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/progress/index.ts"],"sourcesContent":["import { FxProgress, defineFxProgress } from './progress';\n\nexport { FxProgress };\n\n\ndefineFxProgress();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-progress': FxProgress;\n  }\n}\n\r\n\r\n"],"names":[],"mappings":";;AAKA,iBAAA;"}

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,18 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-progress> — Indicador de progresso determinado/indeterminado.
+ *
+ * Atributos: value (0-100), indeterminate, variant (primary|success|warning|danger),
+ * label (mostra %), size (sm|md|lg).
+ * Evento: `complete` quando chega a 100.
+ */
+export declare class FxProgress extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get value(): number;
+    set value(v: number);
+    protected render(): void;
+    private _done;
+}
+export declare function defineFxProgress(): typeof FxProgress;
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAkDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,KAAK,IAAI,MAAM,CAAoD;IACvE,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAwE;cAExE,MAAM,IAAI,IAAI;IAwBjC,OAAO,CAAC,KAAK,CAAS;CACvB;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}

package/dist/components/progress/progress.js

@@ -0,0 +1,99 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxProgress = class _FxProgress extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._done = false;
+  }
+  static get observedAttributes() {
+    return ["value", "indeterminate", "variant", "label", "hide-label", "size"];
+  }
+  get value() {
+    return Number(this.getAttr("value", "0")) || 0;
+  }
+  set value(v) {
+    this.setAttribute("value", String(Math.min(100, Math.max(0, v))));
+  }
+  render() {
+    const pct = Math.min(100, Math.max(0, this.value));
+    const indeterminate = this.hasAttr("indeterminate");
+    const labelText = this.getAttr("label");
+    const showPct = !indeterminate && !this.hasAttr("hide-label");
+    this.setTemplate(`
+      ${labelText ? `<div class="caption" part="caption">${labelText}</div>` : ""}
+      <div class="row">
+        <div class="track" part="track" role="progressbar"
+          aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100">
+          <div class="bar" part="bar" style="width: ${indeterminate ? "40%" : `${pct}%`}"></div>
+        </div>
+        ${showPct ? `<span class="pct">${pct}%</span>` : ""}
+      </div>
+    `);
+    if (!this._done && !this.hasAttr("indeterminate") && pct >= 100) {
+      this._done = true;
+      this.dispatchEvent(new CustomEvent("complete", { bubbles: true, composed: true }));
+    }
+    if (pct < 100) this._done = false;
+  }
+};
+_FxProgress.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      --_color: var(--fx-color-primary);
+    }
+    :host([variant='success']) { --_color: var(--fx-color-success); }
+    :host([variant='warning']) { --_color: var(--fx-color-warning); }
+    :host([variant='danger']) { --_color: var(--fx-color-danger); }
+    .row {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-md);
+    }
+    .track {
+      flex: 1;
+      height: 8px;
+      background: var(--fx-surface-surface-hover);
+      border-radius: var(--fx-radius-full);
+      overflow: hidden;
+    }
+    :host([size='sm']) .track { height: 4px; }
+    :host([size='lg']) .track { height: 12px; }
+    .bar {
+      height: 100%;
+      width: 0%;
+      background: var(--_color);
+      border-radius: var(--fx-radius-full);
+      transition: width var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    :host([indeterminate]) .bar {
+      width: 40%;
+      animation: slide 1.2s ease-in-out infinite;
+    }
+    @keyframes slide {
+      from { transform: translateX(-100%); }
+      to { transform: translateX(350%); }
+    }
+    .pct {
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-default);
+      font-weight: 600;
+      min-width: 34px;
+      text-align: right;
+    }
+    .caption {
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-muted);
+      margin-bottom: var(--fx-space-xs);
+    }
+  `;
+let FxProgress = _FxProgress;
+function defineFxProgress() {
+  return defineElement("fx-progress", FxProgress);
+}
+export {
+  FxProgress,
+  defineFxProgress
+};
+//# sourceMappingURL=progress.js.map

package/dist/components/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sources":["../../../src/components/progress/progress.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-progress> — Indicador de progresso determinado/indeterminado.\n *\n * Atributos: value (0-100), indeterminate, variant (primary|success|warning|danger),\n * label (mostra %), size (sm|md|lg).\n * Evento: `complete` quando chega a 100.\n */\nexport class FxProgress extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      --_color: var(--fx-color-primary);\n    }\n    :host([variant='success']) { --_color: var(--fx-color-success); }\n    :host([variant='warning']) { --_color: var(--fx-color-warning); }\n    :host([variant='danger']) { --_color: var(--fx-color-danger); }\n    .row {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-md);\n    }\n    .track {\n      flex: 1;\n      height: 8px;\n      background: var(--fx-surface-surface-hover);\n      border-radius: var(--fx-radius-full);\n      overflow: hidden;\n    }\n    :host([size='sm']) .track { height: 4px; }\n    :host([size='lg']) .track { height: 12px; }\n    .bar {\n      height: 100%;\n      width: 0%;\n      background: var(--_color);\n      border-radius: var(--fx-radius-full);\n      transition: width var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([indeterminate]) .bar {\n      width: 40%;\n      animation: slide 1.2s ease-in-out infinite;\n    }\n    @keyframes slide {\n      from { transform: translateX(-100%); }\n      to { transform: translateX(350%); }\n    }\n    .pct {\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-default);\n      font-weight: 600;\n      min-width: 34px;\n      text-align: right;\n    }\n    .caption {\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-muted);\n      margin-bottom: var(--fx-space-xs);\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['value', 'indeterminate', 'variant', 'label', 'hide-label', 'size'];\n  }\n\n  get value(): number { return Number(this.getAttr('value', '0')) || 0; }\n  set value(v: number) { this.setAttribute('value', String(Math.min(100, Math.max(0, v)))); }\n\n  protected override render(): void {\n    const pct = Math.min(100, Math.max(0, this.value));\n    const indeterminate = this.hasAttr('indeterminate');\n    const labelText = this.getAttr('label');\n    const showPct = !indeterminate && !this.hasAttr('hide-label');\n\n    this.setTemplate(`\n      ${labelText ? `<div class=\"caption\" part=\"caption\">${labelText}</div>` : ''}\n      <div class=\"row\">\n        <div class=\"track\" part=\"track\" role=\"progressbar\"\n          aria-valuenow=\"${pct}\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n          <div class=\"bar\" part=\"bar\" style=\"width: ${indeterminate ? '40%' : `${pct}%`}\"></div>\n        </div>\n        ${showPct ? `<span class=\"pct\">${pct}%</span>` : ''}\n      </div>\n    `);\n\n    if (!this._done && !this.hasAttr('indeterminate') && pct >= 100) {\n      this._done = true;\n      this.dispatchEvent(new CustomEvent('complete', { bubbles: true, composed: true }));\n    }\n    if (pct < 100) this._done = false;\n  }\n\n  private _done = false;\n}\n\nexport function defineFxProgress(): typeof FxProgress {\n  return defineElement('fx-progress', FxProgress);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAoFL,SAAQ,QAAQ;AAAA,EAAA;AAAA,EA/BhB,WAAoB,qBAA+B;AACjD,WAAO,CAAC,SAAS,iBAAiB,WAAW,SAAS,cAAc,MAAM;AAAA,EAC5E;AAAA,EAEA,IAAI,QAAgB;AAAE,WAAO,OAAO,KAAK,QAAQ,SAAS,GAAG,CAAC,KAAK;AAAA,EAAG;AAAA,EACtE,IAAI,MAAM,GAAW;AAAE,SAAK,aAAa,SAAS,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;AAAA,EAAG;AAAA,EAEvE,SAAe;AAChC,UAAM,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACjD,UAAM,gBAAgB,KAAK,QAAQ,eAAe;AAClD,UAAM,YAAY,KAAK,QAAQ,OAAO;AACtC,UAAM,UAAU,CAAC,iBAAiB,CAAC,KAAK,QAAQ,YAAY;AAE5D,SAAK,YAAY;AAAA,QACb,YAAY,uCAAuC,SAAS,WAAW,EAAE;AAAA;AAAA;AAAA,2BAGtD,GAAG;AAAA,sDACwB,gBAAgB,QAAQ,GAAG,GAAG,GAAG;AAAA;AAAA,UAE7E,UAAU,qBAAqB,GAAG,aAAa,EAAE;AAAA;AAAA,KAEtD;AAED,QAAI,CAAC,KAAK,SAAS,CAAC,KAAK,QAAQ,eAAe,KAAK,OAAO,KAAK;AAC/D,WAAK,QAAQ;AACb,WAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,IACnF;AACA,QAAI,MAAM,IAAK,MAAK,QAAQ;AAAA,EAC9B;AAGF;AApFE,YAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,aAAN;AAuFA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;"}

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

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

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

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

package/dist/components/radio/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/radio/index.ts"],"sourcesContent":["import { defineFxRadio } from './radio';\n\n// Reexporta a classe para uso programático (instanceof, herança).\nexport { FxRadio } from './radio';\n\n// Auto-registro ao importar o subpath `@wrrdev/fenix-ui/radio`.\ndefineFxRadio();\n"],"names":[],"mappings":";;AAMA,cAAA;"}

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,23 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-radio> — Botão de opção. Radios com o mesmo `name` formam um grupo
+ * (seleção exclusiva gerenciada pelo próprio componente).
+ *
+ * Atributos: checked, disabled, value, name, size (sm|md|lg).
+ * Evento: `change` (composed, detail: { checked, value }).
+ */
+export declare class FxRadio extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Tamanho do controle. Padrão: `'md'`. */
+    get size(): string;
+    set size(value: string);
+    protected render(): void;
+    private select;
+}
+export declare function defineFxRadio(): typeof FxRadio;
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAwDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,2CAA2C;IAC3C,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;IAyBjC,OAAO,CAAC,MAAM;CAkBf;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/radio/radio.js

@@ -0,0 +1,133 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxRadio = class _FxRadio extends FxElement {
+  static get observedAttributes() {
+    return ["checked", "disabled"];
+  }
+  get checked() {
+    return this.hasAttr("checked");
+  }
+  set checked(value) {
+    this.toggleAttr("checked", Boolean(value));
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttr("disabled", Boolean(value));
+  }
+  /** Tamanho do controle. 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);
+  }
+  render() {
+    const px = this.size === "sm" ? "14px" : this.size === "lg" ? "22px" : "18px";
+    if (!this.style.getPropertyValue("--fx-size-radio")) {
+      this.style.setProperty("--fx-size-radio", px);
+    }
+    this.setTemplate(`
+      <span class="box" part="box" role="radio" tabindex="0"
+        aria-checked="${this.checked}" aria-disabled="${this.disabled}">
+        <span class="control" part="control"><span class="dot" part="dot"></span></span>
+        <span class="label" part="label"><slot></slot></span>
+      </span>
+    `);
+    const box = this.root.querySelector(".box");
+    if (!box) return;
+    box.addEventListener("click", () => this.select());
+    box.addEventListener("keydown", (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        this.select();
+      }
+    });
+  }
+  select() {
+    if (this.disabled || this.checked) return;
+    const name = this.getAttr("name");
+    if (name) {
+      document.querySelectorAll(`fx-radio[name="${name}"]`).forEach((r) => {
+        r.checked = false;
+      });
+    }
+    this.checked = true;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        composed: true,
+        detail: { checked: true, value: this.getAttr("value") }
+      })
+    );
+  }
+};
+_FxRadio.styles = css`
+    :host {
+      display: inline-flex;
+      vertical-align: middle;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .box {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      cursor: pointer;
+      user-select: none;
+      color: var(--fx-text-default);
+      -webkit-tap-highlight-color: transparent;
+    }
+    .control {
+      width: var(--fx-size-radio, 18px);
+      height: var(--fx-size-radio, 18px);
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid var(--fx-border-hover);
+      border-radius: var(--fx-radius-full);
+      background: var(--fx-surface-background);
+      transition:
+        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
+        box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .box:hover .control { border-color: var(--fx-color-primary); }
+    .box:focus-visible .control {
+      outline: none;
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    .dot {
+      width: calc(100% - 8px);
+      height: calc(100% - 8px);
+      border-radius: var(--fx-radius-full);
+      background: var(--fx-color-primary);
+      transform: scale(0);
+      transition: transform var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    :host([checked]) .control { border-color: var(--fx-color-primary); }
+    :host([checked]) .dot { transform: scale(1); }
+    /* Validação */
+    :host([error]) .control,
+    :host([invalid]) .control { border-color: var(--fx-color-danger, #dc2626); }
+    :host([success]) .control,
+    :host([valid]) .control { border-color: var(--fx-color-success, #16a34a); }
+    .label { display: inline-flex; align-items: center; }
+    :host([disabled]) .box {
+      opacity: 0.55;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `;
+let FxRadio = _FxRadio;
+function defineFxRadio() {
+  return defineElement("fx-radio", FxRadio);
+}
+export {
+  FxRadio,
+  defineFxRadio
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-radio> — Botão de opção. Radios com o mesmo `name` formam um grupo\n * (seleção exclusiva gerenciada pelo próprio componente).\n *\n * Atributos: checked, disabled, value, name, size (sm|md|lg).\n * Evento: `change` (composed, detail: { checked, value }).\n */\nexport class FxRadio extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .box {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      cursor: pointer;\n      user-select: none;\n      color: var(--fx-text-default);\n      -webkit-tap-highlight-color: transparent;\n    }\n    .control {\n      width: var(--fx-size-radio, 18px);\n      height: var(--fx-size-radio, 18px);\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fx-border-hover);\n      border-radius: var(--fx-radius-full);\n      background: var(--fx-surface-background);\n      transition:\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .box:hover .control { border-color: var(--fx-color-primary); }\n    .box:focus-visible .control {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .dot {\n      width: calc(100% - 8px);\n      height: calc(100% - 8px);\n      border-radius: var(--fx-radius-full);\n      background: var(--fx-color-primary);\n      transform: scale(0);\n      transition: transform var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    :host([checked]) .control { border-color: var(--fx-color-primary); }\n    :host([checked]) .dot { transform: scale(1); }\n    /* Validação */\n    :host([error]) .control,\n    :host([invalid]) .control { border-color: var(--fx-color-danger, #dc2626); }\n    :host([success]) .control,\n    :host([valid]) .control { border-color: var(--fx-color-success, #16a34a); }\n    .label { display: inline-flex; align-items: center; }\n    :host([disabled]) .box {\n      opacity: 0.55;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['checked', 'disabled'];\n  }\n\n  get checked(): boolean {\n    return this.hasAttr('checked');\n  }\n  set checked(value: boolean) {\n    this.toggleAttr('checked', Boolean(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  /** Tamanho do controle. 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  protected override render(): void {\n    const px = this.size === 'sm' ? '14px' : this.size === 'lg' ? '22px' : '18px';\n    if (!this.style.getPropertyValue('--fx-size-radio')) {\n      this.style.setProperty('--fx-size-radio', px);\n    }\n\n    this.setTemplate(`\n      <span class=\"box\" part=\"box\" role=\"radio\" tabindex=\"0\"\n        aria-checked=\"${this.checked}\" aria-disabled=\"${this.disabled}\">\n        <span class=\"control\" part=\"control\"><span class=\"dot\" part=\"dot\"></span></span>\n        <span class=\"label\" part=\"label\"><slot></slot></span>\n      </span>\n    `);\n\n    const box = this.root.querySelector<HTMLElement>('.box');\n    if (!box) return;\n    box.addEventListener('click', () => this.select());\n    box.addEventListener('keydown', (e) => {\n      if ((e as KeyboardEvent).key === ' ' || (e as KeyboardEvent).key === 'Enter') {\n        e.preventDefault();\n        this.select();\n      }\n    });\n  }\n\n  private select(): void {\n    if (this.disabled || this.checked) return;\n    // Desmarca os outros radios do mesmo grupo (mesmo name).\n    const name = this.getAttr('name');\n    if (name) {\n      document.querySelectorAll(`fx-radio[name=\"${name}\"]`).forEach((r) => {\n        (r as FxRadio).checked = false;\n      });\n    }\n    this.checked = true;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: true, value: this.getAttr('value') },\n      }),\n    );\n  }\n}\n\nexport function defineFxRadio(): typeof FxRadio {\n  return defineElement('fx-radio', FxRadio);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,EA2DrC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,UAAU;AAAA,EAC/B;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,SAAS;AAAA,EAC/B;AAAA,EACA,IAAI,QAAQ,OAAgB;AAC1B,SAAK,WAAW,WAAW,QAAQ,KAAK,CAAC;AAAA,EAC3C;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,IAAI;AACnC,WAAO,MAAM,QAAQ,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEmB,SAAe;AAChC,UAAM,KAAK,KAAK,SAAS,OAAO,SAAS,KAAK,SAAS,OAAO,SAAS;AACvE,QAAI,CAAC,KAAK,MAAM,iBAAiB,iBAAiB,GAAG;AACnD,WAAK,MAAM,YAAY,mBAAmB,EAAE;AAAA,IAC9C;AAEA,SAAK,YAAY;AAAA;AAAA,wBAEG,KAAK,OAAO,oBAAoB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,KAIhE;AAED,UAAM,MAAM,KAAK,KAAK,cAA2B,MAAM;AACvD,QAAI,CAAC,IAAK;AACV,QAAI,iBAAiB,SAAS,MAAM,KAAK,QAAQ;AACjD,QAAI,iBAAiB,WAAW,CAAC,MAAM;AACrC,UAAK,EAAoB,QAAQ,OAAQ,EAAoB,QAAQ,SAAS;AAC5E,UAAE,eAAA;AACF,aAAK,OAAA;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,SAAe;AACrB,QAAI,KAAK,YAAY,KAAK,QAAS;AAEnC,UAAM,OAAO,KAAK,QAAQ,MAAM;AAChC,QAAI,MAAM;AACR,eAAS,iBAAiB,kBAAkB,IAAI,IAAI,EAAE,QAAQ,CAAC,MAAM;AAClE,UAAc,UAAU;AAAA,MAC3B,CAAC;AAAA,IACH;AACA,SAAK,UAAU;AACf,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS,MAAM,OAAO,KAAK,QAAQ,OAAO,EAAA;AAAA,MAAE,CACvD;AAAA,IAAA;AAAA,EAEL;AACF;AAhIE,SAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,UAAN;AAmIA,SAAS,gBAAgC;AAC9C,SAAO,cAAc,YAAY,OAAO;AAC1C;"}

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

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

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

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

package/dist/components/select/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/select/index.ts"],"sourcesContent":["import { defineFxSelect } from './select';\n\n// Reexporta a classe para uso programático (instanceof, herança).\nexport { FxSelect } from './select';\n\n// Auto-registro ao importar o subpath `@wrrdev/fenix-ui/select`.\ndefineFxSelect();\n"],"names":[],"mappings":";;AAMA,eAAA;"}

package/dist/components/select/select.d.ts

@@ -0,0 +1,36 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-select> — Campo de seleção com dropdown customizado.
+ *
+ * Escreva os filhos como `<option>` nativos no light DOM; eles são
+ * espelhados automaticamente (MutationObserver):
+ *
+ *   <fx-select value="b" searchable clearable>
+ *     <option value="a">Opção A</option>
+ *     <option value="b">Opção B</option>
+ *   </fx-select>
+ *
+ * Atributos: value, size (sm|md|lg), disabled, placeholder,
+ * searchable, clearable, search-placeholder, no-results.
+ * Evento: `change` (composed, detail: { value }).
+ */
+export declare class FxSelect extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    private observer?;
+    private docListener?;
+    /** Tamanho do campo. Padrão: `'md'`. */
+    get size(): string;
+    set size(value: string);
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private get options();
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+    private select;
+    protected render(): void;
+}
+export declare function defineFxSelect(): typeof FxSelect;
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;;;GAcG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA8IpB;IAIF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IAEzC,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAezB,oBAAoB,IAAI,IAAI;IAM/C,OAAO,CAAC,MAAM;cASK,MAAM,IAAI,IAAI;CAwFlC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}