@guildofgleks/ui 21.4.2 → 21.4.4
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.
- package/AGENTS.md +161 -135
- package/CHANGELOG.md +134 -14
- package/README.md +14 -0
- package/TOKENS.md +2 -2
- package/fesm2022/guildofgleks-ui.mjs +20 -12
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +2 -1
- package/schematics/collection.json +9 -0
- package/schematics/ng-add/index.cjs +62 -0
- package/schematics/ng-add/schema.cjs +2 -0
- package/schematics/ng-add/schema.json +15 -0
- package/src/styles/theme.css +21 -6
- package/src/styles/utilities.css +185 -170
- package/styles/theme.css +21 -6
- package/styles/utilities.css +185 -170
- package/types/guildofgleks-ui.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,24 +6,140 @@ reached 1.0, so breaking changes may land in minor versions.
|
|
|
6
6
|
|
|
7
7
|
## [21.5.0] - planned
|
|
8
8
|
|
|
9
|
+
**The breaking release** — the one version consumers have to read before upgrading into. It
|
|
10
|
+
carries the removals below and, per `docs/hardening-21.5.0.md`, the token-prefix rename
|
|
11
|
+
(`--gog-ms-*`, `--gog-btn-*`, `--gog-input-*` spelled out in full). Everything non-breaking that
|
|
12
|
+
is ready today ships in 21.4.4 instead, so a reader upgrading to 21.4.4 has nothing to migrate
|
|
13
|
+
and a reader upgrading to 21.5.0 has one list to work through rather than one buried among fixes.
|
|
14
|
+
|
|
15
|
+
### Removed
|
|
16
|
+
|
|
17
|
+
Not done yet — this section records what the version owes. Fourteen public symbols carry an
|
|
18
|
+
`@deprecated … Removed in 21.5.0` tag naming its own replacement:
|
|
19
|
+
|
|
20
|
+
- the six legacy icon inputs on `gog-inputfield`;
|
|
21
|
+
- the `checkIconTemplate` / `clearIconTemplate` / `iconTemplate` / `chevronTemplate` inputs;
|
|
22
|
+
- the `<column>` element, with its `Column` const and type;
|
|
23
|
+
- the string-keyed `[template]` column slot;
|
|
24
|
+
- the `GogSelectOption` / `GogMultiselectOption` aliases — **these two overran their announced
|
|
25
|
+
21.4.0 removal**, which is the reason the date on this list is not moved again.
|
|
26
|
+
|
|
27
|
+
One more is promised in prose rather than by a tag, so it has no `@deprecated` to grep for and is
|
|
28
|
+
the one most likely to be missed:
|
|
29
|
+
|
|
30
|
+
- the **`./src/styles/*` export** in `package.json`. Stylesheets moved to `./styles/*` in 21.3.2
|
|
31
|
+
and the README says the old path "keeps working until 21.5.0". Removing it breaks anyone still
|
|
32
|
+
importing `@guildofgleks/ui/src/styles/…`, and the README paragraph promising it goes too.
|
|
33
|
+
|
|
34
|
+
## [21.4.4] - 17.08.2026
|
|
35
|
+
|
|
36
|
+
Everything that is ready. Two defects and one addition, none of which changes an existing
|
|
37
|
+
signature, so upgrading from 21.4.3 needs no migration — see the `gog-collapsible` entry only if
|
|
38
|
+
you were relying on a panel being capped at 480px.
|
|
39
|
+
|
|
40
|
+
### Added
|
|
41
|
+
|
|
42
|
+
- **`ng add @guildofgleks/ui` now works.** It installs the latest version and adds
|
|
43
|
+
`node_modules/@guildofgleks/ui/styles/index.css` to your project's `angular.json` styles —
|
|
44
|
+
the one setup step that's pure mechanical JSON editing. Importing components and placing
|
|
45
|
+
`<gog-dialog />` / `<gog-toast-container />` are still manual; see the README.
|
|
46
|
+
|
|
47
|
+
In a patch rather than a minor because it is purely additive — it adds a way to install the
|
|
48
|
+
package and touches no existing API — the same reasoning that put "`CHANGELOG.md` now ships
|
|
49
|
+
inside the package" in 21.4.2.
|
|
50
|
+
|
|
51
|
+
### Fixed
|
|
52
|
+
|
|
53
|
+
- **An open `gog-collapsible` no longer clips content taller than 480px.**
|
|
54
|
+
`--gog-collapsible-max-height` defaulted to `480px` and the panel is `overflow: hidden`, so any
|
|
55
|
+
panel taller than that lost the rest of its content — with no scrollbar, no ellipsis and nothing
|
|
56
|
+
else to indicate it. The cap existed only to give the CSS transition an animatable target, which
|
|
57
|
+
meant every consumer had to discover the limit by having content disappear, then override the
|
|
58
|
+
token per instance. The default is now `max-content`, and `interpolate-size: allow-keywords` on
|
|
59
|
+
the panel keeps the open/close transition animating to it. `gog-accordion` never had this
|
|
60
|
+
problem — it animates `grid-template-rows` instead — so the two components now behave the same
|
|
61
|
+
way.
|
|
62
|
+
|
|
63
|
+
No token was added or removed, and nothing about the closed state changed. **Setting
|
|
64
|
+
`--gog-collapsible-max-height` to a length still caps the panel and still clips**, which is now
|
|
65
|
+
a deliberate opt-in rather than the default; per-instance overrides that only existed to work
|
|
66
|
+
around the old cap can be deleted.
|
|
67
|
+
|
|
68
|
+
- **`gog-button`'s loading spinner was painted with the page's text colour.**
|
|
69
|
+
`--gog-btn-primary-spinner-color` and `--gog-btn-secondary-spinner-color` resolved to
|
|
70
|
+
`--gog-text-color` — the colour of text on the page background — while the label beside the
|
|
71
|
+
spinner used `--gog-accent-text-color`, the colour meant to sit on the button's fill. On the two
|
|
72
|
+
filled variants those are opposite ends of the palette, so the spinner came out washed out: on
|
|
73
|
+
the dark theme, `#f3ebd8` parchment on a `#fbbf24` amber button, next to a near-black label.
|
|
74
|
+
Both now resolve to the variant's own label colour, so a spinner reads exactly as strongly as
|
|
75
|
+
the text it replaced and follows any re-theming of the button's foreground. `outline` and
|
|
76
|
+
`ghost` were already correct and are untouched.
|
|
77
|
+
|
|
78
|
+
Only the two tokens' values changed; no token was added or removed. A theme that sets either
|
|
79
|
+
one explicitly is unaffected. Note the button as a whole still dims to
|
|
80
|
+
`--gog-btn-loading-opacity` (0.7) while loading — that is deliberate and separate from this.
|
|
81
|
+
|
|
82
|
+
## [21.4.3] - 16.08.2026
|
|
83
|
+
|
|
84
|
+
Two components stopped fighting their container. Nothing was added or removed from any public
|
|
85
|
+
API, but **`gog-calendar` and `gog-datepicker [inline]` are narrower than they were** — see the
|
|
86
|
+
first entry if you were relying on a calendar filling its container.
|
|
87
|
+
|
|
9
88
|
### Changed
|
|
10
89
|
|
|
90
|
+
- **`gog-calendar` caps itself at its own month grid.** Its host was a block with no width, so
|
|
91
|
+
in any container wider than the grid the header — a flex row carrying the title and its six
|
|
92
|
+
nav chevrons — stretched the full width while the days huddled at the start. Every consumer
|
|
93
|
+
placing a calendar in a plain container had to write a width by hand to get a calendar that
|
|
94
|
+
looked like one. The new `--gog-calendar-max-width` (default `max-content`) does it once:
|
|
95
|
+
`max-content` needs no numbers and already tracks the size variants, `numberOfMonths`,
|
|
96
|
+
`showTime` and locales whose weekday abbreviations run wider than English's. It is a cap, so
|
|
97
|
+
a narrower container still constrains the host.
|
|
98
|
+
|
|
99
|
+
This sizes `inline` mode too — `[inline]="true"` renders `gog-calendar` with a border and
|
|
100
|
+
nothing else. **Set `--gog-calendar-max-width: 100%` to keep the old full-width behaviour.**
|
|
101
|
+
|
|
102
|
+
- **`--gog-datepicker-panel-width`** (default `max-content`) exposes the dropdown panel's width,
|
|
103
|
+
which was hardcoded. Same value as before; nothing changes unless you set it.
|
|
104
|
+
|
|
105
|
+
### Fixed
|
|
106
|
+
|
|
107
|
+
- **`gog-tabs` no longer scrolls the page to reach its active header.** It centred the active
|
|
108
|
+
header with `Element.scrollIntoView()`, which scrolls _every_ scrollable ancestor that needs to
|
|
109
|
+
move — so a tabs component below the fold dragged the whole page down to itself the moment it
|
|
110
|
+
initialised, and a page with several of them landed the reader at the last one. It now scrolls
|
|
111
|
+
its own header viewport directly: the active header still centres, nothing outside the
|
|
112
|
+
component moves. No API change; `scrollActiveIntoView` behaves as documented, only without the
|
|
113
|
+
side effect.
|
|
114
|
+
|
|
115
|
+
## [21.4.2] - 15.08.2026
|
|
116
|
+
|
|
117
|
+
Documentation only — no component, input, output or token changed, so upgrading from 21.4.1 is
|
|
118
|
+
a version bump with nothing to migrate.
|
|
119
|
+
|
|
120
|
+
### Added
|
|
121
|
+
|
|
11
122
|
- **`CHANGELOG.md` now ships inside the npm package**, alongside `README.md`, `AGENTS.md` and
|
|
12
|
-
`TOKENS.md`. It was repo-only, which meant
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
123
|
+
`TOKENS.md`. It was repo-only, which meant nothing could show release notes for the exact
|
|
124
|
+
version a reader has installed — and this file is the only source that cannot drift from the
|
|
125
|
+
package, because it travels inside it. Read it at
|
|
126
|
+
`node_modules/@guildofgleks/ui/CHANGELOG.md`; it is also what the documentation site's releases
|
|
127
|
+
page will render. Costs ~68 KB in the tarball and nothing at runtime.
|
|
16
128
|
|
|
17
129
|
### Fixed
|
|
18
130
|
|
|
19
131
|
- **`AGENTS.md` was missing `gog-slider`'s range mode.** `range`, `rangeValue`
|
|
20
132
|
(`GogSliderRange`), `startDisabled`/`endDisabled` and `startAriaLabel`/`endAriaLabel` shipped
|
|
21
|
-
in 21.3.1 but never reached the agent reference
|
|
22
|
-
|
|
133
|
+
in 21.3.1 but never reached the agent reference. An agent reading it concluded the slider
|
|
134
|
+
cannot express a range and built a two-slider workaround — the API was there all along.
|
|
23
135
|
- **`AGENTS.md` did not mention the `GOG_ICONS` token.** `provideGogIcons(...)` was documented,
|
|
24
136
|
but not the token it provides — which is what an app injects to read the registered set back
|
|
25
137
|
(an icon picker enumerating it). Public since 21.4.0, undocumented until now.
|
|
26
138
|
|
|
139
|
+
`AGENTS.md` is the file a coding agent reads to build against this package, so a gap in it
|
|
140
|
+
produces code written against API that does not exist, or workarounds for API that does. Both
|
|
141
|
+
entries above are that kind of gap, which is why a documentation-only patch was worth cutting.
|
|
142
|
+
|
|
27
143
|
## [21.4.1] - 14.08.2026
|
|
28
144
|
|
|
29
145
|
### Fixed
|
|
@@ -31,7 +147,7 @@ reached 1.0, so breaking changes may land in minor versions.
|
|
|
31
147
|
- **Overlays ignored custom properties set on `:root`.** A select panel, tooltip or any other
|
|
32
148
|
overlay rendered into `<body>` copied the `data-theme` of its trigger's nearest themed
|
|
33
149
|
ancestor. When that ancestor is `<html>` — the usual case — the copy made the overlay match
|
|
34
|
-
`theme.css`'s derived layer (`:root, [data-theme]`)
|
|
150
|
+
`theme.css`'s derived layer (`:root, [data-theme]`) _locally_, re-declaring every component
|
|
35
151
|
token against the plain preset palette and discarding anything set on the root that the preset
|
|
36
152
|
does not itself declare.
|
|
37
153
|
|
|
@@ -39,7 +155,7 @@ reached 1.0, so breaking changes may land in minor versions.
|
|
|
39
155
|
`document.documentElement` — a live theme editor, or any runtime accent switch — saw the
|
|
40
156
|
document follow while every overlay kept rendering the un-edited theme.
|
|
41
157
|
|
|
42
|
-
The attribute is now copied only for a genuinely
|
|
158
|
+
The attribute is now copied only for a genuinely _scoped_ theme, where the overlay would
|
|
43
159
|
otherwise pick up the document's; when the theme sits on the document element, inheritance
|
|
44
160
|
already does the work. Several themes rendered side by side in scoped subtrees keep working
|
|
45
161
|
exactly as before.
|
|
@@ -59,6 +175,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
59
175
|
`gogPageChange` deliberately stays quiet in two cases: the initial render, and the reset to
|
|
60
176
|
page 1 that a new sort causes — that reset is part of the sort, and a consumer refetching from
|
|
61
177
|
both events would issue two requests for one user action.
|
|
178
|
+
|
|
62
179
|
- **`gog-table`: `lazy` — server-driven sorting and paging.** With `[lazy]="true"` the table
|
|
63
180
|
stops sorting and slicing `value` and renders it exactly as handed over, treating it as the
|
|
64
181
|
current page; `totalRecords` tells the paginator how many pages exist, and the two outputs are
|
|
@@ -75,6 +192,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
75
192
|
**The select-all covers the current page, not the whole data set** — in `lazy` mode the table
|
|
76
193
|
has never seen the other pages, and a control that meant different things in the two modes
|
|
77
194
|
would be worse than either behaviour on its own.
|
|
195
|
+
|
|
78
196
|
- **`gog-table`: `dataKey`.** The field (or dot-path) identifying a row. Selection matches on it
|
|
79
197
|
instead of object identity — without it a refetch producing new objects silently drops the
|
|
80
198
|
selection — and it becomes the `@for` track key, so the rendered DOM survives a refetch of the
|
|
@@ -83,7 +201,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
83
201
|
Enter and Space activating the focused row. `gogRowClick` fires on a click either way; this is
|
|
84
202
|
what stops a whole-row target from being mouse-only.
|
|
85
203
|
- **`[gogButton]` — a link that looks like a button.** `gog-button` renders its own `<button>`,
|
|
86
|
-
so it could never
|
|
204
|
+
so it could never _be_ a link, and a large share of buttons on a real site are navigation. The
|
|
87
205
|
directive inverts the relationship: the element stays the consumer's, and only the look is
|
|
88
206
|
applied.
|
|
89
207
|
|
|
@@ -104,6 +222,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
104
222
|
on an `<a>`) and no `loading` (the spinner is a projected child a directive cannot add). The
|
|
105
223
|
selector is `a[gogButton], button[gogButton]`, not a bare attribute, so it cannot be put on a
|
|
106
224
|
`<div>` and produce something that looks clickable and is invisible to the keyboard.
|
|
225
|
+
|
|
107
226
|
- **`gog-paginator`: a rows-per-page select.** `showPageSizeSelect` turns it on (**off by
|
|
108
227
|
default** — a paginator that silently grew a control would change every existing layout) and
|
|
109
228
|
`pageSizeOptions` sets the choices, defaulting to `[10, 20, 30, 40, 50]`. Both are also
|
|
@@ -111,7 +230,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
111
230
|
while the rest of the app uses the house default.
|
|
112
231
|
- **`gog-paginator`: `pageSize` (a `model`) and `totalRecords`.** Given `totalRecords`, the
|
|
113
232
|
paginator derives the page count from `pageSize` itself — which removes the
|
|
114
|
-
`computed(() => Math.ceil(total / size))` a consumer would otherwise have to write
|
|
233
|
+
`computed(() => Math.ceil(total / size))` a consumer would otherwise have to write _and_ keep
|
|
115
234
|
in sync with the select. `totalPages` still works and is right when a server hands you a page
|
|
116
235
|
count directly; `totalRecords` wins if both are set. Changing the size returns to page 1:
|
|
117
236
|
"page 5" of 10-row pages is not "page 5" of 50-row ones, so clamping alone would leave the user
|
|
@@ -125,7 +244,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
125
244
|
- **`provideGogIcons(...)` — register your own icons by name.** `gog-icon` shipped a closed set
|
|
126
245
|
of 20 glyphs, and the only way to render anything else was a `TemplateRef` per instance,
|
|
127
246
|
which costs an `<ng-template>` at every use site and does not work at all for the components
|
|
128
|
-
that take an icon
|
|
247
|
+
that take an icon _name_ (`gog-tag`, `gog-chip`, `gog-tabs`, `gog-button-toggle-group`,
|
|
129
248
|
`ToastService`, `DialogService`). In practice that meant installing a second icon library —
|
|
130
249
|
precisely the dependency the "no CDK, no Material" footprint exists to avoid.
|
|
131
250
|
|
|
@@ -135,8 +254,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
135
254
|
```
|
|
136
255
|
|
|
137
256
|
```html
|
|
138
|
-
<gog-icon name="cart" />
|
|
139
|
-
<gog-tag iconName="cart">In basket</gog-tag>
|
|
257
|
+
<gog-icon name="cart" /> <gog-tag iconName="cart">In basket</gog-tag>
|
|
140
258
|
```
|
|
141
259
|
|
|
142
260
|
- A registered name **overrides a built-in of the same name**, so an app can replace the
|
|
@@ -144,6 +262,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
144
262
|
- Providing it again lower in the injector tree **layers onto** the parent set rather than
|
|
145
263
|
replacing it, matching `provideGogConfig`.
|
|
146
264
|
- The registry is also exposed as the `GOG_ICONS` injection token.
|
|
265
|
+
|
|
147
266
|
- **`GogBuiltinIconName`** — the closed union of the shipped glyphs, for code that wants
|
|
148
267
|
exhaustiveness (an icon gallery, a `Record` keyed by icon).
|
|
149
268
|
- **21 more built-in icons, taking the set from 20 to 41.** The old set covered what the
|
|
@@ -164,6 +283,7 @@ A minor rather than a patch: this adds public API. Iterations 5 and 6 of the con
|
|
|
164
283
|
|
|
165
284
|
Cost: `ICON_DEFS` is one object, so every consumer pays for all of it — it grew from 8.0 KB to
|
|
166
285
|
16.5 KB raw, **1.6 KB to 2.7 KB gzipped**.
|
|
286
|
+
|
|
167
287
|
- **Attribution for the icons.** The glyphs were always Lucide but the package said so nowhere;
|
|
168
288
|
Lucide's ISC licence asks for the notice to travel with them. It is now at the top of
|
|
169
289
|
`icons.ts` and summarised in the README's licence section.
|
|
@@ -351,7 +471,7 @@ made unreachable.
|
|
|
351
471
|
overriding it, and ignored outside `range` mode (nothing to disable "one side" of there). A
|
|
352
472
|
one-sided disable only dims and disables that one thumb (its native input's own `disabled`
|
|
353
473
|
attribute takes it out of the tab order); the whole-control `.gog-slider--disabled` styling
|
|
354
|
-
(dimming + `pointer-events: none` over the whole track) only kicks in once
|
|
474
|
+
(dimming + `pointer-events: none` over the whole track) only kicks in once _both_ sides are
|
|
355
475
|
disabled, since applying it for just one would also block pointer input to the other,
|
|
356
476
|
still-enabled thumb. Reactive forms are unaffected by this addition: a `[formControl]`'s own
|
|
357
477
|
`.disable()`/`.enable()` still speaks for both thumbs at once, same as before — one
|
package/README.md
CHANGED
|
@@ -31,6 +31,20 @@ npm install @guildofgleks/ui
|
|
|
31
31
|
|
|
32
32
|
## Setup
|
|
33
33
|
|
|
34
|
+
Install it with whichever package manager you use — or with `ng add`, which installs it and does
|
|
35
|
+
step 1 for you:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @guildofgleks/ui
|
|
39
|
+
# or
|
|
40
|
+
yarn add @guildofgleks/ui
|
|
41
|
+
# or — also does step 1 below
|
|
42
|
+
ng add @guildofgleks/ui
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Steps 2 and 3 are yours either way: a schematic can't know where in your app you want components
|
|
46
|
+
or dialog and toast hosts.
|
|
47
|
+
|
|
34
48
|
**1. Add the stylesheet.** It carries the baseline theme and the utility classes the components
|
|
35
49
|
use — without it they render unstyled.
|
|
36
50
|
|
package/TOKENS.md
CHANGED
|
@@ -34,14 +34,14 @@ so a theme editor or docs page can enumerate the real tokens instead of copying
|
|
|
34
34
|
| Collapsible | `--gog-collapsible-disabled-opacity`, `--gog-collapsible-max-height`, `--gog-collapsible-transition-duration` |
|
|
35
35
|
| Button | `--gog-btn-active-scale`, `--gog-btn-border-style`, `--gog-btn-border-width`, `--gog-btn-disabled-opacity`, `--gog-btn-focus-ring-offset`, `--gog-btn-focus-ring-width`, `--gog-btn-font-family`, `--gog-btn-font-weight`, `--gog-btn-gap`, `--gog-btn-ghost-bg`, `--gog-btn-ghost-border`, `--gog-btn-ghost-color`, `--gog-btn-ghost-hover-bg`, `--gog-btn-ghost-hover-color`, `--gog-btn-ghost-hover-shadow`, `--gog-btn-ghost-shadow`, `--gog-btn-ghost-spinner-color`, `--gog-btn-letter-spacing`, `--gog-btn-line-height`, `--gog-btn-loading-opacity`, `--gog-btn-outline-bg`, `--gog-btn-outline-border`, `--gog-btn-outline-color`, `--gog-btn-outline-hover-bg`, `--gog-btn-outline-hover-color`, `--gog-btn-outline-hover-shadow`, `--gog-btn-outline-shadow`, `--gog-btn-outline-spinner-color`, `--gog-btn-primary-bg`, `--gog-btn-primary-border`, `--gog-btn-primary-color`, `--gog-btn-primary-hover-bg`, `--gog-btn-primary-hover-color`, `--gog-btn-primary-hover-shadow`, `--gog-btn-primary-shadow`, `--gog-btn-primary-spinner-color`, `--gog-btn-radius`, `--gog-btn-secondary-bg`, `--gog-btn-secondary-border`, `--gog-btn-secondary-color`, `--gog-btn-secondary-hover-bg`, `--gog-btn-secondary-hover-color`, `--gog-btn-secondary-hover-shadow`, `--gog-btn-secondary-shadow`, `--gog-btn-secondary-spinner-color`, `--gog-btn-spinner-max-size`, `--gog-btn-text-transform`, `--gog-btn-transition-duration` |
|
|
36
36
|
| Button toggle group | `--gog-button-toggle-border-color`, `--gog-button-toggle-border-style`, `--gog-button-toggle-border-width`, `--gog-button-toggle-disabled-opacity`, `--gog-button-toggle-focus-ring-color`, `--gog-button-toggle-focus-ring-offset`, `--gog-button-toggle-focus-ring-width`, `--gog-button-toggle-font-family`, `--gog-button-toggle-font-weight`, `--gog-button-toggle-gap`, `--gog-button-toggle-hover-bg`, `--gog-button-toggle-hover-color`, `--gog-button-toggle-icon-size`, `--gog-button-toggle-letter-spacing`, `--gog-button-toggle-line-height`, `--gog-button-toggle-radius`, `--gog-button-toggle-rest-bg`, `--gog-button-toggle-rest-color`, `--gog-button-toggle-selected-bg`, `--gog-button-toggle-selected-border-color`, `--gog-button-toggle-selected-color`, `--gog-button-toggle-separated-gap`, `--gog-button-toggle-text-transform`, `--gog-button-toggle-transition-duration` |
|
|
37
|
-
| Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) | `--gog-calendar-action-padding`, `--gog-calendar-color`, `--gog-calendar-day-border-style`, `--gog-calendar-day-border-width`, `--gog-calendar-day-hover-bg`, `--gog-calendar-day-outside-color`, `--gog-calendar-day-radius`, `--gog-calendar-day-rest-bg`, `--gog-calendar-day-rest-color`, `--gog-calendar-disabled-opacity`, `--gog-calendar-divider-color`, `--gog-calendar-divider-style`, `--gog-calendar-divider-width`, `--gog-calendar-focus-ring-color`, `--gog-calendar-focus-ring-offset`, `--gog-calendar-focus-ring-width`, `--gog-calendar-font-family`, `--gog-calendar-footer-gap`, `--gog-calendar-header-gap`, `--gog-calendar-header-margin`, `--gog-calendar-lg-day-size`, `--gog-calendar-lg-font-size`, `--gog-calendar-md-day-size`, `--gog-calendar-md-font-size`, `--gog-calendar-months-gap`, `--gog-calendar-nav-bg`, `--gog-calendar-nav-color`, `--gog-calendar-nav-hover-bg`, `--gog-calendar-nav-hover-color`, `--gog-calendar-nav-icon-overlap`, `--gog-calendar-nav-icon-size`, `--gog-calendar-nav-radius`, `--gog-calendar-nav-size`, `--gog-calendar-padding`, `--gog-calendar-range-bg`, `--gog-calendar-range-color`, `--gog-calendar-selected-bg`, `--gog-calendar-selected-color`, `--gog-calendar-selected-font-weight`, `--gog-calendar-slg-day-size`, `--gog-calendar-slg-font-size`, `--gog-calendar-sm-day-size`, `--gog-calendar-sm-font-size`, `--gog-calendar-time-gap`, `--gog-calendar-time-input-bg`, `--gog-calendar-time-input-padding`, `--gog-calendar-time-input-width`, `--gog-calendar-time-margin`, `--gog-calendar-title-color`, `--gog-calendar-title-font-weight`, `--gog-calendar-today-border-color`, `--gog-calendar-today-font-weight`, `--gog-calendar-transition-duration`, `--gog-calendar-weekday-color`, `--gog-calendar-weekday-font-size`, `--gog-calendar-weekday-font-weight`, `--gog-calendar-weekday-padding`, `--gog-calendar-weekday-text-transform`, `--gog-calendar-xsm-day-size`, `--gog-calendar-xsm-font-size`
|
|
37
|
+
| Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) | `--gog-calendar-action-padding`, `--gog-calendar-color`, `--gog-calendar-day-border-style`, `--gog-calendar-day-border-width`, `--gog-calendar-day-hover-bg`, `--gog-calendar-day-outside-color`, `--gog-calendar-day-radius`, `--gog-calendar-day-rest-bg`, `--gog-calendar-day-rest-color`, `--gog-calendar-disabled-opacity`, `--gog-calendar-divider-color`, `--gog-calendar-divider-style`, `--gog-calendar-divider-width`, `--gog-calendar-focus-ring-color`, `--gog-calendar-focus-ring-offset`, `--gog-calendar-focus-ring-width`, `--gog-calendar-font-family`, `--gog-calendar-footer-gap`, `--gog-calendar-header-gap`, `--gog-calendar-header-margin`, `--gog-calendar-lg-day-size`, `--gog-calendar-lg-font-size`, `--gog-calendar-max-width`, `--gog-calendar-md-day-size`, `--gog-calendar-md-font-size`, `--gog-calendar-months-gap`, `--gog-calendar-nav-bg`, `--gog-calendar-nav-color`, `--gog-calendar-nav-hover-bg`, `--gog-calendar-nav-hover-color`, `--gog-calendar-nav-icon-overlap`, `--gog-calendar-nav-icon-size`, `--gog-calendar-nav-radius`, `--gog-calendar-nav-size`, `--gog-calendar-padding`, `--gog-calendar-range-bg`, `--gog-calendar-range-color`, `--gog-calendar-selected-bg`, `--gog-calendar-selected-color`, `--gog-calendar-selected-font-weight`, `--gog-calendar-slg-day-size`, `--gog-calendar-slg-font-size`, `--gog-calendar-sm-day-size`, `--gog-calendar-sm-font-size`, `--gog-calendar-time-gap`, `--gog-calendar-time-input-bg`, `--gog-calendar-time-input-padding`, `--gog-calendar-time-input-width`, `--gog-calendar-time-margin`, `--gog-calendar-title-color`, `--gog-calendar-title-font-weight`, `--gog-calendar-today-border-color`, `--gog-calendar-today-font-weight`, `--gog-calendar-transition-duration`, `--gog-calendar-weekday-color`, `--gog-calendar-weekday-font-size`, `--gog-calendar-weekday-font-weight`, `--gog-calendar-weekday-padding`, `--gog-calendar-weekday-text-transform`, `--gog-calendar-xsm-day-size`, `--gog-calendar-xsm-font-size` |
|
|
38
38
|
| Checkbox | `--gog-checkbox-bg`, `--gog-checkbox-border-color`, `--gog-checkbox-border-style`, `--gog-checkbox-border-width`, `--gog-checkbox-checked-bg`, `--gog-checkbox-checked-border`, `--gog-checkbox-dash-height`, `--gog-checkbox-dash-radius`, `--gog-checkbox-dash-width-ratio`, `--gog-checkbox-disabled-opacity`, `--gog-checkbox-focus-ring`, `--gog-checkbox-focus-ring-offset`, `--gog-checkbox-focus-ring-width`, `--gog-checkbox-font-family`, `--gog-checkbox-gap`, `--gog-checkbox-icon-color`, `--gog-checkbox-label-color`, `--gog-checkbox-label-line-height`, `--gog-checkbox-radius`, `--gog-checkbox-transition-duration` |
|
|
39
39
|
| Radio group | `--gog-radio-bg`, `--gog-radio-border-color`, `--gog-radio-border-style`, `--gog-radio-border-width`, `--gog-radio-checked-bg`, `--gog-radio-checked-border`, `--gog-radio-disabled-opacity`, `--gog-radio-dot-color`, `--gog-radio-dot-size-ratio`, `--gog-radio-error-color`, `--gog-radio-error-font-size`, `--gog-radio-focus-ring`, `--gog-radio-focus-ring-offset`, `--gog-radio-focus-ring-width`, `--gog-radio-font-family`, `--gog-radio-gap`, `--gog-radio-group-gap`, `--gog-radio-group-label-color`, `--gog-radio-group-label-size`, `--gog-radio-group-option-gap`, `--gog-radio-group-option-gap-horizontal`, `--gog-radio-label-color`, `--gog-radio-label-line-height`, `--gog-radio-transition-duration` |
|
|
40
40
|
| Chip | `--gog-chip-avatar-inset-ratio`, `--gog-chip-bg`, `--gog-chip-border`, `--gog-chip-border-style`, `--gog-chip-border-width`, `--gog-chip-color`, `--gog-chip-disabled-opacity`, `--gog-chip-focus-ring-offset`, `--gog-chip-focus-ring-width`, `--gog-chip-font-family`, `--gog-chip-font-weight`, `--gog-chip-hover-bg`, `--gog-chip-lg-avatar-size`, `--gog-chip-lg-font-size`, `--gog-chip-lg-gap`, `--gog-chip-lg-icon-size`, `--gog-chip-lg-padding-block`, `--gog-chip-lg-padding-inline`, `--gog-chip-lg-remove-size`, `--gog-chip-line-height`, `--gog-chip-md-avatar-size`, `--gog-chip-md-font-size`, `--gog-chip-md-gap`, `--gog-chip-md-icon-size`, `--gog-chip-md-padding-block`, `--gog-chip-md-padding-inline`, `--gog-chip-md-remove-size`, `--gog-chip-pill-radius`, `--gog-chip-radius`, `--gog-chip-remove-color`, `--gog-chip-remove-hover-color`, `--gog-chip-remove-inset-ratio`, `--gog-chip-remove-scale`, `--gog-chip-slg-avatar-size`, `--gog-chip-slg-font-size`, `--gog-chip-slg-gap`, `--gog-chip-slg-icon-size`, `--gog-chip-slg-padding-block`, `--gog-chip-slg-padding-inline`, `--gog-chip-slg-remove-size`, `--gog-chip-sm-avatar-size`, `--gog-chip-sm-font-size`, `--gog-chip-sm-gap`, `--gog-chip-sm-icon-size`, `--gog-chip-sm-padding-block`, `--gog-chip-sm-padding-inline`, `--gog-chip-sm-remove-size`, `--gog-chip-xsm-avatar-size`, `--gog-chip-xsm-font-size`, `--gog-chip-xsm-gap`, `--gog-chip-xsm-icon-size`, `--gog-chip-xsm-padding-block`, `--gog-chip-xsm-padding-inline`, `--gog-chip-xsm-remove-size` |
|
|
41
41
|
| Dialog | `--gog-confirm-actions-gap`, `--gog-confirm-actions-offset`, `--gog-confirm-color`, `--gog-confirm-description-color`, `--gog-confirm-gap`, `--gog-confirm-max-width`, `--gog-confirm-min-width`, `--gog-dialog-backdrop-bg`, `--gog-dialog-backdrop-blur`, `--gog-dialog-backdrop-fade-duration`, `--gog-dialog-backdrop-padding`, `--gog-dialog-bg`, `--gog-dialog-body-max-height`, `--gog-dialog-body-padding`, `--gog-dialog-border`, `--gog-dialog-border-style`, `--gog-dialog-border-width`, `--gog-dialog-close-color`, `--gog-dialog-close-focus-ring`, `--gog-dialog-close-focus-ring-offset`, `--gog-dialog-close-focus-ring-width`, `--gog-dialog-close-font-size`, `--gog-dialog-close-hover-bg`, `--gog-dialog-close-hover-border`, `--gog-dialog-close-hover-color`, `--gog-dialog-close-size`, `--gog-dialog-color`, `--gog-dialog-enter-distance`, `--gog-dialog-enter-duration`, `--gog-dialog-font-family`, `--gog-dialog-header-border-color`, `--gog-dialog-header-gap`, `--gog-dialog-header-padding`, `--gog-dialog-max-height`, `--gog-dialog-min-width`, `--gog-dialog-radius`, `--gog-dialog-shadow` |
|
|
42
42
|
| Autocomplete | `--gog-autocomplete-actions-gap`, `--gog-autocomplete-actions-inset`, `--gog-autocomplete-actions-reserve`, `--gog-autocomplete-border-color`, `--gog-autocomplete-border-style`, `--gog-autocomplete-border-width`, `--gog-autocomplete-clear-color`, `--gog-autocomplete-clear-hover-color`, `--gog-autocomplete-clear-icon-ratio`, `--gog-autocomplete-disabled-opacity`, `--gog-autocomplete-empty-color`, `--gog-autocomplete-empty-font-size`, `--gog-autocomplete-error-border-color`, `--gog-autocomplete-error-color`, `--gog-autocomplete-error-font-family`, `--gog-autocomplete-error-font-size`, `--gog-autocomplete-field-bg`, `--gog-autocomplete-float-label-in-top`, `--gog-autocomplete-float-label-over-gap`, `--gog-autocomplete-float-label-over-reserve`, `--gog-autocomplete-float-label-reserve`, `--gog-autocomplete-focus-ring-color`, `--gog-autocomplete-focus-ring-offset`, `--gog-autocomplete-focus-ring-width`, `--gog-autocomplete-font-family`, `--gog-autocomplete-gap`, `--gog-autocomplete-hover-border-color`, `--gog-autocomplete-label-color`, `--gog-autocomplete-label-font-family`, `--gog-autocomplete-label-font-size`, `--gog-autocomplete-label-font-weight`, `--gog-autocomplete-label-letter-spacing`, `--gog-autocomplete-label-text-transform`, `--gog-autocomplete-line-height`, `--gog-autocomplete-min-width`, `--gog-autocomplete-option-color`, `--gog-autocomplete-option-gap`, `--gog-autocomplete-option-height`, `--gog-autocomplete-option-hover-bg`, `--gog-autocomplete-option-hover-color`, `--gog-autocomplete-option-padding`, `--gog-autocomplete-option-radius`, `--gog-autocomplete-option-selected-bg`, `--gog-autocomplete-option-selected-color`, `--gog-autocomplete-options-padding`, `--gog-autocomplete-panel-bg`, `--gog-autocomplete-panel-border-color`, `--gog-autocomplete-panel-border-style`, `--gog-autocomplete-panel-border-width`, `--gog-autocomplete-panel-gap`, `--gog-autocomplete-panel-max-height`, `--gog-autocomplete-panel-max-width`, `--gog-autocomplete-panel-radius`, `--gog-autocomplete-panel-shadow`, `--gog-autocomplete-placeholder-color`, `--gog-autocomplete-radius`, `--gog-autocomplete-spinner-size`, `--gog-autocomplete-text-color`, `--gog-autocomplete-transition-duration` |
|
|
43
43
|
| Badge (the `gogBadge` directive; its classes live in utilities.css) | `--gog-badge-border-color`, `--gog-badge-border-style`, `--gog-badge-border-width`, `--gog-badge-danger-bg`, `--gog-badge-danger-color`, `--gog-badge-dot-size`, `--gog-badge-font-family`, `--gog-badge-font-size`, `--gog-badge-font-weight`, `--gog-badge-info-bg`, `--gog-badge-info-color`, `--gog-badge-line-height`, `--gog-badge-offset`, `--gog-badge-padding-inline`, `--gog-badge-radius`, `--gog-badge-size`, `--gog-badge-success-bg`, `--gog-badge-success-color`, `--gog-badge-warning-bg`, `--gog-badge-warning-color`, `--gog-badge-z` |
|
|
44
|
-
| Datepicker (the field; the grid inside it is themed by --gog-calendar-*) | `--gog-datepicker-actions-gap`, `--gog-datepicker-actions-inset`, `--gog-datepicker-actions-reserve`, `--gog-datepicker-border-color`, `--gog-datepicker-border-style`, `--gog-datepicker-border-width`, `--gog-datepicker-clear-color`, `--gog-datepicker-clear-icon-ratio`, `--gog-datepicker-disabled-opacity`, `--gog-datepicker-error-border-color`, `--gog-datepicker-error-color`, `--gog-datepicker-error-font-family`, `--gog-datepicker-error-font-size`, `--gog-datepicker-field-bg`, `--gog-datepicker-float-label-in-top`, `--gog-datepicker-float-label-over-gap`, `--gog-datepicker-float-label-over-reserve`, `--gog-datepicker-float-label-reserve`, `--gog-datepicker-focus-ring-color`, `--gog-datepicker-focus-ring-offset`, `--gog-datepicker-focus-ring-width`, `--gog-datepicker-font-family`, `--gog-datepicker-gap`, `--gog-datepicker-hover-border-color`, `--gog-datepicker-icon-color`, `--gog-datepicker-icon-hover-color`, `--gog-datepicker-label-color`, `--gog-datepicker-label-font-family`, `--gog-datepicker-label-font-size`, `--gog-datepicker-label-letter-spacing`, `--gog-datepicker-label-text-transform`, `--gog-datepicker-line-height`, `--gog-datepicker-min-width`, `--gog-datepicker-panel-bg`, `--gog-datepicker-panel-border-color`, `--gog-datepicker-panel-border-style`, `--gog-datepicker-panel-border-width`, `--gog-datepicker-panel-gap`, `--gog-datepicker-panel-radius`, `--gog-datepicker-panel-shadow`, `--gog-datepicker-placeholder-color`, `--gog-datepicker-radius`, `--gog-datepicker-text-color`, `--gog-datepicker-toggle-icon-size`, `--gog-datepicker-transition-duration`
|
|
44
|
+
| Datepicker (the field; the grid inside it is themed by --gog-calendar-*) | `--gog-datepicker-actions-gap`, `--gog-datepicker-actions-inset`, `--gog-datepicker-actions-reserve`, `--gog-datepicker-border-color`, `--gog-datepicker-border-style`, `--gog-datepicker-border-width`, `--gog-datepicker-clear-color`, `--gog-datepicker-clear-icon-ratio`, `--gog-datepicker-disabled-opacity`, `--gog-datepicker-error-border-color`, `--gog-datepicker-error-color`, `--gog-datepicker-error-font-family`, `--gog-datepicker-error-font-size`, `--gog-datepicker-field-bg`, `--gog-datepicker-float-label-in-top`, `--gog-datepicker-float-label-over-gap`, `--gog-datepicker-float-label-over-reserve`, `--gog-datepicker-float-label-reserve`, `--gog-datepicker-focus-ring-color`, `--gog-datepicker-focus-ring-offset`, `--gog-datepicker-focus-ring-width`, `--gog-datepicker-font-family`, `--gog-datepicker-gap`, `--gog-datepicker-hover-border-color`, `--gog-datepicker-icon-color`, `--gog-datepicker-icon-hover-color`, `--gog-datepicker-label-color`, `--gog-datepicker-label-font-family`, `--gog-datepicker-label-font-size`, `--gog-datepicker-label-letter-spacing`, `--gog-datepicker-label-text-transform`, `--gog-datepicker-line-height`, `--gog-datepicker-min-width`, `--gog-datepicker-panel-bg`, `--gog-datepicker-panel-border-color`, `--gog-datepicker-panel-border-style`, `--gog-datepicker-panel-border-width`, `--gog-datepicker-panel-gap`, `--gog-datepicker-panel-radius`, `--gog-datepicker-panel-shadow`, `--gog-datepicker-panel-width`, `--gog-datepicker-placeholder-color`, `--gog-datepicker-radius`, `--gog-datepicker-text-color`, `--gog-datepicker-toggle-icon-size`, `--gog-datepicker-transition-duration` |
|
|
45
45
|
| Divider | `--gog-divider-block-spacing`, `--gog-divider-dashed-style`, `--gog-divider-dotted-style`, `--gog-divider-inline-spacing`, `--gog-divider-inset-size`, `--gog-divider-label-color`, `--gog-divider-label-font-family`, `--gog-divider-label-font-size`, `--gog-divider-label-font-weight`, `--gog-divider-label-gap`, `--gog-divider-label-line-height`, `--gog-divider-line-color`, `--gog-divider-line-thickness`, `--gog-divider-solid-style`, `--gog-divider-vertical-length` |
|
|
46
46
|
| Icon | `--gog-icon-fallback-size` |
|
|
47
47
|
| Input field | `--gog-input-clear-icon-ratio`, `--gog-input-clear-inset`, `--gog-input-clear-radius`, `--gog-input-disabled-opacity`, `--gog-input-error-color`, `--gog-input-error-font-size`, `--gog-input-error-offset`, `--gog-input-field-bg`, `--gog-input-field-border`, `--gog-input-field-border-style`, `--gog-input-field-border-width`, `--gog-input-field-color`, `--gog-input-float-label-in-top`, `--gog-input-float-label-over-gap`, `--gog-input-float-label-over-reserve`, `--gog-input-float-label-reserve`, `--gog-input-focus-border`, `--gog-input-focus-glow`, `--gog-input-focus-ring`, `--gog-input-focus-ring-offset`, `--gog-input-focus-ring-width`, `--gog-input-font-family`, `--gog-input-gap`, `--gog-input-icon-action-radius`, `--gog-input-icon-color`, `--gog-input-icon-focus-ring-width`, `--gog-input-icon-hover-color`, `--gog-input-label-color`, `--gog-input-label-font-family`, `--gog-input-label-font-size`, `--gog-input-label-letter-spacing`, `--gog-input-label-text-transform`, `--gog-input-placeholder-color`, `--gog-input-radius`, `--gog-input-spin-hover-bg`, `--gog-input-spin-width`, `--gog-input-transition-duration`, `--gog-textarea-clear-icon-ratio`, `--gog-textarea-resize-grip-color`, `--gog-textarea-resize-grip-offset`, `--gog-textarea-resize-grip-opacity`, `--gog-textarea-resize-grip-size`, `--gog-textarea-resize-grip-stripe-gap`, `--gog-textarea-resize-grip-stripe-width`, `--gog-textarea-resize-inset-bottom`, `--gog-textarea-resize-inset-right` |
|