@threadlabs/looma 0.21.4 → 0.21.6

package/vanilla/UiStatusMessage.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiStatusMessageEventMap {
 }
 export interface UiStatusMessageElement extends HTMLDivElement {

package/vanilla/UiStatusMessage.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-status-message.css";
 

package/vanilla/UiSwitch.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiSwitchEventMap {
   change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiSwitch.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-switch/ui-switch.js";
 import "../styles/ui-switch.css";

package/vanilla/UiSwitcher.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiSwitcherEventMap {
 }
 export interface UiSwitcherElement extends HTMLDivElement {

package/vanilla/UiSwitcher.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-switcher/ui-switcher.js";
 import "../styles/ui-switcher.css";

package/vanilla/UiTable.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTableEventMap {
 }
 export interface UiTableElement extends HTMLDivElement {

package/vanilla/UiTable.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-table/ui-table.js";
 import "../styles/ui-table.css";

package/vanilla/UiTabs.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTabsEventMap {
   select: CustomEvent<{ readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiTabs.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tabs/ui-tabs.js";
 import "../styles/ui-tabs.css";

package/vanilla/UiText.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTextEventMap {
 }
 export interface UiTextElement extends HTMLElement {

package/vanilla/UiText.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-text.css";
 

package/vanilla/UiTextarea.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTextareaEventMap {
 }
 export interface UiTextareaElement extends HTMLTextAreaElement {

package/vanilla/UiTextarea.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-textarea/ui-textarea.js";
 import "../styles/ui-textarea.css";

package/vanilla/UiToast.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiToastEventMap {
   dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiToast.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-toast/ui-toast.js";
 import "../styles/ui-toast.css";

package/vanilla/UiToastRegion.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiToastRegionEventMap {
   dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiToastRegion.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-toast-region/ui-toast-region.js";
 import "../styles/ui-toast-region.css";

package/vanilla/UiTooltip.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTooltipEventMap {
   open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTooltip.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";

package/vanilla/UiTopBar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTopBarEventMap {
 }
 export interface UiTopBarElement extends HTMLElement {

package/vanilla/UiTopBar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import "../styles/ui-top-bar.css";
 
 export function createUiTopBar(options = {}) {

package/vanilla/UiTree.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTreeEventMap {
   reorder: CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "reorder-rejected": CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTree.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";

package/vanilla/UiTreeItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 export interface UiTreeItemEventMap {
   expand: CustomEvent<{ readonly id: string; readonly expanded: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiTreeItem.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.13 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.14 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";

package/vue/UiActionBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
 

package/vue/UiAffordanceScope.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiAvatar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiAvatarGroup.d.ts

@@ -17,7 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"sm" | "md" | null>;
+        type: PropType<"xs" | "sm" | "md" | null>;
         default: string;
     };
     total: {
@@ -38,7 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"sm" | "md" | null>;
+        type: PropType<"xs" | "sm" | "md" | null>;
         default: string;
     };
     total: {
@@ -47,7 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     label: string | null;
-    size: "sm" | "md" | null;
+    size: "xs" | "sm" | "md" | null;
     max: number | null;
     overflowLabel: string | null;
     total: number | null;

package/vue/UiAvatarGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -11,7 +11,7 @@ const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: 'People' },
   max: { type: null as unknown as PropType<number | null>, default: 5 },
   overflowLabel: { type: null as unknown as PropType<string | null>, default: '{count} more' },
-  size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
+  size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | null>, default: 'md' },
   total: { type: null as unknown as PropType<number | null>, default: null },
 })
 const checkedProps = computed(() => ({
@@ -39,14 +39,14 @@ const checkedProps = computed(() => ({
     undefined,
     undefined,
   ) as string,
-  size: checkedProp<'sm' | 'md'>(
+  size: checkedProp<'xs' | 'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
     undefined,
-    ['sm', 'md'],
-  ) as 'sm' | 'md',
+    ['xs', 'sm', 'md'],
+  ) as 'xs' | 'sm' | 'md',
   total: checkedProp<number>(
     props['total'],
     { kind: 'terminal', name: 'integer' },
@@ -230,6 +230,15 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
   block-size: 1.75rem;
 }
 
+[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=xs"] .overflow {
+  margin-inline-start: -0.1875rem;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  /* Matches the xs Avatar's initials. */
+  font-size: calc(var(--ui-font-size) * 0.5625);
+  line-height: 1;
+}
+
 .overflow[hidden] {
   display: none;
 }

package/vue/UiBadge.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiBreadcrumbItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiBreadcrumbs.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiButton.d.ts

@@ -34,8 +34,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: null;
     };
+    shape: {
+        type: PropType<"rounded" | "pill" | null>;
+        default: string;
+    };
     size: {
-        type: PropType<"sm" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     stretch: {
@@ -87,8 +91,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: null;
     };
+    shape: {
+        type: PropType<"rounded" | "pill" | null>;
+        default: string;
+    };
     size: {
-        type: PropType<"sm" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     stretch: {
@@ -113,7 +121,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     type: "button" | "submit" | "reset" | null;
-    size: "sm" | "md" | "lg" | null;
+    shape: "pill" | "rounded" | null;
+    size: "xs" | "sm" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "link" | "danger" | "solid" | "outline" | "ghost" | null;
     align: "center" | "start" | null;

package/vue/UiButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -16,7 +16,8 @@ const props = defineProps({
   loading: { type: null as unknown as PropType<boolean | null>, default: false },
   pending: { type: null as unknown as PropType<boolean | null>, default: false },
   rel: { type: null as unknown as PropType<string | null>, default: null },
-  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  shape: { type: null as unknown as PropType<'rounded' | 'pill' | null>, default: 'rounded' },
+  size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null>, default: 'md' },
   stretch: { type: null as unknown as PropType<boolean | null>, default: false },
   target: { type: null as unknown as PropType<string | null>, default: null },
   tone: {
@@ -91,14 +92,22 @@ const checkedProps = computed(() => ({
     undefined,
     undefined,
   ),
-  size: checkedProp<'sm' | 'md' | 'lg'>(
+  shape: checkedProp<'rounded' | 'pill'>(
+    props['shape'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'shape',
+    undefined,
+    ['rounded', 'pill'],
+  ) as 'rounded' | 'pill',
+  size: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
     undefined,
-    ['sm', 'md', 'lg'],
-  ) as 'sm' | 'md' | 'lg',
+    ['xs', 'sm', 'md', 'lg'],
+  ) as 'xs' | 'sm' | 'md' | 'lg',
   stretch: checkedProp<boolean>(
     props['stretch'],
     { kind: 'terminal', name: 'boolean' },
@@ -204,6 +213,8 @@ const hostState = computed(() =>
     checkedProps.value.stretch && 'stretch',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.shape && 'shape',
+    checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
@@ -278,6 +289,7 @@ function attribute(value: unknown): any {
     :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
     :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
@@ -317,6 +329,7 @@ function attribute(value: unknown): any {
     :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
     :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
     :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
@@ -484,6 +497,16 @@ function attribute(value: unknown): any {
   }
 }
 
+[data-component~="ui-button"][data-ui-button-state~="size=xs"] {
+  min-block-size: 1.5rem;
+  padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
+  font-size: var(--ui-font-size-xs);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="shape=pill"] {
+  border-radius: var(--ui-button-radius, var(--ui-radius-round));
+}
+
 [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
@@ -586,10 +609,17 @@ function attribute(value: unknown): any {
   border-color: transparent;
 }
 
+/* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
+   edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
+  background-color: var(
+    --ui-button-ghost-active-surface,
+    color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
+  );
   border-color: transparent;
-  box-shadow: var(--ui-pressed);
+  box-shadow:
+    inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%),
+    inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
@@ -639,14 +669,19 @@ function attribute(value: unknown): any {
 /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
    area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
    a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
-   area. Only the link needs it: a hit area on every button would reach over its neighbours. */
+   area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+   Only these need it: a hit area on every button would reach over its neighbours. */
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"] {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"],
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"] {
   position: relative;
 }
 
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"]::after,
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));

package/vue/UiCallout.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCard.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCheckbox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCluster.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCombobox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,

package/vue/UiContainer.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiContextMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCover.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiDescriptionItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiDescriptionList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiDialog.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiDisclosure.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditable.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorInsertTableGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,

package/vue/UiEditorMentionMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorMentionMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorSlashMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorSlashMenuGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorSlashMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.13 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'