@ivds/core 0.1.1 → 1.1.0

package/lib/components/navigation/navigation.css

@@ -1,214 +1,154 @@
-/* Navigation component styles*/
-/* Provides styling for the IVDS navigation component following Helsinki Design System patterns*/
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity */
 .ivds-navigation {
-  --nav-link-color: var(--color-semantic-neutral-700, #404040);
-  --nav-link-color-hover: var(--color-brand-primary-600, #ea580c);
-  --nav-link-color-active: var(--color-brand-primary-600, #ea580c);
-  --nav-link-bg-hover: var(--color-brand-primary-50, #fff7ed);
-  --nav-link-bg-active: var(--color-brand-primary-100, #ffedd5);
-  --nav-spacing-x: var(--spacing-4, 1rem);
-  --nav-spacing-y: var(--spacing-3, 0.75rem);
   display: flex;
   align-items: center;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
 }
 .ivds-navigation__list {
   display: flex;
-  margin: 0;
-  padding: 0;
   list-style: none;
-  gap: 0;
-}
-.ivds-navigation__item {
-  position: relative;
-  display: flex;
   align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  padding: 0;
+  margin: 0;
 }
 .ivds-navigation__link {
-  display: flex;
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  padding: var(--nav-spacing-y) var(--nav-spacing-x);
-  color: var(--nav-link-color);
-  text-decoration: none;
-  font-weight: var(--fontWeight-medium, 500);
+  gap: var(--spacing-2, 0.5rem);
+  min-height: 42px;
+  padding: var(--spacing-2, 0.5rem) 0;
+  border-bottom: 3px solid transparent;
+  color: var(--ivds-text-secondary, #36414f);
   font-size: var(--fontSize-base, 1rem);
-  line-height: var(--lineHeight-tight, 1.25);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  transition: all 0.15s ease-in-out;
-  white-space: nowrap;
+  font-weight: var(--fontWeight-medium, 500);
+  text-decoration: none;
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
 .ivds-navigation__link:hover {
-  color: var(--nav-link-color-hover);
-  background-color: var(--nav-link-bg-hover);
+  color: var(--ivds-text-primary, #121a24);
+  border-color: var(--ivds-border-strong, #a1adba);
 }
-.ivds-navigation__link:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  text-decoration: none;
+.ivds-navigation__link:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
 }
-.ivds-navigation__link:active {
-  background-color: var(--nav-link-bg-active);
+.ivds-navigation__link:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
-.ivds-navigation__link--active {
-  color: var(--nav-link-color-active);
-  background-color: var(--nav-link-bg-active);
+.ivds-navigation__link.ivds-navigation__link--active {
+  color: var(--color-brand-accent-700, #0b4593);
+  border-color: var(--color-brand-accent-600, #1058b8);
   font-weight: var(--fontWeight-semibold, 600);
 }
-.ivds-navigation__link--active::after {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80%;
-  height: 2px;
-  background-color: var(--color-brand-primary-500, #f97316);
-  border-radius: var(--borderRadius-full, 9999px);
-}
-.ivds-navigation {
-  /* Layout variants*/
-}
-.ivds-navigation--horizontal .ivds-navigation__list {
-  flex-direction: row;
-  align-items: center;
-}
-.ivds-navigation--horizontal .ivds-navigation__link--active::after {
-  bottom: -2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80%;
-  height: 2px;
-}
-.ivds-navigation--vertical {
-  flex-direction: column;
-  align-items: stretch;
-}
-.ivds-navigation--vertical .ivds-navigation__list {
+.ivds-side-nav {
+  display: flex;
   flex-direction: column;
-  align-items: stretch;
+  width: 300px;
+  height: 100%;
+  padding: var(--spacing-6, 1.5rem);
+  background-color: var(--ivds-surface-base, #fff);
+  border-right: 1px solid var(--ivds-border-subtle, #e2e7ec);
 }
-.ivds-navigation--vertical .ivds-navigation__item {
+.ivds-side-nav__item {
   width: 100%;
 }
-.ivds-navigation--vertical .ivds-navigation__link {
+.ivds-side-nav__item .ivds-side-nav__link {
   width: 100%;
   justify-content: flex-start;
+  min-height: 42px;
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  border-radius: var(--ivds-radius-s, 0.125rem);
 }
-.ivds-navigation--vertical .ivds-navigation__link--active::after {
-  top: 50%;
-  left: -2px;
-  transform: translateY(-50%);
-  width: 2px;
-  height: 80%;
-}
-.ivds-navigation {
-  /* Size variants*/
-}
-.ivds-navigation--compact {
-  --nav-spacing-x: var(--spacing-3, 0.75rem);
-  --nav-spacing-y: var(--spacing-2, 0.5rem);
-}
-.ivds-navigation--compact .ivds-navigation__link {
-  font-size: var(--fontSize-sm, 0.875rem);
-}
-.ivds-navigation--spacious {
-  --nav-spacing-x: var(--spacing-6, 1.5rem);
-  --nav-spacing-y: var(--spacing-4, 1rem);
-}
-.ivds-navigation--spacious .ivds-navigation__link {
-  font-size: var(--fontSize-lg, 1.125rem);
-}
-.ivds-navigation {
-  /* Theme variants*/
-}
-.ivds-navigation--theme-dark {
-  --nav-link-color: var(--color-semantic-neutral-200, #e5e5e5);
-  --nav-link-color-hover: var(--color-brand-primary-300, #fdba74);
-  --nav-link-color-active: var(--color-brand-primary-400, #fb923c);
-  --nav-link-bg-hover: rgba(249, 115, 22, 0.1);
-  --nav-link-bg-active: rgba(249, 115, 22, 0.2);
+.ivds-side-nav__item .ivds-side-nav__link--active {
+  background-color: var(--color-brand-accent-50, #eef4ff);
+  color: var(--color-brand-accent-700, #0b4593);
 }
-.ivds-navigation--theme-minimal {
-  --nav-link-bg-hover: transparent;
-  --nav-link-bg-active: transparent;
+.ivds-side-nav__item .ivds-side-nav__link--active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  background-color: var(--color-brand-accent-600, #1058b8);
 }
-.ivds-navigation--theme-minimal .ivds-navigation__link:hover {
-  text-decoration: underline;
+.ivds-tabs {
+  display: flex;
+  gap: var(--spacing-5, 1.25rem);
+  border-bottom: 2px solid var(--ivds-border-subtle, #e2e7ec);
 }
-.ivds-navigation--theme-minimal .ivds-navigation__link--active {
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 4px;
+.ivds-tabs__item {
+  position: relative;
+  padding: var(--spacing-3, 0.75rem) 0;
+  color: var(--ivds-text-muted, #4d5968);
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: pointer;
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-.ivds-navigation--theme-minimal .ivds-navigation__link--active::after {
-  display: none;
+.ivds-tabs__item::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  height: 3px;
+  background-color: var(--color-brand-accent-600, #1058b8);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-.ivds-navigation {
-  /* Feature variants*/
+.ivds-tabs__item:hover {
+  color: var(--ivds-text-primary, #121a24);
 }
-.ivds-navigation--with-icons .ivds-navigation__link {
-  gap: var(--spacing-2, 0.5rem);
+.ivds-tabs__item--active {
+  color: var(--color-brand-accent-700, #0b4593);
+  font-weight: var(--fontWeight-semibold, 600);
 }
-.ivds-navigation--with-icons .ivds-navigation__icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
+.ivds-tabs__item--active::after {
+  transform: scaleX(1);
 }
-.ivds-navigation--with-icons .ivds-navigation__icon svg {
-  width: 100%;
-  height: 100%;
-  fill: currentcolor;
+.ivds-dropdown {
+  position: relative;
 }
-.ivds-navigation--with-dropdown .ivds-navigation__dropdown {
+.ivds-dropdown__menu {
   position: absolute;
-  top: 100%;
+  top: calc(100% + 6px);
   left: 0;
-  min-width: 200px;
-  background-color: var(--color-semantic-neutral-50, #fafafa);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e5e5e5);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  min-width: 230px;
+  padding: var(--spacing-2, 0.5rem);
+  border: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  background-color: var(--ivds-surface-base, #fff);
+  box-shadow: var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14));
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-8px);
-  transition: all 0.15s ease-in-out;
-  z-index: 50;
+  transform: translateY(8px);
+  transition: opacity var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  z-index: 200;
 }
-.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__list {
-  flex-direction: column;
-  padding: var(--spacing-2, 0.5rem);
-}
-.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__link {
-  width: 100%;
-  justify-content: flex-start;
-}
-.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__link--active::after {
-  display: none;
+.ivds-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  color: var(--ivds-text-secondary, #36414f);
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: pointer;
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-.ivds-navigation--with-dropdown .ivds-navigation__item--has-dropdown {
-  position: relative;
+.ivds-dropdown__item:hover {
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  color: var(--ivds-text-primary, #121a24);
 }
-.ivds-navigation--with-dropdown .ivds-navigation__item--has-dropdown:hover .ivds-navigation__dropdown {
+.ivds-dropdown:hover .ivds-dropdown__menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
-}
-.ivds-navigation--breadcrumb .ivds-navigation__list {
-  flex-wrap: wrap;
-}
-.ivds-navigation--breadcrumb .ivds-navigation__item:not(:last-child)::after {
-  content: "/";
-  margin: 0 var(--spacing-2, 0.5rem);
-  color: var(--color-semantic-neutral-500, #737373);
-  font-weight: var(--fontWeight-normal, 400);
-}
-.ivds-navigation--breadcrumb .ivds-navigation__link {
-  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
-}
-.ivds-navigation--breadcrumb .ivds-navigation__link--active {
-  background-color: transparent;
-  font-weight: var(--fontWeight-medium, 500);
-  cursor: default;
-}
-.ivds-navigation--breadcrumb .ivds-navigation__link--active::after {
-  display: none;
 }

package/lib/components/navigation/navigation.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/navigation.scss%23sass","../../../src/components/navigation/_navigation-mixins.scss","../../../src/components/navigation/navigation.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA,gDAAA;ACDA,gDAAA;ADKA;ECAE,aAAA;ECFF,mBAAA;EDIE,6DAAA;ACFF;AFGE;ECGA,aAAA;EACA,gBAAA;EACA,mBAAA;EACA,8BAAA;EACA,UAAA;EACA,SAAA;ACHF;AFDE;EEGF,kBAAA;EDME,oBAAA;ECJF,mBDKE;ECJF,6BAAA;EDME,gBAAA;EACA,mCAAA;EACA,oCAAA;EACA,0CAAA;EACA,qCAAA;ECJF,0CAAA;EDME,qBAAA;ECJF,yJDKE;ACJF;ADQE;EACE,wCAAA;EACA,gDAAA;ACNJ;AC3BE;ED6BF,qHAAA;EC3BI,kDAAA;ED6BJ,gBC5BI;AD6BJ;AC1BE;EACE,aAAA;EACA,gBAAA;AD4BJ;ADEE;EACE,6CAAA;EACA,oDAAA;EACA,4CAAA;ACAJ;AF3BA;ECgCE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,YAAA;ECDF,iCAAA;EDGE,gDAAA;EACA,0DAAA;ACDF;AFlCE;ECuCA,WAAA;ACFF;ADIE;EACE,WAAA;EACA,2BAAA;EACA,gBAAA;EACA,2DAAA;EACA,6CAAA;ACFJ;ADII;EACE,uDAAA;EACA,6CAAA;ACFN;ADIM;EACE,WAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,UAAA;EACA,wDAAA;ACFR;AFnDA;EC4DE,aAAA;EACA,8BAAA;EACA,2DAAA;ACLF;AFtDE;EC+DA,kBAAA;EACA,oCAAA;EACA,sCAAA;EACA,0CAAA;EACA,eAAA;EACA,8EAAA;ACNF;ADQE;EACE,WAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA;EACA,WAAA;EACA,wDAAA;EACA,oBAAA;EACA,wBAAA;EACA,kFAAA;ACNJ;ADSE;EACE,wCAAA;ACPJ;ADUE;EACE,6CAAA;EACA,4CAAA;ACRJ;ADUI;EACE,oBAAA;ACRN;AF9EA;EACE,kBAAA;AEiFF;AF/EE;ECyFA,kBAAA;EACA,qBAAA;EACA,OAAA;EACA,gBAAA;EACA,iCAAA;EACA,oDAAA;EACA,6CAAA;EACA,gDAAA;EACA,mEAAA;EACA,UAAA;EACA,kBAAA;EACA,0BAAA;EACA,wJACE;EAEF,YAAA;ACTF;AF3FE;ECwGA,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,2DAAA;EACA,6CAAA;EACA,0CAAA;EACA,uCAAA;EACA,0CAAA;EACA,eAAA;EACA,6JACE;ACXJ;ADcE;EACE,oDAAA;EACA,wCAAA;ACZJ;AFvGE;EACE,UAAA;EACA,mBAAA;EACA,wBAAA;AEyGJ","file":"navigation.css","sourcesContent":["// Navigation component styles\r\n// Core styling for horizontal, vertical, and tabbed navigation menus\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_navigation-mixins' as nav;\r\n\r\n.ivds-navigation {\r\n  @include nav.navigation-base;\r\n  \r\n  &__list {\r\n    @include nav.navigation-list;\r\n  }\r\n  \r\n  &__link {\r\n    @include nav.navigation-link;\r\n  }\r\n}\r\n\r\n// Side Navigation\r\n.ivds-side-nav {\r\n  @include nav.side-navigation-base;\r\n  \r\n  &__item {\r\n    @include nav.side-navigation-item;\r\n  }\r\n}\r\n\r\n// Tabs\r\n.ivds-tabs {\r\n  @include nav.tabs-base;\r\n  \r\n  &__item {\r\n    @include nav.tab-item;\r\n  }\r\n}\r\n\r\n// Dropdown Menu\r\n.ivds-dropdown {\r\n  position: relative;\r\n  \r\n  &__menu {\r\n    @include nav.dropdown-menu-base;\r\n  }\r\n  \r\n  &__item {\r\n    @include nav.dropdown-item;\r\n  }\r\n  \r\n  &:hover &__menu {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n  }\r\n}","// Navigation component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin navigation-base {\n  display: flex;\n  align-items: center;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n}\n\n@mixin navigation-list {\n  display: flex;\n  list-style: none;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  padding: 0;\n  margin: 0;\n}\n\n@mixin navigation-link {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  min-height: 42px;\n  padding: var(--spacing-2, 0.5rem) 0;\n  border-bottom: 3px solid transparent;\n  color: var(--ivds-text-secondary, #36414f);\n  font-size: var(--fontSize-base, 1rem);\n  font-weight: var(--fontWeight-medium, 500);\n  text-decoration: none;\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n    border-color: var(--ivds-border-strong, #a1adba);\n  }\n\n  @include focus-ring;\n\n  &.ivds-navigation__link--active {\n    color: var(--color-brand-accent-700, #0b4593);\n    border-color: var(--color-brand-accent-600, #1058b8);\n    font-weight: var(--fontWeight-semibold, 600);\n  }\n}\n\n@mixin side-navigation-base {\n  display: flex;\n  flex-direction: column;\n  width: 300px;\n  height: 100%;\n  padding: var(--spacing-6, 1.5rem);\n  background-color: var(--ivds-surface-base, #fff);\n  border-right: 1px solid var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin side-navigation-item {\n  width: 100%;\n\n  .ivds-side-nav__link {\n    width: 100%;\n    justify-content: flex-start;\n    min-height: 42px;\n    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n\n    &--active {\n      background-color: var(--color-brand-accent-50, #eef4ff);\n      color: var(--color-brand-accent-700, #0b4593);\n\n      &::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 8px;\n        bottom: 8px;\n        width: 3px;\n        background-color: var(--color-brand-accent-600, #1058b8);\n      }\n    }\n  }\n}\n\n@mixin tabs-base {\n  display: flex;\n  gap: var(--spacing-5, 1.25rem);\n  border-bottom: 2px solid var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin tab-item {\n  position: relative;\n  padding: var(--spacing-3, 0.75rem) 0;\n  color: var(--ivds-text-muted, #4d5968);\n  font-weight: var(--fontWeight-medium, 500);\n  cursor: pointer;\n  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -2px;\n    height: 3px;\n    background-color: var(--color-brand-accent-600, #1058b8);\n    transform: scaleX(0);\n    transform-origin: center;\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n  }\n\n  &--active {\n    color: var(--color-brand-accent-700, #0b4593);\n    font-weight: var(--fontWeight-semibold, 600);\n\n    &::after {\n      transform: scaleX(1);\n    }\n  }\n}\n\n@mixin dropdown-menu-base {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  min-width: 230px;\n  padding: var(--spacing-2, 0.5rem);\n  border: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  background-color: var(--ivds-surface-base, #fff);\n  box-shadow: var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14));\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition:\n    opacity var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  z-index: 200;\n}\n\n@mixin dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  color: var(--ivds-text-secondary, #36414f);\n  font-size: var(--fontSize-sm, 0.875rem);\n  font-weight: var(--fontWeight-medium, 500);\n  cursor: pointer;\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n    color: var(--ivds-text-primary, #121a24);\n  }\n}\n","// Navigation component styles\r\n// Core styling for horizontal, vertical, and tabbed navigation menus\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_navigation-mixins' as nav;\r\n\r\n.ivds-navigation {\r\n  @include nav.navigation-base;\r\n  \r\n  &__list {\r\n    @include nav.navigation-list;\r\n  }\r\n  \r\n  &__link {\r\n    @include nav.navigation-link;\r\n  }\r\n}\r\n\r\n// Side Navigation\r\n.ivds-side-nav {\r\n  @include nav.side-navigation-base;\r\n  \r\n  &__item {\r\n    @include nav.side-navigation-item;\r\n  }\r\n}\r\n\r\n// Tabs\r\n.ivds-tabs {\r\n  @include nav.tabs-base;\r\n  \r\n  &__item {\r\n    @include nav.tab-item;\r\n  }\r\n}\r\n\r\n// Dropdown Menu\r\n.ivds-dropdown {\r\n  position: relative;\r\n  \r\n  &__menu {\r\n    @include nav.dropdown-menu-base;\r\n  }\r\n  \r\n  &__item {\r\n    @include nav.dropdown-item;\r\n  }\r\n  \r\n  &:hover &__menu {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n  }\r\n}","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/navigation/navigation.min.css

@@ -1 +1 @@
-.ivds-navigation{--nav-link-color:var(--color-semantic-neutral-700,#404040);--nav-link-color-hover:var(--color-brand-primary-600,#ea580c);--nav-link-color-active:var(--color-brand-primary-600,#ea580c);--nav-link-bg-hover:var(--color-brand-primary-50,#fff7ed);--nav-link-bg-active:var(--color-brand-primary-100,#ffedd5);--nav-spacing-x:var(--spacing-4,1rem);--nav-spacing-y:var(--spacing-3,0.75rem);align-items:center;display:flex}.ivds-navigation__list{display:flex;gap:0;list-style:none;margin:0;padding:0}.ivds-navigation__item{align-items:center;display:flex;position:relative}.ivds-navigation__link{align-items:center;border-radius:var(--borderRadius-md,.375rem);color:var(--nav-link-color);display:flex;font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);line-height:var(--lineHeight-tight,1.25);padding:var(--nav-spacing-y) var(--nav-spacing-x);text-decoration:none;transition:all .15s ease-in-out;white-space:nowrap}.ivds-navigation__link:hover{background-color:var(--nav-link-bg-hover);color:var(--nav-link-color-hover)}.ivds-navigation__link:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px;text-decoration:none}.ivds-navigation__link--active,.ivds-navigation__link:active{background-color:var(--nav-link-bg-active)}.ivds-navigation__link--active{color:var(--nav-link-color-active);font-weight:var(--fontWeight-semibold,600)}.ivds-navigation__link--active:after{background-color:var(--color-brand-primary-500,#f97316);border-radius:var(--borderRadius-full,9999px);bottom:-2px;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:80%}.ivds-navigation--horizontal .ivds-navigation__list{align-items:center;flex-direction:row}.ivds-navigation--horizontal .ivds-navigation__link--active:after{bottom:-2px;height:2px;left:50%;transform:translateX(-50%);width:80%}.ivds-navigation--vertical,.ivds-navigation--vertical .ivds-navigation__list{align-items:stretch;flex-direction:column}.ivds-navigation--vertical .ivds-navigation__item{width:100%}.ivds-navigation--vertical .ivds-navigation__link{justify-content:flex-start;width:100%}.ivds-navigation--vertical .ivds-navigation__link--active:after{height:80%;left:-2px;top:50%;transform:translateY(-50%);width:2px}.ivds-navigation--compact{--nav-spacing-x:var(--spacing-3,0.75rem);--nav-spacing-y:var(--spacing-2,0.5rem)}.ivds-navigation--compact .ivds-navigation__link{font-size:var(--fontSize-sm,.875rem)}.ivds-navigation--spacious{--nav-spacing-x:var(--spacing-6,1.5rem);--nav-spacing-y:var(--spacing-4,1rem)}.ivds-navigation--spacious .ivds-navigation__link{font-size:var(--fontSize-lg,1.125rem)}.ivds-navigation--theme-dark{--nav-link-color:var(--color-semantic-neutral-200,#e5e5e5);--nav-link-color-hover:var(--color-brand-primary-300,#fdba74);--nav-link-color-active:var(--color-brand-primary-400,#fb923c);--nav-link-bg-hover:rgba(249,115,22,.1);--nav-link-bg-active:rgba(249,115,22,.2)}.ivds-navigation--theme-minimal{--nav-link-bg-hover:transparent;--nav-link-bg-active:transparent}.ivds-navigation--theme-minimal .ivds-navigation__link:hover{text-decoration:underline}.ivds-navigation--theme-minimal .ivds-navigation__link--active{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.ivds-navigation--theme-minimal .ivds-navigation__link--active:after{display:none}.ivds-navigation--with-icons .ivds-navigation__link{gap:var(--spacing-2,.5rem)}.ivds-navigation--with-icons .ivds-navigation__icon{flex-shrink:0;height:1.25rem;width:1.25rem}.ivds-navigation--with-icons .ivds-navigation__icon svg{fill:currentcolor;height:100%;width:100%}.ivds-navigation--with-dropdown .ivds-navigation__dropdown{background-color:var(--color-semantic-neutral-50,#fafafa);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e5e5e5);border-radius:var(--borderRadius-md,.375rem);box-shadow:var(--shadow-lg,0 10px 15px -3px rgba(0,0,0,.1));left:0;min-width:200px;opacity:0;position:absolute;top:100%;transform:translateY(-8px);transition:all .15s ease-in-out;visibility:hidden;z-index:50}.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__list{flex-direction:column;padding:var(--spacing-2,.5rem)}.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__link{justify-content:flex-start;width:100%}.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__link--active:after{display:none}.ivds-navigation--with-dropdown .ivds-navigation__item--has-dropdown{position:relative}.ivds-navigation--with-dropdown .ivds-navigation__item--has-dropdown:hover .ivds-navigation__dropdown{opacity:1;transform:translateY(0);visibility:visible}.ivds-navigation--breadcrumb .ivds-navigation__list{flex-wrap:wrap}.ivds-navigation--breadcrumb .ivds-navigation__item:not(:last-child):after{color:var(--color-semantic-neutral-500,#737373);content:"/";font-weight:var(--fontWeight-normal,400);margin:0 var(--spacing-2,.5rem)}.ivds-navigation--breadcrumb .ivds-navigation__link{padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem)}.ivds-navigation--breadcrumb .ivds-navigation__link--active{background-color:transparent;cursor:default;font-weight:var(--fontWeight-medium,500)}.ivds-navigation--breadcrumb .ivds-navigation__link--active:after{display:none}
+.ivds-navigation{align-items:center;display:flex;font-family:var(--fontFamily-primary,system-ui,sans-serif)}.ivds-navigation__list{align-items:center;display:flex;gap:var(--spacing-3,.75rem);list-style:none;margin:0;padding:0}.ivds-navigation__link{align-items:center;border-bottom:3px solid transparent;color:var(--ivds-text-secondary,#36414f);display:inline-flex;font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);gap:var(--spacing-2,.5rem);min-height:42px;padding:var(--spacing-2,.5rem) 0;position:relative;text-decoration:none;transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-navigation__link:hover{border-color:var(--ivds-border-strong,#a1adba);color:var(--ivds-text-primary,#121a24)}.ivds-navigation__link:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-navigation__link:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-navigation__link.ivds-navigation__link--active{border-color:var(--color-brand-accent-600,#1058b8);color:var(--color-brand-accent-700,#0b4593);font-weight:var(--fontWeight-semibold,600)}.ivds-side-nav{background-color:var(--ivds-surface-base,#fff);border-right:1px solid var(--ivds-border-subtle,#e2e7ec);display:flex;flex-direction:column;height:100%;padding:var(--spacing-6,1.5rem);width:300px}.ivds-side-nav__item{width:100%}.ivds-side-nav__item .ivds-side-nav__link{border-radius:var(--ivds-radius-s,.125rem);justify-content:flex-start;min-height:42px;padding:var(--spacing-2,.5rem) var(--spacing-3,.75rem);width:100%}.ivds-side-nav__item .ivds-side-nav__link--active{background-color:var(--color-brand-accent-50,#eef4ff);color:var(--color-brand-accent-700,#0b4593)}.ivds-side-nav__item .ivds-side-nav__link--active:before{background-color:var(--color-brand-accent-600,#1058b8);bottom:8px;content:"";left:0;position:absolute;top:8px;width:3px}.ivds-tabs{border-bottom:2px solid var(--ivds-border-subtle,#e2e7ec);display:flex;gap:var(--spacing-5,1.25rem)}.ivds-tabs__item{color:var(--ivds-text-muted,#4d5968);cursor:pointer;font-weight:var(--fontWeight-medium,500);padding:var(--spacing-3,.75rem) 0;position:relative;transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-tabs__item:after{background-color:var(--color-brand-accent-600,#1058b8);bottom:-2px;content:"";height:3px;left:0;position:absolute;right:0;transform:scaleX(0);transform-origin:center;transition:transform var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-tabs__item:hover{color:var(--ivds-text-primary,#121a24)}.ivds-tabs__item--active{color:var(--color-brand-accent-700,#0b4593);font-weight:var(--fontWeight-semibold,600)}.ivds-tabs__item--active:after{transform:scaleX(1)}.ivds-dropdown{position:relative}.ivds-dropdown__menu{background-color:var(--ivds-surface-base,#fff);border:1px solid var(--ivds-border-subtle,#e2e7ec);box-shadow:var(--ivds-shadow-lg,0 4px 10px rgba(7,11,16,.14));left:0;min-width:230px;opacity:0;padding:var(--spacing-2,.5rem);position:absolute;top:calc(100% + 6px);transform:translateY(8px);transition:opacity var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),transform var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);visibility:hidden;z-index:200}.ivds-dropdown__item,.ivds-dropdown__menu{border-radius:var(--ivds-radius-s,.125rem)}.ivds-dropdown__item{align-items:center;color:var(--ivds-text-secondary,#36414f);cursor:pointer;display:flex;font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);gap:var(--spacing-2,.5rem);padding:var(--spacing-2,.5rem) var(--spacing-3,.75rem);transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-dropdown__item:hover{background-color:var(--ivds-surface-muted,#f1f3f5);color:var(--ivds-text-primary,#121a24)}.ivds-dropdown:hover .ivds-dropdown__menu{opacity:1;transform:translateY(0);visibility:visible}

package/lib/components/navigation/navigation.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/navigation.scss%23sass","../../../src/components/navigation/navigation.scss","../../../src/components/navigation/_navigation-mixins.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAMA,iBCFA,kBAAA,CCEE,YAAA,CAEA,0DDFF,CDGE,uBEKA,kBAAA,CAFA,YAAA,CAGA,2BAAA,CAFA,eAAA,CAIA,QAAA,CADA,SDFF,CDDE,uBCKF,kBCKE,CAIA,mCAAA,CACA,wCAAA,CANA,mBAAA,CAOA,mCAAA,CDJF,wCAAA,CANA,0BAAA,CCME,eAAA,CACA,gCAAA,CDVF,iBAAA,CCeE,oBAAA,CDJF,iJACA,CCQE,6BAEE,8CAAA,CADA,sCDLJ,CE3BE,qCF+BF,eE5BI,CF0BJ,iHAAA,CE3BI,gDF8BJ,CE1BE,iDAEE,eAAA,CADA,YF6BJ,CCEE,qDAEE,kDAAA,CADA,2CAAA,CAEA,0CDAJ,CD3BA,eEqCE,8CAAA,CACA,wDAAA,CANA,YAAA,CACA,qBAAA,CAEA,WAAA,CDDF,+BAAA,CCAE,WDGF,CDlCE,qBEuCA,UDFF,CCIE,0CAKE,0CAAA,CAHA,0BAAA,CACA,eAAA,CACA,sDAAA,CAHA,UDEJ,CCII,kDACE,qDAAA,CACA,2CDFN,CCIM,yDAOE,sDAAA,CAFA,UAAA,CAJA,UAAA,CAEA,MAAA,CADA,iBAAA,CAEA,OAAA,CAEA,SDDR,CDnDA,WE8DE,yDAAA,CAFA,YAAA,CACA,4BDJF,CDtDE,iBEiEA,oCAAA,CAEA,cAAA,CADA,wCAAA,CAFA,iCAAA,CADA,iBAAA,CAKA,0EDNF,CCQE,uBAOE,sDAAA,CAFA,WAAA,CAJA,UAAA,CAKA,UAAA,CAHA,MAAA,CADA,iBAAA,CAEA,OAAA,CAIA,mBAAA,CACA,uBAAA,CACA,8EDNJ,CCSE,uBACE,sCDPJ,CCUE,yBACE,2CAAA,CACA,0CDRJ,CCUI,+BACE,mBDRN,CD9EA,eACE,iBCiFF,CD/EE,qBEgGA,8CAAA,CAFA,kDAAA,CAGA,6DAAA,CANA,MAAA,CACA,eAAA,CAMA,SAAA,CALA,8BAAA,CAJA,iBAAA,CACA,oBAAA,CAUA,yBAAA,CACA,gJACE,CAHF,iBAAA,CAKA,WDTF,CD3FE,0CE2FA,0CDYF,CDvGE,qBEyGA,kBAAA,CAIA,wCAAA,CAGA,cAAA,CARA,YAAA,CAMA,oCAAA,CACA,wCAAA,CALA,0BAAA,CACA,sDAAA,CAMA,qJDVF,CCcE,2BACE,kDAAA,CACA,sCDZJ,CDvGE,0CACE,SAAA,CAEA,uBAAA,CADA,kBC0GJ","file":"navigation.min.css","sourcesContent":["// Navigation component styles\r\n// Core styling for horizontal, vertical, and tabbed navigation menus\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_navigation-mixins' as nav;\r\n\r\n.ivds-navigation {\r\n  @include nav.navigation-base;\r\n  \r\n  &__list {\r\n    @include nav.navigation-list;\r\n  }\r\n  \r\n  &__link {\r\n    @include nav.navigation-link;\r\n  }\r\n}\r\n\r\n// Side Navigation\r\n.ivds-side-nav {\r\n  @include nav.side-navigation-base;\r\n  \r\n  &__item {\r\n    @include nav.side-navigation-item;\r\n  }\r\n}\r\n\r\n// Tabs\r\n.ivds-tabs {\r\n  @include nav.tabs-base;\r\n  \r\n  &__item {\r\n    @include nav.tab-item;\r\n  }\r\n}\r\n\r\n// Dropdown Menu\r\n.ivds-dropdown {\r\n  position: relative;\r\n  \r\n  &__menu {\r\n    @include nav.dropdown-menu-base;\r\n  }\r\n  \r\n  &__item {\r\n    @include nav.dropdown-item;\r\n  }\r\n  \r\n  &:hover &__menu {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n  }\r\n}","// Navigation component styles\r\n// Core styling for horizontal, vertical, and tabbed navigation menus\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_navigation-mixins' as nav;\r\n\r\n.ivds-navigation {\r\n  @include nav.navigation-base;\r\n  \r\n  &__list {\r\n    @include nav.navigation-list;\r\n  }\r\n  \r\n  &__link {\r\n    @include nav.navigation-link;\r\n  }\r\n}\r\n\r\n// Side Navigation\r\n.ivds-side-nav {\r\n  @include nav.side-navigation-base;\r\n  \r\n  &__item {\r\n    @include nav.side-navigation-item;\r\n  }\r\n}\r\n\r\n// Tabs\r\n.ivds-tabs {\r\n  @include nav.tabs-base;\r\n  \r\n  &__item {\r\n    @include nav.tab-item;\r\n  }\r\n}\r\n\r\n// Dropdown Menu\r\n.ivds-dropdown {\r\n  position: relative;\r\n  \r\n  &__menu {\r\n    @include nav.dropdown-menu-base;\r\n  }\r\n  \r\n  &__item {\r\n    @include nav.dropdown-item;\r\n  }\r\n  \r\n  &:hover &__menu {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n  }\r\n}","// Navigation component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin navigation-base {\n  display: flex;\n  align-items: center;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n}\n\n@mixin navigation-list {\n  display: flex;\n  list-style: none;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  padding: 0;\n  margin: 0;\n}\n\n@mixin navigation-link {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  min-height: 42px;\n  padding: var(--spacing-2, 0.5rem) 0;\n  border-bottom: 3px solid transparent;\n  color: var(--ivds-text-secondary, #36414f);\n  font-size: var(--fontSize-base, 1rem);\n  font-weight: var(--fontWeight-medium, 500);\n  text-decoration: none;\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n    border-color: var(--ivds-border-strong, #a1adba);\n  }\n\n  @include focus-ring;\n\n  &.ivds-navigation__link--active {\n    color: var(--color-brand-accent-700, #0b4593);\n    border-color: var(--color-brand-accent-600, #1058b8);\n    font-weight: var(--fontWeight-semibold, 600);\n  }\n}\n\n@mixin side-navigation-base {\n  display: flex;\n  flex-direction: column;\n  width: 300px;\n  height: 100%;\n  padding: var(--spacing-6, 1.5rem);\n  background-color: var(--ivds-surface-base, #fff);\n  border-right: 1px solid var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin side-navigation-item {\n  width: 100%;\n\n  .ivds-side-nav__link {\n    width: 100%;\n    justify-content: flex-start;\n    min-height: 42px;\n    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n\n    &--active {\n      background-color: var(--color-brand-accent-50, #eef4ff);\n      color: var(--color-brand-accent-700, #0b4593);\n\n      &::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 8px;\n        bottom: 8px;\n        width: 3px;\n        background-color: var(--color-brand-accent-600, #1058b8);\n      }\n    }\n  }\n}\n\n@mixin tabs-base {\n  display: flex;\n  gap: var(--spacing-5, 1.25rem);\n  border-bottom: 2px solid var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin tab-item {\n  position: relative;\n  padding: var(--spacing-3, 0.75rem) 0;\n  color: var(--ivds-text-muted, #4d5968);\n  font-weight: var(--fontWeight-medium, 500);\n  cursor: pointer;\n  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -2px;\n    height: 3px;\n    background-color: var(--color-brand-accent-600, #1058b8);\n    transform: scaleX(0);\n    transform-origin: center;\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n  }\n\n  &--active {\n    color: var(--color-brand-accent-700, #0b4593);\n    font-weight: var(--fontWeight-semibold, 600);\n\n    &::after {\n      transform: scaleX(1);\n    }\n  }\n}\n\n@mixin dropdown-menu-base {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  min-width: 230px;\n  padding: var(--spacing-2, 0.5rem);\n  border: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  background-color: var(--ivds-surface-base, #fff);\n  box-shadow: var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14));\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition:\n    opacity var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  z-index: 200;\n}\n\n@mixin dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  color: var(--ivds-text-secondary, #36414f);\n  font-size: var(--fontSize-sm, 0.875rem);\n  font-weight: var(--fontWeight-medium, 500);\n  cursor: pointer;\n  transition:\n    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n    color: var(--ivds-text-primary, #121a24);\n  }\n}\n","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}