@guildofgleks/ui 21.3.2 → 21.4.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/AGENTS.md +212 -10
- package/README.md +95 -2
- package/TOKENS.md +2 -2
- package/fesm2022/guildofgleks-ui.mjs +604 -54
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +2 -1
- package/src/styles/button.css +193 -0
- package/src/styles/index.css +2 -0
- package/src/styles/theme.css +6 -0
- package/styles/button.css +193 -0
- package/styles/index.css +2 -0
- package/styles/theme.css +6 -0
- package/types/guildofgleks-ui.d.ts +394 -15
package/AGENTS.md
CHANGED
|
@@ -5,7 +5,7 @@ an app that **consumes** the published `@guildofgleks/ui` npm package. It is not
|
|
|
5
5
|
authoring the library — if you are working inside the `gleks_web_ui` monorepo itself, read
|
|
6
6
|
`.github/instructions/*.md` instead.
|
|
7
7
|
|
|
8
|
-
Everything below reflects the library's actual source as of **`21.
|
|
8
|
+
Everything below reflects the library's actual source as of **`21.4.0`**. `README.md` covers the
|
|
9
9
|
same ground at a higher level — install, setup, theming, global configuration — and is accurate;
|
|
10
10
|
this file goes further, into per-component input tables, and is the one to trust for exact names,
|
|
11
11
|
types and defaults.
|
|
@@ -211,9 +211,10 @@ parent's config**, one level deep per key — it does not replace it.
|
|
|
211
211
|
| `button` | `debounce` | `gog-button`. |
|
|
212
212
|
| `inputfield` | `showSpinButtons` | `gog-inputfield`. |
|
|
213
213
|
| `textarea` | `resize` | `gog-textarea`. |
|
|
214
|
+
| `paginator` | `showPageSizeSelect`, `pageSizeOptions` | `gog-paginator`, and through it `gog-table`'s built-in pagination.
|
|
214
215
|
| `toast` | `position`, `duration` | `ToastService`. |
|
|
215
216
|
| `theme` | `storageKey`, `defaultTheme`, `followSystem`, `lightTheme`, `darkTheme` | `ThemeService`. All off/neutral by default — see below. |
|
|
216
|
-
| `labels` | every fixed string the library renders — see below | inputfield, textarea, select, multiselect, autocomplete, datepicker, calendar, paginator, `DialogService`, `ToastService`. |
|
|
217
|
+
| `labels` | every fixed string the library renders — see below | inputfield, textarea, select, multiselect, autocomplete, datepicker, calendar, paginator, table, `DialogService`, `ToastService`. |
|
|
217
218
|
|
|
218
219
|
Anything visual does **not** belong here — override the `--gog-*` token instead.
|
|
219
220
|
|
|
@@ -240,6 +241,11 @@ provideGogConfig({
|
|
|
240
241
|
previousPage: 'Предыдущая страница',
|
|
241
242
|
nextPage: 'Следующая страница',
|
|
242
243
|
openCalendar: 'Открыть календарь',
|
|
244
|
+
rowsPerPage: 'Строк на странице', // gog-paginator's size select
|
|
245
|
+
total: 'Всего', // gog-table's row-count label
|
|
246
|
+
tablePagination: 'Навигация по таблице',
|
|
247
|
+
selectRow: 'Выбрать строку',
|
|
248
|
+
selectAllRows: 'Выбрать все строки на странице',
|
|
243
249
|
today: 'Сегодня',
|
|
244
250
|
thisMonth: 'Текущий месяц',
|
|
245
251
|
previousMonth: 'Предыдущий месяц',
|
|
@@ -717,16 +723,102 @@ family of date-math helpers (`addDays`, `addMonths`, `isSameDay`, `isWithinBound
|
|
|
717
723
|
| `title` | `string` | `''` |
|
|
718
724
|
| `ariaHidden` | `boolean` | `true` |
|
|
719
725
|
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
726
|
+
The package ships **41** glyphs (`GogBuiltinIconName`), all from [Lucide](https://lucide.dev)
|
|
727
|
+
and inlined so the package keeps zero runtime dependencies:
|
|
728
|
+
|
|
729
|
+
| Group | Names |
|
|
730
|
+
| --- | --- |
|
|
731
|
+
| Chevrons & arrows | `chevron-up`, `chevron-down`, `chevron-left`, `chevron-right`, `arrow-left`, `arrow-right` |
|
|
732
|
+
| Confirm & dismiss | `check`, `close`, `checkbox`, `checkbox-checked` |
|
|
733
|
+
| Status | `success`, `error`, `warning`, `info` |
|
|
734
|
+
| Sorting | `sort`, `sort-up`, `sort-down`, `filter` |
|
|
735
|
+
| Actions | `search`, `plus`, `minus`, `trash`, `pencil`, `copy`, `download`, `upload`, `refresh`, `external-link` |
|
|
736
|
+
| Chrome | `menu`, `more-horizontal`, `more-vertical`, `settings` |
|
|
737
|
+
| Objects & state | `user`, `lock`, `mail`, `calendar`, `clock`, `eye`, `eye-off`, `star`, `star-filled` |
|
|
738
|
+
|
|
739
|
+
`star` / `star-filled` is the one outline/filled pair, for a rating or favourite **toggle** —
|
|
740
|
+
the same reason `checkbox` / `checkbox-checked` exists. The set is otherwise outline-only on
|
|
741
|
+
purpose; a blanket solid duplicate of every glyph would double the payload for a distinction
|
|
742
|
+
almost nothing needs. If you want a filled variant of something else, register it with
|
|
743
|
+
`provideGogIcons`.
|
|
744
|
+
|
|
745
|
+
`Object.keys(ICON_DEFS)` is the runtime list, if you need to enumerate them (an icon picker, a
|
|
746
|
+
gallery). Do not hand-copy the names into an array — that is what goes stale.
|
|
725
747
|
|
|
726
748
|
```html
|
|
727
749
|
<gog-icon name="calendar" />
|
|
728
750
|
```
|
|
729
751
|
|
|
752
|
+
##### Registering your own icons — `provideGogIcons(...)`
|
|
753
|
+
|
|
754
|
+
`name` is typed `GogIconName = GogBuiltinIconName | (string & {})`: the built-ins autocomplete,
|
|
755
|
+
and any name you register is accepted. **This is the supported way to use your own icon set** —
|
|
756
|
+
prefer it over the `template` input, which costs an `<ng-template>` at every use site and is for
|
|
757
|
+
one-offs.
|
|
758
|
+
|
|
759
|
+
```ts
|
|
760
|
+
// app.config.ts
|
|
761
|
+
import { provideGogIcons } from '@guildofgleks/ui';
|
|
762
|
+
|
|
763
|
+
providers: [
|
|
764
|
+
provideGogIcons({
|
|
765
|
+
cart: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">…</svg>',
|
|
766
|
+
rocket: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">…</svg>',
|
|
767
|
+
}),
|
|
768
|
+
];
|
|
769
|
+
```
|
|
770
|
+
|
|
771
|
+
```html
|
|
772
|
+
<gog-icon name="cart" />
|
|
773
|
+
<gog-tag iconName="cart">In basket</gog-tag>
|
|
774
|
+
<!-- works anywhere an icon *name* is taken -->
|
|
775
|
+
```
|
|
776
|
+
|
|
777
|
+
- **Registered names win over built-ins of the same name** — that is how you replace the
|
|
778
|
+
library's checkmark or chevrons across every component at once, without touching any of them.
|
|
779
|
+
- **Nested `provideGogIcons(...)` layers onto the parent set** rather than replacing it, the same
|
|
780
|
+
as `provideGogConfig`: a lazy route can register only what it uses.
|
|
781
|
+
- **An unknown name renders nothing and warns in dev mode; it never throws.** An icon is
|
|
782
|
+
decoration — failing the render over a typo would be the worse outcome.
|
|
783
|
+
- **Write the SVG for inheritance:** a `viewBox`, `stroke="currentColor"` (or `fill`), and no
|
|
784
|
+
width/height — `gog-icon` drives size and stroke width from the `--gog-icon-*` tokens, so a
|
|
785
|
+
registered icon scales and colours like a built-in.
|
|
786
|
+
- **Security:** the markup is inserted with `bypassSecurityTrustHtml` (Angular's HTML sanitizer
|
|
787
|
+
strips SVG, so there is no alternative). That is fine for static icon markup you authored;
|
|
788
|
+
**never** build a registered icon string from user input or fetch it at runtime unsanitized.
|
|
789
|
+
|
|
790
|
+
#### `[gogButton]` — the link-flavoured button
|
|
791
|
+
|
|
792
|
+
`gog-button` renders its own `<button>`, so it can never *be* a link. `[gogButton]` inverts that:
|
|
793
|
+
the element stays yours and the directive only gives it the look.
|
|
794
|
+
|
|
795
|
+
```html
|
|
796
|
+
<a gogButton routerLink="/pricing">See pricing</a>
|
|
797
|
+
<a gogButton variant="ghost" href="https://example.com" target="_blank" rel="noreferrer">Docs</a>
|
|
798
|
+
<button gogButton variant="outline" size="sm" type="submit">Save</button>
|
|
799
|
+
<a gogButton fullWidth routerLink="/checkout">Checkout</a>
|
|
800
|
+
```
|
|
801
|
+
|
|
802
|
+
| Input | Type | Default |
|
|
803
|
+
| ----------- | ----------------------- | ------------------------------------ |
|
|
804
|
+
| `variant` | `GogVariant` | `'primary'` |
|
|
805
|
+
| `size` | `GogSize \| undefined` | `'md'`; via `GOG_CONFIG.control.size` |
|
|
806
|
+
| `fullWidth` | `boolean` (bare attr ok) | `false` |
|
|
807
|
+
|
|
808
|
+
Selector is `a[gogButton], button[gogButton]` — deliberately not a bare `[gogButton]`, because on
|
|
809
|
+
a `<div>` the result looks like a button and is invisible to the keyboard and to assistive tech.
|
|
810
|
+
|
|
811
|
+
**Which to reach for.** `gog-button` for a button that acts on the page: it owns `loading` (a
|
|
812
|
+
centred spinner it projects), `debounce` click throttling and the `gogClick` output, none of which
|
|
813
|
+
a bare element can provide. `[gogButton]` when the element must be a link, or when you need to
|
|
814
|
+
keep directives of your own on it — `routerLink`, `href`, `target`, `download`, `type="submit"`
|
|
815
|
+
and anything else keep working because they were never brokered through an input in the first
|
|
816
|
+
place. That is also why the library still has no `@angular/router` dependency.
|
|
817
|
+
|
|
818
|
+
Two things it deliberately does not do: no `disabled` on an `<a>` (there is no such thing — drop
|
|
819
|
+
the `href` or render a real `<button>`), and no loading state (the spinner is a projected child a
|
|
820
|
+
directive cannot add without taking over the element's content).
|
|
821
|
+
|
|
730
822
|
#### `[gogBadge]` — directive, not a component
|
|
731
823
|
|
|
732
824
|
Decorates an existing element (a button, an icon, an avatar) with a count/status dot — it never
|
|
@@ -960,13 +1052,36 @@ hidden via `[hidden]` while inactive — preserves scroll/input state).
|
|
|
960
1052
|
| `siblingCount` | `number` | `2` — `'ellipsis'` mode only |
|
|
961
1053
|
| `size` | `GogSize` | `'sm'` |
|
|
962
1054
|
| `disabled`, `ariaLabel` | | `false`, `'Pagination'` |
|
|
1055
|
+
| `totalRecords` | `number \| null` | `null` — see below |
|
|
1056
|
+
| `pageSize` | `model<number>` | `10` — two-way bindable |
|
|
1057
|
+
| `showPageSizeSelect` | `boolean \| undefined` | `false`; via `GOG_CONFIG.paginator` |
|
|
1058
|
+
| `pageSizeOptions` | `number[] \| undefined` | `[10, 20, 30, 40, 50]`; via `GOG_CONFIG.paginator` |
|
|
963
1059
|
|
|
964
1060
|
The step buttons (`'Previous page'`/`'Next page'`) and the per-page names are configured, not
|
|
965
1061
|
input-driven: `GOG_CONFIG.labels.previousPage`/`nextPage`, and `labels.page`, a
|
|
966
1062
|
`(page: number, isCurrent: boolean) => string` formatter defaulting to
|
|
967
1063
|
`` `Page ${page}, current page` `` / `` `Go to page ${page}` ``.
|
|
968
1064
|
|
|
969
|
-
|
|
1065
|
+
Models: `page: number` (1-based, self-clamps) and `pageSize: number`.
|
|
1066
|
+
|
|
1067
|
+
**Give it `totalRecords` instead of `totalPages` when you know the row count** — it then derives
|
|
1068
|
+
the page count from `pageSize` itself, which is what removes the
|
|
1069
|
+
`computed(() => Math.ceil(total / size))` a consumer would otherwise have to write *and* keep in
|
|
1070
|
+
sync with the rows-per-page select:
|
|
1071
|
+
|
|
1072
|
+
```html
|
|
1073
|
+
<gog-paginator
|
|
1074
|
+
[(page)]="page"
|
|
1075
|
+
[(pageSize)]="size"
|
|
1076
|
+
[totalRecords]="items().length"
|
|
1077
|
+
[showPageSizeSelect]="true"
|
|
1078
|
+
/>
|
|
1079
|
+
```
|
|
1080
|
+
|
|
1081
|
+
`totalPages` still works and is the right input when the server tells you a page count directly;
|
|
1082
|
+
`totalRecords` wins when both are set. Changing the page size always returns to page 1 — "page 5"
|
|
1083
|
+
of 10-row pages is not "page 5" of 50-row ones, so clamping alone would leave the user somewhere
|
|
1084
|
+
they never asked to be.
|
|
970
1085
|
|
|
971
1086
|
`'window'`: a fixed number of page buttons that slides to keep the current page centered.
|
|
972
1087
|
`'ellipsis'`: first/last pinned, `siblingCount` around the current page, "…" fills the gap
|
|
@@ -982,7 +1097,9 @@ Model: `page: number` (1-based, self-clamps to `totalPages`).
|
|
|
982
1097
|
| ----------------------------- | ----------------------------- | --------------------------------- |
|
|
983
1098
|
| `value` | `T[]` | `[]` |
|
|
984
1099
|
| `fullWidth` | `boolean` | `true` |
|
|
985
|
-
| `pageSize` | `number
|
|
1100
|
+
| `pageSize` | `model<number>` | `0` (no pagination) — two-way |
|
|
1101
|
+
| `showPageSizeSelect` | `boolean \| undefined` | `false`; forwarded to the paginator |
|
|
1102
|
+
| `pageSizeOptions` | `number[] \| undefined` | `[10, 20, 30, 40, 50]`; forwarded |
|
|
986
1103
|
| `showRowNumbers`, `showTotal` | `boolean` | `true`, `false` |
|
|
987
1104
|
| `emptyPlaceholder` | `string` | `'-'` |
|
|
988
1105
|
| `paginatorPosition` | `'left'\|'center'\|'right'` | `'center'` |
|
|
@@ -991,6 +1108,18 @@ Model: `page: number` (1-based, self-clamps to `totalPages`).
|
|
|
991
1108
|
| `showColumnBorders` | `boolean` | `false` |
|
|
992
1109
|
| `stickyHeader` | `boolean` | `false` |
|
|
993
1110
|
| `size` | `GogSize` | `'lg'` (row density — not `'md'`) |
|
|
1111
|
+
| `lazy` | `boolean` | `false` — see below |
|
|
1112
|
+
| `totalRecords` | `number \| null` | `null` — `lazy` only |
|
|
1113
|
+
| `selectionMode` | `GogTableSelectionMode` | `'none'` |
|
|
1114
|
+
| `selection` | `model<T[]>` | `[]` — two-way bindable |
|
|
1115
|
+
| `dataKey` | `string` | `''` — row identity field |
|
|
1116
|
+
| `showSelectionColumn` | `boolean` | `true` (once selection is on) |
|
|
1117
|
+
| `interactiveRows` | `boolean` | `false` |
|
|
1118
|
+
|
|
1119
|
+
Outputs: `gogSortChange: GogTableSortEvent` (`{ field, direction }`, `{ field: '', direction:
|
|
1120
|
+
null }` when the third click clears it), `gogPageChange: number` (1-based; **does not fire** on
|
|
1121
|
+
first render, nor for the page reset a new sort causes — that reset belongs to the sort),
|
|
1122
|
+
`gogRowClick: GogTableRowClickEvent<T>` (`{ row, index, originalEvent }`).
|
|
994
1123
|
|
|
995
1124
|
Columns are declared as **projected `gog-column` children**, not an input array:
|
|
996
1125
|
|
|
@@ -1006,6 +1135,75 @@ Columns are declared as **projected `gog-column` children**, not an input array:
|
|
|
1006
1135
|
</gog-table>
|
|
1007
1136
|
```
|
|
1008
1137
|
|
|
1138
|
+
##### Server-driven tables — `lazy`
|
|
1139
|
+
|
|
1140
|
+
By default the table owns the whole data set: it sorts `value` and slices the page itself. With
|
|
1141
|
+
`[lazy]="true"` it does neither — `value` **is** the current page, already sorted, and the table
|
|
1142
|
+
renders it untouched. Supply `totalRecords` (without it the table cannot know how many pages
|
|
1143
|
+
exist, so pagination stays hidden and it warns in dev), then refetch from the two outputs:
|
|
1144
|
+
|
|
1145
|
+
```html
|
|
1146
|
+
<gog-table
|
|
1147
|
+
[value]="page()"
|
|
1148
|
+
[lazy]="true"
|
|
1149
|
+
[totalRecords]="total()"
|
|
1150
|
+
[pageSize]="20"
|
|
1151
|
+
[loading]="loading()"
|
|
1152
|
+
dataKey="id"
|
|
1153
|
+
(gogSortChange)="sort.set($event); reload()"
|
|
1154
|
+
(gogPageChange)="pageNumber.set($event); reload()"
|
|
1155
|
+
>
|
|
1156
|
+
```
|
|
1157
|
+
|
|
1158
|
+
Row numbers still count from the current page (`(page - 1) * pageSize + i + 1`), and `showTotal`
|
|
1159
|
+
reports `totalRecords` rather than `value.length`. **Do not** sort or slice `value` yourself in
|
|
1160
|
+
addition — that is what the flag turns off.
|
|
1161
|
+
|
|
1162
|
+
##### Rows per page
|
|
1163
|
+
|
|
1164
|
+
`pageSize` is a **`model`**, not an input: `[pageSize]="20"` works exactly as before, and
|
|
1165
|
+
`[(pageSize)]="size"` becomes possible. That is what makes the rows-per-page select work with no
|
|
1166
|
+
wiring — the table binds its own model straight to the paginator's, the select writes back
|
|
1167
|
+
through it, and there is no intermediate signal to keep in sync in either direction.
|
|
1168
|
+
|
|
1169
|
+
```html
|
|
1170
|
+
<!-- off by default; turn it on per table, or app-wide via GOG_CONFIG.paginator -->
|
|
1171
|
+
<gog-table [value]="rows" [(pageSize)]="size" [showPageSizeSelect]="true" [pageSizeOptions]="[5, 10, 20]">
|
|
1172
|
+
```
|
|
1173
|
+
|
|
1174
|
+
Changing the size returns to page 1 and does **not** emit `gogPageChange` — the consumer already
|
|
1175
|
+
knows from `pageSizeChange`, and firing both would make a lazy table fetch twice. In `lazy` mode
|
|
1176
|
+
`pageSizeChange` is the refetch signal; bind `[pageSize]` + `(pageSizeChange)` rather than the
|
|
1177
|
+
banana-box if you need to act on it.
|
|
1178
|
+
|
|
1179
|
+
The footer stays visible at a single page whenever the select is on — hiding it would strand the
|
|
1180
|
+
user on whatever size produced that one page, with no control left to pick a smaller one.
|
|
1181
|
+
|
|
1182
|
+
##### Selection
|
|
1183
|
+
|
|
1184
|
+
`selectionMode` turns it on; `[(selection)]` is always a `T[]`, including in `'single'` mode
|
|
1185
|
+
where it holds zero or one row — one shape rather than a union to narrow on every read.
|
|
1186
|
+
|
|
1187
|
+
```html
|
|
1188
|
+
<gog-table [value]="rows" selectionMode="multiple" [(selection)]="selected" dataKey="id">
|
|
1189
|
+
```
|
|
1190
|
+
|
|
1191
|
+
- **Set `dataKey`.** Without it rows are matched by object identity, so any refetch that produces
|
|
1192
|
+
new objects silently drops the selection. It is also the `@for` track key, which is what lets
|
|
1193
|
+
the DOM survive a refetch instead of being rebuilt.
|
|
1194
|
+
- The checkbox column renders automatically (`showSelectionColumn` to turn it off, e.g. for a
|
|
1195
|
+
table that selects by row click — pair that with `interactiveRows`).
|
|
1196
|
+
- The header select-all appears only in `'multiple'` mode and covers **the current page**, never
|
|
1197
|
+
the whole data set: in `lazy` mode the table has never seen the other pages, and a control that
|
|
1198
|
+
behaved differently between the two modes would be worse than either.
|
|
1199
|
+
|
|
1200
|
+
##### Clickable rows
|
|
1201
|
+
|
|
1202
|
+
`gogRowClick` fires on a click regardless, but a `<tr>` is not focusable, so on its own that is a
|
|
1203
|
+
mouse-only affordance. `interactiveRows` makes rows focusable and styles them as clickable, and
|
|
1204
|
+
Enter/Space then activate the focused row. If the action is really "open this one thing", a link
|
|
1205
|
+
or button inside a cell is better than a whole-row target.
|
|
1206
|
+
|
|
1009
1207
|
`gog-column` inputs: `field` (required, dot-paths ok), `header`, `sortable` (default `false`),
|
|
1010
1208
|
`width`/`minWidth`/`maxWidth`, `comparator` (custom `(a, b) => number`, defaults to a
|
|
1011
1209
|
locale-aware collator for strings). Slots inside a column: `<ng-template gogColumnBody let-row let-value="value" let-index="index">`,
|
|
@@ -1143,7 +1341,11 @@ Shared enum-like types (`import type { ... } from '@guildofgleks/ui'`):
|
|
|
1143
1341
|
| `GogTextareaResize` | `'vertical' \| 'horizontal' \| 'both' \| 'none'` |
|
|
1144
1342
|
| `GogInputType` | `'text' \| 'password' \| 'email' \| 'number' \| 'search' \| 'tel' \| 'url' \| 'date' \| 'time' \| 'datetime-local'` |
|
|
1145
1343
|
| `GogInputMode` | `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'` |
|
|
1344
|
+
| `GogTableSelectionMode` | `'none' \| 'single' \| 'multiple'` |
|
|
1345
|
+
| `GogTableSortEvent` | `{ field: string; direction: SortDirection }` |
|
|
1346
|
+
| `GogTableRowClickEvent<T>` | `{ row: T; index: number; originalEvent: MouseEvent \| KeyboardEvent }` |
|
|
1146
1347
|
| `GogErrorDisplay` | `'auto' \| 'manual'` |
|
|
1147
1348
|
| `GogDropdownDirection` | `'auto' \| 'up' \| 'down'` |
|
|
1148
1349
|
| `GogTooltipSide` | `'top' \| 'bottom' \| 'left' \| 'right'` (resolved form of `GogTooltipPosition`, no `'auto'`) |
|
|
1149
|
-
| `
|
|
1350
|
+
| `GogBuiltinIconName` | the 20 glyphs the package ships — see [`gog-icon`](#gog-icon) |
|
|
1351
|
+
| `GogIconName` | `GogBuiltinIconName \| (string & {})` — built-ins plus anything registered via `provideGogIcons` |
|
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ dependencies are `@angular/core`, `@angular/common` and `@angular/forms`.
|
|
|
11
11
|
|
|
12
12
|
## Features
|
|
13
13
|
|
|
14
|
-
- 27 standalone components and
|
|
14
|
+
- 27 standalone components and 3 directives — see [Components](#components) for the full
|
|
15
15
|
list — plus `DialogService`, `ToastService` and `ThemeService`.
|
|
16
16
|
- Signal-based API throughout: `input()` / `output()` / `model()`, `OnPush` change
|
|
17
17
|
detection, no NgModules.
|
|
@@ -267,6 +267,43 @@ and an instance's own input always wins over the configured value. Providing it
|
|
|
267
267
|
the injector tree (a route, a component) **layers onto** the parent's config one level deep
|
|
268
268
|
rather than replacing it, so a route can override one field and inherit the rest.
|
|
269
269
|
|
|
270
|
+
### Your own icons
|
|
271
|
+
|
|
272
|
+
`gog-icon` ships 41 [Lucide](https://lucide.dev) glyphs — arrows and chevrons, check/close,
|
|
273
|
+
the form-state set (success, error, warning, info), and the common actions (search, plus, minus,
|
|
274
|
+
trash, pencil, download, upload, refresh, filter, external-link, copy), plus `menu`,
|
|
275
|
+
`more-horizontal`/`more-vertical`, `user`, `settings`, `lock`, `mail`, `calendar`, `clock`, and
|
|
276
|
+
`star`/`star-filled` for a rating or favourite toggle.
|
|
277
|
+
|
|
278
|
+
Register your own by name and they behave like built-ins — including in every component that
|
|
279
|
+
takes an icon *name* rather than a template:
|
|
280
|
+
|
|
281
|
+
```ts
|
|
282
|
+
// app.config.ts
|
|
283
|
+
import { provideGogIcons } from '@guildofgleks/ui';
|
|
284
|
+
|
|
285
|
+
providers: [
|
|
286
|
+
provideGogIcons({
|
|
287
|
+
cart: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">…</svg>',
|
|
288
|
+
}),
|
|
289
|
+
];
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
```html
|
|
293
|
+
<gog-icon name="cart" />
|
|
294
|
+
<gog-tag iconName="cart">In basket</gog-tag>
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
A registered name overrides a built-in of the same name, so you can swap the library's whole
|
|
298
|
+
look — its checkmark, its chevrons — without touching a component. Nested calls layer onto the
|
|
299
|
+
parent set. An unknown name renders nothing and warns in dev mode rather than throwing.
|
|
300
|
+
|
|
301
|
+
Write the SVG with a `viewBox` and `currentColor`, and no width/height: sizing and stroke width
|
|
302
|
+
come from the `--gog-icon-*` tokens, which is what makes a registered icon scale and colour like
|
|
303
|
+
a built-in. The markup is inserted with `bypassSecurityTrustHtml` (Angular's sanitizer strips
|
|
304
|
+
SVG outright), so register only static markup you authored — never a string built from user
|
|
305
|
+
input.
|
|
306
|
+
|
|
270
307
|
### Translating the library
|
|
271
308
|
|
|
272
309
|
`labels` carries every fixed string the components render themselves — the ones you never write
|
|
@@ -304,7 +341,7 @@ those stay per instance.
|
|
|
304
341
|
| Feedback | `gog-spinner`, `gog-spinner-overlay`, `gog-progressbar`, `gog-skeleton` |
|
|
305
342
|
| Content | `gog-icon` |
|
|
306
343
|
|
|
307
|
-
Directives: `gogTooltip`, `gogBadge`, `gogCollapsibleTrigger`, `gogCollapsibleContent`.
|
|
344
|
+
Directives: `gogButton`, `gogTooltip`, `gogBadge`, `gogCollapsibleTrigger`, `gogCollapsibleContent`.
|
|
308
345
|
|
|
309
346
|
Slot directives, for replacing a component's markup rather than configuring it:
|
|
310
347
|
`gogAccordionHeader`, `gogAccordionContent`, `gogAccordionChevron`, `gogButtonToggleOption`,
|
|
@@ -353,6 +390,57 @@ without a lookup table:
|
|
|
353
390
|
The defaults are `'name'` / `'id'` / `'disabled'`, which is what `GogDropdownOption` describes —
|
|
354
391
|
so code written against that shape keeps working unchanged.
|
|
355
392
|
|
|
393
|
+
`gog-table` works two ways. By default it owns the data: give it `value` and it sorts and pages
|
|
394
|
+
in memory. With `[lazy]="true"` it hands both to the server — `value` is the current page,
|
|
395
|
+
already sorted, `totalRecords` says how many rows exist in total, and `gogSortChange` /
|
|
396
|
+
`gogPageChange` are the refetch signals. Row selection is `selectionMode` plus a two-way
|
|
397
|
+
`[(selection)]`; set `dataKey` so rows are matched by id rather than object identity, or a
|
|
398
|
+
refetch will drop the selection.
|
|
399
|
+
|
|
400
|
+
```html
|
|
401
|
+
<gog-table
|
|
402
|
+
[value]="page()"
|
|
403
|
+
[lazy]="true"
|
|
404
|
+
[totalRecords]="total()"
|
|
405
|
+
[pageSize]="20"
|
|
406
|
+
[loading]="loading()"
|
|
407
|
+
selectionMode="multiple"
|
|
408
|
+
[(selection)]="selected"
|
|
409
|
+
dataKey="id"
|
|
410
|
+
(gogSortChange)="sort.set($event); reload()"
|
|
411
|
+
(gogPageChange)="pageNumber.set($event); reload()"
|
|
412
|
+
>
|
|
413
|
+
<gog-column field="name" header="Name" [sortable]="true" />
|
|
414
|
+
<gog-column field="email" header="Email" />
|
|
415
|
+
</gog-table>
|
|
416
|
+
```
|
|
417
|
+
|
|
418
|
+
`gog-paginator` can offer a rows-per-page select — off by default, on per instance with
|
|
419
|
+
`showPageSizeSelect` or app-wide through `GOG_CONFIG.paginator`. Give it `totalRecords` rather
|
|
420
|
+
than `totalPages` and it works out the page count from `pageSize` itself:
|
|
421
|
+
|
|
422
|
+
```html
|
|
423
|
+
<gog-paginator [(page)]="page" [(pageSize)]="size" [totalRecords]="items().length" [showPageSizeSelect]="true" />
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
`pageSize` is a two-way `model` on both `gog-paginator` and `gog-table`, which is what connects
|
|
427
|
+
the two without a signal in between: the table binds its own model to the paginator's, so a size
|
|
428
|
+
picked in the select lands directly on whatever you bound with `[(pageSize)]`.
|
|
429
|
+
|
|
430
|
+
`gog-button` renders its own `<button>`, so it can never *be* a link. For a call to action that
|
|
431
|
+
navigates, use the `gogButton` directive on your own element instead — it applies the same look
|
|
432
|
+
and nothing is brokered through an input, so `routerLink`, `href`, `target` and any directive of
|
|
433
|
+
your own keep working:
|
|
434
|
+
|
|
435
|
+
```html
|
|
436
|
+
<a gogButton routerLink="/pricing">See pricing</a>
|
|
437
|
+
<a gogButton variant="ghost" href="https://example.com" target="_blank" rel="noreferrer">Docs</a>
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
It is also why the package still needs no `@angular/router`. Keep `gog-button` for buttons that
|
|
441
|
+
act on the page — `loading`, `debounce` and `gogClick` are its, and a bare element cannot offer
|
|
442
|
+
them.
|
|
443
|
+
|
|
356
444
|
`gogTooltip` is a hover/focus tooltip directive, not a component — drop it on any element,
|
|
357
445
|
a `gog-*` component's own host tag or a plain native one
|
|
358
446
|
(`<button gogTooltip="Save changes">`, `<gog-chip [gogTooltip]="hint">`). Content is a
|
|
@@ -395,3 +483,8 @@ per instance or app-wide via `GOG_CONFIG.floatLabel`.
|
|
|
395
483
|
## License
|
|
396
484
|
|
|
397
485
|
Apache-2.0 © Roman Malitskyi
|
|
486
|
+
|
|
487
|
+
The built-in icons are [Lucide](https://lucide.dev) glyphs, inlined so the package keeps zero
|
|
488
|
+
runtime dependencies. Lucide is ISC licensed; portions are held by Cole Bemis 2013–2022 as part
|
|
489
|
+
of Feather (MIT), all others by Lucide Contributors 2022. The full notice is at the top of
|
|
490
|
+
`src/lib/shared/icons.ts` in the source.
|
package/TOKENS.md
CHANGED
|
@@ -46,14 +46,14 @@ so a theme editor or docs page can enumerate the real tokens instead of copying
|
|
|
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` |
|
|
48
48
|
| 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` |
|
|
49
|
-
| Paginator | `--gog-paginator-ellipsis-color`, `--gog-paginator-ellipsis-font-family`, `--gog-paginator-ellipsis-font-size`, `--gog-paginator-ellipsis-min-width`, `--gog-paginator-gap`
|
|
49
|
+
| Paginator | `--gog-paginator-ellipsis-color`, `--gog-paginator-ellipsis-font-family`, `--gog-paginator-ellipsis-font-size`, `--gog-paginator-ellipsis-min-width`, `--gog-paginator-gap`, `--gog-paginator-page-size-min-width` |
|
|
50
50
|
| 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` |
|
|
51
51
|
| Scroll | `--gog-scroll-corner-bg`, `--gog-scroll-fade-duration`, `--gog-scroll-focus-ring`, `--gog-scroll-focus-ring-width`, `--gog-scroll-normal-thumb-hit-padding`, `--gog-scroll-normal-thumb-min-size`, `--gog-scroll-normal-track-width`, `--gog-scroll-thin-thumb-hit-padding`, `--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` |
|
|
52
52
|
| 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` |
|
|
53
53
|
| 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` |
|
|
54
54
|
| 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` |
|
|
55
55
|
| 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` |
|
|
56
|
-
| 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`
|
|
56
|
+
| 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-select-col-width`, `--gog-table-selected-bg`, `--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` |
|
|
57
57
|
| 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` |
|
|
58
58
|
| 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` |
|
|
59
59
|
| 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` |
|