Merge branch 'esds-3.0-vue3-primevue' into CED-1724-new-publish

es-bs-base/scss/_custom-forms.scss

@@ -36,14 +36,14 @@
   height: (variables.$font-size-base * variables.$line-height-base + variables.$custom-control-indicator-size) * .5;
   opacity: 0;
 
-  &:checked ~ .custom-control-label::before {
+  &:checked ~ .custom-control-label::before, &:has(.custom-radio-input:checked) ~ .custom-control-label::before {
     color: variables.$custom-control-indicator-checked-color;
     border-color: variables.$custom-control-indicator-checked-border-color;
     @include gradients.gradient-bg(variables.$custom-control-indicator-checked-bg);
     @include box-shadow.box-shadow(variables.$custom-control-indicator-checked-box-shadow);
   }
 
-  &:focus ~ .custom-control-label::before {
+  &:focus ~ .custom-control-label::before, &:has(.custom-radio-input:focus) ~ .custom-control-label::before {
     // the mixin is not used here to make sure there is feedback
     @if variables.$enable-shadows {
       box-shadow: variables.$input-box-shadow, variables.$custom-control-indicator-focus-box-shadow;
@@ -52,16 +52,16 @@
     }
   }
 
-  &:focus:not(:checked) ~ .custom-control-label::before {
+  &:focus:not(:checked) ~ .custom-control-label::before, &:has(.custom-radio-input:focus):not(:has(.custom-radio-input:checked)) ~ .custom-control-label::before {
     border-color: variables.$custom-control-indicator-focus-border-color;
   }
 
-  &:not(:disabled):not(:focus) ~ .custom-control-label:hover::before {
+  &:not(:disabled):not(:focus):not(:has(.custom-radio-input:disabled)):not(:has(.custom-radio-input:focus)) ~ .custom-control-label:hover::before {
     // the mixin is not used here to make sure there is feedback
     box-shadow: variables.$custom-control-indicator-hover-box-shadow;
   }
 
-  &:not(:disabled):active ~ .custom-control-label::before {
+  &:not(:disabled):active ~ .custom-control-label::before, &:not(:has(.custom-radio-input:disabled)):active ~ .custom-control-label::before {
     color: variables.$custom-control-indicator-active-color;
     background-color: variables.$custom-control-indicator-active-bg;
     border-color: variables.$custom-control-indicator-active-border-color;
@@ -71,7 +71,8 @@
 
   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
   &[disabled],
-  &:disabled {
+  &:disabled,
+  &:has(.custom-radio-input:disabled) {
     ~ .custom-control-label {
       color: variables.$custom-control-label-disabled-color;
 
@@ -180,21 +181,21 @@
     border-radius: variables.$custom-radio-indicator-border-radius;
   }
 
-  .custom-control-input:checked ~ .custom-control-label {
+  .custom-control-input:has(.custom-radio-input:checked) ~ .custom-control-label {
     &::before {
       background-color: variables.$custom-control-indicator-bg;
     }
     &::after {
-      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked);
+      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked) !important;
     }
   }
 
-  .custom-control-input:disabled:checked ~ .custom-control-label {
+  .custom-control-input:has(.custom-radio-input:disabled:checked) ~ .custom-control-label {
     &::before {
       @include gradients.gradient-bg(variables.$custom-control-indicator-checked-disabled-bg);
     }
     &::after {
-      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked-disabled);
+      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked-disabled) !important;
     }
   }
 }

es-bs-base/scss/modules/font-sizes.module.scss

@@ -0,0 +1,26 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  font-size-50: variables.$font-size-50;
+  font-size-75: variables.$font-size-75;
+  font-size-100: variables.$font-size-100;
+  font-size-200: variables.$font-size-200;
+  font-size-300: variables.$font-size-300;
+  font-size-400: variables.$font-size-400;
+  font-size-500: variables.$font-size-500;
+  font-size-600: variables.$font-size-600;
+  font-size-700: variables.$font-size-700;
+  font-size-800: variables.$font-size-800;
+  font-size-900: variables.$font-size-900;
+
+  // body sizes
+  font-size-xs: variables.$font-size-xs;
+  font-size-sm: variables.$font-size-sm;
+  font-size-base: variables.$font-size-base;
+  font-size-lg: variables.$font-size-lg;
+
+  // deprecated
+  font-size-xl: variables.$font-size-xl;
+  font-size-xxl: variables.$font-size-xxl;
+}

es-bs-base/scss/modules/font-weights.module.scss

@@ -0,0 +1,13 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  font-weight-lighter: variables.$font-weight-lighter;
+  font-weight-light: variables.$font-weight-light;
+  font-weight-base: variables.$font-weight-base;
+  font-weight-normal: variables.$font-weight-normal;
+  font-weight-semibold: variables.$font-weight-semibold;
+  font-weight-bold: variables.$font-weight-bold;
+  font-weight-bolder: variables.$font-weight-bolder;
+  font-weight-boldest: variables.$font-weight-boldest;
+}

es-bs-base/scss/modules/heading-eyebrow.module.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  color: variables.$eyebrow-font-color;
+  fontSize: variables.$eyebrow-font-size;
+  fontWeight: variables.$eyebrow-font-weight;
+  letterSpacing: variables.$eyebrow-letter-spacing;
+  lineHeight: variables.$eyebrow-line-height;
+  marginBottom: variables.$eyebrow-margin-bottom;
+}

es-bs-base/scss/modules/heading-font-sizes-desktop.module.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  h1: variables.$h1-font-size-desktop;
+  h2: variables.$h2-font-size-desktop;
+  h3: variables.$h3-font-size-desktop;
+  h4: variables.$h4-font-size-desktop;
+  h5: variables.$h5-font-size-desktop;
+  h6: variables.$h6-font-size-desktop;
+}

es-bs-base/scss/modules/heading-font-sizes-mobile.module.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  h1: variables.$h1-font-size;
+  h2: variables.$h2-font-size;
+  h3: variables.$h3-font-size;
+  h4: variables.$h4-font-size;
+  h5: variables.$h5-font-size;
+  h6: variables.$h6-font-size;
+}

es-bs-base/scss/modules/heading-general.module.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  color: variables.$headings-color;
+  fontFamily: variables.$headings-font-family;
+  fontWeight: variables.$headings-font-weight;
+  marginBottom: variables.$headings-margin-bottom;
+}

es-bs-base/scss/modules/heading-line-heights-desktop.module.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  h1: variables.$h1-line-height-desktop;
+  h2: variables.$h2-line-height-desktop;
+  h3: variables.$h3-line-height-desktop;
+  h4: variables.$h4-line-height-desktop;
+  h5: variables.$h5-line-height-desktop;
+  h6: variables.$h6-line-height-desktop;
+}

es-bs-base/scss/modules/heading-line-heights-mobile.module.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  h1: variables.$h1-line-height;
+  h2: variables.$h2-line-height;
+  h3: variables.$h3-line-height;
+  h4: variables.$h4-line-height;
+  h5: variables.$h5-line-height;
+  h6: variables.$h6-line-height;
+}

es-bs-base/scss/modules/line-heights.module.scss

@@ -0,0 +1,26 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  line-height-50: variables.$line-height-50;
+  line-height-75: variables.$line-height-75;
+  line-height-100: variables.$line-height-100;
+  line-height-200: variables.$line-height-200;
+  line-height-300: variables.$line-height-300;
+  line-height-400: variables.$line-height-400;
+  line-height-500: variables.$line-height-500;
+  line-height-600: variables.$line-height-600;
+  line-height-700: variables.$line-height-700;
+  line-height-800: variables.$line-height-800;
+  line-height-900: variables.$line-height-900;
+
+  // body sizes
+  line-height-xs: variables.$line-height-50;
+  line-height-sm: variables.$line-height-75;
+  line-height-base: variables.$line-height-100;
+  line-height-lg: variables.$line-height-300;
+
+  // deprecated
+  line-height-xl: variables.$line-height-400;
+  line-height-xxl: variables.$line-height-500;
+}

es-bs-base/scss/modules/post-font-sizes-desktop.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  post1: variables.$post1-font-size-desktop;
+  post2: variables.$post2-font-size-desktop;
+  post3: variables.$post3-font-size-desktop;
+}

es-bs-base/scss/modules/post-font-sizes-mobile.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  post1: variables.$post1-font-size;
+  post2: variables.$post2-font-size;
+  post3: variables.$post3-font-size;
+}

es-bs-base/scss/modules/post-general.module.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  color: variables.$headings-color;
+  fontFamily: variables.$headings-font-family;
+  fontWeight: variables.$post-font-weight;
+  marginBottom: variables.$headings-margin-bottom;
+}

es-bs-base/scss/modules/post-line-heights-desktop.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  post1: variables.$post1-line-height-desktop;
+  post2: variables.$post2-line-height-desktop;
+  post3: variables.$post3-line-height-desktop;
+}

es-bs-base/scss/modules/post-line-heights-mobile.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  post1: variables.$post1-line-height;
+  post2: variables.$post2-line-height;
+  post3: variables.$post3-line-height;
+}

es-bs-base/scss/modules/type.module.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+@use "../variables";
+
+:export {
+  body-color: variables.$body-color;
+  font-weight-base: variables.$font-weight-base;
+  link-color: variables.$link-color;
+  link-weight: variables.$link-weight;
+}

es-ds-components/components/es-radio-button.vue

@@ -0,0 +1,62 @@
+<template>
+    <div :class="`custom-control custom-radio custom-control${inline ? '-inline' : ''}`">
+        <radio-button
+            class="custom-control-input"
+            input-class="custom-radio-input"
+            v-model="localValue"
+            :disabled="disabled"
+            :input-id="`${value}-${groupName}`"
+            :name="groupName"
+            :value="value" />
+        <label :for="`${value}-${groupName}`" class="custom-control-label">{{ displayName }}</label>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    displayName: {
+        type: String,
+        required: true,
+        default: "",
+    },
+    groupName: {
+        type: String,
+        required: false,
+        default: "",
+    },
+    inline: {
+        type: Boolean,
+        default: false,
+    },
+    modelValue: {
+        type: String,
+        required: true,
+        default: "",
+    },
+    value: {
+        type: String,
+        required: true,
+        default: "",
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const localValue = ref(props.modelValue);
+
+// Watch for changes to the local value and emit them
+watch(localValue, (newValue) => {
+    emit('update:modelValue', newValue);
+});
+
+// Watch for prop changes and update the local value
+watch(() => props.modelValue, (newValue) => {
+    localValue.value = newValue;
+});
+
+</script>

es-ds-docs/components/ds-molecules-list.vue

@@ -10,5 +10,10 @@
                 Collapse
             </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/radio-button">
+                Radio button
+            </ds-link>
+        </li>
     </ul>
 </template>