@vygruppen/spor-react 13.7.0 → 13.7.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.7.0",
+  "version": "13.7.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "5.1.1",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "5.0.2"
+    "@vygruppen/spor-icon-react": "5.0.3",
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/input/Field.tsx

@@ -121,23 +121,21 @@ export const Field = ({
         gap={gap}
       >
         {label && !floatingLabel && (
-          <Label asChild={labelAsChild} aria-hidden css={styles.label}>
+          <Label asChild={labelAsChild} css={styles.label}>
             {renderLabelWithIndicator(label, labelAsChild)}
           </Label>
         )}
 
-        {children}
-
         {label && floatingLabel && (
           <FloatingLabel
             data-float={shouldFloat ? true : undefined}
             asChild={labelAsChild}
-            aria-hidden
             css={styles.label}
           >
             {renderLabelWithIndicator(label, labelAsChild)}
           </FloatingLabel>
         )}
+        {children}
         {errorText && (
           <ChakraField.ErrorText aria-live="polite">
             {errorText}

package/src/layout/RadioCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+  Flex,
   RadioCard as ChakraRadioCard,
   RecipeVariantProps,
   useSlotRecipe,
@@ -64,7 +65,7 @@ export const RadioCard = ({
       />
       <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
         {showIndicator && <ChakraRadioCard.ItemIndicator />}
-        {children}
+        <Flex direction="column">{children}</Flex>
       </ChakraRadioCard.ItemControl>
     </ChakraRadioCard.Item>
   );

package/src/theme/recipes/badge.ts

@@ -7,57 +7,69 @@ export const badgeRecipie = defineRecipe({
     justifyContent: "center",
     height: "fit-content",
     gap: "0.5",
+    outline: "1px solid",
+    outlineOffset: "-1px",
   },
   variants: {
     colorPalette: {
       neutral: {
         backgroundColor: "surface",
         color: "text",
+        outlineColor: "outline",
         "& svg": { color: "icon" },
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
+        outlineColor: "outline.neutral",
         "& svg": { color: "icon.neutral" },
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
+        outlineColor: "outline.success",
         "& svg": { color: "icon.success" },
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
+        outlineColor: "outline.info",
         "& svg": { color: "icon.info" },
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
+        outlineColor: "outline.warning",
         "& svg": { color: "icon.warning" },
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
+        outlineColor: "outline.notice",
         "& svg": { color: "icon.notice" },
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
+        outlineColor: "outline.caution",
         "& svg": { color: "icon.caution" },
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
+        outlineColor: "outline.critical",
         "& svg": { color: "icon.critical" },
       },
       brightRed: {
         backgroundColor: { _light: "brightRed", _dark: "brightRed" },
         color: { _light: "pink", _dark: "pink" },
+        outlineColor: "outline.error",
         "& svg": { color: { _light: "pink", _dark: "pink" } },
       },
       disabled: {
         backgroundColor: "surface.disabled",
         color: "text.disabled",
+        outlineColor: "outline.disabled",
         "& svg": { color: "icon.disabled" },
       },
     },
@@ -100,6 +112,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
         color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
         "& svg": { color: { _light: "royal", _dark: "icyBlue" } },
       },
     },
@@ -109,6 +122,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
         color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
         "& svg": { color: { _light: "mint", _dark: "jungle" } },
       },
     },
@@ -118,6 +132,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "carbon", _dark: "platinum" },
         color: { _light: "white", _dark: "darkGrey" },
+        outlineColor: { _light: "iron", _dark: "silver" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } },
       },
     },
@@ -128,6 +143,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "coffee", _dark: "blonde" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "bronze", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
       },
     },
@@ -137,6 +153,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "bronze", _dark: "banana" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "golden", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
       },
     },
@@ -146,6 +163,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "wood", _dark: "champagne" },
         color: { _light: "bisque", _dark: "wood" },
+        outlineColor: { _light: "russet", _dark: "saffron" },
         "& svg": { color: { _light: "bisque", _dark: "wood" } },
       },
     },
@@ -155,6 +173,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "burgundy", _dark: "lightRed" },
         color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
         "& svg": { color: { _light: "pink", _dark: "maroon" } },
       },
     },
@@ -164,6 +183,7 @@ export const badgeRecipie = defineRecipe({
       inverted: true,
       css: {
         backgroundColor: { _light: "ink", _dark: "white" },
+        outlineColor: { _light: "whiteAlpha.400", _dark: "blackAlpha.400" },
         color: { _light: "white", _dark: "darkGrey" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } },
       },

package/src/theme/slot-recipes/select.ts

@@ -166,6 +166,11 @@ export const selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.error",
       },
     },
+    valueText: {
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+    },
     itemText: {
       flex: "1",
       alignItems: "center",