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

package/dist/design-system.css

@@ -977,6 +977,7 @@
     padding: var(--usewc-layout-popover-menu-padding);
     background: var(--usewc-color-popover-menu-background);
     border-radius: var(--usewc-effect-popover-menu-border-radius);
+    box-shadow: var(--usewc-effect-popover-menu-shadow);
 
     @supports (min-block-size: calc-size(fit-content, min(size, 1px))) {
       min-block-size: calc-size(fit-content, min(size, var(--min-size)));
@@ -1059,9 +1060,19 @@
 
   /* use-option's own checkmark now renders in-flow (a slot, not a background-image), so it
    already reserves its own leading space via the shared gap/padding above — no extra reservation
-   needed here. This block only concerns the native [role="menuitemcheckbox"/"menuitemradio"]
-   items, whose checkmark is still theme.css's own background-image on the host. */
-  use-menu :is([role="menuitemcheckbox"], [role="menuitemradio"]),
+   needed here. This block only concerns the native [role="menuitemcheckbox"/"menuitemradio"] and
+   [aria-selected] items, whose checkmark is theme.css's own ::before on the host. */
+  use-menu :is([role="menuitemcheckbox"], [role="menuitemradio"], [aria-selected]) {
+    &:has(+ :where([role="menuitemcheckbox"], [role="menuitemradio"], [aria-selected])),
+    & + :where([role="menuitemcheckbox"], [role="menuitemradio"], [aria-selected]) {
+      padding-inline-start: calc(var(--usewc-layout-input-padding-inline) * 2 + var(--usewc-layout-selector-width));
+
+      use-theme-escape & {
+        all: revert-layer;
+      }
+    }
+  }
+
   use-listbox-input {
     &:has(+ :where([role="menuitemcheckbox"], [role="menuitemradio"])),
     & + :where([role="menuitemcheckbox"], [role="menuitemradio"]) {
@@ -1130,19 +1141,46 @@
   }
 
   /* use-option's own checkmark is themed separately, in icon.css, as a mask on its
-   selected-indicator part rather than a background-image on the host — this rule only concerns
-   the native [aria-checked] menu items, which have no shadow part to target. */
-  use-menu [aria-checked="true"] {
-    background-image: var(--usewc-effect-menu-item-checkmark-background-image, none);
-    /* TODO use logical position */
-    background-position: left var(--usewc-layout-input-padding-inline) center;
-    background-repeat: no-repeat;
-    background-size: var(--usewc-effect-menu-item-checkmark-background-size, 1em);
+   selected-indicator part rather than a ::before on the host — this rule only concerns the
+   native [aria-checked] / [aria-selected] menu items, which have no shadow part to target. The
+   mark is the shared checkmark SVG masked and painted with its own color token (currentColor by
+   default, so it adapts to light/dark on its own), sitting in the leading gutter the
+   padding-reservation block above already carves out. */
+  use-menu :is([aria-checked="true"], [aria-selected="true"]) {
+    position: relative;
+    /* Reserve the gutter unconditionally so the mark never lands on the label, even for a lone
+     marked item with no marked sibling to trigger the adjacency reservation above. */
+    padding-inline-start: calc(var(--usewc-layout-input-padding-inline) * 2 + var(--usewc-layout-selector-width));
 
-    use-theme-escape & {
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: var(--usewc-layout-input-padding-inline);
+      margin-block: auto;
+      inline-size: var(--usewc-layout-menu-item-checkmark-size);
+      block-size: var(--usewc-layout-menu-item-checkmark-size);
+      background-color: var(--usewc-effect-menu-item-checkmark-color, currentColor);
+      mask-image: var(--usewc-effect-menu-item-checkmark-mask-image, var(--usewc-icon-checkmark));
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+
+    use-theme-escape &,
+    use-theme-escape &::before {
       all: revert-layer;
     }
   }
+
+  /* Before it upgrades, a popover-bound use-menu has no [popover] attribute yet — the element
+   injects it in connectedCallback — and isn't :defined, so its slotted items would flash as
+   block content on load. Hide it until then. Once upgraded it's :defined (this rule stops
+   matching) and the injected [popover] keeps it hidden while closed. A standalone always-visible
+   use-menu is hidden only for the few milliseconds until it upgrades. */
+  use-menu:not([popover]):not(:defined) {
+    display: none;
+  }
 }
 
 /* Badge — use-badge.ts ships fixed, literal default styles with no knowledge of the token
@@ -1158,13 +1196,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 +1213,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 & {

package/dist/tokens.css

@@ -238,8 +238,9 @@
   --usewc-layout-dropdown-trigger-icon-size: 1em;
   --usewc-effect-select-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgb(55,65,81)' /%3E%3C/svg%3E");
   --usewc-effect-select-trigger-background-size: 1em;
-  --usewc-effect-menu-item-checkmark-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='rgb(55,65,81)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
-  --usewc-effect-menu-item-checkmark-background-size: 1em;
+  --usewc-effect-menu-item-checkmark-mask-image: var(--usewc-icon-checkmark);
+  --usewc-effect-menu-item-checkmark-color: currentColor;
+  --usewc-layout-menu-item-checkmark-size: var(--usewc-layout-selected-indicator-size);
   --usewc-effect-tree-item-expanded-indicator-mask-image: var(--usewc-icon-caret-block-end);
   --usewc-effect-tree-item-expanded-indicator-color: currentColor;
   --usewc-effect-tree-item-collapsed-indicator-mask-image: var(--usewc-icon-caret-inline-end);
@@ -532,15 +533,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);
@@ -619,6 +619,7 @@
   --usewc-color-popover-menu-background: var(--usewc-color-canvas-background);
   --usewc-color-popover-menu-border: var(--usewc-color-button-base-border-static);
   --usewc-effect-popover-menu-border-radius: var(--usewc-effect-border-radius-8);
+  --usewc-effect-popover-menu-shadow: var(--usewc-effect-surface-shadow);
   --usewc-font-popover-menu-header-size: var(--usewc-font-size-14);
   --usewc-font-popover-menu-header-weight: var(--usewc-font-weight-medium);
   --usewc-color-popover-menu-header-text: var(--usewc-color-gray-400);
@@ -739,7 +740,6 @@
     --usewc-color-range-track-border-hover: var(--usewc-color-gray-600);
     --usewc-color-selector-background-hover: oklch(from var(--usewc-color-gray-700) l c h / 0.5);
     --usewc-effect-select-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgb(229,231,235)' /%3E%3C/svg%3E");
-    --usewc-effect-menu-item-checkmark-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='rgb(229,231,235)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
     --usewc-color-surface-backdrop: oklch(0% 0 0 / 0.6);
     /* "Super light" can't float up on a near-black page — hold the primary's hue and chroma
        but drop the lightness so the tint reads as a dark primary wash instead. */

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.61",
+  "version": "1.0.0-pre.63",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",