@threadlabs/looma 0.25.5 → 0.25.6

package/vue/chunks/UiListItem.js

@@ -6,6 +6,7 @@ var _hoisted_1 = [
 	"aria-current",
 	"data-current",
 	"data-highlighted",
+	"data-leading-interactive",
 	"data-variant",
 	"data-wrap",
 	"data-ui-list-item-state"
@@ -29,6 +30,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		leadingInteractive: {
+			type: null,
+			default: false
+		},
 		variant: {
 			type: null,
 			default: "row"
@@ -60,6 +65,16 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the\n      reason in the item's text; use current only for the current destination.",
 				default: false
 			},
+			leadingInteractive: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "leadinginteractive" },
+				description: "Makes the leading region an independent control above the row link. Use it for a checkbox or button; keep noninteractive row icons in the title link when\n      combining them with a leading control.",
+				default: false
+			},
 			variant: {
 				type: {
 					kind: "terminal",
@@ -86,6 +101,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const acceptedProps = {
 			current: false,
 			highlighted: false,
+			leadingInteractive: false,
 			variant: "row",
 			wrap: false
 		};
@@ -98,6 +114,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "highlighted", acceptedProps),
+			leadingInteractive: checkedProp(props["leadingInteractive"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "leadingInteractive", acceptedProps),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
@@ -137,6 +157,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
 			checkedProps.value.highlighted && "highlighted",
 			checkedProps.value.current && "current",
+			checkedProps.value.leadingInteractive && "leadingInteractive",
 			checkedProps.value.wrap && "wrap"
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
@@ -144,6 +165,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"aria-current": checkedProps.value.current ?? void 0,
 				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
 				"data-highlighted": reflectedProp("highlighted", "highlighted", checkedProps.value.highlighted, void 0, false),
+				"data-leading-interactive": reflectedProp("leadingInteractive", "leading-interactive", checkedProps.value.leadingInteractive, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-wrap": reflectedProp("wrap", "wrap", checkedProps.value.wrap, void 0, false),
 				"data-ui-list-item-state": hostState.value || void 0
@@ -157,6 +179,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9f16562f"]]);
+}), [["__scopeId", "data-v-8b9a3e2b"]]);
 //#endregion
 export { UiListItem_default as t };

package/vue/components.css

@@ -1417,7 +1417,7 @@ html[data-ui-input-modality="touch"]
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-checkbox"][data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-v-3bebca63] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-checkbox-size: var(--ui-checkbox-size);
   --_ui-checkbox-invalid-border: var(
@@ -1434,25 +1434,25 @@ html[data-ui-input-modality="touch"]
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-ce204e6e] {
+.text[data-v-3bebca63] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-ce204e6e] {
+.label[data-v-3bebca63] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-ce204e6e] {
+.description[data-v-3bebca63] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-ce204e6e]:empty {
+.description[data-v-3bebca63]:empty {
   display: none;
 }
-input[data-v-ce204e6e] {
+input[data-v-3bebca63] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -1470,21 +1470,21 @@ input[data-v-ce204e6e] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-ce204e6e]::after {
+input[data-v-3bebca63]::after {
   content: "";
   position: absolute;
   opacity: 0;
   transition: opacity 120ms var(--ui-motion-ease);
 }
-input[data-v-ce204e6e]:checked,
-input[data-v-ce204e6e]:indeterminate {
+input[data-v-3bebca63]:checked,
+input[data-v-3bebca63]:indeterminate {
   border-color: var(--ui-accent-solid);
   background: var(--ui-accent-solid);
   box-shadow: var(--ui-control-inset);
 }
 
 /* Centre the tick's box and lift it slightly for the rotated check shape. */
-input[data-v-ce204e6e]:checked::after {
+input[data-v-3bebca63]:checked::after {
   inset: 0;
   margin: auto;
   inline-size: 0.28rem;
@@ -1496,9 +1496,9 @@ input[data-v-ce204e6e]:checked::after {
   border-width: 0 0.125rem 0.125rem 0;
   opacity: 1;
   transform: translateY(-0.09rem) rotate(45deg);
-  animation: ui-checkbox-check-ce204e6e 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+  animation: ui-checkbox-check-3bebca63 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
-input[data-v-ce204e6e]:indeterminate::after {
+input[data-v-3bebca63]:indeterminate::after {
   inset: 50% 0.23rem auto;
   block-size: 0.125rem;
   border-radius: var(--ui-radius-round);
@@ -1506,7 +1506,7 @@ input[data-v-ce204e6e]:indeterminate::after {
   opacity: 1;
   transform: translateY(-50%);
 }
-@keyframes ui-checkbox-check-ce204e6e {
+@keyframes ui-checkbox-check-3bebca63 {
 from {
     opacity: 0;
     transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
@@ -1521,29 +1521,29 @@ to {
 }
 }
 @media (prefers-reduced-motion: reduce) {
-input[data-v-ce204e6e]::after {
+input[data-v-3bebca63]::after {
     transition: none;
     animation: none;
 }
 }
-input[data-v-ce204e6e]:hover:enabled {
+input[data-v-3bebca63]:hover:enabled {
   border-color: var(--ui-accent-solid);
 }
-input[data-v-ce204e6e]:focus-visible {
+input[data-v-3bebca63]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: var(--ui-focus-width);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input[data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input[data-v-3bebca63] {
   border-color: var(--_ui-checkbox-invalid-border);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-3bebca63] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] .description[data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] .description[data-v-3bebca63] {
   color: var(--ui-disabled-text);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-3bebca63] {
   border-color: var(--ui-disabled-border);
   background: var(--ui-disabled-surface);
   box-shadow: none;
@@ -1553,32 +1553,32 @@ input[data-v-ce204e6e]:focus-visible {
 /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
    and the first line centres in that control height, so the label shares a row's baseline.
    Multi-line labels and descriptions still grow downward from that first line. */
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-3bebca63] {
   --_font: var(--ui-font-size-sm);
   --_row: var(--ui-control-size-sm);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-3bebca63] {
   --_font: var(--ui-font-size-md);
   --_row: var(--ui-control-size-lg);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-ce204e6e],
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-3bebca63],
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-3bebca63] {
   --_line: calc(var(--_font) * var(--ui-line-height-md));
   font-size: var(--_font);
   padding-block: calc((var(--_row) - var(--_line)) / 2);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] input[data-v-ce204e6e],
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] input[data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] input[data-v-3bebca63],
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] input[data-v-3bebca63] {
   margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
 }
 @media (pointer: coarse) {
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-ce204e6e] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-3bebca63] {
     --_row: var(--ui-control-min-block-size);
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-checkbox"][hidden][data-v-ce204e6e] {
+[data-component~="ui-checkbox"][hidden][data-v-3bebca63] {
   display: none;
 }
 
@@ -1587,7 +1587,7 @@ input[data-v-ce204e6e]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-cluster"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-v-acd23e4a] {
   --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
@@ -1597,69 +1597,72 @@ input[data-v-ce204e6e]:focus-visible {
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="fixed"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="fixed"][data-v-acd23e4a] {
   flex: none;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="padding=s"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="padding=s"][data-v-acd23e4a] {
   padding: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="padding=m"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="padding=m"][data-v-acd23e4a] {
   padding: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="padding=l"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="padding=l"][data-v-acd23e4a] {
   padding: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=s"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=s"][data-v-acd23e4a] {
   padding-inline-end: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=m"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=m"][data-v-acd23e4a] {
   padding-inline-end: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=l"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=l"][data-v-acd23e4a] {
   padding-inline-end: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=xl"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=xl"][data-v-acd23e4a] {
   padding-inline-end: calc(var(--ui-space-4) * 4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-acd23e4a] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-acd23e4a] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-acd23e4a] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-acd23e4a] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-acd23e4a] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-acd23e4a] {
   align-items: flex-start;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-acd23e4a] {
   align-items: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=baseline"][data-v-acd23e4a] {
+  align-items: baseline;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-acd23e4a] {
   align-items: stretch;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-acd23e4a] {
   justify-content: center;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-acd23e4a] {
   justify-content: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-acd23e4a] {
   justify-content: space-between;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="wrap=nowrap"][data-v-e3a64464] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="wrap=nowrap"][data-v-acd23e4a] {
   flex-wrap: nowrap;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden][data-v-e3a64464] {
+[data-component~="ui-cluster"][hidden][data-v-acd23e4a] {
   display: none;
 }
 
@@ -5601,7 +5604,7 @@ svg[data-v-521a280a-s] {
    padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
    a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
    stay their own. */
-[data-component~="ui-list-item"][data-v-9f16562f] {
+[data-component~="ui-list-item"][data-v-8b9a3e2b] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
@@ -5626,91 +5629,97 @@ svg[data-v-521a280a-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-9f16562f] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-8b9a3e2b] {
   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: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
 }
-[data-component~="ui-list-item"][data-v-9f16562f]:has(.title a[href]:hover) {
-  background: var(--ui-surface-hover);
+[data-component~="ui-list-item"][data-v-8b9a3e2b]:where(:has(.title a[href])):hover {
+  background: var(--ui-selection-surface);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-9f16562f]:has(.title
-  a[href]:hover) {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-8b9a3e2b]:where(:has(.title
+  a[href])):hover {
   border-color: var(--ui-border-strong);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-9f16562f] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-8b9a3e2b] {
   background: var(--ui-selection-surface);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-9f16562f] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-8b9a3e2b] {
   background: var(--ui-selection-surface);
   color: var(--ui-selection-text);
 }
-[data-component~="ui-list-item"][data-v-9f16562f]:has(.title a[href]:focus-visible) {
+[data-component~="ui-list-item"][data-v-8b9a3e2b]:has(.title a[href]:focus-visible) {
   box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
-.leading[data-v-9f16562f],
-.trailing[data-v-9f16562f] {
+.leading[data-v-8b9a3e2b],
+.trailing[data-v-8b9a3e2b] {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.leading[data-v-9f16562f] {
+.leading[data-v-8b9a3e2b] {
   color: var(--ui-text-muted);
   font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-9f16562f] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-8b9a3e2b] {
   color: var(--ui-selection-text);
 }
 
+/* An explicitly independent leading control sits above the stretched row link. */
+[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-8b9a3e2b] {
+  position: relative;
+  z-index: 1;
+}
+
 /* Trailing controls take their own clicks, above the title link's stretched hit area. */
-.trailing[data-v-9f16562f] {
+.trailing[data-v-8b9a3e2b] {
   position: relative;
   z-index: 1;
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
 }
-.content[data-v-9f16562f] {
+.content[data-v-8b9a3e2b] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.title[data-v-9f16562f],
-.description[data-v-9f16562f] {
+.title[data-v-8b9a3e2b],
+.description[data-v-8b9a3e2b] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-9f16562f],
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-9f16562f] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-8b9a3e2b],
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-8b9a3e2b] {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.title[data-v-9f16562f] {
+.title[data-v-8b9a3e2b] {
   font-size: var(--ui-font-size-md);
   font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-9f16562f] {
+.description[data-v-8b9a3e2b] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
 }
-.title > a[data-v-9f16562f-s] {
+.title > a[data-v-8b9a3e2b-s] {
   color: inherit;
   text-decoration: none;
 }
-.title > a[data-v-9f16562f-s]:focus-visible {
+.title > a[data-v-8b9a3e2b-s]:focus-visible {
   outline: none;
   box-shadow: none;
 }
-.title > a[href][data-v-9f16562f-s]::after {
+.title > a[href][data-v-8b9a3e2b-s]::after {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -5718,24 +5727,24 @@ svg[data-v-521a280a-s] {
 }
 
 /* An unused region takes no space. */
-.leading[data-v-9f16562f]:empty,
-.description[data-v-9f16562f]:empty,
-.trailing[data-v-9f16562f]:empty {
+.leading[data-v-8b9a3e2b]:empty,
+.description[data-v-8b9a3e2b]:empty,
+.trailing[data-v-8b9a3e2b]:empty {
   display: none;
 }
 @media (forced-colors: active) {
-[data-component~="ui-list-item"][data-v-9f16562f]:has(a:focus-visible) {
+[data-component~="ui-list-item"][data-v-8b9a3e2b]:has(a:focus-visible) {
     outline: var(--ui-focus-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-focus-width));
 }
-:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-9f16562f], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-9f16562f]):not(:has(a:focus-visible)) {
+:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-8b9a3e2b], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-8b9a3e2b]):not(:has(a:focus-visible)) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-list-item"][hidden][data-v-9f16562f] {
+[data-component~="ui-list-item"][hidden][data-v-8b9a3e2b] {
   display: none;
 }