jouw-stem__design-system 0.1.0

package/src/components/PromotionFooter/PromotionFooter.vue

@@ -0,0 +1,70 @@
+<template>
+  <footer class="promotion-footer">
+    <!-- Final conversion band -->
+    <div v-if="showCtaBand" class="promotion-footer__band">
+      <div class="promotion-footer__inner promotion-footer__inner--band">
+        <p class="promotion-footer__band-title">{{ ctaBandTitle }}</p>
+        <slot name="cta">
+          <a :href="ctaBandHref" class="promotion-footer__band-cta">{{ ctaBandLabel }}</a>
+        </slot>
+      </div>
+    </div>
+
+    <!-- Slim bottom bar -->
+    <div class="promotion-footer__bottom">
+      <div class="promotion-footer__inner promotion-footer__inner--bottom">
+        <span class="promotion-footer__brand">{{ brand }}</span>
+        <nav class="promotion-footer__links" aria-label="Footer">
+          <a
+            v-for="l in links"
+            :key="l.label"
+            :href="l.href || '#'"
+            class="promotion-footer__link"
+          >{{ l.label }}</a>
+        </nav>
+        <span class="promotion-footer__copyright">{{ copyright }}</span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style src="./PromotionFooter.scss"></style>
+
+<script setup lang="ts">
+/**
+ * PromotionFooter — a slim footer for landing pages, optionally topped by
+ * a final conversion band ("Ready to start? [CTA]"). Distraction-light by
+ * design: one row of legal/social links and a copyright line.
+ */
+interface FooterLink { label: string; href?: string }
+
+withDefaults(
+  defineProps<{
+    /** Headline shown in the conversion band. */
+    ctaBandTitle?: string
+    /** Conversion-band button label. */
+    ctaBandLabel?: string
+    ctaBandHref?: string
+    /** Whether to render the conversion band. */
+    showCtaBand?: boolean
+    brand?: string
+    /** Slim-bar links (legal + social, kept minimal on purpose). */
+    links?: FooterLink[]
+    copyright?: string
+  }>(),
+  {
+    ctaBandTitle: 'Ready to get started?',
+    ctaBandLabel: 'Get started free',
+    ctaBandHref: '#',
+    showCtaBand: true,
+    brand: 'Launchpad',
+    links: () => [
+      { label: 'Privacy' },
+      { label: 'Terms' },
+      { label: 'X' },
+      { label: 'LinkedIn' },
+    ],
+    copyright: '© 2026 Launchpad',
+  }
+)
+</script>

package/src/components/PromotionHeader/PromotionHeader.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.promotion-header',
+  // The promo header renders brand + anchor nav + CTA from defaults; the
+  // axis worth scanning is the presence of the inverse-surface
+  // announcement bar above the main bar.
+  variants: [
+    {
+      name: 'Announcement',
+      subvariants: [
+        { name: 'with-announcement', query: { showAnnouncement: 'true' } },
+        { name: 'without-announcement', query: { showAnnouncement: 'false' } },
+      ],
+    },
+  ],
+}

package/src/components/PromotionHeader/PromotionHeader.scss

@@ -0,0 +1,129 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: promotion-header;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  background-color: var(--promotionHeader-background, $promotionHeader-background);
+  color: var(--promotionHeader-text, $promotionHeader-text);
+  border-bottom: 1px solid var(--promotionHeader-border, $promotionHeader-border);
+  box-shadow: var(--promotionHeader-shadow, $promotionHeader-shadow);
+}
+
+.#{$c}__inner {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--promotionHeader-gap, $promotionHeader-gap);
+  width: 100%;
+  max-width: var(--promotionHeader-maxWidth, $promotionHeader-maxWidth);
+  margin: 0 auto;
+  padding: 0 var(--promotionHeader-paddingX, $promotionHeader-paddingX);
+  box-sizing: border-box;
+}
+
+/* Announcement bar */
+.#{$c}__announcement {
+  background-color: var(--promotionHeader-announcement-background, $promotionHeader-announcement-background);
+  color: var(--promotionHeader-announcement-text, $promotionHeader-announcement-text);
+}
+
+.#{$c}__inner--announcement {
+  min-height: var(--promotionHeader-announcement-height, $promotionHeader-announcement-height);
+  justify-content: center;
+  position: relative;
+}
+
+.#{$c}__announcement-text {
+  margin: 0;
+  font-size: 14px;
+  text-align: center;
+}
+
+.#{$c}__announcement-link {
+  color: var(--promotionHeader-announcement-text, $promotionHeader-announcement-text);
+  font-weight: 700;
+  text-decoration: underline;
+  margin-left: var(--promotionHeader-gap, $promotionHeader-gap);
+}
+
+.#{$c}__dismiss {
+  position: absolute;
+  right: 0;
+  font: inherit;
+  font-size: 20px;
+  line-height: 1;
+  padding: 0 var(--promotionHeader-paddingX, $promotionHeader-paddingX);
+  background: none;
+  border: none;
+  color: var(--promotionHeader-announcement-text, $promotionHeader-announcement-text);
+  cursor: pointer;
+}
+
+.#{$c}__dismiss:focus-visible,
+.#{$c}__link:focus-visible,
+.#{$c}__cta:focus-visible,
+.#{$c}__announcement-link:focus-visible {
+  outline: 2px solid var(--promotionHeader-focusRing, $promotionHeader-focusRing);
+  outline-offset: 2px;
+}
+
+/* Main bar */
+.#{$c}__bar .#{$c}__inner {
+  min-height: var(--promotionHeader-height, $promotionHeader-height);
+}
+
+.#{$c}__brand {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--promotionHeader-text, $promotionHeader-text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.#{$c}__nav {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--promotionHeader-gap, $promotionHeader-gap);
+  margin-left: auto;
+}
+
+.#{$c}__link {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--promotionHeader-link-paddingY, $promotionHeader-link-paddingY)
+    var(--promotionHeader-link-paddingX, $promotionHeader-link-paddingX);
+  color: var(--promotionHeader-link-text, $promotionHeader-link-text);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: var(--promotionHeader-link-radius, $promotionHeader-link-radius);
+}
+
+.#{$c}__link:hover {
+  color: var(--promotionHeader-link-hover, $promotionHeader-link-hover);
+}
+
+.#{$c}__actions {
+  display: flex;
+  align-items: center;
+}
+
+.#{$c}__cta {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--promotionHeader-cta-paddingY, $promotionHeader-cta-paddingY)
+    var(--promotionHeader-cta-paddingX, $promotionHeader-cta-paddingX);
+  background-color: var(--promotionHeader-cta-background, $promotionHeader-cta-background);
+  color: var(--promotionHeader-cta-text, $promotionHeader-cta-text);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 700;
+  border-radius: var(--promotionHeader-cta-radius, $promotionHeader-cta-radius);
+}
+
+.#{$c}__cta:hover {
+  background-color: var(--promotionHeader-cta-hover, $promotionHeader-cta-hover);
+}

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

@@ -0,0 +1,33 @@
+{
+  "promotionHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Header background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Header text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Hairline under the header" },
+    "shadow": { "value": "{shadow.s}", "type": "shadow", "description": "Header elevation" },
+    "height": { "value": "64px", "type": "dimension", "description": "Main bar min-height" },
+    "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 header items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "link": {
+      "text": { "value": "{text.default}", "type": "color", "description": "Anchor link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Anchor link hover colour" },
+      "radius": { "value": "{radius.subtle}", "type": "dimension", "description": "Link radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Link horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Link vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "CTA background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "CTA hover background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "CTA label colour" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "CTA vertical padding" }
+    },
+    "announcement": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Announcement bar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Announcement bar text" },
+      "height": { "value": "40px", "type": "dimension", "description": "Announcement bar min-height" }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "promotionHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Header background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Header text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Hairline under the header" },
+    "shadow": { "value": "{shadow.s}", "type": "shadow", "description": "Header elevation" },
+    "height": { "value": "64px", "type": "dimension", "description": "Main bar min-height" },
+    "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 header items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "link": {
+      "text": { "value": "{text.default}", "type": "color", "description": "Anchor link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Anchor link hover colour" },
+      "radius": { "value": "{radius.subtle}", "type": "dimension", "description": "Link radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Link horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Link vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "CTA background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "CTA hover background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "CTA label colour" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "CTA vertical padding" }
+    },
+    "announcement": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Announcement bar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Announcement bar text" },
+      "height": { "value": "40px", "type": "dimension", "description": "Announcement bar min-height" }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "promotionHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Header background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Header text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Hairline under the header" },
+    "shadow": { "value": "{shadow.s}", "type": "shadow", "description": "Header elevation" },
+    "height": { "value": "64px", "type": "dimension", "description": "Main bar min-height" },
+    "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 header items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "link": {
+      "text": { "value": "{text.default}", "type": "color", "description": "Anchor link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Anchor link hover colour" },
+      "radius": { "value": "{radius.subtle}", "type": "dimension", "description": "Link radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Link horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Link vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "CTA background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "CTA hover background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "CTA label colour" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "CTA vertical padding" }
+    },
+    "announcement": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Announcement bar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Announcement bar text" },
+      "height": { "value": "40px", "type": "dimension", "description": "Announcement bar min-height" }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "promotionHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Header background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Header text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Hairline under the header" },
+    "shadow": { "value": "{shadow.s}", "type": "shadow", "description": "Header elevation" },
+    "height": { "value": "64px", "type": "dimension", "description": "Main bar min-height" },
+    "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 header items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "link": {
+      "text": { "value": "{text.default}", "type": "color", "description": "Anchor link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Anchor link hover colour" },
+      "radius": { "value": "{radius.subtle}", "type": "dimension", "description": "Link radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Link horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Link vertical padding" }
+    },
+    "cta": {
+      "background": { "value": "{intent.action.default}", "type": "color", "description": "CTA background" },
+      "hover": { "value": "{intent.action.hover}", "type": "color", "description": "CTA hover background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "CTA label colour" },
+      "radius": { "value": "{radius.pill}", "type": "dimension", "description": "CTA radius (pill)" },
+      "paddingX": { "value": "{inset.l}", "type": "dimension", "description": "CTA horizontal padding" },
+      "paddingY": { "value": "{inset.s}", "type": "dimension", "description": "CTA vertical padding" }
+    },
+    "announcement": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Announcement bar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Announcement bar text" },
+      "height": { "value": "40px", "type": "dimension", "description": "Announcement bar min-height" }
+    }
+  }
+}

package/src/components/PromotionHeader/PromotionHeader.vue

@@ -0,0 +1,92 @@
+<template>
+  <header class="promotion-header">
+    <!-- Dismissible announcement / promo bar -->
+    <div v-if="showAnnouncement && announcement && !dismissed" class="promotion-header__announcement">
+      <div class="promotion-header__inner promotion-header__inner--announcement">
+        <p class="promotion-header__announcement-text">
+          {{ announcement }}
+          <a v-if="announcementCta" :href="announcementHref" class="promotion-header__announcement-link">{{ announcementCta }}</a>
+        </p>
+        <button
+          type="button"
+          class="promotion-header__dismiss"
+          aria-label="Dismiss announcement"
+          @click="dismissed = true"
+        >&times;</button>
+      </div>
+    </div>
+
+    <!-- Minimal conversion bar: brand + anchor nav + single CTA -->
+    <div class="promotion-header__bar">
+      <div class="promotion-header__inner">
+        <slot name="brand">
+          <a :href="brandHref" class="promotion-header__brand">{{ brand }}</a>
+        </slot>
+
+        <nav class="promotion-header__nav" aria-label="Sections">
+          <a
+            v-for="item in navItems"
+            :key="item.label"
+            :href="item.href || '#'"
+            class="promotion-header__link"
+          >{{ item.label }}</a>
+        </nav>
+
+        <div class="promotion-header__actions">
+          <slot name="actions">
+            <a v-if="ctaLabel" :href="ctaHref" class="promotion-header__cta">{{ ctaLabel }}</a>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style src="./PromotionHeader.scss"></style>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+/**
+ * PromotionHeader — a minimal, conversion-first header for landing and
+ * campaign pages: an optional dismissible announcement bar above a brand
+ * + anchor-navigation + single prominent CTA bar.
+ */
+interface NavItem { label: string; href?: string }
+
+withDefaults(
+  defineProps<{
+    brand?: string
+    brandHref?: string
+    /** In-page anchor links (Features / Pricing / FAQ…). */
+    navItems?: NavItem[]
+    /** Primary CTA label. Empty string hides the CTA. */
+    ctaLabel?: string
+    ctaHref?: string
+    /** Announcement-bar message. Empty string hides the bar. */
+    announcement?: string
+    /** Optional inline call-to-action inside the announcement. */
+    announcementCta?: string
+    announcementHref?: string
+    /** Whether to render the announcement bar at all. */
+    showAnnouncement?: boolean
+  }>(),
+  {
+    brand: 'Launchpad',
+    brandHref: '#',
+    navItems: () => [
+      { label: 'Features' },
+      { label: 'Pricing' },
+      { label: 'FAQ' },
+    ],
+    ctaLabel: 'Buy now',
+    ctaHref: '#',
+    announcement: 'Launch week — 30% off ends Friday.',
+    announcementCta: 'Claim offer',
+    announcementHref: '#',
+    showAnnouncement: true,
+  }
+)
+
+const dismissed = ref(false)
+</script>

package/src/components/RadioButton/RadioButton.matrix.ts

@@ -0,0 +1,28 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.radio',
+  // RadioButton needs `value` (required prop) + `label`. The check IS
+  // checked when modelValue === value, so the "checked" state passes
+  // modelValue: 'a' to match the value: 'a' baseline.
+  baseQuery: { value: 'a', label: 'Option A' },
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { size: 'sm' }, focusable: true },
+        { name: 'md', query: { size: 'md' }, focusable: true },
+        { name: 'lg', query: { size: 'lg' }, focusable: true }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',            attr: 'hover' },
+    { name: 'focus-visible',    attr: 'focus-visible' },
+    { name: 'checked',          props: { modelValue: 'a' } },
+    { name: 'checked-hover',    attr: 'hover',         props: { modelValue: 'a' } },
+    { name: 'disabled',         props: { isDisabled: 'true' } },
+    { name: 'disabled-checked', props: { isDisabled: 'true', modelValue: 'a' } },
+    { name: 'invalid',          props: { isInvalid: 'true' } }
+  ]
+}

package/src/components/RadioButton/RadioButton.scss

@@ -0,0 +1,161 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: radio;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--radio-label-gap, $radio-label-gap);
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+
+.#{$c}__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.#{$c}__circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: var(--radio-background-default, $radio-background-default);
+  border: var(--radio-border-width, $radio-border-width) solid var(--radio-border-color-default, $radio-border-color-default);
+  border-radius: 50%;
+  transition: all 0.15s ease;
+}
+
+.#{$c}__dot {
+  border-radius: 50%;
+  background-color: var(--radio-dot-color, $radio-dot-color);
+  opacity: 0;
+  transform: scale(0);
+  transition: all 0.15s ease;
+}
+
+.#{$c}__label {
+  color: var(--radio-label-color-default, $radio-label-color-default);
+  line-height: 1.4;
+}
+
+// Hover state — only on unchecked rows. When the circle is already filled
+// (checked), swapping in the light hover bg makes the white dot vanish
+// and fails WCAG 1.4.11. Combined "checked + hover" handled below.
+.#{$c}:hover:not(.#{$c}--state-disabled):not(.#{$c}--state-checked),
+.#{$c}[data-state~="hover"]:not(.#{$c}--state-disabled):not(.#{$c}--state-checked) {
+  .#{$c}__circle {
+    border-color: var(--radio-border-color-hover, $radio-border-color-hover);
+    background-color: var(--radio-background-hover, $radio-background-hover);
+  }
+}
+
+// Checked + hover — keep the filled background (shifted to the action.hover
+// ramp step) so the dot remains visible while still giving hover affordance.
+.#{$c}--state-checked:hover:not(.#{$c}--state-disabled),
+.#{$c}--state-checked[data-state~="hover"]:not(.#{$c}--state-disabled) {
+  .#{$c}__circle {
+    background-color: var(--radio-background-checkedHover, $radio-background-checkedHover);
+    border-color: var(--radio-border-color-checkedHover, $radio-border-color-checkedHover);
+  }
+}
+
+// Focus state
+.#{$c}__input:focus-visible ~ .#{$c}__circle,
+.#{$c}__input[data-state~="focus-visible"] ~ .#{$c}__circle {
+  outline: var(--radio-focus-ringWidth, $radio-focus-ringWidth) solid var(--radio-focus-ringColor, $radio-focus-ringColor);
+  outline-offset: var(--radio-focus-ringOffset, $radio-focus-ringOffset);
+}
+
+// Checked state
+.#{$c}--state-checked {
+  .#{$c}__circle {
+    background: var(--radio-background-checked, $radio-background-checked);
+    border-color: var(--radio-border-color-checked, $radio-border-color-checked);
+  }
+
+  .#{$c}__dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Disabled state
+.#{$c}--state-disabled {
+  cursor: not-allowed;
+
+  .#{$c}__circle {
+    background-color: var(--radio-background-disabled, $radio-background-disabled);
+    border-color: var(--radio-border-color-disabled, $radio-border-color-disabled);
+  }
+
+  .#{$c}__label {
+    color: var(--radio-label-color-disabled, $radio-label-color-disabled);
+  }
+}
+
+.#{$c}--state-disabled.#{$c}--state-checked {
+  .#{$c}__circle {
+    background-color: var(--radio-border-color-disabled, $radio-border-color-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--state-invalid {
+  .#{$c}__circle {
+    border-color: var(--radio-border-color-error, $radio-border-color-error);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__circle {
+    width: var(--radio-size-sm, $radio-size-sm);
+    height: var(--radio-size-sm, $radio-size-sm);
+  }
+
+  .#{$c}__dot {
+    width: var(--radio-dotSize-sm, $radio-dotSize-sm);
+    height: var(--radio-dotSize-sm, $radio-dotSize-sm);
+  }
+
+  .#{$c}__label {
+    font-size: 14px;
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__circle {
+    width: var(--radio-size-md, $radio-size-md);
+    height: var(--radio-size-md, $radio-size-md);
+  }
+
+  .#{$c}__dot {
+    width: var(--radio-dotSize-md, $radio-dotSize-md);
+    height: var(--radio-dotSize-md, $radio-dotSize-md);
+  }
+
+  .#{$c}__label {
+    font-size: 15px;
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__circle {
+    width: var(--radio-size-lg, $radio-size-lg);
+    height: var(--radio-size-lg, $radio-size-lg);
+  }
+
+  .#{$c}__dot {
+    width: var(--radio-dotSize-lg, $radio-dotSize-lg);
+    height: var(--radio-dotSize-lg, $radio-dotSize-lg);
+  }
+
+  .#{$c}__label {
+    font-size: 16px;
+  }
+}