@stackoverflow/stacks 2.7.2 → 2.7.4

package/lib/exports/spacing-mixins.less

@@ -1,67 +1,67 @@
-/**
- * Generate base and responsive atomic spacing classes.
- *
- * Usage example:
- * .generate-spacing('.m', margin, true);
- * .generate-spacing('.ml', margin-left, true, percent);
- * .generate-spacing('.mx'; margin-left, margin-right; true);
- * .generate-spacing('.pr', padding-right);
- *
- * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc).
- * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
- * @includeNegative: bool - Boolean to include generation of negative value classes.
- * @type: px | percent - What set of value to generate.
- */
-.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) {
-  & when (@type = px) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: var(~"--su@{value}") !important;
-            })
-          } },
-          0 1 2 4 6 8 12 16 24 32 48 64 96 128
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: calc(var(~"--su@{value}") * -1) !important;
-              })
-            } },
-            1 2 4 6 8 12 16 24 32 48 64 96 128
-        );
-    }
-  }
-
-  & when (@type = percent) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: @value !important;
-            })
-          } },
-          50% 100%
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: -@value !important;
-              })
-            } },
-            50% 100%
-        );
-    }
-  }
-}
+/**
+ * Generate base and responsive atomic spacing classes.
+ *
+ * Usage example:
+ * .generate-spacing('.m', margin, true);
+ * .generate-spacing('.ml', margin-left, true, percent);
+ * .generate-spacing('.mx'; margin-left, margin-right; true);
+ * .generate-spacing('.pr', padding-right);
+ *
+ * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc).
+ * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
+ * @includeNegative: bool - Boolean to include generation of negative value classes.
+ * @type: px | percent - What set of value to generate.
+ */
+.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) {
+  & when (@type = px) {
+      #stacks-internals #build-classes(
+          responsive,
+          @prefix,
+          { .template(@value) {
+            each(@properties, #(@prop) {
+                @{prop}: var(~"--su@{value}") !important;
+            })
+          } },
+          0 1 2 4 6 8 12 16 24 32 48 64 96 128
+      );
+
+      & when (@includeNegative = true) {
+        #stacks-internals #build-classes(
+            responsive,
+            ~"@{prefix}n",
+            { .template(@value) {
+              each(@properties, #(@prop) {
+                  @{prop}: calc(var(~"--su@{value}") * -1) !important;
+              })
+            } },
+            1 2 4 6 8 12 16 24 32 48 64 96 128
+        );
+    }
+  }
+
+  & when (@type = percent) {
+      #stacks-internals #build-classes(
+          responsive,
+          @prefix,
+          { .template(@value) {
+            each(@properties, #(@prop) {
+                @{prop}: @value !important;
+            })
+          } },
+          50% 100%
+      );
+
+      & when (@includeNegative = true) {
+        #stacks-internals #build-classes(
+            responsive,
+            ~"@{prefix}n",
+            { .template(@value) {
+              each(@properties, #(@prop) {
+                  @{prop}: -@value !important;
+              })
+            } },
+            50% 100%
+        );
+    }
+  }
+}

package/lib/index.ts

@@ -1,32 +1,32 @@
-import "./stacks.less";
-import {
-    BannerController,
-    ExpandableController,
-    ModalController,
-    PopoverController,
-    TableController,
-    TabListController,
-    ToastController,
-    TooltipController,
-    UploaderController,
-} from "./controllers";
-import { application, StacksApplication } from "./stacks";
-
-// register all built-in controllers
-application.register("s-banner", BannerController);
-application.register("s-expandable-control", ExpandableController);
-application.register("s-modal", ModalController);
-application.register("s-toast", ToastController);
-application.register("s-navigation-tablist", TabListController);
-application.register("s-popover", PopoverController);
-application.register("s-table", TableController);
-application.register("s-tooltip", TooltipController);
-application.register("s-uploader", UploaderController);
-
-// finalize the application to guard our controller namespace
-StacksApplication.finalize();
-
-// export all controllers w/ helpers
-export * from "./controllers";
-// export the entirety of the contents of stacks.ts
-export * from "./stacks";
+import "./stacks.less";
+import {
+    BannerController,
+    ExpandableController,
+    ModalController,
+    PopoverController,
+    TableController,
+    TabListController,
+    ToastController,
+    TooltipController,
+    UploaderController,
+} from "./controllers";
+import { application, StacksApplication } from "./stacks";
+
+// register all built-in controllers
+application.register("s-banner", BannerController);
+application.register("s-expandable-control", ExpandableController);
+application.register("s-modal", ModalController);
+application.register("s-toast", ToastController);
+application.register("s-navigation-tablist", TabListController);
+application.register("s-popover", PopoverController);
+application.register("s-table", TableController);
+application.register("s-tooltip", TooltipController);
+application.register("s-uploader", UploaderController);
+
+// finalize the application to guard our controller namespace
+StacksApplication.finalize();
+
+// export all controllers w/ helpers
+export * from "./controllers";
+// export the entirety of the contents of stacks.ts
+export * from "./stacks";

package/lib/input-utils.less

@@ -1,41 +1,41 @@
-.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);
-        @error();
-    }
-
-    .has-success & {
-        --_@{prefix}-bc: var(--green-400);
-        @success();
-    }
-
-    .has-warning & {
-        --_@{prefix}-bc: var(--yellow-500);
-        @warning();
-    }
-}
-
-.is-disabled,
-.is-readonly,
-.has-success,
-.has-error,
-.has-warning {
-    position: relative;
-}
-
+.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);
+        @error();
+    }
+
+    .has-success & {
+        --_@{prefix}-bc: var(--green-400);
+        @success();
+    }
+
+    .has-warning & {
+        --_@{prefix}-bc: var(--yellow-500);
+        @warning();
+    }
+}
+
+.is-disabled,
+.is-readonly,
+.has-success,
+.has-error,
+.has-warning {
+    position: relative;
+}
+

package/lib/stacks-dynamic.less

@@ -1,24 +1,24 @@
-//
-//  STACK OVERFLOW
-//  DYNAMIC STACK ITEMS
-//
-//  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/
-//
-//  This is where all the magic happens.
-//
-//
-//  ============================================================================
-//  $   DYNAMIC ELEMENTS
-//      The following items are elements which we allow communities to modify
-//      via variables.
-//  ----------------------------------------------------------------------------
-//  --  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/internal.less";
+//
+//  STACK OVERFLOW
+//  DYNAMIC STACK ITEMS
+//
+//  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/
+//
+//  This is where all the magic happens.
+//
+//
+//  ============================================================================
+//  $   DYNAMIC ELEMENTS
+//      The following items are elements which we allow communities to modify
+//      via variables.
+//  ----------------------------------------------------------------------------
+//  --  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/internal.less";

package/lib/stacks-static.less

@@ -1,93 +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";
+// 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";

package/lib/stacks.less

@@ -1,13 +1,13 @@
-//
-//  STACK OVERFLOW
-//  THE COMPLETE STANDALONE STACKS
-//
-//  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/
-//
-//  This is where all the magic happens.
-//
-//  ============================================================================
-@import "stacks-static.less";
-@import "stacks-dynamic.less";
+//
+//  STACK OVERFLOW
+//  THE COMPLETE STANDALONE STACKS
+//
+//  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/
+//
+//  This is where all the magic happens.
+//
+//  ============================================================================
+@import "stacks-static.less";
+@import "stacks-dynamic.less";

package/lib/test/assertions.ts

@@ -1,36 +1,36 @@
-import { expect } from "@open-wc/testing";
-import Color from "colorjs.io";
-
-type AdditionalAssertion = {
-    description: string;
-    assertion: (node: HTMLElement) => Promise<void> | void;
-};
-
-// TODO: evaluate if we can do this check against all the components
-// automatically instead of having to add the assertion manually
-const WCAGNonTextContrast: AdditionalAssertion = {
-    description:
-        "should pass WCAG22 1.4.11 non-text-contrast success criterion (https://www.w3.org/TR/WCAG22/#non-text-contrast)",
-    assertion: (node) => {
-        const selectedNode = node.querySelector(".is-selected") as HTMLElement;
-        const selectedNodeStyles = window.getComputedStyle(selectedNode);
-        const bodyStyles = window.getComputedStyle(document.body);
-        const bgBodyColor = new Color(
-            bodyStyles.getPropertyValue("background-color")
-        );
-        const bgSelectedNodeColor = new Color(
-            selectedNodeStyles.getPropertyValue("background-color")
-        );
-
-        // we are specifing WCAG21 because of colorjs.io API
-        // WCAG21 and WCAG22 algoirthms are the same
-        const WCAGcontrast = bgSelectedNodeColor.contrast(
-            bgBodyColor,
-            "WCAG21"
-        );
-        expect(WCAGcontrast).to.be.at.least(3);
-    },
-};
-
-export type { AdditionalAssertion };
-export { WCAGNonTextContrast };
+import { expect } from "@open-wc/testing";
+import Color from "colorjs.io";
+
+type AdditionalAssertion = {
+    description: string;
+    assertion: (node: HTMLElement) => Promise<void> | void;
+};
+
+// TODO: evaluate if we can do this check against all the components
+// automatically instead of having to add the assertion manually
+const WCAGNonTextContrast: AdditionalAssertion = {
+    description:
+        "should pass WCAG22 1.4.11 non-text-contrast success criterion (https://www.w3.org/TR/WCAG22/#non-text-contrast)",
+    assertion: (node) => {
+        const selectedNode = node.querySelector(".is-selected") as HTMLElement;
+        const selectedNodeStyles = window.getComputedStyle(selectedNode);
+        const bodyStyles = window.getComputedStyle(document.body);
+        const bgBodyColor = new Color(
+            bodyStyles.getPropertyValue("background-color")
+        );
+        const bgSelectedNodeColor = new Color(
+            selectedNodeStyles.getPropertyValue("background-color")
+        );
+
+        // we are specifing WCAG21 because of colorjs.io API
+        // WCAG21 and WCAG22 algoirthms are the same
+        const WCAGcontrast = bgSelectedNodeColor.contrast(
+            bgBodyColor,
+            "WCAG21"
+        );
+        expect(WCAGcontrast).to.be.at.least(3);
+    },
+};
+
+export type { AdditionalAssertion };
+export { WCAGNonTextContrast };