@marwes-ui/vue 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,8 @@
+Vue 3 components for the Marwes design system with default styling, typed theme tokens, accessibility contracts, and AI-readable semantics.
+
 <div align="center">
 
-<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/banner.png" width="100%" style="border-radius: 40px;">
+<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/cover-v3.png" width="100%" style="border-radius: 40px;">
 
 <br>
 <br>
@@ -11,7 +13,7 @@
 
 Vue 3.4+ • TypeScript-first • Default CSS included • ThemeInput • Google Fonts DX • Purpose components
 
-[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Storybook](https://d3hobet9plpuvm.cloudfront.net/storybook-react/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
+[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Vue Storybook](https://storybook-vue.marwes.io/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
 
 </div>
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { ComputedRef, VNodeChild } from 'vue';
 import * as _marwes_ui_core from '@marwes-ui/core';
-import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
+import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SkeletonOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, StatTileOptions, StatTileTrendDirection, StatTileTone, DatePickerOptions, DatePickerDevice, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, IconName, MarwesThemeScriptOptions, MarwesThemeStyleOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Spacings, SwitchSize, Theme, ThemeInput, ThemeMode, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, ThemeVariableStrategy, ToneName, createFontStack, createMarwesThemeScript, createMarwesThemeStyle, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 
 type ThemeTarget = "provider" | "html" | "body";
@@ -1198,6 +1198,7 @@ declare const InputOtp: vue.DefineSetupFnComponent<InputOtpProps, ("change" | "u
     "onValue-change"?: (...args: any[]) => any;
 }, vue.PublicProps>;
 
+type SelectFieldVariant = "default" | "date";
 type SelectFieldProps = {
     id?: string;
     label: string;
@@ -1206,6 +1207,7 @@ type SelectFieldProps = {
     select: SelectProps;
     ariaDescribedBy?: string;
     modelValue?: string;
+    variant?: SelectFieldVariant;
 };
 declare const SelectField: vue.DefineSetupFnComponent<SelectFieldProps, ("update:modelValue" | "value-change")[], {}, SelectFieldProps & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -1714,6 +1716,15 @@ declare const EmptyStateSpinner: vue.DefineComponent<{
     variant?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
+type SkeletonProps = SkeletonOptions & {
+    className?: string;
+    dataAttributes?: Record<string, string>;
+};
+declare const Skeleton: vue.DefineSetupFnComponent<SkeletonProps, {}, {}, SkeletonOptions & {
+    className?: string;
+    dataAttributes?: Record<string, string>;
+} & {}, vue.PublicProps>;
+
 type SpacingProps = SpacingOptions & {
     size?: SpacingSize;
     spacing?: SpacingSize;
@@ -1765,6 +1776,31 @@ declare const Paragraph: vue.DefineSetupFnComponent<ParagraphProps, {}, {}, Para
     className?: string;
 } & {}, vue.PublicProps>;
 
+interface StatTileProps extends Pick<StatTileOptions, "dataAttributes"> {
+    className?: string;
+    label: string;
+    value: string;
+    subtitle?: string;
+    trendValue?: string;
+    trendDirection?: StatTileTrendDirection;
+    tone?: StatTileTone;
+}
+declare const StatTile: vue.DefineSetupFnComponent<StatTileProps, {}, {}, StatTileProps & {}, vue.PublicProps>;
+
+interface DatePickerProps extends Pick<DatePickerOptions, "monthLabel" | "weekdayLabels" | "weeks" | "previousYearLabel" | "previousMonthLabel" | "nextMonthLabel" | "nextYearLabel" | "cancelLabel" | "applyLabel" | "calendarLabel" | "dataAttributes"> {
+    className?: string;
+    device?: DatePickerDevice;
+}
+declare const DatePicker: vue.DefineSetupFnComponent<DatePickerProps, ("cancel" | "previousYear" | "previousMonth" | "nextMonth" | "nextYear" | "daySelect" | "apply")[], {}, DatePickerProps & {
+    onCancel?: (...args: any[]) => any;
+    onPreviousYear?: (...args: any[]) => any;
+    onPreviousMonth?: (...args: any[]) => any;
+    onNextMonth?: (...args: any[]) => any;
+    onNextYear?: (...args: any[]) => any;
+    onDaySelect?: (...args: any[]) => any;
+    onApply?: (...args: any[]) => any;
+}, vue.PublicProps>;
+
 interface CardProps {
     className?: string;
     id?: string;
@@ -2759,6 +2795,7 @@ declare const ConfirmDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2769,7 +2806,6 @@ declare const ConfirmDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -2784,6 +2820,7 @@ declare const ConfirmDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2794,7 +2831,6 @@ declare const ConfirmDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type DestructiveDialogProps = Omit<DialogModalProps, "footer"> & {
@@ -2814,6 +2850,7 @@ declare const DestructiveDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2824,7 +2861,6 @@ declare const DestructiveDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -2839,6 +2875,7 @@ declare const DestructiveDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2849,7 +2886,6 @@ declare const DestructiveDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type InfoDialogProps = Omit<DialogModalProps, "footer"> & {
@@ -2902,4 +2938,4 @@ declare const InfoDialog: vue.DefineComponent<{
     onAcknowledge?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Accordion, AccordionField, type AccordionFieldItem, type AccordionFieldProps, type AccordionProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, Badge, BadgeGroup, type BadgeGroupProps, type BadgeProps, BrightnessSlider, type BrightnessSliderProps, Button, type ButtonProps, ButtonSpinner, type ButtonSpinnerProps, CancelButton, type CancelButtonProps, Card, type CardProps, Checkbox, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldOption, type CheckboxGroupFieldProps, type CheckboxProps, CloseButton, type CloseButtonProps, ConfirmButton, type ConfirmButtonProps, ConfirmDialog, type ConfirmDialogProps, ContentTabs, type ContentTabsProps, CopyButton, type CopyButtonProps, CreateButton, type CreateButtonProps, CurrencyField, type CurrencyFieldProps, DateOfBirthField, type DateOfBirthFieldProps, DestructiveButton, type DestructiveButtonProps, DestructiveDialog, type DestructiveDialogProps, Dialog, type DialogFooterControls, DialogModal, type DialogModalProps, type DialogProps, Divider, type DividerProps, DownloadButton, type DownloadButtonProps, DropdownButton, type DropdownButtonProps, DropdownField, type DropdownFieldProps, EditButton, type EditButtonProps, EmailField, type EmailFieldProps, EmptyStateSpinner, type EmptyStateSpinnerProps, ErrorToast, type ErrorToastProps, FAQAccordion, type FAQAccordionProps, FeatureToggle, type FeatureToggleProps, FilterButton, type FilterButtonProps, H1, H2, H3, type HeadingLevel, type HeadingProps, Icon, type IconProps, InfoDialog, type InfoDialogProps, InfoToast, type InfoToastProps, Input, InputField, type InputFieldProps, InputOtp, type InputOtpProps, type InputProps, LinkButton, type LinkButtonProps, type ManagedToast, MarwesProvider, type MarwesProviderProps, NavigationTabs, type NavigationTabsProps, NotificationBadge, type NotificationBadgeProps, OptionRadioGroup, type OptionRadioGroupProps, Paragraph, type ParagraphProps, PasswordField, type PasswordFieldProps, PermissionSwitch, type PermissionSwitchProps, PhoneField, type PhoneFieldProps, PreferenceSwitch, type PreferenceSwitchProps, PresenceAvatar, type PresenceAvatarProps, PrimaryButton, type PrimaryButtonProps, PriorityBadge, type PriorityBadgeProps, ProductCard, type ProductCardProps, ProfileAvatar, type ProfileAvatarProps, ProfileCard, type ProfileCardProps, Radio, RadioGroupField, type RadioGroupFieldOption, type RadioGroupFieldProps, type RadioProps, RadiusSlider, type RadiusSliderProps, RatingRadioGroup, type RatingRadioGroupProps, RefreshButton, type RefreshButtonProps, RichText, RichTextField, type RichTextFieldProps, type RichTextProps, SaveButton, type SaveButtonProps, SearchButton, type SearchButtonProps, SearchField, type SearchFieldProps, SecondaryButton, type SecondaryButtonProps, SectionsAccordion, type SectionsAccordionProps, Select, type SelectAppearance, SelectField, type SelectFieldProps, type SelectOption, type SelectProps, SettingsAccordion, type SettingsAccordionProps, SettingsTabs, type SettingsTabsProps, type ShowToastOptions, Slider, SliderField, type SliderFieldProps, type SliderProps, SortButton, type SortButtonProps, Spacer, type SpacerProps, Spacing, type SpacingProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, SubmitButton, type SubmitButtonProps, SuccessButton, type SuccessButtonProps, SuccessToast, type SuccessToastProps, Switch, SwitchField, type SwitchFieldProps, type SwitchProps, Tab, TabGroup, type TabGroupItem, type TabGroupProps, TabPanel, type TabPanelProps, type TabProps, TeamAvatarGroup, type TeamAvatarGroupProps, TextButton, type TextButtonProps, Textarea, TextareaField, type TextareaFieldProps, type TextareaProps, type ThemeModeContextValue, Toast, ToastContainer, type ToastContainerProps, type ToastController, type ToastProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipProps, URLField, type URLFieldProps, UploadButton, type UploadButtonProps, VerifyButton, type VerifyButtonProps, VolumeSlider, type VolumeSliderProps, WarningToast, type WarningToastProps, YesNoRadioGroup, type YesNoRadioGroupProps, ZipCodeField, type ZipCodeFieldProps, createHeadingComponent, useTheme, useThemeMode, useToast };
+export { Accordion, AccordionField, type AccordionFieldItem, type AccordionFieldProps, type AccordionProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, Badge, BadgeGroup, type BadgeGroupProps, type BadgeProps, BrightnessSlider, type BrightnessSliderProps, Button, type ButtonProps, ButtonSpinner, type ButtonSpinnerProps, CancelButton, type CancelButtonProps, Card, type CardProps, Checkbox, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldOption, type CheckboxGroupFieldProps, type CheckboxProps, CloseButton, type CloseButtonProps, ConfirmButton, type ConfirmButtonProps, ConfirmDialog, type ConfirmDialogProps, ContentTabs, type ContentTabsProps, CopyButton, type CopyButtonProps, CreateButton, type CreateButtonProps, CurrencyField, type CurrencyFieldProps, DateOfBirthField, type DateOfBirthFieldProps, DatePicker, type DatePickerProps, DestructiveButton, type DestructiveButtonProps, DestructiveDialog, type DestructiveDialogProps, Dialog, type DialogFooterControls, DialogModal, type DialogModalProps, type DialogProps, Divider, type DividerProps, DownloadButton, type DownloadButtonProps, DropdownButton, type DropdownButtonProps, DropdownField, type DropdownFieldProps, EditButton, type EditButtonProps, EmailField, type EmailFieldProps, EmptyStateSpinner, type EmptyStateSpinnerProps, ErrorToast, type ErrorToastProps, FAQAccordion, type FAQAccordionProps, FeatureToggle, type FeatureToggleProps, FilterButton, type FilterButtonProps, H1, H2, H3, type HeadingLevel, type HeadingProps, Icon, type IconProps, InfoDialog, type InfoDialogProps, InfoToast, type InfoToastProps, Input, InputField, type InputFieldProps, InputOtp, type InputOtpProps, type InputProps, LinkButton, type LinkButtonProps, type ManagedToast, MarwesProvider, type MarwesProviderProps, NavigationTabs, type NavigationTabsProps, NotificationBadge, type NotificationBadgeProps, OptionRadioGroup, type OptionRadioGroupProps, Paragraph, type ParagraphProps, PasswordField, type PasswordFieldProps, PermissionSwitch, type PermissionSwitchProps, PhoneField, type PhoneFieldProps, PreferenceSwitch, type PreferenceSwitchProps, PresenceAvatar, type PresenceAvatarProps, PrimaryButton, type PrimaryButtonProps, PriorityBadge, type PriorityBadgeProps, ProductCard, type ProductCardProps, ProfileAvatar, type ProfileAvatarProps, ProfileCard, type ProfileCardProps, Radio, RadioGroupField, type RadioGroupFieldOption, type RadioGroupFieldProps, type RadioProps, RadiusSlider, type RadiusSliderProps, RatingRadioGroup, type RatingRadioGroupProps, RefreshButton, type RefreshButtonProps, RichText, RichTextField, type RichTextFieldProps, type RichTextProps, SaveButton, type SaveButtonProps, SearchButton, type SearchButtonProps, SearchField, type SearchFieldProps, SecondaryButton, type SecondaryButtonProps, SectionsAccordion, type SectionsAccordionProps, Select, type SelectAppearance, SelectField, type SelectFieldProps, type SelectOption, type SelectProps, SettingsAccordion, type SettingsAccordionProps, SettingsTabs, type SettingsTabsProps, type ShowToastOptions, Skeleton, type SkeletonProps, Slider, SliderField, type SliderFieldProps, type SliderProps, SortButton, type SortButtonProps, Spacer, type SpacerProps, Spacing, type SpacingProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, SubmitButton, type SubmitButtonProps, SuccessButton, type SuccessButtonProps, SuccessToast, type SuccessToastProps, Switch, SwitchField, type SwitchFieldProps, type SwitchProps, Tab, TabGroup, type TabGroupItem, type TabGroupProps, TabPanel, type TabPanelProps, type TabProps, TeamAvatarGroup, type TeamAvatarGroupProps, TextButton, type TextButtonProps, Textarea, TextareaField, type TextareaFieldProps, type TextareaProps, type ThemeModeContextValue, Toast, ToastContainer, type ToastContainerProps, type ToastController, type ToastProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipProps, URLField, type URLFieldProps, UploadButton, type UploadButtonProps, VerifyButton, type VerifyButtonProps, VolumeSlider, type VolumeSliderProps, WarningToast, type WarningToastProps, YesNoRadioGroup, type YesNoRadioGroupProps, ZipCodeField, type ZipCodeFieldProps, createHeadingComponent, useTheme, useThemeMode, useToast };

package/dist/index.js

@@ -1,6 +1,6 @@
 export { createMarwesThemeScript, createMarwesThemeStyle } from './chunk-DVJD5CQS.js';
 import '@marwes-ui/presets/firstEdition/styles.css';
-import { ThemeMode, resolveThemePreference, resolveThemeInput, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, sanitizeCurrencyValue, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, createDividerRecipe, createSpacingRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, createSliderRecipe, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, createDialogRecipe, isThemePreference, nextThemeMode, themeToCSSVars, richTextCommandByFormat, headingRecipe, moveTabSelection, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
+import { ThemeMode, resolveThemePreference, resolveThemeInput, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, sanitizeCurrencyValue, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, createDividerRecipe, createSkeletonRecipe, createSpacingRecipe, createStatTileRecipe, createDatePickerRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, createSliderRecipe, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, createDialogRecipe, isThemePreference, nextThemeMode, themeToCSSVars, richTextCommandByFormat, headingRecipe, moveTabSelection, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, ThemeMode, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import { defineComponent, ref, computed, onMounted, onUnmounted, watch, provide, h, useAttrs, onBeforeUnmount, shallowRef, Fragment, nextTick, Teleport, inject } from 'vue';
 
@@ -2277,7 +2277,8 @@ var selectFieldPropKeys = [
   "error",
   "select",
   "ariaDescribedBy",
-  "modelValue"
+  "modelValue",
+  "variant"
 ];
 function hasTextContent3(value) {
   return value !== void 0 && value.trim().length > 0;
@@ -2375,11 +2376,15 @@ var SelectField = defineComponent(
     const displayText = computed(
       () => placeholderSelected.value ? sourceSelect.value.placeholder ?? "" : selectedOption.value?.label ?? ""
     );
+    const accessibleName = computed(
+      () => sourceSelect.value.ariaLabel ?? (hasTextContent3(props.label) ? props.label : void 0) ?? (hasTextContent3(displayText.value) ? displayText.value : void 0)
+    );
     const wrapperClass = computed(
       () => mergeClassNames(
         "mw-input-field",
         "mw-input-field--select",
         mode.value === "marwes" && "mw-input-field--select-marwes",
+        props.variant === "date" && "mw-input-field--select-date",
         disabled.value && "mw-input-field--disabled",
         invalid.value && "mw-input-field--invalid"
       )
@@ -2576,6 +2581,7 @@ var SelectField = defineComponent(
                 "aria-controls": `${id.value}-listbox`,
                 "aria-expanded": open.value ? "true" : "false",
                 "aria-haspopup": "listbox",
+                "aria-label": accessibleName.value,
                 "aria-describedby": a11yIds.value.describedBy,
                 "aria-invalid": invalid.value ? "true" : void 0,
                 "aria-required": sourceSelect.value.required ? "true" : void 0,
@@ -2908,9 +2914,9 @@ var SearchField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "search" }, [
         h(
           InputField,
@@ -2936,9 +2942,9 @@ var PasswordField = defineComponent({
   inheritAttrs: false,
   props: [...passwordFieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       const autoComplete = props.autoComplete ?? "current-password";
       return h("div", { "data-purpose": "password" }, [
         h(
@@ -2964,9 +2970,9 @@ var EmailField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "email" }, [
         h(
           InputField,
@@ -3047,9 +3053,9 @@ var PhoneField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "phone" }, [
         h(
           InputField,
@@ -3075,9 +3081,9 @@ var URLField = defineComponent({
   inheritAttrs: false,
   props: [...fieldPropKeys],
   emits: ["update:modelValue", "value-change"],
-  setup(_, { attrs, slots, emit }) {
+  setup(rawProps, { slots, emit }) {
     return () => {
-      const props = attrs;
+      const props = rawProps;
       return h("div", { "data-purpose": "url" }, [
         h(
           InputField,
@@ -3811,6 +3817,61 @@ var Divider = defineComponent(
     props: [...dividerPropKeys]
   }
 );
+var skeletonPropKeys = [
+  "variant",
+  "width",
+  "height",
+  "radius",
+  "animation",
+  "decorative",
+  "ariaLabel",
+  "id",
+  "className",
+  "dataAttributes"
+];
+var Skeleton = defineComponent(
+  (props) => {
+    const attrs = useAttrs();
+    const ariaLabelFromAttrs = typeof attrs["aria-label"] === "string" ? attrs["aria-label"] : void 0;
+    const renderKit = computed(
+      () => createSkeletonRecipe({
+        ...props.variant !== void 0 ? { variant: props.variant } : {},
+        ...props.width !== void 0 ? { width: props.width } : {},
+        ...props.height !== void 0 ? { height: props.height } : {},
+        ...props.radius !== void 0 ? { radius: props.radius } : {},
+        ...props.animation !== void 0 ? { animation: props.animation } : {},
+        ...props.decorative !== void 0 ? { decorative: props.decorative } : {},
+        ...props.id !== void 0 ? { id: props.id } : {},
+        ...props.ariaLabel !== void 0 ? { ariaLabel: props.ariaLabel } : ariaLabelFromAttrs !== void 0 ? { ariaLabel: ariaLabelFromAttrs } : {}
+      })
+    );
+    return () => {
+      const skeletonRenderKit = renderKit.value;
+      const passthroughAttrs = omitAttrs(attrs, [
+        "class",
+        "style",
+        "aria-label"
+      ]);
+      return h("span", {
+        ...passthroughAttrs,
+        ...skeletonRenderKit.dataAttributes,
+        ...props.dataAttributes ?? {},
+        class: mergeClassNames(skeletonRenderKit.className, props.className, attrs.class),
+        style: mergeStyles(skeletonRenderKit.vars, attrs.style),
+        role: skeletonRenderKit.a11y.role,
+        id: skeletonRenderKit.a11y.id,
+        "aria-hidden": skeletonRenderKit.a11y.ariaHidden ? "true" : void 0,
+        "aria-label": skeletonRenderKit.a11y.ariaLabel,
+        "aria-live": skeletonRenderKit.a11y.ariaLive
+      });
+    };
+  },
+  {
+    name: "MarwesSkeleton",
+    inheritAttrs: false,
+    props: [...skeletonPropKeys]
+  }
+);
 var spacingPropKeys = ["size", "spacing", "scale", "className"];
 var Spacing = defineComponent(
   (props) => {
@@ -3881,6 +3942,261 @@ function createHeadingComponent(level) {
 var H1 = createHeadingComponent(1);
 var H2 = createHeadingComponent(2);
 var H3 = createHeadingComponent(3);
+var statTilePropKeys = [
+  "className",
+  "label",
+  "value",
+  "subtitle",
+  "trendValue",
+  "trendDirection",
+  "tone",
+  "dataAttributes"
+];
+var StatTile = defineComponent(
+  (props) => {
+    const attrs = useAttrs();
+    const renderKit = computed(
+      () => createStatTileRecipe({
+        ...props.tone !== void 0 ? { tone: props.tone } : {},
+        ...props.trendDirection !== void 0 ? { trendDirection: props.trendDirection } : {},
+        ...props.trendValue !== void 0 ? { trendValue: props.trendValue } : {},
+        ...props.dataAttributes !== void 0 ? { dataAttributes: props.dataAttributes } : {}
+      })
+    );
+    return () => {
+      const kit = renderKit.value;
+      const passthroughAttrs = omitAttrs(attrs, ["class", "style"]);
+      return h(
+        "article",
+        {
+          ...passthroughAttrs,
+          ...kit.dataAttributes,
+          class: mergeClassNames(kit.className, props.className, attrs.class)
+        },
+        [
+          h(
+            "div",
+            { class: kit.slots.headerClassName },
+            [
+              h("span", { class: kit.slots.labelClassName }, props.label),
+              props.trendValue ? h(
+                "span",
+                {
+                  ...kit.trendDataAttributes,
+                  class: kit.slots.trendClassName,
+                  "aria-label": kit.a11y.trendAriaLabel
+                },
+                [
+                  kit.trendIcon ? h(
+                    "span",
+                    { class: kit.slots.trendIconClassName, "aria-hidden": "true" },
+                    kit.trendIcon
+                  ) : null,
+                  h("span", { class: kit.slots.trendValueClassName }, props.trendValue)
+                ].filter(Boolean)
+              ) : null
+            ].filter(Boolean)
+          ),
+          h("div", { class: kit.slots.valueClassName }, props.value),
+          props.subtitle ? h("div", { class: kit.slots.subtitleClassName }, props.subtitle) : null
+        ].filter(Boolean)
+      );
+    };
+  },
+  {
+    name: "MarwesStatTile",
+    inheritAttrs: false,
+    props: [...statTilePropKeys]
+  }
+);
+var datePickerPropKeys = [
+  "className",
+  "monthLabel",
+  "weekdayLabels",
+  "weeks",
+  "device",
+  "previousYearLabel",
+  "previousMonthLabel",
+  "nextMonthLabel",
+  "nextYearLabel",
+  "cancelLabel",
+  "applyLabel",
+  "calendarLabel",
+  "dataAttributes"
+];
+var DatePicker = defineComponent(
+  (props, { emit }) => {
+    const attrs = useAttrs();
+    const renderKit = computed(
+      () => createDatePickerRecipe({
+        ...props.monthLabel !== void 0 ? { monthLabel: props.monthLabel } : {},
+        ...props.weekdayLabels !== void 0 ? { weekdayLabels: props.weekdayLabels } : {},
+        ...props.weeks !== void 0 ? { weeks: props.weeks } : {},
+        ...props.device !== void 0 ? { device: props.device } : {},
+        ...props.previousYearLabel !== void 0 ? { previousYearLabel: props.previousYearLabel } : {},
+        ...props.previousMonthLabel !== void 0 ? { previousMonthLabel: props.previousMonthLabel } : {},
+        ...props.nextMonthLabel !== void 0 ? { nextMonthLabel: props.nextMonthLabel } : {},
+        ...props.nextYearLabel !== void 0 ? { nextYearLabel: props.nextYearLabel } : {},
+        ...props.cancelLabel !== void 0 ? { cancelLabel: props.cancelLabel } : {},
+        ...props.applyLabel !== void 0 ? { applyLabel: props.applyLabel } : {},
+        ...props.calendarLabel !== void 0 ? { calendarLabel: props.calendarLabel } : {},
+        ...props.dataAttributes !== void 0 ? { dataAttributes: props.dataAttributes } : {}
+      })
+    );
+    return () => {
+      const kit = renderKit.value;
+      const passthroughAttrs = omitAttrs(attrs, ["class", "style"]);
+      return h(
+        "section",
+        {
+          ...passthroughAttrs,
+          ...kit.dataAttributes,
+          class: mergeClassNames(kit.className, props.className, attrs.class),
+          "aria-label": kit.labels.calendar
+        },
+        [
+          h("header", { class: kit.slots.headerClassName }, [
+            h("div", { class: kit.slots.navGroupClassName }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.previousYear,
+                  onClick: () => emit("previousYear")
+                },
+                "\xAB"
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.previousMonth,
+                  onClick: () => emit("previousMonth")
+                },
+                "\u2039"
+              )
+            ]),
+            h("div", { class: kit.slots.monthLabelClassName }, kit.monthLabel),
+            h("div", { class: kit.slots.navGroupClassName }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.nextMonth,
+                  onClick: () => emit("nextMonth")
+                },
+                "\u203A"
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: kit.slots.navButtonClassName,
+                  "aria-label": kit.labels.nextYear,
+                  onClick: () => emit("nextYear")
+                },
+                "\xBB"
+              )
+            ])
+          ]),
+          h("table", { class: kit.slots.gridClassName, "aria-label": kit.monthLabel }, [
+            h("thead", [
+              h(
+                "tr",
+                { class: "mw-date-picker__weekdays" },
+                kit.weekdayLabels.map(
+                  (weekday) => h(
+                    "th",
+                    { key: weekday, class: kit.slots.weekdayClassName, scope: "col" },
+                    weekday
+                  )
+                )
+              )
+            ]),
+            h(
+              "tbody",
+              kit.weeks.map(
+                (week, weekIndex) => h(
+                  "tr",
+                  {
+                    key: week.map((day) => day.date ?? day.label).join("-"),
+                    class: kit.slots.weekClassName
+                  },
+                  week.map((day, dayIndex) => {
+                    const dayKit = kit.dayKits[weekIndex]?.[dayIndex];
+                    if (!dayKit) return null;
+                    return h(
+                      "td",
+                      {
+                        key: day.date ?? `${weekIndex}-${dayIndex}`,
+                        class: kit.slots.cellClassName
+                      },
+                      [
+                        h(
+                          "button",
+                          {
+                            type: "button",
+                            ...dayKit.dataAttributes,
+                            class: dayKit.className,
+                            "aria-label": dayKit.ariaLabel,
+                            "aria-pressed": dayKit.selected ? "true" : void 0,
+                            disabled: dayKit.disabled,
+                            onClick: () => emit("daySelect", day)
+                          },
+                          day.label
+                        )
+                      ]
+                    );
+                  })
+                )
+              )
+            )
+          ]),
+          h("footer", { class: kit.slots.footerClassName }, [
+            h(
+              "button",
+              {
+                type: "button",
+                class: kit.slots.footerButtonClassName,
+                onClick: () => emit("cancel")
+              },
+              kit.labels.cancel
+            ),
+            kit.labels.apply ? h(
+              "button",
+              {
+                type: "button",
+                class: mergeClassNames(
+                  kit.slots.footerButtonClassName,
+                  "mw-date-picker__footer-button--primary"
+                ),
+                onClick: () => emit("apply")
+              },
+              kit.labels.apply
+            ) : null
+          ])
+        ]
+      );
+    };
+  },
+  {
+    name: "MarwesDatePicker",
+    inheritAttrs: false,
+    props: [...datePickerPropKeys],
+    emits: [
+      "previousYear",
+      "previousMonth",
+      "nextMonth",
+      "nextYear",
+      "daySelect",
+      "cancel",
+      "apply"
+    ]
+  }
+);
 var cardPropKeys = ["className", "id", "dataAttributes"];
 var Card = defineComponent(
   (props, { slots }) => {
@@ -6434,7 +6750,7 @@ var DialogModal = defineComponent(
     );
     const footerContent = computed(() => {
       if (slots.footer) {
-        return slots.footer();
+        return slots.footer({ close });
       }
       if (typeof props.footer === "function") {
         return props.footer({ close });
@@ -6718,6 +7034,6 @@ var InfoDialog = defineComponent({
   }
 });
 
-export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, createHeadingComponent, useTheme, useThemeMode, useToast };
+export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DatePicker, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Skeleton, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatTile, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, createHeadingComponent, useTheme, useThemeMode, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map