fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/calendar-view/calendar-view-grid.js

@@ -1,6 +1,6 @@
 import { tick } from 'svelte';
 import { SvelteDate } from 'svelte/reactivity';
-import { compareDates } from './calendar-view.svelte.js';
+import { compareDates, dateKey } from './calendar-view.svelte.js';
 export const CALENDAR_GRID_CONFIG = {
     root: { manageSpecialKeys: { Home: true, End: true } },
     mover: {
@@ -53,7 +53,10 @@ function amountFor(direction, columns) {
 /** The date a rendered cell stands for. */
 export function cellDate(element) {
     const value = element?.getAttribute?.('data-date');
-    return value ? new SvelteDate(Number(value)) : null;
+    if (!value)
+        return null;
+    const [year, month, day] = value.split('-').map(Number);
+    return new SvelteDate(year, month - 1, day);
 }
 /** Precision at which a date names exactly one cell of a view. */
 export const VIEW_PRECISION = {
@@ -115,7 +118,9 @@ export function createCalendarNavigation({ grid, body, page, disabled, blackout,
             updatePage(Math.sign(amount), 'neutral');
             await tick();
         }
-        body()?.querySelector(`button[data-date="${target.getTime()}"]`)?.focus();
+        body()
+            ?.querySelector(`button[data-date="${dateKey(target)}"]`)
+            ?.focus();
     }
     return (event) => {
         const amount = amountFor(event.direction, grid.columns);

package/dist/components/calendar-view/calendar-view-item.svelte

@@ -17,21 +17,27 @@
 </script>
 
 <div
+	{...attributes}
 	class={[
 		'fs-calendar-view-item',
 		`variant-${variant === 'day' ? 'day' : 'month-year'}`,
-		rangePosition && `in-range range-${rangePosition}`
+		rangePosition && `in-range range-${rangePosition}`,
+		attributes?.class
 	]}
 	role="gridcell"
 	aria-selected={!!selected || rangePosition !== undefined}
-	{...attributes}
 >
 	<button
+		{...buttonAttributes}
 		type="button"
-		class={['calendar-item-button', { selected, disabled, current, blackout }, outOfRange && 'out-of-range']}
+		class={[
+			'calendar-item-button',
+			{ selected, disabled, current, blackout },
+			outOfRange && 'out-of-range',
+			buttonAttributes?.class
+		]}
 		aria-disabled={disabled}
 		{disabled}
-		{...buttonAttributes}
 	>
 		{#if header}
 			<small>{header}</small>

package/dist/components/calendar-view/calendar-view-months.svelte

@@ -4,6 +4,7 @@
 	import CalendarViewItem from './calendar-view-item.svelte';
 	import {
 		compareDates,
+		dateKey,
 		getCalendarMonths,
 		getCalendarViewContext,
 		getMonthLocale,
@@ -124,11 +125,11 @@
 						{selected}
 						variant="monthYear"
 						outOfRange={!inYear}
-						current={compareDates(month, new Date(), 'month')}
+						current={compareDates(month, CalendarContext.config.today, 'month')}
 						buttonAttributes={{
 							tabindex: firstFocusableMonth && compareDates(firstFocusableMonth, month, 'month') ? 0 : -1,
 							'aria-label': monthLabel(month),
-							'data-date': month.getTime(),
+							'data-date': dateKey(month),
 							onclick: (e: MouseEvent) => {
 								selectMonth(e, month);
 							}

package/dist/components/calendar-view/calendar-view-years.svelte

@@ -4,6 +4,7 @@
 	import CalendarViewItem from './calendar-view-item.svelte';
 	import {
 		compareDates,
+		dateKey,
 		getCalendarViewContext,
 		getCalendarYears,
 		indexOfDate,
@@ -123,11 +124,11 @@
 						{selected}
 						variant="monthYear"
 						outOfRange={!inDecade}
-						current={compareDates(year, new Date(), 'year')}
+						current={compareDates(year, CalendarContext.config.today, 'year')}
 						buttonAttributes={{
 							tabindex: firstFocusableYear && compareDates(firstFocusableYear, year, 'year') ? 0 : -1,
 							'aria-label': yearLabel(year),
-							'data-date': year.getTime(),
+							'data-date': dateKey(year),
 							onclick: (e: MouseEvent) => {
 								selectYear(e, year);
 							}

package/dist/components/calendar-view/calendar-view.svelte

@@ -38,7 +38,7 @@
 	} from './types.js';
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		value = $bindable(null),
 		range = $bindable({ start: null, end: null }),
 		view = 'days',
@@ -46,6 +46,7 @@
 		blackoutBreaksRange,
 		minDate,
 		maxDate,
+		today,
 		locale = 'en-US',
 		weekStart = 1,
 		blackoutDates,
@@ -65,7 +66,9 @@
 
 	let pageAnimationDuration = $state(333);
 
-	let firstValue = $derived(Array.isArray(value) ? value[0] : (value ?? new Date()));
+	const _today = $derived(today ?? new Date());
+
+	let firstValue = $derived((Array.isArray(value) ? value[0] : value) ?? _today);
 
 	// svelte-ignore state_referenced_locally
 	let page = $state(
@@ -205,6 +208,9 @@
 			get maxDate() {
 				return maxDate;
 			},
+			get today() {
+				return _today;
+			},
 			get locale() {
 				return locale;
 			},
@@ -340,7 +346,8 @@ A calendar view lets a user view and interact with a calendar that they can navi
 This implementation is originally made by Tropix126 in his FluentSvelte library, I have changed several things but thanks to him for the original work.
 -->
 <div
-	class={['fs-calendar-view', { floating }]}
+	{...attributes}
+	class={['fs-calendar-view', { floating }, attributes?.class]}
 	bind:this={ref}
 	in:flyToOffset={floating && floating.ref
 		? {
@@ -356,7 +363,6 @@ This implementation is originally made by Tropix126 in his FluentSvelte library,
 			}
 		: undefined}
 	{@attach floating?.ref ? _floating(floating.ref, floating.positionConfig) : undefined}
-	{...attributes}
 >
 	<Flyout>
 		<CalendarViewControls />
@@ -418,6 +424,7 @@ This implementation is originally made by Tropix126 in his FluentSvelte library,
 			position: absolute;
 			top: 0;
 			left: 0;
+			z-index: 110;
 		}
 		& .calendar-wrapper {
 			overflow: hidden;

package/dist/components/calendar-view/calendar-view.svelte.js

@@ -10,6 +10,11 @@ const DAY_MS = 86_400_000;
  * `range` or a `value` carrying a time, and a range must not change meaning because
  * one of its ends happens to be half past two.
  */
+/** The local calendar date of a cell as `yyyy-mm-dd`: unlike a timestamp, the server and the browser agree on it. */
+export function dateKey(date) {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
 export function startOfDay(date) {
     return new SvelteDate(date.getFullYear(), date.getMonth(), date.getDate());
 }

package/dist/components/calendar-view/docs/llms.md

@@ -85,25 +85,26 @@ changing it from the header button leaves focus on the button.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:CalendarViewProps -->
 
-| Name                       | Type                                                                | Default                      | Description                                                                                                                  |
-| -------------------------- | ------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_           | `HTMLDivElement`                                                    |                              | The DOM reference of the calendar element.                                                                                   |
-| `value` _bindable_         | `Date` &#124; `Date[]` &#124; `null`                                | `null`                       | The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`.                           |
-| `selectionMode`            | `'single'` &#124; `'multiple'` &#124; `'range'`                     | `'single'`                   | How many dates the grid hands out, and in what shape.                                                                        |
-| `range` _bindable_         | `{ start: Date` &#124; `null; end: Date` &#124; `null; }`           | `{ start: null, end: null }` | The picked range. Only read and written when `selectionMode` is `'range'`, and `end` stays `null` until the range is closed. |
-| `blackoutBreaksRange`      | `boolean`                                                           | `false`                      | Stop a range from spanning a blacked-out date.                                                                               |
-| `blackoutDates`            | `Date[]`                                                            |                              | Dates that are rendered but cannot be selected.                                                                              |
-| `headers`                  | `boolean`                                                           |                              | Labels the first cell of a month or a year with its name.                                                                    |
-| `minDate`                  | `Date`                                                              |                              | The earliest selectable date.                                                                                                |
-| `maxDate`                  | `Date`                                                              |                              | The latest selectable date.                                                                                                  |
-| `view`                     | `'days'` &#124; `'months'` &#124; `'years'`                         | `'days'`                     | The calendar page the view opens on.                                                                                         |
-| `locale`                   | `string`                                                            | `'en-US'`                    | The locale used to format weekday and month names.                                                                           |
-| `weekStart`                | `number`                                                            | `1`                          | The first day of the week, where 0 is Sunday.                                                                                |
-| `floating`                 | `CalendarViewFloating`                                              |                              | Renders the calendar as a popup anchored to a reference element instead of inline.                                           |
-| `onChange`                 | `(event: Event, value: Date` &#124; `Date[]` &#124; `null) => void` |                              | Called whenever the selection changes. Not called in `'range'` mode.                                                         |
-| `onRangeChange`            | `(event: Event, range: CalendarDateRange) => void`                  |                              | Fired on every step of a range, including the one that leaves `end` null.                                                    |
-| `onViewChange`             | `(event: Event, view: View) => void`                                |                              | Called whenever the active calendar page changes.                                                                            |
-| Element Attributes (`div`) |                                                                     |                              |                                                                                                                              |
+| Name                       | Type                                                                | Default                      | Description                                                                                                                                                                                                                                                                                           |
+| -------------------------- | ------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_           | `HTMLDivElement` &#124; `null`                                      |                              | The DOM reference of the calendar element.                                                                                                                                                                                                                                                            |
+| `value` _bindable_         | `Date` &#124; `Date[]` &#124; `null`                                | `null`                       | The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`.                                                                                                                                                                                                    |
+| `selectionMode`            | `'single'` &#124; `'multiple'` &#124; `'range'`                     | `'single'`                   | How many dates the grid hands out, and in what shape.                                                                                                                                                                                                                                                 |
+| `range` _bindable_         | `{ start: Date` &#124; `null; end: Date` &#124; `null; }`           | `{ start: null, end: null }` | The picked range. Only read and written when `selectionMode` is `'range'`, and `end` stays `null` until the range is closed.                                                                                                                                                                          |
+| `blackoutBreaksRange`      | `boolean`                                                           | `false`                      | Stop a range from spanning a blacked-out date.                                                                                                                                                                                                                                                        |
+| `blackoutDates`            | `Date[]`                                                            |                              | Dates that are rendered but cannot be selected.                                                                                                                                                                                                                                                       |
+| `headers`                  | `boolean`                                                           |                              | Labels the first cell of a month or a year with its name.                                                                                                                                                                                                                                             |
+| `minDate`                  | `Date`                                                              |                              | The earliest selectable date.                                                                                                                                                                                                                                                                         |
+| `maxDate`                  | `Date`                                                              |                              | The latest selectable date.                                                                                                                                                                                                                                                                           |
+| `today`                    | `Date`                                                              | `new Date()`                 | The date the view treats as today: it is highlighted, and the view opens on its month when there is no `value`. Pass it when rendering on the server, built from a year, month and day on both sides, as in `new Date(2024, 2, 5)`: the same instant falls on different days in different time zones. |
+| `view`                     | `'days'` &#124; `'months'` &#124; `'years'`                         | `'days'`                     | The calendar page the view opens on.                                                                                                                                                                                                                                                                  |
+| `locale`                   | `string`                                                            | `'en-US'`                    | The locale used to format weekday and month names.                                                                                                                                                                                                                                                    |
+| `weekStart`                | `number`                                                            | `1`                          | The first day of the week, where 0 is Sunday.                                                                                                                                                                                                                                                         |
+| `floating`                 | `CalendarViewFloating`                                              |                              | Renders the calendar as a popup anchored to a reference element instead of inline.                                                                                                                                                                                                                    |
+| `onChange`                 | `(event: Event, value: Date` &#124; `Date[]` &#124; `null) => void` |                              | Called whenever the selection changes. Not called in `'range'` mode.                                                                                                                                                                                                                                  |
+| `onRangeChange`            | `(event: Event, range: CalendarDateRange) => void`                  |                              | Fired on every step of a range, including the one that leaves `end` null.                                                                                                                                                                                                                             |
+| `onViewChange`             | `(event: Event, view: View) => void`                                |                              | Called whenever the active calendar page changes.                                                                                                                                                                                                                                                     |
+| Element Attributes (`div`) |                                                                     |                              |                                                                                                                                                                                                                                                                                                       |
 
 <!-- /props:CalendarViewProps -->
 

package/dist/components/calendar-view/types.d.ts

@@ -63,7 +63,7 @@ export type CalendarViewProps = {
     /** The DOM reference of the calendar element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`.
      * @default null
      * @bindable
@@ -90,6 +90,10 @@ export type CalendarViewProps = {
     minDate?: Date;
     /** The latest selectable date. */
     maxDate?: Date;
+    /** The date the view treats as today: it is highlighted, and the view opens on its month when there is no `value`. Pass it when rendering on the server, built from a year, month and day on both sides, as in `new Date(2024, 2, 5)`: the same instant falls on different days in different time zones.
+     * @default new Date()
+     */
+    today?: Date;
     /** The calendar page the view opens on.
      * @default 'days'
      */
@@ -118,6 +122,7 @@ export type CalendarViewContext = FSContext<{
     weekStart: number;
     minDate?: Date;
     maxDate?: Date;
+    today: Date;
     headers?: boolean;
     blackoutDates?: Date[];
     selectionMode: CalendarSelectionMode;

package/dist/components/card/card-footer.svelte

@@ -3,7 +3,7 @@
 	import { RenderSoC } from '../../internal/index.js';
 	import { getCardContext } from './card-context.svelte.js';
 
-	let { ref = $bindable(), class: classes, action, ...attributes }: CardFooterProps = $props();
+	let { ref = $bindable(null), class: classes, action, ...attributes }: CardFooterProps = $props();
 
 	const context = getCardContext();
 
@@ -21,7 +21,7 @@
 	});
 </script>
 
-<div bind:this={ref} class={['fs-card-footer', showFloatingAction && 'with-action', classes]} {...attributes}>
+<div {...attributes} bind:this={ref} class={['fs-card-footer', showFloatingAction && 'with-action', classes]}>
 	{#if _action}
 		<RenderSoC SoC={_action} />
 	{/if}

package/dist/components/card/card-header.svelte

@@ -4,9 +4,10 @@
 	import { getCardContext } from './card-context.svelte.js';
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		class: classes,
 		title,
+		headingLevel = 4,
 		image,
 		imageAlt = '',
 		description,
@@ -31,7 +32,7 @@
 	});
 </script>
 
-<div bind:this={ref} class={['fs-card-header', showFloatingAction && 'with-action', classes]} {...attributes}>
+<div {...attributes} bind:this={ref} class={['fs-card-header', showFloatingAction && 'with-action', classes]}>
 	{#if typeof image === 'string'}
 		<img src={image} alt={imageAlt} />
 	{:else if image}
@@ -40,7 +41,7 @@
 	{#if description}
 		<div class="fs-card-header-content">
 			{#if typeof title === 'string'}
-				<h4 class="body" id={`${id}-title`}>{title}</h4>
+				<svelte:element this={`h${headingLevel}`} class="body" id={`${id}-title`}>{title}</svelte:element>
 			{:else if title}
 				<RenderSoC SoC={title} args={{ id: `${id}-title` }} />
 			{/if}
@@ -51,7 +52,7 @@
 			{/if}
 		</div>
 	{:else if typeof title === 'string'}
-		<h4 class="body" id={`${id}-title`}>{title}</h4>
+		<svelte:element this={`h${headingLevel}`} class="body" id={`${id}-title`}>{title}</svelte:element>
 	{:else if title}
 		<RenderSoC SoC={title} args={{ id: `${id}-title` }} />
 	{/if}

package/dist/components/card/card-preview.svelte

@@ -2,7 +2,14 @@
 	import type { CardPreviewProps } from './types.js';
 	import { getCardContext } from './card-context.svelte.js';
 
-	let { ref = $bindable(), logoSrc, logoAlt = '', class: classes, children, ...attrs }: CardPreviewProps = $props();
+	let {
+		ref = $bindable(null),
+		logoSrc,
+		logoAlt = '',
+		class: classes,
+		children,
+		...attributes
+	}: CardPreviewProps = $props();
 
 	const context = getCardContext();
 
@@ -15,7 +22,11 @@
 	const orientation = $derived(_state.orientation);
 </script>
 
-<div class={['fs-card-preview', showFloatingAction && 'with-action', orientation, classes]} bind:this={ref} {...attrs}>
+<div
+	{...attributes}
+	class={['fs-card-preview', showFloatingAction && 'with-action', orientation, classes]}
+	bind:this={ref}
+>
 	{@render children?.()}
 	<img src={logoSrc} alt={logoAlt} class="fs-card-preview-logo" />
 </div>

package/dist/components/card/card.svelte

@@ -11,7 +11,7 @@
 
 	let {
 		as = 'div' as Tag,
-		ref = $bindable(),
+		ref = $bindable(null),
 		orientation = 'horizontal',
 		id = FALLBACK_ID,
 		selectable = false,
@@ -22,6 +22,7 @@
 		class: classes,
 		children,
 		onclick,
+		onkeydown,
 		onSelectionChange,
 		...attributes
 	}: CardProps<Tag> = $props();
@@ -102,7 +103,7 @@
 	 * consumer named the card itself.
 	 */
 	let rootLabelledBy = $derived(
-		isRootControl && !attributes['aria-label'] && !attributes['aria-labelledby'] ? `${id}-title` : undefined
+		attributes['aria-labelledby'] ?? (isRootControl && !attributes['aria-label'] ? `${id}-title` : undefined)
 	);
 
 	/** Enter and Space toggle the selection, the same way a pointer click does. */
@@ -130,6 +131,7 @@
  -->
 <svelte:element
 	this={_card.as}
+	{...attributes}
 	class={['fs-card', { actionable, disabled, selected: _card.selected }, orientation, appearance, classes]}
 	bind:this={ref}
 	{id}
@@ -139,12 +141,10 @@
 	aria-disabled={disabled || undefined}
 	tabindex={isRootControl && !disabled ? 0 : undefined}
 	onclick={(e: MouseEvent) => invokeHandlers(e, [disabled], [context.methods.handleAction])}
-	onkeydown={isRootControl ? handleKeydown : undefined}
-	{...attributes}
+	onkeydown={(event: KeyboardEvent) => invokeHandlers(event, disabled, [isRootControl && handleKeydown, onkeydown])}
 >
 	{#if selectable && _card.showFloatingAction && as !== 'a'}
 		<Checkbox
-			wrapperAs="div"
 			aria-labelledby={`${id}-title`}
 			bind:checked={selected}
 			{disabled}

package/dist/components/card/docs/llms.md

@@ -177,13 +177,13 @@ The media shown at one edge of the card, with an optional logo overlaid on it.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:CardPreviewProps -->
 
-| Name                                                | Type             | Default | Description                                                                             |
-| --------------------------------------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------- |
-| `ref` _bindable_                                    | `HTMLDivElement` |         | The DOM reference of the preview element.                                               |
-| `logoSrc`                                           | `string`         |         | The URL of the logo overlaid on the bottom left corner of the preview.                  |
-| `logoAlt`                                           | `string`         | `''`    | The alternative text of the logo. Empty by default, which marks the logo as decorative. |
-| `children`                                          | `Snippet`        |         | The media to preview, usually an image.                                                 |
-| `HTMLAttributes<HTMLDivElement>` without `children` |                  |         |                                                                                         |
+| Name                                                | Type                           | Default | Description                                                                             |
+| --------------------------------------------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement` &#124; `null` |         | The DOM reference of the preview element.                                               |
+| `logoSrc`                                           | `string`                       |         | The URL of the logo overlaid on the bottom left corner of the preview.                  |
+| `logoAlt`                                           | `string`                       | `''`    | The alternative text of the logo. Empty by default, which marks the logo as decorative. |
+| `children`                                          | `Snippet`                      |         | The media to preview, usually an image.                                                 |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                                |         |                                                                                         |
 
 <!-- /props:CardPreviewProps -->
 
@@ -196,15 +196,16 @@ The title of the card, with an optional image, description and action.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:CardHeaderProps -->
 
-| Name                                                         | Type                                         | Default | Description                                                                                           |
-| ------------------------------------------------------------ | -------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_                                             | `HTMLDivElement`                             |         | The DOM reference of the header element.                                                              |
-| `title`                                                      | `Snippet` &#124; `Component` &#124; `string` |         | The title of the card. A snippet or a component receives the id the floating checkbox is labelled by. |
-| `image`                                                      | `Snippet` &#124; `Component` &#124; `string` |         | The image rendered before the title. A string is used as the `src` of an `<img>`.                     |
-| `imageAlt`                                                   | `string`                                     | `''`    | The alternative text of a string image. Empty by default, which marks the image as decorative.        |
-| `description`                                                | `Snippet` &#124; `Component` &#124; `string` |         | A second line of text below the title.                                                                |
-| `action`                                                     | `Snippet` &#124; `Component`                 |         | The action rendered at the end of the header. Not available on selectable cards.                      |
-| `HTMLAttributes<HTMLDivElement>` without `children`, `title` |                                              |         |                                                                                                       |
+| Name                                                         | Type                                                       | Default | Description                                                                                           |
+| ------------------------------------------------------------ | ---------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                             | `HTMLDivElement` &#124; `null`                             |         | The DOM reference of the header element.                                                              |
+| `title`                                                      | `Snippet` &#124; `Component` &#124; `string`               |         | The title of the card. A snippet or a component receives the id the floating checkbox is labelled by. |
+| `headingLevel`                                               | `1` &#124; `2` &#124; `3` &#124; `4` &#124; `5` &#124; `6` | `4`     | The level of the heading that holds a string title, to fit the headings of the page around it.        |
+| `image`                                                      | `Snippet` &#124; `Component` &#124; `string`               |         | The image rendered before the title. A string is used as the `src` of an `<img>`.                     |
+| `imageAlt`                                                   | `string`                                                   | `''`    | The alternative text of a string image. Empty by default, which marks the image as decorative.        |
+| `description`                                                | `Snippet` &#124; `Component` &#124; `string`               |         | A second line of text below the title.                                                                |
+| `action`                                                     | `Snippet` &#124; `Component`                               |         | The action rendered at the end of the header. Not available on selectable cards.                      |
+| `HTMLAttributes<HTMLDivElement>` without `children`, `title` |                                                            |         |                                                                                                       |
 
 <!-- /props:CardHeaderProps -->
 
@@ -217,10 +218,10 @@ The actions shown at the bottom of the card.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:CardFooterProps -->
 
-| Name                                                | Type                         | Default | Description                                                                |
-| --------------------------------------------------- | ---------------------------- | ------- | -------------------------------------------------------------------------- |
-| `ref` _bindable_                                    | `HTMLDivElement`             |         | The DOM reference of the footer element.                                   |
-| `action`                                            | `Snippet` &#124; `Component` |         | The actions rendered inside the footer. Not available on selectable cards. |
-| `HTMLAttributes<HTMLDivElement>` without `children` |                              |         |                                                                            |
+| Name                                                | Type                           | Default | Description                                                                |
+| --------------------------------------------------- | ------------------------------ | ------- | -------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement` &#124; `null` |         | The DOM reference of the footer element.                                   |
+| `action`                                            | `Snippet` &#124; `Component`   |         | The actions rendered inside the footer. Not available on selectable cards. |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                                |         |                                                                            |
 
 <!-- /props:CardFooterProps -->

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

@@ -9,7 +9,7 @@ export type CardProps<Tag extends CardTagTypes = 'div'> = {
      * @type CardElementDOMType[Tag]
      * @bindable
      */
-    ref?: CardElementDOMType[Tag];
+    ref?: CardElementDOMType[Tag] | null;
     /** The DOM element to render.
      * @type 'div' | 'article' | 'section' | 'a'
      * @default 'div'
@@ -75,7 +75,7 @@ export type CardPreviewProps = {
     /** The DOM reference of the preview element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The URL of the logo overlaid on the bottom left corner of the preview. */
     logoSrc: string;
     /** The alternative text of the logo. Empty by default, which marks the logo as decorative.
@@ -90,7 +90,7 @@ export type CardHeaderProps = {
     /** The DOM reference of the header element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The title of the card. A snippet or a component receives the id the floating checkbox is labelled by.
      * @type Snippet | Component | string
      */
@@ -99,6 +99,10 @@ export type CardHeaderProps = {
     }]> | Component<{
         id: string;
     }> | string;
+    /** The level of the heading that holds a string title, to fit the headings of the page around it.
+     * @default 4
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** The image rendered before the title. A string is used as the `src` of an `<img>`.
      * @type Snippet | Component | string
      */
@@ -121,7 +125,7 @@ export type CardFooterProps = {
     /** The DOM reference of the footer element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The actions rendered inside the footer. Not available on selectable cards.
      * @type Snippet | Component
      */