bitboss-ui 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/ai/source/FlatListBox.md

@@ -20,6 +20,7 @@
 		class="bb-listbox"
 		:class="{
 			'bb-listbox--compact': compact,
+			'bb-listbox--described': described,
 			'bb-listbox--loading': loading,
 			'bb-listbox--multiple': multiple,
 			'bb-listbox--no-data': !hasOptions,
@@ -30,7 +31,8 @@
 			'--option-height': `${resolvedOptionHeight}px`,
 			'--option-font-size': resolvedOptionFontSize,
 		}"
-		@click.stop="handleClick"
+		@click.capture="handleClick"
+		@click.stop
 		@mousedown.prevent
 	>
 		<span class="bb-listbox__outer-container scrollbar-border">
@@ -46,6 +48,7 @@
 						noDataText || t('common.noDataText').value
 					}}</slot>
 				</span>
+				<!-- eslint-disable vue/attributes-order -- `pt` binds LAST so a consumer listener runs after ours (PASSTHROUGH.md T17) -->
 				<span
 					v-else
 					:id="id"
@@ -58,12 +61,23 @@
 					}"
 					tabindex="-1"
 					@mouseleave="handleMouseleave"
+					v-bind="passthrough?.list"
 				>
 					<span
 						v-for="row in virtualRows"
 						:id="getOptionId(optionsMeta[row.index].valueHash)"
 						:key="optionsMeta[row.index].valueHash"
+						:aria-describedby="
+							namesOwnRow(optionsMeta[row.index].description)
+								? optionDescriptionId(optionsMeta[row.index].valueHash)
+								: undefined
+						"
 						:aria-disabled="optionsMeta[row.index].disabled ? true : undefined"
+						:aria-labelledby="
+							namesOwnRow(optionsMeta[row.index].description)
+								? optionLabelId(optionsMeta[row.index].valueHash)
+								: undefined
+						"
 						:aria-posinset="row.index + 1"
 						:aria-selected="optionsMeta[row.index].selected"
 						:aria-setsize="props.options.length"
@@ -79,8 +93,37 @@
 							transform: `translateY(${row.start}px)`,
 						}"
 						@mouseenter.stop="handleMouseenter(row.index)"
+						v-bind="
+							passthrough?.part?.(
+								'option',
+								{
+									selected: optionsMeta[row.index].selected,
+									disabled: optionsMeta[row.index].disabled || undefined,
+								},
+								optionsMeta[row.index].item
+							)
+						"
 					>
+						<!-- Icons sit OUTSIDE the `option` slot, like the check: the slot
+						replaces the row's text, never what `itemProps` decorates it with. -->
+						<BbIcon
+							v-if="optionsMeta[row.index]['prepend:icon']"
+							aria-hidden="true"
+							class="bb-listbox__option-prepend-icon"
+							:icon="optionsMeta[row.index]['prepend:icon']!"
+							v-bind="
+								passthrough?.part?.(
+									'item-icon',
+									{
+										selected: optionsMeta[row.index].selected,
+										disabled: optionsMeta[row.index].disabled || undefined,
+									},
+									optionsMeta[row.index].item
+								)
+							"
+						/>
 						<slot
+							:description="optionsMeta[row.index].description"
 							:disabled="optionsMeta[row.index].disabled"
 							:focused="focusedIndex === row.index"
 							:index="row.index"
@@ -90,15 +133,88 @@
 							:text="optionsMeta[row.index].text"
 							:value="optionsMeta[row.index].value"
 						>
-							<span class="bb-listbox__option-label">{{
-								optionsMeta[row.index].text
-							}}</span>
-							<BbIcon
-								aria-hidden="true"
-								class="bb-listbox__option-check"
-								:icon="checkIcon"
-							/>
+							<span
+								v-if="optionsMeta[row.index].description"
+								class="bb-listbox__option-content"
+							>
+								<span
+									:id="optionLabelId(optionsMeta[row.index].valueHash)"
+									class="bb-listbox__option-label"
+									v-bind="
+										passthrough?.part?.(
+											'item-text',
+											{
+												selected: optionsMeta[row.index].selected,
+												disabled: optionsMeta[row.index].disabled || undefined,
+											},
+											optionsMeta[row.index].item
+										)
+									"
+									>{{ optionsMeta[row.index].text }}</span
+								>
+								<span
+									:id="optionDescriptionId(optionsMeta[row.index].valueHash)"
+									class="bb-listbox__option-description"
+									v-bind="
+										passthrough?.part?.(
+											'item-description',
+											{
+												selected: optionsMeta[row.index].selected,
+												disabled: optionsMeta[row.index].disabled || undefined,
+											},
+											optionsMeta[row.index].item
+										)
+									"
+									>{{ optionsMeta[row.index].description }}</span
+								>
+							</span>
+							<span
+								v-else
+								class="bb-listbox__option-label"
+								v-bind="
+									passthrough?.part?.(
+										'item-text',
+										{
+											selected: optionsMeta[row.index].selected,
+											disabled: optionsMeta[row.index].disabled || undefined,
+										},
+										optionsMeta[row.index].item
+									)
+								"
+								>{{ optionsMeta[row.index].text }}</span
+							>
 						</slot>
+						<!-- The check takes the append icon's place on the selected row. -->
+						<BbIcon
+							v-if="
+								optionsMeta[row.index]['append:icon'] &&
+								!optionsMeta[row.index].selected
+							"
+							aria-hidden="true"
+							class="bb-listbox__option-append-icon"
+							:icon="optionsMeta[row.index]['append:icon']!"
+							v-bind="
+								passthrough?.part?.(
+									'item-icon',
+									{
+										selected: optionsMeta[row.index].selected,
+										disabled: optionsMeta[row.index].disabled || undefined,
+									},
+									optionsMeta[row.index].item
+								)
+							"
+						/>
+						<!-- OUTSIDE the slot, mirroring BbDropdown's trailing region: the
+						`option` slot replaces the row's TEXT, never its selection state.
+						Nested inside, any custom row silently lost the check and had to
+						redraw it from the `selected` prop. Free to sit here: the glyph is
+						absolutely positioned (BbSelectPopover/index.css), so it costs the
+						slot no width and only a selected row pads short of it. -->
+						<BbIcon
+							aria-hidden="true"
+							class="bb-listbox__option-check"
+							:icon="checkIcon"
+						/>
 					</span>
 				</span>
 				<slot name="options:append"></slot>
@@ -137,7 +253,7 @@ const props = withDefaults(defineProps<FlatListBoxProps<Item>>(), {
 
 const emit = defineEmits<FlatListBoxEvents>();
 
-defineSlots<FlatListBoxSlots<Item>>();
+const slots = defineSlots<FlatListBoxSlots<Item>>();
 
 const { t } = useLocale();
 
@@ -153,7 +269,7 @@ const { touch } = useTouchRowLadder();
 // otherwise the touch ladder applies (see `listboxMetrics`).
 const resolvedOptionHeight = computed(() => {
 	if (props.optionHeight) return props.optionHeight;
-	return listboxOptionHeight(touch.value, !!props.compact);
+	return listboxOptionHeight(touch.value, !!props.compact, !!props.described);
 });
 const resolvedOptionFontSize = computed(() =>
 	listboxOptionFontSize(touch.value)
@@ -177,6 +293,9 @@ const optionsMeta = computed(() =>
 	props.options.map((o, index) => ({
 		index,
 		text: o.text,
+		description: o.description,
+		'prepend:icon': o['prepend:icon'],
+		'append:icon': o['append:icon'],
 		value: o.value,
 		valueHash: o.valueHash,
 		item: o.item,
@@ -191,6 +310,22 @@ const optionsMeta = computed(() =>
 const uid = useId();
 const getOptionId = (hash: Option['valueHash']) =>
 	`${uid}-listbox-option-${hash}`;
+
+/**
+ * A described row's text and description ids. The option's name is otherwise
+ * its whole content ("Ada Lovelace ada@example.com"): with the default row
+ * markup the option is `aria-labelledby` its label and `aria-describedby` its
+ * description. A consumer `#option` slot renders its own content, so the ids
+ * would point at nothing — `slots.option` is only present when a consumer
+ * passed one, because every forwarding layer declares it behind
+ * `v-if="$slots.option"`. Read per render: `$slots` is not reactive.
+ */
+const optionLabelId = (hash: Option['valueHash']) =>
+	`${getOptionId(hash)}__label`;
+const optionDescriptionId = (hash: Option['valueHash']) =>
+	`${getOptionId(hash)}__description`;
+const namesOwnRow = (description: string | undefined) =>
+	!!description && !slots.option;
 const activeDescendantId = computed(() => {
 	if (isNil(focusedIndex.value)) return undefined;
 	const option = optionsMeta.value[focusedIndex.value];
@@ -254,6 +389,13 @@ const confirmOption = () => {
 	}
 };
 
+/**
+ * Bound in the CAPTURE phase: the click is delegated from the option rows to
+ * this container, and a consumer listener bound on a row through `pt:option`
+ * fires at the target — before a bubble-phase listener here. Capture runs
+ * first, so ours-first (PASSTHROUGH.md T17) holds for delegated handlers
+ * too; the separate `@click.stop` keeps the click from leaving the listbox.
+ */
 const handleClick = (event: MouseEvent) => {
 	event.preventDefault();
 	if (
@@ -330,8 +472,19 @@ defineExpose({
 
 ```ts
 import type { Option } from '@/types/Option';
+import type { PtBindings } from '@/types/passthrough';
 
 export type FlatListBoxProps<Item = any> = {
+	/**
+	 * Passthrough resolver handed down by the select popover: `list` is the
+	 * `role="listbox"` node (bound whole); `option` is one option, resolved per
+	 * node with its own `selected` / `disabled`. Internal.
+	 */
+	passthrough?: PtBindings<
+		'list' | 'option' | 'item-text' | 'item-icon' | 'item-description',
+		'selected' | 'disabled'
+	>;
+
 	/**
 	 * Id applied to the `role="listbox"` element itself (not the wrapper), so
 	 * a combobox's `aria-controls` reference resolves to the listbox role.
@@ -376,6 +529,12 @@ export type FlatListBoxProps<Item = any> = {
 	 * 44px / 36px on mobile viewports). An explicit value wins on every viewport.
 	 */
 	optionHeight?: number;
+	/**
+	 * Every row carries a one-line description under its label (the owner's
+	 * `itemProps` declares a `description`). Rows get a fixed two-line height and the
+	 * description ellipsizes; an explicit `optionHeight` still wins.
+	 */
+	described?: boolean;
 };
 
 export type FlatListBoxEvents = {
@@ -412,6 +571,8 @@ export type FlatListBoxOptionSlotProps<Item = any> = {
 	text: string;
 	/** The resolved value for this option. */
 	value: any;
+	/** The resolved `itemProps.description` for this option, when it has one. */
+	description: string | undefined;
 };
 
 export type FlatListBoxSlots<Item = any> = {

package/dist/ai/source/GroupedListBox.md

@@ -15,6 +15,7 @@
 		class="bb-listbox bb-listbox--grouped"
 		:class="{
 			'bb-listbox--compact': compact,
+			'bb-listbox--described': described,
 			'bb-listbox--loading': loading,
 			'bb-listbox--multiple': multiple,
 			'bb-listbox--no-data': !hasOptions,
@@ -26,7 +27,8 @@
 			'--group-header-height': `${resolvedHeaderHeight}px`,
 			'--option-font-size': resolvedOptionFontSize,
 		}"
-		@click.stop="handleClick"
+		@click.capture="handleClick"
+		@click.stop
 		@mousedown.prevent
 	>
 		<span class="bb-listbox__outer-container scrollbar-border">
@@ -42,6 +44,7 @@
 						noDataText || t('common.noDataText').value
 					}}</slot>
 				</span>
+				<!-- eslint-disable vue/attributes-order -- `pt` binds LAST so a consumer listener runs after ours (PASSTHROUGH.md T17) -->
 				<span
 					v-else
 					:id="id"
@@ -52,6 +55,7 @@
 					:style="{ height: `${totalSize}px` }"
 					tabindex="-1"
 					@mouseleave="handleMouseleave"
+					v-bind="passthrough?.list"
 				>
 					<span
 						v-for="row in virtualRows"
@@ -89,11 +93,25 @@
 							v-for="option in groupMetaIndexedByIndex[row.index].options"
 							:id="getOptionId(option.valueHash)"
 							:key="option.valueHash"
+							:aria-describedby="
+								namesOwnRow(
+									optionsMetaIndexedById[option.valueHash].description
+								)
+									? optionDescriptionId(option.valueHash)
+									: undefined
+							"
 							:aria-disabled="
 								optionsMetaIndexedById[option.valueHash].disabled
 									? true
 									: undefined
 							"
+							:aria-labelledby="
+								namesOwnRow(
+									optionsMetaIndexedById[option.valueHash].description
+								)
+									? optionLabelId(option.valueHash)
+									: undefined
+							"
 							:aria-posinset="
 								optionsMetaIndexedById[option.valueHash].indexInGroup + 1
 							"
@@ -116,8 +134,46 @@
 									optionsMetaIndexedById[option.valueHash].globalIndex
 								)
 							"
+							v-bind="
+								passthrough?.part?.(
+									'option',
+									{
+										selected: optionsMetaIndexedById[option.valueHash].selected,
+										disabled:
+											optionsMetaIndexedById[option.valueHash].disabled ||
+											undefined,
+									},
+									optionsMetaIndexedById[option.valueHash].item
+								)
+							"
 						>
+							<!-- Icons sit OUTSIDE the `option` slot, like the check: the slot
+							replaces the row's text, never what `itemProps` decorates it with. -->
+							<BbIcon
+								v-if="optionsMetaIndexedById[option.valueHash]['prepend:icon']"
+								aria-hidden="true"
+								class="bb-listbox__option-prepend-icon"
+								:icon="
+									optionsMetaIndexedById[option.valueHash]['prepend:icon']!
+								"
+								v-bind="
+									passthrough?.part?.(
+										'item-icon',
+										{
+											selected:
+												optionsMetaIndexedById[option.valueHash].selected,
+											disabled:
+												optionsMetaIndexedById[option.valueHash].disabled ||
+												undefined,
+										},
+										optionsMetaIndexedById[option.valueHash].item
+									)
+								"
+							/>
 							<slot
+								:description="
+									optionsMetaIndexedById[option.valueHash].description
+								"
 								:disabled="!!optionsMetaIndexedById[option.valueHash].disabled"
 								:focused="
 									focusedIndex ===
@@ -130,15 +186,98 @@
 								:text="optionsMetaIndexedById[option.valueHash].text"
 								:value="optionsMetaIndexedById[option.valueHash].value"
 							>
-								<span class="bb-listbox__option-label">{{
-									optionsMetaIndexedById[option.valueHash].text
-								}}</span>
-								<BbIcon
-									aria-hidden="true"
-									class="bb-listbox__option-check"
-									:icon="checkIcon"
-								/>
+								<span
+									v-if="optionsMetaIndexedById[option.valueHash].description"
+									class="bb-listbox__option-content"
+								>
+									<span
+										:id="optionLabelId(option.valueHash)"
+										class="bb-listbox__option-label"
+										v-bind="
+											passthrough?.part?.(
+												'item-text',
+												{
+													selected:
+														optionsMetaIndexedById[option.valueHash].selected,
+													disabled:
+														optionsMetaIndexedById[option.valueHash].disabled ||
+														undefined,
+												},
+												optionsMetaIndexedById[option.valueHash].item
+											)
+										"
+										>{{ optionsMetaIndexedById[option.valueHash].text }}</span
+									>
+									<span
+										:id="optionDescriptionId(option.valueHash)"
+										class="bb-listbox__option-description"
+										v-bind="
+											passthrough?.part?.(
+												'item-description',
+												{
+													selected:
+														optionsMetaIndexedById[option.valueHash].selected,
+													disabled:
+														optionsMetaIndexedById[option.valueHash].disabled ||
+														undefined,
+												},
+												optionsMetaIndexedById[option.valueHash].item
+											)
+										"
+										>{{
+											optionsMetaIndexedById[option.valueHash].description
+										}}</span
+									>
+								</span>
+								<span
+									v-else
+									class="bb-listbox__option-label"
+									v-bind="
+										passthrough?.part?.(
+											'item-text',
+											{
+												selected:
+													optionsMetaIndexedById[option.valueHash].selected,
+												disabled:
+													optionsMetaIndexedById[option.valueHash].disabled ||
+													undefined,
+											},
+											optionsMetaIndexedById[option.valueHash].item
+										)
+									"
+									>{{ optionsMetaIndexedById[option.valueHash].text }}</span
+								>
 							</slot>
+							<!-- The check takes the append icon's place on the selected row. -->
+							<BbIcon
+								v-if="
+									optionsMetaIndexedById[option.valueHash]['append:icon'] &&
+									!optionsMetaIndexedById[option.valueHash].selected
+								"
+								aria-hidden="true"
+								class="bb-listbox__option-append-icon"
+								:icon="optionsMetaIndexedById[option.valueHash]['append:icon']!"
+								v-bind="
+									passthrough?.part?.(
+										'item-icon',
+										{
+											selected:
+												optionsMetaIndexedById[option.valueHash].selected,
+											disabled:
+												optionsMetaIndexedById[option.valueHash].disabled ||
+												undefined,
+										},
+										optionsMetaIndexedById[option.valueHash].item
+									)
+								"
+							/>
+							<!-- Outside the slot — see the note in FlatListBox: `option`
+							replaces the row's text, not its selection state. -->
+							<BbIcon
+								aria-hidden="true"
+								class="bb-listbox__option-check"
+								:icon="checkIcon"
+							/>
 						</span>
 					</span>
 				</span>
@@ -179,7 +318,7 @@ const props = withDefaults(defineProps<GroupedListBoxProps>(), {
 
 const emit = defineEmits<GroupedListBoxEvents>();
 
-defineSlots<GroupedListBoxSlots<Item>>();
+const slots = defineSlots<GroupedListBoxSlots<Item>>();
 
 const { t } = useLocale();
 
@@ -195,7 +334,7 @@ const { touch } = useTouchRowLadder();
 // every viewport; otherwise the touch ladder applies (see `listboxMetrics`).
 const resolvedOptionHeight = computed(() => {
 	if (props.optionHeight) return props.optionHeight;
-	return listboxOptionHeight(touch.value, !!props.compact);
+	return listboxOptionHeight(touch.value, !!props.compact, !!props.described);
 });
 
 const resolvedHeaderHeight = computed(() => {
@@ -255,6 +394,9 @@ const optionsMeta = computed(() => {
 
 			const item = o.item;
 			const text = o.text;
+			const description = o.description;
+			const prependIcon = o['prepend:icon'];
+			const appendIcon = o['append:icon'];
 			const value = o.value;
 			// No `focused` field here on purpose: focus is bound directly in the
 			// template (`focusedIndex === globalIndex`), so arrow keys and
@@ -269,6 +411,9 @@ const optionsMeta = computed(() => {
 				disabled,
 				item: item,
 				text: text,
+				description,
+				'prepend:icon': prependIcon,
+				'append:icon': appendIcon,
 				value: value,
 				valueHash: o.valueHash,
 			};
@@ -286,6 +431,22 @@ const optionsMetaIndexedById = computed(() => indexBy(optionsMeta.value, 'id'));
 const uid = useId();
 const getOptionId = (hash: Option['valueHash']) =>
 	`${uid}-listbox-option-${hash}`;
+
+/**
+ * A described row's text and description ids. The option's name is otherwise
+ * its whole content ("Ada Lovelace ada@example.com"): with the default row
+ * markup the option is `aria-labelledby` its label and `aria-describedby` its
+ * description. A consumer `#option` slot renders its own content, so the ids
+ * would point at nothing — `slots.option` is only present when a consumer
+ * passed one, because every forwarding layer declares it behind
+ * `v-if="$slots.option"`. Read per render: `$slots` is not reactive.
+ */
+const optionLabelId = (hash: Option['valueHash']) =>
+	`${getOptionId(hash)}__label`;
+const optionDescriptionId = (hash: Option['valueHash']) =>
+	`${getOptionId(hash)}__description`;
+const namesOwnRow = (description: string | undefined) =>
+	!!description && !slots.option;
 const activeDescendantId = computed(() => {
 	if (isNil(focusedIndex.value)) return undefined;
 	const focusedOption = optionsMeta.value[focusedIndex.value];
@@ -405,6 +566,13 @@ const confirmOption = () => {
 	}
 };
 
+/**
+ * Bound in the CAPTURE phase: the click is delegated from the option rows to
+ * this container, and a consumer listener bound on a row through `pt:option`
+ * fires at the target — before a bubble-phase listener here. Capture runs
+ * first, so ours-first (PASSTHROUGH.md T17) holds for delegated handlers
+ * too; the separate `@click.stop` keeps the click from leaving the listbox.
+ */
 const handleClick = (event: MouseEvent) => {
 	event.preventDefault();
 	if (
@@ -482,8 +650,19 @@ defineExpose({
 
 ```ts
 import type { GroupedOptions, Option } from '@/types/Option';
+import type { PtBindings } from '@/types/passthrough';
 
 export type GroupedListBoxProps = {
+	/**
+	 * Passthrough resolver handed down by the select popover: `list` is the
+	 * `role="listbox"` node (bound whole); `option` is one option, resolved per
+	 * node with its own `selected` / `disabled`. Internal.
+	 */
+	passthrough?: PtBindings<
+		'list' | 'option' | 'item-text' | 'item-icon' | 'item-description',
+		'selected' | 'disabled'
+	>;
+
 	/**
 	 * Id applied to the `role="listbox"` element itself (not the wrapper), so
 	 * a combobox's `aria-controls` reference resolves to the listbox role.
@@ -527,6 +706,12 @@ export type GroupedListBoxProps = {
 	 * 44px / 36px on mobile viewports). An explicit value wins on every viewport.
 	 */
 	optionHeight?: number;
+	/**
+	 * Every row carries a one-line description under its label (the owner's
+	 * `itemProps` declares a `description`). Rows get a fixed two-line height and the
+	 * description ellipsizes; an explicit `optionHeight` still wins.
+	 */
+	described?: boolean;
 	/**
 	 * Duration of open/close transition in milliseconds.
 	 *
@@ -569,6 +754,8 @@ export type GroupedListBoxOptionSlotProps<Item = any> = {
 	text: string;
 	/** The resolved value for this option. */
 	value: any;
+	/** The resolved `itemProps.description` for this option, when it has one. */
+	description: string | undefined;
 };
 
 /** Props exposed by the `group` slot. */

package/dist/ai/source/GuidesComponent.md

@@ -250,6 +250,13 @@ watch(selectedExamplePath, (examplePath) => {
 </script>
 
 <style scoped lang="postcss">
+/*
+ * Tailwind v4: an SFC \3c style> block is its own PostCSS pass, so `@apply`
+ * cannot see the theme or the class-based `dark` variant without this.
+ * Emits nothing itself — it only makes the utilities resolvable.
+ */
+@reference '../../assets/css/index.css';
+
 .guides-component {
 	@apply overflow-hidden border text-[color:var(--bb-text)];
 	background: var(--bb-panel);
@@ -278,7 +285,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__code {
-	@apply rounded px-1 py-0.5 font-mono text-[13px];
+	@apply rounded-sm px-1 py-0.5 font-mono text-[13px];
 	background: var(--bb-muted);
 	color: var(--bb-text);
 }
@@ -288,12 +295,12 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__select-label {
-	@apply text-[11px] font-semibold uppercase tracking-[0.06em];
+	@apply text-[11px] font-semibold tracking-[0.06em] uppercase;
 	color: var(--bb-text-muted);
 }
 
 .guides-component__select {
-	@apply w-full px-3 py-2 text-sm outline-none;
+	@apply w-full px-3 py-2 text-sm outline-hidden;
 	background: var(--bb-panel);
 	border: var(--bb-border-w) solid var(--bb-border);
 	border-radius: var(--bb-radius);
@@ -311,7 +318,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__tab {
-	@apply whitespace-nowrap px-2.5 py-1.5 text-[13px] transition-colors;
+	@apply px-2.5 py-1.5 text-[13px] whitespace-nowrap transition-colors;
 	border-radius: var(--bb-radius);
 	color: var(--bb-text-muted);
 }
@@ -343,7 +350,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__preview-card {
-	@apply border-b lg:border-b-0 lg:border-r;
+	@apply border-b lg:border-r lg:border-b-0;
 	border-color: var(--bb-border);
 }
 
@@ -352,7 +359,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__preview-title {
-	@apply text-[11px] font-semibold uppercase tracking-[0.06em];
+	@apply text-[11px] font-semibold tracking-[0.06em] uppercase;
 	color: var(--bb-text-muted);
 }
 
@@ -369,7 +376,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__source {
-	@apply m-0 max-h-[28rem] overflow-auto p-3 font-mono text-[13px] leading-relaxed;
+	@apply m-0 max-h-112 overflow-auto p-3 font-mono text-[13px] leading-relaxed;
 	background: color-mix(in oklab, var(--bb-text) 90%, transparent);
 	border-radius: var(--bb-radius);
 	color: color-mix(in oklab, var(--bb-panel) 90%, white);