noph-ui 0.49.0 → 0.51.0

package/dist/app-bar/AppBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AppBarProps } from './types.js'
+	import type { AppBarProps } from './types.ts'
 
 	let {
 		variant = 'small',
@@ -15,9 +15,9 @@
 		...attributes
 	}: AppBarProps = $props()
 
-	const twoLine = $derived(variant === 'medium' || variant === 'large')
-	const isSearch = $derived(variant === 'search')
-	const collapses = $derived(collapsible && twoLine)
+	let twoLine = $derived(variant === 'medium' || variant === 'large')
+	let isSearch = $derived(variant === 'search')
+	let collapses = $derived(collapsible && twoLine)
 </script>
 
 {#snippet titles(inline: boolean)}
@@ -36,7 +36,7 @@
 		'np-app-bar',
 		`np-app-bar-${variant}`,
 		collapses && 'np-app-bar-collapsible',
-		collapses && scroller === 'nearest' && 'np-app-bar-scroller-nearest',
+		scroller === 'nearest' && 'np-app-bar-scroller-nearest',
 		attributes.class,
 	]}
 >
@@ -75,6 +75,11 @@
 		background-color: var(--np-app-bar-container-color, var(--np-color-surface));
 		color: var(--np-color-on-surface);
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
+		--_timeline: scroll(root block);
+		--_fill-range: 0 var(--np-app-bar-fill-distance, 0.5rem);
+	}
+	.np-app-bar-scroller-nearest {
+		--_timeline: scroll(nearest block);
 	}
 
 	.np-app-bar:has(:global(.np-search-expanded)) {
@@ -110,21 +115,18 @@
 	}
 
 	.np-app-bar-subtitle {
-		font-size: 0.875rem;
-		line-height: 1.25rem;
+		font-size: var(--_subtitle-size);
+		line-height: var(--_subtitle-line-height);
 		font-weight: 500;
 		color: var(--np-app-bar-subtitle-color, var(--np-color-on-surface-variant));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	.np-app-bar-titles-inline .np-app-bar-headline {
-		font-size: 1.375rem;
-	}
 
 	.np-app-bar-headline {
 		font-size: var(--_headline-size);
-		line-height: 1.2;
+		line-height: var(--_headline-line-height);
 		font-weight: 400;
 		color: var(--np-app-bar-headline-color, var(--np-color-on-surface));
 		overflow: hidden;
@@ -132,10 +134,22 @@
 		white-space: nowrap;
 		min-width: 0;
 	}
+	.np-app-bar-second-row .np-app-bar-headline {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		white-space: normal;
+		overflow-wrap: anywhere;
+	}
 
 	.np-app-bar-small,
-	.np-app-bar-search {
+	.np-app-bar-search,
+	.np-app-bar-inline {
 		--_headline-size: 1.375rem;
+		--_headline-line-height: 1.75rem;
+		--_subtitle-size: 0.75rem;
+		--_subtitle-line-height: 1rem;
 	}
 
 	.np-app-bar-search-field {
@@ -145,17 +159,26 @@
 		align-items: center;
 		padding-inline: 0.25rem;
 	}
+	.np-app-bar-search-field :global(.np-search:not(.np-search-expanded) .np-search-bar) {
+		background-color: var(--np-search-container-color, var(--np-color-surface-container));
+	}
 	.np-app-bar-small .np-app-bar-titles {
 		padding-inline-start: 0.75rem;
 		flex: 1;
 	}
 
 	.np-app-bar-medium {
-		--_headline-size: 1.5rem;
+		--_headline-size: 1.75rem;
+		--_headline-line-height: 2.25rem;
+		--_subtitle-size: 0.875rem;
+		--_subtitle-line-height: 1.25rem;
 		--_second-row-height: 3rem;
 	}
 	.np-app-bar-large {
-		--_headline-size: 1.75rem;
+		--_headline-size: 2.25rem;
+		--_headline-line-height: 2.75rem;
+		--_subtitle-size: 1rem;
+		--_subtitle-line-height: 1.5rem;
 		--_second-row-height: 5.5rem;
 	}
 
@@ -170,18 +193,15 @@
 		padding-block-end: 1rem;
 		overflow: hidden;
 	}
+	.np-app-bar-medium .np-app-bar-second-row {
+		padding-block-end: 0.75rem;
+	}
 
 	.np-app-bar-inline {
-		font-size: 1.375rem;
-		line-height: 1.2;
-		font-weight: 400;
-		color: var(--np-app-bar-headline-color, var(--np-color-on-surface));
 		padding-inline-start: 0.75rem;
 		flex: 1;
 		min-width: 0;
 		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 		opacity: 0;
 	}
 
@@ -189,23 +209,45 @@
 		:global(html:has(.np-app-bar-collapsible)) {
 			overflow-anchor: none;
 		}
-		:global(:has(.np-app-bar-scroller-nearest)) {
+		:global(:has(.np-app-bar-collapsible.np-app-bar-scroller-nearest)) {
 			overflow-anchor: none;
 		}
 
+		.np-app-bar {
+			animation: np-app-bar-fill linear both;
+			animation-timeline: var(--_timeline);
+			animation-range: var(--_fill-range);
+		}
+		.np-app-bar-search-field :global(.np-search:not(.np-search-expanded) .np-search-bar) {
+			animation: np-app-bar-search-fill linear both;
+			animation-timeline: var(--_timeline);
+			animation-range: var(--_fill-range);
+		}
+
 		.np-app-bar-collapsible .np-app-bar-second-row {
 			animation: np-app-bar-collapse linear both;
-			animation-timeline: scroll(root block);
+			animation-timeline: var(--_timeline);
 			animation-range: 0 var(--_second-row-height);
 		}
 		.np-app-bar-collapsible .np-app-bar-inline {
 			animation: np-app-bar-reveal linear both;
-			animation-timeline: scroll(root block);
+			animation-timeline: var(--_timeline);
 			animation-range: 0 var(--_second-row-height);
 		}
-		.np-app-bar-scroller-nearest .np-app-bar-second-row,
-		.np-app-bar-scroller-nearest .np-app-bar-inline {
-			animation-timeline: scroll(nearest block);
+	}
+
+	@keyframes np-app-bar-fill {
+		to {
+			background-color: var(
+				--np-app-bar-scrolled-container-color,
+				var(--np-color-surface-container)
+			);
+		}
+	}
+
+	@keyframes np-app-bar-search-fill {
+		to {
+			background-color: var(--np-search-container-color, var(--np-color-surface-container-highest));
 		}
 	}
 

package/dist/autocomplete/AutoComplete.svelte

@@ -3,7 +3,7 @@
 	import Menu from '../menu/Menu.svelte'
 	import VirtualList from '../select/VirtualList.svelte'
 	import TextField from '../text-field/TextField.svelte'
-	import type { AutoCompleteOption, AutoCompleteProps } from './types.js'
+	import type { AutoCompleteOption, AutoCompleteProps } from './types.ts'
 
 	let {
 		options = [],
@@ -28,8 +28,8 @@
 	}: AutoCompleteProps = $props()
 
 	const uid = $props.id()
-	const query = $derived(value ? `${value}`.toLocaleLowerCase() : '')
-	const filterFn = $derived(
+	let query = $derived(value ? `${value}`.toLocaleLowerCase() : '')
+	let filterFn = $derived(
 		optionsFilter ||
 			((option: AutoCompleteOption) => !query || option.label.toLocaleLowerCase().includes(query)),
 	)
@@ -121,7 +121,6 @@
 			setActive(index)
 			selectOption(option)
 		}}
-		variant="button"
 		start={option.start}
 		end={option.end}
 		supportingText={option.supportingText}

package/dist/autocomplete/types.d.ts

@@ -1,8 +1,8 @@
-import type { ItemProps } from '../list/types.js';
+import type { BaseOption } from '../shared/types.js';
 import type { TextFieldProps } from '../types.js';
-export interface AutoCompleteOption extends Pick<ItemProps, 'start' | 'end' | 'supportingText' | 'class' | 'style'> {
+export interface AutoCompleteOption extends BaseOption {
+    /** Falls back to `label`. */
     value?: string | number;
-    label: string;
 }
 export interface AutoCompleteProps extends Omit<TextFieldProps, 'clientWidth' | 'clientHeight'> {
     options: AutoCompleteOption[];

package/dist/badge/Badge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { BadgeProps } from './types.js'
+	import type { BadgeProps } from './types.ts'
 
 	let {
 		label,

package/dist/button/Button.svelte

@@ -5,7 +5,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { ButtonProps } from './types.js'
+	import type { ButtonProps } from './types.ts'
 
 	let {
 		variant = 'outlined',
@@ -26,9 +26,9 @@
 
 	const uid = $props.id()
 
-	const isLink = $derived(attributes.href != null && !disabled && !loading)
+	let isLink = $derived(attributes.href != null && !disabled && !loading)
 
-	const tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
+	let tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
 
 	const morph = pressMorph()
 
@@ -149,6 +149,9 @@
 		opacity: 0;
 	}
 	.np-button {
+		/* State layers take the content color of each variant and state. */
+		--np-ripple-hover-color: currentColor;
+		--np-ripple-pressed-color: currentColor;
 		box-sizing: border-box;
 		font: inherit;
 		background-color: transparent;
@@ -279,14 +282,9 @@
 		}
 	}
 	.text {
-		--np-ripple-hover-color: var(--np-text-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-text-button-label-text-color, var(--np-color-primary));
 		color: var(--np-text-button-label-text-color, var(--np-color-primary));
 	}
 	.filled {
-		--np-ripple-hover-opacity: 0.12;
-		--np-ripple-hover-color: var(--np-color-surface);
-		--np-ripple-pressed-color: var(--np-color-surface);
 		color: var(--np-filled-button-label-text-color, var(--np-color-on-primary));
 		background-color: var(--np-filled-button-container-color, var(--np-color-primary));
 	}
@@ -312,8 +310,6 @@
 	}
 
 	.tonal {
-		--np-ripple-hover-color: var(--np-tonal-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-tonal-button-label-text-color, var(--np-color-primary));
 		color: var(--np-tonal-button-label-text-color, var(--np-color-on-secondary-container));
 		background-color: var(--np-tonal-button-container-color, var(--np-color-secondary-container));
 	}
@@ -336,8 +332,6 @@
 	}
 
 	.elevated {
-		--np-ripple-hover-color: var(--np-elevated-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-elevated-button-label-text-color, var(--np-color-primary));
 		color: var(--np-elevated-button-label-text-color, var(--np-color-primary));
 		background-color: var(
 			--np-elevated-button-container-color,
@@ -364,9 +358,7 @@
 			--np-outlined-button-outline-color,
 			var(--np-color-outline-variant)
 		);
-		--np-ripple-hover-color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
-		color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
+		color: var(--np-outlined-button-label-text-color, var(--np-color-on-surface-variant));
 	}
 
 	.outlined:not(.selected)::after,

package/dist/button/ButtonGroup.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { reducedMotion } from '../media.js'
 	import { onMount } from 'svelte'
-	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.js'
-	import type { ButtonGroupProps } from './types.js'
+	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.ts'
+	import type { ButtonGroupProps } from './types.ts'
 
 	let {
 		variant = 'standard',

package/dist/button/IconButton.svelte

@@ -5,7 +5,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { IconButtonProps } from './types.js'
+	import type { IconButtonProps } from './types.ts'
 
 	let {
 		variant = 'text',
@@ -26,8 +26,8 @@
 
 	const uid = $props.id()
 
-	const isLink = $derived(attributes.href != null && !disabled && !loading)
-	const tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
+	let isLink = $derived(attributes.href != null && !disabled && !loading)
+	let tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
 
 	const morph = pressMorph()
 
@@ -123,6 +123,9 @@
 
 <style>
 	.np-icon-button {
+		/* State layers take the content color of each variant and state. */
+		--np-ripple-hover-color: currentColor;
+		--np-ripple-pressed-color: currentColor;
 		font: inherit;
 		box-sizing: border-box;
 		-webkit-tap-highlight-color: transparent;
@@ -281,30 +284,16 @@
 		}
 	}
 	.text {
-		--np-ripple-hover-color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
-		--np-ripple-pressed-color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
 		color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
 	}
 	.text.selected {
-		--np-ripple-hover-color: var(--np-color-primary);
-		--np-ripple-pressed-color: var(--np-color-primary);
 		color: var(--np-color-primary);
 	}
 	.filled {
-		--np-ripple-hover-color: var(--np-filled-icon-button-icon-color, var(--np-color-on-primary));
-		--np-ripple-pressed-color: var(--np-filled-icon-button-icon-color, var(--np-color-on-primary));
 		color: var(--np-filled-icon-button-icon-color, var(--np-color-on-primary));
 		background-color: var(--np-filled-icon-button-container-color, var(--np-color-primary));
 	}
 	.filled.toggle {
-		--np-ripple-hover-color: var(
-			--np-filled-icon-button-unselected-icon-color,
-			var(--np-color-on-surface-variant)
-		);
-		--np-ripple-pressed-color: var(
-			--np-filled-icon-button-unselected-icon-color,
-			var(--np-color-on-surface-variant)
-		);
 		color: var(--np-filled-icon-button-unselected-icon-color, var(--np-color-on-surface-variant));
 		background-color: var(
 			--np-filled-icon-button-unselected-container-color,
@@ -312,14 +301,6 @@
 		);
 	}
 	.filled.selected {
-		--np-ripple-hover-color: var(
-			--np-filled-icon-button-selected-icon-color,
-			var(--np-color-on-primary)
-		);
-		--np-ripple-pressed-color: var(
-			--np-filled-icon-button-selected-icon-color,
-			var(--np-color-on-primary)
-		);
 		color: var(--np-filled-icon-button-selected-icon-color, var(--np-color-on-primary));
 		background-color: var(
 			--np-filled-icon-button-selected-container-color,
@@ -328,14 +309,6 @@
 	}
 
 	.tonal {
-		--np-ripple-hover-color: var(
-			--np-tonal-icon-button-icon-color,
-			var(--np-color-on-secondary-container)
-		);
-		--np-ripple-pressed-color: var(
-			--np-tonal-icon-button-icon-color,
-			var(--np-color-on-secondary-container)
-		);
 		color: var(--np-tonal-icon-button-icon-color, var(--np-color-on-secondary-container));
 		background-color: var(
 			--np-tonal-icon-button-container-color,
@@ -343,14 +316,10 @@
 		);
 	}
 	.tonal.toggle {
-		--np-ripple-hover-color: var(--np-color-on-secondary-container);
-		--np-ripple-pressed-color: var(--np-color-on-secondary-container);
 		color: var(--np-color-on-secondary-container);
 		background-color: var(--np-color-secondary-container);
 	}
 	.tonal.selected {
-		--np-ripple-hover-color: var(--np-color-on-secondary);
-		--np-ripple-pressed-color: var(--np-color-on-secondary);
 		color: var(--np-color-on-secondary);
 		background-color: var(--np-color-secondary);
 	}
@@ -360,8 +329,6 @@
 			--np-outlined-icon-button-outline-color,
 			var(--np-color-outline-variant)
 		);
-		--np-ripple-hover-color: var(--np-color-on-surface-variant);
-		--np-ripple-pressed-color: var(--np-color-on-surface-variant);
 		color: var(--np-color-on-surface-variant);
 	}
 
@@ -376,8 +343,6 @@
 	}
 
 	.outlined.selected {
-		--np-ripple-hover-color: var(--np-color-on-surface-variant);
-		--np-ripple-pressed-color: var(--np-color-on-surface-variant);
 		color: var(--np-color-inverse-on-surface);
 		background-color: var(--np-color-inverse-surface);
 	}

package/dist/button/SegmentedButton.svelte

@@ -2,7 +2,7 @@
 	import '../internal/focus-ring.css'
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { SegmentedButtonProps } from './types.js'
+	import type { SegmentedButtonProps } from './types.ts'
 
 	let {
 		name,
@@ -24,7 +24,8 @@
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
 >
 	{#each options as option, i (i)}
-		{@const optionLabel = option.label ?? `${name}-${i}`}
+		{let optionLabel = $derived(option.label ?? `${name}-${i}`)}
+		{let optionValue = $derived(option.value ?? optionLabel)}
 		<label class={['np-segmented-button', option.icon && 'width-icon']}>
 			<div class="check-icon-wrapper">
 				<div class="check-icon">
@@ -56,7 +57,7 @@
 						bind:group
 						{name}
 						aria-label={optionLabel}
-						value={optionLabel}
+						value={optionValue}
 						disabled={option.disabled}
 						checked={option.selected}
 					/>
@@ -67,7 +68,7 @@
 						bind:group
 						{name}
 						aria-label={optionLabel}
-						value={optionLabel}
+						value={optionValue}
 						disabled={option.disabled}
 						checked={option.selected}
 					/>
@@ -78,7 +79,7 @@
 					onclick={option.onclick}
 					{name}
 					aria-label={optionLabel}
-					value={optionLabel}
+					value={optionValue}
 					disabled={option.disabled}
 					checked={option.selected}
 				/>
@@ -89,8 +90,9 @@
 
 <style>
 	.np-segmented-buttons {
-		--np-ripple-hover-color: var(--np-color-primary);
-		--np-ripple-pressed-color: var(--np-color-primary);
+		/* State layers take the content color of each variant and state. */
+		--np-ripple-hover-color: currentColor;
+		--np-ripple-pressed-color: currentColor;
 		display: grid;
 		color: var(--np-color-on-surface);
 		border: 1px solid var(--np-color-outline);
@@ -99,8 +101,6 @@
 	}
 
 	.np-segmented-buttons.np-error {
-		--np-ripple-hover-color: var(--np-color-error);
-		--np-ripple-pressed-color: var(--np-color-error);
 		border-color: var(--np-color-error);
 		color: var(--np-color-error);
 	}

package/dist/button/SplitButton.svelte

@@ -3,7 +3,7 @@
 	import Menu from '../menu/Menu.svelte'
 	import Button from './Button.svelte'
 	import ButtonGroup from './ButtonGroup.svelte'
-	import type { SplitButtonProps } from './types.js'
+	import type { SplitButtonProps } from './types.ts'
 
 	let {
 		label = '',
@@ -49,7 +49,7 @@
 		aria-label={menuLabel}
 		start={caret}
 	/>
-	<Menu id={menuId} anchor={trigger} bind:open coverAnchor={false}>
+	<Menu id={menuId} anchor={trigger} bind:open coverAnchor={false} style="--np-menu-margin: 4px">
 		{@render menu?.(menuId)}
 	</Menu>
 </ButtonGroup>

package/dist/button/types.d.ts

@@ -1,3 +1,4 @@
+import type { Issue } from '../shared/types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 export type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
@@ -40,20 +41,21 @@ export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     onclick?: MouseEventHandler<ButtonElement>;
     element?: HTMLElement;
 }
+export interface SegmentedButtonOption {
+    /** Stored in `group` and submitted with the form. Falls back to `label`. */
+    value?: string | number;
+    label?: string;
+    labelIcon?: Snippet;
+    selected?: boolean;
+    disabled?: boolean | null;
+    icon?: Snippet;
+    onclick?: (event: Event) => void;
+}
 export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     name: string;
     multiSelect?: boolean;
-    options: {
-        label?: string;
-        labelIcon?: Snippet;
-        selected?: boolean;
-        disabled?: boolean;
-        icon?: Snippet;
-        onclick?: (event: Event) => void;
-    }[];
+    options: SegmentedButtonOption[];
     group?: string | number | (string | number)[] | null;
     element?: HTMLElement;
-    issues?: {
-        message: string;
-    }[];
+    issues?: Issue[];
 }

package/dist/card/Card.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
+	import { buttonType, elementTag } from '../internal/elementTag.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { CardProps } from './types.js'
+	import type { CardProps } from './types.ts'
 
 	let {
 		image,
+		imageAlt,
 		variant = 'outlined',
 		disabled = false,
 		element = $bindable(),
@@ -16,11 +18,18 @@
 		type,
 		...attributes
 	}: CardProps = $props()
+
+	let tag = $derived(elementTag(attributes, type))
 </script>
 
 {#snippet content()}
 	{#if image}
-		<div class="np-card-image" style="background-image: url({image})"></div>
+		<div
+			class="np-card-image"
+			style="background-image: url({image})"
+			role={imageAlt ? 'img' : undefined}
+			aria-label={imageAlt || undefined}
+		></div>
 	{/if}
 	<div class="np-card-content">
 		{#if headline}
@@ -45,12 +54,12 @@
 			<div class="np-card-action">{@render action()}</div>
 		{/if}
 	</div>
-	{#if !disabled && type !== 'text'}
+	{#if !disabled && tag !== 'div'}
 		<Ripple />
 	{/if}
 {/snippet}
 
-{#if type === 'text'}
+{#if tag === 'div'}
 	<div
 		{...attributes}
 		bind:this={element}
@@ -64,11 +73,11 @@
 	>
 		{@render content()}
 	</div>
-{:else if type === 'button'}
+{:else if tag === 'button'}
 	<button
 		{...attributes}
 		aria-disabled={disabled}
-		type="button"
+		type={buttonType(type)}
 		bind:this={element}
 		{disabled}
 		class={[
@@ -80,7 +89,7 @@
 	>
 		{@render content()}
 	</button>
-{:else if type === 'link'}
+{:else}
 	<a
 		{...attributes}
 		bind:this={element}

package/dist/card/types.d.ts

@@ -1,14 +1,14 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ElementKindProps } from '../internal/elementTag.js';
 export type CardElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
-export interface CardProps extends HTMLAttributes<CardElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+export interface CardProps extends ElementKindProps<CardElement> {
     variant?: 'elevated' | 'filled' | 'outlined';
-    disabled?: boolean | null;
     image?: string | null;
+    /** Describes `image` for assistive technology. Leave it out for a decorative image. */
+    imageAlt?: string;
     element?: HTMLElement;
     headline?: string | null;
     subhead?: string | null;
     supportingText?: string | null;
     action?: Snippet<[]>;
-    type: 'text' | 'button' | 'link';
 }