@govtechsg/sgds-web-component 3.30.1-rc.7 → 3.30.1-rc.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Appnav/appnav.js +1 -1
- package/components/Appnav/appnav.js.map +1 -1
- package/components/Appnav/index.umd.min.js +4 -2
- package/components/Appnav/index.umd.min.js.map +1 -1
- package/components/Appnav/sgds-appnav.js +3 -1
- package/components/Appnav/sgds-appnav.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +1 -1
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/Dropdown/dropdown-item.js +1 -1
- package/components/Dropdown/dropdown-item.js.map +1 -1
- package/components/Dropdown/index.umd.min.js +1 -1
- package/components/Dropdown/index.umd.min.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +9 -7
- package/components/Mainnav/index.umd.min.js.map +1 -1
- package/components/Mainnav/mainnav-dropdown.js +1 -1
- package/components/Mainnav/mainnav-dropdown.js.map +1 -1
- package/components/Mainnav/mainnav-item.js +1 -1
- package/components/Mainnav/mainnav-item.js.map +1 -1
- package/components/Mainnav/mainnav.js +1 -1
- package/components/Mainnav/mainnav.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.js +2 -2
- package/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-item.js +1 -1
- package/components/Mainnav/sgds-mainnav-item.js.map +1 -1
- package/components/Mainnav/sgds-mainnav.js +3 -1
- package/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/components/OverflowMenu/index.umd.min.js +1 -1
- package/components/OverflowMenu/index.umd.min.js.map +1 -1
- package/components/Sidenav/index.umd.min.js +5 -3
- package/components/Sidenav/index.umd.min.js.map +1 -1
- package/components/Sidenav/sgds-sidenav-item.js +3 -1
- package/components/Sidenav/sgds-sidenav-item.js.map +1 -1
- package/components/Sidenav/sgds-sidenav-link.js +1 -1
- package/components/Sidenav/sgds-sidenav-link.js.map +1 -1
- package/components/Sidenav/sidenav-item.js +1 -1
- package/components/Sidenav/sidenav-item.js.map +1 -1
- package/components/Sidenav/sidenav-link.js +1 -1
- package/components/Sidenav/sidenav-link.js.map +1 -1
- package/components/Subnav/index.umd.min.js +1 -1
- package/components/Subnav/index.umd.min.js.map +1 -1
- package/components/Subnav/sgds-subnav-item.js +1 -1
- package/components/Subnav/sgds-subnav-item.js.map +1 -1
- package/components/Subnav/subnav-item.js +1 -1
- package/components/Subnav/subnav-item.js.map +1 -1
- package/components/Table/index.umd.min.js +1 -1
- package/components/Table/index.umd.min.js.map +1 -1
- package/components/Table/table-cell.js +1 -1
- package/components/Table/table-cell.js.map +1 -1
- package/components/Table/table-row.js +1 -1
- package/components/Table/table-row.js.map +1 -1
- package/components/index.umd.min.js +21 -15
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +1 -1
- package/index.umd.min.js +20 -14
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Appnav/appnav.cjs.js +1 -1
- package/react/components/Appnav/appnav.cjs.js.map +1 -1
- package/react/components/Appnav/appnav.js +1 -1
- package/react/components/Appnav/appnav.js.map +1 -1
- package/react/components/Appnav/sgds-appnav.cjs.js +3 -1
- package/react/components/Appnav/sgds-appnav.cjs.js.map +1 -1
- package/react/components/Appnav/sgds-appnav.js +3 -1
- package/react/components/Appnav/sgds-appnav.js.map +1 -1
- package/react/components/Dropdown/dropdown-item.cjs.js +1 -1
- package/react/components/Dropdown/dropdown-item.cjs.js.map +1 -1
- package/react/components/Dropdown/dropdown-item.js +1 -1
- package/react/components/Dropdown/dropdown-item.js.map +1 -1
- package/react/components/Mainnav/mainnav-dropdown.cjs.js +1 -1
- package/react/components/Mainnav/mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/mainnav-dropdown.js +1 -1
- package/react/components/Mainnav/mainnav-dropdown.js.map +1 -1
- package/react/components/Mainnav/mainnav-item.cjs.js +1 -1
- package/react/components/Mainnav/mainnav-item.cjs.js.map +1 -1
- package/react/components/Mainnav/mainnav-item.js +1 -1
- package/react/components/Mainnav/mainnav-item.js.map +1 -1
- package/react/components/Mainnav/mainnav.cjs.js +1 -1
- package/react/components/Mainnav/mainnav.cjs.js.map +1 -1
- package/react/components/Mainnav/mainnav.js +1 -1
- package/react/components/Mainnav/mainnav.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js +2 -2
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.js +2 -2
- package/react/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-item.cjs.js +1 -1
- package/react/components/Mainnav/sgds-mainnav-item.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-item.js +1 -1
- package/react/components/Mainnav/sgds-mainnav-item.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js +3 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.js +3 -1
- package/react/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/react/components/Sidenav/sgds-sidenav-item.cjs.js +3 -1
- package/react/components/Sidenav/sgds-sidenav-item.cjs.js.map +1 -1
- package/react/components/Sidenav/sgds-sidenav-item.js +3 -1
- package/react/components/Sidenav/sgds-sidenav-item.js.map +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.cjs.js +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.cjs.js.map +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.js +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.js.map +1 -1
- package/react/components/Sidenav/sidenav-item.cjs.js +1 -1
- package/react/components/Sidenav/sidenav-item.cjs.js.map +1 -1
- package/react/components/Sidenav/sidenav-item.js +1 -1
- package/react/components/Sidenav/sidenav-item.js.map +1 -1
- package/react/components/Sidenav/sidenav-link.cjs.js +1 -1
- package/react/components/Sidenav/sidenav-link.cjs.js.map +1 -1
- package/react/components/Sidenav/sidenav-link.js +1 -1
- package/react/components/Sidenav/sidenav-link.js.map +1 -1
- package/react/components/Subnav/sgds-subnav-item.cjs.js +1 -1
- package/react/components/Subnav/sgds-subnav-item.cjs.js.map +1 -1
- package/react/components/Subnav/sgds-subnav-item.js +1 -1
- package/react/components/Subnav/sgds-subnav-item.js.map +1 -1
- package/react/components/Subnav/subnav-item.cjs.js +1 -1
- package/react/components/Subnav/subnav-item.cjs.js.map +1 -1
- package/react/components/Subnav/subnav-item.js +1 -1
- package/react/components/Subnav/subnav-item.js.map +1 -1
- package/react/components/Table/table-cell.cjs.js +1 -1
- package/react/components/Table/table-cell.cjs.js.map +1 -1
- package/react/components/Table/table-cell.js +1 -1
- package/react/components/Table/table-cell.js.map +1 -1
- package/react/components/Table/table-row.cjs.js +1 -1
- package/react/components/Table/table-row.cjs.js.map +1 -1
- package/react/components/Table/table-row.js +1 -1
- package/react/components/Table/table-row.js.map +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
//#region src/components/Appnav/appnav.css
|
|
3
|
-
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
|
|
3
|
+
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)}`;
|
|
4
4
|
//#endregion
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
|
|
@@ -1 +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
|
|
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 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":""}
|
|
@@ -2437,7 +2437,7 @@ let St=Symbol.for(``),Ct=e=>{if(e?.r===St)return e?._$litStatic$},wt=(e,...t)=>(
|
|
|
2437
2437
|
aria-controls="${this.collapseId}"
|
|
2438
2438
|
aria-expanded="${this.expanded}"
|
|
2439
2439
|
.ariaLabel=${`Toggle navigation`}
|
|
2440
|
-
></sgds-icon-button>`}};I([N()],z.prototype,`expanded`,void 0),I([N()],z.prototype,`expanding`,void 0),I([P(`nav`)],z.prototype,`nav`,void 0),I([P(`.navbar`)],z.prototype,`navbar`,void 0),I([P(`.navbar-toggler`)],z.prototype,`header`,void 0),I([P(`.navbar-body`)],z.prototype,`body`,void 0),I([P(`.navbar-nav-scroll`)],z.prototype,`navScroll`,void 0),I([P(`.navbar-end`)],z.prototype,`navbarEnd`,void 0),I([M({type:String})],z.prototype,`brandHref`,void 0),I([M({type:String})],z.prototype,`expand`,void 0),I([N()],z.prototype,`breakpointReached`,void 0),I([N()],z.prototype,`_hasProfileComponent`,void 0),I([xt(`expanding`,{waitUntilFirstUpdate:!0})],z.prototype,`handleOpenChange`,null),vt(`nav.show`,{keyframes:[{height:`0`,opacity:`0`},{height:`auto`,opacity:`1`}],options:{duration:200,easing:`ease-in-out`}}),vt(`nav.hide`,{keyframes:[{height:`auto`,opacity:`1`},{height:`0`,opacity:`0`}],options:{duration:200,easing:`ease-in-out`}});var rm=class{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{if(e.nodeType===e.TEXT_NODE&&e.textContent?.trim()!==``)return!0;if(e.nodeType===e.ELEMENT_NODE){let t=e;if(t.tagName.toLowerCase()===`sl-visually-hidden`)return!1;if(!t.hasAttribute(`slot`))return!0}return!1})}hasNamedSlot(e){return this.host.querySelector(`:scope > [slot="${e}"]`)!==null}test(e){return e===`[default]`?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){this.host.shadowRoot?.addEventListener(`slotchange`,this.handleSlotChange)}hostDisconnected(){this.host.shadowRoot?.removeEventListener(`slotchange`,this.handleSlotChange)}handleSlotChange(e){let t=e.target;(this.slotNames.includes(`[default]`)&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}};let im=a(`appnav-context`),am=a(`appnav-expanded-context`);j();var om=v`: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
|
|
2440
|
+
></sgds-icon-button>`}};I([N()],z.prototype,`expanded`,void 0),I([N()],z.prototype,`expanding`,void 0),I([P(`nav`)],z.prototype,`nav`,void 0),I([P(`.navbar`)],z.prototype,`navbar`,void 0),I([P(`.navbar-toggler`)],z.prototype,`header`,void 0),I([P(`.navbar-body`)],z.prototype,`body`,void 0),I([P(`.navbar-nav-scroll`)],z.prototype,`navScroll`,void 0),I([P(`.navbar-end`)],z.prototype,`navbarEnd`,void 0),I([M({type:String})],z.prototype,`brandHref`,void 0),I([M({type:String})],z.prototype,`expand`,void 0),I([N()],z.prototype,`breakpointReached`,void 0),I([N()],z.prototype,`_hasProfileComponent`,void 0),I([xt(`expanding`,{waitUntilFirstUpdate:!0})],z.prototype,`handleOpenChange`,null),vt(`nav.show`,{keyframes:[{height:`0`,opacity:`0`},{height:`auto`,opacity:`1`}],options:{duration:200,easing:`ease-in-out`}}),vt(`nav.hide`,{keyframes:[{height:`auto`,opacity:`1`},{height:`0`,opacity:`0`}],options:{duration:200,easing:`ease-in-out`}});var rm=class{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{if(e.nodeType===e.TEXT_NODE&&e.textContent?.trim()!==``)return!0;if(e.nodeType===e.ELEMENT_NODE){let t=e;if(t.tagName.toLowerCase()===`sl-visually-hidden`)return!1;if(!t.hasAttribute(`slot`))return!0}return!1})}hasNamedSlot(e){return this.host.querySelector(`:scope > [slot="${e}"]`)!==null}test(e){return e===`[default]`?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){this.host.shadowRoot?.addEventListener(`slotchange`,this.handleSlotChange)}hostDisconnected(){this.host.shadowRoot?.removeEventListener(`slotchange`,this.handleSlotChange)}handleSlotChange(e){let t=e.target;(this.slotNames.includes(`[default]`)&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}};let im=a(`appnav-context`),am=a(`appnav-expanded-context`);j();var om=v`: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)}`;j();var B=class extends z{constructor(...e){super(...e),this._breakpointReached=!1,this._expanded=!1,this.tone=`brand`,this.hasStartSlot=!1,this.hasSlotController=new rm(this,`start`),this._hasDefaultSlotItems=!1,this._hasProfileSlotItems=!1,this._defaultSlotItems=[]}static{this.styles=[...z.styles,om]}updated(){this.hasStartSlot||=this.hasSlotController.test(`start`),this._expanded=this.expanded}_onBreakpointReached(e){this._breakpointReached=e}_isBreakpointReached(){return this._breakpointReached}_handleTogglerKeydown(e){e.key===`Tab`&&!e.shiftKey&&this.expanded&&(e.preventDefault(),(this.shadowRoot?.querySelector(`.appnav-menu-item`))?.focus())}_handleMenuItemKeydown(e,t){e.key===`Enter`||e.key===` `?(e.preventDefault(),this._handleMobileItemClick(this._defaultSlotItems[t])):e.key===`Tab`&&e.shiftKey&&t===0&&(e.preventDefault(),this.header?.focus())}_handleDefaultSlotChange(e){let t=e.target.assignedElements({flatten:!0});this._hasDefaultSlotItems=t.length>0,this._defaultSlotItems=t.filter(e=>e.tagName!==void 0).map(e=>{let t=e.getAttribute(`ariaLabel`)||e.getAttribute(`aria-label`)||e.textContent?.trim()||``;return t||console.warn(`[sgds-appnav] Slotted element <${e.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.`,e),{label:t,element:e}}),t.forEach(e=>{e.setAttribute(`expand`,this.expand)})}_handleMobileItemClick(e){e.element.click(),this.hide()}_renderAppnavToggler(){return E`<sgds-icon-button
|
|
2441
2441
|
name="three-dots-vertical"
|
|
2442
2442
|
variant="ghost"
|
|
2443
2443
|
size="sm"
|
|
@@ -2454,7 +2454,9 @@ let St=Symbol.for(``),Ct=e=>{if(e?.r===St)return e?._$litStatic$},wt=(e,...t)=>(
|
|
|
2454
2454
|
<slot name="start" class=${st({"slot-empty":!this.hasStartSlot})}></slot>
|
|
2455
2455
|
${this.brandHref?E`<a class="navbar-brand" href=${Ot(this.brandHref)??``}>
|
|
2456
2456
|
<slot name="brand"></slot>
|
|
2457
|
-
</a>`:E`<
|
|
2457
|
+
</a>`:E`<div class="navbar-brand">
|
|
2458
|
+
<slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>
|
|
2459
|
+
</div>`}
|
|
2458
2460
|
<div class="navbar-body navbar-collapse" id=${this.collapseId}>
|
|
2459
2461
|
<div class="navbar-nav navbar-nav-scroll">
|
|
2460
2462
|
<slot
|