@guildofgleks/ui 21.4.2 → 21.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guildofgleks/ui",
-  "version": "21.4.2",
+  "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);
@@ -498,6 +507,9 @@
   /* ── Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) ── */
   --gog-calendar-font-family: var(--gog-font-body);
   --gog-calendar-color: var(--gog-text-color);
+  /* Caps the host at its month grid instead of letting the header spread to the container.
+     `100%` restores the pre-21.5.0 full-width behaviour. */
+  --gog-calendar-max-width: max-content;
   --gog-calendar-padding: 12px;
   --gog-calendar-header-gap: 4px;
   --gog-calendar-header-margin: 8px;
@@ -872,6 +884,9 @@
   --gog-datepicker-panel-border-color: var(--gog-border-color);
   --gog-datepicker-panel-radius: var(--gog-radius);
   --gog-datepicker-panel-gap: 2px;
+  /* The dropdown surface. Inline mode is `gog-calendar` itself, so it sizes from
+     `--gog-calendar-max-width` rather than from this. */
+  --gog-datepicker-panel-width: max-content;
   --gog-datepicker-float-label-reserve: var(--gog-field-float-label-reserve);
   --gog-datepicker-float-label-in-top: var(--gog-field-float-label-in-top);
   --gog-datepicker-float-label-over-gap: var(--gog-field-float-label-over-gap);

package/src/styles/utilities.css

@@ -1,170 +1,185 @@
-.gog-inline-center {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gog-flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/*
- * Scopes reflow to this subtree. Never put it on an element that has to paint something
- * outside its own box — `contain: layout` creates a stacking context, so a popup inside
- * it can no longer stack above the rest of the page no matter its z-index. That rules it
- * out for gog-select and gog-multiselect.
- */
-.gog-contained-layout {
-  contain: layout style;
-}
-
-.gog-cursor-pointer {
-  cursor: pointer;
-}
-
-.gog-cursor-wait {
-  cursor: wait;
-}
-
-.gog-cursor-not-allowed {
-  cursor: not-allowed;
-}
-
-/*
- * Present to assistive tech, invisible on screen. The clip-path/1px recipe rather than
- * `display: none` or `visibility: hidden`, both of which remove the text from the
- * accessibility tree along with the pixels.
- */
-.gog-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/*
- * `gogBadge`'s classes, global for the same reason as `gog-collapsible`'s below: the
- * directive appends its badge into a *consumer's* element, which is light DOM belonging to
- * that consumer's view, so a scoped stylesheet could never reach it.
- */
-.gog-badge-host {
-  /* The badge is positioned against this element, so it has to be a containing block.
-     Harmless on an already-relative host; a host that is itself absolutely positioned
-     should set its own position after this class, which ordinary specificity allows. */
-  position: relative;
-}
-
-.gog-badge {
-  position: absolute;
-  z-index: var(--gog-badge-z);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: var(--gog-badge-size);
-  height: var(--gog-badge-size);
-  padding-inline: var(--gog-badge-padding-inline);
-  border: var(--gog-badge-border-width) var(--gog-badge-border-style) var(--gog-badge-border-color);
-  border-radius: var(--gog-badge-radius);
-  background-color: var(--gog-badge-bg, var(--gog-badge-variant-bg, var(--gog-badge-danger-bg)));
-  color: var(--gog-badge-color, var(--gog-badge-variant-color, var(--gog-badge-danger-color)));
-  font-family: var(--gog-badge-font-family);
-  font-size: var(--gog-badge-font-size);
-  font-weight: var(--gog-badge-font-weight);
-  line-height: var(--gog-badge-line-height);
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-/* A dot carries no text, so it collapses to a circle and drops its padding. */
-.gog-badge--dot {
-  min-width: var(--gog-badge-dot-size);
-  width: var(--gog-badge-dot-size);
-  height: var(--gog-badge-dot-size);
-  padding-inline: 0;
-  border-radius: 50%;
-}
-
-/* Logical insets rather than a translate, so the corners follow the writing direction. */
-.gog-badge--top-end {
-  top: calc(-1 * var(--gog-badge-offset));
-  inset-inline-end: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--top-start {
-  top: calc(-1 * var(--gog-badge-offset));
-  inset-inline-start: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--bottom-end {
-  bottom: calc(-1 * var(--gog-badge-offset));
-  inset-inline-end: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--bottom-start {
-  bottom: calc(-1 * var(--gog-badge-offset));
-  inset-inline-start: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--success {
-  --gog-badge-variant-bg: var(--gog-badge-success-bg);
-  --gog-badge-variant-color: var(--gog-badge-success-color);
-}
-
-.gog-badge--danger {
-  --gog-badge-variant-bg: var(--gog-badge-danger-bg);
-  --gog-badge-variant-color: var(--gog-badge-danger-color);
-}
-
-.gog-badge--warning {
-  --gog-badge-variant-bg: var(--gog-badge-warning-bg);
-  --gog-badge-variant-color: var(--gog-badge-warning-color);
-}
-
-.gog-badge--info {
-  --gog-badge-variant-bg: var(--gog-badge-info-bg);
-  --gog-badge-variant-color: var(--gog-badge-info-color);
-}
-
-/*
- * `gog-collapsible`'s trigger/content classes, global rather than component-scoped: both
- * are applied via `gogCollapsibleTrigger`/`gogCollapsibleContent` directives to elements a
- * *consumer* projects into `<gog-collapsible>` — light DOM that belongs to the consumer's
- * own view, not `gog-collapsible`'s, so a scoped stylesheet on the component itself would
- * never reach it.
- */
-.gog-collapsible__trigger {
-  cursor: pointer;
-}
-
-.gog-collapsible__trigger[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: var(--gog-collapsible-disabled-opacity);
-}
-
-.gog-collapsible__content {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition:
-    max-height var(--gog-collapsible-transition-duration) var(--gog-easing),
-    opacity var(--gog-collapsible-transition-duration) var(--gog-easing);
-}
-
-.gog-collapsible__content--open {
-  max-height: var(--gog-collapsible-max-height);
-  opacity: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .gog-collapsible__content {
-    transition: none;
-  }
-}
+.gog-inline-center {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gog-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+ * Scopes reflow to this subtree. Never put it on an element that has to paint something
+ * outside its own box — `contain: layout` creates a stacking context, so a popup inside
+ * it can no longer stack above the rest of the page no matter its z-index. That rules it
+ * out for gog-select and gog-multiselect.
+ */
+.gog-contained-layout {
+  contain: layout style;
+}
+
+.gog-cursor-pointer {
+  cursor: pointer;
+}
+
+.gog-cursor-wait {
+  cursor: wait;
+}
+
+.gog-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+/*
+ * Present to assistive tech, invisible on screen. The clip-path/1px recipe rather than
+ * `display: none` or `visibility: hidden`, both of which remove the text from the
+ * accessibility tree along with the pixels.
+ */
+.gog-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * `gogBadge`'s classes, global for the same reason as `gog-collapsible`'s below: the
+ * directive appends its badge into a *consumer's* element, which is light DOM belonging to
+ * that consumer's view, so a scoped stylesheet could never reach it.
+ */
+.gog-badge-host {
+  /* The badge is positioned against this element, so it has to be a containing block.
+     Harmless on an already-relative host; a host that is itself absolutely positioned
+     should set its own position after this class, which ordinary specificity allows. */
+  position: relative;
+}
+
+.gog-badge {
+  position: absolute;
+  z-index: var(--gog-badge-z);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--gog-badge-size);
+  height: var(--gog-badge-size);
+  padding-inline: var(--gog-badge-padding-inline);
+  border: var(--gog-badge-border-width) var(--gog-badge-border-style) var(--gog-badge-border-color);
+  border-radius: var(--gog-badge-radius);
+  background-color: var(--gog-badge-bg, var(--gog-badge-variant-bg, var(--gog-badge-danger-bg)));
+  color: var(--gog-badge-color, var(--gog-badge-variant-color, var(--gog-badge-danger-color)));
+  font-family: var(--gog-badge-font-family);
+  font-size: var(--gog-badge-font-size);
+  font-weight: var(--gog-badge-font-weight);
+  line-height: var(--gog-badge-line-height);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* A dot carries no text, so it collapses to a circle and drops its padding. */
+.gog-badge--dot {
+  min-width: var(--gog-badge-dot-size);
+  width: var(--gog-badge-dot-size);
+  height: var(--gog-badge-dot-size);
+  padding-inline: 0;
+  border-radius: 50%;
+}
+
+/* Logical insets rather than a translate, so the corners follow the writing direction. */
+.gog-badge--top-end {
+  top: calc(-1 * var(--gog-badge-offset));
+  inset-inline-end: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--top-start {
+  top: calc(-1 * var(--gog-badge-offset));
+  inset-inline-start: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--bottom-end {
+  bottom: calc(-1 * var(--gog-badge-offset));
+  inset-inline-end: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--bottom-start {
+  bottom: calc(-1 * var(--gog-badge-offset));
+  inset-inline-start: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--success {
+  --gog-badge-variant-bg: var(--gog-badge-success-bg);
+  --gog-badge-variant-color: var(--gog-badge-success-color);
+}
+
+.gog-badge--danger {
+  --gog-badge-variant-bg: var(--gog-badge-danger-bg);
+  --gog-badge-variant-color: var(--gog-badge-danger-color);
+}
+
+.gog-badge--warning {
+  --gog-badge-variant-bg: var(--gog-badge-warning-bg);
+  --gog-badge-variant-color: var(--gog-badge-warning-color);
+}
+
+.gog-badge--info {
+  --gog-badge-variant-bg: var(--gog-badge-info-bg);
+  --gog-badge-variant-color: var(--gog-badge-info-color);
+}
+
+/*
+ * `gog-collapsible`'s trigger/content classes, global rather than component-scoped: both
+ * are applied via `gogCollapsibleTrigger`/`gogCollapsibleContent` directives to elements a
+ * *consumer* projects into `<gog-collapsible>` — light DOM that belongs to the consumer's
+ * own view, not `gog-collapsible`'s, so a scoped stylesheet on the component itself would
+ * never reach it.
+ */
+.gog-collapsible__trigger {
+  cursor: pointer;
+}
+
+.gog-collapsible__trigger[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--gog-collapsible-disabled-opacity);
+}
+
+.gog-collapsible__content {
+  /*
+   * Lets the `max-height` transition below run to `max-content` — the default of
+   * `--gog-collapsible-max-height` — instead of refusing to animate to an intrinsic keyword.
+   * That default is what keeps an open panel from clipping its content at an arbitrary
+   * number; this property is only what makes the same value animate.
+   *
+   * Declared here rather than on `:root`: the property is inherited, and a component library
+   * has no business switching keyword interpolation on for a consumer's whole document. It
+   * does inherit into this panel's own descendants, which is harmless — it changes nothing
+   * for an element that is not animating to or from an intrinsic size.
+   *
+   * Unsupported browsers ignore it and the panel snaps open, exactly as it does when a
+   * consumer sets `--gog-collapsible-max-height: none`.
+   */
+  interpolate-size: allow-keywords;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    max-height var(--gog-collapsible-transition-duration) var(--gog-easing),
+    opacity var(--gog-collapsible-transition-duration) var(--gog-easing);
+}
+
+.gog-collapsible__content--open {
+  max-height: var(--gog-collapsible-max-height);
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gog-collapsible__content {
+    transition: none;
+  }
+}

package/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);
@@ -498,6 +507,9 @@
   /* ── Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) ── */
   --gog-calendar-font-family: var(--gog-font-body);
   --gog-calendar-color: var(--gog-text-color);
+  /* Caps the host at its month grid instead of letting the header spread to the container.
+     `100%` restores the pre-21.5.0 full-width behaviour. */
+  --gog-calendar-max-width: max-content;
   --gog-calendar-padding: 12px;
   --gog-calendar-header-gap: 4px;
   --gog-calendar-header-margin: 8px;
@@ -872,6 +884,9 @@
   --gog-datepicker-panel-border-color: var(--gog-border-color);
   --gog-datepicker-panel-radius: var(--gog-radius);
   --gog-datepicker-panel-gap: 2px;
+  /* The dropdown surface. Inline mode is `gog-calendar` itself, so it sizes from
+     `--gog-calendar-max-width` rather than from this. */
+  --gog-datepicker-panel-width: max-content;
   --gog-datepicker-float-label-reserve: var(--gog-field-float-label-reserve);
   --gog-datepicker-float-label-in-top: var(--gog-field-float-label-in-top);
   --gog-datepicker-float-label-over-gap: var(--gog-field-float-label-over-gap);