@guildofgleks/ui 21.4.3 → 21.4.4

package/CHANGELOG.md

@@ -6,12 +6,78 @@ reached 1.0, so breaking changes may land in minor versions.
 
 ## [21.5.0] - planned
 
-Nothing yet. What this release already owes is in the source: every
-`@deprecated … Removed in 21.5.0` tag — the six legacy icon inputs on `gog-inputfield`, the
-`checkIconTemplate` / `clearIconTemplate` / `iconTemplate` / `chevronTemplate` inputs, the
-`<column>` element with its `Column` const and type, the string-keyed `[template]` column slot,
-and the `GogSelectOption` / `GogMultiselectOption` aliases (those two overran their announced
-21.4.0 removal). Each names its replacement in the tag itself.
+**The breaking release** — the one version consumers have to read before upgrading into. It
+carries the removals below and, per `docs/hardening-21.5.0.md`, the token-prefix rename
+(`--gog-ms-*`, `--gog-btn-*`, `--gog-input-*` spelled out in full). Everything non-breaking that
+is ready today ships in 21.4.4 instead, so a reader upgrading to 21.4.4 has nothing to migrate
+and a reader upgrading to 21.5.0 has one list to work through rather than one buried among fixes.
+
+### Removed
+
+Not done yet — this section records what the version owes. Fourteen public symbols carry an
+`@deprecated … Removed in 21.5.0` tag naming its own replacement:
+
+- the six legacy icon inputs on `gog-inputfield`;
+- the `checkIconTemplate` / `clearIconTemplate` / `iconTemplate` / `chevronTemplate` inputs;
+- the `<column>` element, with its `Column` const and type;
+- the string-keyed `[template]` column slot;
+- the `GogSelectOption` / `GogMultiselectOption` aliases — **these two overran their announced
+  21.4.0 removal**, which is the reason the date on this list is not moved again.
+
+One more is promised in prose rather than by a tag, so it has no `@deprecated` to grep for and is
+the one most likely to be missed:
+
+- the **`./src/styles/*` export** in `package.json`. Stylesheets moved to `./styles/*` in 21.3.2
+  and the README says the old path "keeps working until 21.5.0". Removing it breaks anyone still
+  importing `@guildofgleks/ui/src/styles/…`, and the README paragraph promising it goes too.
+
+## [21.4.4] - 17.08.2026
+
+Everything that is ready. Two defects and one addition, none of which changes an existing
+signature, so upgrading from 21.4.3 needs no migration — see the `gog-collapsible` entry only if
+you were relying on a panel being capped at 480px.
+
+### Added
+
+- **`ng add @guildofgleks/ui` now works.** It installs the latest version and adds
+  `node_modules/@guildofgleks/ui/styles/index.css` to your project's `angular.json` styles —
+  the one setup step that's pure mechanical JSON editing. Importing components and placing
+  `<gog-dialog />` / `<gog-toast-container />` are still manual; see the README.
+
+  In a patch rather than a minor because it is purely additive — it adds a way to install the
+  package and touches no existing API — the same reasoning that put "`CHANGELOG.md` now ships
+  inside the package" in 21.4.2.
+
+### Fixed
+
+- **An open `gog-collapsible` no longer clips content taller than 480px.**
+  `--gog-collapsible-max-height` defaulted to `480px` and the panel is `overflow: hidden`, so any
+  panel taller than that lost the rest of its content — with no scrollbar, no ellipsis and nothing
+  else to indicate it. The cap existed only to give the CSS transition an animatable target, which
+  meant every consumer had to discover the limit by having content disappear, then override the
+  token per instance. The default is now `max-content`, and `interpolate-size: allow-keywords` on
+  the panel keeps the open/close transition animating to it. `gog-accordion` never had this
+  problem — it animates `grid-template-rows` instead — so the two components now behave the same
+  way.
+
+  No token was added or removed, and nothing about the closed state changed. **Setting
+  `--gog-collapsible-max-height` to a length still caps the panel and still clips**, which is now
+  a deliberate opt-in rather than the default; per-instance overrides that only existed to work
+  around the old cap can be deleted.
+
+- **`gog-button`'s loading spinner was painted with the page's text colour.**
+  `--gog-btn-primary-spinner-color` and `--gog-btn-secondary-spinner-color` resolved to
+  `--gog-text-color` — the colour of text on the page background — while the label beside the
+  spinner used `--gog-accent-text-color`, the colour meant to sit on the button's fill. On the two
+  filled variants those are opposite ends of the palette, so the spinner came out washed out: on
+  the dark theme, `#f3ebd8` parchment on a `#fbbf24` amber button, next to a near-black label.
+  Both now resolve to the variant's own label colour, so a spinner reads exactly as strongly as
+  the text it replaced and follows any re-theming of the button's foreground. `outline` and
+  `ghost` were already correct and are untouched.
+
+  Only the two tokens' values changed; no token was added or removed. A theme that sets either
+  one explicitly is unaffected. Note the button as a whole still dims to
+  `--gog-btn-loading-opacity` (0.7) while loading — that is deliberate and separate from this.
 
 ## [21.4.3] - 16.08.2026
 
@@ -32,6 +98,7 @@ first entry if you were relying on a calendar filling its container.
 
   This sizes `inline` mode too — `[inline]="true"` renders `gog-calendar` with a border and
   nothing else. **Set `--gog-calendar-max-width: 100%` to keep the old full-width behaviour.**
+
 - **`--gog-datepicker-panel-width`** (default `max-content`) exposes the dropdown panel's width,
   which was hardcoded. Same value as before; nothing changes unless you set it.
 
@@ -80,7 +147,7 @@ entries above are that kind of gap, which is why a documentation-only patch was
 - **Overlays ignored custom properties set on `:root`.** A select panel, tooltip or any other
   overlay rendered into `<body>` copied the `data-theme` of its trigger's nearest themed
   ancestor. When that ancestor is `<html>` — the usual case — the copy made the overlay match
-  `theme.css`'s derived layer (`:root, [data-theme]`) *locally*, re-declaring every component
+  `theme.css`'s derived layer (`:root, [data-theme]`) _locally_, re-declaring every component
   token against the plain preset palette and discarding anything set on the root that the preset
   does not itself declare.
 
@@ -88,7 +155,7 @@ entries above are that kind of gap, which is why a documentation-only patch was
   `document.documentElement` — a live theme editor, or any runtime accent switch — saw the
   document follow while every overlay kept rendering the un-edited theme.
 
-  The attribute is now copied only for a genuinely *scoped* theme, where the overlay would
+  The attribute is now copied only for a genuinely _scoped_ theme, where the overlay would
   otherwise pick up the document's; when the theme sits on the document element, inheritance
   already does the work. Several themes rendered side by side in scoped subtrees keep working
   exactly as before.
@@ -108,6 +175,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
   `gogPageChange` deliberately stays quiet in two cases: the initial render, and the reset to
   page 1 that a new sort causes — that reset is part of the sort, and a consumer refetching from
   both events would issue two requests for one user action.
+
 - **`gog-table`: `lazy` — server-driven sorting and paging.** With `[lazy]="true"` the table
   stops sorting and slicing `value` and renders it exactly as handed over, treating it as the
   current page; `totalRecords` tells the paginator how many pages exist, and the two outputs are
@@ -124,6 +192,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
   **The select-all covers the current page, not the whole data set** — in `lazy` mode the table
   has never seen the other pages, and a control that meant different things in the two modes
   would be worse than either behaviour on its own.
+
 - **`gog-table`: `dataKey`.** The field (or dot-path) identifying a row. Selection matches on it
   instead of object identity — without it a refetch producing new objects silently drops the
   selection — and it becomes the `@for` track key, so the rendered DOM survives a refetch of the
@@ -132,7 +201,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
   Enter and Space activating the focused row. `gogRowClick` fires on a click either way; this is
   what stops a whole-row target from being mouse-only.
 - **`[gogButton]` — a link that looks like a button.** `gog-button` renders its own `<button>`,
-  so it could never *be* a link, and a large share of buttons on a real site are navigation. The
+  so it could never _be_ a link, and a large share of buttons on a real site are navigation. The
   directive inverts the relationship: the element stays the consumer's, and only the look is
   applied.
 
@@ -153,6 +222,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
   on an `<a>`) and no `loading` (the spinner is a projected child a directive cannot add). The
   selector is `a[gogButton], button[gogButton]`, not a bare attribute, so it cannot be put on a
   `<div>` and produce something that looks clickable and is invisible to the keyboard.
+
 - **`gog-paginator`: a rows-per-page select.** `showPageSizeSelect` turns it on (**off by
   default** — a paginator that silently grew a control would change every existing layout) and
   `pageSizeOptions` sets the choices, defaulting to `[10, 20, 30, 40, 50]`. Both are also
@@ -160,7 +230,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
   while the rest of the app uses the house default.
 - **`gog-paginator`: `pageSize` (a `model`) and `totalRecords`.** Given `totalRecords`, the
   paginator derives the page count from `pageSize` itself — which removes the
-  `computed(() => Math.ceil(total / size))` a consumer would otherwise have to write *and* keep
+  `computed(() => Math.ceil(total / size))` a consumer would otherwise have to write _and_ keep
   in sync with the select. `totalPages` still works and is right when a server hands you a page
   count directly; `totalRecords` wins if both are set. Changing the size returns to page 1:
   "page 5" of 10-row pages is not "page 5" of 50-row ones, so clamping alone would leave the user
@@ -174,7 +244,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
 - **`provideGogIcons(...)` — register your own icons by name.** `gog-icon` shipped a closed set
   of 20 glyphs, and the only way to render anything else was a `TemplateRef` per instance,
   which costs an `<ng-template>` at every use site and does not work at all for the components
-  that take an icon *name* (`gog-tag`, `gog-chip`, `gog-tabs`, `gog-button-toggle-group`,
+  that take an icon _name_ (`gog-tag`, `gog-chip`, `gog-tabs`, `gog-button-toggle-group`,
   `ToastService`, `DialogService`). In practice that meant installing a second icon library —
   precisely the dependency the "no CDK, no Material" footprint exists to avoid.
 
@@ -184,8 +254,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
   ```
 
   ```html
-  <gog-icon name="cart" />
-  <gog-tag iconName="cart">In basket</gog-tag>
+  <gog-icon name="cart" /> <gog-tag iconName="cart">In basket</gog-tag>
   ```
 
   - A registered name **overrides a built-in of the same name**, so an app can replace the
@@ -193,6 +262,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
   - Providing it again lower in the injector tree **layers onto** the parent set rather than
     replacing it, matching `provideGogConfig`.
   - The registry is also exposed as the `GOG_ICONS` injection token.
+
 - **`GogBuiltinIconName`** — the closed union of the shipped glyphs, for code that wants
   exhaustiveness (an icon gallery, a `Record` keyed by icon).
 - **21 more built-in icons, taking the set from 20 to 41.** The old set covered what the
@@ -213,6 +283,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
 
   Cost: `ICON_DEFS` is one object, so every consumer pays for all of it — it grew from 8.0 KB to
   16.5 KB raw, **1.6 KB to 2.7 KB gzipped**.
+
 - **Attribution for the icons.** The glyphs were always Lucide but the package said so nowhere;
   Lucide's ISC licence asks for the notice to travel with them. It is now at the top of
   `icons.ts` and summarised in the README's licence section.
@@ -400,7 +471,7 @@ made unreachable.
   overriding it, and ignored outside `range` mode (nothing to disable "one side" of there). A
   one-sided disable only dims and disables that one thumb (its native input's own `disabled`
   attribute takes it out of the tab order); the whole-control `.gog-slider--disabled` styling
-  (dimming + `pointer-events: none` over the whole track) only kicks in once *both* sides are
+  (dimming + `pointer-events: none` over the whole track) only kicks in once _both_ sides are
   disabled, since applying it for just one would also block pointer input to the other,
   still-enabled thumb. Reactive forms are unaffected by this addition: a `[formControl]`'s own
   `.disable()`/`.enable()` still speaks for both thumbs at once, same as before — one

package/README.md

@@ -31,6 +31,20 @@ npm install @guildofgleks/ui
 
 ## Setup
 
+Install it with whichever package manager you use — or with `ng add`, which installs it and does
+step 1 for you:
+
+```bash
+npm install @guildofgleks/ui
+# or
+yarn add @guildofgleks/ui
+# or — also does step 1 below
+ng add @guildofgleks/ui
+```
+
+Steps 2 and 3 are yours either way: a schematic can't know where in your app you want components
+or dialog and toast hosts.
+
 **1. Add the stylesheet.** It carries the baseline theme and the utility classes the components
 use — without it they render unstyled.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guildofgleks/ui",
-  "version": "21.4.3",
+  "version": "21.4.4",
   "engines": {
     "node": ">=20.19.0"
   },
@@ -37,6 +37,7 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "schematics": "./schematics/collection.json",
   "exports": {
     "./styles/*": {
       "default": "./styles/*"

package/schematics/collection.json

@@ -0,0 +1,9 @@
+{
+  "schematics": {
+    "ng-add": {
+      "description": "Adds the @guildofgleks/ui baseline stylesheet to your project's angular.json.",
+      "factory": "./ng-add/index.cjs#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/index.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const STYLE_PATH = 'node_modules/@guildofgleks/ui/styles/index.css';
+function ngAdd(options) {
+    return (_tree, context) => {
+        return (0, workspace_1.updateWorkspace)((workspace) => {
+            const projectNames = options.project
+                ? [options.project]
+                : [...workspace.projects.keys()].filter((name) => workspace.projects.get(name)?.extensions['projectType'] === 'application');
+            if (projectNames.length === 0) {
+                context.logger.warn(`@guildofgleks/ui: no application project found to add "${STYLE_PATH}" to. ` +
+                    "Add it to your project's styles array yourself.");
+            }
+            let added = false;
+            for (const name of projectNames) {
+                const project = workspace.projects.get(name);
+                const build = project?.targets.get('build');
+                if (!build) {
+                    if (options.project) {
+                        context.logger.warn(`@guildofgleks/ui: project "${name}" has no "build" target — skipping the styles setup.`);
+                    }
+                    continue;
+                }
+                build.options ?? (build.options = {});
+                added = prependStyle(build.options) || added;
+                // `@angular/build:unit-test`, the v21 default, has no `styles` of its own — it builds
+                // through `buildTarget`, so the line above already covers component tests. The karma
+                // builders do carry their own array, and there the build target's styles are not read.
+                // Only touch the test target when it already declares one: adding the key to a builder
+                // whose schema forbids it would make `ng test` fail schema validation.
+                const test = project?.targets.get('test');
+                if (test?.options && Array.isArray(test.options['styles'])) {
+                    added = prependStyle(test.options) || added;
+                }
+            }
+            // Only say so when something actually changed — a re-run that finds the stylesheet already
+            // there, or a workspace where no project could be updated, should not claim otherwise.
+            if (added) {
+                context.logger.info("@guildofgleks/ui: added the baseline stylesheet to your project's styles. Next: import " +
+                    'the standalone components you use, and if you use dialogs or toasts, add ' +
+                    '<gog-dialog /> and <gog-toast-container /> once in your root component. See ' +
+                    'https://ui.guildofgleks.com for details.');
+            }
+        });
+    };
+}
+/**
+ * Puts the baseline stylesheet first in a target's `styles`, so anything the consumer already had
+ * still comes after it and wins. Returns whether it changed anything — a second `ng add` must be
+ * a no-op.
+ */
+function prependStyle(options) {
+    const existing = options['styles'];
+    const styles = Array.isArray(existing) ? existing : [];
+    if (styles.includes(STYLE_PATH)) {
+        return false;
+    }
+    options['styles'] = [STYLE_PATH, ...styles];
+    return true;
+}

package/schematics/ng-add/schema.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/ng-add/schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "GuildOfGleksUiNgAdd",
+  "title": "GuildOfGleks UI ng-add schema",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the library's stylesheet to.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  }
+}

package/src/styles/theme.css

@@ -400,10 +400,15 @@
      rules (they style content this component's consumer projects, which sits outside
      `gog-collapsible`'s own view and can't be reached by its scoped stylesheet). */
   --gog-collapsible-transition-duration: var(--gog-duration-slow);
-  /* Generous fixed cap rather than a measured height: the CSS-only max-height transition
-     trades exact timing for arbitrary content (any number of children) without JS. Override
-     per-instance if a particular panel's content can exceed this. */
-  --gog-collapsible-max-height: 480px;
+  /* The panel's natural height, so an open panel never truncates whatever it holds. This was
+     a fixed `480px` cap, which bought the CSS-only transition an animatable target but paid
+     for it by silently clipping any taller content — `overflow: hidden` means no scrollbar
+     and no other sign that the rest of the panel is missing. `max-content` still animates,
+     via `interpolate-size: allow-keywords` on the content element (see utilities.css); where
+     that is unsupported the panel snaps open instead of easing, which is the right way round
+     for the trade — losing an animation is visible and harmless, losing content is neither.
+     Set a length here to cap a particular panel on purpose; it will clip, as before. */
+  --gog-collapsible-max-height: max-content;
   --gog-collapsible-disabled-opacity: var(--gog-disabled-opacity);
 
   /* ── Button ────────────────────────────────────────────────────────────────
@@ -436,7 +441,10 @@
   --gog-btn-primary-hover-color: var(--gog-btn-primary-color);
   --gog-btn-primary-hover-shadow: 0 0 16px
     color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
-  --gog-btn-primary-spinner-color: var(--gog-text-color);
+  /* The label's colour, not the page's. `--gog-text-color` is the colour of text on the page
+     background, and a filled button is not the page background — on the dark theme that put pale
+     parchment on bright amber, which read as a washed-out spinner beside a near-black label. */
+  --gog-btn-primary-spinner-color: var(--gog-btn-primary-color);
 
   --gog-btn-secondary-bg: var(--gog-secondary-color);
   --gog-btn-secondary-color: var(--gog-accent-text-color, var(--gog-primary-color));
@@ -445,7 +453,8 @@
   --gog-btn-secondary-hover-bg: var(--gog-accent-color);
   --gog-btn-secondary-hover-color: var(--gog-btn-secondary-color);
   --gog-btn-secondary-hover-shadow: none;
-  --gog-btn-secondary-spinner-color: var(--gog-text-color);
+  /* Same reasoning as primary: the other filled variant, the same mismatch. */
+  --gog-btn-secondary-spinner-color: var(--gog-btn-secondary-color);
 
   --gog-btn-outline-bg: transparent;
   --gog-btn-outline-color: var(--gog-accent-color);