@furystack/shades-common-components 12.6.0 → 13.0.0

package/src/components/button-group.tsx

@@ -19,20 +19,46 @@ export type ButtonGroupProps = PartialElement<HTMLElement> & {
   disabled?: boolean
 }
 
+const groupChildRadius = cssVariableTheme.shape.borderRadius.md
+
 export const ButtonGroup: (props: ButtonGroupProps, children: ChildrenList) => JSX.Element = Shade<ButtonGroupProps>({
   shadowDomName: 'shade-button-group',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     borderRadius: cssVariableTheme.shape.borderRadius.md,
 
     '&[data-orientation="vertical"]': {
       flexDirection: 'column',
     },
+
+    // Uses [role][data-orientation] for specificity (0,2,1) to override
+    // child Button CSS at (0,1,1)
+    '&[role][data-orientation] > *': {
+      margin: '0',
+      borderRadius: '0',
+    },
+
+    '&[role]:not([data-orientation="vertical"]) > :first-child': {
+      borderRadius: `${groupChildRadius} 0 0 ${groupChildRadius}`,
+    },
+    '&[role]:not([data-orientation="vertical"]) > :last-child': {
+      borderRadius: `0 ${groupChildRadius} ${groupChildRadius} 0`,
+    },
+
+    '&[role][data-orientation="vertical"] > :first-child': {
+      borderRadius: `${groupChildRadius} ${groupChildRadius} 0 0`,
+    },
+    '&[role][data-orientation="vertical"] > :last-child': {
+      borderRadius: `0 0 ${groupChildRadius} ${groupChildRadius}`,
+    },
+
+    '&[role][data-orientation] > :only-child': {
+      borderRadius: groupChildRadius,
+    },
   },
-  render: ({ props, children, useHostProps, useRef }) => {
+  render: ({ props, children, useHostProps }) => {
     const { orientation = 'horizontal', disabled, variant, color, style } = props
-    const radius = cssVariableTheme.shape.borderRadius.md
-    const wrapperRef = useRef<HTMLDivElement>('wrapper')
 
     useHostProps({
       role: 'group',
@@ -43,40 +69,7 @@ export const ButtonGroup: (props: ButtonGroupProps, children: ChildrenList) => J
       ...(style ? { style: style as Record<string, string> } : {}),
     })
 
-    // Apply inline styles to child elements so they appear joined.
-    // Inline styles are needed because child Button components have their
-    // own scoped CSS for margin and borderRadius that can't be overridden
-    // from the parent's stylesheet alone.
-    requestAnimationFrame(() => {
-      const childElements = Array.from(wrapperRef.current?.children ?? []) as HTMLElement[]
-      const isVertical = orientation === 'vertical'
-
-      childElements.forEach((child, index) => {
-        child.style.margin = '0'
-
-        if (childElements.length === 1) {
-          child.style.borderRadius = radius
-          return
-        }
-
-        const isFirst = index === 0
-        const isLast = index === childElements.length - 1
-
-        if (isFirst) {
-          child.style.borderRadius = isVertical ? `${radius} ${radius} 0 0` : `${radius} 0 0 ${radius}`
-        } else if (isLast) {
-          child.style.borderRadius = isVertical ? `0 0 ${radius} ${radius}` : `0 ${radius} ${radius} 0`
-        } else {
-          child.style.borderRadius = '0'
-        }
-      })
-    })
-
-    return (
-      <div ref={wrapperRef} style={{ display: 'contents' }}>
-        {children}
-      </div>
-    )
+    return <>{children}</>
   },
 })
 
@@ -222,6 +215,37 @@ export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: Childr
       '&[data-orientation="vertical"]': {
         flexDirection: 'column',
       },
+
+      '&[data-disabled]': {
+        pointerEvents: 'none',
+        opacity: cssVariableTheme.action.disabledOpacity,
+      },
+
+      // Grouped appearance: box-shadow border + reset border-radius.
+      // Uses [data-value] attribute selector for specificity (0,1,2) to
+      // override ToggleButton's own CSS at (0,1,1).
+      '& button[data-value]': {
+        boxShadow: '0px 0px 0px 1px var(--toggle-color-main)',
+        borderRadius: '0',
+      },
+
+      '&:not([data-orientation="vertical"]) button:first-of-type': {
+        borderRadius: `${groupChildRadius} 0 0 ${groupChildRadius}`,
+      },
+      '&:not([data-orientation="vertical"]) button:last-of-type': {
+        borderRadius: `0 ${groupChildRadius} ${groupChildRadius} 0`,
+      },
+
+      '&[data-orientation="vertical"] button:first-of-type': {
+        borderRadius: `${groupChildRadius} ${groupChildRadius} 0 0`,
+      },
+      '&[data-orientation="vertical"] button:last-of-type': {
+        borderRadius: `0 0 ${groupChildRadius} ${groupChildRadius}`,
+      },
+
+      '& button:only-of-type': {
+        borderRadius: groupChildRadius,
+      },
     },
     render: ({ props, children, useDisposable, useHostProps, useRef }) => {
       const groupRef = useRef<HTMLDivElement>('group')
@@ -274,20 +298,20 @@ export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: Childr
       useHostProps({
         role: 'group',
         'data-orientation': orientation,
+        'data-disabled': disabled ? '' : undefined,
         style: {
           '--toggle-color-main': colors.main,
           ...(style as Record<string, string>),
         },
       })
 
-      const radius = cssVariableTheme.shape.borderRadius.md
-
-      // Update child toggle button states and apply grouping styles
+      // Sync data-selected, disabled, and data-size on child buttons.
+      // These can't be expressed in CSS because they depend on matching the
+      // group's value prop against each button's data-value attribute.
       requestAnimationFrame(() => {
         const buttons = Array.from(groupRef.current?.querySelectorAll('button[data-value]') ?? [])
-        const isVertical = orientation === 'vertical'
 
-        buttons.forEach((btn, index) => {
+        buttons.forEach((btn) => {
           const val = btn.getAttribute('data-value')
           if (val && selectedValues.includes(val)) {
             btn.setAttribute('data-selected', '')
@@ -295,8 +319,6 @@ export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: Childr
             btn.removeAttribute('data-selected')
           }
 
-          btn.setAttribute('data-grouped', '')
-
           if (disabled) {
             btn.setAttribute('disabled', '')
           }
@@ -306,21 +328,6 @@ export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: Childr
           } else if (size === 'medium') {
             btn.removeAttribute('data-size')
           }
-
-          // Propagate color CSS variable
-          ;(btn as HTMLElement).style.setProperty('--toggle-color-main', colors.main)
-
-          // Apply grouping border-radius via inline styles
-          const el = btn as HTMLElement
-          if (buttons.length === 1) {
-            el.style.borderRadius = radius
-          } else if (index === 0) {
-            el.style.borderRadius = isVertical ? `${radius} ${radius} 0 0` : `${radius} 0 0 ${radius}`
-          } else if (index === buttons.length - 1) {
-            el.style.borderRadius = isVertical ? `0 0 ${radius} ${radius}` : `0 ${radius} ${radius} 0`
-          } else {
-            el.style.borderRadius = '0'
-          }
         })
       })
 
@@ -440,11 +447,15 @@ export const SegmentedControl = Shade<SegmentedControlProps>({
       const isSelected = value === option.value
       const isDisabled = disabled || option.disabled
 
-      const btn = (
+      return (
         <button
           type="button"
           className="segmented-option"
           disabled={isDisabled}
+          role="radio"
+          aria-checked={isSelected ? 'true' : 'false'}
+          data-value={option.value}
+          {...(isSelected ? { 'data-selected': '' } : {})}
           onclick={() => {
             if (!isDisabled && value !== option.value) {
               onValueChange?.(option.value)
@@ -453,16 +464,7 @@ export const SegmentedControl = Shade<SegmentedControlProps>({
         >
           {option.label}
         </button>
-      ) as unknown as HTMLButtonElement
-
-      btn.setAttribute('role', 'radio')
-      btn.setAttribute('aria-checked', isSelected ? 'true' : 'false')
-      btn.setAttribute('data-value', option.value)
-      if (isSelected) {
-        btn.setAttribute('data-selected', '')
-      }
-
-      return btn
+      )
     })
 
     return <>{buttons}</>

package/src/components/button.tsx

@@ -70,6 +70,7 @@ export const Button = Shade<ButtonProps>({
   elementBaseName: 'button',
   css: {
     // Base styles (layout, typography)
+    fontFamily: cssVariableTheme.typography.fontFamily,
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/cache-view.spec.tsx

@@ -102,7 +102,10 @@ describe('CacheView', () => {
       const resultComponent = resultEl as JSX.Element
       resultComponent.updateComponent()
       await flushUpdates()
-      expect(resultComponent.querySelector('.result-title')?.textContent).toBe('Something went wrong')
+      const titleEl = resultComponent.querySelector('.result-title') as JSX.Element
+      titleEl.updateComponent()
+      await flushUpdates()
+      expect(titleEl?.textContent).toBe('Something went wrong')
       cache[Symbol.dispose]()
     })
 

package/src/components/cache-view.tsx

@@ -3,6 +3,7 @@ import { hasCacheValue, isFailedCacheResult, isObsoleteCacheResult } from '@fury
 import type { ShadeComponent } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { Button } from './button.js'
 import { Result } from './result.js'
 
@@ -58,6 +59,9 @@ const getDefaultErrorUi = (error: unknown, retry: () => void): JSX.Element =>
  */
 export const CacheView: <TData, TArgs extends any[]>(props: CacheViewProps<TData, TArgs>) => JSX.Element = Shade({
   shadowDomName: 'shade-cache-view',
+  css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
+  },
   render: ({ props, useObservable, useState }): JSX.Element | null => {
     const { cache, args, content, loader, error } = props
 

package/src/components/card.tsx

@@ -24,9 +24,11 @@ export const Card = Shade<CardProps>({
   shadowDomName: 'shade-card',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     flexDirection: 'column',
     borderRadius: cssVariableTheme.shape.borderRadius.md,
-    backgroundColor: cssVariableTheme.background.paper,
+    background: cssVariableTheme.background.paper,
+    backgroundImage: cssVariableTheme.background.paperImage,
     color: cssVariableTheme.text.primary,
     overflow: 'hidden',
     transition: buildTransition(

package/src/components/circular-progress.tsx

@@ -44,6 +44,7 @@ export const CircularProgress = Shade<CircularProgressProps>({
   shadowDomName: 'shade-circular-progress',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     justifyContent: 'center',
     lineHeight: '1',

package/src/components/command-palette/command-palette-input.tsx

@@ -35,6 +35,7 @@ export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
   shadowDomName: 'shades-command-palette-input',
   css: {
     width: '0%',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     overflow: 'hidden',
     '&[data-opened]': {
       width: '100%',

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -6,6 +6,7 @@ import type { CommandPaletteManager } from './command-palette-manager.js'
 export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManager; fullScreenSuggestions?: boolean }>({
   shadowDomName: 'shade-command-palette-suggestion-list',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .suggestion-items-container': {
       borderTop: 'none',
       position: 'absolute',
@@ -16,7 +17,8 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
       overflowY: 'auto',
       zIndex: '1',
       left: 'auto',
-      backgroundColor: cssVariableTheme.background.paper,
+      background: cssVariableTheme.background.paper,
+      backgroundImage: cssVariableTheme.background.paperImage,
       boxShadow: cssVariableTheme.shadows.lg,
       backdropFilter: 'blur(20px)',
       border: `1px solid ${cssVariableTheme.action.subtleBorder}`,

package/src/components/command-palette/index.tsx

@@ -1,5 +1,6 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { ClickAwayService } from '../../services/click-away-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { Icon } from '../icons/icon.js'
 import { close } from '../icons/icon-definitions.js'
 import { Loader } from '../loader.js'
@@ -25,6 +26,7 @@ export const CommandPalette = Shade<CommandPaletteProps>({
   shadowDomName: 'shade-command-palette',
   css: {
     ...searchableInputStyles,
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .command-palette-wrapper': {
       display: 'flex',
       flexDirection: 'column',

package/src/components/context-menu/context-menu-item.tsx

@@ -14,6 +14,7 @@ export const ContextMenuItemComponent: <T>(props: ContextMenuItemProps<T>, child
     shadowDomName: 'shade-context-menu-item',
     css: {
       display: 'flex',
+      fontFamily: cssVariableTheme.typography.fontFamily,
       alignItems: 'center',
       padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
       cursor: 'default',

package/src/components/context-menu/context-menu.tsx

@@ -14,6 +14,7 @@ export const ContextMenu: <T>(props: ContextMenuProps<T>, children: ChildrenList
 >({
   shadowDomName: 'shade-context-menu',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .context-menu-backdrop': {
       opacity: '0',
       transition: `opacity ${cssVariableTheme.transitions.duration.fast} ease-out`,

package/src/components/data-grid/body.tsx

@@ -1,6 +1,7 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import type { CollectionService } from '../../services/collection-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { DataGridRow } from './data-grid-row.js'
 import type { DataRowCells } from './data-grid.js'
 
@@ -28,6 +29,7 @@ export const DataGridBody: <T, Column extends string>(
   elementBaseName: 'tbody',
   css: {
     display: 'table-row-group',
+    fontFamily: cssVariableTheme.typography.fontFamily,
   },
   render: ({ props, useObservable }) => {
     const [data] = useObservable('data', props.service.data)

package/src/components/data-grid/data-grid-row.tsx

@@ -24,6 +24,7 @@ export const DataGridRow: <T, Column extends string>(
   shadowDomName: 'shades-data-grid-row',
   css: {
     display: 'table-row',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     cursor: 'default',
     userSelect: 'none',
     transition: buildTransition(

package/src/components/data-grid/data-grid.tsx

@@ -124,6 +124,7 @@ export const DataGrid: <T, Column extends string>(
   shadowDomName: 'shade-data-grid',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     height: '100%',
     overflow: 'auto',

package/src/components/data-grid/filters/boolean-filter.tsx

@@ -1,6 +1,7 @@
 import { createComponent, Shade } from '@furystack/shades'
 import type { ObservableValue } from '@furystack/utils'
 import { SegmentedControl } from '../../button-group.js'
+import { cssVariableTheme } from '../../../services/css-variable-theme.js'
 import type { FilterableFindOptions } from '../data-grid.js'
 
 type BooleanFilterValue = 'true' | 'false' | 'any'
@@ -11,6 +12,7 @@ export const BooleanFilter = Shade<{
   onClose: () => void
 }>({
   shadowDomName: 'data-grid-boolean-filter',
+  css: { fontFamily: cssVariableTheme.typography.fontFamily },
   render: ({ props, useObservable }) => {
     const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
 

package/src/components/data-grid/filters/date-filter.tsx

@@ -5,6 +5,7 @@ import { Button } from '../../button.js'
 import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
 import { Icon } from '../../icons/icon.js'
 import type { FilterableFindOptions } from '../data-grid.js'
+import { cssVariableTheme } from '../../../services/css-variable-theme.js'
 import { filterBaseCss, filterInputCss } from './filter-styles.js'
 
 type DateMode = 'before' | 'after' | 'between'
@@ -17,6 +18,7 @@ export const DateFilter = Shade<{
   shadowDomName: 'data-grid-date-filter',
   css: {
     ...filterBaseCss,
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& input[type="datetime-local"]': filterInputCss,
   },
   render: ({ props, useObservable, useState }) => {

package/src/components/data-grid/filters/enum-filter.tsx

@@ -6,6 +6,7 @@ import { close as closeIcon, search as searchIcon } from '../../icons/icon-defin
 import { Icon } from '../../icons/icon.js'
 import { Checkbox } from '../../inputs/checkbox.js'
 import type { FilterableFindOptions } from '../data-grid.js'
+import { cssVariableTheme } from '../../../services/css-variable-theme.js'
 import { filterBaseCss } from './filter-styles.js'
 
 type EnumMode = 'include' | 'exclude'
@@ -19,6 +20,7 @@ export const EnumFilter = Shade<{
   shadowDomName: 'data-grid-enum-filter',
   css: {
     ...filterBaseCss,
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .filter-mode': {
       marginBottom: '8px',
     },

package/src/components/data-grid/filters/filter-dropdown.tsx

@@ -10,6 +10,7 @@ export type FilterDropdownProps = {
 export const FilterDropdown: (props: FilterDropdownProps, children: ChildrenList) => JSX.Element = Shade({
   shadowDomName: 'data-grid-filter-dropdown',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     display: 'block',
     position: 'absolute',
     top: '100%',

package/src/components/data-grid/filters/number-filter.tsx

@@ -5,6 +5,7 @@ import { SegmentedControl } from '../../button-group.js'
 import { Icon } from '../../icons/icon.js'
 import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
 import type { FilterableFindOptions } from '../data-grid.js'
+import { cssVariableTheme } from '../../../services/css-variable-theme.js'
 import { filterBaseCss, filterInputCss } from './filter-styles.js'
 
 type NumberOperator = '$eq' | '$gt' | '$gte' | '$lt' | '$lte'
@@ -25,6 +26,7 @@ export const NumberFilter = Shade<{
   shadowDomName: 'data-grid-number-filter',
   css: {
     ...filterBaseCss,
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& input': filterInputCss,
   },
   render: ({ props, useObservable, useState }) => {

package/src/components/data-grid/filters/string-filter.tsx

@@ -5,6 +5,7 @@ import { SegmentedControl } from '../../button-group.js'
 import { Icon } from '../../icons/icon.js'
 import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
 import type { FilterableFindOptions } from '../data-grid.js'
+import { cssVariableTheme } from '../../../services/css-variable-theme.js'
 import { filterBaseCss, filterInputCss } from './filter-styles.js'
 
 type StringOperator = '$regex' | '$startsWith' | '$endsWith' | '$eq'
@@ -24,6 +25,7 @@ export const StringFilter = Shade<{
   shadowDomName: 'data-grid-string-filter',
   css: {
     ...filterBaseCss,
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& input': filterInputCss,
   },
   render: ({ props, useObservable, useState }) => {

package/src/components/data-grid/footer.tsx

@@ -15,6 +15,7 @@ export const DataGridFooter: <T>(props: {
   shadowDomName: 'shade-data-grid-footer',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .pager': {
       backdropFilter: 'blur(10px)',
       color: cssVariableTheme.text.secondary,

package/src/components/data-grid/header.tsx

@@ -5,6 +5,7 @@ import type { ObservableValue } from '@furystack/utils'
 import { ToggleButton } from '../button-group.js'
 import { arrowDown, arrowUp, arrowUpDown, filter as filterIcon } from '../icons/icon-definitions.js'
 import { Icon } from '../icons/icon.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { ColumnFilterConfig, FilterableFindOptions } from './data-grid.js'
 import { BooleanFilter } from './filters/boolean-filter.js'
 import { DateFilter } from './filters/date-filter.js'
@@ -127,6 +128,7 @@ export const DataGridHeader: <T, Column extends string>(
   shadowDomName: 'data-grid-header',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     '& .header-content': {
       display: 'flex',

package/src/components/data-grid/selection-cell.tsx

@@ -6,6 +6,7 @@ export const SelectionCell = Shade<{ entry: any; service: CollectionService<any>
   shadowDomName: 'shades-data-grid-selection-cell',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     justifyContent: 'center',
     '& input[type="checkbox"]': {

package/src/components/dialog.tsx

@@ -4,6 +4,7 @@ import { promisifyAnimation } from '../utils/promisify-animation.js'
 import { Icon } from './icons/icon.js'
 import { close } from './icons/icon-definitions.js'
 import { Modal } from './modal.js'
+import { Typography } from './typography.js'
 
 export type DialogProps = {
   isVisible: boolean
@@ -53,11 +54,13 @@ const hideAnimation = async (el: Element | null) => {
 export const Dialog = Shade<DialogProps>({
   shadowDomName: 'shade-dialog',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .dialog-panel': {
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',
-      backgroundColor: cssVariableTheme.background.paper,
+      background: cssVariableTheme.background.paper,
+      backgroundImage: cssVariableTheme.background.paperImage,
       color: cssVariableTheme.text.primary,
       borderRadius: cssVariableTheme.shape.borderRadius.md,
       boxShadow: cssVariableTheme.shadows.xl,
@@ -77,10 +80,8 @@ export const Dialog = Shade<DialogProps>({
     },
 
     '& .dialog-title': {
-      margin: '0',
-      fontSize: cssVariableTheme.typography.fontSize.lg,
-      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
-      lineHeight: cssVariableTheme.typography.lineHeight.tight,
+      flex: '1',
+      minWidth: '0',
     },
 
     '& .dialog-close': {
@@ -156,7 +157,13 @@ export const Dialog = Shade<DialogProps>({
         >
           {title || onClose ? (
             <div className="dialog-header">
-              {title ? <h2 className="dialog-title">{title}</h2> : <span />}
+              {title ? (
+                <Typography variant="h5" className="dialog-title" style={{ margin: '0' }}>
+                  {title}
+                </Typography>
+              ) : (
+                <span />
+              )}
               {onClose ? (
                 <button className="dialog-close" onclick={handleClose} aria-label="Close dialog">
                   <Icon icon={close} size="small" />
@@ -259,16 +266,9 @@ export const ConfirmDialog = (isVisible: boolean, options: ConfirmDialogOptions)
       }
     >
       {typeof message === 'string' ? (
-        <p
-          style={{
-            margin: '0',
-            fontSize: cssVariableTheme.typography.fontSize.md,
-            lineHeight: cssVariableTheme.typography.lineHeight.normal,
-            color: cssVariableTheme.text.secondary,
-          }}
-        >
+        <Typography variant="body1" color="textSecondary" style={{ margin: '0' }}>
           {message}
-        </p>
+        </Typography>
       ) : (
         message
       )}

package/src/components/divider.tsx

@@ -15,6 +15,7 @@ export const Divider = Shade<DividerProps>({
   shadowDomName: 'shade-divider',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     margin: '0',
     border: 'none',

package/src/components/drawer/drawer-toggle-button.tsx

@@ -23,7 +23,7 @@ export type DrawerToggleButtonProps = {
  * // In AppBar
  * <AppBar>
  *   <DrawerToggleButton position="left" />
- *   <h1>My App</h1>
+ *   <Typography variant="h3">My App</Typography>
  * </AppBar>
  *
  * // With custom aria-label
@@ -37,6 +37,7 @@ export const DrawerToggleButton = Shade<DrawerToggleButtonProps>({
   shadowDomName: 'shade-drawer-toggle-button',
   css: {
     display: 'inline-block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
 
     '& button': {
       display: 'flex',

package/src/components/drawer/index.tsx

@@ -69,6 +69,7 @@ export const Drawer = Shade<DrawerProps>({
       zIndex: '1000',
       overflow: 'hidden',
       transition: `width ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}, transform ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
+      fontFamily: cssVariableTheme.typography.fontFamily,
       background: cssVariableTheme.background.paper,
     },
 

package/src/components/dropdown.tsx

@@ -60,6 +60,7 @@ export const Dropdown: (props: DropdownProps, children: ChildrenList) => JSX.Ele
   shadowDomName: 'shade-dropdown',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
 
     '& .dropdown-trigger': {

package/src/components/fab.tsx

@@ -14,6 +14,7 @@ export const Fab = Shade<FabProps>({
   elementBaseName: 'button',
   css: {
     position: 'fixed',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     bottom: cssVariableTheme.spacing.xl,
     right: cssVariableTheme.spacing.xl,
     background: 'var(--fab-color-main)',

package/src/components/form.tsx

@@ -1,6 +1,7 @@
 import { Injectable } from '@furystack/inject'
 import type { ChildrenList, PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { ObservableValue } from '@furystack/utils'
 import type { InputValidationResult } from './inputs/input.js'
 
@@ -58,6 +59,7 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
   shadowDomName: 'shade-form',
   elementBase: HTMLFormElement,
   elementBaseName: 'form',
+  css: { fontFamily: cssVariableTheme.typography.fontFamily },
   render: ({ props, children, useDisposable, injector, useHostProps }) => {
     const formInjector = useDisposable('formInjector', () => injector.createChild())
     const formService = new FormService()