@threadlabs/looma 0.17.0 → 0.17.1

package/components/ui-description-list/ui-description-list.html

@@ -45,6 +45,7 @@
        than that many fit. */
     :host-state([layout="grid"]),
     :host-state([layout="tiles"]) {
+      inline-size: 100%;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
     }
 
@@ -53,6 +54,7 @@
       --_ui-description-value-size: var(--ui-font-size-lg);
       --_ui-description-padding: var(--_tile-padding);
       --_ui-description-border-width: 1px;
+      --_ui-description-border-color: var(--ui-border-strong);
       --_gap: var(--ui-space-3);
       --_gap-compact: var(--ui-space-2);
       --_column-gap: var(--_gap);

package/components/ui-dialog/ui-dialog.html

@@ -1,3 +1,4 @@
+<link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
 <template component="ui-dialog" controller="./ui-dialog.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the dialog is open initially or when set externally.</prop>
@@ -31,7 +32,7 @@
       <h2 class="title" $if="label" $value="label"></h2>
       <button class="close" $ref="close" type="button" aria-label="Close"></button>
     </header>
-    <div class="body"><slot></slot></div>
+    <ui-scroll-area class="body"><slot></slot></ui-scroll-area>
     <footer><slot name="actions"></slot></footer>
   </dialog>
   <style>
@@ -83,7 +84,7 @@
       overflow: hidden;
       flex-direction: column;
       background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
       box-shadow: var(--ui-dialog-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
       visibility: hidden;
@@ -135,7 +136,6 @@
       gap: var(--ui-space-3);
       flex: none;
       padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
-      border-block-end: 1px solid var(--ui-border-default);
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
@@ -210,26 +210,7 @@
     .body {
       flex: 1 1 auto;
       min-block-size: 0;
-      overflow: auto;
-      overscroll-behavior: contain;
       padding: var(--ui-space-5);
-      /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-      --_ui-scroll-fade-direction: to bottom;
-      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-      mask-image: linear-gradient(
-        var(--_ui-scroll-fade-direction),
-        transparent,
-        #000 var(--_ui-scroll-fade-start),
-        #000 calc(100% - var(--_ui-scroll-fade-end)),
-        transparent
-      );
-      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
-      animation-timeline: scroll(self block);
-      animation-range:
-        0 var(--_ui-scroll-fade-size),
-        var(--_ui-scroll-fade-size) calc(100% + 1px),
-        -1px calc(100% - var(--_ui-scroll-fade-size)),
-        calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
     footer {
@@ -239,7 +220,6 @@
       justify-content: flex-end;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-5);
-      border-block-start: 1px solid var(--ui-border-default);
     }
 
     footer:empty {

package/components/ui-disclosure/ui-disclosure.html

@@ -73,7 +73,7 @@
       display: block;
       inline-size: 100%;
       overflow: clip;
-      border-block-end: 1px solid var(--ui-border-default);
+      border-block-end: 1px solid var(--ui-border-divider);
       color: var(--ui-text-primary);
     }
 
@@ -98,7 +98,7 @@
     }
 
     .trigger:hover:not(:disabled) {
-      background: var(--ui-surface-muted);
+      background: color-mix(in srgb, currentColor 6%, transparent);
     }
     .trigger:focus-visible {
       outline: none;

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -38,7 +38,7 @@
     :host {
       padding: var(--ui-space-3);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
     }
@@ -83,7 +83,7 @@
       width: 1.25rem;
       height: 1.25rem;
       padding: 0;
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-control-border);
       border-radius: 2px;
       background: var(--ui-surface);
       cursor: pointer;

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -53,7 +53,7 @@
       overflow: hidden;
       flex-direction: column;
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
       box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
     }
@@ -65,12 +65,12 @@
       gap: var(--ui-space-3);
       padding: var(--ui-space-2) var(--ui-space-3);
       color: var(--ui-text-secondary);
-      border-bottom: 1px solid var(--ui-border);
+      border-bottom: 1px solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
     }
 
-    .header:not(:has(> *)), .empty:not(:has(> *)) {
+    :host > .header:empty, :host > .empty:empty {
       display: none;
     }
 

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -49,7 +49,7 @@
 
     :host {
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
       box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
       overflow: hidden;
@@ -69,7 +69,7 @@
       align-items: center;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-bottom: 1px solid var(--ui-border);
+      border-bottom: 1px solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
       font-weight: var(--ui-font-semibold);
@@ -77,7 +77,7 @@
       letter-spacing: 0.05em;
     }
 
-    .header:not(:has(> *)), .footer:not(:has(> *)), .empty:not(:has(> *)) {
+    :host > .header:empty, :host > .footer:empty, :host > .empty:empty {
       display: none;
     }
 
@@ -194,7 +194,7 @@
 
     .footer {
       padding: var(--ui-space-2) var(--ui-space-3);
-      border-top: 1px solid var(--ui-border);
+      border-top: 1px solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
     }

package/components/ui-editor-slash-menu-item/ui-editor-slash-menu-item.html

@@ -26,9 +26,14 @@
       background: var(--ui-accent-subtle);
     }
     :host[aria-disabled="true"] {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
       cursor: not-allowed;
     }
+    :host[aria-disabled="true"] .title,
+    :host[aria-disabled="true"] .description,
+    :host[aria-disabled="true"] .icon {
+      color: var(--ui-disabled-text);
+    }
 
     .icon {
       display: flex;

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -68,7 +68,7 @@
       max-height: min(28rem, calc(100vh - 24px));
       padding: var(--ui-space-2);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -170,7 +170,7 @@
 
     .sep {
       height: 1px;
-      background: var(--ui-border);
+      background: var(--ui-border-divider);
       margin: var(--ui-space-1) 0;
     }
 

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -128,7 +128,7 @@
       gap: var(--ui-space-1);
       padding: var(--ui-space-1);
       background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: calc(var(--ui-radius-md) + 2px);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       backdrop-filter: blur(10px);
@@ -144,7 +144,7 @@
     .sep {
       width: 1px;
       align-self: stretch;
-      background: var(--ui-border);
+      background: var(--ui-border-divider);
     }
 
     .overflow {
@@ -217,7 +217,7 @@
       min-width: 12rem;
       padding: var(--ui-space-1);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -229,7 +229,7 @@
     .menu-section + .menu-section {
       margin-top: var(--ui-space-1);
       padding-top: var(--ui-space-1);
-      border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
+      border-top: 1px solid var(--ui-border-divider);
     }
 
     .menu-heading {

package/components/ui-editor-toolbar/ui-editor-toolbar.html

@@ -13,7 +13,7 @@
       padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
     }
 
     /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
@@ -67,7 +67,7 @@
     :slotted(.divider) {
       width: 1px;
       height: 20px;
-      background: var(--ui-editor-toolbar-divider, var(--ui-border));
+      background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
       flex-shrink: 0;
       margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
     }
@@ -80,7 +80,7 @@
       min-height: auto;
       padding: var(--ui-editor-toolbar-floating-padding, 4px);
       background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
-      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
       box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       backdrop-filter: blur(10px);
@@ -94,7 +94,7 @@
         left: 0;
         right: 0;
         min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
         border-bottom: none;
         box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
       }
@@ -103,7 +103,7 @@
         position: relative;
         inset: auto;
         min-height: auto;
-        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
         border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
         box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       }

package/components/ui-floating-action-button/ui-floating-action-button.html

@@ -1,6 +1,6 @@
 <template component="ui-floating-action-button">
   <defs>
-    <prop name="disabled" type="boolean" default="false">Disables the button, so it cannot be pressed or focused, and fades it to 60% opacity.</prop>
+    <prop name="disabled" type="boolean" default="false">Disables the button, so it cannot be pressed or focused, and gives it a flat muted treatment.</prop>
     <prop name="mobileOnly" type="boolean" default="false"
     >Hides the button on viewports 768px wide and wider, for a shortcut that only phones need. Make sure the action is reachable another way at those
       widths.</prop>
@@ -69,7 +69,9 @@
     }
 
     :host:disabled {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      box-shadow: none;
       cursor: not-allowed;
     }
 

package/components/ui-icon-button/ui-icon-button.html

@@ -2,10 +2,11 @@
 <template component="ui-icon-button" controller="./ui-icon-button.js">
   <defs>
     <prop name="disabled" type="boolean" default="false"
-    >Disables the button, so it cannot be pressed or focused, and washes it out: the same shape, with less colour and contrast (--ui-disabled-filter).</prop>
-    <prop name="pending" type="boolean" default="false"
+    >Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.</prop>
+    <prop name="loading" type="boolean" default="false"
     >Keeps the button focusable and named while work is in progress. It shows a spinner, states aria-disabled and aria-busy, and prevents activation until
       cleared.</prop>
+    <prop name="pending" type="boolean" default="false">Deprecated alias for loading.</prop>
     <prop name="label" type="string">Accessible name for the icon.</prop>
     <prop name="size" type="sm | md | lg" default="md"
     >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit
@@ -18,8 +19,14 @@
       the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.</prop>
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
-  <button :disabled="disabled" type="button" :aria-label="label" :aria-disabled="{ true: 'true', false: null }[format('%s', pending)]" :aria-busy="pending">
-    <ui-spinner $if="pending" size="sm"></ui-spinner>
+  <button
+    :disabled="disabled"
+    type="button"
+    :aria-label="label"
+    :aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+    :aria-busy="loading or pending"
+  >
+    <ui-spinner $if="loading or pending" size="sm"></ui-spinner>
     <span class="content"><slot></slot></span>
   </button>
   <style>
@@ -125,15 +132,30 @@
       pointer-events: none;
     }
 
-    /* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
-     * surface and icon. The root is the native button, so hiding it outright would hide the dot
-     * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
+    :host-state([anticipatory]):disabled::before {
+      opacity: 0;
+    }
+
+    /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+       proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+    :host-state([anticipatory]) .content {
+      opacity: 1;
+      transform: scale(1);
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease), transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
+    }
+
     @media (hover: hover) and (pointer: fine) {
-      :host-state([anticipatory]):not(:host-state([variant="solid"]), [data-ui-proximity="near"], :hover, :focus-visible) {
+      :host-state([anticipatory]):not(:host-state([variant="solid"]), :host-state([loading]), :host-state([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background: transparent;
         box-shadow: none;
-        color: transparent;
+      }
+
+      :host-state([anticipatory]):not(:host-state([variant="solid"]), :host-state([loading]), :host-state([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+        .content {
+        opacity: 0;
+        transform: scale(0.65);
+        transition-duration: var(--ui-motion-fast);
       }
     }
 
@@ -163,7 +185,7 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease),
         transform var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
@@ -224,13 +246,16 @@
     }
 
     :host-state([variant="outline"]) {
-      border-color: var(--ui-icon-button-border, var(--ui-border-default));
+      border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
       background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+      background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
+      box-shadow: var(--ui-raised);
     }
 
     :host-state([variant="solid"]) {
       background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+      background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
       box-shadow: var(
         --ui-icon-button-solid-shadow,
@@ -245,7 +270,7 @@
     }
 
     :host-state([variant="outline"]):hover:enabled:not([aria-disabled="true"]) {
-      border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+      border-color: var(--ui-icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
     }
 
     :host-state([variant="solid"]):hover:enabled:not([aria-disabled="true"]) {
@@ -256,30 +281,45 @@
       transform: scale(var(--ui-icon-button-active-scale, 0.96));
     }
 
-    :host-state([pending]) {
+    :is(:host-state([loading]), :host-state([pending])) {
       cursor: progress;
     }
 
     .content {
-      display: contents;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    :host-state([pending]) .content {
+    :is(:host-state([loading]), :host-state([pending])) .content {
       display: none;
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      :host-state([anticipatory]) .content {
+        transition: none;
+      }
+    }
+
     :host:focus-visible {
       outline: none;
       box-shadow: var(--ui-focus-halo);
     }
 
-    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
-    /* Disabled washes the button out the way Button does: the same shape, one filter. */
+    /* Disabled is a flat neutral control, independent of the active variant's tone. */
     :host:disabled {
+      border-color: var(--ui-disabled-border);
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-icon-button-disabled-opacity, 1);
       cursor: not-allowed;
       box-shadow: none;
+      background-image: none;
+    }
+
+    :host-state([variant="ghost"]):disabled {
+      border-color: transparent;
     }
 
     :host {

package/components/ui-icon-button/ui-icon-button.js

@@ -5,7 +5,7 @@ export default function controller(host) {
     else host.element.removeAttribute("data-ui-affordance");
   });
   const onClick = (event) => {
-    if (!host.state.pending) return;
+    if (!host.state.loading && !host.state.pending) return;
     event.preventDefault();
     event.stopImmediatePropagation();
   };

package/components/ui-list/ui-list.html

@@ -1,5 +1,7 @@
 <template component="ui-list">
   <defs>
+    <prop name="as" type="ul | ol" default="ul">The native list element. Use ol when item order matters; its native numbers are shown.</prop>
+    <prop name="markers" type="none | disc" default="none">Show disc bullets for a ul of native li elements. An ol always shows native numbers.</prop>
     <prop name="layout" type="rows | grid" default="rows"
     >How the items are laid out. Rows stack the items one per line, for a list read top to bottom. Grid sets them in as many columns as fit, each at least
       --ui-list-min-item-width (14rem) wide, for card items such as pinned or featured entries.</prop>
@@ -7,7 +9,10 @@
     >How much room each item takes. comfortable is a full row, easy to point at, for lists of things to open; compact sets items close together with no row
       padding, for a short list of facts inside other content, such as the features a plan includes.</prop>
   </defs>
-  <ul role="list"><slot></slot></ul>
+  <template $match>
+    <ol $when="as = 'ol'"><slot></slot></ol>
+    <ul $else role="list"><slot></slot></ul>
+  </template>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-list-gap {
@@ -19,32 +24,67 @@
       inherits: false;
     }
 
-    /* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+    /* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
        explicit list role keeps the list announced as one: some browsers drop it from a list with no
        markers. */
     :host {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-1));
+      --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
       display: flex;
       flex-direction: column;
-      gap: var(--ui-list-gap, var(--ui-space-1));
+      inline-size: 100%;
+      gap: var(--_list-gap);
       min-inline-size: 0;
       margin: 0;
       padding: 0;
       list-style: none;
     }
 
+    :host-state([as="ol"]),
+    :host-state([markers="disc"]) {
+      padding-inline-start: var(--ui-space-5);
+    }
+
+    :host-state([as="ol"]) {
+      list-style: decimal;
+    }
+
+    :host-state([markers="disc"]) {
+      list-style: disc;
+    }
+
+    :host > :slotted(li) {
+      box-sizing: border-box;
+      min-inline-size: 0;
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      list-style: inherit;
+    }
+
+    :host > :slotted(li.card) {
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4));
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+      list-style: none;
+    }
+
     /* Compact passes its size to the items through private properties, which cross into each item. */
     :host-state([density="compact"]) {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-2));
       --_ui-list-item-min-size: 0;
       --_ui-list-item-padding-block: 0;
       --_ui-list-item-padding-inline: 0;
       --_ui-list-item-title-weight: var(--ui-font-normal);
-      gap: var(--ui-list-gap, var(--ui-space-2));
+      --_ui-list-native-padding-block: 0;
+      --_ui-list-native-padding-inline: 0;
     }
 
     :host-state([layout="grid"]) {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-3));
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
-      gap: var(--ui-list-gap, var(--ui-space-3));
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/components/ui-list-item/ui-list-item.html

@@ -64,7 +64,7 @@
     :host-state([variant="card"]) {
       padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
       padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
-      border: 1px solid var(--ui-border-default);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
     }

package/components/ui-menu/ui-menu.html

@@ -2,6 +2,7 @@
   <defs>
     <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="open" type="boolean" default="false">Whether the menu is open initially or when set externally.</prop>
+    <prop name="inline" type="boolean" default="false">Displays the menu in the page flow without an overlay or trigger, for an embedded list of actions.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the menu.</prop>
     <prop name="placement" type="string" default="bottom-start">Positions an associated menu relative to its trigger.</prop>
     <state name="internalOpen" :value="false"></state>
@@ -79,7 +80,7 @@
       max-inline-size: inherit;
       padding: var(--ui-space-1);
       background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       max-block-size: inherit;
@@ -91,10 +92,10 @@
       block-size: 0;
       margin: var(--ui-space-1) 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-border-default);
+      border-block-start: 1px solid var(--ui-border-divider);
     }
 
-    :host:not(:host-state([internalOpen])) {
+    :host:not(:host-state([internalOpen])):not(:host-state([inline])) {
       display: none;
     }
 

package/components/ui-menu/ui-menu.js

@@ -40,7 +40,7 @@ export default function controller(host) {
   };
   const ids = createIdResolver(document, () => apply());
   const setup = () => {
-    const nextFor = String(host.state.for ?? "");
+    const nextFor = host.state.inline ? "" : String(host.state.for ?? "");
     const nextPlacement = String(host.state.placement ?? "bottom-start");
     if (nextFor === lastFor && nextPlacement === lastPlacement && surface) return;
     lastFor = nextFor;
@@ -52,18 +52,22 @@ export default function controller(host) {
     surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
   };
   const apply = () => {
+    const inline = Boolean(host.state.inline);
     const externalOpen = Boolean(host.state.open);
     if (externalOpen !== lastExternalOpen) {
       lastExternalOpen = externalOpen;
       host.state.internalOpen = externalOpen;
     }
     setup();
-    const open = Boolean(host.state.internalOpen);
+    const open = inline || Boolean(host.state.internalOpen);
     if (anchor) {
       anchor.setAttribute("aria-haspopup", "menu");
       anchor.setAttribute("aria-expanded", String(open));
     }
-    if (open) {
+    if (inline) {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    } else if (open) {
       surface?.show();
       openOverlay({ id: overlayId, modal: false, element, relatedElements: anchor ? [anchor] : [], dismissible: true, requestClose: close });
     } else {
@@ -81,12 +85,14 @@ export default function controller(host) {
       return;
     }
     host.dispatch("select", { value, trigger });
+    if (host.state.inline) return;
     host.dispatch("close", { open: false, reason: "action", trigger });
     host.state.internalOpen = false;
   };
   const onClick = (event) => select(menuItemFrom(event.target), triggerFor(event));
   const onKeydown = (event) => {
     if (event.key === "Escape") {
+      if (host.state.inline) return;
       event.preventDefault();
       requestTopOverlayClose(document, "escape", "keyboard");
       return;