@stackoverflow/stacks 2.5.4 → 2.5.6

package/lib/components/banner/banner.ts

@@ -1,149 +1,149 @@
-import * as Stacks from "../../stacks";
-
-export class BannerController extends Stacks.StacksController {
-    static targets = ["banner"];
-
-    declare readonly bannerTarget: HTMLElement;
-
-    /**
-     * Toggles the visibility of the banner
-     */
-    toggle(dispatcher: Event | Element | null = null) {
-        this._toggle(undefined, dispatcher);
-    }
-
-    /**
-     * Shows the banner
-     */
-    show(dispatcher: Event | Element | null = null) {
-        this._toggle(true, dispatcher);
-    }
-
-    /**
-     * Hides the banner
-     */
-    hide(dispatcher: Event | Element | null = null) {
-        this._toggle(false, dispatcher);
-    }
-
-    /**
-     * Toggles the visibility of the banner element
-     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
-     */
-    private _toggle(
-        show?: boolean | undefined,
-        dispatcher: Event | Element | null = null
-    ) {
-        let toShow = show;
-        const isVisible =
-            this.bannerTarget.getAttribute("aria-hidden") === "false";
-
-        // if we're letting the class toggle, we need to figure out if the banner is visible manually
-        if (typeof toShow === "undefined") {
-            toShow = !isVisible;
-        }
-
-        // if the state matches the disired state, return without changing anything
-        if ((toShow && isVisible) || (!toShow && !isVisible)) {
-            return;
-        }
-
-        const dispatchingElement = this.getDispatcher(dispatcher);
-
-        // show/hide events trigger before toggling the class
-        const triggeredEvent = this.triggerEvent(
-            toShow ? "show" : "hide",
-            {
-                dispatcher: this.getDispatcher(dispatchingElement),
-            },
-            this.bannerTarget
-        );
-
-        // if this pre-show/hide event was prevented, don't attempt to continue changing the banner state
-        if (triggeredEvent.defaultPrevented) {
-            return;
-        }
-
-        this.bannerTarget.setAttribute(
-            "aria-hidden",
-            toShow ? "false" : "true"
-        );
-
-        if (!toShow) {
-            this.removeBannerOnHide();
-        }
-
-        this.triggerEvent(
-            toShow ? "shown" : "hidden",
-            {
-                dispatcher: dispatchingElement,
-            },
-            this.bannerTarget
-        );
-    }
-
-    /**
-     * Remove the element on hide if the `remove-when-hidden` flag is set
-     */
-    private removeBannerOnHide() {
-        if (this.data.get("remove-when-hidden") !== "true") {
-            return;
-        }
-
-        this.bannerTarget.addEventListener(
-            "s-banner:hidden",
-            () => {
-                this.element.remove();
-            },
-            { once: true }
-        );
-    }
-
-    /**
-     * Determines the correct dispatching element from a potential input
-     * @param dispatcher The event or element to get the dispatcher from
-     */
-    private getDispatcher(dispatcher: Event | Element | null = null): Element {
-        if (dispatcher instanceof Event) {
-            return <Element>dispatcher.target;
-        } else if (dispatcher instanceof Element) {
-            return dispatcher;
-        } else {
-            return this.element;
-        }
-    }
-}
-
-/**
- * Helper to manually show an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- */
-export function showBanner(element: HTMLElement) {
-    toggleBanner(element, true);
-}
-
-/**
- * Helper to manually hide an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- */
-export function hideBanner(element: HTMLElement) {
-    toggleBanner(element, false);
-}
-
-/**
- * Helper to manually show an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- * @param show whether to force show/hide the banner; toggles the banner if left undefined
- */
-function toggleBanner(element: HTMLElement, show?: boolean | undefined) {
-    const controller = Stacks.application.getControllerForElementAndIdentifier(
-        element,
-        "s-banner"
-    ) as BannerController;
-
-    if (!controller) {
-        throw "Unable to get s-banner controller from element";
-    }
-
-    show ? controller.show() : controller.hide();
-}
+import * as Stacks from "../../stacks";
+
+export class BannerController extends Stacks.StacksController {
+    static targets = ["banner"];
+
+    declare readonly bannerTarget: HTMLElement;
+
+    /**
+     * Toggles the visibility of the banner
+     */
+    toggle(dispatcher: Event | Element | null = null) {
+        this._toggle(undefined, dispatcher);
+    }
+
+    /**
+     * Shows the banner
+     */
+    show(dispatcher: Event | Element | null = null) {
+        this._toggle(true, dispatcher);
+    }
+
+    /**
+     * Hides the banner
+     */
+    hide(dispatcher: Event | Element | null = null) {
+        this._toggle(false, dispatcher);
+    }
+
+    /**
+     * Toggles the visibility of the banner element
+     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
+     */
+    private _toggle(
+        show?: boolean | undefined,
+        dispatcher: Event | Element | null = null
+    ) {
+        let toShow = show;
+        const isVisible =
+            this.bannerTarget.getAttribute("aria-hidden") === "false";
+
+        // if we're letting the class toggle, we need to figure out if the banner is visible manually
+        if (typeof toShow === "undefined") {
+            toShow = !isVisible;
+        }
+
+        // if the state matches the disired state, return without changing anything
+        if ((toShow && isVisible) || (!toShow && !isVisible)) {
+            return;
+        }
+
+        const dispatchingElement = this.getDispatcher(dispatcher);
+
+        // show/hide events trigger before toggling the class
+        const triggeredEvent = this.triggerEvent(
+            toShow ? "show" : "hide",
+            {
+                dispatcher: this.getDispatcher(dispatchingElement),
+            },
+            this.bannerTarget
+        );
+
+        // if this pre-show/hide event was prevented, don't attempt to continue changing the banner state
+        if (triggeredEvent.defaultPrevented) {
+            return;
+        }
+
+        this.bannerTarget.setAttribute(
+            "aria-hidden",
+            toShow ? "false" : "true"
+        );
+
+        if (!toShow) {
+            this.removeBannerOnHide();
+        }
+
+        this.triggerEvent(
+            toShow ? "shown" : "hidden",
+            {
+                dispatcher: dispatchingElement,
+            },
+            this.bannerTarget
+        );
+    }
+
+    /**
+     * Remove the element on hide if the `remove-when-hidden` flag is set
+     */
+    private removeBannerOnHide() {
+        if (this.data.get("remove-when-hidden") !== "true") {
+            return;
+        }
+
+        this.bannerTarget.addEventListener(
+            "s-banner:hidden",
+            () => {
+                this.element.remove();
+            },
+            { once: true }
+        );
+    }
+
+    /**
+     * Determines the correct dispatching element from a potential input
+     * @param dispatcher The event or element to get the dispatcher from
+     */
+    private getDispatcher(dispatcher: Event | Element | null = null): Element {
+        if (dispatcher instanceof Event) {
+            return <Element>dispatcher.target;
+        } else if (dispatcher instanceof Element) {
+            return dispatcher;
+        } else {
+            return this.element;
+        }
+    }
+}
+
+/**
+ * Helper to manually show an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ */
+export function showBanner(element: HTMLElement) {
+    toggleBanner(element, true);
+}
+
+/**
+ * Helper to manually hide an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ */
+export function hideBanner(element: HTMLElement) {
+    toggleBanner(element, false);
+}
+
+/**
+ * Helper to manually show an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ * @param show whether to force show/hide the banner; toggles the banner if left undefined
+ */
+function toggleBanner(element: HTMLElement, show?: boolean | undefined) {
+    const controller = Stacks.application.getControllerForElementAndIdentifier(
+        element,
+        "s-banner"
+    ) as BannerController;
+
+    if (!controller) {
+        throw "Unable to get s-banner controller from element";
+    }
+
+    show ? controller.show() : controller.hide();
+}

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

@@ -1,82 +1,82 @@
-a.s-block-link,
-.s-block-link {
-    --_bl-bs-color: var(--theme-primary);
-    --_bl-bg: transparent;
-    --_bl-fc: var(--black-500);
-    --_bl-fc-hover: var(--black-600);
-    --_bl-fc-visited: var(--_bl-fc);
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        &.is-selected {
-            --_bl-bg: var(--black-100);
-        }
-    });
-
-    // STATES
-    &.is-selected {
-        --_bl-bg: var(--black-150);
-        --_bl-fc: var(--black-600);
-
-        font-weight: bold;
-    }
-
-    // MODIFIERS
-    &&__left,
-    &&__right {
-        &.is-selected {
-            &:not(:focus-visible):not(.focus-inset) {
-                box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
-            }
-        }
-    }
-
-    &&__right {
-        &.is-selected {
-            --_li-block-bs-offset-x: calc(var(--su-static1) - var(--su-static4)); // -3px
-        }
-    }
-
-    // VARIANTS
-    &&__danger {
-        --_bl-fc: var(--red-400);
-        --_bl-fc-hover: var(--red-500);
-        --_bl-fc-visited: var(--red-500);
-    }
-
-    &:active,
-    &:hover {
-        &,
-        &:visited {
-            color: var(--_bl-fc-hover);
-        }
-    }
-
-    &:visited {
-        color: var(--_bl-fc-visited);
-    }
-
-    &:focus-visible {
-        .focus-styles(true);
-    }
-
-    &:focus-visible,
-    &.focus-inset {
-        border-radius: var(--br-sm);
-    }    
-
-    background-color: var(--_bl-bg); // [1]
-    color: var(--_bl-fc);
-
-    border-radius: 0; // [1]
-    border: none; // [1]
-    cursor: pointer; // [1]
-    display: block;
-    font-family: inherit; // [1]
-    line-height: inherit; // [1]
-    padding: var(--su6) var(--su12);
-    text-align: left; // [1]
-    width: 100%;
-}
-
-//  [1] Normalize for when applying to a button
+a.s-block-link,
+.s-block-link {
+    --_bl-bs-color: var(--theme-primary);
+    --_bl-bg: transparent;
+    --_bl-fc: var(--black-500);
+    --_bl-fc-hover: var(--black-600);
+    --_bl-fc-visited: var(--_bl-fc);
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        &.is-selected {
+            --_bl-bg: var(--black-100);
+        }
+    });
+
+    // STATES
+    &.is-selected {
+        --_bl-bg: var(--black-150);
+        --_bl-fc: var(--black-600);
+
+        font-weight: bold;
+    }
+
+    // MODIFIERS
+    &&__left,
+    &&__right {
+        &.is-selected {
+            &:not(:focus-visible):not(.focus-inset) {
+                box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
+            }
+        }
+    }
+
+    &&__right {
+        &.is-selected {
+            --_li-block-bs-offset-x: calc(var(--su-static1) - var(--su-static4)); // -3px
+        }
+    }
+
+    // VARIANTS
+    &&__danger {
+        --_bl-fc: var(--red-400);
+        --_bl-fc-hover: var(--red-500);
+        --_bl-fc-visited: var(--red-500);
+    }
+
+    &:active,
+    &:hover {
+        &,
+        &:visited {
+            color: var(--_bl-fc-hover);
+        }
+    }
+
+    &:visited {
+        color: var(--_bl-fc-visited);
+    }
+
+    &:focus-visible {
+        .focus-styles(true);
+    }
+
+    &:focus-visible,
+    &.focus-inset {
+        border-radius: var(--br-sm);
+    }    
+
+    background-color: var(--_bl-bg); // [1]
+    color: var(--_bl-fc);
+
+    border-radius: 0; // [1]
+    border: none; // [1]
+    cursor: pointer; // [1]
+    display: block;
+    font-family: inherit; // [1]
+    line-height: inherit; // [1]
+    padding: var(--su6) var(--su12);
+    text-align: left; // [1]
+    width: 100%;
+}
+
+//  [1] Normalize for when applying to a button

package/lib/components/breadcrumbs/breadcrumbs.less

@@ -1,41 +1,41 @@
-.s-breadcrumbs {
-    --_br-divider-px: var(--su4);
-    --_br-link-fc: var(--fc-light);
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        --_br-divider-px: var(--su2);
-    });
-
-    // CHILD ELEMENTS
-    & &--divider {
-        .highcontrast-mode({
-            color: var(--fc-light);
-        });
-
-        margin-left: var(--_br-divider-px);
-        margin-right: var(--_br-divider-px);
-    }
-
-    & &--item {
-        align-items: center;
-        display: flex;
-        flex-wrap: nowrap;
-        margin-bottom: var(--su2);
-        margin-top: var(--su2);
-    }
-
-    & &--link {
-        color: var(--_br-link-fc);
-
-        &:hover {
-            --_br-link-fc: var(--fc-medium);
-        }
-    }
-
-    align-items: flex-start;
-    color: var(--black-300);
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--fs-caption);
-}
+.s-breadcrumbs {
+    --_br-divider-px: var(--su4);
+    --_br-link-fc: var(--fc-light);
+
+    // CONTEXTUAL STYLES
+    #stacks-internals #screen-sm({
+        --_br-divider-px: var(--su2);
+    });
+
+    // CHILD ELEMENTS
+    & &--divider {
+        .highcontrast-mode({
+            color: var(--fc-light);
+        });
+
+        margin-left: var(--_br-divider-px);
+        margin-right: var(--_br-divider-px);
+    }
+
+    & &--item {
+        align-items: center;
+        display: flex;
+        flex-wrap: nowrap;
+        margin-bottom: var(--su2);
+        margin-top: var(--su2);
+    }
+
+    & &--link {
+        color: var(--_br-link-fc);
+
+        &:hover {
+            --_br-link-fc: var(--fc-medium);
+        }
+    }
+
+    align-items: flex-start;
+    color: var(--black-300);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--fs-caption);
+}