use-wc 1.0.0-pre.60 → 1.0.0-pre.61

package/custom-elements.json

@@ -89,149 +89,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-badge/use-badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`use-badge` renders a small indicator anchored to another element's corner, using\n[CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)\ninstead of the classic `position: absolute` + negative-offset trick. This lets the badge live\nanywhere in the DOM rather than being a child of the element it decorates. A badge's shape,\ncolor, and positioning ship built in — reading from the design system's tokens when\n`tokens.css` is loaded, and falling back to sensible defaults otherwise — so no theme is\nrequired to get a working, visible badge.\n\nPoint a badge at its target with the `anchortarget` attribute, set to the target's `id`\n(named to avoid colliding with the `anchor` content attribute HTML is gaining natively):\n\n```html\n<button type=\"button\" id=\"inbox\">Inbox</button>\n<use-badge anchortarget=\"inbox\">99+</use-badge>\n```\n\nThe badge and its anchor must live in the same DOM tree — a badge cannot reach an anchor\ninside another component's shadow root, and an anchor's `anchor-name` set inside a shadow\ntree's stylesheet is not visible here. No positioned ancestor or shared containing block is\nrequired: anchor positioning resolves the badge's location straight from the anchor's own\ngeometry, so the badge can sit anywhere else in the DOM tree.\n\nWithout a resolved anchor — `anchortarget` unset, pointing at a missing id, or `anchorElement`\nnever assigned — the badge has no `:state(anchored)` and renders as a plain inline chip in\nnormal document flow, still using the same color/shape styling.\n\nSome components render their host as `display: contents`, which has no box of its own for CSS\nanchor positioning to resolve against. If the anchor computes a non-empty `--usewc-anchor-name`\ncustom property, the badge uses that dashed-ident as its `position-anchor` directly instead of\ngenerating and writing its own onto the anchor — letting a component publish the name of a\nreal, box-generating part of itself (already established for its own purposes) for badges to\ntarget instead of its host, even though that part lives inside the component's own shadow root.\nThis mechanism is shared with `use-menu`/`use-anchored` via `AnchorController`; components\nwithout a `display: contents` host don't need to publish anything.\n\n**Known Firefox limitation:** anchoring across a shadow root boundary this way — the case\n`--usewc-anchor-name` exists for — is mispositioned in Firefox as of this writing. Verified\ndirectly: `anchor()`'s logical `start`/`end` keywords resolve backwards on both axes\nspecifically for a cross-shadow-root anchor reference, in Firefox only — the same anchor()\ncalls resolve correctly for a same-tree anchor in Firefox, and cross-shadow anchoring resolves\ncorrectly in Chromium and Safari. A badge anchored to a plain element (button, input, anything\nthat isn't itself relying on this escape hatch) is unaffected in every engine, including\nFirefox.\n\n## Side effects\n\nThe badge is a sibling of its anchor rather than a child, so **as a side effect, a badge\nmutates its anchor element**: it appends its own id to the anchor's `aria-describedby`\n(preserving any ids already there, the same way `anchor-name` is appended rather than\nreplaced) to keep its content connected to the anchor for assistive technology. This means a\nbadge's content, or its `aria-label` when set, is announced as part of interacting with the\nanchor, e.g. \"Inbox button, 3\". A `dot` badge has no content of its own, so set `aria-label`\ndirectly on `<use-badge>` for a meaningful description (e.g. `aria-label=\"3 unread messages\"`);\nwithout one, the description contributes nothing and the anchor announces as before.\n\nAvoid adding `aria-hidden` to `<use-badge>` if you rely on this: while the description\ncomputation is specified to still read a hidden node when it's the direct target of\n`aria-describedby`, support for that specific case is inconsistent across browsers and screen\nreaders.\n\nSet `options=\"noaria\"` to opt a badge out of this and leave the anchor's `aria-describedby`\nuntouched, e.g. when the anchor already documents the badge's meaning some other way.",
-          "name": "UseBadge",
-          "slots": [
-            {
-              "description": "Badge content, e.g. a count or short label. Ignored when `dot` is set.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "anchortarget",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "anchortarget",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "dot",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "blockalign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"start\"",
-              "attribute": "blockalign",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inlinealign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"end\"",
-              "attribute": "inlinealign",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "options",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "options",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "anchorElement",
-              "description": "The element this badge is anchored to. Reading returns whatever element was last resolved,\neither from the `anchortarget` id or set here directly. Setting it anchors to that element\ninstead of resolving `anchortarget`, for cases where the target has no id to reference."
-            }
-          ],
-          "attributes": [
-            {
-              "description": "Id of the element to anchor to, resolved in the badge's own tree.",
-              "name": "anchortarget",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "anchortarget"
-            },
-            {
-              "description": "Renders as a fixed-size dot instead of the slotted content.",
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dot"
-            },
-            {
-              "description": "`\"start\" | \"end\"`: Aligns the badge along the block axis relative to its anchor.",
-              "name": "blockalign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"start\"",
-              "fieldName": "blockalign"
-            },
-            {
-              "description": "`\"start\" | \"end\"`: Aligns the badge along the inline axis relative to its anchor.",
-              "name": "inlinealign",
-              "type": {
-                "text": "\"start\" | \"end\""
-              },
-              "default": "\"end\"",
-              "fieldName": "inlinealign"
-            },
-            {
-              "description": "Space-separated feature flags. `noaria` opts out of the automatic `aria-describedby` wiring described above.",
-              "name": "options",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "options"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseBadge",
-          "declaration": {
-            "name": "UseBadge",
-            "module": "src/elements/use-badge/use-badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-badge",
-          "declaration": {
-            "name": "UseBadge",
-            "module": "src/elements/use-badge/use-badge.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-calendar-base/use-calendar-base.ts",
@@ -631,8 +488,151 @@
           "kind": "js",
           "name": "UseCalendarBase",
           "declaration": {
-            "name": "UseCalendarBase",
-            "module": "src/elements/use-calendar-base/use-calendar-base.ts"
+            "name": "UseCalendarBase",
+            "module": "src/elements/use-calendar-base/use-calendar-base.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-badge/use-badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`use-badge` renders a small indicator anchored to another element's corner, using\n[CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)\ninstead of the classic `position: absolute` + negative-offset trick. This lets the badge live\nanywhere in the DOM rather than being a child of the element it decorates. A badge's shape,\ncolor, and positioning ship built in — reading from the design system's tokens when\n`tokens.css` is loaded, and falling back to sensible defaults otherwise — so no theme is\nrequired to get a working, visible badge.\n\nPoint a badge at its target with the `anchortarget` attribute, set to the target's `id`\n(named to avoid colliding with the `anchor` content attribute HTML is gaining natively):\n\n```html\n<button type=\"button\" id=\"inbox\">Inbox</button>\n<use-badge anchortarget=\"inbox\">99+</use-badge>\n```\n\nThe badge and its anchor must live in the same DOM tree — a badge cannot reach an anchor\ninside another component's shadow root, and an anchor's `anchor-name` set inside a shadow\ntree's stylesheet is not visible here. No positioned ancestor or shared containing block is\nrequired: anchor positioning resolves the badge's location straight from the anchor's own\ngeometry, so the badge can sit anywhere else in the DOM tree.\n\nWithout a resolved anchor — `anchortarget` unset, pointing at a missing id, or `anchorElement`\nnever assigned — the badge has no `:state(anchored)` and renders as a plain inline chip in\nnormal document flow, still using the same color/shape styling.\n\nSome components render their host as `display: contents`, which has no box of its own for CSS\nanchor positioning to resolve against. If the anchor computes a non-empty `--usewc-anchor-name`\ncustom property, the badge uses that dashed-ident as its `position-anchor` directly instead of\ngenerating and writing its own onto the anchor — letting a component publish the name of a\nreal, box-generating part of itself (already established for its own purposes) for badges to\ntarget instead of its host, even though that part lives inside the component's own shadow root.\nThis mechanism is shared with `use-menu`/`use-anchored` via `AnchorController`; components\nwithout a `display: contents` host don't need to publish anything.\n\n**Known Firefox limitation:** anchoring across a shadow root boundary this way — the case\n`--usewc-anchor-name` exists for — is mispositioned in Firefox as of this writing. Verified\ndirectly: `anchor()`'s logical `start`/`end` keywords resolve backwards on both axes\nspecifically for a cross-shadow-root anchor reference, in Firefox only — the same anchor()\ncalls resolve correctly for a same-tree anchor in Firefox, and cross-shadow anchoring resolves\ncorrectly in Chromium and Safari. A badge anchored to a plain element (button, input, anything\nthat isn't itself relying on this escape hatch) is unaffected in every engine, including\nFirefox.\n\n## Side effects\n\nThe badge is a sibling of its anchor rather than a child, so **as a side effect, a badge\nmutates its anchor element**: it appends its own id to the anchor's `aria-describedby`\n(preserving any ids already there, the same way `anchor-name` is appended rather than\nreplaced) to keep its content connected to the anchor for assistive technology. This means a\nbadge's content, or its `aria-label` when set, is announced as part of interacting with the\nanchor, e.g. \"Inbox button, 3\". A `dot` badge has no content of its own, so set `aria-label`\ndirectly on `<use-badge>` for a meaningful description (e.g. `aria-label=\"3 unread messages\"`);\nwithout one, the description contributes nothing and the anchor announces as before.\n\nAvoid adding `aria-hidden` to `<use-badge>` if you rely on this: while the description\ncomputation is specified to still read a hidden node when it's the direct target of\n`aria-describedby`, support for that specific case is inconsistent across browsers and screen\nreaders.\n\nSet `options=\"noaria\"` to opt a badge out of this and leave the anchor's `aria-describedby`\nuntouched, e.g. when the anchor already documents the badge's meaning some other way.",
+          "name": "UseBadge",
+          "slots": [
+            {
+              "description": "Badge content, e.g. a count or short label. Ignored when `dot` is set.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "anchortarget",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "anchortarget",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "dot",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "blockalign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "attribute": "blockalign",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"end\"",
+              "attribute": "inlinealign",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "options",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "anchorElement",
+              "description": "The element this badge is anchored to. Reading returns whatever element was last resolved,\neither from the `anchortarget` id or set here directly. Setting it anchors to that element\ninstead of resolving `anchortarget`, for cases where the target has no id to reference."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Id of the element to anchor to, resolved in the badge's own tree.",
+              "name": "anchortarget",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "anchortarget"
+            },
+            {
+              "description": "Renders as a fixed-size dot instead of the slotted content.",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dot"
+            },
+            {
+              "description": "`\"start\" | \"end\"`: Aligns the badge along the block axis relative to its anchor.",
+              "name": "blockalign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "fieldName": "blockalign"
+            },
+            {
+              "description": "`\"start\" | \"end\"`: Aligns the badge along the inline axis relative to its anchor.",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"end\"",
+              "fieldName": "inlinealign"
+            },
+            {
+              "description": "Space-separated feature flags. `noaria` opts out of the automatic `aria-describedby` wiring described above.",
+              "name": "options",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "options"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseBadge",
+          "declaration": {
+            "name": "UseBadge",
+            "module": "src/elements/use-badge/use-badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-badge",
+          "declaration": {
+            "name": "UseBadge",
+            "module": "src/elements/use-badge/use-badge.ts"
           }
         }
       ]
@@ -767,6 +767,132 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-date-input/use-date-input.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.",
+          "name": "UseDateInput",
+          "members": [
+            {
+              "kind": "field",
+              "name": "yearInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "monthInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dayInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "readOnly",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "YYYY-MM-DD",
+              "attribute": "value"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "YYYY-MM-DD",
+              "fieldName": "value"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
+          },
+          "tagName": "use-date-input",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseDateInput",
+          "declaration": {
+            "name": "UseDateInput",
+            "module": "src/elements/use-date-input/use-date-input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-date-input",
+          "declaration": {
+            "name": "UseDateInput",
+            "module": "src/elements/use-date-input/use-date-input.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-picker/use-date-picker.ts",
@@ -1430,132 +1556,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-date-input/use-date-input.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.",
-          "name": "UseDateInput",
-          "members": [
-            {
-              "kind": "field",
-              "name": "yearInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "monthInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dayInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "id"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "readOnly",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "readonly"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "YYYY-MM-DD",
-              "attribute": "value"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "disabled"
-            },
-            {
-              "name": "readonly",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "readOnly"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "YYYY-MM-DD",
-              "fieldName": "value"
-            },
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "lang",
-              "inheritedFrom": {
-                "name": "UseLocaleElement",
-                "module": "src/elements/use-locale-element/use-locale-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "UseLocaleElement",
-            "module": "/src/elements/use-locale-element/use-locale-element"
-          },
-          "tagName": "use-date-input",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseDateInput",
-          "declaration": {
-            "name": "UseDateInput",
-            "module": "src/elements/use-date-input/use-date-input.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-date-input",
-          "declaration": {
-            "name": "UseDateInput",
-            "module": "src/elements/use-date-input/use-date-input.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-datetime-input/use-datetime-input.ts",

package/dist/design-system.css

@@ -1810,7 +1810,7 @@
 }
 
 /* Popover — a native `[popover]` element already provides the overlay mechanics (top-layer
-   promotion, light-dismiss, `::backdrop`) for free. Themed by default, like the rest of this
+   promotion, light-dismiss) for free. Themed by default, like the rest of this
    family's native elements — `:not(.appearance-native)` is the escape hatch, matching
    `input.css`/`select.css`'s convention, not an opt-in class like `dialog.drawer` (a `<dialog>`
    needs a class for that one variant since plain and drawer dialogs share one tag; `[popover]`
@@ -1819,6 +1819,11 @@
    otherwise — this only replaces the UA default chrome with the shared `surface` tokens,
    matching `dialog`/`use-card`.
 
+   The `::backdrop` is deliberately left at its transparent UA default: a `[popover]` at
+   `popover="auto"` is non-modal — the page stays interactive and an outside click dismisses it
+   — so a tint would misrepresent it as modal. That backdrop tint lives in `dialog.css`, where
+   `showModal()` makes it real.
+
    `:not(use-menu)` excludes the one component that self-applies `popover="auto"` and ships its
    own distinct chrome in `menu.css`: cascade layers always beat specificity, so without this
    exclusion `use-menu:popover-open`'s more specific rule would still lose to this layer, which
@@ -1840,14 +1845,6 @@
       all: revert-layer;
     }
   }
-
-  [popover]:not(use-menu, .appearance-native)::backdrop {
-    background: var(--usewc-color-surface-backdrop);
-
-    use-theme-escape & {
-      all: revert-layer;
-    }
-  }
 }
 
 /* Shell — `use-shell` is a theme-only tag (no registration, styled by tag name like
@@ -1910,11 +1907,25 @@
 
 /* Surface regions — header/poster/footer styling shared by the three surface hosts (`dialog`,
    `use-card`, `[popover]`), scoped to them specifically rather than to bare `use-shell`: this is
-   a surface-family visual convention (avatar sizing, trailing-action pinning, a footer rule),
-   not something every generic `use-shell` consumer elsewhere in the app should inherit.
+   a surface-family visual convention (the anchored-gap offset, avatar sizing, trailing-action
+   pinning, a footer rule), not something every generic `use-shell` consumer should inherit.
    Everything here rides on top of `shell.css`'s flex mechanic — this only adds padding, gaps,
    and per-region treatment. */
 @layer use-theme.surface {
+  /* An anchored surface keeps a small gap from its anchor, the same convention `use-menu`
+     follows in `menu.css`. Scoped to `use-anchored`'s direct child — the one reliable "this is
+     anchored" signal — so a standalone `[popover]` or modal `<dialog>` elsewhere keeps its UA
+     centering. `margin-block` (both edges) so the gap survives a `position-try` flip to the
+     other side. The open-state check mirrors the positioning util: `:popover-open` for a
+     popover, `[open]` for a `<dialog>`. */
+  use-anchored > :is(dialog, [popover]):not(use-menu, .appearance-native):is([open], :popover-open) {
+    margin-block: var(--usewc-layout-surface-anchor-offset);
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+  }
+
   :is(dialog:not(.appearance-native), use-card, [popover]:not(use-menu, .appearance-native)) > figure {
     margin: 0;
 

package/dist/tokens.css

@@ -612,7 +612,7 @@
   --usewc-color-popover-menu-item-background-hover: var(--usewc-color-selector-background-hover);
   --usewc-color-popover-menu-item-background-active: var(--usewc-color-selector-background-hover);
   --usewc-effect-popover-menu-item-border-radius: var(--usewc-effect-border-radius-4);
-  --usewc-layout-popover-menu-anchor-offset: var(--usewc-space-4);
+  --usewc-layout-popover-menu-anchor-offset: var(--usewc-layout-surface-anchor-offset);
   --usewc-layout-popover-menu-padding: var(--usewc-space-4);
   --usewc-layout-popover-menu-border: var(--usewc-space-1-relative);
   --usewc-effect-popover-menu-border-style: var(--usewc-effect-border-solid);
@@ -639,11 +639,13 @@
   --usewc-font-code-size: var(--usewc-font-size-14);
 
   /* Surface — shared by every surface host (dialog, use-card, [popover]): the visible chrome
-     (background/border/radius/shadow), the backdrop behind an overlaid one, and the internal
-     header/poster/footer region layout they all apply the same way. */
+     (background/border/radius/shadow), the backdrop behind a modal `<dialog>` (non-modal
+     `[popover]` keeps its transparent UA backdrop), the gap an anchored surface keeps from its
+     anchor, and the internal header/poster/footer region layout they all apply the same way. */
   --usewc-color-surface-background: var(--usewc-color-canvas-background);
   --usewc-color-surface-border: var(--usewc-color-button-base-border-static);
   --usewc-color-surface-backdrop: oklch(0% 0 0 / 0.4);
+  --usewc-layout-surface-anchor-offset: var(--usewc-space-4);
   --usewc-layout-surface-border: var(--usewc-space-1);
   --usewc-effect-surface-border-radius: var(--usewc-effect-border-radius-8);
   --usewc-effect-surface-shadow: var(--usewc-effect-shadow-raised);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.60",
+  "version": "1.0.0-pre.61",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",

package/vscode.html-custom-data.json

@@ -63,6 +63,17 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "use-date-input",
+      "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
+      "attributes": [
+        { "name": "disabled", "values": [] },
+        { "name": "readonly", "values": [] },
+        { "name": "value", "values": [] },
+        { "name": "lang", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "use-date-picker",
       "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n\nCustomize day rendering on an instance:\n```ts\ndatePicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyDatePicker extends UseDatePicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Methods:**\n - **renderDay(data: _{ day: number; date: string }_, _html: _LitHtml_): _TemplateResult | string_** - See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
@@ -96,17 +107,6 @@
       ],
       "references": []
     },
-    {
-      "name": "use-date-input",
-      "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
-      "attributes": [
-        { "name": "disabled", "values": [] },
-        { "name": "readonly", "values": [] },
-        { "name": "value", "values": [] },
-        { "name": "lang", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "use-datetime-input",
       "description": "Displays a date and time picker by combining `use-date` and `use-time`.\n\nThe value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.\n---\n",