@marwes-ui/svelte 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -0
- package/README.md +43 -11
- package/dist/components/README.md +31 -0
- package/dist/components/accordion/AccordionField.svelte +20 -6
- package/dist/components/accordion/index.d.ts +5 -2
- package/dist/components/accordion/index.js +7 -1
- package/dist/components/accordion/types.d.ts +3 -0
- package/dist/components/avatar/AvatarGroup.svelte +5 -2
- package/dist/components/avatar/AvatarGroup.svelte.d.ts +1 -0
- package/dist/components/avatar/TeamAvatarGroup.svelte +1 -0
- package/dist/components/avatar/TeamAvatarGroup.svelte.d.ts +1 -0
- package/dist/components/avatar/index.d.ts +7 -1
- package/dist/components/avatar/index.js +6 -0
- package/dist/components/avatar/types.d.ts +28 -0
- package/dist/components/badge/BadgeGroup.svelte +2 -1
- package/dist/components/badge/index.d.ts +5 -1
- package/dist/components/badge/index.js +4 -0
- package/dist/components/badge/types.d.ts +3 -0
- package/dist/components/banner/Banner.svelte +67 -0
- package/dist/components/banner/Banner.svelte.d.ts +4 -0
- package/dist/components/banner/ErrorBanner.svelte +9 -0
- package/dist/components/banner/ErrorBanner.svelte.d.ts +4 -0
- package/dist/components/banner/InfoBanner.svelte +9 -0
- package/dist/components/banner/InfoBanner.svelte.d.ts +4 -0
- package/dist/components/banner/SuccessBanner.svelte +9 -0
- package/dist/components/banner/SuccessBanner.svelte.d.ts +4 -0
- package/dist/components/banner/WarningBanner.svelte +9 -0
- package/dist/components/banner/WarningBanner.svelte.d.ts +4 -0
- package/dist/components/banner/index.d.ts +7 -0
- package/dist/components/banner/index.js +6 -0
- package/dist/components/banner/types.d.ts +14 -0
- package/dist/components/banner/types.js +1 -0
- package/dist/components/breadcrumb/Breadcrumb.svelte +115 -0
- package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts +4 -0
- package/dist/components/breadcrumb/index.d.ts +2 -0
- package/dist/components/breadcrumb/index.js +1 -0
- package/dist/components/breadcrumb/types.d.ts +8 -0
- package/dist/components/breadcrumb/types.js +1 -0
- package/dist/components/button/Button.svelte +8 -4
- package/dist/components/button/DestructiveButton.svelte +1 -1
- package/dist/components/button/IconButton.svelte +9 -0
- package/dist/components/button/IconButton.svelte.d.ts +4 -0
- package/dist/components/button/index.d.ts +24 -1
- package/dist/components/button/index.js +23 -0
- package/dist/components/button/types.d.ts +30 -1
- package/dist/components/card/Card.svelte +2 -1
- package/dist/components/card/index.d.ts +4 -1
- package/dist/components/card/index.js +3 -0
- package/dist/components/card/types.d.ts +4 -0
- package/dist/components/checkbox/CheckboxField.svelte +4 -3
- package/dist/components/checkbox/CheckboxGroupField.svelte +21 -9
- package/dist/components/checkbox/index.d.ts +2 -2
- package/dist/components/checkbox/index.js +4 -1
- package/dist/components/checkbox/types.d.ts +7 -0
- package/dist/components/context-menu/ContextMenu.svelte +56 -0
- package/dist/components/context-menu/ContextMenu.svelte.d.ts +4 -0
- package/dist/components/context-menu/index.d.ts +2 -0
- package/dist/components/context-menu/index.js +1 -0
- package/dist/components/context-menu/types.d.ts +7 -0
- package/dist/components/context-menu/types.js +1 -0
- package/dist/components/date-picker/DatePicker.svelte +14 -2
- package/dist/components/date-picker/DatePickerField.svelte +72 -0
- package/dist/components/date-picker/DatePickerField.svelte.d.ts +4 -0
- package/dist/components/date-picker/index.d.ts +2 -2
- package/dist/components/date-picker/index.js +3 -1
- package/dist/components/date-picker/types.d.ts +15 -0
- package/dist/components/dialog/Dialog.svelte +1 -0
- package/dist/components/dialog/DialogModal.svelte +12 -0
- package/dist/components/dialog/index.d.ts +1 -1
- package/dist/components/dialog/types.d.ts +7 -3
- package/dist/components/drawer/Drawer.svelte +132 -0
- package/dist/components/drawer/Drawer.svelte.d.ts +4 -0
- package/dist/components/drawer/index.d.ts +2 -0
- package/dist/components/drawer/index.js +1 -0
- package/dist/components/drawer/types.d.ts +16 -0
- package/dist/components/drawer/types.js +1 -0
- package/dist/components/heading/H1.svelte +10 -0
- package/dist/components/heading/H2.svelte +6 -0
- package/dist/components/heading/H3.svelte +7 -0
- package/dist/components/input/CurrencyField.svelte +1 -1
- package/dist/components/input/Input.svelte +1 -0
- package/dist/components/input/InputField.svelte +4 -3
- package/dist/components/input/InputOtp.svelte +21 -44
- package/dist/components/input/InputOtpField.svelte +81 -0
- package/dist/components/input/InputOtpField.svelte.d.ts +4 -0
- package/dist/components/input/RichText.svelte +7 -6
- package/dist/components/input/RichTextField.svelte +4 -3
- package/dist/components/input/Select.svelte +7 -31
- package/dist/components/input/SelectField.svelte +6 -3
- package/dist/components/input/Textarea.svelte +1 -0
- package/dist/components/input/TextareaField.svelte +20 -5
- package/dist/components/input/index.d.ts +12 -4
- package/dist/components/input/index.js +19 -3
- package/dist/components/input/types.d.ts +59 -5
- package/dist/components/pagination/Pagination.svelte +399 -0
- package/dist/components/pagination/Pagination.svelte.d.ts +4 -0
- package/dist/components/pagination/PaginationField.svelte +72 -0
- package/dist/components/pagination/PaginationField.svelte.d.ts +4 -0
- package/dist/components/pagination/index.d.ts +2 -0
- package/dist/components/pagination/index.js +2 -0
- package/dist/components/pagination/types.d.ts +40 -0
- package/dist/components/pagination/types.js +1 -0
- package/dist/components/progress-bar/ProgressBar.svelte +50 -0
- package/dist/components/progress-bar/ProgressBar.svelte.d.ts +4 -0
- package/dist/components/progress-bar/index.d.ts +2 -0
- package/dist/components/progress-bar/index.js +1 -0
- package/dist/components/progress-bar/types.d.ts +6 -0
- package/dist/components/progress-bar/types.js +1 -0
- package/dist/components/radio/OptionRadioGroup.svelte +39 -5
- package/dist/components/radio/OptionRadioGroup.svelte.d.ts +2 -5
- package/dist/components/radio/Radio.svelte +1 -0
- package/dist/components/radio/RadioGroupField.svelte +4 -3
- package/dist/components/radio/RatingRadioGroup.svelte +18 -3
- package/dist/components/radio/YesNoRadioGroup.svelte +18 -3
- package/dist/components/radio/index.d.ts +4 -2
- package/dist/components/radio/index.js +6 -1
- package/dist/components/radio/types.d.ts +47 -0
- package/dist/components/segmented-control/SegmentedControl.svelte +125 -0
- package/dist/components/segmented-control/SegmentedControl.svelte.d.ts +25 -0
- package/dist/components/segmented-control/SegmentedControlField.svelte +76 -0
- package/dist/components/segmented-control/SegmentedControlField.svelte.d.ts +25 -0
- package/dist/components/segmented-control/index.d.ts +2 -0
- package/dist/components/segmented-control/index.js +2 -0
- package/dist/components/segmented-control/types.d.ts +41 -0
- package/dist/components/segmented-control/types.js +1 -0
- package/dist/components/skip-link/SkipLink.svelte +12 -0
- package/dist/components/skip-link/SkipLink.svelte.d.ts +4 -0
- package/dist/components/skip-link/index.d.ts +2 -0
- package/dist/components/skip-link/index.js +1 -0
- package/dist/components/skip-link/types.d.ts +7 -0
- package/dist/components/skip-link/types.js +1 -0
- package/dist/components/slider/SliderField.svelte +9 -8
- package/dist/components/slider/index.d.ts +5 -2
- package/dist/components/slider/index.js +7 -1
- package/dist/components/slider/types.d.ts +21 -0
- package/dist/components/spinner/EmptyStateSpinner.svelte +2 -3
- package/dist/components/spinner/EmptyStateSpinner.svelte.d.ts +1 -2
- package/dist/components/spinner/Spinner.svelte +2 -0
- package/dist/components/spinner/index.d.ts +2 -1
- package/dist/components/spinner/index.js +1 -0
- package/dist/components/spinner/types.d.ts +1 -0
- package/dist/components/switch/Switch.svelte +1 -1
- package/dist/components/switch/SwitchField.svelte +6 -4
- package/dist/components/switch/index.d.ts +4 -2
- package/dist/components/switch/index.js +6 -1
- package/dist/components/switch/types.d.ts +3 -0
- package/dist/components/tab/TabGroup.svelte +7 -4
- package/dist/components/text/Text.svelte +23 -0
- package/dist/components/text/Text.svelte.d.ts +4 -0
- package/dist/components/text/index.d.ts +4 -0
- package/dist/components/text/index.js +2 -0
- package/dist/components/text/types.d.ts +15 -0
- package/dist/components/text/types.js +1 -0
- package/dist/components/tooltip/TooltipGroup.svelte +10 -2
- package/dist/index.d.ts +47 -29
- package/dist/index.js +51 -13
- package/dist/provider/MarwesProvider.svelte +26 -14
- package/dist/provider/types.d.ts +5 -2
- package/package.json +6 -5
- package/dist/components/accordion/README.md +0 -19
- package/dist/components/avatar/README.md +0 -19
- package/dist/components/badge/README.md +0 -16
- package/dist/components/button/README.md +0 -21
- package/dist/components/card/README.md +0 -15
- package/dist/components/checkbox/README.md +0 -17
- package/dist/components/date-picker/README.md +0 -17
- package/dist/components/dialog/README.md +0 -23
- package/dist/components/divider/README.md +0 -15
- package/dist/components/heading/README.md +0 -13
- package/dist/components/icon/README.md +0 -18
- package/dist/components/input/README.md +0 -24
- package/dist/components/paragraph/README.md +0 -13
- package/dist/components/radio/README.md +0 -16
- package/dist/components/skeleton/README.md +0 -16
- package/dist/components/slider/README.md +0 -20
- package/dist/components/spacing/README.md +0 -15
- package/dist/components/spinner/README.md +0 -19
- package/dist/components/stat-tile/README.md +0 -15
- package/dist/components/switch/README.md +0 -17
- package/dist/components/tab/README.md +0 -26
- package/dist/components/toast/README.md +0 -35
- package/dist/components/tooltip/README.md +0 -22
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
# Switch — Parity Findings
|
|
2
|
-
|
|
3
|
-
## Svelte vs React/Vue
|
|
4
|
-
|
|
5
|
-
### Aligned ✅
|
|
6
|
-
- `Switch` atom with `createSwitchRecipe`
|
|
7
|
-
- `oncheckedchange` callback
|
|
8
|
-
- role="switch", aria-checked, aria-disabled
|
|
9
|
-
- Track/thumb DOM structure (mw-switch__track > mw-switch__thumb)
|
|
10
|
-
- `SwitchField` molecule with label, description, error, `buildSwitchFieldA11yIds`
|
|
11
|
-
- All sizes: compact, wide, rich
|
|
12
|
-
|
|
13
|
-
### Missing ❌
|
|
14
|
-
- **Purpose variant wrappers**: React/Vue have some switch variants (not critical)
|
|
15
|
-
|
|
16
|
-
### Notes
|
|
17
|
-
- Full functional parity. Switch variants in React/Vue are minor visual presets — not blocking.
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
# Tab
|
|
2
|
-
|
|
3
|
-
Svelte tab components are aligned with the React and Vue tab family.
|
|
4
|
-
|
|
5
|
-
## Public Components
|
|
6
|
-
|
|
7
|
-
- `Tab` — atom for custom tablist layouts.
|
|
8
|
-
- `TabPanel` — atom-level panel primitive.
|
|
9
|
-
- `TabGroup` — coordinated tablist and panel molecule.
|
|
10
|
-
- `NavigationTabs` — purpose wrapper for navigation-style tab groups.
|
|
11
|
-
- `ContentTabs` — purpose wrapper for content-section tab groups.
|
|
12
|
-
- `SettingsTabs` — purpose wrapper for settings/admin tab groups.
|
|
13
|
-
|
|
14
|
-
## Shared Contract
|
|
15
|
-
|
|
16
|
-
- Uses `createTabRecipe`, `buildTabGroupA11yIds`, `moveTabSelection`, and `resolveTabValue` from `@marwes-ui/core`.
|
|
17
|
-
- Supports controlled and uncontrolled active tab state.
|
|
18
|
-
- Supports disabled tabs.
|
|
19
|
-
- Supports ArrowLeft, ArrowRight, Home, and End keyboard navigation.
|
|
20
|
-
- Wires `role="tablist"`, `role="tab"`, `role="tabpanel"`, `aria-selected`, `aria-controls`, and `aria-labelledby`.
|
|
21
|
-
- Renders string panel content or Svelte snippets.
|
|
22
|
-
- Applies purpose metadata to the `.mw-tab-group` root through `dataAttributes`, matching React and Vue.
|
|
23
|
-
|
|
24
|
-
## Svelte Notes
|
|
25
|
-
|
|
26
|
-
Svelte keeps the same declarative `tabs` array API as React and Vue. Event naming follows Svelte conventions with `onactivetabchange`.
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# Toast
|
|
2
|
-
|
|
3
|
-
Svelte toast components are aligned with the React and Vue toast family.
|
|
4
|
-
|
|
5
|
-
## Public Components
|
|
6
|
-
|
|
7
|
-
- `Toast` — atom for a single live-region notification.
|
|
8
|
-
- `ToastContainer` — positioned viewport that renders managed toasts.
|
|
9
|
-
- `ToastProvider` — context provider with the imperative toast controller.
|
|
10
|
-
- `SuccessToast` — purpose toast with success semantics.
|
|
11
|
-
- `ErrorToast` — purpose toast with assertive error semantics.
|
|
12
|
-
- `WarningToast` — purpose toast with warning semantics.
|
|
13
|
-
- `InfoToast` — purpose toast with informational semantics.
|
|
14
|
-
|
|
15
|
-
## Shared Contract
|
|
16
|
-
|
|
17
|
-
- Uses `createToastRecipe` from `@marwes-ui/core`.
|
|
18
|
-
- Wires `role="status"` or `role="alert"` from `ariaLive`.
|
|
19
|
-
- Sets `aria-live` and `aria-atomic="true"`.
|
|
20
|
-
- Supports icon, action, and dismiss slots.
|
|
21
|
-
- Renders a dismiss button only when `ondismiss` is provided.
|
|
22
|
-
- Applies canonical `data-component`, `data-purpose`, and `data-intent` attributes.
|
|
23
|
-
- Keeps `ToastContainer` placement classes and `maxVisible` behavior aligned with React and Vue.
|
|
24
|
-
- Keeps provider-managed toasts on the shared imperative API: `show()`, `dismiss()`, and `clear()`.
|
|
25
|
-
- Defaults provider-managed toast duration to `4000ms`.
|
|
26
|
-
- Keeps `duration={null}` toasts visible until product code dismisses them.
|
|
27
|
-
- Pauses auto-dismiss while pointer hover or focus is inside the toast, then resumes with remaining time.
|
|
28
|
-
|
|
29
|
-
## Svelte Notes
|
|
30
|
-
|
|
31
|
-
- `useToast()` uses Svelte context through `getContext` and `setContext`.
|
|
32
|
-
- Icon, action, and children content use Svelte snippets.
|
|
33
|
-
- `ManagedToast.message` is a string, while React/Vue use framework-native node children.
|
|
34
|
-
- Event naming follows Svelte conventions: `ondismiss`.
|
|
35
|
-
- Class passthrough uses `class`, matching Svelte component conventions.
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
# Tooltip — Parity Findings
|
|
2
|
-
|
|
3
|
-
## Svelte vs React/Vue
|
|
4
|
-
|
|
5
|
-
### Aligned ✅
|
|
6
|
-
- `Tooltip` atom with `createTooltipRecipe`
|
|
7
|
-
- `role="tooltip"`, CSS vars for positioning
|
|
8
|
-
- `TooltipGroup` molecule with icon trigger, hover/focus reveal
|
|
9
|
-
- Controlled (`open`) and uncontrolled (`defaultOpen`) modes
|
|
10
|
-
- `onopenchange` callback
|
|
11
|
-
- Dismiss on pointer leave, focus leave, and Escape
|
|
12
|
-
- Exit animation delay (160ms) before unmounting
|
|
13
|
-
- Default icon: `IconName.HelpCircle`, swappable via `icon` prop
|
|
14
|
-
- `triggerLabel` for accessible trigger button name
|
|
15
|
-
- `aria-describedby` wired from trigger to tooltip when open
|
|
16
|
-
|
|
17
|
-
### Svelte-specific
|
|
18
|
-
- `content` prop accepts `Snippet | string` (React uses `ReactNode`)
|
|
19
|
-
- Uses `$props.id()` for stable unique IDs
|
|
20
|
-
|
|
21
|
-
### Notes
|
|
22
|
-
- Tooltip is for non-interactive contextual help only. For interactive content, use a popover or dialog pattern.
|