@marwes-ui/svelte 1.3.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @marwes-ui/svelte
 
+## 1.4.1
+
+### Patch Changes
+
+- [#42](https://github.com/niklas-westman/marwes/pull/42) [`af9416c`](https://github.com/niklas-westman/marwes/commit/af9416cafa45a0e75d108bfd0f1bd849f6084b4c) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Docs polish: root README now leads with the marwes.io hub link (matching every package README) and the Packages table lists all seven published packages — the previously missing `@marwes-ui/svelte`, `@marwes-ui/cli`, and `create-marwes` are now included with usage hints.
+
+- Updated dependencies [[`af9416c`](https://github.com/niklas-westman/marwes/commit/af9416cafa45a0e75d108bfd0f1bd849f6084b4c)]:
+  - @marwes-ui/core@1.4.1
+  - @marwes-ui/presets@1.4.1
+
+## 1.4.0
+
+### Minor Changes
+
+- [#39](https://github.com/niklas-westman/marwes/pull/39) [`965a3af`](https://github.com/niklas-westman/marwes/commit/965a3af4fd05bf5342a687c55d52188c7c22ae62) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Add the next Marwes component family wave and finish release-blocking component polish.
+
+  Adds `Banner`, `Breadcrumb`, `ContextMenu`, `Drawer`, `Pagination`, `ProgressBar`, `SegmentedControl`, and `Text` across the shared core recipes, firstEdition preset CSS, React, Vue, and Svelte packages.
+
+  Each new family includes Storybook stories and `Introduction.mdx` documentation aligned with the existing component documentation pattern, plus registry artifacts, taxonomy/docs checks, and framework adapter coverage for a release-ready public package surface.
+
+  Adds `IconButton`, the `danger` button variant, the `sp-12` spacing token, native select chevron parity, wrapper-adaptive field widths, TabGroup overflow containment, and DialogModal surface controls across React, Vue, Svelte, presets, Storybook documentation, and registry artifacts.
+
+  Adds `label` as a consumer-friendly accessible-name alias for standalone controls that previously required `ariaLabel`, and cleans up Storybook consistency auditing so grouped React/Vue variant exports are compared against Svelte one-file component exports without false parity failures.
+
+  Cleans up Svelte adapter diagnostics by removing stale state-capture warnings, preserving shared ARIA contracts with explicit Svelte annotations, and aligning purpose radio groups with controlled/uncontrolled behavior.
+
+  Aligns Svelte package styling behavior with React and Vue by loading firstEdition CSS from the public package entry, preserving the CSS side effect in package metadata, and adding shared contract enrollment for the remaining cross-framework Svelte surfaces.
+
+  Adds a cross-framework adapter architecture map and `pnpm check:adapter-architecture` guardrail so React, Vue, and Svelte package structure, Storybook introductions, root exports, shared contracts, and package CSS policy cannot drift silently.
+
+- [#40](https://github.com/niklas-westman/marwes/pull/40) [`5bb997c`](https://github.com/niklas-westman/marwes/commit/5bb997cb03c037233afc3e42288f6ed037d1b1c5) Thanks [@niklas-westman](https://github.com/niklas-westman)! - Complete the `label` accessible-name alias rollout across standalone controls.
+
+  `Radio` and `InputOtp` now accept `label` alongside `ariaLabel`, matching the pattern already used by `Checkbox`, `Switch`, `Slider`, `Input`, `Select`, `Textarea`, and `RichText`. `IconButton` prop types now surface `label` explicitly for IDE discoverability (the underlying `Button` recipe already resolved it). Consumers can now use `label="…"` uniformly across every standalone control; `ariaLabel` continues to work.
+
+### Patch Changes
+
+- Updated dependencies [[`965a3af`](https://github.com/niklas-westman/marwes/commit/965a3af4fd05bf5342a687c55d52188c7c22ae62), [`5bb997c`](https://github.com/niklas-westman/marwes/commit/5bb997cb03c037233afc3e42288f6ed037d1b1c5)]:
+  - @marwes-ui/core@1.4.0
+  - @marwes-ui/presets@1.4.0
+
 ## 1.3.0
 
 ### Minor Changes

package/README.md

@@ -13,7 +13,8 @@ Svelte 5 components for the Marwes design system with default styling, typed the
 
 Svelte 5 • TypeScript-first • Default CSS included • ThemeInput • Google Fonts DX • Purpose components
 
-[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Svelte Storybook](https://storybook-svelte.marwes.io/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
+[**marwes.io**](https://marwes.io) — official site, theme builder, and install guides
+[Svelte Storybook](https://storybook-svelte.marwes.io/latest/) • [Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [GitHub](https://github.com/niklas-westman/marwes)
 
 </div>
 
@@ -28,7 +29,7 @@ Marwes gives Svelte apps a ready design-system base without requiring custom CSS
 - **Runes-first**: built entirely on Svelte 5 runes (`$props`, `$state`, `$derived`, `$effect`, `$bindable`) — no legacy stores or lifecycle hooks.
 - **Consequential theming**: a `ThemeInput` object changes colors, fonts, radius, density, typography, and component visuals through shared CSS variables.
 - **Purpose components**: `SubmitButton`, `CancelButton`, and `DestructiveButton` make intent machine-readable so tests, audits, and AI agents can handle actions safely.
-- **Shared core contracts**: every Svelte component is backed by the same framework-agnostic recipes, a11y mapping, and theme shape used by React and Vue.
+- **Shared core contracts**: every Svelte component is backed by the same framework-agnostic recipes, a11y mapping, and theme shape used across adapters.
 
 ## Package Map
 
@@ -46,11 +47,37 @@ This split keeps installation simple for app teams while giving humans and AI ag
 
 ## 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.
+
+For full setup guides, theme customization, and the theme builder, visit [marwes.io](https://marwes.io).
+
+### Existing Svelte app
+
+Run at the root of your project:
+
+```bash
+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`.
+
+### New Vite app
+
+Scaffold a fresh Vite starter with Marwes preinstalled:
+
+```bash
+pnpm create marwes@latest my-app --template svelte-ts
+```
+
+### AI-assisted setup
+
+Add `--agentic` to hand setup to an AI coding agent (Claude Code, Cursor, etc.). The CLI runs the normal install, then runs `doctor` and prints the guardrails the agent should follow:
+
 ```bash
-pnpm add @marwes-ui/svelte
+pnpm dlx @marwes-ui/cli init --adapter svelte --agentic
 ```
 
-No preset CSS import is needed. `@marwes-ui/svelte` depends on `@marwes-ui/presets` and loads the default Marwes CSS automatically.
+After install, jump to the [Quick Start](#quick-start) below.
 
 ## Quick Start
 
@@ -70,8 +97,8 @@ No preset CSS import is needed. `@marwes-ui/svelte` depends on `@marwes-ui/prese
 </script>
 
 <MarwesProvider>
-  <Input bind:value={email} placeholder="Email" ariaLabel="Email" />
-  <Checkbox bind:checked={subscribed} ariaLabel="Subscribe" />
+  <Input bind:value={email} placeholder="Email" label="Email" />
+  <Checkbox bind:checked={subscribed} label="Subscribe" />
   <Button variant={ButtonVariant.secondary}>Preview</Button>
   <SubmitButton>Save</SubmitButton>
 </MarwesProvider>
@@ -170,7 +197,7 @@ Provider and hooks:
 - `useToast`
 
 Actions and buttons:
-- `Button`
+- `Button`, `IconButton`
 - `PrimaryButton`, `SecondaryButton`, `TextButton`, `SuccessButton`
 - `SubmitButton`, `CancelButton`, `CreateButton`, `DestructiveButton`
 - `LinkButton`, `SaveButton`, `ConfirmButton`, `VerifyButton`
@@ -187,21 +214,26 @@ Forms and inputs:
 - `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`
+- `H1`, `H2`, `H3`, `Paragraph`, `Text`, `TypographyText`
 - `Spacer`, `Spacing`, `Divider`
+- `Breadcrumb`
 - `Icon`
 - `Avatar`, `AvatarBadge`, `AvatarGroup`, `ProfileAvatar`, `PresenceAvatar`, `TeamAvatarGroup`
+- `StatTile`, `Skeleton`
 
 Feedback and overlays:
 - `Badge`, `BadgeGroup`, `StatusBadge`, `PriorityBadge`, `NotificationBadge`
+- `Banner`, `InfoBanner`, `SuccessBanner`, `WarningBanner`, `ErrorBanner`
+- `ProgressBar`
 - `Spinner`, `ButtonSpinner`, `EmptyStateSpinner`
 - `Toast`, `ToastContainer`, `ToastProvider`
 - `SuccessToast`, `ErrorToast`, `WarningToast`, `InfoToast`
-- `Tooltip`, `TooltipGroup`
-- `Dialog`, `DialogModal`, `ConfirmDialog`, `DestructiveDialog`, `InfoDialog`
+- `Tooltip`, `TooltipGroup`, `ContextMenu`
+- `Dialog`, `DialogModal`, `Drawer`, `ConfirmDialog`, `DestructiveDialog`, `InfoDialog`
 - `Accordion`, `AccordionField`, `FAQAccordion`, `SettingsAccordion`, `SectionsAccordion`
 - `Tab`, `TabGroup`, `TabPanel`, `NavigationTabs`, `ContentTabs`, `SettingsTabs`
 
@@ -463,7 +495,7 @@ Marwes Svelte components are accessible because the adapter renders a shared cor
 - Svelte components prefer native DOM controls first: `button`, `input`, `select`, `textarea`, `hr`, and standard form wiring.
 - Field components connect visible labels, helper text, and errors through `id`, `for`, `aria-describedby`, `aria-invalid`, and polite error announcements.
 - Coordinated widgets carry explicit contracts: tabs wire `tablist`/`tab`/`tabpanel`, dialogs own dialog semantics, toasts expose live-region behavior, and purpose buttons expose risk metadata.
-- Storybook accessibility smoke checks run through the Storybook a11y addon for the promoted Svelte families, and shared contract tests keep Svelte aligned with React and Vue.
+- Storybook accessibility smoke checks run through the Storybook a11y addon for the promoted Svelte families, and shared contract tests keep Svelte aligned across adapters.
 
 Example:
 

package/dist/components/README.md

@@ -0,0 +1,31 @@
+# Svelte Components
+
+## Cross-Framework Contract
+
+Svelte component families follow the role-identical adapter architecture in
+`docs/reference/adapter-architecture.md`.
+
+- Each shipped family keeps `.svelte` components, `types.ts`, and a family
+  `index.ts` barrel.
+- Public value and type exports are surfaced through
+  `packages/svelte/src/lib/index.ts`.
+- Components call the shared core recipes and consume preset CSS through the
+  package entry import.
+- Storybook coverage lives in `apps/storybook-svelte/src/stories/<family>/`
+  with `Introduction.mdx` and matching stories.
+- Shared contracts live in `packages/svelte/src/tests/` when React, Vue, and
+  Svelte can all exercise the same behavior.
+
+## Svelte Syntax Notes
+
+Svelte-specific differences should stay syntax-level:
+
+- use `bind:value` and `bind:checked` for supported form state
+- use lowercase event props such as `onclick`, `onvaluechange`, and
+  `oncheckedchange`
+- use snippets/content projection for component content
+- use Svelte context helpers for provider-backed theme access
+
+Do not add component-local parity notes that say a family is missing or behind.
+Use Storybook, shared contracts, and the adapter architecture check as the
+current source of truth.

package/dist/components/accordion/AccordionField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buildAccordionFieldA11yIds } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import Accordion from "./Accordion.svelte";
   import type { AccordionFieldItem, AccordionFieldProps } from "./types.js";
 
@@ -15,6 +16,7 @@
     onopenitemschange,
     multiple = true,
     ariaDescribedBy,
+    disabled,
     class: className,
   }: AccordionFieldProps = $props();
 
@@ -32,7 +34,11 @@
     buildAccordionFieldA11yIds({ id: fieldId, hasDescription, hasError, externalDescribedBy: ariaDescribedBy })
   );
 
-  let internalOpen = $state<string[]>(defaultOpenItems ?? []);
+  function getInitialOpenItems(): string[] {
+    return defaultOpenItems ?? [];
+  }
+
+  let internalOpen = $state<string[]>(getInitialOpenItems());
   const activeOpen = $derived(controlledOpen ?? internalOpen);
 
   function toggleItem(value: string): void {
@@ -48,9 +54,17 @@
     onopenitemschange?.(next);
   }
 
-  const wrapperClass = $derived(mergeClass("mw-accordion-field", className));
+  const wrapperClass = $derived(
+    mergeClass(
+      "mw-accordion-field",
+      disabled && "mw-accordion-field--disabled",
+      hasError && "mw-accordion-field--invalid",
+      className
+    )
+  );
 </script>
 
+<!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
   class={wrapperClass}
   role="group"
@@ -59,12 +73,12 @@
   aria-invalid={hasError ? true : undefined}
 >
   <div class="mw-accordion-field__label" id={a11yIds.labelId}>
-    <p class="mw-p mw-p--md">{label}</p>
+    <Text variant="label">{label}</Text>
   </div>
 
   {#if hasDescription && !hasError}
     <div class="mw-accordion-field__description" id={a11yIds.descriptionId}>
-      <p class="mw-p mw-p--sm">{description}</p>
+      <Text variant="caption">{description}</Text>
     </div>
   {/if}
 
@@ -74,7 +88,7 @@
         id={`${fieldId}-${item.value}`}
         title={item.title}
         open={activeOpen.includes(item.value)}
-        disabled={item.disabled ?? false}
+        disabled={disabled || item.disabled || false}
         ontoggle={() => toggleItem(item.value)}
       >
         {item.content}
@@ -84,7 +98,7 @@
 
   {#if hasError}
     <div class="mw-accordion-field__error" id={a11yIds.errorId} aria-live="polite">
-      <p class="mw-p mw-p--sm">{error}</p>
+      <Text variant="caption">{error}</Text>
     </div>
   {/if}
 </div>

package/dist/components/accordion/index.d.ts

@@ -1,2 +1,5 @@
-export { default as Accordion } from "./Accordion.svelte";
-export type { AccordionProps, AccordionFieldItem, AccordionFieldProps } from "./types.js";
+export { default as AccordionField } from "./AccordionField.svelte";
+export { default as FAQAccordion } from "./FAQAccordion.svelte";
+export { default as SettingsAccordion } from "./SettingsAccordion.svelte";
+export { default as SectionsAccordion } from "./SectionsAccordion.svelte";
+export type { AccordionFieldItem, AccordionFieldProps, FAQAccordionProps, SettingsAccordionProps, SectionsAccordionProps, } from "./types.js";

package/dist/components/accordion/index.js

@@ -1 +1,7 @@
-export { default as Accordion } from "./Accordion.svelte";
+// `Accordion` (the atom — a single collapsible panel) is intentionally NOT
+// re-exported here. Use `AccordionField` (for groups) or a purpose variant
+// instead. Internal consumers can deep-import "./Accordion.svelte" directly.
+export { default as AccordionField } from "./AccordionField.svelte";
+export { default as FAQAccordion } from "./FAQAccordion.svelte";
+export { default as SettingsAccordion } from "./SettingsAccordion.svelte";
+export { default as SectionsAccordion } from "./SectionsAccordion.svelte";

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

@@ -26,3 +26,6 @@ export interface AccordionFieldProps {
     class?: string;
     disabled?: boolean;
 }
+export type FAQAccordionProps = Omit<AccordionFieldProps, "multiple" | "disabled">;
+export type SettingsAccordionProps = Omit<AccordionFieldProps, "multiple" | "disabled">;
+export type SectionsAccordionProps = Omit<AccordionFieldProps, "disabled">;

package/dist/components/avatar/AvatarGroup.svelte

@@ -12,6 +12,7 @@
     overflowCount?: number;
     overflowLabel?: string;
     ariaLabel?: string;
+    label?: string;
     dataAttributes?: Record<string, string>;
     class?: string;
   }
@@ -20,12 +21,14 @@
     items,
     overflowCount,
     overflowLabel,
-    ariaLabel = "Avatar group",
+    ariaLabel,
+    label,
     dataAttributes,
     class: className,
   }: AvatarGroupProps = $props();
 
   const mergedClass = $derived(mergeClass("mw-avatar-group", className));
+  const groupLabel = $derived(ariaLabel ?? label ?? "Avatar group");
   const shouldRenderOverflow = $derived(overflowCount !== undefined && overflowCount > 0);
   const resolvedOverflowLabel = $derived(overflowLabel ?? `${overflowCount} more people`);
 </script>
@@ -33,7 +36,7 @@
 <fieldset
   class={mergedClass}
   data-component="avatar-group"
-  aria-label={ariaLabel}
+  aria-label={groupLabel}
   {...dataAttributes}
 >
   {#each items as item, i}

package/dist/components/avatar/AvatarGroup.svelte.d.ts

@@ -7,6 +7,7 @@ interface AvatarGroupProps {
     overflowCount?: number;
     overflowLabel?: string;
     ariaLabel?: string;
+    label?: string;
     dataAttributes?: Record<string, string>;
     class?: string;
 }

package/dist/components/avatar/TeamAvatarGroup.svelte

@@ -12,6 +12,7 @@
     overflowCount?: number;
     overflowLabel?: string;
     ariaLabel?: string;
+    label?: string;
     dataAttributes?: Record<string, string>;
     class?: string;
   }

package/dist/components/avatar/TeamAvatarGroup.svelte.d.ts

@@ -7,6 +7,7 @@ interface TeamAvatarGroupProps {
     overflowCount?: number;
     overflowLabel?: string;
     ariaLabel?: string;
+    label?: string;
     dataAttributes?: Record<string, string>;
     class?: string;
 }

package/dist/components/avatar/index.d.ts

@@ -1,2 +1,8 @@
+export { AvatarSize, AvatarType } from "@marwes-ui/core";
 export { default as Avatar } from "./Avatar.svelte";
-export type { AvatarProps } from "./types.js";
+export { default as AvatarBadge } from "./AvatarBadge.svelte";
+export { default as AvatarGroup } from "./AvatarGroup.svelte";
+export { default as ProfileAvatar } from "./ProfileAvatar.svelte";
+export { default as PresenceAvatar } from "./PresenceAvatar.svelte";
+export { default as TeamAvatarGroup } from "./TeamAvatarGroup.svelte";
+export type { AvatarProps, AvatarBadgeProps, AvatarGroupItem, AvatarGroupProps, ProfileAvatarProps, PresenceAvatarProps, TeamAvatarGroupProps, } from "./types.js";

package/dist/components/avatar/index.js

@@ -1 +1,7 @@
+export { AvatarSize, AvatarType } from "@marwes-ui/core";
 export { default as Avatar } from "./Avatar.svelte";
+export { default as AvatarBadge } from "./AvatarBadge.svelte";
+export { default as AvatarGroup } from "./AvatarGroup.svelte";
+export { default as ProfileAvatar } from "./ProfileAvatar.svelte";
+export { default as PresenceAvatar } from "./PresenceAvatar.svelte";
+export { default as TeamAvatarGroup } from "./TeamAvatarGroup.svelte";

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

@@ -4,3 +4,31 @@ export interface AvatarProps extends AvatarOptions {
     style?: string | undefined;
     dataAttributes?: Record<string, string>;
 }
+export interface AvatarBadgeProps extends AvatarProps {
+    statusLabel?: string;
+}
+export interface AvatarGroupItem extends Omit<AvatarProps, "size" | "class" | "style"> {
+    id?: string;
+}
+export interface AvatarGroupProps {
+    items: AvatarGroupItem[];
+    overflowCount?: number;
+    overflowLabel?: string;
+    ariaLabel?: string;
+    label?: string;
+    dataAttributes?: Record<string, string>;
+    class?: string;
+}
+export type ProfileAvatarProps = AvatarProps;
+export interface PresenceAvatarProps extends AvatarProps {
+    statusLabel?: string;
+}
+export interface TeamAvatarGroupProps {
+    items: AvatarGroupItem[];
+    overflowCount?: number;
+    overflowLabel?: string;
+    ariaLabel?: string;
+    label?: string;
+    dataAttributes?: Record<string, string>;
+    class?: string;
+}

package/dist/components/badge/BadgeGroup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import type { BadgeGroupProps } from "./types.js";
 
   let {
@@ -17,7 +18,7 @@
 
 <fieldset class={mergedClass} aria-labelledby={labelId}>
   <legend class="mw-badge-group__label" id={labelId}>
-    <p class="mw-p mw-p--sm">{label}</p>
+    <Text variant="caption">{label}</Text>
   </legend>
   <div class="mw-badge-group__items">
     {@render children?.()}

package/dist/components/badge/index.d.ts

@@ -1,3 +1,7 @@
+export { BadgeVariant } from "@marwes-ui/core";
 export { default as Badge } from "./Badge.svelte";
 export { default as BadgeGroup } from "./BadgeGroup.svelte";
-export type { BadgeProps, BadgeGroupProps } from "./types.js";
+export { default as StatusBadge } from "./StatusBadge.svelte";
+export { default as PriorityBadge } from "./PriorityBadge.svelte";
+export { default as NotificationBadge } from "./NotificationBadge.svelte";
+export type { BadgeProps, BadgeGroupProps, StatusBadgeProps, PriorityBadgeProps, NotificationBadgeProps, } from "./types.js";

package/dist/components/badge/index.js

@@ -1,2 +1,6 @@
+export { BadgeVariant } from "@marwes-ui/core";
 export { default as Badge } from "./Badge.svelte";
 export { default as BadgeGroup } from "./BadgeGroup.svelte";
+export { default as StatusBadge } from "./StatusBadge.svelte";
+export { default as PriorityBadge } from "./PriorityBadge.svelte";
+export { default as NotificationBadge } from "./NotificationBadge.svelte";

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

@@ -13,3 +13,6 @@ export interface BadgeGroupProps {
     class?: string;
     id?: string;
 }
+export type StatusBadgeProps = BadgeProps;
+export type PriorityBadgeProps = BadgeProps;
+export type NotificationBadgeProps = BadgeProps;

package/dist/components/banner/Banner.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { createBannerRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { BannerProps } from "./types.js";
+
+  let {
+    children,
+    icon,
+    action,
+    ondismiss,
+    class: className,
+    id,
+    ...coreProps
+  }: BannerProps = $props();
+
+  const kit = $derived(createBannerRecipe({
+    ...coreProps,
+    showAction: coreProps.showAction ?? Boolean(action),
+  }));
+  const mergedClass = $derived(mergeClass(kit.root.className, className));
+</script>
+
+<div
+  {id}
+  class={mergedClass}
+  role={kit.root.a11y.role}
+  aria-label={kit.root.a11y.ariaLabel}
+  aria-live={kit.root.a11y.ariaLive}
+  {...kit.root.dataAttributes}
+>
+  <div class={kit.content.className}>
+    {#if kit.icon.visible}
+      <span class={kit.icon.className}>
+        {#if icon}
+          {@render icon()}
+        {:else}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+          </svg>
+        {/if}
+      </span>
+    {/if}
+    <span class={kit.message.className}>
+      {@render children?.()}
+    </span>
+  </div>
+  {#if kit.action.visible && action}
+    <div class={kit.action.className}>
+      {@render action()}
+    </div>
+  {/if}
+  {#if kit.dismiss.visible}
+    <button
+      type="button"
+      class={kit.dismiss.className}
+      aria-label={kit.dismiss.ariaLabel}
+      onclick={ondismiss}
+    ></button>
+  {/if}
+</div>

package/dist/components/banner/Banner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BannerProps } from "./types.js";
+declare const Banner: import("svelte").Component<BannerProps, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/banner/ErrorBanner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Banner from "./Banner.svelte";
+  import type { BannerProps } from "./types.js";
+
+  let { variant: _variant, ...props }: BannerProps = $props();
+</script>
+
+<Banner {...props} variant="error" />

package/dist/components/banner/ErrorBanner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BannerProps } from "./types.js";
+declare const ErrorBanner: import("svelte").Component<BannerProps, {}, "">;
+type ErrorBanner = ReturnType<typeof ErrorBanner>;
+export default ErrorBanner;

package/dist/components/banner/InfoBanner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Banner from "./Banner.svelte";
+  import type { BannerProps } from "./types.js";
+
+  let { variant: _variant, ...props }: BannerProps = $props();
+</script>
+
+<Banner {...props} variant="info" />

package/dist/components/banner/InfoBanner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BannerProps } from "./types.js";
+declare const InfoBanner: import("svelte").Component<BannerProps, {}, "">;
+type InfoBanner = ReturnType<typeof InfoBanner>;
+export default InfoBanner;

package/dist/components/banner/SuccessBanner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Banner from "./Banner.svelte";
+  import type { BannerProps } from "./types.js";
+
+  let { variant: _variant, ...props }: BannerProps = $props();
+</script>
+
+<Banner {...props} variant="success" />

package/dist/components/banner/SuccessBanner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BannerProps } from "./types.js";
+declare const SuccessBanner: import("svelte").Component<BannerProps, {}, "">;
+type SuccessBanner = ReturnType<typeof SuccessBanner>;
+export default SuccessBanner;

package/dist/components/banner/WarningBanner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Banner from "./Banner.svelte";
+  import type { BannerProps } from "./types.js";
+
+  let { variant: _variant, ...props }: BannerProps = $props();
+</script>
+
+<Banner {...props} variant="warning" />

package/dist/components/banner/WarningBanner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BannerProps } from "./types.js";
+declare const WarningBanner: import("svelte").Component<BannerProps, {}, "">;
+type WarningBanner = ReturnType<typeof WarningBanner>;
+export default WarningBanner;

package/dist/components/banner/index.d.ts

@@ -0,0 +1,7 @@
+export { BannerVariant } from "@marwes-ui/core";
+export { default as Banner } from "./Banner.svelte";
+export { default as InfoBanner } from "./InfoBanner.svelte";
+export { default as SuccessBanner } from "./SuccessBanner.svelte";
+export { default as WarningBanner } from "./WarningBanner.svelte";
+export { default as ErrorBanner } from "./ErrorBanner.svelte";
+export type { BannerProps, InfoBannerProps, SuccessBannerProps, WarningBannerProps, ErrorBannerProps, } from "./types.js";

package/dist/components/banner/index.js

@@ -0,0 +1,6 @@
+export { BannerVariant } from "@marwes-ui/core";
+export { default as Banner } from "./Banner.svelte";
+export { default as InfoBanner } from "./InfoBanner.svelte";
+export { default as SuccessBanner } from "./SuccessBanner.svelte";
+export { default as WarningBanner } from "./WarningBanner.svelte";
+export { default as ErrorBanner } from "./ErrorBanner.svelte";

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

@@ -0,0 +1,14 @@
+import type { BannerOptions } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface BannerProps extends BannerOptions {
+    children?: Snippet;
+    icon?: Snippet;
+    action?: Snippet;
+    ondismiss?: () => void;
+    class?: string;
+    id?: string;
+}
+export type InfoBannerProps = Omit<BannerProps, "variant">;
+export type SuccessBannerProps = Omit<BannerProps, "variant">;
+export type WarningBannerProps = Omit<BannerProps, "variant">;
+export type ErrorBannerProps = Omit<BannerProps, "variant">;

package/dist/components/banner/types.js

@@ -0,0 +1 @@
+export {};