@antadesign/anta 0.3.33 → 0.3.35

package/docs/components/checkbox.md

@@ -2,7 +2,9 @@
 
 Checkboxes let users select one or more items from a set, or toggle an option on or off. Use them for multiple independent choices; for a single immediate setting, use a switch instead.
 
-The `Checkbox` wrapper renders an `<a-checkbox>` element that manages its own state. It works both controlled and uncontrolled with `checked` / `defaultChecked` (boolean or `'indeterminate'`) and `onStateChange` for updates.
+Use `defaultChecked` for an initial choice, or pair `checked` with
+`onStateChange` to control it. Pass `'indeterminate'` for a mixed selection,
+such as a parent checkbox whose children have different states.
 
 ## Tone
 
@@ -163,11 +165,9 @@ function ParentChild() {
 
 ## Accessibility
 
-The wrapper sets `role="checkbox"`, and the element keeps `aria-checked`
-(`"true"` / `"false"` / `"mixed"`) in sync. Its light-DOM label supplies the
-accessible name and its hint supplies the accessible description through
-`ElementInternals`; no generated IDs are needed. For a label-less checkbox, pass
-`aria-label`.
+The label names the checkbox for screen readers, and the hint supplies its
+description. Without a visible label, pass `aria-label`. Screen readers
+announce the current state.
 
 Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
 
@@ -192,10 +192,9 @@ Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.
 
 ## Web Component
 
-Use the web component directly when you are not using React or Preact and a native control does not fit.
-
-The focusable host carries the state. Label and hint are light-DOM children that
-the element exposes as its accessible name and description.
+Use `<a-checkbox>` directly outside JSX. Set `role="checkbox"` and `tabindex="0"`
+for keyboard access. Its label and hint supply the accessible name and
+description.
 
 ```html
 <a-checkbox role="checkbox" tabindex="0" name="updates" default-state="checked">

package/docs/components/dialog.md

@@ -1,14 +1,8 @@
 # Dialog
 
-A modal dialog: content that opens above a dimmed overlay and holds focus until
-it's dismissed. The `Dialog` wrapper renders an `<a-dialog>` whose shadow DOM
-wraps a native `<dialog>`, so the top layer (which escapes any `overflow` or
-stacking context on the page), the focus trap, focus return on close, the
-backdrop, and Esc all come from the platform.
-
-It has three optional zones: a `header`, the body (`children`), and a `footer`,
-plus a close button in the top-right corner. Set `position` to make it an edge
-drawer instead.
+Dialog opens content above a dimmed backdrop and keeps focus inside until it
+closes. It has optional header and footer regions, a scrollable body, and a close
+button. Set `position` to use an edge drawer.
 
 ## Zones
 
@@ -19,21 +13,21 @@ when there are no actions. The footer lays its content out in a right-aligned
 row.
 
 ```tsx
-const [open, setOpen] = useState(false)
-
-<Button onClick={() => setOpen(true)}>Open dialog</Button>
+<Button data-dialog-open="zones">Open dialog</Button>
 <Dialog
-  open={open}
-  onStateChange={(_e, { next }) => setOpen(next)}
+  name="zones"
   header={<Title level={4}>Enable telemetry?</Title>}
   footer={
     <>
-      <Button onClick={() => setOpen(false)}>Not now</Button>
-      <Button priority="primary" onClick={() => setOpen(false)}>Enable</Button>
+      <Button data-dialog-close="zones">Not now</Button>
+      <Button priority="primary" data-dialog-close="zones">Enable</Button>
     </>
   }
 >
-  <Text>Anonymous usage data helps us find the bugs that matter.</Text>
+  <Text>
+    Anonymous usage data helps us find the bugs that matter. You can change
+    this any time in settings.
+  </Text>
 </Dialog>
 ```
 
@@ -64,10 +58,9 @@ that thickness. Resize it with a position-scoped `::part(dialog)` rule (see
 
 ## Rounding corners
 
-The centered modal is rounded by default (10px) and drawers are square. `round`
-overrides that. A **side keyword** rounds only that edge's two corners, which
-pairs with a drawer's exposed edge: a bottom sheet takes `round="top"`, a right
-drawer `round="left"`.
+The theme sets the centered modal's default corners. Drawers are square unless
+you pass `round`. A **side keyword** rounds only that edge's two corners: a bottom
+sheet takes `round="top"`, a right drawer `round="left"`.
 
 ```tsx
 <Dialog round={0}>…</Dialog>                        {/* unrounded centered modal */}
@@ -79,10 +72,9 @@ drawer `round="left"`.
 
 A `number` or CSS string sets the amount on all corners; the string may be a full
 `border-radius` shorthand, so `round="12px 12px 0 0"` rounds just the top by 12px
-(a side keyword with a custom amount). Bare `round` rounds all corners at the
-default 10px, handy to round an otherwise-square drawer. Authoring the raw
-`<a-dialog>`, a single length works through the typed `attr()` (`round="20px"`);
-shorthands go through the wrapper's `round` prop.
+(a side keyword with a custom amount). Bare `round` rounds all corners, including
+on a drawer. For raw `<a-dialog>`, use a single length (`round="20px"`). Use the
+wrapper's `round` prop for shorthands.
 
 ## Close button
 
@@ -174,10 +166,22 @@ state: the dialog reopens if `open` is still true. Drive closing through your
 state, setting `open` to `false` in `onStateChange`.
 
 ```tsx
-// controlled
 const [open, setOpen] = useState(false)
-<Button onClick={() => setOpen(true)}>Open</Button>
-<Dialog open={open} onStateChange={(_e, { next }) => setOpen(next)}>…</Dialog>
+
+<Button onClick={() => setOpen(true)}>Open dialog</Button>
+<Dialog
+  open={open}
+  onStateChange={(_e, { next }) => setOpen(next)}
+  header={<Title level={4}>Enable telemetry?</Title>}
+  footer={
+    <>
+      <Button onClick={() => setOpen(false)}>Not now</Button>
+      <Button priority="primary" onClick={() => setOpen(false)}>Enable</Button>
+    </>
+  }
+>
+  <Text>Anonymous usage data helps us find the bugs that matter.</Text>
+</Dialog>
 
 // uncontrolled, veto the close while there are unsaved changes
 <Dialog defaultOpen onStateChange={(e, { next }) => {
@@ -223,8 +227,23 @@ On close, focus returns to whatever opened the dialog, from the native `<dialog>
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
-Slots hold the header, footer, and close control. Add `tabindex="0"` to every
-raw `<a-button>`.
+Slots hold the header, footer, and close control. JSX uses boxless
+`a-dialog-footer` and `a-dialog-close` groups. Raw authors can use those groups
+or assign controls directly to the slots. Existing slot markup remains supported.
+
+The element owns the shadow-native dialog and its runtime state. The native
+`<dialog>` supplies top-layer placement, backdrop, focus containment, focus
+restoration, and Escape handling. It escapes ancestor clipping and stacking
+contexts. The element leaves host attributes and authored children unchanged. Load the element stylesheet
+with the granular entry or load `bundle.css` with the full bundle. Default
+layout and transitions require no injected styles or fixed inline styles.
+Load CSS before opening a dialog, including one with `defaultOpen`. Without it,
+the native modal remains visible and closable, but Anta's layout, boxless region
+groups, close-control placement, and animations are unavailable.
+Application-supplied `style` props and custom `round` amounts can still produce
+style attributes blocked by `style-src-attr 'none'`.
+
+Add `tabindex="0"` to every raw `<a-button>`.
 
 ```html
 <a-button role="button" tabindex="0" data-dialog-open="invite"><a-button-label>Invite teammates</a-button-label></a-button>
@@ -246,9 +265,38 @@ radius). For everything else, style the shadow **parts** in plain CSS.
 
 `<a-dialog>` exposes `::part(dialog)` (the surface), `::part(header)`,
 `::part(body)`, `::part(footer)`, `::part(close)`, and `::part(dialog)::backdrop`
-(the overlay). A `::part` rule wins over the element's internal styles with no
+(the overlay). Defaults live in external CSS. An unlayered consumer rule
+overrides them with no
 `!important`, so the surface, size, radius, shadow, overlay, and zone padding are
-all reachable.
+all reachable. Keep visibility and motion overrides scoped to
+`::part(dialog):modal`; setting `display` on the base part can reveal a closed
+dialog. The native dialog controls closing independently of CSS transitions.
+Entry and exit effects follow the browser's existing `@starting-style`, display,
+and overlay-transition support; reduced motion disables Anta's transitions.
+Surface fades require `::part(dialog):open` support; otherwise the surface stays
+visible without fading. Backdrop fades separately require
+`::part(dialog):modal::backdrop`, keeping static styling when unavailable.
+
+Defaults belong to `anta.components`, within the layer order
+`base, anta, components, utilities`. Put consumer overrides in `components`,
+`utilities`, or unlayered CSS. Overrides in the earlier `base` layer lose to
+Anta's defaults. Previously, outer part rules took precedence over the internal
+shadow stylesheet regardless of their layer.
+
+Optional regions expose CSS states on the host without adding attributes or
+changing part names. Each state is present when its slot has assigned nodes:
+
+| State selector | Assigned slot |
+| --- | --- |
+| `a-dialog:state(has-header)` | `header` |
+| `a-dialog:state(has-footer)` | `footer` |
+
+The header, or the body when no header is present, reserves `52px` of inline-end
+padding for a close control. The example increases the header clearance to
+`64px` when `:has(> [slot="close"])` matches. This selector reads the authored
+close-slot markup directly. Firefox can leave clearance stale when an existing
+child's `slot` attribute changes into or out of `close`; adding or removing a
+close child updates normally.
 
 **Scope the rule to a position (or a class).** A bare `a-dialog::part(dialog)`
 hits every dialog, drawers included, where a `width` override would collapse a
@@ -266,6 +314,9 @@ a-dialog.styled-dialog::part(dialog) {
 a-dialog.styled-dialog::part(dialog)::backdrop {
   background: color-mix(in oklch, black 60%, transparent);
 }
+a-dialog.styled-dialog:has(> [slot="close"])::part(header) {
+  padding-inline-end: 64px;
+}
 ```
 
 More recipes. The centered modal's max size is the viewport minus a 32px edge