@duro-app/ui 0.34.9 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.34.9",
+  "version": "0.35.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.34.9"
+    "@duro-app/tokens": "^0.35.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Button/Button.tsx

@@ -13,6 +13,8 @@ interface ButtonProps {
   disabled?: boolean
   type?: 'button' | 'submit'
   onClick?: () => void
+  /** Accessible name override — e.g. for buttons whose visible text isn't unique. */
+  'aria-label'?: string
   children: ReactNode
 }
 
@@ -28,6 +30,7 @@ export function Button({
   disabled = false,
   type = 'button',
   onClick,
+  'aria-label': ariaLabel,
   children,
 }: ButtonProps) {
   return (
@@ -35,6 +38,7 @@ export function Button({
       type={type}
       disabled={disabled}
       onClick={onClick}
+      aria-label={ariaLabel}
       style={[
         styles.base,
         isNative && styles.nativeFlex,

package/src/components/Combobox/useComboboxRoot.ts

@@ -24,7 +24,13 @@ export function useComboboxRoot({
     defaultValue ?? null,
     onValueChange,
   )
-  const [internalInputValue, setInternalInputValue] = useState('')
+  // Seed the visible text from the initially-selected value's label, so a
+  // defaultValue/value shows its label on mount — and so the reconcile effect
+  // below doesn't see "value set but input empty" and wipe the selection.
+  const [internalInputValue, setInternalInputValue] = useState<string>(() => {
+    const initial = controlledValue ?? defaultValue
+    return initial ? (initialLabels?.[initial] ?? '') : ''
+  })
   const inputValue = controlledInputValue !== undefined ? controlledInputValue : internalInputValue
   const setInputValue = useCallback(
     (v: string) => {
@@ -201,7 +207,11 @@ export function useComboboxRoot({
   //   - inputValue equals the selected label: nothing to do.
   useEffect(() => {
     if (open) return
-    if (value === null) return
+    // Treat an empty value (null OR '') as "no selection" — nothing to
+    // reconcile. Without this, a controlled value="" (e.g. a table column
+    // filter) fires setValue(null) every render → inline onValueChange →
+    // parent state change → re-render → infinite "Maximum update depth" loop.
+    if (!value) return
     if (inputValue === '') {
       setValue(null)
       return

package/src/components/Table/Table.stories.tsx

@@ -1128,7 +1128,9 @@ export const SlotPropsOnRoot: Story = {
   play: async ({canvas}) => {
     await expect(canvas.getByRole('table')).toBeInTheDocument()
     // Note no Table.HeaderCell label — children are plain strings, so the
-    // label fallback uses extractText. Verify the rendered text appears.
-    await expect(canvas.getByText('Name')).toBeInTheDocument()
+    // label fallback uses extractText. "Name" appears both in the header and
+    // the SortChip option list, so assert at least one rendered (not getByText,
+    // which throws on multiple matches).
+    await expect(canvas.getAllByText('Name').length).toBeGreaterThan(0)
   },
 }

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -3,17 +3,27 @@ import {css, html} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
 import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
+import {
+  landscapeTheme,
+  landscapeShadows,
+  landscapeTypography,
+} from '@duro-app/tokens/themes/landscape.css'
 
-export type ThemeName = 'dark' | 'light' | 'high-contrast'
+export type ThemeName = 'dark' | 'light' | 'high-contrast' | 'landscape'
 
 interface ThemeProviderProps {
   theme?: ThemeName
   children: ReactNode
 }
 
-const themeMap: Partial<Record<ThemeName, readonly [typeof lightTheme, typeof lightShadows]>> = {
+// A theme is a list of createTheme() overrides (colors + shadows, and
+// optionally typography — e.g. landscape carries its editorial font stack).
+// Loosely typed: each entry themes a DIFFERENT VarGroup (colors / shadows /
+// typography), and the array is cast to the style prop's type at the use site.
+const themeMap: Partial<Record<ThemeName, readonly unknown[]>> = {
   light: [lightTheme, lightShadows],
   'high-contrast': [highContrastTheme, highContrastShadows],
+  landscape: [landscapeTheme, landscapeShadows, landscapeTypography],
 }
 
 const styles = css.create({
@@ -49,7 +59,7 @@ export function usePortalMount(): HTMLElement | null {
 
 export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
   const overrides = themeMap[theme]
-  const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
+  const themeStyles = [...(overrides ?? []), styles.root] as DivStyle
   const [mount, setMount] = useState<HTMLElement | null>(null)
 
   return (