@antadesign/anta 0.3.5 → 0.3.6

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.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",