@guildofgleks/ui 21.5.2 → 21.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guildofgleks/ui",
-  "version": "21.5.2",
+  "version": "21.6.1",
   "engines": {
     "node": ">=20.19.0"
   },

package/styles/button.css

@@ -67,7 +67,24 @@
     color var(--gog-button-transition-duration) var(--gog-easing);
 }
 
-.gog-btn:focus-visible {
+/*
+ * The doubled class on this rule and the disabled one below is deliberate, and the only two
+ * rules in this file that need it.
+ *
+ * `[gogButton]` goes on the *consumer's* own element, which is the element they style — and
+ * Angular's emulated encapsulation stamps `[_ngcontent-…]` onto every rule in a component
+ * stylesheet, so an ordinary `.my-btn { cursor: pointer }` is (0,2,0). That exactly ties
+ * `.gog-btn:disabled` and wins on source order, because this file loads before the app's own
+ * styles. Measured in the showcase: a disabled button went from `not-allowed`/`0.4` to
+ * `pointer`/`1` under a single-class consumer rule — it looked and felt enabled while disabled.
+ *
+ * `:hover` and `:active` below need no help: their `:not(:disabled)` already makes them (0,3,0).
+ * The base `.gog-btn` is left beatable on purpose — restyling the look is the consumer's call.
+ * These two are not look, they are state and focus visibility, and losing them silently is a
+ * correctness and accessibility regression rather than a taste one. A consumer who genuinely
+ * wants to restyle them can still do it by being specific about it.
+ */
+.gog-btn.gog-btn:focus-visible {
   outline: var(--gog-button-focus-ring-width) solid
     var(
       --gog-button-hover-bg,
@@ -114,7 +131,7 @@
   }
 }
 
-.gog-btn:disabled {
+.gog-btn.gog-btn:disabled {
   opacity: var(--gog-button-disabled-opacity);
   cursor: not-allowed;
 }

package/styles/index.css

@@ -19,3 +19,8 @@
 @import './button.css';
 /* Same reason: `gogMenuItem` marks a consumer's own <button>. */
 @import './menu.css';
+/* Same reason again: `gogCardHeader`, `gogCardMedia`, `gogCardFooter`, `gogCardLink`,
+   `gogPanelHeader` and `gogPanelFooter` all mark a consumer's own element. */
+@import './surfaces.css';
+/* Same reason once more: `gogRipple` paints into a consumer's own element. */
+@import './ripple.css';

package/styles/menu.css

@@ -74,18 +74,28 @@
   transition: background-color var(--gog-menu-transition-duration) var(--gog-easing);
 }
 
+/*
+ * Doubled class on the `:focus-visible` and `:disabled` rules, for the reason spelled out in
+ * `button.css`: a menu item is the consumer's own `<button>`, so an ordinary single-class rule
+ * in their component stylesheet ties these at (0,2,0) and wins on source order. The `:hover`
+ * selector is already (0,3,0) through its `:not(:disabled)` and is left alone.
+ *
+ * It matters more here than for a button. The arrow keys step over a disabled item, so an item
+ * that has lost its disabled styling is one the pointer can still see as ordinary while the
+ * keyboard refuses to reach it — the two input methods disagreeing about what exists.
+ */
 .gog-menu__item:hover:not(:disabled),
-.gog-menu__item:focus-visible {
+.gog-menu__item.gog-menu__item:focus-visible {
   background-color: var(--gog-menu-item-hover-bg);
   color: var(--gog-menu-item-hover-color);
 }
 
-.gog-menu__item:focus-visible {
+.gog-menu__item.gog-menu__item:focus-visible {
   outline: var(--gog-menu-focus-ring-width) solid var(--gog-menu-focus-ring);
   outline-offset: calc(var(--gog-menu-focus-ring-width) * -1);
 }
 
-.gog-menu__item:disabled {
+.gog-menu__item.gog-menu__item:disabled {
   color: var(--gog-menu-item-disabled-color);
   opacity: var(--gog-menu-item-disabled-opacity);
   cursor: not-allowed;

package/styles/ripple.css

@@ -0,0 +1,94 @@
+/*
+ * `[gogRipple]`'s classes, in a **global** stylesheet for the same reason as `gogBadge`'s and
+ * `.gog-btn`'s: the directive appends its nodes into a *consumer's* own element, which is light
+ * DOM belonging to that consumer's view, so a component-scoped stylesheet could never reach it.
+ *
+ * ── Why the layer exists at all ─────────────────────────────────────────────────
+ * The obvious ripple gives the host `overflow: hidden` and paints inside it. That breaks the
+ * first ordinary pairing anyone tries: `gogBadge` pins its badge with **negative** insets so it
+ * sits outside the host's box on purpose (see utilities.css), and a host that clips its overflow
+ * clips the badge too. So the host is never clipped — `.gog-ripple-layer` is, and it is the only
+ * thing that is.
+ *
+ * ── How the layer learns the host's corner radius ───────────────────────────────
+ * `border-radius` set to `inherit`. It is not an inherited property, but the explicit
+ * keyword takes the parent's computed value — so the layer matches whatever radius the host
+ * ended up with, per instance, per theme, with no token to declare and nothing for a host
+ * component to remember to set. The plan expected a token here; this is exact and free.
+ *
+ * ── Why the wash paints over the host's content ─────────────────────────────────
+ * The layer is a positioned child with no `z-index`, so it paints above the host's text. The
+ * alternative — `z-index: -1` inside an `isolation: isolate` host, which paints it between the
+ * background and the text — is prettier where it works, and silently invisible where it does
+ * not: on a wrapper host like `<gog-button gogRipple>` the inner `.gog-btn`'s own background
+ * would cover it, and "the ripple just does not appear" is a far worse failure than a low-alpha
+ * wash crossing a label. Material makes the same call, at a similar opacity.
+ */
+.gog-ripple-host {
+  /* The layer 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-ripple-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.gog-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--gog-ripple-color);
+  /* Both animations are `forwards`, so these are only the pre-first-frame values. */
+  opacity: 0;
+  transform: scale(0);
+}
+
+.gog-ripple--entering {
+  animation: gog-ripple-enter var(--gog-ripple-enter-duration) var(--gog-ripple-easing) forwards;
+}
+
+.gog-ripple--leaving {
+  animation: gog-ripple-exit var(--gog-ripple-exit-duration) var(--gog-ripple-easing) forwards;
+}
+
+@keyframes gog-ripple-enter {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: var(--gog-ripple-opacity);
+    transform: scale(1);
+  }
+}
+
+/* The scale is held at 1 through the fade — without it the node snaps back to the base rule's
+   `scale(0)` and the wave collapses inwards instead of dissolving. */
+@keyframes gog-ripple-exit {
+  from {
+    opacity: var(--gog-ripple-opacity);
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+/*
+ * Suppressed, not shortened. The directive already refuses to create a node when the preference
+ * is set, so this rule only covers a preference switched on while a ripple is mid-flight — and
+ * documents the intent in the one file a reader checks for it.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .gog-ripple-layer {
+    display: none;
+  }
+}

package/styles/surfaces.css

@@ -0,0 +1,151 @@
+/*
+ * The projected pieces of `gog-card` and `gog-panel`.
+ *
+ * Global for the same reason `gog-collapsible`'s trigger/content classes and `[gogButton]`'s
+ * `.gog-btn` are: every class below lands on an element the *consumer* wrote — their `<h3>`,
+ * their `<img>`, their `<a>` — which is light DOM belonging to the consumer's own view. A
+ * component's scoped stylesheet can never reach it, so these rules have to live here or the
+ * slots would come out unstyled with no way to fix them from inside the library.
+ *
+ * Everything each component paints on *itself* stays in its own `.scss`.
+ */
+
+/* ── gog-card ───────────────────────────────────────────────────────────────── */
+
+.gog-card__header {
+  margin: 0;
+  color: var(--gog-card-heading-color);
+  font-family: var(--gog-card-heading-font-family);
+  font-size: var(--gog-card-heading-font-size);
+  font-weight: var(--gog-card-heading-font-weight);
+  line-height: var(--gog-card-heading-line-height);
+}
+
+/*
+ * Media runs to the card's edges rather than sitting inside its padding — that is the whole
+ * difference between `gogCardMedia` and an `<img>` a consumer drops in the body, and it is why
+ * the negative margins repeat the card's own padding chain instead of a fixed number.
+ */
+.gog-card__media {
+  display: block;
+  inline-size: calc(
+    100% + 2 *
+      var(--gog-card-padding-x, var(--gog-card-size-padding-x, var(--gog-card-md-padding-x)))
+  );
+  margin-inline: calc(
+    -1 * var(--gog-card-padding-x, var(--gog-card-size-padding-x, var(--gog-card-md-padding-x)))
+  );
+  object-fit: cover;
+}
+
+/* Only a first child can round into the card's own top corners; anywhere else it is a band. */
+.gog-card__media:first-child {
+  margin-block-start: calc(
+    -1 * var(--gog-card-padding-y, var(--gog-card-size-padding-y, var(--gog-card-md-padding-y)))
+  );
+  border-start-end-radius: calc(var(--gog-card-radius) - var(--gog-card-border-width));
+  border-start-start-radius: calc(var(--gog-card-radius) - var(--gog-card-border-width));
+}
+
+.gog-card__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gog-card-footer-gap);
+  padding-block-start: var(--gog-card-footer-padding-top);
+  border-block-start: var(--gog-card-border-width) var(--gog-card-border-style)
+    var(--gog-card-footer-border-color);
+}
+
+/*
+ * `gogCardLink` — the whole card activates this one link.
+ *
+ * The link keeps every bit of its own behaviour (href, Enter, middle-click, "open in new tab");
+ * only its hit area grows, as a pseudo-element stretched over the card. The card is the
+ * containing block for it (`position: relative` on `gog-card`), so this element itself must NOT
+ * be positioned — that is also why the escape rule below excludes it.
+ */
+.gog-card__link {
+  /*
+   * The card is the affordance — its cursor, its hover elevation and its focus ring all say
+   * "this activates". A link rendered in the browser's blue-and-underlined inside that reads as
+   * a second, separate control sitting on the surface, which is exactly what it is not. One
+   * class of specificity, so a consumer who wants their own link colour simply writes it.
+   */
+  color: inherit;
+  text-decoration: none;
+}
+
+.gog-card__link::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+}
+
+/* The usual "this row is a link" hint, moved to the whole card since the whole card is one. */
+.gog-card--interactive:hover .gog-card__link {
+  text-decoration: underline;
+}
+
+.gog-card__link.gog-card__link:focus-visible {
+  outline: none;
+}
+
+/* The ring belongs around the card, because the card is what the link's hit area covers. */
+.gog-card__link.gog-card__link:focus-visible::after {
+  border-radius: var(--gog-card-radius);
+  outline: var(--gog-card-focus-ring-width) solid var(--gog-card-focus-ring);
+  outline-offset: var(--gog-card-focus-ring-offset);
+}
+
+/*
+ * Doubled class for one point of specificity over a consumer's plainest rule — see
+ * `scripts/check-state-specificity.mjs`. A disabled card whose link still swallowed clicks
+ * would be the same defect the disabled-button rules were hardened against.
+ */
+.gog-card--disabled.gog-card--disabled .gog-card__link,
+.gog-card--loading.gog-card--loading .gog-card__link {
+  pointer-events: none;
+}
+
+/*
+ * Anything *else* interactive inside an interactive card or a collapsible panel header sits
+ * above the stretched hit area, instead of being covered by it — a footer button in a clickable
+ * card is the common case, and having it silently activate the card's link instead would be the
+ * pattern's classic trap.
+ *
+ * The two elements that own a stretched hit area are excluded: positioning them would make each
+ * one its own containing block, and the pseudo-element would then cover the control instead of
+ * the surface — the exact thing it exists to spread across.
+ *
+ * Written entirely in `:where()` so it carries zero specificity: it is a default that must never
+ * win against a consumer positioning their own element.
+ */
+:where(.gog-card--interactive, .gog-panel__header)
+  :where(a, button, input, select, textarea, summary, [tabindex]):where(
+    :not(.gog-card__link, .gog-panel__toggle)
+  ) {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── gog-panel ──────────────────────────────────────────────────────────────── */
+
+.gog-panel__heading {
+  margin: 0;
+  color: var(--gog-panel-heading-color);
+  font-family: var(--gog-panel-heading-font-family);
+  font-size: var(--gog-panel-heading-font-size);
+  font-weight: var(--gog-panel-heading-font-weight);
+  line-height: var(--gog-panel-heading-line-height);
+}
+
+.gog-panel__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gog-panel-footer-gap);
+  padding-block-start: var(--gog-panel-footer-padding-top);
+  border-block-start: var(--gog-panel-border-width) var(--gog-panel-border-style)
+    var(--gog-panel-footer-border-color);
+}

package/styles/theme.css

@@ -621,6 +621,63 @@
   --gog-calendar-slg-font-size: var(--gog-text-lg);
   --gog-calendar-slg-day-size: 46px;
 
+  /* ── Card ──────────────────────────────────────────────────────────────────
+     `--gog-card-bg`, `--gog-card-border-color`, `--gog-card-shadow`, `--gog-card-padding-y`,
+     `--gog-card-padding-x` and `--gog-card-gap` are intentionally NOT declared — they are the
+     per-instance escape hatch the variant and size classes fall back through. */
+  --gog-card-font-family: var(--gog-font-body);
+  --gog-card-color: var(--gog-text-color);
+  --gog-card-radius: var(--gog-radius);
+  --gog-card-border-width: var(--gog-panel-border-width);
+  --gog-card-border-style: var(--gog-panel-border-style);
+  --gog-card-transition-duration: var(--gog-duration-base);
+
+  --gog-card-heading-color: var(--gog-text-color);
+  --gog-card-heading-font-family: var(--gog-font-heading);
+  --gog-card-heading-font-size: var(--gog-text-lg);
+  --gog-card-heading-font-weight: 600;
+  --gog-card-heading-line-height: 1.3;
+
+  --gog-card-outlined-bg: var(--gog-surface-color);
+  --gog-card-outlined-border-color: var(--gog-border-color);
+  --gog-card-outlined-shadow: none;
+  --gog-card-elevated-bg: var(--gog-surface-color);
+  --gog-card-elevated-border-color: transparent;
+  /* The shared surface shadow, so a card sits at the same elevation as a dialog or a
+     dropdown panel instead of inventing a second house style for "raised". */
+  --gog-card-elevated-shadow: var(--gog-panel-shadow);
+  --gog-card-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
+  --gog-card-filled-border-color: transparent;
+  --gog-card-filled-shadow: none;
+
+  /* Hover and focus only ever show on a card that holds a `gogCardLink`. */
+  --gog-card-hover-border-color: color-mix(in srgb, var(--gog-accent-color) 45%, transparent);
+  --gog-card-hover-shadow: var(--gog-panel-shadow);
+  --gog-card-focus-ring: var(--gog-accent-color);
+  --gog-card-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-card-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-card-disabled-opacity: var(--gog-disabled-opacity);
+
+  --gog-card-footer-border-color: var(--gog-border-color);
+  --gog-card-footer-gap: var(--gog-space-sm);
+  --gog-card-footer-padding-top: var(--gog-space-sm);
+
+  --gog-card-xsm-padding-y: 8px;
+  --gog-card-xsm-padding-x: 10px;
+  --gog-card-xsm-gap: 6px;
+  --gog-card-sm-padding-y: 12px;
+  --gog-card-sm-padding-x: 14px;
+  --gog-card-sm-gap: var(--gog-space-sm);
+  --gog-card-md-padding-y: var(--gog-space-md);
+  --gog-card-md-padding-x: 20px;
+  --gog-card-md-gap: 12px;
+  --gog-card-lg-padding-y: 20px;
+  --gog-card-lg-padding-x: var(--gog-space-lg);
+  --gog-card-lg-gap: 14px;
+  --gog-card-slg-padding-y: 28px;
+  --gog-card-slg-padding-x: 32px;
+  --gog-card-slg-gap: var(--gog-space-md);
+
   /* ── Checkbox ──────────────────────────────────────────────────────────────
      Box/label/icon size and padding come from the `--gog-control-checkbox-*` scale;
      checkbox.component.ts maps the `size` input onto the host. */
@@ -1229,6 +1286,67 @@
   --gog-paginator-page-size-min-width: 5rem;
   --gog-paginator-ellipsis-min-width: 32px;
 
+  /* ── Panel ─────────────────────────────────────────────────────────────────
+     The `gog-panel` component, which shares its prefix with the foundation surface tier
+     above (`--gog-panel-radius`, `--gog-panel-shadow`, `--gog-panel-border-width`,
+     `--gog-panel-border-style`) deliberately: a panel is the surface those describe, and a
+     theme that sets a house radius for raised surfaces should get it here too.
+
+     `--gog-panel-bg`, `--gog-panel-border-color`, `--gog-panel-padding-y`,
+     `--gog-panel-padding-x` and `--gog-panel-gap` are intentionally NOT declared — the
+     per-instance escape hatch. There is no `--gog-panel-*-shadow` twin of that hatch for the
+     elevated variant: it reads `--gog-panel-shadow` from a declaration the component makes on
+     its own host, so setting that token on one panel already changes only that panel. */
+  --gog-panel-font-family: var(--gog-font-body);
+  --gog-panel-color: var(--gog-text-color);
+  --gog-panel-transition-duration: var(--gog-duration-base);
+
+  --gog-panel-heading-color: var(--gog-text-color);
+  --gog-panel-heading-font-family: var(--gog-font-heading);
+  --gog-panel-heading-font-size: var(--gog-text-xl);
+  --gog-panel-heading-font-weight: 600;
+  --gog-panel-heading-line-height: 1.25;
+
+  --gog-panel-outlined-bg: var(--gog-surface-color);
+  --gog-panel-outlined-border-color: var(--gog-border-color);
+  --gog-panel-outlined-shadow: none;
+  --gog-panel-elevated-bg: var(--gog-surface-color);
+  --gog-panel-elevated-border-color: transparent;
+  --gog-panel-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
+  --gog-panel-filled-border-color: transparent;
+  --gog-panel-filled-shadow: none;
+
+  --gog-panel-header-gap: var(--gog-space-sm);
+  --gog-panel-toggle-size: 2rem;
+  --gog-panel-toggle-radius: var(--gog-radius);
+  --gog-panel-toggle-color: var(--gog-muted-text-color);
+  --gog-panel-toggle-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
+  --gog-panel-chevron-size: 1rem;
+  --gog-panel-focus-ring: var(--gog-accent-color);
+  --gog-panel-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-panel-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-panel-disabled-opacity: var(--gog-disabled-opacity);
+
+  --gog-panel-footer-border-color: var(--gog-border-color);
+  --gog-panel-footer-gap: var(--gog-space-sm);
+  --gog-panel-footer-padding-top: var(--gog-space-sm);
+
+  --gog-panel-xsm-padding-y: 10px;
+  --gog-panel-xsm-padding-x: 12px;
+  --gog-panel-xsm-gap: var(--gog-space-sm);
+  --gog-panel-sm-padding-y: 14px;
+  --gog-panel-sm-padding-x: var(--gog-space-md);
+  --gog-panel-sm-gap: 10px;
+  --gog-panel-md-padding-y: 18px;
+  --gog-panel-md-padding-x: 20px;
+  --gog-panel-md-gap: 12px;
+  --gog-panel-lg-padding-y: var(--gog-space-lg);
+  --gog-panel-lg-padding-x: 28px;
+  --gog-panel-lg-gap: var(--gog-space-md);
+  --gog-panel-slg-padding-y: 32px;
+  --gog-panel-slg-padding-x: 36px;
+  --gog-panel-slg-gap: 20px;
+
   /* ── Progressbar ──────────────────────────────────────────────────────────── */
   --gog-progressbar-track-base-bg: color-mix(
     in srgb,
@@ -1273,6 +1391,20 @@
   --gog-progressbar-info-bg: var(--gog-info-color);
   --gog-progressbar-info-buffer-bg: color-mix(in srgb, var(--gog-info-color) 35%, transparent);
 
+  /* ── Ripple (the `gogRipple` directive; its classes live in ripple.css) ────
+     `currentColor` rather than a fixed colour on purpose: the wash then reads as the host's
+     own foreground, so one value works on a filled button and on a ghost one without a
+     per-variant tier. The property is inherited, so `--gog-ripple-color` set anywhere above
+     the host reaches it — which is the per-instance override, no undeclared tier needed. */
+  --gog-ripple-color: currentColor;
+  --gog-ripple-opacity: 0.16;
+  /* Longer than any other motion in the library, deliberately: a ripple held to the house 0.2s
+     is over before the eye has followed it across the surface. Still expressed in the
+     foundation scale, so setting the durations to 0s still flattens it theme-wide. */
+  --gog-ripple-enter-duration: calc(var(--gog-duration-slow) * 2);
+  --gog-ripple-exit-duration: var(--gog-duration-slow);
+  --gog-ripple-easing: var(--gog-easing);
+
   /* ── Scroll ────────────────────────────────────────────────────────────────── */
   --gog-scroll-track-bg: transparent;
   --gog-scroll-track-radius: var(--gog-radius);

package/styles/utilities.css

@@ -19,6 +19,31 @@
   --gog-direction-sign: 1;
 }
 
+/*
+ * Every element the library renders sizes itself border-box, so the package does not depend on
+ * the consumer having a `* { box-sizing: border-box }` reset.
+ *
+ * It used to. `.gog-input__field` is `width: 100%` plus horizontal padding plus a border, so
+ * under the CSS default of `content-box` it overflowed its own container by exactly that much —
+ * measured 20px at `xsm` rising to 48px at `slg`. It stayed invisible for the life of the
+ * package because both apps that render it (`ui-showcase`, and `gleks-ui-lab` since later) carry
+ * a global reset of their own, so the library was only ever *looked at* under border-box.
+ *
+ * Matched on the class prefix rather than by listing elements, because the set that needs it is
+ * exactly "things the library painted" — including the ones that live on a consumer's own
+ * element (`.gog-btn`, `.gog-menu__item`, `.gog-collapsible__trigger`) and would be missed by a
+ * `gog-*` tag list. A consumer's own elements are untouched.
+ *
+ * Specificity is a single class, deliberately: this is a default the library needs, not a
+ * decision it should win. `:where()` would drop it to zero and lose to the UA's own
+ * `content-box`… which is not a thing, but it would also lose to a consumer's `*` reset setting
+ * `content-box` back, and matching that intent is right.
+ */
+[class^='gog-'],
+[class*=' gog-'] {
+  box-sizing: border-box;
+}
+
 [dir='rtl'] {
   --gog-inline-start-side: right;
   --gog-inline-end-side: left;
@@ -171,7 +196,18 @@
   cursor: pointer;
 }
 
-.gog-collapsible__trigger[aria-disabled='true'] {
+/*
+ * Scoped through the host on purpose, for one point of specificity the plain
+ * `.gog-collapsible__trigger[aria-disabled='true']` (0,2,0) does not have.
+ *
+ * The trigger is the *consumer's* element, and Angular's emulated encapsulation stamps
+ * `[_ngcontent-…]` onto every rule in a component stylesheet — so an ordinary
+ * `.my-trigger { cursor: pointer }` in the consumer's own component is also (0,2,0) and wins on
+ * source order, since this file loads before their app's styles. Measured: a disabled trigger
+ * reading `cursor: pointer` while this rule's `opacity` applied, in the showcase's own demo.
+ * A disabled state the consumer has to know to opt out of is not a disabled state.
+ */
+gog-collapsible .gog-collapsible__trigger[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: var(--gog-collapsible-disabled-opacity);
 }