lightning-base-components 1.18.8-alpha → 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": {},
@@ -1587,6 +1625,9 @@
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
   "industriesMaterialityAssessmentCalculateApi": {},
+  "industriesMediaAdSalesApi": {},
+  "industriesNextgenerationsalesagreementpriceApi": {},
+  "industriesNlpServiceApi": {},
   "industriesPricingApi": {},
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
@@ -3183,6 +3224,9 @@
       {
         "name": "matchingInfo"
       },
+      {
+        "name": "messageWhenBadInput"
+      },
       {
         "name": "objectApiName"
       },
@@ -3206,6 +3250,9 @@
       {
         "name": "checkValidity"
       },
+      {
+        "name": "clearSelection"
+      },
       {
         "name": "focus"
       },
@@ -3320,6 +3367,7 @@
   "routingService": {},
   "salesAutomationRulesApi": {},
   "salesEnablementProgramApi": {},
+  "salesEngagementWorkspaceApi": {},
   "salesPeopleApi": {},
   "salesUserWorkingHoursApi": {},
   "select": {
@@ -3388,7 +3436,6 @@
     ]
   },
   "serviceAutomationServiceCatalogApi": {},
-  "serviceCategoryNetworkApi": {},
   "serviceCloudVoiceToolkitApi": {
     "minVersion": "52.0",
     "slotNames": [],
@@ -3441,6 +3488,7 @@
     ]
   },
   "serviceDataCategoryApi": {},
+  "serviceNetworkDataCategoryApi": {},
   "showToastEvent": {},
   "sitesApi": {},
   "slider": {
@@ -3850,6 +3898,7 @@
   },
   "uiAssistantPlatformApi": {},
   "uiDuplicatesApi": {},
+  "uiEciApi": {},
   "uiEnablementApi": {},
   "uiGraphQLApi": {
     "minVersion": "57.0"
@@ -3882,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-alpha",
+    "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"

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.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/avatar/__docs__/avatar.md

@@ -146,7 +146,7 @@ Use SLDS styling hooks to customize the component's styles. For example, specify
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/avatar/#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-avatar`, see the **Source Code** section.
 

package/src/lightning/avatar/avatar.slds.css

@@ -8,39 +8,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -50,15 +50,15 @@
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -154,7 +154,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -172,6 +172,11 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
+  /* re-assign icon color hook for avatar */
+  :host([data-render-mode="shadow"]) {
+    --sds-c-icon-color-background: var(--slds-c-avatar-color-background);
+  }
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -242,19 +247,13 @@
   :host([data-render-mode="shadow"]) .slds-avatar__initials {
     display: flex;
     justify-content: center;
-    -ms-flex-line-pack: center;
     align-content: center;
     align-items: center;
     margin: auto;
     color: var(--slds-c-avatar-text-color);
     height: 100%;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    background-color: var(
-      --slds-c-avatar-color-background,
-      var(--sds-c-icon-color-background, var(--sds-g-color-brand-base-50, #0176d3))
-    );
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
+    background-color: var(--slds-c-avatar-color-background, var(--sds-g-color-brand-base-50, #0176d3));
   }
 
   :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {

package/src/lightning/badge/__docs__/badge.md

@@ -90,7 +90,7 @@ Use SLDS styling hooks to customize the component's styles. For example, specify
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/badges/#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-badge`, see the **Source Code** section.
 

package/src/lightning/barcodeScanner/__docs__/barcodeScanner.md

@@ -1,4 +1,4 @@
-The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_barcodescanner_in_a_lightning_component) in the Lightning Web Components Developer Guide.
+The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/platform/lwc/guide/use-barcodescanner-in-a-lightning-component) in the Lightning Web Components Developer Guide.
 
 ```html
 <template>
@@ -29,7 +29,7 @@ To enable continuous scanning, set the `enable-continuous-scan` attribute.
 
 #### Scanner Options
 
-The BarcodeScanner API for `lightning-barcode-scanner` supports various scanner options. For the list of barcode scanner option properties, see [BarcodeScannerOptions](docs/component-library/documentation/en/lwc/lwc.reference_lightning_barcodescanner_data_types) in the Lightning Web Components Developer Guide.
+The BarcodeScanner API for `lightning-barcode-scanner` supports various scanner options. For the list of barcode scanner option properties, see [BarcodeScannerOptions](https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-barcodescanner-data-types) in the Lightning Web Components Developer Guide.
 
 You can configure various scanner options for a scanning session. For example, if you want your component to support only a specific set of barcode types, specify the types as a list in the `barcodeTypes` property. If you want to modify the size of the scanner camera view, specify the size in the `scannerSize` property. In this example, the barcode scanner supports only the specified types `CODE_128`,`EAN_13`, and `QR`, and will ignore the other types, and the barcode scanner camera view is changed to `LARGE`.