@furystack/shades-common-components 12.6.0 → 13.0.0

package/src/components/grid.tsx

@@ -31,6 +31,7 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
     shadowDomName: 'shade-grid',
     css: {
       display: 'block',
+      fontFamily: cssVariableTheme.typography.fontFamily,
       width: '100%',
       height: '100%',
       overflow: 'auto',
@@ -41,7 +42,8 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
       },
       '& th': {
         padding: '1em 1.2em',
-        backgroundColor: cssVariableTheme.background.paper,
+        background: cssVariableTheme.background.paper,
+        backgroundImage: cssVariableTheme.background.paperImage,
         color: cssVariableTheme.text.secondary,
         borderRadius: cssVariableTheme.shape.borderRadius.xs,
         top: '0',

package/src/components/icons/icon.tsx

@@ -1,5 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { paletteMainColors } from '../../services/palette-css-vars.js'
 import type { Palette } from '../../services/theme-provider-service.js'
 import type { IconDefinition } from './icon-types.js'
@@ -39,6 +40,7 @@ export const Icon = Shade<IconProps>({
   shadowDomName: 'shade-icon',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     justifyContent: 'center',
     verticalAlign: 'middle',

package/src/components/image.tsx

@@ -358,6 +358,7 @@ export const Image = Shade<ImageProps>({
   shadowDomName: 'shade-image',
   css: {
     display: 'inline-block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     overflow: 'hidden',
     borderRadius: cssVariableTheme.shape.borderRadius.sm,

package/src/components/inputs/autocomplete.tsx

@@ -1,4 +1,5 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { TextInputProps } from './input.js'
 import { Input } from './input.js'
 
@@ -12,6 +13,7 @@ export const Autocomplete = Shade<{
   onchange?: (value: string) => void
 }>({
   shadowDomName: 'shade-autocomplete',
+  css: { fontFamily: cssVariableTheme.typography.fontFamily },
   render: ({ props, useState, useDisposable, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
 

package/src/components/inputs/checkbox.tsx

@@ -52,6 +52,7 @@ export const Checkbox = Shade<CheckboxProps>({
   shadowDomName: 'shade-checkbox',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
 
     '& label': {
@@ -127,7 +128,7 @@ export const Checkbox = Shade<CheckboxProps>({
       top: '8px',
       width: '10px',
       height: '2px',
-      backgroundColor: cssVariableTheme.background.paper,
+      background: cssVariableTheme.background.paper,
       border: 'none',
       transform: 'none',
       pointerEvents: 'none',

package/src/components/inputs/input-number.tsx

@@ -127,6 +127,7 @@ export const InputNumber = Shade<InputNumberProps>({
   shadowDomName: 'shade-input-number',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1.25em',
 
     '& label': {

package/src/components/inputs/input.tsx

@@ -111,6 +111,7 @@ export const Input = Shade<TextInputProps>({
   shadowDomName: 'shade-input',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1.25em',
 
     // Base label styles

package/src/components/inputs/radio-group.tsx

@@ -42,6 +42,7 @@ export const RadioGroup: (props: RadioGroupProps, children: ChildrenList) => JSX
   shadowDomName: 'shade-radio-group',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
 
     '& .radio-group-label': {
       display: 'block',

package/src/components/inputs/radio.tsx

@@ -44,6 +44,7 @@ export const Radio = Shade<RadioProps>({
   shadowDomName: 'shade-radio',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
 
     '& label': {

package/src/components/inputs/select.spec.tsx

@@ -847,9 +847,7 @@ describe('Select', () => {
         trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }))
         await flushUpdates()
 
-        // Focus handler sets data-focused on the inner container div (selectRootRef), not the host
-        const innerContainer = select.querySelector('div') as HTMLElement
-        expect(innerContainer.hasAttribute('data-focused')).toBe(true)
+        expect(select.hasAttribute('data-focused')).toBe(true)
       })
     })
 
@@ -858,12 +856,11 @@ describe('Select', () => {
         const trigger = select.querySelector('.select-trigger') as HTMLElement
         trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }))
         await flushUpdates()
-        const innerContainer = select.querySelector('div') as HTMLElement
-        expect(innerContainer.hasAttribute('data-focused')).toBe(true)
+        expect(select.hasAttribute('data-focused')).toBe(true)
 
         trigger.dispatchEvent(new FocusEvent('blur', { bubbles: true }))
         await flushUpdates()
-        expect(innerContainer.hasAttribute('data-focused')).toBe(false)
+        expect(select.hasAttribute('data-focused')).toBe(false)
       })
     })
   })

package/src/components/inputs/select.tsx

@@ -80,6 +80,7 @@ export const Select = Shade<SelectProps>({
   shadowDomName: 'shade-select',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     marginBottom: '1.25em',
 
@@ -383,6 +384,8 @@ export const Select = Shade<SelectProps>({
     }
 
     const [state, setState] = useState<SelectState>('selectState', initialState)
+    const [isFocused, setIsFocused] = useState('isFocused', false)
+    const [dropdownDirection, setDropdownDirection] = useState<'up' | 'down'>('dropdownDirection', 'down')
 
     const validationResult = props.getValidationResult?.({ state })
 
@@ -392,7 +395,7 @@ export const Select = Shade<SelectProps>({
       'data-disabled': props.disabled ? '' : undefined,
       'data-multiple': isMultiple ? '' : undefined,
       'data-open': state.isOpen && !props.disabled ? '' : undefined,
-      'data-focused': state.isOpen && !props.disabled ? '' : undefined,
+      'data-focused': (state.isOpen || isFocused) && !props.disabled ? '' : undefined,
       'data-invalid': validationResult?.isValid === false ? '' : undefined,
       style: {
         '--select-primary-color': primaryColor,
@@ -564,16 +567,14 @@ export const Select = Shade<SelectProps>({
           }
         }
 
-        if (dropdownRef.current) {
-          const rect = selectRootRef.current?.getBoundingClientRect() ?? new DOMRect()
+        const rect = selectRootRef.current?.getBoundingClientRect()
+        const dropdownHeight = dropdownRef.current?.scrollHeight ?? 0
+        if (rect && dropdownHeight) {
           const spaceBelow = window.innerHeight - rect.bottom
-          const dropdownHeight = dropdownRef.current.scrollHeight
           const spaceAbove = rect.top
-
-          if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-            dropdownRef.current.setAttribute('data-direction', 'up')
-          } else {
-            dropdownRef.current.removeAttribute('data-direction')
+          const newDirection = spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? 'up' : 'down'
+          if (newDirection !== dropdownDirection) {
+            setDropdownDirection(newDirection)
           }
         }
       })
@@ -721,14 +722,10 @@ export const Select = Shade<SelectProps>({
             }}
             onkeydown={handleKeyDown}
             onfocus={() => {
-              if (!props.disabled) {
-                selectRootRef.current?.setAttribute('data-focused', '')
-              }
+              if (!props.disabled) setIsFocused(true)
             }}
             onblur={() => {
-              if (!state.isOpen) {
-                selectRootRef.current?.removeAttribute('data-focused')
-              }
+              setIsFocused(false)
             }}
           >
             {renderSelectedValues()}
@@ -750,6 +747,7 @@ export const Select = Shade<SelectProps>({
               className="dropdown"
               role="listbox"
               aria-multiselectable={isMultiple ? 'true' : undefined}
+              data-direction={dropdownDirection === 'up' ? 'up' : undefined}
             >
               {props.showSearch ? (
                 <li role="presentation">

package/src/components/inputs/slider.tsx

@@ -179,41 +179,11 @@ const syncVisuals = (
   }
 }
 
-/**
- * Sets all ARIA attributes on thumb elements after render.
- */
-const syncAriaAttributes = (
-  thumb0: HTMLElement | null,
-  thumb1: HTMLElement | null,
-  value: number | [number, number],
-  min: number,
-  max: number,
-  vertical: boolean,
-  disabled: boolean,
-): void => {
-  const thumbs = [thumb0, thumb1].filter(Boolean) as HTMLElement[]
-  thumbs.forEach((thumb, i) => {
-    thumb.setAttribute('role', 'slider')
-    thumb.setAttribute('aria-valuemin', String(min))
-    thumb.setAttribute('aria-valuemax', String(max))
-    thumb.setAttribute('aria-orientation', vertical ? 'vertical' : 'horizontal')
-    if (disabled) {
-      thumb.setAttribute('aria-disabled', 'true')
-    } else {
-      thumb.removeAttribute('aria-disabled')
-    }
-    if (isRangeValue(value)) {
-      thumb.setAttribute('aria-valuenow', String(value[i]))
-    } else {
-      thumb.setAttribute('aria-valuenow', String(value))
-    }
-  })
-}
-
 export const Slider = Shade<SliderProps>({
   shadowDomName: 'shade-slider',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     width: '100%',
     padding: '10px',
@@ -614,10 +584,7 @@ export const Slider = Shade<SliderProps>({
       ...(hasLabels ? { 'data-has-labels': '' } : {}),
     })
 
-    // Set ARIA attributes on thumbs after render
-    queueMicrotask(() => {
-      syncAriaAttributes(thumb0Ref.current, thumb1Ref.current, value, min, max, vertical, disabled)
-    })
+    const orientation = vertical ? 'vertical' : 'horizontal'
 
     // Calculate positions
     const renderMarks = (activeCheck: (markValue: number) => boolean) =>
@@ -661,6 +628,12 @@ export const Slider = Shade<SliderProps>({
             data-index="0"
             tabIndex={disabled ? -1 : 0}
             style={thumbStartStyle}
+            role="slider"
+            aria-valuemin={String(min)}
+            aria-valuemax={String(max)}
+            aria-valuenow={String(value[0])}
+            aria-orientation={orientation}
+            aria-disabled={disabled ? 'true' : undefined}
           />
           <div
             ref={thumb1Ref}
@@ -668,6 +641,12 @@ export const Slider = Shade<SliderProps>({
             data-index="1"
             tabIndex={disabled ? -1 : 0}
             style={thumbEndStyle}
+            role="slider"
+            aria-valuemin={String(min)}
+            aria-valuemax={String(max)}
+            aria-valuenow={String(value[1])}
+            aria-orientation={orientation}
+            aria-disabled={disabled ? 'true' : undefined}
           />
           {renderMarks((v) => v >= value[0] && v <= value[1])}
         </div>
@@ -687,7 +666,19 @@ export const Slider = Shade<SliderProps>({
       <div ref={sliderRootRef} className="slider-root">
         <div className="slider-rail" />
         <div ref={trackRef} className="slider-track" style={trackStyle} />
-        <div ref={thumb0Ref} className="slider-thumb" data-index="0" tabIndex={disabled ? -1 : 0} style={thumbStyle} />
+        <div
+          ref={thumb0Ref}
+          className="slider-thumb"
+          data-index="0"
+          tabIndex={disabled ? -1 : 0}
+          style={thumbStyle}
+          role="slider"
+          aria-valuemin={String(min)}
+          aria-valuemax={String(max)}
+          aria-valuenow={String(value)}
+          aria-orientation={orientation}
+          aria-disabled={disabled ? 'true' : undefined}
+        />
         {renderMarks((v) => v <= value)}
         {props.name ? <input type="hidden" name={props.name} value={String(value)} /> : null}
       </div>

package/src/components/inputs/switch.tsx

@@ -52,6 +52,7 @@ export const Switch = Shade<SwitchProps>({
   shadowDomName: 'shade-switch',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
 
     '& label': {
@@ -94,7 +95,7 @@ export const Switch = Shade<SwitchProps>({
       width: '18px',
       height: '18px',
       borderRadius: '50%',
-      backgroundColor: cssVariableTheme.background.paper,
+      background: cssVariableTheme.background.paper,
       transition: buildTransition(
         ['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
         ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],

package/src/components/inputs/text-area.tsx

@@ -13,6 +13,7 @@ export const TextArea = Shade<TextAreaProps>({
   shadowDomName: 'shade-text-area',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1em',
     '& label': {
       display: 'flex',

package/src/components/linear-progress.tsx

@@ -36,6 +36,7 @@ export const LinearProgress = Shade<LinearProgressProps>({
   shadowDomName: 'shade-linear-progress',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     overflow: 'hidden',
     position: 'relative',

package/src/components/list/list-item.tsx

@@ -17,6 +17,7 @@ export const ListItem: <T>(props: ListItemProps<T>, children: ChildrenList) => J
   shadowDomName: 'shade-list-item',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     cursor: 'default',
     userSelect: 'none',

package/src/components/list/list.tsx

@@ -1,6 +1,7 @@
 import type { ChildrenList, PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
 import { ClickAwayService } from '../../services/click-away-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { ListService } from '../../services/list-service.js'
 import { Pagination } from '../pagination.js'
 import { ListItem } from './list-item.js'
@@ -36,6 +37,7 @@ export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Eleme
   shadowDomName: 'shade-list',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     overflow: 'auto',
     '& .shade-list-pagination': {

package/src/components/loader.tsx

@@ -28,6 +28,7 @@ export const Loader = Shade<LoaderProps>({
   shadowDomName: 'shade-loader',
   css: {
     display: 'inline-block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     transformOrigin: 'center',
     opacity: '0',
   },

package/src/components/markdown/markdown-display.spec.tsx

@@ -43,7 +43,7 @@ describe('MarkdownDisplay', () => {
 
       await flushUpdates()
 
-      const typography = document.querySelector('shade-markdown-display shade-typography')
+      const typography = document.querySelector('shade-markdown-display [is^="shade-typography"]')
       expect(typography).not.toBeNull()
       expect(typography?.getAttribute('data-variant')).toBe('h1')
       expect(typography?.textContent).toContain('Hello World')
@@ -62,7 +62,7 @@ describe('MarkdownDisplay', () => {
 
       await flushUpdates()
 
-      const typography = document.querySelector('shade-markdown-display shade-typography[data-variant="body1"]')
+      const typography = document.querySelector('shade-markdown-display [is^="shade-typography"][data-variant="body1"]')
       expect(typography).not.toBeNull()
       expect(typography?.textContent).toContain('Just a paragraph.')
     })

package/src/components/markdown/markdown-display.tsx

@@ -122,7 +122,7 @@ export const MarkdownDisplay = Shade<MarkdownDisplayProps>({
 
     '& .md-code-block': {
       fontFamily: 'monospace',
-      backgroundColor: cssVariableTheme.background.default,
+      background: cssVariableTheme.background.default,
       border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
       borderRadius: cssVariableTheme.shape.borderRadius.md,
       padding: cssVariableTheme.spacing.md,