@happyvertical/smrt-ui 0.57.45 → 0.57.47

package/AGENTS.md

@@ -49,7 +49,7 @@ components are exempt — they *are* the primitives.
 | `./feedback` | `Alert`, `ToastViewport`, `Modal`, `Drawer`/`Sheet`, `ConfirmDialog`, `LoadingOverlay`, `Progress`, `Meter`, `Spinner`, phone surfaces `PhoneSheet` / `WorkingStrip` and the `swipeDismiss` action |
 | `./data` | `CollectionToolbar`, `CollectionList`/`ContentList`, `DataTable` (footer rows and column `summaries`: [agents/data-table.md](agents/data-table.md)) and their types — a **component barrel**: it re-exports `.svelte` files, so a plain Node `import()` of it throws `ERR_UNKNOWN_FILE_EXTENSION` |
 | `./data-surface` | **Svelte-free**: registry contracts and shared protocol limits (`DATA_SURFACE_MAX_REQUEST_BYTES`, `DATA_SURFACE_IDENTIFIER_MAX_LENGTH`, …). Server adapters must import these from here, not from `./data` — a server entry that reaches the barrel breaks the `smrt` CLI's plain-Node `.smrt/register.js` load (issue #2924) |
-| `./display` | `DocumentViewer` (touch PDF/image viewer reading through an injected `fetch`; pdf.js is an optional peer loaded lazily by `createPdfJsOpener()`), `CurrencyDisplay`, `DateDisplay`, `StatusBadge`, `Icon`; also re-exported from `.` |
+| `./display` | `DocumentViewer` (touch PDF/image viewer reading through an injected `fetch`; pdf.js is an optional peer loaded lazily by `createPdfJsOpener()`), `CurrencyDisplay`, `DateDisplay`, `StatusBadge` (`case: 'capitalize' | 'as-is'`, default capitalize, controls the CSS text-transform), `Icon`; also re-exported from `.` |
 | `./layout` | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, … |
 | `./charts` | Pure `Chart` renderer (`bar`, `line`, `table`, `pie`, `stat`), structural `ChartData`, and minor-unit number formatting; `./charts/format` is Svelte-free |
 | `./calendar` | `CalendarView` (time-zone-aware month/week grids + phone agenda) and its Svelte-free date model (`toEntries`, `layoutMonth`, `layoutWeek`, `dateKeyInZone`, …); deprecated `Calendar`, `DayView` |

package/dist/components/display/StatusBadge.svelte

@@ -24,6 +24,8 @@ export interface Props
   variant?: 'filled' | 'outline';
   /** Optional custom label (defaults to status value) */
   label?: string;
+  /** `'capitalize'` (default) title-cases the label via CSS; `'as-is'` leaves it untouched. */
+  case?: 'capitalize' | 'as-is';
 }
 
 const {
@@ -33,6 +35,7 @@ const {
   size = 'md',
   variant = 'filled',
   label,
+  case: textCase = 'capitalize',
   ...rest
 }: Props = $props();
 
@@ -255,6 +258,7 @@ const displayLabel = $derived(label ?? status.replace(/_/g, ' '));
   class:sm={size === 'sm'}
   class:lg={size === 'lg'}
   class:outline={variant === 'outline'}
+  class:as-is={textCase === 'as-is'}
   style:--smrt-badge-bg={colors.bg}
   style:--smrt-badge-text={colors.text} data-smrt-component="StatusBadge"
 >
@@ -277,6 +281,9 @@ const displayLabel = $derived(label ?? status.replace(/_/g, ' '));
     color: var(--smrt-badge-text);
     line-height: 1.25;
   }
+  .status-badge.as-is {
+    text-transform: none;
+  }
 
   .status-badge.sm {
     padding: 0.125rem 0.5rem;

package/dist/components/display/StatusBadge.svelte.d.ts

@@ -20,6 +20,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class' | '
     variant?: 'filled' | 'outline';
     /** Optional custom label (defaults to status value) */
     label?: string;
+    /** `'capitalize'` (default) title-cases the label via CSS; `'as-is'` leaves it untouched. */
+    case?: 'capitalize' | 'as-is';
 }
 declare const StatusBadge: import("svelte").Component<Props, {}, "">;
 type StatusBadge = ReturnType<typeof StatusBadge>;

package/dist/components/display/StatusBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGzD,sCAAsC;AACtC,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACnE,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+OD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGzD,sCAAsC;AACtC,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACnE,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6FAA6F;IAC7F,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;CAC/B;AAgPD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/themes/README.md

@@ -421,7 +421,12 @@ Modern Google Material Design 3 with refined colors and typography.
 
 ### Glass
 
-Apple-inspired glass morphism with backdrop blur effects.
+Apple-inspired glass morphism with backdrop blur effects. The light primary
+is `#0066cc`, not Apple's `#007aff`: `primary` is text on ghost buttons and
+links, and `#007aff` was 3.6:1 on the light background (#4567). Every preset
+is pinned by `__tests__/primary-text-contrast.test.ts`; Glass dark, Studio
+light and SMRT light still sit below AA on some surfaces and are pinned at
+their current ratios there (#4575).
 
 - **Colors**: Translucent surfaces, system colors, layered depth
 - **Effects**: Backdrop blur, saturation boost, frosted glass

package/dist/themes/glass/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/glass/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAcH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA2XrB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA2DxB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/glass/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAcH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA+XrB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA2DxB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/themes/glass/index.js

@@ -12,10 +12,14 @@ import { appleEasing, borderRadiusScale, darkInsetHighlight, durationScale, hair
  * Translucent whites with subtle color tints
  */
 const lightColors = {
-    // Primary - Apple system blue
-    primary: '#007aff',
+    // Primary - Apple system blue, darkened for text. `#007aff` is only 3.6:1
+    // on `background` and 4.0:1 on white, so ghost buttons and links (which
+    // draw their text in `primary`) failed WCAG AA 4.5:1 on every light Glass
+    // surface; `#0066cc` clears it on all of them (5.0:1 on `#f2f2f7`) while
+    // `onPrimary` white stays 5.6:1 on filled controls (#4567).
+    primary: '#0066cc',
     onPrimary: '#ffffff',
-    primaryContainer: 'rgba(0, 122, 255, 0.15)',
+    primaryContainer: 'rgba(0, 102, 204, 0.15)',
     onPrimaryContainer: '#003d80',
     // Secondary - System gray
     secondary: '#6c757d',
@@ -145,7 +149,7 @@ const darkColors = {
     // Inverse
     inverseSurface: '#f2f2f7',
     inverseOnSurface: '#000000',
-    inversePrimary: '#007aff',
+    inversePrimary: '#0066cc',
     // Effects
     shadow: 'rgba(0, 0, 0, 0.4)',
     scrim: 'rgba(0, 0, 0, 0.6)',

package/dist/themes/styles/glass.css

@@ -15,9 +15,9 @@
   --smrt-theme-name: Glass;
   --smrt-color-scheme: light;
   --smrt-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
-  --smrt-color-primary: #007aff;
+  --smrt-color-primary: #0066cc;
   --smrt-color-on-primary: #ffffff;
-  --smrt-color-primary-container: rgba(0, 122, 255, 0.15);
+  --smrt-color-primary-container: rgba(0, 102, 204, 0.15);
   --smrt-color-on-primary-container: #003d80;
   --smrt-color-secondary: #6c757d;
   --smrt-color-on-secondary: #ffffff;
@@ -335,7 +335,7 @@
   --smrt-color-outline-variant: rgba(84, 84, 88, 0.35);
   --smrt-color-inverse-surface: #f2f2f7;
   --smrt-color-inverse-on-surface: #000000;
-  --smrt-color-inverse-primary: #007aff;
+  --smrt-color-inverse-primary: #0066cc;
   --smrt-color-shadow: rgba(0, 0, 0, 0.4);
   --smrt-color-scrim: rgba(0, 0, 0, 0.6);
   --smrt-color-glass-backdrop: rgba(29, 29, 38, 0.72);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.57.45",
+  "version": "0.57.47",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -176,7 +176,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.57.45",
+    "@happyvertical/smrt-types": "0.57.47",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {
@@ -196,7 +196,7 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/speech": "^0.111.0",
+    "@happyvertical/speech": "^0.111.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@testing-library/jest-dom": "^7.0.1",