@cloudscape-design/components-themeable 3.0.1378 → 3.0.1380
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/checkbox/styles.scss +0 -17
- package/lib/internal/scss/internal/components/abstract-switch/styles.scss +9 -3
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/internal/styles/forms/mixins.scss +2 -2
- package/lib/internal/scss/table/body-cell/styles.scss +5 -3
- package/lib/internal/scss/table/cell-base/_cell-box.scss +14 -10
- package/lib/internal/scss/table/header-cell/styles.scss +6 -2
- package/lib/internal/scss/table/resizer/styles.scss +2 -1
- package/lib/internal/scss/table-body/styles.scss +12 -0
- package/lib/internal/scss/table-body-cell/styles.scss +41 -0
- package/lib/internal/scss/table-head/styles.scss +12 -0
- package/lib/internal/scss/table-header-cell/styles.scss +57 -0
- package/lib/internal/scss/table-root/styles.scss +39 -0
- package/lib/internal/scss/table-row/styles.scss +47 -0
- package/lib/internal/template/checkbox/internal.d.ts.map +1 -1
- package/lib/internal/template/checkbox/internal.js +1 -1
- package/lib/internal/template/checkbox/internal.js.map +1 -1
- package/lib/internal/template/checkbox/styles.css.js +3 -7
- package/lib/internal/template/checkbox/styles.scoped.css +5 -19
- package/lib/internal/template/checkbox/styles.selectors.js +3 -7
- package/lib/internal/template/index.d.ts +6 -0
- package/lib/internal/template/index.d.ts.map +1 -1
- package/lib/internal/template/index.js +6 -0
- package/lib/internal/template/index.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/abstract-switch/styles.css.js +13 -13
- package/lib/internal/template/internal/components/abstract-switch/styles.scoped.css +23 -23
- package/lib/internal/template/internal/components/abstract-switch/styles.selectors.js +13 -13
- package/lib/internal/template/internal/components/radio-button/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/radio-button/index.js +2 -2
- package/lib/internal/template/internal/components/radio-button/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/package.json +18 -0
- package/lib/internal/template/radio-button/interfaces.d.ts +14 -0
- package/lib/internal/template/radio-button/interfaces.d.ts.map +1 -1
- package/lib/internal/template/radio-button/interfaces.js.map +1 -1
- package/lib/internal/template/table/body-cell/styles.css.js +47 -46
- package/lib/internal/template/table/body-cell/styles.scoped.css +376 -376
- package/lib/internal/template/table/body-cell/styles.selectors.js +47 -46
- package/lib/internal/template/table/body-cell/td-element.d.ts.map +1 -1
- package/lib/internal/template/table/body-cell/td-element.js +12 -12
- package/lib/internal/template/table/body-cell/td-element.js.map +1 -1
- package/lib/internal/template/table/header-cell/styles.css.js +39 -38
- package/lib/internal/template/table/header-cell/styles.scoped.css +80 -80
- package/lib/internal/template/table/header-cell/styles.selectors.js +39 -38
- package/lib/internal/template/table/header-cell/th-element.d.ts.map +1 -1
- package/lib/internal/template/table/header-cell/th-element.js +18 -8
- package/lib/internal/template/table/header-cell/th-element.js.map +1 -1
- package/lib/internal/template/table/internal.d.ts.map +1 -1
- package/lib/internal/template/table/internal.js +9 -3
- package/lib/internal/template/table/internal.js.map +1 -1
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.js +13 -3
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.js.map +1 -1
- package/lib/internal/template/table-body/index.d.ts +5 -0
- package/lib/internal/template/table-body/index.d.ts.map +1 -0
- package/lib/internal/template/table-body/index.js +14 -0
- package/lib/internal/template/table-body/index.js.map +1 -0
- package/lib/internal/template/table-body/interfaces.d.ts +18 -0
- package/lib/internal/template/table-body/interfaces.d.ts.map +1 -0
- package/lib/internal/template/table-body/interfaces.js +2 -0
- package/lib/internal/template/table-body/interfaces.js.map +1 -0
- package/lib/internal/template/table-body/internal.d.ts +7 -0
- package/lib/internal/template/table-body/internal.d.ts.map +1 -0
- package/lib/internal/template/table-body/internal.js +13 -0
- package/lib/internal/template/table-body/internal.js.map +1 -0
- package/lib/internal/template/table-body/styles.css.js +7 -0
- package/lib/internal/template/table-body/styles.scoped.css +11 -0
- package/lib/internal/template/table-body/styles.selectors.js +8 -0
- package/lib/internal/template/table-body-cell/index.d.ts +5 -0
- package/lib/internal/template/table-body-cell/index.d.ts.map +1 -0
- package/lib/internal/template/table-body-cell/index.js +17 -0
- package/lib/internal/template/table-body-cell/index.js.map +1 -0
- package/lib/internal/template/table-body-cell/interfaces.d.ts +21 -0
- package/lib/internal/template/table-body-cell/interfaces.d.ts.map +1 -0
- package/lib/internal/template/table-body-cell/interfaces.js +2 -0
- package/lib/internal/template/table-body-cell/interfaces.js.map +1 -0
- package/lib/internal/template/table-body-cell/internal.d.ts +26 -0
- package/lib/internal/template/table-body-cell/internal.d.ts.map +1 -0
- package/lib/internal/template/table-body-cell/internal.js +36 -0
- package/lib/internal/template/table-body-cell/internal.js.map +1 -0
- package/lib/internal/template/table-body-cell/styles.css.js +7 -0
- package/lib/internal/template/table-body-cell/styles.scoped.css +38 -0
- package/lib/internal/template/table-body-cell/styles.selectors.js +8 -0
- package/lib/internal/template/table-head/index.d.ts +5 -0
- package/lib/internal/template/table-head/index.d.ts.map +1 -0
- package/lib/internal/template/table-head/index.js +14 -0
- package/lib/internal/template/table-head/index.js.map +1 -0
- package/lib/internal/template/table-head/interfaces.d.ts +8 -0
- package/lib/internal/template/table-head/interfaces.d.ts.map +1 -0
- package/lib/internal/template/table-head/interfaces.js +2 -0
- package/lib/internal/template/table-head/interfaces.js.map +1 -0
- package/lib/internal/template/table-head/internal.d.ts +6 -0
- package/lib/internal/template/table-head/internal.d.ts.map +1 -0
- package/lib/internal/template/table-head/internal.js +13 -0
- package/lib/internal/template/table-head/internal.js.map +1 -0
- package/lib/internal/template/table-head/styles.css.js +7 -0
- package/lib/internal/template/table-head/styles.scoped.css +11 -0
- package/lib/internal/template/table-head/styles.selectors.js +8 -0
- package/lib/internal/template/table-header-cell/index.d.ts +5 -0
- package/lib/internal/template/table-header-cell/index.d.ts.map +1 -0
- package/lib/internal/template/table-header-cell/index.js +16 -0
- package/lib/internal/template/table-header-cell/index.js.map +1 -0
- package/lib/internal/template/table-header-cell/interfaces.d.ts +22 -0
- package/lib/internal/template/table-header-cell/interfaces.d.ts.map +1 -0
- package/lib/internal/template/table-header-cell/interfaces.js +2 -0
- package/lib/internal/template/table-header-cell/interfaces.js.map +1 -0
- package/lib/internal/template/table-header-cell/internal.d.ts +18 -0
- package/lib/internal/template/table-header-cell/internal.d.ts.map +1 -0
- package/lib/internal/template/table-header-cell/internal.js +33 -0
- package/lib/internal/template/table-header-cell/internal.js.map +1 -0
- package/lib/internal/template/table-header-cell/styles.css.js +11 -0
- package/lib/internal/template/table-header-cell/styles.scoped.css +49 -0
- package/lib/internal/template/table-header-cell/styles.selectors.js +12 -0
- package/lib/internal/template/table-root/context.d.ts +10 -0
- package/lib/internal/template/table-root/context.d.ts.map +1 -0
- package/lib/internal/template/table-root/context.js +16 -0
- package/lib/internal/template/table-root/context.js.map +1 -0
- package/lib/internal/template/table-root/grid-template-columns.d.ts +3 -0
- package/lib/internal/template/table-root/grid-template-columns.d.ts.map +1 -0
- package/lib/internal/template/table-root/grid-template-columns.js +34 -0
- package/lib/internal/template/table-root/grid-template-columns.js.map +1 -0
- package/lib/internal/template/table-root/index.d.ts +5 -0
- package/lib/internal/template/table-root/index.d.ts.map +1 -0
- package/lib/internal/template/table-root/index.js +17 -0
- package/lib/internal/template/table-root/index.js.map +1 -0
- package/lib/internal/template/table-root/interfaces.d.ts +64 -0
- package/lib/internal/template/table-root/interfaces.d.ts.map +1 -0
- package/lib/internal/template/table-root/interfaces.js +2 -0
- package/lib/internal/template/table-root/interfaces.js.map +1 -0
- package/lib/internal/template/table-root/internal.d.ts +6 -0
- package/lib/internal/template/table-root/internal.d.ts.map +1 -0
- package/lib/internal/template/table-root/internal.js +58 -0
- package/lib/internal/template/table-root/internal.js.map +1 -0
- package/lib/internal/template/table-root/styles.css.js +10 -0
- package/lib/internal/template/table-root/styles.scoped.css +71 -0
- package/lib/internal/template/table-root/styles.selectors.js +11 -0
- package/lib/internal/template/table-row/index.d.ts +5 -0
- package/lib/internal/template/table-row/index.d.ts.map +1 -0
- package/lib/internal/template/table-row/index.js +16 -0
- package/lib/internal/template/table-row/index.js.map +1 -0
- package/lib/internal/template/table-row/interfaces.d.ts +39 -0
- package/lib/internal/template/table-row/interfaces.d.ts.map +1 -0
- package/lib/internal/template/table-row/interfaces.js +2 -0
- package/lib/internal/template/table-row/interfaces.js.map +1 -0
- package/lib/internal/template/table-row/internal.d.ts +6 -0
- package/lib/internal/template/table-row/internal.d.ts.map +1 -0
- package/lib/internal/template/table-row/internal.js +13 -0
- package/lib/internal/template/table-row/internal.js.map +1 -0
- package/lib/internal/template/table-row/styles.css.js +7 -0
- package/lib/internal/template/table-row/styles.scoped.css +42 -0
- package/lib/internal/template/table-row/styles.selectors.js +8 -0
- package/lib/internal/template/test-utils/dom/index.d.ts +168 -0
- package/lib/internal/template/test-utils/dom/index.js +116 -1
- package/lib/internal/template/test-utils/dom/index.js.map +1 -1
- package/lib/internal/template/test-utils/dom/table-body/index.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/table-body/index.js +11 -0
- package/lib/internal/template/test-utils/dom/table-body/index.js.map +1 -0
- package/lib/internal/template/test-utils/dom/table-body-cell/index.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/table-body-cell/index.js +11 -0
- package/lib/internal/template/test-utils/dom/table-body-cell/index.js.map +1 -0
- package/lib/internal/template/test-utils/dom/table-head/index.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/table-head/index.js +11 -0
- package/lib/internal/template/test-utils/dom/table-head/index.js.map +1 -0
- package/lib/internal/template/test-utils/dom/table-header-cell/index.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/table-header-cell/index.js +11 -0
- package/lib/internal/template/test-utils/dom/table-header-cell/index.js.map +1 -0
- package/lib/internal/template/test-utils/dom/table-root/index.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/table-root/index.js +11 -0
- package/lib/internal/template/test-utils/dom/table-root/index.js.map +1 -0
- package/lib/internal/template/test-utils/dom/table-row/index.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/table-row/index.js +11 -0
- package/lib/internal/template/test-utils/dom/table-row/index.js.map +1 -0
- package/lib/internal/template/test-utils/selectors/index.d.ts +108 -0
- package/lib/internal/template/test-utils/selectors/index.js +86 -1
- package/lib/internal/template/test-utils/selectors/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/table-body/index.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/table-body/index.js +11 -0
- package/lib/internal/template/test-utils/selectors/table-body/index.js.map +1 -0
- package/lib/internal/template/test-utils/selectors/table-body-cell/index.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/table-body-cell/index.js +11 -0
- package/lib/internal/template/test-utils/selectors/table-body-cell/index.js.map +1 -0
- package/lib/internal/template/test-utils/selectors/table-head/index.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/table-head/index.js +11 -0
- package/lib/internal/template/test-utils/selectors/table-head/index.js.map +1 -0
- package/lib/internal/template/test-utils/selectors/table-header-cell/index.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/table-header-cell/index.js +11 -0
- package/lib/internal/template/test-utils/selectors/table-header-cell/index.js.map +1 -0
- package/lib/internal/template/test-utils/selectors/table-root/index.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/table-root/index.js +11 -0
- package/lib/internal/template/test-utils/selectors/table-root/index.js.map +1 -0
- package/lib/internal/template/test-utils/selectors/table-row/index.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/table-row/index.js +11 -0
- package/lib/internal/template/test-utils/selectors/table-row/index.js.map +1 -0
- package/package.json +1 -1
|
@@ -40,20 +40,3 @@ $description-tokens: style-api.resolve((color), public);
|
|
|
40
40
|
$color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
|
|
41
41
|
);
|
|
42
42
|
}
|
|
43
|
-
|
|
44
|
-
// double selectors bump specificity above the abstract switch rules applied to the same elements
|
|
45
|
-
@if style-api.enabled() {
|
|
46
|
-
.label.label {
|
|
47
|
-
color: style-api.value($label-tokens, color, awsui.$color-text-form-default);
|
|
48
|
-
&.label-disabled {
|
|
49
|
-
color: style-api.value($label-tokens, color, awsui.$color-text-control-disabled);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.description.description {
|
|
54
|
-
color: style-api.value($description-tokens, color, awsui.$color-text-form-secondary);
|
|
55
|
-
&.description-disabled {
|
|
56
|
-
color: style-api.value($description-tokens, color, awsui.$color-text-control-disabled);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
@@ -5,8 +5,12 @@
|
|
|
5
5
|
|
|
6
6
|
@use '../../styles' as styles;
|
|
7
7
|
@use '../../styles/tokens' as awsui;
|
|
8
|
+
@use '../../styles/style-api' as style-api;
|
|
8
9
|
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
|
|
9
10
|
|
|
11
|
+
// The owning component's label / description slot classes land on these elements themselves.
|
|
12
|
+
$_text-tokens: style-api.resolve((color), public);
|
|
13
|
+
|
|
10
14
|
.content,
|
|
11
15
|
.description,
|
|
12
16
|
.label {
|
|
@@ -14,7 +18,7 @@
|
|
|
14
18
|
}
|
|
15
19
|
|
|
16
20
|
.label {
|
|
17
|
-
color: awsui.$color-text-form-default;
|
|
21
|
+
color: style-api.value($_text-tokens, color, awsui.$color-text-form-default);
|
|
18
22
|
}
|
|
19
23
|
|
|
20
24
|
.outline {
|
|
@@ -51,7 +55,9 @@
|
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
.description {
|
|
54
|
-
@include styles.form-control-description
|
|
58
|
+
@include styles.form-control-description(
|
|
59
|
+
$color: style-api.value($_text-tokens, color, awsui.$color-text-form-secondary)
|
|
60
|
+
);
|
|
55
61
|
&-bottom-padding {
|
|
56
62
|
padding-block-end: awsui.$space-scaled-xxs;
|
|
57
63
|
}
|
|
@@ -61,7 +67,7 @@
|
|
|
61
67
|
.description {
|
|
62
68
|
padding-inline-start: awsui.$space-xs;
|
|
63
69
|
&-disabled {
|
|
64
|
-
color: awsui.$color-text-control-disabled;
|
|
70
|
+
color: style-api.value($_text-tokens, color, awsui.$color-text-control-disabled);
|
|
65
71
|
}
|
|
66
72
|
}
|
|
67
73
|
|
|
@@ -191,8 +191,8 @@
|
|
|
191
191
|
color: $color;
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
@mixin form-control-description {
|
|
195
|
-
color:
|
|
194
|
+
@mixin form-control-description($color: awsui.$color-text-form-secondary) {
|
|
195
|
+
color: $color;
|
|
196
196
|
@include typography.font-body-s;
|
|
197
197
|
}
|
|
198
198
|
|
|
@@ -82,7 +82,7 @@ $editing-cell-padding-block: awsui.$space-scaled-xxxs;
|
|
|
82
82
|
&-content {
|
|
83
83
|
box-sizing: border-box;
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
&.with-paddings:not(.body-cell-wrap) {
|
|
86
86
|
white-space: nowrap;
|
|
87
87
|
overflow: hidden;
|
|
88
88
|
text-overflow: ellipsis;
|
|
@@ -136,8 +136,10 @@ $editing-cell-padding-block: awsui.$space-scaled-xxxs;
|
|
|
136
136
|
border-inline-start: none;
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
|
-
//
|
|
140
|
-
//
|
|
139
|
+
// First/last-row transparent placeholder. `:not(.body-cell-selected)` keeps a selected row's own border.
|
|
140
|
+
// Keyed on `.body-cell` with no grid-mode guard, so it is the single source of the placeholder for
|
|
141
|
+
// every cell — the existing Table's rows and the atomic cells (grid and auto) alike; load-bearing for
|
|
142
|
+
// grid selection-control centering.
|
|
141
143
|
tr:first-child > &:not(.body-cell-selected) {
|
|
142
144
|
border-block-start: cell-base.$border-placeholder;
|
|
143
145
|
}
|
|
@@ -4,23 +4,27 @@
|
|
|
4
4
|
@use '../../internal/styles/tokens' as awsui;
|
|
5
5
|
|
|
6
6
|
$cell-vertical-padding: awsui.$space-scaled-xs;
|
|
7
|
-
//
|
|
8
|
-
// between selected border widths and normal row divider widths (visual refresh).
|
|
7
|
+
// Extra padding so content doesn't shift on selection (VR: the selected border is wider than the divider).
|
|
9
8
|
$cell-vertical-padding-w-border: calc(
|
|
10
9
|
#{$cell-vertical-padding} + (#{awsui.$border-item-width} - #{awsui.$border-divider-list-width})
|
|
11
10
|
);
|
|
12
11
|
$cell-horizontal-padding: awsui.$space-scaled-l;
|
|
13
12
|
$cell-edge-horizontal-padding: calc(#{awsui.$space-l} - #{awsui.$border-item-width});
|
|
14
13
|
$border-placeholder: awsui.$border-item-width solid transparent;
|
|
14
|
+
// Divider inset from the cell's top/bottom edges. Shared with the existing Table's resizer so the two match.
|
|
15
|
+
$divider-block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
|
|
15
16
|
$cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
|
|
16
|
-
//
|
|
17
|
+
// Space reserved for focus outlines of focusable cell content.
|
|
17
18
|
$cell-negative-space-vertical: 2px;
|
|
18
19
|
|
|
20
|
+
// Padding is opt-in: only content carrying `.with-paddings` gets it (stamped unless `disablePaddings`).
|
|
21
|
+
// A control cell omits the class, so no padding/negative-margin applies — nothing to override, at any
|
|
22
|
+
// specificity, even as new edge/state rules are added.
|
|
19
23
|
@mixin cell-padding-inline-start($padding) {
|
|
20
24
|
$max-nesting-levels: 9;
|
|
21
25
|
$offset-padding: calc($padding - 1 * awsui.$border-divider-list-width);
|
|
22
26
|
|
|
23
|
-
> .body-cell-content {
|
|
27
|
+
> .body-cell-content.with-paddings {
|
|
24
28
|
padding-inline-start: $offset-padding;
|
|
25
29
|
}
|
|
26
30
|
> .expandable-toggle-wrapper {
|
|
@@ -29,7 +33,7 @@ $cell-negative-space-vertical: 2px;
|
|
|
29
33
|
|
|
30
34
|
@for $i from 0 through $max-nesting-levels {
|
|
31
35
|
&.expandable-level-#{$i} {
|
|
32
|
-
> .body-cell-content {
|
|
36
|
+
> .body-cell-content.with-paddings {
|
|
33
37
|
padding-inline-start: calc(#{$offset-padding} / 2);
|
|
34
38
|
margin-inline-start: calc(#{$offset-padding} / 2 + #{$i} * #{$cell-offset});
|
|
35
39
|
}
|
|
@@ -39,7 +43,7 @@ $cell-negative-space-vertical: 2px;
|
|
|
39
43
|
}
|
|
40
44
|
}
|
|
41
45
|
&.expandable-level-next {
|
|
42
|
-
> .body-cell-content {
|
|
46
|
+
> .body-cell-content.with-paddings {
|
|
43
47
|
padding-inline-start: calc(#{$offset-padding} / 2);
|
|
44
48
|
margin-inline-start: calc(#{$offset-padding} / 2 + #{$max-nesting-levels} * #{$cell-offset});
|
|
45
49
|
}
|
|
@@ -49,24 +53,24 @@ $cell-negative-space-vertical: 2px;
|
|
|
49
53
|
}
|
|
50
54
|
}
|
|
51
55
|
@mixin cell-padding-inline-end($padding) {
|
|
52
|
-
> .body-cell-content {
|
|
56
|
+
> .body-cell-content.with-paddings {
|
|
53
57
|
padding-inline-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
|
|
54
58
|
}
|
|
55
59
|
}
|
|
56
60
|
@mixin cell-padding-block($padding) {
|
|
57
|
-
> .body-cell-content {
|
|
61
|
+
> .body-cell-content.with-paddings {
|
|
58
62
|
padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
|
|
59
63
|
margin-block: calc(-1 * #{$cell-negative-space-vertical});
|
|
60
64
|
}
|
|
61
65
|
}
|
|
62
66
|
@mixin cell-padding-block-start($padding) {
|
|
63
|
-
> .body-cell-content {
|
|
67
|
+
> .body-cell-content.with-paddings {
|
|
64
68
|
padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
|
|
65
69
|
margin-block-start: calc(-1 * #{$cell-negative-space-vertical});
|
|
66
70
|
}
|
|
67
71
|
}
|
|
68
72
|
@mixin cell-padding-block-end($padding) {
|
|
69
|
-
> .body-cell-content {
|
|
73
|
+
> .body-cell-content.with-paddings {
|
|
70
74
|
padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
|
|
71
75
|
margin-block-end: calc(-1 * #{$cell-negative-space-vertical});
|
|
72
76
|
}
|
|
@@ -295,7 +295,9 @@ settings icon in the pagination slot.
|
|
|
295
295
|
@include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
|
|
296
296
|
}
|
|
297
297
|
|
|
298
|
-
|
|
298
|
+
// Opt-in gate: a control header (`disablePaddings`) omits `.with-paddings`, so this high-specificity
|
|
299
|
+
// <th> offset simply doesn't apply — a low-specificity reset could not override it.
|
|
300
|
+
&:first-child.with-paddings:not(.has-striped-rows):not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(
|
|
299
301
|
.header-cell-grouped
|
|
300
302
|
) {
|
|
301
303
|
@include cell-offset(awsui.$space-xxxs);
|
|
@@ -306,7 +308,9 @@ settings icon in the pagination slot.
|
|
|
306
308
|
shaded background makes the child content appear too close
|
|
307
309
|
to the table edge.
|
|
308
310
|
*/
|
|
309
|
-
&:first-child.has-striped-rows:not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(
|
|
311
|
+
&:first-child.with-paddings.has-striped-rows:not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(
|
|
312
|
+
.header-cell-grouped
|
|
313
|
+
) {
|
|
310
314
|
@include cell-offset(awsui.$space-xxs);
|
|
311
315
|
}
|
|
312
316
|
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
@use '../../internal/styles/index' as styles;
|
|
7
7
|
@use '../../internal/styles/tokens' as awsui;
|
|
8
|
+
@use '../cell-base/cell-box' as cell-base;
|
|
8
9
|
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
|
|
9
10
|
|
|
10
11
|
//stylelint-disable-next-line selector-combinator-disallowed-list,selector-max-universal
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
|
|
16
17
|
$handle-width: awsui.$space-xl;
|
|
17
18
|
$active-separator-width: 2px;
|
|
18
|
-
$block-gap:
|
|
19
|
+
$block-gap: cell-base.$divider-block-gap;
|
|
19
20
|
|
|
20
21
|
.resizer-wrapper {
|
|
21
22
|
inset-block: 0;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@use '../internal/styles/tokens' as awsui;
|
|
7
|
+
|
|
8
|
+
.cell {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Selection is a background fill plus a layout-neutral `::after` ring: the cell keeps the base
|
|
13
|
+
// `.body-cell` borders/padding, so the row never grows and content never shifts on toggle.
|
|
14
|
+
[data-awsui-selected] > .cell {
|
|
15
|
+
background-color: awsui.$color-background-item-selected;
|
|
16
|
+
}
|
|
17
|
+
[data-awsui-shaded] > .cell {
|
|
18
|
+
background-color: awsui.$color-background-cell-shaded;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
tr:has(+ [data-awsui-shaded]) > .cell {
|
|
22
|
+
border-block-end-color: awsui.$color-border-cell-shaded;
|
|
23
|
+
}
|
|
24
|
+
[data-awsui-shaded]:not(:last-child) > .cell {
|
|
25
|
+
border-block-end-color: awsui.$color-border-cell-shaded;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
[data-awsui-selected]:has(+ [data-awsui-selected]) > .cell {
|
|
29
|
+
border-block-end-color: transparent;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
tr:not([data-awsui-selected]):has(+ [data-awsui-selected]) > .cell {
|
|
33
|
+
border-block-end-color: transparent;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.cell-grid {
|
|
37
|
+
min-inline-size: 0;
|
|
38
|
+
align-self: stretch;
|
|
39
|
+
display: grid;
|
|
40
|
+
align-items: center;
|
|
41
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@use '../internal/styles/tokens' as awsui;
|
|
7
|
+
@use '../table/cell-base/cell-box' as cell-base;
|
|
8
|
+
|
|
9
|
+
.header-cell {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Presentation-only divider `::after` (the substrate has no Resizer child); geometry mirrors the existing
|
|
14
|
+
// Table's resizer `.divider` via the shared `$divider-block-gap`.
|
|
15
|
+
.header-cell:not(:last-child):not(.no-divider)::after {
|
|
16
|
+
content: '';
|
|
17
|
+
position: absolute;
|
|
18
|
+
inset-inline-end: 0;
|
|
19
|
+
inset-block-start: 0;
|
|
20
|
+
inset-block-end: 0;
|
|
21
|
+
min-block-size: awsui.$line-height-heading-xs;
|
|
22
|
+
max-block-size: calc(100% - #{cell-base.$divider-block-gap});
|
|
23
|
+
margin-block: auto;
|
|
24
|
+
border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
pointer-events: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.header-cell.disable-paddings {
|
|
30
|
+
padding-block: 0;
|
|
31
|
+
padding-inline: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.header-cell-content {
|
|
35
|
+
padding-block: awsui.$space-scaled-xxs;
|
|
36
|
+
padding-inline-start: awsui.$space-s;
|
|
37
|
+
padding-inline-end: awsui.$space-s;
|
|
38
|
+
line-height: awsui.$line-height-body-m;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.header-cell.disable-paddings > .header-cell-content {
|
|
42
|
+
padding-block: 0;
|
|
43
|
+
padding-inline: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// VR-gated: the substrate is shared with the existing Table, which still supports non-VR mode.
|
|
47
|
+
.header-cell.is-visual-refresh:first-child > .header-cell-content {
|
|
48
|
+
padding-inline-start: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Stretch to the row track, else an empty control header collapses to ~1px, leaving a stray divider stub.
|
|
52
|
+
.header-cell-grid {
|
|
53
|
+
min-inline-size: 0;
|
|
54
|
+
align-self: stretch;
|
|
55
|
+
display: grid;
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@use '../internal/styles/index' as styles;
|
|
7
|
+
@use '../internal/styles/tokens' as awsui;
|
|
8
|
+
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
|
|
9
|
+
|
|
10
|
+
.root {
|
|
11
|
+
@include styles.styles-reset;
|
|
12
|
+
position: relative;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
inline-size: 100%;
|
|
16
|
+
background: awsui.$color-background-container-content;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.body-scroller {
|
|
20
|
+
overflow-x: auto;
|
|
21
|
+
@include focus-visible.when-visible {
|
|
22
|
+
@include styles.container-focus();
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.table {
|
|
27
|
+
inline-size: 100%;
|
|
28
|
+
// Separate borders: the collapsed model breaks sticky columns and blurs the selected-row outline corners.
|
|
29
|
+
border-collapse: separate;
|
|
30
|
+
border-spacing: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.table-auto {
|
|
34
|
+
table-layout: auto;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.table-grid {
|
|
38
|
+
display: block;
|
|
39
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@use '../internal/styles/tokens' as awsui;
|
|
7
|
+
|
|
8
|
+
.row {
|
|
9
|
+
position: relative;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.row-grid {
|
|
14
|
+
display: grid;
|
|
15
|
+
inline-size: 100%;
|
|
16
|
+
align-items: center;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Selection outline drawn as a layout-neutral `::after` on the row. Scoped to the hashed `.row` (not the
|
|
20
|
+
// bare `data-awsui-selected` attribute) so it can't leak onto unrelated consumer elements. In grid mode
|
|
21
|
+
// the abs-pos `::after` is a grid item — its containing block is the column tracks, so `inset:0` hugs the
|
|
22
|
+
// columns (stops at underfill, follows overflow); auto mode falls back to the row box.
|
|
23
|
+
.row[data-awsui-selected]::after {
|
|
24
|
+
content: '';
|
|
25
|
+
position: absolute;
|
|
26
|
+
inset: 0;
|
|
27
|
+
grid-column: 1 / -1;
|
|
28
|
+
grid-row: 1;
|
|
29
|
+
border-block-start: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
|
|
30
|
+
border-block-end: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
|
|
31
|
+
border-inline-start: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
|
|
32
|
+
border-inline-end: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
|
|
33
|
+
border-start-start-radius: awsui.$border-radius-item;
|
|
34
|
+
border-start-end-radius: awsui.$border-radius-item;
|
|
35
|
+
border-end-start-radius: awsui.$border-radius-item;
|
|
36
|
+
border-end-end-radius: awsui.$border-radius-item;
|
|
37
|
+
pointer-events: none;
|
|
38
|
+
}
|
|
39
|
+
.row[data-awsui-selected]:has(+ .row[data-awsui-selected])::after {
|
|
40
|
+
border-end-start-radius: 0;
|
|
41
|
+
border-end-end-radius: 0;
|
|
42
|
+
}
|
|
43
|
+
.row[data-awsui-selected] + .row[data-awsui-selected]::after {
|
|
44
|
+
border-block-start-width: 0;
|
|
45
|
+
border-start-start-radius: 0;
|
|
46
|
+
border-start-end-radius: 0;
|
|
47
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,UAAU,aAAc,SAAQ,aAAa,EAAE,0BAA0B;IACvE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,UAAU,aAAc,SAAQ,aAAa,EAAE,0BAA0B;IACvE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,yFAoHrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -38,7 +38,7 @@ const InternalCheckbox = React.forwardRef(({ controlId, name, checked, disabled,
|
|
|
38
38
|
if (!disabled && !readOnly) {
|
|
39
39
|
analyticsMetadata.action = !checked ? 'select' : 'deselect';
|
|
40
40
|
}
|
|
41
|
-
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.control, styles['checkbox-control']), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, labelClassName:
|
|
41
|
+
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.control, styles['checkbox-control']), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, labelClassName: styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.label, description: description, descriptionClassName: styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, showOutline: showOutline, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Checkbox", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-required": ariaRequired ? 'true' : undefined, "aria-disabled": readOnly && !disabled ? 'true' : undefined, tabIndex: tabIndex, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
|
|
42
42
|
// empty handler to suppress React controllability warning
|
|
43
43
|
onChange: () => { } })), onClick: () => {
|
|
44
44
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataCheckboxComponent } from './analytics-metadata/interfaces';\nimport { CheckboxProps } from './interfaces';\nimport { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n tabIndex?: -1;\n showOutline?: boolean;\n styleClassNames?: StyleClassNames;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\n// Style API v2\ninterface StyleClassNames {\n control?: string;\n label?: string;\n description?: string;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n (\n {\n controlId,\n name,\n checked,\n disabled,\n readOnly,\n ariaRequired,\n indeterminate,\n children,\n description,\n ariaLabel,\n onFocus,\n onBlur,\n onChange,\n tabIndex: explicitTabIndex,\n showOutline,\n ariaControls,\n style,\n styleClassNames,\n nativeInputAttributes,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = Boolean(indeterminate);\n }\n });\n\n const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataCheckboxComponent = {\n name: 'awsui.Checkbox',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(styleClassNames?.control, styles['checkbox-control'])}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n labelClassName={styleClassNames?.label}\n description={description}\n descriptionClassName={styleClassNames?.description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n showOutline={showOutline}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n {...nativeControlProps}\n tag=\"input\"\n componentName=\"Checkbox\"\n nativeAttributes={nativeInputAttributes}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-required={ariaRequired ? 'true' : undefined}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n tabIndex={tabIndex}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(\n onChange,\n // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n );\n }}\n styledControl={\n <CheckboxIcon\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n readOnly={readOnly}\n style={getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalCheckbox;\n"]}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"checkbox-control": "awsui_checkbox-
|
|
6
|
-
"outline": "
|
|
7
|
-
"label": "awsui_label_k2y2q_1la84_115",
|
|
8
|
-
"label-disabled": "awsui_label-disabled_k2y2q_1la84_118",
|
|
9
|
-
"description": "awsui_description_k2y2q_1la84_122",
|
|
10
|
-
"description-disabled": "awsui_description-disabled_k2y2q_1la84_125"
|
|
4
|
+
"root": "awsui_root_k2y2q_yg29d_44",
|
|
5
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_yg29d_77",
|
|
6
|
+
"outline": "awsui_outline_k2y2q_yg29d_93"
|
|
11
7
|
};
|
|
12
8
|
|
|
@@ -41,7 +41,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
41
41
|
/* awsui:style-api-slot name=control tokens=color, background-color, border-color, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
|
|
42
42
|
/* awsui:style-api-slot name=label tokens=color */
|
|
43
43
|
/* awsui:style-api-slot name=description tokens=color */
|
|
44
|
-
.
|
|
44
|
+
.awsui_root_k2y2q_yg29d_44.awsui_root_k2y2q_yg29d_44:not(#\9) {
|
|
45
45
|
border-collapse: separate;
|
|
46
46
|
border-spacing: 0;
|
|
47
47
|
box-sizing: border-box;
|
|
@@ -74,7 +74,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
74
74
|
display: flex;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
.awsui_checkbox-
|
|
77
|
+
.awsui_checkbox-control_k2y2q_yg29d_77:not(#\9) {
|
|
78
78
|
--awsui-internal-style-color: var(--awsui-style-color);
|
|
79
79
|
--awsui-internal-style-background-color: var(--awsui-style-background-color);
|
|
80
80
|
--awsui-internal-style-border-color: var(--awsui-style-border-color);
|
|
@@ -90,14 +90,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
inline-size: var(--size-control-jpgj8e, 14px);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.
|
|
93
|
+
.awsui_outline_k2y2q_yg29d_93:not(#\9) {
|
|
94
94
|
position: relative;
|
|
95
95
|
}
|
|
96
|
-
.
|
|
96
|
+
.awsui_outline_k2y2q_yg29d_93:not(#\9) {
|
|
97
97
|
outline: 2px dotted transparent;
|
|
98
98
|
outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, 2px) - 1px);
|
|
99
99
|
}
|
|
100
|
-
.
|
|
100
|
+
.awsui_outline_k2y2q_yg29d_93:not(#\9)::before {
|
|
101
101
|
content: " ";
|
|
102
102
|
display: block;
|
|
103
103
|
position: absolute;
|
|
@@ -110,18 +110,4 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
110
110
|
border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
|
|
111
111
|
border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
|
|
112
112
|
box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-style-focus-ring-border-width-66120l, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #0073bb)));
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.awsui_label_k2y2q_1la84_115.awsui_label_k2y2q_1la84_115:not(#\9) {
|
|
116
|
-
color: var(--awsui-style-color, var(--color-text-form-default-8bb22s, #16191f));
|
|
117
|
-
}
|
|
118
|
-
.awsui_label_k2y2q_1la84_115.awsui_label_k2y2q_1la84_115.awsui_label-disabled_k2y2q_1la84_118:not(#\9) {
|
|
119
|
-
color: var(--awsui-style-color, var(--color-text-control-disabled-54tz75, #aab7b8));
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.awsui_description_k2y2q_1la84_122.awsui_description_k2y2q_1la84_122:not(#\9) {
|
|
123
|
-
color: var(--awsui-style-color, var(--color-text-form-secondary-wt0md2, #687078));
|
|
124
|
-
}
|
|
125
|
-
.awsui_description_k2y2q_1la84_122.awsui_description_k2y2q_1la84_122.awsui_description-disabled_k2y2q_1la84_125:not(#\9) {
|
|
126
|
-
color: var(--awsui-style-color, var(--color-text-control-disabled-54tz75, #aab7b8));
|
|
127
113
|
}
|
|
@@ -2,12 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"checkbox-control": "awsui_checkbox-
|
|
7
|
-
"outline": "
|
|
8
|
-
"label": "awsui_label_k2y2q_1la84_115",
|
|
9
|
-
"label-disabled": "awsui_label-disabled_k2y2q_1la84_118",
|
|
10
|
-
"description": "awsui_description_k2y2q_1la84_122",
|
|
11
|
-
"description-disabled": "awsui_description-disabled_k2y2q_1la84_125"
|
|
5
|
+
"root": "awsui_root_k2y2q_yg29d_44",
|
|
6
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_yg29d_77",
|
|
7
|
+
"outline": "awsui_outline_k2y2q_yg29d_93"
|
|
12
8
|
};
|
|
13
9
|
|
|
@@ -77,6 +77,12 @@ export { default as SplitPanel, SplitPanelProps } from './split-panel/index.js';
|
|
|
77
77
|
export { default as StatusIndicator, StatusIndicatorProps } from './status-indicator/index.js';
|
|
78
78
|
export { default as Steps, StepsProps } from './steps/index.js';
|
|
79
79
|
export { default as Table, TableProps } from './table/index.js';
|
|
80
|
+
export { default as TableBody, TableBodyProps } from './table-body/index.js';
|
|
81
|
+
export { default as TableBodyCell, TableBodyCellProps } from './table-body-cell/index.js';
|
|
82
|
+
export { default as TableHead, TableHeadProps } from './table-head/index.js';
|
|
83
|
+
export { default as TableHeaderCell, TableHeaderCellProps } from './table-header-cell/index.js';
|
|
84
|
+
export { default as TableRoot, TableRootProps } from './table-root/index.js';
|
|
85
|
+
export { default as TableRow, TableRowProps } from './table-row/index.js';
|
|
80
86
|
export { default as Tabs, TabsProps } from './tabs/index.js';
|
|
81
87
|
export { default as TagEditor, TagEditorProps } from './tag-editor/index.js';
|
|
82
88
|
export { default as TextContent, TextContentProps } from './text-content/index.js';
|