lightning-base-components 1.18.8-ssr → 1.19.2-alpha

package/src/lightning/input/input-text.slds.css

@@ -1,398 +0,0 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-/* The Input Control Container holds the `start` and `end` slot contents, as well as the input control itself */
-
-:host([data-render-mode="shadow"]) [part~='input-container'] {
-  display: flex;
-  align-items: center;
-  position: relative;
-  min-height: var(--sds-c-inputtext-sizing-height);
-  padding-inline-end: var(--sds-c-inputtext-spacing-inline-end, var(--sds-c-inputtext-spacing-inline));
-  padding-inline-start: var(--sds-c-inputtext-spacing-inline-start, var(--sds-c-inputtext-spacing-inline));
-  background-color: var(--sds-c-inputtext-color-background, var(--sds-g-color-neutral-base-1));
-  border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
-  border-style: solid;
-  border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
-  border-radius: var(--sds-c-inputtext-radius-border);
-  box-shadow: var(--sds-c-inputtext-shadow);
-}
-
-/* The Input element (in markup) */
-
-:host([data-render-mode="shadow"]) [part~='input'] {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  font-size: var(--sds-c-inputtext-font-size);
-  color: var(--sds-c-inputtext-text-color);
-  line-height: 1;
-  border: none;
-  background: transparent;
-}
-
-/* Placeholder Text */
-
-:host([data-render-mode="shadow"]) [part~='input']::placeholder {
-  color: var(--sds-c-inputtext-text-color-placeholder);
-  font-style: var(--sds-c-inputtext-font-style-placeholder);
-}
-
-/* Focus State */
-
-:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
-  --sds-c-inputtext-color-border: var(
-    --sds-c-inputtext-color-border-focus,
-    var(--sds-g-color-palette-blue-50, #0176d3)
-  );
-  --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3));
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-focus);
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-focus);
-}
-
-:host([data-render-mode="shadow"]) [part~='input']:focus {
-  outline: none;
-}
-
-/* Invalid state */
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-invalid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-invalid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-invalid);
-}
-
-/* Valid State */
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-valid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-valid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-valid);
-}
-
-/* Readonly State */
-
-:host([data-render-mode="shadow"][readonly]) [part~='input-container'] {
-  --sds-c-inputtext-sizing-border: var(--sds-c-inputtext-sizing-border-readonly);
-  --sds-c-inputtext-spacing-inline-start: var(
-    --sds-c-inputtext-spacing-inline-start-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-  --sds-c-inputtext-spacing-inline-end: var(
-    --sds-c-inputtext-spacing-inline-end-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-}
-
-/* Disabled State */
-
-:host([data-render-mode="shadow"][disabled]) [part~='input-container'] {
-  --sds-c-inputtext-text-color: #3e3e3c; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-background: #ecebea; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-border: #c9c7c5; /* TODO: Replace with Global Styling Hook Fallback */
-}
-
-@supports (--styling-hooks: '') {
-   /**
-   * Input Text
-   */
-    :host([data-render-mode="shadow"]) [part~='input-text'] {
-        /* Host reassignments to composed slds-icon */
-        --slds-c-icon-color-foreground: var(
-            --slds-c-inputtext-icon-color-foreground,
-            var(--sds-g-color-neutral-base-50, #747474)
-        );
-        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
-        --sds-c-inputtext-sizing-height: var(
-            --slds-c-inputtext-sizing-height,
-            var(--sds-g-sizing-9, 2rem)
-        );
-        --sds-c-inputtext-color-background: var(
-            --slds-c-inputtext-color-background,
-            var(--sds-g-color-neutral-base-100, #ffffff)
-        );
-        --sds-c-inputtext-color-background-focus: var(
-            --slds-c-inputtext-color-background-focus,
-            var(--sds-g-color-neutral-base-100, #ffffff)
-        );
-        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
-        --sds-c-inputtext-font-size: var(
-            --slds-c-inputtext-font-size,
-            var(--sds-g-font-scale-neg-2, 0.8125rem)
-        );
-        --sds-c-inputtext-text-color-placeholder: var(
-            --slds-c-inputtext-text-color-placeholder,
-            var(--sds-g-color-neutral-base-50, #747474)
-        );
-        --sds-c-inputtext-color-border: var(
-            --slds-c-inputtext-color-border,
-            var(--sds-g-color-neutral-base-80, #c9c9c9)
-        );
-        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
-        --sds-c-inputtext-radius-border: var(
-            --slds-c-inputtext-radius-border,
-            var(--sds-g-radius-border-2, 0.25rem)
-        );
-
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-    }
-
-   /**
-   * Input Container
-   */
-    :host([data-render-mode="shadow"]) [part~='input-container'] {
-        flex: 1 0 100%;
-        align-items: stretch;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
-        border: none;
-        display: inline-block;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
-        min-height: calc(1.875rem + (1px * 2));
-        margin: 0;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
-    [part~='input-container'][type~='range']:active {
-        --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
-        --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
-        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-
-        outline: 0;
-        border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
-        border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
-    }
-
-   /**
-   * Input
-   */
-    :host([data-render-mode="shadow"]) [part~='input'] {
-        padding-inline-start: var(
-            --slds-c-inputtext-spacing-inline-start,
-            var(--sds-g-spacing-3, 0.75rem));
-        padding-inline-end: var(
-            --slds-c-inputtext-spacing-inline-end,
-            var(--sds-g-spacing-4, 1rem));
-        height: unset;
-        font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
-    }
-
-   /**
-   * Focus / active State
-   */
-    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
-    [part~="input-container"]:active {
-      --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
-      --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
-      --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-
-      outline: 0;
-    }
-
-   /**
-   * Read Only State
-   */
-    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
-        --sds-c-inputtext-spacing-inline-start-readonly: 0;
-        --sds-c-inputtext-color-border-focus: transparent;
-        --slds-c-inputtext-color-border: transparent;
-        --slds-c-inputtext-color-background: transparent;
-        --slds-c-inputtext-color-background-focus: transparent;
-    }
-
-    /**
-   * Invalid State
-   *
-   * Does not use --sds-c-inputtext-color-border-invalid due to this hook being
-   * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
-   * uses :host([invalid]).
-   */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
-        --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
-            var(--sds-g-color-error-base-50, #ea001e);
-        --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
-        --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /**
-   * Invalid State - Focus
-   *
-   * The following styling hooks are included in SDS and need to be reassigned
-   * here to prevent a bug with the focus state border and box-shadow
-   */
-    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
-      --sds-c-inputtext-shadow:
-        var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
-        0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
-      --sds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /**
-   * Disabled State
-   *
-   * Both parts form the visible form control.
-   */
-    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
-        cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
-        --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
-        --sds-c-inputtext-text-color: var(--sds-g-color-neutral-base-50, #747474);
-    }
-
-    /**
-   * Label
-   *
-   * Add [part~='input-text'] to increase specificity and
-   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
-   */
-    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        color: var(
-            --slds-c-inputtext-label-color,
-            var(--sds-g-color-neutral-base-30, #444444)
-        );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--sds-g-font-scale-neg-3, 0.75rem)
-        );
-        margin-block-end: var(--sds-g-sizing-1, 0.125rem);
-
-        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-        display: inline-flex;
-    }
-
-    /**
-   * Start
-   *
-   * Only expects an SLDS icon. We assign the SLDS Icon Styling Hook here
-   * so we don't add spacing to other icons composed in the component, e.g.,
-   * the icon in the inline help text.
-   */
-    :host([data-render-mode="shadow"]) [part~='start'] {
-        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-
-    /**
-   * Label Inline Variant
-   *
-   * Note: all the 33% values you see are remnants of legacy SLDS. We need to
-   * keep this implementation intact so visual output is the same when used
-   * in a form that has non-shadow components. Attempting to refactor to a
-   * modern solution like flex is proving tricky due to the presence of the
-   * optional inline-help and the input needing to have exactly 33% of spacing
-   * from the inline-start.
-   *
-   * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
-   */
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
-            display: block;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
-            float: left;
-
-            /* TODO: Get rid of these magic numbers */
-            max-width: calc(33% - 1.125rem);
-            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
-            margin-inline-start: 33%;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
-            float: left;
-            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        }
-    }
-
-    :host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
-        left: var(--sds-g-spacing-3, 0.75rem);
-        fill: var(--slds-g-color-neutral-base-50, #747474);
-    }
-    
-    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
-        background-color: transparent;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--sds-g-color-brand-base-30, #014486);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
-        width: 0.875rem;
-        height: 0.875rem;
-        position: absolute;
-        top: 50%;
-        margin-top: -0.4375rem;
-        line-height: 1;
-        border: 0;
-        z-index: 2;
-    }
-
-    /**
-   * Has Icon Left
-   */
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_left {
-        inset-inline-start: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    /**
-   * Has Icon Right
-   */
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
-    .slds-input-has-icon_left-right .slds-input__icon_right {
-        inset-inline-end: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    /**
-   * Has Icon Left & Right
-   */
-    :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
-        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
-    }
-   
-  /**
- * A temporarily baked-in utility class until SLDS gets a proper utility package.
- *
- * This is a hybrid patch between synthetic and native shadow. The ideal final
- * outcome is the removal of this class and replacing the class with the SLDS
- * utility package solution.
- */
-  :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/modal/__examples__disabled/demo/demo.css

@@ -1 +0,0 @@
-@import 'lightning/sldsCommon';

package/src/lightning/modal/__examples__disabled/demoall/demoall.css

@@ -1,5 +0,0 @@
-@import 'lightning/sldsCommon';
-
-:host([data-render-mode="shadow"]) lightning-modal-footer lightning-button:not(:first-child) {
-    margin-left: var(--sds-g-spacing-2, 0.5rem);
-}

package/src/lightning/modal/__examples__disabled/demofootless/demofootless.css

@@ -1 +0,0 @@
-@import 'lightning/sldsCommon';

package/src/lightning/modal/__examples__disabled/demoheadless/demoheadless.css

@@ -1,5 +0,0 @@
-@import 'lightning/sldsCommon';
-
-:host([data-render-mode="shadow"]) lightning-modal-footer lightning-button:not(:first-child) {
-    margin-left: var(--sds-g-spacing-2, 0.5rem);
-}

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

@@ -1,240 +0,0 @@
-
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-@supports (--styling-hooks: '') {
-  /**
-   * 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 */
-
-    /* '--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);
-
-  }
-
-  :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, 0.6)));
-    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(--sds-g-spacing-6, 2rem);
-    height: 100%;
-    padding: var(--sds-g-spacing-8, 3rem) 0 var(--sds-g-spacing-12, 5rem) 0;
-    border-radius: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-modal__close {
-    width: 2rem;
-    height: 2rem;
-    margin-inline-start: auto;
-    position: relative;
-    inset-block-end: var(--sds-g-spacing-2, 0.5rem);
-    inset-inline-end: (var(--sds-g-spacing-2, 0.5rem) * -1);
-  }
-
-  @media (min-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-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 (min-width: 48em) {
-    :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 */
-
-  /* .slds-modal_full {} */
-
-  /* Behaves like large size when not in a small viewport */
-  :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 <=767px  */
-  @media (max-width: 47.9375em) {
-    :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);
-
-      /* Override slds-modal's bottom: 0 so we can make the height dynamic. */
-      inset-block-end: auto;
-
-      /* 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));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
-      width: 100%;
-      max-width: none;
-      min-width: 0;
-      margin: 0;
-      padding: var(--sds-g-spacing-4, 1rem) 0 0 0;
-      background-color: var(--slds-c-modalbase-color-background, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-      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: -webkit-min-content -webkit-min-content 1fr -webkit-min-content;
-      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(--sds-g-spacing-4, 1rem);
-
-      /**
-       * 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
-       *   and we have to override the CSS property instead of reassign.
-       * - States on button have a bug, they override instead of reassign hooks
-       *   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-neutral-base-100, white);
-      --slds-c-button-color-background-active: var(--slds-g-color-neutral-base-100, white);
-
-      color: var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50));
-    }
-
-    :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-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
-    }
-
-    /**
-     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
-     *
-     * SLDS Blueprint <> LBC Parity Patch
-     *
-     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
-     * account for the differences introduced in the LBC implementation. Location
-     * of this code would ideally live within the LBC component CSS module but
-     * synthetic shadow and how LBC deconstructs the modal into individual components
-     * 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;
-  }
-}