@galaxy-io/dls 2.2.1 → 2.3.1

package/dist/backgrounds/GridBackground.d.ts

@@ -21,6 +21,15 @@ export declare enum GridBackgroundSize {
     /** 48px pitch. */
     X_LARGE = "X_LARGE"
 }
+/** Custom property for the mark color: a `t.color.*` token. Unset, each pattern uses its own `opacity.fg*` token. */
+export declare const GRID_BACKGROUND_COLOR_VAR = "--gx-grid-background-color";
+/** Custom property for the pattern's opacity, 0 to 1. Unset, `1`. */
+export declare const GRID_BACKGROUND_OPACITY_VAR = "--gx-grid-background-opacity";
+/** `style` for GridBackground: CSS custom properties only, typed for the two it reads. */
+export type GridBackgroundStyle = CSSProperties & {
+    [GRID_BACKGROUND_COLOR_VAR]?: string;
+    [GRID_BACKGROUND_OPACITY_VAR]?: number;
+};
 export interface GridBackgroundProps extends AriaAttributes {
     /**
      * The mark repeated across the grid: dots, small crosses at the intersections, or ruled cells.
@@ -40,8 +49,8 @@ export interface GridBackgroundProps extends AriaAttributes {
     [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
     /** Extra class on the root `<div>`. */
     className?: string;
-    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
-    style?: CSSProperties;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties (`GRID_BACKGROUND_COLOR_VAR`, `GRID_BACKGROUND_OPACITY_VAR`). */
+    style?: GridBackgroundStyle;
 }
 /** A dot, cross or cell grid painted behind centered content. */
 declare const GridBackground: import("react").ForwardRefExoticComponent<GridBackgroundProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/backgrounds/GridBackground.js

@@ -12,6 +12,10 @@ import { match } from "ts-pattern";
 * token, so the pattern follows the theme through CSS alone, with the same
 * markup on the server and the client. Decoration only: not interactive, no semantics.
 *
+* Two custom properties tune the marks through `style`: `GRID_BACKGROUND_COLOR_VAR` takes a
+* `t.color.*` token for the mark color, `GRID_BACKGROUND_OPACITY_VAR` a 0 to 1 opacity for the
+* whole pattern. Unset, the pattern keeps its quiet default.
+*
 * Replaces 1.x `DotGridBackground`, `CrossGridBackground` and `CellGridBackground` (`pattern`;
 * `spacing` / `cellSize` → `size`; the color, opacity, stroke, radius and fill props are gone).
 */
@@ -39,6 +43,10 @@ var GridBackgroundSize = /* @__PURE__ */ function(GridBackgroundSize) {
 	GridBackgroundSize["X_LARGE"] = "X_LARGE";
 	return GridBackgroundSize;
 }({});
+/** Custom property for the mark color: a `t.color.*` token. Unset, each pattern uses its own `opacity.fg*` token. */
+var GRID_BACKGROUND_COLOR_VAR = "--gx-grid-background-color";
+/** Custom property for the pattern's opacity, 0 to 1. Unset, `1`. */
+var GRID_BACKGROUND_OPACITY_VAR = "--gx-grid-background-opacity";
 /** Fills the parent and centers the children; a stacking context so the layer sits under them. */
 var Root = /*#__PURE__*/ styled("div")({
 	name: "Root",
@@ -51,7 +59,7 @@ var Layer = /*#__PURE__*/ styled("svg")({
 	class: "gx-GridBackground-Layer-lvvo1cl",
 	propsAsIs: false
 });
-/** The mark color per pattern, on the layer only (never inherited by the children). */
+/** The default mark color per pattern, on the layer only (never inherited by the children); `GRID_BACKGROUND_COLOR_VAR` overrides it. */
 var GRID_BACKGROUND_PATTERN_TO_CSS_MAP = {
 	["DOT"]: "gx-GridBackground-DOT-d1ezsakb",
 	["CROSS"]: "gx-GridBackground-CROSS-cl21ufg",
@@ -143,4 +151,4 @@ var GridBackground = forwardRef(function GridBackground({ pattern = "DOT", size
 });
 GridBackground.displayName = "GridBackground";
 //#endregion
-export { GridBackgroundPattern, GridBackgroundSize, GridBackground as default };
+export { GRID_BACKGROUND_COLOR_VAR, GRID_BACKGROUND_OPACITY_VAR, GridBackgroundPattern, GridBackgroundSize, GridBackground as default };

package/dist/buttons/Button.js

@@ -72,7 +72,7 @@ var ButtonSize = /* @__PURE__ */ function(ButtonSize) {
 	return ButtonSize;
 }({});
 /**
-* Static rules. `border: 0.5px solid transparent` gives every variant the same box; the variant
+* Static rules. `border: 1px solid transparent` gives every variant the same box; the variant
 * map colors it. `INTERACTIVE_RESET` comes first so the rules after it win.
 */
 var Root = /*#__PURE__*/ styled("button")({

package/dist/charts/StatChart.d.ts

@@ -25,7 +25,7 @@ export interface StatChartProps extends AriaAttributes {
      */
     variant?: StatChartVariant;
     /**
-     * Adds the `0.5px` hairline. Use it for tiles on a page; leave it off inside an already-bordered container.
+     * Adds the 1px hairline. Use it for tiles on a page; leave it off inside an already-bordered container.
      * @default false
      */
     hasBorder?: boolean;

package/dist/chips/Chip.d.ts

@@ -78,7 +78,7 @@ export interface ChipBaseProps extends AriaAttributes {
      */
     isPill?: boolean;
     /**
-     * Adds a `0.5px` hairline in the variant's border color.
+     * Adds a 1px hairline in the variant's border color.
      * @default false
      */
     hasBorder?: boolean;

package/dist/dropdown/Dropdown.js

@@ -60,7 +60,7 @@ var DROPDOWN_VARIANT_TO_POPOVER_VARIANT_MAP = {
 	["TERTIARY"]: PopoverVariant.TERTIARY
 };
 /**
-* The panel is `border-box` with a 0.5px hairline top and bottom, so its content box is 1px
+* The panel is `border-box` with a hairline top and bottom, so its content box is two hairlines
 * shorter than the room Popover reports.
 */
 /** The region column, capped to the room on screen so only the body scrolls. */

package/dist/editor/CodeEditor.js

@@ -2,6 +2,7 @@ import { useControlledState } from "../hooks/useControlledState.js";
 import { t } from "../theme/tokens/t.js";
 import { GalaxyThemeContext } from "../theme/useGalaxyTheme.js";
 import { useField } from "../hooks/useField.js";
+import "../styles/mixins.js";
 import { hexToRgb, rgbToHsl } from "../utils/colors.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
@@ -245,7 +246,7 @@ function getFocusOutline() {
 }
 /** Everything that is not syntax: content inset, gutters, popups, the search panel. All `t.*`. */
 function getEditorViewTheme() {
-	const hairline = `0.5px solid ${t.color.border.primary}`;
+	const hairline = `1px solid ${t.color.border.primary}`;
 	const sansBodyMd = {
 		fontFamily: t.font.sans.family,
 		fontSize: t.font.sans.size.body_md
@@ -348,6 +349,7 @@ function getEditorViewTheme() {
 		},
 		".cm-panel.cm-search .cm-textfield[name=replace], .cm-panel.cm-search .cm-button[name=replace], .cm-panel.cm-search .cm-button[name=replaceAll], .cm-panel.cm-search label, .cm-panel.cm-search [name=close], .cm-panel.cm-search br": { display: "none" },
 		".cm-panel.cm-search .cm-textfield": {
+			width: `calc(134px + 2 * ${t.space[8]} + 2 * 1px)`,
 			height: t.size.control.small,
 			boxSizing: "border-box",
 			margin: 0,
@@ -367,7 +369,7 @@ function getEditorViewTheme() {
 			boxSizing: "border-box",
 			margin: 0,
 			padding: `0 ${t.space[8]}`,
-			border: "0.5px solid transparent",
+			border: `1px solid transparent`,
 			borderRadius: t.radius.md,
 			background: "transparent",
 			backgroundImage: "none",

package/dist/feedback/Alert.js

@@ -38,7 +38,7 @@ var AlertVariant = /* @__PURE__ */ function(AlertVariant) {
 	return AlertVariant;
 }({});
 /**
-* A block-level flex row that fills its parent's width. The transparent `0.5px` hairline gives
+* A block-level flex row that fills its parent's width. The transparent hairline gives
 * every variant the same box; the variant map colors it.
 */
 var Root = /*#__PURE__*/ styled("div")({

package/dist/feedback/ProgressBar.js

@@ -64,8 +64,8 @@ var Header = /*#__PURE__*/ styled("div")({
 });
 /**
 * The 1.x track, from tokens; it clips the fill's corners. The hairline is drawn by a layer under
-* the fill instead of the track's own border: browsers round a 0.5px border up to one device pixel,
-* which on a 1x screen would leave no room for the fill inside a 2px track.
+* the fill instead of the track's own border: a border in the box would take its width out of a
+* 2px track and leave no room for the fill.
 */
 var Track = /*#__PURE__*/ styled("div")({
 	name: "Track",

package/dist/inputs/ColorInput.js

@@ -171,7 +171,7 @@ var COLOR_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
 var GHOST_HOVER_CSS = "gx-ColorInput-GHOST_HOVER_CSS-g2ye5n";
 /**
 * Height, start inset, gap and the end inset that reserves the caret zone per rung (the
-* SelectInput table). The start inset subtracts the 0.5px hairline so the swatch starts on a whole
+* SelectInput table). The start inset subtracts the hairline so the swatch starts on a whole
 * pixel.
 */
 var COLOR_INPUT_SIZE_TO_CSS_MAP = {
@@ -282,7 +282,7 @@ var HueFrame = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 /**
-* The one pointer for both: a 12px ring (2px `background.base`, a 0.5px `text.primary` outline)
+* The one pointer for both: a 12px ring (2px `background.base`, a 1px `text.primary` outline)
 * that reads on any color and flips with the theme. Positions are custom properties.
 */
 var PointerRing = /*#__PURE__*/ styled("span")({

package/dist/inputs/CronInput.js

@@ -397,7 +397,7 @@ var CRON_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
 var GHOST_HOVER_CSS = "gx-CronInput-GHOST_HOVER_CSS-g1279sor";
 /**
 * Height, start inset, gap and the end inset that reserves the icon zone (rung padding + icon +
-* gap) per rung (SelectInput's table). The start inset subtracts the 0.5px hairline so the value
+* gap) per rung (SelectInput's table). The start inset subtracts the hairline so the value
 * starts on a whole pixel.
 */
 var CRON_INPUT_SIZE_TO_CSS_MAP = {

package/dist/inputs/DateInput.js

@@ -188,7 +188,7 @@ var DATE_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
 var GHOST_HOVER_CSS = "gx-DateInput-GHOST_HOVER_CSS-gymba5f";
 /**
 * Height, start inset, gap and the end inset that reserves the icon zone (rung padding + icon +
-* gap) per rung (SelectInput's table). The start inset subtracts the 0.5px hairline so the value
+* gap) per rung (SelectInput's table). The start inset subtracts the hairline so the value
 * starts on a whole pixel.
 */
 var DATE_INPUT_SIZE_TO_CSS_MAP = {

package/dist/inputs/Input.js

@@ -120,7 +120,7 @@ var INPUT_SIZE_TO_CSS_MAP = {
 };
 /**
 * Start inset when `leading` is set: equal to the vertical gap around an in-field button. The
-* `0.5px` hairline is subtracted, as on the end inset: the border adds to the start padding but the
+* hairline is subtracted, as on the end inset: the border adds to the start padding but the
 * vertical gap already includes it.
 */
 var INPUT_SIZE_TO_LEADING_INSET_CSS_MAP = {
@@ -132,7 +132,7 @@ var INPUT_SIZE_TO_LEADING_INSET_CSS_MAP = {
 };
 /**
 * End inset when `trailing` is set or `isClearable`: equal to the vertical gap around the clear
-* button. The `0.5px` hairline is subtracted, because the frame's border adds to the end padding
+* button. The hairline is subtracted, because the frame's border adds to the end padding
 * but the vertical gap already includes it (the button is centered inside the border).
 */
 var INPUT_SIZE_TO_TRAILING_INSET_CSS_MAP = {
@@ -165,7 +165,9 @@ var DISABLED_CSS = "gx-Input-DISABLED_CSS-d1d35fia";
 var FILL_WIDTH_CSS = "gx-Input-FILL_WIDTH_CSS-f1jgakl6";
 /**
 * The value's type per family and rung. `height` equals the line height, so the value centers on
-* whole pixels in every rung; mono uses its ~0.92× sizes with the same line heights.
+* whole pixels in every rung; mono uses its ~0.92× sizes with the same line heights. `width` is the
+* default (Chrome's native `size="20"` width for that font), fixed so Safari, whose native input is
+* wider, draws the same field; `flex` still grows and shrinks it inside a sized frame.
 */
 var INPUT_FAMILY_TO_SIZE_CSS_MAP = {
 	[FontFamily.SANS]: {

package/dist/inputs/SelectInput.js

@@ -77,7 +77,10 @@ var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
 }({});
 /** The field's width without `fillWidth` (no width token exists; the `MENU_MAX_WIDTH` precedent). */
 /** The panel's widest list (Menu's maximum) and tallest list. */
-/** The panel is `border-box` with a 0.5px hairline top and bottom (Menu's compensation). */
+/**
+* The panel is `border-box` with a hairline top and bottom, so its content box is two hairlines
+* shorter than the room Popover reports.
+*/
 /** Pause after typing before `onSearch` receives the term. */
 var SELECT_SEARCH_DEBOUNCE_MS = 150;
 /** Pause after which the typeahead prefix starts over. */
@@ -237,7 +240,7 @@ var GHOST_HOVER_CSS = "gx-SelectInput-GHOST_HOVER_CSS-g1oazqgn";
 /**
 * Height, start inset, gap and the end inset that reserves the caret zone (rung padding + caret +
 * gap) per rung. Off-scale insets are sums of `space` tokens and the rung's caret px. The start inset
-* subtracts the 0.5px hairline so the value starts on a whole pixel, the rung padding from the edge.
+* subtracts the hairline so the value starts on a whole pixel, the rung padding from the edge.
 */
 var SELECT_INPUT_SIZE_TO_CSS_MAP = {
 	["X_SMALL"]: "gx-SelectInput-X_SMALL-xhmj664",
@@ -356,7 +359,7 @@ var ListFrame = /*#__PURE__*/ styled("div")({
 });
 /** A virtualized panel is exactly as wide as the field (absolute rows have no content width). */
 var VIRTUALIZED_FRAME_CSS = "gx-SelectInput-VIRTUALIZED_FRAME_CSS-vz9a0uz";
-/** The rows, 4px in from the panel's outer edge (the 0.5px hairline counts toward the inset). */
+/** The rows, 4px in from the panel's outer edge (the hairline counts toward the inset). */
 var List = /*#__PURE__*/ styled("div")({
 	name: "List",
 	class: "gx-SelectInput-List-l1pxtftz",

package/dist/inputs/TagInput.js

@@ -72,8 +72,7 @@ var TAG_INPUT_PASTE_SEPARATORS = [
 * hairline plus a 1px inset (`FIELD_FOCUS`), whenever the text input has focus. The hairline is drawn by `::before`
 * over the frame's edge, in the frame's own `border-color` (which the variant, hover, focus and
 * error rules set on a zero-width border), so the height is `chip + 2 × inset` at every device
-* pixel ratio: a 0.5px border in the box would round up to 1px on 1x screens and add a pixel to
-* the line.
+* pixel ratio.
 */
 var Frame = /*#__PURE__*/ styled("div")({
 	name: "Frame",

package/dist/inputs/TextAreaInput.js

@@ -65,12 +65,6 @@ var Root = /*#__PURE__*/ styled("div")({
 * The field itself: the bordered element, so focus (`FIELD_FOCUS` on any focus: `border.focused` at 1px inside) and
 * the resize handle sit on the frame.
 */
-/**
-* What the padding gives back for the transparent hairline border. Chrome draws a 0.5px border a
-* whole pixel wide, so padding that subtracted only 0.5px left two rows a pixel taller than the
-* box: the textarea scrolled that pixel and swallowed the wheel instead of the page. Subtracting
-* the full pixel fits exactly in Chrome and leaves half a pixel spare where the border is 0.5px.
-*/
 var Control = /*#__PURE__*/ styled("textarea")({
 	name: "Control",
 	class: "gx-TextAreaInput-Control-cu0hnok",
@@ -96,7 +90,11 @@ var TEXT_AREA_INPUT_SIZE_TO_CSS_MAP = {
 	["LARGE"]: "gx-TextAreaInput-LARGE-l11gu90v",
 	["X_LARGE"]: "gx-TextAreaInput-X_LARGE-x53s0j8"
 };
-/** The value's type per family and rung (Input's family map without its fixed height; mono shares the line heights). */
+/**
+* The value's type per family and rung (Input's family map without its fixed height; mono shares the
+* line heights). `--gx-textarea-content-width` is the default text width (Chrome's native `cols="20"`
+* width for that font), fixed so Safari, whose native textarea is wider, draws the same field.
+*/
 var TEXT_AREA_INPUT_FAMILY_TO_SIZE_CSS_MAP = {
 	[FontFamily.SANS]: {
 		["X_SMALL"]: "gx-TextAreaInput-X_SMALL-xcocpoc",

package/dist/inputs/ToggleInput.js

@@ -52,7 +52,7 @@ var ToggleInputVariant = /* @__PURE__ */ function(ToggleInputVariant) {
 	ToggleInputVariant["TERTIARY"] = "TERTIARY";
 	return ToggleInputVariant;
 }({});
-/** The radiogroup. With the 0.5px border and 1.5px padding, segments start 2px inside the outer edge. */
+/** The radiogroup. With the 1px border and 1px padding, segments start 2px inside the outer edge. */
 var Track = /*#__PURE__*/ styled("div")({
 	name: "Track",
 	class: "gx-ToggleInput-Track-t1t8zlu",
@@ -97,7 +97,12 @@ var SEGMENT_INTERACTIVE_CSS = "gx-ToggleInput-SEGMENT_INTERACTIVE_CSS-s169tnuo";
 var SEGMENT_DISABLED_CSS = "gx-ToggleInput-SEGMENT_DISABLED_CSS-svloi0q";
 /** A read-only group: no hover, no pointer. */
 var SEGMENT_READ_ONLY_CSS = "gx-ToggleInput-SEGMENT_READ_ONLY_CSS-scgck5z";
-/** No label: a square segment with the icon centered (an equal share under `fillWidth`). */
+/**
+* No label: a square segment with the icon centered (an equal share under `fillWidth`, where
+* `flex: 1 1 0` overrides the width). The square is explicit, the track's inner height, not
+* `aspect-ratio`: Safari sizes an inline-flex track from an aspect-ratio item's pre-stretch width,
+* so the stretched segments overflowed the track and the last one was clipped.
+*/
 var SEGMENT_ICON_ONLY_CSS = "gx-ToggleInput-SEGMENT_ICON_ONLY_CSS-snqdq0p";
 /** The Field ToggleInput renders for its own `label` / `error` uses the same rung. */
 var TOGGLE_INPUT_SIZE_TO_FIELD_SIZE_MAP = {

package/dist/inputs/internal/fieldFrame.d.ts

@@ -1,5 +1,3 @@
-/** @internal The DLS hairline width, for frames that draw or subtract it in `calc()`. */
-export declare const HAIRLINE_WIDTH = "0.5px";
 /** @internal The surface set a field frame rests on (the values of every input's `variant`). */
 export declare enum FieldSurface {
     /** `background.base` fill. */

package/dist/inputs/internal/fieldFrame.js

@@ -12,7 +12,7 @@ import { t } from "../../theme/tokens/t.js";
 * re-declaring the rules. They are deliberately **not** `css` classes. The stylesheet lists a
 * module's CSS after the CSS of the modules it imports (`scripts/css-order.mjs`), so a class
 * declared here would land *before* every component's `styled` Root; the Root's own
-* `border: 0.5px solid transparent`, `display: inline-flex` and `cursor: text` would then win over
+* `border: 1px solid transparent`, `display: inline-flex` and `cursor: text` would then win over
 * the fill, the hairline, `fillWidth` and the disabled cursor at equal specificity. Interpolating
 * keeps each class where the component declares it, so the cascade order is unchanged.
 *
@@ -20,8 +20,6 @@ import { t } from "../../theme/tokens/t.js";
 * `<COMPONENT>_VARIANT_TO_CSS_MAP: Record<<Component>Variant, string>` of `css` blocks whose bodies
 * are these fragments, keyed through `FieldSurface`.
 */
-/** @internal The DLS hairline width, for frames that draw or subtract it in `calc()`. */
-var HAIRLINE_WIDTH = "0.5px";
 /** @internal The surface set a field frame rests on (the values of every input's `variant`). */
 var FieldSurface = /* @__PURE__ */ function(FieldSurface) {
 	/** `background.base` fill. */
@@ -61,4 +59,4 @@ var FIELD_DISABLED = "cursor: not-allowed;";
 /** @internal Stretch to the parent's width (the frame, and the `Field` wrapper when there is one). */
 var FIELD_FILL_WIDTH = "display: flex; width: 100%;";
 //#endregion
-export { FIELD_DISABLED, FIELD_ERROR, FIELD_FILL_WIDTH, FIELD_GHOST_REST, FIELD_HOVER, FIELD_SURFACE_TO_REST_MAP, FieldSurface, HAIRLINE_WIDTH };
+export { FIELD_DISABLED, FIELD_ERROR, FIELD_FILL_WIDTH, FIELD_GHOST_REST, FIELD_HOVER, FIELD_SURFACE_TO_REST_MAP, FieldSurface };

package/dist/layout/Box.d.ts

@@ -31,7 +31,7 @@ export interface BoxProps extends AriaAttributes {
      */
     variant?: BoxVariant;
     /**
-     * Draw the `0.5px` hairline border (`border.primary`).
+     * Draw the 1px hairline border (`border.primary`).
      * @default false
      */
     hasBorder?: boolean;

package/dist/layout/Divider.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
 //#region src/layout/Divider.tsx
 /**
-* A `0.5px` hairline rule that separates content. Replaces 1.x `HorizontalDivider` and
+* A 1px hairline rule that separates content. Replaces 1.x `HorizontalDivider` and
 * `VerticalDivider` (Constitution XII.4): `orientation` picks the direction.
 *
 * - Horizontal, no label: an `<hr>` (implicit `role="separator"`) that spans its parent's width.

package/dist/menu/Menu.js

@@ -66,7 +66,10 @@ var MenuItemVariant = /* @__PURE__ */ function(MenuItemVariant) {
 	return MenuItemVariant;
 }({});
 /** Narrowest and widest list (no width token exists; the `TOOLTIP_MAX_WIDTH` precedent). */
-/** The panel is `border-box` with a 0.5px hairline top and bottom (as in Dropdown). */
+/**
+* The panel is `border-box` with a hairline top and bottom, so its content box is two hairlines
+* shorter than the room Popover reports.
+*/
 /** Pointer rest before a submenu opens, or before an open one closes (a behavior constant, not motion). */
 var MENU_SUBMENU_HOVER_DELAY_MS = 150;
 /** Pause after which the typeahead prefix starts over. */

package/dist/navigation/Tabs.js

@@ -56,7 +56,6 @@ var TabsSize = /* @__PURE__ */ function(TabsSize) {
 	TabsSize["LARGE"] = "LARGE";
 	return TabsSize;
 }({});
-/** The hairline width; written out because the bar draws one edge only. */
 /** Sub-pixel slack when comparing measured widths. */
 var FIT_EPSILON_PX = .5;
 /** The root block: bar, then panel (a horizontal bar with no panel fills the root's height). */

package/dist/styles/mixins.d.ts

@@ -3,7 +3,14 @@
  * Interpolate it first in a template so the rules after it (a border, a background) win.
  */
 export declare const INTERACTIVE_RESET = "appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;";
-/** The DLS hairline: a `0.5px` `border.primary` border on every side. */
+/**
+ * The DLS hairline width: 1px. Chrome rounds a 0.5px border up to 1px at every pixel density
+ * while Safari draws it at 0.5px on Retina, so a 0.5px hairline looked and laid out differently
+ * in each; 1px is the same line, and the same layout, in every engine. Use it wherever a frame
+ * draws one edge or subtracts its border in `calc()`.
+ */
+export declare const HAIRLINE_WIDTH = "1px";
+/** The DLS hairline: a `HAIRLINE_WIDTH` `border.primary` border on every side. */
 export declare const HAIRLINE_BORDER: string;
 /**
  * The focus treatment: a `1px` `border.focused` outline on keyboard focus only (a neutral one step

package/dist/styles/mixins.js

@@ -23,8 +23,15 @@ import { t } from "../theme/tokens/t.js";
 * Interpolate it first in a template so the rules after it (a border, a background) win.
 */
 var INTERACTIVE_RESET = `appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;`;
-/** The DLS hairline: a `0.5px` `border.primary` border on every side. */
-var HAIRLINE_BORDER = `border: 0.5px solid ${t.color.border.primary};`;
+/**
+* The DLS hairline width: 1px. Chrome rounds a 0.5px border up to 1px at every pixel density
+* while Safari draws it at 0.5px on Retina, so a 0.5px hairline looked and laid out differently
+* in each; 1px is the same line, and the same layout, in every engine. Use it wherever a frame
+* draws one edge or subtracts its border in `calc()`.
+*/
+var HAIRLINE_WIDTH = "1px";
+/** The DLS hairline: a `HAIRLINE_WIDTH` `border.primary` border on every side. */
+var HAIRLINE_BORDER = `border: 1px solid ${t.color.border.primary};`;
 /**
 * The focus treatment: a `1px` `border.focused` outline on keyboard focus only (a neutral one step
 * stronger than `border.hovered`). Components never write their own
@@ -57,4 +64,4 @@ var VISUALLY_HIDDEN = `position: absolute; width: 1px; height: 1px; padding: 0;
 */
 var REDUCED_MOTION = `@media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }`;
 //#endregion
-export { FIELD_FOCUS, FOCUS_RING, HAIRLINE_BORDER, INTERACTIVE_RESET, REDUCED_MOTION, TRUNCATE, VISUALLY_HIDDEN };
+export { FIELD_FOCUS, FOCUS_RING, HAIRLINE_BORDER, HAIRLINE_WIDTH, INTERACTIVE_RESET, REDUCED_MOTION, TRUNCATE, VISUALLY_HIDDEN };