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

package/README.md

@@ -191,7 +191,7 @@ The npm package content is used by https://webcomponents.dev/org/lwc. This site
 
 [Lightning Component Reference](https://developer.salesforce.com/docs/component-library/overview/components)
 
-[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/component-library/documentation/en/lwc)
+[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)
 
 [Build Lightning Web Components trail](https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components)
 

package/metadata/raptor.json

@@ -34,6 +34,30 @@
   "actions": {
     "minVersion": "50.0"
   },
+  "aiFormControl": {
+    "slotNames": [
+      "control",
+      "end",
+      "start"
+    ],
+    "properties": [
+      {
+        "name": "layout"
+      }
+    ]
+  },
+  "aiLayout": {
+    "slotNames": [
+      "body",
+      "end",
+      "start"
+    ],
+    "properties": [
+      {
+        "name": "layout"
+      }
+    ]
+  },
   "alert": {
     "minVersion": "54.0",
     "slotNames": [],
@@ -608,7 +632,9 @@
     ]
   },
   "commerceApi": {},
+  "commerceEsfApi": {},
   "commerceExtensionApi": {},
+  "commerceStoreManagementApi": {},
   "communityInfoApi": {},
   "communityMicrobatchingApi": {},
   "communityNavigationMenuApi": {},
@@ -909,6 +935,17 @@
       },
       {
         "name": "recordId"
+      },
+      {
+        "name": "required"
+      }
+    ],
+    "methods": [
+      {
+        "name": "reportValidity"
+      },
+      {
+        "name": "setCustomValidity"
       }
     ]
   },
@@ -1570,6 +1607,7 @@
   "industriesDataloadingApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesDocgenApi": {},
+  "industriesDocumentmatrixApi": {},
   "industriesEducationApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
   "industriesEpcApi": {},
@@ -1583,8 +1621,13 @@
   "industriesHealthcloudApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
+  "industriesInstantPricingApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesMaterialityAssessmentCalculateApi": {},
+  "industriesMediaAdSalesApi": {},
+  "industriesNextgenerationsalesagreementpriceApi": {},
+  "industriesNlpServiceApi": {},
   "industriesPricingApi": {},
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
@@ -3181,6 +3224,9 @@
       {
         "name": "matchingInfo"
       },
+      {
+        "name": "messageWhenBadInput"
+      },
       {
         "name": "objectApiName"
       },
@@ -3204,6 +3250,9 @@
       {
         "name": "checkValidity"
       },
+      {
+        "name": "clearSelection"
+      },
       {
         "name": "focus"
       },
@@ -3318,6 +3367,7 @@
   "routingService": {},
   "salesAutomationRulesApi": {},
   "salesEnablementProgramApi": {},
+  "salesEngagementWorkspaceApi": {},
   "salesPeopleApi": {},
   "salesUserWorkingHoursApi": {},
   "select": {
@@ -3386,7 +3436,6 @@
     ]
   },
   "serviceAutomationServiceCatalogApi": {},
-  "serviceCategoryNetworkApi": {},
   "serviceCloudVoiceToolkitApi": {
     "minVersion": "52.0",
     "slotNames": [],
@@ -3439,6 +3488,7 @@
     ]
   },
   "serviceDataCategoryApi": {},
+  "serviceNetworkDataCategoryApi": {},
   "showToastEvent": {},
   "sitesApi": {},
   "slider": {
@@ -3848,6 +3898,7 @@
   },
   "uiAssistantPlatformApi": {},
   "uiDuplicatesApi": {},
+  "uiEciApi": {},
   "uiEnablementApi": {},
   "uiGraphQLApi": {
     "minVersion": "57.0"
@@ -3880,6 +3931,7 @@
   "unstable_cmsDeliveryApi": {},
   "unstable_cmsTypeApi": {},
   "unstable_commerceApi": {},
+  "unstable_commerceManagementApi": {},
   "unstable_communityNavigationMenuApi": {},
   "unstable_communityRecordSeoPropertiesApi": {},
   "unstable_communitySitesSearchApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.8-ssr",
+    "version": "1.19.1-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -366,6 +366,18 @@
                 "name": "@salesforce/label/LightningProgressBar.progressBar",
                 "path": "scopedImports/@salesforce-label-LightningProgressBar.progressBar.js"
             },
+            {
+                "name": "@salesforce/label/LightningProgressRing.warning",
+                "path": "scopedImports/@salesforce-label-LightningProgressRing.warning.js"
+            },
+            {
+                "name": "@salesforce/label/LightningProgressRing.expired",
+                "path": "scopedImports/@salesforce-label-LightningProgressRing.expired.js"
+            },
+            {
+                "name": "@salesforce/label/LightningProgressRing.complete",
+                "path": "scopedImports/@salesforce-label-LightningProgressRing.complete.js"
+            },
             {
                 "name": "@salesforce/label/LightningClickToDial.enabled",
                 "path": "scopedImports/@salesforce-label-LightningClickToDial.enabled.js"
@@ -926,6 +938,18 @@
                 "name": "@salesforce/label/LightningRecordPicker.dataSourceErrorMessage",
                 "path": "scopedImports/@salesforce-label-LightningRecordPicker.dataSourceErrorMessage.js"
             },
+            {
+                "name": "@salesforce/label/LightningRecordPicker.defaultSelectedRecordErrorMessage",
+                "path": "scopedImports/@salesforce-label-LightningRecordPicker.defaultSelectedRecordErrorMessage.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRecordPicker.loadingPlaceholder",
+                "path": "scopedImports/@salesforce-label-LightningRecordPicker.loadingPlaceholder.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRecordPicker.messageWhenBadInputDefault",
+                "path": "scopedImports/@salesforce-label-LightningRecordPicker.messageWhenBadInputDefault.js"
+            },
             {
                 "name": "@salesforce/label/LightningPicklist.available",
                 "path": "scopedImports/@salesforce-label-LightningPicklist.available.js"
@@ -1263,73 +1287,7 @@
                 "path": "scopedImports/@salesforce-internal-core.untrustedContentDomain.js"
             }
         ],
-        "nativeShadowEnabledComponents": [
-            "lightning-accordion",
-            "lightning-accordion-section",
-            "lightning-avatar",
-            "lightning-base-combobox",
-            "lightning-base-combobox-item",
-            "lightning-breadcrumb",
-            "lightning-breadcrumbs",
-            "lightning-bubble",
-            "lightning-button",
-            "lightning-button-group",
-            "lightning-button-icon",
-            "lightning-button-icon-stateful",
-            "lightning-button-menu",
-            "lightning-button-stateful",
-            "lightning-card",
-            "lightning-calendar",
-            "lightning-color-picker-custom",
-            "lightning-color-picker-panel",
-            "lightning-combobox",
-            "lightning-datepicker",
-            "lightning-datetimepicker",
-            "lightning-dual-listbox",
-            "lightning-dynamic-icon",
-            "lightning-formatted-rich-text",
-            "lightning-formatted-text",
-            "lightning-helptext",
-            "lightning-icon",
-            "lightning-input",
-            "lightning-layout",
-            "lightning-layout-item",
-            "lightning-menu-divider",
-            "lightning-menu-item",
-            "lightning-menu-subheader",
-            "lightning-modal",
-            "lightning-modalBase",
-            "lightning-modalBody",
-            "lightning-modalFooter",
-            "lightning-modalHeader",
-            "lightning-overlay-container",
-            "lightning-pill",
-            "lightning-pill-container",
-            "lightning-popup",
-            "lightning-popup-source",
-            "lightning-primitive-bubble",
-            "lightning-primitive-color-picker-button",
-            "lightning-primitive-icon",
-            "lightning-primitive-input-checkbox",
-            "lightning-primitive-input-checkbox-button",
-            "lightning-primitive-input-color",
-            "lightning-primitive-input-file",
-            "lightning-primitive-input-simple",
-            "lightning-primitive-input-toggle",
-            "lightning-progress-bar",
-            "lightning-progress-ring",
-            "lightning-radio-group",
-            "lightning-select",
-            "lightning-spinner",
-            "lightning-tab-bar",
-            "lightning-tabset",
-            "lightning-toast",
-            "lightning-toast-container",
-            "lightning-timepicker",
-            "lightning-vertical-navigation",
-            "lightning-vertical-navigation-section",
-            "lightning-badge"
-        ],
+        "nativeShadowEnabledComponents": [],
         "expose": [
             "lightning/accordion",
             "lightning/accordionSection",

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '244';
+export default '246';

package/scopedImports/@salesforce-label-LightningProgressRing.complete.js

@@ -0,0 +1 @@
+export default 'Complete';

package/scopedImports/@salesforce-label-LightningProgressRing.expired.js

@@ -0,0 +1 @@
+export default 'Expired';

package/scopedImports/@salesforce-label-LightningProgressRing.warning.js

@@ -0,0 +1 @@
+export default 'Warning';

package/scopedImports/@salesforce-label-LightningRecordPicker.defaultSelectedRecordErrorMessage.js

@@ -0,0 +1 @@
+export default 'Can\'t show the record because an ID is invalid or you don\'t have access. Ask an admin for help.';

package/scopedImports/@salesforce-label-LightningRecordPicker.invalidConfigurationErrorMessage.js

@@ -1 +1 @@
-export default 'Review the field\'s configuration. Ask your Salesforce admin for help.';
+export default 'This field can\'t load because of a configuration problem. Ask your Salesforce admin for help.';

package/scopedImports/@salesforce-label-LightningRecordPicker.loadingPlaceholder.js

@@ -0,0 +1 @@
+export default 'Loading...';

package/scopedImports/@salesforce-label-LightningRecordPicker.messageWhenBadInputDefault.js

@@ -0,0 +1 @@
+export default 'Select an option or remove the entered text.';

package/scopedImports/@salesforce-label-LightningServiceCloudVoiceToolkitApi.missingNbaParams.js

@@ -1 +1 @@
-export default '"Missing parameters. Ensure \'recordId' and 'parameters' are specified."';
+export default '"Missing parameters. Ensure \'recordId\' and \'parameters\' are specified."';

package/src/lightning/accordion/__docs__/accordion.md

@@ -241,7 +241,7 @@ Use SLDS styling hooks to customize the component's styles. For example, specify
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/accordion/#Styling-Hooks-Overview) for a list of CSS custom properties.
 
-For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-accordion`, see the **Source Code** section.
 
@@ -251,7 +251,7 @@ You can't initialize an accordion with multiple sections using only markup. Pass
 
 Accordion sections are not lazy loaded. Content in sections that are collapsed initially are available on load in the DOM.
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Custom Events
 

package/src/lightning/accordion/accordion.css

@@ -1,13 +1,13 @@
-@import 'lightning/sldsCommon';
-@import './accordion.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './accordion.slds.css'; */
 
 :host {
     display: block;
     list-style: none;
 }
 
-/* To Do:
-   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in.
+/* To Do: 
+   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in. 
 */
 /* Removes first child border top */
 ::slotted(lightning-accordion-section:first-child) {

package/src/lightning/accordion/accordion.js

@@ -1,12 +1,11 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { createAccordionManager } from 'lightning/accordionUtilsPrivate';
 
 /**
  * A collection of vertically stacked sections with multiple content areas.
  * @slot default Placeholder for accordion-section components.
  */
-export default class LightningAccordion extends LightningShadowBaseClass {
+export default class LightningAccordion extends LightningElement {
     privateIsSectionLessInLastRender = true;
     _allowMultipleSectionsOpen = false;
     connected = false;
@@ -31,7 +30,6 @@ export default class LightningAccordion extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
         this.setAttribute('role', 'list');
         this.classList.add('slds-accordion');

package/src/lightning/accordion/accordion.slds.css

@@ -165,7 +165,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -487,7 +487,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -495,7 +495,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }
@@ -544,26 +544,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :host([data-render-mode="shadow"]) [part="accordion-section"] {
-        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
-        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-spacing-3, 0.75rem));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-spacing-3, 0.75rem));
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-spacing-3, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--sds-g-spacing-3, 0.75rem));
     }
 
     :host([data-render-mode="shadow"]) .slds-accordion__summary {
         display: flex;
-        margin-block-start: calc(var(--slds-c-accordionsection-spacing-block-start,
+        margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
-        margin-block-end: calc(var(--slds-c-accordionsection-spacing-block-end,
+        margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
-        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inline-start,
+        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
-        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inline-end,
+        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend,
         var(--sds-g-sizing-4, 0.75rem) * -1));
-        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem));
-        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--sds-g-sizing-4, 0.75rem));
+        /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
         background-color: var(--slds-c-accordion-summary-color-background, transparent);
     }
 
@@ -593,20 +594,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         align-items: center;
         min-width: 0;
         margin-block-start: calc(
-          var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem)) * -1);
+          var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-sizing-4, 0.75rem)) * -1);
         margin-block-end: calc(
-        var(--slds-c-accordionsection-spacing-block-end,
+        var(--slds-c-accordionsection-spacing-blockend,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
         margin-inline-end: calc(
-          var(--slds-c-accordionsection-spacing-inline-end,
+          var(--slds-c-accordionsection-spacing-inlineend,
           var(--sds-g-sizing-4, 0.75rem)) * -1);
         margin-inline-start: calc(
-          var(--slds-c-accordionsection-spacing-inline-start,
+          var(--slds-c-accordionsection-spacing-inlinestart,
           var(--sds-g-sizing-4, 0.75rem)) * -1);
-        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem));
-        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--sds-g-sizing-4, 0.75rem));
     }
 
     /* Note:
@@ -618,12 +619,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
 
         color: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
+        /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     }
 
     /* Note:
     Media query will need to be worked out properly
     and be replaced with utility classes */
-    @media (min-width: 64.0625em) {
+    @media (width >= 64.0625em) {
         :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
             max-width: 100%;
             overflow: hidden;
@@ -668,10 +670,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         /* Note: The following styling hooks are remapped from accordion-section for usability reason.
         Users will have an option to use spacing styling hooks from both accordion and accordion-section making it
         easier to use our styling hook based on our internal styling hook naming rules */
-        --slds-c-accordionsection-spacing-block-start: var(--slds-c-accordion-spacing-block-start);
-        --slds-c-accordionsection-spacing-block-end: var(--slds-c-accordion-spacing-block-end);
-        --slds-c-accordionsection-spacing-inline-end: var(--slds-c-accordion-spacing-inline-end);
-        --slds-c-accordionsection-spacing-inline-start: var(--slds-c-accordion-spacing-inline-start);
+        --slds-c-accordionsection-spacing-blockstart: var(--slds-c-accordion-spacing-blockstart);
+        --slds-c-accordionsection-spacing-blockend: var(--slds-c-accordion-spacing-blockend);
+        --slds-c-accordionsection-spacing-inlineend: var(--slds-c-accordion-spacing-inlineend);
+        --slds-c-accordionsection-spacing-inlinestart: var(--slds-c-accordion-spacing-inlinestart);
     }
 }
-

package/src/lightning/accordionSection/__docs__/accordionSection.md

@@ -81,7 +81,7 @@ For more information, see [lightning-accordion](bundle/lightning-accordion/docum
 If two or more sections use the same name and that name is also specified as
 the `active-section-name`, the first section using that name is expanded by default.
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 

package/src/lightning/accordionSection/accordion-section.slds.css

@@ -165,7 +165,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -487,7 +487,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -495,7 +495,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }
@@ -544,26 +544,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :host([data-render-mode="shadow"]) [part="accordion-section"] {
-        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
-        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-spacing-3, 0.75rem));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-spacing-3, 0.75rem));
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-spacing-3, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--sds-g-spacing-3, 0.75rem));
     }
 
     :host([data-render-mode="shadow"]) .slds-accordion__summary {
         display: flex;
-        margin-block-start: calc(var(--slds-c-accordionsection-spacing-block-start,
+        margin-block-start: calc(var(--slds-c-accordionsection-spacing-blockstart,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
-        margin-block-end: calc(var(--slds-c-accordionsection-spacing-block-end,
+        margin-block-end: calc(var(--slds-c-accordionsection-spacing-blockend,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
-        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inline-start,
+        margin-inline-start: calc(var(--slds-c-accordionsection-spacing-inlinestart,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
-        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inline-end,
+        margin-inline-end: calc(var(--slds-c-accordionsection-spacing-inlineend,
         var(--sds-g-sizing-4, 0.75rem) * -1));
-        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem));
-        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--sds-g-sizing-4, 0.75rem));
+        /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
         background-color: var(--slds-c-accordion-summary-color-background, transparent);
     }
 
@@ -593,20 +594,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         align-items: center;
         min-width: 0;
         margin-block-start: calc(
-          var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem)) * -1);
+          var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-sizing-4, 0.75rem)) * -1);
         margin-block-end: calc(
-        var(--slds-c-accordionsection-spacing-block-end,
+        var(--slds-c-accordionsection-spacing-blockend,
         var(--sds-g-sizing-4, 0.75rem)) * -1);
         margin-inline-end: calc(
-          var(--slds-c-accordionsection-spacing-inline-end,
+          var(--slds-c-accordionsection-spacing-inlineend,
           var(--sds-g-sizing-4, 0.75rem)) * -1);
         margin-inline-start: calc(
-          var(--slds-c-accordionsection-spacing-inline-start,
+          var(--slds-c-accordionsection-spacing-inlinestart,
           var(--sds-g-sizing-4, 0.75rem)) * -1);
-        padding-block-start: var(--slds-c-accordionsection-spacing-block-start, var(--sds-g-sizing-4, 0.75rem));
-        padding-block-end: var(--slds-c-accordionsection-spacing-block-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-end: var(--slds-c-accordionsection-spacing-inline-end, var(--sds-g-sizing-4, 0.75rem));
-        padding-inline-start: var(--slds-c-accordionsection-spacing-inline-start, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-start: var(--slds-c-accordionsection-spacing-blockstart, var(--sds-g-sizing-4, 0.75rem));
+        padding-block-end: var(--slds-c-accordionsection-spacing-blockend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-end: var(--slds-c-accordionsection-spacing-inlineend, var(--sds-g-sizing-4, 0.75rem));
+        padding-inline-start: var(--slds-c-accordionsection-spacing-inlinestart, var(--sds-g-sizing-4, 0.75rem));
     }
 
     /* Note:
@@ -618,12 +619,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         --slds-c-icon-color-foreground-default: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
 
         color: var(--slds-c-accordion-heading-color-hover, var(--sds-g-color-brand-base-30, #014486));
+        /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     }
 
     /* Note:
     Media query will need to be worked out properly
     and be replaced with utility classes */
-    @media (min-width: 64.0625em) {
+    @media (width >= 64.0625em) {
         :host([data-render-mode="shadow"]) .slds-accordion__summary-content {
             max-width: 100%;
             overflow: hidden;

package/src/lightning/accordionSection/accordionSection.css

@@ -1,14 +1,14 @@
-@import 'lightning/sldsCommon';
-@import './accordion-section.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './accordion-section.slds.css'; */
 
 :host {
     display: list-item;
 }
 
 /* Note:
-   - Prevents double border on mixed/shadow mode:
+   - Prevents double border on mixed/shadow mode: 
    This is added because we have 'slds-accordion__list-item' from the host and inside the component (within the shadow boundary). This will cause double border on mixed/shadow mode.
-   The code below will remove the border coming from the host and keep the border from shadow boundary.
+   The code below will remove the border coming from the host and keep the border from shadow boundary.  
    - Added '!important' as a last resort as user agent style sheet will always win over our own styles.
 */
 :host([data-render-mode="shadow"]) {