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

package/src/lightning/buttonStateful/__docs__/buttonStateful.md

@@ -78,12 +78,12 @@ is available in your org.
 
 Use the `variant` attribute with one of these values to apply styling.
 
--   `neutral` is the default variant, a plain uncolored button.
--   `brand` is a blue button, used to draw attention to the primary action on a page.
--   `destructive` is a red button used to warn users that its action has a negative effect.
--   `inverse` uses the background color and light text, useful for dark backgrounds.
--   `success` is a green button used to indicate a successful action.
--   `text` is a button without a border, which gives it the look of a plain text link.
+- `neutral` is the default variant, a plain uncolored button.
+- `brand` is a blue button, used to draw attention to the primary action on a page.
+- `destructive` is a red button used to warn users that its action has a negative effect.
+- `inverse` uses the background color and light text, useful for dark backgrounds.
+- `success` is a green button used to indicate a successful action.
+- `text` is a button without a border, which gives it the look of a plain text link.
 
 ##### Customize Component Styling
 
@@ -106,12 +106,12 @@ This example adds padding on the button using an SLDS class.
 </lightning-button-stateful>
 ```
 
-Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. 
+Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available.
 
 See [Buttons: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. `lightning-button-stateful` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties. Custom properties for stateful buttons work only with particular `lightning-button-stateful` variants.
 
-| CSS Custom Property            | `lightning-button-stateful` Variants |
-| ------------------------------ | ------------------------------------ |
+| CSS Custom Property             | `lightning-button-stateful` Variants |
+| ------------------------------- | ------------------------------------ |
 | `--slds-c-button-*`             | all                                  |
 | `--slds-c-button-color-*`       | `base`                               |
 | `--slds-c-button-text-color-*`  | `neutral` (default) and `text`       |

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -1,103 +1,99 @@
 
-
-  :host([data-render-mode="shadow"]) {
-    /* button text */
-    --slds-c-button-neutral-text-color: var(--slds-c-buttonstateful-text-color);
-    --slds-c-button-neutral-text-color-hover: var(--slds-c-buttonstateful-text-color-hover);
-    --slds-c-button-neutral-text-color-focus: var(--slds-c-buttonstateful-text-color-focus);
-    --slds-c-button-neutral-text-color-active: var(--slds-c-buttonstateful-text-color-active);
-
-    /* button background */
-    --slds-c-button-neutral-color-background: var(--slds-c-buttonstateful-color-background);
-    --slds-c-button-neutral-color-background-hover: var(--slds-c-buttonstateful-color-background-hover);
-    --slds-c-button-neutral-color-background-active: var(--slds-c-buttonstateful-color-background-active);
-    --slds-c-button-neutral-color-background-focus: var(--slds-c-buttonstateful-color-background-focus);
-
-    /* button border */
-    --slds-c-button-neutral-color-border: var(--slds-c-buttonstateful-color-border);
-    --slds-c-button-neutral-color-border-hover: var(--slds-c-buttonstateful-color-border-hover);
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-buttonstateful-color-border-active,
-      transparent
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-buttonstateful-color-border-focus,
-      var(--slds-c-buttonstateful-color-border-hover, var(--slds-c-buttonstateful-color-border-hover))
-    );
-
-    /* button box shadow on focus */
-    --slds-c-button-neutral-shadow-focus: var(
-      --slds-c-buttonstateful-shadow-focus,
-      var(--slds-g-color-accent-2) 0 0 3px
-    );
-
-    /* Pressed/Selected State */
-    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
-    --sds-c-button-color-background-pressed: transparent;
-  }
-
-  /* Hover state when button is pressed/selected */
-
-  :host([data-render-mode="shadow"]) .slds-button_stateful:hover {
-    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
-    --sds-c-button-text-color-pressed: var(--slds-s-button-color-hover);
-    --sds-c-button-color-border-pressed: var(--slds-g-color-border-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-is-selected-clicked {
-    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-1);
-    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-is-selected-clicked:focus {
-    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
-    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-3);
-    --sds-c-button-shadow-pressed: var(--slds-s-button-shadow-focus);
-  }
-
-  /* vertical alignment for icon and text */
-
-  :host([data-render-mode="shadow"]) .slds-text-not-selected,:host([data-render-mode="shadow"]) 
-  .slds-text-selected,:host([data-render-mode="shadow"]) 
-  .slds-text-selected-focus {
-    display: contents;
-  }
-
-  /* not selected: */
-
-  :host([data-render-mode="shadow"]) .slds-not-selected .slds-text-selected,:host([data-render-mode="shadow"]) 
-  .slds-not-selected .slds-text-selected-focus {
-    display: none;
-  }
-
-  /* selected focus */
-
-  :host([data-render-mode="shadow"]) .slds-is-selected-clicked .slds-text-not-selected,:host([data-render-mode="shadow"]) 
-  .slds-is-selected-clicked .slds-text-selected-focus {
-    display: none;
-  }
-
-  /* selected but not active */
-
-  :host([data-render-mode="shadow"]) .slds-is-selected .slds-text-not-selected,:host([data-render-mode="shadow"]) 
-  .slds-is-selected .slds-text-selected-focus {
-    display: none;
-  }
-
-  /* selected + hover/focus: remove selected text */
-
-  :host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected,:host([data-render-mode="shadow"]) 
-  .slds-is-selected:focus .slds-text-selected {
-    display: none;
-  }
-
-  /* selected + hover: show hover/focus text */
-
-  :host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected-focus,:host([data-render-mode="shadow"]) 
-  .slds-is-selected:focus .slds-text-selected-focus {
-    display: contents;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-is-selected:not(:hover) {
-    border-color: transparent;
-  }
+:host([data-render-mode="shadow"]) {
+  /* button text */
+  --slds-c-button-neutral-text-color: var(--slds-c-buttonstateful-text-color);
+  --slds-c-button-neutral-text-color-hover: var(--slds-c-buttonstateful-text-color-hover);
+  --slds-c-button-neutral-text-color-focus: var(--slds-c-buttonstateful-text-color-focus);
+  --slds-c-button-neutral-text-color-active: var(--slds-c-buttonstateful-text-color-active);
+
+  /* button background */
+  --slds-c-button-neutral-color-background: var(--slds-c-buttonstateful-color-background);
+  --slds-c-button-neutral-color-background-hover: var(--slds-c-buttonstateful-color-background-hover);
+  --slds-c-button-neutral-color-background-active: var(--slds-c-buttonstateful-color-background-active);
+  --slds-c-button-neutral-color-background-focus: var(--slds-c-buttonstateful-color-background-focus);
+
+  /* button border */
+  --slds-c-button-neutral-color-border: var(--slds-c-buttonstateful-color-border);
+  --slds-c-button-neutral-color-border-hover: var(--slds-c-buttonstateful-color-border-hover);
+  --slds-c-button-neutral-color-border-active: var(--slds-c-buttonstateful-color-border-active, transparent);
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-buttonstateful-color-border-focus,
+    var(--slds-c-buttonstateful-color-border-hover, var(--slds-c-buttonstateful-color-border-hover))
+  );
+
+  /* button box shadow on focus */
+  --slds-c-button-neutral-shadow-focus: var(
+    --slds-c-buttonstateful-shadow-focus,
+    var(--slds-g-color-accent-2) 0 0 3px
+  );
+
+  /* Pressed/Selected State */
+  --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
+  --sds-c-button-color-background-pressed: transparent;
+}
+
+/* Hover state when button is pressed/selected */
+
+:host([data-render-mode="shadow"]) .slds-button_stateful:hover {
+  --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
+  --sds-c-button-text-color-pressed: var(--slds-s-button-color-hover);
+  --sds-c-button-color-border-pressed: var(--slds-g-color-border-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-is-selected-clicked {
+  --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-1);
+  --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-is-selected-clicked:focus {
+  --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
+  --sds-c-button-text-color-pressed: var(--slds-g-color-accent-3);
+  --sds-c-button-shadow-pressed: var(--slds-s-button-shadow-focus);
+}
+
+/* vertical alignment for icon and text */
+
+:host([data-render-mode="shadow"]) .slds-text-not-selected,:host([data-render-mode="shadow"]) 
+.slds-text-selected,:host([data-render-mode="shadow"]) 
+.slds-text-selected-focus {
+  display: contents;
+}
+
+/* not selected: */
+
+:host([data-render-mode="shadow"]) .slds-not-selected .slds-text-selected,:host([data-render-mode="shadow"]) 
+.slds-not-selected .slds-text-selected-focus {
+  display: none;
+}
+
+/* selected focus */
+
+:host([data-render-mode="shadow"]) .slds-is-selected-clicked .slds-text-not-selected,:host([data-render-mode="shadow"]) 
+.slds-is-selected-clicked .slds-text-selected-focus {
+  display: none;
+}
+
+/* selected but not active */
+
+:host([data-render-mode="shadow"]) .slds-is-selected .slds-text-not-selected,:host([data-render-mode="shadow"]) 
+.slds-is-selected .slds-text-selected-focus {
+  display: none;
+}
+
+/* selected + hover/focus: remove selected text */
+
+:host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected,:host([data-render-mode="shadow"]) 
+.slds-is-selected:focus .slds-text-selected {
+  display: none;
+}
+
+/* selected + hover: show hover/focus text */
+
+:host([data-render-mode="shadow"]) .slds-is-selected:hover .slds-text-selected-focus,:host([data-render-mode="shadow"]) 
+.slds-is-selected:focus .slds-text-selected-focus {
+  display: contents;
+}
+
+:host([data-render-mode="shadow"]) .slds-is-selected:not(:hover) {
+  border-color: transparent;
+}

package/src/lightning/buttonStateful/button.slds.css

@@ -187,14 +187,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -214,7 +213,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -257,7 +255,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -280,8 +281,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -293,17 +300,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -414,9 +421,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -436,7 +452,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -483,7 +499,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.