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

package/custom-elements.json

@@ -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

@@ -1158,13 +1158,16 @@
 @layer use-theme.badge {
   use-badge {
     --usewc-layout-badge-offset: calc(var(--usewc-layout-badge-dot-size) / 3);
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     line-height: 1.5;
     border-radius: var(--usewc-effect-badge-border-radius);
     background: var(--usewc-color-badge-background-static);
     color: var(--usewc-color-badge-text-static);
     font-size: var(--usewc-font-badge-size);
     font-weight: var(--usewc-font-badge-weight);
+    font-variant-numeric: tabular-nums;
     border: var(--usewc-layout-badge-border) solid var(--usewc-color-badge-border);
 
     use-theme-escape & {
@@ -1172,8 +1175,16 @@
     }
   }
 
+  /* A content badge is at least as wide as it is tall — `block-size: 1lh` fixes the height to
+     one line so a longer count can't grow it, `min-inline-size: 1lh` makes a single-glyph badge
+     a circle, and a longer count grows the width out into a pill while the height holds.
+     `tabular-nums` above keeps every digit the same advance width, so `1` and `8`, or `11` and
+     `88`, are identical in size. The inline padding is `em`-relative and small enough that a
+     one-digit count still clears the `1lh` floor rather than widening past it. */
   use-badge:not([dot]) {
     --usewc-layout-badge-offset: 0.5lh;
+    block-size: 1lh;
+    min-inline-size: 1lh;
     padding-inline: var(--usewc-layout-badge-padding-inline);
 
     use-theme-escape & {
@@ -1810,7 +1821,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 +1830,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 +1856,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 +1918,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

@@ -532,15 +532,14 @@
   --usewc-font-button-extra-large-size: var(--usewc-font-size-20);
   --usewc-layout-button-extra-large-line-height: var(--usewc-line-height-32);
 
-  /* Badge */
-  --usewc-color-badge-background-static: var(--usewc-color-brand-accent);
-  /* Scaled rather than a fixed white/black: the accent is light enough (2.99:1 with white text,
-     vs. 7.03:1 with black) that a static color would misjudge it, and would silently stop
-     matching if the accent itself is ever overridden. */
-  --usewc-color-badge-text-static: contrast-color(var(--usewc-color-badge-background-static));
+  /* Badge — a rose fill with white text: a warm pink-red that stays clear of the danger red's
+     hue and the primary blue, so a count badge doesn't read as an error or a button. The fill
+     is a fixed shade in both themes (like the primary/danger fills), so no dark-mode override
+     is needed. */
+  --usewc-color-badge-background-static: oklch(0.62 0.2 12);
+  --usewc-color-badge-text-static: var(--usewc-color-white);
   --usewc-color-badge-border: var(--usewc-color-document-background);
-  --usewc-layout-badge-padding-inline: var(--usewc-space-6);
-  --usewc-layout-badge-min-size: var(--usewc-space-16);
+  --usewc-layout-badge-padding-inline: var(--usewc-space-4-relative);
   --usewc-layout-badge-dot-size: var(--usewc-space-12);
   --usewc-layout-badge-border: var(--usewc-space-1);
   --usewc-font-badge-size: var(--usewc-font-size-12);
@@ -612,7 +611,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 +638,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/dist/use-wc.mjs

@@ -4471,21 +4471,22 @@ let UseBadge = class UseBadge extends LitElement {
       align-items: center;
       justify-content: center;
       box-sizing: border-box;
-      min-inline-size: 1rem;
-      min-block-size: 1rem;
-      padding-inline: 0.375rem;
+      padding-inline: 0.25em;
       border-radius: 9999px;
       background: CanvasText;
       border: 1px solid currentColor;
       color: Canvas;
       font-size: 0.75rem;
       font-weight: 500;
-      line-height: 1;
+      line-height: 1.5;
+      font-variant-numeric: tabular-nums;
       white-space: nowrap;
     }
 
     :host(:not([dot])) {
       --usewc-badge-offset: 0.5lh;
+      block-size: 1lh;
+      min-inline-size: 1lh;
     }
 
     :host(:state(anchored)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.60",
+  "version": "1.0.0-pre.62",
   "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",