entasis 0.10.2 → 0.12.0

package/dist/components/Markdown/markdown.theme.js

@@ -48,7 +48,7 @@ const SIZES = {
         h6: 'text-sm',
         headingMargin: 'mt-xl mb-sm',
         blockMargin: 'my-md',
-        listIndent: 'ml-lg',
+        listIndent: 'ps-lg',
         listItemPad: 'py-0',
         smallText: 'text-xs',
         ruleMargin: 'my-xl'
@@ -62,7 +62,7 @@ const SIZES = {
         h6: 'text-sm',
         headingMargin: 'mt-layout-sm mb-md',
         blockMargin: 'my-lg',
-        listIndent: 'ml-xl',
+        listIndent: 'ps-xl',
         listItemPad: 'py-micro',
         smallText: 'text-sm',
         ruleMargin: 'my-layout-sm'
@@ -76,7 +76,7 @@ const SIZES = {
         h6: 'text-base',
         headingMargin: 'mt-layout-md mb-md',
         blockMargin: 'my-xl',
-        listIndent: 'ml-layout-sm',
+        listIndent: 'ps-layout-sm',
         listItemPad: 'py-micro',
         smallText: 'text-sm',
         ruleMargin: 'my-layout-md'
@@ -116,11 +116,13 @@ export const buildMarkdownStreamdownTheme = (size) => {
         paragraph: {
             base: `${s.blockMargin} text-neutral`
         },
+        // Markers sit outside the text box, so a wrapped line hangs under the first word instead of
+        // under the bullet. `ml-0` replaces the base theme's margin; the indent is the padding.
         ul: {
-            base: `${s.listIndent} list-inside list-disc whitespace-normal text-neutral`
+            base: `ml-0 ${s.listIndent} list-outside list-disc whitespace-normal text-neutral`
         },
         ol: {
-            base: `${s.listIndent} list-inside whitespace-normal text-neutral`
+            base: `ml-0 ${s.listIndent} list-outside list-decimal whitespace-normal text-neutral`
         },
         li: {
             base: s.listItemPad,
@@ -135,8 +137,10 @@ export const buildMarkdownStreamdownTheme = (size) => {
             pre: 'overflow-x-auto font-mono p-0 bg-surface',
             line: 'block '
         },
+        // A readable chip on any surface: the muted neutral fill, at the base theme's 0.9em with its
+        // own padding (no second padding is layered on top).
         codespan: {
-            base: `bg-surface-raised rounded-sm px-sm py-micro font-mono text-neutral ${s.smallText}`
+            base: 'bg-neutral-muted rounded-sm font-mono text-neutral'
         },
         image: {
             base: `group relative ${s.blockMargin} mx-auto w-fit block`,
@@ -155,8 +159,9 @@ export const buildMarkdownStreamdownTheme = (size) => {
             caution: '[&>[data-alert-title]]:text-danger-muted-readable border-danger/40 stroke-danger bg-danger-muted',
             important: '[&>[data-alert-title]]:text-primary-muted-readable border-primary/40 stroke-primary bg-primary-muted'
         },
+        // A table wider than its column scrolls, and an edge fade shows that it does.
         table: {
-            base: `overflow-x-auto max-w-full ${s.blockMargin} rounded-lg border border-neutral-muted`,
+            base: `scroll-fade-x overflow-x-auto max-w-full ${s.blockMargin} rounded-lg border border-neutral-muted`,
             table: 'w-full border-collapse min-w-full'
         },
         thead: {
@@ -171,11 +176,15 @@ export const buildMarkdownStreamdownTheme = (size) => {
         tr: {
             base: 'state-layer border-neutral-muted not-last:border-b transition-colors'
         },
+        // Cells read at body size and size to their content (no forced 200px columns); the base
+        // theme supplies the cell padding. Streamdown writes `align="left"` on every cell without an
+        // explicit column alignment; those cells follow the logical start so RTL tables read from the
+        // right, while centre and right columns keep their `align`.
         td: {
-            base: `px-xl py-lg ${s.smallText} text-neutral min-w-[200px] max-w-[400px] break-words`
+            base: 'text-[length:inherit] text-neutral min-w-0 max-w-[400px] break-words [&[align=left]]:text-start'
         },
         th: {
-            base: `px-xl py-lg ${s.smallText} text-neutral min-w-[200px] max-w-[400px] break-words`
+            base: 'text-[length:inherit] text-neutral font-semibold min-w-0 max-w-[400px] break-words [&[align=left]]:text-start'
         },
         sup: {
             base: s.smallText

package/dist/components/MediaVolume/MediaVolumeControl.svelte

@@ -6,7 +6,7 @@
 	import { speakerLowIcon } from '../Icons/speakerLow.js';
 	import { speakerSlashIcon } from '../Icons/speakerSlash.js';
 	import Popover from '../Popover/Popover.svelte';
-	import type { PopoverState } from '../Popover/popover.state.svelte.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
 	import { isMediaEffectivelyMuted } from './mediaVolume.js';
 	import type {
 		MediaVolumeControlButtonPayload,
@@ -94,7 +94,7 @@
 		onVolumeChange(nextVolume / 100);
 	}
 
-	function handleTriggerClick(popover: PopoverState) {
+	function handleTriggerClick(popover: PopoverApi) {
 		if (unmuteOnTrigger && isEffectivelyMuted) {
 			onToggleMuted();
 			popover.open();
@@ -115,7 +115,7 @@
 		};
 	}
 
-	function getTriggerPayload(popover: PopoverState): MediaVolumeControlTriggerPayload {
+	function getTriggerPayload(popover: PopoverApi): MediaVolumeControlTriggerPayload {
 		return {
 			...getTogglePayload(),
 			label: triggerLabel,
@@ -200,6 +200,7 @@
 		<Popover
 			open={openState.value}
 			onOpenChange={setOpen}
+			label={resolvedLabel}
 			{onAfterOpen}
 			{onAfterClose}
 			{position}

package/dist/components/Menu/Menu.svelte

@@ -4,7 +4,7 @@
 	import MenuStacked from './MenuStacked.svelte';
 	import type { MenuProps } from './menu.props.js';
 
-	let { submenuMode = 'auto', ...menuProps }: MenuProps = $props();
+	let { submenuMode = 'auto', search = $bindable(), ...menuProps }: MenuProps = $props();
 
 	const parentPopover = usePopoverContext();
 	const resolvedSubmenuMode = $derived(
@@ -13,7 +13,7 @@
 </script>
 
 {#if resolvedSubmenuMode === 'stack'}
-	<MenuStacked {...menuProps} />
+	<MenuStacked {...menuProps} bind:search />
 {:else}
-	<MenuFloating {...menuProps} />
+	<MenuFloating {...menuProps} bind:search />
 {/if}

package/dist/components/Menu/Menu.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { MenuProps } from './menu.props.js';
-declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+declare const Menu: import("svelte").Component<MenuProps, {}, "search">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/components/Menu/MenuCheckboxItem.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { createBindableValue } from '../../utils/state.svelte.js';
+	import type { Colors, Density, Sizes } from '../../types/theme.js';
+	import { checkIcon } from '../Icons/check.js';
+	import MenuOption from '../MenuOption/MenuOption.svelte';
+	import { useMenuOptionTheme } from '../MenuOption/menuOption.theme.js';
+	import Slot from '../Slot/Slot.svelte';
+	import type { MenuCheckboxItem } from './menu.props.js';
+	import type { MenuThemeProps } from './menu.theme.js';
+
+	let {
+		item,
+		density,
+		size,
+		color,
+		theme,
+		rowAttach
+	}: {
+		item: MenuCheckboxItem;
+		density: Density;
+		size: Sizes;
+		color?: Colors;
+		theme?: MenuThemeProps;
+		/** Registers the row with the menu's keyboard navigation. */
+		rowAttach?: Attachment<HTMLElement>;
+	} = $props();
+
+	const classes = $derived(useMenuOptionTheme(theme?.option));
+	// A `value` makes the row controlled: the parent decides what a press changes.
+	const checked = createBindableValue<boolean>(
+		() => item.value,
+		() => {},
+		() => item.defaultValue ?? false
+	);
+
+	// The consumer's `onclick` runs first, and `preventDefault()` there refuses the toggle.
+	const press = (event: MouseEvent) => {
+		item.onclick?.(event);
+		if (event.defaultPrevented) return;
+		const next = !checked.value;
+		checked.value = next;
+		item.onValueChange?.(next);
+	};
+
+	const rowProps = $derived.by(() => {
+		/* eslint-disable @typescript-eslint/no-unused-vars -- Remove the menu fields before forwarding the rest to the row. */
+		const {
+			type: _type,
+			key: _key,
+			value: _value,
+			defaultValue: _defaultValue,
+			onValueChange: _onValueChange,
+			onclick: _onclick,
+			closeOnClick: _closeOnClick,
+			suffix: _suffix,
+			...rest
+		} = item;
+		/* eslint-enable @typescript-eslint/no-unused-vars */
+		return rest;
+	});
+</script>
+
+{#snippet suffix()}
+	<Slot render={item.suffix} />
+	<span
+		class={classes.indicator({ checked: checked.value })}
+		data-checked={checked.value ? 'true' : 'false'}
+		aria-hidden="true"
+	>
+		{@render checkIcon()}
+	</span>
+{/snippet}
+
+<MenuOption
+	role="menuitemcheckbox"
+	{density}
+	{size}
+	{...color ? { color } : {}}
+	{...rowProps}
+	{suffix}
+	selected={checked.value}
+	closeOnClick={item.closeOnClick ?? false}
+	theme={theme?.option}
+	onclick={press}
+	{@attach rowAttach}
+/>

package/dist/components/Menu/MenuCheckboxItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Attachment } from 'svelte/attachments';
+import type { Colors, Density, Sizes } from '../../types/theme.js';
+import type { MenuCheckboxItem } from './menu.props.js';
+import type { MenuThemeProps } from './menu.theme.js';
+type $$ComponentProps = {
+    item: MenuCheckboxItem;
+    density: Density;
+    size: Sizes;
+    color?: Colors;
+    theme?: MenuThemeProps;
+    /** Registers the row with the menu's keyboard navigation. */
+    rowAttach?: Attachment<HTMLElement>;
+};
+declare const MenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;