@guildofgleks/ui 21.2.4 → 21.3.0
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/README.md +320 -204
- package/fesm2022/guildofgleks-ui.mjs +6829 -1676
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/presets/one-dark.css +48 -0
- package/src/styles/presets/one-light.css +47 -0
- package/src/styles/presets/slate.css +55 -0
- package/src/styles/theme.css +1643 -978
- package/src/styles/utilities.css +170 -69
- package/types/guildofgleks-ui.d.ts +2287 -324
package/README.md
CHANGED
|
@@ -1,204 +1,320 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
A lightweight Angular 21 component library. No CDK, no Material — the only runtime
|
|
8
|
-
dependencies are `@angular/core`, `@angular/common` and `@angular/forms`.
|
|
9
|
-
|
|
10
|
-
**Tags:** angular, angular21, components, ui-library, design-system, signals, standalone, accessible
|
|
11
|
-
|
|
12
|
-
## Features
|
|
13
|
-
|
|
14
|
-
- 18 standalone components — accordion, button, checkbox, chip, collapsible, dialog,
|
|
15
|
-
icon, inputfield, multiselect, paginator, select, skeleton, slider, spinner, table,
|
|
16
|
-
tag, textarea, toast — plus `DialogService`, `ToastService` and `ThemeService`.
|
|
17
|
-
- Signal-based API throughout: `input()` / `output()` / `model()`, `OnPush` change
|
|
18
|
-
detection, no NgModules.
|
|
19
|
-
- No CDK, no Material — a small dependency footprint on top of `@angular/core`,
|
|
20
|
-
`@angular/common` and `@angular/forms`.
|
|
21
|
-
- Full theming through CSS custom properties: restyle any component, swap the whole
|
|
22
|
-
palette, or ship light/dark and custom themes at runtime via a `data-theme` attribute.
|
|
23
|
-
- `ControlValueAccessor` on every form control (checkbox, inputfield, select,
|
|
24
|
-
multiselect, slider, textarea) — built and tested against Reactive Forms (`formControl` /
|
|
25
|
-
`formControlName`). The library does not use `ngModel`/`FormsModule` anywhere itself,
|
|
26
|
-
and template-driven usage via `[(ngModel)]` is untested — CVA makes it likely to work,
|
|
27
|
-
but it isn't a supported or verified path.
|
|
28
|
-
- Accessible by default: keyboard navigation, ARIA attributes, WCAG AA contrast.
|
|
29
|
-
|
|
30
|
-
## Install
|
|
31
|
-
|
|
32
|
-
npm:
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npm install @guildofgleks/ui
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
yarn:
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
yarn add @guildofgleks/ui
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Setup
|
|
45
|
-
|
|
46
|
-
Add the stylesheet once. It carries the baseline theme (every token the components
|
|
47
|
-
read) plus the utility classes the component templates use, so without it components
|
|
48
|
-
render unstyled.
|
|
49
|
-
|
|
50
|
-
```jsonc
|
|
51
|
-
// angular.json → projects.<app>.architect.build.options
|
|
52
|
-
"styles": [
|
|
53
|
-
"node_modules/@guildofgleks/ui/styles/index.css",
|
|
54
|
-
"src/styles.scss" // your own styles, after the baseline so they win
|
|
55
|
-
]
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
Then import a component where you need it:
|
|
59
|
-
|
|
60
|
-
```ts
|
|
61
|
-
import { Component } from '@angular/core';
|
|
62
|
-
import { ButtonComponent, SelectComponent } from '@guildofgleks/ui';
|
|
63
|
-
|
|
64
|
-
@Component({
|
|
65
|
-
selector: 'app-example',
|
|
66
|
-
imports: [ButtonComponent, SelectComponent],
|
|
67
|
-
template: `
|
|
68
|
-
<gog-select label="Region" [options]="regions" [(value)]="region" />
|
|
69
|
-
<gog-button (gogClick)="save()">Save</gog-button>
|
|
70
|
-
`,
|
|
71
|
-
})
|
|
72
|
-
export class ExampleComponent {
|
|
73
|
-
/* … */
|
|
74
|
-
}
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
Outputs are prefixed with `gog` (`gogClick`, `gogToggle`) so they never collide with
|
|
78
|
-
native DOM events. Inputs keep their natural names.
|
|
79
|
-
|
|
80
|
-
## Theming
|
|
81
|
-
|
|
82
|
-
Everything is themed through CSS custom properties, and **every value the components
|
|
83
|
-
paint with lives in `styles/theme.css`** — no component stylesheet holds a colour, font,
|
|
84
|
-
border, radius, shadow, spacing or duration of its own. There are three layers:
|
|
85
|
-
|
|
86
|
-
**1. Foundation tokens** — the palette, type scale, spacing, motion and control metrics.
|
|
87
|
-
Override these to restyle everything at once; the component tokens all derive from them,
|
|
88
|
-
so a palette swap carries through without touching anything else.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
`--gog-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
`--gog-
|
|
131
|
-
`--gog-
|
|
132
|
-
|
|
133
|
-
`--gog-
|
|
134
|
-
`--gog-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
A lightweight Angular 21 component library. No CDK, no Material — the only runtime
|
|
8
|
+
dependencies are `@angular/core`, `@angular/common` and `@angular/forms`.
|
|
9
|
+
|
|
10
|
+
**Tags:** angular, angular21, components, ui-library, design-system, signals, standalone, accessible
|
|
11
|
+
|
|
12
|
+
## Features
|
|
13
|
+
|
|
14
|
+
- 18 standalone components — accordion, button, checkbox, chip, collapsible, dialog,
|
|
15
|
+
icon, inputfield, multiselect, paginator, select, skeleton, slider, spinner, table,
|
|
16
|
+
tag, textarea, toast — plus `DialogService`, `ToastService` and `ThemeService`.
|
|
17
|
+
- Signal-based API throughout: `input()` / `output()` / `model()`, `OnPush` change
|
|
18
|
+
detection, no NgModules.
|
|
19
|
+
- No CDK, no Material — a small dependency footprint on top of `@angular/core`,
|
|
20
|
+
`@angular/common` and `@angular/forms`.
|
|
21
|
+
- Full theming through CSS custom properties: restyle any component, swap the whole
|
|
22
|
+
palette, or ship light/dark and custom themes at runtime via a `data-theme` attribute.
|
|
23
|
+
- `ControlValueAccessor` on every form control (checkbox, inputfield, select,
|
|
24
|
+
multiselect, slider, textarea) — built and tested against Reactive Forms (`formControl` /
|
|
25
|
+
`formControlName`). The library does not use `ngModel`/`FormsModule` anywhere itself,
|
|
26
|
+
and template-driven usage via `[(ngModel)]` is untested — CVA makes it likely to work,
|
|
27
|
+
but it isn't a supported or verified path.
|
|
28
|
+
- Accessible by default: keyboard navigation, ARIA attributes, WCAG AA contrast.
|
|
29
|
+
|
|
30
|
+
## Install
|
|
31
|
+
|
|
32
|
+
npm:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install @guildofgleks/ui
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
yarn:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
yarn add @guildofgleks/ui
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Setup
|
|
45
|
+
|
|
46
|
+
Add the stylesheet once. It carries the baseline theme (every token the components
|
|
47
|
+
read) plus the utility classes the component templates use, so without it components
|
|
48
|
+
render unstyled.
|
|
49
|
+
|
|
50
|
+
```jsonc
|
|
51
|
+
// angular.json → projects.<app>.architect.build.options
|
|
52
|
+
"styles": [
|
|
53
|
+
"node_modules/@guildofgleks/ui/styles/index.css",
|
|
54
|
+
"src/styles.scss" // your own styles, after the baseline so they win
|
|
55
|
+
]
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Then import a component where you need it:
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import { Component } from '@angular/core';
|
|
62
|
+
import { ButtonComponent, SelectComponent } from '@guildofgleks/ui';
|
|
63
|
+
|
|
64
|
+
@Component({
|
|
65
|
+
selector: 'app-example',
|
|
66
|
+
imports: [ButtonComponent, SelectComponent],
|
|
67
|
+
template: `
|
|
68
|
+
<gog-select label="Region" [options]="regions" [(value)]="region" />
|
|
69
|
+
<gog-button (gogClick)="save()">Save</gog-button>
|
|
70
|
+
`,
|
|
71
|
+
})
|
|
72
|
+
export class ExampleComponent {
|
|
73
|
+
/* … */
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Outputs are prefixed with `gog` (`gogClick`, `gogToggle`) so they never collide with
|
|
78
|
+
native DOM events. Inputs keep their natural names.
|
|
79
|
+
|
|
80
|
+
## Theming
|
|
81
|
+
|
|
82
|
+
Everything is themed through CSS custom properties, and **every value the components
|
|
83
|
+
paint with lives in `styles/theme.css`** — no component stylesheet holds a colour, font,
|
|
84
|
+
border, radius, shadow, spacing or duration of its own. There are three layers:
|
|
85
|
+
|
|
86
|
+
**1. Foundation tokens** — the palette, type scale, spacing, motion and control metrics.
|
|
87
|
+
Override these to restyle everything at once; the component tokens all derive from them,
|
|
88
|
+
so a palette swap carries through without touching anything else.
|
|
89
|
+
|
|
90
|
+
<!-- tokens:start -->
|
|
91
|
+
<!-- GENERATED by scripts/generate-tokens.mjs from src/styles/theme.css — do not edit by hand. -->
|
|
92
|
+
|
|
93
|
+
| Group | Tokens |
|
|
94
|
+
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
95
|
+
| Typography | `--gog-font-body`, `--gog-font-heading`, `--gog-font-mono`, `--gog-text-2xl`, `--gog-text-3xl`, `--gog-text-lg`, `--gog-text-md`, `--gog-text-sm`, `--gog-text-xl`, `--gog-text-xs` |
|
|
96
|
+
| Spacing & geometry | `--gog-panel-border-style`, `--gog-panel-border-width`, `--gog-radius`, `--gog-space-2xl`, `--gog-space-lg`, `--gog-space-md`, `--gog-space-sm`, `--gog-space-xs` |
|
|
97
|
+
| Motion | `--gog-duration-base`, `--gog-duration-fast`, `--gog-duration-slow`, `--gog-easing` |
|
|
98
|
+
| Focus & disabled | `--gog-disabled-opacity`, `--gog-focus-ring-offset`, `--gog-focus-ring-width` |
|
|
99
|
+
| Control metrics | `--gog-control-border-style`, `--gog-control-border-width`, `--gog-control-checkbox-box-size-lg`, `--gog-control-checkbox-box-size-md`, `--gog-control-checkbox-box-size-slg`, `--gog-control-checkbox-box-size-sm`, `--gog-control-checkbox-box-size-xsm`, `--gog-control-checkbox-icon-size-lg`, `--gog-control-checkbox-icon-size-md`, `--gog-control-checkbox-icon-size-slg`, `--gog-control-checkbox-icon-size-sm`, `--gog-control-checkbox-icon-size-xsm`, `--gog-control-checkbox-label-size-lg`, `--gog-control-checkbox-label-size-md`, `--gog-control-checkbox-label-size-slg`, `--gog-control-checkbox-label-size-sm`, `--gog-control-checkbox-label-size-xsm`, `--gog-control-checkbox-padding`, `--gog-control-icon-offset`, `--gog-control-padding-x`, `--gog-control-padding-y` |
|
|
100
|
+
| Button sizing | `--gog-btn-lg-font-size`, `--gog-btn-lg-padding`, `--gog-btn-md-font-size`, `--gog-btn-md-padding`, `--gog-btn-slg-font-size`, `--gog-btn-slg-padding`, `--gog-btn-sm-font-size`, `--gog-btn-sm-padding`, `--gog-btn-xsm-font-size`, `--gog-btn-xsm-padding` |
|
|
101
|
+
| Field sizing (input / select / multiselect share one scale) | `--gog-field-lg-icon-inset`, `--gog-field-lg-icon-offset`, `--gog-field-lg-padding-x`, `--gog-field-lg-padding-y`, `--gog-field-md-icon-inset`, `--gog-field-slg-font-size`, `--gog-field-slg-icon-inset`, `--gog-field-slg-icon-offset`, `--gog-field-slg-padding-x`, `--gog-field-slg-padding-y`, `--gog-field-sm-icon-inset`, `--gog-field-sm-icon-offset`, `--gog-field-sm-padding-x`, `--gog-field-sm-padding-y`, `--gog-field-xsm-icon-inset`, `--gog-field-xsm-icon-offset`, `--gog-field-xsm-padding-x`, `--gog-field-xsm-padding-y` |
|
|
102
|
+
| Float label geometry (input / textarea / select / multiselect) | `--gog-field-float-label-in-top`, `--gog-field-float-label-over-gap`, `--gog-field-float-label-over-reserve`, `--gog-field-float-label-reserve` |
|
|
103
|
+
| Icon & spinner | `--gog-icon-size`, `--gog-icon-stroke-width`, `--gog-spinner-rune-size`, `--gog-spinner-size-lg`, `--gog-spinner-size-md`, `--gog-spinner-size-slg`, `--gog-spinner-size-sm`, `--gog-spinner-size-xsm` |
|
|
104
|
+
| Toast stack | `--gog-toast-enter-distance`, `--gog-toast-gap`, `--gog-toast-max-width`, `--gog-toast-min-width`, `--gog-toast-shadow`, `--gog-toast-stack-padding`, `--gog-toast-z-index` |
|
|
105
|
+
| Overlay stacking | `--gog-dropdown-z`, `--gog-spinner-overlay-z` |
|
|
106
|
+
| Light palette (also the no-data-theme default) | `--gog-accent-bright`, `--gog-accent-color`, `--gog-accent-dim`, `--gog-accent-pale`, `--gog-accent-text-color`, `--gog-background-color`, `--gog-border-color`, `--gog-danger-color`, `--gog-hover-color`, `--gog-info-color`, `--gog-muted-text-color`, `--gog-panel-shadow`, `--gog-primary-color`, `--gog-secondary-color`, `--gog-spinner-overlay-bg`, `--gog-success-color`, `--gog-surface-color`, `--gog-text-color`, `--gog-warning-color` |
|
|
107
|
+
| Derived foundation tokens | `--gog-field-lg-font-size`, `--gog-field-md-font-size`, `--gog-field-md-icon-offset`, `--gog-field-md-padding-x`, `--gog-field-md-padding-y`, `--gog-field-sm-font-size`, `--gog-field-xsm-font-size`, `--gog-panel-radius` |
|
|
108
|
+
| Accordion | `--gog-accordion-accent-color`, `--gog-accordion-body-bg`, `--gog-accordion-body-color`, `--gog-accordion-body-font-family`, `--gog-accordion-body-lift`, `--gog-accordion-body-line-height`, `--gog-accordion-body-radius`, `--gog-accordion-body-transition-duration`, `--gog-accordion-border-color`, `--gog-accordion-border-style`, `--gog-accordion-border-width`, `--gog-accordion-chevron-transition-duration`, `--gog-accordion-disabled-opacity`, `--gog-accordion-focus-ring-width`, `--gog-accordion-font-family`, `--gog-accordion-header-bg`, `--gog-accordion-header-gap`, `--gog-accordion-header-text-transform`, `--gog-accordion-hover-bg`, `--gog-accordion-hover-ring`, `--gog-accordion-lg-body-font-size`, `--gog-accordion-lg-body-line-height`, `--gog-accordion-lg-body-padding-bottom`, `--gog-accordion-lg-body-padding-top`, `--gog-accordion-lg-chevron-font-size`, `--gog-accordion-lg-chevron-size`, `--gog-accordion-lg-content-gap`, `--gog-accordion-lg-font-size`, `--gog-accordion-lg-letter-spacing`, `--gog-accordion-lg-padding-x`, `--gog-accordion-lg-padding-y`, `--gog-accordion-md-body-font-size`, `--gog-accordion-md-body-line-height`, `--gog-accordion-md-body-padding-bottom`, `--gog-accordion-md-body-padding-top`, `--gog-accordion-md-chevron-font-size`, `--gog-accordion-md-chevron-size`, `--gog-accordion-md-content-gap`, `--gog-accordion-md-font-size`, `--gog-accordion-md-letter-spacing`, `--gog-accordion-md-padding-x`, `--gog-accordion-md-padding-y`, `--gog-accordion-radius`, `--gog-accordion-slg-body-font-size`, `--gog-accordion-slg-body-line-height`, `--gog-accordion-slg-body-padding-bottom`, `--gog-accordion-slg-body-padding-top`, `--gog-accordion-slg-chevron-font-size`, `--gog-accordion-slg-chevron-size`, `--gog-accordion-slg-content-gap`, `--gog-accordion-slg-font-size`, `--gog-accordion-slg-letter-spacing`, `--gog-accordion-slg-padding-x`, `--gog-accordion-slg-padding-y`, `--gog-accordion-sm-body-font-size`, `--gog-accordion-sm-body-line-height`, `--gog-accordion-sm-body-padding-bottom`, `--gog-accordion-sm-body-padding-top`, `--gog-accordion-sm-chevron-font-size`, `--gog-accordion-sm-chevron-size`, `--gog-accordion-sm-content-gap`, `--gog-accordion-sm-font-size`, `--gog-accordion-sm-letter-spacing`, `--gog-accordion-sm-padding-x`, `--gog-accordion-sm-padding-y`, `--gog-accordion-text-color`, `--gog-accordion-transition-duration`, `--gog-accordion-xsm-body-font-size`, `--gog-accordion-xsm-body-line-height`, `--gog-accordion-xsm-body-padding-bottom`, `--gog-accordion-xsm-body-padding-top`, `--gog-accordion-xsm-chevron-font-size`, `--gog-accordion-xsm-chevron-size`, `--gog-accordion-xsm-content-gap`, `--gog-accordion-xsm-font-size`, `--gog-accordion-xsm-letter-spacing`, `--gog-accordion-xsm-padding-x`, `--gog-accordion-xsm-padding-y` |
|
|
109
|
+
| Collapsible | `--gog-collapsible-disabled-opacity`, `--gog-collapsible-max-height`, `--gog-collapsible-transition-duration` |
|
|
110
|
+
| 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` |
|
|
111
|
+
| 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` |
|
|
112
|
+
| 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-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` |
|
|
113
|
+
| 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` |
|
|
114
|
+
| 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` |
|
|
115
|
+
| 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` |
|
|
116
|
+
| 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` |
|
|
117
|
+
| 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` |
|
|
118
|
+
| 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` |
|
|
119
|
+
| 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` |
|
|
120
|
+
| 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` |
|
|
121
|
+
| Icon | `--gog-icon-fallback-size` |
|
|
122
|
+
| 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-transition-duration`, `--gog-textarea-clear-icon-ratio` |
|
|
123
|
+
| Multiselect | `--gog-ms-actions-gap`, `--gog-ms-actions-inset`, `--gog-ms-arrow-icon-ratio`, `--gog-ms-arrow-transition-duration`, `--gog-ms-border-color`, `--gog-ms-checkbox-bg`, `--gog-ms-checkbox-border`, `--gog-ms-checkbox-checked-bg`, `--gog-ms-checkbox-checked-color`, `--gog-ms-clear-icon-ratio`, `--gog-ms-clear-radius`, `--gog-ms-controls-gap`, `--gog-ms-controls-padding`, `--gog-ms-disabled-opacity`, `--gog-ms-error-color`, `--gog-ms-error-font-size`, `--gog-ms-error-offset`, `--gog-ms-field-bg`, `--gog-ms-field-border`, `--gog-ms-field-border-style`, `--gog-ms-field-border-width`, `--gog-ms-field-color`, `--gog-ms-filter-border-color`, `--gog-ms-filter-border-style`, `--gog-ms-filter-border-width`, `--gog-ms-filter-empty-color`, `--gog-ms-filter-empty-padding`, `--gog-ms-filter-input-bg`, `--gog-ms-filter-input-border`, `--gog-ms-filter-input-color`, `--gog-ms-filter-input-padding-x`, `--gog-ms-filter-input-padding-y`, `--gog-ms-filter-input-radius`, `--gog-ms-filter-padding`, `--gog-ms-float-label-in-top`, `--gog-ms-float-label-over-gap`, `--gog-ms-float-label-over-reserve`, `--gog-ms-float-label-reserve`, `--gog-ms-focus-border`, `--gog-ms-focus-glow`, `--gog-ms-focus-ring`, `--gog-ms-focus-ring-offset`, `--gog-ms-focus-ring-width`, `--gog-ms-font-family`, `--gog-ms-gap`, `--gog-ms-label-color`, `--gog-ms-label-font-family`, `--gog-ms-label-font-size`, `--gog-ms-label-letter-spacing`, `--gog-ms-label-text-transform`, `--gog-ms-mark-icon-ratio`, `--gog-ms-mark-size-ratio`, `--gog-ms-min-width`, `--gog-ms-option-color`, `--gog-ms-option-disabled-opacity`, `--gog-ms-option-gap`, `--gog-ms-option-gap-inline`, `--gog-ms-option-height`, `--gog-ms-option-hover-bg`, `--gog-ms-option-radius`, `--gog-ms-option-transition-duration`, `--gog-ms-options-padding`, `--gog-ms-overflow-color`, `--gog-ms-overflow-font-size`, `--gog-ms-overflow-gap`, `--gog-ms-panel-bg`, `--gog-ms-panel-border`, `--gog-ms-panel-max-height`, `--gog-ms-panel-max-width`, `--gog-ms-panel-offset`, `--gog-ms-panel-shadow`, `--gog-ms-placeholder-color`, `--gog-ms-radius`, `--gog-ms-transition-duration`, `--gog-ms-value-color`, `--gog-multiselect-actions-gap`, `--gog-multiselect-actions-inset`, `--gog-multiselect-arrow-icon-ratio`, `--gog-multiselect-arrow-transition-duration`, `--gog-multiselect-border-color`, `--gog-multiselect-checkbox-bg`, `--gog-multiselect-checkbox-border`, `--gog-multiselect-checkbox-checked-bg`, `--gog-multiselect-checkbox-checked-color`, `--gog-multiselect-clear-icon-ratio`, `--gog-multiselect-clear-radius`, `--gog-multiselect-controls-gap`, `--gog-multiselect-controls-padding`, `--gog-multiselect-disabled-opacity`, `--gog-multiselect-error-color`, `--gog-multiselect-error-font-size`, `--gog-multiselect-error-offset`, `--gog-multiselect-field-bg`, `--gog-multiselect-field-border`, `--gog-multiselect-field-border-style`, `--gog-multiselect-field-border-width`, `--gog-multiselect-field-color`, `--gog-multiselect-filter-border-color`, `--gog-multiselect-filter-border-style`, `--gog-multiselect-filter-border-width`, `--gog-multiselect-filter-empty-color`, `--gog-multiselect-filter-empty-padding`, `--gog-multiselect-filter-input-bg`, `--gog-multiselect-filter-input-border`, `--gog-multiselect-filter-input-color`, `--gog-multiselect-filter-input-padding-x`, `--gog-multiselect-filter-input-padding-y`, `--gog-multiselect-filter-input-radius`, `--gog-multiselect-filter-padding`, `--gog-multiselect-float-label-in-top`, `--gog-multiselect-float-label-over-gap`, `--gog-multiselect-float-label-over-reserve`, `--gog-multiselect-float-label-reserve`, `--gog-multiselect-focus-border`, `--gog-multiselect-focus-glow`, `--gog-multiselect-focus-ring`, `--gog-multiselect-focus-ring-offset`, `--gog-multiselect-focus-ring-width`, `--gog-multiselect-font-family`, `--gog-multiselect-gap`, `--gog-multiselect-label-color`, `--gog-multiselect-label-font-family`, `--gog-multiselect-label-font-size`, `--gog-multiselect-label-letter-spacing`, `--gog-multiselect-label-text-transform`, `--gog-multiselect-mark-icon-ratio`, `--gog-multiselect-mark-size-ratio`, `--gog-multiselect-min-width`, `--gog-multiselect-option-color`, `--gog-multiselect-option-disabled-opacity`, `--gog-multiselect-option-gap`, `--gog-multiselect-option-gap-inline`, `--gog-multiselect-option-height`, `--gog-multiselect-option-hover-bg`, `--gog-multiselect-option-radius`, `--gog-multiselect-option-transition-duration`, `--gog-multiselect-options-padding`, `--gog-multiselect-overflow-color`, `--gog-multiselect-overflow-font-size`, `--gog-multiselect-overflow-gap`, `--gog-multiselect-panel-bg`, `--gog-multiselect-panel-border`, `--gog-multiselect-panel-max-height`, `--gog-multiselect-panel-max-width`, `--gog-multiselect-panel-offset`, `--gog-multiselect-panel-shadow`, `--gog-multiselect-placeholder-color`, `--gog-multiselect-radius`, `--gog-multiselect-transition-duration`, `--gog-multiselect-value-color` |
|
|
124
|
+
| Paginator | `--gog-paginator-ellipsis-color`, `--gog-paginator-ellipsis-font-family`, `--gog-paginator-ellipsis-font-size`, `--gog-paginator-ellipsis-min-width`, `--gog-paginator-gap` |
|
|
125
|
+
| Progressbar | `--gog-progressbar-accent-bg`, `--gog-progressbar-accent-buffer-bg`, `--gog-progressbar-danger-bg`, `--gog-progressbar-danger-buffer-bg`, `--gog-progressbar-indeterminate-duration`, `--gog-progressbar-indeterminate-easing`, `--gog-progressbar-info-bg`, `--gog-progressbar-info-buffer-bg`, `--gog-progressbar-lg-height`, `--gog-progressbar-md-height`, `--gog-progressbar-radius`, `--gog-progressbar-slg-height`, `--gog-progressbar-sm-height`, `--gog-progressbar-stripe-color`, `--gog-progressbar-stripe-size`, `--gog-progressbar-success-bg`, `--gog-progressbar-success-buffer-bg`, `--gog-progressbar-track-base-bg`, `--gog-progressbar-transition-duration`, `--gog-progressbar-value-color`, `--gog-progressbar-value-font-family`, `--gog-progressbar-value-font-size`, `--gog-progressbar-value-gap`, `--gog-progressbar-value-min-width`, `--gog-progressbar-warning-bg`, `--gog-progressbar-warning-buffer-bg`, `--gog-progressbar-xsm-height` |
|
|
126
|
+
| Scroll | `--gog-scroll-corner-bg`, `--gog-scroll-fade-duration`, `--gog-scroll-focus-ring`, `--gog-scroll-focus-ring-width`, `--gog-scroll-normal-thumb-min-size`, `--gog-scroll-normal-track-width`, `--gog-scroll-thin-thumb-min-size`, `--gog-scroll-thin-track-width`, `--gog-scroll-thumb-active-bg`, `--gog-scroll-thumb-bg`, `--gog-scroll-thumb-hover-bg`, `--gog-scroll-thumb-inset`, `--gog-scroll-thumb-radius`, `--gog-scroll-track-bg`, `--gog-scroll-track-radius` |
|
|
127
|
+
| Select | `--gog-select-chevron-color`, `--gog-select-chevron-icon-ratio`, `--gog-select-chevron-inset`, `--gog-select-clear-color`, `--gog-select-clear-gap`, `--gog-select-clear-hover-color`, `--gog-select-clear-icon-ratio`, `--gog-select-clear-radius`, `--gog-select-control-gap`, `--gog-select-disabled-opacity`, `--gog-select-error-color`, `--gog-select-error-font-size`, `--gog-select-field-bg`, `--gog-select-field-border`, `--gog-select-field-border-style`, `--gog-select-field-border-width`, `--gog-select-field-color`, `--gog-select-filter-border-color`, `--gog-select-filter-border-style`, `--gog-select-filter-border-width`, `--gog-select-filter-empty-color`, `--gog-select-filter-empty-padding`, `--gog-select-filter-input-bg`, `--gog-select-filter-input-border`, `--gog-select-filter-input-color`, `--gog-select-filter-input-padding-x`, `--gog-select-filter-input-padding-y`, `--gog-select-filter-input-radius`, `--gog-select-filter-padding`, `--gog-select-float-label-in-top`, `--gog-select-float-label-over-gap`, `--gog-select-float-label-over-reserve`, `--gog-select-float-label-reserve`, `--gog-select-focus-border`, `--gog-select-focus-glow`, `--gog-select-focus-ring`, `--gog-select-focus-ring-offset`, `--gog-select-focus-ring-width`, `--gog-select-font-family`, `--gog-select-gap`, `--gog-select-label-color`, `--gog-select-label-font-family`, `--gog-select-label-font-size`, `--gog-select-label-letter-spacing`, `--gog-select-label-text-transform`, `--gog-select-mark-icon-ratio`, `--gog-select-mark-size-ratio`, `--gog-select-min-width`, `--gog-select-option-color`, `--gog-select-option-disabled-opacity`, `--gog-select-option-gap`, `--gog-select-option-height`, `--gog-select-option-hover-bg`, `--gog-select-option-selected-color`, `--gog-select-option-transition-duration`, `--gog-select-panel-bg`, `--gog-select-panel-max-height`, `--gog-select-panel-max-width`, `--gog-select-panel-offset`, `--gog-select-panel-shadow`, `--gog-select-placeholder-color`, `--gog-select-radius`, `--gog-select-transition-duration` |
|
|
128
|
+
| Skeleton | `--gog-skeleton-base`, `--gog-skeleton-circle-size-lg`, `--gog-skeleton-circle-size-md`, `--gog-skeleton-circle-size-slg`, `--gog-skeleton-circle-size-sm`, `--gog-skeleton-circle-size-xsm`, `--gog-skeleton-line-gap`, `--gog-skeleton-line-height-lg`, `--gog-skeleton-line-height-md`, `--gog-skeleton-line-height-slg`, `--gog-skeleton-line-height-sm`, `--gog-skeleton-line-height-xsm`, `--gog-skeleton-line-radius`, `--gog-skeleton-pulse-duration`, `--gog-skeleton-pulse-min-opacity`, `--gog-skeleton-radius`, `--gog-skeleton-rect-height-lg`, `--gog-skeleton-rect-height-md`, `--gog-skeleton-rect-height-slg`, `--gog-skeleton-rect-height-sm`, `--gog-skeleton-rect-height-xsm`, `--gog-skeleton-shine`, `--gog-skeleton-short-line-width`, `--gog-skeleton-square-radius`, `--gog-skeleton-wave-duration` |
|
|
129
|
+
| Slider | `--gog-slider-auto-width`, `--gog-slider-disabled-opacity`, `--gog-slider-error-color`, `--gog-slider-error-font-family`, `--gog-slider-error-font-size`, `--gog-slider-fill-bg`, `--gog-slider-focus-ring`, `--gog-slider-focus-ring-width`, `--gog-slider-gap`, `--gog-slider-label-color`, `--gog-slider-label-font-family`, `--gog-slider-label-font-size`, `--gog-slider-label-letter-spacing`, `--gog-slider-label-text-transform`, `--gog-slider-range-color`, `--gog-slider-range-font-size`, `--gog-slider-thumb-bg`, `--gog-slider-thumb-border`, `--gog-slider-thumb-border-width`, `--gog-slider-thumb-glow-size`, `--gog-slider-thumb-radius`, `--gog-slider-thumb-shadow`, `--gog-slider-thumb-size`, `--gog-slider-track-area-height`, `--gog-slider-track-bg`, `--gog-slider-track-border-color`, `--gog-slider-track-border-style`, `--gog-slider-track-border-width`, `--gog-slider-track-height`, `--gog-slider-track-radius`, `--gog-slider-value-color`, `--gog-slider-value-font-family`, `--gog-slider-value-font-size`, `--gog-slider-value-min-width`, `--gog-slider-vertical-length` |
|
|
130
|
+
| Spinner | `--gog-spinner-arc-inner-color`, `--gog-spinner-arc-inner-dash`, `--gog-spinner-arc-inner-glow`, `--gog-spinner-arc-inner-opacity`, `--gog-spinner-arc-inner-pulse-opacity`, `--gog-spinner-arc-inner-stroke-compact`, `--gog-spinner-arc-outer-color`, `--gog-spinner-arc-outer-dash`, `--gog-spinner-arc-outer-glow`, `--gog-spinner-arc-outer-pulse-opacity`, `--gog-spinner-diamond-color`, `--gog-spinner-diamond-glow`, `--gog-spinner-diamond-opacity`, `--gog-spinner-glow-color`, `--gog-spinner-overlay-blur`, `--gog-spinner-overlay-fade-duration`, `--gog-spinner-pulse-duration`, `--gog-spinner-ring-duration`, `--gog-spinner-ring-glow`, `--gog-spinner-ring-padding`, `--gog-spinner-rune-color`, `--gog-spinner-rune-font-family`, `--gog-spinner-rune-glow`, `--gog-spinner-rune-pulse-opacity`, `--gog-spinner-spin-duration`, `--gog-spinner-spin-slow-duration`, `--gog-spinner-ticks-duration`, `--gog-spinner-track-color`, `--gog-spinner-track-opacity` |
|
|
131
|
+
| Table | `--gog-table-accent-bright`, `--gog-table-accent-color`, `--gog-table-border-color`, `--gog-table-border-style`, `--gog-table-border-width`, `--gog-table-empty-font-size`, `--gog-table-empty-padding`, `--gog-table-focus-ring`, `--gog-table-focus-ring-width`, `--gog-table-font-family`, `--gog-table-footer-gap`, `--gog-table-footer-min-height`, `--gog-table-gap`, `--gog-table-header-font-family`, `--gog-table-header-letter-spacing`, `--gog-table-header-text-transform`, `--gog-table-hover-bg`, `--gog-table-lg-padding-v`, `--gog-table-lg-td-font-size`, `--gog-table-lg-th-font-size`, `--gog-table-loading-opacity`, `--gog-table-loading-padding`, `--gog-table-md-padding-v`, `--gog-table-md-td-font-size`, `--gog-table-md-th-font-size`, `--gog-table-muted-color`, `--gog-table-num-col-width`, `--gog-table-num-font-size`, `--gog-table-numeric-font-family`, `--gog-table-padding-h`, `--gog-table-row-border-width`, `--gog-table-row-transition-duration`, `--gog-table-slg-padding-v`, `--gog-table-slg-td-font-size`, `--gog-table-slg-th-font-size`, `--gog-table-sm-padding-v`, `--gog-table-sm-td-font-size`, `--gog-table-sm-th-font-size`, `--gog-table-sort-icon-opacity`, `--gog-table-sort-icon-size`, `--gog-table-sort-icon-width`, `--gog-table-surface`, `--gog-table-text-color`, `--gog-table-th-inner-gap`, `--gog-table-total-font-size`, `--gog-table-total-letter-spacing`, `--gog-table-total-text-transform`, `--gog-table-xsm-padding-v`, `--gog-table-xsm-td-font-size`, `--gog-table-xsm-th-font-size` |
|
|
132
|
+
| Tabs | `--gog-tabs-active-color`, `--gog-tabs-disabled-opacity`, `--gog-tabs-focus-ring-color`, `--gog-tabs-focus-ring-offset`, `--gog-tabs-focus-ring-width`, `--gog-tabs-font-family`, `--gog-tabs-font-weight`, `--gog-tabs-gap`, `--gog-tabs-header-border-color`, `--gog-tabs-header-border-style`, `--gog-tabs-header-border-width`, `--gog-tabs-hover-color`, `--gog-tabs-icon-size`, `--gog-tabs-indicator-color`, `--gog-tabs-indicator-radius`, `--gog-tabs-indicator-thickness`, `--gog-tabs-letter-spacing`, `--gog-tabs-lg-font-size`, `--gog-tabs-lg-padding`, `--gog-tabs-line-height`, `--gog-tabs-md-font-size`, `--gog-tabs-md-padding`, `--gog-tabs-panel-color`, `--gog-tabs-panel-padding`, `--gog-tabs-rest-bg`, `--gog-tabs-rest-color`, `--gog-tabs-slg-font-size`, `--gog-tabs-slg-padding`, `--gog-tabs-sm-font-size`, `--gog-tabs-sm-padding`, `--gog-tabs-tab-gap`, `--gog-tabs-text-transform`, `--gog-tabs-transition-duration`, `--gog-tabs-xsm-font-size`, `--gog-tabs-xsm-padding` |
|
|
133
|
+
| Tag | `--gog-tag-bg-base`, `--gog-tag-bg-mix`, `--gog-tag-border-style`, `--gog-tag-border-width`, `--gog-tag-color-base`, `--gog-tag-color-mix`, `--gog-tag-danger-color`, `--gog-tag-default-color`, `--gog-tag-font-family`, `--gog-tag-font-weight`, `--gog-tag-info-color`, `--gog-tag-inner-border-width`, `--gog-tag-lg-font-size`, `--gog-tag-lg-gap`, `--gog-tag-lg-icon-size`, `--gog-tag-lg-padding-block`, `--gog-tag-lg-padding-inline`, `--gog-tag-line-height`, `--gog-tag-md-font-size`, `--gog-tag-md-gap`, `--gog-tag-md-icon-size`, `--gog-tag-md-padding-block`, `--gog-tag-md-padding-inline`, `--gog-tag-pill-radius`, `--gog-tag-radius`, `--gog-tag-slg-font-size`, `--gog-tag-slg-gap`, `--gog-tag-slg-icon-size`, `--gog-tag-slg-padding-block`, `--gog-tag-slg-padding-inline`, `--gog-tag-sm-font-size`, `--gog-tag-sm-gap`, `--gog-tag-sm-icon-size`, `--gog-tag-sm-padding-block`, `--gog-tag-sm-padding-inline`, `--gog-tag-success-color`, `--gog-tag-warning-color`, `--gog-tag-xsm-font-size`, `--gog-tag-xsm-gap`, `--gog-tag-xsm-icon-size`, `--gog-tag-xsm-padding-block`, `--gog-tag-xsm-padding-inline` |
|
|
134
|
+
| Toast | `--gog-toast-accent-width`, `--gog-toast-action-font-size`, `--gog-toast-action-padding`, `--gog-toast-actions-gap`, `--gog-toast-base-z`, `--gog-toast-bg`, `--gog-toast-border`, `--gog-toast-close-font-size`, `--gog-toast-close-padding`, `--gog-toast-color`, `--gog-toast-content-gap`, `--gog-toast-error-color`, `--gog-toast-font-family`, `--gog-toast-icon-color`, `--gog-toast-icon-line-height`, `--gog-toast-icon-size`, `--gog-toast-info-color`, `--gog-toast-main-gap`, `--gog-toast-message-font-size`, `--gog-toast-message-line-height`, `--gog-toast-padding`, `--gog-toast-progress-height`, `--gog-toast-progress-opacity`, `--gog-toast-radius`, `--gog-toast-stack-expanded-gap`, `--gog-toast-stack-max-depth`, `--gog-toast-stack-min-opacity`, `--gog-toast-stack-opacity-step`, `--gog-toast-stack-peek`, `--gog-toast-stack-scale-step`, `--gog-toast-success-color`, `--gog-toast-transition-duration`, `--gog-toast-warning-color` |
|
|
135
|
+
| Toggle | `--gog-toggle-border-color`, `--gog-toggle-border-style`, `--gog-toggle-border-width`, `--gog-toggle-disabled-opacity`, `--gog-toggle-focus-ring-color`, `--gog-toggle-focus-ring-offset`, `--gog-toggle-focus-ring-width`, `--gog-toggle-font-family`, `--gog-toggle-gap`, `--gog-toggle-label-color`, `--gog-toggle-label-line-height`, `--gog-toggle-lg-label-size`, `--gog-toggle-lg-state-font-size`, `--gog-toggle-lg-thumb-size`, `--gog-toggle-lg-track-height`, `--gog-toggle-lg-track-width`, `--gog-toggle-md-label-size`, `--gog-toggle-md-state-font-size`, `--gog-toggle-md-thumb-size`, `--gog-toggle-md-track-height`, `--gog-toggle-md-track-width`, `--gog-toggle-on-border-color`, `--gog-toggle-radius`, `--gog-toggle-slg-label-size`, `--gog-toggle-slg-state-font-size`, `--gog-toggle-slg-thumb-size`, `--gog-toggle-slg-track-height`, `--gog-toggle-slg-track-width`, `--gog-toggle-sm-label-size`, `--gog-toggle-sm-state-font-size`, `--gog-toggle-sm-thumb-size`, `--gog-toggle-sm-track-height`, `--gog-toggle-sm-track-width`, `--gog-toggle-state-color`, `--gog-toggle-state-font-weight`, `--gog-toggle-state-letter-spacing`, `--gog-toggle-state-offset`, `--gog-toggle-state-padding-inline`, `--gog-toggle-state-thumb-gap`, `--gog-toggle-thumb-inset`, `--gog-toggle-thumb-off-bg`, `--gog-toggle-thumb-on-bg`, `--gog-toggle-thumb-shadow`, `--gog-toggle-track-off-bg`, `--gog-toggle-track-on-bg`, `--gog-toggle-transition-duration`, `--gog-toggle-xsm-label-size`, `--gog-toggle-xsm-state-font-size`, `--gog-toggle-xsm-thumb-size`, `--gog-toggle-xsm-track-height`, `--gog-toggle-xsm-track-width` |
|
|
136
|
+
| Tooltip | `--gog-tooltip-arrow-size`, `--gog-tooltip-bg`, `--gog-tooltip-border-color`, `--gog-tooltip-border-style`, `--gog-tooltip-border-width`, `--gog-tooltip-color`, `--gog-tooltip-font-family`, `--gog-tooltip-font-size`, `--gog-tooltip-gap`, `--gog-tooltip-line-height`, `--gog-tooltip-max-height`, `--gog-tooltip-max-width`, `--gog-tooltip-padding`, `--gog-tooltip-radius`, `--gog-tooltip-shadow`, `--gog-tooltip-transition-duration`, `--gog-tooltip-z` |
|
|
137
|
+
|
|
138
|
+
<!-- tokens:end -->
|
|
139
|
+
|
|
140
|
+
**2. Component tokens** — `--gog-<block>-*`, one block per component in `theme.css`, for
|
|
141
|
+
restyling a single component theme-wide. They cover every painted property, including
|
|
142
|
+
per-variant and per-size values (`--gog-btn-ghost-hover-bg`, `--gog-tag-lg-padding-block`,
|
|
143
|
+
`--gog-accordion-sm-chevron-size`, `--gog-skeleton-shine`, `--gog-paginator-gap`, …), plus
|
|
144
|
+
each component's font family, so a theme can decide that e.g. buttons use the body face:
|
|
145
|
+
|
|
146
|
+
```css
|
|
147
|
+
:root[data-theme='mine'] {
|
|
148
|
+
--gog-btn-font-family: var(--gog-font-body);
|
|
149
|
+
--gog-btn-font-weight: 600;
|
|
150
|
+
--gog-btn-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
|
|
151
|
+
--gog-table-hover-bg: var(--gog-hover-color);
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
**3. Instance tokens** — a small set left deliberately _undeclared_ so that setting them
|
|
156
|
+
anywhere always wins over the variant/size classes. This is the per-instance escape
|
|
157
|
+
hatch:
|
|
158
|
+
|
|
159
|
+
```css
|
|
160
|
+
.my-form gog-button {
|
|
161
|
+
--gog-btn-bg: rebeccapurple; /* beats .gog-btn--primary, unlike a declared token */
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
They are `--gog-btn-{bg,color,border,shadow,hover-bg,hover-color,hover-shadow,padding,font-size,spinner-color}`,
|
|
166
|
+
`--gog-tag-{accent,bg,border,color,font-size,gap,padding-block,padding-inline,icon-size}`,
|
|
167
|
+
`--gog-chip-{font-size,gap,padding-block,padding-inline,avatar-size,icon-size,remove-size}`,
|
|
168
|
+
the per-size field hooks (`--gog-input-padding-y`, `--gog-select-control-font`,
|
|
169
|
+
`--gog-ms-font-size`, `--gog-table-td-padding-v`, `--gog-accordion-padding-y`, …),
|
|
170
|
+
`--gog-spinner-color`, and `--gog-{input,select,ms}-float-label-on-bg` (the patch masking the
|
|
171
|
+
border behind an `'on'` label).
|
|
172
|
+
|
|
173
|
+
The full list is the `INSTANCE_TOKENS` set in `scripts/check-tokens.mjs`, which is verified
|
|
174
|
+
against the stylesheets on every CI run — an instance token that gets declared anywhere, or
|
|
175
|
+
stops being read, fails the build. That check also enforces the other half of the contract:
|
|
176
|
+
**no component stylesheet carries a default in a `var()` fallback**, so every value a
|
|
177
|
+
component paints with really is discoverable in `theme.css`.
|
|
178
|
+
|
|
179
|
+
The float label's _geometry_ is not instance-layer — it is themeable per component
|
|
180
|
+
(`--gog-{input,select,ms}-float-label-{reserve,in-top,over-gap,over-reserve}`), and all three
|
|
181
|
+
derive from the shared `--gog-field-float-label-*` scale above, so one declaration retunes
|
|
182
|
+
every field at once while a single control can still be overridden on its own.
|
|
183
|
+
|
|
184
|
+
### Light and dark
|
|
185
|
+
|
|
186
|
+
The theme is selected with a `data-theme` attribute on `:root`, and `ThemeService`
|
|
187
|
+
manages it:
|
|
188
|
+
|
|
189
|
+
```ts
|
|
190
|
+
private readonly theme = inject(ThemeService);
|
|
191
|
+
this.theme.toggleTheme(); // light ⇄ dark
|
|
192
|
+
this.theme.setTheme('cyberpunk'); // any custom theme name
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
To add a theme, copy a palette block from `styles/theme.css` and change the attribute
|
|
196
|
+
value. A theme only needs to declare what it actually changes — the component tokens are
|
|
197
|
+
re-derived from whatever palette is in scope, so a swapped `--gog-accent-color` reaches every
|
|
198
|
+
component without listing any of them:
|
|
199
|
+
|
|
200
|
+
```css
|
|
201
|
+
:root[data-theme='cyberpunk'],
|
|
202
|
+
[data-theme='cyberpunk'] {
|
|
203
|
+
color-scheme: dark;
|
|
204
|
+
--gog-background-color: #050816;
|
|
205
|
+
--gog-accent-color: #ff4edb;
|
|
206
|
+
--gog-radius: 22px;
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
The second selector is what lets a theme apply to a _subtree_ rather than the whole page
|
|
211
|
+
— put `data-theme="cyberpunk"` on any element and everything inside it re-derives from
|
|
212
|
+
that palette, so one page can show several themes side by side (see the showcase's Theme
|
|
213
|
+
lab). That works because `theme.css` re-declares its derived layer on `:root, [data-theme]`:
|
|
214
|
+
a custom property's `var()` references are substituted where the property is _declared_,
|
|
215
|
+
so a derived token declared only on `:root` would freeze to the root palette.
|
|
216
|
+
|
|
217
|
+
Corollary worth knowing when writing your own themes: **anything you declare that reads
|
|
218
|
+
another token must sit on the theme scope itself**, not on `:root`, or it will not follow
|
|
219
|
+
a nested theme.
|
|
220
|
+
|
|
221
|
+
### Presets
|
|
222
|
+
|
|
223
|
+
`theme.css` ships `light` and `dark`. `slate` is a third, importable separately — a
|
|
224
|
+
palette-only theme in a cool/indigo register:
|
|
225
|
+
|
|
226
|
+
```css
|
|
227
|
+
@import '@guildofgleks/ui/styles/index.css';
|
|
228
|
+
@import '@guildofgleks/ui/styles/presets/slate.css';
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
```html
|
|
232
|
+
<html data-theme="slate"></html>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
It is worth reading as the worked example of the contract above: it declares **only palette
|
|
236
|
+
tokens** — no `--gog-btn-*`, no `--gog-table-*` — and still restyles every component, because
|
|
237
|
+
the derived layer re-resolves against whatever palette is in scope. If a theme of yours needs to
|
|
238
|
+
list component tokens, that usually means the derived layer is missing something rather than
|
|
239
|
+
that the theme needs to be longer.
|
|
240
|
+
|
|
241
|
+
### Optional font preset
|
|
242
|
+
|
|
243
|
+
`styles/index.css` intentionally leaves fonts alone — generic system stacks, no webfont
|
|
244
|
+
download. For the showcase's typography (Cinzel / Inter / JetBrains Mono, pulled from
|
|
245
|
+
Google Fonts) add `@guildofgleks/ui/styles/fonts.css` as well.
|
|
246
|
+
|
|
247
|
+
## Components
|
|
248
|
+
|
|
249
|
+
`gog-accordion`, `gog-button`, `gog-checkbox`, `gog-chip`, `gog-collapsible`, `gog-dialog`,
|
|
250
|
+
`gog-icon`, `gog-inputfield`, `gog-multiselect`, `gog-paginator`, `gog-radio-group`,
|
|
251
|
+
`gog-scroll`, `gog-select`, `gog-skeleton`, `gog-slider`, `gog-spinner`, `gog-spinner-overlay`,
|
|
252
|
+
`gog-table`, `gog-tag`, `gog-textarea`, `gog-toast`.
|
|
253
|
+
|
|
254
|
+
Directives: `gogCollapsibleTrigger`, `gogCollapsibleContent`, `gogTooltip`.
|
|
255
|
+
|
|
256
|
+
Services: `DialogService`, `ToastService`, `ThemeService`.
|
|
257
|
+
|
|
258
|
+
`gog-collapsible` is a headless expand/collapse primitive — no owned markup, no portal.
|
|
259
|
+
Project any element as the trigger via `gogCollapsibleTrigger` and any element as the
|
|
260
|
+
panel via `gogCollapsibleContent`; `[(open)]` is two-way bindable. Useful for anything
|
|
261
|
+
that needs an inline expanding region without the overlay behavior of `gog-select`/
|
|
262
|
+
`gog-multiselect` — e.g. a collapsible group of links in a nav sidebar.
|
|
263
|
+
|
|
264
|
+
### Options come from your own objects
|
|
265
|
+
|
|
266
|
+
`gog-select` and `gog-multiselect` do not require a `{ id, name }` shape. `optionLabel`,
|
|
267
|
+
`optionValue` and `optionDisabled` each take a property path — dot-paths included — or a
|
|
268
|
+
function:
|
|
269
|
+
|
|
270
|
+
```html
|
|
271
|
+
<gog-select
|
|
272
|
+
[options]="members"
|
|
273
|
+
optionLabel="profile.fullName"
|
|
274
|
+
optionValue="uuid"
|
|
275
|
+
optionDisabled="suspended"
|
|
276
|
+
[(value)]="memberId"
|
|
277
|
+
/>
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
Set `[optionValue]="null"` and the control emits the option object itself, so a selection round-trips
|
|
281
|
+
without a lookup table:
|
|
282
|
+
|
|
283
|
+
```html
|
|
284
|
+
<gog-select [options]="members" [optionLabel]="nameOf" [optionValue]="null" [(value)]="member">
|
|
285
|
+
<ng-template gogDropdownOption let-m let-label="label">
|
|
286
|
+
{{ label }} — {{ $any(m).profile.role }}
|
|
287
|
+
</ng-template>
|
|
288
|
+
</gog-select>
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
The defaults are `'name'` / `'id'` / `'disabled'`, which is what `GogDropdownOption` describes —
|
|
292
|
+
so code written against that shape keeps working unchanged.
|
|
293
|
+
|
|
294
|
+
`gogTooltip` is a hover/focus tooltip directive, not a component — drop it on any element,
|
|
295
|
+
a `gog-*` component's own host tag or a plain native one
|
|
296
|
+
(`<button gogTooltip="Save changes">`, `<gog-chip [gogTooltip]="hint">`). Content is a
|
|
297
|
+
string or a `TemplateRef`; `gogTooltipPosition` (`'auto'` default, or an explicit side),
|
|
298
|
+
`gogTooltipShowDelay` (`300`ms default), `gogTooltipHideDelay` (`100`ms default) and
|
|
299
|
+
`gogTooltipDisabled` inputs, the first three also configurable app-wide via
|
|
300
|
+
`GOG_CONFIG.tooltip`.
|
|
301
|
+
|
|
302
|
+
`gog-checkbox`, `gog-inputfield`, `gog-select`, `gog-multiselect`, `gog-slider` and
|
|
303
|
+
`gog-textarea` implement `ControlValueAccessor` and are built for Reactive Forms — use
|
|
304
|
+
`[formControl]` or `formControlName`. The library itself never imports `FormsModule` or
|
|
305
|
+
uses `ngModel`; `[(ngModel)]` is not tested against these components and isn't a
|
|
306
|
+
supported usage path. With a form control attached, the error message appears once the
|
|
307
|
+
control is both touched and invalid; without one it shows for as long as `errorMessage`
|
|
308
|
+
is non-empty, and the consumer decides when to clear it.
|
|
309
|
+
|
|
310
|
+
`gog-inputfield`, `gog-select`, `gog-multiselect` and `gog-textarea` all accept a
|
|
311
|
+
`floatLabel` input — `'in'` (floats up but stays inside the border), `'on'` (floats to sit
|
|
312
|
+
centered on the top border line) or `'over'` (floats fully above the field, outside the
|
|
313
|
+
border) — plus `floatLabelShowPlaceholder` to reveal the field's own `placeholder` once the
|
|
314
|
+
label has floated out of the way (it stays hidden the whole time otherwise, since the
|
|
315
|
+
resting label already sits where it would). Both default to off/`false` and are settable
|
|
316
|
+
per instance or app-wide via `GOG_CONFIG.floatLabel`.
|
|
317
|
+
|
|
318
|
+
## License
|
|
319
|
+
|
|
320
|
+
MIT © Roman Malitskyi
|