@threadlabs/looma 0.27.4 → 0.27.5

package/vue/chunks/UiCallout.js

@@ -1,8 +1,12 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { a as vPropValidity, n as checkedProp } from "./props.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, toDisplayString, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiCallout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-tone", "data-ui-callout-state"];
+var _hoisted_1 = [
+	"data-heading",
+	"data-tone",
+	"data-ui-callout-state"
+];
 var _hoisted_2 = {
 	class: "icon",
 	"aria-hidden": "true"
@@ -52,41 +56,93 @@ var _hoisted_7 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_8 = { class: "content" };
+var _hoisted_8 = {
+	key: 5,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+var _hoisted_9 = {
+	key: 6,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+var _hoisted_10 = { class: "content" };
+var _hoisted_11 = {
+	key: 0,
+	class: "heading"
+};
 //#endregion
 //#region .build/vue/UiCallout.vue
 var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiCallout",
-	props: { tone: {
-		type: null,
-		default: "info"
-	} },
+	props: {
+		heading: {
+			type: null,
+			default: ""
+		},
+		tone: {
+			type: null,
+			default: "info"
+		}
+	},
 	setup(__props) {
-		const propValidityContract = { props: { tone: {
-			type: {
-				kind: "terminal",
-				name: "keyword"
+		const propValidityContract = { props: {
+			heading: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "heading" },
+				description: "A short heading above the message, such as \"Before you upgrade\". Optional; without it the message stands alone.",
+				default: ""
 			},
-			required: false,
-			target: { attribute: "tone" },
-			description: "Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, neutral for a muted aside, warning for a\n      caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.",
-			values: [
-				"info",
-				"neutral",
-				"note",
-				"warning",
-				"success",
-				"danger"
-			],
-			default: "info"
-		} } };
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, note or neutral for a muted aside, tip for\n      advice, important for something the reader must not miss, warning for a caution, danger (or its alias caution) for a harmful consequence, and success for\n      a confirmation. These are the tones of VitePress, Docusaurus and GitHub alerts.",
+				values: [
+					"info",
+					"neutral",
+					"note",
+					"tip",
+					"important",
+					"warning",
+					"caution",
+					"success",
+					"danger"
+				],
+				default: "info"
+			}
+		} };
 		const props = __props;
-		const acceptedProps = { tone: "info" };
-		const checkedProps = computed(() => ({ tone: checkedProp(props["tone"], {
-			kind: "terminal",
-			name: "keyword"
-		}, false, "tone", acceptedProps) }));
+		const acceptedProps = {
+			heading: "",
+			tone: "info"
+		};
+		const checkedProps = computed(() => ({
+			heading: checkedProp(props["heading"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "heading", acceptedProps),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", acceptedProps)
+		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -118,6 +174,7 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"data-component": "ui-callout",
 				role: "note"
 			}, nativeAttrs(_ctx.$attrs), {
+				"data-heading": reflectedProp("heading", "heading", checkedProps.value.heading, void 0, false),
 				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-ui-callout-state": hostState.value || void 0
 			}), [createElementVNode("span", _hoisted_2, [
@@ -135,17 +192,27 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					createElementVNode("path", { d: "M13 2v7h7" }, null, -1),
 					createElementVNode("path", { d: "m9.5 17.5 4-4 2 2-4 4H9.5v-2Z" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				checkedProps.value.tone === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
+				checkedProps.value.tone === "tip" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
+					createElementVNode("path", { d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" }, null, -1),
+					createElementVNode("path", { d: "M9 18h6" }, null, -1),
+					createElementVNode("path", { d: "M10 22h4" }, null, -1)
+				])])) : createCommentVNode("v-if", true),
+				checkedProps.value.tone === "important" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [
+					createElementVNode("path", { d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }, null, -1),
+					createElementVNode("path", { d: "M12 15h.01" }, null, -1),
+					createElementVNode("path", { d: "M12 7v4" }, null, -1)
+				])])) : createCommentVNode("v-if", true),
+				checkedProps.value.tone === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[4] || (_cache[4] = [
 					createElementVNode("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }, null, -1),
 					createElementVNode("path", { d: "M12 9v4" }, null, -1),
 					createElementVNode("path", { d: "M12 17h.01" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				checkedProps.value.tone === "success" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [createElementVNode("circle", {
+				checkedProps.value.tone === "success" ? (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[5] || (_cache[5] = [createElementVNode("circle", {
 					cx: "12",
 					cy: "12",
 					r: "10"
 				}, null, -1), createElementVNode("path", { d: "m9 12 2 2 4-4" }, null, -1)])])) : createCommentVNode("v-if", true),
-				checkedProps.value.tone === "danger" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[4] || (_cache[4] = [
+				checkedProps.value.tone === "danger" || checkedProps.value.tone === "caution" ? (openBlock(), createElementBlock("svg", _hoisted_9, [..._cache[6] || (_cache[6] = [
 					createElementVNode("circle", {
 						cx: "12",
 						cy: "12",
@@ -154,12 +221,12 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					createElementVNode("path", { d: "m15 9-6 6" }, null, -1),
 					createElementVNode("path", { d: "m9 9 6 6" }, null, -1)
 				])])) : createCommentVNode("v-if", true)
-			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			]), createElementVNode("div", _hoisted_10, [checkedProps.value.heading ? (openBlock(), createElementBlock("strong", _hoisted_11, toDisplayString(checkedProps.value.heading), 1)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-c8674799"]]);
+}), [["__scopeId", "data-v-492ee9df"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiTabs.js

@@ -6,6 +6,7 @@ import { Fragment, computed, createElementBlock, createElementVNode, createVNode
 var _hoisted_1 = [
 	"data-activation",
 	"data-density",
+	"data-group",
 	"data-label",
 	"data-orientation",
 	"data-stretch",
@@ -33,6 +34,10 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: null,
 			default: "comfortable"
 		},
+		group: {
+			type: null,
+			default: ""
+		},
 		label: {
 			type: null,
 			default: "Tabs"
@@ -75,6 +80,16 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				values: ["comfortable", "compact"],
 				default: "comfortable"
 			},
+			group: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "group" },
+				description: "Tabs with the same nonempty group share one selection: choosing a tab selects the tab with the same label in every other Tabs of that group in the\n      document, and the choice is remembered for the next visit. Use it for alternatives a reader picks once, such as a package manager or language.",
+				default: ""
+			},
 			label: {
 				type: {
 					kind: "terminal",
@@ -121,6 +136,7 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const acceptedProps = {
 			activation: "auto",
 			density: "comfortable",
+			group: "",
 			label: "Tabs",
 			orientation: "horizontal",
 			stretch: false,
@@ -135,6 +151,10 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				kind: "terminal",
 				name: "keyword"
 			}, false, "density", acceptedProps),
+			group: checkedProp(props["group"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "group", acceptedProps),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
@@ -270,6 +290,7 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			propNames: [
 				"activation",
 				"density",
+				"group",
 				"label",
 				"orientation",
 				"stretch",
@@ -325,6 +346,7 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-tabs" }, nativeAttrs(_ctx.$attrs), {
 				"data-activation": reflectedProp("activation", "activation", checkedProps.value.activation, void 0, false),
 				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-group": reflectedProp("group", "group", checkedProps.value.group, void 0, false),
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
 				"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
@@ -362,6 +384,6 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3bf68b5f"]]);
+}), [["__scopeId", "data-v-f10f6ffb"]]);
 //#endregion
 export { UiTabs_default as t };

package/vue/components.css

@@ -1508,7 +1508,7 @@ html[data-ui-input-modality="touch"]
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-callout"][data-v-c8674799] {
+[data-component~="ui-callout"][data-v-492ee9df] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-callout-icon-column: var(--ui-callout-icon-column);
   --_ui-callout-icon: var(--ui-callout-icon);
@@ -1572,22 +1572,26 @@ html[data-ui-input-modality="touch"]
 }
 
 /* One line box tall, so the icon centres on the first line of text. */
-.icon[data-v-c8674799] {
+.icon[data-v-492ee9df] {
   display: grid;
   place-items: center;
   inline-size: var(--_ui-callout-icon-column, 1.125rem);
   block-size: 1lh;
   color: var(--_ui-callout-icon, var(--_callout-icon));
 }
-.icon svg[data-v-c8674799] {
+.icon svg[data-v-492ee9df] {
   inline-size: var(--_ui-callout-icon-size, 1.125rem);
   block-size: var(--_ui-callout-icon-size, 1.125rem);
 }
-.content[data-v-c8674799] {
+.content[data-v-492ee9df] {
   min-inline-size: 0;
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-c8674799],
-[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-c8674799] {
+.heading[data-v-492ee9df] {
+  display: block;
+  font-weight: var(--ui-font-semibold);
+}
+[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-492ee9df],
+[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-492ee9df] {
   --_ui-selection-context-surface: initial;
   --_ui-selection-context-border: initial;
   --_ui-selection-context-text: initial;
@@ -1595,24 +1599,35 @@ html[data-ui-input-modality="touch"]
   --_callout-border: var(--ui-border-strong);
   --_callout-icon: var(--ui-text-secondary);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-c8674799] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=tip"][data-v-492ee9df] {
+  --_callout-surface: var(--ui-success-soft);
+  --_callout-border: var(--ui-success-solid);
+  --_callout-icon: var(--ui-success-solid);
+}
+[data-component~="ui-callout"][data-ui-callout-state~="tone=important"][data-v-492ee9df] {
+  --_callout-surface: var(--ui-accent-soft);
+  --_callout-border: var(--ui-accent-solid);
+  --_callout-icon: var(--ui-accent-solid);
+}
+[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-492ee9df] {
   --_callout-surface: var(--ui-warning-soft);
   --_callout-border: var(--ui-warning-solid);
   --_callout-icon: var(--ui-warning-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-c8674799] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-492ee9df] {
   --_callout-surface: var(--ui-success-soft);
   --_callout-border: var(--ui-success-solid);
   --_callout-icon: var(--ui-success-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-c8674799] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-492ee9df],
+[data-component~="ui-callout"][data-ui-callout-state~="tone=caution"][data-v-492ee9df] {
   --_callout-surface: var(--ui-danger-soft);
   --_callout-border: var(--ui-danger-solid);
   --_callout-icon: var(--ui-danger-solid);
 }
 
 /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
-.content a[data-v-c8674799-s] {
+.content a[data-v-492ee9df-s] {
   color: var(--ui-accent-active);
   text-decoration: underline;
   text-decoration-thickness: 0.06em;
@@ -1620,7 +1635,7 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-callout"][hidden][data-v-c8674799] {
+[data-component~="ui-callout"][hidden][data-v-492ee9df] {
   display: none;
 }
 
@@ -8685,7 +8700,7 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
 }
 
 /* Density resolves into the tab row's own values; the public tokens still override them. */
-[data-component~="ui-tabs"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-v-f10f6ffb] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
   --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
@@ -8695,17 +8710,17 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   --_tab-padding-block: var(--ui-space-2);
   --_tab-padding-inline: var(--ui-space-3);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-f10f6ffb] {
   --_tab-min-block-size: var(--ui-control-size-sm);
   --_tab-padding-block: var(--ui-space-1);
   --_tab-padding-inline: var(--ui-space-2);
 }
-[data-component~="ui-tabs"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-v-f10f6ffb] {
   display: grid;
   inline-size: 100%;
   min-inline-size: 0;
 }
-.list[data-v-3bf68b5f] {
+.list[data-v-f10f6ffb] {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
@@ -8721,8 +8736,8 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   scrollbar-width: thin;
   border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
-.list button[data-v-3bf68b5f],
-.list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+.list > button[slot="tab"][data-v-f10f6ffb-s] {
   min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
   margin: 0 0 calc(-1 * var(--ui-border-width));
   padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
@@ -8745,8 +8760,8 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
  * Trimming applies to block containers, so the box is a block with centred content. */
 @supports (text-box-trim: trim-both) {
-.list button[data-v-3bf68b5f],
-  .list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+  .list > button[slot="tab"][data-v-f10f6ffb-s] {
     display: block;
     text-align: center;
     align-content: center;
@@ -8754,51 +8769,51 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-f10f6ffb] {
   grid-auto-columns: minmax(max-content, 1fr);
 }
-.list button[data-v-3bf68b5f],
-.list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+.list > button[slot="tab"][data-v-f10f6ffb-s] {
   white-space: nowrap;
 }
-.list button[data-v-3bf68b5f]:hover,
-.list > button[slot="tab"][data-v-3bf68b5f-s]:hover {
+.list button[data-v-f10f6ffb]:hover,
+.list > button[slot="tab"][data-v-f10f6ffb-s]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-.list button[aria-selected="true"][data-v-3bf68b5f],
-.list > button[slot="tab"][aria-selected="true"][data-v-3bf68b5f-s] {
+.list button[aria-selected="true"][data-v-f10f6ffb],
+.list > button[slot="tab"][aria-selected="true"][data-v-f10f6ffb-s] {
   color: var(--ui-accent-solid);
   border-block-end-color: var(--ui-accent-solid);
 }
-.list button[data-v-3bf68b5f]:focus-visible,
-.list > button[slot="tab"][data-v-3bf68b5f-s]:focus-visible {
+.list button[data-v-f10f6ffb]:focus-visible,
+.list > button[slot="tab"][data-v-f10f6ffb-s]:focus-visible {
   position: relative;
   outline: none;
   box-shadow: inset 0 0 0 var(--ui-focus-width)
     color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
   border-radius: var(--ui-radius-sm);
 }
-.panels[data-v-3bf68b5f] {
+.panels[data-v-f10f6ffb] {
   min-inline-size: 0;
 }
-.panels > [data-v-3bf68b5f-s] {
+.panels > [data-v-f10f6ffb-s] {
   padding: var(--ui-space-4);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-f10f6ffb] {
   grid-template-columns: max-content minmax(0, 1fr);
   align-items: start;
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-f10f6ffb] {
   grid-auto-flow: row;
   grid-auto-columns: auto;
   border-block-end: 0;
   border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-3bf68b5f],
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-f10f6ffb],
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  > button[slot="tab"][data-v-3bf68b5f-s] {
+  > button[slot="tab"][data-v-f10f6ffb-s] {
   margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
   border-block-end: 0;
   border-inline-end: var(--ui-accent-line-width) solid transparent;
@@ -8806,21 +8821,21 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
 }
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  button[aria-selected="true"][data-v-3bf68b5f],
+  button[aria-selected="true"][data-v-f10f6ffb],
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  > button[slot="tab"][aria-selected="true"][data-v-3bf68b5f-s] {
+  > button[slot="tab"][aria-selected="true"][data-v-f10f6ffb-s] {
   border-inline-end-color: var(--ui-accent-solid);
 }
 @media (prefers-reduced-motion: reduce) {
-.list button[data-v-3bf68b5f],
-  .list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+  .list > button[slot="tab"][data-v-f10f6ffb-s] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tabs"][hidden][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][hidden][data-v-f10f6ffb] {
   display: none;
 }