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

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

@@ -225,118 +225,102 @@
    * 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(--slds-g-color-on-surface-1)
-        );
-        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
-        --sds-c-inputtext-sizing-height: var(
-            --slds-c-inputtext-sizing-height,
-            var(--slds-g-sizing-9)
-        );
-        --sds-c-inputtext-color-background: var(
-            --slds-c-inputtext-color-background,
-            var(--slds-g-color-surface-container-1)
-        );
-        --sds-c-inputtext-color-background-focus: var(
-            --slds-c-inputtext-color-background-focus,
-            var(--slds-g-color-surface-container-1)
-        );
-        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
-        --sds-c-inputtext-font-size: var(
-            --slds-c-inputtext-font-size,
-            var(--slds-g-font-size-base)
-        );
-        --sds-c-inputtext-text-color-placeholder: var(
-            --slds-c-inputtext-text-color-placeholder,
-            var(--slds-g-color-on-surface-1)
-        );
-        --sds-c-inputtext-color-border: var(
-            --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-2)
-        );
-        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
-        --sds-c-inputtext-radius-border: var(
-            --slds-c-inputtext-radius-border,
-            var(--slds-g-radius-border-2)
-        );
+  /* Host reassignments to composed slds-icon */
+  --slds-c-icon-color-foreground: var(
+    --slds-c-inputtext-icon-color-foreground,
+    var(--slds-g-color-on-surface-1)
+  );
+  --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
+  --sds-c-inputtext-sizing-height: var(--slds-c-inputtext-sizing-height, var(--slds-g-sizing-9));
+  --sds-c-inputtext-color-background: var(
+    --slds-c-inputtext-color-background,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-inputtext-color-background-focus: var(
+    --slds-c-inputtext-color-background-focus,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
+  --sds-c-inputtext-font-size: var(--slds-c-inputtext-font-size, var(--slds-g-font-size-base));
+  --sds-c-inputtext-text-color-placeholder: var(
+    --slds-c-inputtext-text-color-placeholder,
+    var(--slds-g-color-on-surface-1)
+  );
+  --sds-c-inputtext-color-border: var(--slds-c-inputtext-color-border, var(--slds-g-color-border-2));
+  --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
+  --sds-c-inputtext-radius-border: var(--slds-c-inputtext-radius-border, var(--slds-g-radius-border-2));
 
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-    }
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
 /**
    * Input Container
    */
 :host([data-render-mode="shadow"]) [part='input-container'] {
-        flex: 1 0 100%;
-        align-items: stretch;
-        --sds-c-inputtext-spacing-inline: 0;
-        --sds-c-inputtext-spacing-block: 0;
-    }
+  flex: 1 0 100%;
+  align-items: stretch;
+  --sds-c-inputtext-spacing-inline: 0;
+  --sds-c-inputtext-spacing-block: 0;
+}
 :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
-        border: none;
-        display: inline-block;
-    }
+  border: none;
+  display: inline-block;
+}
 :host([data-render-mode="shadow"]) [part='input-container'] .slds-input__icon:not(button) {
-            pointer-events: none;
-    }
+  pointer-events: none;
+}
 :host([data-render-mode="shadow"]) [part='input'][type='range'] {
-        min-height: calc(1.875rem + (1px * 2));
-        margin: 0;
-    }
+  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(--slds-g-color-border-accent-1);
-        --sds-c-inputtext-shadow: 0 0 3px var(--slds-g-color-accent-2);
-        --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
+[part='input-container'][type='range']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
+  --sds-c-inputtext-shadow: 0 0 3px var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
 
-        outline: 0;
-        border-width: var(--sds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1));
-        border-color: var(--sds-c-inputtext-color-border, var(--slds-g-color-border-2));
-    }
+  outline: 0;
+  border-width: var(--sds-c-inputtext-sizing-border, var(--slds-g-sizing-border-1));
+  border-color: var(--sds-c-inputtext-color-border, var(--slds-g-color-border-2));
+}
 /**
    * Input
    */
 :host([data-render-mode="shadow"]) [part='input'] {
-        padding-inline-start: var(
-            --slds-c-inputtext-spacing-inlinestart,
-            var(--slds-g-spacing-3));
-        padding-inline-end: var(
-            --slds-c-inputtext-spacing-inlineend,
-            var(--slds-g-spacing-4));
-        height: unset;
-        font-family: var(--slds-g-font-family);
-    }
+  padding-inline-start: var(--slds-c-inputtext-spacing-inlinestart, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-inputtext-spacing-inlineend, var(--slds-g-spacing-4));
+  height: unset;
+  font-family: var(--slds-g-font-family);
+}
 /**
    * Focus / active State
    */
-:host(:not([disabled])) [part="input-container"]:focus-within,
-   :host(:not([disabled])) [part="input-container"]:active {
-      --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
-      --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
-      --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
+:host(:not([disabled])) [part='input-container']:focus-within,
+:host(:not([disabled])) [part='input-container']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-accent-1);
+  --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: var(--slds-g-color-surface-container-1);
 
-      outline: 0;
-    }
+  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;
-    }
-:host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
-       --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
-       --sds-c-inputtext-color-background: transparent;
+  --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;
+}
+:host([data-render-mode="shadow"][readonly]) [part='input-container']:focus-within,:host([data-render-mode="shadow"][readonly]) [part='input-container']:active {
+  --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
+  --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
+  --sds-c-inputtext-color-background: transparent;
 
-       outline: 0;
-     }
+  outline: 0;
+}
 /**
    * Invalid State
    *
@@ -345,25 +329,24 @@
    * uses :host([invalid]).
    */
 :host([data-render-mode="shadow"][invalid]) [part='input-text'] {
-        --sds-c-inputtext-shadow: 0 0 0 var(--slds-g-sizing-border-1) inset
-            var(--slds-g-color-error-1);
-        --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
-        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
-    }
+  --sds-c-inputtext-shadow: 0 0 0 var(--slds-g-sizing-border-1) inset var(--slds-g-color-error-1);
+  --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
+  --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+}
 :host([data-render-mode="shadow"][invalid]) .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
-     }
-:host([data-render-mode="shadow"][invalid]) input[type="search"] {
-      --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
-      --slds-c-input-color-border: var(--slds-g-color-border-error-1);
-      --slds-c-input-text-color: var(--slds-s-input-color-invalid);
+  --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+}
+:host([data-render-mode="shadow"][invalid]) input[type='search'] {
+  --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
+  --slds-c-input-color-border: var(--slds-g-color-border-error-1);
+  --slds-c-input-text-color: var(--slds-s-input-color-invalid);
 
-      background-clip: padding-box;
-    }
-:host([data-render-mode="shadow"][invalid]) input[type="search"] + lightning-primitive-icon::part(icon) {
-      fill: var(--slds-g-color-error-1);
-      color: var(--slds-g-color-error-1);
-    }
+  background-clip: padding-box;
+}
+:host([data-render-mode="shadow"][invalid]) input[type='search'] + lightning-primitive-icon::part(icon) {
+  fill: var(--slds-g-color-error-1);
+  color: var(--slds-g-color-error-1);
+}
 /**
    * Invalid State - Focus
    *
@@ -371,26 +354,28 @@
    * 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(--slds-g-color-error-base-50) 0 0 0 var(--slds-g-sizing-border-1) inset,
-        0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-border-error-1);
-      --sds-c-inputtext-color-border: var(--slds-g-color-error-1);
-    }
+  --sds-c-inputtext-shadow:
+    var(--slds-g-color-error-base-50) 0 0 0 var(--slds-g-sizing-border-1) inset,
+    0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-border-error-1);
+  --sds-c-inputtext-color-border: var(--slds-g-color-error-1);
+}
 /**
    * 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(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
-    }
+  cursor: not-allowed;
+  --sds-c-inputtext-color-background: var(
+    --slds-s-input-color-background-disabled,
+    var(--slds-g-color-disabled-container-1)
+  );
+  --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+  --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
+}
 :host([data-render-mode="shadow"][disabled]) [part='input-text'] {
-        --sds-c-inputtext-text-color-placeholder:
-            var(--slds-g-color-on-disabled-2);
-    }
+  --sds-c-inputtext-text-color-placeholder: var(--slds-g-color-on-disabled-2);
+}
 /**
    * Label
    *
@@ -398,17 +383,14 @@
    * 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(--slds-g-spacing-1);
-        padding-inline-end: var(--slds-g-spacing-2);
-        color: var(
-            --slds-c-inputtext-label-color,
-            var(--slds-g-color-on-surface-2)
-        );
-        margin-block-end: var(--slds-g-sizing-1);
+  padding-block-start: var(--slds-g-spacing-1);
+  padding-inline-end: var(--slds-g-spacing-2);
+  color: var(--slds-c-inputtext-label-color, var(--slds-g-color-on-surface-2));
+  margin-block-end: var(--slds-g-sizing-1);
 
-        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-        display: inline-flex;
-    }
+  /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+  display: inline-flex;
+}
 /**
    * Start
    *
@@ -417,8 +399,8 @@
    * the icon in the inline help text.
    */
 :host([data-render-mode="shadow"]) [part='start'] {
-        --slds-c-icon-spacing-inlineend: var(--slds-g-spacing-2);
-    }
+  --slds-c-icon-spacing-inlineend: var(--slds-g-spacing-2);
+}
 /**
    * Label Inline Variant
    *
@@ -432,75 +414,75 @@
    * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
    */
 @media (width >= 48em) {
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-text'] {
-            display: block;
-        }
+  :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;
+  :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(--slds-g-spacing-1);
-        }
+    /* TODO: Get rid of these magic numbers */
+    max-width: calc(33% - 1.125rem);
+    padding-block-start: var(--slds-g-spacing-1);
+  }
 
-        :host([data-render-mode="shadow"][variant='label-inline']) [part='input-container'] {
-            margin-inline-start: 33%;
-        }
+  :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(--slds-g-spacing-1);
-        }
-    }
-:host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
-        left: var(--slds-g-spacing-3);
-        fill: var(--slds-g-color-on-surface-1);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
+    float: left;
+    padding-block-start: var(--slds-g-spacing-1);
+  }
+}
+:host([data-render-mode="shadow"]) input[type='search'] + lightning-primitive-icon::part(icon) {
+  left: var(--slds-g-spacing-3);
+  fill: var(--slds-g-color-on-surface-1);
+}
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
-        background-color: transparent;
-    }
+  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(--slds-g-color-accent-3);
-    }
+.slds-input-has-icon .slds-button_icon:hover {
+  --slds-c-icon-color-foreground: var(--slds-g-color-accent-3);
+}
 :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;
-    }
+  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-inlinestart: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
+}
 :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(--slds-g-spacing-3);
-    }
+.slds-input-has-icon_left-right .slds-input__icon_left {
+  inset-inline-start: var(--slds-g-spacing-3);
+}
 /**
    * Has Icon Right
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
-        --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
+}
 :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(--slds-g-spacing-3);
-    }
+.slds-input-has-icon_left-right .slds-input__icon_right {
+  inset-inline-end: var(--slds-g-spacing-3);
+}
 /**
    * Has Icon Left & Right
    */
 :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
-        --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
-        --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
-    }
+  --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-6);
+  --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-6);
+}
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
@@ -509,14 +491,14 @@
  * 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;
-  }
+  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/dialog/README.md

@@ -1,10 +1,11 @@
 # Dialog (Deprecated)
 
 ## Important:
-* **For any new modal work, starting in release 236, please use `lightning-modal`**
-* **We do not recommend or support the use of `lightning-dialog` in one.app, mobile or any other case where the stacking context can't be controlled**
-* **The `lightning-dialog` is bound by the stacking context, meaning that if any sibling of a root parent of the modal has a higher z-index than the modal dialog, it will show on top of the modal created with the `lightning-dialog` component.**
-* **The `lightning-dialog` is not Aura (one.app) panel manager aware and as such will not open scoped modals nor work correctly when opened from an aura (panel manager based) dialog.**
+
+- **For any new modal work, starting in release 236, please use `lightning-modal`**
+- **We do not recommend or support the use of `lightning-dialog` in one.app, mobile or any other case where the stacking context can't be controlled**
+- **The `lightning-dialog` is bound by the stacking context, meaning that if any sibling of a root parent of the modal has a higher z-index than the modal dialog, it will show on top of the modal created with the `lightning-dialog` component.**
+- **The `lightning-dialog` is not Aura (one.app) panel manager aware and as such will not open scoped modals nor work correctly when opened from an aura (panel manager based) dialog.**
 
 A `lightning-dialog` component creates a modal dialog, which displays in a layer above the app
 and keeps focus until you close the dialog.
@@ -20,8 +21,8 @@ The body of the dialog can contain other components or HTML.
 
 The component supports two methods:
 
--   `showModal()` to show a modal dialog
--   `close()` to close the dialog
+- `showModal()` to show a modal dialog
+- `close()` to close the dialog
 
 Here is a simple dialog example that creates a prompt for the user. It includes a header and a slot for
 footer content that consists of two buttons. A button below the dialog shows

package/src/lightning/dialog/__requirements__/requirements.md

@@ -1,20 +1,20 @@
 ### Specification
 
--   The modal accepts a “header” as a string attribute.
--   The modal accepts content in the form of the default slot.
--   The modal accepts a footer in the form of the named “footer” slot.
--   When opening a modal, the focus goes to the first tabbable element (we define this as a visible/non-disabled element that has a tabIndex of 0 and is not within a custom element with tabindex attribute of “-1" on it));
-    if none, then the focus is set on the close "x" button.
--   When opening a modal dialog, all the modal dialog's sibling nodes (including up the tree) will have aria-hidden=true to make them inert from accessibility perspective.
--   When a modal dialog is showing, a backdrop appears blocking any mouse interactions.
--   When a modal dialog is showing the focus is trapped for both sequential Tabs and Shift-Tabs, after the last tabbable element of the modal the focus needs to go to the close button, and if using Shift-Tab on the close button, the focus goes on the last tabbable element.
--   When the last tabbable element of the modal dialog is either removed or changed order the focus trapping should continue to work in the manner described above.
--   When the last tabbable is still in the DOM but no longer last, it will have its keydown listener removed and tabbing from it will lead to the next element.
--   When a dialog is closed, a 'close' event is dispatched.
--   When a dialog is closed, the focus returns to the element that was in focus before opening of the modal dialog. If no such element is found, document.body is focused.
--   When closing a modal dialog, the aria-hiddens of the modal dialog's sibling nodes are restored to their previous values (that is, if an element had aria-hidden="true" it will be preserved).
--   Clicking on the "x" (close) button closes the dialog and dispatches the 'close' and 'cancel' events (the latter is cancelable).
--   Pressing "Escape" closes the dialog, and dispatches 'close' and 'cancel' events (the latter is cancelable).
--   Opening and closing of the same dialog is possible (and will not leave any dangling references or extra DOM elements).
--   When opening a modal and there is another modal already opened, the second modal will not show and a console warning will appear.
--   Preventing the default behaviour of the 'cancel' event prevents the dialog from closing.
+- The modal accepts a “header” as a string attribute.
+- The modal accepts content in the form of the default slot.
+- The modal accepts a footer in the form of the named “footer” slot.
+- When opening a modal, the focus goes to the first tabbable element (we define this as a visible/non-disabled element that has a tabIndex of 0 and is not within a custom element with tabindex attribute of “-1" on it));
+  if none, then the focus is set on the close "x" button.
+- When opening a modal dialog, all the modal dialog's sibling nodes (including up the tree) will have aria-hidden=true to make them inert from accessibility perspective.
+- When a modal dialog is showing, a backdrop appears blocking any mouse interactions.
+- When a modal dialog is showing the focus is trapped for both sequential Tabs and Shift-Tabs, after the last tabbable element of the modal the focus needs to go to the close button, and if using Shift-Tab on the close button, the focus goes on the last tabbable element.
+- When the last tabbable element of the modal dialog is either removed or changed order the focus trapping should continue to work in the manner described above.
+- When the last tabbable is still in the DOM but no longer last, it will have its keydown listener removed and tabbing from it will lead to the next element.
+- When a dialog is closed, a 'close' event is dispatched.
+- When a dialog is closed, the focus returns to the element that was in focus before opening of the modal dialog. If no such element is found, document.body is focused.
+- When closing a modal dialog, the aria-hiddens of the modal dialog's sibling nodes are restored to their previous values (that is, if an element had aria-hidden="true" it will be preserved).
+- Clicking on the "x" (close) button closes the dialog and dispatches the 'close' and 'cancel' events (the latter is cancelable).
+- Pressing "Escape" closes the dialog, and dispatches 'close' and 'cancel' events (the latter is cancelable).
+- Opening and closing of the same dialog is possible (and will not leave any dangling references or extra DOM elements).
+- When opening a modal and there is another modal already opened, the second modal will not show and a console warning will appear.
+- Preventing the default behaviour of the 'cancel' event prevents the dialog from closing.

package/src/lightning/dualListbox/__docs__/dualListbox.md

@@ -76,19 +76,19 @@ Client-side input validation is available for this component. Note that disabled
 
 To check the validity states of the input, use the `validity` attribute to return an object with read-only `boolean` attributes.
 
--   `rangeOverflow`
--   `rangeUnderflow`
--   `valueMissing`
--   `valid`
-    For more information on the `validity` attribute, see [lightning-input](bundle/lightning-input/documentation).
+- `rangeOverflow`
+- `rangeUnderflow`
+- `valueMissing`
+- `valid`
+  For more information on the `validity` attribute, see [lightning-input](bundle/lightning-input/documentation).
 
 #### Error Messages
 
 When an input validation fails, the following messages are displayed by default.
 
--   `rangeOverflow`: Select at most [max] options
--   `rangeUnderflow`: At least [min] options must be selected
--   `valueMissing`: An option must be selected
+- `rangeOverflow`: Select at most [max] options
+- `rangeUnderflow`: At least [min] options must be selected
+- `valueMissing`: An option must be selected
 
 [max] and [min] refer to the numerical values for the `max` and `min` attributes you provide.
 
@@ -106,10 +106,10 @@ Component styling hooks use the `--slds-c-*` prefix and change styling for speci
 
 Use the `variant` attribute with one of these values to position the labels differently relative to the picklist field.
 
--   `standard` is the default
--   `label-hidden` hides the label visually but makes it available to assistive technology. If you provide a value for `field-level-help`, the tooltip icon is still displayed.
--   `label-inline` aligns the label next to the picklist field
--   `label-stacked` places the label above the picklist field
+- `standard` is the default
+- `label-hidden` hides the label visually but makes it available to assistive technology. If you provide a value for `field-level-help`, the tooltip icon is still displayed.
+- `label-inline` aligns the label next to the picklist field
+- `label-stacked` places the label above the picklist field
 
 ##### Customize Component Styling
 
@@ -137,24 +137,24 @@ in the selected options list.
 
 Use the following keyboard shortcuts to work with dual listboxes.
 
--   Click - Select a single option.
--   Cmd+Click - Select multiple options or deselect selected options.
--   Shift+Click - Select all options between the current and last clicked option.
+- Click - Select a single option.
+- Cmd+Click - Select multiple options or deselect selected options.
+- Shift+Click - Select all options between the current and last clicked option.
 
 When focus is on options:
 
--   Up Arrow - Move selection to previous option.
--   Down Arrow - Move selection to next option.
--   Cmd/Ctrl+Up Arrow - Move focus to previous option.
--   Cmd/Ctrl+Down Arrow - Move focus to next option.
--   Ctrl+Space - Toggle selection of focused option.
--   Cmd/Ctrl+Right Arrow - Move selected options to right listbox.
--   Cmd/Ctrl+Left Arrow - Move selected options to left listbox.
--   Tab - Move focus to the buttons or between boxes.
+- Up Arrow - Move selection to previous option.
+- Down Arrow - Move selection to next option.
+- Cmd/Ctrl+Up Arrow - Move focus to previous option.
+- Cmd/Ctrl+Down Arrow - Move focus to next option.
+- Ctrl+Space - Toggle selection of focused option.
+- Cmd/Ctrl+Right Arrow - Move selected options to right listbox.
+- Cmd/Ctrl+Left Arrow - Move selected options to left listbox.
+- Tab - Move focus to the buttons or between boxes.
 
 When focus is on a button:
 
--   Enter - Perform the operation associated with that button.
+- Enter - Perform the operation associated with that button.
 
 #### Custom Events