@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/components/expandable/expandable.d.ts

@@ -1,17 +0,0 @@
-import * as Stacks from "../../stacks";
-export declare class ExpandableController extends Stacks.StacksController {
-    private isCollapsed;
-    private events;
-    private isCheckable;
-    private isRadio;
-    private lastKeydownClickTimestamp;
-    initialize(): void;
-    _isCollapsedForClickable(): boolean;
-    _isCollapsedForCheckable(): boolean;
-    get controlledExpandables(): HTMLElement[];
-    _dispatchShowHideEvent(isShow: boolean): void;
-    _toggleClass(doAdd: boolean): void;
-    listener(e: Event): void;
-    connect(): void;
-    disconnect(): void;
-}

package/dist/components/uploader/uploader.d.ts

@@ -1,48 +0,0 @@
-import * as Stacks from "../../stacks";
-export declare class UploaderController extends Stacks.StacksController {
-    static targets: string[];
-    readonly inputTarget: HTMLInputElement;
-    readonly previewsTarget: HTMLElement;
-    readonly uploaderTarget: HTMLElement;
-    private boundDragEnter;
-    private boundDragLeave;
-    private static readonly FILE_DISPLAY_LIMIT;
-    private static readonly MAX_FILE_SIZE;
-    connect(): void;
-    disconnect(): void;
-    /**
-     * Handles rendering the file preview state on input change
-     */
-    handleInput(): void;
-    /**
-     * Resets the Uploader to initial state
-     */
-    reset(): void;
-    /**
-     * Set hide/show and disabled state on elements depending on preview state
-     * @param  {boolean} shouldPreview - Uploader is entering a preview state
-     */
-    private handleVisible;
-    /**
-     * Adds a DOM element to preview a selected file
-     * @param  {FilePreview} file
-     */
-    private addFilePreview;
-    /**
-     * Toggles display and disabled state for select elements on valid input
-     * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
-     */
-    private handleUploaderActive;
-    /**
-     * Converts the file data into a data URL
-     * @param  {File} file
-     * @returns an object containing a FilePreview object
-     */
-    private fileToDataURL;
-    /**
-     * Gets an array of FilePreviews from a FileList
-     * @param  {FileList|[]} files
-     * @returns an array of FilePreview objects from a FileList
-     */
-    private getDataURLs;
-}

package/lib/atomic/border.less

@@ -1,121 +0,0 @@
-#stacks-internals #responsify('.ba', { .bas-solid; .baw1; });
-#stacks-internals #responsify('.bt', { .bts-solid; .btw1; });
-#stacks-internals #responsify('.br', { .brs-solid; .brw1; });
-#stacks-internals #responsify('.bb', { .bbs-solid; .bbw1; });
-#stacks-internals #responsify('.bl', { .bls-solid; .blw1; });
-.bx { .bls-solid; .brs-solid; .bxw1; }
-.by { .bts-solid; .bbs-solid; .byw1; }
-
-//  ============================================================================
-//  $   WIDTH
-//  ----------------------------------------------------------------------------
-//  $$  All Sides
-#stacks-internals #responsify('.baw0', { border-width: 0 !important; });
-.baw1 { border-width: var(--su-static1) !important; }
-.baw2 { border-width: var(--su-static2) !important; }
-.baw3 { border-width: var(--su-static4) !important; }
-
-//  $$  Top Border
-#stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
-.btw1 { border-top-width: var(--su-static1) !important; }
-.btw2 { border-top-width: var(--su-static2) !important; }
-.btw3 { border-top-width: var(--su-static4) !important; }
-
-//  $$  Right Border
-#stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
-.brw1 { border-right-width: var(--su-static1) !important; }
-.brw2 { border-right-width: var(--su-static2) !important; }
-.brw3 { border-right-width: var(--su-static4) !important; }
-
-//  $$  Bottom Border
-#stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
-.bbw1 { border-bottom-width: var(--su-static1) !important; }
-.bbw2 { border-bottom-width: var(--su-static2) !important; }
-.bbw3 { border-bottom-width: var(--su-static4) !important; }
-
-//  $$  Left Border
-#stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
-.blw0 { border-left-width: 0 !important; }
-.blw1 { border-left-width: var(--su-static1) !important; }
-.blw2 { border-left-width: var(--su-static2) !important; }
-.blw3 { border-left-width: var(--su-static4) !important; }
-
-//  $$  Y-Axis Border
-.byw0 { .btw0; .bbw0; }
-.byw1 { .btw1; .bbw1; }
-.byw2 { .btw2; .bbw2; }
-.byw3 { .btw3; .bbw3; }
-
-//  $$  X-Axis Border
-.bxw0 { .brw0; .blw0; }
-.bxw1 { .brw1; .blw1; }
-.bxw2 { .brw2; .blw2; }
-.bxw3 { .brw3; .blw3; }
-
-
-//  ============================================================================
-//  $   STYLE
-//  ============================================================================
-//  $$  All sides
-.bas-solid { border-style: solid !important; }
-.bas-dashed { border-style: dashed !important; }
-
-//  $$  Top Border
-.bts-solid { border-top-style: solid !important; }
-.bts-dashed { border-top-style: dashed !important; }
-
-//  $$  Right Border
-.brs-solid { border-right-style: solid !important; }
-.brs-dashed { border-right-style: dashed !important; }
-
-//  $$  Bottom Border
-.bbs-solid { border-bottom-style: solid !important; }
-.bbs-dashed { border-bottom-style: dashed !important; }
-
-//  $$  Left Border
-.bls-solid { border-left-style: solid !important; }
-.bls-dashed { border-left-style: dashed !important; }
-
-
-//  ============================================================================
-//  $   BORDER RADIUS
-//  ----------------------------------------------------------------------------
-//  $$  All Sides
-.bar-md { border-radius: var(--br-md) !important; }
-.bar-circle { border-radius: var(--br-circle) !important; }
-.bar-pill { border-radius: var(--br-pill) !important; }
-
-//  $$  Top Left Corner
-.btlr0 { border-top-left-radius: 0 !important; }
-.btlr-md { border-top-left-radius: var(--br-md) !important; }
-
-//  $$  Top Right Corner
-.btrr0 { border-top-right-radius: 0 !important; }
-.btrr-md { border-top-right-radius: var(--br-md) !important; }
-
-//  $$  Bottom Left Corner
-.bblr0 { border-bottom-left-radius: 0 !important; }
-.bblr-md { border-bottom-left-radius: var(--br-md) !important; }
-
-//  $$  Bottom Right Corner
-.bbrr0 { border-bottom-right-radius: 0 !important; }
-.bbrr-md { border-bottom-right-radius: var(--br-md) !important; }
-
-//  $$  Top Corners
-.btr0 { .btlr0; .btrr0; }
-.btr-md { .btlr-md; .btrr-md; }
-
-//  $$  Right Corners
-.brr0 { .btrr0; .bbrr0; }
-.brr-md { .btrr-md; .bbrr-md; }
-
-//  $$  Bottom Corners
-.bbr0 { .bblr0; .bbrr0; }
-.bbr-md { .bblr-md; .bbrr-md; }
-
-//  $$  Left Corners
-.blr0 { .btlr0; .bblr0; }
-.blr-md { .btlr-md; .bblr-md; }
-
-//  $$  All Sides
-#stacks-internals #responsify('.bar0', { border-radius: 0 !important; });

package/lib/atomic/misc.less

@@ -1,374 +0,0 @@
-@import (reference) "../base/internal.less";
-@import (reference) "../exports/color-mixins.less";
-@import (reference) "../exports/constants-helpers.less";
-@import (reference) "../exports/mixins.less";
-
-//
-//  STACK OVERFLOW
-//  UTILITIES
-//
-//  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/
-//
-//  ============================================================================
-//  $  DISPLAY
-//  ----------------------------------------------------------------------------
-
-#stacks-internals #responsify('.d-block', { display: block !important; });
-#stacks-internals #responsify('.d-flex', { display: flex !important; });
-#stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; });
-#stacks-internals #responsify('.d-grid', { display: grid !important; });
-#stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; });
-#stacks-internals #responsify('.d-inline', { display: inline !important; });
-#stacks-internals #responsify('.d-inline-block', { display: inline-block !important; });
-.d-table { display: table !important; }
-.d-table-cell { display: table-cell !important; }
-#stacks-internals #responsify('.d-none', { display: none !important; });
-.d-unset { display: unset !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-POSITIONS
-//  ----------------------------------------------------------------------------
-.bg-bottom { background-position: bottom !important; }
-.bg-center { background-position: center !important; }
-.bg-left { background-position: left !important; }
-.bg-left-bottom { background-position: left bottom !important; }
-.bg-left-top { background-position: left top !important; }
-.bg-right { background-position: right !important; }
-.bg-right-bottom { background-position: right bottom !important; }
-.bg-right-top { background-position: right top !important; }
-.bg-top { background-position: top !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-REPEATS
-//  ----------------------------------------------------------------------------
-.bg-repeat { background-repeat: repeat !important; }
-.bg-no-repeat { background-repeat: no-repeat !important; }
-.bg-repeat-x { background-repeat: repeat-x !important; }
-.bg-repeat-y { background-repeat: repeat-y !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-SIZE
-//  ----------------------------------------------------------------------------
-.bg-auto { background-size: auto !important; }
-.bg-cover { background-size: cover !important; }
-.bg-contain { background-size: contain !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-ATTACHMENT
-//  ----------------------------------------------------------------------------
-.bg-fixed { background-attachment: fixed !important; }
-.bg-local { background-attachment: local !important; }
-.bg-scroll { background-attachment: scroll !important; }
-
-//  ============================================================================
-//  $  BACKGROUND-IMAGE
-//  ----------------------------------------------------------------------------
-.bg-image-none { background-image: none !important; }
-
-.bg-confetti-animated {
-    background-repeat: repeat-x;
-    background-position: top -10px center;
-    background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
-
-    @media (prefers-reduced-motion) {
-        background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
-    }
-}
-
-.bg-confetti-static {
-    background-repeat: repeat-x;
-    background-position: top -10px center;
-    background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
-}
-
-// Focus styles
-.focus,
-.f\:focus:focus,
-.f\:focus:focus-within {
-    .focus-styles();
-}
-
-.focus-inset,
-.f\:focus-inset:focus,
-.f\:focus-inset:focus-within {
-    .focus-styles(true);
-}
-
-.focus-bordered,
-.f\:focus-bordered:focus,
-.f\:focus-bordered:focus-within {
-    .focus-styles(false, true);
-}
-
-.focus-inset-bordered,
-.f\:focus-inset-bordered:focus,
-.f\:focus-inset-bordered:focus-within {
-    .focus-styles(true, true);
-}
-
-//  ============================================================================
-//  $  OBJECT-FIT / OBJECT-POSITION
-//  ----------------------------------------------------------------------------
-
-.of-contain { object-fit: contain !important; }
-.of-cover { object-fit: cover !important; }
-.of-fill { object-fit: fill !important; }
-.of-none { object-fit: none !important; }
-.of-scale-down { object-fit: scale-down !important; }
-
-.op-center { object-position: center !important; }
-
-//  ============================================================================
-//  $  CURSORS
-//  ----------------------------------------------------------------------------
-.c-auto { cursor: auto !important; }
-.c-default { cursor: default !important; }
-.c-pointer { cursor: pointer !important; }
-.c-text { cursor: text !important; }
-.c-wait { cursor: wait !important; }
-.c-move { cursor: move !important; }
-.c-not-allowed { cursor: not-allowed !important; }
-.c-help { cursor: help !important; }
-
-//  ============================================================================
-//  $  POINTER EVENTS
-//  ----------------------------------------------------------------------------
-.pe-auto { pointer-events: auto !important; }
-.pe-none { pointer-events: none !important; }
-
-//  ============================================================================
-//  $  USER SELECT
-//  ----------------------------------------------------------------------------
-.us-auto {
-    -webkit-user-select: auto !important;
-    -moz-user-select: auto !important;
-    -ms-user-select: auto !important;
-    user-select: auto !important;
-}
-
-.us-none {
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-    user-select: none !important;
-}
-
-//  ============================================================================
-//  $  USER DRAG
-//  ----------------------------------------------------------------------------
-.ud-auto {
-    -webkit-user-drag: auto !important;
-    -moz-user-drag: auto !important;
-    -ms-user-drag: auto !important;
-}
-
-.ud-none {
-    -webkit-user-drag: none !important;
-    -moz-user-drag: none !important;
-    -ms-user-drag: none !important;
-}
-
-//  ============================================================================
-//  $  VISIBILITY
-//  ----------------------------------------------------------------------------
-.v-visible { visibility: visible !important; }
-.v-hidden { visibility: hidden !important; }
-.v-visible-sr {
-    // Borrowed from Wordpress
-    // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
-    border: 0;
-    clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
-    clip-path: inset(50%);
-    height: var(--su-static1);
-    margin: calc(var(--su-static1) * -1); // -1px
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width:  var(--su-static1);
-    overflow-wrap: normal;
-}
-
-//  ============================================================================
-//  $  FLOATS
-//  ----------------------------------------------------------------------------
-.float-left { float: left !important; }
-.float-right { float: right !important; }
-.float-none { float: none !important; }
-.clearfix { .clearfix(); }
-.clear-left { clear: left !important; }
-.clear-right { clear: right !important; }
-.clear-both { clear: both !important; }
-.clear-none { clear: none !important; }
-
-//  ============================================================================
-//  $  BOX SIZING
-//  ----------------------------------------------------------------------------
-.box-content { box-sizing: content-box !important; }
-.box-border { box-sizing: border-box !important; }
-.box-unset { box-sizing: unset !important; }
-
-//  ============================================================================
-//  $  VERTICAL ALIGNMENT
-//  ----------------------------------------------------------------------------
-.va-baseline { vertical-align: baseline !important; }
-.va-bottom { vertical-align: bottom !important; }
-.va-middle { vertical-align: middle !important; }
-.va-sub { vertical-align: sub !important; }
-.va-super { vertical-align: super !important; }
-.va-text-bottom { vertical-align: text-bottom !important; }
-.va-text-top { vertical-align: text-top !important; }
-.va-top { vertical-align: top !important; }
-.va-unset { vertical-align: unset !important; }
-
-//  ============================================================================
-//  $  POSITION
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.ps-absolute', { position: absolute !important; });
-#stacks-internals #responsify('.ps-fixed', { position: fixed !important; });
-#stacks-internals #responsify('.ps-relative', { position: relative !important; });
-#stacks-internals #responsify('.ps-static', { position: static !important; });
-#stacks-internals #responsify('.ps-sticky', { position: sticky !important; });
-.ps-unset { position: unset !important; }
-
-//  ============================================================================
-//  $  OVERFLOW
-//  ----------------------------------------------------------------------------
-.overflow-auto { overflow: auto !important; @scrollbar-styles(); }
-.overflow-x-auto { overflow-x: auto !important; @scrollbar-styles(); }
-.overflow-y-auto { overflow-y: auto !important; @scrollbar-styles(); }
-
-.overflow-hidden { overflow: hidden !important; @scrollbar-styles(); }
-.overflow-x-hidden { overflow-x: hidden !important; @scrollbar-styles(); }
-.overflow-y-hidden { overflow-y: hidden !important; @scrollbar-styles(); }
-
-.overflow-scroll { overflow: scroll !important; @scrollbar-styles(); }
-.overflow-x-scroll { overflow-x: scroll !important; @scrollbar-styles(); }
-.overflow-y-scroll { overflow-y: scroll !important; @scrollbar-styles(); }
-
-.overflow-visible { overflow: visible !important; }
-
-//  ============================================================================
-//  $  OPACITY
-//  ----------------------------------------------------------------------------
-.o0 { opacity: 0 !important; }
-.h\:o0:hover { .o0; }
-.o5 { opacity: 0.05 !important; }
-.h\:o5:hover { .o5; }
-.o10 { opacity: 0.1 !important; }
-.o20 { opacity: 0.2 !important; }
-.o30 { opacity: 0.3 !important; }
-.o40 { opacity: 0.4 !important; }
-.o50 { opacity: 0.5 !important; }
-.h\:o50:hover { .o50; }
-.o60 { opacity: 0.6 !important; }
-.o70 { opacity: 0.7 !important; }
-.o80 { opacity: 0.8 !important; }
-.h\:o80:hover { .o80; }
-.o90 { opacity: 0.9 !important; }
-.o100 { opacity: 1 !important; }
-.h\:o100:hover { .o100; }
-
-.f\:o100 {
-    &:focus,
-    &:focus-within {
-        .o100;
-    }
-}
-
-//  ============================================================================
-//  $  Z-INDEX
-//  ----------------------------------------------------------------------------
-.z-hide { z-index: var(--zi-hide) !important; }
-.z-base { z-index: var(--zi-base) !important; }
-.z-active { z-index: var(--zi-active) !important; }
-.z-selected { z-index: var(--zi-selected) !important; }
-.z-dropdown { z-index: var(--zi-dropdown) !important; }
-.z-popover { z-index: var(--zi-popovers) !important; }
-.z-tooltip { z-index: var(--zi-tooltips) !important; }
-.z-banner { z-index: var(--zi-banners) !important; }
-.z-nav { z-index: var(--zi-navigation) !important; }
-.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; }
-.z-modal { z-index: var(--zi-modals) !important; }
-.z-modal-bg { z-index: var(--zi-modals-background) !important; }
-
-//  ============================================================================
-//  $  OUTLINE
-//  ----------------------------------------------------------------------------
-.outline-none { outline: 0 !important; }
-.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); } // TODO SHINE revisit this value once theme colors are finalized
-
-.f\:outline-ring {
-    &:focus,
-    &:focus-within {
-        .outline-ring;
-    }
-}
-
-//  ============================================================================
-//  $  CURRENT COLOR
-//  ----------------------------------------------------------------------------
-.fill-current { fill: currentColor !important; }
-.stroke-current { stroke: currentColor !important; }
-
-//  ============================================================================
-//  $  BOX SHADOW
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.bs-none', { box-shadow: none !important; });
-.bs-sm { box-shadow: var(--bs-sm) !important; }
-.h\:bs-sm:hover { .bs-sm; }
-.bs-md { box-shadow: var(--bs-md) !important; }
-.h\:bs-md:hover { .bs-md; }
-.bs-lg { box-shadow: var(--bs-lg) !important; }
-.h\:bs-lg:hover { .bs-lg; }
-.bs-xl { box-shadow: var(--bs-xl) !important; }
-.bs-ring { box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); }
-.h\:bs-ring:hover { .bs-ring; }
-.f\:bs-ring {
-    &:focus,
-    &:focus-within {
-        .bs-ring;
-    }
-}
-
-//  --  Added hover styles for box-shadow
-// TODO do we still need them? Can we deprecate/remove these weird hover classes?
-.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) .set-black()[150] !important; }
-.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) .set-black()[225] !important; }
-.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(.set-black()[350], 70%) !important; }
-.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[300], 75%) !important; }
-.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[350], 80%) !important; }
-.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 .set-black()[350] !important; }
-
-//  ============================================================================
-//  $  TRANSITIONS
-//  ----------------------------------------------------------------------------
-
-// -- Provide a sensible default
-.t {
-    transition-duration: var(--transition-time);
-    transition-property: all;
-    transition-timing-function: var(--te-ease-in);
-    transition-delay: 0s;
-}
-
-// -- Durations
-.t-slow { transition-duration: 0.25s !important; }
-.t-fast { transition-duration: 0.05s !important; }
-
-// -- Properties
-.t-unset { transition-property: none !important; }
-.t-bg { transition-property: background-color !important; }
-.t-opacity { transition-property: opacity !important; }
-.t-shadow { transition-property: box-shadow !important; }
-
-// -- Delays
-.t-delay { transition-delay: 0.25s !important; }
-.t-delay-unset { transition-delay: 0s !important; }
-
-//  ============================================================================
-//  $  TABLE LAYOUT
-//  ----------------------------------------------------------------------------
-.tl-fixed { table-layout: fixed !important; }
-.tl-auto { table-layout: auto !important; }

package/lib/atomic/spacing.less

@@ -1,98 +0,0 @@
-@import (reference) "../base/internal.less";
-@import (reference) "../exports/spacing-mixins.less";
-
-// SPACING UNITS CSS CUSTOM PROPERTIES
-body {
-    --su-base: 1;
-    --su-static0: 0px;
-    --su-static1: 1px;
-    --su-static2: 2px;
-    --su-static4: 4px;
-    --su-static6: 6px;
-    --su-static8: 8px;
-    --su-static12: 12px;
-    --su-static16: 16px;
-    --su-static24: 24px;
-    --su-static32: 32px;
-    --su-static48: 48px;
-    --su-static64: 64px;
-    --su-static96: 96px;
-    --su-static128: 128px;
-
-    --su0: var(--su-static0);
-    // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
-    --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base)));
-    --su2: calc(var(--su-static2) * var(--su-base));
-    --su4: calc(var(--su-static4) * var(--su-base));
-    --su6: calc(var(--su-static6) * var(--su-base));
-    --su8: calc(var(--su-static8) * var(--su-base));
-    --su12: calc(var(--su-static12) * var(--su-base));
-    --su16: calc(var(--su-static16) * var(--su-base));
-    --su24: calc(var(--su-static24) * var(--su-base));
-    --su32: calc(var(--su-static32) * var(--su-base));
-    --su48: calc(var(--su-static48) * var(--su-base));
-    --su64: calc(var(--su-static64) * var(--su-base));
-    --su96: calc(var(--su-static96) * var(--su-base));
-    --su128: calc(var(--su-static128) * var(--su-base));
-}
-
-// MARGIN
-//  Margin
-.m-auto { margin: auto !important; }
-.generate-spacing('.m', margin, true);
-.generate-spacing('.m', margin, true, percent);
-
-//  Margin top
-.mt-auto { margin-top: auto !important; }
-.generate-spacing('.mt', margin-top, true);
-.generate-spacing('.mt', margin-top, true, percent);
-
-//  Margin right
-.mr-auto { margin-right: auto !important; }
-.generate-spacing('.mr', margin-right, true);
-.generate-spacing('.mr', margin-right, true, percent);
-
-//  Margin bottom
-.mb-auto { margin-bottom: auto !important; }
-.generate-spacing('.mb', margin-bottom, true);
-.generate-spacing('.mb', margin-bottom, true, percent);
-
-//  Margin left
-.ml-auto { margin-left: auto !important; }
-.generate-spacing('.ml', margin-left, true);
-.generate-spacing('.ml', margin-left, true, percent);
-
-//  Margin x-axis, y-axis
-.mx-auto { margin-left: auto !important; margin-right: auto !important; }
-.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
-.generate-spacing('.mx'; margin-left, margin-right; true);
-.generate-spacing('.my'; margin-top, margin-bottom; true);
-
-// PADDING
-.generate-spacing('.p', padding);
-.generate-spacing('.pt', padding-top);
-.generate-spacing('.pr', padding-right);
-.generate-spacing('.pb', padding-bottom);
-.generate-spacing('.pl', padding-left);
-.generate-spacing('.px'; padding-left, padding-right);
-.generate-spacing('.py'; padding-top, padding-bottom);
-
-// POSITIONING
-// Inset
-.generate-spacing('.i', inset);
-
-//  Top
-.generate-spacing('.t', top, true);
-.generate-spacing('.t', top, true, percent);
-
-// Right
-.generate-spacing('.r', right, true);
-.generate-spacing('.r', right, true, percent);
-
-// Bottom
-.generate-spacing('.b', bottom, true);
-.generate-spacing('.b', bottom, true, percent);
-
-// Left
-.generate-spacing('.l', left, true);
-.generate-spacing('.l', left, true, percent);