npm - @govtechsg/sgds-web-component - Versions diffs - 3.30.1-rc.1 → 3.30.1-rc.10 - Mend

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

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.

Files changed (233) hide show

package/components/Subnav/sgds-subnav-item.js CHANGED Viewed

@@ -45,7 +45,7 @@ var SgdsSubnavItem = class extends SgdsElement {
 		}
 	}
 	render() {
-		return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+		return html`<div class="subnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 __decorate([property({

package/components/Subnav/sgds-subnav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-subnav-item.js","names":["subnavItemStyle"],"sources":["../../../src/components/Subnav/sgds-subnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport subnavItemStyle from \"./subnav-item.css\";\n\n/*\n @slot default - slot for SgdsSubnavItem element.\n \n /\nexport class SgdsSubnavItem extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavItemStyle];\n\n /* when true, sets the active stylings of the navigation item /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /* Disables the SgdsSubnavItem */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @watch(\"disabled\")\n _handleDisabled() {\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n private _handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n const assignedElements = slot.assignedElements({ flatten: true });\n const anchorItems = assignedElements.filter(\n item => item.tagName.toLowerCase() === \"a\" \|\| item.tagName.toLowerCase() === \"sgds-link\"\n );\n\n if (anchorItems.length > 1) {\n console.error(\"More than one anchor tag is added to sgds-subnav-item\");\n return;\n }\n\n if (anchorItems.length === 0) {\n const nodes = slot.assignedNodes({ flatten: true });\n nodes.forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n const hyperlink = document.createElement(\"a\");\n hyperlink.textContent = node.textContent;\n node.parentNode.replaceChild(hyperlink, node);\n }\n });\n }\n\n if (anchorItems.length === 1) {\n const anchor = anchorItems[0] as HTMLAnchorElement;\n\n if (this.active) {\n anchor.setAttribute(\"aria-current\", \"true\");\n }\n\n if (this.disabled) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n }\n }\n }\n\n render() {\n return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n }\n}\n\nexport default SgdsSubnavItem;\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,iBAAb,cAAoC,YAAY;;;EAKrC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;CAUvD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,uDAAuD;GACrE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;GACtC;EACF;CACF;CAEA,SAAS;EACP,OAAO,IAAI,~~qBAAqB~~,KAAK,kBAAkB;~~CACzD~~;AACF;AApDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,eAAA,WAAA,mBAAA,IAAA"}
1	+ {"version":3,"file":"sgds-subnav-item.js","names":["subnavItemStyle"],"sources":["../../../src/components/Subnav/sgds-subnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport subnavItemStyle from \"./subnav-item.css\";\n\n/*\n @slot default - slot for SgdsSubnavItem element.\n \n /\nexport class SgdsSubnavItem extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavItemStyle];\n\n /* when true, sets the active stylings of the navigation item /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /* Disables the SgdsSubnavItem */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @watch(\"disabled\")\n _handleDisabled() {\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n private _handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n const assignedElements = slot.assignedElements({ flatten: true });\n const anchorItems = assignedElements.filter(\n item => item.tagName.toLowerCase() === \"a\" \|\| item.tagName.toLowerCase() === \"sgds-link\"\n );\n\n if (anchorItems.length > 1) {\n console.error(\"More than one anchor tag is added to sgds-subnav-item\");\n return;\n }\n\n if (anchorItems.length === 0) {\n const nodes = slot.assignedNodes({ flatten: true });\n nodes.forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n const hyperlink = document.createElement(\"a\");\n hyperlink.textContent = node.textContent;\n node.parentNode.replaceChild(hyperlink, node);\n }\n });\n }\n\n if (anchorItems.length === 1) {\n const anchor = anchorItems[0] as HTMLAnchorElement;\n\n if (this.active) {\n anchor.setAttribute(\"aria-current\", \"true\");\n }\n\n if (this.disabled) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n }\n }\n }\n\n render() {\n return html`<div class=\"subnav-item\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n }\n}\n\nexport default SgdsSubnavItem;\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,iBAAb,cAAoC,YAAY;;;EAKrC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;CAUvD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,uDAAuD;GACrE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;GACtC;EACF;CACF;CAEA,SAAS;EACP,OAAO,IAAI,8CAA8C,KAAK,kBAAkB;CAClF;AACF;AApDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,eAAA,WAAA,mBAAA,IAAA"}

package/components/Subnav/sgds-subnav.js CHANGED Viewed

@@ -169,7 +169,7 @@ var SgdsSubnav = class extends SgdsElement {
 		})}
         >
           <div class="header-container">
-            <slot name="header"></slot>
+            <div class="header-content"><slot name="header"></slot></div>
             <sgds-icon
               class="subnav-toggler"
               name="chevron-down"

package/components/Subnav/sgds-subnav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-subnav.js","names":["subnavStyle","gridStyle"],"sources":["../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\nconst VALID_KEYS = [\"Enter\", \" \"];\n\n/*\n @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.\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 - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n \n /\n\nexport class SgdsSubnav extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n /** @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* Used only for SSR to indicate the presence of the `actions` slot. /\n @property({ type: Boolean }) hasActionsSlot = false;\n\n @query(\"nav\")\n private nav: HTMLElement;\n\n @query(\".subnav-nav\")\n private mobileNav: HTMLElement;\n\n @query(\".header-container\")\n private headerContainer: HTMLElement;\n\n @query(\".subnav-toggler\")\n private toggler: HTMLElement;\n\n @query(\".subnav-nav-group\")\n private navGroup: HTMLElement;\n\n @query(\".subnav-actions\")\n private mobileActions: HTMLElement;\n\n @state()\n private isCollapsed = false;\n\n @state()\n private isMenuOpen = false;\n\n private readonly hasSlotController = new HasSlotController(this, \"actions\");\n\n connectedCallback() {\n super.connectedCallback();\n\n // this._handleResize();\n window.addEventListener(\"resize\", this._handleResize);\n window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n window.removeEventListener(\"resize\", this._handleResize);\n window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n this._handleResize();\n }\n\n updated() {\n if (!this.hasActionsSlot) this.hasActionsSlot = this.hasSlotController.test(\"actions\");\n }\n\n private _handleResize = async () => {\n this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n await this.updateComplete;\n\n if (!this.isCollapsed) {\n this.isMenuOpen = false;\n }\n\n this._updateMobileLayout();\n };\n\n private _updateMobileLayout = () => {\n if (!this.nav \|\| !this.headerContainer \|\| !this.mobileActions \|\| !this.mobileNav) return;\n\n if (this.isCollapsed) {\n const { top: subnavTop } = this.nav.getBoundingClientRect();\n const headerHeight = this.headerContainer.clientHeight;\n const actionsButtonHeight = this.mobileActions.clientHeight;\n const offset =\n window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT\n ? subnavTop + headerHeight\n : subnavTop + headerHeight + actionsButtonHeight;\n\n this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n this.style.minHeight = `${this.nav.clientHeight}px`;\n this.nav.style.position = \"absolute\";\n } else {\n this.mobileNav.style.maxHeight = \"none\";\n this.style.minHeight = \"auto\";\n this.nav.style.position = \"relative\";\n }\n };\n\n private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n this.hide();\n }\n }\n\n private _toggleMenu = () => {\n if (this.isMenuOpen) {\n this.hide();\n } else {\n this._lockBodyScroll();\n this.show();\n }\n\n this.toggler?.focus();\n };\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n\n event.preventDefault();\n this._toggleMenu();\n }\n\n /* Shows the menu. For when subnav is in the collapsed form /\n public async show() {\n if (this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the menu. For when subnav is in the collapsed form /\n public async hide() {\n if (!this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = false;\n this._unlockBodyScroll();\n\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private _lockBodyScroll() {\n if (typeof window === \"undefined\") return;\n\n const scrollY = window.scrollY;\n document.body.style.position = \"fixed\";\n document.body.style.top = `-${scrollY}px`;\n document.body.style.width = \"100%\";\n }\n\n private _unlockBodyScroll() {\n if (typeof window === \"undefined\") return;\n\n const scrollY = parseInt(document.body.style.top \|\| \"0\") -1;\n document.body.style.position = \"\";\n document.body.style.top = \"\";\n document.body.style.width = \"\";\n window.scrollTo(0, scrollY);\n }\n\n private async _animateToShow() {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.isMenuOpen = false;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"flex\";\n }\n\n const { keyframes, options } = getAnimation(this, \"subnav.show\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n\n this.emit(\"sgds-after-show\");\n }\n\n private async _animateToHide() {\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.isMenuOpen = true;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n\n const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"none\";\n }\n\n this.emit(\"sgds-after-hide\");\n }\n\n @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.isMenuOpen) {\n // Show\n this._animateToShow();\n } else {\n // Hide\n this._animateToHide();\n }\n }\n\n @watch(\"isCollapsed\", { waitUntilFirstUpdate: true })\n async handleCollapsedChange() {\n await this.updateComplete;\n this.mobileNav.style.display = this.isCollapsed ? \"none\" : \"flex\";\n }\n\n render() {\n return html`\n <nav aria-label=\"Sub navigation\">\n <div\n class=${classMap({\n \"sgds-container\": true,\n subnav: true,\n collapsed: !this.isMenuOpen\n })}\n >\n <div class=\"header-container\">\n <slot name=\"header\"></slot>\n <sgds-icon\n class=\"subnav-toggler\"\n name=\"chevron-down\"\n size=\"lg\"\n role=\"button\"\n tabindex=\"0\"\n @click=${this._toggleMenu}\n @keydown=${this._onKeyboardToggle}\n aria-label=\"Toggle sub navigation\"\n aria-expanded=${this.isMenuOpen}\n ></sgds-icon>\n </div>\n <div class=\"subnav-nav-group\">\n <div class=\"subnav-nav\">\n <slot></slot>\n </div>\n <div\n class=\"${classMap({\n \"subnav-actions\": true,\n \"no-actions\": !this.hasActionsSlot\n })}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-subnav.js","names":["subnavStyle","gridStyle"],"sources":["../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\nconst VALID_KEYS = [\"Enter\", \" \"];\n\n/*\n @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.\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 - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n \n /\n\nexport class SgdsSubnav extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n /** @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* Used only for SSR to indicate the presence of the `actions` slot. /\n @property({ type: Boolean }) hasActionsSlot = false;\n\n @query(\"nav\")\n private nav: HTMLElement;\n\n @query(\".subnav-nav\")\n private mobileNav: HTMLElement;\n\n @query(\".header-container\")\n private headerContainer: HTMLElement;\n\n @query(\".subnav-toggler\")\n private toggler: HTMLElement;\n\n @query(\".subnav-nav-group\")\n private navGroup: HTMLElement;\n\n @query(\".subnav-actions\")\n private mobileActions: HTMLElement;\n\n @state()\n private isCollapsed = false;\n\n @state()\n private isMenuOpen = false;\n\n private readonly hasSlotController = new HasSlotController(this, \"actions\");\n\n connectedCallback() {\n super.connectedCallback();\n\n // this._handleResize();\n window.addEventListener(\"resize\", this._handleResize);\n window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n window.removeEventListener(\"resize\", this._handleResize);\n window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n this._handleResize();\n }\n\n updated() {\n if (!this.hasActionsSlot) this.hasActionsSlot = this.hasSlotController.test(\"actions\");\n }\n\n private _handleResize = async () => {\n this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n await this.updateComplete;\n\n if (!this.isCollapsed) {\n this.isMenuOpen = false;\n }\n\n this._updateMobileLayout();\n };\n\n private _updateMobileLayout = () => {\n if (!this.nav \|\| !this.headerContainer \|\| !this.mobileActions \|\| !this.mobileNav) return;\n\n if (this.isCollapsed) {\n const { top: subnavTop } = this.nav.getBoundingClientRect();\n const headerHeight = this.headerContainer.clientHeight;\n const actionsButtonHeight = this.mobileActions.clientHeight;\n const offset =\n window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT\n ? subnavTop + headerHeight\n : subnavTop + headerHeight + actionsButtonHeight;\n\n this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n this.style.minHeight = `${this.nav.clientHeight}px`;\n this.nav.style.position = \"absolute\";\n } else {\n this.mobileNav.style.maxHeight = \"none\";\n this.style.minHeight = \"auto\";\n this.nav.style.position = \"relative\";\n }\n };\n\n private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n this.hide();\n }\n }\n\n private _toggleMenu = () => {\n if (this.isMenuOpen) {\n this.hide();\n } else {\n this._lockBodyScroll();\n this.show();\n }\n\n this.toggler?.focus();\n };\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n\n event.preventDefault();\n this._toggleMenu();\n }\n\n /* Shows the menu. For when subnav is in the collapsed form /\n public async show() {\n if (this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the menu. For when subnav is in the collapsed form /\n public async hide() {\n if (!this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = false;\n this._unlockBodyScroll();\n\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private _lockBodyScroll() {\n if (typeof window === \"undefined\") return;\n\n const scrollY = window.scrollY;\n document.body.style.position = \"fixed\";\n document.body.style.top = `-${scrollY}px`;\n document.body.style.width = \"100%\";\n }\n\n private _unlockBodyScroll() {\n if (typeof window === \"undefined\") return;\n\n const scrollY = parseInt(document.body.style.top \|\| \"0\") -1;\n document.body.style.position = \"\";\n document.body.style.top = \"\";\n document.body.style.width = \"\";\n window.scrollTo(0, scrollY);\n }\n\n private async _animateToShow() {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.isMenuOpen = false;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"flex\";\n }\n\n const { keyframes, options } = getAnimation(this, \"subnav.show\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n\n this.emit(\"sgds-after-show\");\n }\n\n private async _animateToHide() {\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.isMenuOpen = true;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n\n const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"none\";\n }\n\n this.emit(\"sgds-after-hide\");\n }\n\n @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.isMenuOpen) {\n // Show\n this._animateToShow();\n } else {\n // Hide\n this._animateToHide();\n }\n }\n\n @watch(\"isCollapsed\", { waitUntilFirstUpdate: true })\n async handleCollapsedChange() {\n await this.updateComplete;\n this.mobileNav.style.display = this.isCollapsed ? \"none\" : \"flex\";\n }\n\n render() {\n return html`\n <nav aria-label=\"Sub navigation\">\n <div\n class=${classMap({\n \"sgds-container\": true,\n subnav: true,\n collapsed: !this.isMenuOpen\n })}\n >\n <div class=\"header-container\">\n <div class=\"header-content\"><slot name=\"header\"></slot></div>\n <sgds-icon\n class=\"subnav-toggler\"\n name=\"chevron-down\"\n size=\"lg\"\n role=\"button\"\n tabindex=\"0\"\n @click=${this._toggleMenu}\n @keydown=${this._onKeyboardToggle}\n aria-label=\"Toggle sub navigation\"\n aria-expanded=${this.isMenuOpen}\n ></sgds-icon>\n </div>\n <div class=\"subnav-nav-group\">\n <div class=\"subnav-nav\">\n <slot></slot>\n </div>\n <div\n class=\"${classMap({\n \"subnav-actions\": true,\n \"no-actions\": !this.hasActionsSlot\n })}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"mappings":"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"}

package/components/Subnav/subnav-item.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from "lit";
 //#region src/components/Subnav/subnav-item.css
-var css_248z = css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:inline-block;font-size:var(--sgds-font-size-label-sm)!important;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap;width:100%}::slotted(*):after{height:var(--sgds-icon-size-md)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-md)!important}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}::slotted(*){border-bottom:var(--sgds-border-width-2) solid transparent;padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
+var css_248z = css`.subnav-item{box-sizing:border-box;display:inline-block;font-size:var(--sgds-font-size-label-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);white-space:nowrap;width:100%}:host(:not([disabled])[active]:not([active=false])) .subnav-item{background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}:host([disabled]) .subnav-item{opacity:var(--sgds-opacity-40)}@media screen and (min-width:1024px){.subnav-item{border-bottom:var(--sgds-border-width-2) solid transparent;padding:var(--sgds-padding-lg) var(--sgds-padding-none)}:host(:not([disabled])[active]:not([active=false])) .subnav-item{background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;text-decoration:none!important}::slotted(*):after{height:var(--sgds-icon-size-md)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-md)!important}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}}`;
 //#endregion
 export { css_248z as default };

package/components/Subnav/subnav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"subnav-item.js","names":[],"sources":["../../../src/components/Subnav/subnav-item.css"],"sourcesContent":[":host(:not([disabled])[active]:not([active=\"false\"])) ~~::slotted()~~ {\n border-bottom: none;\n background-color: var(--sgds-bg-translucent-subtle);\n}\n\n~~::slotted~~() {\n ~~--sgds-link-color-default~~: var(--sgds-~~color~~-~~default~~);\n ~~display:~~ ~~inline~~-~~block;\n~~ width: ~~100%;\~~n ~~text~~-~~decoration~~: none ~~!important~~;\n ~~font~~-~~size~~: var(--sgds-~~font~~-~~size~~-~~label-sm~~) ~~!important~~;\n ~~color~~: var(--sgds-~~link~~-~~color~~-~~default,~~ var(--sgds-color-default));\n ~~padding~~: ~~var~~(--sgds-~~padding~~-~~sm)~~ var(--sgds-~~padding~~-lg);\n ~~cursor~~: ~~pointer~~;\n ~~box-sizing~~: ~~border~~-~~box~~;\n ~~white-space~~: ~~nowrap~~;\n}\n\n::slotted()::after {\n width: var(--sgds-icon-size-md) !important;\n height: var(--sgds-icon-size-md) !important;\n -webkit-mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n}\n\n:host(:not([disabled])[active]:not([active=\"false\"])) ::slotted() {\n --sgds-link-color-default: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n}\n\n:host([disabled]) ::slotted(a:hover) {\n --sgds-link-color-emphasis: var(--sgds-color-default);\n color: var(--sgds-link-color-emphasis, var(--sgds-color-default));\n}\n\n:host(:not([disabled])) ::slotted(a:hover) {\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n}\n\n::slotted(a:focus-visible) {\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted() {\n ~~opacity: var(--sgds-opacity-40);\n~~ cursor: not-allowed;\n}\n\n@media screen and (min-width: 1024px) {\n :host(:not([disabled])[active]:not([active=\"false\"])) ::slotted() {\n --sgds-link-color-default: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n ~~border-bottom: var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);\n background-color: inherit;\n~~ }\n~~\n ::slotted(*) {\n padding: var(--sgds-padding-lg) var(--sgds-padding-none);\n border-bottom: var(--sgds-border-width-2) solid transparent;\n~~ }\n~~}\n~~"],"mappings":""}
1	+ {"version":3,"file":"subnav-item.js","names":[],"sources":["../../../src/components/Subnav/subnav-item.css"],"sourcesContent":["/* ===== .subnav-item (inner shadow DOM — protected from external CSS) ===== /\n\n.subnav-item {\n display: inline-block;\n width: 100%;\n font-size: var(--sgds-font-size-label-sm);\n padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n box-sizing: border-box;\n white-space: nowrap;\n}\n\n:host(:not([disabled])[active]:not([active=\"false\"])) .subnav-item {\n border-bottom: none;\n background-color: var(--sgds-bg-translucent-subtle);\n}\n\n:host([disabled]) .subnav-item {\n opacity: var(--sgds-opacity-40);\n}\n\n@media screen and (min-width: 1024px) {\n .subnav-item {\n padding: var(--sgds-padding-lg) var(--sgds-padding-none);\n border-bottom: var(--sgds-border-width-2) solid transparent;\n }\n\n :host(:not([disabled])[active]:not([active=\"false\"])) .subnav-item {\n border-bottom: var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);\n background-color: inherit;\n }\n}\n\n/ ===== ::slotted (light DOM — anchor-specific styles) ===== /\n\n::slotted() {\n --sgds-link-color-default: var(--sgds-color-default);\n text-decoration: none !important;\n color: var(--sgds-link-color-default, var(--sgds-color-default));\n cursor: pointer;\n}\n\n::slotted()::after {\n width: var(--sgds-icon-size-md) !important;\n height: var(--sgds-icon-size-md) !important;\n -webkit-mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n}\n\n:host(:not([disabled])[active]:not([active=\"false\"])) ::slotted() {\n --sgds-link-color-default: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n}\n\n:host([disabled]) ::slotted(a:hover) {\n --sgds-link-color-emphasis: var(--sgds-color-default);\n color: var(--sgds-link-color-emphasis, var(--sgds-color-default));\n}\n\n:host(:not([disabled])) ::slotted(a:hover) {\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n}\n\n::slotted(a:focus-visible) {\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted() {\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 1024px) {\n :host(:not([disabled])[active]:not([active=\"false\"])) ::slotted() {\n --sgds-link-color-default: var(--sgds-primary-color-default);\n color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n }\n}\n"],"mappings":""}

package/components/Subnav/subnav.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from "lit";
 //#region src/components/Subnav/subnav.css
-var css_248z = css`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = css`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}.header-content{flex:1 1 auto}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}.header-content{padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 //#endregion
 export { css_248z as default };

package/components/Subnav/subnav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"subnav.js","names":[],"sources":["../../../src/components/Subnav/subnav.css"],"sourcesContent":[":host {\n display: block;\n position: relative;\n z-index: var(--sgds-z-index-sticky);\n}\n\nnav {\n background-color: var(--sgds-surface-raised);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n width: 100%;\n position: relative;\n}\n\n.subnav {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.header-container {\n display: flex;\n align-items: flex-start;\n gap: var(--sgds-gap-md);\n width: 100%;\n padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n}\n\~~nslot[name=\"~~header~~\"]::slotted()~~ {\n ~~--sgds-margin-xs: var(--sgds-margin-none);\n~~ flex: 1 1 auto;\n ~~margin-bottom: var(--sgds-margin-xs, --sgds-margin-none);\n padding-top: var(--sgds-padding-none);\n~~}\n\n.subnav-toggler {\n cursor: pointer;\n transition: transform 0.2s ease-in-out;\n}\n\n.subnav-toggler:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.subnav:not(.collapsed) .subnav-toggler {\n transform: rotate(-180deg);\n}\n\n.subnav-nav-group {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n}\n\n.subnav-nav {\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n transition: transform 0.2s ease-in-out;\n overflow-y: auto;\n}\n\n.subnav-nav ::slotted() {\n width: 100%;\n}\n\n.subnav-actions {\n display: flex;\n flex-direction: column;\n gap: var(--sgds-gap-md);\n padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n position: sticky;\n bottom: 0;\n width: 100%;\n}\n\n.no-actions {\n display: none;\n}\n\nslot[name=\"actions\"]::slotted() {\n width: 100%;\n}\n\n@media screen and (max-width: 1023px) {\n .subnav.sgds-container {\n max-width: inherit;\n }\n}\n\n@media screen and (min-width: 512px) {\n .subnav-actions {\n flex-direction: row;\n }\n}\n\n@media screen and (min-width: 768px) {\n nav {\n border-bottom: var(--sgds-border-width-0);\n }\n\n .subnav {\n flex-direction: row;\n }\n\n .subnav.collapsed {\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n }\n\n .header-container {\n padding: var(--sgds-padding-lg) var(--sgds-padding-2-xl);\n }\n\n .subnav-nav {\n position: absolute;\n top: 100%;\n left: 0px;\n background-color: var(--sgds-surface-raised);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n }\n\n .subnav-actions {\n flex-direction: row;\n align-items: center;\n padding: var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);\n position: inherit;\n }\n}\n\n@media screen and (min-width: 1024px) {\n nav {\n position: inherit;\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n }\n\n .subnav {\n flex-wrap: wrap;\n gap: var(--sgds-gap-xl);\n row-gap: var(--sgds-gap-none);\n }\n\n .subnav.collapsed {\n border-bottom: var(--sgds-border-width-0);\n }\n\n .header-container {\n padding: var(--sgds-padding-none);\n width: auto;\n flex: 1;\n }\n\n ~~slot[name=\"~~header~~\"]::slotted()~~ {\n padding-top: var(--sgds-padding-lg);\n white-space: nowrap;\n }\n\n .subnav-nav-group {\n flex-wrap: wrap;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--sgds-gap-xl);\n row-gap: var(--sgds-gap-none);\n flex: inherit;\n width: auto;\n }\n\n .subnav-nav {\n display: flex;\n flex-wrap: wrap;\n gap: var(--sgds-gap-lg);\n row-gap: 0;\n align-items: center;\n flex-direction: row;\n overflow-y: inherit;\n transition: none;\n position: inherit;\n background-color: inherit;\n border-bottom: var(--sgds-border-width-0);\n width: auto;\n }\n\n .subnav-nav ::slotted() {\n width: inherit;\n }\n\n .subnav-toggler {\n display: none;\n }\n\n .subnav-actions {\n padding: var(--sgds-padding-sm) var(--sgds-padding-none);\n width: auto;\n }\n\n slot[name=\"actions\"]::slotted() {\n width: inherit;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"subnav.js","names":[],"sources":["../../../src/components/Subnav/subnav.css"],"sourcesContent":[":host {\n display: block;\n position: relative;\n z-index: var(--sgds-z-index-sticky);\n}\n\nnav {\n background-color: var(--sgds-surface-raised);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n width: 100%;\n position: relative;\n}\n\n.subnav {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.header-container {\n display: flex;\n align-items: flex-start;\n gap: var(--sgds-gap-md);\n width: 100%;\n padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n}\n\n.header-content {\n flex: 1 1 auto;\n}\n\n.subnav-toggler {\n cursor: pointer;\n transition: transform 0.2s ease-in-out;\n}\n\n.subnav-toggler:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.subnav:not(.collapsed) .subnav-toggler {\n transform: rotate(-180deg);\n}\n\n.subnav-nav-group {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n}\n\n.subnav-nav {\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n transition: transform 0.2s ease-in-out;\n overflow-y: auto;\n}\n\n.subnav-nav ::slotted() {\n width: 100%;\n}\n\n.subnav-actions {\n display: flex;\n flex-direction: column;\n gap: var(--sgds-gap-md);\n padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n position: sticky;\n bottom: 0;\n width: 100%;\n}\n\n.no-actions {\n display: none;\n}\n\nslot[name=\"actions\"]::slotted() {\n width: 100%;\n}\n\n@media screen and (max-width: 1023px) {\n .subnav.sgds-container {\n max-width: inherit;\n }\n}\n\n@media screen and (min-width: 512px) {\n .subnav-actions {\n flex-direction: row;\n }\n}\n\n@media screen and (min-width: 768px) {\n nav {\n border-bottom: var(--sgds-border-width-0);\n }\n\n .subnav {\n flex-direction: row;\n }\n\n .subnav.collapsed {\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n }\n\n .header-container {\n padding: var(--sgds-padding-lg) var(--sgds-padding-2-xl);\n }\n\n .subnav-nav {\n position: absolute;\n top: 100%;\n left: 0px;\n background-color: var(--sgds-surface-raised);\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n }\n\n .subnav-actions {\n flex-direction: row;\n align-items: center;\n padding: var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);\n position: inherit;\n }\n}\n\n@media screen and (min-width: 1024px) {\n nav {\n position: inherit;\n border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n }\n\n .subnav {\n flex-wrap: wrap;\n gap: var(--sgds-gap-xl);\n row-gap: var(--sgds-gap-none);\n }\n\n .subnav.collapsed {\n border-bottom: var(--sgds-border-width-0);\n }\n\n .header-container {\n padding: var(--sgds-padding-none);\n width: auto;\n flex: 1;\n }\n\n .header-content {\n padding-top: var(--sgds-padding-lg);\n white-space: nowrap;\n }\n\n .subnav-nav-group {\n flex-wrap: wrap;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--sgds-gap-xl);\n row-gap: var(--sgds-gap-none);\n flex: inherit;\n width: auto;\n }\n\n .subnav-nav {\n display: flex;\n flex-wrap: wrap;\n gap: var(--sgds-gap-lg);\n row-gap: 0;\n align-items: center;\n flex-direction: row;\n overflow-y: inherit;\n transition: none;\n position: inherit;\n background-color: inherit;\n border-bottom: var(--sgds-border-width-0);\n width: auto;\n }\n\n .subnav-nav ::slotted() {\n width: inherit;\n }\n\n .subnav-toggler {\n display: none;\n }\n\n .subnav-actions {\n padding: var(--sgds-padding-sm) var(--sgds-padding-none);\n width: auto;\n }\n\n slot[name=\"actions\"]::slotted() {\n width: inherit;\n }\n}\n"],"mappings":""}

package/components/Table/index.umd.min.js CHANGED Viewed

@@ -134,5 +134,5 @@ super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTa
       class=${J({"table-head":!0,"header-background":this._headerBackground})}
     >
       <slot></slot>
-    </div>`}};Y([Fe({context:Le,subscribe:!0}),q()],$.prototype,`_headerBackground`,void 0),Y([ze(`_headerBackground`)],$.prototype,`_handleHeaderBackground`,null);var Be=o`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){border-bottom:0}`,Ve=class extends X{constructor(...e){super(...e),this.tableBorder=!1}static{this.styles=[...X.styles,Be]}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`row`)}render(){return P`<slot class="table-row"></slot>`}};Y([Fe({context:Ie,subscribe:!0}),K({type:Boolean,reflect:!0})],Ve.prototype,`tableBorder`,void 0);var He=o`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`,Ue=class extends X{static{this.styles=[...X.styles,He]}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`cell`)}render(){return P`<div class="table-cell"><slot></slot></div>`}};Q(`sgds-table`,Z),Q(`sgds-table-head`,$),Q(`sgds-table-row`,Ve),Q(`sgds-table-cell`,Ue)});
+    </div>`}};Y([Fe({context:Le,subscribe:!0}),q()],$.prototype,`_headerBackground`,void 0),Y([ze(`_headerBackground`)],$.prototype,`_handleHeaderBackground`,null);var Be=o`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){--table-cell-border-bottom:0}`,Ve=class extends X{constructor(...e){super(...e),this.tableBorder=!1}static{this.styles=[...X.styles,Be]}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`row`)}render(){return P`<slot class="table-row"></slot>`}};Y([Fe({context:Ie,subscribe:!0}),K({type:Boolean,reflect:!0})],Ve.prototype,`tableBorder`,void 0);var He=o`:host{display:table-cell}.table-cell{align-items:center;border-bottom:var(--table-cell-border-bottom,var(--sgds-border-width-1) solid var(--sgds-border-color-muted));display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}`,Ue=class extends X{static{this.styles=[...X.styles,He]}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`cell`)}render(){return P`<div class="table-cell"><slot></slot></div>`}};Q(`sgds-table`,Z),Q(`sgds-table-head`,$),Q(`sgds-table-row`,Ve),Q(`sgds-table-cell`,Ue)});
 //# sourceMappingURL=index.umd.min.js.map