@marwes-ui/svelte 1.4.1 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @marwes-ui/svelte
 
+## 1.5.1
+
+### Patch Changes
+
+- [#48](https://github.com/niklas-westman/marwes/pull/48) [`d46cf44`](https://github.com/niklas-westman/marwes/commit/d46cf445819c13def85c504c055dcf1d30a30e5c) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Refresh development dependency security: require devalue 5.9.3 for Svelte tooling and patch braces to reject excessive pattern nesting in release tooling. Published component APIs are unchanged by this dependency maintenance.
+
+- [#48](https://github.com/niklas-westman/marwes/pull/48) [`d46cf44`](https://github.com/niklas-westman/marwes/commit/d46cf445819c13def85c504c055dcf1d30a30e5c) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Support native `type="submit"` and `type="reset"` on Button and visual button wrappers. Buttons still default to `type="button"`; existing submit/reset actions retain precedence. Clarify form behavior in Storybook and forward `ariaLabelledBy` through Vue button wrappers.
+
+- [#48](https://github.com/niklas-westman/marwes/pull/48) [`d46cf44`](https://github.com/niklas-westman/marwes/commit/d46cf445819c13def85c504c055dcf1d30a30e5c) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Use the accessible warning border token for warning badges in light and dark themes, matching the Figma border color while preserving theme customization.
+
+- Updated dependencies [[`d46cf44`](https://github.com/niklas-westman/marwes/commit/d46cf445819c13def85c504c055dcf1d30a30e5c), [`d46cf44`](https://github.com/niklas-westman/marwes/commit/d46cf445819c13def85c504c055dcf1d30a30e5c), [`d46cf44`](https://github.com/niklas-westman/marwes/commit/d46cf445819c13def85c504c055dcf1d30a30e5c)]:
+  - @marwes-ui/core@1.5.1
+  - @marwes-ui/presets@1.5.1
+
+## 1.5.0
+
+### Minor Changes
+
+- [#44](https://github.com/niklas-westman/marwes/pull/44) [`6dbb453`](https://github.com/niklas-westman/marwes/commit/6dbb45356374cc50cb40204fd1dac5effc243b53) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Improve `IconButton` accessible-name support through `label`, `ariaLabel`, or `ariaLabelledBy`, align external-label behavior across adapters, and document the boundary between CSS-variable theme helpers and resolved `useTheme()` values. Preserve optional naming props for backward compatibility, keep the runtime warning for unnamed icon-only buttons, and export an opt-in `AccessibleButtonName` helper for consumers that want a stricter naming contract.
+
+### Patch Changes
+
+- [#44](https://github.com/niklas-westman/marwes/pull/44) [`6dbb453`](https://github.com/niklas-westman/marwes/commit/6dbb45356374cc50cb40204fd1dac5effc243b53) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Publish generated public component inventories, Field- and Purpose-first setup guidance, consistent package metadata, and framework-specific links to the canonical Marwes consumer documentation.
+
+- [#44](https://github.com/niklas-westman/marwes/pull/44) [`6dbb453`](https://github.com/niklas-westman/marwes/commit/6dbb45356374cc50cb40204fd1dac5effc243b53) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Restore density-aware spacing between AccordionField group labels and accordion items in React and Vue. Native fieldset legends do not receive the fieldset's grid gap; the shared preset now applies that spacing explicitly while preserving Svelte's existing grid-based label spacing.
+
+- Updated dependencies [[`6dbb453`](https://github.com/niklas-westman/marwes/commit/6dbb45356374cc50cb40204fd1dac5effc243b53), [`6dbb453`](https://github.com/niklas-westman/marwes/commit/6dbb45356374cc50cb40204fd1dac5effc243b53), [`6dbb453`](https://github.com/niklas-westman/marwes/commit/6dbb45356374cc50cb40204fd1dac5effc243b53)]:
+  - @marwes-ui/core@1.5.0
+  - @marwes-ui/presets@1.5.0
+
 ## 1.4.1
 
 ### Patch Changes

package/README.md

@@ -45,6 +45,13 @@ For a Svelte app, install this package first. It includes the Svelte adapter, lo
 
 This split keeps installation simple for app teams while giving humans and AI agents clear package boundaries: adapters render, core defines contracts, presets style.
 
+## Requirements
+
+- Svelte 5.20 or newer
+- Node.js 20 or newer for package installation, application builds, and the CLI
+- A modern browser with CSS custom-property support
+- A Vite starter layout for automatic provider patching; custom layouts use the printed manual setup
+
 ## Install
 
 The Marwes CLI is the official installation path. It installs `@marwes-ui/svelte` (with `svelte` as a peer), wraps your app root with `MarwesProvider`, and leaves you ready to render components with default Marwes styling — no separate CSS setup.
@@ -61,6 +68,14 @@ pnpm dlx @marwes-ui/cli init --adapter svelte
 
 Also works with `npx @marwes-ui/cli`, `yarn dlx @marwes-ui/cli`, and `bunx @marwes-ui/cli`.
 
+Verify the patched app and its production build:
+
+```bash
+pnpm dlx @marwes-ui/cli doctor --run-build
+```
+
+Automatic provider patching supports known Vite starter layouts. A `manual-action-required` result means the package was installed but the CLI could not safely identify the app root; apply the complete provider example printed by the CLI and rerun the doctor command.
+
 ### New Vite app
 
 Scaffold a fresh Vite starter with Marwes preinstalled:
@@ -86,19 +101,16 @@ After install, jump to the [Quick Start](#quick-start) below.
   import {
     Button,
     ButtonVariant,
-    Checkbox,
-    Input,
+    CheckboxField,
+    EmailField,
     MarwesProvider,
     SubmitButton,
   } from "@marwes-ui/svelte"
-
-  let email = $state("")
-  let subscribed = $state(false)
 </script>
 
 <MarwesProvider>
-  <Input bind:value={email} placeholder="Email" label="Email" />
-  <Checkbox bind:checked={subscribed} label="Subscribe" />
+  <EmailField label="Email" input={{ placeholder: "you@example.com" }} />
+  <CheckboxField label="Subscribe" />
   <Button variant={ButtonVariant.secondary}>Preview</Button>
   <SubmitButton>Save</SubmitButton>
 </MarwesProvider>
@@ -189,60 +201,148 @@ Import components, enums, and prop types from the same package. The values line
 </Card>
 ```
 
+For icon-only actions, use `IconButton` and name the button with `label`, `ariaLabel`, or `ariaLabelledBy`. An `ariaLabel` on a nested `Icon` names the image, not the interactive button.
+
+<!-- BEGIN GENERATED PUBLIC COMPONENTS -->
 ## Available Components
 
-Provider and hooks:
-- `MarwesProvider`
-- `useTheme`
-- `useToast`
-
-Actions and buttons:
-- `Button`, `IconButton`
-- `PrimaryButton`, `SecondaryButton`, `TextButton`, `SuccessButton`
-- `SubmitButton`, `CancelButton`, `CreateButton`, `DestructiveButton`
-- `LinkButton`, `SaveButton`, `ConfirmButton`, `VerifyButton`
-- `EditButton`, `CloseButton`, `RefreshButton`
-- `UploadButton`, `DownloadButton`, `CopyButton`
-- `SearchButton`, `FilterButton`, `SortButton`, `DropdownButton`
-
-Forms and inputs:
-- `Input`, `Textarea`, `Select`, `RichText`, `InputOtp`
-- `InputField`, `TextareaField`, `SelectField`, `RichTextField`
-- `DropdownField`, `SearchField`, `PasswordField`, `EmailField`
-- `DateOfBirthField`, `ZipCodeField`, `PhoneField`, `URLField`, `CurrencyField`
-- `Checkbox`, `CheckboxField`, `CheckboxGroupField`
-- `Radio`, `RadioGroupField`, `YesNoRadioGroup`, `RatingRadioGroup`, `OptionRadioGroup`
-- `Switch`, `SwitchField`, `FeatureToggle`, `PreferenceSwitch`, `PermissionSwitch`
-- `Slider`, `SliderField`, `VolumeSlider`, `BrightnessSlider`, `RadiusSlider`
-- `SegmentedControlField`, `PaginationField`
-
-Content and layout:
-- `Card`, `ProductCard`, `ProfileCard`, `StatCard`
-- `H1`, `H2`, `H3`, `Paragraph`, `Text`, `TypographyText`
-- `Spacer`, `Spacing`, `Divider`
+Generated from the public root export of `@marwes-ui/svelte`. Do not edit this inventory by hand.
+
+### Framework
+
+- `MarwesProvider`, `SkipLink`
+
+### Accordion
+
+- `AccordionField`, `FAQAccordion`, `SectionsAccordion`, `SettingsAccordion`
+
+### Avatar
+
+- `Avatar`, `AvatarBadge`, `AvatarGroup`, `PresenceAvatar`, `ProfileAvatar`, `TeamAvatarGroup`
+
+### Badge
+
+- `Badge`, `BadgeGroup`, `NotificationBadge`, `PriorityBadge`, `StatusBadge`
+
+### Banner
+
+- `Banner`, `ErrorBanner`, `InfoBanner`, `SuccessBanner`, `WarningBanner`
+
+### Breadcrumb
+
 - `Breadcrumb`
+
+### Button
+
+- `Button`, `CancelButton`, `CloseButton`, `ConfirmButton`, `CopyButton`, `CreateButton`
+- `DestructiveButton`, `DownloadButton`, `DropdownButton`, `EditButton`, `FilterButton`, `IconButton`
+- `LinkButton`, `PrimaryButton`, `RefreshButton`, `SaveButton`, `SearchButton`, `SecondaryButton`
+- `SortButton`, `SubmitButton`, `SuccessButton`, `TextButton`, `UploadButton`, `VerifyButton`
+
+### Card
+
+- `Card`, `ProductCard`, `ProfileCard`, `StatCard`
+
+### Checkbox
+
+- `CheckboxField`, `CheckboxGroupField`
+
+### Context Menu
+
+- `ContextMenu`
+
+### Date Picker
+
+- `DatePickerField`
+
+### Dialog
+
+- `ConfirmDialog`, `DestructiveDialog`, `Dialog`, `DialogModal`, `InfoDialog`
+
+### Divider
+
+- `Divider`
+
+### Drawer
+
+- `Drawer`
+
+### Heading
+
+- `H1`, `H2`, `H3`
+
+### Icon
+
 - `Icon`
-- `Avatar`, `AvatarBadge`, `AvatarGroup`, `ProfileAvatar`, `PresenceAvatar`, `TeamAvatarGroup`
-- `StatTile`, `Skeleton`
 
-Feedback and overlays:
-- `Badge`, `BadgeGroup`, `StatusBadge`, `PriorityBadge`, `NotificationBadge`
-- `Banner`, `InfoBanner`, `SuccessBanner`, `WarningBanner`, `ErrorBanner`
+### Input
+
+- `CurrencyField`, `DateOfBirthField`, `DropdownField`, `EmailField`, `InputField`, `InputOtpField`
+- `PasswordField`, `PhoneField`, `RichTextField`, `SearchField`, `SelectField`, `TextareaField`
+- `URLField`, `ZipCodeField`
+
+### Pagination
+
+- `PaginationField`
+
+### Paragraph
+
+- `Paragraph`
+
+### Progress Bar
+
 - `ProgressBar`
-- `Spinner`, `ButtonSpinner`, `EmptyStateSpinner`
-- `Toast`, `ToastContainer`, `ToastProvider`
-- `SuccessToast`, `ErrorToast`, `WarningToast`, `InfoToast`
-- `Tooltip`, `TooltipGroup`, `ContextMenu`
-- `Dialog`, `DialogModal`, `Drawer`, `ConfirmDialog`, `DestructiveDialog`, `InfoDialog`
-- `Accordion`, `AccordionField`, `FAQAccordion`, `SettingsAccordion`, `SectionsAccordion`
-- `Tab`, `TabGroup`, `TabPanel`, `NavigationTabs`, `ContentTabs`, `SettingsTabs`
-
-Typed tokens and helpers:
-- `ThemeInput`, `ThemeMode`, `Density`, `ToneName`
-- `mwAvailableFonts`, `mwGoogleFontFamilies`, `mwFontFallbacks`, `createFontStack`
-- `mwThemeVars`, `mwThemeVarNames`, `mwStyledTheme`, `mwVar`
-- `ButtonVariant`, `ButtonSize`, `ButtonAction`
-- `BadgeVariant`, `AvatarSize`, `AvatarType`, `SwitchSize`, `IconName`, `Spacings`
+
+### Radio
+
+- `OptionRadioGroup`, `RadioGroupField`, `RatingRadioGroup`, `YesNoRadioGroup`
+
+### Segmented Control
+
+- `SegmentedControlField`
+
+### Skeleton
+
+- `Skeleton`
+
+### Slider
+
+- `BrightnessSlider`, `RadiusSlider`, `SliderField`, `VolumeSlider`
+
+### Spacing
+
+- `Spacer`, `Spacing`
+
+### Spinner
+
+- `ButtonSpinner`, `EmptyStateSpinner`, `Spinner`
+
+### Stat Tile
+
+- `StatTile`
+
+### Switch
+
+- `FeatureToggle`, `PermissionSwitch`, `PreferenceSwitch`, `SwitchField`
+
+### Tab
+
+- `ContentTabs`, `NavigationTabs`, `SettingsTabs`, `Tab`, `TabGroup`, `TabPanel`
+
+### Text
+
+- `Text`, `TypographyText`
+
+### Toast
+
+- `ErrorToast`, `InfoToast`, `SuccessToast`, `Toast`, `ToastContainer`, `ToastProvider`
+- `WarningToast`
+
+### Tooltip
+
+- `Tooltip`, `TooltipGroup`
+
+<!-- END GENERATED PUBLIC COMPONENTS -->
 
 ## Theme In Seconds
 
@@ -371,10 +471,10 @@ By default Marwes keeps theme state scoped to the provider element. If your app
 
 ### SvelteKit SSR
 
-Use `createMarwesThemeStyle()` and `createMarwesThemeScript()` when a server-rendered app needs the correct light or dark variables before hydration. Import from the `/ssr` subpath:
+Use `createMarwesThemeStyle()` and `createMarwesThemeScript()` when a server-rendered app needs the correct light or dark variables before hydration. Both helpers are available from the adapter root:
 
 ```ts
-import { createMarwesThemeScript, createMarwesThemeStyle } from "@marwes-ui/svelte/ssr"
+import { createMarwesThemeScript, createMarwesThemeStyle } from "@marwes-ui/svelte"
 ```
 
 Read the [theme SSR no-flash guide](https://github.com/niklas-westman/marwes/blob/main/docs/guides/theme-ssr-no-flash.md) for SvelteKit setup, CSP nonces, custom light/dark themes, and stored/system preference behavior.
@@ -412,6 +512,8 @@ const panelStyle = `
 `
 ```
 
+`mwTheme`, `mwStyledTheme`, and `mwThemeVars` contain CSS `var(--mw-*)` references, not resolved color or spacing values. They are correct inside CSS evaluated below `MarwesProvider`, but JavaScript reads or aliases can resolve against the wrong element and return an empty value. Use `useTheme()` for JavaScript logic, charts, runtime aliases, or bridges that need concrete values.
+
 Keep the APIs separate:
 - Use `Spacings.sp24` for Marwes spacing props such as `<Spacer spacing={Spacings.sp24} />`.
 - Use `mwThemeVars.spacing.sp24` for custom CSS values.

package/dist/components/button/Button.svelte

@@ -61,6 +61,7 @@
     type={kit.a11y.type}
     disabled={kit.a11y.disabled}
     aria-label={kit.a11y.ariaLabel}
+    aria-labelledby={kit.a11y.ariaLabelledBy}
     aria-busy={kit.a11y.ariaBusy}
     aria-disabled={kit.a11y.ariaDisabled}
     aria-pressed={kit.a11y.ariaPressed}
@@ -80,6 +81,7 @@
     role={kit.a11y.role}
     tabindex={kit.a11y.tabIndex}
     aria-label={kit.a11y.ariaLabel}
+    aria-labelledby={kit.a11y.ariaLabelledBy}
     aria-busy={kit.a11y.ariaBusy}
     aria-disabled={kit.a11y.ariaDisabled}
     aria-pressed={kit.a11y.ariaPressed}

package/dist/components/button/types.d.ts

@@ -6,13 +6,10 @@ export interface ButtonProps extends ButtonOptions {
     class?: string;
     style?: string;
 }
-export interface IconButtonProps extends Omit<ButtonProps, "children" | "hasVisibleText" | "iconLeft" | "iconOnly" | "iconRight"> {
+export type IconButtonProps = Omit<ButtonProps, "children" | "hasVisibleText" | "iconLeft" | "iconOnly" | "iconRight"> & {
     icon: IconName;
-    /** Accessible name — required for icon-only buttons. Prefer `label`; `ariaLabel` also accepted. */
-    label?: string;
-    ariaLabel?: string;
     variant?: ButtonVariant;
-}
+};
 export type PrimaryButtonProps = Omit<ButtonProps, "variant" | "as">;
 export type SecondaryButtonProps = Omit<ButtonProps, "variant" | "as">;
 export type TextButtonProps = Omit<ButtonProps, "variant" | "as">;

package/package.json

@@ -1,6 +1,26 @@
 {
   "name": "@marwes-ui/svelte",
-  "version": "1.4.1",
+  "version": "1.5.1",
+  "description": "Accessible, themeable Marwes components for Svelte with static preset CSS and purpose-first APIs.",
+  "homepage": "https://marwes.io/docs/get-started/svelte/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/niklas-westman/marwes.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/niklas-westman/marwes/issues"
+  },
+  "keywords": [
+    "marwes",
+    "svelte",
+    "components",
+    "design-system",
+    "accessibility"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +49,8 @@
     }
   },
   "dependencies": {
-    "@marwes-ui/core": "1.4.1",
-    "@marwes-ui/presets": "1.4.1"
+    "@marwes-ui/core": "1.5.1",
+    "@marwes-ui/presets": "1.5.1"
   },
   "peerDependencies": {
     "svelte": "^5.20.0"
@@ -45,7 +65,7 @@
     "svelte-check": "^4.0.0",
     "typescript": "5.9.3",
     "vite": "^6.0.0",
-    "vitest": "4.1.8"
+    "vitest": "4.1.11"
   },
   "scripts": {
     "dev": "svelte-package --watch",