@sebgroup/green-core 2.19.0 → 2.20.0-rc.20251215154321804
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/components/badge/badge.component.d.ts +0 -23
- package/components/badge/badge.component.js +18 -105
- package/components/badge/badge.styles.js +96 -2
- package/components/checkbox/checkbox.component.js +24 -22
- package/components/checkbox/checkbox.styles.js +0 -8
- package/components/dropdown/dropdown.component.js +4 -1
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -0
- package/components/input/input.styles.js +10 -1
- package/components/pagination/index.d.ts +1 -0
- package/components/pagination/index.js +1 -0
- package/components/pagination/pagination.component.d.ts +82 -0
- package/components/pagination/pagination.component.js +441 -0
- package/components/pagination/pagination.d.ts +2 -0
- package/components/pagination/pagination.js +6 -0
- package/components/pagination/pagination.styles.d.ts +1 -0
- package/components/pagination/pagination.styles.js +19 -0
- package/components/table/index.d.ts +2 -0
- package/components/table/index.js +6 -0
- package/components/table/table.component.d.ts +140 -0
- package/components/table/table.component.js +1090 -0
- package/components/table/table.d.ts +2 -0
- package/components/table/table.imports.d.ts +6 -0
- package/components/table/table.imports.js +63 -0
- package/components/table/table.js +6 -0
- package/components/table/table.stories.data.d.ts +53 -0
- package/components/table/table.stories.data.js +401 -0
- package/components/table/table.styles.d.ts +1 -0
- package/components/table/table.styles.js +788 -0
- package/components/table/table.types.d.ts +155 -0
- package/components/table/table.types.js +24 -0
- package/custom-elements.json +12280 -10492
- package/gds-element.js +1 -1
- package/generated/locales/da.d.ts +32 -0
- package/generated/locales/da.js +32 -0
- package/generated/locales/de.d.ts +32 -0
- package/generated/locales/de.js +32 -0
- package/generated/locales/fi.d.ts +32 -0
- package/generated/locales/fi.js +32 -0
- package/generated/locales/fr.d.ts +32 -0
- package/generated/locales/fr.js +32 -0
- package/generated/locales/it.d.ts +32 -0
- package/generated/locales/it.js +32 -0
- package/generated/locales/nl.d.ts +32 -0
- package/generated/locales/nl.js +32 -0
- package/generated/locales/no.d.ts +32 -0
- package/generated/locales/no.js +33 -1
- package/generated/locales/sv.d.ts +32 -0
- package/generated/locales/sv.js +32 -0
- package/generated/react/index.d.ts +8 -6
- package/generated/react/index.js +8 -6
- package/generated/react/input/index.d.ts +1 -1
- package/generated/react/pagination/index.d.ts +395 -0
- package/generated/react/pagination/index.js +13 -0
- package/generated/react/table/index.d.ts +395 -0
- package/generated/react/table/index.js +13 -0
- package/package.json +8 -1
- package/primitives/field-base/field-base.component.d.ts +1 -0
- package/primitives/field-base/field-base.component.js +8 -0
- package/primitives/field-base/field-base.styles.js +9 -1
- package/pure.d.ts +2 -0
- package/pure.js +2 -0
- package/shared-styles/rbcb-toggle.style.js +41 -12
- package/utils/helpers/custom-element-scoping.js +1 -1
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
import { getReactComponent } from "../../../utils/react";
|
|
2
|
+
import { GdsTable as GdsTableClass } from "../../../components/table/table.component";
|
|
3
|
+
export declare const GdsTable: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsTableClass>>>) => import("react").ReactElement<Omit<{
|
|
4
|
+
options?: number[] | undefined;
|
|
5
|
+
page?: number | undefined;
|
|
6
|
+
rows?: number | undefined;
|
|
7
|
+
columns?: import("../../../components/table/table.types").Column[] | undefined;
|
|
8
|
+
data?: ((request: import("../../../components/table/table.types").Request) => Promise<import("../../../components/table/table.types").Response<import("../../../components/table/table.types").Row>>) | undefined;
|
|
9
|
+
density?: import("../../../components/table/table.types").Density | undefined;
|
|
10
|
+
selectable?: boolean | undefined;
|
|
11
|
+
responsive?: boolean | undefined;
|
|
12
|
+
plain?: boolean | undefined;
|
|
13
|
+
searchable?: boolean | undefined;
|
|
14
|
+
settings?: boolean | undefined;
|
|
15
|
+
striped?: boolean | undefined;
|
|
16
|
+
actions?: import("../../../components/table/table.types").Actions | ((row: import("../../../components/table/table.types").Row, index: number) => any) | undefined;
|
|
17
|
+
nocache?: boolean | undefined;
|
|
18
|
+
dataLoadKey?: string | undefined;
|
|
19
|
+
height?: string | undefined;
|
|
20
|
+
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
21
|
+
connectedCallback?: (() => void) | undefined;
|
|
22
|
+
render?: (() => any) | undefined;
|
|
23
|
+
clearSelection?: (() => void) | undefined;
|
|
24
|
+
selectAll?: (() => void) | undefined;
|
|
25
|
+
setSelection?: ((indices: number[]) => void) | undefined;
|
|
26
|
+
getSelection?: (() => {
|
|
27
|
+
indices: number[];
|
|
28
|
+
data: import("../../../components/table/table.types").Row[];
|
|
29
|
+
}) | undefined;
|
|
30
|
+
readonly semanticVersion?: "__GDS_SEM_VER__" | undefined;
|
|
31
|
+
gdsElementName?: string | undefined;
|
|
32
|
+
_isUsingTransitionalStyles?: boolean | undefined;
|
|
33
|
+
_dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
|
|
34
|
+
disconnectedCallback?: (() => void) | undefined;
|
|
35
|
+
dispatchStandardEvent?: ((name: string, options?: EventInit) => boolean) | undefined;
|
|
36
|
+
dispatchCustomEvent?: (<T>(name: string, options?: CustomEventInit<T>) => boolean) | undefined;
|
|
37
|
+
readonly renderOptions?: import("lit-html").RenderOptions | undefined;
|
|
38
|
+
readonly renderRoot?: HTMLElement | DocumentFragment | undefined;
|
|
39
|
+
isUpdatePending?: boolean | undefined;
|
|
40
|
+
hasUpdated?: boolean | undefined;
|
|
41
|
+
addController?: ((controller: import("lit").ReactiveController) => void) | undefined;
|
|
42
|
+
removeController?: ((controller: import("lit").ReactiveController) => void) | undefined;
|
|
43
|
+
attributeChangedCallback?: ((name: string, _old: string | null, value: string | null) => void) | undefined;
|
|
44
|
+
requestUpdate?: ((name?: PropertyKey, oldValue?: unknown, options?: import("lit").PropertyDeclaration) => void) | undefined;
|
|
45
|
+
readonly updateComplete?: Promise<boolean> | undefined;
|
|
46
|
+
accessKey?: string | undefined;
|
|
47
|
+
readonly accessKeyLabel?: string | undefined;
|
|
48
|
+
autocapitalize?: string | undefined;
|
|
49
|
+
dir?: string | undefined;
|
|
50
|
+
draggable?: boolean | undefined;
|
|
51
|
+
hidden?: boolean | undefined;
|
|
52
|
+
inert?: boolean | undefined;
|
|
53
|
+
innerText?: string | undefined;
|
|
54
|
+
lang?: string | undefined;
|
|
55
|
+
readonly offsetHeight?: number | undefined;
|
|
56
|
+
readonly offsetLeft?: number | undefined;
|
|
57
|
+
readonly offsetParent?: Element | null | undefined;
|
|
58
|
+
readonly offsetTop?: number | undefined;
|
|
59
|
+
readonly offsetWidth?: number | undefined;
|
|
60
|
+
outerText?: string | undefined;
|
|
61
|
+
popover?: string | null | undefined;
|
|
62
|
+
spellcheck?: boolean | undefined;
|
|
63
|
+
title?: string | undefined;
|
|
64
|
+
translate?: boolean | undefined;
|
|
65
|
+
attachInternals?: (() => ElementInternals) | undefined;
|
|
66
|
+
click?: (() => void) | undefined;
|
|
67
|
+
hidePopover?: (() => void) | undefined;
|
|
68
|
+
showPopover?: (() => void) | undefined;
|
|
69
|
+
togglePopover?: ((force?: boolean) => boolean) | undefined;
|
|
70
|
+
addEventListener?: {
|
|
71
|
+
<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
72
|
+
(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
73
|
+
} | undefined;
|
|
74
|
+
removeEventListener?: {
|
|
75
|
+
<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
76
|
+
(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
77
|
+
} | undefined;
|
|
78
|
+
readonly attributes?: NamedNodeMap | undefined;
|
|
79
|
+
readonly classList?: DOMTokenList | undefined;
|
|
80
|
+
className?: string | undefined;
|
|
81
|
+
readonly clientHeight?: number | undefined;
|
|
82
|
+
readonly clientLeft?: number | undefined;
|
|
83
|
+
readonly clientTop?: number | undefined;
|
|
84
|
+
readonly clientWidth?: number | undefined;
|
|
85
|
+
id?: string | undefined;
|
|
86
|
+
readonly localName?: string | undefined;
|
|
87
|
+
readonly namespaceURI?: string | null | undefined;
|
|
88
|
+
onfullscreenchange?: ((this: Element, ev: Event) => any) | null | undefined;
|
|
89
|
+
onfullscreenerror?: ((this: Element, ev: Event) => any) | null | undefined;
|
|
90
|
+
outerHTML?: string | undefined;
|
|
91
|
+
readonly ownerDocument?: Document | undefined;
|
|
92
|
+
readonly part?: DOMTokenList | undefined;
|
|
93
|
+
readonly prefix?: string | null | undefined;
|
|
94
|
+
readonly scrollHeight?: number | undefined;
|
|
95
|
+
scrollLeft?: number | undefined;
|
|
96
|
+
scrollTop?: number | undefined;
|
|
97
|
+
readonly scrollWidth?: number | undefined;
|
|
98
|
+
readonly shadowRoot?: ShadowRoot | null | undefined;
|
|
99
|
+
slot?: string | undefined;
|
|
100
|
+
readonly tagName?: string | undefined;
|
|
101
|
+
attachShadow?: ((init: ShadowRootInit) => ShadowRoot) | undefined;
|
|
102
|
+
checkVisibility?: ((options?: CheckVisibilityOptions) => boolean) | undefined;
|
|
103
|
+
closest?: {
|
|
104
|
+
<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
|
|
105
|
+
<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
|
|
106
|
+
<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
|
|
107
|
+
<E extends Element = Element>(selectors: string): E | null;
|
|
108
|
+
} | undefined;
|
|
109
|
+
computedStyleMap?: (() => StylePropertyMapReadOnly) | undefined;
|
|
110
|
+
getAttribute?: ((qualifiedName: string) => string | null) | undefined;
|
|
111
|
+
getAttributeNS?: ((namespace: string | null, localName: string) => string | null) | undefined;
|
|
112
|
+
getAttributeNames?: (() => string[]) | undefined;
|
|
113
|
+
getAttributeNode?: ((qualifiedName: string) => Attr | null) | undefined;
|
|
114
|
+
getAttributeNodeNS?: ((namespace: string | null, localName: string) => Attr | null) | undefined;
|
|
115
|
+
getBoundingClientRect?: (() => DOMRect) | undefined;
|
|
116
|
+
getClientRects?: (() => DOMRectList) | undefined;
|
|
117
|
+
getElementsByClassName?: ((classNames: string) => HTMLCollectionOf<Element>) | undefined;
|
|
118
|
+
getElementsByTagName?: {
|
|
119
|
+
<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
|
120
|
+
<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
|
121
|
+
<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
|
122
|
+
<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
123
|
+
(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
124
|
+
} | undefined;
|
|
125
|
+
getElementsByTagNameNS?: {
|
|
126
|
+
(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
127
|
+
(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
128
|
+
(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
|
|
129
|
+
(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
130
|
+
} | undefined;
|
|
131
|
+
hasAttribute?: ((qualifiedName: string) => boolean) | undefined;
|
|
132
|
+
hasAttributeNS?: ((namespace: string | null, localName: string) => boolean) | undefined;
|
|
133
|
+
hasAttributes?: (() => boolean) | undefined;
|
|
134
|
+
hasPointerCapture?: ((pointerId: number) => boolean) | undefined;
|
|
135
|
+
insertAdjacentElement?: ((where: InsertPosition, element: Element) => Element | null) | undefined;
|
|
136
|
+
insertAdjacentHTML?: ((position: InsertPosition, text: string) => void) | undefined;
|
|
137
|
+
insertAdjacentText?: ((where: InsertPosition, data: string) => void) | undefined;
|
|
138
|
+
matches?: ((selectors: string) => boolean) | undefined;
|
|
139
|
+
releasePointerCapture?: ((pointerId: number) => void) | undefined;
|
|
140
|
+
removeAttribute?: ((qualifiedName: string) => void) | undefined;
|
|
141
|
+
removeAttributeNS?: ((namespace: string | null, localName: string) => void) | undefined;
|
|
142
|
+
removeAttributeNode?: ((attr: Attr) => Attr) | undefined;
|
|
143
|
+
requestFullscreen?: ((options?: FullscreenOptions) => Promise<void>) | undefined;
|
|
144
|
+
requestPointerLock?: (() => void) | undefined;
|
|
145
|
+
scroll?: {
|
|
146
|
+
(options?: ScrollToOptions): void;
|
|
147
|
+
(x: number, y: number): void;
|
|
148
|
+
} | undefined;
|
|
149
|
+
scrollBy?: {
|
|
150
|
+
(options?: ScrollToOptions): void;
|
|
151
|
+
(x: number, y: number): void;
|
|
152
|
+
} | undefined;
|
|
153
|
+
scrollIntoView?: ((arg?: boolean | ScrollIntoViewOptions) => void) | undefined;
|
|
154
|
+
scrollTo?: {
|
|
155
|
+
(options?: ScrollToOptions): void;
|
|
156
|
+
(x: number, y: number): void;
|
|
157
|
+
} | undefined;
|
|
158
|
+
setAttribute?: ((qualifiedName: string, value: string) => void) | undefined;
|
|
159
|
+
setAttributeNS?: ((namespace: string | null, qualifiedName: string, value: string) => void) | undefined;
|
|
160
|
+
setAttributeNode?: ((attr: Attr) => Attr | null) | undefined;
|
|
161
|
+
setAttributeNodeNS?: ((attr: Attr) => Attr | null) | undefined;
|
|
162
|
+
setHTMLUnsafe?: ((html: string) => void) | undefined;
|
|
163
|
+
setPointerCapture?: ((pointerId: number) => void) | undefined;
|
|
164
|
+
toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
|
|
165
|
+
webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
|
|
166
|
+
readonly baseURI?: string | undefined;
|
|
167
|
+
readonly childNodes?: NodeListOf<ChildNode> | undefined;
|
|
168
|
+
readonly firstChild?: ChildNode | null | undefined;
|
|
169
|
+
readonly isConnected?: boolean | undefined;
|
|
170
|
+
readonly lastChild?: ChildNode | null | undefined;
|
|
171
|
+
readonly nextSibling?: ChildNode | null | undefined;
|
|
172
|
+
readonly nodeName?: string | undefined;
|
|
173
|
+
readonly nodeType?: number | undefined;
|
|
174
|
+
nodeValue?: string | null | undefined;
|
|
175
|
+
readonly parentElement?: HTMLElement | null | undefined;
|
|
176
|
+
readonly parentNode?: ParentNode | null | undefined;
|
|
177
|
+
readonly previousSibling?: ChildNode | null | undefined;
|
|
178
|
+
textContent?: string | null | undefined;
|
|
179
|
+
appendChild?: (<T extends Node>(node: T) => T) | undefined;
|
|
180
|
+
cloneNode?: ((deep?: boolean) => Node) | undefined;
|
|
181
|
+
compareDocumentPosition?: ((other: Node) => number) | undefined;
|
|
182
|
+
contains?: ((other: Node | null) => boolean) | undefined;
|
|
183
|
+
getRootNode?: ((options?: GetRootNodeOptions) => Node) | undefined;
|
|
184
|
+
hasChildNodes?: (() => boolean) | undefined;
|
|
185
|
+
insertBefore?: (<T extends Node>(node: T, child: Node | null) => T) | undefined;
|
|
186
|
+
isDefaultNamespace?: ((namespace: string | null) => boolean) | undefined;
|
|
187
|
+
isEqualNode?: ((otherNode: Node | null) => boolean) | undefined;
|
|
188
|
+
isSameNode?: ((otherNode: Node | null) => boolean) | undefined;
|
|
189
|
+
lookupNamespaceURI?: ((prefix: string | null) => string | null) | undefined;
|
|
190
|
+
lookupPrefix?: ((namespace: string | null) => string | null) | undefined;
|
|
191
|
+
normalize?: (() => void) | undefined;
|
|
192
|
+
removeChild?: (<T extends Node>(child: T) => T) | undefined;
|
|
193
|
+
replaceChild?: (<T extends Node>(node: Node, child: T) => T) | undefined;
|
|
194
|
+
readonly ELEMENT_NODE?: 1 | undefined;
|
|
195
|
+
readonly ATTRIBUTE_NODE?: 2 | undefined;
|
|
196
|
+
readonly TEXT_NODE?: 3 | undefined;
|
|
197
|
+
readonly CDATA_SECTION_NODE?: 4 | undefined;
|
|
198
|
+
readonly ENTITY_REFERENCE_NODE?: 5 | undefined;
|
|
199
|
+
readonly ENTITY_NODE?: 6 | undefined;
|
|
200
|
+
readonly PROCESSING_INSTRUCTION_NODE?: 7 | undefined;
|
|
201
|
+
readonly COMMENT_NODE?: 8 | undefined;
|
|
202
|
+
readonly DOCUMENT_NODE?: 9 | undefined;
|
|
203
|
+
readonly DOCUMENT_TYPE_NODE?: 10 | undefined;
|
|
204
|
+
readonly DOCUMENT_FRAGMENT_NODE?: 11 | undefined;
|
|
205
|
+
readonly NOTATION_NODE?: 12 | undefined;
|
|
206
|
+
readonly DOCUMENT_POSITION_DISCONNECTED?: 1 | undefined;
|
|
207
|
+
readonly DOCUMENT_POSITION_PRECEDING?: 2 | undefined;
|
|
208
|
+
readonly DOCUMENT_POSITION_FOLLOWING?: 4 | undefined;
|
|
209
|
+
readonly DOCUMENT_POSITION_CONTAINS?: 8 | undefined;
|
|
210
|
+
readonly DOCUMENT_POSITION_CONTAINED_BY?: 16 | undefined;
|
|
211
|
+
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC?: 32 | undefined;
|
|
212
|
+
dispatchEvent?: ((event: Event) => boolean) | undefined;
|
|
213
|
+
ariaAtomic?: string | null | undefined;
|
|
214
|
+
ariaAutoComplete?: string | null | undefined;
|
|
215
|
+
ariaBrailleLabel?: string | null | undefined;
|
|
216
|
+
ariaBrailleRoleDescription?: string | null | undefined;
|
|
217
|
+
ariaBusy?: string | null | undefined;
|
|
218
|
+
ariaChecked?: string | null | undefined;
|
|
219
|
+
ariaColCount?: string | null | undefined;
|
|
220
|
+
ariaColIndex?: string | null | undefined;
|
|
221
|
+
ariaColSpan?: string | null | undefined;
|
|
222
|
+
ariaCurrent?: string | null | undefined;
|
|
223
|
+
ariaDescription?: string | null | undefined;
|
|
224
|
+
ariaDisabled?: string | null | undefined;
|
|
225
|
+
ariaExpanded?: string | null | undefined;
|
|
226
|
+
ariaHasPopup?: string | null | undefined;
|
|
227
|
+
ariaHidden?: string | null | undefined;
|
|
228
|
+
ariaInvalid?: string | null | undefined;
|
|
229
|
+
ariaKeyShortcuts?: string | null | undefined;
|
|
230
|
+
ariaLabel?: string | null | undefined;
|
|
231
|
+
ariaLevel?: string | null | undefined;
|
|
232
|
+
ariaLive?: string | null | undefined;
|
|
233
|
+
ariaModal?: string | null | undefined;
|
|
234
|
+
ariaMultiLine?: string | null | undefined;
|
|
235
|
+
ariaMultiSelectable?: string | null | undefined;
|
|
236
|
+
ariaOrientation?: string | null | undefined;
|
|
237
|
+
ariaPlaceholder?: string | null | undefined;
|
|
238
|
+
ariaPosInSet?: string | null | undefined;
|
|
239
|
+
ariaPressed?: string | null | undefined;
|
|
240
|
+
ariaReadOnly?: string | null | undefined;
|
|
241
|
+
ariaRequired?: string | null | undefined;
|
|
242
|
+
ariaRoleDescription?: string | null | undefined;
|
|
243
|
+
ariaRowCount?: string | null | undefined;
|
|
244
|
+
ariaRowIndex?: string | null | undefined;
|
|
245
|
+
ariaRowSpan?: string | null | undefined;
|
|
246
|
+
ariaSelected?: string | null | undefined;
|
|
247
|
+
ariaSetSize?: string | null | undefined;
|
|
248
|
+
ariaSort?: string | null | undefined;
|
|
249
|
+
ariaValueMax?: string | null | undefined;
|
|
250
|
+
ariaValueMin?: string | null | undefined;
|
|
251
|
+
ariaValueNow?: string | null | undefined;
|
|
252
|
+
ariaValueText?: string | null | undefined;
|
|
253
|
+
role?: string | null | undefined;
|
|
254
|
+
animate?: ((keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions) => Animation) | undefined;
|
|
255
|
+
getAnimations?: ((options?: GetAnimationsOptions) => Animation[]) | undefined;
|
|
256
|
+
after?: ((...nodes: (Node | string)[]) => void) | undefined;
|
|
257
|
+
before?: ((...nodes: (Node | string)[]) => void) | undefined;
|
|
258
|
+
remove?: (() => void) | undefined;
|
|
259
|
+
replaceWith?: ((...nodes: (Node | string)[]) => void) | undefined;
|
|
260
|
+
innerHTML?: string | undefined;
|
|
261
|
+
readonly nextElementSibling?: Element | null | undefined;
|
|
262
|
+
readonly previousElementSibling?: Element | null | undefined;
|
|
263
|
+
readonly childElementCount?: number | undefined;
|
|
264
|
+
readonly children?: HTMLCollection | undefined;
|
|
265
|
+
readonly firstElementChild?: Element | null | undefined;
|
|
266
|
+
readonly lastElementChild?: Element | null | undefined;
|
|
267
|
+
append?: ((...nodes: (Node | string)[]) => void) | undefined;
|
|
268
|
+
prepend?: ((...nodes: (Node | string)[]) => void) | undefined;
|
|
269
|
+
querySelector?: {
|
|
270
|
+
<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
|
|
271
|
+
<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
|
|
272
|
+
<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
|
|
273
|
+
<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
|
|
274
|
+
<E extends Element = Element>(selectors: string): E | null;
|
|
275
|
+
} | undefined;
|
|
276
|
+
querySelectorAll?: {
|
|
277
|
+
<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
|
|
278
|
+
<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
|
|
279
|
+
<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
|
|
280
|
+
<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
281
|
+
<E extends Element = Element>(selectors: string): NodeListOf<E>;
|
|
282
|
+
} | undefined;
|
|
283
|
+
replaceChildren?: ((...nodes: (Node | string)[]) => void) | undefined;
|
|
284
|
+
readonly assignedSlot?: HTMLSlotElement | null | undefined;
|
|
285
|
+
readonly attributeStyleMap?: StylePropertyMap | undefined;
|
|
286
|
+
readonly style?: CSSStyleDeclaration | undefined;
|
|
287
|
+
contentEditable?: string | undefined;
|
|
288
|
+
enterKeyHint?: string | undefined;
|
|
289
|
+
inputMode?: string | undefined;
|
|
290
|
+
readonly isContentEditable?: boolean | undefined;
|
|
291
|
+
onabort?: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null | undefined;
|
|
292
|
+
onanimationcancel?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
|
|
293
|
+
onanimationend?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
|
|
294
|
+
onanimationiteration?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
|
|
295
|
+
onanimationstart?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
|
|
296
|
+
onauxclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
297
|
+
onbeforeinput?: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null | undefined;
|
|
298
|
+
onbeforetoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
299
|
+
onblur?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
|
|
300
|
+
oncancel?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
301
|
+
oncanplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
302
|
+
oncanplaythrough?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
303
|
+
onchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
304
|
+
onclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
305
|
+
onclose?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
306
|
+
oncontextmenu?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
307
|
+
oncopy?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
|
|
308
|
+
oncuechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
309
|
+
oncut?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
|
|
310
|
+
ondblclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
311
|
+
ondrag?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
|
|
312
|
+
ondragend?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
|
|
313
|
+
ondragenter?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
|
|
314
|
+
ondragleave?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
|
|
315
|
+
ondragover?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
|
|
316
|
+
ondragstart?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
|
|
317
|
+
ondrop?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
|
|
318
|
+
ondurationchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
319
|
+
onemptied?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
320
|
+
onended?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
321
|
+
onerror?: OnErrorEventHandler | undefined;
|
|
322
|
+
onfocus?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
|
|
323
|
+
onformdata?: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null | undefined;
|
|
324
|
+
ongotpointercapture?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
325
|
+
oninput?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
326
|
+
oninvalid?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
327
|
+
onkeydown?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
|
|
328
|
+
onkeypress?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
|
|
329
|
+
onkeyup?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
|
|
330
|
+
onload?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
331
|
+
onloadeddata?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
332
|
+
onloadedmetadata?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
333
|
+
onloadstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
334
|
+
onlostpointercapture?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
335
|
+
onmousedown?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
336
|
+
onmouseenter?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
337
|
+
onmouseleave?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
338
|
+
onmousemove?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
339
|
+
onmouseout?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
340
|
+
onmouseover?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
341
|
+
onmouseup?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
|
|
342
|
+
onpaste?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
|
|
343
|
+
onpause?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
344
|
+
onplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
345
|
+
onplaying?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
346
|
+
onpointercancel?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
347
|
+
onpointerdown?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
348
|
+
onpointerenter?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
349
|
+
onpointerleave?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
350
|
+
onpointermove?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
351
|
+
onpointerout?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
352
|
+
onpointerover?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
353
|
+
onpointerup?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
|
|
354
|
+
onprogress?: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null | undefined;
|
|
355
|
+
onratechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
356
|
+
onreset?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
357
|
+
onresize?: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null | undefined;
|
|
358
|
+
onscroll?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
359
|
+
onscrollend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
360
|
+
onsecuritypolicyviolation?: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null | undefined;
|
|
361
|
+
onseeked?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
362
|
+
onseeking?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
363
|
+
onselect?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
364
|
+
onselectionchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
365
|
+
onselectstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
366
|
+
onslotchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
367
|
+
onstalled?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
368
|
+
onsubmit?: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null | undefined;
|
|
369
|
+
onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
370
|
+
ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
371
|
+
ontoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
372
|
+
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
373
|
+
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
374
|
+
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
375
|
+
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
376
|
+
ontransitioncancel?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
|
|
377
|
+
ontransitionend?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
|
|
378
|
+
ontransitionrun?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
|
|
379
|
+
ontransitionstart?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
|
|
380
|
+
onvolumechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
381
|
+
onwaiting?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
382
|
+
onwebkitanimationend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
383
|
+
onwebkitanimationiteration?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
384
|
+
onwebkitanimationstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
385
|
+
onwebkittransitionend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
|
|
386
|
+
onwheel?: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null | undefined;
|
|
387
|
+
autofocus?: boolean | undefined;
|
|
388
|
+
readonly dataset?: DOMStringMap | undefined;
|
|
389
|
+
nonce?: string | undefined;
|
|
390
|
+
tabIndex?: number | undefined;
|
|
391
|
+
blur?: (() => void) | undefined;
|
|
392
|
+
focus?: ((options?: FocusOptions) => void) | undefined;
|
|
393
|
+
}, "children"> & {
|
|
394
|
+
children?: import("react").ReactNode;
|
|
395
|
+
} & Omit<import("react").HTMLAttributes<HTMLElement>, "children"> & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import "../../../chunks/chunk.QU3DSPNU.js";
|
|
2
|
+
import { getReactComponent } from "../../../utils/react.js";
|
|
3
|
+
import { GdsTable as GdsTableClass } from "../../../components/table/table.component.js";
|
|
4
|
+
import { createElement } from "react";
|
|
5
|
+
const GdsTable = (props) => {
|
|
6
|
+
GdsTableClass.define();
|
|
7
|
+
const JSXElement = getReactComponent("gds-table");
|
|
8
|
+
const propsWithClass = { ...props, class: props.className };
|
|
9
|
+
return createElement(JSXElement, propsWithClass);
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
GdsTable
|
|
13
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sebgroup/green-core",
|
|
3
3
|
"description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.20.0-rc.20251215154321804",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
7
7
|
"type": "module",
|
|
@@ -476,6 +476,8 @@
|
|
|
476
476
|
"./components/mask/mask.js",
|
|
477
477
|
"./components/menu-button/index.js",
|
|
478
478
|
"./components/menu-button/menu-button.js",
|
|
479
|
+
"./components/pagination/index.js",
|
|
480
|
+
"./components/pagination/pagination.js",
|
|
479
481
|
"./components/popover/backdrop.js",
|
|
480
482
|
"./components/popover/index.js",
|
|
481
483
|
"./components/popover/popover.js",
|
|
@@ -501,6 +503,11 @@
|
|
|
501
503
|
"./components/signal/signal.js",
|
|
502
504
|
"./components/spinner/index.js",
|
|
503
505
|
"./components/spinner/spinner.js",
|
|
506
|
+
"./components/table/index.js",
|
|
507
|
+
"./components/table/table.imports.js",
|
|
508
|
+
"./components/table/table.js",
|
|
509
|
+
"./components/table/table.stories.data.js",
|
|
510
|
+
"./components/table/table.types.js",
|
|
504
511
|
"./components/text/index.js",
|
|
505
512
|
"./components/text/text.js",
|
|
506
513
|
"./components/textarea/index.js",
|
|
@@ -22,6 +22,7 @@ let GdsFieldBase = class extends GdsElement {
|
|
|
22
22
|
this.disabled = false;
|
|
23
23
|
this.invalid = false;
|
|
24
24
|
this._leadSlotOccupied = false;
|
|
25
|
+
this._leadHasBadge = false;
|
|
25
26
|
this._trailSlotOccupied = false;
|
|
26
27
|
this._actionSlotOccupied = false;
|
|
27
28
|
__privateAdd(this, _handleSlotChange, (slotName, event) => {
|
|
@@ -32,6 +33,9 @@ let GdsFieldBase = class extends GdsElement {
|
|
|
32
33
|
);
|
|
33
34
|
if (slotName === "lead") {
|
|
34
35
|
this._leadSlotOccupied = slotOccupied;
|
|
36
|
+
this._leadHasBadge = slotOccupied && assignedNodes.some(
|
|
37
|
+
(node) => node.getAttribute?.("gds-element") === "gds-badge"
|
|
38
|
+
);
|
|
35
39
|
} else if (slotName === "trail") {
|
|
36
40
|
this._trailSlotOccupied = slotOccupied;
|
|
37
41
|
} else if (slotName === "action") {
|
|
@@ -50,6 +54,7 @@ let GdsFieldBase = class extends GdsElement {
|
|
|
50
54
|
multiline: this.multiline,
|
|
51
55
|
disabled: this.disabled,
|
|
52
56
|
"lead-slot-occupied": this._leadSlotOccupied,
|
|
57
|
+
"lead-has-badge": this._leadHasBadge,
|
|
53
58
|
"trail-slot-occupied": this._trailSlotOccupied,
|
|
54
59
|
"action-slot-occupied": this._actionSlotOccupied,
|
|
55
60
|
small: this.size === "small"
|
|
@@ -135,6 +140,9 @@ __decorateClass([
|
|
|
135
140
|
__decorateClass([
|
|
136
141
|
state()
|
|
137
142
|
], GdsFieldBase.prototype, "_leadSlotOccupied", 2);
|
|
143
|
+
__decorateClass([
|
|
144
|
+
state()
|
|
145
|
+
], GdsFieldBase.prototype, "_leadHasBadge", 2);
|
|
138
146
|
__decorateClass([
|
|
139
147
|
state()
|
|
140
148
|
], GdsFieldBase.prototype, "_trailSlotOccupied", 2);
|
|
@@ -63,7 +63,7 @@ const style = css`
|
|
|
63
63
|
|
|
64
64
|
.field.small {
|
|
65
65
|
gap: var(--gds-sys-space-3xs);
|
|
66
|
-
padding:
|
|
66
|
+
padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
|
|
67
67
|
min-block-size: var(--gds-sys-space-2xl);
|
|
68
68
|
block-size: var(--gds-sys-space-2xl);
|
|
69
69
|
border-radius: var(--gds-sys-radius-2xs);
|
|
@@ -93,6 +93,14 @@ const style = css`
|
|
|
93
93
|
padding-inline-start: var(--gds-sys-space-s);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
+
.field.lead-has-badge {
|
|
97
|
+
padding-inline-start: var(--gds-sys-space-2xs);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.field.small.lead-has-badge {
|
|
101
|
+
padding-inline-start: var(--gds-sys-space-2xs);
|
|
102
|
+
}
|
|
103
|
+
|
|
96
104
|
.field.trail-slot-occupied {
|
|
97
105
|
padding-inline-end: var(--gds-sys-space-xs);
|
|
98
106
|
}
|
package/pure.d.ts
CHANGED
|
@@ -32,6 +32,7 @@ export * from './components/input/input.component';
|
|
|
32
32
|
export * from './components/link/link.component';
|
|
33
33
|
export * from './components/mask/mask.component';
|
|
34
34
|
export * from './components/menu-button/menu-button.component';
|
|
35
|
+
export * from './components/pagination/pagination.component';
|
|
35
36
|
export * from './components/popover/popover.component';
|
|
36
37
|
export * from './components/radio/radio-group/radio-group.component';
|
|
37
38
|
export * from './components/radio/radio.component';
|
|
@@ -44,6 +45,7 @@ export * from './components/select/select.component';
|
|
|
44
45
|
export * from './components/signal/signal.component';
|
|
45
46
|
export * from './components/spinner/spinner.component';
|
|
46
47
|
export * from './components/text/text.component';
|
|
48
|
+
export * from './components/table/table.component';
|
|
47
49
|
export * from './components/textarea/textarea.component';
|
|
48
50
|
export * from './components/theme/theme.component';
|
|
49
51
|
export * from './components/video/video.component';
|
package/pure.js
CHANGED
|
@@ -32,6 +32,7 @@ export * from "./components/input/input.component.js";
|
|
|
32
32
|
export * from "./components/link/link.component.js";
|
|
33
33
|
export * from "./components/mask/mask.component.js";
|
|
34
34
|
export * from "./components/menu-button/menu-button.component.js";
|
|
35
|
+
export * from "./components/pagination/pagination.component.js";
|
|
35
36
|
export * from "./components/popover/popover.component.js";
|
|
36
37
|
export * from "./components/radio/radio-group/radio-group.component.js";
|
|
37
38
|
export * from "./components/radio/radio.component.js";
|
|
@@ -44,6 +45,7 @@ export * from "./components/select/select.component.js";
|
|
|
44
45
|
export * from "./components/signal/signal.component.js";
|
|
45
46
|
export * from "./components/spinner/spinner.component.js";
|
|
46
47
|
export * from "./components/text/text.component.js";
|
|
48
|
+
export * from "./components/table/table.component.js";
|
|
47
49
|
export * from "./components/textarea/textarea.component.js";
|
|
48
50
|
export * from "./components/theme/theme.component.js";
|
|
49
51
|
export * from "./components/video/video.component.js";
|
|
@@ -24,7 +24,6 @@ var rbcb_toggle_style_default = css`
|
|
|
24
24
|
position: relative;
|
|
25
25
|
width: var(--_toggle-size);
|
|
26
26
|
height: var(--_toggle-size);
|
|
27
|
-
margin-block-start: calc(var(--gds-sys-space-5xs) * 2);
|
|
28
27
|
cursor: pointer;
|
|
29
28
|
}
|
|
30
29
|
|
|
@@ -92,7 +91,7 @@ var rbcb_toggle_style_default = css`
|
|
|
92
91
|
|
|
93
92
|
.--indeterminate .rbcb__toggle {
|
|
94
93
|
box-shadow: inset 0 0 0 var(--_toggle-border-width-checked)
|
|
95
|
-
var(--gds-sys-color-
|
|
94
|
+
var(--gds-sys-color-l3-neutral-01);
|
|
96
95
|
}
|
|
97
96
|
|
|
98
97
|
.--invalid.--indeterminate .rbcb__toggle {
|
|
@@ -138,6 +137,19 @@ var rbcb_toggle_style_default = css`
|
|
|
138
137
|
color: var(--gds-sys-color-content-negative-01);
|
|
139
138
|
}
|
|
140
139
|
|
|
140
|
+
/* Visually hidden checkbox */
|
|
141
|
+
.visually-hidden-checkbox {
|
|
142
|
+
position: absolute;
|
|
143
|
+
opacity: 0;
|
|
144
|
+
width: 0;
|
|
145
|
+
height: 0;
|
|
146
|
+
pointer-events: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.rbcb-wrapper {
|
|
150
|
+
position: relative;
|
|
151
|
+
}
|
|
152
|
+
|
|
141
153
|
/*
|
|
142
154
|
* When using the checkbox in a listbox, we need to remove the outline
|
|
143
155
|
* from the checkbox since it exsist on the list item
|
|
@@ -146,31 +158,48 @@ var rbcb_toggle_style_default = css`
|
|
|
146
158
|
outline: none;
|
|
147
159
|
}
|
|
148
160
|
|
|
149
|
-
:host(:focus-visible) .rbcb__perimeter,
|
|
150
|
-
:host(:focus-within) .rbcb__perimeter
|
|
161
|
+
:host([gds-element='gds-radio']:focus-visible) .rbcb__perimeter,
|
|
162
|
+
:host([gds-element='gds-radio']:focus-within) .rbcb__perimeter,
|
|
163
|
+
:host([gds-element='gds-checkbox']:focus-visible) .rbcb__perimeter,
|
|
164
|
+
:host([gds-element='gds-checkbox']:focus-within) .rbcb__perimeter,
|
|
165
|
+
.rbcb-wrapper:focus-visible .rbcb__perimeter,
|
|
166
|
+
.rbcb-wrapper:focus-within .rbcb__perimeter {
|
|
151
167
|
outline-width: var(--gds-sys-space-4xs);
|
|
152
168
|
scale: 1;
|
|
153
169
|
}
|
|
154
170
|
|
|
155
171
|
@media (hover: hover) {
|
|
156
|
-
|
|
157
|
-
|
|
172
|
+
:host([gds-element='gds-checkbox']:hover)
|
|
173
|
+
.rbcb:not(.--disabled)
|
|
174
|
+
.rbcb__perimeter,
|
|
175
|
+
:host([gds-element='gds-option']:hover)
|
|
176
|
+
.rbcb:not(.--disabled)
|
|
177
|
+
.rbcb__perimeter,
|
|
178
|
+
:host([gds-element='gds-radio']:hover)
|
|
179
|
+
.rbcb:not(.--disabled)
|
|
180
|
+
.rbcb__perimeter,
|
|
181
|
+
.rbcb:hover:not(.--disabled) .rbcb__perimeter {
|
|
158
182
|
background-color: var(--_perimeter-bg-mix);
|
|
159
183
|
scale: 1;
|
|
160
184
|
}
|
|
161
185
|
}
|
|
162
186
|
|
|
187
|
+
:host([gds-element='gds-checkbox']:active)
|
|
188
|
+
.rbcb:not(.--disabled)
|
|
189
|
+
.rbcb__perimeter,
|
|
190
|
+
:host([gds-element='gds-radio']:active)
|
|
191
|
+
.rbcb:not(.--disabled)
|
|
192
|
+
.rbcb__perimeter,
|
|
193
|
+
.rbcb:active:not(.--disabled) .rbcb__perimeter {
|
|
194
|
+
background-color: var(--_perimeter-bg-mix-active);
|
|
195
|
+
scale: 0.9;
|
|
196
|
+
}
|
|
197
|
+
|
|
163
198
|
@media (prefers-reduced-motion: reduce) {
|
|
164
199
|
.rbcb__toggle {
|
|
165
200
|
transition: none;
|
|
166
201
|
}
|
|
167
202
|
}
|
|
168
|
-
|
|
169
|
-
.rbcb:active:not(.--disabled) .rbcb__perimeter,
|
|
170
|
-
:host(:active) .rbcb:not(.--disabled) .rbcb__perimeter {
|
|
171
|
-
background-color: var(--_perimeter-bg-mix-active);
|
|
172
|
-
scale: 0.9;
|
|
173
|
-
}
|
|
174
203
|
`;
|
|
175
204
|
export {
|
|
176
205
|
rbcb_toggle_style_default as default
|