@ivds/core 0.1.1 → 1.0.0

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

@@ -1 +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}}
+.ivds-header{--background-color:var(--ivds-surface-base,#fff);--color:var(--ivds-text-primary,#121a24);--border-color:var(--ivds-border-subtle,#e2e7ec);--height:74px;--height-mobile:66px;--logo-max-height:34px;--padding-block:var(--spacing-4,1rem);--padding-inline:var(--spacing-8,2rem);align-items:center;background-color:var(--background-color);border-bottom:2px solid var(--border-color);display:flex;justify-content:space-between;min-height:var(--height);padding:var(--padding-block) var(--padding-inline);position:relative;transition:background-color var(--ivds-motion-normal,.25s) var(--ivds-motion-ease,ease),box-shadow var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);z-index:100}@media (max-width:var(--breakpoint-lg,1024px)){.ivds-header{min-height:var(--height-mobile);padding:var(--spacing-3,.75rem) var(--spacing-4,1rem)}}.ivds-header__brand{align-items:center;color:var(--ivds-text-primary);display:inline-flex;flex-shrink:0;gap:var(--spacing-3,.75rem);text-decoration:none}.ivds-header__brand-logo{height:var(--logo-max-height,34px);-o-object-fit:contain;object-fit:contain;width:auto}.ivds-header__brand-text{color:inherit;font-size:var(--fontSize-xl,1.25rem);font-weight:var(--fontWeight-semibold,600);letter-spacing:-.01em;line-height:1.15}.ivds-header__nav{align-items:center;display:flex;gap:var(--spacing-2,.5rem)}@media (max-width:var(--breakpoint-lg,1024px)){.ivds-header__nav{display:none}}.ivds-header__nav a{align-items:center;border-bottom:3px solid transparent;border-radius:0;color:var(--ivds-text-secondary);display:inline-flex;font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);min-height:48px;padding:var(--spacing-2,.5rem) var(--spacing-2,.5rem);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-header__nav a:hover{border-color:var(--ivds-border-strong,#a1adba);color:var(--ivds-text-primary)}.ivds-header__nav a: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-header__nav a:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-header__nav a.ivds-header__nav-item--active{border-color:var(--color-brand-accent-600,#1058b8);color:var(--color-brand-accent-700,#0b4593);font-weight:var(--fontWeight-semibold,600)}.ivds-header__actions{align-items:center;display:flex;gap:var(--spacing-3,.75rem)}.ivds-header__mobile-toggle{display:none}@media (max-width:var(--breakpoint-lg,1024px)){.ivds-header__mobile-toggle{align-items:center;background:var(--ivds-surface-base,#fff);border:2px solid var(--ivds-border-strong,#a1adba);border-radius:var(--ivds-radius-s,.125rem);color:var(--ivds-text-primary);cursor:pointer;display:inline-flex;height:48px;justify-content:center;width:48px}.ivds-header__mobile-toggle:hover{border-color:var(--color-brand-accent-600,#1058b8);color:var(--color-brand-accent-700,#0b4593)}.ivds-header__mobile-toggle: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-header__mobile-toggle:focus:not(:focus-visible){box-shadow:none;outline:none}}.ivds-header__universal-bar{background-color:var(--ivds-surface-muted);border-bottom:1px solid var(--ivds-border-subtle);color:var(--ivds-text-secondary);font-size:var(--fontSize-xs,.75rem);padding:var(--spacing-2,.5rem) var(--spacing-8,2rem)}.ivds-header__universal-bar .ivds-header__container{align-items:center;display:flex;gap:var(--spacing-5,1.25rem);justify-content:flex-end}.ivds-header__universal-bar a{color:inherit;font-weight:var(--fontWeight-medium,500);text-decoration:none}.ivds-header__universal-bar a:hover{color:var(--color-brand-accent-700,#0b4593)}.ivds-header__action-bar{background-color:var(--ivds-surface-base);border-bottom:1px solid var(--ivds-border-subtle);padding:var(--spacing-3,.75rem) var(--spacing-8,2rem)}.ivds-header__action-bar .ivds-header__container{align-items:center;display:flex;gap:var(--spacing-3,.75rem);justify-content:flex-end}.ivds-header--sticky{box-shadow:var(--ivds-shadow-md);position:sticky;top:0}.ivds-header--glass{background-color:var(--ivds-surface-base,#fff)}.ivds-header--dark{--background-color:var(--ivds-surface-strong,#121a24);--border-color:var(--ivds-border-subtle,#283443)}.ivds-header--dark .ivds-header__brand-text{color:var(--ivds-text-on-strong,#fff)}.ivds-header--dark .ivds-header__nav a{color:var(--ivds-text-muted,hsla(0,0%,100%,.82))}.ivds-header--dark .ivds-header__nav a:hover{border-color:var(--ivds-border-strong,hsla(0,0%,100%,.35));color:var(--ivds-text-on-strong,#fff)}.ivds-header--dark .ivds-header__nav a.ivds-header__nav-item--active{border-color:var(--color-brand-accent-400,#5a93f5);color:var(--ivds-text-on-strong,#fff)}.ivds-header--dark .ivds-header__mobile-toggle{background:transparent;border-color:var(--ivds-border-strong,hsla(0,0%,100%,.35));color:var(--ivds-text-on-strong,#fff)}.ivds-header--scrolled{box-shadow:var(--ivds-shadow-md)}.ivds-header__container{align-items:center;display:flex;gap:var(--spacing-6,1.5rem);justify-content:space-between;margin:0 auto;max-width:var(--container-max-width,1440px);width:100%}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/header/header.scss%23sass","../../../src/components/header/_header-mixin.scss","../../../src/components/header/header.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAMA,aCCE,gDAAA,CCHF,wCDIE,CACA,gDAAA,CCHF,aAAA,CDKE,oBAAA,CACA,sBAAA,CACA,qCAAA,CACA,sCAAA,CAGA,kBAAA,CAIA,wCAAA,CACA,2CAAA,CANA,YAAA,CAEA,6BAAA,CACA,wBAAA,CACA,kDAAA,CAGA,iBAAA,CAEA,4JAAA,CADA,WCHF,CDQE,+CDvBF,aEkBE,+BAAA,CDOE,qDCLF,CACF,CFjBE,oBCyCA,kBAAA,CAGA,8BAAA,CAJA,mBAAA,CAKA,aAAA,CAHA,2BAAA,CACA,oBClBF,CDsBE,yBACE,kCAAA,CAEA,qBAAA,CAAA,kBAAA,CADA,UCnBJ,CDuBE,yBACE,aAAA,CACA,oCAAA,CACA,0CAAA,CACA,qBAAA,CACA,gBCrBJ,CFjCE,kBC4DA,kBAAA,CADA,YAAA,CAEA,0BCvBF,CDyBE,+CD/DA,kBCgEE,YCtBF,CACF,CDwBE,oBCpBF,kBAAA,CD2BI,mCAAA,CADA,eAAA,CAEA,gCAAA,CANA,mBAAA,CAOA,mCAAA,CACA,wCAAA,CANA,eAAA,CACA,qDAAA,CAJA,iBAAA,CAUA,oBAAA,CACA,iJCtBJ,CD0BI,0BAEE,8CAAA,CADA,8BCvBN,CCtEE,kCAGE,eAAA,CAFA,iHAAA,CACA,gDDyEJ,CCrEE,8CAEE,eAAA,CADA,YDwEJ,CDoBI,kDAEE,kDAAA,CADA,2CAAA,CAEA,0CClBN,CFvEE,sBCgGA,kBAAA,CADA,YAAA,CAEA,2BCrBF,CFxEE,4BCiGA,YCtBF,CDwBE,+CDnGA,4BCqGE,kBAAA,CAMA,wCAAA,CAFA,kDAAA,CACA,0CAAA,CAEA,8BAAA,CACA,cAAA,CATA,mBAAA,CAIA,WAAA,CAFA,sBAAA,CACA,UCfF,CDuBE,kCACE,kDAAA,CACA,2CCrBJ,CC7GA,0CAGE,eAAA,CAFA,iHAAA,CACA,gDDgHF,CC5GA,sDAEE,eAAA,CADA,YD+GF,CACF,CFlGE,4BCmJA,0CAAA,CACA,iDAAA,CACA,gCAAA,CACA,mCAAA,CAJA,oDCzCF,CD+CE,oDAGE,kBAAA,CAFA,YAAA,CAGA,4BAAA,CAFA,wBC3CJ,CDgDE,8BACE,aAAA,CACA,wCAAA,CACA,oBC9CJ,CDgDI,oCACE,2CC9CN,CFnHE,yBCwKA,yCAAA,CACA,iDAAA,CAFA,qDC/CF,CDmDE,iDAEE,kBAAA,CADA,YAAA,CAGA,2BAAA,CADA,wBChDJ,CFzHE,qBCGA,gCAAA,CAFA,eAAA,CACA,KC4HF,CF1HE,oBCGA,8CC0HF,CFzHE,mBCoGA,qDAAA,CACA,gDCwBF,CDtBE,4CACE,qCCwBJ,CDrBE,uCACE,gDCuBJ,CDrBI,6CAEE,0DAAA,CADA,qCCwBN,CDpBI,qEAEE,kDAAA,CADA,qCCuBN,CDlBE,+CACE,sBAAA,CACA,0DAAA,CACA,qCCoBJ,CF5IE,uBCDA,gCCgJF,CF1IE,wBAKE,kBAAA,CADA,YAAA,CAGA,2BAAA,CADA,6BAAA,CAHA,aAAA,CADA,2CAAA,CADA,UEkJJ","file":"header.min.css","sourcesContent":["// Header component styles\r\n// Core styling for the IVDS header including layout, branding, and navigation\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_header-mixin' as header;\r\n\r\n.ivds-header {\r\n  @include header.header-base;\r\n  \r\n  // Elements\r\n  &__brand {\r\n    @include header.header-brand;\r\n  }\r\n  \r\n  &__nav {\r\n    @include header.header-nav;\r\n  }\r\n  \r\n  &__actions {\r\n    @include header.header-actions;\r\n  }\r\n  \r\n  &__mobile-toggle {\r\n    @include header.header-mobile-toggle;\r\n  }\r\n  \r\n  &__universal-bar {\r\n    @include header.header-universal-bar;\r\n  }\r\n  \r\n  &__action-bar {\r\n    @include header.header-action-bar;\r\n  }\r\n  \r\n  // Variants\r\n  &--sticky {\r\n    @include header.header-sticky;\r\n  }\r\n  \r\n  &--glass {\r\n    @include header.header-glass;\r\n  }\r\n  \r\n  &--dark {\r\n    @include header.header-dark;\r\n  }\r\n  \r\n  &--scrolled {\r\n    @include header.header-scrolled;\r\n  }\r\n\r\n  // Nested container support (HDS style)\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}","// Header component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin header-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --color: var(--ivds-text-primary, #121a24);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --height: 74px;\n  --height-mobile: 66px;\n  --logo-max-height: 34px;\n  --padding-block: var(--spacing-4, 1rem);\n  --padding-inline: var(--spacing-8, 2rem);\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--height);\n  padding: var(--padding-block) var(--padding-inline);\n  background-color: var(--background-color);\n  border-bottom: 2px solid var(--border-color);\n  position: relative;\n  z-index: 100;\n  transition:\n    background-color var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease),\n    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    min-height: var(--height-mobile);\n    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);\n  }\n}\n\n@mixin header-sticky {\n  position: sticky;\n  top: 0;\n  box-shadow: var(--ivds-shadow-md);\n}\n\n@mixin header-glass {\n  background-color: var(--ivds-surface-base, #fff);\n}\n\n@mixin header-scrolled {\n  box-shadow: var(--ivds-shadow-md);\n}\n\n@mixin header-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  text-decoration: none;\n  color: var(--ivds-text-primary);\n  flex-shrink: 0;\n\n  &-logo {\n    height: var(--logo-max-height, 34px);\n    width: auto;\n    object-fit: contain;\n  }\n\n  &-text {\n    color: inherit;\n    font-size: var(--fontSize-xl, 1.25rem);\n    font-weight: var(--fontWeight-semibold, 600);\n    letter-spacing: -0.01em;\n    line-height: 1.15;\n  }\n}\n\n@mixin header-nav {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    display: none;\n  }\n\n  a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    min-height: 48px;\n    padding: var(--spacing-2, 0.5rem) var(--spacing-2, 0.5rem);\n    border-radius: 0;\n    border-bottom: 3px solid transparent;\n    color: var(--ivds-text-secondary);\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);\n      border-color: var(--ivds-border-strong, #a1adba);\n    }\n\n    @include focus-ring;\n\n    &.ivds-header__nav-item--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\n@mixin header-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n}\n\n@mixin header-mobile-toggle {\n  display: none;\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    border: 2px solid var(--ivds-border-strong, #a1adba);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    background: var(--ivds-surface-base, #fff);\n    color: var(--ivds-text-primary);\n    cursor: pointer;\n\n    &:hover {\n      border-color: var(--color-brand-accent-600, #1058b8);\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n\n    @include focus-ring;\n  }\n}\n\n@mixin header-dark {\n  --background-color: var(--ivds-surface-strong, #121a24);\n  --border-color: var(--ivds-border-subtle, #283443);\n\n  .ivds-header__brand-text {\n    color: var(--ivds-text-on-strong, #fff);\n  }\n\n  .ivds-header__nav a {\n    color: var(--ivds-text-muted, rgba(255, 255, 255, 0.82));\n\n    &:hover {\n      color: var(--ivds-text-on-strong, #fff);\n      border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));\n    }\n\n    &.ivds-header__nav-item--active {\n      color: var(--ivds-text-on-strong, #fff);\n      border-color: var(--color-brand-accent-400, #5a93f5);\n    }\n  }\n\n  .ivds-header__mobile-toggle {\n    background: transparent;\n    border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));\n    color: var(--ivds-text-on-strong, #fff);\n  }\n}\n\n@mixin header-universal-bar {\n  padding: var(--spacing-2, 0.5rem) var(--spacing-8, 2rem);\n  background-color: var(--ivds-surface-muted);\n  border-bottom: 1px solid var(--ivds-border-subtle);\n  color: var(--ivds-text-secondary);\n  font-size: var(--fontSize-xs, 0.75rem);\n\n  .ivds-header__container {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    gap: var(--spacing-5, 1.25rem);\n  }\n\n  a {\n    color: inherit;\n    font-weight: var(--fontWeight-medium, 500);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n  }\n}\n\n@mixin header-action-bar {\n  padding: var(--spacing-3, 0.75rem) var(--spacing-8, 2rem);\n  background-color: var(--ivds-surface-base);\n  border-bottom: 1px solid var(--ivds-border-subtle);\n\n  .ivds-header__container {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--spacing-3, 0.75rem);\n  }\n}\n","// Header component styles\r\n// Core styling for the IVDS header including layout, branding, and navigation\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_header-mixin' as header;\r\n\r\n.ivds-header {\r\n  @include header.header-base;\r\n  \r\n  // Elements\r\n  &__brand {\r\n    @include header.header-brand;\r\n  }\r\n  \r\n  &__nav {\r\n    @include header.header-nav;\r\n  }\r\n  \r\n  &__actions {\r\n    @include header.header-actions;\r\n  }\r\n  \r\n  &__mobile-toggle {\r\n    @include header.header-mobile-toggle;\r\n  }\r\n  \r\n  &__universal-bar {\r\n    @include header.header-universal-bar;\r\n  }\r\n  \r\n  &__action-bar {\r\n    @include header.header-action-bar;\r\n  }\r\n  \r\n  // Variants\r\n  &--sticky {\r\n    @include header.header-sticky;\r\n  }\r\n  \r\n  &--glass {\r\n    @include header.header-glass;\r\n  }\r\n  \r\n  &--dark {\r\n    @include header.header-dark;\r\n  }\r\n  \r\n  &--scrolled {\r\n    @include header.header-scrolled;\r\n  }\r\n\r\n  // Nested container support (HDS style)\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--spacing-6, 1.5rem);\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/modal/_modal-mixin.scss

@@ -0,0 +1,99 @@
+// Modal component mixins and private styles
+
+@use '../../base/focus' as *;
+
+@mixin modal-overlay {
+  // Per-component CSS variable API
+  --overlay-background: rgba(16, 24, 40, 0.48);
+  --overlay-blur: 3px;
+
+  position: fixed;
+  inset: 0;
+  z-index: var(--zIndex-modal, 1000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4, 1rem);
+  background-color: var(--overlay-background);
+  backdrop-filter: blur(var(--overlay-blur));
+}
+
+@mixin modal-backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+@mixin modal-container {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --border-radius: var(--ivds-radius-m, 0.25rem);
+  --max-width: 640px;
+
+  width: 100%;
+  max-width: var(--max-width);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--ivds-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.10));
+  max-height: min(90vh, 920px);
+}
+
+@mixin modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4, 1rem);
+  padding: var(--spacing-5, 1.25rem) var(--spacing-6, 1.5rem);
+  border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);
+}
+
+@mixin modal-body {
+  padding: var(--spacing-6, 1.5rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--ivds-text-secondary, #36414f);
+}
+
+@mixin modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-3, 0.75rem);
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+}
+
+@mixin modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  background: transparent;
+  color: var(--ivds-text-muted, #4d5968);
+  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),
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &:hover {
+    color: var(--ivds-text-primary, #121a24);
+    background-color: var(--ivds-surface-muted, #f1f3f5);
+    border-color: var(--ivds-border-subtle, #e2e7ec);
+  }
+
+  @include focus-ring;
+}

package/lib/components/modal/modal.css

@@ -0,0 +1,115 @@
+.ivds-modal__overlay {
+  --overlay-background: rgba(16, 24, 40, 0.48);
+  --overlay-blur: 3px;
+  position: fixed;
+  inset: 0;
+  z-index: var(--zIndex-modal, 1000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4, 1rem);
+  background-color: var(--overlay-background);
+  backdrop-filter: blur(var(--overlay-blur));
+}
+.ivds-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.ivds-modal__container {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --border-radius: var(--ivds-radius-m, 0.25rem);
+  --max-width: 640px;
+  width: 100%;
+  max-width: var(--max-width);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--ivds-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.1));
+  max-height: min(90vh, 920px);
+}
+.ivds-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4, 1rem);
+  padding: var(--spacing-5, 1.25rem) var(--spacing-6, 1.5rem);
+  border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);
+}
+.ivds-modal__title {
+  margin: 0;
+  font-size: var(--fontSize-xl, 1.25rem);
+  font-weight: var(--fontWeight-bold, 700);
+  color: var(--ivds-text-primary, #121a24);
+}
+.ivds-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  background: transparent;
+  color: var(--ivds-text-muted, #4d5968);
+  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), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-modal__close:hover {
+  color: var(--ivds-text-primary, #121a24);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  border-color: var(--ivds-border-subtle, #e2e7ec);
+}
+.ivds-modal__close: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-modal__close:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.ivds-modal__close svg {
+  width: 20px;
+  height: 20px;
+}
+.ivds-modal__body {
+  padding: var(--spacing-6, 1.5rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--ivds-text-secondary, #36414f);
+}
+.ivds-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-3, 0.75rem);
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+}
+.ivds-modal--sm .ivds-modal__container {
+  max-width: 400px;
+}
+.ivds-modal--lg .ivds-modal__container {
+  max-width: 800px;
+}
+.ivds-modal--xl .ivds-modal__container {
+  max-width: 1000px;
+}
+.ivds-modal--full .ivds-modal__container {
+  max-width: none;
+  height: 100%;
+  margin: 0;
+  border: none;
+  box-shadow: none;
+}

package/lib/components/modal/modal.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/modal/modal.scss%23sass","../../../src/components/modal/_modal-mixin.scss","../../../src/components/modal/modal.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAGE;ECGA,4CAAA;ECJF,mBAAA;EDOE,eAAA;EACA,QAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,+BAAA;EACA,2CAAA;EACA,0CAAA;ACLF;AFLE;ECcA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;EACA,SAAA;EACA,uBAAA;EACA,eAAA;ACNF;AFVE;ECoBA,kDAAA;EACA,kDAAA;EACA,8CAAA;EACA,kBAAA;EAEA,WAAA;EACA,2BAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,UAAA;EACA,yCAAA;EACA,qCAAA;EACA,mCAAA;EACA,mEAAA;EACA,4BAAA;ACRF;AFvBE;ECmCA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,2BAAA;EACA,2DAAA;EACA,2DAAA;ACTF;AF3BE;EACE,SAAA;EACA,sCAAA;EACA,wCAAA;EACA,wCAAA;AE6BJ;AF1BE;ECkDA,oBAAA;EACA,mBAAA;EACA,uBAAA;ECrBF,aAAA;EDuBE,cAAA;EACA,6BAAA;EACA,6CAAA;EACA,uBAAA;EACA,sCAAA;EACA,eAAA;EACA,wOACE;ACtBJ;AD0BE;EACE,wCAAA;EACA,oDAAA;EACA,gDAAA;ACxBJ;ACjEE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;ADmEJ;AChEE;EACE,aAAA;EACA,gBAAA;ADkEJ;AFlDI;EACE,WAAA;EACA,YAAA;AEoDN;AFhDE;ECwBA,iCAAA;EACA,gBAAA;EACA,4BAAA;EACA,0CAAA;AC2BF;AFlDE;EC2BA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,8BAAA;EACA,wDAAA;EACA,wDAAA;EACA,oDAAA;AC0BF;AFtDE;EAAqB,gBAAA;AEyDvB;AFvDE;EAAqB,gBAAA;AE0DvB;AFxDE;EAAqB,iBAAA;AE2DvB;AFzDE;EACE,eAAA;EACA,YAAA;EACA,SAAA;EACA,YAAA;EACA,gBAAA;AE2DJ","file":"modal.css","sourcesContent":["@use 'modal-mixin' as modal;\n\n.ivds-modal {\n  &__overlay {\n    @include modal.modal-overlay;\n  }\n\n  &__backdrop {\n    @include modal.modal-backdrop;\n  }\n  \n  &__container {\n    @include modal.modal-container;\n  }\n  \n  &__header {\n    @include modal.modal-header;\n  }\n  \n  &__title {\n    margin: 0;\n    font-size: var(--fontSize-xl, 1.25rem);\n    font-weight: var(--fontWeight-bold, 700);\n    color: var(--ivds-text-primary, #121a24);\n  }\n  \n  &__close {\n    @include modal.modal-close;\n    \n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n  \n  &__body {\n    @include modal.modal-body;\n  }\n  \n  &__footer {\n    @include modal.modal-footer;\n  }\n\n  // Sizes\n  &--sm &__container { max-width: 400px; }\n\n  &--lg &__container { max-width: 800px; }\n\n  &--xl &__container { max-width: 1000px; }\n\n  &--full &__container { \n    max-width: none; \n    height: 100%; \n    margin: 0;\n    border: none;\n    box-shadow: none;\n  }\n}\n","// Modal component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin modal-overlay {\n  // Per-component CSS variable API\n  --overlay-background: rgba(16, 24, 40, 0.48);\n  --overlay-blur: 3px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--zIndex-modal, 1000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-4, 1rem);\n  background-color: var(--overlay-background);\n  backdrop-filter: blur(var(--overlay-blur));\n}\n\n@mixin modal-backdrop {\n  position: absolute;\n  inset: 0;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n@mixin modal-container {\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --border-radius: var(--ivds-radius-m, 0.25rem);\n  --max-width: 640px;\n\n  width: 100%;\n  max-width: var(--max-width);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: 1;\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--ivds-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.10));\n  max-height: min(90vh, 920px);\n}\n\n@mixin modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-4, 1rem);\n  padding: var(--spacing-5, 1.25rem) var(--spacing-6, 1.5rem);\n  border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin modal-body {\n  padding: var(--spacing-6, 1.5rem);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  color: var(--ivds-text-secondary, #36414f);\n}\n\n@mixin modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--spacing-3, 0.75rem);\n  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);\n  border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  background-color: var(--ivds-surface-muted, #f1f3f5);\n}\n\n@mixin modal-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: 1px solid transparent;\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  background: transparent;\n  color: var(--ivds-text-muted, #4d5968);\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    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n  }\n\n  @include focus-ring;\n}\n","@use 'modal-mixin' as modal;\n\n.ivds-modal {\n  &__overlay {\n    @include modal.modal-overlay;\n  }\n\n  &__backdrop {\n    @include modal.modal-backdrop;\n  }\n  \n  &__container {\n    @include modal.modal-container;\n  }\n  \n  &__header {\n    @include modal.modal-header;\n  }\n  \n  &__title {\n    margin: 0;\n    font-size: var(--fontSize-xl, 1.25rem);\n    font-weight: var(--fontWeight-bold, 700);\n    color: var(--ivds-text-primary, #121a24);\n  }\n  \n  &__close {\n    @include modal.modal-close;\n    \n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n  \n  &__body {\n    @include modal.modal-body;\n  }\n  \n  &__footer {\n    @include modal.modal-footer;\n  }\n\n  // Sizes\n  &--sm &__container { max-width: 400px; }\n\n  &--lg &__container { max-width: 800px; }\n\n  &--xl &__container { max-width: 1000px; }\n\n  &--full &__container { \n    max-width: none; \n    height: 100%; \n    margin: 0;\n    border: none;\n    box-shadow: none;\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"]}

package/lib/components/modal/modal.min.css

@@ -0,0 +1 @@
+.ivds-modal__overlay{--overlay-background:rgba(16,24,40,.48);--overlay-blur:3px;align-items:center;backdrop-filter:blur(var(--overlay-blur));background-color:var(--overlay-background);display:flex;inset:0;justify-content:center;padding:var(--spacing-4,1rem);position:fixed;z-index:var(--zIndex-modal,1000)}.ivds-modal__backdrop{background:transparent;border:none;cursor:pointer;inset:0;margin:0;padding:0;position:absolute}.ivds-modal__container{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-subtle,#e2e7ec);--border-radius:var(--ivds-radius-m,0.25rem);--max-width:640px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--ivds-shadow-lg,0 8px 20px rgba(15,23,42,.1));display:flex;flex-direction:column;max-height:min(90vh,920px);max-width:var(--max-width);position:relative;width:100%;z-index:1}.ivds-modal__header{align-items:center;border-bottom:1px solid var(--ivds-border-subtle,#e2e7ec);display:flex;gap:var(--spacing-4,1rem);justify-content:space-between;padding:var(--spacing-5,1.25rem) var(--spacing-6,1.5rem)}.ivds-modal__title{color:var(--ivds-text-primary,#121a24);font-size:var(--fontSize-xl,1.25rem);font-weight:var(--fontWeight-bold,700);margin:0}.ivds-modal__close{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--ivds-radius-s,.125rem);color:var(--ivds-text-muted,#4d5968);cursor:pointer;display:inline-flex;height:2.5rem;justify-content:center;transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:2.5rem}.ivds-modal__close:hover{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:var(--ivds-border-subtle,#e2e7ec);color:var(--ivds-text-primary,#121a24)}.ivds-modal__close: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-modal__close:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-modal__close svg{height:20px;width:20px}.ivds-modal__body{color:var(--ivds-text-secondary,#36414f);overflow-y:auto;overscroll-behavior:contain;padding:var(--spacing-6,1.5rem)}.ivds-modal__footer{align-items:center;background-color:var(--ivds-surface-muted,#f1f3f5);border-top:1px solid var(--ivds-border-subtle,#e2e7ec);display:flex;gap:var(--spacing-3,.75rem);justify-content:flex-end;padding:var(--spacing-4,1rem) var(--spacing-6,1.5rem)}.ivds-modal--sm .ivds-modal__container{max-width:400px}.ivds-modal--lg .ivds-modal__container{max-width:800px}.ivds-modal--xl .ivds-modal__container{max-width:1000px}.ivds-modal--full .ivds-modal__container{border:none;box-shadow:none;height:100%;margin:0;max-width:none}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/modal/modal.scss%23sass","../../../src/components/modal/_modal-mixin.scss","../../../src/components/modal/modal.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAGE,qBCGA,uCAAA,CCJF,kBAAA,CDWE,kBAAA,CAIA,yCAAA,CADA,0CAAA,CAJA,YAAA,CAFA,OAAA,CAIA,sBAAA,CACA,6BAAA,CANA,cAAA,CAEA,gCCCF,CFLE,sBCmBA,sBAAA,CAHA,WAAA,CAIA,cAAA,CALA,OAAA,CAGA,QAAA,CADA,SAAA,CAHA,iBCAF,CFVE,uBCoBA,gDAAA,CACA,gDAAA,CACA,4CAAA,CACA,iBAAA,CAQA,wCAAA,CACA,oCAAA,CACA,kCAAA,CACA,6DAAA,CAPA,YAAA,CACA,qBAAA,CAOA,0BAAA,CATA,0BAAA,CAGA,iBAAA,CAJA,UAAA,CAKA,SCHF,CFvBE,oBCoCA,kBAAA,CAIA,yDAAA,CALA,YAAA,CAGA,yBAAA,CADA,6BAAA,CAEA,wDCRF,CF3BE,mBAIE,sCAAA,CAFA,oCAAA,CACA,sCAAA,CAFA,QEgCJ,CF1BE,mBCmDA,kBAAA,CAMA,sBAAA,CAFA,4BAAA,CACA,0CAAA,CAEA,oCAAA,CACA,cAAA,CATA,mBAAA,CAIA,aAAA,CAFA,sBAAA,CAQA,4NACE,CC9BJ,YAQA,CD0BE,yBAEE,kDAAA,CACA,8CAAA,CAFA,sCCtBJ,CCjEE,iCAGE,eAAA,CAFA,iHAAA,CACA,gDDoEJ,CChEE,6CAEE,eAAA,CADA,YDmEJ,CFlDI,uBAEE,WAAA,CADA,UEqDN,CFhDE,kBC2BA,wCAAA,CAFA,eAAA,CACA,2BAAA,CAFA,+BC8BF,CFlDE,oBC4BA,kBAAA,CAKA,kDAAA,CADA,sDAAA,CALA,YAAA,CAGA,2BAAA,CADA,wBAAA,CAEA,qDC4BF,CFtDE,uCAAqB,eEyDvB,CFvDE,uCAAqB,eE0DvB,CFxDE,uCAAqB,gBE2DvB,CFzDE,yCAIE,WAAA,CACA,eAAA,CAHA,WAAA,CACA,QAAA,CAFA,cE+DJ","file":"modal.min.css","sourcesContent":["@use 'modal-mixin' as modal;\n\n.ivds-modal {\n  &__overlay {\n    @include modal.modal-overlay;\n  }\n\n  &__backdrop {\n    @include modal.modal-backdrop;\n  }\n  \n  &__container {\n    @include modal.modal-container;\n  }\n  \n  &__header {\n    @include modal.modal-header;\n  }\n  \n  &__title {\n    margin: 0;\n    font-size: var(--fontSize-xl, 1.25rem);\n    font-weight: var(--fontWeight-bold, 700);\n    color: var(--ivds-text-primary, #121a24);\n  }\n  \n  &__close {\n    @include modal.modal-close;\n    \n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n  \n  &__body {\n    @include modal.modal-body;\n  }\n  \n  &__footer {\n    @include modal.modal-footer;\n  }\n\n  // Sizes\n  &--sm &__container { max-width: 400px; }\n\n  &--lg &__container { max-width: 800px; }\n\n  &--xl &__container { max-width: 1000px; }\n\n  &--full &__container { \n    max-width: none; \n    height: 100%; \n    margin: 0;\n    border: none;\n    box-shadow: none;\n  }\n}\n","// Modal component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin modal-overlay {\n  // Per-component CSS variable API\n  --overlay-background: rgba(16, 24, 40, 0.48);\n  --overlay-blur: 3px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--zIndex-modal, 1000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-4, 1rem);\n  background-color: var(--overlay-background);\n  backdrop-filter: blur(var(--overlay-blur));\n}\n\n@mixin modal-backdrop {\n  position: absolute;\n  inset: 0;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n@mixin modal-container {\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --border-radius: var(--ivds-radius-m, 0.25rem);\n  --max-width: 640px;\n\n  width: 100%;\n  max-width: var(--max-width);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: 1;\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--ivds-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.10));\n  max-height: min(90vh, 920px);\n}\n\n@mixin modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-4, 1rem);\n  padding: var(--spacing-5, 1.25rem) var(--spacing-6, 1.5rem);\n  border-bottom: 1px solid var(--ivds-border-subtle, #e2e7ec);\n}\n\n@mixin modal-body {\n  padding: var(--spacing-6, 1.5rem);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  color: var(--ivds-text-secondary, #36414f);\n}\n\n@mixin modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--spacing-3, 0.75rem);\n  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);\n  border-top: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  background-color: var(--ivds-surface-muted, #f1f3f5);\n}\n\n@mixin modal-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: 1px solid transparent;\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  background: transparent;\n  color: var(--ivds-text-muted, #4d5968);\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    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &:hover {\n    color: var(--ivds-text-primary, #121a24);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n  }\n\n  @include focus-ring;\n}\n","@use 'modal-mixin' as modal;\n\n.ivds-modal {\n  &__overlay {\n    @include modal.modal-overlay;\n  }\n\n  &__backdrop {\n    @include modal.modal-backdrop;\n  }\n  \n  &__container {\n    @include modal.modal-container;\n  }\n  \n  &__header {\n    @include modal.modal-header;\n  }\n  \n  &__title {\n    margin: 0;\n    font-size: var(--fontSize-xl, 1.25rem);\n    font-weight: var(--fontWeight-bold, 700);\n    color: var(--ivds-text-primary, #121a24);\n  }\n  \n  &__close {\n    @include modal.modal-close;\n    \n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n  \n  &__body {\n    @include modal.modal-body;\n  }\n  \n  &__footer {\n    @include modal.modal-footer;\n  }\n\n  // Sizes\n  &--sm &__container { max-width: 400px; }\n\n  &--lg &__container { max-width: 800px; }\n\n  &--xl &__container { max-width: 1000px; }\n\n  &--full &__container { \n    max-width: none; \n    height: 100%; \n    margin: 0;\n    border: none;\n    box-shadow: none;\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"]}

package/lib/components/modal/modal.min.css.ts

@@ -0,0 +1,5 @@
+/**
+ * Auto-generated CSS string for modal.min.css
+ * Do not edit manually
+ */
+export const modal_minCss = `.ivds-modal__overlay{--overlay-background:rgba(16,24,40,.48);--overlay-blur:3px;align-items:center;backdrop-filter:blur(var(--overlay-blur));background-color:var(--overlay-background);display:flex;inset:0;justify-content:center;padding:var(--spacing-4,1rem);position:fixed;z-index:var(--zIndex-modal,1000)}.ivds-modal__backdrop{background:transparent;border:none;cursor:pointer;inset:0;margin:0;padding:0;position:absolute}.ivds-modal__container{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-subtle,#e2e7ec);--border-radius:var(--ivds-radius-m,0.25rem);--max-width:640px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--ivds-shadow-lg,0 8px 20px rgba(15,23,42,.1));display:flex;flex-direction:column;max-height:min(90vh,920px);max-width:var(--max-width);position:relative;width:100%;z-index:1}.ivds-modal__header{align-items:center;border-bottom:1px solid var(--ivds-border-subtle,#e2e7ec);display:flex;gap:var(--spacing-4,1rem);justify-content:space-between;padding:var(--spacing-5,1.25rem) var(--spacing-6,1.5rem)}.ivds-modal__title{color:var(--ivds-text-primary,#121a24);font-size:var(--fontSize-xl,1.25rem);font-weight:var(--fontWeight-bold,700);margin:0}.ivds-modal__close{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--ivds-radius-s,.125rem);color:var(--ivds-text-muted,#4d5968);cursor:pointer;display:inline-flex;height:2.5rem;justify-content:center;transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:2.5rem}.ivds-modal__close:hover{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:var(--ivds-border-subtle,#e2e7ec);color:var(--ivds-text-primary,#121a24)}.ivds-modal__close: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-modal__close:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-modal__close svg{height:20px;width:20px}.ivds-modal__body{color:var(--ivds-text-secondary,#36414f);overflow-y:auto;overscroll-behavior:contain;padding:var(--spacing-6,1.5rem)}.ivds-modal__footer{align-items:center;background-color:var(--ivds-surface-muted,#f1f3f5);border-top:1px solid var(--ivds-border-subtle,#e2e7ec);display:flex;gap:var(--spacing-3,.75rem);justify-content:flex-end;padding:var(--spacing-4,1rem) var(--spacing-6,1.5rem)}.ivds-modal--sm .ivds-modal__container{max-width:400px}.ivds-modal--lg .ivds-modal__container{max-width:800px}.ivds-modal--xl .ivds-modal__container{max-width:1000px}.ivds-modal--full .ivds-modal__container{border:none;box-shadow:none;height:100%;margin:0;max-width:none}`;

package/lib/components/navigation/_navigation-mixins.scss

@@ -0,0 +1,166 @@
+// Navigation component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin navigation-base {
+  display: flex;
+  align-items: center;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+}
+
+@mixin navigation-list {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  padding: 0;
+  margin: 0;
+}
+
+@mixin navigation-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  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);
+  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);
+
+  &:hover {
+    color: var(--ivds-text-primary, #121a24);
+    border-color: var(--ivds-border-strong, #a1adba);
+  }
+
+  @include focus-ring;
+
+  &.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);
+  }
+}
+
+@mixin side-navigation-base {
+  display: flex;
+  flex-direction: column;
+  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);
+}
+
+@mixin side-navigation-item {
+  width: 100%;
+
+  .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);
+
+    &--active {
+      background-color: var(--color-brand-accent-50, #eef4ff);
+      color: var(--color-brand-accent-700, #0b4593);
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 8px;
+        bottom: 8px;
+        width: 3px;
+        background-color: var(--color-brand-accent-600, #1058b8);
+      }
+    }
+  }
+}
+
+@mixin tabs-base {
+  display: flex;
+  gap: var(--spacing-5, 1.25rem);
+  border-bottom: 2px solid var(--ivds-border-subtle, #e2e7ec);
+}
+
+@mixin tab-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);
+
+  &::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);
+  }
+
+  &:hover {
+    color: var(--ivds-text-primary, #121a24);
+  }
+
+  &--active {
+    color: var(--color-brand-accent-700, #0b4593);
+    font-weight: var(--fontWeight-semibold, 600);
+
+    &::after {
+      transform: scaleX(1);
+    }
+  }
+}
+
+@mixin dropdown-menu-base {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  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:
+    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;
+}
+
+@mixin 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);
+
+  &:hover {
+    background-color: var(--ivds-surface-muted, #f1f3f5);
+    color: var(--ivds-text-primary, #121a24);
+  }
+}