@marwes-ui/core 1.3.0 → 1.4.1

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/README.md CHANGED
@@ -11,9 +11,10 @@ Framework-agnostic Marwes design system recipes, theme utilities, accessibility
11
11
 
12
12
  **The framework-agnostic engine behind Marwes themes, recipes, accessibility, and semantic metadata.**
13
13
 
14
- Pure TypeScript • No React/Vue dependency • Typed RenderKit • Shared ThemeInput • AI-readable contracts
14
+ Pure TypeScript • No framework dependency • Typed RenderKit • Shared ThemeInput • AI-readable contracts
15
15
 
16
- [Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [React Storybook](https://storybook-react.marwes.io/latest/) • [Vue Storybook](https://storybook-vue.marwes.io/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
16
+ [**marwes.io**](https://marwes.io) — official site, theme builder, and install guides
17
+ [React Storybook](https://storybook-react.marwes.io/latest/) • [Vue Storybook](https://storybook-vue.marwes.io/latest/) • [Svelte Storybook](https://storybook-svelte.marwes.io/latest/) • [Docs](https://github.com/niklas-westman/marwes/tree/main/docs) • [GitHub](https://github.com/niklas-westman/marwes)
17
18
 
18
19
  </div>
19
20
 
@@ -21,7 +22,7 @@ Pure TypeScript • No React/Vue dependency • Typed RenderKit • Shared Theme
21
22
 
22
23
  ## Why Use It
23
24
 
24
- Most app teams should install `@marwes-ui/react` or `@marwes-ui/vue`. Install core directly when you are building an adapter, validating design-system contracts, or using Marwes theme and recipe utilities without a framework.
25
+ Most app teams should install `@marwes-ui/react`, `@marwes-ui/vue`, or `@marwes-ui/svelte`. Install core directly when you are building an adapter, validating design-system contracts, or using Marwes theme and recipe utilities without a framework.
25
26
 
26
27
  Core gives every adapter the same:
27
28
 
@@ -41,6 +42,7 @@ Core is the contract layer, not the normal app entry point.
41
42
  | --- | --- |
42
43
  | `@marwes-ui/react` | You are building a React app. |
43
44
  | `@marwes-ui/vue` | You are building a Vue app. |
45
+ | `@marwes-ui/svelte` | You are building a Svelte app. |
44
46
  | `@marwes-ui/core` | You need framework-agnostic recipes, theme utilities, accessibility contracts, or adapter/tooling APIs. |
45
47
  | `@marwes-ui/presets` | You need standalone preset CSS or preset theme exports. |
46
48
 
@@ -79,7 +81,7 @@ const theme = resolveThemeInput({
79
81
  const cssVars = themeToCSSVars(theme)
80
82
  ```
81
83
 
82
- React and Vue providers apply these variables to the provider root. Preset CSS consumes them across buttons, inputs, typography, cards, toasts, overlays, and layout primitives.
84
+ Framework providers apply these variables to the provider root. Preset CSS consumes them across buttons, inputs, typography, cards, toasts, overlays, and layout primitives.
83
85
 
84
86
  Marwes is designed to look great from the beginning. `ThemeInput` is intentionally partial: start from the polished defaults, map an existing design library into the tokens you own, and override only those product decisions.
85
87
 
@@ -101,7 +103,7 @@ Every omitted token is filled from the selected light or dark default, so adapte
101
103
 
102
104
  ### Light And Dark Mode Contract
103
105
 
104
- Core owns the runtime `ThemeMode` contract that the React and Vue providers use for `useThemeMode()`. Use `ThemeMode.light` and `ThemeMode.dark` instead of string literals. A mode change resolves a normal theme, swaps the provider-scoped `--mw-*` variables, and keeps the active class aligned as `mw-theme--light` or `mw-theme--dark`.
106
+ Core owns the runtime `ThemeMode` contract that framework providers use for theme-mode APIs. Use `ThemeMode.light` and `ThemeMode.dark` instead of string literals. A mode change resolves a normal theme, swaps the provider-scoped `--mw-*` variables, and keeps the active class aligned as `mw-theme--light` or `mw-theme--dark`.
105
107
 
106
108
  ```ts
107
109
  import { resolveThemeInput, themeToCSSVars, ThemeMode } from "@marwes-ui/core"
@@ -122,11 +124,11 @@ resolveMode(ThemeMode.dark)
122
124
  // }
123
125
  ```
124
126
 
125
- Most apps should use `useThemeMode()` from `@marwes-ui/react` or `@marwes-ui/vue`. Core is the framework-agnostic piece that makes the resolved variables and mode classes consistent across adapters.
127
+ Most apps should use the theme-mode API from `@marwes-ui/react`, `@marwes-ui/vue`, or `@marwes-ui/svelte`. Core is the framework-agnostic piece that makes the resolved variables and mode classes consistent across adapters.
126
128
 
127
129
  ### SSR Theme Rules
128
130
 
129
- SSR adapters can use the same core theme engine to emit light and dark CSS variable rules before hydration. These helpers are pure string utilities; React and Vue expose framework-specific SSR helpers on top.
131
+ SSR adapters can use the same core theme engine to emit light and dark CSS variable rules before hydration. These helpers are pure string utilities; framework adapters can expose SSR helpers on top.
130
132
 
131
133
  ```ts
132
134
  import { ThemeMode, resolveThemeInput, themeModesToCSSRules } from "@marwes-ui/core"
@@ -165,7 +167,7 @@ mwVar("--mw-color-text", "#141414") // "var(--mw-color-text, #141414)"
165
167
  mwStyledTheme.spacing.sp24 // "var(--mw-spacing-sp-24)"
166
168
  ```
167
169
 
168
- This enables one theme contract across plain CSS, CSS Modules, CSS-in-JS, vanilla-extract, Tailwind-style config files, inline style objects, React, Vue, and future adapters. Because the helpers only expose CSS variable references and names, they remain framework-agnostic and follow any `ThemeInput` resolved by the provider.
170
+ This enables one theme contract across plain CSS, CSS Modules, CSS-in-JS, vanilla-extract, Tailwind-style config files, inline style objects, React, Vue, Svelte, and future adapters. Because the helpers only expose CSS variable references and names, they remain framework-agnostic and follow any `ThemeInput` resolved by the provider.
169
171
 
170
172
  Keep the APIs separate:
171
173
  - `Spacings.sp24` returns `"sp-24"` for Marwes component props.
@@ -176,7 +178,7 @@ Keep the APIs separate:
176
178
 
177
179
  ## Recipe Engine
178
180
 
179
- Core recipes return a typed RenderKit object instead of framework elements. Adapters map that object to React, Vue, or future renderers.
181
+ Core recipes return a typed RenderKit object instead of framework elements. Adapters map that object to React, Vue, Svelte, or future renderers.
180
182
 
181
183
  RenderKit includes:
182
184
  - `tag`
@@ -189,15 +191,18 @@ RenderKit includes:
189
191
 
190
192
  Core currently powers these component families:
191
193
 
192
- - Buttons and semantic button purposes
194
+ - Buttons (including `danger` variant), icon buttons, and semantic button purposes
193
195
  - Inputs, textareas, selects, rich text, OTP, and field wrappers
194
196
  - Checkbox and radio families
195
- - Switches and sliders
196
- - Cards, typography, icons, avatars, dividers, and spacing
197
+ - Switches, sliders, segmented control fields, and pagination fields
198
+ - Cards, typography (headings, paragraph, text), icons, avatars, dividers, and spacing (with the `sp-12` token)
199
+ - Breadcrumbs and stat tiles
200
+ - Skeletons and progress bars
197
201
  - Badges and contextual badge variants
198
- - Toasts, tooltips, dialogs, tabs, accordions, and spinners
202
+ - Banners (info, success, warning, error)
203
+ - Toasts, tooltips, context menus, dialogs, drawers, tabs, accordions, and spinners
199
204
 
200
- React and Vue expose the public components. Core exposes the shared recipes, types, enum objects, semantic utilities, and theme helpers that keep those adapters consistent.
205
+ React, Vue, and Svelte expose the public components. Core exposes the shared recipes, types, enum objects, semantic utilities, and theme helpers that keep those adapters consistent.
201
206
 
202
207
  ## Accessibility Contract
203
208
 
@@ -228,7 +233,7 @@ buildInputFieldA11yIds({
228
233
  // }
229
234
  ```
230
235
 
231
- React and Vue tests run the same shared contracts against their DOM output. Storybook a11y smoke checks then add an axe-powered browser-level signal for the promoted families.
236
+ React, Vue, and Svelte tests run shared contracts against their DOM output. Storybook a11y smoke checks then add an axe-powered browser-level signal for the promoted families.
232
237
 
233
238
  ## Semantic Metadata
234
239
 
@@ -281,9 +286,9 @@ Types and tokens:
281
286
 
282
287
  ## Package Boundaries
283
288
 
284
- - Core has no React, Vue, DOM, or CSS runtime dependency.
289
+ - Core has no React, Vue, Svelte, DOM, or CSS runtime dependency.
285
290
  - Presets own static CSS and the default visual layer.
286
- - React and Vue own rendering, provider lifecycle, and framework APIs.
291
+ - React, Vue, and Svelte own rendering, provider lifecycle, and framework APIs.
287
292
 
288
293
  ## Scripts
289
294