@duro-app/ui 5.34.2 → 5.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.34.2",
+  "version": "5.35.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -92,7 +92,7 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.13",
     "qrcode": "^1.5.4",
-    "@duro-app/tokens": "^5.34.2"
+    "@duro-app/tokens": "^5.35.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Card/Card.tsx

@@ -3,7 +3,8 @@ import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 
 export type CardVariant = 'elevated' | 'outlined' | 'filled' | 'interactive'
-export type CardSize = 'default' | 'compact' | 'full'
+/** `flush`: no padding, the content reaching the card's rounded edge (a List of rows). */
+export type CardSize = 'default' | 'compact' | 'full' | 'flush'
 
 interface CardProps {
   variant?: CardVariant
@@ -17,6 +18,7 @@ const sizeMap = {
   default: styles.sizeDefault,
   compact: styles.sizeCompact,
   full: styles.sizeFull,
+  flush: styles.sizeFlush,
 } as const
 
 export function Card({

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

@@ -65,6 +65,11 @@ export const styles = css.create({
   sizeFull: {
     padding: spacing.xl,
   },
+  // Rows reach the edge; the rounded corners clip them.
+  sizeFlush: {
+    padding: 0,
+    overflow: 'hidden',
+  },
   // Header
   header: {
     fontSize: typography.fontSizeLg,

package/src/components/List/List.stories.tsx

@@ -7,6 +7,7 @@ import {clickLink} from '../../docs/clickLink'
 import {onThemeSurface} from '../../docs/themedSurface'
 import type {OnNavigate} from '../../shared/navigate'
 import {Icon} from '../Icon/Icon'
+import {Card} from '../Card/Card'
 import {Badge} from '../Badge/Badge'
 import {Button} from '../Button/Button'
 import {Checkbox} from '../Checkbox/Checkbox'
@@ -365,3 +366,45 @@ export const LinkItems: StoryObj<{onNavigate: OnNavigate}> = {
     await expect(canvas.queryByRole('link', {name: 'Usage'})).toBeNull()
   },
 }
+
+/**
+ * A settings group: the rows in a flush Card, reaching its rounded edge, with a divider between
+ * rows and none under the last (a hidden conditional row does not count).
+ */
+export const InFlushCard: StoryObj<{showHidden: boolean}> = {
+  decorators: [onThemeSurface],
+  args: {showHidden: false},
+  render: (args) => (
+    <Card variant="outlined" size="flush">
+      <List.Root aria-label="General">
+        <List.Item href="#updates">
+          <List.Content>
+            <List.Text>Updates</List.Text>
+          </List.Content>
+        </List.Item>
+        <List.Item href="#appearance">
+          <List.Content>
+            <List.Text>Appearance</List.Text>
+          </List.Content>
+        </List.Item>
+        {args.showHidden ? (
+          <List.Item>
+            <List.Content>
+              <List.Text>Hidden</List.Text>
+            </List.Content>
+          </List.Item>
+        ) : null}
+      </List.Root>
+    </Card>
+  ),
+  play: async ({canvas}) => {
+    const list = canvas.getByRole('list', {name: 'General'})
+    const items = canvas.getAllByRole('listitem')
+    await expect(items).toHaveLength(2)
+    await expect(getComputedStyle(items[0]).borderBottomWidth).toBe('1px')
+    await expect(getComputedStyle(items[1]).borderBottomWidth).toBe('0px')
+    const card = list.parentElement as HTMLElement
+    await expect(getComputedStyle(card).paddingTop).toBe('0px')
+    await expect(getComputedStyle(card).overflow).toBe('hidden')
+  },
+}

package/src/components/List/List.tsx

@@ -1,4 +1,13 @@
-import {type ReactNode, createContext, useContext, useId, useMemo, useState} from 'react'
+import {
+  Children,
+  type ReactNode,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
 import {html} from 'react-strict-dom'
 import type {OnNavigate} from '../../shared/navigate'
 import {
@@ -22,6 +31,9 @@ interface ListContextValue {
 
 const ListContext = createContext<ListContextValue>({selectionMode: 'none'})
 
+// The Root's last item draws no divider below it: the list (or the card around it) ends there.
+const LastItemContext = createContext(false)
+
 function useList() {
   return useContext(ListContext)
 }
@@ -56,7 +68,7 @@ function Root({
       aria-labelledby={hasTitle ? titleId : undefined}
       style={styles.root}
     >
-      {children}
+      {markLastItem(children)}
     </html.div>
   )
   return (
@@ -78,6 +90,20 @@ function Root({
   )
 }
 
+/** The Root's children, the last one told it is last (a hidden conditional row is not counted). */
+function markLastItem(children: ReactNode): ReactNode {
+  const items = Children.toArray(children)
+  return items.map((child, index) =>
+    index === items.length - 1 ? (
+      <LastItemContext.Provider key={isValidElement(child) ? child.key : index} value={true}>
+        {child}
+      </LastItemContext.Provider>
+    ) : (
+      child
+    ),
+  )
+}
+
 // --- Item ---
 
 interface ItemBaseProps {
@@ -130,6 +156,7 @@ function Item({children, selected, disabled, onClick, href, onNavigate}: ItemPro
   const {selectionMode} = useList()
   const isSelectable = selectionMode !== 'none'
   const isDisabled = disabled === true
+  const isLast = useContext(LastItemContext)
   const [linkState] = useState(createItemLinkState)
   const action = useMemo<ItemAction | null>(() => {
     if (href !== undefined) return {kind: 'link', href, onNavigate, disabled: isDisabled, linkState}
@@ -155,6 +182,7 @@ function Item({children, selected, disabled, onClick, href, onNavigate}: ItemPro
           styles.item,
           (onClick != null || href !== undefined) && !disabled && styles.itemClickable,
           selected && styles.itemSelected,
+          isLast && styles.itemLast,
           disabled && styles.itemDisabled,
         ]}
       >

package/src/components/Switch/Switch.native.tsx

@@ -17,6 +17,7 @@ export function Switch({
   onCheckedChange,
   disabled = false,
   children,
+  'aria-label': ariaLabel,
 }: SwitchProps) {
   const [checked, setChecked] = useControllableValue(
     controlledChecked,
@@ -33,6 +34,7 @@ export function Switch({
         type="button"
         role="switch"
         aria-checked={checked}
+        aria-label={!children ? ariaLabel : undefined}
         disabled={disabled}
         onClick={handleClick}
         style={[styles.track, checked ? styles.trackChecked : styles.trackUnchecked]}

package/src/components/Switch/Switch.stories.tsx

@@ -40,6 +40,16 @@ export const Checked: Story = {
   },
 }
 
+/** No visible label: a settings row shows the title, and `aria-label` names the switch. */
+export const Labelled: Story = {
+  args: {'aria-label': 'Analytics'},
+  play: async ({canvas, userEvent, args}) => {
+    const switchEl = canvas.getByRole('switch', {name: 'Analytics'})
+    await userEvent.click(switchEl)
+    await expect(args.onCheckedChange).toHaveBeenCalledWith(true)
+  },
+}
+
 export const Disabled: Story = {
   args: {disabled: true, children: 'Cannot toggle'},
   play: async ({canvas, userEvent, args}) => {

package/src/components/Switch/Switch.tsx

@@ -15,6 +15,7 @@ export function Switch({
   name,
   value,
   children,
+  'aria-label': ariaLabel,
 }: SwitchProps) {
   const [checked, setChecked] = useControllableValue(
     controlledChecked,
@@ -46,6 +47,7 @@ export function Switch({
         defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
         disabled={disabled}
         aria-checked={checked}
+        aria-label={!children ? ariaLabel : undefined}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
           onCheckedChange?.(e.target.checked)
         }}

package/src/components/Switch/Switch.types.ts

@@ -15,4 +15,6 @@ export interface SwitchProps {
   value?: string
   /** Label content rendered beside the switch. */
   children?: ReactNode
+  /** Names the switch when it has no visible label (`children`), e.g. a row whose title already shows it. */
+  'aria-label'?: string
 }