@wrrdev/fenix-ui 1.0.0

package/dist/components/dialog/dialog.js

@@ -0,0 +1,134 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxDialog = class _FxDialog extends FxElement {
+  static get observedAttributes() {
+    return ["open", "size", "heading"];
+  }
+  get open() {
+    return this.hasAttr("open");
+  }
+  set open(value) {
+    this.toggleAttr("open", value);
+  }
+  render() {
+    const isOpen = this.open;
+    const heading = this.getAttr("heading");
+    this.setTemplate(`
+      <div class="overlay" part="overlay" ${isOpen ? "" : "hidden"}>
+        <div class="dialog" role="dialog" aria-modal="true" aria-label="${heading}">
+          <header>
+            <h2>${heading}</h2>
+            <button type="button" class="close" part="close" aria-label="Fechar">×</button>
+          </header>
+          <div class="body"><slot></slot></div>
+          <footer part="footer"><slot name="footer"></slot></footer>
+        </div>
+      </div>
+    `);
+    if (!isOpen) return;
+    const overlay = this.root.querySelector(".overlay");
+    const closeBtn = this.root.querySelector(".close");
+    const close = () => {
+      this.open = false;
+      this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    };
+    overlay?.addEventListener("click", (e) => {
+      if (e.target === overlay) close();
+    });
+    closeBtn?.addEventListener("click", close);
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener("keydown", onKey, { once: true });
+    this._cleanup = () => document.removeEventListener("keydown", onKey);
+    requestAnimationFrame(() => this.root.querySelector(".dialog")?.focus());
+    this.dispatchEvent(new CustomEvent("open", { bubbles: true, composed: true }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+  }
+};
+_FxDialog.styles = css`
+    :host { display: contents; }
+    .overlay {
+      position: fixed;
+      inset: 0;
+      background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);
+      backdrop-filter: blur(3px);
+      -webkit-backdrop-filter: blur(3px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: var(--fx-z-modal, 1100);
+      animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .overlay[hidden] { display: none; }
+    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
+    .dialog {
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-lg);
+      box-shadow: var(--fx-shadow-xl);
+      width: min(560px, calc(100vw - 32px));
+      max-height: calc(100vh - 64px);
+      display: flex;
+      flex-direction: column;
+      font-family: var(--fx-font-family);
+      animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+    :host([size='sm']) .dialog { width: min(400px, calc(100vw - 32px)); }
+    :host([size='lg']) .dialog { width: min(800px, calc(100vw - 32px)); }
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--fx-space-lg) var(--fx-space-xl);
+      border-bottom: 1px solid var(--fx-border-default);
+    }
+    h2 {
+      margin: 0;
+      font-size: calc(var(--fx-font-size) + 2px);
+      font-weight: 600;
+      color: var(--fx-text-default);
+    }
+    .close {
+      border: none;
+      background: transparent;
+      color: var(--fx-text-muted);
+      font-size: calc(var(--fx-font-size) + 6px);
+      cursor: pointer;
+      line-height: 1;
+      padding: 0 var(--fx-space-xs);
+      border-radius: var(--fx-radius-full);
+    }
+    .close:hover { color: var(--fx-color-danger); }
+    .body {
+      padding: var(--fx-space-lg) var(--fx-space-xl);
+      overflow-y: auto;
+      color: var(--fx-text-default);
+      font-size: var(--fx-font-size);
+    }
+    footer {
+      padding: var(--fx-space-md) var(--fx-space-xl);
+      border-top: 1px solid var(--fx-border-default);
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--fx-space-sm);
+    }
+    footer[hidden] { display: none; }
+  `;
+let FxDialog = _FxDialog;
+function defineFxDialog() {
+  return defineElement("fx-dialog", FxDialog);
+}
+export {
+  FxDialog,
+  defineFxDialog
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-dialog> — Janela modal com overlay, ESC para fechar e foco preso.\n *\n * Atributos: open, size (sm|md|lg), heading (título).\n * Slots: padrão (conteúdo), footer (botões de ação).\n * Eventos: `open`, `close` (composed).\n */\nexport class FxDialog extends FxElement {\n  static override styles = css`\n    :host { display: contents; }\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n      backdrop-filter: blur(3px);\n      -webkit-backdrop-filter: blur(3px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: var(--fx-z-modal, 1100);\n      animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .overlay[hidden] { display: none; }\n    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n    .dialog {\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-lg);\n      box-shadow: var(--fx-shadow-xl);\n      width: min(560px, calc(100vw - 32px));\n      max-height: calc(100vh - 64px);\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fx-font-family);\n      animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n    :host([size='sm']) .dialog { width: min(400px, calc(100vw - 32px)); }\n    :host([size='lg']) .dialog { width: min(800px, calc(100vw - 32px)); }\n    header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      border-bottom: 1px solid var(--fx-border-default);\n    }\n    h2 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    .close {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 6px);\n      cursor: pointer;\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .close:hover { color: var(--fx-color-danger); }\n    .body {\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      overflow-y: auto;\n      color: var(--fx-text-default);\n      font-size: var(--fx-font-size);\n    }\n    footer {\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-top: 1px solid var(--fx-border-default);\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--fx-space-sm);\n    }\n    footer[hidden] { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['open', 'size', 'heading'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const isOpen = this.open;\n    const heading = this.getAttr('heading');\n\n    this.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\" ${isOpen ? '' : 'hidden'}>\n        <div class=\"dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${heading}\">\n          <header>\n            <h2>${heading}</h2>\n            <button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">×</button>\n          </header>\n          <div class=\"body\"><slot></slot></div>\n          <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n        </div>\n      </div>\n    `);\n\n    if (!isOpen) return;\n\n    const overlay = this.root.querySelector<HTMLElement>('.overlay');\n    const closeBtn = this.root.querySelector<HTMLButtonElement>('.close');\n    const close = (): void => {\n      this.open = false;\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    };\n    overlay?.addEventListener('click', (e) => { if (e.target === overlay) close(); });\n    closeBtn?.addEventListener('click', close);\n\n    // ESC fecha + foco no diálogo\n    const onKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') { e.stopPropagation(); close(); }\n    };\n    document.addEventListener('keydown', onKey, { once: true });\n    this._cleanup = () => document.removeEventListener('keydown', onKey);\n\n    requestAnimationFrame(() => this.root.querySelector<HTMLElement>('.dialog')?.focus());\n    this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  private _cleanup?: () => void;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cleanup?.();\n  }\n}\n\nexport function defineFxDialog(): typeof FxDialog {\n  return defineElement('fx-dialog', FxDialog);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA,EAwEtC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,QAAQ,SAAS;AAAA,EACnC;AAAA,EAEA,IAAI,OAAgB;AAAE,WAAO,KAAK,QAAQ,MAAM;AAAA,EAAG;AAAA,EACnD,IAAI,KAAK,OAAgB;AAAE,SAAK,WAAW,QAAQ,KAAK;AAAA,EAAG;AAAA,EAExC,SAAe;AAChC,UAAM,SAAS,KAAK;AACpB,UAAM,UAAU,KAAK,QAAQ,SAAS;AAEtC,SAAK,YAAY;AAAA,4CACuB,SAAS,KAAK,QAAQ;AAAA,0EACQ,OAAO;AAAA;AAAA,kBAE/D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOpB;AAED,QAAI,CAAC,OAAQ;AAEb,UAAM,UAAU,KAAK,KAAK,cAA2B,UAAU;AAC/D,UAAM,WAAW,KAAK,KAAK,cAAiC,QAAQ;AACpE,UAAM,QAAQ,MAAY;AACxB,WAAK,OAAO;AACZ,WAAK,cAAc,IAAI,YAAY,SAAS,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,IAChF;AACA,aAAS,iBAAiB,SAAS,CAAC,MAAM;AAAE,UAAI,EAAE,WAAW,QAAS,OAAA;AAAA,IAAS,CAAC;AAChF,cAAU,iBAAiB,SAAS,KAAK;AAGzC,UAAM,QAAQ,CAAC,MAA2B;AACxC,UAAI,EAAE,QAAQ,UAAU;AAAE,UAAE,gBAAA;AAAmB,cAAA;AAAA,MAAS;AAAA,IAC1D;AACA,aAAS,iBAAiB,WAAW,OAAO,EAAE,MAAM,MAAM;AAC1D,SAAK,WAAW,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAEnE,0BAAsB,MAAM,KAAK,KAAK,cAA2B,SAAS,GAAG,OAAO;AACpF,SAAK,cAAc,IAAI,YAAY,QAAQ,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,EAC/E;AAAA,EAIS,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,WAAA;AAAA,EACP;AACF;AA3HE,UAAgB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,WAAN;AA8HA,SAAS,iBAAkC;AAChD,SAAO,cAAc,aAAa,QAAQ;AAC5C;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,CAAC;AAKpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/dialog/index.js

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

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

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

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,27 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-drawer> — Painel deslizante (drawer) com overlay.
+ *
+ * Atributos:
+ *  - position: 'left' | 'right' | 'top' | 'bottom' (padrão: right);
+ *  - title: texto do cabeçalho;
+ *  - open: exibe o drawer.
+ * Conteúdo: livre, via slot.
+ * Eventos: `open` e `close` (composed). Fecha por ESC ou clique no overlay.
+ */
+export declare class FxDrawer extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(value: boolean);
+    get title(): string;
+    set title(v: string);
+    get position(): string;
+    set position(v: string);
+    protected render(): void;
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+    private _onKeydown;
+}
+export declare function defineFxDrawer(): typeof FxDrawer;
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAgB,MAAM,SAsHpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAa,KAAK,IAAI,MAAM,CAE3B;IACD,IAAa,KAAK,CAAC,CAAC,EAAE,MAAM,EAE3B;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;cAsBd,iBAAiB,IAAI,IAAI;cAazB,oBAAoB,IAAI,IAAI;IAK/C,OAAO,CAAC,UAAU,CAAwC;CAC1D;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,195 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxDrawer = class _FxDrawer extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._onKeydown = () => {
+    };
+  }
+  static get observedAttributes() {
+    return ["open", "title", "position"];
+  }
+  get open() {
+    return this.hasAttr("open");
+  }
+  set open(value) {
+    this.toggleAttr("open", value);
+  }
+  get title() {
+    return this.getAttr("title");
+  }
+  set title(v) {
+    this.setAttribute("title", v);
+  }
+  get position() {
+    const p = this.getAttr("position");
+    return ["left", "right", "top", "bottom"].includes(p) ? p : "right";
+  }
+  set position(v) {
+    this.setAttribute("position", v);
+  }
+  render() {
+    const title = this.getAttr("title");
+    this.setTemplate(`
+      <div class="overlay" part="overlay"></div>
+      <div class="panel" part="panel" role="dialog" aria-modal="true" aria-label="${title || "Drawer"}">
+        ${title !== "" ? `<div class="header" part="header"><span class="title">${title}</span><button type="button" class="close" part="close" aria-label="Fechar">✕</button></div>` : ""}
+        <div class="body" part="body"><slot></slot></div>
+      </div>
+    `);
+    const close = () => {
+      if (!this.open) return;
+      this.open = false;
+      this.dispatchEvent(
+        new CustomEvent("close", { bubbles: true, composed: true })
+      );
+    };
+    this.root.querySelector(".overlay")?.addEventListener("click", close);
+    this.root.querySelector(".close")?.addEventListener("click", close);
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this._onKeydown = (e) => {
+      if (e.key === "Escape" && this.open) {
+        this.open = false;
+        this.dispatchEvent(
+          new CustomEvent("close", { bubbles: true, composed: true })
+        );
+      }
+    };
+    document.addEventListener("keydown", this._onKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKeydown);
+    super.disconnectedCallback?.();
+  }
+};
+_FxDrawer.styles = css`
+		:host {
+			display: contents;
+			font-family: var(--fx-font-family);
+			font-size: var(--fx-font-size);
+			color: var(--fx-text-default);
+		}
+		.overlay {
+			display: none;
+			position: fixed;
+			inset: 0;
+			background: color-mix(
+				in srgb,
+				var(--fx-text-default, #000) 45%,
+				transparent
+			);
+			backdrop-filter: blur(3px);
+			-webkit-backdrop-filter: blur(3px);
+			z-index: var(--fx-z-overlay, 1090);
+			animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);
+		}
+		:host([open]) .overlay {
+			display: block;
+		}
+
+		.panel {
+			position: fixed;
+			background: var(--fx-surface-background);
+			box-shadow: var(--fx-shadow-xl);
+			z-index: var(--fx-z-modal, 1000);
+			display: flex;
+			flex-direction: column;
+			overflow: auto;
+		}
+		:host(:not([open])) .panel {
+			display: none;
+		}
+		:host([open]) .panel {
+			display: flex;
+		}
+		/* left / right — altura total, largura mínima fixa e expansível */
+		:host([position="left"]) .panel,
+		:host(:not([position])) .panel,
+		:host([position="right"]) .panel {
+			top: 0;
+			bottom: 0;
+			width: var(--fx-drawer-width, 360px);
+			min-width: 300px;
+			max-width: 90vw;
+		}
+		:host([position="left"]) .panel {
+			left: 0;
+		}
+		:host([position="right"]) .panel,
+		:host(:not([position])) .panel {
+			right: 0;
+		}
+
+		/* top / bottom — largura total, altura mínima fixa e expansível */
+		:host([position="top"]) .panel,
+		:host([position="bottom"]) .panel {
+			left: 0;
+			right: 0;
+			height: var(--fx-drawer-height, 280px);
+			min-height: 180px;
+			max-height: 85vh;
+		}
+		:host([position="top"]) .panel {
+			top: 0;
+		}
+		:host([position="bottom"]) .panel {
+			bottom: 0;
+		}
+
+		.header {
+			display: flex;
+			align-items: center;
+			gap: var(--fx-space-sm);
+			min-height: var(--fx-size-lg);
+			padding: var(--fx-space-sm) var(--fx-space-md);
+			border-bottom: 1px solid var(--fx-border-default);
+			flex: none;
+			position: sticky;
+			top: 0;
+			background: var(--fx-surface-background);
+		}
+		.title {
+			font-weight: 700;
+			flex: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.close {
+			border: none;
+			background: transparent;
+			cursor: pointer;
+			color: var(--fx-text-muted);
+			width: 28px;
+			height: 28px;
+			line-height: 1;
+			border-radius: var(--fx-radius-sm);
+			font-size: 16px;
+			transition: background var(--fx-motion-duration-fast)
+				var(--fx-motion-easing);
+		}
+		.close:hover {
+			background: color-mix(
+				in srgb,
+				var(--fx-color-danger) 14%,
+				var(--fx-surface-background)
+			);
+			color: var(--fx-color-danger);
+		}
+		.body {
+			padding: var(--fx-space-md);
+			flex: 1;
+		}
+	`;
+let FxDrawer = _FxDrawer;
+function defineFxDrawer() {
+  return defineElement("fx-drawer", FxDrawer);
+}
+export {
+  FxDrawer,
+  defineFxDrawer
+};
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sources":["../../../src/components/drawer/drawer.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-drawer> — Painel deslizante (drawer) com overlay.\n *\n * Atributos:\n *  - position: 'left' | 'right' | 'top' | 'bottom' (padrão: right);\n *  - title: texto do cabeçalho;\n *  - open: exibe o drawer.\n * Conteúdo: livre, via slot.\n * Eventos: `open` e `close` (composed). Fecha por ESC ou clique no overlay.\n */\nexport class FxDrawer extends FxElement {\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: contents;\n\t\t\tfont-family: var(--fx-font-family);\n\t\t\tfont-size: var(--fx-font-size);\n\t\t\tcolor: var(--fx-text-default);\n\t\t}\n\t\t.overlay {\n\t\t\tdisplay: none;\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-text-default, #000) 45%,\n\t\t\t\ttransparent\n\t\t\t);\n\t\t\tbackdrop-filter: blur(3px);\n\t\t\t-webkit-backdrop-filter: blur(3px);\n\t\t\tz-index: var(--fx-z-overlay, 1090);\n\t\t\tanimation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n\t\t}\n\t\t:host([open]) .overlay {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.panel {\n\t\t\tposition: fixed;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t\tbox-shadow: var(--fx-shadow-xl);\n\t\t\tz-index: var(--fx-z-modal, 1000);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: auto;\n\t\t}\n\t\t:host(:not([open])) .panel {\n\t\t\tdisplay: none;\n\t\t}\n\t\t:host([open]) .panel {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t/* left / right — altura total, largura mínima fixa e expansível */\n\t\t:host([position=\"left\"]) .panel,\n\t\t:host(:not([position])) .panel,\n\t\t:host([position=\"right\"]) .panel {\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: var(--fx-drawer-width, 360px);\n\t\t\tmin-width: 300px;\n\t\t\tmax-width: 90vw;\n\t\t}\n\t\t:host([position=\"left\"]) .panel {\n\t\t\tleft: 0;\n\t\t}\n\t\t:host([position=\"right\"]) .panel,\n\t\t:host(:not([position])) .panel {\n\t\t\tright: 0;\n\t\t}\n\n\t\t/* top / bottom — largura total, altura mínima fixa e expansível */\n\t\t:host([position=\"top\"]) .panel,\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: var(--fx-drawer-height, 280px);\n\t\t\tmin-height: 180px;\n\t\t\tmax-height: 85vh;\n\t\t}\n\t\t:host([position=\"top\"]) .panel {\n\t\t\ttop: 0;\n\t\t}\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t.header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--fx-space-sm);\n\t\t\tmin-height: var(--fx-size-lg);\n\t\t\tpadding: var(--fx-space-sm) var(--fx-space-md);\n\t\t\tborder-bottom: 1px solid var(--fx-border-default);\n\t\t\tflex: none;\n\t\t\tposition: sticky;\n\t\t\ttop: 0;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t}\n\t\t.title {\n\t\t\tfont-weight: 700;\n\t\t\tflex: 1;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.close {\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tcursor: pointer;\n\t\t\tcolor: var(--fx-text-muted);\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tline-height: 1;\n\t\t\tborder-radius: var(--fx-radius-sm);\n\t\t\tfont-size: 16px;\n\t\t\ttransition: background var(--fx-motion-duration-fast)\n\t\t\t\tvar(--fx-motion-easing);\n\t\t}\n\t\t.close:hover {\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-color-danger) 14%,\n\t\t\t\tvar(--fx-surface-background)\n\t\t\t);\n\t\t\tcolor: var(--fx-color-danger);\n\t\t}\n\t\t.body {\n\t\t\tpadding: var(--fx-space-md);\n\t\t\tflex: 1;\n\t\t}\n\t`;\n\n\tstatic override get observedAttributes(): string[] {\n\t\treturn [\"open\", \"title\", \"position\"];\n\t}\n\n\tget open(): boolean {\n\t\treturn this.hasAttr(\"open\");\n\t}\n\tset open(value: boolean) {\n\t\tthis.toggleAttr(\"open\", value);\n\t}\n\n\toverride get title(): string {\n\t\treturn this.getAttr(\"title\");\n\t}\n\toverride set title(v: string) {\n\t\tthis.setAttribute(\"title\", v);\n\t}\n\n\tget position(): string {\n\t\tconst p = this.getAttr(\"position\");\n\t\treturn [\"left\", \"right\", \"top\", \"bottom\"].includes(p) ? p : \"right\";\n\t}\n\tset position(v: string) {\n\t\tthis.setAttribute(\"position\", v);\n\t}\n\n\tprotected override render(): void {\n\t\tconst title = this.getAttr(\"title\");\n\n\t\tthis.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"panel\" part=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${title || \"Drawer\"}\">\n        ${title !== \"\" ? `<div class=\"header\" part=\"header\"><span class=\"title\">${title}</span><button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">✕</button></div>` : \"\"}\n        <div class=\"body\" part=\"body\"><slot></slot></div>\n      </div>\n    `);\n\n\t\tconst close = () => {\n\t\t\tif (!this.open) return;\n\t\t\tthis.open = false;\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent(\"close\", { bubbles: true, composed: true }),\n\t\t\t);\n\t\t};\n\t\tthis.root.querySelector(\".overlay\")?.addEventListener(\"click\", close);\n\t\tthis.root.querySelector(\".close\")?.addEventListener(\"click\", close);\n\t}\n\n\tprotected override connectedCallback(): void {\n\t\tsuper.connectedCallback?.();\n\t\tthis._onKeydown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === \"Escape\" && this.open) {\n\t\t\t\tthis.open = false;\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent(\"close\", { bubbles: true, composed: true }),\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"keydown\", this._onKeydown);\n\t}\n\n\tprotected override disconnectedCallback(): void {\n\t\tdocument.removeEventListener(\"keydown\", this._onKeydown);\n\t\tsuper.disconnectedCallback?.();\n\t}\n\n\tprivate _onKeydown: (e: KeyboardEvent) => void = () => {};\n}\n\nexport function defineFxDrawer(): typeof FxDrawer {\n  return defineElement('fx-drawer', FxDrawer);\n}"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,CAAC;AAIpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/drawer/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/drawer/index.ts"],"sourcesContent":["import { FxDrawer, defineFxDrawer } from './drawer';\n\nexport { FxDrawer };\n\ndefineFxDrawer();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-drawer': FxDrawer;\n  }\n}"],"names":[],"mappings":";;AAIA,eAAA;"}

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,28 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-dropdown> — Menu de ações em popover.
+ *
+ * Atributos: label (texto do trigger), position (bottom-left padrão | bottom-right).
+ * Itens: <fx-dropdown-item value="x">Texto</fx-dropdown-item>
+ * Evento: `select` (composed, detail: { value }).
+ */
+export declare class FxDropdown extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(value: boolean);
+    protected render(): void;
+}
+/**
+ * <fx-dropdown-item> — Item de menu.
+ */
+export declare class FxDropdownItem extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(v: string);
+    protected render(): void;
+}
+export declare function defineFxDropdown(): typeof FxDropdown;
+export declare function defineFxDropdownItem(): typeof FxDropdownItem;
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAiCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;CAwClC;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SAqBpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAAsB;IAExE,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;cAEpC,MAAM,IAAI,IAAI;CAGlC;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD;AACD,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}

package/dist/components/dropdown/dropdown.js

@@ -0,0 +1,137 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxDropdown = class _FxDropdown extends FxElement {
+  static get observedAttributes() {
+    return ["label", "position", "open"];
+  }
+  get open() {
+    return this.hasAttr("open");
+  }
+  set open(value) {
+    this.toggleAttr("open", value);
+  }
+  render() {
+    const label = this.getAttr("label", "Ações");
+    const items = Array.from(this.querySelectorAll("fx-dropdown-item"));
+    this.setTemplate(`
+      <span class="trigger" role="button" tabindex="0" part="trigger"
+        aria-haspopup="menu" aria-expanded="${this.open}">
+        ${label} ▾
+      </span>
+      <div class="panel" role="menu" part="panel">
+        ${items.length ? items.map((i) => `<div class="item-slot"><slot name="_${i.getAttribute("value") ?? ""}"></slot></div>`) : '<div class="empty">Nenhuma ação</div>'}
+        <slot></slot>
+      </div>
+    `);
+    const trigger = this.root.querySelector(".trigger");
+    trigger?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      document.querySelectorAll("fx-dropdown[open]").forEach((d) => {
+        if (d !== this) d.open = false;
+      });
+      this.open = !this.open;
+    });
+    trigger?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.open = !this.open;
+      }
+    });
+    items.forEach((item) => {
+      item.addEventListener("click", () => {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent("select", {
+          bubbles: true,
+          composed: true,
+          detail: { value: item.getAttribute("value") ?? "" }
+        }));
+      });
+    });
+  }
+};
+_FxDropdown.styles = css`
+    :host {
+      position: relative;
+      display: inline-block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .trigger { min-height: var(--fx-size-md); }
+    .panel {
+      position: absolute;
+      top: calc(100% + 4px);
+      min-width: 180px;
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      box-shadow: var(--fx-shadow-lg);
+      padding: var(--fx-space-xs);
+      z-index: var(--fx-z-dropdown, 1000);
+      display: none;
+    }
+    :host([open]) .panel { display: block; }
+    /* left = alinhado à esquerda do trigger; right = à direita; center = centrado */
+    :host([position='left']) .panel,
+    :host([position='bottom-left']) .panel { left: 0; right: auto; }
+    :host([position='center']) .panel {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    :host([position='right']) .panel,
+    :host([position='bottom-right']) .panel { right: 0; left: auto; }
+    :host(:not([position])) .panel { left: 0; right: auto; }
+    ::slotted(fx-dropdown-item) { display: block; }
+    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm); }
+  `;
+let FxDropdown = _FxDropdown;
+const _FxDropdownItem = class _FxDropdownItem extends FxElement {
+  static get observedAttributes() {
+    return ["value"];
+  }
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  render() {
+    this.setTemplate('<button type="button" class="item" part="item" role="menuitem"><slot></slot></button>');
+  }
+};
+_FxDropdownItem.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .item {
+      display: block;
+      width: 100%;
+      text-align: left;
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--fx-text-default);
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      cursor: pointer;
+      border-radius: var(--fx-radius-sm);
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .item:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }
+  `;
+let FxDropdownItem = _FxDropdownItem;
+function defineFxDropdown() {
+  return defineElement("fx-dropdown", FxDropdown);
+}
+function defineFxDropdownItem() {
+  return defineElement("fx-dropdown-item", FxDropdownItem);
+}
+export {
+  FxDropdown,
+  FxDropdownItem,
+  defineFxDropdown,
+  defineFxDropdownItem
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/dropdown/dropdown.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-dropdown> — Menu de ações em popover.\n *\n * Atributos: label (texto do trigger), position (bottom-left padrão | bottom-right).\n * Itens: <fx-dropdown-item value=\"x\">Texto</fx-dropdown-item>\n * Evento: `select` (composed, detail: { value }).\n */\nexport class FxDropdown extends FxElement {\n  static override styles = css`\n    :host {\n      position: relative;\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .trigger { min-height: var(--fx-size-md); }\n    .panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      min-width: 180px;\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      padding: var(--fx-space-xs);\n      z-index: var(--fx-z-dropdown, 1000);\n      display: none;\n    }\n    :host([open]) .panel { display: block; }\n    /* left = alinhado à esquerda do trigger; right = à direita; center = centrado */\n    :host([position='left']) .panel,\n    :host([position='bottom-left']) .panel { left: 0; right: auto; }\n    :host([position='center']) .panel {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n    :host([position='right']) .panel,\n    :host([position='bottom-right']) .panel { right: 0; left: auto; }\n    :host(:not([position])) .panel { left: 0; right: auto; }\n    ::slotted(fx-dropdown-item) { display: block; }\n    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['label', 'position', 'open'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const label = this.getAttr('label', 'Ações');\n    const items = Array.from(this.querySelectorAll<HTMLElement>('fx-dropdown-item'));\n\n    this.setTemplate(`\n      <span class=\"trigger\" role=\"button\" tabindex=\"0\" part=\"trigger\"\n        aria-haspopup=\"menu\" aria-expanded=\"${this.open}\">\n        ${label} ▾\n      </span>\n      <div class=\"panel\" role=\"menu\" part=\"panel\">\n        ${items.length\n          ? items.map((i) => `<div class=\"item-slot\"><slot name=\"_${i.getAttribute('value') ?? ''}\"></slot></div>`)\n          : '<div class=\"empty\">Nenhuma ação</div>'}\n        <slot></slot>\n      </div>\n    `);\n\n    const trigger = this.root.querySelector<HTMLElement>('.trigger');\n    trigger?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      // Fecha outros dropdowns abertos\n      document.querySelectorAll('fx-dropdown[open]').forEach((d) => {\n        if (d !== this) (d as FxDropdown).open = false;\n      });\n      this.open = !this.open;\n    });\n    trigger?.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.open = !this.open; }\n    });\n\n    items.forEach((item) => {\n      item.addEventListener('click', () => {\n        this.open = false;\n        this.dispatchEvent(new CustomEvent('select', {\n          bubbles: true, composed: true,\n          detail: { value: item.getAttribute('value') ?? '' },\n        }));\n      });\n    });\n  }\n}\n\n/**\n * <fx-dropdown-item> — Item de menu.\n */\nexport class FxDropdownItem extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .item {\n      display: block;\n      width: 100%;\n      text-align: left;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--fx-text-default);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      cursor: pointer;\n      border-radius: var(--fx-radius-sm);\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .item:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n  `;\n\n  static override get observedAttributes(): string[] { return ['value']; }\n\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  protected override render(): void {\n    this.setTemplate('<button type=\"button\" class=\"item\" part=\"item\" role=\"menuitem\"><slot></slot></button>');\n  }\n}\n\nexport function defineFxDropdown(): typeof FxDropdown {\n  return defineElement('fx-dropdown', FxDropdown);\n}\nexport function defineFxDropdownItem(): typeof FxDropdownItem {\n  return defineElement('fx-dropdown-item', FxDropdownItem);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAoCxC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,SAAS,YAAY,MAAM;AAAA,EACrC;AAAA,EAEA,IAAI,OAAgB;AAAE,WAAO,KAAK,QAAQ,MAAM;AAAA,EAAG;AAAA,EACnD,IAAI,KAAK,OAAgB;AAAE,SAAK,WAAW,QAAQ,KAAK;AAAA,EAAG;AAAA,EAExC,SAAe;AAChC,UAAM,QAAQ,KAAK,QAAQ,SAAS,OAAO;AAC3C,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,kBAAkB,CAAC;AAE/E,SAAK,YAAY;AAAA;AAAA,8CAEyB,KAAK,IAAI;AAAA,UAC7C,KAAK;AAAA;AAAA;AAAA,UAGL,MAAM,SACJ,MAAM,IAAI,CAAC,MAAM,uCAAuC,EAAE,aAAa,OAAO,KAAK,EAAE,iBAAiB,IACtG,uCAAuC;AAAA;AAAA;AAAA,KAG9C;AAED,UAAM,UAAU,KAAK,KAAK,cAA2B,UAAU;AAC/D,aAAS,iBAAiB,SAAS,CAAC,MAAM;AACxC,QAAE,gBAAA;AAEF,eAAS,iBAAiB,mBAAmB,EAAE,QAAQ,CAAC,MAAM;AAC5D,YAAI,MAAM,KAAO,GAAiB,OAAO;AAAA,MAC3C,CAAC;AACD,WAAK,OAAO,CAAC,KAAK;AAAA,IACpB,CAAC;AACD,aAAS,iBAAiB,WAAW,CAAC,MAAM;AAC1C,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,UAAE,eAAA;AAAkB,aAAK,OAAO,CAAC,KAAK;AAAA,MAAM;AAAA,IACxF,CAAC;AAED,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,iBAAiB,SAAS,MAAM;AACnC,aAAK,OAAO;AACZ,aAAK,cAAc,IAAI,YAAY,UAAU;AAAA,UAC3C,SAAS;AAAA,UAAM,UAAU;AAAA,UACzB,QAAQ,EAAE,OAAO,KAAK,aAAa,OAAO,KAAK,GAAA;AAAA,QAAG,CACnD,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAlFE,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;AADpB,IAAM,aAAN;AAwFA,MAAM,kBAAN,MAAM,wBAAuB,UAAU;AAAA,EAwB5C,WAAoB,qBAA+B;AAAE,WAAO,CAAC,OAAO;AAAA,EAAG;AAAA,EAEvE,IAAI,QAAgB;AAAE,WAAO,KAAK,QAAQ,OAAO;AAAA,EAAG;AAAA,EACpD,IAAI,MAAM,GAAW;AAAE,SAAK,aAAa,SAAS,CAAC;AAAA,EAAG;AAAA,EAEnC,SAAe;AAChC,SAAK,YAAY,uFAAuF;AAAA,EAC1G;AACF;AA/BE,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,iBAAN;AAkCA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;AACO,SAAS,uBAA8C;AAC5D,SAAO,cAAc,oBAAoB,cAAc;AACzD;"}

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

@@ -0,0 +1,9 @@
+import { FxDropdown, FxDropdownItem } from './dropdown';
+export { FxDropdown, FxDropdownItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-dropdown': FxDropdown;
+        'fx-dropdown-item': FxDropdownItem;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAA0C,MAAM,YAAY,CAAC;AAEhG,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC;AAKtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;QAC1B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/dropdown/index.js

@@ -0,0 +1,9 @@
+import { defineFxDropdown, defineFxDropdownItem } from "./dropdown.js";
+import { FxDropdown, FxDropdownItem } from "./dropdown.js";
+defineFxDropdown();
+defineFxDropdownItem();
+export {
+  FxDropdown,
+  FxDropdownItem
+};
+//# sourceMappingURL=index.js.map