@stackoverflow/stacks 1.9.0 → 1.9.2

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.
Files changed (132) hide show
  1. package/README.md +161 -153
  2. package/dist/components/table/table.d.ts +26 -4
  3. package/dist/css/stacks.css +21 -6
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +93 -64
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/atomic/border.less +397 -397
  8. package/lib/atomic/color.less +210 -210
  9. package/lib/atomic/flex.less +426 -426
  10. package/lib/atomic/gap.less +44 -44
  11. package/lib/atomic/grid.less +139 -139
  12. package/lib/atomic/misc.less +343 -343
  13. package/lib/atomic/spacing.less +342 -342
  14. package/lib/atomic/typography.less +267 -267
  15. package/lib/atomic/width-height.less +194 -194
  16. package/lib/base/body.less +44 -44
  17. package/lib/base/configuration-static.less +61 -61
  18. package/lib/base/fieldset.less +5 -5
  19. package/lib/base/icon.less +11 -11
  20. package/lib/base/internal.less +220 -220
  21. package/lib/base/reset-meyer.less +64 -64
  22. package/lib/base/reset-normalize.less +449 -449
  23. package/lib/base/reset.less +20 -20
  24. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +21 -21
  25. package/lib/components/activity-indicator/activity-indicator.less +40 -40
  26. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +23 -23
  27. package/lib/components/anchor/anchor.less +61 -61
  28. package/lib/components/avatar/avatar.a11y.test.ts +36 -36
  29. package/lib/components/avatar/avatar.less +108 -108
  30. package/lib/components/avatar/avatar.visual.test.ts +54 -54
  31. package/lib/components/award-bling/award-bling.a11y.test.ts +17 -0
  32. package/lib/components/award-bling/award-bling.less +31 -31
  33. package/lib/components/award-bling/award-bling.visual.test.ts +26 -0
  34. package/lib/components/badge/badge.less +251 -251
  35. package/lib/components/banner/banner.a11y.test.ts +37 -0
  36. package/lib/components/banner/banner.less +51 -51
  37. package/lib/components/banner/banner.test.ts +73 -77
  38. package/lib/components/banner/banner.ts +149 -149
  39. package/lib/components/banner/banner.visual.test.ts +37 -36
  40. package/lib/components/block-link/block-link.a11y.test.ts +68 -0
  41. package/lib/components/block-link/block-link.less +80 -80
  42. package/lib/components/block-link/block-link.visual.test.ts +61 -0
  43. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +37 -0
  44. package/lib/components/breadcrumbs/breadcrumbs.less +41 -41
  45. package/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +37 -0
  46. package/lib/components/button/button.a11y.test.ts +32 -32
  47. package/lib/components/button/button.less +502 -502
  48. package/lib/components/button/button.visual.test.ts +52 -52
  49. package/lib/components/button-group/button-group.less +83 -83
  50. package/lib/components/card/card.a11y.test.ts +13 -0
  51. package/lib/components/card/card.less +29 -29
  52. package/lib/components/card/card.visual.test.ts +54 -0
  53. package/lib/components/check-control/check-control.less +17 -17
  54. package/lib/components/check-group/check-group.less +19 -19
  55. package/lib/components/checkbox_radio/checkbox_radio.less +158 -158
  56. package/lib/components/code-block/code-block.less +116 -116
  57. package/lib/components/description/description.less +9 -9
  58. package/lib/components/empty-state/empty-state.less +16 -16
  59. package/lib/components/expandable/expandable.less +118 -118
  60. package/lib/components/expandable/expandable.test.ts +51 -53
  61. package/lib/components/expandable/expandable.ts +238 -238
  62. package/lib/components/input-fill/input-fill.less +35 -35
  63. package/lib/components/input-icon/input-icon.less +45 -45
  64. package/lib/components/input-message/input-message.less +48 -48
  65. package/lib/components/input_textarea/input_textarea.less +166 -166
  66. package/lib/components/label/label.less +111 -111
  67. package/lib/components/link/link.less +119 -119
  68. package/lib/components/link-preview/link-preview.less +139 -139
  69. package/lib/components/menu/menu.less +41 -41
  70. package/lib/components/modal/modal.less +113 -113
  71. package/lib/components/modal/modal.ts +379 -379
  72. package/lib/components/navigation/navigation.less +134 -134
  73. package/lib/components/navigation/navigation.ts +128 -128
  74. package/lib/components/notice/notice.less +203 -203
  75. package/lib/components/page-title/page-title.less +51 -51
  76. package/lib/components/pagination/pagination.less +52 -52
  77. package/lib/components/popover/popover.less +148 -148
  78. package/lib/components/popover/popover.ts +651 -651
  79. package/lib/components/popover/tooltip.test.ts +62 -66
  80. package/lib/components/popover/tooltip.ts +343 -343
  81. package/lib/components/popover/tooltip.visual.test.ts +31 -31
  82. package/lib/components/post-summary/post-summary.less +415 -415
  83. package/lib/components/progress-bar/progress-bar.less +291 -291
  84. package/lib/components/prose/prose.less +452 -452
  85. package/lib/components/select/select.less +148 -148
  86. package/lib/components/sidebar-widget/sidebar-widget.less +257 -258
  87. package/lib/components/spinner/spinner.less +103 -103
  88. package/lib/components/table/table.less +307 -292
  89. package/lib/components/table/table.test.ts +366 -0
  90. package/lib/components/table/table.ts +296 -263
  91. package/lib/components/table-container/table-container.less +4 -4
  92. package/lib/components/tag/tag.less +213 -213
  93. package/lib/components/toast/toast.less +35 -35
  94. package/lib/components/toast/toast.test.ts +63 -67
  95. package/lib/components/toast/toast.ts +357 -357
  96. package/lib/components/toast/toast.visual.test.ts +27 -27
  97. package/lib/components/toggle-switch/toggle-switch.less +110 -110
  98. package/lib/components/topbar/topbar.less +436 -435
  99. package/lib/components/uploader/uploader.less +195 -195
  100. package/lib/components/uploader/uploader.ts +205 -205
  101. package/lib/components/user-card/user-card.less +129 -129
  102. package/lib/controllers.ts +33 -33
  103. package/lib/exports/constants-colors.less +1112 -1111
  104. package/lib/exports/constants-helpers.less +108 -108
  105. package/lib/exports/constants-type.less +153 -153
  106. package/lib/exports/exports.less +15 -15
  107. package/lib/exports/mixins.less +299 -299
  108. package/lib/index.ts +32 -32
  109. package/lib/input-utils.less +44 -44
  110. package/lib/stacks-dynamic.less +24 -24
  111. package/lib/stacks-static.less +93 -93
  112. package/lib/stacks.less +13 -13
  113. package/lib/stacks.ts +113 -113
  114. package/lib/test/open-wc-testing-patch.d.ts +26 -0
  115. package/lib/test/test-utils.ts +466 -444
  116. package/lib/tsconfig.build.json +4 -0
  117. package/lib/tsconfig.json +16 -13
  118. package/package.json +106 -105
  119. package/dist/components/activity-indicator/activity-indicator.a11y.test.d.ts +0 -1
  120. package/dist/components/activity-indicator/activity-indicator.visual.test.d.ts +0 -1
  121. package/dist/components/avatar/avatar.a11y.test.d.ts +0 -1
  122. package/dist/components/avatar/avatar.visual.test.d.ts +0 -1
  123. package/dist/components/banner/banner.test.d.ts +0 -1
  124. package/dist/components/banner/banner.visual.test.d.ts +0 -1
  125. package/dist/components/button/button.a11y.test.d.ts +0 -1
  126. package/dist/components/button/button.visual.test.d.ts +0 -1
  127. package/dist/components/expandable/expandable.test.d.ts +0 -1
  128. package/dist/components/popover/tooltip.test.d.ts +0 -1
  129. package/dist/components/popover/tooltip.visual.test.d.ts +0 -1
  130. package/dist/components/toast/toast.test.d.ts +0 -1
  131. package/dist/components/toast/toast.visual.test.d.ts +0 -1
  132. package/dist/test/test-utils.d.ts +0 -136
package/lib/components/popover/popover.less CHANGED
@@ -1,148 +1,148 @@
1
- .s-popover {
2
- --_po-bg: var(--white);
3
- --_po-bc: var(--bc-medium);
4
- --_po-bs: var(--bs-md);
5
- --_po-d: none;
6
- --_po-wmn: 12rem;
7
- --_po-w: 100%;
8
- // arrow
9
- --_po-arrow-fc: var(--white);
10
- --_po-arrow-b: unset;
11
- --_po-arrow-l: unset;
12
- --_po-arrow-r: unset;
13
- --_po-arrow-t: unset;
14
- --_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
15
- --_po-arrow-after-b: unset;
16
- --_po-arrow-after-l: unset;
17
- --_po-arrow-after-r: unset;
18
- --_po-arrow-after-t: unset;
19
- --_po-arrow-after-bs: unset;
20
-
21
- // CONTEXTUAL STYLES
22
- .dark-mode({
23
- --_po-bg: var(--black-075);
24
- --_po-bc: var(--bc-light);
25
- --_po-bs: var(--bs-lg);
26
- --_po-arrow-fc: var(--black-075);
27
- });
28
-
29
- // MODIFIERS
30
- &.is-visible {
31
- --_po-d: block;
32
- }
33
-
34
- &&__tooltip {
35
- --_po-wmn: unset;
36
- --_po-w: auto;
37
- }
38
-
39
- // CHILD ELEMENTS
40
- // Arrow
41
- &[data-popper-placement^="top"] > &--arrow,
42
- & &--arrow__bc,
43
- & &--arrow__bl,
44
- & &--arrow__br {
45
- --_po-arrow-b: var(--_po-arrow-ps);
46
- --_po-arrow-after-b: var(--su-static1);
47
- --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
48
- .highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
49
- }
50
- &[data-popper-placement^="bottom"] > &--arrow,
51
- & &--arrow__tc,
52
- & &--arrow__tl,
53
- & &--arrow__tr {
54
- --_po-arrow-t: var(--_po-arrow-ps);
55
- --_po-arrow-after-t: var(--su-static1);
56
- --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
57
- .highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
58
- }
59
- &[data-popper-placement^="left"] > &--arrow,
60
- & &--arrow__rc,
61
- & &--arrow__rt,
62
- & &--arrow__rb {
63
- --_po-arrow-r: var(--_po-arrow-ps);
64
- --_po-arrow-after-r: var(--su-static1);
65
- --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
66
- .highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
67
- }
68
- &[data-popper-placement^="right"] > &--arrow,
69
- & &--arrow__lc,
70
- & &--arrow__lt,
71
- & &--arrow__lb {
72
- --_po-arrow-l: var(--_po-arrow-ps);
73
- --_po-arrow-after-l: var(--su-static1);
74
- --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
75
- .highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
76
- }
77
- & &--arrow__tc,
78
- & &--arrow__bc {
79
- --_po-arrow-l: calc(50% - var(--su6));
80
- }
81
- & &--arrow__lc,
82
- & &--arrow__rc {
83
- --_po-arrow-t: calc(50% - var(--su6));
84
- }
85
- & &--arrow__tr,
86
- .s-popover--arrow__br {
87
- --_po-arrow-r: var(--su12);
88
- }
89
- & &--arrow__rb,
90
- & &--arrow__lb {
91
- --_po-arrow-b: var(--su12);
92
- }
93
- & &--arrow {
94
- &,
95
- &:before,
96
- &:after {
97
- display: block;
98
- height: var(--su12);
99
- position: absolute;
100
- width: var(--su12);
101
- z-index: -1;
102
- }
103
- &:before, // This renders our border
104
- &:after {
105
- content: '';
106
- transform: rotate(45deg);
107
- }
108
- &:after { // This renders our foreground color
109
- bottom: var(--_po-arrow-after-b);
110
- box-shadow: var(--_po-arrow-after-bs);
111
- left: var(--_po-arrow-after-l);
112
- right: var(--_po-arrow-after-r);
113
- top: var(--_po-arrow-after-t);
114
-
115
- background: currentColor;
116
- border-radius: calc(var(--su-static1) * 1.5);
117
- }
118
-
119
- bottom: var(--_po-arrow-b);
120
- color: var(--_po-arrow-fc);
121
- left: var(--_po-arrow-l);
122
- right: var(--_po-arrow-r);
123
- top: var(--_po-arrow-t);
124
- }
125
- // Close btn
126
- & &--close {
127
- float: right; // Use floats for title wrapping
128
- top: calc(var(--su8) * -1); // Compensate for s-popover's padding
129
- right: calc(var(--su8) * -1); // Compensate for s-popover's padding
130
- padding: var(--su8) !important;
131
- }
132
-
133
- background-color: var(--_po-bg);
134
- border: 1px solid var(--_po-bc);
135
- box-shadow: var(--_po-bs);
136
- display: var(--_po-d);
137
- min-width: var(--_po-wmn);
138
- width: var(--_po-w);
139
-
140
- border-radius: var(--br-md);
141
- color: var(--fc-dark);
142
- font-size: var(--fs-body1);
143
- max-width: 24rem;
144
- padding: var(--su12);
145
- position: absolute;
146
- white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.
147
- z-index: var(--zi-popovers);
148
- }
1
+ .s-popover {
2
+ --_po-bg: var(--white);
3
+ --_po-bc: var(--bc-medium);
4
+ --_po-bs: var(--bs-md);
5
+ --_po-d: none;
6
+ --_po-wmn: 12rem;
7
+ --_po-w: 100%;
8
+ // arrow
9
+ --_po-arrow-fc: var(--white);
10
+ --_po-arrow-b: unset;
11
+ --_po-arrow-l: unset;
12
+ --_po-arrow-r: unset;
13
+ --_po-arrow-t: unset;
14
+ --_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
15
+ --_po-arrow-after-b: unset;
16
+ --_po-arrow-after-l: unset;
17
+ --_po-arrow-after-r: unset;
18
+ --_po-arrow-after-t: unset;
19
+ --_po-arrow-after-bs: unset;
20
+
21
+ // CONTEXTUAL STYLES
22
+ .dark-mode({
23
+ --_po-bg: var(--black-075);
24
+ --_po-bc: var(--bc-light);
25
+ --_po-bs: var(--bs-lg);
26
+ --_po-arrow-fc: var(--black-075);
27
+ });
28
+
29
+ // MODIFIERS
30
+ &.is-visible {
31
+ --_po-d: block;
32
+ }
33
+
34
+ &&__tooltip {
35
+ --_po-wmn: unset;
36
+ --_po-w: auto;
37
+ }
38
+
39
+ // CHILD ELEMENTS
40
+ // Arrow
41
+ &[data-popper-placement^="top"] > &--arrow,
42
+ & &--arrow__bc,
43
+ & &--arrow__bl,
44
+ & &--arrow__br {
45
+ --_po-arrow-b: var(--_po-arrow-ps);
46
+ --_po-arrow-after-b: var(--su-static1);
47
+ --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
48
+ .highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
49
+ }
50
+ &[data-popper-placement^="bottom"] > &--arrow,
51
+ & &--arrow__tc,
52
+ & &--arrow__tl,
53
+ & &--arrow__tr {
54
+ --_po-arrow-t: var(--_po-arrow-ps);
55
+ --_po-arrow-after-t: var(--su-static1);
56
+ --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
57
+ .highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
58
+ }
59
+ &[data-popper-placement^="left"] > &--arrow,
60
+ & &--arrow__rc,
61
+ & &--arrow__rt,
62
+ & &--arrow__rb {
63
+ --_po-arrow-r: var(--_po-arrow-ps);
64
+ --_po-arrow-after-r: var(--su-static1);
65
+ --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
66
+ .highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
67
+ }
68
+ &[data-popper-placement^="right"] > &--arrow,
69
+ & &--arrow__lc,
70
+ & &--arrow__lt,
71
+ & &--arrow__lb {
72
+ --_po-arrow-l: var(--_po-arrow-ps);
73
+ --_po-arrow-after-l: var(--su-static1);
74
+ --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
75
+ .highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
76
+ }
77
+ & &--arrow__tc,
78
+ & &--arrow__bc {
79
+ --_po-arrow-l: calc(50% - var(--su6));
80
+ }
81
+ & &--arrow__lc,
82
+ & &--arrow__rc {
83
+ --_po-arrow-t: calc(50% - var(--su6));
84
+ }
85
+ & &--arrow__tr,
86
+ .s-popover--arrow__br {
87
+ --_po-arrow-r: var(--su12);
88
+ }
89
+ & &--arrow__rb,
90
+ & &--arrow__lb {
91
+ --_po-arrow-b: var(--su12);
92
+ }
93
+ & &--arrow {
94
+ &,
95
+ &:before,
96
+ &:after {
97
+ display: block;
98
+ height: var(--su12);
99
+ position: absolute;
100
+ width: var(--su12);
101
+ z-index: -1;
102
+ }
103
+ &:before, // This renders our border
104
+ &:after {
105
+ content: '';
106
+ transform: rotate(45deg);
107
+ }
108
+ &:after { // This renders our foreground color
109
+ bottom: var(--_po-arrow-after-b);
110
+ box-shadow: var(--_po-arrow-after-bs);
111
+ left: var(--_po-arrow-after-l);
112
+ right: var(--_po-arrow-after-r);
113
+ top: var(--_po-arrow-after-t);
114
+
115
+ background: currentColor;
116
+ border-radius: calc(var(--su-static1) * 1.5);
117
+ }
118
+
119
+ bottom: var(--_po-arrow-b);
120
+ color: var(--_po-arrow-fc);
121
+ left: var(--_po-arrow-l);
122
+ right: var(--_po-arrow-r);
123
+ top: var(--_po-arrow-t);
124
+ }
125
+ // Close btn
126
+ & &--close {
127
+ float: right; // Use floats for title wrapping
128
+ top: calc(var(--su8) * -1); // Compensate for s-popover's padding
129
+ right: calc(var(--su8) * -1); // Compensate for s-popover's padding
130
+ padding: var(--su8) !important;
131
+ }
132
+
133
+ background-color: var(--_po-bg);
134
+ border: 1px solid var(--_po-bc);
135
+ box-shadow: var(--_po-bs);
136
+ display: var(--_po-d);
137
+ min-width: var(--_po-wmn);
138
+ width: var(--_po-w);
139
+
140
+ border-radius: var(--br-md);
141
+ color: var(--fc-dark);
142
+ font-size: var(--fs-body1);
143
+ max-width: 24rem;
144
+ padding: var(--su12);
145
+ position: absolute;
146
+ white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.
147
+ z-index: var(--zi-popovers);
148
+ }