@guildofgleks/ui 21.3.2 → 21.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/AGENTS.md +212 -10
  2. package/README.md +102 -271
  3. package/TOKENS.md +2 -2
  4. package/fesm2022/guildofgleks-ui.mjs +641 -64
  5. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  6. package/package.json +11 -1
  7. package/src/styles/button.css +193 -0
  8. package/src/styles/index.css +2 -0
  9. package/src/styles/theme.css +6 -0
  10. package/styles/button.css +193 -0
  11. package/styles/index.css +2 -0
  12. package/styles/theme.css +6 -0
  13. package/types/guildofgleks-ui.d.ts +394 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guildofgleks/ui",
3
- "version": "21.3.2",
3
+ "version": "21.4.1",
4
4
  "engines": {
5
5
  "node": ">=20.19.0"
6
6
  },
@@ -16,7 +16,17 @@
16
16
  "standalone",
17
17
  "accessible"
18
18
  ],
19
+ "homepage": "https://ui.guildofgleks.com/",
19
20
  "license": "Apache-2.0",
21
+ "author": "Roman Malitskyi",
22
+ "repository": {
23
+ "type": "git",
24
+ "url": "git+https://github.com/GuildOfGleks/gleks_web_ui.git",
25
+ "directory": "projects/gleks/ui"
26
+ },
27
+ "bugs": {
28
+ "url": "https://github.com/GuildOfGleks/gleks_web_ui/issues"
29
+ },
20
30
  "peerDependencies": {
21
31
  "@angular/common": "^21.2.0",
22
32
  "@angular/core": "^21.2.0",
package/src/styles/button.css ADDED
@@ -0,0 +1,193 @@
1
+ /*
2
+ * The button's visual block, in a **global** stylesheet rather than the component's own.
3
+ *
4
+ * `gog-button` is not the only thing that renders it: `[gogButton]` applies these same classes to
5
+ * a consumer's own `<a>` or `<button>`, and Angular's emulated encapsulation would never let a
6
+ * component stylesheet reach an element declared in someone else's template. The same reason
7
+ * `gogBadge` and `gog-collapsible` keep their CSS here.
8
+ *
9
+ * Token layering (see theme.css):
10
+ * --gog-btn-<prop> per-instance override. Never declared here or in the
11
+ * theme, so it always wins when a consumer sets it.
12
+ * --gog-btn-variant-<prop> internal, set by the variant classes below.
13
+ * --gog-btn-size-<prop> internal, set by the size classes below.
14
+ * --gog-btn-<variant>-<prop> the actual values, all in theme.css.
15
+ * Nothing in this file is a literal: every colour, font, metric and duration resolves
16
+ * to a theme token, so a theme can restyle the button without touching this stylesheet.
17
+ */
18
+ .gog-btn {
19
+ /* Scopes the spinner rendered inside a loading button to the variant's spinner colour. */
20
+ --gog-spinner-color: var(
21
+ --gog-btn-spinner-color,
22
+ var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color))
23
+ );
24
+
25
+ gap: var(--gog-btn-gap);
26
+ border: var(--gog-btn-border-width) var(--gog-btn-border-style)
27
+ var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));
28
+ border-radius: var(--gog-btn-radius);
29
+ padding: var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));
30
+ font-family: var(--gog-btn-font-family);
31
+ font-weight: var(--gog-btn-font-weight);
32
+ font-size: var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));
33
+ letter-spacing: var(--gog-btn-letter-spacing);
34
+ text-transform: var(--gog-btn-text-transform);
35
+ line-height: var(--gog-btn-line-height);
36
+ background-color: var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));
37
+ color: var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));
38
+ box-shadow: var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));
39
+ cursor: pointer;
40
+ /* An `<a>` carries the UA underline; a `<button>` never did, which is why the component never
41
+ needed this. Reset here so `[gogButton]` on a link is visually identical to the component. */
42
+ text-decoration: none;
43
+ transition:
44
+ background-color var(--gog-btn-transition-duration) var(--gog-easing),
45
+ box-shadow var(--gog-btn-transition-duration) var(--gog-easing),
46
+ color var(--gog-btn-transition-duration) var(--gog-easing);
47
+ }
48
+
49
+ .gog-btn:focus-visible {
50
+ outline: var(--gog-btn-focus-ring-width) solid
51
+ var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));
52
+ outline-offset: var(--gog-btn-focus-ring-offset);
53
+ }
54
+
55
+ .gog-btn:hover:not(:disabled) {
56
+ background-color: var(
57
+ --gog-btn-hover-bg,
58
+ var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg))
59
+ );
60
+ color: var(
61
+ --gog-btn-hover-color,
62
+ var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color))
63
+ );
64
+ box-shadow: var(
65
+ --gog-btn-hover-shadow,
66
+ var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow))
67
+ );
68
+ }
69
+
70
+ .gog-btn:active:not(:disabled) {
71
+ transform: scale(var(--gog-btn-active-scale));
72
+ }
73
+
74
+ @media (prefers-reduced-motion: reduce) {
75
+ .gog-btn {
76
+ transition: none;
77
+ }
78
+
79
+ .gog-btn:active:not(:disabled) {
80
+ transform: none;
81
+ }
82
+ }
83
+
84
+ .gog-btn:disabled {
85
+ opacity: var(--gog-btn-disabled-opacity);
86
+ cursor: not-allowed;
87
+ }
88
+
89
+ /* === Variants === */
90
+
91
+ /* primary: solid gold */
92
+ .gog-btn--primary {
93
+ --gog-btn-variant-bg: var(--gog-btn-primary-bg);
94
+ --gog-btn-variant-color: var(--gog-btn-primary-color);
95
+ --gog-btn-variant-border: var(--gog-btn-primary-border);
96
+ --gog-btn-variant-shadow: var(--gog-btn-primary-shadow);
97
+ --gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);
98
+ --gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);
99
+ --gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);
100
+ --gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color);
101
+ }
102
+
103
+ .gog-btn--secondary {
104
+ --gog-btn-variant-bg: var(--gog-btn-secondary-bg);
105
+ --gog-btn-variant-color: var(--gog-btn-secondary-color);
106
+ --gog-btn-variant-border: var(--gog-btn-secondary-border);
107
+ --gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);
108
+ --gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);
109
+ --gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);
110
+ --gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);
111
+ --gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color);
112
+ }
113
+
114
+ /* outline: transparent with golden border */
115
+ .gog-btn--outline {
116
+ --gog-btn-variant-bg: var(--gog-btn-outline-bg);
117
+ --gog-btn-variant-color: var(--gog-btn-outline-color);
118
+ --gog-btn-variant-border: var(--gog-btn-outline-border);
119
+ --gog-btn-variant-shadow: var(--gog-btn-outline-shadow);
120
+ --gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);
121
+ --gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);
122
+ --gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);
123
+ --gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color);
124
+ }
125
+
126
+ /* ghost: no border, subtle hover */
127
+ .gog-btn--ghost {
128
+ --gog-btn-variant-bg: var(--gog-btn-ghost-bg);
129
+ --gog-btn-variant-color: var(--gog-btn-ghost-color);
130
+ --gog-btn-variant-border: var(--gog-btn-ghost-border);
131
+ --gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);
132
+ --gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);
133
+ --gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);
134
+ --gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);
135
+ --gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color);
136
+ }
137
+
138
+ /* === Sizes === */
139
+ .gog-btn--xsm {
140
+ --gog-btn-size-padding: var(--gog-btn-xsm-padding);
141
+ --gog-btn-size-font-size: var(--gog-btn-xsm-font-size);
142
+ }
143
+
144
+ .gog-btn--sm {
145
+ --gog-btn-size-padding: var(--gog-btn-sm-padding);
146
+ --gog-btn-size-font-size: var(--gog-btn-sm-font-size);
147
+ }
148
+
149
+ .gog-btn--md {
150
+ --gog-btn-size-padding: var(--gog-btn-md-padding);
151
+ --gog-btn-size-font-size: var(--gog-btn-md-font-size);
152
+ }
153
+
154
+ .gog-btn--lg {
155
+ --gog-btn-size-padding: var(--gog-btn-lg-padding);
156
+ --gog-btn-size-font-size: var(--gog-btn-lg-font-size);
157
+ }
158
+
159
+ .gog-btn--slg {
160
+ --gog-btn-size-padding: var(--gog-btn-slg-padding);
161
+ --gog-btn-size-font-size: var(--gog-btn-slg-font-size);
162
+ }
163
+
164
+ .gog-btn--loading {
165
+ position: relative;
166
+ pointer-events: none;
167
+ /* Loading buttons stay natively focusable (aria-disabled + aria-busy instead of
168
+ `disabled`) so keyboard users don't lose focus mid-action. `:disabled` styling
169
+ below therefore no longer covers this state, so the dim is applied explicitly. */
170
+ opacity: var(--gog-btn-loading-opacity);
171
+ }
172
+
173
+ .gog-btn__content--hidden {
174
+ visibility: hidden;
175
+ }
176
+
177
+ /* absolute center so the spinner is always in the middle of the button */
178
+ .gog-btn__spinner {
179
+ position: absolute;
180
+ top: 50%;
181
+ left: 50%;
182
+ transform: translate(-50%, -50%);
183
+ max-width: var(--gog-btn-spinner-max-size);
184
+ max-height: var(--gog-btn-spinner-max-size);
185
+ }
186
+
187
+ /*
188
+ * `gog-button` gets its full width through `:host`, having a wrapper element to work with.
189
+ * `[gogButton]` has none — the element *is* the button — so it needs a class of its own.
190
+ */
191
+ .gog-btn--full-width {
192
+ width: 100%;
193
+ }
package/src/styles/index.css CHANGED
@@ -15,3 +15,5 @@
15
15
  @import './theme.css';
16
16
  @import './typography.css';
17
17
  @import './utilities.css';
18
+ /* Global because `[gogButton]` styles a consumer's own element — see the file's own header. */
19
+ @import './button.css';
package/src/styles/theme.css CHANGED
@@ -1144,6 +1144,8 @@
1144
1144
  --gog-paginator-ellipsis-color: var(--gog-muted-text-color);
1145
1145
  --gog-paginator-ellipsis-font-size: var(--gog-text-sm);
1146
1146
  --gog-paginator-ellipsis-font-family: var(--gog-font-body);
1147
+ /* Enough for a three-digit page size plus the chevron, so the row doesn't shift on change. */
1148
+ --gog-paginator-page-size-min-width: 5rem;
1147
1149
  --gog-paginator-ellipsis-min-width: 32px;
1148
1150
 
1149
1151
  /* ── Progressbar ──────────────────────────────────────────────────────────── */
@@ -1417,11 +1419,15 @@
1417
1419
  --gog-table-border-width: 2px;
1418
1420
  --gog-table-border-style: solid;
1419
1421
  --gog-table-row-border-width: 1px;
1422
+ /* The selection column is sized to its checkbox and never grows with content. */
1423
+ --gog-table-select-col-width: 44px;
1420
1424
  --gog-table-surface: var(--gog-surface-color);
1421
1425
  --gog-table-text-color: var(--gog-text-color);
1422
1426
  --gog-table-accent-color: var(--gog-accent-color);
1423
1427
  --gog-table-accent-bright: var(--gog-accent-bright);
1424
1428
  --gog-table-hover-bg: var(--gog-accent-pale);
1429
+ /* Selected rows keep this tint through hover, so hovering one never reads as clearing it. */
1430
+ --gog-table-selected-bg: var(--gog-accent-pale);
1425
1431
  --gog-table-muted-color: var(--gog-muted-text-color);
1426
1432
  --gog-table-focus-ring: var(--gog-accent-color);
1427
1433
  --gog-table-focus-ring-width: var(--gog-focus-ring-width);
package/styles/button.css ADDED
@@ -0,0 +1,193 @@
1
+ /*
2
+ * The button's visual block, in a **global** stylesheet rather than the component's own.
3
+ *
4
+ * `gog-button` is not the only thing that renders it: `[gogButton]` applies these same classes to
5
+ * a consumer's own `<a>` or `<button>`, and Angular's emulated encapsulation would never let a
6
+ * component stylesheet reach an element declared in someone else's template. The same reason
7
+ * `gogBadge` and `gog-collapsible` keep their CSS here.
8
+ *
9
+ * Token layering (see theme.css):
10
+ * --gog-btn-<prop> per-instance override. Never declared here or in the
11
+ * theme, so it always wins when a consumer sets it.
12
+ * --gog-btn-variant-<prop> internal, set by the variant classes below.
13
+ * --gog-btn-size-<prop> internal, set by the size classes below.
14
+ * --gog-btn-<variant>-<prop> the actual values, all in theme.css.
15
+ * Nothing in this file is a literal: every colour, font, metric and duration resolves
16
+ * to a theme token, so a theme can restyle the button without touching this stylesheet.
17
+ */
18
+ .gog-btn {
19
+ /* Scopes the spinner rendered inside a loading button to the variant's spinner colour. */
20
+ --gog-spinner-color: var(
21
+ --gog-btn-spinner-color,
22
+ var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color))
23
+ );
24
+
25
+ gap: var(--gog-btn-gap);
26
+ border: var(--gog-btn-border-width) var(--gog-btn-border-style)
27
+ var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));
28
+ border-radius: var(--gog-btn-radius);
29
+ padding: var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));
30
+ font-family: var(--gog-btn-font-family);
31
+ font-weight: var(--gog-btn-font-weight);
32
+ font-size: var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));
33
+ letter-spacing: var(--gog-btn-letter-spacing);
34
+ text-transform: var(--gog-btn-text-transform);
35
+ line-height: var(--gog-btn-line-height);
36
+ background-color: var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));
37
+ color: var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));
38
+ box-shadow: var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));
39
+ cursor: pointer;
40
+ /* An `<a>` carries the UA underline; a `<button>` never did, which is why the component never
41
+ needed this. Reset here so `[gogButton]` on a link is visually identical to the component. */
42
+ text-decoration: none;
43
+ transition:
44
+ background-color var(--gog-btn-transition-duration) var(--gog-easing),
45
+ box-shadow var(--gog-btn-transition-duration) var(--gog-easing),
46
+ color var(--gog-btn-transition-duration) var(--gog-easing);
47
+ }
48
+
49
+ .gog-btn:focus-visible {
50
+ outline: var(--gog-btn-focus-ring-width) solid
51
+ var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));
52
+ outline-offset: var(--gog-btn-focus-ring-offset);
53
+ }
54
+
55
+ .gog-btn:hover:not(:disabled) {
56
+ background-color: var(
57
+ --gog-btn-hover-bg,
58
+ var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg))
59
+ );
60
+ color: var(
61
+ --gog-btn-hover-color,
62
+ var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color))
63
+ );
64
+ box-shadow: var(
65
+ --gog-btn-hover-shadow,
66
+ var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow))
67
+ );
68
+ }
69
+
70
+ .gog-btn:active:not(:disabled) {
71
+ transform: scale(var(--gog-btn-active-scale));
72
+ }
73
+
74
+ @media (prefers-reduced-motion: reduce) {
75
+ .gog-btn {
76
+ transition: none;
77
+ }
78
+
79
+ .gog-btn:active:not(:disabled) {
80
+ transform: none;
81
+ }
82
+ }
83
+
84
+ .gog-btn:disabled {
85
+ opacity: var(--gog-btn-disabled-opacity);
86
+ cursor: not-allowed;
87
+ }
88
+
89
+ /* === Variants === */
90
+
91
+ /* primary: solid gold */
92
+ .gog-btn--primary {
93
+ --gog-btn-variant-bg: var(--gog-btn-primary-bg);
94
+ --gog-btn-variant-color: var(--gog-btn-primary-color);
95
+ --gog-btn-variant-border: var(--gog-btn-primary-border);
96
+ --gog-btn-variant-shadow: var(--gog-btn-primary-shadow);
97
+ --gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);
98
+ --gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);
99
+ --gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);
100
+ --gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color);
101
+ }
102
+
103
+ .gog-btn--secondary {
104
+ --gog-btn-variant-bg: var(--gog-btn-secondary-bg);
105
+ --gog-btn-variant-color: var(--gog-btn-secondary-color);
106
+ --gog-btn-variant-border: var(--gog-btn-secondary-border);
107
+ --gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);
108
+ --gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);
109
+ --gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);
110
+ --gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);
111
+ --gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color);
112
+ }
113
+
114
+ /* outline: transparent with golden border */
115
+ .gog-btn--outline {
116
+ --gog-btn-variant-bg: var(--gog-btn-outline-bg);
117
+ --gog-btn-variant-color: var(--gog-btn-outline-color);
118
+ --gog-btn-variant-border: var(--gog-btn-outline-border);
119
+ --gog-btn-variant-shadow: var(--gog-btn-outline-shadow);
120
+ --gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);
121
+ --gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);
122
+ --gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);
123
+ --gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color);
124
+ }
125
+
126
+ /* ghost: no border, subtle hover */
127
+ .gog-btn--ghost {
128
+ --gog-btn-variant-bg: var(--gog-btn-ghost-bg);
129
+ --gog-btn-variant-color: var(--gog-btn-ghost-color);
130
+ --gog-btn-variant-border: var(--gog-btn-ghost-border);
131
+ --gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);
132
+ --gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);
133
+ --gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);
134
+ --gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);
135
+ --gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color);
136
+ }
137
+
138
+ /* === Sizes === */
139
+ .gog-btn--xsm {
140
+ --gog-btn-size-padding: var(--gog-btn-xsm-padding);
141
+ --gog-btn-size-font-size: var(--gog-btn-xsm-font-size);
142
+ }
143
+
144
+ .gog-btn--sm {
145
+ --gog-btn-size-padding: var(--gog-btn-sm-padding);
146
+ --gog-btn-size-font-size: var(--gog-btn-sm-font-size);
147
+ }
148
+
149
+ .gog-btn--md {
150
+ --gog-btn-size-padding: var(--gog-btn-md-padding);
151
+ --gog-btn-size-font-size: var(--gog-btn-md-font-size);
152
+ }
153
+
154
+ .gog-btn--lg {
155
+ --gog-btn-size-padding: var(--gog-btn-lg-padding);
156
+ --gog-btn-size-font-size: var(--gog-btn-lg-font-size);
157
+ }
158
+
159
+ .gog-btn--slg {
160
+ --gog-btn-size-padding: var(--gog-btn-slg-padding);
161
+ --gog-btn-size-font-size: var(--gog-btn-slg-font-size);
162
+ }
163
+
164
+ .gog-btn--loading {
165
+ position: relative;
166
+ pointer-events: none;
167
+ /* Loading buttons stay natively focusable (aria-disabled + aria-busy instead of
168
+ `disabled`) so keyboard users don't lose focus mid-action. `:disabled` styling
169
+ below therefore no longer covers this state, so the dim is applied explicitly. */
170
+ opacity: var(--gog-btn-loading-opacity);
171
+ }
172
+
173
+ .gog-btn__content--hidden {
174
+ visibility: hidden;
175
+ }
176
+
177
+ /* absolute center so the spinner is always in the middle of the button */
178
+ .gog-btn__spinner {
179
+ position: absolute;
180
+ top: 50%;
181
+ left: 50%;
182
+ transform: translate(-50%, -50%);
183
+ max-width: var(--gog-btn-spinner-max-size);
184
+ max-height: var(--gog-btn-spinner-max-size);
185
+ }
186
+
187
+ /*
188
+ * `gog-button` gets its full width through `:host`, having a wrapper element to work with.
189
+ * `[gogButton]` has none — the element *is* the button — so it needs a class of its own.
190
+ */
191
+ .gog-btn--full-width {
192
+ width: 100%;
193
+ }
package/styles/index.css CHANGED
@@ -15,3 +15,5 @@
15
15
  @import './theme.css';
16
16
  @import './typography.css';
17
17
  @import './utilities.css';
18
+ /* Global because `[gogButton]` styles a consumer's own element — see the file's own header. */
19
+ @import './button.css';
package/styles/theme.css CHANGED
@@ -1144,6 +1144,8 @@
1144
1144
  --gog-paginator-ellipsis-color: var(--gog-muted-text-color);
1145
1145
  --gog-paginator-ellipsis-font-size: var(--gog-text-sm);
1146
1146
  --gog-paginator-ellipsis-font-family: var(--gog-font-body);
1147
+ /* Enough for a three-digit page size plus the chevron, so the row doesn't shift on change. */
1148
+ --gog-paginator-page-size-min-width: 5rem;
1147
1149
  --gog-paginator-ellipsis-min-width: 32px;
1148
1150
 
1149
1151
  /* ── Progressbar ──────────────────────────────────────────────────────────── */
@@ -1417,11 +1419,15 @@
1417
1419
  --gog-table-border-width: 2px;
1418
1420
  --gog-table-border-style: solid;
1419
1421
  --gog-table-row-border-width: 1px;
1422
+ /* The selection column is sized to its checkbox and never grows with content. */
1423
+ --gog-table-select-col-width: 44px;
1420
1424
  --gog-table-surface: var(--gog-surface-color);
1421
1425
  --gog-table-text-color: var(--gog-text-color);
1422
1426
  --gog-table-accent-color: var(--gog-accent-color);
1423
1427
  --gog-table-accent-bright: var(--gog-accent-bright);
1424
1428
  --gog-table-hover-bg: var(--gog-accent-pale);
1429
+ /* Selected rows keep this tint through hover, so hovering one never reads as clearing it. */
1430
+ --gog-table-selected-bg: var(--gog-accent-pale);
1425
1431
  --gog-table-muted-color: var(--gog-muted-text-color);
1426
1432
  --gog-table-focus-ring: var(--gog-accent-color);
1427
1433
  --gog-table-focus-ring-width: var(--gog-focus-ring-width);