@dialpad/dialtone 6.10.0 → 6.14.0

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+# [6.14.0](https://github.com/dialpad/dialtone/compare/v6.13.0...v6.14.0) (2022-01-28)
+
+
+### Bug Fixes
+
+* uc-11528 updating background replacement icon in dialtone ([#536](https://github.com/dialpad/dialtone/issues/536)) ([eab4a92](https://github.com/dialpad/dialtone/commit/eab4a9291856e8d260e7e0dcdc5d0846db362ca8))
+
+
+### Features
+
+* add about page ([#537](https://github.com/dialpad/dialtone/issues/537)) ([0d45b71](https://github.com/dialpad/dialtone/commit/0d45b715837dc00a2caaca099c5e02a0d2ed0f0f))
+
+# [6.13.0](https://github.com/dialpad/dialtone/compare/v6.12.0...v6.13.0) (2022-01-21)
+
+
+### Bug Fixes
+
+* **button:** loading spinner off center ([#532](https://github.com/dialpad/dialtone/issues/532)) ([9595374](https://github.com/dialpad/dialtone/commit/9595374fadea5c006f0146b9691ea4e06d85a4ea))
+
+
+### Features
+
+* add toggle styles ([#533](https://github.com/dialpad/dialtone/issues/533)) ([4aeeece](https://github.com/dialpad/dialtone/commit/4aeeecea4748d56003d1242980af1b438620fdcb))
+
+# [6.12.0](https://github.com/dialpad/dialtone/compare/v6.11.0...v6.12.0) (2022-01-13)
+
+
+### Features
+
+* add documentation for new skeleton component ([#521](https://github.com/dialpad/dialtone/issues/521)) ([574f976](https://github.com/dialpad/dialtone/commit/574f97679619e730050d5a75cadb4fbb020e5af8))
+* implement focus visible ([#524](https://github.com/dialpad/dialtone/issues/524)) ([20938ee](https://github.com/dialpad/dialtone/commit/20938ee94efed2a8ea8c7632a631e2f41ff9a1da))
+* implement focus visible polyfill ([#528](https://github.com/dialpad/dialtone/issues/528)) ([0c3a661](https://github.com/dialpad/dialtone/commit/0c3a661eb2748e03a2a2bfcf75642e7b241bd8bf))
+
+# [6.11.0](https://github.com/dialpad/dialtone/compare/v6.10.0...v6.11.0) (2022-01-04)
+
+
+### Bug Fixes
+
+* generate missing hover/focus classes ([#522](https://github.com/dialpad/dialtone/issues/522)) ([0cc761b](https://github.com/dialpad/dialtone/commit/0cc761b5b6ee86746dfbd54e48400652b819348c))
+* responsive variations not working ([#526](https://github.com/dialpad/dialtone/issues/526)) ([c29d53d](https://github.com/dialpad/dialtone/commit/c29d53dc1c3c89a839d3c9724380f5b2e27e0cc2))
+* svg sizes showing up as NaN in svg utility class page ([#525](https://github.com/dialpad/dialtone/issues/525)) ([67c2b26](https://github.com/dialpad/dialtone/commit/67c2b26704e0bfe1209f578cfcec222645cfc549))
+
+
+### Features
+
+* add file upload spot illustration ([#527](https://github.com/dialpad/dialtone/issues/527)) ([e1533e8](https://github.com/dialpad/dialtone/commit/e1533e856f570688aa5ffc3dd37ae05c3a842987))
+
 # [6.10.0](https://github.com/dialpad/dialtone/compare/v6.9.0...v6.10.0) (2021-12-15)
 
 

package/lib/build/less/components/button.less

@@ -58,9 +58,9 @@
         --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
     }
 
-    &:focus {
-        outline: none;
-        box-shadow: var(--bs-focus-ring);
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--bs-focus-ring);
     }
 
     &[disabled] {
@@ -192,7 +192,7 @@
         --button--bgc: var(--black-100);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-circle);
     }
 
@@ -267,7 +267,7 @@
       --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 7.5%);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-muted);
     }
 
@@ -286,7 +286,7 @@
         --button--fc: var(--error-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-error);
     }
 
@@ -317,7 +317,7 @@
         --button--bgc: hsla(var(--white-hsl) ~' / ' 15%);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-inverted);
     }
 
@@ -363,13 +363,12 @@
     background-color: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
 
     &:hover,
-    &:focus,
     &:active {
         color: hsla(var(--white-hsl) ~' / ' 90%);
         background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~' / ' 90%);
     }
 
@@ -432,8 +431,6 @@
     //  Show the loading animation
     &::before {
         position: absolute;
-        top: calc(50% - var(--su8));
-        left: calc(50% - var(--su8));
         width: var(--su16);
         height: var(--su16);
         border: var(--su2) solid currentColor;

package/lib/build/less/components/link.less

@@ -40,8 +40,8 @@
         cursor: pointer;
     }
 
-    &:focus {
-        border-radius: 4px;
+    &:focus-visible {
+        border-radius: var(--br4);
         outline: none;
         box-shadow: 0 0 0 var(--su2) var(--focus-ring);
     }
@@ -60,7 +60,7 @@
         color: var(--fc-warning-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-warning);
     }
 }
@@ -74,7 +74,7 @@
         color: var(--error-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-error);
     }
 }
@@ -88,7 +88,7 @@
         color: var(--success-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-success);
     }
 }
@@ -102,7 +102,7 @@
         color: var(--muted-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-muted);
     }
 }
@@ -135,7 +135,7 @@
         color: var(--inverted-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-inverted);
     }
 }

package/lib/build/less/components/radio-checkbox.less

@@ -52,12 +52,12 @@
             display: none;
         }
 
-        &:focus,
-        &:checked:focus {
-            --check-radio--bc: var(--check-radio--color);
+        &:focus-visible,
+        &:checked:focus-visible {
+          --check-radio--bc: var(--check-radio--color);
 
-            outline: 0;
-            box-shadow: var(--bs-focus-ring);
+          outline: 0;
+          box-shadow: var(--bs-focus-ring);
         }
 
         &:checked {
@@ -149,8 +149,8 @@
         background-size: contain;
         border-radius: var(--br2);
 
-        &:focus,
-        &:checked:focus {
+        &:focus-visible,
+        &:checked:focus-visible {
             border-radius: var(--br2);
         }
 
@@ -209,8 +209,8 @@
     --check-radio--color: var(--warning-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
+    &:focus-visible,
+    &:checked:focus-visible {
         box-shadow: var(--bs-focus-ring-warning);
     }
 }
@@ -219,8 +219,8 @@
     --check-radio--color: var(--error-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
+    &:focus-visible,
+    &:checked:focus-visible {
         box-shadow: var(--bs-focus-ring-error);
     }
 }
@@ -229,8 +229,8 @@
     --check-radio--color: var(--success-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
+    &:focus-visible,
+    &:checked:focus-visible {
         box-shadow: var(--bs-focus-ring-success);
     }
 }
@@ -251,9 +251,9 @@
             --check-radio--bgc: var(--black-075);
         }
 
-        &:focus,
-        &:checked:focus {
-            box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
+        &:focus-visible,
+        &:checked:focus-visible {
+          box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
         }
 
         &:checked {
@@ -279,9 +279,9 @@
     --check-radio--color: var(--warning-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
-        box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
+    &:focus-visible,
+    &:checked:focus-visible {
+      box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
     }
 }
 
@@ -289,9 +289,9 @@
     --check-radio--color: var(--error-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
-        box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
+    &:focus-visible,
+    &:checked:focus-visible {
+      box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
     }
 }
 
@@ -299,8 +299,8 @@
     --check-radio--color: var(--success-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
-        box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
+    &:focus-visible,
+    &:checked:focus-visible {
+      box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
     }
 }

package/lib/build/less/components/selects.less

@@ -106,8 +106,8 @@
   border-color: var(--select--bc);
   //  [1] Reset the appearance
   -webkit-appearance: none;
-      -moz-appearance: none;
-          appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 
   //  [2] Update the styles
   .d-input();
@@ -148,7 +148,7 @@
   &:focus {
     --select--bc: var(--success-color);
 
-    box-shadow: var(--bs-focus-ring-success);
+    box-shadow: var(--bs-focus-ring-success) !important;
   }
 }
 
@@ -158,7 +158,7 @@
   &:focus {
     --select--bc: var(--error-color);
 
-    box-shadow: var(--bs-focus-ring-error);
+    box-shadow: var(--bs-focus-ring-error) !important;
   }
 }
 
@@ -168,7 +168,7 @@
   &:focus {
     --select--bc: var(--warning-color);
 
-    box-shadow: var(--bs-focus-ring-warning);
+    box-shadow: var(--bs-focus-ring-warning) !important;
   }
 }
 

package/lib/build/less/components/skeleton.less

@@ -0,0 +1,43 @@
+//
+//  DIALTONE
+//  COMPONENTS: SKELETON
+//
+//  These are the styles for skeleton component.
+//  The --placeholder-from-color and --placeholder-to-color custom properties can be set on the parent class of the
+//  placeholder to control the animation colors.
+//  For further documentation of these styles, please visit https://dialpad.design/components/skeleton
+
+//  ============================================================================
+//  @   SKELETON CONTAINER
+//  ----------------------------------------------------------------------------
+.skeleton-placeholder {
+  display: flex;
+  width: 100%;
+  background: var(--placeholder-from-color, @black-075);
+  animation-duration: 1000ms;
+  fill: var(--placeholder-from-color, @black-075);
+  stroke: none;
+
+  &--animate {
+    animation-name: placeholder-throb;
+    animation-iteration-count: infinite;
+  }
+}
+
+// the animation is used by the skeleton component
+@keyframes placeholder-throb {
+  10% {
+    background: var(--placeholder-from-color, @black-075);
+    fill: var(--placeholder-from-color, @black-075);
+  }
+
+  50% {
+    background: var(--placeholder-to-color, @black-050);
+    fill: var(--placeholder-to-color, @black-050);
+  }
+
+  90% {
+    background: var(--placeholder-from-color, @black-075);
+    fill: var(--placeholder-from-color, @black-075);
+  }
+}

package/lib/build/less/components/tabs.less

@@ -82,7 +82,7 @@
         content: '';
     }
 
-    &:focus {
+    &:focus-visible {
         outline: none;
         box-shadow: 0 0 0 var(--su2) var(--tab--oc);
     }

package/lib/build/less/components/toast.less

@@ -172,7 +172,7 @@
 
 .d-toast--organizer,
 .d-toast--viewing {
-  border-top: 4px solid var(--pink-500);
+  border-top: var(--su4) solid var(--pink-500);
 
   .d-notice__icon {
     color: var(--pink-500);

package/lib/build/less/components/toggle.less

@@ -0,0 +1,96 @@
+//@import (reference) '../variables/icons.less';
+
+//
+//  DIALTONE
+//  COMPONENTS: TOGGLE
+//
+//  These are toggle classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/toggle
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • CHECKED STYLES
+//  • DISABLED STYLES
+//
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-toggle {
+  //  Component specific CSS Vars
+  //  ------------------------------------------------------------------------
+  --toggle--ta: var(--ttf-in-out);
+  --toggle-ts: var(--td200);
+  --toggle-bc: var(--black-200);
+
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--su48);
+  height: var(--su24);
+  padding: 0;
+  line-height: var(--lh4);
+  vertical-align: middle;
+  background-color: var(--toggle-bc);
+  border: var(--su1) solid var(--toggle-bc);
+  border-radius: var(--su48);
+  cursor: pointer;
+
+  &__inner {
+    position: absolute;
+    top: calc(var(--su4) - var(--su1));
+    left: var(--su24);
+    width: var(--su16);
+    height: var(--su16);
+    color: var(--white);
+    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3e%3cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill='%23fff' /%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+  }
+
+  &::after {
+    position: absolute;
+    top: var(--su1);
+    left: var(--su1);
+    width: calc(var(--su16) + var(--su4));
+    height: calc(var(--su16) + var(--su4));
+    background-color: var(--white);
+    border-radius: var(--br-circle);
+    cursor: pointer;
+    transition: left var(--toggle-ts) var(--toggle--ta);
+    content: ' ';
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--bs-focus-ring);
+  }
+}
+
+//  $$  CHECKED TOGGLE
+//  ----------------------------------------------------------------------------
+.d-toggle--checked {
+  --toggle-bc: var(--primary-color);
+
+  .d-toggle__inner {
+    left: var(--su6);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
+  }
+
+  &::after {
+    left: calc(var(--su24) + var(--su1));
+  }
+}
+
+//  $$  DISABLED TOGGLE
+//  ----------------------------------------------------------------------------
+.d-toggle--disabled,
+ .d-toggle[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+
+  &::after {
+    cursor: not-allowed;
+    transition-property: none;
+  }
+}

package/lib/build/less/components/tooltip.less

@@ -100,8 +100,8 @@
         &:extend(.d-tooltip--hide);
     }
 
-    &:focus-visible,
-    &:hover {
+    &:hover,
+    &:focus-visible {
         .d-tooltip {
             &:extend(.d-tooltip--show);
         }

package/lib/build/less/dialtone-globals.less

@@ -21,6 +21,7 @@
 html,
 body {
     margin: var(--su0);
+    /* stylelint-disable-next-line meowtec/no-px */
     font-size: 10px; // [1]
 }
 
@@ -56,3 +57,13 @@ body {
 .d-svg-primary--fill {
     fill: var(--primary-color);
 }
+
+//  ============================================================================
+//  @   FOCUS VISIBLE
+//  ----------------------------------------------------------------------------
+// This will hide the focus indicator if the element receives focus via the mouse,
+// but it will still show up on keyboard focus.
+//
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}

package/lib/build/less/dialtone.less

@@ -25,9 +25,11 @@
 @import 'components/notice';
 @import 'components/radio-checkbox';
 @import 'components/selects';
+@import 'components/skeleton';
 @import 'components/table';
 @import 'components/tabs';
 @import 'components/tooltip';
+@import 'components/toggle';
 
 //  --  CONFIG
 @import 'utilities/internals';

package/lib/build/less/utilities/backgrounds.less

@@ -117,7 +117,9 @@
 .d-bgg-radial { background-image: radial-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
 .d-bgg-conic { background-image: conic-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
 .d-bgg-none { background-image: none !important; }
+#d-internals #generate-hover-focus(d-bgg-none, {.d-bgg-none();});
 .d-bgg-unset { background-image: unset !important; }
+#d-internals #generate-hover-focus(d-bgg-unset, {.d-bgg-unset();});
 
 
 //  ============================================================================

package/lib/build/less/utilities/colors.less

@@ -38,70 +38,85 @@
 #d-internals #color-classes(green-700);
 #d-internals #color-classes(red-700);
 
-//  --  We can't use the mixin for this one class :(
-.d-fc-primary,
-.h\:d-fc-primary:hover,
-.f\:d-fc-primary:focus {
+.d-fc-primary {
     color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  ~' / ' var(--fco)) !important;
 }
-
-.f\:d-fc-primary:focus-within {
-    color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
-}
+#d-internals #generate-hover-focus(d-fc-primary, {.d-fc-primary();});
 
 //  $$  TEXT COLORS
 //  ----------------------------------------------------------------------------
 .d-fc-dark { &:extend(.d-fc-black-900); }
-.h\:d-fc-dark:hover { &:extend(.h\:d-fc-black-900:hover); }
-.f\:d-fc-dark:focus { &:extend(.f\:d-fc-black-900:focus); }
-.f\:d-fc-dark:focus-within { &:extend(.f\:d-fc-black-900:focus-within); }
+#d-internals #generate-hover-focus(d-fc-dark, {.d-fc-dark();});
 
 .d-fc-medium { &:extend(.d-fc-black-800); }
-.h\:d-fc-medium:hover { &:extend(.h\:d-fc-black-800:hover); }
-.f\:d-fc-medium:focus { &:extend(.f\:d-fc-black-800:focus); }
-.f\:d-fc-medium:focus-within { &:extend(.f\:d-fc-black-800:focus-within); }
+#d-internals #generate-hover-focus(d-fc-medium, {.d-fc-medium();});
 
 .d-fc-light { &:extend(.d-fc-black-700); }
-.h\:d-fc-light:hover { &:extend(.h\:d-fc-black-700:hover); }
-.f\:d-fc-light:focus { &:extend(.f\:d-fc-black-700:focus); }
-.f\:d-fc-light:focus-within { &:extend(.f\:d-fc-black-700:focus-within); }
+#d-internals #generate-hover-focus(d-fc-light, {.d-fc-light();});
 
 .d-fc-lighter { &:extend(.d-fc-black-600); }
+#d-internals #generate-hover-focus(d-fc-lighter, {.d-fc-lighter();});
+
 .d-fc-purple { &:extend(.d-fc-purple-500); }
+#d-internals #generate-hover-focus(d-fc-purple, {.d-fc-purple();});
+
 .d-fc-orange { &:extend(.d-fc-orange-600); }
+#d-internals #generate-hover-focus(d-fc-orange, {.d-fc-orange();});
+
 .d-fc-pink { &:extend(.d-fc-pink-600); }
+#d-internals #generate-hover-focus(d-fc-pink, {.d-fc-pink();});
 
 .d-fc-green,
 .d-fc-success { &:extend(.d-fc-green-600); }
+#d-internals #generate-hover-focus(d-fc-green, {.d-fc-green();});
+#d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
 
 .d-fc-yellow,
 .d-fc-warning { &:extend(.d-fc-yellow-600); }
+#d-internals #generate-hover-focus(d-fc-yellow, {.d-fc-yellow();});
+#d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
 
 .d-fc-red,
 .d-fc-error,
 .d-fc-danger { &:extend(.d-fc-red-600); }
+#d-internals #generate-hover-focus(d-fc-red, {.d-fc-red();});
+#d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
+#d-internals #generate-hover-focus(d-fc-danger, {.d-fc-danger();});
 
 .d-fc-current { color: currentColor !important; }
+#d-internals #generate-hover-focus(d-fc-current, {.d-fc-current();});
 .d-fc-transparent { color: transparent !important; }
+#d-internals #generate-hover-focus(d-fc-transparent, {.d-fc-transparent();});
 .d-fc-unset { color: unset !important; }
+#d-internals #generate-hover-focus(d-fc-unset, {.d-fc-unset();});
 
 
 //  $$  BACKGROUND COLORS
 //  ----------------------------------------------------------------------------
 .d-bgc-success { &:extend(.d-bgc-green-500); }
+#d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
 .d-bgc-warning { &:extend(.d-bgc-yellow-500); }
+#d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
 
 .d-bgc-error,
 .d-bgc-danger { &:extend(.d-bgc-red-500); }
+#d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
+#d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
+
 .d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
+#d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
 .d-bgc-unset { background-color: unset !important; background-image: unset !important; }
+#d-internals #generate-hover-focus(d-bgc-unset, {.d-bgc-unset();});
 
 
 //  $$  BORDER COLORS
 //  ----------------------------------------------------------------------------
 .d-bc-transparent { border-color: transparent !important; }
+#d-internals #generate-hover-focus(d-bc-transparent, {.d-bc-transparent();});
 .d-bc-current { border-color: currentColor !important; }
+#d-internals #generate-hover-focus(d-bc-current , {.d-bc-current();});
 .d-bc-unset { border-color: unset !important; }
+#d-internals #generate-hover-focus(d-bc-unset, {.d-bc-unset();});
 
 
 //  $   OPACITY CLASSES

package/lib/build/less/utilities/effects.less

@@ -142,12 +142,19 @@
 //  $   BOX SHADOW
 //  ----------------------------------------------------------------------------
 .d-bs-sm { box-shadow: var(--bs-sm) !important; }
+#d-internals #generate-hover-focus(d-bs-sm, {.d-bs-sm();});
 .d-bs-md { box-shadow: var(--bs-md) !important; }
+#d-internals #generate-hover-focus(d-bs-md, {.d-bs-md ();});
 .d-bs-lg { box-shadow: var(--bs-lg) !important; }
+#d-internals #generate-hover-focus(d-bs-lg, {.d-bs-lg();});
 .d-bs-xl { box-shadow: var(--bs-xl) !important; }
+#d-internals #generate-hover-focus(d-bs-xl, {.d-bs-xl();});
 .d-bs-card { box-shadow: var(--bs-card) !important; }
+#d-internals #generate-hover-focus(d-bs-card, {.d-bs-card();});
 .d-bs-none { box-shadow: none !important; }
+#d-internals #generate-hover-focus(d-bs-none, {.d-bs-none();});
 .d-bs-unset { box-shadow: unset !important; }
+#d-internals #generate-hover-focus(d-bs-unset, {.d-bs-unset();});
 
 
 //  ============================================================================

package/lib/build/less/utilities/grid.less

@@ -308,7 +308,7 @@
     '.d-gr',
     { .template(@value) { grid-row: span @value ~' / ' span @value !important; } },
     1 2 3 4 5 6 7 8 9 10 11 12
-);;
+);
 
 .d-gr-full { grid-row: 1 ~' / ' -1 !important; }