@duro-app/ui 0.26.0 → 0.28.0

package/package.json

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

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -56,7 +56,6 @@ function Root({
     <CheckboxGroupContext.Provider value={{value, onToggle, disabled}}>
       <html.div
         role="group"
-        aria-orientation={orientation}
         style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
       >
         {children}

package/src/components/Field/styles.css.ts

@@ -31,7 +31,7 @@ export const styles = css.create({
   },
   error: {
     fontSize: typography.fontSizeXs,
-    color: colors.error,
+    color: colors.errorText,
   },
   fieldContent: {
     display: 'flex',

package/src/components/Input/Input.tsx

@@ -29,6 +29,7 @@ interface InputProps {
   value?: string
   defaultValue?: string
   disabled?: boolean
+  autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onBlur?: () => void
   ref?: React.Ref<HTMLInputElement>
@@ -46,6 +47,7 @@ export function Input({
   value,
   defaultValue,
   disabled,
+  autoFocus,
   onChange,
   onBlur,
   ref,
@@ -62,9 +64,11 @@ export function Input({
   const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
 
-  // react-strict-dom omits web-only `pattern` from its types, but the
-  // underlying DOM element supports it. Type-assert to pass it through.
-  const extraProps = pattern !== undefined ? {pattern} : undefined
+  // react-strict-dom omits some web-only props from its types, but the
+  // underlying DOM element supports them. Type-assert to pass them through.
+  const extraProps: Record<string, unknown> = {}
+  if (pattern !== undefined) extraProps.pattern = pattern
+  if (autoFocus) extraProps.autoFocus = true
 
   return (
     <html.input
@@ -86,7 +90,7 @@ export function Input({
       onBlur={effectiveOnBlur as StrictInputProps['onBlur']}
       ref={effectiveRef as React.Ref<HTMLInputElement>}
       style={[styles.base, styles[effectiveVariant], groupCtx?.inGroup && styles.inGroup]}
-      {...(extraProps as Record<string, unknown>)}
+      {...extraProps}
     />
   )
 }

package/src/components/ScrollArea/ScrollArea.tsx

@@ -28,11 +28,15 @@ interface ViewportProps {
 }
 
 function Viewport({children, maxHeight}: ViewportProps) {
-  const {viewportRef} = useScrollArea()
+  const {viewportRef, viewportId} = useScrollArea()
 
   return (
     <html.div
       ref={viewportRef}
+      id={viewportId}
+      tabIndex={0}
+      role="region"
+      aria-label="Scrollable content"
       style={[styles.viewport, maxHeight != null && styles.viewportMaxHeight(maxHeight)]}
     >
       {children}
@@ -65,7 +69,16 @@ interface ScrollbarProps {
 }
 
 function Scrollbar({orientation = 'vertical', children}: ScrollbarProps) {
-  const {scrolling, scrollHeight, scrollWidth, clientHeight, clientWidth} = useScrollArea()
+  const {
+    viewportId,
+    scrolling,
+    scrollTop,
+    scrollLeft,
+    scrollHeight,
+    scrollWidth,
+    clientHeight,
+    clientWidth,
+  } = useScrollArea()
 
   // Hide scrollbar when content fits
   const hasOverflow =
@@ -73,11 +86,22 @@ function Scrollbar({orientation = 'vertical', children}: ScrollbarProps) {
 
   if (!hasOverflow) return null
 
+  const isVertical = orientation === 'vertical'
+  const maxScroll = isVertical ? scrollHeight - clientHeight : scrollWidth - clientWidth
+  const scrollOffset = isVertical ? scrollTop : scrollLeft
+  const valueNow = maxScroll > 0 ? Math.round((scrollOffset / maxScroll) * 100) : 0
+
   return (
     <html.div
+      role="scrollbar"
+      aria-controls={viewportId}
+      aria-orientation={orientation}
+      aria-valuenow={valueNow}
+      aria-valuemin={0}
+      aria-valuemax={100}
       style={[
         styles.scrollbar,
-        orientation === 'vertical' ? styles.scrollbarVertical : styles.scrollbarHorizontal,
+        isVertical ? styles.scrollbarVertical : styles.scrollbarHorizontal,
         scrolling ? styles.scrollbarVisible : styles.scrollbarHidden,
       ]}
     >

package/src/components/ScrollArea/ScrollAreaContext.ts

@@ -3,6 +3,7 @@ import {createContext, useContext} from 'react'
 export interface ScrollAreaContextValue {
   viewportRef: React.RefObject<HTMLDivElement | null>
   contentRef: React.RefObject<HTMLDivElement | null>
+  viewportId: string
   scrollTop: number
   scrollLeft: number
   scrollHeight: number

package/src/components/ScrollArea/useScrollAreaRoot.ts

@@ -1,7 +1,8 @@
-import {useState, useCallback, useRef, useEffect} from 'react'
+import {useState, useCallback, useRef, useEffect, useId} from 'react'
 import type {ScrollAreaContextValue} from './ScrollAreaContext'
 
 export function useScrollAreaRoot(): ScrollAreaContextValue {
+  const viewportId = useId()
   const viewportRef = useRef<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)
@@ -61,6 +62,7 @@ export function useScrollAreaRoot(): ScrollAreaContextValue {
   return {
     viewportRef,
     contentRef,
+    viewportId,
     scrollTop,
     scrollLeft,
     scrollHeight,

package/src/components/Tag/Tag.tsx

@@ -91,31 +91,33 @@ export function Tag({
         {children}
       </html.span>
       {removable && (
-        <html.button
-          type="button"
-          aria-label={removeLabel}
-          disabled={disabled}
-          onClick={(e) => {
-            ;(e as any).stopPropagation?.()
-            onRemove()
-          }}
-          tabIndex={-1}
-          style={[styles.removeButton, disabled && styles.removeButtonDisabled]}
-        >
-          <svg
-            width={size === 'sm' ? 10 : 12}
-            height={size === 'sm' ? 10 : 12}
-            viewBox="0 0 12 12"
-            fill="none"
+        <html.span {...(isGrouped ? {role: 'gridcell' as any} : {})}>
+          <html.button
+            type="button"
+            aria-label={removeLabel}
+            disabled={disabled}
+            onClick={(e) => {
+              ;(e as any).stopPropagation?.()
+              onRemove()
+            }}
+            tabIndex={-1}
+            style={[styles.removeButton, disabled && styles.removeButtonDisabled]}
           >
-            <path
-              d="M3 3l6 6M9 3l-6 6"
-              stroke="currentColor"
-              strokeWidth={1.5}
-              strokeLinecap="round"
-            />
-          </svg>
-        </html.button>
+            <svg
+              width={size === 'sm' ? 10 : 12}
+              height={size === 'sm' ? 10 : 12}
+              viewBox="0 0 12 12"
+              fill="none"
+            >
+              <path
+                d="M3 3l6 6M9 3l-6 6"
+                stroke="currentColor"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+              />
+            </svg>
+          </html.button>
+        </html.span>
       )}
     </>
   )

package/src/components/Tag/styles.css.ts

@@ -7,13 +7,15 @@ export const styles = css.create({
   base: {
     display: 'inline-flex',
     alignItems: 'center',
-    gap: spacing.xs,
+    gap: spacing.sm,
     fontFamily: typography.fontFamily,
-    fontWeight: typography.fontWeightMedium,
+    fontWeight: typography.fontWeightNormal,
     lineHeight: 1,
-    borderRadius: radii.full,
+    borderRadius: 4,
     whiteSpace: 'nowrap',
-    borderWidth: 0,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,
@@ -32,29 +34,32 @@ export const styles = css.create({
     },
   },
   sizeMd: {
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.ms,
+    paddingRight: spacing.ms,
+    fontSize: typography.fontSizeSm,
+  },
+  sizeSm: {
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
   },
-  sizeSm: {
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: spacing.xs,
-    paddingRight: spacing.xs,
-    fontSize: '0.625rem',
-  },
   // Reduce right padding when removable to keep visual balance with the button
   removableMd: {
-    paddingRight: spacing.xs,
+    paddingRight: spacing.sm,
   },
   removableSm: {
-    paddingRight: 2,
+    paddingRight: spacing.xs,
   },
   default: {
-    backgroundColor: colors.bgCardHover,
-    color: colors.textMuted,
+    backgroundColor: {
+      default: colors.bg,
+      ':hover': colors.bgCardHover,
+    },
+    color: colors.text,
   },
   success: {
     backgroundColor: colors.successBg,

package/src/components/TagGroup/TagGroup.stories.tsx

@@ -44,6 +44,7 @@ function EditableExample() {
 
   return (
     <TagGroup.Root value={tags} onValueChange={setTags}>
+      <TagGroup.Input placeholder="Add tag..." />
       <TagGroup.List aria-label="Tags">
         {tags.map((t) => (
           <Tag key={t} value={t}>
@@ -51,7 +52,6 @@ function EditableExample() {
           </Tag>
         ))}
       </TagGroup.List>
-      <TagGroup.Input placeholder="Add tag..." />
     </TagGroup.Root>
   )
 }
@@ -76,6 +76,7 @@ export const WithDefaultValue: Story = {
       const [tags, setTags] = useState(['one', 'two'])
       return (
         <TagGroup.Root defaultValue={['one', 'two']} onValueChange={setTags}>
+          <TagGroup.Input placeholder="Add..." />
           <TagGroup.List aria-label="Items">
             {tags.map((t) => (
               <Tag key={t} value={t}>
@@ -83,7 +84,6 @@ export const WithDefaultValue: Story = {
               </Tag>
             ))}
           </TagGroup.List>
-          <TagGroup.Input placeholder="Add..." />
         </TagGroup.Root>
       )
     }
@@ -102,12 +102,14 @@ function EmailExample() {
     <Stack gap="md">
       <Field.Root required>
         <Field.Label>Invite emails</Field.Label>
+        <Field.Description>Press Enter or comma to add each email</Field.Description>
         <TagGroup.Root
           name="emails"
           value={emails}
           onValueChange={setEmails}
           onValidate={(v) => (v.includes('@') ? true : 'Invalid email')}
         >
+          <TagGroup.Input placeholder="Add email..." />
           <TagGroup.List aria-label="Emails">
             {emails.map((e) => (
               <Tag key={e} value={e}>
@@ -115,9 +117,7 @@ function EmailExample() {
               </Tag>
             ))}
           </TagGroup.List>
-          <TagGroup.Input placeholder="Add email..." />
         </TagGroup.Root>
-        <Field.Description>Press Enter or comma to add each email</Field.Description>
       </Field.Root>
     </Stack>
   )
@@ -148,6 +148,7 @@ function DisabledExample() {
   const tags = ['react', 'vue', 'svelte']
   return (
     <TagGroup.Root value={tags} disabled>
+      <TagGroup.Input placeholder="Disabled..." />
       <TagGroup.List aria-label="Frameworks">
         {tags.map((t) => (
           <Tag key={t} value={t}>
@@ -155,7 +156,6 @@ function DisabledExample() {
           </Tag>
         ))}
       </TagGroup.List>
-      <TagGroup.Input placeholder="Disabled..." />
     </TagGroup.Root>
   )
 }

package/src/components/TagGroup/TagGroup.tsx

@@ -284,7 +284,7 @@ function Input({placeholder}: InputProps) {
       type="text"
       value={inputValue}
       onChange={(e: any) => setInputValue(e.target.value)}
-      placeholder={!ctx?.values.length ? placeholder : undefined}
+      placeholder={placeholder}
       disabled={ctx?.disabled}
       style={styles.input}
     />

package/src/components/TagGroup/styles.css.ts

@@ -9,85 +9,71 @@ export const styles = css.create({
     flexDirection: 'column',
   },
   container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+  containerError: {},
+  containerDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  // Static display (no Input) — no gap needed
+  containerStatic: {
+    gap: 0,
+  },
+  list: {
     display: 'flex',
     flexWrap: 'wrap',
-    alignItems: 'center',
     gap: spacing.xs,
-    paddingTop: spacing.xs,
-    paddingBottom: spacing.xs,
-    paddingLeft: spacing.sm,
-    paddingRight: spacing.sm,
+    alignItems: 'center',
+  },
+  input: {
+    width: '100%',
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
-      ':focus-within': colors.accent,
+      ':focus': colors.accent,
     },
     borderRadius: radii.sm,
     backgroundColor: colors.bg,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
     minHeight: 40,
     transitionProperty: 'border-color',
     transitionDuration: '150ms',
     transitionTimingFunction: 'ease',
     outlineWidth: {
       default: 0,
-      ':focus-within': 2,
+      ':focus': 2,
     },
     outlineStyle: {
       default: 'none',
-      ':focus-within': 'solid',
+      ':focus': 'solid',
     },
     outlineColor: {
       default: 'transparent',
-      ':focus-within': colors.accent,
+      ':focus': colors.accent,
     },
     outlineOffset: {
       default: 0,
-      ':focus-within': 1,
+      ':focus': 1,
     },
+    boxSizing: 'border-box',
   },
-  containerError: {
+  inputError: {
     borderColor: {
       default: colors.error,
-      ':focus-within': colors.error,
+      ':focus': colors.error,
     },
   },
-  containerDisabled: {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-  // Static display (no Input) — no input-field border
-  containerStatic: {
-    borderWidth: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    minHeight: 0,
-    backgroundColor: 'transparent',
-    outlineWidth: 0,
-  },
-  list: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: spacing.xs,
-    alignItems: 'center',
-  },
-  input: {
-    flex: 1,
-    minWidth: 120,
-    borderWidth: 0,
-    backgroundColor: 'transparent',
-    fontFamily: typography.fontFamily,
-    fontSize: typography.fontSizeSm,
-    lineHeight: typography.lineHeight,
-    color: colors.text,
-    outlineWidth: 0,
-    paddingTop: spacing.xs,
-    paddingBottom: spacing.xs,
-    paddingLeft: spacing.xs,
-    paddingRight: spacing.xs,
-  },
   liveRegion: {
     position: 'absolute',
     width: 1,

package/src/components/Textarea/Textarea.tsx

@@ -15,6 +15,7 @@ interface TextareaProps {
   value?: string
   defaultValue?: string
   disabled?: boolean
+  autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onBlur?: () => void
   ref?: React.Ref<HTMLTextAreaElement>
@@ -29,6 +30,7 @@ export function Textarea({
   value,
   defaultValue,
   disabled,
+  autoFocus,
   onChange,
   onBlur,
   ref,
@@ -44,6 +46,9 @@ export function Textarea({
   const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
 
+  const extraProps: Record<string, unknown> = {}
+  if (autoFocus) extraProps.autoFocus = true
+
   return (
     <html.textarea
       id={ctx?.controlId}
@@ -62,6 +67,7 @@ export function Textarea({
       onBlur={effectiveOnBlur as StrictTextareaProps['onBlur']}
       ref={effectiveRef as React.Ref<HTMLTextAreaElement>}
       style={[styles.base, styles[effectiveVariant]]}
+      {...extraProps}
     />
   )
 }