fix(cc): no classes styling the same CSS properties are set on one element

components/alert/w-alert.vue

@@ -30,7 +30,7 @@ const model = createModel({ props, emit });
 const alertColorType = computed(() => possibleTypeProps.find((e) => props[e]));
 const activeWrapperClassNames = computed(() => ccAlert[alertColorType.value]);
 const activeIconClassNames = computed(() => ccAlert[`${alertColorType.value}Icon`]);
-const wrapperClass = computed(() => [ccAlert.alert, activeWrapperClassNames.value]);
+const wrapperClass = computed(() => [ccAlert.wrapper, activeWrapperClassNames.value]);
 const iconClass = computed(() => [ccAlert.icon, activeIconClassNames.value]);
 
 const iconComponent = computed(() => {

components/attention/locales/da/messages.po

@@ -15,58 +15,58 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: da\n"
 "X-Crowdin-File-ID: 12406\n"
+"PO-Revision-Date: \n"
 
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:138
+#: components/attention/w-attention.vue:152
 msgid "attention.aria.callout"
 msgstr "En grøn taleboble der introducerer noget nyt"
 
 #. Aria label for the close button in attention
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:89
+#: components/attention/w-attention.vue:96
 msgid "attention.aria.close"
 msgstr "Luk"
 
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:152
+#: components/attention/w-attention.vue:164
 msgid "attention.aria.highlight"
 msgstr "En opmærksomhedsskabende taleboble med vigtig information"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:109
+#: components/attention/w-attention.vue:124
 msgid "attention.aria.pointingDown"
 msgstr "peger nedad"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:116
+#: components/attention/w-attention.vue:132
 msgid "attention.aria.pointingLeft"
 msgstr "peger til venstre"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:102
+#: components/attention/w-attention.vue:116
 msgid "attention.aria.pointingRight"
 msgstr "peger til højre"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:95
+#: components/attention/w-attention.vue:108
 msgid "attention.aria.pointingUp"
 msgstr "peger opad"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:145
+#: components/attention/w-attention.vue:158
 msgid "attention.aria.popover"
 msgstr "En hvid taleboble med mere information"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:131
+#: components/attention/w-attention.vue:146
 msgid "attention.aria.tooltip"
 msgstr "En sort taleboble med flere oplysninger"
-

components/attention/locales/en/messages.po

@@ -16,55 +16,54 @@ msgstr ""
 
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:138
+#: components/attention/w-attention.vue:152
 msgid "attention.aria.callout"
 msgstr "A green speech bubble introducing something new"
 
 #. Aria label for the close button in attention
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:89
+#: components/attention/w-attention.vue:96
 msgid "attention.aria.close"
 msgstr "Close"
 
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:152
+#: components/attention/w-attention.vue:164
 msgid "attention.aria.highlight"
 msgstr "An attention speech bubble with important information"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:109
+#: components/attention/w-attention.vue:124
 msgid "attention.aria.pointingDown"
 msgstr "pointing down"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:116
+#: components/attention/w-attention.vue:132
 msgid "attention.aria.pointingLeft"
 msgstr "pointing left"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:102
+#: components/attention/w-attention.vue:116
 msgid "attention.aria.pointingRight"
 msgstr "pointing right"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:95
+#: components/attention/w-attention.vue:108
 msgid "attention.aria.pointingUp"
 msgstr "pointing up"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:145
+#: components/attention/w-attention.vue:158
 msgid "attention.aria.popover"
 msgstr "A white speech bubble providing additional information"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:131
+#: components/attention/w-attention.vue:146
 msgid "attention.aria.tooltip"
 msgstr "A black speech bubble providing complementary information"
-

components/attention/locales/fi/messages.po

@@ -15,58 +15,58 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: fi\n"
 "X-Crowdin-File-ID: 12406\n"
+"PO-Revision-Date: \n"
 
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:138
+#: components/attention/w-attention.vue:152
 msgid "attention.aria.callout"
 msgstr "Vihreä puhekupla, joka esittelee jotain uutta"
 
 #. Aria label for the close button in attention
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:89
+#: components/attention/w-attention.vue:96
 msgid "attention.aria.close"
 msgstr "Sulje"
 
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:152
+#: components/attention/w-attention.vue:164
 msgid "attention.aria.highlight"
 msgstr "Puhekupla, joka sisältää tärkeää tietoa"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:109
+#: components/attention/w-attention.vue:124
 msgid "attention.aria.pointingDown"
 msgstr "osoittaa alas"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:116
+#: components/attention/w-attention.vue:132
 msgid "attention.aria.pointingLeft"
 msgstr "osoittaa vasemmalle"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:102
+#: components/attention/w-attention.vue:116
 msgid "attention.aria.pointingRight"
 msgstr "osoittaa oikealle"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:95
+#: components/attention/w-attention.vue:108
 msgid "attention.aria.pointingUp"
 msgstr "osoittaa ylös"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:145
+#: components/attention/w-attention.vue:158
 msgid "attention.aria.popover"
 msgstr "Valkoinen puhekupla, joka tarjoaa lisätietoa"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:131
+#: components/attention/w-attention.vue:146
 msgid "attention.aria.tooltip"
 msgstr "Musta puhekupla, joka tarjoaa täydentävää tietoa"
-

components/attention/locales/nb/messages.po

@@ -15,58 +15,58 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: nb\n"
 "X-Crowdin-File-ID: 12406\n"
+"PO-Revision-Date: \n"
 
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:138
+#: components/attention/w-attention.vue:152
 msgid "attention.aria.callout"
 msgstr "Grønn taleboble som introduserer noe nytt"
 
 #. Aria label for the close button in attention
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:89
+#: components/attention/w-attention.vue:96
 msgid "attention.aria.close"
 msgstr "Lukk"
 
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:152
+#: components/attention/w-attention.vue:164
 msgid "attention.aria.highlight"
 msgstr "En uthevet taleboble med viktig informasjon"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:109
+#: components/attention/w-attention.vue:124
 msgid "attention.aria.pointingDown"
 msgstr "peker ned"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:116
+#: components/attention/w-attention.vue:132
 msgid "attention.aria.pointingLeft"
 msgstr "peker til venstre"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:102
+#: components/attention/w-attention.vue:116
 msgid "attention.aria.pointingRight"
 msgstr "peker til høyre"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:95
+#: components/attention/w-attention.vue:108
 msgid "attention.aria.pointingUp"
 msgstr "peker opp"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:145
+#: components/attention/w-attention.vue:158
 msgid "attention.aria.popover"
 msgstr "En hvit taleboble som gir tilleggsinformasjon"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: components/attention/w-attention.vue:131
+#: components/attention/w-attention.vue:146
 msgid "attention.aria.tooltip"
 msgstr "En svart taleboble som forklarer konteksten"
-

components/attention/w-attention.vue

@@ -59,10 +59,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:modelValue', 'dismiss']);
-const attentionClasses = computed(() => ({
- [props.attentionClass]: true,
- [ccAttention.notCallout]: !props.callout,
-}));
+const attentionClasses = computed(() => [props.attentionClass, !props.callout && ccAttention.notCallout]);
 
 const wrapperClasses = computed(() => [ccAttention.base, getVariantClasses(props).wrapper]);
 

components/badge/w-badge.vue

@@ -28,13 +28,11 @@ const props = defineProps({
 const badgeClasses = computed(() => [
  ccBadge.base,
  ccBadge[props.variant],
- {
- [ccBadge.positionBase]: props.position,
- [ccBadge.positionTL]: props.position === 'top-left',
- [ccBadge.positionTR]: props.position === 'top-right',
- [ccBadge.positionBR]: props.position === 'bottom-right',
- [ccBadge.positionBL]: props.position === 'bottom-left',
- },
+ !!props.position && ccBadge.positionBase,
+ props.position === 'top-left' && ccBadge.positionTL,
+ props.position === 'top-right' && ccBadge.positionTR,
+ props.position === 'bottom-right' && ccBadge.positionBR,
+ props.position === 'bottom-left' && ccBadge.positionBL,
 ]);
 </script>
 

components/box/w-box.vue

@@ -20,13 +20,11 @@ const props = defineProps({
 });
 
 const boxClasses = computed(() => [
- ccBox.box,
- {
- [ccBox.bleed]: props.bleed,
- [ccBox.info]: props.info,
- [ccBox.neutral]: props.neutral,
- [ccBox.bordered]: props.bordered,
- },
+ ccBox.base,
+ props.bleed && ccBox.bleed,
+ props.info && ccBox.info,
+ props.neutral && ccBox.neutral,
+ props.bordered && ccBox.bordered,
 ]);
 
 const optOutRoleWithDefault = computed(() => (props.role === '' ? null : props.role ?? 'region'));

components/breadcrumbs/locales/da/messages.po

@@ -15,10 +15,10 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: da\n"
 "X-Crowdin-File-ID: 1354\n"
+"PO-Revision-Date: \n"
 
 #. Default screenreader message for the breadcrumb component
 #. js-lingui-explicit-id
-#: components/breadcrumbs/w-breadcrumbs.vue:13
+#: components/breadcrumbs/w-breadcrumbs.vue:17
 msgid "breadcrumbs.ariaLabel"
 msgstr "Du er her"
-

components/breadcrumbs/locales/en/messages.po

@@ -16,7 +16,6 @@ msgstr ""
 
 #. Default screenreader message for the breadcrumb component
 #. js-lingui-explicit-id
-#: components/breadcrumbs/w-breadcrumbs.vue:13
+#: components/breadcrumbs/w-breadcrumbs.vue:17
 msgid "breadcrumbs.ariaLabel"
 msgstr "You are here"
-

components/breadcrumbs/locales/fi/messages.po

@@ -15,10 +15,10 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: fi\n"
 "X-Crowdin-File-ID: 1354\n"
+"PO-Revision-Date: \n"
 
 #. Default screenreader message for the breadcrumb component
 #. js-lingui-explicit-id
-#: components/breadcrumbs/w-breadcrumbs.vue:13
+#: components/breadcrumbs/w-breadcrumbs.vue:17
 msgid "breadcrumbs.ariaLabel"
 msgstr "Olet tässä"
-

components/breadcrumbs/locales/nb/messages.po

@@ -15,10 +15,10 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: nb\n"
 "X-Crowdin-File-ID: 1354\n"
+"PO-Revision-Date: \n"
 
 #. Default screenreader message for the breadcrumb component
 #. js-lingui-explicit-id
-#: components/breadcrumbs/w-breadcrumbs.vue:13
+#: components/breadcrumbs/w-breadcrumbs.vue:17
 msgid "breadcrumbs.ariaLabel"
 msgstr "Her er du"
-

components/button-group/w-button-group-item.vue

@@ -10,7 +10,7 @@ const vertical = inject('vertical', false);
 const outlinedClass = computed(() => [
  ccButtonGroupItem.outlined,
  vertical.value ? ccButtonGroupItem.outlinedVertical : ccButtonGroupItem.outlinedHorizontal,
- props.selected ? ccButtonGroupItem.outlinedSelected : '',
+ props.selected ? ccButtonGroupItem.outlinedSelected : ccButtonGroupItem.outlinedUnselected,
 ]);
 
 const outlineResetClass = computed(() => [
@@ -20,7 +20,7 @@ const outlineResetClass = computed(() => [
 const wrapperClass = computed(() => [
  ccButtonGroupItem.wrapper,
  outlined.value ? outlinedClass.value : outlineResetClass.value,
- props.selected ? ccButtonGroupItem.selected : '',
+ props.selected ? ccButtonGroupItem.selected : ccButtonGroupItem.unselected,
 ]);
 </script>