@guildofgleks/ui 21.9.1 → 21.11.0

package/package.json

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

package/styles/button.css

@@ -15,7 +15,40 @@
  * Nothing in this file is a literal: every colour, font, metric and duration resolves
  * to a theme token, so a theme can restyle the button without touching this stylesheet.
  */
+/*
+ * WCAG 2.5.8 asks 24x24 CSS px of *target*. A transparent `::before` centred on the button carries
+ * the size when the button itself is short, so the pointer area is 24px while every painted edge
+ * stays where it was. `min-*-size` rather than a fixed one, so it is inert whenever the button is
+ * already big enough.
+ *
+ * **An `xsm` button at its own padding does not need this**, and believing it did is what put this
+ * rule on `.gog-btn--xsm` first: 4 + 12 + 4 is 20, but the button draws a 2px border on each side
+ * and `box-sizing` is `border-box`, so Chrome measures 24. The token arithmetic that said 20 was
+ * not wrong, it was incomplete.
+ *
+ * What the rule is actually for is a button whose padding has been overridden.
+ * `.gog-toast__close` and `.gog-toast__action` set `--gog-button-padding` directly and land at
+ * 20px at *any* size class, and a consumer can do the same to any button in the library. So it
+ * keys off being a button, not off carrying one particular size class.
+ *
+ * Not `padding`, not `min-height` on the button itself: both would move the paint.
+ */
+.gog-btn::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  translate: -50% -50%;
+  min-inline-size: 24px;
+  min-block-size: 24px;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 .gog-btn {
+  /* Anchors the hit area above. */
+  position: relative;
+
   /* Scopes the spinner rendered inside a loading button to the variant's spinner colour. */
   --gog-spinner-color: var(
     --gog-button-spinner-color,
@@ -133,9 +166,23 @@
  * This matches `[gogButton]` on a consumer's own element too, which is the whole reason it keys
  * off the attribute rather than an input — the directive styles markup you own, so you write
  * `aria-pressed` there yourself and get the look for free.
+ *
+ * **A disabled toggle keeps the ring** (21.10.0). It carried `:not(:disabled)` until then, copied
+ * from the pointer states above where the guard is correct — but "on, and you cannot change it
+ * right now" is a real state, and `disabled` on a real `<button>` does not remove `aria-pressed`,
+ * so dropping the look left the button announcing itself as on and looking exactly like an off
+ * one: the failure this rule was written to prevent, in the one case nobody looks at.
+ * `gog-chip` had it right from the start (`:host(.gog-chip--selected)`, no disabled guard) and
+ * the two had drifted apart. The `--gog-button-disabled-opacity` on the rule below dims the ring
+ * along with everything else, which is the correct amount of "unavailable".
+ *
+ * The doubled class is what the removed `:not(:disabled)` was silently paying for: both are
+ * (0,3,0), and this rule has to stay level with `:hover:not(:disabled)` to win the tie by source
+ * order. It buys the same protection `:focus-visible` and `:disabled` have from a consumer's
+ * single-class rule, which is right for a state and wrong for a look — see the comment on those.
  */
-.gog-btn[aria-pressed='true']:not(:disabled),
-.gog-btn[aria-pressed='mixed']:not(:disabled) {
+.gog-btn.gog-btn[aria-pressed='true'],
+.gog-btn.gog-btn[aria-pressed='mixed'] {
   box-shadow: var(
     --gog-button-toggled-shadow,
     var(--gog-button-variant-toggled-shadow, var(--gog-button-primary-toggled-shadow))

package/styles/presets/slate.css

@@ -1,86 +1,92 @@
-/*
- * `slate` — an alternative preset, and a worked example of the whole theming contract.
- *
- * Import it after `index.css`, then put the attribute on the root — or on any subtree:
- *
- *   @import '@guildofgleks/ui/styles/index.css';
- *   @import '@guildofgleks/ui/styles/presets/slate.css';
- *
- *   <html data-theme="slate">
- *
- * Note what this file does *not* contain: no component tokens, no `--gog-button-*`, no
- * `--gog-table-*`. It declares the palette and a handful of foundation tokens, and nothing
- * else. Every component token in `theme.css`'s derived layer is re-declared on `[data-theme]`,
- * so it re-resolves against whichever palette and character are in scope — which is exactly why
- * a theme this short can restyle the entire library. If you find yourself listing component
- * tokens in a theme, something in the derived layer is missing instead.
- *
- * Until 21.7.0 this file was the palette-only worked example, and the README pointed at it to
- * make that argument. The argument is still true and the README still makes it — but it did not
- * need a whole preset held back to prove it, and holding one back meant shipping a theme that
- * was a recoloured default. `slate` is now the *soft modern* entry in the catalogue: generous
- * rounding, thin borders, a little more air than the house default.
- *
- * Both selectors are listed for the same reason `theme.css` lists both: `:root[data-theme]`
- * themes the page, the bare `[data-theme]` themes any subtree, so several themes can render
- * side by side.
- */
-
-:root[data-theme='slate'],
-[data-theme='slate'] {
-  color-scheme: light;
-
-  /* Character layer — soft modern. Generous rounding against `ledger`'s zero and the editor
-     presets' 4px, hairline borders, sentence case, and a density slightly above the house
-     default: this is the roomy end of the catalogue, and the contrast with `ledger` at 0.9 is
-     the point of having both. */
-  --gog-radius: 12px;
-  --gog-density: 1.05;
-  --gog-control-border-width: 1px;
-  --gog-text-transform: none;
-  --gog-letter-spacing: normal;
-
-  /* Surfaces — cool neutrals rather than the house obsidian */
-  --gog-background-color: #f4f6f8;
-  --gog-surface-color: #ffffff;
-  --gog-hover-color: #e8edf2;
-  --gog-border-color: #cbd5e1;
-
-  /* Type */
-  --gog-text-color: #1e293b;
-  --gog-accent-text-color: #ffffff;
-  /* #64748b missed AA by 0.11 against the page ground; deepened one step. */
-  --gog-muted-text-color: #5c6b80;
-
-  /* Brand — indigo instead of gold, to make the swap unmistakable */
-  --gog-primary-color: #1e293b;
-  --gog-accent-color: #4f46e5;
-  /* Hover fill: white on #6366f1 was 4.47:1, short of AA by 0.03. */
-  --gog-accent-bright: #5b5ee8;
-  --gog-accent-dim: #4338ca;
-  --gog-accent-pale: #e0e7ff;
-  --gog-secondary-color: #0ea5e9;
-
-  /* Semantics */
-  /* Was #059669 — Tailwind emerald-600. A status fill carries a white label, and this read
-     3.77:1 under it; Slate's own ink is no better at 3.88:1, so there was no label to pick and
-     the hue moved. One step down the same ramp to emerald-700: 5.48:1 under white, 5.06:1 as
-     text on the page. The three statuses here all moved one step for the same reason.
-     Found 2026-09-04. */
-  --gog-success-color: #047857;
-  /* Was #dc2626 — Tailwind red-600. `--gog-danger-color` is what every `--gog-<block>-error-color`
-     resolves to, so this is the colour a validation message is printed in, and as *text* it
-     needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
-     Now 4.61:1 on the page and 5.00:1 on a card. Found 2026-09-03 by `check:app-contrast`
-     reading ui-showcase, which is how a palette pair nobody had listed became visible;
-     `check:contrast` gained the pair in the same change. */
-  --gog-danger-color: #d82525;
-  /* Was #d97706 — Tailwind amber-600, 3.19:1 under a white label. Amber-700: 5.02:1. */
-  --gog-warning-color: #b45309;
-  /* Was #0284c7 — Tailwind sky-600, 4.10:1 under a white label. Sky-700: 5.93:1. */
-  --gog-info-color: #0369a1;
-
-  /* The two palette-shaped tokens that are not plain colours. */
-  --gog-panel-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--gog-border-color);
-  --gog-spinner-overlay-bg: rgba(244, 246, 248, 0.85);
-}
+/*
+ * `slate` — an alternative preset, and a worked example of the whole theming contract.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/slate.css';
+ *
+ *   <html data-theme="slate">
+ *
+ * Note what this file does *not* contain: no component tokens, no `--gog-button-*`, no
+ * `--gog-table-*`. It declares the palette and a handful of foundation tokens, and nothing
+ * else. Every component token in `theme.css`'s derived layer is re-declared on `[data-theme]`,
+ * so it re-resolves against whichever palette and character are in scope — which is exactly why
+ * a theme this short can restyle the entire library. If you find yourself listing component
+ * tokens in a theme, something in the derived layer is missing instead.
+ *
+ * Until 21.7.0 this file was the palette-only worked example, and the README pointed at it to
+ * make that argument. The argument is still true and the README still makes it — but it did not
+ * need a whole preset held back to prove it, and holding one back meant shipping a theme that
+ * was a recoloured default. `slate` is now the *soft modern* entry in the catalogue: generous
+ * rounding, thin borders, a little more air than the house default.
+ *
+ * Both selectors are listed for the same reason `theme.css` lists both: `:root[data-theme]`
+ * themes the page, the bare `[data-theme]` themes any subtree, so several themes can render
+ * side by side.
+ */
+
+:root[data-theme='slate'],
+[data-theme='slate'] {
+  color-scheme: light;
+
+  /* Character layer — soft modern. Generous rounding against `ledger`'s zero and the editor
+     presets' 4px, hairline borders, sentence case, and a density slightly above the house
+     default: this is the roomy end of the catalogue, and the contrast with `ledger` at 0.9 is
+     the point of having both. */
+  --gog-radius: 12px;
+  --gog-density: 1.05;
+  --gog-control-border-width: 1px;
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+
+  /* Surfaces — cool neutrals rather than the house obsidian */
+  --gog-background-color: #f4f6f8;
+  --gog-surface-color: #ffffff;
+  --gog-hover-color: #e8edf2;
+  --gog-border-color: #cbd5e1;
+
+  /* Type */
+  --gog-text-color: #1e293b;
+  --gog-accent-text-color: #ffffff;
+  /* #64748b missed AA by 0.11 against the page ground; deepened one step. */
+  --gog-muted-text-color: #5c6b80;
+
+  /* Brand — indigo instead of gold, to make the swap unmistakable */
+  --gog-primary-color: #1e293b;
+  --gog-accent-color: #4f46e5;
+  /* Hover fill: white on #6366f1 was 4.47:1, short of AA by 0.03. */
+  --gog-accent-bright: #5b5ee8;
+  --gog-accent-dim: #4338ca;
+  --gog-accent-pale: #e0e7ff;
+  /* Was #0ea5e9 — Tailwind sky-500, and the only palette value in any shipped theme that the
+     variant sweep caught when `check:contrast` learned to resolve variant classes (2026-09-05).
+     The secondary button fills with this and labels it `--gog-accent-text-color`, white here:
+     2.77:1. sky-600 does not rescue it either (4.10:1), so two steps down the same ramp to
+     sky-700, which reads 5.93:1 — the same move, and the same reason, as the three status
+     colours below. */
+  --gog-secondary-color: #0369a1;
+
+  /* Semantics */
+  /* Was #059669 — Tailwind emerald-600. A status fill carries a white label, and this read
+     3.77:1 under it; Slate's own ink is no better at 3.88:1, so there was no label to pick and
+     the hue moved. One step down the same ramp to emerald-700: 5.48:1 under white, 5.06:1 as
+     text on the page. The three statuses here all moved one step for the same reason.
+     Found 2026-09-04. */
+  --gog-success-color: #047857;
+  /* Was #dc2626 — Tailwind red-600. `--gog-danger-color` is what every `--gog-<block>-error-color`
+     resolves to, so this is the colour a validation message is printed in, and as *text* it
+     needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
+     Now 4.61:1 on the page and 5.00:1 on a card. Found 2026-09-03 by `check:app-contrast`
+     reading ui-showcase, which is how a palette pair nobody had listed became visible;
+     `check:contrast` gained the pair in the same change. */
+  --gog-danger-color: #d82525;
+  /* Was #d97706 — Tailwind amber-600, 3.19:1 under a white label. Amber-700: 5.02:1. */
+  --gog-warning-color: #b45309;
+  /* Was #0284c7 — Tailwind sky-600, 4.10:1 under a white label. Sky-700: 5.93:1. */
+  --gog-info-color: #0369a1;
+
+  /* The two palette-shaped tokens that are not plain colours. */
+  --gog-panel-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--gog-border-color);
+  --gog-spinner-overlay-bg: rgba(244, 246, 248, 0.85);
+}