@aortl/admin-react 0.19.1 → 0.20.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.20.0] - 2026-07-06
+
+### Added
+
+- `Timeline` horizontal variant — `.timeline-horizontal` (React `horizontal` prop) lays items out as equal-width columns with the connector running along the indicator row. Composes with the numbered variant for a step tracker. (both)
+
 ## [0.19.1] - 2026-07-02
 
 ### Changed
@@ -127,12 +133,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Make `primary` a high-contrast neutral and move blue to `info`. (both)
 - Use solid color fills for `Alert` and `Badge` status variants. (both)
 
-[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.19.1...HEAD
+[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.20.0...HEAD
 [0.16.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.0...v0.16.1
 [0.16.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.1...v0.16.0
 [0.15.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.0...v0.15.1
 [0.15.0]: https://github.com/Digital-Udvikling/admin-design-system/releases/tag/v0.15.0
 
+[0.20.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.19.1...v0.20.0
 [0.19.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.19.0...v0.19.1
 [0.19.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.5...v0.19.0
 [0.18.5]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.4...v0.18.5

package/dist/Timeline.d.ts

@@ -5,8 +5,10 @@ export type TimelineStatus = "default" | "info" | "success" | "warning" | "dange
 export interface TimelineProps extends ComponentProps<"ol"> {
     /** Turn the rail into a numbered step list. */
     numbered?: boolean;
+    /** Lay items out as side-by-side columns instead of a vertical rail. */
+    horizontal?: boolean;
 }
-declare function TimelineRoot({ numbered, className, ...rest }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+declare function TimelineRoot({ numbered, horizontal, className, ...rest }: TimelineProps): import("react/jsx-runtime").JSX.Element;
 export interface TimelineItemProps extends Omit<ComponentProps<"li">, "title"> {
     /** Accent for the indicator. `current` highlights a numbered marker. */
     status?: TimelineStatus;

package/dist/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../src/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAM,KAAK,WAAW,EAAE,MAAM,MAAM,CAAC;AAC5C,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/F,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,IAAI,CAAC;IACzD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEpE;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAC5E,wEAAwE;IACxE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,iDAAiD;IACjD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wFAAwF;IACxF,UAAU,CAAC,EAAE,WAAW,CACtB,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,CAC9E,CAAC;CACH;AACD,iBAAS,YAAY,CAAC,EACpB,MAAkB,EAClB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAgCnB;AAED,eAAO,MAAM,QAAQ;;CAAsD,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../src/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAM,KAAK,WAAW,EAAE,MAAM,MAAM,CAAC;AAC5C,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/F,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,IAAI,CAAC;IACzD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAUhF;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAC5E,wEAAwE;IACxE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,iDAAiD;IACjD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gGAAgG;IAChG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wFAAwF;IACxF,UAAU,CAAC,EAAE,WAAW,CACtB,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,CAC9E,CAAC;CACH;AACD,iBAAS,YAAY,CAAC,EACpB,MAAkB,EAClB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAgCnB;AAED,eAAO,MAAM,QAAQ;;CAAsD,CAAC"}

package/dist/admin.scoped.css

@@ -3579,6 +3579,43 @@
     background-color: var(--color-primary);
     color: var(--color-primary-content);
   }
+:scope._ao-timeline-horizontal, :scope ._ao-timeline-horizontal {
+    display: flex;
+    flex-direction: row;
+  }
+:scope._ao-timeline-horizontal ._ao-timeline-item, :scope ._ao-timeline-horizontal ._ao-timeline-item {
+    grid-template-columns: none;
+    grid-template-rows: 1.5rem auto;
+    row-gap: 0.5rem;
+    flex: 1 1 0;
+    min-width: 0;
+    padding-bottom: 0;
+    padding-inline: 0.5rem;
+    text-align: center;
+  }
+:scope._ao-timeline-horizontal ._ao-timeline-item:not(:last-child)::before, :scope ._ao-timeline-horizontal ._ao-timeline-item:not(:last-child)::before {
+    inset: 0.75rem -50% auto 50%;
+    width: auto;
+    height: 2px;
+    transform: translateY(-50%);
+  }
+:scope._ao-timeline-horizontal ._ao-timeline-indicator, :scope ._ao-timeline-horizontal ._ao-timeline-indicator {
+    grid-row: 1;
+    grid-column: auto;
+    justify-self: center;
+  }
+:scope._ao-timeline-horizontal ._ao-timeline-content, :scope ._ao-timeline-horizontal ._ao-timeline-content {
+    grid-row: 2;
+    grid-column: auto;
+    align-items: center;
+    padding-block: 0;
+  }
+:scope._ao-timeline-horizontal._ao-timeline-numbered ._ao-timeline-item, :scope ._ao-timeline-horizontal._ao-timeline-numbered ._ao-timeline-item {
+    grid-template-rows: 1.75rem auto;
+  }
+:scope._ao-timeline-horizontal._ao-timeline-numbered ._ao-timeline-item:not(:last-child)::before, :scope ._ao-timeline-horizontal._ao-timeline-numbered ._ao-timeline-item:not(:last-child)::before {
+    inset-block-start: 0.875rem;
+  }
 :scope._ao-dialog, :scope ._ao-dialog {
     margin: auto;
     flex-direction: column;

package/dist/index.cjs

@@ -1523,9 +1523,13 @@ function StatCard({ variant = "default", label, value, detail, trend, icon, comp
 }
 //#endregion
 //#region src/Timeline.tsx
-function TimelineRoot({ numbered, className, ...rest }) {
+function TimelineRoot({ numbered, horizontal, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
-		className: cn(["timeline", numbered && "timeline-numbered"], className),
+		className: cn([
+			"timeline",
+			numbered && "timeline-numbered",
+			horizontal && "timeline-horizontal"
+		], className),
 		...rest
 	});
 }