@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/segmented-control-field/segmented-control.js

@@ -128,51 +128,133 @@ var SegmentedControlOption = (t0) => {
 	return t3;
 };
 /**
-* The pill that slides to the pressed option. It holds a second copy of every
-* label, offset so that only the pressed one falls inside the pill, so the ink
-* changes colour as the pill arrives rather than the instant the value does.
-* Arriving from an empty group it lands in place and pops.
+* The pill that slides to the pressed option, after the options in the group.
+* Arriving from an empty group it lands in place and pops. Give it
+* `IndicatorLabels` for ink that changes colour as the pill arrives.
 *
 * @example
-* <SegmentedControl.Indicator options={options} />
+* <SegmentedControl.Indicator>
+* 	<SegmentedControl.IndicatorLabels>…</SegmentedControl.IndicatorLabels>
+* </SegmentedControl.Indicator>
 */
 var SegmentedControlIndicator = (t0) => {
-	const $ = c(8);
-	const { options } = t0;
+	const $ = c(10);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
 	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = { active: "[data-pressed]" };
-		$[0] = t1;
-	} else t1 = $[0];
+		$[3] = t1;
+	} else t1 = $[3];
 	const ref = useSlidingIndicator(t1);
 	let t2;
-	if ($[1] !== options) {
-		t2 = options.map(_temp);
-		$[1] = options;
-		$[2] = t2;
-	} else t2 = $[2];
+	if ($[4] !== className) {
+		t2 = clsx(segmented_control_module_default.indicator, className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[3] !== t2) {
+	if ($[6] !== props || $[7] !== ref || $[8] !== t2) {
 		t3 = /* @__PURE__ */ jsx("span", {
-			className: segmented_control_module_default.indicatorLabels,
-			children: t2
-		});
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== ref || $[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
 			ref,
 			"aria-hidden": "true",
-			className: segmented_control_module_default.indicator,
-			children: t3
+			className: t2,
+			...props
 		});
-		$[5] = ref;
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+/**
+* A second copy of every option's label inside the pill, offset so that only
+* the pressed one falls inside it. Holds one `IndicatorLabel` per option, in
+* the order the group renders them.
+*
+* @example
+* <SegmentedControl.IndicatorLabels>
+* 	<SegmentedControl.IndicatorLabel>List</SegmentedControl.IndicatorLabel>
+* 	<SegmentedControl.IndicatorLabel>Board</SegmentedControl.IndicatorLabel>
+* </SegmentedControl.IndicatorLabels>
+*/
+var SegmentedControlIndicatorLabels = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(segmented_control_module_default.indicatorLabels, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* One option's label as the pill shows it, matching that option's content.
+*
+* @example
+* <SegmentedControl.IndicatorLabel>List</SegmentedControl.IndicatorLabel>
+*/
+var SegmentedControlIndicatorLabel = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(segmented_control_module_default.option, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /**
 * The styled parts of a single-choice base-ui ToggleGroup: a track of options,
@@ -181,12 +263,17 @@ var SegmentedControlIndicator = (t0) => {
 * `SegmentedControlField`.
 *
 * @example
-* <SegmentedControl.Root filled={view !== null}>
-* 	<SegmentedControl.Legend optionalLabel="optional">View</SegmentedControl.Legend>
+* <SegmentedControl.Root filled={view !== null} requiredness="optional">
+* 	<SegmentedControl.Legend>View <Field.Requiredness optionalLabel="optional" /></SegmentedControl.Legend>
 * 	<SegmentedControl.Group value={view === null ? [] : [view]} onValueChange={next => setView(next[0] ?? null)}>
 * 		<SegmentedControl.Option value="list">List</SegmentedControl.Option>
 * 		<SegmentedControl.Option value="board">Board</SegmentedControl.Option>
-* 		<SegmentedControl.Indicator options={views} />
+* 		<SegmentedControl.Indicator>
+* 			<SegmentedControl.IndicatorLabels>
+* 				<SegmentedControl.IndicatorLabel>List</SegmentedControl.IndicatorLabel>
+* 				<SegmentedControl.IndicatorLabel>Board</SegmentedControl.IndicatorLabel>
+* 			</SegmentedControl.IndicatorLabels>
+* 		</SegmentedControl.Indicator>
 * 	</SegmentedControl.Group>
 * </SegmentedControl.Root>
 */
@@ -196,14 +283,10 @@ var SegmentedControl = {
 	Group: SegmentedControlGroup,
 	Option: SegmentedControlOption,
 	Indicator: SegmentedControlIndicator,
+	IndicatorLabels: SegmentedControlIndicatorLabels,
+	IndicatorLabel: SegmentedControlIndicatorLabel,
 	Description: Field.Description,
 	Error: Field.Error,
 	useIds: Field.useIds
 };
-function _temp(option) {
-	return /* @__PURE__ */ jsx("span", {
-		className: segmented_control_module_default.option,
-		children: option.label
-	}, option.value);
-}
 export { SegmentedControl };

package/dist/components/segmented-control-field/segmented-control.module.js

@@ -1,8 +1,8 @@
 import './segmented-control.css';// src/components/segmented-control-field/segmented-control.module.scss
-var group = "_group_1tamn_3";
-var option = "_option_1tamn_72";
-var indicator = "_indicator_1tamn_135";
-var indicatorLabels = "_indicatorLabels_1tamn_180";
+var group = "_group_1gt1b_3";
+var option = "_option_1gt1b_116";
+var indicator = "_indicator_1gt1b_188";
+var indicatorLabels = "_indicatorLabels_1gt1b_233";
 var segmented_control_module_default = {
 	group,
 	option,

package/dist/components/select-field/select.css

@@ -1,98 +1,194 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._field_abji9_3 {
+  ._field_1crpp_3 {
     display: flex;
     flex-direction: column;
     gap: var(--field-gap, var(--sys-unit-4));
     inline-size: 100%;
   }
-  ._label_abji9_9 {
-    color: var(--sys-color-text);
-    font: var(--sys-font-label-medium);
+  ._field_1crpp_3:has(._trigger_1crpp_9[data-disabled]) {
+    opacity: var(--field-disabled-opacity, 1);
+  }
+  ._label_1crpp_12 {
+    color: var(--field-label-fg, var(--sys-color-text));
+    font: var(--field-label-font, var(--sys-font-label-medium));
     cursor: default;
   }
-  ._trigger_abji9_14 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
+  ._trigger_1crpp_9 {
+    --_field-fg: var(--field-fg, var(--sys-color-text));
+    --_field-muted-fg: var(
+    	--field-muted-fg,
+    	var(--sys-color-text-muted)
+    );
+    --_field-placeholder-fg: var(
+    	--field-placeholder-fg,
+    	var(--sys-color-text-placeholder)
+    );
+    --_field-caret: var(--field-caret, auto);
+  }
+  ._trigger_1crpp_9 {
+    --_field-fill: var(
+    	--field-bg,
+    	var(--sys-color-surface)
+    );
     align-items: center;
     box-sizing: border-box;
-    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
-    border: 1px solid var(--sys-color-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--sys-color-surface);
-    padding: var(--sys-unit-6);
-    color: var(--field-fg);
-    font: var(--sys-font-body-medium);
-  }
-  ._trigger_abji9_14 {
-    outline: 0 solid var(--sys-color-focus-ring);
-    outline-offset: var(--sys-focus-ring-offset);
-  }
-  ._trigger_abji9_14[data-focus-visible] {
-    outline-width: var(--sys-focus-ring-width);
+    min-block-size: var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px)));
+    border: var(--field-border-width, 1px) solid var(--field-border, var(--sys-color-border));
+    border-radius: var(--field-radius, var(--sys-radius-sm));
+    background: var(--_field-fill);
+    padding-block: var(--field-pad-y, var(--sys-unit-6));
+    padding-inline: var(--field-pad-start, var(--field-pad-x, var(--sys-unit-6))) var(--field-pad-end, var(--field-pad-x, var(--sys-unit-6)));
+    box-shadow: var(--field-shadow, none);
+    color: var(--_field-fg);
+    font: var(--field-font, var(--sys-font-body-medium));
+    caret-color: var(--_field-caret);
+    backdrop-filter: var(--field-backdrop-filter, none);
+  }
+  ._trigger_1crpp_9 {
+    outline: 0 solid var(--field-ring-color, var(--sys-color-focus-ring));
+    outline-offset: var(--field-ring-offset, var(--sys-focus-ring-offset));
+  }
+  ._trigger_1crpp_9[data-focus-visible] {
+    outline-width: var(--field-ring-width, var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._trigger_abji9_14 {
-      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    ._trigger_1crpp_9 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard), box-shadow var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._trigger_abji9_14:hover:not([data-disabled], [data-readonly]), ._trigger_abji9_14[data-focused], ._trigger_abji9_14[data-popup-open] {
-    border-color: var(--sys-color-primary);
+  ._trigger_1crpp_9:hover:not([data-disabled],
+  [data-readonly],
+  [data-focused],
+  [data-popup-open]) {
+    border-color: var(--field-hover-border, var(--sys-color-primary));
+  }
+  ._trigger_1crpp_9[data-focused], ._trigger_1crpp_9[data-popup-open] {
+    border-width: var(--field-focus-border-width, var(--field-border-width, 1px));
+    border-color: var(--field-focus-border, var(--sys-color-primary));
+    box-shadow: var(--field-focus-shadow, var(--field-shadow, none));
+  }
+  ._trigger_1crpp_9:has(:autofill) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
   }
-  ._trigger_abji9_14[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
+  ._trigger_1crpp_9[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
   }
-  ._trigger_abji9_14[data-pending] {
+  ._trigger_1crpp_9[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._trigger_abji9_14[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._trigger_abji9_14[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+    caret-color: var(--field-pending-caret, var(--sys-color-text-muted));
+  }
+  ._trigger_1crpp_9[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    border-width: var(--field-invalid-border-width, var(--field-border-width, 1px));
+    box-shadow: var(--field-invalid-shadow, var(--field-shadow, none));
+  }
+  ._trigger_1crpp_9[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    background: var(--sys-color-disabled-bg);
+    --_field-fill: var(
+    	--field-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
   }
-  ._trigger_abji9_14::-webkit-search-cancel-button {
+  ._trigger_1crpp_9::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._trigger_abji9_14::-webkit-search-decoration {
+  ._trigger_1crpp_9::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._trigger_abji9_14 {
+  ._trigger_1crpp_9 {
     display: inline-flex;
   }
-  ._trigger_abji9_14::placeholder {
-    color: var(--field-placeholder-fg);
+  ._trigger_1crpp_9::placeholder {
+    color: var(--_field-placeholder-fg);
+  }
+  ._trigger_1crpp_9:autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._trigger_1crpp_9:-webkit-autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._trigger_1crpp_9:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
   }
-  ._trigger_abji9_14 {
+  ._trigger_1crpp_9:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._trigger_1crpp_9 {
     position: relative;
-    gap: var(--select-gap, var(--sys-unit-6));
+    gap: var(--select-gap, var(--field-inlay-gap, var(--sys-unit-6)));
     justify-content: space-between;
     min-inline-size: 0;
     text-align: start;
     cursor: pointer;
   }
-  ._trigger_abji9_14[data-readonly] {
+  ._trigger_1crpp_9[data-readonly] {
     cursor: default;
   }
-  ._value_abji9_95 {
+  ._value_1crpp_191 {
     flex: 1;
     overflow: hidden;
     min-inline-size: 0;
@@ -100,12 +196,24 @@
     text-overflow: ellipsis;
     line-height: normal;
   }
-  ._icon_abji9_103 {
+  ._value_1crpp_191[data-placeholder] {
+    color: var(--select-placeholder-fg, var(--_field-fg));
+  }
+  ._icon_1crpp_202 {
     display: inline-flex;
     flex-shrink: 0;
-    color: var(--select-icon-fg, var(--field-muted-fg));
+    color: var(--select-icon-fg, var(--_field-muted-fg));
+    font-size: var(--select-icon-size, 1em);
   }
-  ._positioner_abji9_108 {
+  @media not (prefers-reduced-motion) {
+    ._icon_1crpp_202 {
+      transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._icon_1crpp_202[data-popup-open] {
+    rotate: var(--select-icon-open-rotate, none);
+  }
+  ._positioner_1crpp_216 {
     --_popup-edge-padding: var(
     	--popup-edge-padding,
     	var(--sys-unit-16)
@@ -116,52 +224,53 @@
     inherits: false;
     initial-value: 0px;
   }
-  ._positioner_abji9_108 {
+  ._positioner_1crpp_216 {
     outline: none;
   }
-  ._popup_abji9_122 {
+  ._popup_1crpp_230 {
     box-sizing: border-box;
     border: none;
-    border-radius: var(--sys-radius-md);
-    background: var(--sys-color-surface-overlay);
-    padding: var(--sys-unit-4);
-    color: var(--sys-color-text);
+    border-radius: var(--popup-radius, var(--sys-radius-md));
+    background: var(--popup-bg, var(--sys-color-surface-overlay));
+    padding: var(--popup-pad, var(--sys-unit-4));
+    color: var(--popup-fg, var(--sys-color-text));
     transform-origin: var(--transform-origin);
     scrollbar-width: thin;
-    scrollbar-color: var(--sys-color-outline) transparent;
-    box-shadow: var(--sys-elevation-1);
+    scrollbar-color: var(--popup-scrollbar-fg, var(--sys-color-outline)) transparent;
+    box-shadow: var(--popup-shadow, var(--sys-elevation-1));
   }
   @media not (prefers-reduced-motion) {
-    ._popup_abji9_122 {
+    ._popup_1crpp_230 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._popup_abji9_122[data-starting-style], ._popup_abji9_122[data-ending-style] {
+  ._popup_1crpp_230[data-starting-style], ._popup_1crpp_230[data-ending-style] {
     opacity: 0;
     transform: scale(0.96);
   }
-  ._popup_abji9_122 {
+  ._popup_1crpp_230 {
     min-inline-size: var(--anchor-width);
     max-block-size: var(--available-height);
     overflow-y: auto;
   }
-  ._item_abji9_148 {
+  ._item_1crpp_256 {
     display: flex;
     align-items: center;
-    gap: var(--sys-unit-6);
+    gap: var(--popup-item-gap, var(--sys-unit-6));
     box-sizing: border-box;
-    min-block-size: var(--sys-unit-20);
-    border-radius: var(--sys-radius-sm);
-    padding: var(--sys-unit-4) var(--sys-unit-6);
-    color: var(--sys-color-text);
-    font: var(--sys-font-body-medium);
+    min-block-size: var(--popup-item-min-block-size, var(--sys-unit-20));
+    border-radius: var(--popup-item-radius, var(--sys-radius-sm));
+    background: var(--popup-item-bg, transparent);
+    padding: var(--popup-item-pad-y, var(--sys-unit-4)) var(--popup-item-pad-x, var(--sys-unit-6));
+    color: var(--popup-item-fg, var(--popup-fg, var(--sys-color-text)));
+    font: var(--popup-item-font, var(--sys-font-body-medium));
     user-select: none;
   }
-  ._item_abji9_148 {
+  ._item_1crpp_256 {
     position: relative;
     isolation: isolate;
   }
-  ._item_abji9_148::after {
+  ._item_1crpp_256::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -172,60 +281,64 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._item_abji9_148::after {
+    ._item_1crpp_256::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._item_abji9_148:hover:not(:disabled, [data-disabled])::after {
+  ._item_1crpp_256:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._item_abji9_148:active:not(:disabled, [data-disabled])::after {
+  ._item_1crpp_256:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._item_abji9_148 {
+  ._item_1crpp_256 {
     outline: none;
   }
-  ._item_abji9_148[data-highlighted] {
-    background: var(--sys-color-primary-container);
-    color: var(--sys-color-on-primary-container);
+  ._item_1crpp_256[data-selected] {
+    background: var(--popup-item-selected-bg, var(--popup-item-bg, transparent));
+    color: var(--popup-item-selected-fg, var(--popup-item-fg, var(--popup-fg, var(--sys-color-text))));
+  }
+  ._item_1crpp_256[data-highlighted] {
+    background: var(--popup-item-highlighted-bg, var(--sys-color-primary-container));
+    color: var(--popup-item-highlighted-fg, var(--sys-color-on-primary-container));
   }
-  ._item_abji9_148[data-disabled] {
-    color: var(--sys-color-disabled-fg);
+  ._item_1crpp_256[data-disabled] {
+    color: var(--popup-item-disabled-fg, var(--sys-color-disabled-fg));
   }
-  ._statusArea_abji9_195 {
+  ._statusArea_1crpp_308 {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     contain: inline-size;
   }
-  ._statusArea_abji9_195 > * + * {
+  ._statusArea_1crpp_308 > * + * {
     align-self: flex-start;
   }
-  ._status_abji9_195 {
+  ._status_1crpp_308 {
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    gap: var(--sys-unit-4);
+    gap: var(--popup-note-gap, var(--sys-unit-4));
     contain: inline-size;
     min-block-size: 1lh;
-    padding: var(--sys-unit-4) var(--sys-unit-6);
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-body-medium);
+    padding: var(--popup-note-pad-y, var(--sys-unit-4)) var(--popup-note-pad-x, var(--sys-unit-6));
+    color: var(--popup-note-fg, var(--sys-color-text-muted));
+    font: var(--popup-note-font, var(--sys-font-body-medium));
   }
-  ._status_abji9_195:empty {
+  ._status_1crpp_308:empty {
     min-block-size: 0;
     padding: 0;
   }
-  ._itemText_abji9_219 {
+  ._itemText_1crpp_332 {
     flex: 1;
     min-inline-size: 0;
   }
-  ._itemDetail_abji9_223 {
+  ._itemDetail_1crpp_336 {
     display: block;
     color: var(--select-detail-fg, var(--sys-color-text-muted));
     font: var(--select-detail-font, var(--sys-font-body-small));
   }
-  ._indicator_abji9_228 {
+  ._indicator_1crpp_341 {
     display: inline-flex;
     flex-shrink: 0;
     color: var(--select-indicator-fg, var(--sys-color-primary));