@stackoverflow/stacks 1.7.1 → 1.9.0

package/lib/components/select/select.less

@@ -0,0 +1,148 @@
+.s-select {
+    --_se-arrow-bc: currentColor transparent;
+    --_se-arrow-size: var(--su-static4); // Constant
+    --_se-select-bc: var(--bc-darker);
+    --_se-select-bc-focus: var(--theme-secondary-300);
+    --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+    --_se-select-bg: var(--white);
+    --_se-select-br: var(--br-sm);
+    --_se-select-fc: var(--black);
+    --_se-select-px: 0.7em;
+    --_se-select-py: 0.6em;
+    --_se-select-fs: var(--fs-body1);
+
+    // CONTEXTUAL STYLES
+    @supports (-webkit-overflow-scrolling: touch) {
+        --_se-select-fs: 16px; // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
+        --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size
+        --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size
+    }
+
+    // MODIFIERS
+    .input-states({
+        position: relative;
+    });
+
+    .validation-states(se-select);
+
+    .is-disabled & {
+        --_se-arrow-bc: var(--bc-darker) transparent;
+    }
+
+    &&__sm {
+        .size-styles(sm; se-select; @styles: fs);
+        // --_se-select-fs: var(--fs-caption);
+    }
+
+    &&__md {
+        .size-styles(md; se-select; @styles: br, fs);
+        --_se-select-py: 0.5em;
+    }
+
+    &&__lg {
+        .size-styles(lg; se-select; @styles: br, fs);
+        --_se-select-px: 0.6em;
+        --_se-select-py: 0.45em;
+    }
+
+    &&__xl {
+        .size-styles(xl; se-select; @styles: br, fs);
+        --_se-select-px: 0.5em;
+        --_se-select-py: 0.4em;
+    }
+
+    // CHILD ELEMENTS
+    select&,
+    & > select {
+        .webkit-autofill();
+    }
+
+    &:before,
+    &:after { // menu arrows
+        border-color: var(--_se-arrow-bc);
+        border-style: solid;
+        border-width: var(--_se-arrow-size);
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        right: calc(var(--su-static12) + var(--su-static1));
+        z-index: var(--zi-selected);
+    }
+
+    &:after {
+        border-bottom-width: 0;
+        top: calc(50% + var(--su-static1));
+    }
+
+    &:before {
+        border-top-width: 0;
+        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+    }
+
+    > select { // Menu
+        // CONTEXTUAL STYLES
+        fieldset[disabled] &,
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: var(--_o-disabled-static);
+        }
+
+        &[readonly],
+        .is-readonly & { // [1]
+            --_se-select-bc: var(--bc-light);
+            --_se-select-bg: var(--black-050);
+            --_se-select-fc: var(--black-200);
+
+            .highcontrast-mode({
+                --_se-select-fc: var(--fc-light);
+            });
+
+            cursor: not-allowed;
+        }
+
+        // CHILD ELEMENTS
+        &::-moz-focus-inner {
+            outline: none !important;
+        }
+
+        // INTERACTION
+        &:focus {
+            .highcontrast-mode({
+                --_se-select-bc-focus: var(--black);
+            });
+
+            border-color: var(--_se-select-bc-focus);
+            box-shadow: var(--_se-select-bs-focus);
+
+            color: var(--black);
+            outline: 0;
+        }
+
+        background-color: var(--_se-select-bg);
+        border: var(--su-static1) solid var(--_se-select-bc);
+        border-radius: var(--_se-select-br);
+        color: var(--_se-select-fc);
+        font-size: var(--_se-select-fs);
+        padding: var(--_se-select-py) var(--_se-select-px);
+
+        appearance: none;
+        font-family: inherit;
+        height: 100%; // Fill the height of its parent
+        line-height: var(--lh-sm);
+        outline: 0;
+        padding-right: var(--su32);
+        position: relative; // This prevents Firefox from requiring a second click to select options
+        width: 100%;
+    }
+
+    .s-input-icon {
+        right: var(--su32);
+    }
+
+    color: var(--fc-dark);
+    position: relative;
+}
+
+// [1] The readonly attribute is not supported on select elements
+//      See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
+//      and https://github.com/StackExchange/Stacks/pull/1040#discussion_r931144086

package/lib/{css/components/sidebar-widgets.less → components/sidebar-widget/sidebar-widget.less}

@@ -213,7 +213,6 @@
     position: relative; // so that it's the positioning parent for the :after
 }
 
-
 // COLOR ALTERNATIVES
 .alternate-color(@name) {
     &.s-sidebarwidget__@{name} {

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

@@ -1,8 +1,3 @@
-.s-table-container {
-    overflow-x: auto;
-    @scrollbar-styles();
-}
-
 .s-table {
     @ta-cell-border: var(--su-static1) solid var(--bc-medium);
     @ta-columns: (100% / 12);

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

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

package/lib/components/table-container/table-container.less

@@ -0,0 +1,4 @@
+.s-table-container {
+    overflow-x: auto;
+    @scrollbar-styles();
+}

package/lib/{css/components/tags.less → components/tag/tag.less}

@@ -42,12 +42,12 @@
     // MODIFIERS
     // Sizes
     &&__xs {
-        --_ta-fs: var(--fs-fine);
+        .size-styles(xs; ta; @styles: fs);
         --_ta-lh: 1.4;
         --_ta-px: var(--su2);
     }
     &&__sm {
-        --_ta-fs: var(--fs-caption);
+        .size-styles(sm; ta; @styles: fs);
         --_ta-lh: 1.5;
     }
     &&__md {
@@ -56,7 +56,7 @@
         --_ta-lh: 1.733333333;
     }
     &&__lg {
-        --_ta-br: calc(var(--br-sm) + 1px);
+        --_ta-br: calc(var(--br-sm) + var(--su-static1));
         --_ta-fs: var(--fs-subheading);
         --_ta-lh: 1.684210526;
         --_ta-px: var(--su6);

package/lib/components/toast/toast.less

@@ -0,0 +1,35 @@
+// See also ./lib/components/notice/notice.less
+.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
+}

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

@@ -1,8 +1,8 @@
 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 { showToast, hideToast } from "../ts/index";
+import "../../index";
+import { showToast, hideToast } from "../../controllers";
 
 const user = userEvent.setup();
 
@@ -30,17 +30,19 @@ const testToast = (hidden = true) => html` <button
         </aside>
     </div>`;
 
-describe("s-toast", () => {
+describe("toast", () => {
     it("trigger should make toast visible", async () => {
         await fixture(testToast(true));
 
         const button = screen.getAllByRole("button")[0]; // Trigger button
         const toast = screen.getByTestId("test-toast");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "true");
         button.addEventListener("click", () => showToast(toast));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "false");
     });
 
@@ -50,10 +52,12 @@ describe("s-toast", () => {
         const button = screen.getAllByRole("button")[1]; // Close button
         const toast = screen.getByTestId("test-toast");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "false");
         button.addEventListener("click", () => hideToast(toast));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "true");
     });
 

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

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

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

@@ -0,0 +1,27 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("toast > notice", () => {
+    // This is a test of notice component wrapped in a toast component
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-notice", // s-toast is a wrapper around s-notice
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        attributes: {
+            ariaHidden: "false",
+        },
+        children: {
+            toast: "Test toast",
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div data-testid="${testid}" class="s-toast" aria-hidden="false">
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/{css/components/toggle-switches.less → components/toggle-switch/toggle-switch.less}

@@ -5,6 +5,14 @@
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-500);
 
+    fieldset[disabled] & {
+        &,
+        & label {
+            cursor: not-allowed;
+            opacity: var(--_o-disabled-static);
+        }
+    }
+
     &&__multiple { // TODO split single and multiple toggle into two seperate components
         input[type="radio"] {
             &:checked {

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

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 interface FilePreview {
     data?: string | ArrayBuffer;

package/lib/controllers.ts

@@ -0,0 +1,33 @@
+// export all controllers *with helpers* so they can be bulk re-exported by the package entry point
+export {
+    BannerController,
+    hideBanner,
+    showBanner,
+} from "./components/banner/banner";
+export { ExpandableController } from "./components/expandable/expandable";
+export {
+    ModalController,
+    hideModal,
+    showModal,
+} from "./components/modal/modal";
+export { TabListController } from "./components/navigation/navigation";
+export {
+    attachPopover,
+    detachPopover,
+    hidePopover,
+    BasePopoverController,
+    PopoverController,
+    showPopover,
+} from "./components/popover/popover";
+export { TableController } from "./components/table/table";
+export {
+    ToastController,
+    hideToast,
+    showToast,
+} from "./components/toast/toast";
+export {
+    setTooltipHtml,
+    setTooltipText,
+    TooltipController,
+} from "./components/popover/tooltip";
+export { UploaderController } from "./components/uploader/uploader";

package/lib/{css/exports → exports}/mixins.less

@@ -88,17 +88,6 @@
     }
 }
 
-//  ===========================================================================
-//  --  APPEARANCE
-//      Use this to overwrite the default appearance properties
-//  ---------------------------------------------------------------------------
-.appearance(@all) {
-    -webkit-appearance: @all;
-    -moz-appearance: @all;
-    appearance: @all;
-}
-
-
 //  ===========================================================================
 //  --  FONT FACE
 //      Used to load hosted, custom webfonts. You must provide the font's
@@ -194,6 +183,79 @@
                   @amountDecimal);
 }
 
+//  =============================================================================
+//  --  SIZE STYLES
+//      The following mixins let us generate pseudo-private custom properties
+//      for common sizes. They expect a size (@size), a prefix for the custom
+//      property (@prefix), and an array of comma-separates abbreviated styles
+//      (@styles).
+//  -----------------------------------------------------------------------------
+
+.size-styles(@size, @prefix, @styles, @index: length(@styles)) {
+    & when (@index > 0) {
+        @style: extract(@styles, @index);
+
+              // xs
+        & when (@size = xs) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-fine);
+        }
+
+        // sm
+        & when (@size = sm) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-caption);
+        }
+
+        // md
+        & when (@size = md) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+            }
+        & when (@size = md) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-body3);
+        }
+
+        // lg
+        & when (@size = lg) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+        }
+        & when (@size = lg) and (@style = fs) {
+                --_@{prefix}-fs: var(--fs-title);
+        }
+
+        // xl
+        & when (@size = xl) and (@style = br) {
+            --_@{prefix}-br: var(--br-md);
+        }
+        & when (@size = xl) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-headline1);
+        }
+
+        .size-styles(@size, @prefix, @styles, @index: @index - 1);
+    }
+}
+
+//  =============================================================================
+//  --  WEBKIT AUTOFILL
+//  -----------------------------------------------------------------------------
+.webkit-autofill() {
+    &:-webkit-autofill {
+        &:focus {
+            border-color: var(--blue-300);
+            // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
+            -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
+        }
+
+        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset; // This acts as a background color by stretching an inset box shadow across the input
+        -webkit-text-fill-color: var(--black);
+        border-color: var(--blue-300);
+        transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
+    }
+
+    &::-webkit-contacts-auto-fill-button {
+        background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware
+    }
+
+}
+
 //  ===========================================================================
 //  Internals only beyond this point -- helpers for .font-face()
 //  ---------------------------------------------------------------------------

package/lib/{ts/index.ts → index.ts}

@@ -1,4 +1,4 @@
-import "../css/stacks.less";
+import "./stacks.less";
 import {
     BannerController,
     ExpandableController,

package/lib/input-utils.less

@@ -0,0 +1,44 @@
+.input-states(@rules) {
+    .is-disabled &,
+    .is-readonly &,
+    .has-success &,
+    .has-error &,
+    .has-warning & {
+        @rules();
+    }
+};
+
+.validation-states(@prefix, @error: {}, @success: {}, @warning: {}) {
+    .has-error &,
+    .has-success &,
+    .has-warning & {
+        --_@{prefix}-bc-focus: ~"var(--_@{prefix}-bc)";
+    }
+
+    .has-error & {
+        --_@{prefix}-bc: var(--red-400);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
+        @error();
+    }
+
+    .has-success & {
+        --_@{prefix}-bc: var(--green-400);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
+        @success();
+    }
+
+    .has-warning & {
+        --_@{prefix}-bc: var(--yellow-600);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+        @warning();
+    }
+}
+
+.is-disabled,
+.is-readonly,
+.has-success,
+.has-error,
+.has-warning {
+    position: relative;
+}
+

package/lib/{css/stacks-dynamic.less → stacks-dynamic.less}

@@ -16,10 +16,9 @@
 //  ----------------------------------------------------------------------------
 //  --  SET BASIC STYLES FOR BODY
 @import "base/body.less";
-
 //  --  LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
 
 //  --  CONFIG
 @import "base/configuration-static.less";
-@import "base/internals.less";
+@import "base/internal.less";

package/lib/stacks-static.less

@@ -0,0 +1,93 @@
+// stacks-static.less contains styles which we DO NOT allow communities to modify via variables
+// BASE
+@import "base/reset.less";
+@import "base/fieldset.less";
+@import "base/icon.less";
+@import "input-utils.less";
+
+//  --  COMPONENTS
+@import "components/activity-indicator/activity-indicator.less";
+@import "components/anchor/anchor.less";
+@import "components/avatar/avatar.less";
+@import "components/award-bling/award-bling.less";
+@import "components/badge/badge.less";
+@import "components/banner/banner.less";
+@import "components/block-link/block-link.less";
+@import "components/breadcrumbs/breadcrumbs.less";
+@import "components/button/button.less";
+@import "components/button-group/button-group.less";
+@import "components/card/card.less";
+@import "components/check-control/check-control.less";
+@import "components/check-group/check-group.less";
+@import "components/checkbox_radio/checkbox_radio.less";
+@import "components/code-block/code-block.less";
+@import "components/description/description.less";
+@import "components/empty-state/empty-state.less";
+@import "components/expandable/expandable.less";
+@import "components/input_textarea/input_textarea.less";
+@import "components/input-fill/input-fill.less";
+@import "components/input-icon/input-icon.less";
+@import "components/input-message/input-message.less";
+@import "components/label/label.less";
+@import "components/link/link.less";
+@import "components/link-preview/link-preview.less";
+@import "components/menu/menu.less";
+@import "components/modal/modal.less";
+@import "components/navigation/navigation.less";
+@import "components/notice/notice.less";
+@import "components/page-title/page-title.less";
+@import "components/pagination/pagination.less";
+@import "components/popover/popover.less";
+@import "components/post-summary/post-summary.less";
+@import "components/progress-bar/progress-bar.less";
+@import "components/prose/prose.less";
+@import "components/select/select.less";
+@import "components/sidebar-widget/sidebar-widget.less";
+@import "components/spinner/spinner.less";
+@import "components/table/table.less";
+@import "components/table-container/table-container.less";
+@import "components/tag/tag.less";
+@import "components/toast/toast.less";
+@import "components/toggle-switch/toggle-switch.less";
+@import "components/topbar/topbar.less";
+@import "components/uploader/uploader.less";
+@import "components/user-card/user-card.less";
+
+// LESS CONSTANTS AND MIXINS
+@import "exports/exports.less";
+
+//  --  ATOMIC CLASSES
+@import "atomic/border.less";
+@import "atomic/color.less";
+@import "atomic/flex.less";
+@import "atomic/gap.less";
+@import "atomic/grid.less";
+@import "atomic/spacing.less";
+@import "atomic/typography.less";
+@import "atomic/misc.less";
+@import "atomic/width-height.less";
+
+/* stylelint-disable */
+#stacks-internals #screen-lg({
+    #stacks-internals-collect-large();
+});
+#stacks-internals #screen-md({
+    #stacks-internals-collect-medium();
+});
+#stacks-internals #screen-sm({
+    #stacks-internals-collect-small();
+});
+
+@media print { // We need printing styles to be last so they can override all other styles.
+    .print\:d-block & {
+        display: block !important;
+    }
+    .print\:d-none & {
+        display: none !important;
+    }
+}
+/* stylelint-enable */
+
+// CONFIG
+@import "base/configuration-static.less";
+@import "base/internal.less";