@bearmenu/ui 0.8.56 → 0.8.57

package/dist/components/day-rail-chip.d.ts

@@ -49,6 +49,7 @@ type DayRailChipLinkProps = {
     className?: string;
     children: React.ReactNode;
     "aria-current"?: "page";
+    "aria-label"?: string;
     onClick?: () => void;
 };
 type DayRailChipProps = {
@@ -66,8 +67,14 @@ type DayRailChipProps = {
     linkComponent?: React.ComponentType<DayRailChipLinkProps>;
     onClick?: () => void;
     className?: string;
+    /**
+     * The day for assistive tech — "Vineri 13 noiembrie, 12 evenimente". Without
+     * it a screen reader reads the chip's text run together: "Vin 1312", the
+     * date and the count as one number (bearmenu-fe HIG review, 2026-11-10).
+     */
+    "aria-label"?: string;
 };
-declare function DayRailChip({ label, dayNumber, count, isActive, isWeekend, labels, href, linkComponent: LinkComponent, onClick, className, }: DayRailChipProps): react_jsx_runtime.JSX.Element;
+declare function DayRailChip({ label, dayNumber, count, isActive, isWeekend, labels, href, linkComponent: LinkComponent, onClick, className, "aria-label": ariaLabel, }: DayRailChipProps): react_jsx_runtime.JSX.Element;
 type DayRailChipSkeletonProps = {
     className?: string;
 };

package/dist/components/day-rail-chip.js

@@ -17,7 +17,8 @@ function DayRailChip({
   href,
   linkComponent: LinkComponent = DefaultLink,
   onClick,
-  className
+  className,
+  "aria-label": ariaLabel
 }) {
   const hasEvents = count > 0;
   const rootClasses = cn(
@@ -79,6 +80,7 @@ function DayRailChip({
         href,
         className: rootClasses,
         "aria-current": isActive ? "page" : void 0,
+        "aria-label": ariaLabel,
         onClick,
         children: body
       }
@@ -91,12 +93,13 @@ function DayRailChip({
         type: "button",
         className: rootClasses,
         "aria-current": isActive ? "true" : void 0,
+        "aria-label": ariaLabel,
         onClick,
         children: body
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
+  return /* @__PURE__ */ jsx("div", { className: rootClasses, role: ariaLabel ? "group" : void 0, "aria-label": ariaLabel, children: body });
 }
 function DayRailChipSkeleton({ className }) {
   return /* @__PURE__ */ jsx(Skeleton, { "aria-hidden": "true", className: cn("h-[50px] w-[62px] shrink-0", className) });

package/dist/components/weekday-chip.d.ts

@@ -9,17 +9,28 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * over the date, no count — and the rail shares the width equally.
  *
  * Measured from the booking design (`.dchip`): flexes to an equal share, 1px
- * hairline, 11px radius, 7px vertical inset, centred. The weekday at 10px
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 11px
  * uppercase, 0.05em tracking, muted; the date at 15px bold, tabular, 2px
  * below. Selected fills with `--gradient-primary`, white type, the weekday at
  * 75%. A day that cannot be booked (closed, past the window) fades to 40% and
  * is disabled.
+ *
+ * The weekday was 10px, under the HIG's 11pt floor for iPhone text; measured
+ * when the events map took this chip for its week picker (bearmenu-fe,
+ * 2026-11-10). 11px still holds a three-letter weekday in a 46px seventh of a
+ * phone's width.
+ *
+ * `detail` is an optional third line under the date: the events map prints
+ * that day's event count there. A chip without it keeps its booking height.
  */
 type WeekdayChipProps = {
     /** "Mon", "Tue" — already localised; rendered uppercase. */
     weekday: string;
     /** Day of month as displayed — "14". */
     day: string;
+    /** A short line under the date — "12", that day's events. Give the button
+     *  an `aria-label` that says it with its unit; a bare number is unclear. */
+    detail?: string;
     selected?: boolean;
     /** Closed that day or outside the booking window. */
     unavailable?: boolean;
@@ -28,6 +39,6 @@ type WeekdayChipProps = {
     "aria-label"?: string;
     className?: string;
 };
-declare function WeekdayChip({ weekday, day, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: WeekdayChipProps): react_jsx_runtime.JSX.Element;
+declare function WeekdayChip({ weekday, day, detail, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: WeekdayChipProps): react_jsx_runtime.JSX.Element;
 
 export { WeekdayChip, type WeekdayChipProps };

package/dist/components/weekday-chip.js

@@ -5,6 +5,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 function WeekdayChip({
   weekday,
   day,
+  detail,
   selected,
   unavailable,
   onSelect,
@@ -33,13 +34,24 @@ function WeekdayChip({
           "span",
           {
             className: cn(
-              "block text-[10px] tracking-[0.05em] uppercase",
+              "block text-[11px] tracking-[0.05em] uppercase",
               selected ? "text-white/75" : "text-muted-foreground"
             ),
             children: weekday
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[15px] font-bold tabular-nums", children: day })
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[15px] font-bold tabular-nums", children: day }),
+        detail !== void 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "weekday-chip-detail",
+            className: cn(
+              "mt-0.5 block font-mono text-[11px] tabular-nums",
+              selected ? "text-white/85" : "text-muted-foreground"
+            ),
+            children: detail
+          }
+        )
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.56",
+  "version": "0.8.57",
   "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system \u2014 shared UI tokens, primitives, and components",
   "license": "UNLICENSED",

package/src/components/booking-primitives.test.tsx

@@ -82,6 +82,13 @@ describe("WeekdayChip", () => {
     render(<WeekdayChip weekday="Tue" day="11" unavailable />);
     expect(screen.getByRole("button")).toBeDisabled();
   });
+
+  it("prints a detail line under the date only when given one", () => {
+    const { rerender, container } = render(<WeekdayChip weekday="Fri" day="13" detail="12" />);
+    expect(container.querySelector("[data-slot='weekday-chip-detail']")).toHaveTextContent("12");
+    rerender(<WeekdayChip weekday="Fri" day="13" />);
+    expect(container.querySelector("[data-slot='weekday-chip-detail']")).toBeNull();
+  });
 });
 
 describe("HoldCountdown", () => {

package/src/components/day-rail-chip.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DayRailChip } from "./day-rail-chip";
+
+const labels = { noEvents: "no events" };
+
+describe("DayRailChip", () => {
+  // Without a label a screen reader read "Vin 1312": the date and the count
+  // as one number (bearmenu-fe HIG review, 2026-11-10).
+  it("speaks its aria-label instead of its text run together", () => {
+    render(
+      <DayRailChip
+        label="Vin"
+        dayNumber="13"
+        count={12}
+        labels={labels}
+        onClick={() => {}}
+        aria-label="Vineri 13 noiembrie, 12 evenimente"
+      />
+    );
+    expect(
+      screen.getByRole("button", { name: "Vineri 13 noiembrie, 12 evenimente" })
+    ).toBeInTheDocument();
+  });
+
+  it("names a link chip and an inert one the same way", () => {
+    const { rerender } = render(
+      <DayRailChip
+        label="Sâm"
+        dayNumber="14"
+        count={3}
+        labels={labels}
+        href="/ro/cluj-napoca/events?day=2026-11-14"
+        aria-label="Sâmbătă 14 noiembrie, 3 evenimente"
+      />
+    );
+    expect(
+      screen.getByRole("link", { name: "Sâmbătă 14 noiembrie, 3 evenimente" })
+    ).toBeInTheDocument();
+    rerender(
+      <DayRailChip
+        label="Lun"
+        dayNumber="16"
+        count={0}
+        labels={labels}
+        aria-label="Luni 16 noiembrie, niciun eveniment"
+      />
+    );
+    expect(
+      screen.getByRole("group", { name: "Luni 16 noiembrie, niciun eveniment" })
+    ).toBeInTheDocument();
+  });
+
+  it("keeps its text as the name when no label is given", () => {
+    render(<DayRailChip label="Azi" dayNumber="10" count={7} labels={labels} onClick={() => {}} />);
+    expect(screen.getByRole("button")).toHaveTextContent("Azi 107");
+  });
+});

package/src/components/day-rail-chip.tsx

@@ -53,6 +53,7 @@ export type DayRailChipLinkProps = {
   className?: string;
   children: React.ReactNode;
   "aria-current"?: "page";
+  "aria-label"?: string;
   onClick?: () => void;
 };
 
@@ -75,6 +76,12 @@ export type DayRailChipProps = {
   linkComponent?: React.ComponentType<DayRailChipLinkProps>;
   onClick?: () => void;
   className?: string;
+  /**
+   * The day for assistive tech — "Vineri 13 noiembrie, 12 evenimente". Without
+   * it a screen reader reads the chip's text run together: "Vin 1312", the
+   * date and the count as one number (bearmenu-fe HIG review, 2026-11-10).
+   */
+  "aria-label"?: string;
 };
 
 export function DayRailChip({
@@ -88,6 +95,7 @@ export function DayRailChip({
   linkComponent: LinkComponent = DefaultLink,
   onClick,
   className,
+  "aria-label": ariaLabel,
 }: DayRailChipProps) {
   const hasEvents = count > 0;
 
@@ -160,6 +168,7 @@ export function DayRailChip({
         href={href}
         className={rootClasses}
         aria-current={isActive ? "page" : undefined}
+        aria-label={ariaLabel}
         onClick={onClick}
       >
         {body}
@@ -176,6 +185,7 @@ export function DayRailChip({
         // toggle semantic was right; it now navigates, and this is the current
         // day in a set of days.
         aria-current={isActive ? "true" : undefined}
+        aria-label={ariaLabel}
         onClick={onClick}
       >
         {body}
@@ -183,7 +193,13 @@ export function DayRailChip({
     );
   }
 
-  return <div className={rootClasses}>{body}</div>;
+  // An inert day has no role to carry a label; `role="group"` gives the name
+  // somewhere to live without inventing an interaction.
+  return (
+    <div className={rootClasses} role={ariaLabel ? "group" : undefined} aria-label={ariaLabel}>
+      {body}
+    </div>
+  );
 }
 
 export type DayRailChipSkeletonProps = {

package/src/components/weekday-chip.stories.tsx

@@ -22,6 +22,10 @@ type Story = StoryObj<typeof WeekdayChip>;
 export const Default: Story = { args: { weekday: "Mon", day: "10" } };
 export const Selected: Story = { args: { weekday: "Fri", day: "14", selected: true } };
 export const Unavailable: Story = { args: { weekday: "Tue", day: "11", unavailable: true } };
+/** The events map's week picker: the day's event count under the date. */
+export const WithDetail: Story = {
+  args: { weekday: "Fri", day: "13", detail: "12", "aria-label": "Friday 13 November, 12 events" },
+};
 
 const WEEK = [
   ["Mon", "10"],

package/src/components/weekday-chip.tsx

@@ -12,11 +12,19 @@ import { cn } from "../lib/utils";
  * over the date, no count — and the rail shares the width equally.
  *
  * Measured from the booking design (`.dchip`): flexes to an equal share, 1px
- * hairline, 11px radius, 7px vertical inset, centred. The weekday at 10px
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 11px
  * uppercase, 0.05em tracking, muted; the date at 15px bold, tabular, 2px
  * below. Selected fills with `--gradient-primary`, white type, the weekday at
  * 75%. A day that cannot be booked (closed, past the window) fades to 40% and
  * is disabled.
+ *
+ * The weekday was 10px, under the HIG's 11pt floor for iPhone text; measured
+ * when the events map took this chip for its week picker (bearmenu-fe,
+ * 2026-11-10). 11px still holds a three-letter weekday in a 46px seventh of a
+ * phone's width.
+ *
+ * `detail` is an optional third line under the date: the events map prints
+ * that day's event count there. A chip without it keeps its booking height.
  */
 
 export type WeekdayChipProps = {
@@ -24,6 +32,9 @@ export type WeekdayChipProps = {
   weekday: string;
   /** Day of month as displayed — "14". */
   day: string;
+  /** A short line under the date — "12", that day's events. Give the button
+   *  an `aria-label` that says it with its unit; a bare number is unclear. */
+  detail?: string;
   selected?: boolean;
   /** Closed that day or outside the booking window. */
   unavailable?: boolean;
@@ -36,6 +47,7 @@ export type WeekdayChipProps = {
 export function WeekdayChip({
   weekday,
   day,
+  detail,
   selected,
   unavailable,
   onSelect,
@@ -63,13 +75,24 @@ export function WeekdayChip({
     >
       <span
         className={cn(
-          "block text-[10px] tracking-[0.05em] uppercase",
+          "block text-[11px] tracking-[0.05em] uppercase",
           selected ? "text-white/75" : "text-muted-foreground"
         )}
       >
         {weekday}
       </span>
       <span className="mt-0.5 block text-[15px] font-bold tabular-nums">{day}</span>
+      {detail !== undefined && (
+        <span
+          data-slot="weekday-chip-detail"
+          className={cn(
+            "mt-0.5 block font-mono text-[11px] tabular-nums",
+            selected ? "text-white/85" : "text-muted-foreground"
+          )}
+        >
+          {detail}
+        </span>
+      )}
     </button>
   );
 }