jouw-stem__design-system 0.1.0

package/src/components/ProgressBar/ProgressBar.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,33 @@
+{
+  "progress-bar": {
+    "track": {
+      "height": {
+        "value": "8px",
+        "type": "dimension"
+      },
+      "background": {
+        "value": "{intent.action.disabled}",
+        "type": "color",
+        "description": "Track background (HC: visible mid-grey on white canvas)"
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      }
+    },
+    "fill": {
+      "background": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Fill color (HC: saturated brand blue, AAA on white)"
+      }
+    },
+    "label": {
+      "color": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Label text on fill"
+      }
+    }
+  }
+}

package/src/components/ProgressBar/ProgressBar.tokens.theme-light.json

@@ -0,0 +1,33 @@
+{
+  "progress-bar": {
+    "track": {
+      "height": {
+        "value": "8px",
+        "type": "dimension"
+      },
+      "background": {
+        "value": "rgba(255, 255, 255, 0.15)",
+        "type": "color",
+        "description": "Track background - semi-transparent for dark backgrounds"
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      }
+    },
+    "fill": {
+      "background": {
+        "value": "{orange.500}",
+        "type": "color",
+        "description": "Fill color - visible accent"
+      }
+    },
+    "label": {
+      "color": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Label text on fill"
+      }
+    }
+  }
+}

package/src/components/ProgressBar/ProgressBar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="progress-bar"
+    :class="additionalClasses"
+    role="progressbar"
+    :aria-valuenow="mode === 'determinate' ? value : undefined"
+    :aria-valuemin="mode === 'determinate' ? 0 : undefined"
+    :aria-valuemax="mode === 'determinate' ? 100 : undefined"
+    :aria-label="ariaLabel || 'Progress'"
+  >
+    <div class="progress-bar__track">
+      <div
+        v-if="mode === 'determinate'"
+        class="progress-bar__fill"
+        :style="fillStyle"
+      >
+        <span v-if="showValue" class="progress-bar__label">
+          <slot>{{ value }}%</slot>
+        </span>
+      </div>
+      <div v-else class="progress-bar__fill progress-bar__fill--state-indeterminate" />
+    </div>
+  </div>
+</template>
+
+<style src="./ProgressBar.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  value?: number;
+  showValue?: boolean;
+  mode?: string;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  showValue: true,
+  mode: "determinate",
+});
+const fillStyle = computed(() => ({
+  width: `${props.value}%`,
+}));
+
+const additionalClasses = computed(() =>
+  [props.mode === "indeterminate" && "progress-bar--state-indeterminate"]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/ProgressSpinner/ProgressSpinner.matrix.ts

@@ -0,0 +1,16 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.progress-spinner',
+  baseQuery: { strokeWidth: '4' },
+  variants: [
+    {
+      name: 'Stroke',
+      subvariants: [
+        { name: 'thin',   query: { strokeWidth: '2' } },
+        { name: 'medium', query: { strokeWidth: '4' } },
+        { name: 'thick',  query: { strokeWidth: '6' } }
+      ]
+    }
+  ]
+}

package/src/components/ProgressSpinner/ProgressSpinner.scss

@@ -0,0 +1,48 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: progress-spinner;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--progress-spinner-size, $progress-spinner-size);
+  height: var(--progress-spinner-size, $progress-spinner-size);
+}
+
+.#{$c}__svg {
+  width: 100%;
+  height: 100%;
+  animation: progress-spinner-rotate var(--progress-spinner-animation-duration, $progress-spinner-animation-duration) linear infinite;
+}
+
+.#{$c}__track {
+  stroke: var(--progress-spinner-track-color, $progress-spinner-track-color);
+}
+
+.#{$c}__circle {
+  stroke: var(--progress-spinner-color, $progress-spinner-color);
+  stroke-linecap: round;
+  animation: progress-spinner-dash var(--progress-spinner-animation-duration, $progress-spinner-animation-duration) ease-in-out infinite;
+}
+
+@keyframes progress-spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes progress-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.tokens.theme-dark.json

@@ -0,0 +1,38 @@
+{
+  "progress-spinner": {
+    "size": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Default spinner size (width and height)"
+    },
+    "strokeWidth": {
+      "value": "4px",
+      "type": "dimension",
+      "description": "Stroke width of the spinner circle"
+    },
+    "color": {
+      "value": "{brand.primary}",
+      "type": "color",
+      "description": "Spinner stroke color"
+    },
+    "fill": {
+      "value": "transparent",
+      "type": "color",
+      "description": "Spinner fill color (typically transparent)"
+    },
+    "animation": {
+      "duration": {
+        "value": "2s",
+        "type": "duration",
+        "description": "Duration of the spinner animation"
+      }
+    },
+    "track": {
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Background track circle color"
+      }
+    }
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,38 @@
+{
+  "progress-spinner": {
+    "size": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Default spinner size (width and height)"
+    },
+    "strokeWidth": {
+      "value": "4px",
+      "type": "dimension",
+      "description": "Stroke width of the spinner circle"
+    },
+    "color": {
+      "value": "{brand.primary}",
+      "type": "color",
+      "description": "Spinner stroke color"
+    },
+    "fill": {
+      "value": "transparent",
+      "type": "color",
+      "description": "Spinner fill color (typically transparent)"
+    },
+    "animation": {
+      "duration": {
+        "value": "2s",
+        "type": "duration",
+        "description": "Duration of the spinner animation"
+      }
+    },
+    "track": {
+      "color": {
+        "value": "{intent.action.disabled}",
+        "type": "color",
+        "description": "Background track circle color"
+      }
+    }
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,38 @@
+{
+  "progress-spinner": {
+    "size": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Default spinner size (width and height)"
+    },
+    "strokeWidth": {
+      "value": "4px",
+      "type": "dimension",
+      "description": "Stroke width of the spinner circle"
+    },
+    "color": {
+      "value": "{brand.primary}",
+      "type": "color",
+      "description": "Spinner stroke color"
+    },
+    "fill": {
+      "value": "transparent",
+      "type": "color",
+      "description": "Spinner fill color (typically transparent)"
+    },
+    "animation": {
+      "duration": {
+        "value": "2s",
+        "type": "duration",
+        "description": "Duration of the spinner animation"
+      }
+    },
+    "track": {
+      "color": {
+        "value": "{intent.action.disabled}",
+        "type": "color",
+        "description": "Background track circle color"
+      }
+    }
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.tokens.theme-light.json

@@ -0,0 +1,38 @@
+{
+  "progress-spinner": {
+    "size": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Default spinner size (width and height)"
+    },
+    "strokeWidth": {
+      "value": "4px",
+      "type": "dimension",
+      "description": "Stroke width of the spinner circle"
+    },
+    "color": {
+      "value": "{brand.primary}",
+      "type": "color",
+      "description": "Spinner stroke color"
+    },
+    "fill": {
+      "value": "transparent",
+      "type": "color",
+      "description": "Spinner fill color (typically transparent)"
+    },
+    "animation": {
+      "duration": {
+        "value": "2s",
+        "type": "duration",
+        "description": "Duration of the spinner animation"
+      }
+    },
+    "track": {
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Background track circle color"
+      }
+    }
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="progress-spinner"
+    :class="additionalClasses"
+    role="progressbar"
+    aria-label="Loading"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :style="spinnerStyle"
+  >
+    <svg class="progress-spinner__svg" viewBox="0 0 50 50">
+      <!-- Background track circle -->
+      <circle
+        class="progress-spinner__track"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        :stroke-width="strokeWidth"
+      />
+      <!-- Animated spinner circle -->
+      <circle
+        class="progress-spinner__circle"
+        cx="25"
+        cy="25"
+        r="20"
+        :fill="fill"
+        :stroke-width="strokeWidth"
+      />
+    </svg>
+  </div>
+</template>
+
+<style src="./ProgressSpinner.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+  /**
+   * Width of the spinner stroke
+   */
+  strokeWidth: {
+    type: [Number, String],
+    default: 4,
+  },
+  /**
+   * Fill color for the spinner circle
+   */
+  fill: {
+    type: String,
+    default: "transparent",
+  },
+  /**
+   * Duration of the animation cycle
+   */
+  animationDuration: {
+    type: String,
+    default: "2s",
+  },
+});
+
+const spinnerStyle = computed(() => ({
+  "--progress-spinner-animation-duration": props.animationDuration,
+}));
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>

package/src/components/PromotionFooter/PromotionFooter.matrix.ts

@@ -0,0 +1,16 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.promotion-footer',
+  // Slim footer; the axis worth scanning is the presence of the final
+  // conversion band (with its tinted surface + CTA button).
+  variants: [
+    {
+      name: 'Conversion band',
+      subvariants: [
+        { name: 'with-band', query: { showCtaBand: 'true' } },
+        { name: 'without-band', query: { showCtaBand: 'false' } },
+      ],
+    },
+  ],
+}

package/src/components/PromotionFooter/PromotionFooter.scss

@@ -0,0 +1,103 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: promotion-footer;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+}
+
+.#{$c}__inner {
+  width: 100%;
+  max-width: var(--promotionFooter-maxWidth, $promotionFooter-maxWidth);
+  margin: 0 auto;
+  padding: 0 var(--promotionFooter-paddingX, $promotionFooter-paddingX);
+  box-sizing: border-box;
+}
+
+/* Conversion band */
+.#{$c}__band {
+  background-color: var(--promotionFooter-band-background, $promotionFooter-band-background);
+}
+
+.#{$c}__inner--band {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--promotionFooter-band-gap, $promotionFooter-band-gap);
+  flex-wrap: wrap;
+  min-height: var(--promotionFooter-band-height, $promotionFooter-band-height);
+}
+
+.#{$c}__band-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--promotionFooter-band-title, $promotionFooter-band-title);
+}
+
+.#{$c}__band-cta {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--promotionFooter-cta-paddingY, $promotionFooter-cta-paddingY)
+    var(--promotionFooter-cta-paddingX, $promotionFooter-cta-paddingX);
+  background-color: var(--promotionFooter-cta-background, $promotionFooter-cta-background);
+  color: var(--promotionFooter-cta-text, $promotionFooter-cta-text);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 700;
+  border-radius: var(--promotionFooter-cta-radius, $promotionFooter-cta-radius);
+}
+
+.#{$c}__band-cta:hover {
+  background-color: var(--promotionFooter-cta-hover, $promotionFooter-cta-hover);
+}
+
+/* Slim bottom bar */
+.#{$c}__bottom {
+  background-color: var(--promotionFooter-background, $promotionFooter-background);
+  border-top: 1px solid var(--promotionFooter-border, $promotionFooter-border);
+}
+
+.#{$c}__inner--bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--promotionFooter-gap, $promotionFooter-gap);
+  min-height: var(--promotionFooter-height, $promotionFooter-height);
+}
+
+.#{$c}__brand {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--promotionFooter-heading, $promotionFooter-heading);
+}
+
+.#{$c}__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--promotionFooter-gap, $promotionFooter-gap);
+}
+
+.#{$c}__link {
+  color: var(--promotionFooter-link-text, $promotionFooter-link-text);
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.#{$c}__link:hover {
+  color: var(--promotionFooter-link-hover, $promotionFooter-link-hover);
+  text-decoration: underline;
+}
+
+.#{$c}__link:focus-visible,
+.#{$c}__band-cta:focus-visible {
+  outline: 2px solid var(--promotionFooter-focusRing, $promotionFooter-focusRing);
+  outline-offset: 2px;
+}
+
+.#{$c}__copyright {
+  font-size: 13px;
+  color: var(--promotionFooter-textMuted, $promotionFooter-textMuted);
+}

package/src/components/PromotionFooter/PromotionFooter.tokens.theme-dark.json

@@ -0,0 +1,31 @@
+{
+  "promotionFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Slim bar background (matches page; separated by the top rule)" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the slim bar" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Brand text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Copyright text" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1280px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between slim-bar items" },
+    "height": { "value": "56px", "type": "dimension", "description": "Slim bar min-height" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Slim-bar link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Slim-bar link hover colour" }
+    },
+    "band": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Conversion band background — strong surface for emphasis" },
+      "title": { "value": "{text.inverse}", "type": "color", "description": "Conversion band headline (on inverse surface)" },
+      "height": { "value": "96px", "type": "dimension", "description": "Conversion band min-height" },
+      "gap": { "value": "{inline.l}", "type": "dimension", "description": "Gap between headline and CTA" }
+    },
+    "cta": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Band CTA background — light button on the inverse band" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Band CTA hover" },
+      "text": { "value": "{intent.action.default}", "type": "color", "description": "Band CTA label" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "Band CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Band CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Band CTA vertical padding" }
+    }
+  }
+}

package/src/components/PromotionFooter/PromotionFooter.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,31 @@
+{
+  "promotionFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Slim bar background (matches page; separated by the top rule)" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the slim bar" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Brand text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Copyright text" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1280px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between slim-bar items" },
+    "height": { "value": "56px", "type": "dimension", "description": "Slim bar min-height" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Slim-bar link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Slim-bar link hover colour" }
+    },
+    "band": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Conversion band background — strong surface for emphasis" },
+      "title": { "value": "{text.inverse}", "type": "color", "description": "Conversion band headline (on inverse surface)" },
+      "height": { "value": "96px", "type": "dimension", "description": "Conversion band min-height" },
+      "gap": { "value": "{inline.l}", "type": "dimension", "description": "Gap between headline and CTA" }
+    },
+    "cta": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Band CTA background — light button on the inverse band" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Band CTA hover" },
+      "text": { "value": "{intent.action.default}", "type": "color", "description": "Band CTA label" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "Band CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Band CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Band CTA vertical padding" }
+    }
+  }
+}

package/src/components/PromotionFooter/PromotionFooter.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,31 @@
+{
+  "promotionFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Slim bar background (matches page; separated by the top rule)" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the slim bar" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Brand text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Copyright text" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1280px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between slim-bar items" },
+    "height": { "value": "56px", "type": "dimension", "description": "Slim bar min-height" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Slim-bar link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Slim-bar link hover colour" }
+    },
+    "band": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Conversion band background — strong surface for emphasis" },
+      "title": { "value": "{text.inverse}", "type": "color", "description": "Conversion band headline (on inverse surface)" },
+      "height": { "value": "96px", "type": "dimension", "description": "Conversion band min-height" },
+      "gap": { "value": "{inline.l}", "type": "dimension", "description": "Gap between headline and CTA" }
+    },
+    "cta": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Band CTA background — light button on the inverse band" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Band CTA hover" },
+      "text": { "value": "{intent.action.default}", "type": "color", "description": "Band CTA label" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "Band CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Band CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Band CTA vertical padding" }
+    }
+  }
+}

package/src/components/PromotionFooter/PromotionFooter.tokens.theme-light.json

@@ -0,0 +1,31 @@
+{
+  "promotionFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Slim bar background (matches page; separated by the top rule)" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the slim bar" },
+    "heading": { "value": "{text.heading}", "type": "color", "description": "Brand text" },
+    "textMuted": { "value": "{text.muted}", "type": "color", "description": "Copyright text" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "maxWidth": { "value": "1280px", "type": "dimension", "description": "Inner content max width" },
+    "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between slim-bar items" },
+    "height": { "value": "56px", "type": "dimension", "description": "Slim bar min-height" },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Slim-bar link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Slim-bar link hover colour" }
+    },
+    "band": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Conversion band background — strong surface for emphasis" },
+      "title": { "value": "{text.inverse}", "type": "color", "description": "Conversion band headline (on inverse surface)" },
+      "height": { "value": "96px", "type": "dimension", "description": "Conversion band min-height" },
+      "gap": { "value": "{inline.l}", "type": "dimension", "description": "Gap between headline and CTA" }
+    },
+    "cta": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Band CTA background — light button on the inverse band" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Band CTA hover" },
+      "text": { "value": "{intent.action.default}", "type": "color", "description": "Band CTA label" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "Band CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "Band CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "Band CTA vertical padding" }
+    }
+  }
+}