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

package/lib/exports/mixins.less

@@ -1,52 +1,10 @@
-/* stylelint-disable indentation */
-//
-//  STACK OVERFLOW
-//  MIXINS
-//
-//  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/
-//
-//  ============================================================================
-//  $   Clearfix
-//  -----------------------------------------------------------------------------
-.clearfix() {
-    &:before,
-    &:after {
-        content: "";
-        display: table;
-    }
-    &:after { clear: both; }
-}
-
-//  ============================================================================
-//  --  LIGHTMODE
-//      .light-mode-forced ensures light color scheme is used in .theme-light__forced
-//
-//      .light-mode-forced({ color: var(--black-600) });
-//
-//  ---------------------------------------------------------------------------
-
-.light-mode-forced(@rules) {
-    .theme-light__forced &,
-    body.theme-system .theme-light__forced &,
-    body.theme-dark .theme-light__forced & {
-        @rules();
-    }
-}
-
-//  ===========================================================================
-//  --  DARKMODE
-//      .darkmode renders a dark mode override behind the
-//      prefers-color-scheme: dark media query and .theme-system. It also
-//      renders the same rules outside of the media query with .theme-dark
-//
-//      Usage example:
-//
-//      .dark-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
+// COLOR MODE OVERRIDES
+/**
+ * Applies styles rules when dark mode is active.
+ *
+ * Usage example:
+ * .dark-mode({ background-color: var(--black-100); });
+ */
 .dark-mode(@rules) {
     body.theme-system & {
         @media (prefers-color-scheme: dark) {
@@ -61,22 +19,24 @@
     }
 }
 
-//  ===========================================================================
-//  --  HIGHCONTRAST
-//      .highcontrast-mode renders a high contrast mode override for .theme-highcontrast
-//
-//      Usage example:
-//
-//      .highcontrast-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
+/**
+ * Applies styles rules when high contrast mode is active.
+ *
+ * Usage example:
+ * .highcontrast-mode({ background-color: var(--black-100); });
+ */
 .highcontrast-mode(@rules) {
     body.theme-highcontrast & {
         @rules();
     }
 }
 
+/**
+ * Applies styles rules when high contrast and dark mode is active.
+ *
+ * Usage example:
+ * .highcontrast-dark-mode({ background-color: var(--black-100); });
+ */
 .highcontrast-dark-mode(@rules) {
     body.theme-highcontrast.theme-system & {
         @media (prefers-color-scheme: dark) {
@@ -88,31 +48,9 @@
     }
 }
 
-//  ===========================================================================
-//  --  FONT FACE
-//      Used to load hosted, custom webfonts. You must provide the font's
-//      full file path in the mixin. All modern browsers the WOFF file format.
-//      Will automatically add various local()s to try using already-installed
-//      fonts before downloading.
-//  ---------------------------------------------------------------------------
-/* stylelint-disable at-rule-descriptor-value-no-unknown */
-.font-face(@family, @path, @weight, @style) {
-    @font-face {
-        font-family: "@{family}";
-        font-style: @style;
-        font-weight: @weight;
-        & when (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, " Italic");
-        }
-        & when not (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, "");
-        }
-    }
-}
-/* stylelint-enable at-rule-descriptor-value-no-unknown */
-
+// FOCUS STYLES
 /**
- * Focus styles for the given context.
+ * Applies focus styles for the given context.
  *
  * Usage example:
  * .focus-styles(true, true);
@@ -122,213 +60,95 @@
  */
 .focus-styles(@inset: false, @border: false) {
     & when not (@inset) and not (@border) {
-        box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+        box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme);
     }
 
     & when not (@inset) and (@border) {
         border-color: var(--focus-neutral) !important;
-        box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
+        box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme);
     }
 
     & when (@inset) and not (@border) {
-        box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+        box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral);
     }
 
     & when (@inset) and (@border) {
         border-color: var(--focus-theme) !important;
-        box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
+        box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral);
     }
 
     // We include a 2px transparent outline to ensure Windows High Contrast Forced Color Mode
     // includes outlines as expected See https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
-    outline: var(--su-static2) solid transparent !important;
-}
-
-//  =============================================================================
-//  --  COLORS
-//      The following mixins let us do color math on the browser. They take a
-//      color prefix, and they expect the different values to be stored in
-//      --{prefix}-h, --{prefix}-s and --{prefix}-l
-//  -----------------------------------------------------------------------------
-
-.load-color-variables(@amount) {
-    @amountDecimal: (@amount / 100);
-    @amountPercentage: @amount * 1%;
-    @complementDecimal: 1 - @amountDecimal;
-    @additionDecimal: 1 + @amountDecimal;
-}
-
-.assemble-color(@color-prefix) {
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 var(~"--@{color-prefix}-l"));
+    outline: var(--su2) solid transparent !important;
 }
 
-// Increase the lightness of a color in the HSL color space by an absolute amount.
-.native-lighten(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") + @amountPercentage));
-}
-
-// Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
-.native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) {
-    @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
-    @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage];
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage),
-                 calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage));
-}
-
-
-// Decrease the lightness of a color in the HSL color space by an absolute amount.
-.native-darken(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") - @amountPercentage));
-}
-
-// Mix color with white in variable proportion
-.native-tint(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @ramount: 255 * @amountDecimal;
-    @gamount: 255 * @amountDecimal;
-    @bamount: 255 * @amountDecimal;
-    @result: rgb(calc(@ramount + var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(@gamount + var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(@bamount + var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Mix color with black in variable proportion
-.native-shade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: rgb(calc(var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Set the absolute opacity of a color.
-.native-fade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsla(var(~"--@{color-prefix}-h"),
-                  var(~"--@{color-prefix}-s"),
-                  var(~"--@{color-prefix}-l"),
-                  @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-md) + var(--su-static1));
+// SIZING
+/**
+ * Generate base and responsive atomic sizing classes.
+ *
+ * Usage example:
+ * .generate-sizing('.m', margin, true);
+ * .generate-sizing('.ml', margin-left, true, percent);
+ * .generate-sizing('.mx'; margin-left, margin-right; true);
+ * .generate-sizing('.pr', padding-right);
+ *
+ * @param {string} prefix - What prefix to generate (e.g. `.m`, `.pr`, etc).
+ * @param {string|list} properties - What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
+ * @param {list} values - List of values to generate classes for.
+ * @param {string} [type='px'] - What set of values to generate. Options: `px` | `percent`.
+ * @param {boolean} [responsive=false] - Whether to generate responsive variants.
+ * @param {boolean} [negative=false] - Whether to generate negative value classes.
+ */
+.generate-sizing(@prefix, @properties, @values, @type: 'px', @responsive: false, @negative: false) {
+    #stacks-internals #build-classes(
+        @prefix,
+        {
+            .template(@value) {
+                each(@properties, #(@prop) {
+                    & when (@type = 'px') and (@negative = false) {
+                        @{prop}: var(~"--su@{value}") !important;
+                    }
+                    & when (@type = 'px') and (@negative = true) {
+                        @{prop}: var(~"--sun@{value}") !important;
+                    }
+                    & when (@type = 'percent') and (@negative = false) {
+                        @{prop}: ~"@{value}% !important";
+                    }
+                    & when (@type = 'percent') and (@negative = true) {
+                        @{prop}: ~"-@{value}% !important";
+                    }
+                });
             }
-        & when (@size = md) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-body3);
-        }
-
-        // lg
-        & when (@size = lg) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-md) + 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);
-    }
+        },
+        @values,
+        @responsive
+    );
 }
 
-//  =============================================================================
-//  --  WEBKIT AUTOFILL
-//  -----------------------------------------------------------------------------
-.webkit-autofill() {
-    &:-webkit-autofill {
-        &:focus {
-            border-color: var(--blue-400);
-            // 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-200) inset, 0 0 0 var(--su-static4) var(--focus-ring);
-        }
-
-        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) 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-400);
-        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()
-//  ---------------------------------------------------------------------------
-
-
-#stacks-internals() {
-
-    // Generate all common variants for local names that this font face may have.
-    // The CSS spec (Font Module Level 3, Section 4.3) says to use "only the Postscript
-    // name or the full font name".
-    // For example, given the family "Comic Sans MS", weight 800, italic, we're
-    // trying these local names:
-    //
-    // - Comic Sans MS Extra Bold Italic
-    // - ComicSansMS-ExtraBoldItalic
-    // - Comic Sans MS 800 Italic
-    // - ComicSansMS-800Italic
-    //
-    // For the weight 400 we also include the un-weight-postfixed name ("Comic Sans MS Italic").
-
-    #font-face-src(@family, @path, @weight, @style-postfix) {
-        @index: round(@weight/100);
-        @weight-names: "Thin", "Extra Light", "Light", "Regular", "Medium", "Semi Bold", "Bold", "Extra Bold", "Black";
-        @weight-name: extract(@weight-names, @index);
-        #stacks-internals #font-face-src-postfix(@family, @path, "@{weight-name}", @weight, @style-postfix);
-    }
-
-    #font-face-src-postfix(@family, @path, @postfix-name, @postfix-number, @style-postfix) {
-        @family-nospace: replace(@family, " ", "");
-        @postfix-name-nospace: replace("@{postfix-name}@{style-postfix}", " ", "");
-        @postfix-number-nospace: replace("@{postfix-number}@{style-postfix}", " ", "");
-
-        & when (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), local("@{family}@{style-postfix}"), @path format("woff");
-        }
-
-        & when not (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), @path format("woff");
-        }
-    }
+/**
+ * Generate atomic sizing classes using predefined SU (spacing unit) values.
+ *
+ * Generates 12 utility classes (numbered 1-12) that map to specific SU values:
+ * 128, 256, 344, 448, 512, 640, 768, 848, 960, 1024, 1120, 1280.
+ *
+ * Usage example:
+ * .generate-su-sizing('.ws', width);
+ * .generate-su-sizing('.hs', height);
+ * .generate-su-sizing('.wmn', min-width);
+ *
+ * @param {string} prefix - Class prefix to generate (e.g. `.ws`, `.hs`, `.wmn`).
+ * @param {string} property - CSS property to set (e.g. `width`, `height`, `min-width`).
+ */
+.generate-su-sizing(@prefix, @property) {
+    @su-values: 128, 256, 344, 448, 512, 640, 768, 848, 960, 1024, 1120, 1280;
+    #stacks-internals #build-classes(
+        @prefix,
+        {
+            .template(@value) {
+                @su-value: extract(@su-values, @value);
+                @{property}: var(~"--su@{su-value}") !important;
+            }
+        },
+        1 2 3 4 5 6 7 8 9 10 11 12
+    );
 }

package/lib/index.ts

@@ -1,27 +1,23 @@
 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();

package/lib/stacks-static.less

@@ -5,68 +5,82 @@
 @import "base/icon.less";
 @import "input-utils.less";
 
-//  --  COMPONENTS
+// LESS CONSTANTS AND MIXINS
+@import "exports/exports.less";
+
+// CUSTOM PROPERTIES
+@import "atomic/sizing.less";
+
+// FOUNDATIONAL CLASSES
+@import "atomic/color.less";
+@import "atomic/typography.less";
+
+// ATOMIC CLASSES
+@import "atomic/backgrounds.less";
+@import "atomic/borders.less";
+@import "atomic/border-radius.less";
+@import "atomic/box-shadow.less";
+@import "atomic/box-sizing.less";
+@import "atomic/current-color.less";
+@import "atomic/cursors.less";
+@import "atomic/display.less";
+@import "atomic/flex.less";
+@import "atomic/floats.less";
+@import "atomic/gap.less";
+@import "atomic/grid.less";
+@import "atomic/height.less";
+@import "atomic/interactivity.less";
+@import "atomic/lists.less";
+@import "atomic/margin.less";
+@import "atomic/object-fit.less";
+@import "atomic/opacity.less";
+@import "atomic/outline.less";
+@import "atomic/overflow.less";
+@import "atomic/padding.less";
+@import "atomic/positioning.less";
+@import "atomic/truncation.less";
+@import "atomic/vertical-alignment.less";
+@import "atomic/visibility.less";
+@import "atomic/width.less";
+@import "atomic/z-index.less";
+
+// COMPONENTS
 @import "components/activity-indicator/activity-indicator.less";
 @import "components/anchor/anchor.less";
 @import "components/avatar/avatar.less";
 @import "components/badge/badge.less";
 @import "components/banner/banner.less";
 @import "components/bling/bling.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/form-group/form-group.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/loader/loader.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/skeleton/skeleton.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";
+@import "components/vote/vote.less";
 
 /* stylelint-disable */
 #stacks-internals #screen-lg({
@@ -91,4 +105,4 @@
 
 // CONFIG
 @import "base/configuration-static.less";
-@import "base/internal.less";
+@import "base/internal.less";

package/lib/test/visual-test-utils.ts

@@ -23,6 +23,7 @@ const scheduleVisualTest = ({
         }
 
         let retryAttempts = 3;
+        let lastError: Error | null = null;
 
         do {
             await fixture(element);
@@ -37,21 +38,22 @@ const scheduleVisualTest = ({
                 return;
             } catch (error) {
                 const e = error as Error;
-                // if the error is not a visual diff failure, retry
-                // this is to prevent flaky tests due to snapshot capturing
-                if (
-                    retryAttempts > 0 &&
-                    !e.message.includes("Visual diff failed.")
-                ) {
-                    retryAttempts--;
-                    continue;
-                } else {
+                lastError = e;
+                // if the error is a visual diff failure, fail immediately
+                if (e.message.includes("Visual diff failed.")) {
                     throw e;
                 }
+                // otherwise retry (to prevent flaky tests due to snapshot capturing)
+                retryAttempts--;
             } finally {
                 el.remove();
             }
         } while (retryAttempts > 0);
+
+        // If we exhausted all retries without success, throw the last error
+        if (lastError) {
+            throw lastError;
+        }
     });
 };
 
@@ -60,4 +62,34 @@ const runVisualTests = (args: VisualTestArgs) => {
     testVariations.forEach(scheduleVisualTest);
 };
 
-export { runVisualTests };
+const replaceHtml = (
+    componentTemplateResult: unknown,
+    textToReplace: string,
+    replacementHtml: string
+) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const component = componentTemplateResult as any;
+    if (!Array.isArray(component.strings) || !Array.isArray(component.values)) {
+        throw new Error("Expected Lit TemplateResult type");
+    }
+
+    // Replace placeholder with actual icon in the Lit template
+    const originalStrings = component.strings;
+    const updatedStrings = originalStrings.map((str: string) =>
+        str.replace(textToReplace, replacementHtml)
+    );
+    // Create a proper TemplateStringsArray with raw property
+    Object.defineProperty(updatedStrings, "raw", {
+        value: updatedStrings.map((str: string) => str),
+        enumerable: false,
+    });
+    // Reconstruct the template with updated strings and original values
+    const updatedComponent = {
+        ...component,
+        strings: updatedStrings,
+        values: component.values,
+    };
+    return updatedComponent;
+};
+
+export { runVisualTests, replaceHtml };

package/lib/tsconfig.json

@@ -5,7 +5,7 @@
         "lib": ["dom", "es6", "dom.iterable", "scripthost"],
         "outDir": "../dist",
         "sourceMap": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "skipLibCheck": true,
         "declaration": true,
         "allowSyntheticDefaultImports": true,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.3",
+    "version": "3.0.0-beta.30",
     "files": [
         "dist",
         "lib",