@stackoverflow/stacks 0.75.0 → 0.76.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/LICENSE.MD +9 -9
  2. package/README.md +47 -47
  3. package/dist/controllers/index.d.ts +7 -0
  4. package/dist/controllers/s-expandable-control.d.ts +17 -0
  5. package/dist/controllers/s-modal.d.ts +97 -0
  6. package/dist/controllers/s-navigation-tablist.d.ts +36 -0
  7. package/dist/controllers/s-popover.d.ts +155 -0
  8. package/dist/controllers/s-table.d.ts +8 -0
  9. package/dist/controllers/s-tooltip.d.ts +82 -0
  10. package/dist/controllers/s-uploader.d.ts +48 -0
  11. package/dist/css/stacks.css +86 -53
  12. package/dist/css/stacks.min.css +1 -1
  13. package/dist/index.d.ts +3 -0
  14. package/dist/js/stacks.js +6128 -5505
  15. package/dist/js/stacks.min.js +1 -1
  16. package/dist/stacks.d.ts +21 -0
  17. package/lib/css/atomic/_stacks-borders.less +378 -378
  18. package/lib/css/atomic/_stacks-colors.less +209 -209
  19. package/lib/css/atomic/_stacks-flex.less +374 -374
  20. package/lib/css/atomic/_stacks-grid.less +174 -173
  21. package/lib/css/atomic/_stacks-misc.less +343 -343
  22. package/lib/css/atomic/_stacks-spacing.less +168 -168
  23. package/lib/css/atomic/_stacks-typography.less +273 -273
  24. package/lib/css/atomic/_stacks-width-height.less +195 -195
  25. package/lib/css/base/_stacks-body.less +44 -46
  26. package/lib/css/base/_stacks-configuration-static.less +59 -59
  27. package/lib/css/base/_stacks-icons.less +20 -20
  28. package/lib/css/base/_stacks-internals.less +220 -230
  29. package/lib/css/base/_stacks-reset-meyer.less +64 -64
  30. package/lib/css/base/_stacks-reset-normalize.less +449 -449
  31. package/lib/css/base/_stacks-reset.less +20 -20
  32. package/lib/css/components/_stacks-activity-indicator.less +45 -45
  33. package/lib/css/components/_stacks-avatars.less +189 -189
  34. package/lib/css/components/_stacks-badges.less +209 -209
  35. package/lib/css/components/_stacks-banners.less +80 -81
  36. package/lib/css/components/_stacks-blank-states.less +26 -26
  37. package/lib/css/components/_stacks-breadcrumbs.less +44 -44
  38. package/lib/css/components/_stacks-button-groups.less +104 -104
  39. package/lib/css/components/_stacks-buttons.less +658 -660
  40. package/lib/css/components/_stacks-cards.less +44 -44
  41. package/lib/css/components/_stacks-code-blocks.less +130 -130
  42. package/lib/css/components/_stacks-collapsible.less +104 -104
  43. package/lib/css/components/_stacks-inputs.less +728 -728
  44. package/lib/css/components/_stacks-link-previews.less +136 -136
  45. package/lib/css/components/_stacks-links.less +218 -218
  46. package/lib/css/components/_stacks-menu.less +47 -47
  47. package/lib/css/components/_stacks-modals.less +133 -133
  48. package/lib/css/components/_stacks-navigation.less +146 -146
  49. package/lib/css/components/_stacks-notices.less +233 -233
  50. package/lib/css/components/_stacks-page-titles.less +60 -60
  51. package/lib/css/components/_stacks-pagination.less +55 -55
  52. package/lib/css/components/_stacks-popovers.less +197 -197
  53. package/lib/css/components/_stacks-post-summary.less +425 -425
  54. package/lib/css/components/_stacks-progress-bars.less +331 -331
  55. package/lib/css/components/_stacks-prose.less +503 -503
  56. package/lib/css/components/_stacks-spinner.less +107 -107
  57. package/lib/css/components/_stacks-tables.less +341 -341
  58. package/lib/css/components/_stacks-tags.less +236 -244
  59. package/lib/css/components/_stacks-toggle-switches.less +144 -144
  60. package/lib/css/components/_stacks-topbar.less +425 -440
  61. package/lib/css/components/_stacks-uploader.less +210 -210
  62. package/lib/css/components/_stacks-user-cards.less +169 -169
  63. package/lib/css/components/_stacks-widget-dynamic.less +33 -33
  64. package/lib/css/components/_stacks-widget-static.less +272 -272
  65. package/lib/css/exports/_stacks-constants-colors.less +1112 -1112
  66. package/lib/css/exports/_stacks-constants-helpers.less +139 -139
  67. package/lib/css/exports/_stacks-constants-type.less +152 -91
  68. package/lib/css/exports/_stacks-exports.less +15 -15
  69. package/lib/css/exports/_stacks-mixins.less +220 -220
  70. package/lib/css/stacks-dynamic.less +35 -36
  71. package/lib/css/stacks-static.less +86 -86
  72. package/lib/ts/controllers/index.ts +8 -0
  73. package/lib/ts/controllers/s-expandable-control.ts +189 -190
  74. package/lib/ts/controllers/s-modal.ts +321 -323
  75. package/lib/ts/controllers/s-navigation-tablist.ts +118 -119
  76. package/lib/ts/controllers/s-popover.ts +547 -549
  77. package/lib/ts/controllers/s-table.ts +220 -220
  78. package/lib/ts/controllers/s-tooltip.ts +246 -247
  79. package/lib/ts/controllers/s-uploader.ts +172 -174
  80. package/lib/ts/index.ts +20 -0
  81. package/lib/ts/stacks.ts +88 -83
  82. package/lib/tsconfig.json +13 -11
  83. package/package.json +87 -71
  84. package/dist/css/stacks-flexgrid-shim.min.css +0 -1
  85. package/lib/css/base/_stacks-configuration-dynamic.less +0 -106
  86. package/lib/ts/finalize.ts +0 -1
  87. package/lib/ts/stimulus.d.ts +0 -4
package/dist/css/stacks.css CHANGED
@@ -3837,7 +3837,7 @@ body.theme-highcontrast .s-topbar__light {
3837
3837
  --theme-topbar-search-shadow-focus: 0 0 0 4px hsla(0, 0%, 100%, 0.3);
3838
3838
  --theme-topbar-select-color: hsl(210, 8%, 85%);
3839
3839
  --theme-topbar-select-background: hsl(210, 8%, 35%);
3840
- --theme-topbar-item-color: hsl(210, 8%, 97.5%);
3840
+ --theme-topbar-item-color: hsl(210, 8%, 85%);
3841
3841
  --theme-topbar-item-color-hover: hsl(0, 0%, 100%);
3842
3842
  --theme-topbar-item-background-hover: hsl(210, 8%, 25%);
3843
3843
  --theme-topbar-item-color-current: hsl(0, 0%, 100%);
@@ -3854,23 +3854,19 @@ body.theme-highcontrast .s-topbar__dark {
3854
3854
  body.theme-highcontrast .s-topbar__dark .s-badge {
3855
3855
  border-color: currentColor;
3856
3856
  }
3857
- .s-topbar .s-topbar--content,
3858
- .s-topbar .s-topbar--ctas {
3857
+ .s-topbar .s-topbar--content {
3859
3858
  display: flex;
3860
3859
  height: 100%;
3861
3860
  list-style: none;
3862
3861
  margin: 0;
3863
3862
  padding: 0;
3864
- }
3865
- .s-topbar .s-topbar--content > li,
3866
- .s-topbar .s-topbar--ctas > li {
3867
- display: inline-flex;
3868
- }
3869
- .s-topbar .s-topbar--content {
3870
3863
  overflow-x: auto;
3871
3864
  scrollbar-color: var(--scrollbar) transparent;
3872
3865
  margin-left: auto;
3873
3866
  }
3867
+ .s-topbar .s-topbar--content > li {
3868
+ display: inline-flex;
3869
+ }
3874
3870
  .s-topbar .s-topbar--content::-webkit-scrollbar {
3875
3871
  width: 10px;
3876
3872
  height: 10px;
@@ -3888,7 +3884,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
3888
3884
  background-color: transparent;
3889
3885
  border-color: transparent;
3890
3886
  }
3891
- .s-topbar .s-topbar--content .s-topbar--item {
3887
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) {
3892
3888
  color: var(--theme-topbar-item-color);
3893
3889
  display: inline-flex;
3894
3890
  align-items: center;
@@ -3897,60 +3893,33 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
3897
3893
  white-space: nowrap;
3898
3894
  position: relative;
3899
3895
  }
3900
- .s-topbar .s-topbar--content .s-topbar--item:hover,
3901
- .s-topbar .s-topbar--content .s-topbar--item:focus,
3902
- .s-topbar .s-topbar--content .s-topbar--item.is-selected,
3903
- .s-topbar .s-topbar--content .s-topbar--item.is-selected:hover,
3904
- .s-topbar .s-topbar--content .s-topbar--item.is-selected:focus {
3896
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):hover,
3897
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):focus,
3898
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected,
3899
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover,
3900
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus {
3905
3901
  color: var(--theme-topbar-item-color-hover);
3906
3902
  background-color: var(--theme-topbar-item-background-hover);
3907
3903
  text-decoration: none;
3908
3904
  outline: none;
3909
3905
  }
3910
- .s-topbar .s-topbar--content .s-topbar--item:hover .s-activity-indicator,
3911
- .s-topbar .s-topbar--content .s-topbar--item:focus .s-activity-indicator,
3912
- .s-topbar .s-topbar--content .s-topbar--item.is-selected .s-activity-indicator,
3913
- .s-topbar .s-topbar--content .s-topbar--item.is-selected:hover .s-activity-indicator,
3914
- .s-topbar .s-topbar--content .s-topbar--item.is-selected:focus .s-activity-indicator {
3906
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):hover .s-activity-indicator,
3907
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):focus .s-activity-indicator,
3908
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected .s-activity-indicator,
3909
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover .s-activity-indicator,
3910
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus .s-activity-indicator {
3915
3911
  top: calc(50% - 18px);
3916
3912
  }
3917
- .s-topbar .s-topbar--content .s-topbar--item .svg-icon {
3913
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) .svg-icon {
3918
3914
  vertical-align: text-top;
3919
3915
  }
3920
- .s-topbar .s-topbar--content .s-topbar--item .s-activity-indicator {
3916
+ .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) .s-activity-indicator {
3921
3917
  position: absolute;
3922
3918
  top: calc(50% - 14px);
3923
3919
  right: 2px;
3924
3920
  transition: top cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s;
3925
3921
  }
3926
- .s-topbar .s-topbar--ctas {
3927
- padding-left: 4px;
3928
- padding-right: 8px;
3929
- overflow-x: auto;
3930
- scrollbar-color: var(--scrollbar) transparent;
3931
- margin-left: auto;
3932
- }
3933
- .s-topbar .s-topbar--ctas::-webkit-scrollbar {
3934
- width: 10px;
3935
- height: 10px;
3936
- background-color: transparent;
3937
- }
3938
- .s-topbar .s-topbar--ctas::-webkit-scrollbar-track {
3939
- border-radius: 10px;
3940
- background-color: transparent;
3941
- }
3942
- .s-topbar .s-topbar--ctas::-webkit-scrollbar-thumb {
3943
- border-radius: 10px;
3944
- background-color: var(--scrollbar);
3945
- }
3946
- .s-topbar .s-topbar--ctas::-webkit-scrollbar-corner {
3947
- background-color: transparent;
3948
- border-color: transparent;
3949
- }
3950
- .s-topbar .s-topbar--ctas li + li {
3951
- margin-left: 4px;
3952
- }
3953
- .s-topbar .s-topbar--ctas .s-topbar--item {
3922
+ .s-topbar .s-topbar--content .s-topbar--item__unset {
3954
3923
  align-self: center;
3955
3924
  padding-top: 8px;
3956
3925
  padding-bottom: 8px;
@@ -4580,8 +4549,58 @@ body.theme-highcontrast .s-sidebarwidget__green .s-sidebarwidget--content {
4580
4549
  body.theme-highcontrast .s-sidebarwidget__green:after {
4581
4550
  border-color: var(--green-700);
4582
4551
  }
4552
+ @font-face {
4553
+ font-family: "Segoe UI Adjusted";
4554
+ src: local(Segoe UI);
4555
+ ascent-override: 95%;
4556
+ }
4557
+ @font-face {
4558
+ font-family: "Segoe UI Adjusted";
4559
+ src: local(Segoe UI Italic);
4560
+ ascent-override: 95%;
4561
+ font-style: italic;
4562
+ }
4563
+ @font-face {
4564
+ font-family: "Segoe UI Adjusted";
4565
+ src: local(Segoe UI Semibold);
4566
+ ascent-override: 95%;
4567
+ font-weight: 600;
4568
+ }
4569
+ @font-face {
4570
+ font-family: "Segoe UI Adjusted";
4571
+ src: local(Segoe UI Semibold Italic);
4572
+ ascent-override: 95%;
4573
+ font-style: italic;
4574
+ font-weight: 600;
4575
+ }
4576
+ @font-face {
4577
+ font-family: "Segoe UI Adjusted";
4578
+ src: local(Segoe UI Bold);
4579
+ ascent-override: 90%;
4580
+ font-weight: 700;
4581
+ }
4582
+ @font-face {
4583
+ font-family: "Segoe UI Adjusted";
4584
+ src: local(Segoe UI Bold Italic);
4585
+ ascent-override: 95%;
4586
+ font-style: italic;
4587
+ font-weight: 700;
4588
+ }
4589
+ @font-face {
4590
+ font-family: "Segoe UI Adjusted";
4591
+ src: local(Segoe UI Black);
4592
+ ascent-override: 95%;
4593
+ font-weight: 800;
4594
+ }
4595
+ @font-face {
4596
+ font-family: "Segoe UI Adjusted";
4597
+ src: local(Segoe UI Black Italic);
4598
+ ascent-override: 95%;
4599
+ font-style: italic;
4600
+ font-weight: 800;
4601
+ }
4583
4602
  body {
4584
- --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
4603
+ --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
4585
4604
  --ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
4586
4605
  --ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
4587
4606
  --theme-body-font-family: var(--ff-sans);
@@ -4594,6 +4613,7 @@ body.theme-system .theme-light__forced .themed,
4594
4613
  body.theme-dark .themed,
4595
4614
  body:not(.theme-dark) .theme-dark__forced .themed {
4596
4615
  --theme-body-font-color: var(--black-800);
4616
+ --theme-background-color: var(--white);
4597
4617
  --theme-link-color: var(--theme-secondary-400);
4598
4618
  --theme-link-color-hover: var(--theme-secondary-350);
4599
4619
  --theme-link-color-visited: var(--theme-secondary-500);
@@ -10946,6 +10966,9 @@ body.theme-dark .d\:bg-theme-secondary-025,
10946
10966
  .grid__12 {
10947
10967
  grid-template-columns: repeat(12, minmax(0, 1fr));
10948
10968
  }
10969
+ .grid__auto {
10970
+ grid-template-columns: auto 1fr;
10971
+ }
10949
10972
  .grid--col-all {
10950
10973
  grid-column: 1 / -1;
10951
10974
  }
@@ -14241,6 +14264,9 @@ ol {
14241
14264
  .lg\:grid__12 {
14242
14265
  grid-template-columns: repeat(12, minmax(0, 1fr));
14243
14266
  }
14267
+ .lg\:grid__auto {
14268
+ grid-template-columns: auto 1fr;
14269
+ }
14244
14270
  .lg\:grid--col-all {
14245
14271
  grid-column: 1 / -1;
14246
14272
  }
@@ -15304,6 +15330,9 @@ ol {
15304
15330
  .md\:grid__12 {
15305
15331
  grid-template-columns: repeat(12, minmax(0, 1fr));
15306
15332
  }
15333
+ .md\:grid__auto {
15334
+ grid-template-columns: auto 1fr;
15335
+ }
15307
15336
  .md\:grid--col-all {
15308
15337
  grid-column: 1 / -1;
15309
15338
  }
@@ -16367,6 +16396,9 @@ ol {
16367
16396
  .sm\:grid__12 {
16368
16397
  grid-template-columns: repeat(12, minmax(0, 1fr));
16369
16398
  }
16399
+ .sm\:grid__auto {
16400
+ grid-template-columns: auto 1fr;
16401
+ }
16370
16402
  .sm\:grid--col-all {
16371
16403
  grid-column: 1 / -1;
16372
16404
  }
@@ -17230,7 +17262,7 @@ body {
17230
17262
  body {
17231
17263
  box-sizing: border-box;
17232
17264
  min-height: 100%;
17233
- background-color: var(--white);
17265
+ background-color: var(--theme-background-color);
17234
17266
  }
17235
17267
  body *,
17236
17268
  body *:before,
@@ -17279,7 +17311,7 @@ body *:after {
17279
17311
  .s-banner--container {
17280
17312
  position: relative;
17281
17313
  width: 100%;
17282
- max-width: 1060px;
17314
+ max-width: 81.025641rem;
17283
17315
  margin: 0 auto;
17284
17316
  }
17285
17317
  .s-btn {
@@ -18855,3 +18887,4 @@ body.theme-highcontrast .s-pagination--item {
18855
18887
  .s-sidebarwidget--subnav li[aria-current="page"] {
18856
18888
  background-image: url("data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--theme-primary-color%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
18857
18889
  }
18890
+