@stackoverflow/stacks 3.0.0-beta.16 → 3.0.0-beta.18

package/lib/atomic/misc.less

@@ -179,6 +179,7 @@
     // Borrowed from Wordpress
     // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
     border: 0;
+    /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
     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);

package/lib/base/configuration-static.less

@@ -13,14 +13,14 @@
 //      legal options are `meyer` for the Eric Meyer reset, and `none` if no CSS reset should be compiled in.
 //
 //
-// #stacks-config-static { @breakpoints: 1264px, 980px, 640px; }
+// #stacks-config-static { @breakpoints: 92.25rem, 71.875rem, 48.75rem; }
 //
 //      @breakpoints is a list of values "optional_selector1, large_breakpoint1, medium_breakpoint1, small_breakpoint1, optional_selector2, ..."
 //
 //      Example:
 //
 //          @breakpoints:
-//              1264px, 980px, 640px,
+//              92.25rem, 71.875rem, 48.75rem,
 //              'html.smaller_breakpoints', 1164px, 880px, 540px,
 //              'html.even_smaller_breakpoints', 200px, 100px, 50px;
 //
@@ -37,7 +37,7 @@
 //              ...
 //          </html>
 //
-//      With the example @breakpoints setting from above, this <div> will be hidden below 1264px even though the smaller_breakpoints class
+//      With the example @breakpoints setting from above, this <div> will be hidden below 92.25rem even though the smaller_breakpoints class
 //      is on the root element, because the selector-free breakpoint group still applies.
 //
 //      Any selector, if given, MUST select the root (html) element.

package/lib/components/button/button.less

@@ -248,6 +248,7 @@
     &--radio { // This lives alongside a .s-btn element. These styles are the equivelent of `.v-visible-sr`
         border: 0;
         clip-path: inset(50%);
+        /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
         clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
         height: var(--su-static1);
         margin: var(--sun1);

package/lib/components/notice/notice.less

@@ -171,7 +171,7 @@
         //Add spacing between multiple notice actions
         gap: calc(var(--su24) - var(--su2)); //22px
         //Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
-        word-wrap: initial !important;
+        overflow-wrap: initial !important;
     }
 
     // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES

package/lib/exports/constants-helpers.less

@@ -55,9 +55,9 @@ body {
 //  ============================================================================
 //  $   RESPONSIVE BREAKPOINTS
 //  ----------------------------------------------------------------------------
-@breakpoint-lg: 1264px;
-@breakpoint-md: 980px;
-@breakpoint-sm: 640px;
+@breakpoint-lg: 92.25rem; // 1476px
+@breakpoint-md: 71.875rem; // 1150px
+@breakpoint-sm: 48.75rem; // 780px
 
 //  ============================================================================
 //  $   SCROLLBAR STYLING

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.16",
+    "version": "3.0.0-beta.18",
     "files": [
         "dist",
         "lib",