@ivds/core 0.1.1

package/lib/components/header/header.css

@@ -0,0 +1,274 @@
+/* Header component styles*/
+/* Provides styling for the IVDS header component with layout and branding mixins*/
+.ivds-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  min-height: 64px;
+  position: relative;
+  z-index: 10;
+  justify-content: space-between;
+  gap: var(--spacing-6, 1.5rem);
+}
+@media (max-width: 768px) {
+  .ivds-header {
+    flex-wrap: wrap;
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    min-height: 56px;
+  }
+}
+.ivds-header {
+  /* Brand area*/
+}
+.ivds-header__brand {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.ivds-header__brand-logo {
+  height: 2rem;
+  width: auto;
+  margin-right: var(--spacing-3, 0.75rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__brand-logo {
+    height: calc(2rem * 0.875);
+    margin-right: var(--spacing-2, 0.5rem);
+  }
+}
+.ivds-header__brand-text {
+  font-size: var(--fontSize-lg, 1.125rem);
+  font-weight: var(--fontWeight-bold, 700);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  text-decoration: none;
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-header__brand-text:hover {
+  color: var(--color-brand-primary-600, #ea580c);
+}
+.ivds-header__brand-text:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  border-radius: var(--borderRadius-sm, 0.25rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__brand-text {
+    font-size: var(--fontSize-base, 1rem);
+  }
+}
+.ivds-header {
+  /* Navigation area*/
+}
+.ivds-header__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-6, 1.5rem);
+  flex: 1;
+  justify-content: center;
+}
+@media (max-width: 768px) {
+  .ivds-header__nav {
+    display: none;
+  }
+  .ivds-header__nav--mobile-visible {
+    display: flex;
+    flex-basis: 100%;
+    order: 3;
+    justify-content: flex-start;
+    margin-top: var(--spacing-3, 0.75rem);
+    padding-top: var(--spacing-3, 0.75rem);
+    border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+    gap: var(--spacing-4, 1rem);
+  }
+}
+.ivds-header__nav a {
+  color: var(--color-semantic-neutral-700, #374151);
+  text-decoration: none;
+  font-weight: var(--fontWeight-medium, 500);
+  font-size: var(--fontSize-sm, 0.875rem);
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-header__nav a:hover {
+  color: var(--color-brand-primary-600, #ea580c);
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-header__nav a:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+.ivds-header__nav a[aria-current=page] {
+  color: var(--color-brand-primary-600, #ea580c);
+  background-color: var(--color-brand-primary-100, #fed7aa);
+  font-weight: var(--fontWeight-semibold, 600);
+}
+.ivds-header {
+  /* Actions area*/
+}
+.ivds-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .ivds-header__actions {
+    gap: var(--spacing-2, 0.5rem);
+  }
+}
+.ivds-header {
+  /* Mobile menu toggle button*/
+}
+.ivds-header__mobile-toggle {
+  display: none;
+  background: none;
+  border: none;
+  padding: var(--spacing-2, 0.5rem);
+  cursor: pointer;
+  color: var(--color-semantic-neutral-700, #374151);
+  border-radius: var(--borderRadius-md, 0.375rem);
+}
+.ivds-header__mobile-toggle:hover {
+  background-color: var(--color-semantic-neutral-100, #f3f4f6);
+}
+.ivds-header__mobile-toggle:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+@media (max-width: 768px) {
+  .ivds-header__mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.ivds-header__mobile-toggle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.ivds-header {
+  /* Search area*/
+}
+.ivds-header__search {
+  flex: 1;
+  max-width: 400px;
+  margin: 0 var(--spacing-4, 1rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__search {
+    display: none;
+  }
+  .ivds-header__search--mobile-visible {
+    display: block;
+    flex-basis: 100%;
+    order: 2;
+    margin: var(--spacing-3, 0.75rem) 0 0 0;
+    max-width: none;
+  }
+}
+.ivds-header {
+  /* Container wrapper*/
+}
+.ivds-header__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--spacing-6, 1.5rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__container {
+    flex-wrap: wrap;
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    min-height: 56px;
+  }
+}
+.ivds-header {
+  /* Variants*/
+}
+.ivds-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  backdrop-filter: blur(8px);
+  background-color: rgba(252, 252, 253, 0.95);
+}
+@supports not (backdrop-filter: blur(8px)) {
+  .ivds-header--sticky {
+    background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  }
+}
+.ivds-header--dark {
+  background-color: var(--color-semantic-neutral-900, #0f172a);
+  border-bottom-color: var(--color-semantic-neutral-700, #374151);
+}
+.ivds-header--dark .ivds-header__brand-text {
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-header--dark .ivds-header__nav a {
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-header--dark .ivds-header__nav a:hover {
+  background-color: rgba(var(--color-semantic-neutral-50, #f8fafc), 0.1);
+}
+.ivds-header--transparent {
+  background-color: transparent;
+  border-bottom: none;
+  backdrop-filter: none;
+}
+.ivds-header--transparent.ivds-header--sticky {
+  background-color: rgba(252, 252, 253, 0.95);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  backdrop-filter: blur(8px);
+}
+.ivds-header--compact {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
+  min-height: 48px;
+}
+.ivds-header--compact .ivds-header__brand-logo {
+  height: 1.5rem;
+  margin-right: var(--spacing-2, 0.5rem);
+}
+.ivds-header--compact .ivds-header__brand-text {
+  font-size: var(--fontSize-base, 1rem);
+}
+.ivds-header--compact .ivds-header__nav {
+  gap: var(--spacing-4, 1rem);
+}
+.ivds-header--compact .ivds-header__nav a {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-xs, 0.75rem);
+}
+.ivds-header--compact .ivds-header__actions {
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-header {
+  /* Responsive navigation visibility*/
+}
+@media (max-width: 768px) {
+  .ivds-header--mobile-nav-open .ivds-header__nav {
+    display: flex;
+    flex-basis: 100%;
+    order: 3;
+    justify-content: flex-start;
+    margin-top: var(--spacing-3, 0.75rem);
+    padding-top: var(--spacing-3, 0.75rem);
+    border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+    gap: var(--spacing-4, 1rem);
+    flex-wrap: wrap;
+  }
+}
+@media (max-width: 768px) {
+  .ivds-header--mobile-nav-open .ivds-header__search--mobile-visible {
+    display: block;
+    flex-basis: 100%;
+    order: 2;
+    margin: var(--spacing-3, 0.75rem) 0 0 0;
+    max-width: none;
+  }
+}

package/lib/components/header/header.min.css

@@ -0,0 +1 @@
+.ivds-header{align-items:center;background-color:var(--color-semantic-neutral-25,#fcfcfd);border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);display:flex;gap:var(--spacing-6,1.5rem);justify-content:space-between;min-height:64px;padding:var(--spacing-4,1rem) var(--spacing-6,1.5rem);position:relative;z-index:10}@media (max-width:768px){.ivds-header{flex-wrap:wrap;min-height:56px;padding:var(--spacing-3,.75rem) var(--spacing-4,1rem)}}.ivds-header__brand{align-items:center;display:flex;flex-shrink:0}.ivds-header__brand-logo{height:2rem;margin-right:var(--spacing-3,.75rem);width:auto}@media (max-width:768px){.ivds-header__brand-logo{height:1.75rem;margin-right:var(--spacing-2,.5rem)}}.ivds-header__brand-text{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-bold,700);line-height:var(--lineHeight-tight,1.25);text-decoration:none}.ivds-header__brand-text:hover{color:var(--color-brand-primary-600,#ea580c)}.ivds-header__brand-text:focus{border-radius:var(--borderRadius-sm,.25rem);outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}@media (max-width:768px){.ivds-header__brand-text{font-size:var(--fontSize-base,1rem)}}.ivds-header__nav{align-items:center;display:flex;flex:1;gap:var(--spacing-6,1.5rem);justify-content:center}@media (max-width:768px){.ivds-header__nav{display:none}.ivds-header__nav--mobile-visible{border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);display:flex;flex-basis:100%;gap:var(--spacing-4,1rem);justify-content:flex-start;margin-top:var(--spacing-3,.75rem);order:3;padding-top:var(--spacing-3,.75rem)}}.ivds-header__nav a{border-radius:var(--borderRadius-md,.375rem);color:var(--color-semantic-neutral-700,#374151);font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);padding:var(--spacing-2,.5rem) var(--spacing-3,.75rem);text-decoration:none;transition:all .15s ease-in-out}.ivds-header__nav a:hover{background-color:var(--color-brand-primary-50,#fff7ed);color:var(--color-brand-primary-600,#ea580c)}.ivds-header__nav a:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-header__nav a[aria-current=page]{background-color:var(--color-brand-primary-100,#fed7aa);color:var(--color-brand-primary-600,#ea580c);font-weight:var(--fontWeight-semibold,600)}.ivds-header__actions{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing-3,.75rem)}@media (max-width:768px){.ivds-header__actions{gap:var(--spacing-2,.5rem)}}.ivds-header__mobile-toggle{background:none;border:none;border-radius:var(--borderRadius-md,.375rem);color:var(--color-semantic-neutral-700,#374151);cursor:pointer;display:none;padding:var(--spacing-2,.5rem)}.ivds-header__mobile-toggle:hover{background-color:var(--color-semantic-neutral-100,#f3f4f6)}.ivds-header__mobile-toggle:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}@media (max-width:768px){.ivds-header__mobile-toggle{align-items:center;display:flex;justify-content:center}}.ivds-header__mobile-toggle svg{height:1.25rem;width:1.25rem}.ivds-header__search{flex:1;margin:0 var(--spacing-4,1rem);max-width:400px}@media (max-width:768px){.ivds-header__search{display:none}.ivds-header__search--mobile-visible{display:block;flex-basis:100%;margin:var(--spacing-3,.75rem) 0 0 0;max-width:none;order:2}}.ivds-header__container{gap:var(--spacing-6,1.5rem);justify-content:space-between;margin:0 auto;max-width:1200px;width:100%}@media (max-width:768px){.ivds-header__container{flex-wrap:wrap;min-height:56px;padding:var(--spacing-3,.75rem) var(--spacing-4,1rem)}}.ivds-header--sticky{backdrop-filter:blur(8px);background-color:rgba(252,252,253,.95);box-shadow:var(--shadow-sm,0 1px 2px 0 rgba(0,0,0,.05));position:sticky;top:0;z-index:50}@supports not (backdrop-filter:blur(8px)){.ivds-header--sticky{background-color:var(--color-semantic-neutral-25,#fcfcfd)}}.ivds-header--dark{background-color:var(--color-semantic-neutral-900,#0f172a);border-bottom-color:var(--color-semantic-neutral-700,#374151)}.ivds-header--dark .ivds-header__brand-text,.ivds-header--dark .ivds-header__nav a{color:var(--color-semantic-neutral-50,#f8fafc)}.ivds-header--dark .ivds-header__nav a:hover{background-color:rgba(var(--color-semantic-neutral-50,#f8fafc),.1)}.ivds-header--transparent{backdrop-filter:none;background-color:transparent;border-bottom:none}.ivds-header--transparent.ivds-header--sticky{backdrop-filter:blur(8px);background-color:rgba(252,252,253,.95);border-bottom:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0)}.ivds-header--compact{min-height:48px;padding:var(--spacing-2,.5rem) var(--spacing-4,1rem)}.ivds-header--compact .ivds-header__brand-logo{height:1.5rem;margin-right:var(--spacing-2,.5rem)}.ivds-header--compact .ivds-header__brand-text{font-size:var(--fontSize-base,1rem)}.ivds-header--compact .ivds-header__nav{gap:var(--spacing-4,1rem)}.ivds-header--compact .ivds-header__nav a{font-size:var(--fontSize-xs,.75rem);padding:var(--spacing-1,.25rem) var(--spacing-2,.5rem)}.ivds-header--compact .ivds-header__actions{gap:var(--spacing-2,.5rem)}@media (max-width:768px){.ivds-header--mobile-nav-open .ivds-header__nav{border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);display:flex;flex-basis:100%;flex-wrap:wrap;gap:var(--spacing-4,1rem);justify-content:flex-start;margin-top:var(--spacing-3,.75rem);order:3;padding-top:var(--spacing-3,.75rem)}.ivds-header--mobile-nav-open .ivds-header__search--mobile-visible{display:block;flex-basis:100%;margin:var(--spacing-3,.75rem) 0 0 0;max-width:none;order:2}}

package/lib/components/navigation/navigation.css

@@ -0,0 +1,214 @@
+/* Navigation component styles*/
+/* Provides styling for the IVDS navigation component following Helsinki Design System patterns*/
+.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;
+}
+.ivds-navigation__list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: 0;
+}
+.ivds-navigation__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.ivds-navigation__link {
+  display: 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);
+  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;
+}
+.ivds-navigation__link:hover {
+  color: var(--nav-link-color-hover);
+  background-color: var(--nav-link-bg-hover);
+}
+.ivds-navigation__link:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  text-decoration: none;
+}
+.ivds-navigation__link:active {
+  background-color: var(--nav-link-bg-active);
+}
+.ivds-navigation__link--active {
+  color: var(--nav-link-color-active);
+  background-color: var(--nav-link-bg-active);
+  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 {
+  flex-direction: column;
+  align-items: stretch;
+}
+.ivds-navigation--vertical .ivds-navigation__item {
+  width: 100%;
+}
+.ivds-navigation--vertical .ivds-navigation__link {
+  width: 100%;
+  justify-content: flex-start;
+}
+.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-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 {
+  /* Feature variants*/
+}
+.ivds-navigation--with-icons .ivds-navigation__link {
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-navigation--with-icons .ivds-navigation__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.ivds-navigation--with-icons .ivds-navigation__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+.ivds-navigation--with-dropdown .ivds-navigation__dropdown {
+  position: absolute;
+  top: 100%;
+  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));
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.15s ease-in-out;
+  z-index: 50;
+}
+.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-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;
+  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.min.css

@@ -0,0 +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}