@stackoverflow/stacks 1.7.1 → 1.9.0

package/lib/{css/atomic/borders.less → atomic/border.less}

@@ -335,6 +335,24 @@
 .bc-yellow-800 { border-color: var(--yellow-800) !important; }
 .bc-yellow-900 { border-color: var(--yellow-900) !important; }
 
+//  $$  GOLD
+//  ----------------------------------------------------------------------------
+.bc-gold-lighter { border-color: var(--gold-lighter) !important; }
+.bc-gold { border-color: var(--gold) !important; }
+.bc-gold-darker { border-color: var(--gold-darker) !important; }
+
+//  $$  SILVER
+//  ----------------------------------------------------------------------------
+.bc-silver-lighter { border-color: var(--silver-lighter) !important; }
+.bc-silver { border-color: var(--silver) !important; }
+.bc-silver-darker { border-color: var(--silver-darker) !important; }
+
+//  $$  BRONZE
+//  ----------------------------------------------------------------------------
+.bc-bronze-lighter { border-color: var(--bronze-lighter) !important; }
+.bc-bronze { border-color: var(--bronze) !important; }
+.bc-bronze-darker { border-color: var(--bronze-darker) !important; }
+
 //  $$  PRIMARY
 //  ----------------------------------------------------------------------------
 .bc-theme-primary-025 { border-color: var(--theme-primary-025) !important; }

package/lib/base/fieldset.less

@@ -0,0 +1,5 @@
+fieldset {
+    border: 0;
+    min-width: 0;
+    padding: 0;
+}

package/lib/{css/base/icons.less → base/icon.less}

@@ -1,12 +1,3 @@
-//
-//  STACK OVERFLOW
-//  ICON STYLES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-
 .svg-icon,
 .svg-spot {
     vertical-align: bottom; // Make SVG play nicely while inline with text by default

package/lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -0,0 +1,21 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-activity-indicator",
+        variants: ["danger", "success", "warning"],
+        children: {
+            default: `<div class="v-visible-sr">New activity</div>`,
+            new: `new<div class="v-visible-sr">New activity</div>`,
+        },
+        skippedTestids: [
+            "s-activity-indicator-dark-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-success-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-warning-new", // TODO fix contrast issue
+            "s-activity-indicator-light-success-new", // TODO fix contrast issue
+            "s-activity-indicator-light-warning-new", // TODO fix contrast issue
+        ],
+    });
+});

package/lib/components/activity-indicator/activity-indicator.visual.test.ts

@@ -0,0 +1,23 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-activity-indicator",
+        variants: ["danger", "success", "warning"],
+        children: {
+            default: `<div class="v-visible-sr">New activity</div>`,
+            new: `new<div class="v-visible-sr">New activity</div>`,
+        },
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center hs1 ws1 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/components/avatar/avatar.a11y.test.ts

@@ -0,0 +1,36 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
+    switch (child) {
+        case "image":
+            return `<img
+                class="s-avatar--image"
+                src="https://picsum.photos/id/1/48"
+                alt="team logo"
+            />${srEl}`;
+        case "letter":
+            return `<div
+                class="s-avatar--letter"
+                aria-hidden="true">
+                    S
+            </div>${srEl}`;
+        default:
+            return srEl;
+    }
+};
+
+describe("avatar", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-avatar",
+        variants: ["24", "32", "48", "64", "96", "128"],
+        children: {
+            default: getChild(),
+            image: getChild("image"),
+            letter: getChild("letter"),
+        },
+        tag: "span",
+    });
+});

package/lib/components/avatar/avatar.visual.test.ts

@@ -0,0 +1,54 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const base64Image =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF/3IA/////44y/8OS/+fU//Xs/6tn/9e2EhvbMQAABH9JREFUeNrs3e1y2ygAhWELJHH/d7zuJpN1XAnxoe408Ly/6xnnHXEOIEwfDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gbAGEhrZl2VloY20PIk8tAzZbfkXA7eeuHyysVfdFMsXiY66ptiWF8Re05BdxF7HkBV7PUNW7FVx4E7sVSwrDjBw2+pC7NWwHtkTe3ULM7En9v6O2ONF7Ik9sSf2IPbEntgTexB7t8feTsynniD2Oh6tXex1hFoUe02kaxVi72JMZs+Rib0LLdkXFGLvaECWjkOxdxVmUex1rB6S2Kss2lcytSH2LnVkakPsXQ7E8xwTe5fuMrUh9vKj8CP4xN7lNOXc3mnwib1M2X7Z28VeS93mg0/sFZTG6WCMVSE51fqsYL4s9jpqQ+yV1caxErHXUxtir6c2xF5HbYRF7LXXhtjrqQ2x11MbYu9tLG4VtSH2empD7BUNxpPaSGKvPPh2sdcxX45i78baEHs18+X32hB7NfPl99oQex21MVHsxViaR8W1MU3s/XpMSvWF0tqYJfY+BmMq01dcG+scP6/6enTK9BW+1J0j9l5aYN0rP5BzM0XsbSUnAlpqY4LYezexFeRSbpslH3uDXdF64OG6est258PohXE8BK+7o6g29rJTQsPt1F3qK9qdTwMP2Wz2X1Vv0UvdbeQ53nl2Xesr2Z0Pww7Zs5lsafWW1MY+6JDNxv5/+kLb5/fXfzLirRdhKSGnr6A2tkGvJoxLGZnqva6NkAbdgA+pUN9a+QuWYYPu+98ee/W1/PJgoMG7lek7nW3UHiEdbKpcqu+kO2L9b4aG0rcWjt5jfWf2Z7kCeE891XtSG/O86A5d+tbZj1h0VW+c/ja90FG9uxMCFdWb/+SkZ1Oaq/d1vjzvXfvF+tLp+aiZT5S1Vm90lrFj02B3bW1d9X7T92u+7Aq9qk2D+Fob/v/Myu7YostC76xe9K966evfr5+7ekuXHVy1V6+R275pEMd3kPbGB+Syeod/8D7Sf41NBvPdMf7a4uXpaTGY0zd+4r0vDlKtwdPqHf/BOzzf8zQYqvRtcz54mXfUNUVyUL0T7AhcrBbKY/C36p1geVEy1y00+F3fBA9eKFxnlRXJa/XOcKxnqeF6Pv1VvTPc7RuXai6K5LN6Z9hQSUsb2Rh86pviUultaScTg/sMD15YeqmcT8/bFx1Foi/umk9P3hcMfqTenrabBT5j8DGTwHivwelOCTwNrnfJm/Ol2U0GZ74WdE+dBn9+Z/z2J9UZ7IjB7dZv8gPl9RRJIq89BiN57QZ38trn04G8k62E6xjcHuQ1D+JEXrvBnbz2+XQgr30+/SCveT69ktceg4m8doOBvDG/CXnkkTezvOXPQB555JFHHnnkkUceeeSRRx555JFHHnnkkWcnmTzyyCOPPPLII4888sgjjzzfhDzyyCOPPPL+9Ff+eyCPPPLII4888sgjjzzyyCOPPPLII4888sgDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPy//CPAAPiZOI3BPDFQAAAAAElFTkSuQmCC";
+
+const getChild = (child?: string): string => {
+    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
+    switch (child) {
+        case "image":
+            return `<img
+                class="s-avatar--image"
+                src="${base64Image}"
+                alt="team logo"
+            />${srEl}`;
+        case "letter":
+            return `<div
+                class="s-avatar--letter"
+                aria-hidden="true">
+                    S
+            </div>${srEl}`;
+        default:
+            return srEl;
+    }
+};
+
+describe("avatar", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-avatar",
+        variants: ["24", "32", "48", "64", "96", "128"],
+        children: {
+            default: getChild(),
+            image: getChild("image"),
+            letter: getChild("letter"),
+        },
+        attributes: {
+            href: "#",
+        },
+        tag: "a",
+        template: ({ component, testid }) => html`
+            <div
+                data-testid="${testid}"
+                class="d-inline-flex ai-center jc-center hmn1 wmn1 p8"
+            >
+                ${component}
+            </div>
+        `,
+        skippedTestids: [
+            /-letter/, // TODO: resolve font-family thrashing issues
+        ],
+    });
+});

package/lib/components/banner/banner.less

@@ -0,0 +1,51 @@
+// See also ./lib/components/notice/notice.less
+// TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
+// This would reduce the amount of CSS we ship to the client and simplify our codebase
+.s-banner {
+    --_no-x-offset: 0; // [1]
+    .construct-notice-component(s-banner);
+
+    &[aria-hidden="true"] { // If you want to hide and reveal the banner
+        --_no-x-offset: calc(var(--su48) + var(--su2) * -1); // -50px
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    &[aria-hidden="false"] {
+        --_no-x-offset: calc(var(--su48) + var(--su1)); // 49px
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &.is-pinned { //  If you want to put the banner above the topbar
+        z-index: calc(var(--zi-navigation-fixed) + 1);
+    }
+
+    &__body-pt {
+        padding-top: 93px;
+    }
+
+    & &--container { // When we want to keep hero content capped
+        margin: 0 auto;
+        max-width: calc(var(--s-step) * 10);
+        position: relative;
+        width: 100%;
+    }
+
+    border-width: var(--su-static1) 0;
+    inset: 0 0 auto 0;
+    padding: var(--su12);
+    position: fixed;
+    -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
+    transform: translate3d(0, var(--_no-x-offset), 0);
+    width: 100%;
+    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
+}
+
+//  [1] When we use .s-banner, we need to adjust the padding-top on
+//      the body tag. This class correctly adjusts the body padding ONLY if
+//      the notice is one line. If it wraps to multiple lines, more classes or
+//      (ideally) JS will need to be used to determine the notice's height
+//      at the time of render. The padding value is determined like so:
+//      50px (top bar) + 44px (notice height) - 1px (bottom border)
+//      The borders subtraction are necessary to neatly tuck everything together.

package/lib/{test/s-banner.test.ts → components/banner/banner.test.ts}

@@ -1,12 +1,12 @@
 import { html, fixture, expect } from "@open-wc/testing";
 import { screen } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import "../ts/index";
-import { showBanner, hideBanner } from "../ts/index";
+import "../../index";
+import { showBanner, hideBanner } from "../../controllers";
 
 const user = userEvent.setup();
 
-describe("s-banner", () => {
+describe("banner", () => {
     it("trigger should make banner visible", async () => {
         await fixture(html`
             <button data-toggle="s-banner" data-target="#test-banner">
@@ -29,10 +29,12 @@ describe("s-banner", () => {
         const button = screen.getByRole("button");
         const banner = screen.getByTestId("test-banner");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "true");
         button.addEventListener("click", () => showBanner(banner));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "false");
     });
 
@@ -64,10 +66,12 @@ describe("s-banner", () => {
         const button = screen.getByRole("button");
         const banner = screen.getByTestId("test-banner");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "false");
         button.addEventListener("click", () => hideBanner(banner));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "true");
     });
 });

package/lib/{ts/controllers/s-banner.ts → components/banner/banner.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 export class BannerController extends Stacks.StacksController {
     static targets = ["banner"];

package/lib/components/banner/banner.visual.test.ts

@@ -0,0 +1,36 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const bannerChild = `
+    <div
+        class="d-flex flex__center jc-space-between s-banner--container"
+        role="alertdialog"
+        aria-describedby="banner-message"
+    >
+        <div aria-label="banner message">
+            Test Banner
+        </div>
+        <div class="ml-auto myn8">
+            <span class="s-btn s-banner--btn">Close</span>
+        </div>
+    </div>
+`;
+
+describe("banner", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-banner",
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        attributes: {
+            role: "alert",
+            ariaHidden: "false",
+        },
+        children: {
+            default: bannerChild,
+        },
+        tag: "aside",
+    });
+});

package/lib/components/button/button.a11y.test.ts

@@ -0,0 +1,32 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("button", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-btn",
+        variants: ["danger", "muted", "primary"],
+        modifiers: {
+            primary: ["filled", "outlined"],
+            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
+            global: ["is-loading"],
+            standalone: [
+                ...["link", "unset"],
+                ...["facebook", "github", "google"],
+            ],
+        },
+        attributes: {
+            type: "button",
+        },
+        children: {
+            default: "Ask question",
+        },
+        tag: "button",
+        excludedTestids: [
+            /primary-outlined/, // This combination is not supported
+        ],
+        skippedTestids: [
+            /s-btn-dark/, // TODO remove when contrast bugs are fixed
+        ],
+    });
+});

package/lib/{css/components/buttons.less → components/button/button.less}

@@ -57,6 +57,7 @@
     });
 
     // STATES
+    fieldset[disabled] &,
     &[disabled],
     &[aria-disabled="true"] {
         --_bu-bs: none !important;
@@ -141,8 +142,6 @@
         &:focus-visible {
             outline-style: auto;
         }
-
-        outline: initial;
     }
 
     &&__link {
@@ -169,6 +168,7 @@
         .s-link();
         display: inline;
         font: inherit;
+        outline: revert;
         text-align: inherit;
     }
 
@@ -190,6 +190,8 @@
             font: unset;
             user-select: auto;
         }
+
+        outline: initial;
     }
 
     // Pseudo-elements and child-based modifiers
@@ -221,18 +223,17 @@
 
     // Size
     &&__xs {
+        .size-styles(xs; bu; @styles: fs);
         --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
-        --_bu-fs: var(--fs-fine);
         --_bu-p: 0.6em;
     }
 
     &&__sm {
-        --_bu-fs: var(--fs-caption);
+        .size-styles(sm; bu; @styles: fs);
     }
 
     &&__md {
-        --_bu-br: calc(var(--br-sm) + var(--su-static1));
-        --_bu-fs: var(--fs-body3);
+        .size-styles(md; bu; @styles: br, fs);
         --_bu-p: 0.7em;
     }
 

package/lib/components/button/button.visual.test.ts

@@ -0,0 +1,52 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    switch (child) {
+        case "badge":
+            return `Ask question
+                <span class="s-btn--badge">
+                    <span class="s-btn--number">198</span>
+                </span>`;
+        default:
+            return "Ask question";
+    }
+};
+
+describe("button", () => {
+    // TODO test disabled states, interaction pseudo-classes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-btn",
+        variants: ["danger", "muted", "primary"],
+        modifiers: {
+            primary: ["filled", "outlined"],
+            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
+            global: ["is-loading"],
+            standalone: [
+                ...["link", "unset"],
+                ...["facebook", "github", "google"],
+            ],
+        },
+        attributes: {
+            type: "button",
+        },
+        children: {
+            default: getChild(),
+            badge: getChild("badge"),
+        },
+        tag: "button",
+        template: ({ component, testid }) => html`
+            <div
+                class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+        excludedTestids: [
+            /primary-outlined/, // This combination is not supported
+        ],
+    });
+});

package/lib/{css/components/cards.less → components/card/card.less}

@@ -17,7 +17,7 @@
     }
 
     // CHILD ELEMENTS
-    p:last-of-type {
+    > :last-child {
         margin-bottom: 0;
     }
 

package/lib/components/check-control/check-control.less

@@ -0,0 +1,17 @@
+.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
+    --_cc-ai: center;
+
+    // CONTEXTUAL STYLES
+    .s-check-group & {
+        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
+    }
+
+    // CHILD ELEMENTS
+    .s-label {
+        font-weight: normal;
+    }
+
+    align-items: var(--_cc-ai);
+    display: flex;
+    gap: var(--su8);
+}

package/lib/components/check-group/check-group.less

@@ -0,0 +1,19 @@
+.s-check-group {
+    --_cg-fd: column;
+
+    // MODIFIERS
+    &&__horizontal {
+        --_cg-fd: row;
+    }
+
+    // CHILD ELEMENTS
+    // TODO HACK? <legend> isn't respecting gap...
+    legend.s-label {
+        margin-bottom: var(--su8);
+    }
+
+    flex-direction: var(--_cg-fd);
+
+    display: flex;
+    gap: var(--su8);
+}

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -0,0 +1,158 @@
+.s-checkbox,
+.s-radio {
+    --_ch-baw: var(--su-static1);
+    --_ch-bc: var(--bc-darker);
+    --_ch-bc-focus: var(--theme-secondary-300);
+    --_ch-bg: var(--white);
+    --_ch-bg-image: unset;
+    --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+
+    // CONTEXTUAL STYLES
+    fieldset[disabled] &,
+    &[disabled] {
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
+    }
+
+    .s-check-control & {
+        &[disabled] + .s-label {
+            &:extend(.is-disabled .s-label);
+        }
+    }
+
+    .s-check-group & {
+        margin-top: calc(var(--su2) + var(--su1)); // 3px
+    }
+
+    input& {
+        flex-shrink: 0;
+    }
+
+    // INTERACTION
+    &:focus {
+        box-shadow: var(--_ch-bs-focus);
+    }
+
+    background-color: var(--_ch-bg);
+    border: var(--_ch-baw) solid var(--_ch-bc);
+
+    appearance: none;
+    cursor: pointer;
+    font-size: inherit;
+    height: 1em;
+    margin: 0; // A guard against Core's default margins
+    outline: 0;
+    vertical-align: middle;
+    width: 1em;
+}
+
+.s-checkbox {
+
+    // CONTEXTUAL STYLES
+    .highcontrast-dark-mode({
+        &:checked, &:indeterminate {
+            --_ch-bc: var(--blue-700) !important;
+            --_ch-bc-focus: var(--_ch-bc);
+            --_ch-bg: var(--blue-300);
+        }
+    });
+
+    // STATES
+    &:checked, &:indeterminate {
+        --_ch-bc: var(--theme-secondary-400) !important;
+        --_ch-bg: var(--theme-secondary-400);
+
+        &:focus {
+            --_ch-bc-focus: var(--theme-secondary-400);
+        }
+    }
+
+    &:checked {
+        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
+    }
+
+    &:indeterminate {
+        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
+    }
+
+    // INTERACTION
+    &:focus {
+        border-color: var(--_ch-bc-focus);
+    }
+
+    background-image: var(--_ch-bg-image);
+
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    border-radius: var(--br-sm);
+}
+
+.s-radio {
+
+    // CONTEXTUAL STYLES
+    .highcontrast-dark-mode({
+        &:checked {
+            --_ch-bc: var(--blue-300);
+            outline: var(--su-static1) solid var(--black);
+        }
+    });
+
+    .dark-mode({
+        &:checked {
+            --_ch-bg: var(--black);
+        }
+    });
+
+    // STATES
+    &:checked {
+        --_ch-baw: 0.30769231em;
+        --_ch-bc: var(--theme-secondary-400);
+        --_ch-bg: var(--white);
+    }
+
+    border-radius: var(--br-circle);
+}
+
+.s-checkbox,
+.s-radio:not(:checked) {
+    .validation-states(ch);
+}
+
+.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
+    --_cc-ai: center;
+
+    // CONTEXTUAL STYLES
+    .s-check-group & {
+        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
+    }
+
+    // CHILD ELEMENTS
+    .s-label {
+        font-weight: normal;
+    }
+
+    align-items: var(--_cc-ai);
+    display: flex;
+    gap: var(--su8);
+}
+
+.s-check-group {
+    --_cg-fd: column;
+
+    // MODIFIERS
+    &&__horizontal {
+        --_cg-fd: row;
+    }
+
+    // CHILD ELEMENTS
+    // TODO HACK? <legend> isn't respecting gap...
+    legend.s-label {
+        margin-bottom: var(--su8);
+    }
+
+    flex-direction: var(--_cg-fd);
+
+    display: flex;
+    gap: var(--su8);
+}

package/lib/components/description/description.less

@@ -0,0 +1,9 @@
+.s-description {
+    .is-disabled & {
+        opacity: var(--_o-disabled-static);
+    }
+
+    color: var(--fc-medium);
+    font-size: var(--fs-caption);
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
+}