You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Add Accordion component (5 parts, keyboard nav, single/multiple, animations)
Parts: Root, Item, Header, Trigger, Content
- Single/multiple mode via type prop
- Collapsible (single mode: click open item to close)
- Per-item and global disabled
- Keyboard: Arrow keys (orientation-aware), Home/End, loop option
- Presence on Content with data-starting/ending-style
- --soma-accordion-content-height/width CSS vars for animations
- forceMount on Content
- Header with level prop (aria-level)
- Auto-generated item values when omitted
- Demo page with 5 sections
Compared with Radix, Ark UI, Bits UI:
- Has collapsible + loop (Radix has collapsible, Bits has loop, soma has both)
- Has header level (like Bits)
- Has CSS animation vars (like all three)
- Has data-starting/ending-style (like Bits)
- Skipped ItemIndicator (Ark) — presentation concern for visual layer
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
6 months ago
|
|
|
export * as Accordion from './accordion';
|
Refactor soma: consolidate layers, add Soma class, Dialog component, animation system
Layers:
- Consolidate 28 files/10 dirs → 13 files/2 dirs
- Separate behavior layers (classes) from internal components
- Normalize naming: Dismissal, ScrollLock, TextSelection, FocusScope
- Adapt floating layer from terra to soma (imports, CSS vars --soma--)
- Presence rewritten: data-starting/ending-style, forceMount, onComplete, getAnimations API
Architecture:
- Replace config/ with Soma class (root instance with services)
- Add SomaFormat namespace (date, number, currency, unit formatters)
- Add generic resolve() for prop → config → fallback chain
- Provider supports optional ref (ProviderOpts vs WithRefOpts)
- Hierarchical component barrel: import { Dialog } from '$soma/components'
- Descriptive IDs: soma-dialog-trigger-c12
Dialog component (7 parts):
- Provider, Trigger, Content, Overlay, Title, Description, Close
- Content integrates all behavior layers as classes (no template nesting)
- modal prop controls interactOutsideBehavior automatically
- Nested dialog support: depth, data-nested, --soma-dialog-depth CSS vars
- Animation support: forceMount, data-starting/ending-style, onOpenChangeComplete
- Translator integration for aria-labels
- JSDoc documentation on all props
Bug fixes:
- Presence mount without ref (chicken-and-egg)
- ScrollLock unlock path restores body style
- Nested dialog infinite loop (untrack mutation)
- pointer-events: none blocking dialog interaction
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
6 months ago
|
|
|
export * as Collapsible from './collapsible';
|
|
|
|
|
export * as Dialog from './dialog';
|
Add Popover component, Dialog variant/restoreScrollDelay, fix floating z-index
Popover (7 parts):
- Provider, Trigger, Content, Arrow, Close, Anchor, Overlay
- Floating positioning via FloatingProvider/Content/Anchor integration
- openOnHover with configurable openDelay/closeDelay on Trigger
- Modal mode: overlay + focus trap + preventScroll
- Custom anchor support
- All behavior layers integrated (Presence, FocusScope, Dismissal, ScrollLock, TextSelection)
- Demo page with 6 sections
Dialog improvements:
- variant prop: 'dialog' | 'alertdialog' (changes role, escape/outside behavior)
- restoreScrollDelay prop on Content (passed to ScrollLock)
- escapeKeydownBehavior defaults from variant (alertdialog → 'ignore')
- Demo page updated with AlertDialog and restoreScrollDelay sections
Fix: FloatingContent wrapper no longer sets z-index: auto inline
(was overriding CSS z-index, causing content to render below overlay)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
6 months ago
|
|
|
export * as Popover from './popover';
|
