@pathscale/ui 3.0.0 → 3.2.0

package/README.md

@@ -28,7 +28,7 @@ yarn add @pathscale/ui solid-layouts && yarn add -D rsbuild-plugin-solid-layouts
 
 ## Setup
 
-`@pathscale/ui` 2.x is a compiled Layout bundle. Configure the application compiler before
+`@pathscale/ui` 3.x is a compiled Layout bundle. Configure the application compiler before
 Solid transforms JSX:
 
 ```ts
@@ -58,11 +58,22 @@ import "@pathscale/ui/index.css";
 
 export const Example = () => (
   <Flex direction="col" gap="sm">
-    <Button variant="primary" size="md">Primary</Button>
+    <Button variant="solid" flavor="primary" size="md">Primary</Button>
   </Flex>
 );
 ```
 
+In the application's Tailwind v4 stylesheet, register the package as a source
+(adjust the relative path from that stylesheet):
+
+```css
+@source "../node_modules/@pathscale/ui";
+```
+
+This includes the published `dist/responsive-classes.txt` scanner input. Grid and
+Flex compose responsive classes at runtime, so scanning only the compiled JavaScript
+misses utilities such as `md:grid-cols-3`.
+
 ## Theming
 
 Two themes ship with the library: `light` (the default when no attribute is set) and `dark`.

package/dist/components/accordion/Accordion.css

@@ -93,19 +93,42 @@
     transform: rotate(-180deg);
   }
 
+  /*
+   * A closed panel is out of the page, not merely flattened.
+   *
+   * `keepMounted` is the default, so a closed panel stays in the document, and
+   * it carried `aria-hidden="true"` while its contents kept `visibility:
+   * visible`. Nothing under `grid-template-rows: 0fr` and `opacity: 0` is
+   * display:none, so every link and button inside a closed panel was still in
+   * the tab order: Tab moved focus into a panel nobody can see, into an
+   * `aria-hidden` subtree, which is the one thing `aria-hidden` must never
+   * contain.
+   *
+   * `visibility: hidden` is what takes the descendants out of both the tab
+   * order and the accessibility tree, and it is delayed by the length of the
+   * collapse so the animation still plays before the panel disappears. Opening
+   * drops the delay, so the panel is visible for the whole of the expansion.
+   */
   .accordion__content {
     display: grid;
     grid-template-rows: 0fr;
     opacity: 0;
     overflow: hidden;
+    visibility: hidden;
     transition:
       grid-template-rows 200ms ease,
-      opacity 200ms ease;
+      opacity 200ms ease,
+      visibility 0s linear 200ms;
   }
 
   .accordion__content--expanded {
     grid-template-rows: 1fr;
     opacity: 1;
+    visibility: visible;
+    transition:
+      grid-template-rows 200ms ease,
+      opacity 200ms ease,
+      visibility 0s linear 0s;
   }
 
   .accordion__body {

package/dist/components/alert/Alert.css

@@ -5,6 +5,14 @@
    * Same shape as Button: flavor or state picks --alert-accent and the
    * variant decides how it is spent. State is declared second so it wins on
    * source order — a reported condition outranks a styling preference.
+   *
+   * --alert-accent-ink carries the same split Button needed: the accent as a
+   * surface and the accent as ink are not the same colour when the flavor is
+   * `neutral`, whose accent is --color-base-300, the page one step darker.
+   * `plain` is the variant that writes the accent straight onto the page, so
+   * `variant="plain" flavor="neutral"` was unreadable for exactly the reason a
+   * neutral outline Button was invisible. Ink defaults to the accent, so only
+   * `neutral` overrides it.
    * --------------------------------------------------------------------- */
   .alert {
     display: flex;
@@ -20,6 +28,7 @@
 
     --alert-accent: var(--color-base-300);
     --alert-accent-fg: var(--color-base-content);
+    --alert-accent-ink: var(--alert-accent);
     --alert-bg: var(--color-base-200);
     --alert-fg: var(--color-base-content);
     --alert-border: transparent;
@@ -33,6 +42,7 @@
   .alert--flavor-neutral {
     --alert-accent: var(--color-base-300);
     --alert-accent-fg: var(--color-base-content);
+    --alert-accent-ink: var(--color-base-content);
   }
   .alert--flavor-primary {
     --alert-accent: var(--color-primary);
@@ -96,7 +106,7 @@
 
   .alert--plain {
     --alert-bg: transparent;
-    --alert-fg: var(--alert-accent);
+    --alert-fg: var(--alert-accent-ink);
     --alert-border: transparent;
     padding: 0;
   }

package/dist/components/auth-field-group/AuthFieldGroup.css

@@ -5,15 +5,23 @@
     flex-direction: column;
   }
 
+  /*
+   * The same three gaps `Flex` names.
+   *
+   * `md` and `lg` already matched `gap-4` and `gap-6`; `sm` was 0.75rem where
+   * Flex's is 0.5rem. One name meaning two spacings is the kind of thing an
+   * application fixes with a corrective class once per form, forever -- and it
+   * is the same defect `--control-h-*` was added for, one axis over.
+   */
   .auth-field-group--sm {
-    gap: 0.75rem;
+    gap: var(--gap-sm);
   }
 
   .auth-field-group--md {
-    gap: 1rem;
+    gap: var(--gap-md);
   }
 
   .auth-field-group--lg {
-    gap: 1.5rem;
+    gap: var(--gap-lg);
   }
 }

package/dist/components/button/Button.css

@@ -2,10 +2,31 @@
   /* -----------------------------------------------------------------------
    * Root
    *
-   * Two custom properties carry the whole state x variant cross product:
+   * Three custom properties carry the whole state x variant cross product:
    * a state sets --button-accent (and its readable foreground), and a variant
    * decides how that accent is spent. 8 states + 5 variants = 13 rules
    * instead of 40 combinations.
+   *
+   * The third is --button-accent-ink, and it exists because the accent is two
+   * different things depending on how a variant spends it. `solid` paints the
+   * accent as a *surface* and writes on it with --button-accent-fg; `outline`,
+   * `soft` and `plain` paint the accent as *ink*, on the page's own surface.
+   * Seven flavors set an accent that works either way. `neutral` sets
+   * --color-base-300, which is a surface token by construction: it is the page
+   * one step darker.
+   *
+   * So `variant="outline" flavor="neutral"` resolved label and border alike to
+   * base-300 and rendered a completely invisible control: correct role, correct
+   * name, correct 46x28 box, clickable, and 0 of its 1288 pixels different from
+   * the background behind it. Measured at #e6e4e3 on a #f5f5f4 page, the label
+   * was at 1.16:1. The focus ring had the same fault for the same reason: a
+   * neutral button's focus ring was drawn in the surface colour.
+   *
+   * --button-accent-ink is therefore what the accent means when it is ink. It
+   * defaults to the accent, so the seven flavors that already worked are
+   * untouched and a theme defining its own flavor needs to set nothing; only
+   * `neutral` overrides it, to the content colour that is readable on the page
+   * by definition.
    * --------------------------------------------------------------------- */
   .button {
     position: relative;
@@ -36,6 +57,7 @@
 
     --button-accent: var(--color-base-300);
     --button-accent-fg: var(--color-base-content);
+    --button-accent-ink: var(--button-accent);
     --button-bg: transparent;
     --button-bg-hover: var(--button-bg);
     --button-bg-pressed: var(--button-bg-hover);
@@ -49,7 +71,7 @@
 
   .button:focus-visible,
   .button[data-focus-visible="true"] {
-    outline: var(--focus-ring-width, 2px) solid var(--button-accent);
+    outline: var(--focus-ring-width, 2px) solid var(--button-accent-ink);
     outline-offset: var(--focus-ring-offset, 2px);
   }
 
@@ -84,9 +106,14 @@
   /* -----------------------------------------------------------------------
    * Flavor — a styling preference: which palette slot to wear
    * --------------------------------------------------------------------- */
+  /*
+   * The one flavor whose accent is a surface. `outline`, `soft` and `plain`
+   * would otherwise draw the label in it, on the page it is one step away from.
+   */
   .button--flavor-neutral {
     --button-accent: var(--color-base-300);
     --button-accent-fg: var(--color-base-content);
+    --button-accent-ink: var(--color-base-content);
   }
   .button--flavor-primary {
     --button-accent: var(--color-primary);
@@ -177,7 +204,7 @@
       var(--button-accent),
       var(--color-base-100) 74%
     );
-    --button-fg: var(--button-accent);
+    --button-fg: var(--button-accent-ink);
     --button-border: transparent;
   }
 
@@ -193,8 +220,8 @@
       var(--button-accent),
       transparent 80%
     );
-    --button-fg: var(--button-accent);
-    --button-border: var(--button-accent);
+    --button-fg: var(--button-accent-ink);
+    --button-border: var(--button-accent-ink);
   }
 
   /* Ghost keeps body text colour: it is chrome, not an accent surface. */
@@ -210,7 +237,7 @@
     --button-bg: transparent;
     --button-bg-hover: transparent;
     --button-bg-pressed: transparent;
-    --button-fg: var(--button-accent);
+    --button-fg: var(--button-accent-ink);
     --button-border: transparent;
     height: auto;
     padding-inline: 0;
@@ -225,20 +252,20 @@
    * Size
    * --------------------------------------------------------------------- */
   .button--xs {
-    height: 1.75rem;
+    height: var(--control-h-xs);
     padding-inline: 0.5rem;
     font-size: 0.75rem;
   }
   .button--sm {
-    height: 2.25rem;
+    height: var(--control-h-sm);
     padding-inline: 0.75rem;
   }
   .button--md {
-    height: 2.5rem;
+    height: var(--control-h-md);
     padding-inline: 1rem;
   }
   .button--lg {
-    height: 2.75rem;
+    height: var(--control-h-lg);
     padding-inline: 1.125rem;
     font-size: 1rem;
   }

package/dist/components/calendar/Calendar.generated.d.ts

@@ -1,10 +1,10 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Calendar.css";
 import type { JSX } from "@solidjs/web";
-import { type CalendarSelectionMode } from "../../hooks/date";
+import { type CalendarSelectionMode, type DateNames } from "../../hooks/date";
 import type { UIBaseProps, State } from "../vocabulary";
 export type CalendarWeekdayFormat = "narrow" | "short" | "long";
-export type { CalendarSelectionMode };
+export type { CalendarSelectionMode, DateNames };
 export type CalendarDaySelectHandler = (date: Date) => void;
 export type CalendarDayHoverHandler = (date?: Date) => void;
 type CalendarBaseProps = {
@@ -20,7 +20,24 @@ type CalendarBaseProps = {
     minValue?: Date;
     maxValue?: Date;
     isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * The language to render in. Honoured only when `dateNames` supplies the
+     * names to back it; on its own it cannot change what is on screen, because
+     * the library carries no locale data beyond `en-US`. Whatever is actually
+     * rendered is reported on the root element's `lang`.
+     */
     locale?: string;
+    /**
+     * Month and weekday names for a language other than English.
+     *
+     * The library ships one table, `en-US`, and no way to derive another: `Intl`
+     * is unavailable in the chuzz browser and ICU data is deliberately not
+     * shipped. A translated site passes its own names here, from the same i18n
+     * catalogue it already uses for the rest of its strings. All five arrays are
+     * required. Omit this and the calendar renders English and says `lang="en-US"`
+     * regardless of `locale`.
+     */
+    dateNames?: DateNames;
     weekdayFormat?: CalendarWeekdayFormat;
     showOutsideDays?: boolean;
     state?: State;

package/dist/components/calendar/Calendar.generated.js

@@ -3,11 +3,11 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Calendar.css";
 import { For, Show, createMemo, createTrackedEffect, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
-import { DAYS_PER_WEEK, addDays, compareDates, getToday, normalizeDate, parseDate, shiftDateByMonths, toISODate, useCalendarNavigation, useCalendarState, useDateSelection } from "../../hooks/date/index.js";
+import { DAYS_PER_WEEK, addDays, compareDates, getToday, normalizeDate, parseDate, resolveDateNames, shiftDateByMonths, toISODate, useCalendarNavigation, useCalendarState, useDateSelection } from "../../hooks/date/index.js";
 import { CLASSES, componentRecipe } from "./Calendar.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template('<div><div><div><button><svg><path d="m15 18-6-6 6-6"></path></svg></button></div><div></div><div><button><svg><path d="m9 18 6-6-6-6"></path></svg></button></div></div><div><div><div></div></div><div>'), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<div>"), _tmpl$4 = /*#__PURE__*/ template("<button><span>");
 const __solidLayoutCalendar = (_stable, p)=>{
-    const others = omit(p, "class", "dataTheme", "style", "ref", "selectionMode", "value", "defaultValue", "onChange", "rangeStart", "rangeEnd", "rangePreview", "onDaySelect", "onDayHover", "minValue", "maxValue", "isDateUnavailable", "locale", "weekdayFormat", "showOutsideDays", "state", "disabled");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "selectionMode", "value", "defaultValue", "onChange", "rangeStart", "rangeEnd", "rangePreview", "onDaySelect", "onDayHover", "minValue", "maxValue", "isDateUnavailable", "locale", "dateNames", "weekdayFormat", "showOutsideDays", "state", "disabled");
     const selectionMode = createMemo(()=>p.selectionMode ?? "single");
     const dateSelection = useDateSelection({
         value: ()=>p.value,
@@ -22,7 +22,9 @@ const __solidLayoutCalendar = (_stable, p)=>{
     const focusReferenceDate = createMemo(()=>selectedDate() ?? rangeEnd() ?? rangeStart() ?? normalizeDate(p.value) ?? defaultReferenceDate());
     const minDate = createMemo(()=>normalizeDate(p.minValue));
     const maxDate = createMemo(()=>normalizeDate(p.maxValue));
-    const locale = createMemo(()=>p.locale ?? "en-US");
+    const resolvedNames = createMemo(()=>resolveDateNames(p.locale, p.dateNames));
+    const dateNames = createMemo(()=>resolvedNames().names);
+    const renderedLocale = createMemo(()=>resolvedNames().locale);
     const weekdayFormat = createMemo(()=>p.weekdayFormat ?? "short");
     const showOutsideDays = createMemo(()=>p.showOutsideDays ?? true);
     const isCalendarDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
@@ -46,7 +48,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
     });
     const calendarState = useCalendarState({
         selectionMode: ()=>selectionMode(),
-        locale,
+        dateNames,
         weekdayFormat,
         visibleMonth: navigation.visibleMonth,
         focusedDate: navigation.focusedDate,
@@ -146,6 +148,9 @@ const __solidLayoutCalendar = (_stable, p)=>{
         get ["data-disabled"] () {
             return isCalendarDisabled() ? "true" : "false";
         },
+        get lang () {
+            return renderedLocale();
+        },
         get ["data-theme"] () {
             return p.dataTheme;
         },
@@ -199,9 +204,11 @@ const __solidLayoutCalendar = (_stable, p)=>{
             class: CLASSES.Heading.base
         }), {
         "data-slot": "calendar-heading",
+        role: "heading",
+        "aria-level": "2",
         "aria-live": "polite"
     }), true);
-    insert(_el$6, ()=>calendarState.monthFormatter().format(navigation.visibleMonth()));
+    insert(_el$6, ()=>calendarState.monthLabel());
     spread(_el$7, mergeProps(()=>({
             class: CLASSES.Nav.base
         }), {
@@ -294,7 +301,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
                 insert(_el$13, createComponent(For, {
                     each: week,
                     children: (date)=>{
-                        const cellState = calendarState.getCellState(date);
+                        const cellState = createMemo(()=>calendarState.getCellState(date));
                         const isoDate = toISODate(date);
                         var _el$14 = _tmpl$3();
                         spread(_el$14, mergeProps(()=>({
@@ -305,7 +312,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
                         }), true);
                         insert(_el$14, createComponent(Show, {
                             get when () {
-                                return showOutsideDays() || !cellState.isOutsideMonth;
+                                return showOutsideDays() || !cellState().isOutsideMonth;
                             },
                             get fallback () {
                                 var _el$17 = _tmpl$2();
@@ -322,57 +329,57 @@ const __solidLayoutCalendar = (_stable, p)=>{
                                 spread(_el$15, mergeProps({
                                     type: "button"
                                 }, ()=>({
-                                        class: twMerge(CLASSES.Cell.base, cellState.isSelected && CLASSES.Cell.flag.selected, cellState.isRangeStart && CLASSES.Cell.flag.rangeStart, cellState.isRangeEnd && CLASSES.Cell.flag.rangeEnd, cellState.isInCommittedRange && CLASSES.Cell.flag.inRange, cellState.isInPreviewRange && !cellState.isInCommittedRange && CLASSES.Cell.flag.inPreviewRange, cellState.isToday && CLASSES.Cell.flag.today, cellState.isOutsideMonth && CLASSES.Cell.flag.outsideMonth, cellState.isDisabled && CLASSES.Cell.flag.disabled, cellState.isUnavailable && CLASSES.Cell.flag.unavailable, cellState.isFocused && CLASSES.Cell.flag.focused)
+                                        class: twMerge(CLASSES.Cell.base, cellState().isSelected && CLASSES.Cell.flag.selected, cellState().isRangeStart && CLASSES.Cell.flag.rangeStart, cellState().isRangeEnd && CLASSES.Cell.flag.rangeEnd, cellState().isInCommittedRange && CLASSES.Cell.flag.inRange, cellState().isInPreviewRange && !cellState().isInCommittedRange && CLASSES.Cell.flag.inPreviewRange, cellState().isToday && CLASSES.Cell.flag.today, cellState().isOutsideMonth && CLASSES.Cell.flag.outsideMonth, cellState().isDisabled && CLASSES.Cell.flag.disabled, cellState().isUnavailable && CLASSES.Cell.flag.unavailable, cellState().isFocused && CLASSES.Cell.flag.focused)
                                     }), {
                                     "data-slot": "calendar-cell",
                                     "data-date": isoDate,
                                     get ["data-selected"] () {
-                                        return cellState.isSelected ? "true" : "false";
+                                        return cellState().isSelected ? "true" : "false";
                                     },
                                     get ["data-range-start"] () {
-                                        return cellState.isRangeStart ? "true" : "false";
+                                        return cellState().isRangeStart ? "true" : "false";
                                     },
                                     get ["data-range-end"] () {
-                                        return cellState.isRangeEnd ? "true" : "false";
+                                        return cellState().isRangeEnd ? "true" : "false";
                                     },
                                     get ["data-in-range"] () {
-                                        return cellState.isInCommittedRange ? "true" : "false";
+                                        return cellState().isInCommittedRange ? "true" : "false";
                                     },
                                     get ["data-in-preview-range"] () {
-                                        return cellState.isInPreviewRange ? "true" : "false";
+                                        return cellState().isInPreviewRange ? "true" : "false";
                                     },
                                     get ["data-today"] () {
-                                        return cellState.isToday ? "true" : "false";
+                                        return cellState().isToday ? "true" : "false";
                                     },
                                     get ["data-outside-month"] () {
-                                        return cellState.isOutsideMonth ? "true" : "false";
+                                        return cellState().isOutsideMonth ? "true" : "false";
                                     },
                                     get ["data-disabled"] () {
-                                        return cellState.isDisabled ? "true" : "false";
+                                        return cellState().isDisabled ? "true" : "false";
                                     },
                                     get ["data-unavailable"] () {
-                                        return cellState.isUnavailable ? "true" : "false";
+                                        return cellState().isUnavailable ? "true" : "false";
                                     },
                                     role: "gridcell",
                                     get ["aria-label"] () {
-                                        return calendarState.dayLabelFormatter().format(date);
+                                        return calendarState.formatDayLabel(date);
                                     },
                                     get ["aria-selected"] () {
-                                        return cellState.isAriaSelected ? "true" : "false";
+                                        return cellState().isAriaSelected ? "true" : "false";
                                     },
                                     get ["aria-disabled"] () {
-                                        return cellState.isDisabled ? "true" : "false";
+                                        return cellState().isDisabled ? "true" : "false";
                                     },
                                     get disabled () {
-                                        return cellState.isDisabled;
+                                        return cellState().isDisabled;
                                     },
                                     get tabindex () {
-                                        return cellState.isFocused ? 0 : -1;
+                                        return cellState().isFocused ? 0 : -1;
                                     },
                                     onClick: ()=>selectDate(date),
                                     onFocus: ()=>navigation.setFocusedDate(date),
                                     onMouseEnter: ()=>{
-                                        if (cellState.isDisabled) return;
+                                        if (cellState().isDisabled) return;
                                         p.onDayHover?.(date);
                                     },
                                     onKeyDown: handleCellKeyDown

package/dist/components/calendar/index.d.ts

@@ -1 +1 @@
-export { type CalendarDayHoverHandler, type CalendarDaySelectHandler, type CalendarProps, type CalendarSelectionMode, type CalendarWeekdayFormat, default, } from "./Calendar.generated";
+export { type CalendarDayHoverHandler, type CalendarDaySelectHandler, type CalendarProps, type CalendarSelectionMode, type CalendarWeekdayFormat, type DateNames, default, } from "./Calendar.generated";

package/dist/components/card/Card.generated.d.ts

@@ -2,7 +2,7 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "../_shared/material.css";
 import type { JSX } from "@solidjs/web";
 import "./Card.css";
-import type { Flavor, Material, Radius, Space, State, UIBaseProps, Variant } from "../vocabulary";
+import type { Flavor, Material, Radius, Space, UIBaseProps, Variant } from "../vocabulary";
 /**
  * @deprecated Use `Material` from the shared vocabulary. Kept as an alias
  * because it is exported publicly and removing it would break call sites; it
@@ -10,16 +10,52 @@ import type { Flavor, Material, Radius, Space, State, UIBaseProps, Variant } fro
  */
 export type CardMaterial = Material;
 export type CardElevation = "none" | "sm" | "md" | "lg";
+/**
+ * The states this card actually renders.
+ *
+ * Not the shared `State`, which is what the prop was typed as. That union is
+ * `default | loading | error | invalid | disabled | hidden` and this recipe
+ * implements `info | success | warning | danger`: the two have **no member in
+ * common**. So every value the type permitted resolved to no class, and every
+ * value the recipe implements was a type error.
+ *
+ * A prop that accepts only values it ignores is worse than one that does not
+ * exist, because it reads as configured. Narrowed to what is implemented;
+ * `state="disabled"` and friends stop type-checking, and they never did
+ * anything, so nothing that worked stops working.
+ *
+ * A card is not a form control, which is why the shared vocabulary does not
+ * fit: it has no validity and nothing to disable. Behaviour lives on
+ * `isInteractive`.
+ */
+export type CardState = "info" | "success" | "warning" | "danger";
 export type CardProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     variant?: Variant;
     material?: Material;
     elevation?: CardElevation;
     flavor?: Flavor;
-    state?: State;
+    state?: CardState;
     padding?: Space;
     radius?: Radius;
     /** Replaces isHoverable and isPressable, which had one call site each across 330. */
     isInteractive?: boolean;
+    /**
+     * Renders the card as an anchor, and navigates.
+     *
+     * A whole card that navigates is the common shape, and the way it was
+     * written was `<a href><Card isInteractive /></a>`, which put a `button`
+     * inside a `link` with the same name and the same box. That is invalid
+     * HTML, it announces the card twice, and a press by coordinate lands on
+     * whichever of the two happens to be on top.
+     *
+     * A card that navigates should be the anchor rather than sit inside one,
+     * which is what `Button` already does. Middle-click, right-click,
+     * open-in-new-tab and "copy link address" all work, which a `div` with a
+     * click handler takes away.
+     */
+    href?: string;
+    target?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    rel?: string;
     header?: JSX.Element;
     footer?: JSX.Element;
     children: JSX.Element;