@stackoverflow/stacks 1.9.4 → 1.10.0

package/dist/js/stacks.js

@@ -49,33 +49,33 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "BannerController": () => (/* reexport */ BannerController),
-  "BasePopoverController": () => (/* reexport */ BasePopoverController),
-  "ExpandableController": () => (/* reexport */ ExpandableController),
-  "ModalController": () => (/* reexport */ ModalController),
-  "PopoverController": () => (/* reexport */ PopoverController),
-  "StacksApplication": () => (/* reexport */ StacksApplication),
-  "StacksController": () => (/* reexport */ StacksController),
-  "TabListController": () => (/* reexport */ TabListController),
-  "TableController": () => (/* reexport */ TableController),
-  "ToastController": () => (/* reexport */ ToastController),
-  "TooltipController": () => (/* reexport */ TooltipController),
-  "UploaderController": () => (/* reexport */ UploaderController),
-  "addController": () => (/* reexport */ addController),
-  "application": () => (/* reexport */ application),
-  "attachPopover": () => (/* reexport */ attachPopover),
-  "createController": () => (/* reexport */ createController),
-  "detachPopover": () => (/* reexport */ detachPopover),
-  "hideBanner": () => (/* reexport */ hideBanner),
-  "hideModal": () => (/* reexport */ hideModal),
-  "hidePopover": () => (/* reexport */ hidePopover),
-  "hideToast": () => (/* reexport */ hideToast),
-  "setTooltipHtml": () => (/* reexport */ setTooltipHtml),
-  "setTooltipText": () => (/* reexport */ setTooltipText),
-  "showBanner": () => (/* reexport */ showBanner),
-  "showModal": () => (/* reexport */ showModal),
-  "showPopover": () => (/* reexport */ showPopover),
-  "showToast": () => (/* reexport */ showToast)
+  BannerController: () => (/* reexport */ BannerController),
+  BasePopoverController: () => (/* reexport */ BasePopoverController),
+  ExpandableController: () => (/* reexport */ ExpandableController),
+  ModalController: () => (/* reexport */ ModalController),
+  PopoverController: () => (/* reexport */ PopoverController),
+  StacksApplication: () => (/* reexport */ StacksApplication),
+  StacksController: () => (/* reexport */ StacksController),
+  TabListController: () => (/* reexport */ TabListController),
+  TableController: () => (/* reexport */ TableController),
+  ToastController: () => (/* reexport */ ToastController),
+  TooltipController: () => (/* reexport */ TooltipController),
+  UploaderController: () => (/* reexport */ UploaderController),
+  addController: () => (/* reexport */ addController),
+  application: () => (/* reexport */ application),
+  attachPopover: () => (/* reexport */ attachPopover),
+  createController: () => (/* reexport */ createController),
+  detachPopover: () => (/* reexport */ detachPopover),
+  hideBanner: () => (/* reexport */ hideBanner),
+  hideModal: () => (/* reexport */ hideModal),
+  hidePopover: () => (/* reexport */ hidePopover),
+  hideToast: () => (/* reexport */ hideToast),
+  setTooltipHtml: () => (/* reexport */ setTooltipHtml),
+  setTooltipText: () => (/* reexport */ setTooltipText),
+  showBanner: () => (/* reexport */ showBanner),
+  showModal: () => (/* reexport */ showModal),
+  showPopover: () => (/* reexport */ showPopover),
+  showToast: () => (/* reexport */ showToast)
 });
 
 ;// CONCATENATED MODULE: ./node_modules/@hotwired/stimulus/dist/stimulus.js
@@ -2515,7 +2515,6 @@ class StacksApplication extends Application {
     }
 }
 StacksApplication._initializing = true;
-
 const application = StacksApplication.start();
 class StacksController extends Controller {
     getElementData(element, key) {
@@ -2653,7 +2652,6 @@ class BannerController extends StacksController {
     }
 }
 BannerController.targets = ["banner"];
-
 /**
  * Helper to manually show an s-banner element via external JS
  * @param element the element the `data-controller="s-banner"` attribute is on
@@ -3129,7 +3127,6 @@ class ModalController extends StacksController {
     }
 }
 ModalController.targets = ["modal", "initialFocus"];
-
 /**
  * Helper to manually show an s-modal element via external JS
  * @param element the element the `data-controller="s-modal"` attribute is on
@@ -3778,13 +3775,6 @@ function mergeByName(modifiers) {
 
 
 
-
-
-
-
-
-var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
-var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
 var DEFAULT_OPTIONS = {
   placement: 'bottom',
   modifiers: [],
@@ -3846,11 +3836,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-        // if one of the modifiers is invalid for any reason
-
-        if (false) { var _getComputedStyle, marginTop, marginRight, marginBottom, marginLeft, flipModifier, modifiers; }
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -3870,8 +3856,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-          if (false) {}
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -3894,11 +3878,8 @@ function popperGenerator(generatorOptions) {
         state.orderedModifiers.forEach(function (modifier) {
           return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
         });
-        var __debug_loops__ = 0;
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-          if (false) {}
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -3936,8 +3917,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-      if (false) {}
-
       return instance;
     }
 
@@ -3952,11 +3931,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({
@@ -4276,9 +4255,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
-  if (false) { var transitionProperty; }
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -4762,8 +4738,6 @@ function computeAutoPlacement(state, options) {
 
   if (allowedPlacements.length === 0) {
     allowedPlacements = placements;
-
-    if (false) {}
   } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
 
 
@@ -5093,7 +5067,6 @@ function preventOverflow(_ref) {
 
 
 
-
  // eslint-disable-next-line import/no-unused-modules
 
 var toPaddingObject = function toPaddingObject(padding, state) {
@@ -5159,11 +5132,7 @@ function arrow_effect(_ref2) {
     }
   }
 
-  if (false) {}
-
   if (!contains(state.elements.popper, arrowElement)) {
-    if (false) {}
-
     return;
   }
 
@@ -5593,7 +5562,6 @@ class PopoverController extends BasePopoverController {
     }
 }
 PopoverController.targets = [];
-
 /**
  * Helper to manually show an s-popover element via external JS
  * @param element the element the `data-controller="s-popover"` attribute is on
@@ -5883,7 +5851,6 @@ class TableController extends StacksController {
     }
 }
 TableController.targets = ["column"];
-
 /**
  * @internal This function is exported for testing purposes but is not a part of our public API
  *
@@ -6214,7 +6181,6 @@ class ToastController extends StacksController {
     }
 }
 ToastController.targets = ["toast", "initialFocus"];
-
 /**
  * Helper to manually show an s-toast element via external JS
  * @param element the element the `data-controller="s-toast"` attribute is on
@@ -6453,7 +6419,6 @@ class TooltipController extends BasePopoverController {
     }
 }
 TooltipController.targets = [];
-
 /**
  * Adds or updates a Stacks tooltip on a given element, initializing the controller if necessary
  * @param element The element to add a tooltip to.
@@ -6659,7 +6624,6 @@ UploaderController.targets = ["input", "previews", "uploader"];
 UploaderController.FILE_DISPLAY_LIMIT = 10;
 UploaderController.MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
 
-
 ;// CONCATENATED MODULE: ./lib/controllers.ts
 // export all controllers *with helpers* so they can be bulk re-exported by the package entry point
 

package/lib/atomic/border.less

@@ -116,9 +116,9 @@
 
 //  ============================================================================
 //  $   BORDER RADIUS
-//      br-sm:  Small step:   3px border radius
-//      br-md:  Medium step:  5px border radius
-//      br-lg:  Large step:   7px border radius
+//      br-sm:  Small step:   4px border radius
+//      br-md:  Medium step:  6px border radius
+//      br-lg:  Large step:   8px border radius
 //  ----------------------------------------------------------------------------
 //  $$  All Sides
 .bar-sm { border-radius: var(--br-sm) !important; }

package/lib/atomic/misc.less

@@ -149,14 +149,14 @@
     // Borrowed from Wordpress
     // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
     border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
+    clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
     clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
+    height: var(--su-static1);
+    margin: calc(var(--su-static1) * -1); // -1px
     overflow: hidden;
     padding: 0;
     position: absolute;
-    width: 1px;
+    width:  var(--su-static1);
     overflow-wrap: normal;
 }
 

package/lib/atomic/typography.less

@@ -63,7 +63,7 @@ p {
     &.has-border {
         width: 100%;
         padding: var(--su4) 0;
-        border-top: 1px solid var(--bc-medium);
+        border-top: var(--su-static1) solid var(--bc-medium);
     }
 }
 

package/lib/base/body.less

@@ -27,7 +27,7 @@ body {
 #stacks-internals #screen-sm({
     &,
     body {
-        font-size: 11px;
+        font-size: calc(var(--su-static12) - var(--su-static1)); // 11px
     }
 }, @force-selector: true);
 

package/lib/base/reset-normalize.less

@@ -69,7 +69,7 @@ main { /* 1 */
  */
 
 figure {
-  margin: 1em 40px;
+  margin: 1em calc(var(--su-static32) + var(--su-static8)); // 1em 40px
 }
 
 /**
@@ -303,7 +303,7 @@ button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
+  outline: var(--su-static1) dotted ButtonText;
 }
 
 /**
@@ -375,7 +375,7 @@ textarea {
 
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+  outline-offset: calc(var(--su-static2) * -1); // -2px - /* 2 */
 }
 
 /**

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

@@ -0,0 +1,42 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// TODO check for visited styling
+const link = (text = "", visited = true, classes = "") =>
+    `<a class="${classes}" href="${
+        visited ? "/" : "https://stackoverflow.design/404-unvisited"
+    }">${text}</a>`;
+
+describe("anchors", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-anchors",
+        modifiers: {
+            primary: [
+                "default",
+                "grayscale",
+                "muted",
+                "danger",
+                "inherit",
+                "underlined",
+            ],
+        },
+        children: {
+            default: `A ${link(
+                "link"
+            )}, a <button class="s-btn s-btn__link">button</button>, an ${link(
+                "unvisited link",
+                false
+            )}.`,
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        skippedTestids: [
+            "s-anchors-dark-danger", // TODO fix contrast issue
+            "s-anchors-dark-default", // TODO fix contrast issue
+            "s-anchors-dark-underlined", // TODO fix contrast issue
+        ],
+    });
+});

package/lib/components/anchor/anchor.less

@@ -2,6 +2,7 @@
     // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
     // --_an-a-fc
     // --_an-a-fc-hover
+    --_an-a-fc-visited: var(--_an-a-fc);
 
     // MODIFIERS
     &&__underlined {
@@ -20,6 +21,7 @@
     &&__default {
         --_an-a-fc: var(--theme-link-color);
         --_an-a-fc-hover: var(--theme-link-color-hover);
+        --_an-a-fc-visited: var(--theme-link-color-visited);
     }
 
     &&__grayscale {
@@ -44,6 +46,8 @@
     &&__muted {
         a:not(.s-link),
         .s-btn.s-btn__link {
+            color: var(--_an-a-fc, inherit);
+
             &:hover,
             &:active {
                 &,
@@ -52,9 +56,8 @@
                 }
             }
 
-            &,
             &:visited {
-                color: var(--_an-a-fc, inherit);
+                color: var(--_an-a-fc-visited, inherit);
             }
         }
     }

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

@@ -0,0 +1,53 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// TODO check for visited styling
+const link = (text = "", classes = "") =>
+    `<a class="${classes}" href="#">${text}</a>`;
+const links = `A ${link(
+    "link"
+)}, a <button class="s-btn s-btn__link">button</button>, an ${link(
+    "unvisited link"
+)}.<br/>Nested: ${link("danger", "s-link s-link__danger")}, ${link(
+    "grayscale",
+    "s-link s-link__grayscale"
+)}.`;
+
+describe("anchors", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-anchors",
+        modifiers: {
+            primary: [
+                "default",
+                "grayscale",
+                "muted",
+                "danger",
+                "inherit",
+                "underlined",
+            ],
+        },
+        children: {
+            // children include nested anchors block to test for appropriate nested styling
+            default: `
+                ${links}
+                <div class="s-card s-anchors s-anchors__danger">Danger: ${links}</div>
+                <div class="s-card s-anchors s-anchors__muted mt4">Muted: ${links}</div>
+            `,
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        template: ({ component, testid }) => html`
+            <div data-testid="${testid}" class="s-card ws3 fc-green-600">
+                ${testid}: ${component}
+            </div>
+        `,
+        skippedTestids: [
+            // TODO resolve webkit failures for these. See https://github.com/StackExchange/Stacks/actions/runs/5406068986/jobs/9822478155?pr=1404
+            /s-anchors/,
+        ],
+    });
+});

package/lib/components/avatar/avatar.less

@@ -12,7 +12,7 @@
         }
 
         background-color: var(--black);
-        box-shadow: 0 0 0 1px var(--black);
+        box-shadow: 0 0 0 var(--su-static1) var(--black);
         color: var(--white);
     });
 

package/lib/components/banner/banner.less

@@ -2,23 +2,24 @@
 // 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]
+    --_no-x-offset: 0;
     .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
+        --_no-x-offset: -1;
         opacity: 0;
         visibility: hidden;
     }
 
     &[aria-hidden="false"] {
-        --_no-x-offset: calc(var(--su48) + var(--su1)); // 49px
+        --_no-x-offset: 1;
         opacity: 1;
         visibility: visible;
-    }
 
-    &.is-pinned { //  If you want to put the banner above the topbar
-        z-index: calc(var(--zi-navigation-fixed) + 1);
+        &.is-pinned { //  If you want to put the banner above the topbar
+            --_no-x-offset: 0;
+            z-index: calc(var(--zi-navigation-fixed) + 1);
+        }
     }
 
     &__body-pt {
@@ -32,20 +33,12 @@
         width: 100%;
     }
 
-    border-width: var(--su-static1) 0;
+    border-width: 0 0 var(--su-static1);
     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);
+    -webkit-transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
+    transform: translate3d(0, calc(var(--theme-topbar-height) * 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/components/block-link/block-link.a11y.test.ts

@@ -3,12 +3,13 @@ import { defaultOptions, runComponentTests } from "../../test/test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const blockLinkTemplate = ({ component, testid }: any) => html`<div
-    class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-    data-testid="${testid}"
->
-    ${component}
-</div>`;
+const blockLinkTemplate = ({ component, testid }: any) =>
+    html`<div
+        class="d-inline-flex ai-center jc-center hs1 ws2 p8"
+        data-testid="${testid}"
+    >
+        ${component}
+    </div>`;
 
 describe("block-link", () => {
     // Base block link

package/lib/components/block-link/block-link.less

@@ -40,7 +40,7 @@ a.s-block-link,
 
     &&__right {
         &.is-selected {
-            --_li-block-bs-offset-x: -3px;
+            --_li-block-bs-offset-x: calc(var(--su-static1) - var(--su-static4)); // -3px
         }
     }
 

package/lib/components/block-link/block-link.visual.test.ts

@@ -3,12 +3,13 @@ import { defaultOptions, runComponentTests } from "../../test/test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const blockLinkTemplate = ({ component, testid }: any) => html`<div
-    class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-    data-testid="${testid}"
->
-    ${component}
-</div>`;
+const blockLinkTemplate = ({ component, testid }: any) =>
+    html`<div
+        class="d-inline-flex ai-center jc-center hs1 ws2 p8"
+        data-testid="${testid}"
+    >
+        ${component}
+    </div>`;
 
 describe("block-link", () => {
     // Base block link