lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/interactiveDialogBase/interactive-dialog-base.slds.css

@@ -1,5 +1,4 @@
 
-
 .slds-modal_prompt {
   --slds-c-modalheader-sizing-border: 0;
   --slds-c-modalfooter-sizing-border: 0;
@@ -19,23 +18,15 @@
 }
 
 [part='button'].slds-button_brand {
-  --slds-c-button-neutral-color-background:
-    var(--slds-g-color-accent-container-1);
-  --slds-c-button-neutral-color-background-hover: 
-    var(--slds-g-color-accent-container-2);
-  --slds-c-button-neutral-color-background-focus: 
-    var(--slds-g-color-accent-container-2);
-  --slds-c-button-neutral-color-background-active:
-    var(--slds-g-color-accent-container-2);
+  --slds-c-button-neutral-color-background: var(--slds-g-color-accent-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-accent-container-2);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-accent-container-2);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-accent-container-2);
 
-  --slds-c-button-neutral-color-border:
-    var(--slds-g-color-border-accent-1);
-  --slds-c-button-neutral-color-border-hover:
-    var(--slds-g-color-border-accent-2);
-  --slds-c-button-neutral-color-border-focus: 
-    var(--slds-g-color-border-accent-2);
-  --slds-c-button-neutral-color-border-active: 
-    var(--slds-g-color-border-accent-2);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-accent-1);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-accent-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-accent-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-accent-2);
 
   /* Important is required due to css  
    * specificity.
@@ -43,5 +34,5 @@
    * [data-render-mode]
    * 
   */
-  --sds-c-button-text-color:  var(--slds-g-color-on-accent-1) !important; 
+  --sds-c-button-text-color: var(--slds-g-color-on-accent-1) !important;
 }

package/src/lightning/interactiveDialogBase/interactiveDialogBase.lbc.native.css

@@ -5,4 +5,4 @@
 @import './modal-body.slds.css';
 @import './modal-footer.slds.css';
 @import './interactive-dialog-base.slds.css';
-@import 'lightning/sldsUtilsThemes';
+@import 'lightning/sldsUtilsThemes';

package/src/lightning/interactiveDialogBase/modal-base.slds.css

@@ -1,196 +1,200 @@
 
-
-  /**
+/**
    * Remap to SLDS blueprint hooks for parity
    * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
    *
    * "Shared" Styling Hooks for modal base/header/body/footer
    */
 
-  :host([data-render-mode="shadow"]) [part='modal-backdrop'] {
-    --slds-c-backdrop-color-background: var(--slds-c-modalbase-backdrop-color-background);
-  }
-
-  :host([data-render-mode="shadow"]) [part='modal'] {
-    /* Map modal component hooks to single "shared" hooks from blueprint */
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-
-    /* '--slds-c-modal-shadow' is used in body/footer */
-    --slds-c-modalbody-shadow: var(--slds-c-modal-shadow);
-    --slds-c-modalfooter-shadow: var(--slds-c-modal-shadow);
-
-    /* '--slds-c-modal-color-border' is used in header/footer */
-    --slds-c-modalheader-color-border: var(--slds-c-modal-color-border);
-    --slds-c-modalfooter-color-border: var(--slds-c-modal-color-border);
-
-
-    /* '--slds-c-modal-radius-border' is used in header/body/footer */
-    --slds-c-modalheader-radius-border: var(--slds-c-modal-radius-border);
-    --slds-c-modalbody-radius-border: var(--slds-c-modal-radius-border);
-    --slds-c-modalfooter-radius-border: var(--slds-c-modal-radius-border);
-
-    /* '--slds-c-modal-sizing-border' is used in header/footer */
-    --slds-c-modalheader-sizing-border: var(--slds-c-modal-sizing-border);
-    --slds-c-modalfooter-sizing-border: var(--slds-c-modal-sizing-border);
-
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-
-  }
-
-  :host([data-render-mode="shadow"]) .slds-backdrop {
-    transition-duration: 0.4s;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    visibility: hidden;
-    position: fixed;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    background: var(--slds-c-modalbase-backdrop-color-background, var(--slds-g-color-neutral-10-opacity-50, rgba(8, 7, 7, 60%)));
-    z-index: 9000;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-backdrop_open {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.4s linear;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-modal {
-    opacity: 0;
-    visibility: hidden;
-    transition: transform 0.1s linear, opacity 0.1s;
-    position: fixed;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    z-index: 9001
-  }
-
+:host([data-render-mode="shadow"]) [part='modal-backdrop'] {
+  --slds-c-backdrop-color-background: var(--slds-c-modalbase-backdrop-color-background);
+}
+
+:host([data-render-mode="shadow"]) [part='modal'] {
+  /* Map modal component hooks to single "shared" hooks from blueprint */
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+  /* '--slds-c-modal-shadow' is used in body/footer */
+  --slds-c-modalbody-shadow: var(--slds-c-modal-shadow);
+  --slds-c-modalfooter-shadow: var(--slds-c-modal-shadow);
+
+  /* '--slds-c-modal-color-border' is used in header/footer */
+  --slds-c-modalheader-color-border: var(--slds-c-modal-color-border);
+  --slds-c-modalfooter-color-border: var(--slds-c-modal-color-border);
+
+  /* '--slds-c-modal-radius-border' is used in header/body/footer */
+  --slds-c-modalheader-radius-border: var(--slds-c-modal-radius-border);
+  --slds-c-modalbody-radius-border: var(--slds-c-modal-radius-border);
+  --slds-c-modalfooter-radius-border: var(--slds-c-modal-radius-border);
+
+  /* '--slds-c-modal-sizing-border' is used in header/footer */
+  --slds-c-modalheader-sizing-border: var(--slds-c-modal-sizing-border);
+  --slds-c-modalfooter-sizing-border: var(--slds-c-modal-sizing-border);
+
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
+
+:host([data-render-mode="shadow"]) .slds-backdrop {
+  transition-duration: 0.4s;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  background: var(
+    --slds-c-modalbase-backdrop-color-background,
+    var(--slds-g-color-neutral-10-opacity-50, rgba(8, 7, 7, 60%))
+  );
+  z-index: 9000;
+}
+
+:host([data-render-mode="shadow"]) .slds-backdrop_open {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.4s linear;
+}
+
+:host([data-render-mode="shadow"]) .slds-modal {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    transform 0.1s linear,
+    opacity 0.1s;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  z-index: 9001;
+}
+
+:host([data-render-mode="shadow"]) .slds-modal__container {
+  position: relative;
+  transform: translate(0, 0);
+  transition:
+    transform 0.1s linear,
+    opacity 0.1s linear;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 var(--slds-g-spacing-6);
+  height: 100%;
+  padding: var(--slds-g-spacing-8) 0 var(--slds-g-spacing-12) 0;
+  border-radius: var(--slds-g-spacing-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-modal__close {
+  width: 2rem;
+  height: 2rem;
+  margin-inline-start: auto;
+  position: relative;
+  background-color: var(--slds-g-color-neutral-base-100);
+  border-radius: 0.25rem;
+  bottom: 0.5rem;
+  flex-shrink: 0;
+  justify-content: center;
+  display: inline-flex;
+}
+
+:host([data-render-mode="shadow"]) .slds-fade-in-open {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.1s linear;
+}
+
+:host([data-render-mode="shadow"]) .slds-fade-in-open .slds-modal__container-reset {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(0, 0);
+}
+
+/* Sizes: Small, Medium, Large */
+
+@media (width >= 48em) {
   :host([data-render-mode="shadow"]) .slds-modal__container {
-    position: relative;
-    transform: translate(0, 0);
-    transition: transform 0.1s linear, opacity 0.1s linear;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: 0 var(--slds-g-spacing-6);
-    height: 100%;
-    padding: var(--slds-g-spacing-8) 0 var(--slds-g-spacing-12) 0;
-    border-radius: var(--slds-g-spacing-1);
+    margin: 0 auto;
+    width: 50%;
+    max-width: 40rem;
+    min-width: 20rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-modal__close {
-    width: 2rem;
-    height: 2rem;
-    margin-inline-start: auto;
-    position: relative;
-    background-color: var(--slds-g-color-neutral-base-100);
-    border-radius: 0.25rem;
-    bottom: 0.5rem;
-    flex-shrink: 0;
-    justify-content: center;
-    display: inline-flex;
+  :host([data-render-mode="shadow"]) .slds-modal_small .slds-modal__container {
+    width: 60%;
+    max-width: 52.0625rem;
+    min-width: 40rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-fade-in-open {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.1s linear;
+  :host([data-render-mode="shadow"]) .slds-modal_medium .slds-modal__container {
+    width: 70%;
+    max-width: 75rem;
+    min-width: 40rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-fade-in-open .slds-modal__container-reset {
-    opacity: 1;
-    visibility: visible;
-    transform: translate(0, 0);
+  :host([data-render-mode="shadow"]) .slds-modal_large .slds-modal__container {
+    width: 90%;
+    max-width: none;
+    min-width: 40rem;
   }
+}
 
-  /* Sizes: Small, Medium, Large */
-
-  @media (width >= 48em) {
-    :host([data-render-mode="shadow"]) .slds-modal__container {
-      margin: 0 auto;
-      width: 50%;
-      max-width: 40rem;
-      min-width: 20rem;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_small .slds-modal__container {
-      width: 60%;
-      max-width: 52.0625rem;
-      min-width: 40rem;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_medium .slds-modal__container {
-      width: 70%;
-      max-width: 75rem;
-      min-width: 40rem;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_large .slds-modal__container {
-      width: 90%;
-      max-width: none;
-      min-width: 40rem;
-    }
-  }
+/* Sizes: Full */
 
-  /* Sizes: Full */
+/* .slds-modal_full {} */
 
-  /* .slds-modal_full {} */
+/* Behaves like large size when not in a small viewport */
 
-  /* Behaves like large size when not in a small viewport */
-
-  @media (width >= 48em) {
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
-      width: 90%;
-      max-width: none;
-      min-width: 40rem;
-    }
+@media (width >= 48em) {
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+    width: 90%;
+    max-width: none;
+    min-width: 40rem;
   }
+}
 
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
-
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"]) .slds-modal_full {
-      /* Account for iOS safe areas so our modal doesn't load underneath iOS elements. */
-      inset-block-start: env(safe-area-inset-top, 0);
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
 
-      /* Override slds-modal's bottom: 0 so we can make the height dynamic. */
-      inset-block-end: auto;
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"]) .slds-modal_full {
+    /* Account for iOS safe areas so our modal doesn't load underneath iOS elements. */
+    inset-block-start: env(safe-area-inset-top, 0);
 
-      /* Viewport may be dynamic, e.g., iOS Safari toolbar hiding behavior, so we use dvh. Safe areas may not be required here. */
-      /* stylelint-disable-next-line unit-no-unknown */
-      height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
-    }
+    /* Override slds-modal's bottom: 0 so we can make the height dynamic. */
+    inset-block-end: auto;
 
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
-      width: 100%;
-      max-width: none;
-      min-width: 0;
-      margin: 0;
-      padding: var(--slds-g-spacing-4) 0 0 0;
-      background-color: var(--slds-c-modalbase-color-background, var(--slds-g-color-surface-1));
-      border-radius: 0;
+    /* Viewport may be dynamic, e.g., iOS Safari toolbar hiding behavior, so we use dvh. Safe areas may not be required here. */
+    /* stylelint-disable-next-line unit-no-unknown */
+    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+  }
 
-      /* Establishes the main layout of the modal. Grid is defined by grid-template-areas
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    margin: 0;
+    padding: var(--slds-g-spacing-4) 0 0 0;
+    background-color: var(--slds-c-modalbase-color-background, var(--slds-g-color-surface-1));
+    border-radius: 0;
+
+    /* Establishes the main layout of the modal. Grid is defined by grid-template-areas
         which explicitly defines the grid and allows optional elements to be omitted like
         the header or footer. */
-      display: grid;
-      /* stylelint-disable-next-line unit-no-unknown */
-      height: 100dvh;
-      grid-template-columns: 1fr;
-      grid-template-rows: min-content min-content 1fr min-content;
-      grid-template-areas: "close" "header" "content" "footer";
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close {
-      grid-area: close;
-      inset-inline-end: var(--slds-g-spacing-4);
-
-      /**
+    display: grid;
+    /* stylelint-disable-next-line unit-no-unknown */
+    height: 100dvh;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content min-content 1fr min-content;
+    grid-template-areas: 'close' 'header' 'content' 'footer';
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close {
+    grid-area: close;
+    inset-inline-end: var(--slds-g-spacing-4);
+
+    /**
        * A few things going on here:
        * - We want to avoid a markup change for a single modifier so we reassign/override.
        * - Button icon doesn't have component level hooks (yet), so we don't include them here
@@ -199,18 +203,18 @@
        *   so the values of empty hooks default to initial values. In the case
        *   of background colors, the background will disappear (initial = transparent).
        */
-      --slds-c-button-color-background: var(--slds-g-color-surface-container-1, white);
-      --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1, white);
+    --slds-c-button-color-background: var(--slds-g-color-surface-container-1, white);
+    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1, white);
 
-      color: var(--slds-g-color-on-surface-1);
-    }
+    color: var(--slds-g-color-on-surface-1);
+  }
 
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close:hover,:host([data-render-mode="shadow"]) 
-    .slds-modal_full .slds-modal__close:focus {
-      color: var(--slds-g-color-accent-3);
-    }
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close:hover,:host([data-render-mode="shadow"]) 
+  .slds-modal_full .slds-modal__close:focus {
+    color: var(--slds-g-color-accent-3);
+  }
 
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -222,23 +226,23 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"]) .slds-modal_full lightning-button-icon+div,:host([data-render-mode="shadow"]) 
-    .slds-modal_full lightning-modal {
-      display: contents;
-    }
-  }
-
-  /* TODO W-12674349: remove after assistive text util is added */
-
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
+  :host([data-render-mode="shadow"]) .slds-modal_full lightning-button-icon + div,:host([data-render-mode="shadow"]) 
+  .slds-modal_full lightning-modal {
+    display: contents;
   }
+}
+
+/* TODO W-12674349: remove after assistive text util is added */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}

package/src/lightning/interactiveDialogBase/modal-body.slds.css

@@ -1,46 +1,45 @@
 
+:host([data-render-mode="shadow"]) .slds-modal__content_headless {
+  border-start-end-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  border-start-start-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__content_headless {
-    border-start-end-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-    border-start-start-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-  }
-
-  :host([data-render-mode="shadow"]) .slds-modal__content {
-    /**
+:host([data-render-mode="shadow"]) .slds-modal__content {
+  /**
      * Remap to SLDS blueprint hooks for parity
      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
      */
-    --slds-c-modal-content-color-background: var(--slds-c-modalbody-color-background);
-    --slds-c-modal-content-text-color: var(--slds-c-modalbody-text-color);
+  --slds-c-modal-content-color-background: var(--slds-c-modalbody-color-background);
+  --slds-c-modal-content-text-color: var(--slds-c-modalbody-text-color);
 
-    background-color: var(--slds-c-modalbody-color-background, var(--slds-g-color-surface-container-1));
-    color: var(--slds-c-modalbody-text-color);
-    overflow: hidden;
-    overflow-y: auto;
-  }
+  background-color: var(--slds-c-modalbody-color-background, var(--slds-g-color-surface-container-1));
+  color: var(--slds-c-modalbody-text-color);
+  overflow: hidden;
+  overflow-y: auto;
+}
 
-  :host([data-render-mode="shadow"]) .slds-modal__content_footless {
-    border-bottom-right-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-    border-bottom-left-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
-    box-shadow: var(--slds-c-modalbody-shadow, var(--slds-g-shadow-2));
-  }
+:host([data-render-mode="shadow"]) .slds-modal__content_footless {
+  border-bottom-right-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  border-bottom-left-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  box-shadow: var(--slds-c-modalbody-shadow, var(--slds-g-shadow-2));
+}
 
-  /* Sizes: Full */
+/* Sizes: Full */
 
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
 
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"][data-size='full']) [part='modal-body'] {
-      grid-area: content;
-    }
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"][data-size='full']) [part='modal-body'] {
+    grid-area: content;
+  }
 
-    :host([data-render-mode="shadow"][data-size='full'][data-variant-footless]) [part='modal-body'] {
-      border-end-end-radius: 0;
-      border-end-start-radius: 0;
-      box-shadow: none;
-    }
+  :host([data-render-mode="shadow"][data-size='full'][data-variant-footless]) [part='modal-body'] {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    box-shadow: none;
+  }
 
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -52,7 +51,7 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"][data-size='full']) {
-      display: contents;
-    }
+  :host([data-render-mode="shadow"][data-size='full']) {
+    display: contents;
   }
+}