@telia/teddy 0.2.2 → 0.2.4

package/dist/components/radio-card-group/radio-card-group-item-title.cjs

@@ -681,23 +681,23 @@ const NavigationMenu = Object.assign(Root$1, {
   TopMenuTrigger
 });
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_1mn6i_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1mn6i_6",
-  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1mn6i_26",
-  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1mn6i_31",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1mn6i_35",
-  "teddy-global-navigation__header": "_teddy-global-navigation__header_1mn6i_48",
-  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1mn6i_51",
-  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1mn6i_55",
-  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1mn6i_59",
-  "teddy-global-navigation__list": "_teddy-global-navigation__list_1mn6i_65",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1mn6i_70",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1mn6i_73",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1mn6i_77",
-  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1mn6i_84",
-  "close-viewport": "_close-viewport_1mn6i_1",
-  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1mn6i_100",
-  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1mn6i_103"
+  "teddy-global-navigation": "_teddy-global-navigation_1eacg_1",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1eacg_6",
+  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1eacg_26",
+  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1eacg_31",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_1eacg_35",
+  "teddy-global-navigation__header": "_teddy-global-navigation__header_1eacg_48",
+  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1eacg_51",
+  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1eacg_55",
+  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1eacg_59",
+  "teddy-global-navigation__list": "_teddy-global-navigation__list_1eacg_65",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1eacg_70",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1eacg_73",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1eacg_77",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1eacg_84",
+  "close-viewport": "_close-viewport_1eacg_1",
+  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1eacg_101",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1eacg_104"
 };
 function MyPages(props) {
   var _a, _b;
@@ -908,7 +908,7 @@ const Desktop = React.forwardRef(() => {
       var _a;
       return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.List, { value: link.name, children: (_a = link.links) == null ? void 0 : _a.map(
         (subLink) => {
-          var _a2, _b, _c;
+          var _a2, _b;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             NavigationMenu.Item,
             {
@@ -946,34 +946,23 @@ const Desktop = React.forwardRef(() => {
                       }
                     )
                   }
-                ) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsxRuntime.jsx(
-                  NavigationMenu.Trigger,
-                  {
-                    asChild: true,
-                    active: currentLocation === subLink.link,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      components_button_button.Button,
-                      {
-                        onMouseEnter: () => handleInteractions(subLink.name),
-                        onKeyDown: () => {
-                          handleInteractions(subLink.name);
-                          setShowMenu(true);
-                        },
-                        onClick: () => handleInteractions(subLink.name),
-                        children: subLink.name
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                ) }) : /* @__PURE__ */ jsxRuntime.jsx(
                   NavigationMenu.Link,
                   {
                     asChild: true,
                     active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
+                    onFocus: () => {
+                      handleInteractions(subLink.name);
+                      setShowMenu(true);
+                    },
                     children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(
                       Link2,
                       {
                         onMouseEnter: () => handleInteractions(subLink.name),
-                        onClick: () => handleInteractions(subLink.name),
+                        onClick: () => {
+                          handleInteractions(subLink.name);
+                          setShowMenu(false);
+                        },
                         href: subLink.link,
                         children: subLink.name
                       }
@@ -981,7 +970,13 @@ const Desktop = React.forwardRef(() => {
                       "a",
                       {
                         onMouseEnter: () => handleInteractions(subLink.name),
-                        onClick: () => handleInteractions(subLink.name),
+                        onClick: () => {
+                          handleInteractions(subLink.name);
+                          setShowMenu(false);
+                        },
+                        onFocus: () => {
+                          setShowMenu(true);
+                        },
                         href: subLink.link,
                         children: subLink.name
                       }
@@ -995,7 +990,7 @@ const Desktop = React.forwardRef(() => {
                     className: styles[`${rootClassName}__viewport-wrapper`],
                     "data-state": showMenu ? "open" : "closed",
                     children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                      ((_a2 = subLink.links) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                         HightlightedLinksDesktop,
                         {
                           listName: subLink.name,
@@ -1003,7 +998,7 @@ const Desktop = React.forwardRef(() => {
                           links: subLink.links
                         }
                       ),
-                      ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                      ((_b = subLink.highlightedLinks) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                         HightlightedLinksDesktop,
                         {
                           colored: true,

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -660,23 +660,23 @@ const NavigationMenu = Object.assign(Root$1, {
   TopMenuTrigger
 });
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_1mn6i_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1mn6i_6",
-  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1mn6i_26",
-  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1mn6i_31",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1mn6i_35",
-  "teddy-global-navigation__header": "_teddy-global-navigation__header_1mn6i_48",
-  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1mn6i_51",
-  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1mn6i_55",
-  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1mn6i_59",
-  "teddy-global-navigation__list": "_teddy-global-navigation__list_1mn6i_65",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1mn6i_70",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1mn6i_73",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1mn6i_77",
-  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1mn6i_84",
-  "close-viewport": "_close-viewport_1mn6i_1",
-  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1mn6i_100",
-  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1mn6i_103"
+  "teddy-global-navigation": "_teddy-global-navigation_1eacg_1",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1eacg_6",
+  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1eacg_26",
+  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1eacg_31",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_1eacg_35",
+  "teddy-global-navigation__header": "_teddy-global-navigation__header_1eacg_48",
+  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1eacg_51",
+  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1eacg_55",
+  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1eacg_59",
+  "teddy-global-navigation__list": "_teddy-global-navigation__list_1eacg_65",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1eacg_70",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1eacg_73",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1eacg_77",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1eacg_84",
+  "close-viewport": "_close-viewport_1eacg_1",
+  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1eacg_101",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1eacg_104"
 };
 function MyPages(props) {
   var _a, _b;
@@ -887,7 +887,7 @@ const Desktop = React__default.forwardRef(() => {
       var _a;
       return /* @__PURE__ */ jsx(NavigationMenu.List, { value: link.name, children: (_a = link.links) == null ? void 0 : _a.map(
         (subLink) => {
-          var _a2, _b, _c;
+          var _a2, _b;
           return /* @__PURE__ */ jsxs(
             NavigationMenu.Item,
             {
@@ -925,34 +925,23 @@ const Desktop = React__default.forwardRef(() => {
                       }
                     )
                   }
-                ) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsx(
-                  NavigationMenu.Trigger,
-                  {
-                    asChild: true,
-                    active: currentLocation === subLink.link,
-                    children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        onMouseEnter: () => handleInteractions(subLink.name),
-                        onKeyDown: () => {
-                          handleInteractions(subLink.name);
-                          setShowMenu(true);
-                        },
-                        onClick: () => handleInteractions(subLink.name),
-                        children: subLink.name
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ jsx(
+                ) }) : /* @__PURE__ */ jsx(
                   NavigationMenu.Link,
                   {
                     asChild: true,
                     active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
+                    onFocus: () => {
+                      handleInteractions(subLink.name);
+                      setShowMenu(true);
+                    },
                     children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(
                       Link2,
                       {
                         onMouseEnter: () => handleInteractions(subLink.name),
-                        onClick: () => handleInteractions(subLink.name),
+                        onClick: () => {
+                          handleInteractions(subLink.name);
+                          setShowMenu(false);
+                        },
                         href: subLink.link,
                         children: subLink.name
                       }
@@ -960,7 +949,13 @@ const Desktop = React__default.forwardRef(() => {
                       "a",
                       {
                         onMouseEnter: () => handleInteractions(subLink.name),
-                        onClick: () => handleInteractions(subLink.name),
+                        onClick: () => {
+                          handleInteractions(subLink.name);
+                          setShowMenu(false);
+                        },
+                        onFocus: () => {
+                          setShowMenu(true);
+                        },
                         href: subLink.link,
                         children: subLink.name
                       }
@@ -974,7 +969,7 @@ const Desktop = React__default.forwardRef(() => {
                     className: styles[`${rootClassName}__viewport-wrapper`],
                     "data-state": showMenu ? "open" : "closed",
                     children: /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(
+                      ((_a2 = subLink.links) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsx(
                         HightlightedLinksDesktop,
                         {
                           listName: subLink.name,
@@ -982,7 +977,7 @@ const Desktop = React__default.forwardRef(() => {
                           links: subLink.links
                         }
                       ),
-                      ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(
+                      ((_b = subLink.highlightedLinks) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(
                         HightlightedLinksDesktop,
                         {
                           colored: true,

package/dist/style.css

@@ -5117,41 +5117,41 @@
   height: var(--radix-navigation-menu-viewport-height);
   transform-origin: top left;
   overflow: clip;
-}._teddy-global-navigation_1mn6i_1 {
+}._teddy-global-navigation_1eacg_1 {
   position: sticky;
   inset: 0 0 auto 0;
   z-index: 39;
 }
-._teddy-global-navigation__mobile_1mn6i_6 {
+._teddy-global-navigation__mobile_1eacg_6 {
   padding: var(--teddy-spacing-25) var(--teddy-spacing-200);
   border-bottom: var(--teddy-border-width-sm) solid var(--teddy-color-border-weak);
 }
 @media screen and (max-width: 335px) {
-  ._teddy-global-navigation__mobile_1mn6i_6 {
+  ._teddy-global-navigation__mobile_1eacg_6 {
     padding: var(--teddy-spacing-25) 0;
   }
 }
-._teddy-global-navigation__mobile_1mn6i_6::before {
+._teddy-global-navigation__mobile_1eacg_6::before {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
-._teddy-global-navigation__mobile_1mn6i_6::after {
+._teddy-global-navigation__mobile_1eacg_6::after {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
 @media screen and (max-width: 335px) {
-  ._teddy-global-navigation__top-icon-wrapper_1mn6i_26 {
+  ._teddy-global-navigation__top-icon-wrapper_1eacg_26 {
     gap: 0;
   }
 }
 @media screen and (max-width: 335px) {
-  ._teddy-global-navigation__top-menu-icons_1mn6i_31 {
+  ._teddy-global-navigation__top-menu-icons_1eacg_31 {
     gap: 0;
   }
 }
-._teddy-global-navigation__link_1mn6i_35 {
+._teddy-global-navigation__link_1eacg_35 {
   text-decoration: none;
   display: flex;
   justify-content: space-between;
@@ -5161,46 +5161,46 @@
   font-weight: var(--teddy-typography-weight-bold);
   font-size: var(--teddy-typography-scale-400);
 }
-._teddy-global-navigation__link_1mn6i_35:hover {
+._teddy-global-navigation__link_1eacg_35:hover {
   background-color: var(--teddy-color-background-interactive-transparent-hover);
 }
-._teddy-global-navigation__header_1mn6i_48 {
+._teddy-global-navigation__header_1eacg_48 {
   color: var(--teddy-color-text-interactive-primary);
 }
-._teddy-global-navigation__colored-box_1mn6i_51 {
+._teddy-global-navigation__colored-box_1eacg_51 {
   background-color: var(--teddy-color-background-secondary);
   padding: 40px;
 }
-._teddy-global-navigation__colored-box--mobile_1mn6i_55 {
+._teddy-global-navigation__colored-box--mobile_1eacg_55 {
   margin: 0 -1.5rem;
   background-color: var(--teddy-color-background-secondary);
 }
-._teddy-global-navigation__sublink-button--mobile_1mn6i_59 {
+._teddy-global-navigation__sublink-button--mobile_1eacg_59 {
   background-color: transparent;
   padding: 0;
   color: var(--teddy-color-text-interactive-primary);
   border-radius: unset;
 }
-._teddy-global-navigation__list_1mn6i_65 {
+._teddy-global-navigation__list_1eacg_65 {
   column-count: 2;
   max-height: 13rem;
   column-gap: var(--teddy-spacing-300);
 }
-._teddy-global-navigation__viewport_1mn6i_70._teddy-global-navigation__viewport_1mn6i_70 {
+._teddy-global-navigation__viewport_1eacg_70._teddy-global-navigation__viewport_1eacg_70 {
   height: var(--teddy-viewport-wrapper-height);
 }
-._teddy-global-navigation__item-wrapper_1mn6i_73 {
+._teddy-global-navigation__item-wrapper_1eacg_73 {
   position: relative;
   display: flex;
 }
-._teddy-global-navigation__item-count_1mn6i_77 {
+._teddy-global-navigation__item-count_1eacg_77 {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   transform: translate(calc(var(--teddy-spacing-150) + var(--teddy-spacing-25)), calc(-1 * var(--teddy-spacing-100) + var(--teddy-spacing-10)));
 }
-._teddy-global-navigation__viewport-wrapper_1mn6i_84 {
+._teddy-global-navigation__viewport-wrapper_1eacg_84 {
   position: absolute;
   left: 0;
   width: 100%;
@@ -5208,35 +5208,36 @@
   transition: max-height var(--teddy-motion-duration-controlled, 0) ease;
   box-shadow: var(--teddy-shadow-md);
   background-color: var(--teddy-color-background-primary);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px inset, var(--teddy-shadow-md);
 }
-._teddy-global-navigation__viewport-wrapper_1mn6i_84[data-state=open] {
+._teddy-global-navigation__viewport-wrapper_1eacg_84[data-state=open] {
   max-height: var(--teddy-viewport-wrapper-height);
 }
-._teddy-global-navigation__viewport-wrapper_1mn6i_84[data-state=closed] {
+._teddy-global-navigation__viewport-wrapper_1eacg_84[data-state=closed] {
   max-height: 0;
-  animation: _close-viewport_1mn6i_1 var(--teddy-motion-duration-controlled, 0) ease;
+  animation: _close-viewport_1eacg_1 var(--teddy-motion-duration-controlled, 0) ease;
 }
-._teddy-global-navigation__top-menu-color_1mn6i_100 {
+._teddy-global-navigation__top-menu-color_1eacg_101 {
   background-color: var(--teddy-color-background-secondary);
 }
-._teddy-global-navigation__top-menu-wrapper_1mn6i_103 {
+._teddy-global-navigation__top-menu-wrapper_1eacg_104 {
   overflow: hidden;
   max-width: 84rem;
   transition: max-height var(--teddy-motion-duration-controlled, 0) ease;
   margin: 0 var(--teddy-spacing-600);
 }
 @media (min-width: 1440px) {
-  ._teddy-global-navigation__top-menu-wrapper_1mn6i_103 {
+  ._teddy-global-navigation__top-menu-wrapper_1eacg_104 {
     margin: 0 auto;
   }
 }
-._teddy-global-navigation__top-menu-wrapper_1mn6i_103[data-state=open] {
+._teddy-global-navigation__top-menu-wrapper_1eacg_104[data-state=open] {
   max-height: var(--teddy-top-menu-height, 47px);
 }
-._teddy-global-navigation__top-menu-wrapper_1mn6i_103[data-state=closed] {
+._teddy-global-navigation__top-menu-wrapper_1eacg_104[data-state=closed] {
   max-height: 0;
 }
-@keyframes _close-viewport_1mn6i_1 {
+@keyframes _close-viewport_1eacg_1 {
   0% {
     max-height: var(--teddy-viewport-wrapper-height);
   }

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.2.2",
+  "version": "0.2.4",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"