@galaxy-io/dls 1.5.14 → 1.5.16

package/dist/charts/BarChart.d.ts

@@ -16,6 +16,31 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
     /** Tint the active category's full band, marking the hover position even
      * where there is no data. @default true */
     showCursor?: boolean;
+    /**
+     * Floor, in px, for how short a *stack segment* may render — so a series
+     * that is a rounding error next to its neighbours still leaves a visible
+     * mark instead of disappearing. `0`, the default, draws segments at their
+     * true size.
+     *
+     * Opt-in because it is a lie, and a small one is worth being deliberate
+     * about: the pixels a sliver gains are taken from the other segments in the
+     * same stack, in proportion to how much slack each has. The stack's total
+     * height, its cap position and every value in the tooltip stay exactly
+     * right — only the split between segments shifts, by at most a couple of
+     * pixels per rescued sliver. Reach for it when presence/absence is the
+     * thing being read (an error series, a small cohort); leave it off when the
+     * chart is being read for proportion.
+     *
+     * Ignored on unstacked bars, which already have a 2px floor — there is no
+     * neighbour to take from, so it costs nothing there. Ignored, too, when a
+     * stack is so crowded that honouring it would pin every segment to the
+     * minimum: at that point the bar would stop describing its data, and the
+     * chart is better off saying so. Fold the tail into an "Other" component
+     * instead.
+     *
+     * @default 0
+     */
+    minSegmentLength?: number;
     /**
      * Fires when a bar segment or a category is clicked. Supplying it is what
      * makes the plot clickable.
@@ -48,5 +73,5 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
  * `bars` in a group render side by side, several `components` in a bar stack,
  * and a chart doing both at once needs no extra configuration.
  */
-declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
+declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, minSegmentLength, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -17,7 +17,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * `bars` in a group render side by side, several `components` in a bar stack,
 * and a chart doing both at once needs no extra configuration.
 */
-var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, minSegmentLength = 0, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -78,7 +78,8 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		normalization,
 		isStacked,
 		domain,
-		resolveColor
+		resolveColor,
+		minSegmentLength
 	}), [
 		groups,
 		plotWidth,
@@ -86,7 +87,8 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		normalization,
 		isStacked,
 		domain,
-		resolveColor
+		resolveColor,
+		minSegmentLength
 	]);
 	const isEmpty = groups.length === 0;
 	const legendItems = useMemo(() => getBarLegendItems({

package/dist/charts/barChartGeometry.d.ts

@@ -106,6 +106,12 @@ interface BuildBarChartGeometryArgs<TMetric extends string, TComponentKey extend
      * record to answer, which this module has no business importing.
      */
     resolveColor: (args: ResolveBarColorArgs<TMetric>) => string;
+    /**
+     * Minimum rendered length for a stack segment, in px. `0` disables it.
+     *
+     * See the prop of the same name on `BarChart` for what it costs.
+     */
+    minSegmentLength: number;
 }
 export interface ResolveBarColorArgs<TMetric extends string> {
     metric: TMetric;
@@ -116,5 +122,5 @@ export interface ResolveBarColorArgs<TMetric extends string> {
     /** The component's own palette override, if it declared one. */
     explicit?: ChartPalette;
 }
-export declare function buildBarChartGeometry<TMetric extends string, TComponentKey extends string = string>({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, }: BuildBarChartGeometryArgs<TMetric, TComponentKey>): BarChartGeometry<TMetric, TComponentKey>;
+export declare function buildBarChartGeometry<TMetric extends string, TComponentKey extends string = string>({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, minSegmentLength, }: BuildBarChartGeometryArgs<TMetric, TComponentKey>): BarChartGeometry<TMetric, TComponentKey>;
 export {};

package/dist/charts/barChartGeometry.js

@@ -111,7 +111,86 @@ function getBarValueDomain(groups, normalization) {
 	}
 	return [min, max];
 }
-function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor }) {
+/**
+* Grow every under-sized segment to its minimum, paying for it out of the
+* segments that have room to spare.
+*
+* `lengths` and `minima` are one side of one stack, in baseline-outward order.
+* Returns `null` when nothing needs doing, and — deliberately — also when the
+* bill cannot be paid: if the surplus across the whole side is smaller than the
+* total deficit, every segment would end up pinned at its minimum and the bar
+* would no longer be a picture of its data. A stack that crowded is telling the
+* caller to drop the minimum or fold the tail into an "Other" component, and
+* silently redrawing it as a ladder of equal blocks would hide that.
+*/
+function distributeMinSegmentLengths(lengths, minima) {
+	const result = [...lengths];
+	let deficit = 0;
+	let surplus = 0;
+	lengths.forEach((length, index) => {
+		if (length < minima[index]) {
+			deficit += minima[index] - length;
+			result[index] = minima[index];
+		} else surplus += length - minima[index];
+	});
+	if (deficit === 0 || surplus < deficit) return null;
+	const donors = result.map((length, index) => ({
+		index,
+		slack: length - minima[index]
+	})).filter((donor) => donor.slack > 0).sort((a, b) => b.slack - a.slack);
+	let remainingSlack = surplus;
+	for (const donor of donors) {
+		if (deficit <= 0) break;
+		const share = Math.min(donor.slack, Math.ceil(donor.slack / remainingSlack * deficit));
+		result[donor.index] -= share;
+		remainingSlack -= donor.slack;
+		deficit -= share;
+	}
+	return result;
+}
+/**
+* Snapped pixel spans for one bar's segments, with {@link minSegmentLength}
+* enforced.
+*
+* The enforcement re-lays the affected side of the stack *cumulatively* from the
+* baseline outward, rather than nudging each segment's own edges. That is the
+* only way to grow a sliver without breaking the invariant the rounding above
+* exists to protect: each segment starts exactly where the previous one ended,
+* so there is still one shared edge per seam and no overlap. And because the
+* redistribution is zero-sum, the side's total extent is unchanged — the cap
+* still lands on the same axis value it did before.
+*/
+function resolveSegmentExtents(intervals, valueScale, minSegmentLength) {
+	const extents = intervals.map(({ from, to }) => ({
+		fromY: Math.round(valueScale(from)),
+		toY: Math.round(valueScale(to))
+	}));
+	if (minSegmentLength <= 0) return extents;
+	const adjustSide = (sign) => {
+		const indices = intervals.map((interval, index) => ({
+			interval,
+			index
+		})).filter(({ interval }) => Math.sign(interval.value) === sign).map(({ index }) => index);
+		if (indices.length === 0) return;
+		const adjusted = distributeMinSegmentLengths(indices.map((index) => Math.abs(extents[index].fromY - extents[index].toY)), indices.map((_, position) => position === 0 ? minSegmentLength : minSegmentLength + 2));
+		if (!adjusted) return;
+		const direction = sign > 0 ? -1 : 1;
+		const first = extents[indices[0]];
+		let cursor = sign > 0 ? first.fromY : first.toY;
+		indices.forEach((index, position) => {
+			const next = cursor + direction * adjusted[position];
+			extents[index] = {
+				fromY: cursor,
+				toY: next
+			};
+			cursor = next;
+		});
+	};
+	adjustSide(1);
+	adjustSide(-1);
+	return extents;
+}
+function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, minSegmentLength }) {
 	const valueScale = buildValueScale(domain, [plotHeight, 0]);
 	const baselineY = valueScale(0);
 	const rects = [];
@@ -139,6 +218,8 @@ function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, i
 			const barX = barsStartX + barIndex * (barWidth + effectiveBarGap);
 			const values = bar.components.map((component) => sanitizeValue(component.value));
 			const intervals = stackComponents(values, normalization);
+			const isStackedBar = bar.components.length > 1;
+			const extents = resolveSegmentExtents(intervals, valueScale, isStackedBar ? minSegmentLength : 0);
 			let firstPositive = -1;
 			let lastPositive = -1;
 			let firstNegative = -1;
@@ -154,15 +235,13 @@ function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, i
 				}
 			});
 			bar.components.forEach((component, componentIndex) => {
-				const { value, from, to } = intervals[componentIndex];
+				const { value } = intervals[componentIndex];
 				if (value === 0) return;
 				const isNegative = value < 0;
 				const isCap = componentIndex === (isNegative ? lastNegative : lastPositive);
-				const fromY = Math.round(valueScale(from));
-				const toY = Math.round(valueScale(to));
+				const { fromY, toY } = extents[componentIndex];
 				const topY = Math.min(fromY, toY);
 				const rawHeight = Math.abs(fromY - toY);
-				const isStackedBar = bar.components.length > 1;
 				const shave = componentIndex === (isNegative ? firstNegative : firstPositive) ? 0 : 2;
 				const height = Math.max(isStackedBar ? 0 : 2, rawHeight - shave);
 				const y = isNegative ? topY + shave : topY;

package/dist/inputs/SelectInput.d.ts

@@ -38,7 +38,7 @@ export interface SelectInputProps {
     /** Trigger width. A number is px. */
     width?: number | string;
     fillWidth?: boolean;
-    /** Panel width. Defaults to matching the trigger. */
+    /** Panel width. By default, fits the options and is at least as wide as the trigger. */
     dropdownWidth?: number | string;
     isDisabled?: boolean;
     isRequired?: boolean;

package/dist/inputs/SelectInput.js

@@ -6,7 +6,6 @@ import FlexItem from "../containers/FlexItem.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import Spacing from "../containers/Spacing.js";
 import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
@@ -72,11 +71,8 @@ var StyledSearchInput = withTheme(/*#__PURE__*/ styled("input")({
 		"s14m69un-6": [_exp13()]
 	}
 }));
-var _exp14 = () => ({ $width }) => getCssSizeValue($width, 200);
-var _exp15 = () => ({ $fillWidth, $width }) => {
-	if ($width) return getCssSizeValue($width);
-	return $fillWidth ? "100%" : "auto";
-};
+var _exp14 = () => ({ $minWidth }) => `min(${getCssSizeValue($minWidth)}, calc(100vw - 16px))`;
+var _exp15 = () => ({ $width }) => getCssSizeValue($width, "max-content");
 var SelectInputContent = /*#__PURE__*/ styled("div")({
 	name: "SelectInputContent",
 	class: "sbfl8n6",
@@ -86,39 +82,37 @@ var SelectInputContent = /*#__PURE__*/ styled("div")({
 		"sbfl8n6-1": [_exp15()]
 	}
 });
-var _exp16 = () => ({ $fillWidth, $width }) => $fillWidth || $width ? "100%" : "auto";
 var SelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
 	name: "SelectInputOptionsContainer",
 	class: "sk260f0",
-	propsAsIs: false,
-	vars: { "sk260f0-0": [_exp16()] }
+	propsAsIs: false
 });
-var _exp17 = () => ({ theme, $isSelected, $isFocused }) => {
+var _exp16 = () => ({ theme, $isSelected, $isFocused }) => {
 	if ($isSelected || $isFocused) return theme.color.background.secondary;
 	return "transparent";
 };
-var _exp19 = () => ({ theme }) => theme.color.background.secondary;
+var _exp18 = () => ({ theme }) => theme.color.background.secondary;
 var SelectInputOption = withTheme(/*#__PURE__*/ styled("button")({
 	name: "SelectInputOption",
 	class: "so10ras",
 	propsAsIs: false,
 	vars: {
-		"so10ras-0": [_exp17()],
-		"so10ras-1": [_exp19()]
+		"so10ras-0": [_exp16()],
+		"so10ras-1": [_exp18()]
 	}
 }));
-var _exp20 = () => ({ theme, $isSelected, $isFocused }) => {
+var _exp19 = () => ({ theme, $isSelected, $isFocused }) => {
 	if ($isSelected || $isFocused) return theme.color.background.tertiary;
 	return "transparent";
 };
-var _exp22 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp21 = () => ({ theme }) => theme.color.background.tertiary;
 var PinnedOptionButton = withTheme(/*#__PURE__*/ styled("button")({
 	name: "PinnedOptionButton",
 	class: "poe2ind",
 	propsAsIs: false,
 	vars: {
-		"poe2ind-0": [_exp20()],
-		"poe2ind-1": [_exp22()]
+		"poe2ind-0": [_exp19()],
+		"poe2ind-1": [_exp21()]
 	}
 }));
 var OptionIconSlot = /*#__PURE__*/ styled("span")({
@@ -153,11 +147,7 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 		onOpenChange
 	});
 	const triggerWidth = useElementWidth(triggerRef);
-	const resolvedDropdownWidth = useMemo(() => dropdownWidth ?? triggerWidth ?? width, [
-		dropdownWidth,
-		triggerWidth,
-		width
-	]);
+	const dropdownMinWidth = dropdownWidth ?? triggerWidth ?? width ?? 200;
 	const selectedOption = value ?? null;
 	const effectiveIsDisabled = isDisabled || options.length <= 1;
 	const visible = isOpen;
@@ -285,8 +275,8 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 		return isSearchable && focusedOptionIndex === index + filteredPinnedOptions.length && index >= 0;
 	};
 	const dropdownBody = /* @__PURE__ */ jsxs(SelectInputContent, {
-		$fillWidth: fillWidth,
-		$width: resolvedDropdownWidth,
+		$minWidth: dropdownMinWidth,
+		$width: dropdownWidth,
 		children: [
 			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
 				ref: (el) => {
@@ -304,58 +294,55 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 					cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 					isEllipsis: true,
 					children: pinnedOption.label
-				}), isPinnedOptionSelected(pinnedOption) && /* @__PURE__ */ jsx(Icon, {
+				}), isPinnedOptionSelected(pinnedOption) && /* @__PURE__ */ jsx(OptionIconSlot, { children: /* @__PURE__ */ jsx(Icon, {
 					component: CheckIcon,
 					variant: IconVariant.TERTIARY,
 					weight: IconWeight.BOLD,
 					size: 12
-				})]
+				}) })]
 			}, pinnedOption.id)), /* @__PURE__ */ jsx(HorizontalDivider, {})] }),
-			/* @__PURE__ */ jsx(SelectInputOptionsContainer, {
-				$fillWidth: fillWidth,
-				$width: resolvedDropdownWidth,
-				children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
-					const absoluteIndex = filteredPinnedOptions.length + index;
-					return /* @__PURE__ */ jsxs(SelectInputOption, {
-						ref: (el) => {
-							optionsRefs.current[absoluteIndex] = el;
-						},
-						$isSelected: option.id === value?.id,
-						$isFocused: isOptionFocused(index),
-						onClick: () => handleOptionSelect(option),
-						onMouseEnter: () => setFocusedOptionIndex(absoluteIndex),
-						children: [/* @__PURE__ */ jsxs(FlexWrapper, {
-							alignItems: AlignItems.CENTER,
-							gap: 8,
-							fillWidth: true,
-							children: [option.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: option.icon }), /* @__PURE__ */ jsx(FlexItem, {
-								grow: 1,
-								shrink: 1,
-								minWidth: 0,
-								children: /* @__PURE__ */ jsx(Text, {
-									size: getInputTextSize(size),
-									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-									isEllipsis: true,
-									variant: option.variant ?? TextVariant.PRIMARY,
-									children: option.label
-								})
-							})]
-						}), option.id === value?.id && /* @__PURE__ */ jsx(Icon, {
-							component: CheckIcon,
-							variant: IconVariant.TERTIARY,
-							weight: IconWeight.BOLD,
-							size: 12
+			/* @__PURE__ */ jsx(SelectInputOptionsContainer, { children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+				const absoluteIndex = filteredPinnedOptions.length + index;
+				return /* @__PURE__ */ jsxs(SelectInputOption, {
+					ref: (el) => {
+						optionsRefs.current[absoluteIndex] = el;
+					},
+					$isSelected: option.id === value?.id,
+					$isFocused: isOptionFocused(index),
+					onClick: () => handleOptionSelect(option),
+					onMouseEnter: () => setFocusedOptionIndex(absoluteIndex),
+					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+						alignItems: AlignItems.CENTER,
+						gap: 8,
+						minWidth: 0,
+						grow: 1,
+						children: [option.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: option.icon }), /* @__PURE__ */ jsx(FlexItem, {
+							grow: 1,
+							shrink: 1,
+							minWidth: 0,
+							children: /* @__PURE__ */ jsx(Text, {
+								size: getInputTextSize(size),
+								cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+								isEllipsis: true,
+								variant: option.variant ?? TextVariant.PRIMARY,
+								children: option.label
+							})
 						})]
-					}, option.id);
-				}) : /* @__PURE__ */ jsx("div", {
-					style: { padding: "8px" },
-					children: /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.TERTIARY,
-						size: getInputTextSize(size),
-						children: "No options found"
-					})
+					}), option.id === value?.id && /* @__PURE__ */ jsx(OptionIconSlot, { children: /* @__PURE__ */ jsx(Icon, {
+						component: CheckIcon,
+						variant: IconVariant.TERTIARY,
+						weight: IconWeight.BOLD,
+						size: 12
+					}) })]
+				}, option.id);
+			}) : /* @__PURE__ */ jsx(FlexWrapper, {
+				padding: 8,
+				children: /* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.TERTIARY,
+					size: getInputTextSize(size),
+					children: "No options found"
 				})
-			}),
+			}) }),
 			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
 				onClick: handleReset,
 				$isSelected: false,
@@ -390,6 +377,7 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 	return /* @__PURE__ */ jsxs(FlexWrapper, {
 		direction: FlexDirection.COLUMN,
 		gap: 4,
+		minWidth: 0,
 		fillWidth,
 		children: [
 			label && /* @__PURE__ */ jsx(InputLabel, {
@@ -401,7 +389,7 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 				body: dropdownBody,
 				isOpen: visible,
 				onClose: handleClose,
-				minWidth: resolvedDropdownWidth ?? 200,
+				minWidth: 0,
 				offset: [0, 3],
 				fillWidth,
 				noPadding: true,
@@ -417,27 +405,26 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 					onMouseEnter: handleMouseEnter,
 					onMouseLeave: handleMouseLeave,
 					onClick: handleToggle,
-					children: [
-						/* @__PURE__ */ jsx(StyledSearchInput, {
-							ref: inputRef,
-							$size: size,
-							$isActive: visible ?? false,
-							$isDisabled: effectiveIsDisabled,
-							$isError: !!error,
-							$width: width,
-							$fillWidth: fillWidth,
-							type: "text",
-							placeholder,
-							value: searchTerm,
-							onChange: handleInputChange,
-							onKeyDown: handleSearchKeyDown,
-							autoComplete: "off",
-							autoCorrect: "off",
-							disabled: effectiveIsDisabled,
-							onClick: (e) => e.stopPropagation()
-						}),
-						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
+					children: [/* @__PURE__ */ jsx(StyledSearchInput, {
+						ref: inputRef,
+						$size: size,
+						$isActive: visible ?? false,
+						$isDisabled: effectiveIsDisabled,
+						$isError: !!error,
+						$width: width,
+						$fillWidth: fillWidth,
+						type: "text",
+						placeholder,
+						value: searchTerm,
+						onChange: handleInputChange,
+						onKeyDown: handleSearchKeyDown,
+						autoComplete: "off",
+						autoCorrect: "off",
+						disabled: effectiveIsDisabled,
+						onClick: (e) => e.stopPropagation()
+					}), /* @__PURE__ */ jsx(FlexWrapper, {
+						shrink: 0,
+						children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -445,8 +432,8 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
-						}) })
-					]
+						})
+					})]
 				}) : /* @__PURE__ */ jsxs(StyledSelectInput, {
 					ref: triggerRef,
 					$variant: variant,
@@ -465,26 +452,26 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 					"aria-haspopup": "listbox",
 					"aria-expanded": visible,
 					"aria-label": selectedOption ? selectedOption.label : placeholder,
-					children: [
-						/* @__PURE__ */ jsxs(FlexWrapper, {
-							alignItems: AlignItems.CENTER,
-							gap: 8,
-							fillWidth: true,
-							children: [selectedOption?.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: selectedOption.icon }), /* @__PURE__ */ jsx(FlexItem, {
-								grow: 1,
-								shrink: 1,
-								minWidth: 0,
-								children: /* @__PURE__ */ jsx(Text, {
-									variant: textVariant,
-									size: getInputTextSize(size),
-									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-									isEllipsis: true,
-									children: selectedOption ? selectedOption.label : placeholder
-								})
-							})]
-						}),
-						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
+					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+						alignItems: AlignItems.CENTER,
+						gap: 8,
+						minWidth: 0,
+						grow: 1,
+						children: [selectedOption?.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: selectedOption.icon }), /* @__PURE__ */ jsx(FlexItem, {
+							grow: 1,
+							shrink: 1,
+							minWidth: 0,
+							children: /* @__PURE__ */ jsx(Text, {
+								variant: textVariant,
+								size: getInputTextSize(size),
+								cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+								isEllipsis: true,
+								children: selectedOption ? selectedOption.label : placeholder
+							})
+						})]
+					}), /* @__PURE__ */ jsx(FlexWrapper, {
+						shrink: 0,
+						children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -492,8 +479,8 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
-						}) })
-					]
+						})
+					})]
 				})
 			}),
 			error && /* @__PURE__ */ jsx(Text, {

package/dist/styles.css

@@ -95,12 +95,12 @@
 .s1902pw9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;padding:var(--s1902pw9-0);height:var(--s1902pw9-1);width:var(--s1902pw9-2);cursor:var(--s1902pw9-3);opacity:var(--s1902pw9-4);background-color:var(--s1902pw9-5);border:0.5px solid var(--s1902pw9-6);border-radius:5px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1902pw9:hover{border-color:var(--s1902pw9-7);}
 .c179xo5d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
 .d60emtx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:36px;height:36px;border:none;border-radius:4px;cursor:var(--d60emtx-0);opacity:var(--d60emtx-1);background-color:var(--d60emtx-2);border:var(--d60emtx-3);-webkit-transition:all 0.075s ease-in-out;transition:all 0.075s ease-in-out;}.d60emtx:hover:not(:disabled){background-color:var(--d60emtx-4);}.d60emtx:focus{outline:none;}
-.s1ecxi56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;padding:var(--s1ecxi56-0);height:var(--s1ecxi56-1);width:var(--s1ecxi56-2);cursor:var(--s1ecxi56-3);opacity:var(--s1ecxi56-4);background-color:var(--s1ecxi56-5);border:0.5px solid var(--s1ecxi56-6);border-radius:4px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1ecxi56:hover{border:0.5px solid var(--s1ecxi56-7);}
-.s14m69un{-webkit-flex:1;-ms-flex:1;flex:1;outline:none;border:none;background:transparent;padding:0;margin:0;height:var(--s14m69un-0);color:var(--s14m69un-1);font-size:var(--s14m69un-2);line-height:var(--s14m69un-3);font-weight:var(--s14m69un-4);font-family:var(--s14m69un-5);}.s14m69un:disabled{cursor:not-allowed;}.s14m69un::-webkit-input-placeholder{color:var(--s14m69un-6);}.s14m69un::-moz-placeholder{color:var(--s14m69un-6);}.s14m69un:-ms-input-placeholder{color:var(--s14m69un-6);}.s14m69un::placeholder{color:var(--s14m69un-6);}
-.sbfl8n6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:var(--sbfl8n6-0);max-height:300px;width:var(--sbfl8n6-1);}
-.sk260f0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;min-height:0;width:var(--sk260f0-0);}
-.so10ras{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;padding:8px;background:var(--so10ras-0);border:none;border-radius:4px;cursor:pointer;}.so10ras:hover{background-color:var(--so10ras-1);}.so10ras:focus{outline:none;background-color:var(--so10ras-1);}
-.poe2ind{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;padding:8px;background:var(--poe2ind-0);border-radius:4px;border:none;cursor:pointer;}.poe2ind:hover{background-color:var(--poe2ind-1);}.poe2ind:focus{outline:none;background-color:var(--poe2ind-1);}
+.s1ecxi56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;box-sizing:border-box;min-width:0;gap:8px;padding:var(--s1ecxi56-0);height:var(--s1ecxi56-1);width:var(--s1ecxi56-2);cursor:var(--s1ecxi56-3);opacity:var(--s1ecxi56-4);background-color:var(--s1ecxi56-5);border:0.5px solid var(--s1ecxi56-6);border-radius:4px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1ecxi56:hover{border:0.5px solid var(--s1ecxi56-7);}
+.s14m69un{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;text-overflow:ellipsis;outline:none;border:none;background:transparent;padding:0;margin:0;height:var(--s14m69un-0);color:var(--s14m69un-1);font-size:var(--s14m69un-2);line-height:var(--s14m69un-3);font-weight:var(--s14m69un-4);font-family:var(--s14m69un-5);}.s14m69un:disabled{cursor:not-allowed;}.s14m69un::-webkit-input-placeholder{color:var(--s14m69un-6);}.s14m69un::-moz-placeholder{color:var(--s14m69un-6);}.s14m69un:-ms-input-placeholder{color:var(--s14m69un-6);}.s14m69un::placeholder{color:var(--s14m69un-6);}
+.sbfl8n6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:var(--sbfl8n6-0);max-width:calc(100vw - 16px);max-height:300px;width:var(--sbfl8n6-1);}
+.sk260f0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;min-height:0;width:100%;}
+.so10ras{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:8px;width:100%;padding:8px;background:var(--so10ras-0);border:none;border-radius:4px;cursor:pointer;}.so10ras:hover{background-color:var(--so10ras-1);}.so10ras:focus{outline:none;background-color:var(--so10ras-1);}
+.poe2ind{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:8px;width:100%;padding:8px;background:var(--poe2ind-0);border-radius:4px;border:none;cursor:pointer;}.poe2ind:hover{background-color:var(--poe2ind-1);}.poe2ind:focus{outline:none;background-color:var(--poe2ind-1);}
 .o9236d8{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .sf4kgcu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;padding:var(--sf4kgcu-0);height:var(--sf4kgcu-1);width:var(--sf4kgcu-2);cursor:var(--sf4kgcu-3);opacity:var(--sf4kgcu-4);background-color:var(--sf4kgcu-5);border:0.5px solid var(--sf4kgcu-6);border-radius:4px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.sf4kgcu:hover{border:0.5px solid var(--sf4kgcu-7);}
 .s15yoqwu{-webkit-flex:1;-ms-flex:1;flex:1;outline:none;border:none;background:transparent;padding:0;margin:0;height:var(--s15yoqwu-0);color:var(--s15yoqwu-1);font-size:var(--s15yoqwu-2);line-height:var(--s15yoqwu-3);font-weight:var(--s15yoqwu-4);font-family:var(--s15yoqwu-5);}.s15yoqwu:disabled{cursor:not-allowed;}.s15yoqwu::-webkit-input-placeholder{color:var(--s15yoqwu-6);}.s15yoqwu::-moz-placeholder{color:var(--s15yoqwu-6);}.s15yoqwu:-ms-input-placeholder{color:var(--s15yoqwu-6);}.s15yoqwu::placeholder{color:var(--s15yoqwu-6);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.5.14",
+  "version": "1.5.16",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",