@pantoia/ui 0.10.4 → 0.11.0

package/avatar/index.module.css

@@ -0,0 +1,4 @@
+.seed {
+  background-color: oklch(var(--pds-avatar-seed-bg) var(--avatar-hue));
+  color: oklch(var(--pds-avatar-seed-fg) var(--avatar-hue));
+}

package/avatar/index.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
+import type { ComponentProps, CSSProperties } from 'react'
+
+import { tv } from '../tv'
+
+import s from './index.module.css'
+
+const HANGUL = /\p{Script=Hangul}/u
+const LATIN = /\p{Script=Latin}+/gu
+const LETTER = /[\p{Script=Hangul}\p{Script=Latin}]/u
+
+export function initials(name: string): string | null {
+  const first = LETTER.exec(name)?.[0]
+  if (!first) return null
+  if (HANGUL.test(first)) return first
+
+  const words = name.match(LATIN) ?? []
+  const text = words.length > 1 ? words[0]![0]! + words[1]![0]! : words[0]!.slice(0, 2)
+
+  return text.toUpperCase()
+}
+
+const FNV_OFFSET = 0x811c9dc5
+const FNV_PRIME = 0x01000193
+
+export function fnv1a(seed: string): number {
+  let hash = FNV_OFFSET
+
+  for (const byte of new TextEncoder().encode(seed.toLowerCase())) {
+    hash ^= byte
+    hash = Math.imul(hash, FNV_PRIME) >>> 0
+  }
+
+  return hash >>> 0
+}
+
+export function hueOf(seed: string): number {
+  const hue = fnv1a(seed) % 295
+  return hue >= 75 ? hue + 65 : hue
+}
+
+export const avatar = tv({
+  base: 'inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full font-medium',
+
+  variants: {
+    color: {
+      neutral: 'bg-bg-neutral-solid/10 text-fg',
+      brand: 'bg-bg-brand-weak text-fg-brand-contrast',
+      info: 'bg-bg-info-weak text-fg-info-contrast',
+      success: 'bg-bg-success-weak text-fg-success-contrast',
+      warning: 'bg-bg-warning-weak text-fg-warning-contrast',
+      danger: 'bg-bg-danger-weak text-fg-danger-contrast',
+      seed: '',
+    },
+    size: {
+      xs: 'size-5 text-t10',
+      sm: 'size-6 text-t10',
+      md: 'size-8 text-t13',
+      lg: 'size-10 text-t16',
+      xl: 'size-14 text-t20',
+    },
+  },
+
+  defaultVariants: { color: 'neutral', size: 'md' },
+})
+
+type AvatarTone =
+  | { color?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger', seed?: never }
+  | { seed: string, color?: never }
+
+export type AvatarProps = Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'className' | 'color' | 'children'> & AvatarTone & {
+  src?: string
+  name?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  className?: string
+}
+
+export function Avatar({ src, name, color, seed, size, className, style, ...rest }: AvatarProps) {
+  const text = name ? initials(name) : null
+  const seeded = seed !== undefined
+
+  return (
+    <AvatarPrimitive.Root
+      role={name ? 'img' : undefined}
+      aria-label={name}
+      {...rest}
+      style={seeded ? { ...style, '--avatar-hue': hueOf(seed) } as CSSProperties : style}
+      className={avatar({ color: seeded ? 'seed' : color, size, className: seeded ? [s.seed, className] : className })}
+    >
+      {src && <AvatarPrimitive.Image src={src} alt="" className="size-full object-cover" />}
+
+      <AvatarPrimitive.Fallback aria-hidden="true" className="flex size-full items-center justify-center">
+        {text ?? (
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-3/5">
+            <circle cx="12" cy="8" r="4" />
+            <path d="M4 21a8 8 0 0 1 16 0" />
+          </svg>
+        )}
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  )
+}

package/badge/index.tsx

@@ -8,12 +8,16 @@ export const badge = tv({
 
   variants: {
     color: {
-      neutral: 'bg-bg-neutral-solid/10 text-fg',
-      brand: 'bg-bg-brand-weak text-fg-brand-contrast',
-      info: 'bg-bg-info-weak text-fg-info-contrast',
-      success: 'bg-bg-success-weak text-fg-success-contrast',
-      warning: 'bg-bg-warning-weak text-fg-warning-contrast',
-      danger: 'bg-bg-danger-weak text-fg-danger-contrast',
+      neutral: '',
+      brand: '',
+      info: '',
+      success: '',
+      warning: '',
+      danger: '',
+    },
+    emphasis: {
+      weak: '',
+      solid: '',
     },
     shape: {
       square: 'rounded-r4',
@@ -21,14 +25,31 @@ export const badge = tv({
     },
   },
 
-  defaultVariants: { color: 'neutral', shape: 'square' },
+  compoundVariants: [
+    { color: 'neutral', emphasis: 'weak', class: 'bg-bg-neutral-solid/10 text-fg' },
+    { color: 'brand', emphasis: 'weak', class: 'bg-bg-brand-weak text-fg-brand-contrast' },
+    { color: 'info', emphasis: 'weak', class: 'bg-bg-info-weak text-fg-info-contrast' },
+    { color: 'success', emphasis: 'weak', class: 'bg-bg-success-weak text-fg-success-contrast' },
+    { color: 'warning', emphasis: 'weak', class: 'bg-bg-warning-weak text-fg-warning-contrast' },
+    { color: 'danger', emphasis: 'weak', class: 'bg-bg-danger-weak text-fg-danger-contrast' },
+
+    { color: 'neutral', emphasis: 'solid', class: 'bg-bg-neutral-solid text-fg-neutral-solid-contrast' },
+    { color: 'brand', emphasis: 'solid', class: 'bg-bg-brand-solid text-fg-brand-solid-contrast' },
+    { color: 'info', emphasis: 'solid', class: 'bg-bg-info-solid text-fg-info-solid-contrast' },
+    { color: 'success', emphasis: 'solid', class: 'bg-bg-success-solid text-white' },
+    { color: 'warning', emphasis: 'solid', class: 'bg-bg-warning-solid text-white' },
+    { color: 'danger', emphasis: 'solid', class: 'bg-bg-danger-solid text-white' },
+  ],
+
+  defaultVariants: { color: 'neutral', emphasis: 'weak', shape: 'square' },
 })
 
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
   color?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
+  emphasis?: 'weak' | 'solid'
   shape?: 'square' | 'pill'
 }
 
-export function Badge({ color, shape, className, ...rest }: BadgeProps) {
-  return <span {...rest} className={badge({ color, shape, className })} />
+export function Badge({ color, emphasis, shape, className, ...rest }: BadgeProps) {
+  return <span {...rest} className={badge({ color, emphasis, shape, className })} />
 }

package/bottom-sheet/index.module.css

@@ -0,0 +1,16 @@
+@keyframes slide-in  { from { translate: 0 var(--bottom-sheet-slide); } }
+@keyframes slide-out { to   { translate: 0 var(--bottom-sheet-slide); } }
+
+.panel {
+  --bottom-sheet-slide: 100%;
+  transform: translateY(var(--drawer-swipe-movement-y, 0px));
+  transition: transform var(--dur-enter) var(--ease-enter);
+}
+
+.panel[data-open]   { animation: slide-in  var(--dur-enter) var(--ease-enter); }
+.panel[data-closed] { animation: slide-out var(--dur-exit)  var(--ease-exit); }
+.panel[data-swiping] { transition-duration: 0ms; }
+
+@media (prefers-reduced-motion: reduce) {
+  .panel { --bottom-sheet-slide: 0%; }
+}

package/bottom-sheet/index.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
+import type { ComponentProps, ReactNode } from 'react'
+
+import { tv } from '../tv'
+
+import s from './index.module.css'
+
+export type BottomSheetProps = Omit<DrawerPrimitive.Root.Props, 'swipeDirection'>
+
+export function BottomSheet(props: BottomSheetProps) {
+  return <DrawerPrimitive.Root {...props} swipeDirection="down" />
+}
+
+export type BottomSheetTriggerProps = ComponentProps<typeof DrawerPrimitive.Trigger>
+
+export function BottomSheetTrigger(props: BottomSheetTriggerProps) {
+  return <DrawerPrimitive.Trigger {...props} />
+}
+
+export type BottomSheetCloseProps = ComponentProps<typeof DrawerPrimitive.Close>
+
+export function BottomSheetClose(props: BottomSheetCloseProps) {
+  return <DrawerPrimitive.Close {...props} />
+}
+
+export const bottomSheetContent = tv({
+  base: 'sheet text-fg z-overlay fixed inset-x-0 bottom-0 mx-auto rounded-t-r20'
+    + ' flex max-h-11/12 w-full flex-col gap-stack overflow-y-auto px-4 pb-4 sm:max-w-120'
+    + ' focus-visible:outline-none',
+})
+
+export type BottomSheetContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Popup>, 'className'> & {
+  className?: string
+}
+
+export function BottomSheetContent({ className, children, ...rest }: BottomSheetContentProps) {
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+
+      <DrawerPrimitive.Viewport>
+        <DrawerPrimitive.Popup {...rest} className={`${s.panel} ${bottomSheetContent({ className })}`}>
+          <div aria-hidden="true" className="bg-bg-neutral-solid/20 mx-auto mt-2 h-1 w-10 shrink-0 rounded-full" />
+          {children}
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
+  )
+}
+
+export const bottomSheetHeader = tv({
+  slots: {
+    root: 'flex items-start gap-stack',
+    lead: 'shrink-0',
+    body: 'flex min-w-0 grow flex-col gap-tight',
+    trail: 'shrink-0',
+  },
+})
+
+export interface BottomSheetHeaderProps {
+  lead?: ReactNode
+  trail?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function BottomSheetHeader({ lead, trail, className, children }: BottomSheetHeaderProps) {
+  const ui = bottomSheetHeader()
+
+  return (
+    <div className={ui.root({ className })}>
+      {lead && <div className={ui.lead()}>{lead}</div>}
+      <div className={ui.body()}>{children}</div>
+      {trail && <div className={ui.trail()}>{trail}</div>}
+    </div>
+  )
+}
+
+const bottomSheetTitle = tv({ base: 'text-section min-w-0' })
+
+export type BottomSheetTitleProps = Omit<ComponentProps<typeof DrawerPrimitive.Title>, 'className'> & {
+  className?: string
+}
+
+export function BottomSheetTitle({ className, ...rest }: BottomSheetTitleProps) {
+  return <DrawerPrimitive.Title {...rest} className={bottomSheetTitle({ className })} />
+}
+
+const bottomSheetDescription = tv({ base: 'text-prose text-fg-muted' })
+
+export type BottomSheetDescriptionProps = Omit<ComponentProps<typeof DrawerPrimitive.Description>, 'className'> & {
+  className?: string
+}
+
+export function BottomSheetDescription({ className, ...rest }: BottomSheetDescriptionProps) {
+  return (
+    <DrawerPrimitive.Description {...rest} className={bottomSheetDescription({ className })} />
+  )
+}

package/context-menu/index.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu'
+import type { ComponentProps } from 'react'
+
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  menuPanel,
+  type DropdownMenuCheckboxItemProps,
+  type DropdownMenuGroupProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuRadioGroupProps,
+  type DropdownMenuRadioItemProps,
+  type DropdownMenuSeparatorProps,
+  type DropdownMenuSubContentProps,
+  type DropdownMenuSubProps,
+  type DropdownMenuSubTriggerProps,
+} from '../dropdown-menu'
+
+export type ContextMenuProps = ComponentProps<typeof ContextMenuPrimitive.Root>
+
+export function ContextMenu(props: ContextMenuProps) {
+  return <ContextMenuPrimitive.Root {...props} />
+}
+
+export type ContextMenuTriggerProps = ComponentProps<typeof ContextMenuPrimitive.Trigger>
+
+export function ContextMenuTrigger(props: ContextMenuTriggerProps) {
+  return <ContextMenuPrimitive.Trigger {...props} />
+}
+
+export type ContextMenuContentProps = Omit<ComponentProps<typeof ContextMenuPrimitive.Popup>, 'className'> & {
+  className?: string
+}
+
+export function ContextMenuContent({ className, ...rest }: ContextMenuContentProps) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner className="z-overlay min-w-max will-change-transform">
+        <ContextMenuPrimitive.Popup {...rest} className={menuPanel({ className })} />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+export type ContextMenuGroupProps = DropdownMenuGroupProps
+
+export function ContextMenuGroup(props: ContextMenuGroupProps) {
+  return <DropdownMenuGroup {...props} />
+}
+
+export type ContextMenuItemProps = DropdownMenuItemProps
+
+export function ContextMenuItem(props: ContextMenuItemProps) {
+  return <DropdownMenuItem {...props} />
+}
+
+export type ContextMenuCheckboxItemProps = DropdownMenuCheckboxItemProps
+
+export function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps) {
+  return <DropdownMenuCheckboxItem {...props} />
+}
+
+export type ContextMenuRadioGroupProps = DropdownMenuRadioGroupProps
+
+export function ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {
+  return <DropdownMenuRadioGroup {...props} />
+}
+
+export type ContextMenuRadioItemProps = DropdownMenuRadioItemProps
+
+export function ContextMenuRadioItem(props: ContextMenuRadioItemProps) {
+  return <DropdownMenuRadioItem {...props} />
+}
+
+export type ContextMenuSeparatorProps = DropdownMenuSeparatorProps
+
+export function ContextMenuSeparator(props: ContextMenuSeparatorProps) {
+  return <DropdownMenuSeparator {...props} />
+}
+
+export type ContextMenuSubProps = DropdownMenuSubProps
+
+export function ContextMenuSub(props: ContextMenuSubProps) {
+  return <DropdownMenuSub {...props} />
+}
+
+export type ContextMenuSubTriggerProps = DropdownMenuSubTriggerProps
+
+export function ContextMenuSubTrigger(props: ContextMenuSubTriggerProps) {
+  return <DropdownMenuSubTrigger {...props} />
+}
+
+export type ContextMenuSubContentProps = DropdownMenuSubContentProps
+
+export function ContextMenuSubContent(props: ContextMenuSubContentProps) {
+  return <DropdownMenuSubContent {...props} />
+}

package/dropdown-menu/index.tsx

@@ -39,12 +39,13 @@ export function DropdownMenuTrigger(props: DropdownMenuTriggerProps) {
 }
 
 export type DropdownMenuContentProps = Omit<ComponentProps<typeof MenuPrimitive.Popup>, 'className'> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
   align?: 'start' | 'center' | 'end'
   arrow?: boolean
   className?: string
 }
 
-const menuPanel = tv({ base: PANEL })
+export const menuPanel = tv({ base: PANEL })
 
 const menuArrow = tv({
   base: 'data-uncentered:invisible'
@@ -55,6 +56,7 @@ const menuArrow = tv({
 })
 
 export function DropdownMenuContent({
+  side = 'bottom',
   align = 'start',
   arrow = true,
   className,
@@ -64,6 +66,7 @@ export function DropdownMenuContent({
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Positioner
+        side={side}
         align={align}
         sideOffset={arrow ? 14 : 8}
         arrowPadding={16}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {

package/registry.json

@@ -63,6 +63,30 @@
         "radius": "rounded-r20"
       }
     },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "title": "Avatar",
+      "files": [
+        {
+          "path": "avatar/index.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "avatar/index.module.css",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "badge",
       "type": "registry:ui",
@@ -83,6 +107,30 @@
         ]
       }
     },
+    {
+      "name": "bottom-sheet",
+      "type": "registry:ui",
+      "title": "BottomSheet",
+      "files": [
+        {
+          "path": "bottom-sheet/index.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "bottom-sheet/index.module.css",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "tv"
+      ],
+      "meta": {
+        "layer": "ui"
+      }
+    },
     {
       "name": "button",
       "type": "registry:ui",
@@ -186,6 +234,32 @@
         "layer": "derived"
       }
     },
+    {
+      "name": "context-menu",
+      "type": "registry:ui",
+      "title": "ContextMenu",
+      "files": [
+        {
+          "path": "context-menu/index.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "dropdown-menu"
+      ],
+      "meta": {
+        "layer": "derived",
+        "sizes": [
+          "ContextMenuItem",
+          "ContextMenuCheckboxItem",
+          "ContextMenuRadioItem",
+          "ContextMenuSubTrigger"
+        ]
+      }
+    },
     {
       "name": "dialog",
       "type": "registry:ui",

package/skills/pantoia-design/SKILL.md

@@ -148,12 +148,15 @@ className     그 한 곳만 바뀐다
 |---|---|---|---|
 | Accordion | accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | - |
 | AlertDialog | alert-dialog | AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogHeader, AlertDialogFooter, AlertDialogAction, AlertDialogCancel | - |
-| Badge | badge | Badge | color, shape |
+| Avatar | avatar | Avatar | color, size |
+| Badge | badge | Badge | color, emphasis, shape |
+| BottomSheet | bottom-sheet | BottomSheet, BottomSheetTrigger, BottomSheetClose, BottomSheetContent, BottomSheetHeader, BottomSheetTitle, BottomSheetDescription | - |
 | Button | button | Button | color, emphasis, size, shape |
 | Callout | callout | Callout | color |
 | Checkbox | checkbox | CheckboxGroup, Checkbox | color |
 | Combobox | combobox | Combobox, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxContent, ComboboxViewport, ComboboxCollection, ComboboxItem, ComboboxItemText, ComboboxItemDescription, ComboboxGroup, ComboboxEmpty, ComboboxSeparator | surface, size |
 | CommandPalette | command-palette | CommandPalette | - |
+| ContextMenu | context-menu | ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent | color |
 | Dialog | dialog | Dialog, DialogTrigger, DialogClose, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogFooter | size |
 | Drawer | drawer | Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription | side |
 | DropdownMenu | dropdown-menu | DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | color |
@@ -176,16 +179,20 @@ className     그 한 곳만 바뀐다
 컴포넌트를 고를 때 헷갈리는 짝은 이렇다.
 
 ```
-Dialog와 AlertDialog     내용을 보여 주면 Dialog, 되돌릴 수 없는 일을 한 번 더 물으면 AlertDialog
-Dialog와 Drawer          화면 가운데면 Dialog, 가장자리에서 열리면 Drawer
-Select와 Combobox        목록에서 고르면 Select, 입력해서 찾으면 Combobox
-Checkbox와 Switch        여러 개를 고르면 Checkbox, 설정을 바로 켜고 끄면 Switch
-Toggle과 Switch          도구 모음에서 상태를 누르면 Toggle, 설정이면 Switch
-Badge와 Button           누를 수 없으면 Badge, 누르면 Button
-Tabs와 Accordion         한 번에 하나만 보이면 Tabs, 여러 개를 펴 두면 Accordion
-Tooltip과 Popover        짧은 설명이면 Tooltip, 안에서 조작하면 Popover
+Dialog와 AlertDialog         내용을 보여 주면 Dialog, 되돌릴 수 없는 일을 한 번 더 물으면 AlertDialog
+Dialog와 Drawer              화면 가운데면 Dialog, 가장자리에서 열리면 Drawer
+Drawer와 BottomSheet         왼쪽이나 오른쪽에서 열리면 Drawer, 아래에서 올라오면 BottomSheet
+DropdownMenu와 ContextMenu   트리거를 누르면 DropdownMenu, 영역을 오른쪽 클릭하거나 길게 누르면 ContextMenu
+Select와 Combobox            목록에서 고르면 Select, 입력해서 찾으면 Combobox
+Checkbox와 Switch            여러 개를 고르면 Checkbox, 설정을 바로 켜고 끄면 Switch
+Toggle과 Switch              도구 모음에서 상태를 누르면 Toggle, 설정이면 Switch
+Badge와 Button               누를 수 없으면 Badge, 누르면 Button
+Tabs와 Accordion             한 번에 하나만 보이면 Tabs, 여러 개를 펴 두면 Accordion
+Tooltip과 Popover            짧은 설명이면 Tooltip, 안에서 조작하면 Popover
 ```
 
+Avatar의 배경색은 color나 seed 중 하나로 정한다. seed에는 사용자 id처럼 바뀌지 않는 값을 넘기고, 같은 seed는 어느 앱에서나 같은 색이다.
+
 Field는 라벨, 도움말, 오류 메시지를 입력 컨트롤에 묶는다. Input, Textarea, NumberField, Select, Combobox와 함께 쓴다.
 
 Select는 고른 항목의 `SelectItemText`나 글자를 트리거에 보인다. `SelectItem`을 다른 컴포넌트로 감싸면 `items`로 라벨을 넘긴다.

package/tokens.css

@@ -33,6 +33,7 @@
   --pds-fg-danger-contrast:                   var(--pds-red-700);
   --pds-fg-info:                              var(--pds-blue-500);
   --pds-fg-info-contrast:                     var(--pds-blue-700);
+  --pds-fg-info-solid-contrast:               var(--pds-gray-50);
   --pds-fg-neutral-solid-contrast:            var(--pds-gray-50);
   --pds-fg-success:                           var(--pds-green-500);
   --pds-fg-success-contrast:                  var(--pds-green-700);
@@ -97,6 +98,7 @@
   --pds-fg-danger-contrast:                   var(--pds-red-700);
   --pds-fg-info:                              var(--pds-blue-500);
   --pds-fg-info-contrast:                     var(--pds-blue-700);
+  --pds-fg-info-solid-contrast:               var(--pds-gray-900);
   --pds-fg-neutral-solid-contrast:            var(--pds-gray-50);
   --pds-fg-success:                           var(--pds-green-500);
   --pds-fg-success-contrast:                  var(--pds-green-700);
@@ -159,6 +161,7 @@
   --color-fg-danger-contrast:                 var(--pds-fg-danger-contrast);
   --color-fg-info:                            var(--pds-fg-info);
   --color-fg-info-contrast:                   var(--pds-fg-info-contrast);
+  --color-fg-info-solid-contrast:             var(--pds-fg-info-solid-contrast);
   --color-fg-neutral-solid-contrast:          var(--pds-fg-neutral-solid-contrast);
   --color-fg-success:                         var(--pds-fg-success);
   --color-fg-success-contrast:                var(--pds-fg-success-contrast);
@@ -276,3 +279,6 @@
 
 :root, .light { --pds-pressed-dim: rgba(0,23,51,0.12); }
 .dark         { --pds-pressed-dim: rgba(209,209,253,0.14); }
+
+:root, .light { --pds-avatar-seed-bg: 0.92 0.06; --pds-avatar-seed-fg: 0.42 0.13; }
+.dark         { --pds-avatar-seed-bg: 0.38 0.08; --pds-avatar-seed-fg: 0.9 0.07; }