diff --git a/force-app/main/default/lwc/apiMethod/apiMethod.css b/force-app/main/default/lwc/apiMethod/apiMethod.css
index 9bd5be7bc..014c9d321 100644
--- a/force-app/main/default/lwc/apiMethod/apiMethod.css
+++ b/force-app/main/default/lwc/apiMethod/apiMethod.css
@@ -1,17 +1,5 @@
-c-clock {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    padding: 14px var(--lwc-varSpacingXSmall, 8px)
-        var(--lwc-varSpacingXSmall, 8px) var(--lwc-varSpacingXSmall, 8px);
-    margin-top: var(--lwc-varSpacingSmall, 12px);
-}
-
-c-clock:before {
-    content: 'c-clock';
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -10px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/apiMethod/apiMethod.html b/force-app/main/default/lwc/apiMethod/apiMethod.html
index 7ac100411..3ba20c012 100644
--- a/force-app/main/default/lwc/apiMethod/apiMethod.html
+++ b/force-app/main/default/lwc/apiMethod/apiMethod.html
@@ -5,7 +5,10 @@
                 label="Refresh Time"
                 onclick={handleRefresh}
             ></lightning-button>
-            <c-clock class="slds-show slds-is-relative"></c-clock>
+            <fieldset class="slds-var-p-around_x-small">
+                <legend>c-clock</legend>
+                <c-clock></c-clock>
+            </fieldset>
         </div>
 
         <c-view-source source="lwc/apiMethod" slot="footer">
diff --git a/force-app/main/default/lwc/apiProperty/apiProperty.css b/force-app/main/default/lwc/apiProperty/apiProperty.css
index 03a3a06a7..014c9d321 100644
--- a/force-app/main/default/lwc/apiProperty/apiProperty.css
+++ b/force-app/main/default/lwc/apiProperty/apiProperty.css
@@ -1,17 +1,5 @@
-c-chart-bar {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    padding: 10px var(--lwc-varSpacingXxxSmall, 2px)
-        var(--lwc-varSpacingXxxSmall, 2px) var(--lwc-varSpacingXxxSmall, 2px);
-    margin-top: var(--lwc-varSpacingSmall, 12px);
-}
-
-c-chart-bar:before {
-    content: 'c-chart-bar';
-    color: var(--slds-g-color-neutral-base-90, #dddbda);
-    position: absolute;
-    top: -10px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/apiProperty/apiProperty.html b/force-app/main/default/lwc/apiProperty/apiProperty.html
index 1c2e1d1a0..36645050b 100644
--- a/force-app/main/default/lwc/apiProperty/apiProperty.html
+++ b/force-app/main/default/lwc/apiProperty/apiProperty.html
@@ -9,10 +9,10 @@
                 value={percentage}
                 onchange={handlePercentageChange}
             ></lightning-input>
-            <c-chart-bar
-                class="slds-show slds-is-relative"
-                percentage={percentage}
-            ></c-chart-bar>
+            <fieldset class="slds-var-p-around_x-small">
+                <legend>c-chart-bar</legend>
+                <c-chart-bar percentage={percentage}></c-chart-bar>
+            </fieldset>
         </div>
 
         <c-view-source source="lwc/apiProperty" slot="footer">
diff --git a/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.css b/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.css
index 220593b5b..014c9d321 100644
--- a/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.css
+++ b/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.css
@@ -1,17 +1,5 @@
-.todo-list {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    padding: 14px var(--lwc-varSpacingXSmall, 8px)
-        var(--lwc-varSpacingXSmall, 8px) var(--lwc-varSpacingXSmall, 8px);
-    margin-top: var(--lwc-varSpacingSmall, 12px);
-}
-
-.todo-list:before {
-    content: 'c-todo-list';
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -10px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.html b/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.html
index 719a5adc7..bb4633284 100644
--- a/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.html
+++ b/force-app/main/default/lwc/apiSetterGetter/apiSetterGetter.html
@@ -22,9 +22,10 @@
                     onclick={handleSave}
                 ></lightning-button>
             </div>
-            <div class="todo-list slds-is-relative">
+            <fieldset class="slds-var-p-around_x-small">
+                <legend>c-todo-list</legend>
                 <c-todo-list todos={todos}></c-todo-list>
-            </div>
+            </fieldset>
         </div>
 
         <c-view-source source="lwc/apiSetterGetter" slot="footer">
diff --git a/force-app/main/default/lwc/apiSpread/apiSpread.css b/force-app/main/default/lwc/apiSpread/apiSpread.css
index 03ec69f7f..014c9d321 100644
--- a/force-app/main/default/lwc/apiSpread/apiSpread.css
+++ b/force-app/main/default/lwc/apiSpread/apiSpread.css
@@ -1,18 +1,5 @@
-c-child {
-    position: relative;
-    border: solid 1px #ecebea;
-    border-radius: 4px;
-    display: block;
-    padding: 14px 8px 8px 8px;
-    margin-top: 16px;
-}
-
-c-child:before {
-    content: 'c-child';
-    color: #dddbda;
-    position: absolute;
-    top: -16px;
-    left: 4px;
-    background-color: #ffffff;
-    padding: 0 4px;
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/apiSpread/apiSpread.html b/force-app/main/default/lwc/apiSpread/apiSpread.html
index 061201b2d..33e3647da 100644
--- a/force-app/main/default/lwc/apiSpread/apiSpread.html
+++ b/force-app/main/default/lwc/apiSpread/apiSpread.html
@@ -1,19 +1,24 @@
 <template>
     <lightning-card title="ApiSpread" icon-name="custom:custom14">
         <div class="slds-var-m-around_medium">
-            <lightning-input
-                name="firstName"
-                label="First Name"
-                onchange={handleChange}
-                value={props.firstName}
-            ></lightning-input>
-            <lightning-input
-                name="lastName"
-                label="Last Name"
-                onchange={handleChange}
-                value={props.lastName}
-            ></lightning-input>
-            <c-child lwc:spread={props}></c-child>
+            <div class="slds-var-m-bottom_small">
+                <lightning-input
+                    name="firstName"
+                    label="First Name"
+                    onchange={handleChange}
+                    value={props.firstName}
+                ></lightning-input>
+                <lightning-input
+                    name="lastName"
+                    label="Last Name"
+                    onchange={handleChange}
+                    value={props.lastName}
+                ></lightning-input>
+            </div>
+            <fieldset class="slds-var-p-around_x-small">
+                <legend>c-child</legend>
+                <c-child lwc:spread={props}></c-child>
+            </fieldset>
         </div>
 
         <c-view-source source="lwc/apiSpread" slot="footer">
diff --git a/force-app/main/default/lwc/chartBar/chartBar.css b/force-app/main/default/lwc/chartBar/chartBar.css
index fe464ca13..f2bddeebc 100644
--- a/force-app/main/default/lwc/chartBar/chartBar.css
+++ b/force-app/main/default/lwc/chartBar/chartBar.css
@@ -4,7 +4,7 @@
 }
 
 .bar {
-    margin-left: 4px;
+    margin-left: var(--slds-g-spacing-1, 4px);
     height: 36px;
     background-color: #f5b041;
 }
diff --git a/force-app/main/default/lwc/compositionBasics/compositionBasics.css b/force-app/main/default/lwc/compositionBasics/compositionBasics.css
index d25793874..014c9d321 100644
--- a/force-app/main/default/lwc/compositionBasics/compositionBasics.css
+++ b/force-app/main/default/lwc/compositionBasics/compositionBasics.css
@@ -1 +1,5 @@
-@import 'c/cssLibrary';
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
+}
diff --git a/force-app/main/default/lwc/compositionBasics/compositionBasics.html b/force-app/main/default/lwc/compositionBasics/compositionBasics.html
index 71d356967..8f427ac9b 100644
--- a/force-app/main/default/lwc/compositionBasics/compositionBasics.html
+++ b/force-app/main/default/lwc/compositionBasics/compositionBasics.html
@@ -1,10 +1,13 @@
 <template>
     <lightning-card title="CompositionBasics" icon-name="custom:custom57">
         <div class="slds-var-m-around_medium">
-            <c-contact-tile
-                class="slds-show slds-is-relative"
-                contact={contact}
-            ></c-contact-tile>
+            <fieldset class="slds-var-p-horizontal_x-small">
+                <legend>c-contact-tile</legend>
+                <c-contact-tile
+                    class="slds-show slds-is-relative"
+                    contact={contact}
+                ></c-contact-tile>
+            </fieldset>
         </div>
 
         <c-view-source source="lwc/compositionBasics" slot="footer">
diff --git a/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.css b/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.css
index dfe564e0c..014c9d321 100644
--- a/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.css
+++ b/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.css
@@ -1,28 +1,5 @@
-lightning-input,
-c-contact-tile {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    padding: var(--lwc-varSpacingXxxSmall, 2px);
-}
-
-c-contact-tile {
-    margin: var(--lwc-borderWidthThin, 1px) 0;
-}
-
-lightning-input:before,
-c-contact-tile:before {
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -9px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
-}
-
-lightning-input:before {
-    content: 'lightning-input';
-}
-
-c-contact-tile:before {
-    content: 'c-contact-tile';
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.html b/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.html
index eea98a0df..2c8302206 100644
--- a/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.html
+++ b/force-app/main/default/lwc/compositionContactSearch/compositionContactSearch.html
@@ -4,19 +4,24 @@
         icon-name="custom:custom57"
     >
         <div class="slds-var-m-around_medium">
-            <lightning-input
-                type="search"
-                onchange={handleKeyChange}
-                class="slds-show slds-is-relative slds-var-m-bottom_small"
-                label="Search"
-            ></lightning-input>
+            <fieldset class="slds-var-p-around_x-small">
+                <legend>lightning-input</legend>
+                <lightning-input
+                    type="search"
+                    onchange={handleKeyChange}
+                    class="slds-show slds-is-relative"
+                    label="Search"
+                ></lightning-input>
+            </fieldset>
             <template lwc:if={contacts}>
                 <template for:each={contacts} for:item="contact">
-                    <c-contact-tile
-                        class="slds-show slds-is-relative"
+                    <fieldset
                         key={contact.Id}
-                        contact={contact}
-                    ></c-contact-tile>
+                        class="slds-var-p-horizontal_x-small"
+                    >
+                        <legend>c-contact-tile</legend>
+                        <c-contact-tile contact={contact}></c-contact-tile>
+                    </fieldset>
                 </template>
             </template>
             <template lwc:elseif={error}>
diff --git a/force-app/main/default/lwc/compositionIteration/compositionIteration.css b/force-app/main/default/lwc/compositionIteration/compositionIteration.css
index 1d849b94e..014c9d321 100644
--- a/force-app/main/default/lwc/compositionIteration/compositionIteration.css
+++ b/force-app/main/default/lwc/compositionIteration/compositionIteration.css
@@ -1,6 +1,5 @@
-@import 'c/cssLibrary';
-
-/* Other style rules for compositionIteration component */
-c-contact-tile {
-    margin: var(--lwc-borderWidthThin, 1px) 0;
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/compositionIteration/compositionIteration.html b/force-app/main/default/lwc/compositionIteration/compositionIteration.html
index 93005f877..7277d6ebd 100644
--- a/force-app/main/default/lwc/compositionIteration/compositionIteration.html
+++ b/force-app/main/default/lwc/compositionIteration/compositionIteration.html
@@ -2,11 +2,13 @@
     <lightning-card title="CompositionIteration" icon-name="custom:custom57">
         <div class="slds-var-m-around_medium">
             <template for:each={contacts} for:item="contact">
-                <c-contact-tile
-                    class="slds-show slds-is-relative"
+                <fieldset
                     key={contact.Id}
-                    contact={contact}
-                ></c-contact-tile>
+                    class="slds-var-p-horizontal_x-small"
+                >
+                    <legend>c-contact-tile</legend>
+                    <c-contact-tile contact={contact}></c-contact-tile>
+                </fieldset>
             </template>
         </div>
 
diff --git a/force-app/main/default/lwc/cssLibrary/cssLibrary.css b/force-app/main/default/lwc/cssLibrary/cssLibrary.css
deleted file mode 100644
index d2dc5faea..000000000
--- a/force-app/main/default/lwc/cssLibrary/cssLibrary.css
+++ /dev/null
@@ -1,15 +0,0 @@
-c-contact-tile {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    padding: 0 var(--lwc-varSpacingXxxSmall, 2px);
-}
-
-c-contact-tile:before {
-    content: 'c-contact-tile';
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -9px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
-}
diff --git a/force-app/main/default/lwc/cssLibrary/cssLibrary.js-meta.xml b/force-app/main/default/lwc/cssLibrary/cssLibrary.js-meta.xml
deleted file mode 100644
index 19d60835d..000000000
--- a/force-app/main/default/lwc/cssLibrary/cssLibrary.js-meta.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>65.0</apiVersion>
-    <isExposed>false</isExposed>
-</LightningComponentBundle>
diff --git a/force-app/main/default/lwc/eventBubbling/eventBubbling.css b/force-app/main/default/lwc/eventBubbling/eventBubbling.css
index cf17577c4..55cf21233 100644
--- a/force-app/main/default/lwc/eventBubbling/eventBubbling.css
+++ b/force-app/main/default/lwc/eventBubbling/eventBubbling.css
@@ -1,28 +1,16 @@
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
+}
+
 img {
-    width: var(--lwc-squareIconLargeBoundaryAlt, 80px);
-    height: var(--lwc-squareIconLargeBoundaryAlt, 80px);
-    border-radius: var(--lwc-borderRadiusCircle, 50%);
-    margin-bottom: var(--lwc-varSpacingXSmall, 8px);
+    width: var(--slds-g-sizing-12);
+    height: var(--slds-g-sizing-12);
+    border-radius: var(--slds-g-radius-border-circle);
+    margin-bottom: var(--slds-g-spacing-var-2);
 }
 
 lightning-layout-item.wide {
     min-width: 300px;
 }
-
-c-contact-list-item-bubbling {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    margin: var(--lwc-borderWidthThin, 1px) 0;
-    padding: 3px var(--lwc-varSpacingXxxSmall, 2px) 0
-        var(--lwc-varSpacingXxxSmall, 2px);
-}
-
-c-contact-list-item-bubbling:before {
-    content: 'c-contact-list-item-bubbling';
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -9px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
-}
diff --git a/force-app/main/default/lwc/eventBubbling/eventBubbling.html b/force-app/main/default/lwc/eventBubbling/eventBubbling.html
index e17d9abe0..6525ab7b4 100644
--- a/force-app/main/default/lwc/eventBubbling/eventBubbling.html
+++ b/force-app/main/default/lwc/eventBubbling/eventBubbling.html
@@ -8,11 +8,16 @@
                     oncontactselect={handleContactSelect}
                 >
                     <template for:each={contacts.data} for:item="contact">
-                        <c-contact-list-item-bubbling
-                            class="slds-show slds-is-relative"
+                        <fieldset
                             key={contact.Id}
-                            contact={contact}
-                        ></c-contact-list-item-bubbling>
+                            class="slds-var-p-horizontal_x-small"
+                        >
+                            <legend>c-contact-list-item-bubbling</legend>
+                            <c-contact-list-item-bubbling
+                                class="slds-show slds-is-relative"
+                                contact={contact}
+                            ></c-contact-list-item-bubbling>
+                        </fieldset>
                     </template>
                 </lightning-layout-item>
                 <lightning-layout-item class="slds-var-m-left_medium">
diff --git a/force-app/main/default/lwc/eventSimple/eventSimple.css b/force-app/main/default/lwc/eventSimple/eventSimple.css
index 4c52b589f..014c9d321 100644
--- a/force-app/main/default/lwc/eventSimple/eventSimple.css
+++ b/force-app/main/default/lwc/eventSimple/eventSimple.css
@@ -1,16 +1,5 @@
-c-paginator {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    padding: var(--lwc-varSpacingXSmall, 8px) var(--lwc-varSpacingXxxSmall, 2px)
-        var(--lwc-varSpacingXxxSmall, 2px) var(--lwc-varSpacingXxxSmall, 2px);
-}
-
-c-paginator:before {
-    content: 'c-paginator';
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -10px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/eventSimple/eventSimple.html b/force-app/main/default/lwc/eventSimple/eventSimple.html
index c496a4685..2f8808cdf 100644
--- a/force-app/main/default/lwc/eventSimple/eventSimple.html
+++ b/force-app/main/default/lwc/eventSimple/eventSimple.html
@@ -6,11 +6,14 @@
             >
                 Page {page}
             </p>
-            <c-paginator
-                class="slds-show slds-is-relative"
-                onprevious={handlePrevious}
-                onnext={handleNext}
-            ></c-paginator>
+            <fieldset class="slds-var-p-around_x-small">
+                <legend>c-paginator</legend>
+                <c-paginator
+                    class="slds-show slds-is-relative"
+                    onprevious={handlePrevious}
+                    onnext={handleNext}
+                ></c-paginator>
+            </fieldset>
         </div>
 
         <c-view-source source="lwc/eventSimple" slot="footer">
diff --git a/force-app/main/default/lwc/eventWithData/eventWithData.css b/force-app/main/default/lwc/eventWithData/eventWithData.css
index cfa87523d..f8bc1efe9 100644
--- a/force-app/main/default/lwc/eventWithData/eventWithData.css
+++ b/force-app/main/default/lwc/eventWithData/eventWithData.css
@@ -1,24 +1,12 @@
-img {
-    width: var(--lwc-squareIconLargeBoundaryAlt, 80px);
-    height: var(--lwc-squareIconLargeBoundaryAlt, 80px);
-    border-radius: var(--lwc-borderRadiusCircle, 50%);
-    margin-bottom: var(--lwc-varSpacingXSmall, 8px);
-}
-
-c-contact-list-item {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    margin: var(--lwc-borderWidthThin, 1px) 0;
-    padding: 3px var(--lwc-varSpacingXxxSmall, 2px) 0
-        var(--lwc-varSpacingXxxSmall, 2px);
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
 
-c-contact-list-item:before {
-    content: 'c-contact-list-item';
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -9px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
+img {
+    width: var(--slds-g-sizing-12);
+    height: var(--slds-g-sizing-12);
+    border-radius: var(--slds-g-radius-border-circle);
+    margin-bottom: var(--slds-g-spacing-var-2);
 }
diff --git a/force-app/main/default/lwc/eventWithData/eventWithData.html b/force-app/main/default/lwc/eventWithData/eventWithData.html
index 4e4d1b639..1516e4a96 100644
--- a/force-app/main/default/lwc/eventWithData/eventWithData.html
+++ b/force-app/main/default/lwc/eventWithData/eventWithData.html
@@ -5,12 +5,17 @@
                 <lightning-layout-item>
                     <!-- c-contact-list-item emits a non-bubbling event so each element must have a listener-->
                     <template for:each={contacts.data} for:item="contact">
-                        <c-contact-list-item
-                            class="slds-show slds-is-relative"
+                        <fieldset
                             key={contact.Id}
-                            contact={contact}
-                            onselect={handleSelect}
-                        ></c-contact-list-item>
+                            class="slds-var-p-horizontal_x-small"
+                        >
+                            <legend>c-contact-list-item</legend>
+                            <c-contact-list-item
+                                class="slds-show slds-is-relative"
+                                contact={contact}
+                                onselect={handleSelect}
+                            ></c-contact-list-item>
+                        </fieldset>
                     </template>
                 </lightning-layout-item>
                 <lightning-layout-item class="slds-var-m-left_medium">
diff --git a/force-app/main/default/lwc/helloIterator/helloIterator.css b/force-app/main/default/lwc/helloIterator/helloIterator.css
index abf6af9ab..ce14ae6d5 100644
--- a/force-app/main/default/lwc/helloIterator/helloIterator.css
+++ b/force-app/main/default/lwc/helloIterator/helloIterator.css
@@ -1,9 +1,9 @@
 .list-first {
-    border-top: var(--lwc-borderWidthThin, 1px) solid #706e6b;
+    border-top: var(--slds-g-sizing-border-1) solid #706e6b;
     padding-top: 5px;
 }
 
 .list-last {
-    border-bottom: var(--lwc-borderWidthThin, 1px) solid #706e6b;
+    border-bottom: var(--slds-g-sizing-border-1) solid #706e6b;
     padding-bottom: 5px;
 }
diff --git a/force-app/main/default/lwc/lightDomQuery/lightDomQuery.css b/force-app/main/default/lwc/lightDomQuery/lightDomQuery.css
index e274c8897..014c9d321 100644
--- a/force-app/main/default/lwc/lightDomQuery/lightDomQuery.css
+++ b/force-app/main/default/lwc/lightDomQuery/lightDomQuery.css
@@ -1,16 +1,5 @@
-c-light-dom-query-child {
-    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
-    border-radius: var(--lwc-borderRadiusMedium, 4px);
-    padding: var(--lwc-squareIconXSmallContent, 0.5rem)
-        var(--lwc-varSpacingXxxSmall, 2px);
-}
-
-c-light-dom-query-child:before {
-    content: 'c-light-dom-query-child';
-    color: rgb(221, 219, 218);
-    position: absolute;
-    top: -9px;
-    left: var(--lwc-varSpacingXxSmall, 4px);
-    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
-    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
+fieldset {
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
+    border-radius: var(--slds-g-radius-border-2);
 }
diff --git a/force-app/main/default/lwc/lightDomQuery/lightDomQuery.html b/force-app/main/default/lwc/lightDomQuery/lightDomQuery.html
index 4e30ec5a6..f6c4858cc 100644
--- a/force-app/main/default/lwc/lightDomQuery/lightDomQuery.html
+++ b/force-app/main/default/lwc/lightDomQuery/lightDomQuery.html
@@ -7,11 +7,12 @@
             ></lightning-button>
         </div>
 
-        <div class="slds-var-m-around_medium">
+        <fieldset class="slds-var-p-around_x-small slds-var-m-around_medium">
+            <legend>c-light-dom-query-child</legend>
             <c-light-dom-query-child
                 class="slds-show slds-is-relative"
             ></c-light-dom-query-child>
-        </div>
+        </fieldset>
 
         <c-view-source source="lwc/lightDomQuery" slot="footer">
             Use query selectors access nodes inside a Light DOM component.
diff --git a/force-app/main/default/lwc/lmsSubscriberWebComponent/lmsSubscriberWebComponent.css b/force-app/main/default/lwc/lmsSubscriberWebComponent/lmsSubscriberWebComponent.css
index 679e43945..f131259e0 100644
--- a/force-app/main/default/lwc/lmsSubscriberWebComponent/lmsSubscriberWebComponent.css
+++ b/force-app/main/default/lwc/lmsSubscriberWebComponent/lmsSubscriberWebComponent.css
@@ -1,6 +1,6 @@
 img {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin-bottom: 8px;
+    width: var(--slds-g-sizing-12, 80px);
+    height: var(--slds-g-sizing-12, 80px);
+    border-radius: var(--slds-g-radius-border-circle);
+    margin-bottom: var(--slds-g-spacing-2, 8px);
 }
diff --git a/force-app/main/default/lwc/stylesheets/text-styles.css b/force-app/main/default/lwc/stylesheets/text-styles.css
index 2cba565cb..9c2fe4d83 100644
--- a/force-app/main/default/lwc/stylesheets/text-styles.css
+++ b/force-app/main/default/lwc/stylesheets/text-styles.css
@@ -1,7 +1,7 @@
 .fancy-text {
     color: #d54d7b;
     font-family: 'Great Vibes', cursive;
-    font-weight: normal;
+    font-weight: var(--slds-g-font-weight-4, 400);
     text-align: center;
     text-shadow: 0 1px 1px #fff;
 }
diff --git a/force-app/main/default/lwc/stylingHooks/stylingHooks.css b/force-app/main/default/lwc/stylingHooks/stylingHooks.css
index cb1a2789d..288760939 100644
--- a/force-app/main/default/lwc/stylingHooks/stylingHooks.css
+++ b/force-app/main/default/lwc/stylingHooks/stylingHooks.css
@@ -6,6 +6,9 @@
     --secondary-color-alt-shade: #343304;
     --base-text-color: #ffffff;
 
+    /* Override card title color (missing SLDS 2.0 styling hook) */
+    --slds-g-color-on-surface-3: var(--primary-color);
+
     /* Card styling hooks */
     --slds-c-card-color-background: linear-gradient(
         115deg,
@@ -19,7 +22,7 @@
 
     /* Toggle styling hooks */
     --slds-c-checkbox-toggle-color-border-checked: #009900;
-    --sds-c-checkbox-toggle-color-background-checked: #009900;
+    --slds-c-checkbox-toggle-color-background: var(--secondary-color-alt-shade);
     --slds-c-checkbox-toggle-color-background-checked-focus: #00cc00;
     --slds-c-checkbox-toggle-color-background-hover: var(
         --primary-color-alt-shade
@@ -47,9 +50,15 @@
     --source-link-color-hover: var(--primary-color-alt-shade);
 }
 
+/* Additional toggle styling */
+lightning-input {
+    --slds-g-color-border-accent-1: var(--primary-color);
+    --slds-g-color-accent-container-1: var(--primary-color-alt-shade);
+}
+
 /* A specific style for a toggle base component */
 .toggle-red {
     --slds-c-checkbox-toggle-color-border-checked: #990000;
-    --sds-c-checkbox-toggle-color-background-checked: #990000;
+    --slds-c-checkbox-toggle-color-background-checked: #990000;
     --slds-c-checkbox-toggle-color-background-checked-focus: #cc0000;
 }
diff --git a/force-app/main/default/lwc/stylingHooks/stylingHooks.txt b/force-app/main/default/lwc/stylingHooks/stylingHooks.txt
new file mode 100644
index 000000000..288760939
--- /dev/null
+++ b/force-app/main/default/lwc/stylingHooks/stylingHooks.txt
@@ -0,0 +1,64 @@
+:host {
+    /* Custom CSS variables for reusing style in this component and child components */
+    --primary-color: #e3df00;
+    --primary-color-alt-shade: #a7a400;
+    --secondary-color: #020024;
+    --secondary-color-alt-shade: #343304;
+    --base-text-color: #ffffff;
+
+    /* Override card title color (missing SLDS 2.0 styling hook) */
+    --slds-g-color-on-surface-3: var(--primary-color);
+
+    /* Card styling hooks */
+    --slds-c-card-color-background: linear-gradient(
+        115deg,
+        var(--secondary-color) 60%,
+        var(--primary-color-alt-shade) 100%
+    );
+    --slds-c-card-text-color: var(--primary-color);
+    --slds-c-card-radius-border: 1.5rem 0;
+    --slds-c-card-color-border: var(--primary-color);
+    --slds-c-card-footer-color-border: var(--primary-color-alt-shade);
+
+    /* Toggle styling hooks */
+    --slds-c-checkbox-toggle-color-border-checked: #009900;
+    --slds-c-checkbox-toggle-color-background: var(--secondary-color-alt-shade);
+    --slds-c-checkbox-toggle-color-background-checked-focus: #00cc00;
+    --slds-c-checkbox-toggle-color-background-hover: var(
+        --primary-color-alt-shade
+    );
+    --slds-c-checkbox-toggle-color-border-hover: var(--primary-color);
+
+    /* Button styling hooks */
+    --slds-c-button-text-color: var(--primary-color);
+    --slds-c-button-text-color-hover: var(--primary-color-alt-shade);
+    --slds-c-button-text-color-active: var(--secondary-color);
+    --slds-c-button-neutral-color-background: var(--secondary-color);
+    --slds-c-button-neutral-color-background-hover: var(
+        --secondary-color-alt-shade
+    );
+    --slds-c-button-neutral-color-background-active: var(--primary-color);
+    --slds-c-button-neutral-color-border: var(--primary-color);
+    --slds-c-button-neutral-color-border-hover: var(--primary-color-alt-shade);
+    --slds-c-button-neutral-color-border-active: var(
+        --secondary-color-alt-shade
+    );
+
+    /* View source component styling hooks */
+    --source-text-color: var(--base-text-color);
+    --source-link-color: var(--primary-color);
+    --source-link-color-hover: var(--primary-color-alt-shade);
+}
+
+/* Additional toggle styling */
+lightning-input {
+    --slds-g-color-border-accent-1: var(--primary-color);
+    --slds-g-color-accent-container-1: var(--primary-color-alt-shade);
+}
+
+/* A specific style for a toggle base component */
+.toggle-red {
+    --slds-c-checkbox-toggle-color-border-checked: #990000;
+    --slds-c-checkbox-toggle-color-background-checked: #990000;
+    --slds-c-checkbox-toggle-color-background-checked-focus: #cc0000;
+}
diff --git a/force-app/main/default/lwc/wireCurrentPageReference/wireCurrentPageReference.css b/force-app/main/default/lwc/wireCurrentPageReference/wireCurrentPageReference.css
index 4993c4e62..9d9cf27d7 100644
--- a/force-app/main/default/lwc/wireCurrentPageReference/wireCurrentPageReference.css
+++ b/force-app/main/default/lwc/wireCurrentPageReference/wireCurrentPageReference.css
@@ -1,6 +1,7 @@
 .scroller {
     height: 200px;
     overflow: auto;
-    padding: var(--lwc-varSpacingXSmall, 8px);
-    border: solid var(--lwc-borderWidthThin, 1px) #eee;
+    padding: var(--slds-g-spacing-var-2);
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
 }
diff --git a/force-app/main/default/lwc/wireGetObjectInfo/wireGetObjectInfo.css b/force-app/main/default/lwc/wireGetObjectInfo/wireGetObjectInfo.css
index 02720af64..3704bca0a 100644
--- a/force-app/main/default/lwc/wireGetObjectInfo/wireGetObjectInfo.css
+++ b/force-app/main/default/lwc/wireGetObjectInfo/wireGetObjectInfo.css
@@ -1,6 +1,7 @@
 .scroller {
     height: 220px;
     overflow: auto;
-    padding: var(--lwc-varSpacingXSmall, 8px);
-    border: solid var(--lwc-borderWidthThin, 1px) #eee;
+    padding: var(--slds-g-spacing-var-2);
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
 }
diff --git a/force-app/main/default/lwc/wireGetPicklistValues/wireGetPicklistValues.css b/force-app/main/default/lwc/wireGetPicklistValues/wireGetPicklistValues.css
index 4993c4e62..9d9cf27d7 100644
--- a/force-app/main/default/lwc/wireGetPicklistValues/wireGetPicklistValues.css
+++ b/force-app/main/default/lwc/wireGetPicklistValues/wireGetPicklistValues.css
@@ -1,6 +1,7 @@
 .scroller {
     height: 200px;
     overflow: auto;
-    padding: var(--lwc-varSpacingXSmall, 8px);
-    border: solid var(--lwc-borderWidthThin, 1px) #eee;
+    padding: var(--slds-g-spacing-var-2);
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
 }
diff --git a/force-app/main/default/lwc/wireGetPicklistValuesByRecordType/wireGetPicklistValuesByRecordType.css b/force-app/main/default/lwc/wireGetPicklistValuesByRecordType/wireGetPicklistValuesByRecordType.css
index 4993c4e62..9d9cf27d7 100644
--- a/force-app/main/default/lwc/wireGetPicklistValuesByRecordType/wireGetPicklistValuesByRecordType.css
+++ b/force-app/main/default/lwc/wireGetPicklistValuesByRecordType/wireGetPicklistValuesByRecordType.css
@@ -1,6 +1,7 @@
 .scroller {
     height: 200px;
     overflow: auto;
-    padding: var(--lwc-varSpacingXSmall, 8px);
-    border: solid var(--lwc-borderWidthThin, 1px) #eee;
+    padding: var(--slds-g-spacing-var-2);
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
 }
diff --git a/force-app/main/default/lwc/wireGetRecord/wireGetRecord.css b/force-app/main/default/lwc/wireGetRecord/wireGetRecord.css
index 02720af64..3704bca0a 100644
--- a/force-app/main/default/lwc/wireGetRecord/wireGetRecord.css
+++ b/force-app/main/default/lwc/wireGetRecord/wireGetRecord.css
@@ -1,6 +1,7 @@
 .scroller {
     height: 220px;
     overflow: auto;
-    padding: var(--lwc-varSpacingXSmall, 8px);
-    border: solid var(--lwc-borderWidthThin, 1px) #eee;
+    padding: var(--slds-g-spacing-var-2);
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
 }
diff --git a/force-app/main/default/lwc/wireGetRecords/wireGetRecords.css b/force-app/main/default/lwc/wireGetRecords/wireGetRecords.css
index 02720af64..3704bca0a 100644
--- a/force-app/main/default/lwc/wireGetRecords/wireGetRecords.css
+++ b/force-app/main/default/lwc/wireGetRecords/wireGetRecords.css
@@ -1,6 +1,7 @@
 .scroller {
     height: 220px;
     overflow: auto;
-    padding: var(--lwc-varSpacingXSmall, 8px);
-    border: solid var(--lwc-borderWidthThin, 1px) #eee;
+    padding: var(--slds-g-spacing-var-2);
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
 }
diff --git a/force-app/main/default/lwc/wireGetRecordsDifferentTypes/wireGetRecordsDifferentTypes.css b/force-app/main/default/lwc/wireGetRecordsDifferentTypes/wireGetRecordsDifferentTypes.css
index 02720af64..3704bca0a 100644
--- a/force-app/main/default/lwc/wireGetRecordsDifferentTypes/wireGetRecordsDifferentTypes.css
+++ b/force-app/main/default/lwc/wireGetRecordsDifferentTypes/wireGetRecordsDifferentTypes.css
@@ -1,6 +1,7 @@
 .scroller {
     height: 220px;
     overflow: auto;
-    padding: var(--lwc-varSpacingXSmall, 8px);
-    border: solid var(--lwc-borderWidthThin, 1px) #eee;
+    padding: var(--slds-g-spacing-var-2);
+    border: solid var(--slds-g-sizing-border-1)
+        var(--slds-g-color-neutral-base-80);
 }
diff --git a/jest.config.js b/jest.config.js
index 32ef6f7a8..53c1ecfcf 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,10 +4,6 @@ setupFilesAfterEnv.push('<rootDir>/jest-sa11y-setup.js');
 module.exports = {
     ...jestConfig,
     moduleNameMapper: {
-        /* CSS library import fix in test context. See:
-        https://github.com/salesforce/sfdx-lwc-jest/issues/288) */
-        '^c/cssLibrary$':
-            '<rootDir>/force-app/main/default/lwc/cssLibrary/cssLibrary.css',
         // Jest mocks
         '^@salesforce/apex$': '<rootDir>/force-app/test/jest-mocks/apex',
         '^@salesforce/schema$': '<rootDir>/force-app/test/jest-mocks/schema',
diff --git a/package-lock.json b/package-lock.json
index 547acac32..3be3253d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,10 +16,10 @@
                 "@salesforce/eslint-plugin-aura": "^3.0.0-beta.1",
                 "@salesforce/eslint-plugin-lightning": "^2.0.0",
                 "@salesforce/sfdx-lwc-jest": "^7.8.0",
-                "eslint": "^9.39.2",
+                "eslint": "^9.39.3",
                 "eslint-plugin-import": "^2.32.0",
                 "eslint-plugin-jest": "^29.15.0",
-                "globals": "^16.5.0",
+                "globals": "^17.4.0",
                 "husky": "^9.1.7",
                 "jest-canvas-mock": "^2.5.2",
                 "lint-staged": "^16.3.1",
@@ -1643,9 +1643,9 @@
             }
         },
         "node_modules/@eslint/js": {
-            "version": "9.39.2",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
-            "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+            "version": "9.39.3",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.3.tgz",
+            "integrity": "sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -6400,9 +6400,9 @@
             }
         },
         "node_modules/eslint": {
-            "version": "9.39.2",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
-            "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+            "version": "9.39.3",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.3.tgz",
+            "integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -6412,7 +6412,7 @@
                 "@eslint/config-helpers": "^0.4.2",
                 "@eslint/core": "^0.17.0",
                 "@eslint/eslintrc": "^3.3.1",
-                "@eslint/js": "9.39.2",
+                "@eslint/js": "9.39.3",
                 "@eslint/plugin-kit": "^0.4.1",
                 "@humanfs/node": "^0.16.6",
                 "@humanwhocodes/module-importer": "^1.0.1",
@@ -7464,9 +7464,9 @@
             }
         },
         "node_modules/globals": {
-            "version": "16.5.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
-            "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+            "version": "17.4.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
+            "integrity": "sha512-hjrNztw/VajQwOLsMNT1cbJiH2muO3OROCHnbehc8eY5JyD2gqz4AcMHPqgaOR59DjgUjYAYLeH699g/eWi2jw==",
             "dev": true,
             "license": "MIT",
             "engines": {
diff --git a/package.json b/package.json
index 933e0d617..e1c7fc1ea 100644
--- a/package.json
+++ b/package.json
@@ -40,10 +40,10 @@
         "@salesforce/eslint-plugin-aura": "^3.0.0-beta.1",
         "@salesforce/eslint-plugin-lightning": "^2.0.0",
         "@salesforce/sfdx-lwc-jest": "^7.8.0",
-        "eslint": "^9.39.2",
+        "eslint": "^9.39.3",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-jest": "^29.15.0",
-        "globals": "^16.5.0",
+        "globals": "^17.4.0",
         "husky": "^9.1.7",
         "jest-canvas-mock": "^2.5.2",
         "lint-staged": "^16.3.1",