npm - @govtechsg/sgds-web-component - Versions diffs - 3.30.1-rc.7 → 3.30.1-rc.9 - Mend

@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.

Files changed (124) hide show

package/components/Sidenav/sgds-sidenav-item.js CHANGED Viewed

@@ -178,7 +178,9 @@ var SgdsSidenavItem = class extends SgdsElement {
         </div>
       </div>
     `;
-		const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot> `;
+		const noMenuTemplate = html`<div class="no-menu-wrapper">
+      <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot>
+    </div>`;
 		return html`
       <div class="sidenav-item" aria-haspopup="${!this.isLink}">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>
     `;

package/components/Sidenav/sgds-sidenav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/*\n @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n \n @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n \n @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n /\n\nexport class SgdsSidenavItem extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavItemStyle];\n /* @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n @query(\".sidenav-body\") body: HTMLElement;\n /* @internal /\n @query(\".sidenav-btn\") header: HTMLElement;\n /\n when true, toggles the sidenav-item to open on first load and set the active stylings.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n Disables the SgdsSidenavItem\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n /\n @property({ type: String })\n ariaLabel: string;\n\n @state() private isLink = false;\n\n /\n @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n /\n\n private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n /\n @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n /\n private _buttonId: string = genId(\"sidenav\", \"button\");\n\n private _levelId = genId(\"sidenav\", \"this\");\n private _firstLevelId = \"first-level-\" + this._levelId;\n private _secondLevelId = \"second-level-\" + this._levelId;\n private _thirdLevelId = \"third-level-\" + this._levelId;\n\n /* @internal /\n private index = \"-1\";\n\n private _onToggle() {\n this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n }\n\n /* Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types /\n public async show() {\n if (this.isLink) return;\n if (this.active) {\n return;\n }\n\n this.active = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the sidenav item. Only applicable to sgds-sidenav-item that are of menu types /\n public async hide() {\n if (this.isLink) return;\n if (!this.active) {\n return;\n }\n this.active = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.classList.add(this._firstLevelId);\n }\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (!this.isLink) {\n this.body.hidden = !this.active;\n this.body.style.height = this.active ? \"auto\" : \"0\";\n }\n\n this._handleOpenMenu();\n }\n\n /\n Sets active to true to open menu ,\n * evaluating based on whether any of the child in any level is active\n * If at least 1 child is active, parent item should be active\n /\n private _handleOpenMenu() {\n if (!this.active) {\n this.active = this._items.some((i: SgdsSidenavItem \| SgdsSidenavLink) => i.active);\n }\n }\n private _handleSummaryClick() {\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n\n this._onToggle();\n this.header.focus();\n }\n private _handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"active\", { waitUntilFirstUpdate: true })\n async _handleOpenChange() {\n if (this.isLink) return;\n if (this.active) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.active = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.active = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-hide\");\n }\n }\n @queryAssignedElements() private _items: SgdsSidenavLink[];\n private _handleSlotChange(e: Event) {\n const anchorItems = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(item => item.tagName.toLowerCase() === \"a\");\n\n if (anchorItems.length > 1) {\n return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n } else if (anchorItems.length === 1) {\n const anchor = anchorItems[0] as HTMLAnchorElement;\n this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n this.active && anchor.setAttribute(\"aria-current\", \"true\");\n return (this.isLink = true);\n }\n\n const sideNavItems = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n /* All sgds-sidenav-item in this slot is a 2nd level item /\n sideNavItems.forEach(i => {\n const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n i.classList.replace(firstLevelId, this._secondLevelId);\n });\n /* All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n }\n\n this._handleOpenMenu();\n }\n\n render() {\n const withMenuTemplate = html`\n <button\n @click=${this._handleSummaryClick}\n @keydown=${this._handleSummaryKeyDown}\n class=\"sidenav-btn ${classMap({\n disabled: this.disabled,\n active: this.active\n })}\"\n aria-expanded=${this.active}\n aria-controls=${this._collapseId}\n aria-current=${this.active}\n aria-label=${ifDefined(this.ariaLabel)}\n id=${this._buttonId}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"caret-icon\">\n <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n </slot>\n </button>\n <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n\n const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n return html`\n <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n `;\n }\n}\nsetDefaultAnimation(\"sidenav.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(\"sidenav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/*\n @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n \n @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n \n @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n /\n\nexport class SgdsSidenavItem extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavItemStyle];\n /* @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n @query(\".sidenav-body\") body: HTMLElement;\n /* @internal /\n @query(\".sidenav-btn\") header: HTMLElement;\n /\n when true, toggles the sidenav-item to open on first load and set the active stylings.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n Disables the SgdsSidenavItem\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n /\n @property({ type: String })\n ariaLabel: string;\n\n @state() private isLink = false;\n\n /\n @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n /\n\n private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n /\n @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n /\n private _buttonId: string = genId(\"sidenav\", \"button\");\n\n private _levelId = genId(\"sidenav\", \"this\");\n private _firstLevelId = \"first-level-\" + this._levelId;\n private _secondLevelId = \"second-level-\" + this._levelId;\n private _thirdLevelId = \"third-level-\" + this._levelId;\n\n /* @internal /\n private index = \"-1\";\n\n private _onToggle() {\n this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n }\n\n /* Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types /\n public async show() {\n if (this.isLink) return;\n if (this.active) {\n return;\n }\n\n this.active = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the sidenav item. Only applicable to sgds-sidenav-item that are of menu types /\n public async hide() {\n if (this.isLink) return;\n if (!this.active) {\n return;\n }\n this.active = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.classList.add(this._firstLevelId);\n }\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (!this.isLink) {\n this.body.hidden = !this.active;\n this.body.style.height = this.active ? \"auto\" : \"0\";\n }\n\n this._handleOpenMenu();\n }\n\n /\n Sets active to true to open menu ,\n * evaluating based on whether any of the child in any level is active\n * If at least 1 child is active, parent item should be active\n /\n private _handleOpenMenu() {\n if (!this.active) {\n this.active = this._items.some((i: SgdsSidenavItem \| SgdsSidenavLink) => i.active);\n }\n }\n private _handleSummaryClick() {\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n\n this._onToggle();\n this.header.focus();\n }\n private _handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n\n if (this.active) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"active\", { waitUntilFirstUpdate: true })\n async _handleOpenChange() {\n if (this.isLink) return;\n if (this.active) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.active = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (sgdsHide.defaultPrevented) {\n this.active = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-hide\");\n }\n }\n @queryAssignedElements() private _items: SgdsSidenavLink[];\n private _handleSlotChange(e: Event) {\n const anchorItems = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(item => item.tagName.toLowerCase() === \"a\");\n\n if (anchorItems.length > 1) {\n return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n } else if (anchorItems.length === 1) {\n const anchor = anchorItems[0] as HTMLAnchorElement;\n this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n this.active && anchor.setAttribute(\"aria-current\", \"true\");\n return (this.isLink = true);\n }\n\n const sideNavItems = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n /* All sgds-sidenav-item in this slot is a 2nd level item /\n sideNavItems.forEach(i => {\n const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n i.classList.replace(firstLevelId, this._secondLevelId);\n });\n /* All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n }\n\n this._handleOpenMenu();\n }\n\n render() {\n const withMenuTemplate = html`\n <button\n @click=${this._handleSummaryClick}\n @keydown=${this._handleSummaryKeyDown}\n class=\"sidenav-btn ${classMap({\n disabled: this.disabled,\n active: this.active\n })}\"\n aria-expanded=${this.active}\n aria-controls=${this._collapseId}\n aria-current=${this.active}\n aria-label=${ifDefined(this.ariaLabel)}\n id=${this._buttonId}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"caret-icon\">\n <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n </slot>\n </button>\n <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n\n const noMenuTemplate = html`<div class=\"no-menu-wrapper\">\n <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot>\n </div>`;\n return html`\n <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n `;\n }\n}\nsetDefaultAnimation(\"sidenav.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(\"sidenav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}

package/components/Sidenav/sgds-sidenav-link.js CHANGED Viewed

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

package/components/Sidenav/sgds-sidenav-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-sidenav-link.js","names":["sidenavLinkStyle"],"sources":["../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/*\n @slot default - slot for label of anchor tag.\n /\nexport class SgdsSidenavLink extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavLinkStyle];\n /* when true, sets the active stylings of .nav-link /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /* Disables the SgdsMainnavItem /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @queryAssignedElements({ flatten: true })\n private _anchor: Array<HTMLAnchorElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabled() {\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n if (!this.disabled) {\n this._anchor[0].removeAttribute(\"tabindex\");\n }\n }\n\n _handleSlotChange() {\n this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n /* If link is disabled, set tabindex of anchor to -1 */\n if (this.disabled) {\n this._anchor[0].setAttribute(\"tabindex\", \"-1\");\n this._anchor[0].removeAttribute(\"href\");\n this._anchor[0].setAttribute(\"role\", \"link\");\n }\n }\n render() {\n return html` <slot @slotchange=${this._handleSlotChange}></slot~~> `;\~~n }\n}\n\nexport default SgdsSidenavLink;\n"],"mappings":";;;;;;;;;;AASA,IAAa,kBAAb,cAAqC,YAAY;;;EAItC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EAPK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAYxD,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;EACrD,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;EAEhE,IAAI,CAAC,KAAK,UACR,KAAK,QAAQ,EAAE,CAAC,gBAAgB,UAAU;CAE9C;CAEA,oBAAoB;EAClB,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;;EAGhE,IAAI,KAAK,UAAU;GACjB,KAAK,QAAQ,EAAE,CAAC,aAAa,YAAY,IAAI;GAC7C,KAAK,QAAQ,EAAE,CAAC,gBAAgB,MAAM;GACtC,KAAK,QAAQ,EAAE,CAAC,aAAa,QAAQ,MAAM;EAC7C;CACF;CACA,SAAS;EACP,OAAO,IAAI,~~sBAAsB,~~KAAK,kBAAkB;~~CAC1D~~;AACF;AAtCG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAQvC,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}
1	+ {"version":3,"file":"sgds-sidenav-link.js","names":["sidenavLinkStyle"],"sources":["../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/*\n @slot default - slot for label of anchor tag.\n /\nexport class SgdsSidenavLink extends SgdsElement {\n static styles = [...SgdsElement.styles, sidenavLinkStyle];\n /* when true, sets the active stylings of .nav-link /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /* Disables the SgdsMainnavItem /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @queryAssignedElements({ flatten: true })\n private _anchor: Array<HTMLAnchorElement>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabled() {\n this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n if (!this.disabled) {\n this._anchor[0].removeAttribute(\"tabindex\");\n }\n }\n\n _handleSlotChange() {\n this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n /* If link is disabled, set tabindex of anchor to -1 */\n if (this.disabled) {\n this._anchor[0].setAttribute(\"tabindex\", \"-1\");\n this._anchor[0].removeAttribute(\"href\");\n this._anchor[0].setAttribute(\"role\", \"link\");\n }\n }\n render() {\n return html`<div class=\"sidenav-link\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n }\n}\n\nexport default SgdsSidenavLink;\n"],"mappings":";;;;;;;;;;AASA,IAAa,kBAAb,cAAqC,YAAY;;;EAItC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EAPK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAYxD,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;EACrD,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;EAEhE,IAAI,CAAC,KAAK,UACR,KAAK,QAAQ,EAAE,CAAC,gBAAgB,UAAU;CAE9C;CAEA,oBAAoB;EAClB,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;;EAGhE,IAAI,KAAK,UAAU;GACjB,KAAK,QAAQ,EAAE,CAAC,aAAa,YAAY,IAAI;GAC7C,KAAK,QAAQ,EAAE,CAAC,gBAAgB,MAAM;GACtC,KAAK,QAAQ,EAAE,CAAC,aAAa,QAAQ,MAAM;EAC7C;CACF;CACA,SAAS;EACP,OAAO,IAAI,+CAA+C,KAAK,kBAAkB;CACnF;AACF;AAtCG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAQvC,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}

package/components/Sidenav/sidenav-item.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from "lit";
 //#region src/components/Sidenav/sidenav-item.css
-var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-interactive-border-radius);color:inherit!important;display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs)!important;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}.no-menu-default::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-wrapper{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs))}.no-menu-wrapper:hover{background-color:var(--sgds-bg-translucent-subtle)}.no-menu-wrapper:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-wrapper{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)}:host([class^=first-level][disabled]) .no-menu-wrapper{opacity:var(--sgds-opacity-40);pointer-events:none}.no-menu-default::slotted(a){color:inherit!important;font-weight:inherit!important;text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){outline:none}`;
 //#endregion
 export { css_248z as default };

package/components/Sidenav/sidenav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidenav-item.js","names":[],"sources":["../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n padding-left: var(--sgds-padding-3-xl);\n font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n all: unset;\n}\n.sidenav-btn {\n width: 100%;\n text-align: initial;\n line-height: var(--sgds-line-height-xs);\n font-size: var(--sgds-font-size-label-md);\n border: 0;\n background: 0;\n padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n border-radius: var(--sgds-interactive-border-radius);\n display: flex;\n gap: var(--sgds-gap-xs);\n font-weight: var(--sgds-font-weight-semibold);\n\n .caret-icon,\n slot[name=\"caret-icon\"]::slotted() {\n margin-left: auto;\n margin-bottom: auto;\n transition: all 0.3s ease-in-out;\n transform: rotate(180deg);\n }\n}\n.sidenav-btn:hover:not(.disabled) {\n background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n opacity: var(--sgds-opacity-40);\n pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n .caret-icon,\n slot[name=\"caret-icon\"]::slotted() {\n transform: rotate(0deg);\n }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n~~.no~~-menu~~-default::slotted~~(a) {\n ~~text~~-~~decoration:~~ ~~none !important;\~~n ~~color: inherit !important;\n~~ line-height: var(--sgds-line-height-xs) ~~!important~~;\n font-size: var(--sgds-font-size-label-md);\n border: 0;\n background: 0;\n padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n border-radius: var(--sgds-interactive-border-radius);\n display: flex;\n gap: var(--sgds-gap-xs);\n ~~font~~-~~weight~~: var(--sgds-~~font~~-~~weight~~-~~semibold~~) ~~!important~~;\n}\n\n.no-menu-~~default::slotted(a~~:focus-~~visible)~~ {\n background-color: var(--sgds-bg-translucent-subtle);\n~~}\n.no-menu-default::slotted(a:focus-visible) {\n~~ outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-~~default::slotted(a)~~ {\n color: var(--sgds-primary-color-emphasis) ~~!important~~;\n background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-~~default::slotted(a)~~ {\n opacity: var(--sgds-opacity-40);\n pointer-events: none;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"sidenav-item.js","names":[],"sources":["../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n padding-left: var(--sgds-padding-3-xl);\n font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n all: unset;\n}\n.sidenav-btn {\n width: 100%;\n text-align: initial;\n line-height: var(--sgds-line-height-xs);\n font-size: var(--sgds-font-size-label-md);\n border: 0;\n background: 0;\n padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n border-radius: var(--sgds-interactive-border-radius);\n display: flex;\n gap: var(--sgds-gap-xs);\n font-weight: var(--sgds-font-weight-semibold);\n\n .caret-icon,\n slot[name=\"caret-icon\"]::slotted() {\n margin-left: auto;\n margin-bottom: auto;\n transition: all 0.3s ease-in-out;\n transform: rotate(180deg);\n }\n}\n.sidenav-btn:hover:not(.disabled) {\n background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n opacity: var(--sgds-opacity-40);\n pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n .caret-icon,\n slot[name=\"caret-icon\"]::slotted() {\n transform: rotate(0deg);\n }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* No-menu (link type) — wrapper styles (protected in shadow DOM) /\n\n.no-menu-wrapper {\n line-height: var(--sgds-line-height-xs);\n font-size: var(--sgds-font-size-label-md);\n font-weight: var(--sgds-font-weight-semibold);\n border: 0;\n background: 0;\n padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n border-radius: var(--sgds-interactive-border-radius);\n display: flex;\n gap: var(--sgds-gap-xs);\n}\n\n.no-menu-wrapper:hover {\n background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.no-menu-wrapper:focus-within {\n background-color: var(--sgds-bg-translucent-subtle);\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-wrapper {\n color: var(--sgds-primary-color-emphasis);\n background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-wrapper {\n opacity: var(--sgds-opacity-40);\n pointer-events: none;\n}\n\n/ No-menu (link type) — anchor-specific styles */\n\n.no-menu-default::slotted(a) {\n text-decoration: none !important;\n color: inherit !important;\n font-weight: inherit !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n outline: none;\n}\n"],"mappings":""}

package/components/Sidenav/sidenav-link.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from "lit";
 //#region src/components/Sidenav/sidenav-link.css
-var css_248z = css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-interactive-border-radius);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}:host([disabled]) ::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
+var css_248z = css`.sidenav-link{border-radius:var(--sgds-interactive-border-radius);display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl)}:host([class^=third-level]) .sidenav-link{padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}:host([active]) .sidenav-link{background-color:var(--sgds-primary-surface-translucent)}:host(:not([disabled]):not([active])) .sidenav-link:hover{background-color:var(--sgds-bg-translucent-subtle)}.sidenav-link:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([active]) .sidenav-link:focus-within{background-color:var(--sgds-primary-bg-translucent)}:host([disabled]) .sidenav-link{opacity:var(--sgds-opacity-40);pointer-events:none}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-default));text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}::slotted(a:focus-visible){outline:none}`;
 //#endregion
 export { css_248z as default };

package/components/Sidenav/sidenav-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidenav-link.js","names":[],"sources":["../../../src/components/Sidenav/sidenav-link.css"],"sourcesContent":["~~:host([class^=\"third~~-~~level\"])~~ ~~::slotted~~(a) ~~{\n padding-left:~~ ~~calc(var(--sgds-padding-xl~~) + ~~var(--sgds-padding-3-xl));\~~n}\n~~\n::slotted(a)~~ {\n display: block;\n ~~--sgds~~-~~link-color-default~~: var(--sgds-~~color~~-~~default~~);\n ~~color~~: var(--sgds-~~color~~-~~default,~~ var(--sgds-~~link~~-~~color~~-~~default~~));\n padding-~~top~~: var(--sgds-padding-sm);\n ~~padding~~-~~bottom~~: var(--sgds-~~padding~~-sm);\n padding-left: var(--sgds-padding-3-xl)~~;\n padding-right:~~ var(--sgds-padding-sm);\n ~~border~~-~~radius~~: var(--sgds-~~interactive~~-~~border~~-~~radius~~);\n ~~text-decoration: none !important;\n~~}\n\n:host([~~active~~]) ~~::slotted~~(a) {\n ~~--sgds~~-~~link-~~color~~-default~~: var(--sgds-~~primary~~-~~color~~-~~emphasis~~);\n color: var(--sgds-~~primary~~-~~color~~-~~emphasis,~~ var(--sgds-~~link~~-~~color-default~~));\n ~~background~~-~~color~~: var(--sgds-~~primary~~-~~surface~~-~~translucent~~);\n}\n\n:host(~~:not(~~[~~disabled]):not([~~active])) ~~::slotted(a~~:~~hover)~~ {\n background-color: var(--sgds-bg-translucent~~-subtle~~);\n}\n\n~~::slotted~~(a:~~hover~~),\n::slotted(~~a:focus~~),\n::slotted(a~~:focus-visible~~) {\n --sgds-link-color-~~emphasis~~: var(--sgds-color-default);\n color: var(--sgds-color-default, var(--sgds-link-color-~~emphasis~~));\n}\n\n:host([active]) ::slotted(a:~~hover~~),\n:~~host~~(~~[active]~~) ::slotted(a:~~focus~~),\n:~~host([active]~~) ::slotted(a:focus-visible) {\n --sgds-link-color-emphasis: var(--sgds-~~primary-~~color-~~emphasis~~);\n color: var(--sgds-~~primary-~~color-~~emphasis~~, var(--sgds-link-color-emphasis));\n}\n\n:host([~~disabled~~]) ::slotted(a~~) {\n opacity~~: ~~var(--sgds-opacity-40~~);\n ~~pointer-events~~: ~~none;\n}\n:~~host([~~disabled~~]) ::slotted(a:focus~~-visible~~) {\n ~~outline~~: ~~0;\n}\n\n~~::slotted(a:focus-visible) {\n ~~background~~-color: var(--sgds-bg-~~translucent~~-~~subtle~~);\n~~}\n::slotted(a:focus-visible) {\n~~ ~~outline~~: var(--sgds-~~outline~~-~~focus);\n outline~~-~~offset:~~ var(--sgds-~~outline~~-~~offset~~-~~focus~~);\n}\n\n~~:host([active])~~ ::slotted(a:focus-visible) {\n ~~background-color~~: ~~var(--sgds-primary-bg-translucent)~~;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"sidenav-link.js","names":[],"sources":["../../../src/components/Sidenav/sidenav-link.css"],"sourcesContent":["/* ===== .sidenav-link (inner shadow DOM — protected from external CSS) ===== /\n\n.sidenav-link {\n display: block;\n padding-top: var(--sgds-padding-sm);\n padding-bottom: var(--sgds-padding-sm);\n padding-left: var(--sgds-padding-3-xl);\n padding-right: var(--sgds-padding-sm);\n border-radius: var(--sgds-interactive-border-radius);\n}\n\n:host([class^=\"third-level\"]) .sidenav-link {\n padding-left: calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl));\n}\n\n:host([active]) .sidenav-link {\n background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host(:not([disabled]):not([active])) .sidenav-link:hover {\n background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.sidenav-link:focus-within {\n background-color: var(--sgds-bg-translucent-subtle);\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([active]) .sidenav-link:focus-within {\n background-color: var(--sgds-primary-bg-translucent);\n}\n\n:host([disabled]) .sidenav-link {\n opacity: var(--sgds-opacity-40);\n pointer-events: none;\n}\n\n/ ===== ::slotted (light DOM — anchor-specific styles) ===== */\n\n::slotted(a) {\n --sgds-link-color-default: var(--sgds-color-default);\n color: var(--sgds-color-default, var(--sgds-link-color-default));\n text-decoration: none !important;\n}\n\n:host([active]) ::slotted(a) {\n --sgds-link-color-default: var(--sgds-primary-color-emphasis);\n color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-default));\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(a:focus-visible) {\n --sgds-link-color-emphasis: var(--sgds-color-default);\n color: var(--sgds-color-default, var(--sgds-link-color-emphasis));\n}\n\n:host([active]) ::slotted(a:hover),\n:host([active]) ::slotted(a:focus),\n:host([active]) ::slotted(a:focus-visible) {\n --sgds-link-color-emphasis: var(--sgds-primary-color-emphasis);\n color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-emphasis));\n}\n\n::slotted(a:focus-visible) {\n outline: none;\n}\n"],"mappings":""}

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

@@ -2362,5 +2362,5 @@ let Pe={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Fe
           </div>
         </div>
       </nav>
-    `}};Y([q({type:Boolean})],Q.prototype,`hasActionsSlot`,void 0),Y([J(`nav`)],Q.prototype,`nav`,void 0),Y([J(`.subnav-nav`)],Q.prototype,`mobileNav`,void 0),Y([J(`.header-container`)],Q.prototype,`headerContainer`,void 0),Y([J(`.subnav-toggler`)],Q.prototype,`toggler`,void 0),Y([J(`.subnav-nav-group`)],Q.prototype,`navGroup`,void 0),Y([J(`.subnav-actions`)],Q.prototype,`mobileActions`,void 0),Y([Me()],Q.prototype,`isCollapsed`,void 0),Y([Me()],Q.prototype,`isMenuOpen`,void 0),Y([Re(`isMenuOpen`,{waitUntilFirstUpdate:!0})],Q.prototype,`handleOpenChange`,null),Y([Re(`isCollapsed`,{waitUntilFirstUpdate:!0})],Q.prototype,`handleCollapsedChange`,null),Ye(`subnav.show`,{keyframes:[{height:`0`,opacity:`0`},{height:`auto`,opacity:`1`}],options:{duration:200,easing:`ease-in-out`}}),Ye(`subnav.hide`,{keyframes:[{height:`auto`,opacity:`1`},{height:`0`,opacity:`0`}],options:{duration:200,easing:`ease-in-out`}}),K();var xp=l`: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)}}`;K();var $=class extends X{constructor(...e){super(...e),this.active=!1,this.disabled=!1}static{this.styles=[...X.styles,xp]}_handleDisabled(){this.setAttribute(`aria-disabled`,`${this.disabled}`)}_handleSlotChange(e){let t=e.target,n=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()===`a`||e.tagName.toLowerCase()===`sgds-link`);if(n.length>1){console.error(`More than one anchor tag is added to sgds-subnav-item`);return}if(n.length===0&&t.assignedNodes({flatten:!0}).forEach(e=>{if(e.nodeType===Node.TEXT_NODE){let t=document.createElement(`a`);t.textContent=e.textContent,e.parentNode.replaceChild(t,e)}}),n.length===1){let e=n[0];this.active&&e.setAttribute(`aria-current`,`true`),this.disabled&&(e.setAttribute(`href`,`javascript:void(0)`),e.setAttribute(`tabindex`,`-1`))}}render(){return I`<slot @slotchange=${this._handleSlotChange}></slot>`}};Y([q({type:Boolean,reflect:!0})],$.prototype,`active`,void 0),Y([q({type:Boolean,reflect:!0})],$.prototype,`disabled`,void 0),Y([Re(`disabled`)],$.prototype,`_handleDisabled`,null);function Sp(e,t){customElements.get(e)||customElements.define(e,t)}Sp(`sgds-subnav`,Q),Sp(`sgds-subnav-item`,$)});
+    `}};Y([q({type:Boolean})],Q.prototype,`hasActionsSlot`,void 0),Y([J(`nav`)],Q.prototype,`nav`,void 0),Y([J(`.subnav-nav`)],Q.prototype,`mobileNav`,void 0),Y([J(`.header-container`)],Q.prototype,`headerContainer`,void 0),Y([J(`.subnav-toggler`)],Q.prototype,`toggler`,void 0),Y([J(`.subnav-nav-group`)],Q.prototype,`navGroup`,void 0),Y([J(`.subnav-actions`)],Q.prototype,`mobileActions`,void 0),Y([Me()],Q.prototype,`isCollapsed`,void 0),Y([Me()],Q.prototype,`isMenuOpen`,void 0),Y([Re(`isMenuOpen`,{waitUntilFirstUpdate:!0})],Q.prototype,`handleOpenChange`,null),Y([Re(`isCollapsed`,{waitUntilFirstUpdate:!0})],Q.prototype,`handleCollapsedChange`,null),Ye(`subnav.show`,{keyframes:[{height:`0`,opacity:`0`},{height:`auto`,opacity:`1`}],options:{duration:200,easing:`ease-in-out`}}),Ye(`subnav.hide`,{keyframes:[{height:`auto`,opacity:`1`},{height:`0`,opacity:`0`}],options:{duration:200,easing:`ease-in-out`}}),K();var xp=l`.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))}}`;K();var $=class extends X{constructor(...e){super(...e),this.active=!1,this.disabled=!1}static{this.styles=[...X.styles,xp]}_handleDisabled(){this.setAttribute(`aria-disabled`,`${this.disabled}`)}_handleSlotChange(e){let t=e.target,n=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()===`a`||e.tagName.toLowerCase()===`sgds-link`);if(n.length>1){console.error(`More than one anchor tag is added to sgds-subnav-item`);return}if(n.length===0&&t.assignedNodes({flatten:!0}).forEach(e=>{if(e.nodeType===Node.TEXT_NODE){let t=document.createElement(`a`);t.textContent=e.textContent,e.parentNode.replaceChild(t,e)}}),n.length===1){let e=n[0];this.active&&e.setAttribute(`aria-current`,`true`),this.disabled&&(e.setAttribute(`href`,`javascript:void(0)`),e.setAttribute(`tabindex`,`-1`))}}render(){return I`<div class="subnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`}};Y([q({type:Boolean,reflect:!0})],$.prototype,`active`,void 0),Y([q({type:Boolean,reflect:!0})],$.prototype,`disabled`,void 0),Y([Re(`disabled`)],$.prototype,`_handleDisabled`,null);function Sp(e,t){customElements.get(e)||customElements.define(e,t)}Sp(`sgds-subnav`,Q),Sp(`sgds-subnav-item`,$)});
 //# sourceMappingURL=index.umd.min.js.map