@castlabs/ui 7.15.1 → 7.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.15.1",
+  "version": "7.16.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",

package/src/styles/fonts/FontAwesome5/index.scss

@@ -6062,26 +6062,26 @@ readers don’t read off random characters that represent icons */
   content: '\f63f';
 }
 
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0); /* stylelint-disable-line property-no-deprecated */
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-  clip: auto; /* stylelint-disable-line property-no-deprecated */
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto;
-}
+// .sr-only {
+//   border: 0;
+//   clip: rect(0, 0, 0, 0); /* stylelint-disable-line property-no-deprecated */
+//   height: 1px;
+//   margin: -1px;
+//   overflow: hidden;
+//   padding: 0;
+//   position: absolute;
+//   width: 1px;
+// }
+
+// .sr-only-focusable:active,
+// .sr-only-focusable:focus {
+//   clip: auto; /* stylelint-disable-line property-no-deprecated */
+//   height: auto;
+//   margin: 0;
+//   overflow: visible;
+//   position: static;
+//   width: auto;
+// }
 
 @font-face {
   font-display: block;

package/src/styles/layout/helper.scss

@@ -70,9 +70,9 @@ h6.cl-faded,
   }
 }
 
-@for $i from 0 through 64 {
-  .cl-width-#{$i * 32} {
-    width: px($i * 32);
+@for $i from 0 through 32 {
+  .cl-width-#{$i * 16} {
+    width: px($i * 16);
   }
 }
 

package/src/styles/layout/meta.scss

@@ -1,3 +1,3 @@
 :root {
-  #{'--cl-version'}: 'v7.15.1';
+  #{'--cl-version'}: 'v7.16.0';
 }

package/src/styles/layout/screenreader.scss

@@ -0,0 +1,29 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines our screenreader helper classes.
+
+@use '../global' as *;
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0); /* stylelint-disable-line property-no-deprecated */
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  clip: auto; /* stylelint-disable-line property-no-deprecated */
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}

package/src/styles/ui.scss

@@ -18,6 +18,7 @@ $castlabs-ui-asset-postfix: '' !default;
 @use 'layout/grid';
 @use 'layout/helper';
 @use 'layout/meta';
+@use 'layout/screenreader';
 @use 'layout/scrollbar';
 @use 'layout/section';
 @use 'layout/spacing';

package/types/castlabs-ui.module.d.ts

@@ -57,6 +57,7 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
     sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE',
   }
   export function clDebounce (callback: any, ms?: number, key?: string): void
+  export function clSanitizeId (id: string): string
 
   export function clRandomString (length?: number, words?: string[]): string
   export function clRandomList (length?: number, words?: string[]): string[]

package/types/index.d.ts

@@ -115,6 +115,7 @@ export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: st
   sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE',
 }
 export function clDebounce (callback: any, ms?: number, key?: string): void
+export function clSanitizeId (id: string): string
 
 export function clRandomString (length?: number, words?: string[]): string
 export function clRandomList (length?: number, words?: string[]): string[]