@antadesign/anta 0.3.5 → 0.3.7

package/dist/elements/a-expander.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, parseOpenState } from "../anta_helpers";
 import "./a-expander.css";
 const ANIM_MS = 200;
 const SUMMARY_TYPE_SCALE = {
@@ -139,7 +139,7 @@ const SHADOW_STYLE = `
     transition-behavior: allow-discrete;
   }
 `;
-const parseState = (v) => v === "open" ? "open" : "closed";
+const parseState = parseOpenState;
 class AExpanderElement extends HTMLElementBase {
   static observedAttributes = ["state", "disabled", "round"];
   summary;

package/dist/elements/a-input-time.js

@@ -94,6 +94,7 @@ const SHADOW_STYLE = `
     padding-inline: 1px;
     border-radius: 2px;
     text-align: center;
+    white-space: nowrap;
     outline: none;
     cursor: default;
     font-variant-numeric: tabular-nums;
@@ -102,7 +103,7 @@ const SHADOW_STYLE = `
   .seg[inputmode="numeric"] {
     /* Fixed to two tabular digits so the box never reflows: neither the narrower
        placeholder dashes nor a mid-entry single digit changes the field width. */
-    width: calc(2ch + 2px);
+    width: calc(2ch + 4px);
   }
   .seg:focus {
     background: var(--input-time-seg-focus-bg);

package/dist/elements/a-input.d.ts

@@ -45,6 +45,8 @@ export declare class AInputElement extends HTMLElementBase {
     private syncStatus;
     private onInput;
     private onChange;
+    private onFocus;
+    private onBlur;
     private onLabelSlotChange;
     private applyLabelAria;
     private onHintSlotChange;

package/dist/elements/a-input.js

@@ -22,6 +22,18 @@ const FORWARDED = [
   "aria-label"
 ];
 const BOOL_FORWARDED = /* @__PURE__ */ new Set(["readonly", "required"]);
+let focusFromKeyboard = false;
+const modalityDocs = /* @__PURE__ */ new WeakSet();
+function trackFocusModality(doc) {
+  if (modalityDocs.has(doc)) return;
+  modalityDocs.add(doc);
+  doc.addEventListener("keydown", () => {
+    focusFromKeyboard = true;
+  }, true);
+  doc.addEventListener("pointerdown", () => {
+    focusFromKeyboard = false;
+  }, true);
+}
 const CLEAR_TRIGGER = "clearrequest";
 const CLEAR_CLICK_EVENT = "clearclick";
 const CLEAR_INPUT_EVENT = "clearinput";
@@ -72,7 +84,8 @@ const SHADOW_STYLE = `
   @media (hover: hover) and (pointer: fine) {
     :host(:not(:disabled)) .field:hover { --_bc: var(--input-border-hover); }
   }
-  .field:has(input:focus, textarea:focus) {
+  :host(:not([readonly])) .field:has(input:focus, textarea:focus),
+  :host([readonly]:state(kb-focus)) .field {
     --_bc: var(--input-border-hover);
     outline: 1px solid var(--focus-ring);
     outline-offset: 1px;
@@ -269,6 +282,7 @@ class AInputElement extends HTMLElementBase {
     return this.field.getBoundingClientRect();
   }
   connectedCallback() {
+    trackFocusModality(this.doc);
     if (Object.prototype.hasOwnProperty.call(this, "value")) {
       const v = this.value;
       delete this.value;
@@ -336,6 +350,8 @@ class AInputElement extends HTMLElementBase {
     next.value = value;
     next.addEventListener("input", this.onInput);
     next.addEventListener("change", this.onChange);
+    next.addEventListener("focus", this.onFocus);
+    next.addEventListener("blur", this.onBlur);
     if (refocus) {
       next.focus();
       if (selStart != null) try {
@@ -415,6 +431,23 @@ class AInputElement extends HTMLElementBase {
   onChange = () => {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   };
+  // Stamp the off-DOM `:state(kb-focus)` when this focus arrived via the keyboard
+  // (see `trackFocusModality`), so the read-only field's ring can draw for keyboard
+  // focus but not a mouse click — the one distinction Chromium's `:focus-visible`
+  // won't make for an <input>. Editable fields ignore the state (ring on `:focus`).
+  onFocus = () => {
+    try {
+      if (focusFromKeyboard) this.internals?.states.add("kb-focus");
+      else this.internals?.states.delete("kb-focus");
+    } catch {
+    }
+  };
+  onBlur = () => {
+    try {
+      this.internals?.states.delete("kb-focus");
+    } catch {
+    }
+  };
   onLabelSlotChange = () => {
     this.labelBox.classList.toggle("has-label", this.labelSlot.assignedNodes().length > 0);
     this.applyLabelAria();

package/dist/elements/a-menu.d.ts

@@ -110,8 +110,11 @@ export declare class AMenuElement extends HTMLElementBase {
      *  the seat target — the cursor lands on the first real option — but they stay
      *  arrow-reachable. */
     private resetActive;
-    /** Combobox arrow / Home / End / Enter handling; returns true if it consumed the
-     *  key (so `handleKey` stops). Any other key falls through to the input (typing). */
+    /** Combobox arrow / PageUp / PageDown / Enter handling; returns true if it
+     *  consumed the key (so `handleKey` stops). Home / End are deliberately NOT
+     *  handled: focus is in a text field, so they must reach it for caret movement
+     *  (line start/end); PageUp / PageDown jump the option list to first / last
+     *  instead. Any other key falls through to the input (typing). */
     private handleComboKey;
     /** Public imperative API. Routes through the same intent path as the
      *  triggers, so it emits `statechange` and respects controlled mode. */

package/dist/elements/a-menu.js

@@ -7,6 +7,8 @@ const SUBMENU_OPEN_DELAY = 130;
 const SUBMENU_CLOSE_DELAY = 130;
 const TYPEAHEAD_RESET = 500;
 const ANCHOR_VISIBLE_RATIO = 0.5;
+const SELF_ACTIVATING = 'a-button, button, a[href], input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
+const EDITABLE_FIELD = "input:not([readonly]), textarea:not([readonly]), a-input:not([readonly]), a-input-time:not([readonly])";
 const openStack = [];
 let docBound = false;
 let boundDoc = null;
@@ -451,11 +453,22 @@ class AMenuElement extends HTMLElementBase {
     el.style.setProperty("--fade-bottom", bottom ? "14px" : "0px");
   }
   /* ------------------------------ combobox mode ------------------------------ */
-  /** The filter field slotted into THIS menu (never a submenu's), or null. Its
+  /** Combobox-anchor mode: the trigger anchor ITSELF is the filter field (it
+   *  carries `[data-menu-search]`), as in `InputAutocomplete` where an editable
+   *  `<a-input>` is the always-visible field the menu hangs under. null for the
+   *  normal case — `Select`/`SelectFaceted` slot the field as a child, so their
+   *  anchor never carries the marker and this stays inert for them. */
+  get #comboAnchor() {
+    const a = this.triggerAnchor;
+    return a?.matches("[data-menu-search]") ? a : null;
+  }
+  /** The filter field of THIS menu, or null. A slotted child (never a submenu's)
+   *  wins; else the anchor when it's the field (combobox-anchor mode). Its
    *  presence switches the menu to the combobox keyboard. */
   get #searchField() {
     const el = this.querySelector("[data-menu-search]");
-    return el && el.closest("a-menu") === this ? el : null;
+    if (el && el.closest("a-menu") === this) return el;
+    return this.#comboAnchor;
   }
   /** Move the combobox cursor. Sets the item's `active` **property** (off-DOM
    *  `:state(active)`, no attribute churn) for the highlight, and REPORTS the
@@ -481,11 +494,15 @@ class AMenuElement extends HTMLElementBase {
   resetActive() {
     const q = this.#searchField?.value;
     if (!q || !q.trim()) return this.setActive(null);
+    if (this.#comboAnchor) return this.setActive(null);
     const items = this.focusableItems();
     this.setActive(items.find((it) => !it.hasAttribute("data-menu-skip-active")) ?? items[0] ?? null);
   }
-  /** Combobox arrow / Home / End / Enter handling; returns true if it consumed the
-   *  key (so `handleKey` stops). Any other key falls through to the input (typing). */
+  /** Combobox arrow / PageUp / PageDown / Enter handling; returns true if it
+   *  consumed the key (so `handleKey` stops). Home / End are deliberately NOT
+   *  handled: focus is in a text field, so they must reach it for caret movement
+   *  (line start/end); PageUp / PageDown jump the option list to first / last
+   *  instead. Any other key falls through to the input (typing). */
   handleComboKey(e) {
     const items = this.focusableItems();
     const idx = this.activeItem ? items.indexOf(this.activeItem) : -1;
@@ -498,11 +515,11 @@ class AMenuElement extends HTMLElementBase {
         e.preventDefault();
         this.setActive(items[idx <= 0 ? items.length - 1 : idx - 1] ?? null);
         return true;
-      case "Home":
+      case "PageUp":
         e.preventDefault();
         this.setActive(items[0] ?? null);
         return true;
-      case "End":
+      case "PageDown":
         e.preventDefault();
         this.setActive(items[items.length - 1] ?? null);
         return true;
@@ -848,6 +865,10 @@ class AMenuElement extends HTMLElementBase {
       return;
     }
     if (e.key === "Tab") {
+      if (this.#comboAnchor) {
+        this.requestClose(e);
+        return;
+      }
       const f = this.focusables();
       if (!f.length) return;
       e.preventDefault();
@@ -928,6 +949,12 @@ class AMenuElement extends HTMLElementBase {
     return ((label ?? it).textContent ?? "").trim().toLowerCase();
   }
   /* ====================== trigger listener wiring ====================== */
+  /** Pointer coord for a keyboard-opened `coord` menu: the trigger's own rect
+   *  (a DOM read, not a mutation) instead of the 0,0 a keyboard event reports. */
+  #anchorCoord(anchor) {
+    const r = anchorRect(anchor);
+    return [r.left, r.bottom];
+  }
   setupListeners() {
     if (this.listening) return;
     const anchor = this.triggerAnchor;
@@ -969,24 +996,34 @@ class AMenuElement extends HTMLElementBase {
         anchor.removeEventListener("contextmenu", onContext);
         this.listening = false;
       };
+    } else if (this.#comboAnchor) {
+      this.teardown = () => {
+        this.listening = false;
+      };
+      this.listening = true;
+      return;
     } else {
       const onClick = (e) => {
         const viaKeyboard = e.detail === 0;
-        let coord;
-        if (this.#isCoord) {
-          if (viaKeyboard) {
-            const r = anchorRect(anchor);
-            coord = [r.left, r.bottom];
-          } else {
-            coord = [e.clientX, e.clientY];
-          }
-        }
+        const coord = this.#isCoord ? viaKeyboard ? this.#anchorCoord(anchor) : [e.clientX, e.clientY] : void 0;
         if (this._shown) this.requestClose(e);
         else this.requestOpen({ coord, viaKeyboard, originEvent: e });
       };
+      const onKey = (e) => {
+        if (this._shown) return;
+        if (anchor.matches(SELF_ACTIVATING) || anchor.hasAttribute("disabled")) return;
+        const editable = anchor.matches(EDITABLE_FIELD);
+        const opens = e.key === "ArrowDown" || e.key === "ArrowUp" || !editable && (e.key === "Enter" || e.key === " ");
+        if (!opens) return;
+        e.preventDefault();
+        const coord = this.#isCoord ? this.#anchorCoord(anchor) : void 0;
+        this.requestOpen({ coord, viaKeyboard: true, originEvent: e });
+      };
       anchor.addEventListener("click", onClick);
+      anchor.addEventListener("keydown", onKey);
       this.teardown = () => {
         anchor.removeEventListener("click", onClick);
+        anchor.removeEventListener("keydown", onKey);
         this.listening = false;
       };
     }

package/dist/elements/a-radio.css

@@ -1 +1 @@
-@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #f1eff1;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65;--radio-dot: #d4ced4;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}}
+@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #f6f4f6;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65;--radio-dot: #ece9ec;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}}

package/dist/elements/a-tooltip.d.ts

@@ -52,6 +52,9 @@ export declare class ATooltipElement extends HTMLElementBase {
     private fading;
     private fadeTimer?;
     private docMoveBound;
+    /** Active only while shown: re-runs the empty gate when the slotted content
+     *  changes under a live bubble. See observeContent(). */
+    private contentObserver?;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -76,6 +79,20 @@ export declare class ATooltipElement extends HTMLElementBase {
      *  (so formatting whitespace / an empty conditional doesn't open a blank bubble).
      *  Re-checked on every show(), so a tooltip populated later self-corrects. */
     private isEmpty;
+    /** While shown, watch the slotted content so a bubble whose content is
+     *  cleared out from under it — a reactive re-render dropping the text /
+     *  children under one persistent anchor — self-hides. The mirror of
+     *  isEmpty()'s "populated later self-corrects": the show-time gate can't fire
+     *  again on its own once open, so this drives the reverse.
+     *
+     *  A MutationObserver, not `slotchange`, because reactive renderers update
+     *  text in place — React sets an existing text node's nodeValue rather than
+     *  replacing the node — which changes no assigned-node set and so fires no
+     *  `slotchange`; childList + characterData + subtree catches both that and
+     *  node removal. Observing our own light-DOM children is a READ (like the
+     *  truncation measurements), so it stays within the no-host-mutation rule.
+     *  Runs only while shown — attached here, disconnected by hide() / cleanup(). */
+    private observeContent;
     private positionFrame?;
     private pendingPosition?;
     private schedulePosition;

package/dist/elements/a-tooltip.js

@@ -85,6 +85,9 @@ class ATooltipElement extends HTMLElementBase {
   fading = false;
   fadeTimer;
   docMoveBound = false;
+  /** Active only while shown: re-runs the empty gate when the slotted content
+   *  changes under a live bubble. See observeContent(). */
+  contentObserver;
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
@@ -259,6 +262,28 @@ class ATooltipElement extends HTMLElementBase {
   isEmpty() {
     return this.children.length === 0 && (this.textContent ?? "").trim() === "";
   }
+  /** While shown, watch the slotted content so a bubble whose content is
+   *  cleared out from under it — a reactive re-render dropping the text /
+   *  children under one persistent anchor — self-hides. The mirror of
+   *  isEmpty()'s "populated later self-corrects": the show-time gate can't fire
+   *  again on its own once open, so this drives the reverse.
+   *
+   *  A MutationObserver, not `slotchange`, because reactive renderers update
+   *  text in place — React sets an existing text node's nodeValue rather than
+   *  replacing the node — which changes no assigned-node set and so fires no
+   *  `slotchange`; childList + characterData + subtree catches both that and
+   *  node removal. Observing our own light-DOM children is a READ (like the
+   *  truncation measurements), so it stays within the no-host-mutation rule.
+   *  Runs only while shown — attached here, disconnected by hide() / cleanup(). */
+  observeContent() {
+    if (typeof MutationObserver === "undefined") return;
+    if (!this.contentObserver) {
+      this.contentObserver = new MutationObserver(() => {
+        if (this.shown && this.isEmpty()) this.hide();
+      });
+    }
+    this.contentObserver.observe(this, { childList: true, characterData: true, subtree: true });
+  }
   // --- positioning (sets only the shadow container's own transform) ---
   // Single pending position frame: a burst of mousemoves within one frame
   // coalesces to ONE layout read + transform write, using the LATEST geometry
@@ -353,6 +378,7 @@ class ATooltipElement extends HTMLElementBase {
         this.doc.addEventListener("mousemove", this.onDocMove);
         this.docMoveBound = true;
       }
+      this.observeContent();
     }
     this.position(e);
   };
@@ -361,6 +387,7 @@ class ATooltipElement extends HTMLElementBase {
     if (!this.shown) return;
     this.shown = false;
     this.touchOpen = false;
+    this.contentObserver?.disconnect();
     this.container.hidePopover();
     this.fading = true;
     if (this.fadeTimer !== void 0) clearTimeout(this.fadeTimer);
@@ -391,6 +418,7 @@ class ATooltipElement extends HTMLElementBase {
    *  calls it. */
   cleanup() {
     this.cancelHide();
+    this.contentObserver?.disconnect();
     if (this.shown) {
       this.shown = false;
       this.touchOpen = false;

package/dist/elements/index.d.ts

@@ -32,5 +32,6 @@ export { AMenuGroupElement, register_a_menu_group } from './a-menu-group';
 export { ATabElement, register_a_tab } from './a-tab';
 export { ATabsElement, register_a_tabs } from './a-tabs';
 export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
+export { ADialogElement, register_a_dialog } from './a-dialog';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -17,12 +17,14 @@ import { AMenuGroupElement, register_a_menu_group } from "./a-menu-group";
 import { ATabElement, register_a_tab } from "./a-tab";
 import { ATabsElement, register_a_tabs } from "./a-tabs";
 import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
+import { ADialogElement, register_a_dialog } from "./a-dialog";
 import "./a-title.css";
 import "./a-tag.css";
 export {
   AButtonElement,
   ACalendarElement,
   ACheckboxElement,
+  ADialogElement,
   AExpanderElement,
   AIconElement,
   AInputElement,
@@ -42,6 +44,7 @@ export {
   register_a_button,
   register_a_calendar,
   register_a_checkbox,
+  register_a_dialog,
   register_a_expander,
   register_a_icon,
   register_a_input,

package/dist/general_types.d.ts

@@ -291,6 +291,51 @@ export interface AExpanderAttributes extends BaseAttributes {
         prev: 'open' | 'closed';
     }>) => void;
 }
+/**
+ * Attributes for the `<a-dialog>` custom element — a modal dialog / edge drawer
+ * built on a native `<dialog>` in shadow DOM (top layer, focus trap, backdrop,
+ * Esc from the platform). Slots (light-DOM children): `header`, `footer`,
+ * `close` (the close button), and the default slot for the body. The element
+ * exposes `::part(dialog | header | body | footer | close)`. Low-level
+ * attributes; for the typed JSX wrapper use `Dialog` from `@antadesign/anta`.
+ */
+export interface ADialogAttributes extends BaseAttributes {
+    /** Controlled open state (`'open'` / `'closed'`). Present → controlled: the
+     *  attribute is the source of truth, user dismiss only dispatches the
+     *  cancelable `statechange` event, and the consumer answers by updating it.
+     *  Absent → uncontrolled (use `default-state`). See STATEFUL-COMPONENTS.md. */
+    state?: 'open' | 'closed';
+    /** Initial open state for the uncontrolled mode (`'open'` / `'closed'`); read
+     *  once when the element connects. */
+    'default-state'?: 'open' | 'closed';
+    /** Placement. `center` (default, omit) is a centered modal; `left` / `right` /
+     *  `top` / `bottom` turn it into an edge drawer; `fullscreen` fills the whole
+     *  viewport (no edge gap, no radius). */
+    position?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'fullscreen';
+    /** Corner radius. A side keyword (`top` / `right` / `bottom` / `left`) rounds
+     *  only that edge's two corners at `--dialog-radius`; a length (`round="20px"`)
+     *  or full `border-radius` shorthand rounds all corners at that value; bare
+     *  `round` rounds all corners at `--dialog-radius`. Omit for the position
+     *  default (center rounded, drawers / fullscreen square). */
+    round?: boolean | number | 'top' | 'right' | 'bottom' | 'left' | (string & {});
+    /** Disable light dismiss — Esc + backdrop click no longer close the dialog (it
+     *  closes only via the close button or programmatically). For alert / confirm
+     *  dialogs. Presence-based (`''` on, omit off). */
+    persistent?: boolean | '';
+    /** Uncontrolled trigger name. Any element with `data-dialog-open="{name}"`
+     *  opens this dialog and `data-dialog-close="{name}"` closes it, via a document
+     *  click listener. Ignored in controlled mode. */
+    name?: string;
+    /** Fires before the open state changes — the element dispatches a `cancelable`
+     *  `statechange` `CustomEvent` whose `detail` is `{ next, prev }` in the
+     *  `'open'|'closed'` vocabulary. Uncontrolled, `preventDefault()` vetoes the
+     *  transition. All-lowercase so both renderers bind it (React 19 keeps the case
+     *  after `on`; Preact lowercases). */
+    onstatechange?: (e: CustomEvent<{
+        next: 'open' | 'closed';
+        prev: 'open' | 'closed';
+    }>) => void;
+}
 /**
  * Attributes for the `<a-icon>` custom element. `shape` is typed as
  * `IconShape` (`keyof IconShapes`); the `IconShapes` interface is

package/dist/index.d.ts

@@ -51,6 +51,8 @@ export { InputDate } from './components/InputDate';
 export type { InputDateProps, InputDateChangeAttrs } from './components/InputDate';
 export { InputTime } from './components/InputTime';
 export type { InputTimeProps, InputTimeChangeAttrs } from './components/InputTime';
+export { InputAutocomplete } from './components/InputAutocomplete';
+export type { InputAutocompleteProps } from './components/InputAutocomplete';
 export { buildMonth, getWeekdays, firstDayOfWeek, clampDate, isOutOfRange, parseISODate, parseDateInput, formatDateInput, dateFormatPattern, parseTimeInput, parseDateTimeInput, formatDateTimeInput, dateTimeFormatPattern, usesHour12, } from './calendar-core';
 export type { CalendarDay, CalendarWeekday, CalendarMonth, BuildMonthOptions, ParseDateOptions, } from './calendar-core';
 export { RadioGroup } from './components/RadioGroup';
@@ -63,6 +65,8 @@ export { Tabs } from './components/Tabs';
 export type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
 export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
+export { Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -16,6 +16,7 @@ import { Input } from "./components/Input";
 import { Calendar } from "./components/Calendar";
 import { InputDate } from "./components/InputDate";
 import { InputTime } from "./components/InputTime";
+import { InputAutocomplete } from "./components/InputAutocomplete";
 import {
   buildMonth,
   getWeekdays,
@@ -37,16 +38,19 @@ import { Select, optionsWithSelection } from "./components/Select";
 import { SelectFaceted } from "./components/SelectFaceted";
 import { Tabs } from "./components/Tabs";
 import { TabPanel } from "./components/TabPanel";
+import { Dialog } from "./components/Dialog";
 import { configure } from "./jsx-runtime";
 export {
   Button,
   Calendar,
   Checkbox,
+  Dialog,
   Expander,
   ICON_SHAPES,
   ICON_SYNONYMS,
   Icon,
   Input,
+  InputAutocomplete,
   InputDate,
   InputTime,
   Menu,

package/dist/jsx-runtime.d.ts

@@ -41,7 +41,7 @@ export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -91,4 +91,5 @@ export interface AntaIntrinsicElements {
     'a-tab': ATabAttributes;
     'a-tab-label': BaseAttributes;
     'a-tabpanel': ATabpanelAttributes;
+    'a-dialog': ADialogAttributes;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",