rename relevant --padding properties to --spacing

src/components/callout/callout.style.ts

@@ -7,7 +7,7 @@ export default css`
     --border-width: var(--wa-panel-border-width);
     --icon-color: currentColor;
     --icon-size: var(--wa-font-size-l);
-    --padding: var(--wa-space-m);
+    --spacing: var(--wa-space-m);
 
     display: contents;
 
@@ -56,7 +56,7 @@ export default css`
     border-width: var(--border-width);
     color: var(--content-color);
     font: inherit;
-    padding: var(--padding);
+    padding: var(--spacing);
     margin: inherit;
   }
 
@@ -69,7 +69,7 @@ export default css`
   }
 
   .callout__icon ::slotted(*) {
-    margin-inline-end: var(--padding) !important;
+    margin-inline-end: var(--spacing) !important;
   }
 
   .callout__message {

src/components/callout/callout.ts

@@ -27,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --content-color - The color of the callout's content.
  * @cssproperty --icon-color - The color of the callout's icon.
  * @cssproperty --icon-size - The size of the callout's icon.
- * @cssproperty --padding - The padding within the callout. Expects a single value.
+ * @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value.
  */
 @customElement('wa-callout')
 export default class WaCallout extends WebAwesomeElement {

src/components/card/card.styles.ts

@@ -8,7 +8,7 @@ export default css`
     --border-style: var(--wa-panel-border-style);
     --border-width: var(--wa-panel-border-width);
     --box-shadow: var(--wa-shadow-s);
-    --padding: var(--wa-space-xl);
+    --spacing: var(--wa-space-xl);
 
     display: inline-block;
   }
@@ -48,7 +48,7 @@ export default css`
   .card__header {
     display: block;
     border-bottom: inherit;
-    padding: calc(var(--padding) / 2) var(--padding);
+    padding: calc(var(--spacing) / 2) var(--spacing);
   }
 
   .card:not(.card--has-header) .card__header {
@@ -62,13 +62,13 @@ export default css`
 
   .card__body {
     display: block;
-    padding: var(--padding);
+    padding: var(--spacing);
   }
 
   .card--has-footer .card__footer {
     display: block;
     border-top: inherit;
-    padding: var(--padding);
+    padding: var(--spacing);
   }
 
   .card:not(.card--has-footer) .card__footer {

src/components/card/card.ts

@@ -29,7 +29,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --border-style - The style of the card's borders.
  * @cssproperty --border-width - The width of the card's borders. Expects a single value.
  * @cssproperty --box-shadow - The shadow effects around the edges of the card.
- * @cssproperty --padding - The padding for each section in the card. Expects a single value.
+ * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {

src/components/details/details.styles.ts

@@ -8,7 +8,7 @@ export default css`
     --border-style: var(--wa-panel-border-style);
     --border-width: var(--wa-panel-border-width);
     --icon-color: var(--wa-color-text-quiet);
-    --padding: var(--wa-space-m);
+    --spacing: var(--wa-space-m);
     --show-duration: 200ms;
     --hide-duration: 200ms;
 
@@ -31,7 +31,7 @@ export default css`
   .details__header {
     display: flex;
     align-items: center;
-    padding: var(--padding);
+    padding: var(--spacing);
     user-select: none;
     -webkit-user-select: none;
     cursor: pointer;
@@ -93,7 +93,7 @@ export default css`
 
   .details__content {
     display: block;
-    padding: var(--padding);
+    padding: var(--spacing);
   }
 
   .show {

src/components/details/details.ts

@@ -44,7 +44,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --border-style - The style of the details' borders.
  * @cssproperty --border-width - The width of the details' borders. Expects a single value.
  * @cssproperty --icon-color - The color of the details' icon.
- * @cssproperty --padding - The padding with the details. Expects a single value.
+ * @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.
  * @cssproperty [--show-duration=200ms] - The show duration to use when applying built-in animation classes.
  * @cssproperty [--hide-duration=200ms] - The hide duration to use when applying built-in animation classes.
  */