feat(block): enhance component's interactivity states (#11827)

**Related Issue:**
[#10017](#10017)

## Summary

- Update `:active` background color to `--calcite-color-foreground-3`.
- Update description to `--calcite-color-text-2` when `expanded`.
- Update icon-start | end to `--calcite-color-text-1` when `expanded`.

Author: aPreciado88

Diff for: packages/calcite-components/src/components/block/block.e2e.ts

@@ -494,6 +494,11 @@ describe("calcite-block", () => {
             targetProp: "backgroundColor",
             state: "hover",
           },
+          "--calcite-block-header-background-color-press": {
+            shadowSelector: `.${CSS.toggle}`,
+            targetProp: "backgroundColor",
+            state: { press: `calcite-block >>> .${CSS.toggle}` },
+          },
           "--calcite-block-text-color": [
             { shadowSelector: `.${CSS.description}`, targetProp: "color" },
             { shadowSelector: `.${CSS.contentStart}`, targetProp: "color" },

Diff for: packages/calcite-components/src/components/block/block.scss

@@ -6,6 +6,7 @@
  * @prop --calcite-block-border-color: Specifies the component's border color.
  * @prop --calcite-block-header-background-color: Specifies the component's `heading` background color.
  * @prop --calcite-block-header-background-color-hover: Specifies the component's `heading` background color when hovered.
+ * @prop --calcite-block-header-background-color-press: Specifies the component's `heading` background color when pressed.
  * @prop --calcite-block-heading-text-color: Specifies the component's `heading` text color.
  * @prop --calcite-block-heading-text-color-press: When the component is `expanded`, specifies the `heading` text color.
  * @prop --calcite-block-padding: [Deprecated] Specifies the padding of the component's `default` slot.
@@ -93,6 +94,9 @@
   &:focus {
     @apply focus-inset;
   }
+  &:active {
+    background-color: var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3));
+  }
 }
 
 calcite-loader[inline] {
@@ -210,6 +214,15 @@ calcite-action-menu {
   .header .title .heading {
     color: var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1));
   }
+
+  .description {
+    color: var(--calcite-block-text-color, var(--calcite-color-text-2));
+  }
+
+  .icon--start,
+  .icon--end {
+    color: var(--calcite-block-text-color, var(--calcite-color-text-1));
+  }
 }
 
 @include base-component();