@govtechsg/sgds-web-component 3.30.1-rc.0 → 3.30.1-rc.10

package/package.json

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

package/react/_ssr/index.d.ts

@@ -1 +1 @@
-export { setCSPNonce, getCSPNonce, registerSSRNonce } from '../../utils/ssr-nonce';
+export { setCSPNonce, getCSPNonce } from '../../utils/ssr-nonce';

package/react/_ssr/index.js

@@ -1,2 +1,2 @@
-import { getCSPNonce, registerSSRNonce, setCSPNonce } from "./utils/ssr-nonce.js";
-export { getCSPNonce, registerSSRNonce, setCSPNonce };
+import { getCSPNonce, setCSPNonce } from "./utils/ssr-nonce.js";
+export { getCSPNonce, setCSPNonce };

package/react/_ssr/utils/ssr-nonce.js

@@ -3,50 +3,13 @@ function getCSPNonce() {
 	return globalThis["litNonce"] ?? null;
 }
 /**
-* Patch LitElementRenderer.renderShadow() to inject CSP nonces into
-* DSD <style> tags. Call this ONCE at server startup from instrumentation.ts.
-*
-* This must run before any SSR request is handled. Next.js's
-* instrumentation.ts `register()` hook guarantees this.
-*/
-async function registerSSRNonce() {
-	if (typeof window !== "undefined") return;
-	try {
-		const { LitElementRenderer } = await import("@lit-labs/ssr/lib/lit-element-renderer.js");
-		if (LitElementRenderer._sgdsNoncePatched) return;
-		LitElementRenderer._sgdsNoncePatched = true;
-		const originalRenderShadow = LitElementRenderer.prototype.renderShadow;
-		LitElementRenderer.prototype.renderShadow = function(renderInfo) {
-			const result = originalRenderShadow.call(this, renderInfo);
-			if (!result) return result;
-			const litNonce = globalThis["litNonce"];
-			if (!litNonce) return result;
-			return result.map((item) => {
-				if (typeof item === "string" && item === "<style>") return `<style nonce="${litNonce}">`;
-				return item;
-			});
-		};
-	} catch {}
-}
-/**
 * CSP nonce for Declarative Shadow DOM (DSD) styles.
 *
-* Two functions:
-* - `registerSSRNonce()` — call ONCE at server startup (instrumentation.ts).
-*   Patches LitElementRenderer to respect globalThis.litNonce.
-* - `setCSPNonce()` — call per-request in layout.tsx.
-*   Sets globalThis.litNonce for the current request.
+* Sets globalThis.litNonce — the standard Lit mechanism for CSP nonces.
+* The ssr-nonce-patch.raw.js file reads this value at render time and
+* injects it into DSD <style> tags.
 *
 * @example
-* ```ts
-* // instrumentation.ts
-* import { registerSSRNonce } from '@govtechsg/sgds-web-component/react/ssr';
-*
-* export async function register() {
-*   await registerSSRNonce();
-* }
-* ```
-*
 * ```tsx
 * // app/layout.tsx (server component)
 * import { setCSPNonce } from '@govtechsg/sgds-web-component/react/ssr';
@@ -68,6 +31,6 @@ function setCSPNonce(nonce) {
 	globalThis["litNonce"] = nonce ?? void 0;
 }
 //#endregion
-export { getCSPNonce, registerSSRNonce, setCSPNonce };
+export { getCSPNonce, setCSPNonce };
 
 //# sourceMappingURL=ssr-nonce.js.map

package/react/_ssr/utils/ssr-nonce.js.map

@@ -1 +1 @@
-{"version":3,"file":"ssr-nonce.js","names":[],"sources":["../../../../src/utils/ssr-nonce.ts"],"sourcesContent":["export function getCSPNonce(): string | null {\n  return ((globalThis as Record<string, unknown>)[\"litNonce\"] as string) ?? null;\n}\n\n/**\n * Patch LitElementRenderer.renderShadow() to inject CSP nonces into\n * DSD <style> tags. Call this ONCE at server startup from instrumentation.ts.\n *\n * This must run before any SSR request is handled. Next.js's\n * instrumentation.ts `register()` hook guarantees this.\n */\nexport async function registerSSRNonce(): Promise<void> {\n  if (typeof window !== \"undefined\") return;\n\n  try {\n    const { LitElementRenderer } = await import(\"@lit-labs/ssr/lib/lit-element-renderer.js\");\n\n    // Guard against double-patching\n    if ((LitElementRenderer as Record<string, unknown>)._sgdsNoncePatched) {\n      return;\n    }\n    (LitElementRenderer as Record<string, unknown>)._sgdsNoncePatched = true;\n\n    const originalRenderShadow = LitElementRenderer.prototype.renderShadow;\n\n    LitElementRenderer.prototype.renderShadow = function (renderInfo: unknown) {\n      const result = originalRenderShadow.call(this, renderInfo);\n      if (!result) return result;\n\n      const litNonce = (globalThis as Record<string, unknown>)[\"litNonce\"];\n      if (!litNonce) return result;\n\n      return result.map((item: unknown) => {\n        if (typeof item === \"string\" && item === \"<style>\") {\n          return `<style nonce=\"${litNonce}\">`;\n        }\n        return item;\n      });\n    };\n  } catch {\n    // @lit-labs/ssr not available — nonce injection disabled\n  }\n}\n\n/**\n * CSP nonce for Declarative Shadow DOM (DSD) styles.\n *\n * Two functions:\n * - `registerSSRNonce()` — call ONCE at server startup (instrumentation.ts).\n *   Patches LitElementRenderer to respect globalThis.litNonce.\n * - `setCSPNonce()` — call per-request in layout.tsx.\n *   Sets globalThis.litNonce for the current request.\n *\n * @example\n * ```ts\n * // instrumentation.ts\n * import { registerSSRNonce } from '@govtechsg/sgds-web-component/react/ssr';\n *\n * export async function register() {\n *   await registerSSRNonce();\n * }\n * ```\n *\n * ```tsx\n * // app/layout.tsx (server component)\n * import { setCSPNonce } from '@govtechsg/sgds-web-component/react/ssr';\n * import { headers } from 'next/headers';\n *\n * export default async function Layout({ children }) {\n *   const nonce = (await headers()).get('x-nonce');\n *   if (nonce) setCSPNonce(nonce);\n *   return <html><body>{children}</body></html>;\n * }\n * ```\n */\n/**\n * Set the CSP nonce for the current request. Call this in your server\n * component (e.g. layout.tsx) before SGDS components render.\n * This is synchronous — no await needed.\n */\nexport function setCSPNonce(nonce: string | null): void {\n  (globalThis as Record<string, unknown>)[\"litNonce\"] = nonce ?? undefined;\n}\n"],"mappings":";AAAA,SAAgB,cAA6B;CAC3C,OAAS,WAAuC,eAA0B;AAC5E;;;;;;;;AASA,eAAsB,mBAAkC;CACtD,IAAI,OAAO,WAAW,aAAa;CAEnC,IAAI;EACF,MAAM,EAAE,uBAAuB,MAAM,OAAO;EAG5C,IAAK,mBAA+C,mBAClD;EAEF,mBAAgD,oBAAoB;EAEpE,MAAM,uBAAuB,mBAAmB,UAAU;EAE1D,mBAAmB,UAAU,eAAe,SAAU,YAAqB;GACzE,MAAM,SAAS,qBAAqB,KAAK,MAAM,UAAU;GACzD,IAAI,CAAC,QAAQ,OAAO;GAEpB,MAAM,WAAY,WAAuC;GACzD,IAAI,CAAC,UAAU,OAAO;GAEtB,OAAO,OAAO,KAAK,SAAkB;IACnC,IAAI,OAAO,SAAS,YAAY,SAAS,WACvC,OAAO,iBAAiB,SAAS;IAEnC,OAAO;GACT,CAAC;EACH;CACF,QAAQ,CAER;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,YAAY,OAA4B;CACtD,WAAwC,cAAc,SAAS,KAAA;AACjE"}
+{"version":3,"file":"ssr-nonce.js","names":[],"sources":["../../../../src/utils/ssr-nonce.ts"],"sourcesContent":["export function getCSPNonce(): string | null {\n  return ((globalThis as Record<string, unknown>)[\"litNonce\"] as string) ?? null;\n}\n\n/**\n * CSP nonce for Declarative Shadow DOM (DSD) styles.\n *\n * Sets globalThis.litNonce — the standard Lit mechanism for CSP nonces.\n * The ssr-nonce-patch.raw.js file reads this value at render time and\n * injects it into DSD <style> tags.\n *\n * @example\n * ```tsx\n * // app/layout.tsx (server component)\n * import { setCSPNonce } from '@govtechsg/sgds-web-component/react/ssr';\n * import { headers } from 'next/headers';\n *\n * export default async function Layout({ children }) {\n *   const nonce = (await headers()).get('x-nonce');\n *   if (nonce) setCSPNonce(nonce);\n *   return <html><body>{children}</body></html>;\n * }\n * ```\n */\n/**\n * Set the CSP nonce for the current request. Call this in your server\n * component (e.g. layout.tsx) before SGDS components render.\n * This is synchronous — no await needed.\n */\nexport function setCSPNonce(nonce: string | null): void {\n  (globalThis as Record<string, unknown>)[\"litNonce\"] = nonce ?? undefined;\n}\n"],"mappings":";AAAA,SAAgB,cAA6B;CAC3C,OAAS,WAAuC,eAA0B;AAC5E;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,YAAY,OAA4B;CACtD,WAAwC,cAAc,SAAS,KAAA;AACjE"}

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/Checkbox/sgds-checkbox.cjs.js

@@ -93,6 +93,18 @@ var SgdsCheckbox = class extends require_validatorMixin.SgdsFormValidatorMixin(r
 		e.preventDefault();
 		this.invalid = true;
 	}
+	/** Override mixin to match native checkbox: send value only when checked, default to "on". */
+	_mixinSetFormValue() {
+		super._mixinSetFormValue(this.checked ? this.value ?? "on" : null);
+	}
+	/** @internal */
+	_handleCheckedChange() {
+		this._mixinSetFormValue();
+	}
+	/** @internal */
+	_handleValueChange() {
+		this._mixinSetFormValue();
+	}
 	/** @internal */
 	_handleDisabledChange() {
 		this.setInvalid(false);
@@ -219,6 +231,8 @@ require_decorate.default([(0, lit_decorators_js.property)({
 	reflect: true
 })], SgdsCheckbox.prototype, "invalidFeedback", void 0);
 require_decorate.default([(0, lit_decorators_js.state)()], SgdsCheckbox.prototype, "_isTouched", void 0);
+require_decorate.default([require_watch.watch("checked", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleCheckedChange", null);
+require_decorate.default([require_watch.watch("value", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleValueChange", null);
 require_decorate.default([require_watch.watch("disabled", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 require_decorate.default([require_watch.watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleIsTouched", null);
 //#endregion

package/react/components/Checkbox/sgds-checkbox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value submitted in FormData when the checkbox is checked. Defaults to `\"on\"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** Override mixin to match native checkbox: send value only when checked, default to \"on\". */\n  private _mixinSetFormValue() {\n    super._mixinSetFormValue(this.checked ? this.value ?? \"on\" : null);\n  }\n\n  /** @internal */\n  @watch(\"checked\", { waitUntilFirstUpdate: true })\n  _handleCheckedChange() {\n    this._mixinSetFormValue();\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this._mixinSetFormValue();\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.js

@@ -93,6 +93,18 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
 		e.preventDefault();
 		this.invalid = true;
 	}
+	/** Override mixin to match native checkbox: send value only when checked, default to "on". */
+	_mixinSetFormValue() {
+		super._mixinSetFormValue(this.checked ? this.value ?? "on" : null);
+	}
+	/** @internal */
+	_handleCheckedChange() {
+		this._mixinSetFormValue();
+	}
+	/** @internal */
+	_handleValueChange() {
+		this._mixinSetFormValue();
+	}
 	/** @internal */
 	_handleDisabledChange() {
 		this.setInvalid(false);
@@ -219,6 +231,8 @@ __decorate([property({
 	reflect: true
 })], SgdsCheckbox.prototype, "invalidFeedback", void 0);
 __decorate([state()], SgdsCheckbox.prototype, "_isTouched", void 0);
+__decorate([watch("checked", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleCheckedChange", null);
+__decorate([watch("value", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleValueChange", null);
 __decorate([watch("disabled", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 __decorate([watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleIsTouched", null);
 //#endregion

package/react/components/Checkbox/sgds-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value submitted in FormData when the checkbox is checked. Defaults to `\"on\"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** Override mixin to match native checkbox: send value only when checked, default to \"on\". */\n  private _mixinSetFormValue() {\n    super._mixinSetFormValue(this.checked ? this.value ?? \"on\" : null);\n  }\n\n  /** @internal */\n  @watch(\"checked\", { waitUntilFirstUpdate: true })\n  _handleCheckedChange() {\n    this._mixinSetFormValue();\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this._mixinSetFormValue();\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

package/react/components/Datepicker/sgds-datepicker.cjs.js

@@ -183,8 +183,12 @@ var SgdsDatepicker = class extends require_validatorMixin.SgdsFormValidatorMixin
 			this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;
 		}
 	}
-	_handleValueChange() {
+	async _handleValueChange() {
+		this._mixinSetFormValue();
 		this.emit("sgds-change-date");
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	async _handleCloseMenu() {
 		if (this.selectedDateRange.length === 0) this.displayDate = this.initialDisplayDate;