ng-hub-ui-ds 22.6.0 → 22.7.0

package/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to `ng-hub-ui-ds` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [22.7.0] - 2026-07-29
+
+### Added
+
+- **`.offset-1…11` grid offsets** plus responsive `.offset-{bp}-0…11` (the `-0` variant resets to auto placement): Bootstrap's offset semantics ported to the CSS grid — the class sets `grid-column-start`, so `.col-4.offset-md-8` spans 4 tracks starting at track 9 from `md` up. Backed by a new public **`offset($n)` layout mixin**, the counterpart of `col($span)`.
+- **Responsive variants for the whole flex family** across sm/md/lg/xl/xxl (reported upstream by a consumer: `flex-md-row` and `align-items-md-start` did nothing): `.flex-{bp}-{row,column}(-reverse)`, `.flex-{bp}-{wrap,nowrap,wrap-reverse}`, `.flex-{bp}-fill`, `.flex-{bp}-{grow,shrink}-{0,1}`, `.justify-content-{bp}-*`, `.align-items-{bp}-*`, `.align-self-{bp}-*`, `.align-content-{bp}-*` and `.order-{bp}-{first,0…5,last}`.
+- **`.h1`–`.h6` heading classes** — heading typography without the semantics: the matching step of the heading scale plus the reset's heading treatment (margin and tight leading), with the UA's bold weight made explicit so a `.h5` `<div>` reads like an `<h5>`.
+- **`.vr` vertical rule** — Bootstrap-exact self-stretching inline separator for flex rows (`currentcolor` at 25% opacity).
+
+### Changed
+
+- **`col($span)` emits the `grid-column-end: span N` longhand** instead of the `grid-column: span N` shorthand. Auto placement is identical, but the start track is left free for `offset()` / `.offset-*` to set on the same element. Only relevant if you were manually overriding `grid-column-start` on a `col()` element — that override no longer needs to fight the shorthand.
+
+## [22.6.1] - 2026-07-10
+
+### Changed
+
+- **docs (token catalogue)** — documented `--hub-panels-accordion-toggle-gutter`, the space the accordion's trailing chevron reserves at the row's end (shipped with the header-actions slot work in `ng-hub-ui-panels` 22.8.2; forced to `0px` when `togglePosition` places the chevron at the start). Documentation-only — no token or compiled-CSS changes.
+
 ## [22.6.0] - 2026-07-09
 
 ### Added

package/README.es.md

@@ -224,8 +224,8 @@ Además de los tokens, el paquete incluye una capa de estilos opt-in — no se e
 **Hojas de utilidades** — los nombres de clase son **exactamente los de Bootstrap** y cada valor resuelve a los tokens canónicos. No cargues estas hojas Y Bootstrap globalmente en el mismo documento. Cada hoja tiene además su gemela `.css` compilada para apps sin Sass:
 
 ```scss
-@use 'ng-hub-ui-ds/styles/utilities/layout';    // display/flex, grid de 12 col, spacing, sizing, position, overflow, order, .ratio-*, .visually-hidden…
-@use 'ng-hub-ui-ds/styles/utilities/text';      // .fs-1…6, .fw-*, .lh-*, .text-truncate, colores de texto semánticos
+@use 'ng-hub-ui-ds/styles/utilities/layout';    // display/flex (+ responsive), grid de 12 col + offsets, spacing, sizing, position, overflow, order, .vr, .ratio-*, .visually-hidden…
+@use 'ng-hub-ui-ds/styles/utilities/text';      // .fs-1…6, .h1…6, .fw-*, .lh-*, .text-truncate, colores de texto semánticos
 @use 'ng-hub-ui-ds/styles/utilities/surfaces';  // .bg-* (+ -subtle), .text-bg-*, .border*, .rounded*, .shadow*, .opacity-*
 ```
 

package/README.md

@@ -226,8 +226,8 @@ Besides the tokens, the package ships an opt-in styling layer — nothing is emi
 **Utility sheets** — class names mirror Bootstrap's **exactly** and every value resolves to the canonical tokens. Do not load them AND Bootstrap globally in the same document. Each sheet also has a compiled `.css` twin for Sass-less apps:
 
 ```scss
-@use 'ng-hub-ui-ds/styles/utilities/layout';    // display/flex, 12-col grid, spacing, sizing, position, overflow, order, .ratio-*, .visually-hidden…
-@use 'ng-hub-ui-ds/styles/utilities/text';      // .fs-1…6, .fw-*, .lh-*, .text-truncate, semantic text colours
+@use 'ng-hub-ui-ds/styles/utilities/layout';    // display/flex (+ responsive), 12-col grid + offsets, spacing, sizing, position, overflow, order, .vr, .ratio-*, .visually-hidden…
+@use 'ng-hub-ui-ds/styles/utilities/text';      // .fs-1…6, .h1…6, .fw-*, .lh-*, .text-truncate, semantic text colours
 @use 'ng-hub-ui-ds/styles/utilities/surfaces';  // .bg-* (+ -subtle), .text-bg-*, .border*, .rounded*, .shadow*, .opacity-*
 ```
 

package/docs/variables-css-library.en.md

@@ -701,7 +701,7 @@ Source legend:
 
 | Token                               | Initial value                                                                            | Usage                                                  | Status   | Source                                 |
 | ----------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------- | -------------------------------------- |
-| `--hub-avatar-size` | runtime (`50px`) | Avatar box size in px — written on the host from the `size` input (the input is the API; a CSS override is overruled by the inline style) | `INTERNAL` | `avatar/src/lib/avatar.component.ts:75` |
+| `--hub-avatar-size` | runtime (`50px`) | Avatar box size in px — written on the host from the `size` input (the input is the API; a CSS override is overruled by the inline style) | `INTERNAL` | `avatar/src/lib/avatar.component.ts:84` |
 | `--hub-avatar-overflow` | `hidden` | Overflow clipping behavior for avatar container | `IN_USE` | `avatar/src/lib/avatar.component.scss:4` |
 | `--hub-avatar-border-radius-round` | `50%` | Round shape radius token | `IN_USE` | `avatar/src/lib/avatar.component.scss:5` |
 | `--hub-avatar-border-radius-square` | `var(--hub-ref-radius-sm, 0.25rem)` | Default square shape radius token | `IN_USE` | `avatar/src/lib/avatar.component.scss:6` |
@@ -2197,6 +2197,7 @@ The navigation strip is **semantic-accent aware**: a single `--hub-panels-accent
 | `--hub-panels-accordion-icon-active-color` | `var(--hub-accordion-icon-active-color, var(--hub-panels-accordion-active-color))` | Accordion active chevron color | `IN_USE` | `panels/src/lib/components/panels/panels.variables.scss:135` |
 | `--hub-panels-accordion-icon-color` | `var(--hub-accordion-icon-color, var(--hub-panels-accordion-btn-color))` | Accordion chevron icon color | `IN_USE` | `panels/src/lib/components/panels/panels.variables.scss:134` |
 | `--hub-panels-accordion-inner-border-radius` | `var(--hub-accordion-inner-border-radius, calc(var(--hub-panels-accordion-border-radius) - var(--hub-panels-accordion-border-width)))` | Accordion inner corner radius | `IN_USE` | `panels/src/lib/components/panels/panels.variables.scss:124` |
+| `--hub-panels-accordion-toggle-gutter` | `calc(var(--hub-panels-accordion-btn-icon-width) + var(--hub-panels-tab-gap))` | Space the trailing chevron reserves at the row.s end — whatever sits last in the header (heading or actions) keeps clear of the glyph; forced to `0px` when `togglePosition` places the chevron at the start | `IN_USE` | `panels/src/lib/components/panels/panels.accordion.scss:69` |
 | `--hub-panels-accordion-transition` | `var(--hub-accordion-transition, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease)` | Accordion header visual transition | `IN_USE` | `panels/src/lib/components/panels/panels.variables.scss:144` |
 | `--hub-panels-alert-accent` | `var(--hub-sys-border-color-default, #dee2e6)` | Alert accent stripe color | `IN_USE` | `panels/src/lib/components/panel/panel.component.scss:165` |
 | `--hub-panels-alert-accent-width` | `0.25rem` | Alert accent stripe width | `IN_USE` | `panels/src/lib/components/panel/panel.component.scss:169` |
@@ -2293,7 +2294,7 @@ The navigation strip is **semantic-accent aware**: a single `--hub-panels-accent
 | `--hub-panels-tab-padding-x` | `var(--hub-panels-nav-link-padding-x)` | Tab horizontal padding | `IN_USE` | `panels/src/lib/components/panels/panels.variables.scss:62` |
 | `--hub-panels-tab-padding-y` | `var(--hub-panels-nav-link-padding-y)` | Tab vertical padding | `IN_USE` | `panels/src/lib/components/panels/panels.variables.scss:63` |
 | `--hub-panels-tab-transition` | `var(--hub-sys-transition-base, all 0.2s ease-in-out)` | Tab state transition | `IN_USE` | `panels/src/lib/components/panels/panels.variables.scss:85` |
-| `--hub-panels-multiple-vertical-panel-min-width` | runtime (`0px`) | Min content width per `multiple + vertical` block, from the measured header height | `INTERNAL` | `panels/src/lib/components/panels/panels.component.ts:762` |
+| `--hub-panels-multiple-vertical-panel-min-width` | runtime (`0px`) | Min content width per `multiple + vertical` block, from the measured header height | `INTERNAL` | `panels/src/lib/components/panels/panels.component.ts:775` |
 | `--hub-tabs-gap` | `0` | Gap between tabs in the <hub-tab-nav> strip | `IN_USE` | `panels/src/lib/components/tab-nav/tab-nav.component.scss:18` |
 | `--hub-tabs-indicator-color` | `var(--hub-panels-accent, var(--hub-sys-color-primary, #0d6efd))` | Active-tab underline / active-pill fill colour for <hub-tab-nav> | `IN_USE` | `panels/src/lib/components/tab-nav/tab-nav.component.scss:16` |
 ### `milestones`
@@ -2320,7 +2321,7 @@ The navigation strip is **semantic-accent aware**: a single `--hub-panels-accent
 | `--hub-milestone-pulse-spread` | `0.75rem` | Spread radius of the pulse ring | `IN_USE` | `milestones/src/lib/milestones.component.scss:177` |
 | `--hub-milestone-reveal-duration` | `0.5s` | Duration of the connector reveal/fill animation | `IN_USE` | `milestones/src/lib/milestones.component.scss:235` |
 | `--hub-milestone-reveal-stagger` | `0.14s` | Per-index delay of the staggered reveal | `IN_USE` | `milestones/src/lib/milestones.component.scss:236` |
-| `--hub-milestone-index` | runtime (0-based) | Node position used to stagger the reveal delay; set per node by the parent | `INTERNAL` | `milestones/src/lib/milestone.component.ts:27` |
+| `--hub-milestone-index` | runtime (0-based) | Node position used to stagger the reveal delay; set per node by the parent | `INTERNAL` | `milestones/src/lib/milestone.component.ts:29` |
 ### `icons`
 
 Agnostic icon renderer (`ng-hub-ui-icons`). One token set themes any icon pack (Font Awesome, Bootstrap Icons, Material Symbols, Solar, custom SVG) uniformly. The variable-font axes (`fill`/`weight`/`grade`/`optical-size`) are applied via `font-variation-settings` and only affect variable icon fonts such as Material Symbols.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-ds",
-  "version": "22.6.0",
+  "version": "22.7.0",
   "license": "MIT",
   "scripts": {
     "build:tokens": "sass styles/tokens/hub-tokens.scss styles/tokens/hub-tokens.css --style=expanded --no-source-map",

package/styles/mixins/_layout.scss

@@ -54,8 +54,21 @@
 }
 
 /// A column spanning $span of the 12 tracks of a `row()`.
+/// Emits the `grid-column-end` longhand (identical auto-placement) so that
+/// `offset()` can set the start track on the same element independently.
 @mixin col($span: 12) {
-	grid-column: span #{$span};
+	grid-column-end: span #{$span};
+}
+
+/// Starts a `col()` at track $n + 1 of its `row()` — Bootstrap's offset
+/// semantics on the CSS grid. `offset(0)` resets to auto placement (the
+/// responsive `.offset-{bp}-0` reset).
+@mixin offset($n: 0) {
+	@if $n == 0 {
+		grid-column-start: auto;
+	} @else {
+		grid-column-start: #{$n + 1};
+	}
 }
 
 /// Centered page wrapper constrained to a container max-width.