@datatechsolutions/tympan 0.4.0 → 0.4.1

package/dist/styles.css

@@ -1,5 +1,6 @@
 /* @datatechsolutions/tympan stylesheet entry (FSL-1.1-ALv2). Everything lives in @layer tympan.*. */
 @layer tympan.tokens, tympan.base, tympan.components;
+@import '@datatechsolutions/tympan-tokens/fonts.css';
 
 /* @datatechsolutions/tympan-tokens/tokens.css */
 /* @datatechsolutions/tympan-tokens (FSL-1.1-ALv2): generated by scripts/build.mjs from src/base/*.tokens.json, src/presets.ts and src/flow.ts. Do not edit. */
@@ -17853,9 +17854,12 @@
     gap: var(--ty-space-1);
     outline: none;
   }
+  /* Columns follow the surface's width, not the viewport's: a dialog is
+     narrower than the window, and three viewport-driven columns squeezed
+     names such as "Español" into the code beside them. */
   .ty-locale-picker__list[data-layout='grid'] {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
   }
   .ty-locale-picker__option {
     display: flex;
@@ -17891,6 +17895,7 @@
     min-inline-size: 0;
   }
   .ty-locale-picker__code {
+    flex: none;
     color: var(--ty-ink-3);
     font-family: var(--ty-font-mono);
     font-size: var(--ty-font-size-meta);
@@ -17910,12 +17915,6 @@
     line-height: var(--ty-font-line-height-meta);
   }
 
-  @media (min-width: 640px) {
-    .ty-locale-picker__list[data-layout='grid'] {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
   @media (forced-colors: active) {
     .ty-locale-picker__option[data-selected] {
       background: Highlight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datatechsolutions/tympan",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Tympan: accessible React components (React 18.3 or 19) on React Aria Components, styled with --ty-* CSS custom properties in @layer tympan. The flow and provenance canvas (graph viewer, DAG editor, run inspection) ships as the @datatechsolutions/tympan/flow subpath. Generated avatars (DiceBear, CC0/MIT styles only) ship as the /avatars subpath and country and region flags as the /flags subpath.",
   "license": "FSL-1.1-ALv2",
   "author": "Natalia Mesquita",
@@ -154,7 +154,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^3.1.1",
-    "@datatechsolutions/tympan-tokens": "^0.4.0",
+    "@datatechsolutions/tympan-tokens": "^0.4.1",
     "@dicebear/core": "^9.4.3",
     "@internationalized/date": "^3.12.4",
     "@types/d3-array": "^3.2.2",

package/src/components/locale-picker/LocalePicker.css

@@ -15,9 +15,12 @@
     gap: var(--ty-space-1);
     outline: none;
   }
+  /* Columns follow the surface's width, not the viewport's: a dialog is
+     narrower than the window, and three viewport-driven columns squeezed
+     names such as "Español" into the code beside them. */
   .ty-locale-picker__list[data-layout='grid'] {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
   }
   .ty-locale-picker__option {
     display: flex;
@@ -53,6 +56,7 @@
     min-inline-size: 0;
   }
   .ty-locale-picker__code {
+    flex: none;
     color: var(--ty-ink-3);
     font-family: var(--ty-font-mono);
     font-size: var(--ty-font-size-meta);
@@ -72,12 +76,6 @@
     line-height: var(--ty-font-line-height-meta);
   }
 
-  @media (min-width: 640px) {
-    .ty-locale-picker__list[data-layout='grid'] {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
   @media (forced-colors: active) {
     .ty-locale-picker__option[data-selected] {
       background: Highlight;

package/src/internal/theme.tsx

@@ -42,10 +42,13 @@ export interface ThemeProviderProps {
    */
   storageKey?: string
   /**
-   * Font stylesheet per theme name (for example `printThemeFontUrls` from
-   * the tokens package). The URL of the current theme is added as a
-   * `<link rel="stylesheet">` (in `<head>` for `document`, inside the wrapper
-   * for `scope`); themes without an entry load nothing.
+   * Extra font stylesheet per theme name, for the host's own themes. The
+   * fonts of every built-in and print theme are bundled with
+   * `@font-face` in the token sheets, so this is optional and empty by
+   * default (nothing is fetched from a third party). The URL of the current
+   * theme is added as a `<link rel="stylesheet">` (in `<head>` for
+   * `document`, inside the wrapper for `scope`); themes without an entry
+   * load nothing.
    */
   fonts?: Readonly<Record<string, string>>
   className?: string
@@ -171,7 +174,7 @@ export function useTheme(): ThemeState {
  */
 export function themeInitScript(storageKey = 'ty-theme', defaults: Stored = {}, options: { fonts?: Readonly<Record<string, string>> } = {}): string {
   const d = JSON.stringify({ theme: defaults.theme ?? 'tympan', mode: defaults.mode ?? 'system', density: defaults.density ?? 'default' })
-  // Optional: the font stylesheet of the stored theme, added before first paint (same link ThemeProvider `fonts` manages).
+  // Optional: a host font stylesheet for the stored theme, added before first paint (same link ThemeProvider `fonts` manages). Built-in and print theme fonts are bundled and need none.
   const fonts = options.fonts && Object.keys(options.fonts).length
     ? `var f=${JSON.stringify(options.fonts).replace(/</g, '\\u003c')}[t];if(f){var l=document.createElement('link');l.rel='stylesheet';l.href=f;l.setAttribute('data-ty-theme-fonts','');document.head.appendChild(l);}`
     : ''