@govtechsg/sgds-web-component 3.30.1-rc.7 → 3.30.1-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.30.1-rc.7",
+  "version": "3.30.1-rc.9",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Appnav/appnav.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Appnav/appnav.css
-var css_248z = require("lit").css`:host{display:block}nav{box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-fixed-light);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{align-items:flex-start;display:flex;flex-direction:column;gap:var(--sgds-gap-xs);height:100%;margin-bottom:0;margin-left:auto;margin-top:0}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto}nav>.navbar-body slot::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{align-items:center;flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=start]{align-items:center;display:flex;gap:var(--sgds-gap-xs)}slot[name=start].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=start]::slotted(*){color:var(--sgds-color-fixed-light)}.navbar-end.slot-empty,.slot-desktop-only{display:none}.appnav-menu-item{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none;width:100%}.appnav-menu-item:hover{color:var(--sgds-color-default)}.appnav-menu-item:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = require("lit").css`:host{display:block}nav{box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}.navbar-brand{align-items:center;align-self:center;color:var(--sgds-color-fixed-light);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,.navbar-brand:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-brand ::slotted(a:focus-visible){outline:none}.navbar-nav{align-items:flex-start;display:flex;flex-direction:column;gap:var(--sgds-gap-xs);height:100%;margin-bottom:0;margin-left:auto;margin-top:0}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto}nav>.navbar-body slot::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{align-items:center;flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=start]{align-items:center;display:flex;gap:var(--sgds-gap-xs)}slot[name=start].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=start]::slotted(*){color:var(--sgds-color-fixed-light)}.navbar-end.slot-empty,.slot-desktop-only{display:none}.appnav-menu-item{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none;width:100%}.appnav-menu-item:hover{color:var(--sgds-color-default)}.appnav-menu-item:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Appnav/appnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"appnav.cjs.js","names":[],"sources":["../../../../src/components/Appnav/appnav.css"],"sourcesContent":[":host {\n  display: block;\n}\n\nnav {\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  position: relative;\n  z-index: var(--sgds-z-index-floating);\n}\n\n:host([tone=\"brand\"]) nav {\n  background-color: var(--sgds-primary-surface-default);\n}\n\n:host([tone=\"gradient-1\"]) nav {\n  background: var(--sgds-gradient-1);\n}\n\n:host([tone=\"gradient-2\"]) nav {\n  background: var(--sgds-gradient-2);\n}\n\n:host([tone=\"gradient-3\"]) nav {\n  background: var(--sgds-gradient-3);\n}\n\n:host([tone=\"gradient-4\"]) nav {\n  background: var(--sgds-gradient-4);\n}\n\n.navbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xs);\n  padding: 0px var(--sgds-mainnav-mobile-padding-x);\n  width: 100%;\n  min-height: var(--sgds-mainnav-height, 72px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.navbar-brand,\n::slotted(.navbar-brand) {\n  display: flex;\n  height: var(--sgds-dimension-40);\n  align-self: center;\n  align-items: center;\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-brand ::slotted(img) {\n  height: 100%;\n}\n\n.navbar-brand:focus-visible,\n::slotted(.navbar-brand:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  height: 100%;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: auto;\n  gap: var(--sgds-gap-xs);\n}\n\nnav > .navbar-body {\n  position: absolute;\n  z-index: var(--sgds-z-index-floating);\n  width: 100%;\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-md) 0px;\n  border-top: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  transition: transform 0.2s ease-in-out;\n}\n\nnav > .navbar-body .navbar-nav {\n  height: 100dvh;\n  margin: auto;\n}\n\nnav > .navbar-body slot::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n.navbar-collapse {\n  align-items: center;\n  flex-basis: 100%;\n  flex-grow: 1;\n}\n\n.navbar-toggler {\n  align-self: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navbar-toggler {\n    transition: none;\n  }\n}\n\n.navbar-nav-scroll {\n  overflow-y: auto;\n}\n\n@media (min-width: 512px) {\n  .navbar-expand-sm {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-sm .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-sm .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-sm .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-sm .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 768px) {\n  .navbar-expand-md {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-md .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-md .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-md .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-md .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1024px) {\n  .navbar {\n    padding: 0px var(--sgds-mainnav-padding-x);\n  }\n\n  .navbar-expand-lg {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-lg .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-lg .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-lg .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-lg .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1280px) {\n  .navbar-expand-xl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xl .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1440px) {\n  .navbar-expand-xxl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xxl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xxl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xxl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xxl .navbar-toggler {\n    display: none;\n  }\n}\n\n.navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xl);\n}\n\n.navbar-expand .navbar-nav {\n  flex-direction: row;\n  align-items: center;\n}\n\n.navbar-expand .navbar-nav-scroll {\n  overflow: visible;\n}\n\n.navbar-expand .navbar-collapse {\n  display: flex !important;\n  flex-basis: auto;\n}\n\n.navbar-expand .navbar-toggler {\n  display: none;\n}\n\n/* slots */\n\n.navbar-end {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n  margin-left: auto;\n}\n\nslot[name=\"start\"] {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n}\n\nslot[name=\"start\"].slot-empty {\n  display: none;\n}\n\nslot[name=\"profile\"] {\n  display: flex;\n  align-self: stretch;\n}\n\nslot[name=\"start\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-end.slot-empty {\n  display: none;\n}\n\n/* Hide slotted icon-buttons in mobile menu, show text items instead */\n.slot-desktop-only {\n  display: none;\n}\n\n.appnav-menu-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  color: var(--sgds-color-default);\n  text-decoration: none;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.appnav-menu-item:hover {\n  color: var(--sgds-color-default);\n}\n\n.appnav-menu-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n"],"mappings":""}
+{"version":3,"file":"appnav.cjs.js","names":[],"sources":["../../../../src/components/Appnav/appnav.css"],"sourcesContent":[":host {\n  display: block;\n}\n\nnav {\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  position: relative;\n  z-index: var(--sgds-z-index-floating);\n}\n\n:host([tone=\"brand\"]) nav {\n  background-color: var(--sgds-primary-surface-default);\n}\n\n:host([tone=\"gradient-1\"]) nav {\n  background: var(--sgds-gradient-1);\n}\n\n:host([tone=\"gradient-2\"]) nav {\n  background: var(--sgds-gradient-2);\n}\n\n:host([tone=\"gradient-3\"]) nav {\n  background: var(--sgds-gradient-3);\n}\n\n:host([tone=\"gradient-4\"]) nav {\n  background: var(--sgds-gradient-4);\n}\n\n.navbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xs);\n  padding: 0px var(--sgds-mainnav-mobile-padding-x);\n  width: 100%;\n  min-height: var(--sgds-mainnav-height, 72px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.navbar-brand {\n  display: flex;\n  height: var(--sgds-dimension-40);\n  align-self: center;\n  align-items: center;\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-brand ::slotted(img) {\n  height: 100%;\n}\n\n.navbar-brand:focus-visible,\n.navbar-brand:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-brand ::slotted(a:focus-visible) {\n  outline: none;\n}\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  height: 100%;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: auto;\n  gap: var(--sgds-gap-xs);\n}\n\nnav > .navbar-body {\n  position: absolute;\n  z-index: var(--sgds-z-index-floating);\n  width: 100%;\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-md) 0px;\n  border-top: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  transition: transform 0.2s ease-in-out;\n}\n\nnav > .navbar-body .navbar-nav {\n  height: 100dvh;\n  margin: auto;\n}\n\nnav > .navbar-body slot::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n.navbar-collapse {\n  align-items: center;\n  flex-basis: 100%;\n  flex-grow: 1;\n}\n\n.navbar-toggler {\n  align-self: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navbar-toggler {\n    transition: none;\n  }\n}\n\n.navbar-nav-scroll {\n  overflow-y: auto;\n}\n\n@media (min-width: 512px) {\n  .navbar-expand-sm {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-sm .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-sm .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-sm .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-sm .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 768px) {\n  .navbar-expand-md {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-md .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-md .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-md .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-md .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1024px) {\n  .navbar {\n    padding: 0px var(--sgds-mainnav-padding-x);\n  }\n\n  .navbar-expand-lg {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-lg .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-lg .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-lg .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-lg .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1280px) {\n  .navbar-expand-xl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xl .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1440px) {\n  .navbar-expand-xxl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xxl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xxl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xxl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xxl .navbar-toggler {\n    display: none;\n  }\n}\n\n.navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xl);\n}\n\n.navbar-expand .navbar-nav {\n  flex-direction: row;\n  align-items: center;\n}\n\n.navbar-expand .navbar-nav-scroll {\n  overflow: visible;\n}\n\n.navbar-expand .navbar-collapse {\n  display: flex !important;\n  flex-basis: auto;\n}\n\n.navbar-expand .navbar-toggler {\n  display: none;\n}\n\n/* slots */\n\n.navbar-end {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n  margin-left: auto;\n}\n\nslot[name=\"start\"] {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n}\n\nslot[name=\"start\"].slot-empty {\n  display: none;\n}\n\nslot[name=\"profile\"] {\n  display: flex;\n  align-self: stretch;\n}\n\nslot[name=\"start\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-end.slot-empty {\n  display: none;\n}\n\n/* Hide slotted icon-buttons in mobile menu, show text items instead */\n.slot-desktop-only {\n  display: none;\n}\n\n.appnav-menu-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  color: var(--sgds-color-default);\n  text-decoration: none;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.appnav-menu-item:hover {\n  color: var(--sgds-color-default);\n}\n\n.appnav-menu-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n"],"mappings":""}

package/react/components/Appnav/appnav.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Appnav/appnav.css
-var css_248z = css`:host{display:block}nav{box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-fixed-light);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{align-items:flex-start;display:flex;flex-direction:column;gap:var(--sgds-gap-xs);height:100%;margin-bottom:0;margin-left:auto;margin-top:0}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto}nav>.navbar-body slot::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{align-items:center;flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=start]{align-items:center;display:flex;gap:var(--sgds-gap-xs)}slot[name=start].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=start]::slotted(*){color:var(--sgds-color-fixed-light)}.navbar-end.slot-empty,.slot-desktop-only{display:none}.appnav-menu-item{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none;width:100%}.appnav-menu-item:hover{color:var(--sgds-color-default)}.appnav-menu-item:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = css`:host{display:block}nav{box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}.navbar-brand{align-items:center;align-self:center;color:var(--sgds-color-fixed-light);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,.navbar-brand:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-brand ::slotted(a:focus-visible){outline:none}.navbar-nav{align-items:flex-start;display:flex;flex-direction:column;gap:var(--sgds-gap-xs);height:100%;margin-bottom:0;margin-left:auto;margin-top:0}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto}nav>.navbar-body slot::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{align-items:center;flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{align-items:center;flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=start]{align-items:center;display:flex;gap:var(--sgds-gap-xs)}slot[name=start].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=start]::slotted(*){color:var(--sgds-color-fixed-light)}.navbar-end.slot-empty,.slot-desktop-only{display:none}.appnav-menu-item{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none;width:100%}.appnav-menu-item:hover{color:var(--sgds-color-default)}.appnav-menu-item:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Appnav/appnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"appnav.js","names":[],"sources":["../../../../src/components/Appnav/appnav.css"],"sourcesContent":[":host {\n  display: block;\n}\n\nnav {\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  position: relative;\n  z-index: var(--sgds-z-index-floating);\n}\n\n:host([tone=\"brand\"]) nav {\n  background-color: var(--sgds-primary-surface-default);\n}\n\n:host([tone=\"gradient-1\"]) nav {\n  background: var(--sgds-gradient-1);\n}\n\n:host([tone=\"gradient-2\"]) nav {\n  background: var(--sgds-gradient-2);\n}\n\n:host([tone=\"gradient-3\"]) nav {\n  background: var(--sgds-gradient-3);\n}\n\n:host([tone=\"gradient-4\"]) nav {\n  background: var(--sgds-gradient-4);\n}\n\n.navbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xs);\n  padding: 0px var(--sgds-mainnav-mobile-padding-x);\n  width: 100%;\n  min-height: var(--sgds-mainnav-height, 72px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.navbar-brand,\n::slotted(.navbar-brand) {\n  display: flex;\n  height: var(--sgds-dimension-40);\n  align-self: center;\n  align-items: center;\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-brand ::slotted(img) {\n  height: 100%;\n}\n\n.navbar-brand:focus-visible,\n::slotted(.navbar-brand:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  height: 100%;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: auto;\n  gap: var(--sgds-gap-xs);\n}\n\nnav > .navbar-body {\n  position: absolute;\n  z-index: var(--sgds-z-index-floating);\n  width: 100%;\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-md) 0px;\n  border-top: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  transition: transform 0.2s ease-in-out;\n}\n\nnav > .navbar-body .navbar-nav {\n  height: 100dvh;\n  margin: auto;\n}\n\nnav > .navbar-body slot::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n.navbar-collapse {\n  align-items: center;\n  flex-basis: 100%;\n  flex-grow: 1;\n}\n\n.navbar-toggler {\n  align-self: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navbar-toggler {\n    transition: none;\n  }\n}\n\n.navbar-nav-scroll {\n  overflow-y: auto;\n}\n\n@media (min-width: 512px) {\n  .navbar-expand-sm {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-sm .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-sm .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-sm .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-sm .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 768px) {\n  .navbar-expand-md {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-md .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-md .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-md .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-md .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1024px) {\n  .navbar {\n    padding: 0px var(--sgds-mainnav-padding-x);\n  }\n\n  .navbar-expand-lg {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-lg .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-lg .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-lg .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-lg .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1280px) {\n  .navbar-expand-xl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xl .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1440px) {\n  .navbar-expand-xxl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xxl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xxl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xxl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xxl .navbar-toggler {\n    display: none;\n  }\n}\n\n.navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xl);\n}\n\n.navbar-expand .navbar-nav {\n  flex-direction: row;\n  align-items: center;\n}\n\n.navbar-expand .navbar-nav-scroll {\n  overflow: visible;\n}\n\n.navbar-expand .navbar-collapse {\n  display: flex !important;\n  flex-basis: auto;\n}\n\n.navbar-expand .navbar-toggler {\n  display: none;\n}\n\n/* slots */\n\n.navbar-end {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n  margin-left: auto;\n}\n\nslot[name=\"start\"] {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n}\n\nslot[name=\"start\"].slot-empty {\n  display: none;\n}\n\nslot[name=\"profile\"] {\n  display: flex;\n  align-self: stretch;\n}\n\nslot[name=\"start\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-end.slot-empty {\n  display: none;\n}\n\n/* Hide slotted icon-buttons in mobile menu, show text items instead */\n.slot-desktop-only {\n  display: none;\n}\n\n.appnav-menu-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  color: var(--sgds-color-default);\n  text-decoration: none;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.appnav-menu-item:hover {\n  color: var(--sgds-color-default);\n}\n\n.appnav-menu-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n"],"mappings":""}
+{"version":3,"file":"appnav.js","names":[],"sources":["../../../../src/components/Appnav/appnav.css"],"sourcesContent":[":host {\n  display: block;\n}\n\nnav {\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  position: relative;\n  z-index: var(--sgds-z-index-floating);\n}\n\n:host([tone=\"brand\"]) nav {\n  background-color: var(--sgds-primary-surface-default);\n}\n\n:host([tone=\"gradient-1\"]) nav {\n  background: var(--sgds-gradient-1);\n}\n\n:host([tone=\"gradient-2\"]) nav {\n  background: var(--sgds-gradient-2);\n}\n\n:host([tone=\"gradient-3\"]) nav {\n  background: var(--sgds-gradient-3);\n}\n\n:host([tone=\"gradient-4\"]) nav {\n  background: var(--sgds-gradient-4);\n}\n\n.navbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xs);\n  padding: 0px var(--sgds-mainnav-mobile-padding-x);\n  width: 100%;\n  min-height: var(--sgds-mainnav-height, 72px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.navbar-brand {\n  display: flex;\n  height: var(--sgds-dimension-40);\n  align-self: center;\n  align-items: center;\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-brand ::slotted(img) {\n  height: 100%;\n}\n\n.navbar-brand:focus-visible,\n.navbar-brand:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-brand ::slotted(a:focus-visible) {\n  outline: none;\n}\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  height: 100%;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: auto;\n  gap: var(--sgds-gap-xs);\n}\n\nnav > .navbar-body {\n  position: absolute;\n  z-index: var(--sgds-z-index-floating);\n  width: 100%;\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-md) 0px;\n  border-top: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  transition: transform 0.2s ease-in-out;\n}\n\nnav > .navbar-body .navbar-nav {\n  height: 100dvh;\n  margin: auto;\n}\n\nnav > .navbar-body slot::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n.navbar-collapse {\n  align-items: center;\n  flex-basis: 100%;\n  flex-grow: 1;\n}\n\n.navbar-toggler {\n  align-self: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navbar-toggler {\n    transition: none;\n  }\n}\n\n.navbar-nav-scroll {\n  overflow-y: auto;\n}\n\n@media (min-width: 512px) {\n  .navbar-expand-sm {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-sm .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-sm .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-sm .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-sm .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 768px) {\n  .navbar-expand-md {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-md .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-md .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-md .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-md .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1024px) {\n  .navbar {\n    padding: 0px var(--sgds-mainnav-padding-x);\n  }\n\n  .navbar-expand-lg {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-lg .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-lg .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-lg .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-lg .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1280px) {\n  .navbar-expand-xl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xl .navbar-toggler {\n    display: none;\n  }\n}\n\n@media (min-width: 1440px) {\n  .navbar-expand-xxl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xxl .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .navbar-expand-xxl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xxl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xxl .navbar-toggler {\n    display: none;\n  }\n}\n\n.navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xl);\n}\n\n.navbar-expand .navbar-nav {\n  flex-direction: row;\n  align-items: center;\n}\n\n.navbar-expand .navbar-nav-scroll {\n  overflow: visible;\n}\n\n.navbar-expand .navbar-collapse {\n  display: flex !important;\n  flex-basis: auto;\n}\n\n.navbar-expand .navbar-toggler {\n  display: none;\n}\n\n/* slots */\n\n.navbar-end {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n  margin-left: auto;\n}\n\nslot[name=\"start\"] {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n}\n\nslot[name=\"start\"].slot-empty {\n  display: none;\n}\n\nslot[name=\"profile\"] {\n  display: flex;\n  align-self: stretch;\n}\n\nslot[name=\"start\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n.navbar-end.slot-empty {\n  display: none;\n}\n\n/* Hide slotted icon-buttons in mobile menu, show text items instead */\n.slot-desktop-only {\n  display: none;\n}\n\n.appnav-menu-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  color: var(--sgds-color-default);\n  text-decoration: none;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.appnav-menu-item:hover {\n  color: var(--sgds-color-default);\n}\n\n.appnav-menu-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n"],"mappings":""}

package/react/components/Appnav/sgds-appnav.cjs.js

@@ -121,7 +121,9 @@ var SgdsAppnav = class extends require_nav_element.default {
           <slot name="start" class=${(0, lit_directives_class_map_js.classMap)({ "slot-empty": !this.hasStartSlot })}></slot>
           ${this.brandHref ? lit.html`<a class="navbar-brand" href=${require_safeUrl.sanitizeHref(this.brandHref) ?? ""}>
                 <slot name="brand"></slot>
-              </a>` : lit.html`<slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>`}
+              </a>` : lit.html`<div class="navbar-brand">
+                <slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>
+              </div>`}
           <div class="navbar-body navbar-collapse" id=${this.collapseId}>
             <div class="navbar-nav navbar-nav-scroll">
               <slot

package/react/components/Appnav/sgds-appnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-appnav.cjs.js","names":["NavElement","HasSlotController","appnavStyle","classMap","sanitizeHref","nothing","provide","AppnavBreakpointContext","state","AppnavExpandedContext","property"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-appnav.cjs.js","names":["NavElement","HasSlotController","appnavStyle","classMap","sanitizeHref","nothing","provide","AppnavBreakpointContext","state","AppnavExpandedContext","property"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<div class=\"navbar-brand\">\n                <slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>\n              </div>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}

package/react/components/Appnav/sgds-appnav.js

@@ -121,7 +121,9 @@ var SgdsAppnav = class extends NavElement {
           <slot name="start" class=${classMap({ "slot-empty": !this.hasStartSlot })}></slot>
           ${this.brandHref ? html`<a class="navbar-brand" href=${sanitizeHref(this.brandHref) ?? ""}>
                 <slot name="brand"></slot>
-              </a>` : html`<slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>`}
+              </a>` : html`<div class="navbar-brand">
+                <slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>
+              </div>`}
           <div class="navbar-body navbar-collapse" id=${this.collapseId}>
             <div class="navbar-nav navbar-nav-scroll">
               <slot

package/react/components/Appnav/sgds-appnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-appnav.js","names":["appnavStyle"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-appnav.js","names":["appnavStyle"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<div class=\"navbar-brand\">\n                <slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>\n              </div>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}

package/react/components/Dropdown/dropdown-item.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Dropdown/dropdown-item.css
-var css_248z = require("lit").css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = require("lit").css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{box-sizing:border-box;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){margin:auto;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Dropdown/dropdown-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.cjs.js","names":[],"sources":["../../../../src/components/Dropdown/dropdown-item.css"],"sourcesContent":[":host([disabled]) {\n  cursor: not-allowed;\n}\n\n.dropdown-item {\n  background-color: var(--sgds-bg-transparent);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n  clear: both;\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  align-items: center;\n  color: var(--sgds-color-default);\n  text-align: inherit;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.dropdown-item:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.dropdown-item:focus,\n.dropdown-item:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.dropdown-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.dropdown-item.active {\n  color: var(--sgds-primary-color-default);\n  background-color: var(--sgds-bg-translucent-subtle);\n  text-decoration: none;\n}\n\n.dropdown-item.disabled,\n.dropdown-item:disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n.dropdown-item.readonly {\n  cursor: default;\n}\n\n.dropdown-item.readonly:hover,\n.dropdown-item.readonly:focus,\n.dropdown-item.readonly:focus-visible {\n  background-color: var(--sgds-bg-transparent);\n  outline: none;\n}\n\n::slotted(*) {\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\n/* Expand slotted anchors and checkboxes to fill the full item hit area including padding,\n   so clicking anywhere in the item activates them without JS click delegation. */\n::slotted(a),\n::slotted(sgds-checkbox) {\n  flex: 1;\n  margin: calc(var(--sgds-padding-sm) * -1) calc(var(--sgds-padding-lg) * -1);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n/** to style the mainnav dropdown in mobile */\n.dropdown-item.mainnav-dropdown-link {\n  padding: var(--sgds-padding-none);\n}\n.dropdown-item.mainnav-dropdown-link ::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  box-sizing: border-box;\n}\n\n@media screen and (min-width: 1024px) {\n  .dropdown-item.mainnav-dropdown-link ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}
+{"version":3,"file":"dropdown-item.cjs.js","names":[],"sources":["../../../../src/components/Dropdown/dropdown-item.css"],"sourcesContent":[":host([disabled]) {\n  cursor: not-allowed;\n}\n\n.dropdown-item {\n  background-color: var(--sgds-bg-transparent);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n  clear: both;\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  align-items: center;\n  color: var(--sgds-color-default);\n  text-align: inherit;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.dropdown-item:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.dropdown-item:focus,\n.dropdown-item:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.dropdown-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.dropdown-item.active {\n  color: var(--sgds-primary-color-default);\n  background-color: var(--sgds-bg-translucent-subtle);\n  text-decoration: none;\n}\n\n.dropdown-item.disabled,\n.dropdown-item:disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n.dropdown-item.readonly {\n  cursor: default;\n}\n\n.dropdown-item.readonly:hover,\n.dropdown-item.readonly:focus,\n.dropdown-item.readonly:focus-visible {\n  background-color: var(--sgds-bg-transparent);\n  outline: none;\n}\n\n::slotted(*) {\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\n/* Expand slotted anchors and checkboxes to fill the full item hit area including padding,\n   so clicking anywhere in the item activates them without JS click delegation. */\n::slotted(a),\n::slotted(sgds-checkbox) {\n  flex: 1;\n  margin: calc(var(--sgds-padding-sm) * -1) calc(var(--sgds-padding-lg) * -1);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n/** to style the mainnav dropdown in mobile */\n.dropdown-item.mainnav-dropdown-link {\n  padding: var(--sgds-padding-none);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  box-sizing: border-box;\n}\n.dropdown-item.mainnav-dropdown-link ::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  margin: auto;\n}\n\n@media screen and (min-width: 1024px) {\n  .dropdown-item.mainnav-dropdown-link ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}

package/react/components/Dropdown/dropdown-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Dropdown/dropdown-item.css
-var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{box-sizing:border-box;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){margin:auto;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Dropdown/dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","names":[],"sources":["../../../../src/components/Dropdown/dropdown-item.css"],"sourcesContent":[":host([disabled]) {\n  cursor: not-allowed;\n}\n\n.dropdown-item {\n  background-color: var(--sgds-bg-transparent);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n  clear: both;\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  align-items: center;\n  color: var(--sgds-color-default);\n  text-align: inherit;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.dropdown-item:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.dropdown-item:focus,\n.dropdown-item:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.dropdown-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.dropdown-item.active {\n  color: var(--sgds-primary-color-default);\n  background-color: var(--sgds-bg-translucent-subtle);\n  text-decoration: none;\n}\n\n.dropdown-item.disabled,\n.dropdown-item:disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n.dropdown-item.readonly {\n  cursor: default;\n}\n\n.dropdown-item.readonly:hover,\n.dropdown-item.readonly:focus,\n.dropdown-item.readonly:focus-visible {\n  background-color: var(--sgds-bg-transparent);\n  outline: none;\n}\n\n::slotted(*) {\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\n/* Expand slotted anchors and checkboxes to fill the full item hit area including padding,\n   so clicking anywhere in the item activates them without JS click delegation. */\n::slotted(a),\n::slotted(sgds-checkbox) {\n  flex: 1;\n  margin: calc(var(--sgds-padding-sm) * -1) calc(var(--sgds-padding-lg) * -1);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n/** to style the mainnav dropdown in mobile */\n.dropdown-item.mainnav-dropdown-link {\n  padding: var(--sgds-padding-none);\n}\n.dropdown-item.mainnav-dropdown-link ::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  box-sizing: border-box;\n}\n\n@media screen and (min-width: 1024px) {\n  .dropdown-item.mainnav-dropdown-link ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}
+{"version":3,"file":"dropdown-item.js","names":[],"sources":["../../../../src/components/Dropdown/dropdown-item.css"],"sourcesContent":[":host([disabled]) {\n  cursor: not-allowed;\n}\n\n.dropdown-item {\n  background-color: var(--sgds-bg-transparent);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n  clear: both;\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  align-items: center;\n  color: var(--sgds-color-default);\n  text-align: inherit;\n  cursor: pointer;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n.dropdown-item:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.dropdown-item:focus,\n.dropdown-item:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.dropdown-item:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.dropdown-item.active {\n  color: var(--sgds-primary-color-default);\n  background-color: var(--sgds-bg-translucent-subtle);\n  text-decoration: none;\n}\n\n.dropdown-item.disabled,\n.dropdown-item:disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n.dropdown-item.readonly {\n  cursor: default;\n}\n\n.dropdown-item.readonly:hover,\n.dropdown-item.readonly:focus,\n.dropdown-item.readonly:focus-visible {\n  background-color: var(--sgds-bg-transparent);\n  outline: none;\n}\n\n::slotted(*) {\n  display: flex;\n  gap: var(--sgds-gap-sm);\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\n/* Expand slotted anchors and checkboxes to fill the full item hit area including padding,\n   so clicking anywhere in the item activates them without JS click delegation. */\n::slotted(a),\n::slotted(sgds-checkbox) {\n  flex: 1;\n  margin: calc(var(--sgds-padding-sm) * -1) calc(var(--sgds-padding-lg) * -1);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n/** to style the mainnav dropdown in mobile */\n.dropdown-item.mainnav-dropdown-link {\n  padding: var(--sgds-padding-none);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  box-sizing: border-box;\n}\n.dropdown-item.mainnav-dropdown-link ::slotted(*) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  margin: auto;\n}\n\n@media screen and (min-width: 1024px) {\n  .dropdown-item.mainnav-dropdown-link ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}

package/react/components/Mainnav/mainnav-dropdown.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Mainnav/mainnav-dropdown.css
-var css_248z = require("lit").css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = require("lit").css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}.toggler-wrapper{color:inherit;flex:1}slot[name=toggler]::slotted(*){color:inherit!important}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Mainnav/mainnav-dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav-dropdown.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  flex: 1;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}
+{"version":3,"file":"mainnav-dropdown.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n/* Toggler wrapper — inherits color from .nav-link which handles tone/expand */\n.toggler-wrapper {\n  flex: 1;\n  color: inherit;\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  color: inherit !important;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}

package/react/components/Mainnav/mainnav-dropdown.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Mainnav/mainnav-dropdown.css
-var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}.toggler-wrapper{color:inherit;flex:1}slot[name=toggler]::slotted(*){color:inherit!important}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Mainnav/mainnav-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav-dropdown.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  flex: 1;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}
+{"version":3,"file":"mainnav-dropdown.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n/* Toggler wrapper — inherits color from .nav-link which handles tone/expand */\n.toggler-wrapper {\n  flex: 1;\n  color: inherit;\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  color: inherit !important;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}

package/react/components/Mainnav/mainnav-item.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Mainnav/mainnav-item.css
-var css_248z = require("lit").css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = require("lit").css`.mainnav-item{--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px)}:host([expand=always]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}@media screen and (min-width:512px){:host([expand=sm]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=sm]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=md]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=lg]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xxl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}:host(:not([disabled])[active]) .mainnav-item{--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)}:host([tone=brand][expand=always]) .mainnav-item,:host([tone^=gradient][expand=always]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .mainnav-item,:host([tone^=gradient][expand=sm]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .mainnav-item,:host([tone^=gradient][expand=md]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .mainnav-item,:host([tone^=gradient][expand=lg]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .mainnav-item,:host([tone^=gradient][expand=xl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .mainnav-item,:host([tone^=gradient][expand=xxl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}:host([tone=brand][expand=always]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=always]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=sm]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=md]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=lg]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xxl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}.mainnav-item:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .mainnav-item{cursor:not-allowed;opacity:var(--sgds-opacity-40)}::slotted(*){color:inherit!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([expand=always]) ::slotted(*){padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}::slotted(a:focus-visible){outline:none}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Mainnav/mainnav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav-item.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":[":host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  display: flex;\n  cursor: pointer;\n  height: auto !important;\n  text-decoration: none !important;\n  align-items: center;\n  color: var(--sgds-color-default) !important;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*) {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n:host(:not([disabled])[active]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n:host([disabled]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:active) {\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:active) {\n  color: var(--sgds-primary-color-default) !important;\n}\n\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted(*) {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n"],"mappings":""}
+{"version":3,"file":"mainnav-item.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":["/* ===== .mainnav-item (inner shadow DOM — protected from external CSS) ===== */\n\n.mainnav-item {\n  display: flex;\n  align-items: center;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  box-sizing: border-box;\n  cursor: pointer;\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default);\n}\n\n/* Expand variants — border-bottom active indicator + min-height */\n\n:host([expand=\"always\"]) .mainnav-item {\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n/* Mobile active — background-color */\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n/* Active state — color */\n\n:host(:not([disabled])[active]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default);\n}\n\n/* Tone brand/gradient — color */\n\n:host([tone=\"brand\"][expand=\"always\"]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Tone brand/gradient — active border-color */\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Focus-within — outline on wrapper, anchor inherits color */\n\n.mainnav-item:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* Disabled */\n\n:host([disabled]) .mainnav-item {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n/* ===== ::slotted (light DOM — minimal anchor overrides) ===== */\n\n::slotted(*) {\n  text-decoration: none !important;\n  color: inherit !important;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n/* Expand variants — padding */\n\n:host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n/* Desktop padding override */\n\n@media screen and (min-width: 1024px) {\n  ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n/* Focus-visible — suppress anchor outline, wrapper handles it */\n\n::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}