npm - @guildofgleks/ui - Versions diffs - 21.5.2 → 21.6.0 - Mend

@guildofgleks/ui 21.5.2 → 21.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/AGENTS.md +29 -1
package/CHANGELOG.md +123 -0
package/README.md +4 -0
package/fesm2022/guildofgleks-ui.mjs +73 -8
package/fesm2022/guildofgleks-ui.mjs.map +1 -1
package/package.json +1 -1
package/styles/button.css +19 -2
package/styles/menu.css +13 -3
package/styles/utilities.css +37 -1
package/types/guildofgleks-ui.d.ts +50 -3

package/AGENTS.md CHANGED Viewed

@@ -178,6 +178,10 @@ Full model is in `README.md`'s Theming section and `theming.md`; short version:
   still resolve and are removed in 21.7.0 — don't write new code with them. The exception is
   `--gog-input-*`, which is not an abbreviation: it is the shared text-field block that
   `gog-inputfield` and `gog-textarea` both render, and it keeps that name.
+- **The package does not need the app's `box-sizing` reset** (since 21.6.0): `utilities.css`
+  sets `border-box` on every element carrying a `gog-*` class, including the ones the library
+  puts on a consumer's own element. Do not add a reset "so the components line up" — they
+  already do, and a `* { box-sizing: content-box }` in an app is the only thing that undoes it.
 - Theme switch is a `data-theme` attribute, usually on `<html>`, toggled through the
   `ThemeService` (`inject(ThemeService).setTheme('dark')` / `.toggleTheme()` / `.theme` signal).
   Ships `light` and `dark`. Three more importable presets: `slate`, `one-dark`, `one-light`
@@ -1169,7 +1173,8 @@ they never asked to be.
 | `totalPosition`               | `'left'\|'right'\|'opposite'` | `'opposite'`                        |
 | `loading`                     | `boolean`                     | `false`                             |
 | `showColumnBorders`           | `boolean`                     | `false`                             |
-| `stickyHeader`                | `boolean`                     | `false`                             |
+| `stickyHeader`                | `boolean`                     | `false` — pair with `maxHeight`     |
+| `maxHeight`                   | `string \| null`              | `null` — any CSS length             |
 | `size`                        | `GogSize`                     | `'lg'` (row density — not `'md'`)   |
 | `lazy`                        | `boolean`                     | `false` — see below                 |
 | `totalRecords`                | `number \| null`              | `null` — `lazy` only                |
@@ -1184,6 +1189,29 @@ null }` when the third click clears it), `gogPageChange: number` (1-based; **doe
 first render, nor for the page reset a new sort causes — that reset belongs to the sort),
 `gogRowClick: GogTableRowClickEvent<T>` (`{ row, index, originalEvent }`).
+**`fullWidth` also picks the layout algorithm.** Left at its default the table is `100%` wide with
+`table-layout: fixed`; since 21.6.0 `[fullWidth]="false"` makes it `fit-content` with
+`table-layout: auto`, so the columns are measured against their content instead of splitting the
+total evenly. Before 21.6.0 that split clipped the widest header, and a `width` on the column was
+the workaround — under auto layout a stated `width` is a suggestion weighed against content
+rather than a hard split, so those can usually go.
+**`stickyHeader` needs `maxHeight`** (both since 21.6.0 for the pairing). A sticky element
+resolves against its nearest scroll container, and the table wraps itself in a `gog-scroll`;
+once that scroller moves on either axis it is a scroll container on *both*, because CSS coerces
+`overflow-y: visible` to `auto` beside a scrolling `overflow-x` (and `clip` to `hidden`). So the
+header can only ever stick to something inside the table — and without `maxHeight` that viewport
+is exactly as tall as its content and never scrolls, so there is nothing to stick to.
+```html
+<gog-table [value]="rows" maxHeight="260px" [stickyHeader]="true">…</gog-table>
+```
+`maxHeight` takes any CSS length and is what makes the table own its vertical scrolling. Left
+`null`, the table grows to its content and an ancestor scrolls it — the header then follows that
+ancestor's scroll like everything else, which is the pre-21.6.0 behaviour and is fine as long as
+you are not asking for a sticky header.
 Columns are declared as **projected `gog-column` children**, not an input array:
 ```html

package/CHANGELOG.md CHANGED Viewed

@@ -4,6 +4,129 @@ All notable changes to `@guildofgleks/ui` are documented here. Format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/); this project has not yet
 reached 1.0, so breaking changes may land in minor versions.
+## [21.6.0] - 23.08.2026
+### Fixed
+- **A loading `gog-accordion` announces itself.** It sets `aria-busy="true"` while `loading` is
+  on. Its skeleton bars are `aria-hidden` and the real headers are not rendered, so without it the
+  component was not "loading" to a screen reader — it was **empty**, which reads as "there is
+  nothing here" rather than "this is coming".
+  The placeholder rows also gained the shape they were missing: **a chevron placeholder**, so the
+  silhouette is the one that arrives instead of the chevron appearing out of nowhere, and
+  **varying title widths** instead of every bar at a flat 55%, which read as a repeating progress
+  artifact rather than as titles of differing length. Widths cycle by row index rather than
+  randomising, so a server-rendered pass and its hydration agree.
+  The geometry was already correct and is unchanged — measured at the same `size`, the skeleton
+  header is 46px against the real 47px.
+  **`gog-table` and `gog-autocomplete` still do not set `aria-busy`.** The rule is now written
+  down in the repo's API guide along with which loading treatment belongs to which kind of
+  component; those two are its known violations and are tracked.
+- **The library no longer needs your `box-sizing` reset.** Everything it renders now sizes itself
+  `border-box`, set once in `styles/utilities.css` on any element carrying a `gog-*` class.
+  Without a reset the components quietly stopped honouring their own size tokens:
+  `--gog-select-min-width` is `120px`, and a `gog-select` measured **148px**; its inner control
+  went from 120px to 176px, and `gog-toggle__track` and `gog-checkbox__box` inflated the same way.
+  Measured across four showcase pages, 12–16 elements per page came out a different size. Nothing
+  looked broken, which is why it went unreported — a consumer without a reset simply got a
+  differently-proportioned library.
+  **If your app has `* { box-sizing: border-box }`, nothing changes**; the library was already
+  rendering under it. The rule is a single class in specificity, so your own styles still win.
+- **Disabled and focus styling can no longer be lost to an ordinary app stylesheet.** `[gogButton]`
+  and `gogMenuItem` are applied to *your* element, which is the element you style — and a plain
+  `.my-button { cursor: pointer }` in an Angular component stylesheet is the same specificity as
+  the library's `.gog-btn:disabled` once `[_ngcontent-…]` is stamped on it, so it won on source
+  order. Measured: a disabled button reading `cursor: pointer` at full opacity — enabled-looking
+  and enabled-feeling while disabled. For a menu item it is worse, because the arrow keys step
+  over a disabled item: the pointer and the keyboard disagreed about what was there.
+  Five rules across `styles/button.css` and `styles/menu.css` — the `:disabled` and
+  `:focus-visible` pairs — now carry one more point of specificity. `:hover` and `:active` needed
+  nothing; their `:not(:disabled)` already had it.
+  **Restyling these is still yours**, it just has to be deliberate now: any selector of your own
+  with two classes wins, as before. The base `.gog-btn` look is untouched and as overridable as
+  it ever was — what is defended is state and focus visibility, where losing silently is a
+  correctness and accessibility bug rather than a difference of taste.
+- **A disabled `gogCollapsibleTrigger` shows a disabled cursor.** It carried whatever cursor the
+  consumer had put on the element — usually `pointer`, since the trigger is their own button.
+  The library's `cursor: not-allowed` was there, and losing: an ordinary
+  `.my-trigger { cursor: pointer }` in a consumer's component stylesheet is the same specificity
+  once Angular stamps `[_ngcontent-…]` onto it, and it comes later in the cascade. The rule is
+  now scoped through `gog-collapsible`, which settles it without `!important`.
+  If you added a `cursor` to your own trigger, you can drop it — the directive has set
+  `cursor: pointer` since it started applying `.gog-collapsible__trigger`.
+- **`gog-autocomplete`: the text can be erased again.** With a selection held, backspacing could
+  not clear the field — nine backspaces on "Amsterdam" left "Amsterdam". Deleting the last
+  character takes the text under `minLength`, which closes the panel; the effect that keeps the
+  field showing its selection used `!isOpen()` to mean "the user is not mid-edit", so closing the
+  panel made it write the selected label straight back into the input.
+  The panel closes for reasons that are not "the user finished" — text under `minLength`, Escape,
+  Tab — so editing is now tracked directly instead of inferred from it. The effect keeps its real
+  job, which is syncing a value the component did not set: a form writing one in, or the options
+  arriving after the value did.
+  **`forceSelection` is unaffected.** It still snaps the field back to the selection on blur and
+  on Escape, which is where that was always meant to happen; what stopped is the snap-back firing
+  mid-keystroke.
+### Added
+- **`gog-table`: `maxHeight`** — any CSS length (`'420px'`, `'60vh'`), capping the table's own
+  scroll viewport so the table owns its vertical scrolling. **This is what makes `stickyHeader`
+  work**, and the two are meant to be used together:
+  ```html
+  <gog-table [value]="rows" maxHeight="260px" [stickyHeader]="true">…</gog-table>
+  ```
+  `stickyHeader` has never held while the table scrolled sideways. A sticky element resolves
+  against its nearest scroll container; the table wraps itself in a `gog-scroll`, and the moment
+  that scroller moves on one axis it is a scroll container on **both**, because CSS coerces
+  `overflow-y: visible` to `auto` next to a scrolling `overflow-x` — and `clip` to `hidden`, which
+  is also a scroll container. Measured in a browser: a header 147px out of view, with the
+  component's own `overflow-y: visible` showing as a computed `auto`.
+  So the header cannot be made to stick to anything outside the table, and the fix is to give the
+  inside something to stick to. With `maxHeight` set the viewport is the vertical scrollport and
+  the header pins to it — verified with both axes scrolling at once.
+  An input rather than a `--gog-table-*` token, even though the value only lands in CSS, because
+  it also decides whether the internal scroller handles the vertical axis. It has to for a capped
+  table; it must **not** for an uncapped one, or every table becomes a scroll container and takes
+  the consumer's own scrolling region out of its descendants' sticky chain — measured at 147px
+  when tried that way. That is behaviour, not appearance.
+  **Nothing changes for a table without it.** `maxHeight` defaults to `null`, the viewport stays
+  at content height and its vertical axis stays inert.
+### Fixed
+- **`[fullWidth]="false"` no longer clips the widest column's header.** The table is
+  `table-layout: fixed` and switches to `width: fit-content` in this mode, so the browser split
+  that width evenly across the columns instead of measuring them against their content — and
+  `overflow: hidden` on the cell cut whatever did not fit. Measured on a five-column table:
+  "Component" was given 100px of 448px while needing 119px.
+  It now lays out with `table-layout: auto` whenever `fullWidth` is false. Fixed layout only buys
+  anything when the width comes from outside the table; at `fit-content` it comes from the content
+  anyway, so there was nothing to trade away. The same table now gives "Component" 133px of 454px.
+  **`fullWidth` left at its default is untouched** and still uses fixed layout. If you set `width`
+  on a `gog-column` purely to work around the clipping, you can drop it — under auto layout a
+  stated width becomes a suggestion the browser weighs against content, rather than a hard split.
 ## [21.5.2] - 22.08.2026
 Documentation only, and specifically the copy of this file that ships inside the package: 21.5.0

package/README.md CHANGED Viewed

@@ -59,6 +59,10 @@ use — without it they render unstyled.
 ]
 ```
+It brings its own `box-sizing: border-box`, scoped to the elements the library renders, so the
+components size correctly whether or not your app has a global reset — since 21.6.0. Your own
+reset is untouched either way, and a single class of specificity means your own styles still win.
 **2. Import components where you use them** — each is standalone:
 ```ts