@guildofgleks/ui 21.4.3 → 21.4.4

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);