@stackoverflow/stacks 1.7.1 → 1.9.0

package/lib/{css/components → components/expandable}/expandable.less

@@ -17,6 +17,7 @@
         margin-bottom @ex-transition-duration cubic-bezier(0, 0, 0, 1),
         transform @ex-transition-duration cubic-bezier(1, 0, 1, 1),
         opacity @ex-transition-duration cubic-bezier(1, 0, 1, 1);
+    --_ex-content-v: unset;
 
     &:not(.is-expanded) {
         --_ex-after-h: 0;
@@ -32,6 +33,7 @@
             max-height 0s @ex-transition-duration,
             transform @ex-transition-duration cubic-bezier(0, 1, 1, 1),
             opacity @ex-transition-duration cubic-bezier(0, 1, 1, 1);
+        --_ex-content-v: hidden;
 
         & .s-expandable--content {
             @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
@@ -62,6 +64,7 @@
         opacity: var(--_ex-content-o);
         -webkit-transform: var(--_ex-content-transform);
         transform: var(--_ex-content-transform);
+        visibility: var(--_ex-content-v);
 
         -ms-flex-preferred-size: 100%;
         flex-basis: 100%;

package/lib/components/expandable/expandable.test.ts

@@ -0,0 +1,53 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import "../../index";
+
+const user = userEvent.setup();
+
+describe("expandable-control", () => {
+    it("should focus on expandable content only when expanded", async () => {
+        const trigger = await fixture(html`
+            <button
+                data-controller="s-expandable-control"
+                aria-expanded="false"
+                aria-controls="expandable-example"
+            >
+                expandable trigger
+            </button>
+            <div class="s-expandable" id="expandable-example">
+                <div class="s-expandable--content">
+                    <button>inside expandable</button>
+                </div>
+            </div>
+        `);
+
+        // expandable is not expanded
+        let expandableTrigger = screen.getByRole("button", {
+            name: "expandable trigger",
+            expanded: false,
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        expect(
+            screen.queryByRole("button", {
+                name: "inside expandable",
+            })
+        ).to.be.null;
+
+        await userEvent.click(expandableTrigger);
+
+        // expandable is now expanded
+        expandableTrigger = screen.getByRole("button", {
+            name: "expandable trigger",
+            expanded: true,
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        expect(
+            screen.getByRole("button", {
+                name: "inside expandable",
+            })
+        ).to.be.visible;
+    });
+});

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

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 // Radio buttons only trigger a change event when they're *checked*, but not when
 // they're *unchecked*. Therefore, if we have an active `s-expandable-control` in

package/lib/components/input-fill/input-fill.less

@@ -0,0 +1,35 @@
+.s-input-fill {
+    --_if-bc: var(--bc-darker);
+    --_if-bg: var(--black-050);
+    --_if-blw: 0;
+    --_if-blr: 0;
+    --_if-brr: 0;
+    --_if-brw: 0;
+
+    &&__clear {
+        --_if-bc: transparent;
+        --_if-bg: transparent;
+    }
+
+    &.order-first {
+        --_if-blw: var(--su-static1);
+        --_if-blr: var(--br-sm);
+    }
+
+    &.order-last {
+        --_if-brw: var(--su-static1);
+        --_if-brr: var(--br-sm);
+    }
+
+    background-color: var(--_if-bg);
+    border: var(--su-static1) solid var(--_if-bc);
+    border-left-width: var(--_if-blw);
+    border-right-width: var(--_if-brw);
+    border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
+
+    color: var(--fc-medium);
+    font-family: inherit;
+    line-height: var(--lh-sm);
+    padding: 0.6em 0.7em;
+    white-space: nowrap;
+}

package/lib/components/input-icon/input-icon.less

@@ -0,0 +1,45 @@
+.s-input-icon {
+    --_ii-fc: unset;
+    --_ii-r: 0.7em;
+
+    // MODIFIERS
+    .has-error & {
+        --_ii-fc: var(--red-400);
+    }
+
+    .has-success & {
+        --_ii-fc: var(--green-400);
+    }
+
+    .has-warning & {
+        --_ii-fc: var(--yellow-600);
+    }
+
+    .is-disabled & {
+        --_ii-fc: var(--black-400);
+    }
+
+    .is-readonly & {
+        --_ii-fc: var(--black-200);
+
+        .highcontrast-mode({
+            --_ii-fc: var(--fc-light);
+        });
+    }
+
+    &&__creditcard,
+    &&__search {
+        --_ii-r: auto;
+
+        color: var(--black-400);
+        left: 0.7em;
+    }
+
+    color: var(--_ii-fc);
+    right: var(--_ii-r);
+
+    margin-top: -9px; // Half the icon's height at 18px for centering;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+}

package/lib/components/input-message/input-message.less

@@ -0,0 +1,48 @@
+.s-input-message {
+    --_im-fc: unset;
+    --_im-a-fc: unset;
+    --_im-a-fc-hover: unset;
+
+    .input-states({
+        a {
+            text-decoration: underline;
+        }
+    });
+
+    fieldset[disabled] & {
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
+    }
+
+    // MODIFIERS
+    .has-error & {
+        --_im-fc: var(--red-500);
+        --_im-a-fc: var(--red-800);
+        --_im-a-fc-hover: var(--red-900);
+    }
+
+    .has-success & {
+        --_im-fc: var(--green-500);
+        --_im-a-fc: var(--green-800);
+        --_im-a-fc-hover: var(--green-900);
+    }
+
+    .has-warning & {
+        --_im-fc: var(--yellow-800);
+        --_im-a-fc: var(--yellow-900);
+    }
+
+    // CHILD ELEMENTS
+    a {
+        &:hover {
+            color: var(--_im-a-fc-hover);
+        }
+
+        color: var(--_im-a-fc);
+    }
+
+    color: var(--_im-fc);
+
+    font-size: var(--fs-caption);
+    padding: var(--su2);
+}

package/lib/components/input_textarea/input_textarea.less

@@ -0,0 +1,166 @@
+.s-input,
+.s-textarea {
+    --_in-bc: var(--bc-darker);
+    --_in-bc-focus: var(--theme-secondary-300);
+    --_in-bg: var(--white);
+    --_in-br: var(--br-sm);
+    --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+    --_in-c: unset;
+    --_in-fc: var(--fc-dark);
+    --_in-fc-focus: var(--black);
+    --_in-fs: var(--fs-body1);
+    --_in-o: unset;
+    --_in-px: 0.7em;
+    --_in-py: 0.6em;
+    --_in-placeholder-fc: var(--black-200);
+
+    // CONTEXTUAL STYLES
+    @supports (-webkit-overflow-scrolling: touch) {
+        --_in-fs: var(--su-static16); // 16px — Increase font size for mobile safari. This keeps our inputs from zooming the page while focused.
+        --_in-px: 0.55em;
+        --_in-py: 0.36em;
+
+        &::-webkit-input-placeholder {
+            line-height: normal !important;
+        }
+    }
+
+    .highcontrast-mode({
+        --_in-bc: var(--black);
+        --_in-placeholder-fc: var(--black-400);
+    });
+
+    // MODIFIERS
+    fieldset[disabled] &,
+    &[disabled],
+    &[readonly],
+    .is-readonly & {
+        --_in-c: not-allowed;
+    }
+
+    fieldset[disabled] &,
+    &[disabled] {
+        --_in-o: var(--_o-disabled-static);
+    }
+
+    &[readonly],
+    .is-readonly & {
+        .highcontrast-mode({
+            --_in-fc: var(--fc-light);
+        });
+
+        --_in-bg: var(--black-050);
+        --_in-bc: var(--bc-light);
+        --_in-fc: var(--black-200);
+        --_in-fc-focus: var(--_in-fc);
+    }
+
+    .validation-states(
+        in,
+        { .highcontrast-mode({ --_in-bc: var(--red-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--green-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--yellow-600); }); }
+    );
+
+    // Sizes
+    &&__sm {
+        .size-styles(sm; in; @styles: fs);
+    }
+
+    &&__md {
+        @supports (-webkit-overflow-scrolling: touch) {
+            --_in-fs: 17px;
+            --_in-py: 0.4em;
+        }
+
+        .size-styles(md; in; @styles: br, fs);
+    }
+
+    &&__lg {
+        .size-styles(lg; in; @styles: br, fs);
+        --_in-px: 0.6em;
+        --_in-py: 0.45em;
+    }
+
+    &&__xl {
+        .size-styles(xl; in; @styles: br, fs);
+        --_in-px: 0.5em;
+        --_in-py: 0.4em;
+    }
+
+    // CHILD ELEMENTS
+    .webkit-autofill();
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+        color: var(--_in-placeholder-fc);
+    }
+
+    &::placeholder {
+        opacity: 1;
+    }
+
+    &&__creditcard,
+    &&__search {
+        --_in-pl: var(--su-static32);
+    }
+
+    // INTERACTION
+    &:focus{
+        border-color: var(--_in-bc-focus);
+        box-shadow: var(--_in-bs-focus);
+        color: var(--_in-fc-focus);
+        outline: 0;
+    }
+
+    @scrollbar-styles();
+    background-color: var(--_in-bg);
+    border: var(--su-static1) solid var(--_in-bc);
+    border-radius: var(--_in-br);
+    color: var(--_in-fc);
+    cursor: var(--_in-c);
+    font-size: var(--_in-fs);
+    opacity: var(--_in-o);
+    padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
+
+    -webkit-appearance: none; // Removes shadows we don't want in mobile Safari
+    font-family: inherit;
+    margin: 0; // A guard against Core's default margins
+    width: 100%;
+}
+
+.s-input {
+    .input-states({
+        padding-right: var(--su32);
+    });
+
+    &:focus-within {
+        .highcontrast-mode({
+            --_in-bc-focus: var(--black);
+        });
+
+        border-color: var(--_in-bc-focus);
+        box-shadow: var(--_in-bs-focus);
+        color: var(--_in-fc-focus);
+        outline: 0;
+    }
+
+    &&__md {
+        --_in-py: 0.5em;
+    }
+}
+
+.s-textarea {
+    .input-states({
+        padding-right: var(--su48);
+    });
+
+    &&__md {
+        --_in-py: 0.72em;
+    }
+
+    ~ .s-input-icon {
+        right: 1.5em;
+        top: 1.5em;
+    }
+}

package/lib/{css/components/labels.less → components/label/label.less}

@@ -23,19 +23,19 @@
     // MODIFIERS
     // Sizes
     &&__sm {
-        --_la-fs: var(--fs-caption);
+        .size-styles(sm; la; @styles: fs);
     }
 
     &&__md {
-        --_la-fs: var(--fs-body3);
+        .size-styles(md; la; @styles: fs);
     }
 
     &&__lg {
-        --_la-fs: var(--fs-title);
+        .size-styles(lg; la; @styles: fs);
     }
 
     &&__xl {
-        --_la-fs: var(--fs-headline1);
+        .size-styles(xl; la; @styles: fs);
     }
 
     // CHILD ELEMENTS

package/lib/{css/components → components/link}/link.less

@@ -1,5 +1,5 @@
 // TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
-// it's tech debt that'll take some doing in comsumer's code to pay down.
+// it's tech debt that'll take some doing in consumer's code to pay down.
 a,
 .s-link {
     --_li-fc: var(--theme-link-color);
@@ -83,6 +83,13 @@ a,
         }
     }
 
+    // MODIFIERS
+    fieldset[disabled] & {
+        box-shadow: none !important;
+        opacity: var(--_o-disabled-static);
+        pointer-events: none;
+    }
+
     // INTERACTION
     &:active,
     &:hover {
@@ -98,7 +105,7 @@ a,
 .s-link {
     button& {
         &:focus {
-            outline: none;
+            outline: revert;
         }
 
         appearance: none;

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

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

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

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 export class TabListController extends Stacks.StacksController {
     private boundSelectTab!: (event: MouseEvent) => void;

package/lib/{css/components/notices.less → components/notice/notice.less}

@@ -194,51 +194,6 @@
     font-size: var(--fs-body1);
 }
 
-// Banner
-// 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
-}
-
-// Notice
 .s-notice {
     .construct-notice-component(s-notice);
 
@@ -246,47 +201,3 @@
     border-width: var(--su-static1);
     padding: var(--su16);
 }
-
-// Toast
-.s-toast {
-    @media (prefers-reduced-motion) {
-        transform: none !important;
-    }
-
-    &[aria-hidden="false"] {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-        transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
-        visibility: visible;
-    }
-
-    .s-notice {
-        box-shadow: var(--bs-sm);
-        max-width: 44rem;
-        padding-bottom: var(--su8);
-        padding-top: var(--su8);
-        pointer-events: all;
-        width: 100%;
-    }
-
-    display: flex;
-    justify-content: center;
-    left: var(--su8);
-    opacity: 0;
-    pointer-events: none;
-    position: fixed;
-    right: var(--su8);
-    top: var(--su16);
-    transform: translate3d(0, -66px, 0);
-    transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
-    visibility: hidden;
-    z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
-}
-
-//  [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/{css/components/popovers.less → components/popover/popover.less}

@@ -30,6 +30,7 @@
     &.is-visible {
         --_po-d: block;
     }
+
     &&__tooltip {
         --_po-wmn: unset;
         --_po-w: auto;

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

@@ -1,6 +1,6 @@
 import { createPopper, Placement } from "@popperjs/core";
 import type * as Popper from "@popperjs/core";
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 type OutsideClickBehavior =
     | "always"

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

@@ -1,11 +1,11 @@
 import { html, fixture, expect } from "@open-wc/testing";
 import { screen, waitForElementToBeRemoved } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import "../ts/index";
+import "../../index";
 
 const user = userEvent.setup();
 
-describe("s-tooltip", () => {
+describe("tooltip", () => {
     it("should make the tooltip element visible on hover (after a delay)", async () => {
         const trigger = await fixture(html`
             <button
@@ -19,10 +19,12 @@ describe("s-tooltip", () => {
             </button>
         `);
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(screen.queryByRole("tooltip")).to.be.null;
 
         await user.hover(trigger);
         const tooltip = await screen.findByRole("tooltip");
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(tooltip).to.be.visible;
 
         await user.unhover(trigger);
@@ -54,9 +56,11 @@ describe("s-tooltip", () => {
 
         await user.hover(button);
         const tooltip = await screen.findByRole("tooltip");
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(tooltip).to.be.visible;
 
         await user.hover(svg);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(tooltip).to.be.visible;
     });
 });

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

@@ -1,5 +1,5 @@
-import * as Stacks from "../stacks";
-import { BasePopoverController, PopoverController } from "./s-popover";
+import * as Stacks from "../../stacks";
+import { BasePopoverController, PopoverController } from "./popover";
 
 export interface TooltipOptions {
     placement: string;

package/lib/{test/s-tooltip.visual.test.ts → components/popover/tooltip.visual.test.ts}

@@ -2,11 +2,11 @@ import { html, fixture } from "@open-wc/testing";
 import { screen } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 import { visualDiff } from "@web/test-runner-visual-regression";
-import "../ts/index";
+import "../../index";
 
 const user = userEvent.setup();
 
-describe("s-tooltip", () => {
+describe("tooltip", () => {
     it("should not introduce visual regressions", async () => {
         const wrapper = await fixture(html`
             <div style="height: 100px; width: 160px; display: inline-block;">

package/lib/{css/components → components/post-summary}/post-summary.less

@@ -206,8 +206,12 @@
                 margin: 0 !important;
             }
 
-            padding: var(--su8) !important; // To override .s-btn class attributes
-            position: absolute !important; // To override .s-btn class attributes
+            &,
+            &.s-btn { // To override .s-btn class attributes
+                padding: var(--su8);
+                position: absolute;
+            }
+
             right: var(--su8);
             top: var(--su8);
         }