{@render children()}
diff --git a/packages/stacks-docs-next/src/components/Navigation.svelte b/packages/stacks-docs-next/src/components/Navigation.svelte
index 4838d2d8f4..84f1c8cc94 100644
--- a/packages/stacks-docs-next/src/components/Navigation.svelte
+++ b/packages/stacks-docs-next/src/components/Navigation.svelte
@@ -124,7 +124,7 @@
border-radius: 6px !important;
}
.s-navigation--item:hover {
- background: var(--orange-400) !important;
+ background: var(--theme-primary) !important;
color: var(--white) !important;
}
.s-navigation--item.is-selected,
diff --git a/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte b/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte
new file mode 100644
index 0000000000..4d48a5ffad
--- /dev/null
+++ b/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte
@@ -0,0 +1,25 @@
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/height.md b/packages/stacks-docs-next/src/docs/public/system/base/height.md
new file mode 100644
index 0000000000..7e7a30b174
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/height.md
@@ -0,0 +1,908 @@
+---
+title: "Height"
+description: "Stacks provides atomic sizing classes for heights using pixel, rem, and percentage values. Most height classes are based on a 16px base font size and will scale based on the browser's font size."
+---
+
+
+
+
+ Pixel height classes allow you to set the height of an element to a specific pixel value.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+
+ .h0 |
+ height: 0px; |
+ 0rem |
+
+
+ |
+
+
+
+ .h1 |
+ height: 1px; |
+ 0.063rem |
+
+
+ |
+
+
+
+ .h2 |
+ height: 2px; |
+ 0.125rem |
+
+
+ |
+
+
+
+ .h4 |
+ height: 4px; |
+ 0.25rem |
+
+
+ |
+
+
+
+ .h6 |
+ height: 6px; |
+ 0.375rem |
+
+
+ |
+
+
+
+ .h8 |
+ height: 8px; |
+ 0.5rem |
+
+
+ |
+
+
+
+ .h12 |
+ height: 12px; |
+ 0.75rem |
+
+
+ |
+
+
+
+ .h16 |
+ height: 16px; |
+ 1rem |
+
+
+ |
+
+
+
+ .h24 |
+ height: 24px; |
+ 1.5rem |
+
+
+ |
+
+
+
+ .h32 |
+ height: 32px; |
+ 2rem |
+
+
+ |
+
+
+
+ .h48 |
+ height: 48px; |
+ 3rem |
+
+
+ |
+
+
+
+ .h64 |
+ height: 64px; |
+ 4rem |
+
+
+ |
+
+
+
+ .h96 |
+ height: 96px; |
+ 6rem |
+
+
+ |
+
+
+
+ .h128 |
+ height: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+
+
+
<div class="h2">…</div>
<div class="h4">…</div>
<div class="h6">…</div>
<div class="h8">…</div>
<div class="h12">…</div>
<div class="h16">…</div>
<div class="h24">…</div>
<div class="h32">…</div>
<div class="h48">…</div>
<div class="h64">…</div>
<div class="h96">…</div>
<div class="h128">…</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sizing units height classes allow you to set the height of an element according to a predefined set of 12 common values in used in Stacks.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+
+ .hs1 |
+ height: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+ .hs2 |
+ height: 256px; |
+ 16rem |
+
+
+ |
+
+
+
+ .hs3 |
+ height: 344px; |
+ 21.5rem |
+
+
+ |
+
+
+
+ .hs4 |
+ height: 448px; |
+ 28rem |
+
+
+ |
+
+
+
+ .hs5 |
+ height: 512px; |
+ 32rem |
+
+
+ |
+
+
+
+ .hs6 |
+ height: 640px; |
+ 40rem |
+
+
+ |
+
+
+
+ .hs7 |
+ height: 768px; |
+ 48rem |
+
+
+ |
+
+
+
+ .hs8 |
+ height: 848px; |
+ 53rem |
+
+
+ |
+
+
+
+ .hs9 |
+ height: 960px; |
+ 60rem |
+
+
+ |
+
+
+
+ .hs10 |
+ height: 1024px; |
+ 64rem |
+
+
+ |
+
+
+
+ .hs11 |
+ height: 1120px; |
+ 70rem |
+
+
+ |
+
+
+
+ .hs12 |
+ height: 1280px; |
+ 80rem |
+
+
+ |
+
+
+
+
+
+
<div class="hs1">…</div>
<div class="hs2">…</div>
<div class="hs3">…</div>
<div class="hs4">…</div>
<div class="hs5">…</div>
<div class="hs6">…</div>
<div class="hs7">…</div>
<div class="hs8">…</div>
<div class="hs9">…</div>
<div class="hs10">…</div>
<div class="hs11">…</div>
<div class="hs12">…</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fluid height classes allow you to set the height of an element to a percentage of the parent element's height or to the full height of the viewport.
+
+
+
+
+
+
+ | Class |
+ Value |
+ Responsive? |
+
+
+
+
+ .h100 |
+ height: 100%; |
+
+
+ |
+
+
+ .h-screen |
+ height: 100vh; |
+
+
+ |
+
+
+ .h-auto |
+ height: auto; |
+
+
+ |
+
+
+
+
+
<div class="h100">…</div>
+
+
+
+
+
+
+ Min height classes allow you to set the minimum height of an element.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+ .hmn0 |
+ min-height: 0; |
+ - |
+
+
+ |
+
+
+
+ .hmn1 |
+ min-height: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+ .hmn2 |
+ min-height: 256px; |
+ 16rem |
+
+
+ |
+
+
+
+ .hmn3 |
+ min-height: 344px; |
+ 21.5rem |
+
+
+ |
+
+
+
+ .hmn4 |
+ min-height: 448px; |
+ 28rem |
+
+
+ |
+
+
+
+ .hmn5 |
+ min-height: 512px; |
+ 32rem |
+
+
+ |
+
+
+
+ .hmn6 |
+ min-height: 640px; |
+ 40rem |
+
+
+ |
+
+
+
+ .hmn7 |
+ min-height: 768px; |
+ 48rem |
+
+
+ |
+
+
+
+ .hmn8 |
+ min-height: 848px; |
+ 53rem |
+
+
+ |
+
+
+
+ .hmn9 |
+ min-height: 960px; |
+ 60rem |
+
+
+ |
+
+
+
+ .hmn10 |
+ min-height: 1024px; |
+ 64rem |
+
+
+ |
+
+
+
+ .hmn11 |
+ min-height: 1120px; |
+ 70rem |
+
+
+ |
+
+
+
+ .hmn12 |
+ min-height: 1280px; |
+ 80rem |
+
+
+ |
+
+
+
+ .hmn100 |
+ min-height: 100%; |
+ - |
+
+
+ |
+
+
+ .hmn-screen |
+ min-height: 100vh; |
+ - |
+
+
+ |
+
+
+ .hmn-initial |
+ min-height: initial; |
+ - |
+
+
+ |
+
+
+
+
+
+
+
+
+ Max height classes allow you to set the maximum height of an element.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+
+ .hmx1 |
+ max-height: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+ .hmx2 |
+ max-height: 256px; |
+ 16rem |
+
+
+ |
+
+
+
+ .hmx3 |
+ max-height: 344px; |
+ 21.5rem |
+
+
+ |
+
+
+
+ .hmx4 |
+ max-height: 448px; |
+ 28rem |
+
+
+ |
+
+
+
+ .hmx5 |
+ max-height: 512px; |
+ 32rem |
+
+
+ |
+
+
+
+ .hmx6 |
+ max-height: 640px; |
+ 40rem |
+
+
+ |
+
+
+
+ .hmx7 |
+ max-height: 768px; |
+ 48rem |
+
+
+ |
+
+
+
+ .hmx8 |
+ max-height: 848px; |
+ 53rem |
+
+
+ |
+
+
+
+ .hmx9 |
+ max-height: 960px; |
+ 60rem |
+
+
+ |
+
+
+
+ .hmx10 |
+ max-height: 1024px; |
+ 64rem |
+
+
+ |
+
+
+
+ .hmx11 |
+ max-height: 1120px; |
+ 70rem |
+
+
+ |
+
+
+
+ .hmx12 |
+ max-height: 1280px; |
+ 80rem |
+
+
+ |
+
+
+
+ .hmx100 |
+ max-height: 100%; |
+ - |
+
+
+ |
+
+
+ .hmx-screen |
+ max-height: 100vh; |
+ - |
+
+
+ |
+
+
+ .hmx-initial |
+ max-height: initial; |
+ - |
+
+
+ |
+
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/margin.md b/packages/stacks-docs-next/src/docs/public/system/base/margin.md
new file mode 100644
index 0000000000..a7cf34d3e0
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/margin.md
@@ -0,0 +1,951 @@
+---
+title: "Margin"
+description: "Stacks provides atomic classes to override margin."
+---
+
+
+
+ Immutable margin utilities are based on our global white space scale. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
+
+
+
+
+
+
+ | Abbreviation |
+ Property |
+ Responsive? |
+
+
+
+
+
+ | m |
+ margin |
+
+
+ |
+
+
+
+ | mt |
+ margin-top |
+
+
+ |
+
+
+
+ | mr |
+ margin-right |
+
+
+ |
+
+
+
+ | mb |
+ margin-bottom |
+
+
+ |
+
+
+
+ | ml |
+ margin-left |
+
+
+ |
+
+
+
+ | mx |
+ margin x-axis |
+
+
+ |
+
+
+
+ | my |
+ margin y-axis |
+
+
+ |
+
+
+
+
+
+
<div class="mt8 mr4 mb32 ml64">
…
</div>
+
+
+
+ Example div with different margins applied
+
+
+
+
+
+
+
+ |
+
+ 0 |
+
+ 1px |
+
+ 2px |
+
+ 4px |
+
+ 6px |
+
+ 8px |
+
+ 12px |
+
+ 16px |
+
+ 24px |
+
+ 32px |
+
+ 48px |
+
+ 64px |
+
+ 96px |
+
+ 128px |
+
+ 50% |
+
+ 100% |
+
+
+
+
+
+
+ | m |
+
+ .m0 |
+
+ .m1 |
+
+ .m2 |
+
+ .m4 |
+
+ .m6 |
+
+ .m8 |
+
+ .m12 |
+
+ .m16 |
+
+ .m24 |
+
+ .m32 |
+
+ .m48 |
+
+ .m64 |
+
+ .m96 |
+
+ .m128 |
+
+ .m50 |
+
+ .m100 |
+
+
+
+
+ | mt |
+
+ .mt0 |
+
+ .mt1 |
+
+ .mt2 |
+
+ .mt4 |
+
+ .mt6 |
+
+ .mt8 |
+
+ .mt12 |
+
+ .mt16 |
+
+ .mt24 |
+
+ .mt32 |
+
+ .mt48 |
+
+ .mt64 |
+
+ .mt96 |
+
+ .mt128 |
+
+ .mt50 |
+
+ .mt100 |
+
+
+
+
+ | mr |
+
+ .mr0 |
+
+ .mr1 |
+
+ .mr2 |
+
+ .mr4 |
+
+ .mr6 |
+
+ .mr8 |
+
+ .mr12 |
+
+ .mr16 |
+
+ .mr24 |
+
+ .mr32 |
+
+ .mr48 |
+
+ .mr64 |
+
+ .mr96 |
+
+ .mr128 |
+
+ .mr50 |
+
+ .mr100 |
+
+
+
+
+ | mb |
+
+ .mb0 |
+
+ .mb1 |
+
+ .mb2 |
+
+ .mb4 |
+
+ .mb6 |
+
+ .mb8 |
+
+ .mb12 |
+
+ .mb16 |
+
+ .mb24 |
+
+ .mb32 |
+
+ .mb48 |
+
+ .mb64 |
+
+ .mb96 |
+
+ .mb128 |
+
+ .mb50 |
+
+ .mb100 |
+
+
+
+
+ | ml |
+
+ .ml0 |
+
+ .ml1 |
+
+ .ml2 |
+
+ .ml4 |
+
+ .ml6 |
+
+ .ml8 |
+
+ .ml12 |
+
+ .ml16 |
+
+ .ml24 |
+
+ .ml32 |
+
+ .ml48 |
+
+ .ml64 |
+
+ .ml96 |
+
+ .ml128 |
+
+ .ml50 |
+
+ .ml100 |
+
+
+
+
+ | mx |
+
+ .mx0 |
+
+ .mx1 |
+
+ .mx2 |
+
+ .mx4 |
+
+ .mx6 |
+
+ .mx8 |
+
+ .mx12 |
+
+ .mx16 |
+
+ .mx24 |
+
+ .mx32 |
+
+ .mx48 |
+
+ .mx64 |
+
+ .mx96 |
+
+ .mx128 |
+
+ .mx50 |
+
+ .mx100 |
+
+
+
+
+ | my |
+
+ .my0 |
+
+ .my1 |
+
+ .my2 |
+
+ .my4 |
+
+ .my6 |
+
+ .my8 |
+
+ .my12 |
+
+ .my16 |
+
+ .my24 |
+
+ .my32 |
+
+ .my48 |
+
+ .my64 |
+
+ .my96 |
+
+ .my128 |
+
+ .my50 |
+
+ .my100 |
+
+
+
+
+
+
+
+
+
+ Immutable margin utilities are based on our global white space scale. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
+
+
+
+
+
+
+ | Abbreviation |
+ Property |
+ Responsive? |
+
+
+
+
+
+ | mn |
+ margin |
+
+
+ |
+
+
+
+ | mtn |
+ margin-top |
+
+
+ |
+
+
+
+ | mrn |
+ margin-right |
+
+
+ |
+
+
+
+ | mbn |
+ margin-bottom |
+
+
+ |
+
+
+
+ | mln |
+ margin-left |
+
+
+ |
+
+
+
+ | mxn |
+ margin x-axis |
+
+
+ |
+
+
+
+ | myn |
+ margin y-axis |
+
+
+ |
+
+
+
+
+
+
<div class="mtn8 mrn4 mbn32 mln64">
…
</div>
+
+
+
+ Example div with different margins applied
+
+
+
+
+
+
+
+ |
+
+ 1px |
+
+ 2px |
+
+ 4px |
+
+ 6px |
+
+ 8px |
+
+ 12px |
+
+ 16px |
+
+ 24px |
+
+ 32px |
+
+ 48px |
+
+ 64px |
+
+ 96px |
+
+ 128px |
+
+ 50% |
+
+ 100% |
+
+
+
+
+
+
+ | mn |
+
+ .mn1 |
+
+ .mn2 |
+
+ .mn4 |
+
+ .mn6 |
+
+ .mn8 |
+
+ .mn12 |
+
+ .mn16 |
+
+ .mn24 |
+
+ .mn32 |
+
+ .mn48 |
+
+ .mn64 |
+
+ .mn96 |
+
+ .mn128 |
+
+ .mn50 |
+
+ .mn100 |
+
+
+
+
+ | mtn |
+
+ .mtn1 |
+
+ .mtn2 |
+
+ .mtn4 |
+
+ .mtn6 |
+
+ .mtn8 |
+
+ .mtn12 |
+
+ .mtn16 |
+
+ .mtn24 |
+
+ .mtn32 |
+
+ .mtn48 |
+
+ .mtn64 |
+
+ .mtn96 |
+
+ .mtn128 |
+
+ .mtn50 |
+
+ .mtn100 |
+
+
+
+
+ | mrn |
+
+ .mrn1 |
+
+ .mrn2 |
+
+ .mrn4 |
+
+ .mrn6 |
+
+ .mrn8 |
+
+ .mrn12 |
+
+ .mrn16 |
+
+ .mrn24 |
+
+ .mrn32 |
+
+ .mrn48 |
+
+ .mrn64 |
+
+ .mrn96 |
+
+ .mrn128 |
+
+ .mrn50 |
+
+ .mrn100 |
+
+
+
+
+ | mbn |
+
+ .mbn1 |
+
+ .mbn2 |
+
+ .mbn4 |
+
+ .mbn6 |
+
+ .mbn8 |
+
+ .mbn12 |
+
+ .mbn16 |
+
+ .mbn24 |
+
+ .mbn32 |
+
+ .mbn48 |
+
+ .mbn64 |
+
+ .mbn96 |
+
+ .mbn128 |
+
+ .mbn50 |
+
+ .mbn100 |
+
+
+
+
+ | mln |
+
+ .mln1 |
+
+ .mln2 |
+
+ .mln4 |
+
+ .mln6 |
+
+ .mln8 |
+
+ .mln12 |
+
+ .mln16 |
+
+ .mln24 |
+
+ .mln32 |
+
+ .mln48 |
+
+ .mln64 |
+
+ .mln96 |
+
+ .mln128 |
+
+ .mln50 |
+
+ .mln100 |
+
+
+
+
+ | mxn |
+
+ .mxn1 |
+
+ .mxn2 |
+
+ .mxn4 |
+
+ .mxn6 |
+
+ .mxn8 |
+
+ .mxn12 |
+
+ .mxn16 |
+
+ .mxn24 |
+
+ .mxn32 |
+
+ .mxn48 |
+
+ .mxn64 |
+
+ .mxn96 |
+
+ .mxn128 |
+
+ .mxn50 |
+
+ .mxn100 |
+
+
+
+
+ | myn |
+
+ .myn1 |
+
+ .myn2 |
+
+ .myn4 |
+
+ .myn6 |
+
+ .myn8 |
+
+ .myn12 |
+
+ .myn16 |
+
+ .myn24 |
+
+ .myn32 |
+
+ .myn48 |
+
+ .myn64 |
+
+ .myn96 |
+
+ .myn128 |
+
+ .myn50 |
+
+ .myn100 |
+
+
+
+
+
+
+
+
+
+ Stacks provides additional automatic margin classes. These come in handy when positioning individual flex items within flex layouts, or horizontally centering a block-level element.
+
+
+
+
+
+
+ | Class |
+ Property |
+
+
+
+
+
+ | .m-auto |
+ margin |
+
+
+
+ | .mt-auto |
+ margin-top |
+
+
+
+ | .mr-auto |
+ margin-right |
+
+
+
+ | .mb-auto |
+ margin-bottom |
+
+
+
+ | .ml-auto |
+ margin-left |
+
+
+
+ | .mx-auto |
+ margin x-axis |
+
+
+
+ | .my-auto |
+ margin y-axis |
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/padding.md b/packages/stacks-docs-next/src/docs/public/system/base/padding.md
new file mode 100644
index 0000000000..6629e935b0
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/padding.md
@@ -0,0 +1,815 @@
+---
+title: "Padding"
+description: "Stacks provides atomic classes to override padding."
+---
+
+
+
+ Immutable padding utilities are based on a global white space scale defined with custom properties. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
+ Padding should never be declared outside of these utilities. This is meant to help create consistency and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before use.
+
+
+
+
+
+
+ | Abbreviation |
+ Property |
+ Responsive? |
+
+
+
+
+
+ | p |
+ padding |
+
+
+
+
+ |
+
+
+
+ | pt |
+ padding-top |
+
+
+
+
+ |
+
+
+
+ | pr |
+ padding-right |
+
+
+
+
+ |
+
+
+
+ | pb |
+ padding-bottom |
+
+
+
+
+ |
+
+
+
+ | pl |
+ padding-left |
+
+
+
+
+ |
+
+
+
+ | px |
+ padding x-axis |
+
+
+
+
+ |
+
+
+
+ | py |
+ padding y-axis |
+
+
+
+
+ |
+
+
+
+
+
+
<div class="pt4 pr64 pb64 pl64">
…
</div>
+
+
+ Example div with different paddings applied
+
+
+
+
+
+
+ |
+
+ 0 |
+
+ 1px |
+
+ 2px |
+
+ 4px |
+
+ 6px |
+
+ 8px |
+
+ 12px |
+
+ 16px |
+
+ 24px |
+
+ 32px |
+
+ 48px |
+
+ 64px |
+
+ 96px |
+
+ 128px |
+
+ 50% |
+
+ 100% |
+
+
+
+
+
+
+ | p |
+
+
+ .p0 |
+
+
+
+ .p1 |
+
+
+
+ .p2 |
+
+
+
+ .p4 |
+
+
+
+ .p6 |
+
+
+
+ .p8 |
+
+
+
+ .p12 |
+
+
+
+ .p16 |
+
+
+
+ .p24 |
+
+
+
+ .p32 |
+
+
+
+ .p48 |
+
+
+
+ .p64 |
+
+
+
+ .p96 |
+
+
+
+ .p128 |
+
+
+
+ .p50 |
+
+
+
+ .p100 |
+
+
+
+
+
+ | pt |
+
+
+ .pt0 |
+
+
+
+ .pt1 |
+
+
+
+ .pt2 |
+
+
+
+ .pt4 |
+
+
+
+ .pt6 |
+
+
+
+ .pt8 |
+
+
+
+ .pt12 |
+
+
+
+ .pt16 |
+
+
+
+ .pt24 |
+
+
+
+ .pt32 |
+
+
+
+ .pt48 |
+
+
+
+ .pt64 |
+
+
+
+ .pt96 |
+
+
+
+ .pt128 |
+
+
+
+ .pt50 |
+
+
+
+ .pt100 |
+
+
+
+
+
+ | pr |
+
+
+ .pr0 |
+
+
+
+ .pr1 |
+
+
+
+ .pr2 |
+
+
+
+ .pr4 |
+
+
+
+ .pr6 |
+
+
+
+ .pr8 |
+
+
+
+ .pr12 |
+
+
+
+ .pr16 |
+
+
+
+ .pr24 |
+
+
+
+ .pr32 |
+
+
+
+ .pr48 |
+
+
+
+ .pr64 |
+
+
+
+ .pr96 |
+
+
+
+ .pr128 |
+
+
+
+ .pr50 |
+
+
+
+ .pr100 |
+
+
+
+
+
+ | pb |
+
+
+ .pb0 |
+
+
+
+ .pb1 |
+
+
+
+ .pb2 |
+
+
+
+ .pb4 |
+
+
+
+ .pb6 |
+
+
+
+ .pb8 |
+
+
+
+ .pb12 |
+
+
+
+ .pb16 |
+
+
+
+ .pb24 |
+
+
+
+ .pb32 |
+
+
+
+ .pb48 |
+
+
+
+ .pb64 |
+
+
+
+ .pb96 |
+
+
+
+ .pb128 |
+
+
+
+ .pb50 |
+
+
+
+ .pb100 |
+
+
+
+
+
+ | pl |
+
+
+ .pl0 |
+
+
+
+ .pl1 |
+
+
+
+ .pl2 |
+
+
+
+ .pl4 |
+
+
+
+ .pl6 |
+
+
+
+ .pl8 |
+
+
+
+ .pl12 |
+
+
+
+ .pl16 |
+
+
+
+ .pl24 |
+
+
+
+ .pl32 |
+
+
+
+ .pl48 |
+
+
+
+ .pl64 |
+
+
+
+ .pl96 |
+
+
+
+ .pl128 |
+
+
+
+ .pl50 |
+
+
+
+ .pl100 |
+
+
+
+
+
+ | px |
+
+
+
+ - |
+
+
+
+
+
+ .px1 |
+
+
+
+
+
+ .px2 |
+
+
+
+
+
+ .px4 |
+
+
+
+
+
+ .px6 |
+
+
+
+
+
+ .px8 |
+
+
+
+
+
+ .px12 |
+
+
+
+
+
+ .px16 |
+
+
+
+
+
+ .px24 |
+
+
+
+
+
+ .px32 |
+
+
+
+
+
+ .px48 |
+
+
+
+
+
+ .px64 |
+
+
+
+
+
+ .px96 |
+
+
+
+
+
+ .px128 |
+
+
+
+
+
+ - |
+
+
+
+
+
+ - |
+
+
+
+
+
+
+ | py |
+
+
+
+ - |
+
+
+
+
+
+ .py1 |
+
+
+
+
+
+ .py2 |
+
+
+
+
+
+ .py4 |
+
+
+
+
+
+ .py6 |
+
+
+
+
+
+ .py8 |
+
+
+
+
+
+ .py12 |
+
+
+
+
+
+ .py16 |
+
+
+
+
+
+ .py24 |
+
+
+
+
+
+ .py32 |
+
+
+
+
+
+ .py48 |
+
+
+
+
+
+ .py64 |
+
+
+
+
+
+ .py96 |
+
+
+
+
+
+ .py128 |
+
+
+
+
+
+ - |
+
+
+
+
+
+ - |
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/width.md b/packages/stacks-docs-next/src/docs/public/system/base/width.md
new file mode 100644
index 0000000000..87e8f1b981
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/width.md
@@ -0,0 +1,1170 @@
+---
+title: "Width"
+description: "Stacks provides atomic sizing classes for widths using pixel, rem, and percentage values. Most width classes are based on a 16px base font size and will scale based on the browser's font size."
+---
+
+
+
+
+ Pixel width classes allow you to set the width of an element to a specific pixel value.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+
+ .w0 |
+ width: 0px; |
+ 0rem |
+
+
+ |
+
+
+
+ .w1 |
+ width: 1px; |
+ 0.063rem |
+
+
+ |
+
+
+
+ .w2 |
+ width: 2px; |
+ 0.125rem |
+
+
+ |
+
+
+
+ .w4 |
+ width: 4px; |
+ 0.25rem |
+
+
+ |
+
+
+
+ .w6 |
+ width: 6px; |
+ 0.375rem |
+
+
+ |
+
+
+
+ .w8 |
+ width: 8px; |
+ 0.5rem |
+
+
+ |
+
+
+
+ .w12 |
+ width: 12px; |
+ 0.75rem |
+
+
+ |
+
+
+
+ .w16 |
+ width: 16px; |
+ 1rem |
+
+
+ |
+
+
+
+ .w24 |
+ width: 24px; |
+ 1.5rem |
+
+
+ |
+
+
+
+ .w32 |
+ width: 32px; |
+ 2rem |
+
+
+ |
+
+
+
+ .w48 |
+ width: 48px; |
+ 3rem |
+
+
+ |
+
+
+
+ .w64 |
+ width: 64px; |
+ 4rem |
+
+
+ |
+
+
+
+ .w96 |
+ width: 96px; |
+ 6rem |
+
+
+ |
+
+
+
+ .w128 |
+ width: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+
+
+
<div class="w0">…</div>
<div class="w1">…</div>
<div class="w2">…</div>
<div class="w4">…</div>
<div class="w6">…</div>
<div class="w8">…</div>
<div class="w12">…</div>
<div class="w16">…</div>
<div class="w24">…</div>
<div class="w32">…</div>
<div class="w48">…</div>
<div class="w64">…</div>
<div class="w96">…</div>
<div class="w128">…</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sizing units width classes allow you to set the width of an element according to a predefined set of 12 common values in used in Stacks.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+
+ .ws1 |
+ width: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+ .ws2 |
+ width: 256px; |
+ 16rem |
+
+
+ |
+
+
+
+ .ws3 |
+ width: 344px; |
+ 21.5rem |
+
+
+ |
+
+
+
+ .ws4 |
+ width: 448px; |
+ 28rem |
+
+
+ |
+
+
+
+ .ws5 |
+ width: 512px; |
+ 32rem |
+
+
+ |
+
+
+
+ .ws6 |
+ width: 640px; |
+ 40rem |
+
+
+ |
+
+
+
+ .ws7 |
+ width: 768px; |
+ 48rem |
+
+
+ |
+
+
+
+ .ws8 |
+ width: 848px; |
+ 53rem |
+
+
+ |
+
+
+
+ .ws9 |
+ width: 960px; |
+ 60rem |
+
+
+ |
+
+
+
+ .ws10 |
+ width: 1024px; |
+ 64rem |
+
+
+ |
+
+
+
+ .ws11 |
+ width: 1120px; |
+ 70rem |
+
+
+ |
+
+
+
+ .ws12 |
+ width: 1280px; |
+ 80rem |
+
+
+ |
+
+
+
+
+
+
<div class="ws1">…</div>
<div class="ws2">…</div>
<div class="ws3">…</div>
<div class="ws4">…</div>
<div class="ws5">…</div>
<div class="ws6">…</div>
<div class="ws7">…</div>
<div class="ws8">…</div>
<div class="ws9">…</div>
<div class="ws10">…</div>
<div class="ws11">…</div>
<div class="ws12">…</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fluid width classes allow you to set the width of an element to a percentage of the parent element's width or to the full width of the viewport.
+
+
+
+
+
+
+ | Class |
+ Value |
+ Responsive? |
+
+
+
+
+
+ .w10 |
+ width: 10% |
+
+
+ |
+
+
+
+ .w20 |
+ width: 20% |
+
+
+ |
+
+
+
+ .w25 |
+ width: 25% |
+
+
+
+
+ |
+
+
+
+ .w30 |
+ width: 30% |
+
+
+ |
+
+
+
+ .w33 |
+ width: 33% |
+
+
+
+
+ |
+
+
+
+ .w40 |
+ width: 40% |
+
+
+ |
+
+
+
+ .w50 |
+ width: 50% |
+
+
+
+
+ |
+
+
+
+ .w60 |
+ width: 60% |
+
+
+ |
+
+
+
+ .w66 |
+ width: 66% |
+
+
+ |
+
+
+
+ .w70 |
+ width: 70% |
+
+
+ |
+
+
+
+ .w75 |
+ width: 75% |
+
+
+
+
+ |
+
+
+
+ .w80 |
+ width: 80% |
+
+
+ |
+
+
+
+ .w90 |
+ width: 90% |
+
+
+ |
+
+
+
+ .w100 |
+ width: 100% |
+
+
+
+
+ |
+
+
+
+ .w-screen |
+ width: 100vw; |
+
+
+ |
+
+
+ .w-auto |
+ width: auto; |
+
+
+ |
+
+
+
+
+
<div class="w10">…</div>
<div class="w20">…</div>
<div class="w25">…</div>
<div class="w30">…</div>
<div class="w33">…</div>
<div class="w40">…</div>
<div class="w50">…</div>
<div class="w60">…</div>
<div class="w66">…</div>
<div class="w70">…</div>
<div class="w75">…</div>
<div class="w80">…</div>
<div class="w90">…</div>
<div class="w100">…</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Min width classes allow you to set the minimum width of an element.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+ .wmn0 |
+ min-width: 0; |
+ - |
+
+
+ |
+
+
+
+ .wmn1 |
+ min-width: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+ .wmn2 |
+ min-width: 256px; |
+ 16rem |
+
+
+ |
+
+
+
+ .wmn3 |
+ min-width: 344px; |
+ 21.5rem |
+
+
+ |
+
+
+
+ .wmn4 |
+ min-width: 448px; |
+ 28rem |
+
+
+ |
+
+
+
+ .wmn5 |
+ min-width: 512px; |
+ 32rem |
+
+
+ |
+
+
+
+ .wmn6 |
+ min-width: 640px; |
+ 40rem |
+
+
+ |
+
+
+
+ .wmn7 |
+ min-width: 768px; |
+ 48rem |
+
+
+ |
+
+
+
+ .wmn8 |
+ min-width: 848px; |
+ 53rem |
+
+
+ |
+
+
+
+ .wmn9 |
+ min-width: 960px; |
+ 60rem |
+
+
+ |
+
+
+
+ .wmn10 |
+ min-width: 1024px; |
+ 64rem |
+
+
+ |
+
+
+
+ .wmn11 |
+ min-width: 1120px; |
+ 70rem |
+
+
+ |
+
+
+
+ .wmn12 |
+ min-width: 1280px; |
+ 80rem |
+
+
+ |
+
+
+
+
+
+
+
+ .wmn25 |
+ min-width: 25%; |
+ - |
+
+
+ |
+
+
+
+ .wmn50 |
+ min-width: 50%; |
+ - |
+
+
+ |
+
+
+
+ .wmn75 |
+ min-width: 75%; |
+ - |
+
+
+ |
+
+
+
+ .wmn100 |
+ min-width: 100%; |
+ - |
+
+
+
+
+ |
+
+
+
+ .wmn-screen |
+ min-width: 100vh; |
+ - |
+
+
+ |
+
+
+ .wmn-initial |
+ min-width: initial; |
+ - |
+
+
+ |
+
+
+
+
+
+
+
+
+ Max width classes allow you to set the maximum width of an element.
+
+
+
+
+
+
+ | Class |
+ Computed value |
+ rem value |
+ Responsive? |
+
+
+
+
+
+ .wmx1 |
+ max-width: 128px; |
+ 8rem |
+
+
+ |
+
+
+
+ .wmx2 |
+ max-width: 256px; |
+ 16rem |
+
+
+ |
+
+
+
+ .wmx3 |
+ max-width: 344px; |
+ 21.5rem |
+
+
+ |
+
+
+
+ .wmx4 |
+ max-width: 448px; |
+ 28rem |
+
+
+ |
+
+
+
+ .wmx5 |
+ max-width: 512px; |
+ 32rem |
+
+
+ |
+
+
+
+ .wmx6 |
+ max-width: 640px; |
+ 40rem |
+
+
+ |
+
+
+
+ .wmx7 |
+ max-width: 768px; |
+ 48rem |
+
+
+ |
+
+
+
+ .wmx8 |
+ max-width: 848px; |
+ 53rem |
+
+
+ |
+
+
+
+ .wmx9 |
+ max-width: 960px; |
+ 60rem |
+
+
+ |
+
+
+
+ .wmx10 |
+ max-width: 1024px; |
+ 64rem |
+
+
+ |
+
+
+
+ .wmx11 |
+ max-width: 1120px; |
+ 70rem |
+
+
+ |
+
+
+
+ .wmx12 |
+ max-width: 1280px; |
+ 80rem |
+
+
+ |
+
+
+
+
+
+
+
+ .wmx25 |
+ max-width: 25%; |
+ - |
+
+
+ |
+
+
+
+ .wmx50 |
+ max-width: 50%; |
+ - |
+
+
+ |
+
+
+
+ .wmx75 |
+ max-width: 75%; |
+ - |
+
+
+ |
+
+
+
+ .wmx100 |
+ max-width: 100%; |
+ - |
+
+
+
+
+ |
+
+
+
+
+ .wmx-screen |
+ max-width: 100vh; |
+ - |
+
+
+ |
+
+
+ .wmx-initial |
+ max-width: initial; |
+ - |
+
+
+ |
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/activity-indicator.md b/packages/stacks-docs-next/src/docs/public/system/components/activity-indicator.md
new file mode 100644
index 0000000000..8df09d12b7
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/activity-indicator.md
@@ -0,0 +1,193 @@
+---
+title: "Activity indicator"
+description: "Stacks provides a small jewel for indicating new activity."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-activityindicator--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18796"
+---
+
+
+
+## Classes
+
+
+
+## Examples
+
+### Default
+
+By default, our indicator has no positioning attached to it. Depending on your context, you can modify the activity indicator's positioning using any combination of atomic classes. Since our activity indicator has no inherent semantic meaning, make sure to include [visually-hidden, screenreader-only](/system/base/visibility) text with the `v-visible-sr` class.
+
+```html
+
+
+
+
+
+
+
+
+
+ …
+
+
+
+
+
+
…
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+
+
+ @Svg.Notification
+
+
+
+
+
+ @Svg.Notification
+
+
+
+```
+
+
+
+
+
+### Variations
+
+Stacks also provides alternative styling for success, warning, and danger states.
+
+```html
+
+
+
+```
+
+
+
+ {#each [
+ { variant: 'success', bg: 'bg-blue-400 d:bg-blue-200' },
+ { variant: 'warning', bg: 'bg-yellow-400 d:bg-yellow-200' },
+ { variant: 'danger', bg: 'bg-red-400 d:bg-red-200' },
+ ] as { variant, bg }}
+
+ {/each}
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/avatars.md b/packages/stacks-docs-next/src/docs/public/system/components/avatars.md
new file mode 100644
index 0000000000..0412fbc0f8
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/avatars.md
@@ -0,0 +1,229 @@
+---
+title: "Avatars"
+description: "Avatars are used to quickly identify users or teams."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-avatar--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18797&p=f&t=c9NSyJWdASb80eVC-0"
+---
+
+
+
+## Classes
+
+
+
+## Examples
+
+### Users
+
+Including an image with the class `s-avatar--image` within `s-avatar` will apply the correct size. Remember, you'll want to double the size of the avatar image to account for retina screens.
+
+```html
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+```
+
+
+
+
+
+ | Size |
+ Class |
+ Example |
+
+
+
+ {#each sizes as size}
+
+ {size}px |
+ .s-avatar{size > 16 ? `__${size}` : ''} |
+
+
+ |
+
+ {/each}
+
+
+
+
+### Activity
+
+Avatars can display activity indicators to show activities or status changes. Add the `s-avatar--indicator` class to a child element of `s-avatar` along with `s-activity-indicator` and `s-activity-indicator__sm` classes. The indicator is positioned at the top-right corner of the avatar.
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+ | Size |
+ Class |
+ Example |
+
+
+
+ {#each [16, 24] as size}
+
+ {size}px |
+ .s-avatar{size > 16 ? `__${size}` : ''} |
+
+
+ |
+
+ {/each}
+
+
+
+
+### Stack Internal
+
+When displaying a team's identity, we badge the avatar with a shield. We fall back to the first letter of their name and a color we choose at random. As Stack Internal administrators add more data—choosing a color or uploading an avatar—we progressively enhance the avatar.
+
+In this example, from left to right, we have a team name of Hum with no avatar or custom color. In the middle we have a team name of Hum with a custom color. In the last example, we have a team name of Hum with a custom avatar applied.
+
+```html
+
+
+
H
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+
+
+ H
+ Hum
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+
+
+ H
+ Hum
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+
+
+ H
+ Hum
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+
+
+ H
+ Hum
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+
+
+ H
+ Hum
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+
+
+ H
+ Hum
+ @Svg.ShieldXSm.With("native s-avatar--badge")
+
+```
+
+
+
+
+
+ | Size |
+ Class |
+ Custom color |
+ Brand color |
+ Custom avatar |
+
+
+
+ {#each sizes as size}
+
+ {size}px |
+ .s-avatar{size > 16 ? `__${size}` : ''} |
+
+
+ |
+
+
+ |
+
+
+ |
+
+ {/each}
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/badges.md b/packages/stacks-docs-next/src/docs/public/system/components/badges.md
new file mode 100644
index 0000000000..fd20a6bf1e
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/badges.md
@@ -0,0 +1,327 @@
+---
+title: "Badges"
+description: "Badges are labels used for flags, earned achievements, and number totals."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-badge--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18799&p=f&m=dev"
+---
+
+
+
+## Classes
+
+
+
+## Styles
+
+### Default
+
+```html
+
+ default
+
+```
+
+
+
+
+
+### General
+
+A general-purpose badge used for functional information and system-level status updates.
+
+```html
+
+
+ Badge
+
+ general
+
+```
+
+
+
+
+
+### Reputation
+
+A reputation badge to display a user's total rep count.
+
+```html
+
+
+ Rep badge
+
+ 99 rep
+
+```
+
+
+
+
+
+### Activity
+
+An activity badge to signal real-time events and draw attention.
+
+```html
+
+
+ Activity badge
+
+ new message
+
+```
+
+
+
+
+
+### Achievement
+
+Badges that provide information about user achievements.
+
+```html
+
+
+ Gold badge
+
+ Great Question
+
+
+
+ Silver badge
+
+ Favorite Question
+
+
+
+ Bronze badge
+
+ Altruist
+
+```
+
+
+
+
+
+
+
+
+
+### Tag
+
+Badges that display achievements a user has earned for their contributions within a specific topic/tag.
+
+```html
+
+
+ Gold tag badge
+
+ python
+
+
+
+ Silver tag badge
+
+ css
+
+
+
+ Bronze tag badge
+
+ javascript
+
+```
+
+
+
+
+
+
+
+
+
+### States
+
+Use State badges to communicate semantic status or severity, such as success, warning, or danger. These variants apply specific system colors to convey meaning and can be configured with or without icons.
+
+```html
+
+ @Svg.Document
+ Archived
+
+
+ @Svg.Compose
+ Draft
+
+
+ @Svg.Eye
+ Review
+
+
+ @Svg.Flag
+ Closed
+
+
+ @Svg.Challenge
+ Deleted
+
+
+ @Svg.Key
+ Pinned
+
+
+ @Svg.Check
+ Success
+
+
+ @Svg.Star
+ New
+
+```
+
+
+
+
+ {#each states as { state, icon, label }}
+
+ {/each}
+
+
+
+### Squared
+
+Use the squared variant sparingly to provide additional emphasis, reserving it primarily for states related to gamification or achievements.
+
+```html
+
+ @Svg.Check
+ Accepted answer
+
+
+ @Svg.VoteUp
+ Earn badge
+
+```
+
+
+
+
+
+
+
+
+### Important
+
+Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user.
+
+```html
+
+ @Svg.Notification
+ Needs attention
+
+
+ @Svg.VoteUp
+ Ending soon
+
+
+ Spam
+
+
+ +100
+
+```
+
+
+
+
+
+
+
+
+
+
+### User
+
+```html
+
Admin
+
Moderator
+
Staff
+
Bot
+
AI
+
New
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Sizes
+
+Badges come in three sizes.
+
+```html
+
+ Small
+
+
+ Default
+
+
+ Large
+
+```
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/banners.md b/packages/stacks-docs-next/src/docs/public/system/components/banners.md
new file mode 100644
index 0000000000..6e13b22e1f
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/banners.md
@@ -0,0 +1,189 @@
+---
+title: "Banners"
+description: "Banners are full-width notices used for system and engagement messaging. They are highly intrusive and should be used only when essential information needs to be conveyed to the user."
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=5982-7648&m=dev"
+---
+
+
+
+## Classes
+
+
+
+## Usage guidelines
+
+System banners are used for **system** messaging. They are full-width notices placed in one of two locations:
+
+- **Pinned to the top of the browser window** — Use when the banner relates to the entire website (e.g. the site is in read-only mode). Add `.is-pinned` to pin the banner above all other content including the topbar.
+- **Below the top navigation bar** — The default placement. Use when the banner affects only a particular area of the product (e.g. a subscription is about to expire).
+
+Refer to the [Classes section](#classes) for more information on how to apply the correct styles.
+
+## Examples
+
+
+
+### Base
+
+```html
+
…
+
…
+```
+
+
+
+
+
+
+### Info
+
+```html
+
…
+
…
+```
+
+
+
+
+
+
+### Success
+
+```html
+
…
+
…
+```
+
+
+
+
+
+
+### Warning
+
+```html
+
…
+
…
+```
+
+
+
+
+
+
+### Danger
+
+```html
+
…
+
…
+```
+
+
+
+
+
+
+### Featured
+
+```html
+
…
+
…
+```
+
+
+
+
+
+
+### Activity
+
+```html
+
…
+
…
+```
+
+
+
+
+
+
+## JavaScript
+
+The `.s-banner` component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.
+
+### Example
+
+```html
+
+ Example banner
+
+…
+
+```
+
+```javascript
+document.querySelector(".js-banner-toggle").addEventListener("click", function(e) {
+ Stacks.showBanner(document.querySelector("#example-banner"));
+});
+```
+
+### Attributes
+
+| Attribute | Applies to | Description |
+|---|---|---|
+| `data-controller="s-banner"` | Controller element | Wires up the element to the banner controller. This may be a `.s-banner` element or a wrapper element. |
+| `data-s-banner-target="banner"` | `.s-banner` element | Wires up the element that is to be shown/hidden. |
+| `data-s-banner-remove-when-hidden="true"` | Controller element | (optional) Removes the banner from the DOM entirely when it is hidden. |
+
+### Events
+
+| Event | Applies to | Description |
+|---|---|---|
+| `s-banner:show` | Banner target | Fires immediately before showing the banner. Calling `.preventDefault()` cancels the display of the banner. |
+| `s-banner:shown` | Banner target | Fires after the banner has been visually shown. |
+| `s-banner:hide` | Banner target | Fires immediately before hiding the banner. Calling `.preventDefault()` cancels the removal of the banner. |
+| `s-banner:hidden` | Banner target | Fires after the banner has been visually hidden. |
+
+### Event details
+
+| event.detail | Applicable events | Description |
+|---|---|---|
+| `dispatcher` | N/A | Contains the `Element` that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc. |
+
+### Helpers
+
+| Function | Parameters | Description |
+|---|---|---|
+| `Stacks.showBanner` | `Element`: the element the `data-controller="s-banner"` attribute is on | Helper to manually show an s-banner element via external JS. |
+| `Stacks.hideBanner` | `Element`: the element the `data-controller="s-banner"` attribute is on | Helper to manually hide an s-banner element via external JS. |
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/bling.md b/packages/stacks-docs-next/src/docs/public/system/components/bling.md
new file mode 100644
index 0000000000..488f575af6
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/bling.md
@@ -0,0 +1,119 @@
+---
+title: "Bling"
+description: "Bling is used to indicate award type in badges and user cards."
+svelte: "https://beta.svelte.stackoverflow.design/?path=/docs/components-bling--docs"
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18798"
+---
+
+
+
+## Classes
+
+
+
+## Types
+
+Use the clear bling variant only when its associated color is already present in the component, such as within a colored tag badge or alongside a filled element.
+
+```html
+
+ …
+
+
+ …
+
+
+ …
+
+
+ …
+
+```
+
+
+
+ {#snippet example(row)}
+
+ {/snippet}
+
+
+
+## Filled
+
+Use the filled bling style to represent a specific achievement badge or to display the total count of badges a user has earned.
+
+```html
+
…
+
…
+
…
+
…
+
…
+
…
+```
+
+
+
+ {#snippet example(row)}
+
+ {/snippet}
+
+
+
+## Sizes
+
+A bling component has a default size. To change the bling's size, apply one of the following sizing classes along with the base `.s-bling` class.
+
+```html
+
…
+
…
+
…
+```
+
+
+
+ {#snippet example(row)}
+
+ {/snippet}
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/breadcrumbs.md b/packages/stacks-docs-next/src/docs/public/system/components/breadcrumbs.md
new file mode 100644
index 0000000000..b1fddb3414
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/breadcrumbs.md
@@ -0,0 +1,17 @@
+---
+title: "Breadcrumbs"
+---
+
+
+
Breadcrumbs
+
+
+
+ This component has been removed in Stacks v3. If using Stacks v2, please refer to the v2 documentation for more information.
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/button-groups.md b/packages/stacks-docs-next/src/docs/public/system/components/button-groups.md
new file mode 100644
index 0000000000..4c5f0af736
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/button-groups.md
@@ -0,0 +1,17 @@
+---
+title: "Button Groups"
+---
+
+
+
Button groups
+
+
+
+ This component has been removed in Stacks v3. If using Stacks v2, please refer to the v2 documentation for more information.
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md b/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md
index 0ea20570f7..2d0dfd000d 100644
--- a/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md
+++ b/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md
@@ -1,7 +1,7 @@
---
title: Buttons
svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-button--docs
-figma: https://svelte.stackoverflow.design/figma/buttons
+figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18802"
description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.
updated: 2025-12-09
---
@@ -24,8 +24,35 @@ updated: 2025-12-09
import BadgeButtonTable from './BadgeButtonTable.svelte';
import SizeTable from './SizeTable.svelte';
import ToggleButtonDemo from './ToggleButtonDemo.svelte';
+ import ClassTable from '$components/ClassTable.svelte';
+ import Example from '$components/Example.svelte';
+ import { Notice } from '@stackoverflow/stacks-svelte';
+ import type { ClassTableRow } from '$components/ClassTable.svelte';
+
+ const classes: ClassTableRow[] = [
+ { class: '.s-btn', parent: 'N/A', modifies: 'N/A', description: 'Base button element.' },
+ { class: '.s-btn--badge', parent: '.s-btn', modifies: 'N/A', description: 'Badge container for the button.' },
+ { class: '.s-btn__clear', parent: 'N/A', modifies: '.s-btn', description: 'Clear button variant.' },
+ { class: '.s-btn__danger', parent: 'N/A', modifies: '.s-btn', description: 'Danger button variant.' },
+ { class: '.s-btn__featured', parent: 'N/A', modifies: '.s-btn', description: 'Featured button variant.' },
+ { class: '.s-btn__tonal', parent: 'N/A', modifies: '.s-btn', description: 'Tonal button variant.' },
+ { class: '.s-btn__dropdown', parent: 'N/A', modifies: '.s-btn', description: 'Dropdown button variant.' },
+ { class: '.s-btn__icon', parent: 'N/A', modifies: '.s-btn', description: 'Icon button variant.' },
+ { class: '.s-btn__link', parent: 'N/A', modifies: '.s-btn', description: 'Link button variant.' },
+ { class: '.s-btn__unset', parent: 'N/A', modifies: '.s-btn', description: 'Unset button variant.' },
+ { class: '.s-btn__facebook', parent: 'N/A', modifies: '.s-btn', description: 'Facebook button variant.' },
+ { class: '.s-btn__github', parent: 'N/A', modifies: '.s-btn', description: 'GitHub button variant.' },
+ { class: '.s-btn__google', parent: 'N/A', modifies: '.s-btn', description: 'Google button variant.' },
+ { class: '.s-btn__xs', parent: 'N/A', modifies: '.s-btn', description: 'Extra small button variant.' },
+ { class: '.s-btn__sm', parent: 'N/A', modifies: '.s-btn', description: 'Small button variant.' },
+ { class: '.s-btn__lg', parent: 'N/A', modifies: '.s-btn', description: 'Large button variant.' },
+ ];
+## Classes
+
+
+
## Styles
Stacks provides 3 different button styles:
@@ -46,7 +73,9 @@ Base buttons can gain clear styling with the `.s-btn__clear` class.
```
-
+
+
+
### Danger
@@ -57,7 +86,9 @@ Danger buttons are a secondary button style, used to visually communicate destru
```
-
+
+
+
### Featured
@@ -68,7 +99,9 @@ Featured buttons are a secondary button style, used to visually draw attention t
```
-
+
+
+
### Tonal
@@ -79,7 +112,9 @@ Tonal buttons are a secondary button style, a grayscale visual treatment. Used i
```
-
+
+
+
## Anchors
@@ -89,7 +124,9 @@ Anchors can be rendered with the `.s-btn` to adopt a button-like visual style fo
Ask question
```
-
+
+
+
## Loading
@@ -99,7 +136,9 @@ Any button can have a loading state applied by adding the `.is-loading` state cl
```
-
+
+
+
## Dropdowns
@@ -109,7 +148,9 @@ Adding the class `.s-btn__dropdown` to any button style will add an appropriatel
```
-
+
+
+
## Badges
@@ -124,13 +165,21 @@ Adding an `.s-btn--badge` to any button will add an appropriately-styled badge.
```
-
+
+
+
## Sizes
A button's default font-size is determined by the `@body-fs` variable. To change the button's font-size, use the following classes with `.s-btn`:
-
+
+ Note: Avoid using icons within the extra small button size. This variant is designed for tight spaces, and standard icons are too large to fit without breaking the button's height and layout.
+
+
+
+
+
## Toggle buttons
@@ -161,30 +210,126 @@ Stacks provides additional classes for cases that are a bit more rare.
### Disabled
-| Type | Class | Definition | Example |
-| -------- | ------------------------ | ----------------------------------------------------------- | -------------------------------------------------------------- |
-| Disabled | `[aria-disabled="true"]` | Adds disabled styling to any element with `.s-btn` applied. |
|
+
+
+
+
+
+ | Type |
+ Attribute |
+ Definition |
+ Example |
+
+
+
+
+ | Disabled |
+ [aria-disabled="true"] |
+ Adds disabled styling to any element with .s-btn applied. |
+ |
+
+
+
+
### Resets
-| Type | Class | Definition | Example |
-| ----- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
-| Unset | `.s-btn__unset` | Removes all styling from a button and reverts focus states to browser default. |
|
-| Link | `.s-btn__link` | Styles a button element as though it were a link. Instead of transforming an `s-btn` to a link, you most likely want to style a `button` as a [link](/product/components/links/#single-link-examples). |
|
+
+
+
+
+
+ | Type |
+ Class |
+ Definition |
+ Example |
+
+
+
+
+ | Unset |
+ .s-btn__unset |
+ Removes all styling from a button and reverts focus states to browser default. |
+ |
+
+
+ | Link |
+ .s-btn__link |
+ Styles a button element as though it were a link. Instead of transforming an s-btn to a link, you most likely want to style a button as a link. |
+ |
+
+
+
+
### Icons
-| Type | Class | Definition | Examples |
-| ---- | -------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Icon | `.s-btn__icon` | Adds some margin overrides that apply to an icon within a button |
|
+
+
+
+
+
+ | Type |
+ Class |
+ Definition |
+ Examples |
+
+
+
+
+ | Icon |
+ .s-btn__icon |
+ Adds some margin overrides that apply to an icon within a button. |
+
+
+
+
+
+ |
+
+
+
+
### Social
-| Type | Class | Definition | Examples |
-| -------- | ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| Facebook | `.s-btn__facebook` | Styles a button consistent with Facebook's branding |
|
-| Google | `.s-btn__google` | Styles a button consistent with Google's branding |
|
-| GitHub | `.s-btn__github` | Styles a button consistent with GitHub's branding |
|
+
+
+
+
+
+ | Type |
+ Class |
+ Definition |
+ Examples |
+
+
+
+
+ | Facebook |
+ .s-btn__facebook |
+ Styles a button consistent with Facebook's branding. |
+ |
+
+
+ | Google |
+ .s-btn__google |
+ Styles a button consistent with Google's branding. |
+ |
+
+
+ | GitHub |
+ .s-btn__github |
+ Styles a button consistent with GitHub's branding. |
+ |
+
+
+
+
## Ordering
@@ -199,10 +344,12 @@ Most button groups should be ordered from the most important to the least import
```
-
-
-
-
+
+
+
+
+
+
### Within a column
@@ -215,10 +362,12 @@ Sometimes the layout dictates that buttons need to be stacked on top of each oth
### Within a header
@@ -239,10 +388,12 @@ Sometimes the best place for a series of actions is in the same area as the titl