@marwes-ui/svelte 1.3.0 → 1.4.0

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { IconName, createBreadcrumbRecipe } from "@marwes-ui/core";
+  import Icon from "../icon/Icon.svelte";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { BreadcrumbItem, BreadcrumbProps } from "./types.js";
+
+  let {
+    items,
+    ariaLabel,
+    showHome,
+    homeHref,
+    homeLabel,
+    dataAttributes,
+    onitemselect,
+    onhomeclick,
+    class: className,
+  }: BreadcrumbProps = $props();
+
+  const breadcrumbOptions = $derived.by(() => {
+    const options = { items };
+    if (ariaLabel !== undefined) Object.assign(options, { ariaLabel });
+    if (showHome !== undefined) Object.assign(options, { showHome });
+    if (homeHref !== undefined) Object.assign(options, { homeHref });
+    if (homeLabel !== undefined) Object.assign(options, { homeLabel });
+    if (dataAttributes !== undefined) Object.assign(options, { dataAttributes });
+    return options;
+  });
+  const kit = $derived(createBreadcrumbRecipe(breadcrumbOptions));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+
+  function sourceItem(item: (typeof kit.items)[number]): BreadcrumbItem {
+    return (
+      (item.kind === "item" ? item.item : undefined) ?? {
+        label: item.label,
+        ...(item.value ? { value: item.value } : {}),
+        ...(item.href ? { href: item.href } : {}),
+        current: item.current,
+      }
+    );
+  }
+</script>
+
+<nav class={mergedClass} aria-label={kit.a11y.ariaLabel} {...kit.dataAttributes}>
+  <ol class={kit.list.className} role={kit.list.a11y.role}>
+    {#each kit.items as item, index (item.key)}
+      <li class={item.className} {...item.dataAttributes}>
+        {#if index > 0}
+          <span class={kit.separator.className} aria-hidden={kit.separator.a11y.ariaHidden}>
+            <Icon name={IconName.ChevronRight} decorative size={12} />
+          </span>
+        {/if}
+
+        {#if item.kind === "home"}
+          {#if item.href}
+            <a
+              class={item.actionClassName}
+              href={item.href}
+              aria-label={item.a11y.ariaLabel}
+              aria-current={item.current ? "page" : undefined}
+              onclick={() => onhomeclick?.()}
+            >
+              <Icon name={IconName.Home} decorative size={14} />
+            </a>
+          {:else if !item.current}
+            <button
+              type="button"
+              class={item.actionClassName}
+              aria-label={item.a11y.ariaLabel}
+              aria-current={item.current ? "page" : undefined}
+              onclick={() => onhomeclick?.()}
+            >
+              <Icon name={IconName.Home} decorative size={14} />
+            </button>
+          {:else}
+            <span
+              class={item.actionClassName}
+              aria-label={item.a11y.ariaLabel}
+              aria-current={item.current ? "page" : undefined}
+            >
+              <Icon name={IconName.Home} decorative size={14} />
+            </span>
+          {/if}
+        {:else if item.current}
+          <span
+            class={item.actionClassName}
+            aria-label={item.a11y.ariaLabel}
+            aria-current={item.a11y.ariaCurrent}
+          >
+            {item.label}
+          </span>
+        {:else if item.href}
+          <a
+            class={item.actionClassName}
+            href={item.href}
+            aria-label={item.a11y.ariaLabel}
+            aria-current={item.a11y.ariaCurrent}
+            onclick={() => onitemselect?.(item.value ?? item.label, sourceItem(item))}
+          >
+            {item.label}
+          </a>
+        {:else}
+          <button
+            type="button"
+            class={item.actionClassName}
+            aria-label={item.a11y.ariaLabel}
+            aria-current={item.a11y.ariaCurrent}
+            onclick={() => onitemselect?.(item.value ?? item.label, sourceItem(item))}
+          >
+            {item.label}
+          </button>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export type { BreadcrumbItem, BreadcrumbProps } from "./types.js";

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte";

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

@@ -0,0 +1,8 @@
+import type { BreadcrumbItem, BreadcrumbOptions } from "@marwes-ui/core";
+export interface BreadcrumbProps extends BreadcrumbOptions {
+    items: readonly BreadcrumbItem[];
+    onitemselect?: (value: string, item: BreadcrumbItem) => void;
+    onhomeclick?: () => void;
+    class?: string;
+}
+export type { BreadcrumbItem };

package/dist/components/breadcrumb/types.js

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

package/dist/components/button/Button.svelte

@@ -19,7 +19,9 @@
   const mergedStyle = $derived(mergeStyle(cssVarsToStyle(kit.vars), style));
 
   const resolvedVariant = $derived((options.variant ?? "primary") as ButtonVariant);
-  const isFilledVariant = $derived(resolvedVariant === "primary" || resolvedVariant === "success");
+  const isFilledVariant = $derived(
+    resolvedVariant === "primary" || resolvedVariant === "success" || resolvedVariant === "danger"
+  );
 
   const visibleLabel = $derived(
     kit.loading.isLoading && kit.loading.loadingLabel !== undefined
@@ -43,9 +45,11 @@
     <Icon name={options.iconLeft} size="xs" strokeWidth="sm" decorative />
   {/if}
   {#if visibleLabel}
-    {visibleLabel}
-  {:else}
-    {@render children?.()}
+    <span class="mw-btn__label">{visibleLabel}</span>
+  {:else if children}
+    <span class="mw-btn__label">
+      {@render children()}
+    </span>
   {/if}
   {#if !kit.loading.isLoading && options.iconRight}
     <Icon name={options.iconRight} size="xs" strokeWidth="sm" decorative />

package/dist/components/button/DestructiveButton.svelte

@@ -5,4 +5,4 @@
   type Props = Omit<ButtonProps, "variant" | "action" | "as">;
   let { dataAttributes, ...props }: Props = $props();
 </script>
-<Button {...props} variant="primary" action="delete" error as="button" dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("destructive") }} />
+<Button {...props} variant="danger" action="delete" as="button" dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("destructive") }} />

package/dist/components/button/IconButton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { ButtonVariant as ButtonVariants } from "@marwes-ui/core";
+  import Button from "./Button.svelte";
+  import type { IconButtonProps } from "./types.js";
+
+  let { icon, variant = ButtonVariants.neutral, ...props }: IconButtonProps = $props();
+</script>
+
+<Button {...props} {variant} iconLeft={icon} iconOnly={true} hasVisibleText={false} />

package/dist/components/button/IconButton.svelte.d.ts

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

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

@@ -1,2 +1,25 @@
 export { default as Button } from "./Button.svelte";
-export type { ButtonProps } from "./types.js";
+export { default as IconButton } from "./IconButton.svelte";
+export { default as PrimaryButton } from "./PrimaryButton.svelte";
+export { default as SecondaryButton } from "./SecondaryButton.svelte";
+export { default as TextButton } from "./TextButton.svelte";
+export { default as SuccessButton } from "./SuccessButton.svelte";
+export { default as DestructiveButton } from "./DestructiveButton.svelte";
+export { default as SubmitButton } from "./SubmitButton.svelte";
+export { default as CancelButton } from "./CancelButton.svelte";
+export { default as CreateButton } from "./CreateButton.svelte";
+export { default as LinkButton } from "./LinkButton.svelte";
+export { default as SaveButton } from "./SaveButton.svelte";
+export { default as ConfirmButton } from "./ConfirmButton.svelte";
+export { default as VerifyButton } from "./VerifyButton.svelte";
+export { default as EditButton } from "./EditButton.svelte";
+export { default as CloseButton } from "./CloseButton.svelte";
+export { default as RefreshButton } from "./RefreshButton.svelte";
+export { default as UploadButton } from "./UploadButton.svelte";
+export { default as DownloadButton } from "./DownloadButton.svelte";
+export { default as CopyButton } from "./CopyButton.svelte";
+export { default as SearchButton } from "./SearchButton.svelte";
+export { default as FilterButton } from "./FilterButton.svelte";
+export { default as SortButton } from "./SortButton.svelte";
+export { default as DropdownButton } from "./DropdownButton.svelte";
+export type { ButtonProps, CancelButtonProps, CloseButtonProps, ConfirmButtonProps, CopyButtonProps, CreateButtonProps, DestructiveButtonProps, DownloadButtonProps, DropdownButtonProps, EditButtonProps, FilterButtonProps, IconButtonProps, LinkButtonProps, PrimaryButtonProps, RefreshButtonProps, SaveButtonProps, SearchButtonProps, SecondaryButtonProps, SortButtonProps, SubmitButtonProps, SuccessButtonProps, TextButtonProps, UploadButtonProps, VerifyButtonProps, } from "./types.js";

package/dist/components/button/index.js

@@ -1 +1,24 @@
 export { default as Button } from "./Button.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { default as PrimaryButton } from "./PrimaryButton.svelte";
+export { default as SecondaryButton } from "./SecondaryButton.svelte";
+export { default as TextButton } from "./TextButton.svelte";
+export { default as SuccessButton } from "./SuccessButton.svelte";
+export { default as DestructiveButton } from "./DestructiveButton.svelte";
+export { default as SubmitButton } from "./SubmitButton.svelte";
+export { default as CancelButton } from "./CancelButton.svelte";
+export { default as CreateButton } from "./CreateButton.svelte";
+export { default as LinkButton } from "./LinkButton.svelte";
+export { default as SaveButton } from "./SaveButton.svelte";
+export { default as ConfirmButton } from "./ConfirmButton.svelte";
+export { default as VerifyButton } from "./VerifyButton.svelte";
+export { default as EditButton } from "./EditButton.svelte";
+export { default as CloseButton } from "./CloseButton.svelte";
+export { default as RefreshButton } from "./RefreshButton.svelte";
+export { default as UploadButton } from "./UploadButton.svelte";
+export { default as DownloadButton } from "./DownloadButton.svelte";
+export { default as CopyButton } from "./CopyButton.svelte";
+export { default as SearchButton } from "./SearchButton.svelte";
+export { default as FilterButton } from "./FilterButton.svelte";
+export { default as SortButton } from "./SortButton.svelte";
+export { default as DropdownButton } from "./DropdownButton.svelte";

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

@@ -1,4 +1,4 @@
-import type { ButtonOptions } from "@marwes-ui/core";
+import type { ButtonOptions, ButtonVariant, IconName } from "@marwes-ui/core";
 import type { Snippet } from "svelte";
 export interface ButtonProps extends ButtonOptions {
     children?: Snippet;
@@ -6,3 +6,32 @@ export interface ButtonProps extends ButtonOptions {
     class?: string;
     style?: string;
 }
+export interface IconButtonProps extends 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">;
+export type SuccessButtonProps = Omit<ButtonProps, "variant" | "action" | "as">;
+export type DestructiveButtonProps = Omit<ButtonProps, "variant" | "action" | "as">;
+export type SubmitButtonProps = Omit<ButtonProps, "variant" | "action" | "as">;
+export type CancelButtonProps = Omit<ButtonProps, "action">;
+export type CreateButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type LinkButtonProps = Omit<ButtonProps, "variant" | "action" | "as">;
+export type SaveButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type ConfirmButtonProps = Omit<ButtonProps, "variant" | "action" | "as">;
+export type VerifyButtonProps = Omit<ButtonProps, "variant" | "action" | "as">;
+export type EditButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type CloseButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type RefreshButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type UploadButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type DownloadButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type CopyButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type SearchButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type FilterButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type SortButtonProps = Omit<ButtonProps, "variant" | "action">;
+export type DropdownButtonProps = Omit<ButtonProps, "variant" | "action">;

package/dist/components/card/Card.svelte

@@ -8,6 +8,7 @@
     children,
     class: className,
     id,
+    ariaDisabled,
     dataAttributes,
   }: CardProps = $props();
 
@@ -15,7 +16,7 @@
   const mergedClass = $derived(mergeClass(kit.className, className));
 </script>
 
-<div {id} class={mergedClass} {...kit.dataAttributes}>
+<div {id} class={mergedClass} aria-disabled={ariaDisabled} {...kit.dataAttributes}>
   {#if title}
     <div class="mw-card__header">
       <span class="mw-card__title">

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

@@ -1,2 +1,5 @@
 export { default as Card } from "./Card.svelte";
-export type { CardProps } from "./types.js";
+export { default as ProductCard } from "./ProductCard.svelte";
+export { default as ProfileCard } from "./ProfileCard.svelte";
+export { default as StatCard } from "./StatCard.svelte";
+export type { CardProps, ProductCardProps, ProfileCardProps, StatCardProps } from "./types.js";

package/dist/components/card/index.js

@@ -1 +1,4 @@
 export { default as Card } from "./Card.svelte";
+export { default as ProductCard } from "./ProductCard.svelte";
+export { default as ProfileCard } from "./ProfileCard.svelte";
+export { default as StatCard } from "./StatCard.svelte";

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

@@ -7,4 +7,8 @@ export interface CardProps extends CardOptions {
     children?: Snippet;
     class?: string;
     id?: string;
+    ariaDisabled?: boolean | "true" | "false";
 }
+export type ProductCardProps = CardProps;
+export type ProfileCardProps = CardProps;
+export type StatCardProps = CardProps;

package/dist/components/checkbox/CheckboxField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buildCheckboxFieldA11yIds } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import Checkbox from "./Checkbox.svelte";
   import type { CheckboxFieldProps, CheckboxProps } from "./types.js";
 
@@ -56,19 +57,19 @@
       bind:checked
     />
     <label class="mw-checkbox-field__label" for={fieldId}>
-      <p class="mw-p mw-p--md">{label}</p>
+      <Text variant="label">{label}</Text>
     </label>
   </div>
 
   {#if hasDescription}
     <div class="mw-checkbox-field__description" id={a11yIds.descriptionId}>
-      <p class="mw-p mw-p--sm">{description}</p>
+      <Text variant="caption">{description}</Text>
     </div>
   {/if}
 
   {#if hasError}
     <div class="mw-checkbox-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/checkbox/CheckboxGroupField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buildCheckboxGroupFieldA11yIds } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import type { CheckboxGroupFieldProps } from "./types.js";
 
   let {
@@ -24,27 +25,38 @@
   const hasError = $derived(hasTextContent(error));
 
   const a11yIds = $derived(
-    buildCheckboxGroupFieldA11yIds({ id: fieldId, hasDescription, hasError, externalDescribedBy: ariaDescribedBy })
+    buildCheckboxGroupFieldA11yIds({
+      id: fieldId,
+      hasDescription,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
   );
 
   const wrapperClass = $derived(mergeClass("mw-checkbox-group-field", className));
 </script>
 
-<fieldset class={wrapperClass} aria-labelledby={a11yIds.labelId} aria-describedby={a11yIds.describedBy} aria-invalid={hasError ? true : undefined}>
+<!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+<fieldset
+  class={wrapperClass}
+  aria-labelledby={a11yIds.labelId}
+  aria-describedby={a11yIds.describedBy}
+  aria-invalid={hasError ? true : undefined}
+>
   <legend class="mw-checkbox-group-field__label" id={a11yIds.labelId}>
-    <p class="mw-p mw-p--md">{label}</p>
+    <Text variant="label">{label}</Text>
   </legend>
-  <div class="mw-checkbox-group-field__options">
-    {@render children?.()}
-  </div>
-  {#if hasDescription && !hasError}
+  {#if hasDescription}
     <div class="mw-checkbox-group-field__description" id={a11yIds.descriptionId}>
-      <p class="mw-p mw-p--sm">{description}</p>
+      <Text variant="caption">{description}</Text>
     </div>
   {/if}
+  <div class="mw-checkbox-group-field__options">
+    {@render children?.()}
+  </div>
   {#if hasError}
     <div class="mw-checkbox-group-field__error" id={a11yIds.errorId} aria-live="polite">
-      <p class="mw-p mw-p--sm">{error}</p>
+      <Text variant="caption">{error}</Text>
     </div>
   {/if}
 </fieldset>

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

@@ -1,3 +1,3 @@
-export { default as Checkbox } from "./Checkbox.svelte";
 export { default as CheckboxField } from "./CheckboxField.svelte";
-export type { CheckboxProps, CheckboxFieldProps, CheckboxGroupFieldProps } from "./types.js";
+export { default as CheckboxGroupField } from "./CheckboxGroupField.svelte";
+export type { CheckboxFieldProps, CheckboxGroupFieldProps, CheckboxGroupFieldOption, } from "./types.js";

package/dist/components/checkbox/index.js

@@ -1,2 +1,5 @@
-export { default as Checkbox } from "./Checkbox.svelte";
+// `Checkbox` (the atom) is intentionally NOT re-exported here.
+// Use `CheckboxField` (or `CheckboxGroupField`) instead. Internal
+// consumers can deep-import "./Checkbox.svelte" directly.
 export { default as CheckboxField } from "./CheckboxField.svelte";
+export { default as CheckboxGroupField } from "./CheckboxGroupField.svelte";

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

@@ -19,6 +19,13 @@ export interface CheckboxFieldProps {
     checked?: boolean;
     class?: string;
 }
+export interface CheckboxGroupFieldOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
 export interface CheckboxGroupFieldProps {
     id?: string;
     label: string;

package/dist/components/context-menu/ContextMenu.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { createContextMenuRecipe } from "@marwes-ui/core";
+  import Icon from "../icon/Icon.svelte";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { ContextMenuProps } from "./types.js";
+
+  let {
+    items,
+    ariaLabel,
+    dataAttributes,
+    onselect,
+    class: className,
+  }: ContextMenuProps = $props();
+
+  const menuOptions = $derived.by(() => {
+    const options = { items };
+    if (ariaLabel !== undefined) Object.assign(options, { ariaLabel });
+    if (dataAttributes !== undefined) Object.assign(options, { dataAttributes });
+    return options;
+  });
+  const kit = $derived(createContextMenuRecipe(menuOptions));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+</script>
+
+<div class={mergedClass} role={kit.a11y.role} aria-label={kit.a11y.ariaLabel} {...kit.dataAttributes}>
+  {#each kit.items as item (item.key)}
+    {#if item.kind === "divider"}
+      <div
+        class={item.className}
+        role={item.a11y.role}
+        aria-orientation={item.a11y.ariaOrientation}
+        {...item.dataAttributes}
+      ></div>
+    {:else}
+      <button
+        type={item.a11y.type}
+        role={item.a11y.role}
+        disabled={item.a11y.disabled}
+        aria-disabled={item.a11y.ariaDisabled}
+        class={item.className}
+        onclick={() => {
+          if (item.item.disabled) return;
+          onselect?.(item.value, item.item);
+        }}
+        {...item.dataAttributes}
+      >
+        {#if item.icon}
+          <span class="mw-context-menu__icon" aria-hidden="true">
+            <Icon name={item.icon} decorative />
+          </span>
+        {/if}
+        <span class="mw-context-menu__label">{item.label}</span>
+      </button>
+    {/if}
+  {/each}
+</div>

package/dist/components/context-menu/ContextMenu.svelte.d.ts

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

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from "./ContextMenu.svelte";
+export type { ContextMenuActionItem, ContextMenuEntry, ContextMenuProps } from "./types.js";

package/dist/components/context-menu/index.js

@@ -0,0 +1 @@
+export { default as ContextMenu } from "./ContextMenu.svelte";

package/dist/components/context-menu/types.d.ts

@@ -0,0 +1,7 @@
+import type { ContextMenuActionItem, ContextMenuEntry, ContextMenuOptions } from "@marwes-ui/core";
+export interface ContextMenuProps extends ContextMenuOptions {
+    items: readonly ContextMenuEntry[];
+    onselect?: (value: string, item: ContextMenuActionItem) => void;
+    class?: string;
+}
+export type { ContextMenuActionItem, ContextMenuEntry };

package/dist/components/context-menu/types.js

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

package/dist/components/date-picker/DatePicker.svelte

@@ -15,6 +15,9 @@
     nextYearLabel,
     cancelLabel,
     applyLabel,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     calendarLabel,
     dataAttributes,
     onpreviousyear,
@@ -39,6 +42,9 @@
     if (nextYearLabel !== undefined) opts.nextYearLabel = nextYearLabel;
     if (cancelLabel !== undefined) opts.cancelLabel = cancelLabel;
     if (applyLabel !== undefined) opts.applyLabel = applyLabel;
+    if (ariaLabel !== undefined) opts.ariaLabel = ariaLabel;
+    if (ariaLabelledBy !== undefined) opts.ariaLabelledBy = ariaLabelledBy;
+    if (ariaDescribedBy !== undefined) opts.ariaDescribedBy = ariaDescribedBy;
     if (calendarLabel !== undefined) opts.calendarLabel = calendarLabel;
     if (dataAttributes !== undefined) opts.dataAttributes = dataAttributes;
     return opts;
@@ -48,7 +54,13 @@
   const mergedClass = $derived(mergeClass(kit.className, className));
 </script>
 
-<section class={mergedClass} aria-label={kit.labels.calendar} {...kit.dataAttributes}>
+<section
+  class={mergedClass}
+  aria-label={kit.a11y.ariaLabel}
+  aria-labelledby={kit.a11y.ariaLabelledBy}
+  aria-describedby={kit.a11y.ariaDescribedBy}
+  {...kit.dataAttributes}
+>
   <header class={kit.slots.headerClassName}>
     <div class={kit.slots.navGroupClassName}>
       <button type="button" class={kit.slots.navButtonClassName} aria-label={kit.labels.previousYear} onclick={onpreviousyear}>«</button>
@@ -64,7 +76,7 @@
   <table class={kit.slots.gridClassName} aria-label={kit.monthLabel}>
     <thead>
       <tr class="mw-date-picker__weekdays">
-        {#each kit.weekdayLabels as weekday (weekday)}
+        {#each kit.weekdayLabels as weekday, weekdayIndex (weekdayIndex)}
           <th class={kit.slots.weekdayClassName} scope="col">{weekday}</th>
         {/each}
       </tr>

package/dist/components/date-picker/DatePickerField.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { buildInputFieldA11yIds } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
+  import DatePicker from "./DatePicker.svelte";
+  import type { DatePickerFieldProps, DatePickerProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    helperText,
+    error,
+    datePicker = {},
+    ariaDescribedBy,
+    class: className,
+  }: DatePickerFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-date-picker-${uniqueId}`);
+  const labelId = $derived(`${fieldId}-label`);
+
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
+  const hasHelperText = $derived(hasTextContent(helperText));
+  const hasError = $derived(hasTextContent(error));
+
+  const a11yIds = $derived(
+    buildInputFieldA11yIds({
+      id: fieldId,
+      hasHelperText,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass("mw-date-picker-field", hasError && "mw-date-picker-field--invalid", className)
+  );
+
+  const datePickerProps = $derived.by((): DatePickerProps => {
+    const props: DatePickerProps = {
+      ...datePicker,
+      ariaLabelledBy: labelId,
+    };
+    if (a11yIds.describedBy) {
+      props.ariaDescribedBy = a11yIds.describedBy;
+    }
+    return props;
+  });
+</script>
+
+<div class={wrapperClass}>
+  <span class="mw-date-picker-field__label" id={labelId}>
+    <Text variant="label">{label}</Text>
+  </span>
+
+  <DatePicker {...datePickerProps} />
+
+  {#if hasHelperText && !hasError}
+    <div class="mw-date-picker-field__helper" id={a11yIds.helperTextId}>
+      <Text variant="caption">{helperText}</Text>
+    </div>
+  {/if}
+
+  {#if hasError}
+    <div class="mw-date-picker-field__error" id={a11yIds.errorId} aria-live="polite">
+      <Text variant="caption">{error}</Text>
+    </div>
+  {/if}
+</div>

package/dist/components/date-picker/DatePickerField.svelte.d.ts

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