@kaizen/components 1.47.5 → 1.48.0

package/src/Input/Input/Input.module.scss

@@ -237,7 +237,6 @@ $input-with-icon-padding: calc(
     }
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 ///////////////////////////////////////////////////
 // THEMES
@@ -357,3 +356,4 @@ $input-with-icon-padding: calc(
     }
   }
 }
+/* stylelint-enable no-descending-specificity */

package/src/Label/Label.module.scss

@@ -12,14 +12,7 @@ $label-start-margin: $spacing-xs;
   color: $dt-color-form-text-color;
   visibility: visible;
   width: 100%;
-  text-align: left; // fallback for IE and Edge
   text-align: start;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    text-align: right; // fallback for IE and Edge
-    text-align: start;
-  }
 }
 
 .reversed {
@@ -87,25 +80,11 @@ $label-start-margin: $spacing-xs;
   // apply padding when label is inline with form control
   .prependedLabel {
     order: -1; // place label before the control
-    margin-right: $label-start-margin;
-    margin-left: 0;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: 0;
-      margin-left: $label-start-margin;
-    }
+    margin-inline-end: $label-start-margin;
   }
 
   .appendedLabel {
-    margin-right: 0;
-    margin-left: $label-start-margin;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: $label-start-margin;
-      margin-left: 0;
-    }
+    margin-inline-start: $label-start-margin;
   }
 }
 

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.module.scss

@@ -18,7 +18,7 @@
   flex-direction: column;
 
   @media (min-width: $layout-breakpoints-medium) {
-    padding: 0 $spacing-lg $spacing-lg $spacing-lg;
+    padding: 0 $spacing-lg $spacing-lg;
     flex-direction: row-reverse;
   }
 }

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -46,6 +46,7 @@
   border-top-right-radius: 0;
 }
 
+/* stylelint-disable no-descending-specificity */
 .editorWrapper {
   position: relative;
   border: $border-solid-border-width $border-solid-border-style $color-gray-500;
@@ -62,7 +63,6 @@
     }
   }
 
-  /* stylelint-disable no-descending-specificity */
   &.error {
     &,
     .toolbar {

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.module.scss

@@ -30,36 +30,20 @@
     border-color: $color-blue-500;
     inset: calc(-1 * #{$focus-ring-offset});
   }
-
-  &.disabled {
-    opacity: 30%;
-
-    &:focus-visible::after {
-      color: rgba($color-purple-800-rgb, 0.3);
-      outline-offset: -2px;
-      background-color: transparent;
-      border-color: transparent;
-      opacity: 100%;
-      outline: $color-purple-800 $border-dashed-border-style
-        $border-focus-ring-border-width;
-    }
-  }
 }
 
 .default {
   background-color: $color-white;
   color: $color-purple-800;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-gray-200;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-gray-200;
+  }
 
-    &.active {
-      background-color: $color-gray-300;
-      color: $color-purple-800;
-    }
+  &.active {
+    background-color: $color-gray-300;
+    color: $color-purple-800;
   }
 }
 
@@ -67,15 +51,13 @@
   background-color: $color-white;
   color: $color-blue-500;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-blue-100;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-blue-100;
+  }
 
-    &.active {
-      background-color: $color-blue-200;
-    }
+  &.active {
+    background-color: $color-blue-200;
   }
 }
 
@@ -83,15 +65,13 @@
   background-color: $color-blue-500;
   color: $color-white;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-blue-600;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-blue-600;
+  }
 
-    &.active {
-      background-color: $color-blue-700;
-    }
+  &.active {
+    background-color: $color-blue-700;
   }
 }
 
@@ -99,15 +79,13 @@
   background-color: $color-red-500;
   color: $color-white;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-red-600;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-red-600;
+  }
 
-    &.active {
-      background-color: $color-red-700;
-    }
+  &.active {
+    background-color: $color-red-700;
   }
 }
 
@@ -115,14 +93,27 @@
   background-color: $color-white;
   color: $color-red-600;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-red-100;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-red-100;
+  }
+
+  &.active {
+    background-color: $color-red-200;
+  }
+}
+
+.disabled {
+  opacity: 30%;
+  pointer-events: none;
 
-    &.active {
-      background-color: $color-red-200;
-    }
+  &:focus-visible::after {
+    color: rgba($color-purple-800-rgb, 0.3);
+    outline-offset: -2px;
+    background-color: transparent;
+    border-color: transparent;
+    opacity: 100%;
+    outline: $color-purple-800 $border-dashed-border-style
+      $border-focus-ring-border-width;
   }
 }

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx

@@ -52,6 +52,13 @@ const ToggleIconButtonGroup = ({
       {...props}
       disabled
     />
+    <ToggleIconButton
+      label="bold"
+      icon={<BoldIcon role="presentation" />}
+      {...props}
+      disabled
+      data-sb-pseudo-styles="focus"
+    />
   </StickerSheet.Row>
 )
 
@@ -59,7 +66,14 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
       <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
+        headings={[
+          "Default",
+          "Hover",
+          "Active",
+          "Focus",
+          "Disabled",
+          "Disabled (Focus)",
+        ]}
         hasVerticalHeadings
       />
       <StickerSheet.Body>

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss

@@ -32,7 +32,8 @@
 }
 
 .literal {
-  &,
+  background: none;
+
   &:hover {
     background: none;
   }

package/src/TitleBlockZen/subcomponents/NavigationTabs.module.scss

@@ -104,7 +104,7 @@
         $border-focus-ring-border-radius;
       border-width: $border-focus-ring-border-width;
       border-style: $border-focus-ring-border-style;
-      inset: 0 $focus-ring-offset $active-tab-marker-height $focus-ring-offset;
+      inset: 0 $focus-ring-offset $active-tab-marker-height;
 
       @include title-block-medium-and-small {
         border-radius: $border-focus-ring-border-radius

package/dist/cjs/__build-tools/styleInject.cjs

@@ -1,29 +0,0 @@
-'use strict';
-
-// Auto-generated by package-bundler
-// Forked from https://github.com/egoist/style-inject
-function styleInject(css, {
-  insertAt
-} = {}) {
-  if (!css || typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  // @ts-ignore
-  if (style.styleSheet) {
-    // @ts-ignore
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-exports.styleInject = styleInject;

package/dist/esm/__build-tools/styleInject.mjs

@@ -1,27 +0,0 @@
-// Auto-generated by package-bundler
-// Forked from https://github.com/egoist/style-inject
-function styleInject(css, {
-  insertAt
-} = {}) {
-  if (!css || typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  // @ts-ignore
-  if (style.styleSheet) {
-    // @ts-ignore
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-export { styleInject };