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

package/src/lightning/buttonMenu/button-menu.slds.css

@@ -1,14 +1,13 @@
 
-
-  /**
+/**
    * Spacing amount between elements in button_icon versus standard button
    * are different so we target button_icon specifically. display: flex
    * comes from parent button styles.
    */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] {
-    gap: var(--slds-g-spacing-1);
-  }
-  /**
+:host([data-render-mode="shadow"]) [part~='button-icon'] {
+  gap: var(--slds-g-spacing-1);
+}
+/**
    * Note: the remaining CSS in this file is required due to the hardcoded
    * button-icon in lightning-button-menu's template which isn't refactorable
    * at the time of this implementation. This CSS should be removed when the
@@ -17,139 +16,138 @@
    * Refactoring to component version is important, until then this code is
    * fragile because it is forked, changes to button-icon won't be reflected here.
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-more {
-    --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
-    --sds-c-button-spacing-inline: var(--slds-g-sizing-3);
-    --sds-c-button-spacing-block: var(--slds-g-sizing-3);
-    --sds-c-button-sizing-width: auto;
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-more {
+  --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
+  --sds-c-button-spacing-inline: var(--slds-g-sizing-3);
+  --sds-c-button-spacing-block: var(--slds-g-sizing-3);
+  --sds-c-button-sizing-width: auto;
+}
+/**
    * SLDS sizing of the "more" icon is inconsistent and potentially broken.
    * Until fixed, we'll stick with a consistent size across all size variants.
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-more lightning-primitive-icon:last-of-type {
-    --slds-c-icon-sizing: var(--slds-g-sizing-3);
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-more lightning-primitive-icon:last-of-type {
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+}
+/**
    * Sizing hacks
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-xx-small { 
-    --slds-c-icon-sizing: var(--slds-g-sizing-3);
-    --sds-c-button-sizing-height: var(--slds-g-sizing-5);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-5);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-x-small {
-    --slds-c-icon-sizing: var(--slds-g-sizing-4);
-    --sds-c-button-sizing-height: var(--slds-g-sizing-6);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-6);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-small {
-    --sds-c-button-sizing-height: var(--slds-g-sizing-7);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-7);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-large {
-    --slds-c-icon-sizing: var(--slds-g-sizing-7);
-    --sds-c-button-sizing-height: var(--slds-g-sizing-10);
-    --sds-c-button-sizing-width: var(--slds-g-sizing-10);
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-xx-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+  --sds-c-button-sizing-height: var(--slds-g-sizing-5);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-5);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-x-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-4);
+  --sds-c-button-sizing-height: var(--slds-g-sizing-6);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-6);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-small {
+  --sds-c-button-sizing-height: var(--slds-g-sizing-7);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-7);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-large {
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+  --sds-c-button-sizing-height: var(--slds-g-sizing-10);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-10);
+}
+/**
   * Note: Styling below for bare and bare-inverse sizes 
   * are not yet supported but should be used once 
   * the fixes are in. Additional styles would need to 
   * be added as well.
   */
-  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-x-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-x-small {
-    --slds-c-icon-sizing: var(--slds-g-sizing-3);
-  }
-  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-small {
-    --slds-c-icon-sizing: var(--slds-g-sizing-4);
-  }
-  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-large,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-large {
-    --slds-c-icon-sizing: var(--slds-g-sizing-7);
-  }
-  /**
+:host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-x-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-x-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+}
+:host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-4);
+}
+:host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-large,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-large {
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+}
+/**
    * Variant Hacks - Container
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-container {
-    --slds-c-buttonicon-color-border: transparent;
-    --slds-c-buttonicon-color-border-hover: transparent;
-    --slds-c-buttonicon-color-border-focus: transparent;
+:host([data-render-mode="shadow"]) .slds-button_icon-container {
+  --slds-c-buttonicon-color-border: transparent;
+  --slds-c-buttonicon-color-border-hover: transparent;
+  --slds-c-buttonicon-color-border-focus: transparent;
 
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: transparent;
-  }
-  /**
+  /* Disabled */
+  --slds-c-buttonicon-color-border-disabled: transparent;
+}
+/**
    * Variant Hacks - Border Filled
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-border-filled {
-    --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
-    --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
-  }
-  /**
+:host([data-render-mode="shadow"]) .slds-button_icon-border-filled {
+  --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
+}
+/**
    * Variant Hacks - Border Inverse
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
-    /* Border */
-    --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-border-hover: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-border-active: var(--slds-g-color-brand-base-100);
+:host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
+  /* Border */
+  --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-border-hover: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-border-active: var(--slds-g-color-brand-base-100);
 
-    /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
+  /* Shadow */
+  --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
 
-    /* Icon */
-    --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-90);
-  }
-  :host([data-render-mode="shadow"]) .slds-button_icon-inverse {
-    /* Background */
-    --slds-c-buttonicon-color-background-active: transparent;
+  /* Icon */
+  --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-90);
+}
+:host([data-render-mode="shadow"]) .slds-button_icon-inverse {
+  /* Background */
+  --slds-c-buttonicon-color-background-active: transparent;
 
-    /* Border */
-    --slds-c-buttonicon-color-border: transparent;
-    --slds-c-buttonicon-color-border-hover: transparent;
-    --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
+  /* Border */
+  --slds-c-buttonicon-color-border: transparent;
+  --slds-c-buttonicon-color-border-hover: transparent;
+  --slds-c-buttonicon-color-border-focus: var(--slds-g-color-brand-base-100);
 
-    /* Spacing */
-    --slds-c-buttonicon-spacing-inline: 0;
-    --slds-c-buttonicon-spacing-block: 0;
+  /* Spacing */
+  --slds-c-buttonicon-spacing-inline: 0;
+  --slds-c-buttonicon-spacing-block: 0;
 
-    /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
+  /* Shadow */
+  --slds-c-buttonicon-shadow-focus: 0 0 3px var(--slds-g-color-brand-base-100);
 
-    /* Icon */
-    --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
-    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-95);
+  /* Icon */
+  --slds-c-buttonicon-color-foreground: var(--slds-g-color-brand-base-100);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
+  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-95);
 
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: transparent;
-  }
-  /**
+  /* Disabled */
+  --slds-c-buttonicon-color-border-disabled: transparent;
+}
+/**
    * Variant Hacks - Bare
    */
-  :host([data-render-mode="shadow"]) .slds-button_icon-bare {
-    --slds-c-buttonicon-color-border: transparent;
-    --slds-c-buttonicon-color-border-hover: transparent;
-    --slds-c-buttonicon-color-border-focus: transparent;
-    --slds-c-buttonicon-color-border-active: transparent;
-    --slds-c-buttonicon-spacing-inline: 0;
-    --slds-c-buttonicon-spacing-block: 0;
-
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: transparent;
-  }
-  :host([data-render-mode="shadow"]) [part~='button-icon'][label] {
-    --sds-c-button-sizing-height: auto;
-    --sds-c-button-sizing-width: auto;
-  }
+:host([data-render-mode="shadow"]) .slds-button_icon-bare {
+  --slds-c-buttonicon-color-border: transparent;
+  --slds-c-buttonicon-color-border-hover: transparent;
+  --slds-c-buttonicon-color-border-focus: transparent;
+  --slds-c-buttonicon-color-border-active: transparent;
+  --slds-c-buttonicon-spacing-inline: 0;
+  --slds-c-buttonicon-spacing-block: 0;
 
+  /* Disabled */
+  --slds-c-buttonicon-color-border-disabled: transparent;
+}
+:host([data-render-mode="shadow"]) [part~='button-icon'][label] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+}

package/src/lightning/buttonMenu/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.

package/src/lightning/buttonMenu/buttonMenu.css

@@ -2,5 +2,8 @@
 @import './buttonMenu.lbc.synthetic.css';
 .fix-slds-button_icon-border-filled {
     height: unset;
-    line-height: var(--slds-c-button-line-height, var(--sds-c-button-line-height, 1.875rem));
+    line-height: var(
+        --slds-c-button-line-height,
+        var(--sds-c-button-line-height, 1.875rem)
+    );
 }

package/src/lightning/buttonMenu/buttonMenu.lbc.synthetic.css

@@ -1,5 +1,3 @@
-.slds-dropdown{
+.slds-dropdown {
     width: max-content;
 }
-
-