@galaxy-io/dls 2.0.0 → 2.0.1

package/dist/table/TableCore.js

@@ -192,7 +192,12 @@ var DropIndicator = /*#__PURE__*/ styled("span")({
 	class: "gx-TableCore-DropIndicator-d1po1i5a",
 	propsAsIs: false
 });
-/** Follows the table, inside the scroll container; observed for `onEndReached`. */
+/**
+* Follows the table, inside the scroll container; observed for `onEndReached`. Zero height: a 1px
+* sentinel made every table overflow its scroll box by a pixel, so the wheel scrolled that pixel
+* and a trackpad gesture latched onto the table instead of scrolling the page.
+* `IntersectionObserver` reports a zero-area target that touches the root's edge.
+*/
 var Sentinel = /*#__PURE__*/ styled("div")({
 	name: "Sentinel",
 	class: "gx-TableCore-Sentinel-scxvgum",

package/dist/timeline/Timeline.d.ts

@@ -10,6 +10,15 @@ export declare enum TimelineSize {
     /** body_lg text, 24px box, 6px dot, 14px icon, 24px between events. */
     LARGE = "LARGE"
 }
+/** The frame around every event's dot or icon. One shape per timeline. */
+export declare enum TimelineMarkerShape {
+    /** A square hairline box with control-radius corners. The default. */
+    SQUARE = "SQUARE",
+    /** A round hairline box. */
+    CIRCLE = "CIRCLE",
+    /** No box: the dot or icon sits on the rail, 4px clear of the line above and below it. */
+    NONE = "NONE"
+}
 /** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
 export declare enum TimelineVariant {
     /** `text.primary` marker in a `border.primary` box. */
@@ -85,6 +94,18 @@ export interface TimelineProps extends AriaAttributes {
      * @default TimelineSize.MEDIUM
      */
     size?: TimelineSize;
+    /**
+     * The frame around each dot or icon: a square box, a round box, or none (the rail runs straight
+     * into the marker). The marker keeps its 16 / 20 / 24px slot in every shape, so text never moves.
+     * @default TimelineMarkerShape.SQUARE
+     */
+    markerShape?: TimelineMarkerShape;
+    /**
+     * Fill each box with its item's background role: a neutral step, `background.<status>` or
+     * `background.<family>`, the way a `Chip` fills. Ignored with `TimelineMarkerShape.NONE`.
+     * @default false
+     */
+    isFilled?: boolean;
     /** DOM id on the root `<ol>`. */
     id?: string;
     /** Any `data-*` attribute, forwarded to the root `<ol>`. */
@@ -94,6 +115,6 @@ export interface TimelineProps extends AriaAttributes {
     /** Inline style on the root `<ol>`; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
-/** A vertical list of events with boxed dot or icon markers on a hairline rail. */
+/** A vertical list of events with dot or icon markers (boxed or bare) on a hairline rail. */
 declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
 export default Timeline;

package/dist/timeline/Timeline.js

@@ -10,12 +10,12 @@ import { cx } from "@linaria/core";
 /**
 * A sequence of events in time order, top to bottom: a pipeline run's history, a sync's steps, an
 * audit trail, an activity feed. Each item is a marker on a vertical rail (a `Beacon` dot, or an
-* `Icon` when `icon` is set, inside a small square hairline box with no fill), a one-line label
-* centered on the box, an optional time at the end of the label line, an optional description and
+* `Icon` when `icon` is set, inside a small hairline box: square, round, or no box at all with
+* `markerShape`, unfilled unless `isFilled`), a one-line label centered on the marker, an optional time at the end of the label line, an optional description and
 * an optional footer. A 0.5px rail runs from the bottom edge of each box to the top edge of the
 * next, whatever the item's height. Only the marker takes the item's color-set `variant` (a
 * meaning) or categorical `color` (a palette family): the dot or icon its text color, the box its
-* border color. The words stay primary and secondary.
+* border color (and its fill with `isFilled`). The words stay primary and secondary.
 *
 * Read-only: it does not order, group, fetch or format anything. An ordered list (`<ol>`, kept a
 * list in Safari with `role="list"` because the package reset removes list styling); the rail is
@@ -31,6 +31,16 @@ var TimelineSize = /* @__PURE__ */ function(TimelineSize) {
 	TimelineSize["LARGE"] = "LARGE";
 	return TimelineSize;
 }({});
+/** The frame around every event's dot or icon. One shape per timeline. */
+var TimelineMarkerShape = /* @__PURE__ */ function(TimelineMarkerShape) {
+	/** A square hairline box with control-radius corners. The default. */
+	TimelineMarkerShape["SQUARE"] = "SQUARE";
+	/** A round hairline box. */
+	TimelineMarkerShape["CIRCLE"] = "CIRCLE";
+	/** No box: the dot or icon sits on the rail, 4px clear of the line above and below it. */
+	TimelineMarkerShape["NONE"] = "NONE";
+	return TimelineMarkerShape;
+}({});
 /** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
 var TimelineVariant = /* @__PURE__ */ function(TimelineVariant) {
 	/** `text.primary` marker in a `border.primary` box. */
@@ -84,10 +94,29 @@ var Marker = /*#__PURE__*/ styled("span")({
 	class: "gx-Timeline-Marker-m11eshsv",
 	propsAsIs: false
 });
+/**
+* The rail is a hairline from a zero-width box centered on the marker. Browsers paint it a whole CSS
+* pixel wide, starting at the center and snapped to the right of it, so on a 2× screen it sits one
+* device pixel right of the dot or icon. Half a pixel back centers it exactly and stays crisp at 2×
+* and up; at 1× a 1px line cannot center on an even-width mark, so it stays put.
+*/
+/**
+* The marker frame per shape. `NONE` drops the box and draws the rail through the empty slot, above
+* and below the dot or icon, stopping 4px short of it, so the line leads to the marker instead of an
+* invisible box edge. The first event has no line above its marker and the last none below (the
+* stubs keep their space, so the marker stays centered on its label).
+*/
+var TIMELINE_MARKER_SHAPE_TO_CSS_MAP = {
+	["SQUARE"]: "gx-Timeline-SQUARE-s1u5y4o2",
+	["CIRCLE"]: "gx-Timeline-CIRCLE-c132ryei",
+	["NONE"]: "gx-Timeline-NONE-n1j1o23c"
+};
+/** `isFilled`: the box takes its item's fill role (`--gx-timeline-fill`, set per variant and color). */
+var FILLED_CSS = "gx-Timeline-FILLED_CSS-f6c9753";
 /** The 0.5px hairline from the bottom of this box to the top of the next one. */
 var Connector = /*#__PURE__*/ styled("span")({
 	name: "Connector",
-	class: "gx-Timeline-Connector-c1u5y4o2",
+	class: "gx-Timeline-Connector-c1fj1oub",
 	propsAsIs: false
 });
 /**
@@ -96,13 +125,13 @@ var Connector = /*#__PURE__*/ styled("span")({
 */
 var Body = /*#__PURE__*/ styled("div")({
 	name: "Body",
-	class: "gx-Timeline-Body-b132ryei",
+	class: "gx-Timeline-Body-b1whgn5t",
 	propsAsIs: false
 });
 /** The label wraps; the time stays at the end of the first line. */
 var Heading = /*#__PURE__*/ styled("div")({
 	name: "Heading",
-	class: "gx-Timeline-Heading-h1j1o23c",
+	class: "gx-Timeline-Heading-h1j9kdi1",
 	propsAsIs: false
 });
 /**
@@ -111,19 +140,19 @@ var Heading = /*#__PURE__*/ styled("div")({
 */
 var Footer = /*#__PURE__*/ styled("div")({
 	name: "Footer",
-	class: "gx-Timeline-Footer-f6c9753",
+	class: "gx-Timeline-Footer-feakmyp",
 	propsAsIs: false
 });
 /**
 * The time in the second column, on one line. A flex box, so a `<time>` wrapper has no line strut
 * of its own (the inherited font size) and shares the label's baseline at every size.
 */
-var TIME_CSS = "gx-Timeline-TIME_CSS-t1fj1oub";
+var TIME_CSS = "gx-Timeline-TIME_CSS-t1vcatjx";
 /** Line height, marker box (16 / 20 / 24px), column gap and event spacing per rung. */
 var TIMELINE_SIZE_TO_CSS_MAP = {
-	["SMALL"]: "gx-Timeline-SMALL-s1whgn5t",
-	["MEDIUM"]: "gx-Timeline-MEDIUM-m1j9kdi1",
-	["LARGE"]: "gx-Timeline-LARGE-leakmyp"
+	["SMALL"]: "gx-Timeline-SMALL-s1195fxg",
+	["MEDIUM"]: "gx-Timeline-MEDIUM-m1oqbau9",
+	["LARGE"]: "gx-Timeline-LARGE-l11wi4d2"
 };
 /** The event text's type step. */
 var TIMELINE_SIZE_TO_TEXT_SIZE_MAP = {
@@ -165,42 +194,45 @@ var TIMELINE_VARIANT_TO_ICON_VARIANT_MAP = {
 	["WARNING"]: IconVariant.WARNING,
 	["ERROR"]: IconVariant.ERROR
 };
-/** The marker box's hairline per variant: neutral roles keep `border.primary`; statuses take theirs. */
-var TIMELINE_VARIANT_TO_BORDER_CSS_MAP = {
-	["PRIMARY"]: "gx-Timeline-PRIMARY-p1vcatjx",
-	["SECONDARY"]: "gx-Timeline-SECONDARY-s1195fxg",
-	["TERTIARY"]: "gx-Timeline-TERTIARY-t1oqbau9",
-	["DISABLED"]: "gx-Timeline-DISABLED-d11wi4d2",
-	["INHERIT"]: "gx-Timeline-INHERIT-i1r53y3e",
-	["SUCCESS"]: "gx-Timeline-SUCCESS-s61v3n7",
-	["WARNING"]: "gx-Timeline-WARNING-w1tjq5mm",
-	["ERROR"]: "gx-Timeline-ERROR-ea735oo"
+/**
+* The marker box's hairline and fill per variant: neutral roles keep `border.primary` and fill
+* `background.secondary`; statuses take their own border and background roles.
+*/
+var TIMELINE_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Timeline-PRIMARY-p1r53y3e",
+	["SECONDARY"]: "gx-Timeline-SECONDARY-s61v3n7",
+	["TERTIARY"]: "gx-Timeline-TERTIARY-t1tjq5mm",
+	["DISABLED"]: "gx-Timeline-DISABLED-da735oo",
+	["INHERIT"]: "gx-Timeline-INHERIT-i1ayi32k",
+	["SUCCESS"]: "gx-Timeline-SUCCESS-s155vzhv",
+	["WARNING"]: "gx-Timeline-WARNING-wtnc6wm",
+	["ERROR"]: "gx-Timeline-ERROR-e1q3p1vl"
 };
 /**
 * Categorical `color` on the marker: `text.<family>`, which an icon marker (`IconVariant.INHERIT`)
-* takes, and `border.<family>` on the box.
+* takes, and `border.<family>` and the `background.<family>` fill on the box.
 */
 var TIMELINE_COLOR_TO_CSS_MAP = {
-	red: "gx-Timeline-red-r1ayi32k",
-	orange: "gx-Timeline-orange-o155vzhv",
-	amber: "gx-Timeline-amber-atnc6wm",
-	yellow: "gx-Timeline-yellow-y1q3p1vl",
-	lime: "gx-Timeline-lime-l1khc5e9",
-	green: "gx-Timeline-green-gob0jun",
-	emerald: "gx-Timeline-emerald-ecpz10x",
-	teal: "gx-Timeline-teal-t1arc1uv",
-	cyan: "gx-Timeline-cyan-c1x7dvj6",
-	sky: "gx-Timeline-sky-s1fx1m3c",
-	blue: "gx-Timeline-blue-b1gy5gqm",
-	indigo: "gx-Timeline-indigo-ityv4re",
-	violet: "gx-Timeline-violet-v1506u15",
-	purple: "gx-Timeline-purple-p2f8n55",
-	fuchsia: "gx-Timeline-fuchsia-f1bza0tc",
-	pink: "gx-Timeline-pink-p1vbt6lr",
-	rose: "gx-Timeline-rose-rjtm0e"
+	red: "gx-Timeline-red-r1khc5e9",
+	orange: "gx-Timeline-orange-oob0jun",
+	amber: "gx-Timeline-amber-acpz10x",
+	yellow: "gx-Timeline-yellow-y1arc1uv",
+	lime: "gx-Timeline-lime-l1x7dvj6",
+	green: "gx-Timeline-green-g1fx1m3c",
+	emerald: "gx-Timeline-emerald-e1gy5gqm",
+	teal: "gx-Timeline-teal-ttyv4re",
+	cyan: "gx-Timeline-cyan-c1506u15",
+	sky: "gx-Timeline-sky-s2f8n55",
+	blue: "gx-Timeline-blue-b1bza0tc",
+	indigo: "gx-Timeline-indigo-i1vbt6lr",
+	violet: "gx-Timeline-violet-vjtm0e",
+	purple: "gx-Timeline-purple-pek3kdh",
+	fuchsia: "gx-Timeline-fuchsia-f13hn3pe",
+	pink: "gx-Timeline-pink-pdf3rdi",
+	rose: "gx-Timeline-rose-rjv99mk"
 };
-/** A vertical list of events with boxed dot or icon markers on a hairline rail. */
-var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", className, style, ...rest }, ref) {
+/** A vertical list of events with dot or icon markers (boxed or bare) on a hairline rail. */
+var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", markerShape = "SQUARE", isFilled = false, className, style, ...rest }, ref) {
 	const textSize = TIMELINE_SIZE_TO_TEXT_SIZE_MAP[size];
 	return /* @__PURE__ */ jsx(Root, {
 		...rest,
@@ -217,7 +249,7 @@ var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", className,
 				children: [/* @__PURE__ */ jsxs(Rail, {
 					"aria-hidden": true,
 					children: [/* @__PURE__ */ jsx(Marker, {
-						className: color !== void 0 ? TIMELINE_COLOR_TO_CSS_MAP[color] : TIMELINE_VARIANT_TO_BORDER_CSS_MAP[variant],
+						className: cx(color !== void 0 ? TIMELINE_COLOR_TO_CSS_MAP[color] : TIMELINE_VARIANT_TO_CSS_MAP[variant], TIMELINE_MARKER_SHAPE_TO_CSS_MAP[markerShape], isFilled && markerShape !== "NONE" && FILLED_CSS),
 						children: item.icon === void 0 ? /* @__PURE__ */ jsx(Beacon, {
 							size: TIMELINE_SIZE_TO_BEACON_SIZE_MAP[size],
 							...color !== void 0 ? { color } : { variant: TIMELINE_VARIANT_TO_BEACON_VARIANT_MAP[variant] },
@@ -266,4 +298,4 @@ var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", className,
 });
 Timeline.displayName = "Timeline";
 //#endregion
-export { TimelineSize, TimelineVariant, Timeline as default };
+export { TimelineMarkerShape, TimelineSize, TimelineVariant, Timeline as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",
@@ -157,6 +157,10 @@
       "types": "./dist/charts/chartScales.d.ts",
       "import": "./dist/charts/chartScales.js"
     },
+    "./charts/chartSelection": {
+      "types": "./dist/charts/chartSelection.d.ts",
+      "import": "./dist/charts/chartSelection.js"
+    },
     "./charts/constants": {
       "types": "./dist/charts/constants.d.ts",
       "import": "./dist/charts/constants.js"