lightning-base-components 1.28.7-alpha → 1.28.8-alpha

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

@@ -16,11 +16,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 :host([data-render-mode="shadow"]) [part~='button'] {
   display: inline-flex;
-  gap: var(--sds-c-button-spacing-gap, var(--sds-s-button-spacing-gap));
-  background: var(--sds-c-button-color-background, var(--sds-s-button-color-background));
-  color: var(--sds-c-button-text-color, var(--sds-s-button-color));
-  font-weight: var(--sds-c-button-font-weight, var(--sds-s-button-font-weight));
-  font-size: var(--sds-c-button-font-size, var(--sds-s-button-font-size, inherit));
+  gap: var(--sds-c-button-spacing-gap, var(--slds-s-button-spacing-gap));
+  background: var(--sds-c-button-color-background, var(--slds-s-button-color-background));
+  color: var(--sds-c-button-text-color, var(--slds-s-button-color));
+  font-weight: var(--sds-c-button-font-weight, var(--slds-s-button-font-weight));
+  font-size: var(--sds-c-button-font-size, var(--slds-s-button-font-size, inherit));
   line-height: var(--sds-c-button-font-lineheight);
   height: var(--sds-c-button-sizing-height);
   width: var(--sds-c-button-sizing-width);
@@ -28,62 +28,62 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-spacing-inlinestart,
     var(
       --sds-c-button-spacing-inline,
-      var(--sds-c-button-spacing, var(--sds-s-button-spacing-inline, var(--sds-s-button-spacing)))
+      var(--sds-c-button-spacing, var(--slds-s-button-spacing-inline, var(--slds-s-button-spacing)))
     )
   );
   padding-inline-end: var(
     --sds-c-button-spacing-inlineend,
     var(
       --sds-c-button-spacing-inline,
-      var(--sds-c-button-spacing, var(--sds-s-button-spacing-inline, var(--sds-s-button-spacing)))
+      var(--sds-c-button-spacing, var(--slds-s-button-spacing-inline, var(--slds-s-button-spacing)))
     )
   );
   padding-block-start: var(
     --sds-c-button-spacing-blockstart,
     var(
       --sds-c-button-spacing-block,
-      var(--sds-c-button-spacing, var(--sds-s-button-spacing-block, var(--sds-s-button-spacing)))
+      var(--sds-c-button-spacing, var(--slds-s-button-spacing-block, var(--slds-s-button-spacing)))
     )
   );
   padding-block-end: var(
     --sds-c-button-spacing-blockend,
     var(
       --sds-c-button-spacing-block,
-      var(--sds-c-button-spacing, var(--sds-s-button-spacing-block, var(--sds-s-button-spacing)))
+      var(--sds-c-button-spacing, var(--slds-s-button-spacing-block, var(--slds-s-button-spacing)))
     )
   );
-  border-width: var(--sds-c-button-sizing-border, var(--sds-s-button-sizing-border, 1px));
+  border-width: var(--sds-c-button-sizing-border, var(--slds-s-button-sizing-border, 1px));
   border-style: solid;
-  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, currentColor));
+  border-color: var(--sds-c-button-color-border, var(--slds-s-button-color-border, currentColor));
   border-start-start-radius: var(
     --sds-c-button-radius-border-startstart,
     var(
       --sds-c-button-radius-border,
-      var(--sds-s-button-radius-border-startstart, var(--sds-s-button-radius-border))
+      var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
     )
   );
   border-start-end-radius: var(
     --sds-c-button-radius-border-startend,
     var(
       --sds-c-button-radius-border,
-      var(--sds-s-button-radius-border-startend, var(--sds-s-button-radius-border))
+      var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
     )
   );
   border-end-start-radius: var(
     --sds-c-button-radius-border-endstart,
     var(
       --sds-c-button-radius-border,
-      var(--sds-s-button-radius-border-endstart, var(--sds-s-button-radius-border))
+      var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
     )
   );
   border-end-end-radius: var(
     --sds-c-button-radius-border-endend,
     var(
       --sds-c-button-radius-border,
-      var(--sds-s-button-radius-border-endend, var(--sds-s-button-radius-border))
+      var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
     )
   );
-  box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
+  box-shadow: var(--sds-c-button-shadow, var(--slds-s-button-shadow));
   text-decoration: var(--sds-c-button-font-decoration);
   white-space: normal;
   user-select: none;
@@ -97,16 +97,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  * Fallback order: Hover > Base
  */
 :host([data-render-mode="shadow"]) [part~='button']:hover {
-  --sds-c-button-text-color: var(--sds-c-button-text-color-hover, var(--sds-s-button-color-hover, revert));
+  --sds-c-button-text-color: var(--sds-c-button-text-color-hover, var(--slds-s-button-color-hover, revert));
   --sds-c-button-color-background: var(
     --sds-c-button-color-background-hover,
-    var(--sds-s-button-color-background-hover, revert)
+    var(--slds-s-button-color-background-hover, revert)
   );
   --sds-c-button-color-border: var(
     --sds-c-button-color-border-hover,
-    var(--sds-s-button-color-border-hover, revert)
+    var(--slds-s-button-color-border-hover, revert)
   );
-  --sds-c-button-shadow: var(--sds-c-button-shadow-hover, var(--sds-s-button-shadow-hover, revert));
+  --sds-c-button-shadow: var(--sds-c-button-shadow-hover, var(--slds-s-button-shadow-hover, revert));
 
   cursor: pointer;
 }
@@ -118,14 +118,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='button']:focus {
   --sds-c-button-color-background: var(
     --sds-c-button-color-background-focus,
-    var(--sds-s-button-color-background-focus, revert)
+    var(--slds-s-button-color-background-focus, revert)
   );
   --sds-c-button-color-border: var(
     --sds-c-button-color-border-focus,
-    var(--sds-s-button-color-border-focus, revert)
+    var(--slds-s-button-color-border-focus, revert)
   );
-  --sds-c-button-text-color: var(--sds-c-button-text-color-focus, var(--sds-s-button-color-focus, revert));
-  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, revert));
+  --sds-c-button-text-color: var(--sds-c-button-text-color-focus, var(--slds-s-button-color-focus, revert));
+  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--slds-s-button-shadow-focus, revert));
 
   outline: 0;
 }
@@ -137,16 +137,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  * @TODO: keep this order (no hover) so active has feedback or go all out?
  */
 :host([data-render-mode="shadow"]) [part~='button']:active {
-  --sds-c-button-text-color: var(--sds-c-button-text-color-active, var(--sds-s-button-color-active, revert));
+  --sds-c-button-text-color: var(--sds-c-button-text-color-active, var(--slds-s-button-color-active, revert));
   --sds-c-button-color-background: var(
     --sds-c-button-color-background-active,
-    var(--sds-s-button-color-background-active, revert)
+    var(--slds-s-button-color-background-active, revert)
   );
   --sds-c-button-color-border: var(
     --sds-c-button-color-border-active,
-    var(--sds-s-button-color-border-active, revert)
+    var(--slds-s-button-color-border-active, revert)
   );
-  --sds-c-button-shadow: var(--sds-c-button-shadow-active, var(--sds-s-button-shadow-active, revert));
+  --sds-c-button-shadow: var(--sds-c-button-shadow-active, var(--slds-s-button-shadow-active, revert));
 }
 /**
  * Disabled button styles

package/src/lightning/primitiveFigure/primitiveFigure.css

@@ -0,0 +1,64 @@
+/**
+ * Normalize figure html
+ */
+figure {
+    margin: 0;
+}
+
+svg {
+    width: 100%;
+    height: 100%;
+}
+
+/**
+* Note:
+* These classes and styling hooks are created to support
+* lighting components to enable light/dark mode.
+*/
+.sds-illustration_fill-tone-1 {
+    fill: var(--sds-c-illustration-color-tone-1);
+}
+
+.sds-illustration_fill-tone-2 {
+    fill: var(--sds-c-illustration-color-tone-2);
+}
+
+.sds-illustration_fill-tone-3 {
+    fill: var(--sds-c-illustration-color-tone-3);
+}
+
+.sds-illustration_fill-tone-4 {
+    fill: var(--sds-c-illustration-color-tone-4);
+}
+
+.sds-illustration_stroke-tone-1 {
+    stroke: var(--sds-c-illustration-color-tone-1);
+}
+
+.sds-illustration_stroke-tone-2 {
+    stroke: var(--sds-c-illustration-color-tone-2);
+}
+
+.sds-illustration_stroke-tone-3 {
+    stroke: var(--sds-c-illustration-color-tone-3);
+}
+
+.sds-illustration_stroke-tone-4 {
+    stroke: var(--sds-c-illustration-color-tone-4);
+}
+
+.sds-illustration_fill-gradient-start {
+    stop-color: var(--sds-c-illustration-color-gradient-start);
+}
+
+.sds-illustration_fill-gradient-end {
+    stop-color: var(--sds-c-illustration-color-gradient-end);
+}
+
+.sds-illustration_fill-gradient-start-2 {
+  stop-color: var(--sds-c-illustration-color-gradient-start-2);
+}
+
+.sds-illustration_fill-gradient-end-2 {
+  stop-color: var(--sds-c-illustration-color-gradient-end-2);
+}

package/src/lightning/primitiveFigure/primitiveFigure.d.ts

@@ -0,0 +1,33 @@
+export default class LightningPrimitiveFigure extends LightningElement {
+    static shadowSupportMode: string;
+    _set: any;
+    _symbol: any;
+    _figureSets: Map<any, any>;
+    _ariaHidden: any;
+    _generatedFigure: boolean;
+    set figureSets(value: any[]);
+    get figureSets(): any[];
+    set set(value: string);
+    get set(): string;
+    set symbol(value: string);
+    get symbol(): string;
+    getFigureSet(name: string): any;
+    getFigureUrl(figureSet: any, set: string, symbol: string): any;
+    getSymbolParams(set: any, symbol: string): {
+        figureSet: any;
+        url: any;
+    };
+    hasFigureConfigured(): boolean;
+    isValidSvgUrl(url: string): boolean;
+    isValidContentType(contentType: string): boolean;
+    fetchFigure(url: any): Promise<{
+        url: any;
+        svg: string | SVGSVGElement;
+    }>;
+    createFigure(): Promise<void>;
+    hasSlottedChildren(): boolean;
+    handleSlotChange(): Promise<void>;
+    renderedCallback(): Promise<void>;
+}
+import { LightningElement } from 'lwc';
+//# sourceMappingURL=primitiveFigure.d.ts.map

package/src/lightning/primitiveFigure/primitiveFigure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitiveFigure.d.ts","sourceRoot":"","sources":["../../../../../modules/lightning/primitiveFigure/primitiveFigure.js"],"names":[],"mappings":"AAKA;IACI,iCAAoC;IAEpC,UAAK;IACL,aAAQ;IACR,2BAAwB;IACxB,iBAAY;IACZ,0BAAyB;IAWzB,6BAEC;IAND,wBAGC;IAcD,uBAGC;IAPD,kBAGC;IAeD,0BAGC;IAPD,qBAGC;IAWD,mBAFW,MAAM,OAIhB;IAQD,kCAHW,MAAM,UACN,MAAM,OAMhB;IAOD,kCAFW,MAAM;;;MAUhB;IAOD,uBAFa,OAAO,CAInB;IASD,mBAHW,MAAM,GACJ,OAAO,CAKnB;IAQD,gCAHW,MAAM,GACJ,OAAO,CAInB;IAED;;;OA+CC;IAKD,8BAwBC;IAOD,sBAFa,OAAO,CAKnB;IAKD,kCAuBC;IAKD,kCA2BC;CACJ;iCA7QqC,KAAK"}

package/src/lightning/primitiveFigure/primitiveFigure.html

@@ -0,0 +1,5 @@
+<template>
+  <figure lwc:ref="illustration" part="illustration" set={set} symbol={symbol}>
+    <slot onslotchange={handleSlotChange}></slot>
+  </figure>
+</template>

package/src/lightning/primitiveFigure/primitiveFigure.js

@@ -0,0 +1,155 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { LightningElement, api } from 'lwc';
+import { reflectAttribute } from 'lightning/primitiveUtils';
+const sdsFigureParser = new DOMParser();
+export default class LightningPrimitiveFigure extends LightningElement {
+    static shadowSupportMode = 'native';
+    _set;
+    _symbol;
+    _figureSets = new Map();
+    _ariaHidden;
+    _generatedFigure = false;
+    @api
+    get figureSets() {
+        return this._figureSets;
+    }
+    set figureSets(value) {
+        this._figureSets = new Map(value.map((item) => [item.name, item]));
+    }
+    @api
+    get set() {
+        return this._set;
+    }
+    set set(value) {
+        this._set = value;
+        reflectAttribute(this, 'set', this._set);
+    }
+    @api
+    get symbol() {
+        return this._symbol;
+    }
+    set symbol(value) {
+        this._symbol = value;
+        reflectAttribute(this, 'symbol', this._symbol);
+    }
+    getFigureSet(name) {
+        return this._figureSets.get(name);
+    }
+    getFigureUrl(figureSet, set, symbol) {
+        if (figureSet && symbol) {
+            return figureSet.resolver(set, symbol);
+        }
+    }
+    getSymbolParams(set, symbol) {
+        const figureSet = this.getFigureSet(set);
+        const url = this.getFigureUrl(figureSet, set, symbol);
+        return {
+            figureSet,
+            url,
+        };
+    }
+    hasFigureConfigured() {
+        return Boolean(this._set && this._symbol);
+    }
+    isValidSvgUrl(url) {
+        const svgUrlPattern = /\.svg[?]?/;
+        return svgUrlPattern.test(url);
+    }
+    isValidContentType(contentType) {
+        return contentType && contentType.includes('image/svg+xml');
+    }
+    async fetchFigure(url) {
+        try {
+            if (!this.isValidSvgUrl(url)) {
+                throw new Error(`Invalid URL: ${url}. Only SVG files are allowed.`);
+            }
+            const response = await fetch(url);
+            if (response.ok) {
+                const contentType = response.headers.get('content-type');
+                if (!this.isValidContentType(contentType)) {
+                    throw new Error(`Invalid content type: ${contentType}. Only SVG files are allowed.`);
+                }
+                const fetchText = await response.text();
+                const parsedFetchDoc = sdsFigureParser.parseFromString(fetchText, 'text/html');
+                const parsedSvgEl = parsedFetchDoc.body.querySelector('svg');
+                const result = {
+                    url: url,
+                    svg: parsedSvgEl &&
+                        parsedSvgEl.tagName.toLowerCase() === 'svg'
+                        ? parsedSvgEl
+                        : '',
+                };
+                return result;
+            }
+            else {
+                throw new Error(`There's an error: Fetch response.ok is false.`);
+            }
+        }
+        catch (error) {
+            throw new Error(error.message ||
+                `Network error: There's an error in the fetch API.`);
+        }
+    }
+    async createFigure() {
+        const { figureSet, url } = this.getSymbolParams(this._set, this._symbol);
+        if (figureSet && url) {
+            const slotContainer = !this._generatedFigure
+                ? this.refs.illustration
+                : this.template.querySelector(`svg`);
+            const figure = await this.fetchFigure(url);
+            !this._generatedFigure
+                ? slotContainer.appendChild(figure.svg)
+                : slotContainer.replaceWith(figure.svg);
+            this._generatedFigure = true;
+        }
+        else {
+            throw new Error(`Unable to create a figure using set: ${this._set}, symbol: ${this._symbol} and URL: ${url}. Double check your registered figureSet name(s) and path(s)`);
+        }
+    }
+    hasSlottedChildren() {
+        const slot = this.template.querySelector('slot');
+        return slot.assignedNodes({ flatten: true }).length !== 0;
+    }
+    async handleSlotChange() {
+        if (this._generatedFigure) {
+            this.template.querySelector('svg').remove();
+            this._generatedFigure = false;
+        }
+        try {
+            if (!this.hasSlottedChildren() &&
+                !this._generatedFigure &&
+                this.hasFigureConfigured()) {
+                await this.createFigure();
+            }
+        }
+        catch (error) {
+            console.error(error.message ||
+                'Error: Unable to create sds-figure. There is no slotted figure. Check all required APIs.');
+        }
+    }
+    async renderedCallback() {
+        if (!this.hasSlottedChildren() && this.hasFigureConfigured()) {
+            try {
+                await this.createFigure();
+            }
+            catch (error) {
+                this.template
+                    .querySelectorAll('.slds-figure_error')
+                    .forEach((el) => el.remove());
+                const div = document.createElement('div');
+                div.classList.add('slds-figure_error');
+                div.textContent = `Error: ${error.message || 'Could not create figure'}`;
+                this.template.appendChild(div);
+            }
+        }
+        else if (!this.hasSlottedChildren() && !this.hasFigureConfigured()) {
+            console.error('Error: Unable to create sds-figure. Check all required APIs.');
+        }
+        this.ariaHidden = this.ariaLabel ? 'false' : 'true';
+        this.role = 'img';
+    }
+}

package/src/lightning/primitiveFigure/primitiveFigure.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+</LightningComponentBundle>

package/src/lightning/primitiveHeaderFactory/input-checkbox.slds.css

@@ -12,7 +12,7 @@
 :host([data-render-mode="shadow"]) [part~='input-checkbox'] {
   display: inline-flex;
   align-items: center;
-  gap: var(--sds-c-inputcheckbox-spacing-gap, var(--sds-s-input-spacing-gap));
+  gap: var(--sds-c-inputcheckbox-spacing-gap, var(--slds-s-input-spacing-gap));
 }
 /**
  * The visual container of the checkbox indicator
@@ -22,12 +22,12 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  background-color: var(--sds-c-inputcheckbox-color-background, var(--sds-s-input-color-background));
+  background-color: var(--sds-c-inputcheckbox-color-background, var(--slds-s-input-color-background));
   box-shadow: var(--sds-c-inputcheckbox-shadow);
   width: var(--sds-c-inputcheckbox-sizing, 1rem);
   height: var(--sds-c-inputcheckbox-sizing, 1rem);
-  border: var(--sds-c-inputcheckbox-sizing-border, var(--sds-s-input-sizing-border, 1px)) solid
-    var(--sds-c-inputcheckbox-color-border, var(--sds-s-input-color-border, currentColor));
+  border: var(--sds-c-inputcheckbox-sizing-border, var(--slds-s-input-sizing-border, 1px)) solid
+    var(--sds-c-inputcheckbox-color-border, var(--slds-s-input-color-border, currentColor));
   border-radius: var(--sds-c-inputcheckbox-radius-border);
 }
 /**
@@ -37,15 +37,15 @@
 [part='checkbox']:has(:checked):has(:focus) {
   --sds-c-inputcheckbox-shadow: var(
     --sds-c-inputcheckbox-shadow-focus,
-    var(--sds-s-input-shadow-focus, revert)
+    var(--slds-s-input-shadow-focus, revert)
   );
   --sds-c-inputcheckbox-color-background: var(
     --sds-c-inputcheckbox-color-background-focus,
-    var(--sds-s-input-color-background-focus, revert)
+    var(--slds-s-input-color-background-focus, revert)
   );
   --sds-c-inputcheckbox-color-border: var(
     --sds-c-inputcheckbox-color-border-focus,
-    var(--sds-s-input-color-border-focus, revert)
+    var(--slds-s-input-color-border-focus, revert)
   );
 }
 /**
@@ -70,10 +70,10 @@
 :host([data-render-mode="shadow"]) [part='mark'] {
   display: inline-flex;
   opacity: 0;
-  color: var(--sds-c-inputcheckbox-mark-color-foreground, var(--sds-s-mark-color-foreground));
-  background-color: var(--sds-c-inputcheckbox-mark-color-background, var(--sds-s-mark-color-background));
-  width: var(--sds-c-inputcheckbox-mark-sizing, var(--sds-s-mark-sizing, 1em));
-  height: var(--sds-c-inputcheckbox-mark-sizing, var(--sds-s-mark-sizing, 1em));
+  color: var(--sds-c-inputcheckbox-mark-color-foreground, var(--slds-s-mark-color-foreground));
+  background-color: var(--sds-c-inputcheckbox-mark-color-background, var(--slds-s-mark-color-background));
+  width: var(--sds-c-inputcheckbox-mark-sizing, var(--slds-s-mark-sizing, 1em));
+  height: var(--sds-c-inputcheckbox-mark-sizing, var(--slds-s-mark-sizing, 1em));
 }
 /**
  * When the label or checkbox is clicked, a checked state is applied to the host element
@@ -83,7 +83,7 @@
 
   --sds-c-inputcheckbox-mark-color-background: var(
     --sds-c-inputcheckbox-mark-color-background-checked,
-    var(--sds-s-mark-color-background-checked, revert)
+    var(--slds-s-mark-color-background-checked, revert)
   );
 }
 /**
@@ -103,8 +103,8 @@
  * The label of the checkbox
  */
 :host([data-render-mode="shadow"]) [part~='label'] {
-  color: var(--sds-c-inputcheckbox-label-color, var(--sds-s-label-color));
-  font-size: var(--sds-c-inputcheckbox-label-font-size, var(--sds-s-label-font-size));
+  color: var(--sds-c-inputcheckbox-label-color, var(--slds-s-label-color));
+  font-size: var(--sds-c-inputcheckbox-label-font-size, var(--slds-s-label-font-size));
 }
 /**
  * If told, the label will be hidden from view
@@ -128,23 +128,23 @@
  * This prevents box-model customizations from being applied, in the case of no children
  */
 :host([data-render-mode="shadow"]) [part='help-text visible'] {
-  font-size: var(--sds-c-inputcheckbox-helptext-font-size, var(--sds-s-helptext-font-size));
-  color: var(--sds-c-inputcheckbox-helptext-text-color, var(--sds-s-helptext-color));
+  font-size: var(--sds-c-inputcheckbox-helptext-font-size, var(--slds-s-helptext-font-size));
+  color: var(--sds-c-inputcheckbox-helptext-text-color, var(--slds-s-helptext-color));
   padding-inline-start: var(
     --sds-c-inputcheckbox-helptext-spacing-inlinestart,
-    var(--sds-c-inputcheckbox-helptext-spacing-inline, var(--sds-s-helptext-spacing))
+    var(--sds-c-inputcheckbox-helptext-spacing-inline, var(--slds-s-helptext-spacing))
   );
   padding-inline-end: var(
     --sds-c-inputcheckbox-helptext-spacing-inlineend,
-    var(--sds-c-inputcheckbox-helptext-spacing-inline, var(--sds-s-helptext-spacing))
+    var(--sds-c-inputcheckbox-helptext-spacing-inline, var(--slds-s-helptext-spacing))
   );
   padding-block-start: var(
     --sds-c-inputcheckbox-helptext-spacing-blockstart,
-    var(--sds-c-inputcheckbox-helptext-spacing-block, var(--sds-s-helptext-spacing))
+    var(--sds-c-inputcheckbox-helptext-spacing-block, var(--slds-s-helptext-spacing))
   );
   padding-block-end: var(
     --sds-c-inputcheckbox-helptext-spacing-blockend,
-    var(--sds-c-inputcheckbox-helptext-spacing-block, var(--sds-s-helptext-spacing))
+    var(--sds-c-inputcheckbox-helptext-spacing-block, var(--slds-s-helptext-spacing))
   );
 }
 /**

package/src/lightning/primitiveIcon/icon.slds.css

@@ -14,33 +14,33 @@
 :host([data-render-mode="shadow"]) [part~='boundary'] {
   padding-block-start: var(
     --sds-c-icon-spacing-blockstart,
-    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--slds-s-icon-spacing)))
   );
   padding-block-end: var(
     --sds-c-icon-spacing-blockend,
-    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--slds-s-icon-spacing)))
   );
   padding-inline-start: var(
     --sds-c-icon-spacing-inlinestart,
-    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--slds-s-icon-spacing)))
   );
   padding-inline-end: var(
     --sds-c-icon-spacing-inlineend,
-    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--slds-s-icon-spacing)))
   );
-  border-radius: var(--sds-c-icon-radius-border, var(--sds-s-icon-radius-border));
-  border-width: var(--sds-c-icon-sizing-border, var(--sds-s-icon-sizing-border));
+  border-radius: var(--sds-c-icon-radius-border, var(--slds-s-icon-radius-border));
+  border-width: var(--sds-c-icon-sizing-border, var(--slds-s-icon-sizing-border));
   border-style: solid;
 
   /* If undefined, border-color resolves to currentColor, so we need to explicitly set to transparent */
-  border-color: var(--sds-c-icon-color-border, var(--sds-s-icon-color-border, transparent));
-  background-color: var(--sds-c-icon-color-background, var(--sds-s-icon-color-background));
+  border-color: var(--sds-c-icon-color-border, var(--slds-s-icon-color-border, transparent));
+  background-color: var(--sds-c-icon-color-background, var(--slds-s-icon-color-background));
 }
 :host([data-render-mode="shadow"]) [part~='icon'] {
   display: flex; /* See line #5 */
-  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
-  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
-  color: var(--sds-c-icon-color-foreground, var(--sds-s-icon-color-foreground));
+  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing, var(--slds-s-icon-sizing)));
+  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing, var(--slds-s-icon-sizing)));
+  color: var(--sds-c-icon-color-foreground, var(--slds-s-icon-color-foreground));
 }
 /**
    * Normalize svgs and control width/height with Styling Hooks