contain-css-svelte 1.0.1 → 1.0.2

package/dist/Card.svelte

@@ -150,6 +150,8 @@ let hasFooter = $derived(Boolean(footer));
   text-indent: var(--card-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--card-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--card-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  font-size: var(--card-first-paragraph-first-paragraph-font-size, var(--container-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--card-font-size, var(--container-font-size, var(--font-size, inherit)))))))));
+  line-height: var(--card-first-paragraph-first-paragraph-line-height, var(--container-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--card-line-height, var(--container-line-height, var(--line-height, inherit)))))))));
   margin-block-start: var(--card-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 

package/dist/controls/Select.svelte

@@ -190,6 +190,7 @@ button:focus-visible {
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
   --fg: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
   --bg: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, unset))))));
+  --menu-item-justify: var(--select-menu-item-justify, flex-start);
 }
 
 .dropdown-menu :global(.dropdown-menu) > :global(button) {

package/dist/controls/TabItem.svelte

@@ -38,6 +38,20 @@ div > :global(div > button) {
   border-bottom: var(--tab-border-bottom, var(--button-border-bottom, var(--control-border-bottom, var(--secondary-border-bottom, var(--border-bottom, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
   border-left: var(--tab-border-left, var(--button-border-left, var(--control-border-left, var(--secondary-border-left, var(--border-left, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
   border-radius: var(--tab-border-radius, var(--button-border-radius, var(--control-border-radius, var(--secondary-border-radius, var(--border-radius, none)))));
+  font-family: var(--tab-font-family, var(--button-font-family, var(--control-font-family, var(--secondary-font-family, var(--font-family, unset)))));
+  text-transform: var(--tab-text-transform, var(--button-text-transform, var(--control-text-transform, var(--secondary-text-transform, var(--text-transform, unset)))));
+  text-decoration: var(--tab-text-decoration, var(--button-text-decoration, var(--control-text-decoration, var(--secondary-text-decoration, var(--text-decoration, unset)))));
+  font-size: var(--tab-font-size, var(--button-font-size, var(--control-font-size, var(--secondary-font-size, var(--font-size, unset)))));
+  font-weight: var(--tab-font-weight, var(--button-font-weight, var(--control-font-weight, var(--secondary-font-weight, var(--font-weight, unset)))));
+  line-height: var(--tab-line-height, var(--button-line-height, var(--control-line-height, var(--secondary-line-height, var(--line-height, unset)))));
+  letter-spacing: var(--tab-letter-spacing, var(--button-letter-spacing, var(--control-letter-spacing, var(--secondary-letter-spacing, var(--letter-spacing, unset)))));
+  margin-top: var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset)))));
+  margin-top: var(--tab-margin-top, var(--button-margin-top, var(--control-margin-top, var(--secondary-margin-top, var(--margin-top, unset)))));
+  margin-bottom: var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset)))));
+  margin-bottom: var(--tab-margin-bottom, var(--button-margin-bottom, var(--control-margin-bottom, var(--secondary-margin-bottom, var(--margin-bottom, unset)))));
+  text-indent: var(--tab-indent, var(--button-indent, var(--control-indent, var(--secondary-indent, var(--indent, unset)))));
+  font-variant: var(--tab-font-variant, var(--button-font-variant, var(--control-font-variant, var(--secondary-font-variant, var(--font-variant, unset)))));
+  text-align: var(--tab-text-align, var(--button-text-align, var(--control-text-align, var(--secondary-text-align, var(--text-align, unset)))));
 }
 
 div > :global(button):focus-visible,
@@ -61,4 +75,18 @@ div.active > :global(div > button) {
   --link-fg: var(--tab-active-link-fg, var(--primary-link-fg, var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))))));
   --fg: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
   --bg: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
+  font-family: var(--tab-active-font-family, var(--tab-font-family, var(--button-font-family, var(--control-font-family, var(--secondary-font-family, var(--font-family, unset))))));
+  text-transform: var(--tab-active-text-transform, var(--tab-text-transform, var(--button-text-transform, var(--control-text-transform, var(--secondary-text-transform, var(--text-transform, unset))))));
+  text-decoration: var(--tab-active-text-decoration, var(--tab-text-decoration, var(--button-text-decoration, var(--control-text-decoration, var(--secondary-text-decoration, var(--text-decoration, unset))))));
+  font-size: var(--tab-active-font-size, var(--tab-font-size, var(--button-font-size, var(--control-font-size, var(--secondary-font-size, var(--font-size, unset))))));
+  font-weight: var(--tab-active-font-weight, var(--tab-font-weight, var(--button-font-weight, var(--control-font-weight, var(--secondary-font-weight, var(--font-weight, unset))))));
+  line-height: var(--tab-active-line-height, var(--tab-line-height, var(--button-line-height, var(--control-line-height, var(--secondary-line-height, var(--line-height, unset))))));
+  letter-spacing: var(--tab-active-letter-spacing, var(--tab-letter-spacing, var(--button-letter-spacing, var(--control-letter-spacing, var(--secondary-letter-spacing, var(--letter-spacing, unset))))));
+  margin-top: var(--tab-active-margin, var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset))))));
+  margin-top: var(--tab-active-margin-top, var(--tab-margin-top, var(--button-margin-top, var(--control-margin-top, var(--secondary-margin-top, var(--margin-top, unset))))));
+  margin-bottom: var(--tab-active-margin, var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset))))));
+  margin-bottom: var(--tab-active-margin-bottom, var(--tab-margin-bottom, var(--button-margin-bottom, var(--control-margin-bottom, var(--secondary-margin-bottom, var(--margin-bottom, unset))))));
+  text-indent: var(--tab-active-indent, var(--tab-indent, var(--button-indent, var(--control-indent, var(--secondary-indent, var(--indent, unset))))));
+  font-variant: var(--tab-active-font-variant, var(--tab-font-variant, var(--button-font-variant, var(--control-font-variant, var(--secondary-font-variant, var(--font-variant, unset))))));
+  text-align: var(--tab-active-text-align, var(--tab-text-align, var(--button-text-align, var(--control-text-align, var(--secondary-text-align, var(--text-align, unset))))));
 }</style>

package/dist/dropdowns/DropdownMenu.svelte

@@ -316,7 +316,7 @@ button {
 }
 
 .dropdown-container {
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 .dropdown-container:popover-open {
@@ -324,7 +324,8 @@ button {
   pointer-events: all;
   position: fixed;
   inset: unset;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .dropdown-content {

package/dist/index.d.ts

@@ -14,6 +14,8 @@ import Bar from "./layout/Bar.svelte";
 import Column from "./layout/Column.svelte";
 import Columns from "./layout/Columns.svelte";
 import Container from "./layout/Container.svelte";
+import DataList from "./layout/DataList.svelte";
+import DataListItem from "./layout/DataListItem.svelte";
 import Fieldset from "./layout/Fieldset.svelte";
 import Form from "./layout/Form.svelte";
 import FormItem from "./layout/FormItem.svelte";
@@ -44,6 +46,7 @@ export { Button, ButtonLink, Checkbox, Input, Slider, RadioButton, MiniButton, S
 export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
 export { TextLayout, Code, Accordion };
 export { Card, Tile, Form, FormItem, FormProvider, Fieldset };
+export { DataList, DataListItem };
 export { Row, Column, Columns, SplitPane, Sidebar };
 export { Dialog };
 export { Progress, Tooltip };

package/dist/index.js

@@ -15,6 +15,8 @@ import Bar from "./layout/Bar.svelte";
 import Column from "./layout/Column.svelte";
 import Columns from "./layout/Columns.svelte";
 import Container from "./layout/Container.svelte";
+import DataList from "./layout/DataList.svelte";
+import DataListItem from "./layout/DataListItem.svelte";
 import Fieldset from "./layout/Fieldset.svelte";
 import Form from "./layout/Form.svelte";
 import FormItem from "./layout/FormItem.svelte";
@@ -44,6 +46,7 @@ export { Button, ButtonLink, Checkbox, Input, Slider, RadioButton, MiniButton, S
 export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
 export { TextLayout, Code, Accordion };
 export { Card, Tile, Form, FormItem, FormProvider, Fieldset };
+export { DataList, DataListItem };
 export { Row, Column, Columns, SplitPane, Sidebar };
 export { Dialog };
 export { Progress, Tooltip };

package/dist/layout/Container.svelte

@@ -136,6 +136,8 @@ section :global(h6 + p) {
   text-indent: var(--container-first-paragraph-indent, var(--block-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--container-first-paragraph-font-variant, var(--block-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--container-first-paragraph-text-align, var(--block-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  font-size: var(--container-first-paragraph-first-paragraph-font-size, var(--block-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--container-paragraph-font-size, var(--block-paragraph-font-size, var(--paragraph-font-size, var(--container-font-size, var(--block-font-size, var(--font-size, inherit)))))))));
+  line-height: var(--container-first-paragraph-first-paragraph-line-height, var(--block-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--container-paragraph-line-height, var(--block-paragraph-line-height, var(--paragraph-line-height, var(--container-line-height, var(--block-line-height, var(--line-height, inherit)))))))));
   margin-block-start: var(--container-first-paragraph-margin-top, var(--block-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 

package/dist/layout/DataList.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import { injectVars } from "../util";
+let { children, stackable = false, ...restProps } = $props();
+const style = $derived(injectVars(restProps, "data-list", [
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "marginInline",
+    "marginLeft",
+    "marginRight",
+    "minWidth",
+    "maxWidth",
+    "height",
+    "gap",
+    "itemPadding",
+    "itemMinHeight",
+    "iconWidth",
+    "iconSize",
+    "iconBorderRadius",
+    "actionWidth",
+    "actionFlexDirection",
+    "actionWrap",
+    "actionCompactFlexDirection",
+    "actionCompactWrap",
+    "actionGap",
+    "itemBorder",
+    "selectedBg",
+    "selectedFg",
+    "selectedOutline",
+    "selectedBorder",
+    "selectionColor",
+]));
+</script>
+
+<ul class="data-list" class:stackable {style} {...restProps}>
+  {@render children?.()}
+</ul>
+
+<style>/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
+.data-list {
+  background: var(--data-list-bg, var(--container-bg, var(--bg, unset)));
+  color: var(--data-list-fg, var(--container-fg, var(--fg, unset)));
+  --link-bg: var(--data-list-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
+  --link-fg: var(--data-list-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--data-list-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--data-list-bg, var(--container-bg, var(--bg, unset)));
+  box-sizing: border-box;
+  border: var(--data-list-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
+  /* border-top: fn.var-with-fallbacks(--border-top,
+      append($prefixes,          
+        fn.var-with-fallbacks(--border,$prefixes...)
+      )...) */
+  /* border-right: fn.var-with-fallbacks(--border-right,
+      append($prefixes,          
+        fn.var-with-fallbacks(--border,$prefixes...)
+      )...) */
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
+      append($prefixes,          
+        fn.var-with-fallbacks(--border,$prefixes...)
+      )...) */
+  /* border-left: fn.var-with-fallbacks(--border-left,
+      append($prefixes,          
+        fn.var-with-fallbacks(--border,$prefixes...)
+      )...) */
+  padding: var(--data-list-padding, var(--container-padding, var(--padding, 4px)));
+  border-radius: var(--data-list-square-radius, var(--container-square-radius, var(--square-radius, 0)));
+  box-shadow: var(--data-list-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) var(--data-list-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) var(--data-list-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--data-list-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
+  list-style: none;
+  padding: 0;
+  margin: var(--data-list-margin, var(--margin, 0));
+  margin-left: var(--data-list-margin-left, var(--margin-left, var(--data-list-margin-inline, auto)));
+  margin-right: var(--data-list-margin-right, var(--margin-right, var(--data-list-margin-inline, auto)));
+  width: var(--data-list-width, var(--width, 100%));
+  min-width: var(--data-list-min-width, var(--min-width, 0));
+  max-width: var(--data-list-max-width, var(--max-width, none));
+  overflow: hidden;
+  container-type: inline-size;
+}
+
+.data-list :global(.data-list-item:last-child) {
+  border-bottom: none;
+}</style>

package/dist/layout/DataList.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { BaseStyleProps } from "../types";
+type Props = {
+    children?: Snippet;
+    stackable?: boolean;
+    marginInline?: string | null;
+    marginLeft?: string | null;
+    marginRight?: string | null;
+    minWidth?: string | null;
+    maxWidth?: string | null;
+    gap?: string | null;
+    itemPadding?: string | null;
+    itemMinHeight?: string | null;
+    iconWidth?: string | null;
+    iconSize?: string | null;
+    iconBorderRadius?: string | null;
+    actionWidth?: string | null;
+    actionFlexDirection?: string | null;
+    actionWrap?: string | null;
+    actionCompactFlexDirection?: string | null;
+    actionCompactWrap?: string | null;
+    actionGap?: string | null;
+    itemBorder?: string | null;
+    selectedBg?: string | null;
+    selectedFg?: string | null;
+    selectedOutline?: string | null;
+    selectedBorder?: string | null;
+    selectionColor?: string | null;
+} & BaseStyleProps & HTMLAttributes<HTMLUListElement>;
+declare const DataList: import("svelte").Component<Props, {}, "">;
+type DataList = ReturnType<typeof DataList>;
+export default DataList;

package/dist/layout/DataListItem.svelte

@@ -0,0 +1,456 @@
+<script lang="ts">import Checkbox from "../controls/Checkbox.svelte";
+import { injectVars } from "../util";
+let { start, end, children, interactive = false, selectable = false, checked = $bindable(false), tabindex = undefined, onclick = null, onkeydown = null, ...restProps } = $props();
+const style = $derived(injectVars(restProps, "data-list-item", [
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
+    "gap",
+    "rowGap",
+    "mainGap",
+    "itemPadding",
+    "itemMinHeight",
+    "iconWidth",
+    "iconSize",
+    "iconBorderRadius",
+    "actionWidth",
+    "actionFlexDirection",
+    "actionWrap",
+    "actionCompactFlexDirection",
+    "actionCompactWrap",
+    "actionGap",
+    "actionAlign",
+    "actionJustify",
+    "actionMobileJustify",
+    "itemBorder",
+    "selectedBg",
+    "selectedFg",
+    "selectedOutline",
+    "selectedBorder",
+    "selectionColor",
+]));
+const hasStart = $derived(Boolean(start));
+const hasCustomEnd = $derived(Boolean(end));
+const hasDefaultSelector = $derived(selectable && !hasCustomEnd);
+const hasEnd = $derived(hasCustomEnd || hasDefaultSelector);
+const isInteractive = $derived(interactive || selectable);
+const rowTabIndex = $derived(tabindex ?? (isInteractive ? 0 : undefined));
+const rowRole = $derived(selectable ? "checkbox" : interactive ? "button" : undefined);
+function isNestedControlTarget(target, currentTarget) {
+    if (!(target instanceof Element))
+        return false;
+    const nearestControl = target.closest("button, a, input, select, textarea, summary, [role='button'], [role='link'], [role='checkbox'], [role='menuitem']");
+    return Boolean(nearestControl && nearestControl !== currentTarget);
+}
+function handleClick(event) {
+    const bubblingFromNestedControl = event.target !== event.currentTarget &&
+        isNestedControlTarget(event.target, event.currentTarget);
+    if (bubblingFromNestedControl) {
+        return;
+    }
+    if (selectable) {
+        checked = !checked;
+    }
+    onclick?.(event);
+}
+function handleKeydown(event) {
+    const bubblingFromNestedControl = event.target !== event.currentTarget &&
+        isNestedControlTarget(event.target, event.currentTarget);
+    const isActivationKey = event.key === " " || event.key === "Enter";
+    if (selectable) {
+        if (!bubblingFromNestedControl && isActivationKey) {
+            event.preventDefault();
+            checked = !checked;
+        }
+    }
+    if (interactive && !selectable && !bubblingFromNestedControl && isActivationKey) {
+        event.preventDefault();
+        event.currentTarget.click();
+    }
+    onkeydown?.(event);
+}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<li
+  class="data-list-item"
+  class:hasStart
+  class:hasEnd
+  class:isInteractive
+  class:selectable
+  class:checked={selectable && checked}
+  {style}
+  tabindex={rowTabIndex}
+  role={rowRole}
+  aria-checked={selectable ? checked : undefined}
+  onclick={handleClick}
+  onkeydown={handleKeydown}
+  {...restProps}
+>
+  {#if hasStart}
+    <div class="start">
+      {@render start?.()}
+    </div>
+  {/if}
+
+  <div class="main">
+    {@render children?.()}
+  </div>
+
+  {#if hasEnd}
+    <div class="end">
+      {#if hasCustomEnd}
+        {@render end?.()}
+      {:else if hasDefaultSelector}
+        <Checkbox
+          bind:checked
+          padding="0"
+          tabindex="-1"
+          aria-label={checked ? "Unselect row" : "Select row"}
+        />
+      {/if}
+    </div>
+  {/if}
+</li>
+
+<style>/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
+.data-list-item {
+  background: var(--data-list-item-bg, var(--data-list-bg, var(--container-bg, var(--bg, unset))));
+  color: var(--data-list-item-fg, var(--data-list-fg, var(--container-fg, var(--fg, unset))));
+  --link-bg: var(--data-list-item-link-bg, var(--data-list-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
+  --link-fg: var(--data-list-item-link-fg, var(--data-list-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
+  --fg: var(--data-list-item-fg, var(--data-list-fg, var(--container-fg, var(--fg, unset))));
+  --bg: var(--data-list-item-bg, var(--data-list-bg, var(--container-bg, var(--bg, unset))));
+  max-width: var(--data-list-item-line-width, var(--data-list-line-width, var(--container-line-width, var(--line-width, unset))));
+  font-family: var(--data-list-item-body-font-family, var(--data-list-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family)))));
+  font-family: var(--data-list-item-font-family, var(--data-list-font-family, var(--container-font-family, var(--font-family, unset))));
+  text-transform: var(--data-list-item-text-transform, var(--data-list-text-transform, var(--container-text-transform, var(--text-transform, unset))));
+  text-decoration: var(--data-list-item-text-decoration, var(--data-list-text-decoration, var(--container-text-decoration, var(--text-decoration, unset))));
+  font-size: var(--data-list-item-font-size, var(--data-list-font-size, var(--container-font-size, var(--font-size, unset))));
+  font-weight: var(--data-list-item-font-weight, var(--data-list-font-weight, var(--container-font-weight, var(--font-weight, unset))));
+  line-height: var(--data-list-item-line-height, var(--data-list-line-height, var(--container-line-height, var(--line-height, unset))));
+  letter-spacing: var(--data-list-item-letter-spacing, var(--data-list-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset))));
+  margin-top: var(--data-list-item-margin, var(--data-list-margin, var(--container-margin, var(--margin, unset))));
+  margin-top: var(--data-list-item-margin-top, var(--data-list-margin-top, var(--container-margin-top, var(--margin-top, unset))));
+  margin-bottom: var(--data-list-item-margin, var(--data-list-margin, var(--container-margin, var(--margin, unset))));
+  margin-bottom: var(--data-list-item-margin-bottom, var(--data-list-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset))));
+  text-indent: var(--data-list-item-indent, var(--data-list-indent, var(--container-indent, var(--indent, unset))));
+  font-variant: var(--data-list-item-font-variant, var(--data-list-font-variant, var(--container-font-variant, var(--font-variant, unset))));
+  text-align: var(--data-list-item-text-align, var(--data-list-text-align, var(--container-text-align, var(--text-align, unset))));
+}
+
+.data-list-item :global(p),
+.data-list-item :global(blockquote),
+.data-list-item :global(dl),
+.data-list-item :global(ul),
+.data-list-item :global(ol) {
+  max-width: var(--data-list-item-line-width, var(--data-list-line-width, var(--container-line-width, var(--line-width, 40em))));
+  font-family: var(--data-list-item-body-font-family, var(--data-list-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family)))));
+  line-height: var(--data-list-item-line-height, var(--data-list-line-height, var(--container-line-height, var(--line-height, 1.5))));
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: var(--data-list-item-body-font-weight, var(--data-list-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset))));
+}
+
+.data-list-item :global(h1),
+.data-list-item :global(h2),
+.data-list-item :global(h3),
+.data-list-item :global(h4),
+.data-list-item :global(h5),
+.data-list-item :global(h6) {
+  color: var(--data-list-item-heading-fg, var(--data-list-heading-fg, var(--container-heading-fg, var(--heading-fg, unset))));
+  background: var(--data-list-item-heading-bg, var(--data-list-heading-bg, var(--container-heading-bg, var(--heading-bg, transparent))));
+  max-width: var(--data-list-item-line-width, var(--data-list-line-width, var(--container-line-width, var(--line-width, unset))));
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--data-list-item-heading-margin-bottom, var(--data-list-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0))));
+  margin-top: var(--data-list-item-heading-margin-top, var(--data-list-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em))));
+  /* Typography */
+  font-family: var(--data-list-item-heading-font-family, var(--data-list-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit)))));
+  text-transform: var(--data-list-item-heading-text-transform, var(--data-list-heading-text-transform, var(--container-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit)))));
+  text-decoration: var(--data-list-item-heading-text-decoration, var(--data-list-heading-text-decoration, var(--container-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit)))));
+  font-size: var(--data-list-item-heading-font-size, var(--data-list-heading-font-size, var(--container-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit)))));
+  font-weight: var(--data-list-item-heading-font-weight, var(--data-list-heading-font-weight, var(--container-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit)))));
+  line-height: var(--data-list-item-heading-line-height, var(--data-list-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit)))));
+  letter-spacing: var(--data-list-item-heading-letter-spacing, var(--data-list-heading-letter-spacing, var(--container-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit)))));
+  text-indent: var(--data-list-item-heading-indent, var(--data-list-heading-indent, var(--container-heading-indent, var(--heading-indent, var(--heading-indent, inherit)))));
+  font-variant: var(--data-list-item-heading-font-variant, var(--data-list-heading-font-variant, var(--container-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit)))));
+  text-align: var(--data-list-item-heading-text-align, var(--data-list-heading-text-align, var(--container-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit)))));
+  /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
+    font-size: fn.var(--heading-font-size, inherit);
+    font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
+    line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
+    letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
+    text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
+    font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
+    text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
+}
+
+.data-list-item :global(p) {
+  font-family: var(--data-list-item-paragraph-font-family, var(--data-list-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit)))));
+  text-transform: var(--data-list-item-paragraph-text-transform, var(--data-list-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit)))));
+  text-decoration: var(--data-list-item-paragraph-text-decoration, var(--data-list-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit)))));
+  font-size: var(--data-list-item-paragraph-font-size, var(--data-list-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit)))));
+  font-weight: var(--data-list-item-paragraph-font-weight, var(--data-list-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit)))));
+  line-height: var(--data-list-item-paragraph-line-height, var(--data-list-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit)))));
+  letter-spacing: var(--data-list-item-paragraph-letter-spacing, var(--data-list-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit)))));
+  text-indent: var(--data-list-item-paragraph-indent, var(--data-list-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit)))));
+  font-variant: var(--data-list-item-paragraph-font-variant, var(--data-list-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit)))));
+  text-align: var(--data-list-item-paragraph-text-align, var(--data-list-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit)))));
+}
+
+.data-list-item :global(p:first-of-type),
+.data-list-item :global(h1 + p),
+.data-list-item :global(h2 + p),
+.data-list-item :global(h3 + p),
+.data-list-item :global(h4 + p),
+.data-list-item :global(h5 + p),
+.data-list-item :global(h6 + p) {
+  font-family: var(--data-list-item-first-paragraph-font-family, var(--data-list-first-paragraph-font-family, var(--container-first-paragraph-font-family, var(--first-paragraph-font-family, var(--first-paragraph-font-family, inherit)))));
+  text-transform: var(--data-list-item-first-paragraph-text-transform, var(--data-list-first-paragraph-text-transform, var(--container-first-paragraph-text-transform, var(--first-paragraph-text-transform, var(--first-paragraph-text-transform, inherit)))));
+  text-decoration: var(--data-list-item-first-paragraph-text-decoration, var(--data-list-first-paragraph-text-decoration, var(--container-first-paragraph-text-decoration, var(--first-paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit)))));
+  font-size: var(--data-list-item-first-paragraph-font-size, var(--data-list-first-paragraph-font-size, var(--container-first-paragraph-font-size, var(--first-paragraph-font-size, var(--first-paragraph-font-size, inherit)))));
+  font-weight: var(--data-list-item-first-paragraph-font-weight, var(--data-list-first-paragraph-font-weight, var(--container-first-paragraph-font-weight, var(--first-paragraph-font-weight, var(--first-paragraph-font-weight, inherit)))));
+  line-height: var(--data-list-item-first-paragraph-line-height, var(--data-list-first-paragraph-line-height, var(--container-first-paragraph-line-height, var(--first-paragraph-line-height, var(--first-paragraph-line-height, inherit)))));
+  letter-spacing: var(--data-list-item-first-paragraph-letter-spacing, var(--data-list-first-paragraph-letter-spacing, var(--container-first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit)))));
+  text-indent: var(--data-list-item-first-paragraph-indent, var(--data-list-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit)))));
+  font-variant: var(--data-list-item-first-paragraph-font-variant, var(--data-list-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit)))));
+  text-align: var(--data-list-item-first-paragraph-text-align, var(--data-list-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit)))));
+  font-size: var(--data-list-item-first-paragraph-first-paragraph-font-size, var(--data-list-first-paragraph-first-paragraph-font-size, var(--container-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--data-list-item-paragraph-font-size, var(--data-list-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--data-list-item-font-size, var(--data-list-font-size, var(--container-font-size, var(--font-size, inherit))))))))))));
+  line-height: var(--data-list-item-first-paragraph-first-paragraph-line-height, var(--data-list-first-paragraph-first-paragraph-line-height, var(--container-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--data-list-item-paragraph-line-height, var(--data-list-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--data-list-item-line-height, var(--data-list-line-height, var(--container-line-height, var(--line-height, inherit))))))))))));
+  margin-block-start: var(--data-list-item-first-paragraph-margin-top, var(--data-list-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0))));
+}
+
+.data-list-item :global(p:first-of-type::first-line) {
+  font-family: var(--first-line-font-family, var(--data-list-item-first-line-font-family, var(--data-list-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))))));
+  text-transform: var(--first-line-text-transform, var(--data-list-item-first-line-text-transform, var(--data-list-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))))));
+  text-decoration: var(--first-line-text-decoration, var(--data-list-item-first-line-text-decoration, var(--data-list-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))))));
+  font-size: var(--first-line-font-size, var(--data-list-item-first-line-font-size, var(--data-list-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))))));
+  font-weight: var(--first-line-font-weight, var(--data-list-item-first-line-font-weight, var(--data-list-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))))));
+  line-height: var(--first-line-line-height, var(--data-list-item-first-line-line-height, var(--data-list-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))))));
+  letter-spacing: var(--first-line-letter-spacing, var(--data-list-item-first-line-letter-spacing, var(--data-list-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))))));
+  text-indent: var(--first-line-indent, var(--data-list-item-first-line-indent, var(--data-list-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))))));
+  font-variant: var(--first-line-font-variant, var(--data-list-item-first-line-font-variant, var(--data-list-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))))));
+  text-align: var(--first-line-text-align, var(--data-list-item-first-line-text-align, var(--data-list-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))))));
+}
+
+.data-list-item :global(p:first-of-type::first-letter) {
+  font-family: var(--first-letter-font-family, var(--data-list-item-first-letter-font-family, var(--data-list-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)))));
+  text-transform: var(--first-letter-text-transform, var(--data-list-item-first-letter-text-transform, var(--data-list-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)))));
+  text-decoration: var(--first-letter-text-decoration, var(--data-list-item-first-letter-text-decoration, var(--data-list-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)))));
+  font-size: var(--first-letter-font-size, var(--data-list-item-first-letter-font-size, var(--data-list-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)))));
+  font-weight: var(--first-letter-font-weight, var(--data-list-item-first-letter-font-weight, var(--data-list-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)))));
+  line-height: var(--first-letter-line-height, var(--data-list-item-first-letter-line-height, var(--data-list-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)))));
+  letter-spacing: var(--first-letter-letter-spacing, var(--data-list-item-first-letter-letter-spacing, var(--data-list-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)))));
+  text-indent: var(--first-letter-indent, var(--data-list-item-first-letter-indent, var(--data-list-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)))));
+  font-variant: var(--first-letter-font-variant, var(--data-list-item-first-letter-font-variant, var(--data-list-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)))));
+  text-align: var(--first-letter-text-align, var(--data-list-item-first-letter-text-align, var(--data-list-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)))));
+  --link-bg: var(--data-list-item-link-bg, var(--data-list-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
+  --link-fg: var(--data-list-item-link-fg, var(--data-list-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
+  background: var(--data-list-item-first-letter-bg, var(--data-list-first-letter-bg, var(--container-first-letter-bg, var(--first-letter-bg, inherit))));
+  color: var(--data-list-item-first-letter-fg, var(--data-list-first-letter-fg, var(--container-first-letter-fg, var(--first-letter-fg, inherit))));
+}
+
+.data-list-item {
+  display: grid;
+  grid-template-columns: var(--data-list-item-icon-width, var(--data-list-icon-width, var(--icon-width, var(--data-list-item-icon-size, var(--data-list-icon-size, var(--icon-size, 2.5rem)))))) minmax(0, 1fr) var(--data-list-item-action-width, var(--data-list-action-width, var(--action-width, auto)));
+  grid-template-areas: "start main end";
+  column-gap: var(--data-list-item-gap, var(--data-list-gap, var(--gap, var(--space))));
+  row-gap: var(--data-list-item-row-gap, var(--data-list-row-gap, var(--row-gap, calc(var(--space) / 2))));
+  align-items: var(--data-list-item-align, var(--data-list-align, var(--align, center)));
+  padding: var(--data-list-item-item-padding, var(--data-list-item-padding, var(--item-padding, var(--padding))));
+  min-height: var(--data-list-item-item-min-height, var(--data-list-item-min-height, var(--item-min-height, 4.5rem)));
+  border-bottom: var(--data-list-item-item-border, var(--data-list-item-border, var(--item-border, 1px solid var(--border-color, rgba(127, 127, 127, 0.4)))));
+  box-sizing: border-box;
+  width: 100%;
+  max-width: none;
+  position: relative;
+}
+
+.data-list-item:not(.hasStart) {
+  grid-template-columns: minmax(0, 1fr) var(--data-list-item-action-width, var(--data-list-action-width, var(--action-width, auto)));
+  grid-template-areas: "main end";
+}
+
+.data-list-item:not(.hasEnd) {
+  grid-template-columns: var(--data-list-item-icon-width, var(--data-list-icon-width, var(--icon-width, var(--data-list-item-icon-size, var(--data-list-icon-size, var(--icon-size, 2.5rem)))))) minmax(0, 1fr);
+  grid-template-areas: "start main";
+}
+
+.data-list-item:not(.hasStart):not(.hasEnd) {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas: "main";
+}
+
+.start {
+  grid-area: start;
+  display: flex;
+  align-items: center;
+  justify-content: var(--data-list-item-icon-justify, var(--data-list-icon-justify, var(--icon-justify, center)));
+}
+
+.start :global(img) {
+  width: var(--data-list-item-icon-size, var(--data-list-icon-size, var(--icon-size, 2.5rem)));
+  height: var(--data-list-item-icon-size, var(--data-list-icon-size, var(--icon-size, 2.5rem)));
+  object-fit: cover;
+  border-radius: var(--data-list-item-icon-border-radius, var(--data-list-icon-border-radius, var(--icon-border-radius, var(--data-list-item-icon-radius, var(--data-list-icon-radius, var(--icon-radius, 0.375rem))))));
+}
+
+.main :global(h4),
+.main :global(h5) {
+  font-size: var(--data-list-item-heading-font-size, var(--data-list-heading-font-size, var(--heading-font-size, var(--data-list-item-title-font-size, var(--data-list-title-font-size, var(--title-font-size, var(--heading-font-size, 1rem)))))));
+  font-weight: var(--data-list-item-heading-font-weight, var(--data-list-heading-font-weight, var(--heading-font-weight, var(--data-list-item-title-font-weight, var(--data-list-title-font-weight, var(--title-font-weight, 600))))));
+  line-height: var(--data-list-item-heading-line-height, var(--data-list-heading-line-height, var(--heading-line-height, var(--data-list-item-title-line-height, var(--data-list-title-line-height, var(--title-line-height, 1.25))))));
+}
+
+.main :global(p),
+.main :global(p:first-of-type),
+.main :global(h1 + p),
+.main :global(h2 + p),
+.main :global(h3 + p),
+.main :global(h4 + p),
+.main :global(h5 + p),
+.main :global(h6 + p) {
+  font-size: var(--data-list-item-paragraph-font-size, var(--data-list-paragraph-font-size, var(--paragraph-font-size, var(--data-list-item-body-font-size, var(--data-list-body-font-size, var(--body-font-size, var(--font-size-small, 0.9rem)))))));
+  line-height: var(--data-list-item-paragraph-line-height, var(--data-list-paragraph-line-height, var(--paragraph-line-height, var(--data-list-item-body-line-height, var(--data-list-body-line-height, var(--body-line-height, 1.35))))));
+  opacity: var(--data-list-item-body-opacity, var(--data-list-body-opacity, var(--body-opacity, 0.9)));
+}
+
+.main {
+  grid-area: main;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-item-main-gap, var(--data-list-main-gap, var(--main-gap, 0.25em)));
+}
+
+.main :global(h1),
+.main :global(h2),
+.main :global(h3),
+.main :global(h4),
+.main :global(h5),
+.main :global(h6),
+.main :global(p) {
+  margin: 0;
+  max-width: none;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.end {
+  grid-area: end;
+  display: flex;
+  flex-direction: var(--data-list-item-action-flex-direction, var(--data-list-action-flex-direction, var(--action-flex-direction, row)));
+  flex-wrap: var(--data-list-item-action-wrap, var(--data-list-action-wrap, var(--action-wrap, nowrap)));
+  align-items: var(--data-list-item-action-align, var(--data-list-action-align, var(--action-align, center)));
+  justify-content: var(--data-list-item-action-justify, var(--data-list-action-justify, var(--action-justify, flex-end)));
+  gap: var(--data-list-item-action-gap, var(--data-list-action-gap, var(--action-gap, var(--space))));
+  min-width: 0;
+}
+
+.end :global(button),
+.end :global(.button),
+.end :global(a) {
+  margin: var(--data-list-action-control-margin, 0);
+}
+
+.data-list-item.isInteractive {
+  cursor: var(--data-list-item-cursor, var(--cursor, pointer));
+  transition: filter, transform var(--data-list-item-transition, var(--transition, 300ms));
+}
+
+.data-list-item.isInteractive:hover {
+  filter: var(--data-list-item-hover-filter, var(--hover-filter, brightness(1.05)));
+  transform: var(--data-list-item-hover-transform, var(--hover-transform, none));
+}
+
+.data-list-item.isInteractive:active {
+  filter: var(--data-list-item-active-filter, var(--active-filter, brightness(0.9)));
+  transform: var(--data-list-item-active-transform, var(--active-transform, none));
+}
+
+.data-list-item.isInteractive:disabled {
+  cursor: var(--data-list-item-disabled-cursor, var(--disabled-cursor, not-allowed));
+  transform: var(--data-list-item-disabled-transform, var(--disabled-transform, none));
+  filter: var(--data-list-item-disabled-filter, var(--disabled-filter, grayscale(0.5)));
+}
+
+.data-list-item.isInteractive:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+  outline-offset: var(--data-list-item-focus-outline-offset, -2px);
+  box-shadow: var(--data-list-item-focus-ring-box-shadow, inset 0 0 0 2px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
+
+.data-list-item.selectable.checked {
+  background: var(--data-list-item-selected-bg, var(--data-list-selected-bg, var(--selected-bg, color-mix(in srgb, var(--primary-bg) 15%, transparent))));
+  color: var(--data-list-item-selected-fg, var(--data-list-selected-fg, var(--selected-fg, var(--data-list-item-fg, var(--data-list-fg, var(--fg, inherit))))));
+  --fg: var-with-fallbacks(
+    --selected-fg,
+    data-list-item,
+    data-list,
+    var-with-fallbacks(--fg, data-list-item, data-list, inherit)
+  );
+  --link-fg: var-with-fallbacks(
+    --selected-link-fg,
+    data-list-item,
+    data-list,
+    var-with-fallbacks(
+      --selected-fg,
+      data-list-item,
+      data-list,
+      var-with-fallbacks(--link-fg, data-list-item, data-list, inherit)
+    )
+  );
+  --data-list-item-selected-accent: var-with-fallbacks(
+    --selection-color,
+    data-list-item,
+    data-list,
+    var(--primary-bg)
+  );
+}
+
+.data-list-item.selectable.checked::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border: var(--data-list-item-selected-border, var(--data-list-selected-border, var(--data-list-item-selected-outline, var(--data-list-selected-outline, none))));
+  pointer-events: none;
+}
+
+.data-list-item.selectable.checked + .data-list-item.selectable.checked::after {
+  border-top-width: 0;
+}
+
+@container (max-width: 640px) {
+  :global(.data-list.stackable) .data-list-item.hasStart.hasEnd {
+    grid-template-columns: var(--data-list-item-icon-width, var(--data-list-icon-width, var(--icon-width, var(--data-list-item-icon-size, var(--data-list-icon-size, var(--icon-size, 2.5rem)))))) minmax(0, 1fr);
+    grid-template-areas: "start main" "end end";
+  }
+  :global(.data-list.stackable) .data-list-item.hasStart.hasEnd .end {
+    flex-direction: var(--data-list-item-action-compact-flex-direction, var(--data-list-action-compact-flex-direction, var(--action-compact-flex-direction, row)));
+    flex-wrap: var(--data-list-item-action-compact-wrap, var(--data-list-action-compact-wrap, var(--action-compact-wrap, wrap)));
+    justify-content: var(--data-list-item-action-mobile-justify, var(--data-list-action-mobile-justify, var(--action-mobile-justify, flex-start)));
+    padding-inline-start: calc(var(--data-list-item-icon-width, var(--data-list-icon-width, var(--icon-width, var(--data-list-item-icon-size, var(--data-list-icon-size, var(--icon-size, 2.5rem)))))) + var(--data-list-item-gap, var(--data-list-gap, var(--gap, var(--space)))));
+  }
+  :global(.data-list.stackable) .data-list-item:not(.hasStart).hasEnd {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "main" "end";
+  }
+}</style>

package/dist/layout/DataListItem.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { BaseStyleProps } from "../types";
+type Props = {
+    start?: Snippet;
+    end?: Snippet;
+    children?: Snippet;
+    interactive?: boolean;
+    selectable?: boolean;
+    checked?: boolean;
+    tabindex?: number;
+    onclick?: ((event: MouseEvent) => void) | null;
+    onkeydown?: ((event: KeyboardEvent) => void) | null;
+    gap?: string | null;
+    rowGap?: string | null;
+    mainGap?: string | null;
+    itemPadding?: string | null;
+    itemMinHeight?: string | null;
+    iconWidth?: string | null;
+    iconSize?: string | null;
+    iconBorderRadius?: string | null;
+    actionWidth?: string | null;
+    actionFlexDirection?: string | null;
+    actionWrap?: string | null;
+    actionCompactFlexDirection?: string | null;
+    actionCompactWrap?: string | null;
+    actionGap?: string | null;
+    actionAlign?: string | null;
+    actionJustify?: string | null;
+    actionMobileJustify?: string | null;
+    itemBorder?: string | null;
+    selectedBg?: string | null;
+    selectedFg?: string | null;
+    selectedOutline?: string | null;
+    selectedBorder?: string | null;
+    selectionColor?: string | null;
+} & BaseStyleProps & HTMLAttributes<HTMLLIElement>;
+declare const DataListItem: import("svelte").Component<Props, {}, "checked">;
+type DataListItem = ReturnType<typeof DataListItem>;
+export default DataListItem;

package/dist/layout/Hero.svelte

@@ -130,6 +130,8 @@ const style = $derived(injectVars(restProps, "hero", [
   text-indent: var(--hero-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--hero-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--hero-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  font-size: var(--hero-first-paragraph-first-paragraph-font-size, var(--container-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--hero-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--hero-font-size, var(--container-font-size, var(--font-size, inherit)))))))));
+  line-height: var(--hero-first-paragraph-first-paragraph-line-height, var(--container-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--hero-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--hero-line-height, var(--container-line-height, var(--line-height, inherit)))))))));
   margin-block-start: var(--hero-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 

package/dist/layout/MenuList.svelte

@@ -41,31 +41,57 @@ const style = $derived(injectVars(restProps, "menu", [
   overflow: hidden;
 }
 
-.menu :global(li:has(> a)),
-.menu :global(li:has(> button)) {
+.menu :global(li > a),
+.menu :global(li > button),
+.menu :global(li > input[type="submit"]),
+.menu :global(li > .button) {
+  width: 100%;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+}
+
+.menu :global(li.subheader),
+.menu :global(li.interactive),
+.menu :global(li[role="button"]),
+.menu :global(li[tabindex]:not([tabindex="-1"])) {
   cursor: var(--menu-item-cursor, var(--cursor, pointer));
   transition: filter, transform var(--menu-item-transition, var(--transition, 300ms));
 }
 
-.menu :global(li:has(> a)):hover,
-.menu :global(li:has(> button)):hover {
+.menu :global(li.subheader):hover,
+.menu :global(li.interactive):hover,
+.menu :global(li[role="button"]):hover,
+.menu :global(li[tabindex]:not([tabindex="-1"])):hover {
   filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
   transform: var(--menu-item-hover-transform, var(--hover-transform, none));
 }
 
-.menu :global(li:has(> a)):active,
-.menu :global(li:has(> button)):active {
+.menu :global(li.subheader):active,
+.menu :global(li.interactive):active,
+.menu :global(li[role="button"]):active,
+.menu :global(li[tabindex]:not([tabindex="-1"])):active {
   filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
   transform: var(--menu-item-active-transform, var(--active-transform, none));
 }
 
-.menu :global(li:has(> a)):disabled,
-.menu :global(li:has(> button)):disabled {
+.menu :global(li.subheader):disabled,
+.menu :global(li.interactive):disabled,
+.menu :global(li[role="button"]):disabled,
+.menu :global(li[tabindex]:not([tabindex="-1"])):disabled {
   cursor: var(--menu-item-disabled-cursor, var(--disabled-cursor, not-allowed));
   transform: var(--menu-item-disabled-transform, var(--disabled-transform, none));
   filter: var(--menu-item-disabled-filter, var(--disabled-filter, grayscale(0.5)));
 }
 
+.menu :global(li.subheader):focus-visible,
+.menu :global(li.interactive):focus-visible,
+.menu :global(li[role="button"]):focus-visible,
+.menu :global(li[tabindex]:not([tabindex="-1"])):focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
+
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
   display: flex;
   justify-content: var(--menu-item-justify, center);
@@ -87,12 +113,12 @@ const style = $derived(injectVars(restProps, "menu", [
   text-indent: var(--menu-item-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
   font-variant: var(--menu-item-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
   text-align: var(--menu-item-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
-  background: var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  color: var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
-  --link-bg: var(--menu-item-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
-  --link-fg: var(--menu-item-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
-  --fg: var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
-  --bg: var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  background: var(--menu-item-bg, var(--menu-bg, var(--button-bg, var(--control-bg, var(--bg, unset)))));
+  color: var(--menu-item-fg, var(--menu-fg, var(--button-fg, var(--control-fg, var(--fg, unset)))));
+  --link-bg: var(--menu-item-link-bg, var(--menu-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit)))));
+  --link-fg: var(--menu-item-link-fg, var(--menu-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit)))));
+  --fg: var(--menu-item-fg, var(--menu-fg, var(--button-fg, var(--control-fg, var(--fg, unset)))));
+  --bg: var(--menu-item-bg, var(--menu-bg, var(--button-bg, var(--control-bg, var(--bg, unset)))));
   box-sizing: border-box;
   border: var(--menu-item-border, var(--button-border, var(--control-border, var(--border, inherit))));
   border-top: var(--menu-item-border-top, var(--button-border-top, var(--control-border-top, var(--border-top, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
@@ -101,6 +127,7 @@ const style = $derived(injectVars(restProps, "menu", [
   border-left: var(--menu-item-border-left, var(--button-border-left, var(--control-border-left, var(--border-left, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
   padding: var(--menu-item-padding, var(--button-padding, var(--control-padding, var(--padding, 4px))));
   border-radius: var(--menu-item-square-radius, var(--button-square-radius, var(--control-square-radius, var(--square-radius, 0))));
+  margin: 0;
 }
 
 .menu :global(a):focus-visible, .menu :global(button):focus-visible, .menu :global(input[type="submit"]):focus-visible, .menu :global(.button):focus-visible {
@@ -110,7 +137,34 @@ const style = $derived(injectVars(restProps, "menu", [
 }
 
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
-  /* @include clickable(menu-item); */
+  cursor: var(--menu-item-cursor, var(--cursor, pointer));
+  transition: filter, transform var(--menu-item-transition, var(--transition, 300ms));
+}
+
+.menu :global(a):hover, .menu :global(button):hover, .menu :global(input[type="submit"]):hover, .menu :global(.button):hover {
+  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
+  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
+}
+
+.menu :global(a):active, .menu :global(button):active, .menu :global(input[type="submit"]):active, .menu :global(.button):active {
+  filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
+  transform: var(--menu-item-active-transform, var(--active-transform, none));
+}
+
+.menu :global(a):disabled, .menu :global(button):disabled, .menu :global(input[type="submit"]):disabled, .menu :global(.button):disabled {
+  cursor: var(--menu-item-disabled-cursor, var(--disabled-cursor, not-allowed));
+  transform: var(--menu-item-disabled-transform, var(--disabled-transform, none));
+  filter: var(--menu-item-disabled-filter, var(--disabled-filter, grayscale(0.5)));
+}
+
+.menu :global(li:hover > a:not(.active)), .menu :global(li:hover > button:not(.active)), .menu :global(li:hover > input[type="submit"]:not(.active)), .menu :global(li:hover > .button:not(.active)) {
+  background: var(--menu-item-hover-bg, var(--menu-item-bg, var(--menu-bg, var(--bg, unset))));
+  color: var(--menu-item-hover-fg, var(--menu-item-fg, var(--menu-fg, var(--fg, inherit))));
+}
+
+.menu :global(li:active > a:not(.active)), .menu :global(li:active > button:not(.active)), .menu :global(li:active > input[type="submit"]:not(.active)), .menu :global(li:active > .button:not(.active)) {
+  background: var(--menu-item-active-bg, var(--menu-item-bg, var(--menu-bg, var(--bg, unset))));
+  color: var(--menu-item-active-fg, var(--menu-item-fg, var(--menu-fg, var(--fg, inherit))));
 }
 
 .menu :global(.active) {

package/dist/layout/SplitPane.svelte

@@ -36,14 +36,30 @@ function setSize(newLeftWidth, newRightWidth) {
         // Don't allow too small of widths
         return;
     }
-    let containerWidth = splitPaneContainer.getBoundingClientRect().width;
-    let resizerWidth = resizerDiv.getBoundingClientRect().width;
-    if (newLeftWidth + newRightWidth + resizerWidth > containerWidth) {
-        // Don't allow the panes to overflow the container
-        // Keep the left and shrink the right...
-        newRightWidth = containerWidth - newLeftWidth - resizerWidth;
+    const containerStyle = getComputedStyle(splitPaneContainer);
+    const columnGap = Number.parseFloat(containerStyle.columnGap || "0") || 0;
+    const totalGap = columnGap * 2; // 3 columns => 2 gaps
+    const resizerWidth = resizerDiv.getBoundingClientRect().width;
+    const availableWidth = splitPaneContainer.clientWidth - totalGap;
+    const minRequired = resizerWidth + MIN_SIZE * 2;
+    if (availableWidth <= minRequired) {
+        return;
+    }
+    if (newLeftWidth + newRightWidth + resizerWidth > availableWidth) {
+        // Don't allow panes to overflow the available grid track width.
+        // Keep the left and shrink the right.
+        newRightWidth = availableWidth - newLeftWidth - resizerWidth;
+    }
+    if (newRightWidth < MIN_SIZE) {
+        // If right becomes too small after clamping, keep both panes usable.
+        newRightWidth = MIN_SIZE;
+        newLeftWidth = availableWidth - resizerWidth - newRightWidth;
+    }
+    if (newLeftWidth < MIN_SIZE) {
+        newLeftWidth = MIN_SIZE;
+        newRightWidth = availableWidth - resizerWidth - newLeftWidth;
     }
-    resizeStyle = `grid-template-columns: ${newLeftWidth}px 8px ${newRightWidth}px`;
+    resizeStyle = `grid-template-columns: ${newLeftWidth}px ${resizerWidth}px ${newRightWidth}px`;
 }
 function onMouseUp() {
     document.removeEventListener("mousemove", onMouseMove);
@@ -129,6 +145,7 @@ onMount(() => {
   container-type: inline-size;
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 /* Resizer */

package/dist/layout/Table.svelte

@@ -297,6 +297,8 @@ table :global(h6 + p) {
   text-indent: var(--table-first-paragraph-indent, var(--container-first-paragraph-indent, var(--paragraph-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit)))));
   font-variant: var(--table-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--paragraph-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit)))));
   text-align: var(--table-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--paragraph-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit)))));
+  font-size: var(--table-first-paragraph-first-paragraph-font-size, var(--container-first-paragraph-first-paragraph-font-size, var(--paragraph-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--table-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-paragraph-font-size, var(--paragraph-font-size, var(--table-font-size, var(--container-font-size, var(--paragraph-font-size, var(--font-size, inherit))))))))))));
+  line-height: var(--table-first-paragraph-first-paragraph-line-height, var(--container-first-paragraph-first-paragraph-line-height, var(--paragraph-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--table-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-paragraph-line-height, var(--paragraph-line-height, var(--table-line-height, var(--container-line-height, var(--paragraph-line-height, var(--line-height, inherit))))))))))));
   margin-block-start: var(--table-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--paragraph-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0))));
 }
 

package/dist/layout/Tile.svelte

@@ -158,6 +158,8 @@ export {};
   text-indent: var(--tile-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit)));
   font-variant: var(--tile-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit)));
   text-align: var(--tile-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit)));
+  font-size: var(--tile-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--tile-paragraph-font-size, var(--paragraph-font-size, var(--tile-font-size, var(--font-size, inherit))))));
+  line-height: var(--tile-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--tile-paragraph-line-height, var(--paragraph-line-height, var(--tile-line-height, var(--line-height, inherit))))));
   margin-block-start: var(--tile-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0));
 }
 

package/dist/misc/Progress.svelte

@@ -171,6 +171,8 @@ let halfFull = $derived(fillFraction > 0.5);
   text-indent: var(--progress-first-paragraph-indent, var(--ui-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--progress-first-paragraph-font-variant, var(--ui-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--progress-first-paragraph-text-align, var(--ui-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  font-size: var(--progress-first-paragraph-first-paragraph-font-size, var(--ui-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--progress-paragraph-font-size, var(--ui-paragraph-font-size, var(--paragraph-font-size, var(--progress-font-size, var(--ui-font-size, var(--font-size, inherit)))))))));
+  line-height: var(--progress-first-paragraph-first-paragraph-line-height, var(--ui-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--progress-paragraph-line-height, var(--ui-paragraph-line-height, var(--paragraph-line-height, var(--progress-line-height, var(--ui-line-height, var(--line-height, inherit)))))))));
   margin-block-start: var(--progress-first-paragraph-margin-top, var(--ui-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 

package/dist/overlays/Tooltip.svelte

@@ -237,6 +237,8 @@ function showPopover() {
   text-indent: var(--tooltip-first-paragraph-indent, var(--ui-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--tooltip-first-paragraph-font-variant, var(--ui-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--tooltip-first-paragraph-text-align, var(--ui-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  font-size: var(--tooltip-first-paragraph-first-paragraph-font-size, var(--ui-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--tooltip-paragraph-font-size, var(--ui-paragraph-font-size, var(--paragraph-font-size, var(--tooltip-font-size, var(--ui-font-size, var(--font-size, inherit)))))))));
+  line-height: var(--tooltip-first-paragraph-first-paragraph-line-height, var(--ui-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--tooltip-paragraph-line-height, var(--ui-paragraph-line-height, var(--paragraph-line-height, var(--tooltip-line-height, var(--ui-line-height, var(--line-height, inherit)))))))));
   margin-block-start: var(--tooltip-first-paragraph-margin-top, var(--ui-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 

package/dist/sass/_typography.scss

@@ -120,6 +120,29 @@
     @include typography-props-bare(
       append(map-prefixes(first-paragraph, $prefixes), first-paragraph)...
     );
+    font-size: fn.var-with-fallbacks(
+      --first-paragraph-font-size,
+      append(
+        map-prefixes(first-paragraph, $prefixes),
+        fn.var-with-fallbacks(
+          --paragraph-font-size,
+          append($prefixes, fn.var-with-fallbacks(--font-size, append($prefixes, inherit)...))...
+        )
+      )...
+    );
+    line-height: fn.var-with-fallbacks(
+      --first-paragraph-line-height,
+      append(
+        map-prefixes(first-paragraph, $prefixes),
+        fn.var-with-fallbacks(
+          --paragraph-line-height,
+          append(
+            $prefixes,
+            fn.var-with-fallbacks(--line-height, append($prefixes, inherit)...)
+          )...
+        )
+      )...
+    );
     margin-block-start: fn.var-with-fallbacks(
       --first-paragraph-margin-top,
       append($prefixes, 0)...

package/dist/typography/TextLayout.svelte

@@ -109,6 +109,8 @@ div :global(h6 + p) {
   text-indent: var(--body-first-paragraph-indent, var(--text-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--body-first-paragraph-font-variant, var(--text-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--body-first-paragraph-text-align, var(--text-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  font-size: var(--body-first-paragraph-first-paragraph-font-size, var(--text-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--body-paragraph-font-size, var(--text-paragraph-font-size, var(--paragraph-font-size, var(--body-font-size, var(--text-font-size, var(--font-size, inherit)))))))));
+  line-height: var(--body-first-paragraph-first-paragraph-line-height, var(--text-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--body-paragraph-line-height, var(--text-paragraph-line-height, var(--paragraph-line-height, var(--body-line-height, var(--text-line-height, var(--line-height, inherit)))))))));
   margin-block-start: var(--body-first-paragraph-margin-top, var(--text-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 

package/dist/vars/affordances.css

@@ -9,6 +9,14 @@
   /* --button-hover-filter: var(--hover-filter); */
   --menu-hover-filter: var(--hover-filter);
   --menu-hover-transform: var(--hover-transform);
+  /* Menu items are often on light backgrounds; brighten can look invisible there. */
+  --menu-item-hover-filter: brightness(0.95)
+    drop-shadow(
+      var(--space) var(--space) var(--shadow-blur) var(--shadow-color)
+    );
+  /* Default menu items to the menu surface so row-wide filters read clearly. */
+  --menu-item-bg: var(--menu-bg, var(--bg));
+  --menu-item-active-filter: brightness(0.92);
   /* --button-hover-transform: var(var(--button-hover-transform));
   --button-hover-filter: var(var(--button-hover-filter)); */
   --transition: 300ms;

package/dist/vars/defaults.css

@@ -18,6 +18,10 @@
   --first-heading-padding: 0;
   --paragraph-padding: 0;
   --paragraph-margin-top: 1em;
+
+  /* DataList defaults: denser than global heading/paragraph text */
+  --data-list-heading-font-size: var(--font-size);
+  --data-list-paragraph-font-size: var(--font-size-small);
 }
 :root {
   --white: #fff;
@@ -400,6 +404,14 @@ a {
   /* --button-hover-filter: var(--hover-filter); */
   --menu-hover-filter: var(--hover-filter);
   --menu-hover-transform: var(--hover-transform);
+  /* Menu items are often on light backgrounds; brighten can look invisible there. */
+  --menu-item-hover-filter: brightness(0.95)
+    drop-shadow(
+      var(--space) var(--space) var(--shadow-blur) var(--shadow-color)
+    );
+  /* Default menu items to the menu surface so row-wide filters read clearly. */
+  --menu-item-bg: var(--menu-bg, var(--bg));
+  --menu-item-active-filter: brightness(0.92);
   /* --button-hover-transform: var(var(--button-hover-transform));
   --button-hover-filter: var(var(--button-hover-filter)); */
   --transition: 300ms;

package/dist/vars/themes/light.css

@@ -9,6 +9,7 @@
   --sidebar-fg: var(--material-color-grey-900);
 
   --menu-fg: var(--material-color-grey-900);
+  --menu-bg: var(--material-color-grey-100);
   --primary-bg: var(--material-color-blue-500);
   --primary-fg: var(--material-color-grey-100);
   --secondary-bg: var(--material-color-grey-400);

package/dist/vars/themes/lightordark.css

@@ -11,8 +11,8 @@
     --container-fg: var(--material-color-blue-grey-800);
     --sidebar-bg: var(--material-color-blue-grey-50);
     --sidebar-fg: var(--material-color-blue-grey-900);
-    /* --menu-bg: var(--material-color-blue-grey-50);
-    --menu-fg: var(--material-color-blue-grey-900); */
+    --menu-bg: var(--material-color-blue-grey-50);
+    --menu-fg: var(--material-color-blue-grey-900);
     --primary-bg: var(--material-color-blue-700);
     --primary-fg: var(--material-color-blue-grey-50);
     --secondary-bg: var(--material-color-blue-grey-100);
@@ -80,8 +80,8 @@
     --container-fg: var(--material-color-blue-grey-50);
     --sidebar-bg: var(--material-color-blue-grey-900);
     --sidebar-fg: var(--material-color-blue-grey-50);
-    /* --menu-bg: var(--material-color-blue-grey-900);
-    --menu-fg: var(--material-color-blue-grey-50); */
+    --menu-bg: var(--material-color-blue-grey-900);
+    --menu-fg: var(--material-color-blue-grey-50);
     --primary-bg: var(--material-color-light-blue-100);
     --primary-fg: var(--material-color-blue-grey-800);
     --warning-fg: var(--white);
@@ -101,7 +101,8 @@
     --input-fg: var(--material-color-blue-grey-50);
     --button-bg: var(--material-color-blue-grey-800);
     --button-fg: var(--material-color-blue-grey-50);
-    --hover-filter: brightness(1.1);
+    --hover-filter: brightness(1.15);
+    --menu-item-hover-filter: brightness(1.25);
     /* Code Block */
     --code-bg: var(--material-color-blue-grey-800); /* Darker background */
     --code-fg: var(--material-color-blue-grey-100); /* Lighter text */

package/dist/vars/typography.css

@@ -18,4 +18,8 @@
   --first-heading-padding: 0;
   --paragraph-padding: 0;
   --paragraph-margin-top: 1em;
+
+  /* DataList defaults: denser than global heading/paragraph text */
+  --data-list-heading-font-size: var(--font-size);
+  --data-list-paragraph-font-size: var(--font-size-small);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
     "dev": "vite dev",
     "build-css": "postcss src/lib/vars/defaults.css -o dist/vars/defaults.css",
@@ -18,7 +18,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
-      "css": "./dist/vars/defaults.css"
+      "css": "./dist/vars/defaults.css",
+      "default": "./dist/index.js"
     },
     "./vars/*": "./dist/vars/*",
     "./themes/*": "./dist/vars/themes/*",