feat(tab): add --calcite-tab-content-block-padding to override buil…

…t-in block-padding (#8629)

**Related Issue:** #8413

## Summary
Introduces a CSS custom property `--calcite-tab-content-block-padding`
to align with other components that have built-in padding.

Currently, the Tab component has a built-in `block-padding` that cannot
be overridden in a supported way, leading to a bug with scrollbars when
tabs are housed inside a panel.

The introduction of the custom property allows for more flexibility in
the component, as users can achieve their desired layout and padding by
adding it to their slotted content.
(#8139 (comment))

---------

Co-authored-by: JC Franco <jfranco@esri.com>
Co-authored-by: Kitty Hurley <khurley@esri.com>

packages/calcite-components/src/components/tab/tab.scss

@@ -1,3 +1,11 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tab-content-block-padding: Specifies the block padding of the component's content in the `default` slot.
+ */
+
 :host([selected]) {
   section,
   .container {
@@ -15,18 +23,22 @@
 
 .content {
   @apply box-border;
+  padding-block: var(--calcite-internal-tab-content-block-padding);
 }
 
-.scale-s .content {
-  @apply text-n2h py-1;
+.scale-s {
+  --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.1"));
+  @apply text-n2h;
 }
 
-.scale-m .content {
-  @apply text-n1h py-2;
+.scale-m {
+  --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.2"));
+  @apply text-n1h;
 }
 
-.scale-l .content {
-  @apply text-0h py-2.5;
+.scale-l {
+  --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.[2.5]"));
+  @apply text-0h;
 }
 
 section,

packages/calcite-components/src/components/tabs/tabs.stories.ts

@@ -461,3 +461,34 @@ export const noVerticalScrollbarInsideShellPanel_TestOnly = (): string => html`
     </calcite-shell-panel>
   </calcite-shell>
 `;
+
+export const paddingPropOverrideAtRootLevel = (): string => html`
+  <style>
+    :root {
+      --calcite-tab-content-block-padding: 0;
+    }
+  </style>
+  <calcite-tabs>
+    <calcite-tabs>
+      <calcite-tab-nav slot="title-group">
+        <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
+      </calcite-tab-nav>
+      <calcite-tab>
+        <div>Tab 1 Content</div>
+      </calcite-tab>
+    </calcite-tabs>
+  </calcite-tabs>
+`;
+
+export const paddingPropOverrideAtElementLevel = (): string => html`
+  <calcite-tabs>
+    <calcite-tabs>
+      <calcite-tab-nav slot="title-group">
+        <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
+      </calcite-tab-nav>
+      <calcite-tab style="--calcite-tab-content-block-padding: 0;">
+        <div>Tab 1 Content</div>
+      </calcite-tab>
+    </calcite-tabs>
+  </calcite-tabs>
+`;