@govtechsg/sgds-web-component 3.1.0-rc.6 → 3.1.0

package/components/Subnav/sgds-subnav-item.d.ts

@@ -0,0 +1,16 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @slot default - slot for SgdsSubnavItem element.
+ *
+ *  */
+export declare class SgdsSubnavItem extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    /** when true, sets the active stylings of .nav-link */
+    active: boolean;
+    /** Disables the SgdsSubnavItem */
+    disabled: boolean;
+    _handleDisabled(): void;
+    private _handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default SgdsSubnavItem;

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

@@ -0,0 +1,68 @@
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { watch } from '../../utils/watch.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './subnav-item.js';
+
+/**
+ * @slot default - slot for SgdsSubnavItem element.
+ *
+ *  */
+class SgdsSubnavItem extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** when true, sets the active stylings of .nav-link */
+        this.active = false;
+        /** Disables the SgdsSubnavItem */
+        this.disabled = false;
+    }
+    _handleDisabled() {
+        this.setAttribute("aria-disabled", `${this.disabled}`);
+    }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const assignedElements = slot.assignedElements({ flatten: true });
+        const anchorItems = assignedElements.filter(item => item.tagName.toLowerCase() === "a" || item.tagName.toLowerCase() === "sgds-link");
+        if (anchorItems.length > 1) {
+            console.error("More than one anchor tag is added to sgds-subnav-item");
+            return;
+        }
+        if (anchorItems.length === 0) {
+            const nodes = slot.assignedNodes({ flatten: true });
+            nodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    const hyperlink = document.createElement("a");
+                    hyperlink.textContent = node.textContent;
+                    node.parentNode.replaceChild(hyperlink, node);
+                }
+            });
+        }
+        if (anchorItems.length === 1) {
+            const anchor = anchorItems[0];
+            if (this.active) {
+                anchor.setAttribute("aria-current", "true");
+            }
+            if (this.disabled) {
+                anchor.setAttribute("href", "javascript:void(0)");
+                anchor.setAttribute("tabindex", "-1");
+            }
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this._handleSlotChange}></slot>`;
+    }
+}
+SgdsSubnavItem.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean })
+], SgdsSubnavItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSubnavItem.prototype, "disabled", void 0);
+__decorate([
+    watch("disabled")
+], SgdsSubnavItem.prototype, "_handleDisabled", null);
+
+export { SgdsSubnavItem, SgdsSubnavItem as default };
+//# sourceMappingURL=sgds-subnav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-subnav-item.js","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 .nav-link */\n  @property({ type: Boolean })\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"],"names":["subnavItemStyle"],"mappings":"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"}

package/components/Subnav/sgds-subnav.d.ts

@@ -0,0 +1,47 @@
+import SgdsElement from "../../base/sgds-element";
+import SgdsIcon from "../Icon/sgds-icon";
+/**
+ * @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.
+ *
+ * @event sgds-show - Emitted on show. Only for collapsed menu.
+ * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.
+ * @event sgds-hide - Emitted on hide. Only for collapsed menu.
+ * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
+ *
+ * @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.
+ * @slot header - Slot for rendering the sub-navigation header or section title.
+ * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.
+ *
+ */
+export declare class SgdsSubnav extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    static dependencies: {
+        "sgds-icon": typeof SgdsIcon;
+    };
+    private nav;
+    private subnav;
+    private mobileNav;
+    private toggler;
+    private body;
+    private mobileActions;
+    private isCollapsed;
+    private isMenuOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _handleResize;
+    private _updateMobileNavMaxHeight;
+    private _handleSlotChange;
+    private _handleClickOutOfElement;
+    private _toggleMenu;
+    /** Shows the menu. For when subnav is in the collapsed form */
+    show(): Promise<void>;
+    /** Hide the menu. For when subnav is in the collapsed form */
+    hide(): Promise<void>;
+    private _animateToShow;
+    private _animateToHide;
+    handleOpenChange(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default SgdsSubnav;

package/components/Subnav/sgds-subnav.js

@@ -0,0 +1,253 @@
+import { __decorate } from 'tslib';
+import SgdsElement from '../../base/sgds-element.js';
+import { html, nothing } from 'lit';
+import { query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { watch } from '../../utils/watch.js';
+import { waitForEvent } from '../../utils/event.js';
+import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../utils/animate.js';
+import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
+import { LG_BREAKPOINT } from '../../utils/breakpoints.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
+import css_248z from './subnav.js';
+import css_248z$1 from '../../css/grid.js';
+
+/**
+ * @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.
+ *
+ * @event sgds-show - Emitted on show. Only for collapsed menu.
+ * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.
+ * @event sgds-hide - Emitted on hide. Only for collapsed menu.
+ * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
+ *
+ * @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.
+ * @slot header - Slot for rendering the sub-navigation header or section title.
+ * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.
+ *
+ */
+class SgdsSubnav extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        this.isCollapsed = false;
+        this.isMenuOpen = false;
+        this._handleResize = () => {
+            this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
+            if (!this.isCollapsed) {
+                this.isMenuOpen = false;
+            }
+            this._updateMobileNavMaxHeight();
+        };
+        this._updateMobileNavMaxHeight = () => {
+            if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav)
+                return;
+            const { top: subnavTop } = this.nav.getBoundingClientRect();
+            const headerHeight = this.subnav.clientHeight;
+            const actionsButtonHeight = this.mobileActions.clientHeight;
+            const offset = subnavTop + headerHeight + actionsButtonHeight;
+            this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
+        };
+        this._toggleMenu = () => {
+            var _a;
+            if (this.isMenuOpen) {
+                this.hide();
+            }
+            else {
+                document.querySelector("body").style.overflow = "hidden";
+                this.show();
+            }
+            (_a = this.toggler) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._handleResize();
+        window.addEventListener("resize", this._handleResize);
+        window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("resize", this._handleResize);
+        window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+    }
+    firstUpdated() {
+        this._updateMobileNavMaxHeight();
+    }
+    _handleSlotChange(e) {
+        const childElements = e.target.assignedElements({ flatten: true });
+        if (this.isCollapsed) {
+            childElements.forEach(element => {
+                element.setAttribute("isCollapsed", `${this.isCollapsed}`);
+            });
+        }
+        else {
+            childElements.forEach(element => {
+                element.removeAttribute("isCollapsed");
+            });
+        }
+    }
+    _handleClickOutOfElement(e, self) {
+        if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {
+            this.hide();
+        }
+    }
+    /** Shows the menu. For when subnav is in the collapsed form */
+    async show() {
+        if (this.isMenuOpen) {
+            return;
+        }
+        this.isMenuOpen = true;
+        return waitForEvent(this, "sgds-after-show");
+    }
+    /** Hide the menu. For when subnav is in the collapsed form */
+    async hide() {
+        if (!this.isMenuOpen) {
+            return;
+        }
+        this.isMenuOpen = false;
+        document.querySelector("body").style.removeProperty("overflow");
+        return waitForEvent(this, "sgds-after-hide");
+    }
+    async _animateToShow() {
+        const sgdsShow = this.emit("sgds-show", { cancelable: true });
+        if (sgdsShow.defaultPrevented) {
+            this.isMenuOpen = false;
+            return;
+        }
+        await stopAnimations(this.mobileNav);
+        this.mobileNav.classList.remove("hidden");
+        const { keyframes, options } = getAnimation(this, "subnav.show");
+        await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
+        // this.mobileNav.style.height = "auto";
+        this.emit("sgds-after-show");
+    }
+    async _animateToHide() {
+        const slHide = this.emit("sgds-hide", { cancelable: true });
+        if (slHide.defaultPrevented) {
+            this.isMenuOpen = true;
+            return;
+        }
+        await stopAnimations(this.mobileNav);
+        const { keyframes, options } = getAnimation(this, "subnav.hide");
+        await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
+        this.mobileNav.classList.add("hidden");
+        // this.mobileNav.style.height = "auto";
+        this.emit("sgds-after-hide");
+    }
+    async handleOpenChange() {
+        if (this.isMenuOpen) {
+            // Show
+            this._animateToShow();
+        }
+        else {
+            // Hide
+            this._animateToHide();
+        }
+    }
+    render() {
+        const isHydrated = this.hasUpdated;
+        return html `
+      <nav
+        class=${classMap({
+            mobile: this.isCollapsed
+        })}
+        aria-label="Sub navigation"
+      >
+        <div
+          class=${classMap({
+            "sgds-container": !this.isCollapsed,
+            subnav: true,
+            mobile: this.isCollapsed,
+            collapsed: !this.isMenuOpen
+        })}
+        >
+          <slot name="header"></slot>
+          ${this.isCollapsed
+            ? html `
+                <sgds-icon
+                  class="subnav-toggler"
+                  name="chevron-down"
+                  @click=${this._toggleMenu}
+                  aria-label="Toggle sub navigation"
+                ></sgds-icon>
+              `
+            : html `
+                <div class="subnav-nav-group">
+                  <div class="subnav-nav">
+                    <slot @slotchange="${this._handleSlotChange}"></slot>
+                  </div>
+                  <div class="subnav-actions">
+                    <slot name="actions"></slot>
+                  </div>
+                </div>
+              `}
+        </div>
+        ${this.isCollapsed
+            ? html `
+              <div class="subnav-dropdown">
+                <div
+                  class=${classMap({
+                "subnav-nav-mobile": true,
+                hidden: !this.isMenuOpen && !isHydrated
+            })}
+                >
+                  <slot @slotchange="${this._handleSlotChange}"></slot>
+                </div>
+                <div class="subnav-actions-mobile">
+                  <slot name="actions"></slot>
+                </div>
+              </div>
+            `
+            : nothing}
+      </nav>
+    `;
+    }
+}
+SgdsSubnav.styles = [...SgdsElement.styles, css_248z, css_248z$1];
+/** @internal */
+SgdsSubnav.dependencies = {
+    "sgds-icon": SgdsIcon
+};
+__decorate([
+    query("nav")
+], SgdsSubnav.prototype, "nav", void 0);
+__decorate([
+    query(".subnav")
+], SgdsSubnav.prototype, "subnav", void 0);
+__decorate([
+    query(".subnav-nav-mobile")
+], SgdsSubnav.prototype, "mobileNav", void 0);
+__decorate([
+    query(".subnav-toggler")
+], SgdsSubnav.prototype, "toggler", void 0);
+__decorate([
+    query(".subnav-dropdown")
+], SgdsSubnav.prototype, "body", void 0);
+__decorate([
+    query(".subnav-actions-mobile")
+], SgdsSubnav.prototype, "mobileActions", void 0);
+__decorate([
+    state()
+], SgdsSubnav.prototype, "isCollapsed", void 0);
+__decorate([
+    state()
+], SgdsSubnav.prototype, "isMenuOpen", void 0);
+__decorate([
+    watch("isMenuOpen", { waitUntilFirstUpdate: true })
+], SgdsSubnav.prototype, "handleOpenChange", null);
+setDefaultAnimation("subnav.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+setDefaultAnimation("subnav.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+
+export { SgdsSubnav, SgdsSubnav as default };
+//# sourceMappingURL=sgds-subnav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-subnav.js","sources":["../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, nothing } from \"lit\";\nimport { 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 } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\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  @query(\"nav\")\n  private nav: HTMLElement;\n\n  @query(\".subnav\")\n  private subnav: HTMLElement;\n\n  @query(\".subnav-nav-mobile\")\n  private mobileNav: HTMLElement;\n\n  @query(\".subnav-toggler\")\n  private toggler: HTMLElement;\n\n  @query(\".subnav-dropdown\")\n  private body: HTMLElement;\n\n  @query(\".subnav-actions-mobile\")\n  private mobileActions: HTMLElement;\n\n  @state()\n  private isCollapsed = false;\n\n  @state()\n  private isMenuOpen = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._handleResize();\n    window.addEventListener(\"resize\", this._handleResize);\n    window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\"resize\", this._handleResize);\n    window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    this._updateMobileNavMaxHeight();\n  }\n\n  private _handleResize = () => {\n    this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n    if (!this.isCollapsed) {\n      this.isMenuOpen = false;\n    }\n\n    this._updateMobileNavMaxHeight();\n  };\n\n  private _updateMobileNavMaxHeight = () => {\n    if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav) return;\n    const { top: subnavTop } = this.nav.getBoundingClientRect();\n    const headerHeight = this.subnav.clientHeight;\n    const actionsButtonHeight = this.mobileActions.clientHeight;\n    const offset = subnavTop + headerHeight + actionsButtonHeight;\n    this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n  };\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    if (this.isCollapsed) {\n      childElements.forEach(element => {\n        element.setAttribute(\"isCollapsed\", `${this.isCollapsed}`);\n      });\n    } else {\n      childElements.forEach(element => {\n        element.removeAttribute(\"isCollapsed\");\n      });\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      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.toggler?.focus();\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    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\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    this.mobileNav.classList.remove(\"hidden\");\n\n    const { keyframes, options } = getAnimation(this, \"subnav.show\");\n    await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n    // this.mobileNav.style.height = \"auto\";\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    this.mobileNav.classList.add(\"hidden\");\n    // this.mobileNav.style.height = \"auto\";\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  render() {\n    const isHydrated = this.hasUpdated;\n\n    return html`\n      <nav\n        class=${classMap({\n          mobile: this.isCollapsed\n        })}\n        aria-label=\"Sub navigation\"\n      >\n        <div\n          class=${classMap({\n            \"sgds-container\": !this.isCollapsed,\n            subnav: true,\n            mobile: this.isCollapsed,\n            collapsed: !this.isMenuOpen\n          })}\n        >\n          <slot name=\"header\"></slot>\n          ${this.isCollapsed\n            ? html`\n                <sgds-icon\n                  class=\"subnav-toggler\"\n                  name=\"chevron-down\"\n                  @click=${this._toggleMenu}\n                  aria-label=\"Toggle sub navigation\"\n                ></sgds-icon>\n              `\n            : html`\n                <div class=\"subnav-nav-group\">\n                  <div class=\"subnav-nav\">\n                    <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n                  </div>\n                  <div class=\"subnav-actions\">\n                    <slot name=\"actions\"></slot>\n                  </div>\n                </div>\n              `}\n        </div>\n        ${this.isCollapsed\n          ? html`\n              <div class=\"subnav-dropdown\">\n                <div\n                  class=${classMap({\n                    \"subnav-nav-mobile\": true,\n                    hidden: !this.isMenuOpen && !isHydrated\n                  })}\n                >\n                  <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n                </div>\n                <div class=\"subnav-actions-mobile\">\n                  <slot name=\"actions\"></slot>\n                </div>\n              </div>\n            `\n          : nothing}\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"],"names":["subnavStyle","gridStyle"],"mappings":"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"}

package/components/Subnav/subnav-item.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host(:not([disabled])[active]) ::slotted(*){border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default)}:host([isCollapsed]) ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}:host(:not([disabled])[isCollapsed][active]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-font-size-2:var(--sgds-font-size-1);--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:flex;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));padding:var(--sgds-padding-lg) var(--sgds-padding-none);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]) ::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),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=subnav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subnav-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Subnav/subnav.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host{position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}nav.mobile{border-bottom:none}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg)}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-lg)}.subnav.mobile slot[name=header]::slotted(*){padding-top:var(--sgds-padding-none)}.subnav-nav-group{flex:1 1 0;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav,.subnav-nav-group{align-items:center;display:flex}.subnav-nav{gap:var(--sgds-gap-lg)}.subnav-nav-mobile{display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-actions{align-items:center;display:flex;gap:var(--sgds-gap-md)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-dropdown{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav-actions-mobile{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky}.hidden{display:none}`;
+
+export { css_248z as default };
+//# sourceMappingURL=subnav.js.map

package/components/Subnav/subnav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subnav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/index.d.ts

@@ -34,12 +34,14 @@ export * from "./ProgressBar/sgds-progress-bar";
 export * from "./QuantityToggle/sgds-quantity-toggle";
 export * from "./Radio/sgds-radio";
 export * from "./Radio/sgds-radio-group";
+export * from "./Select/sgds-select";
 export * from "./Sidenav/sgds-sidenav";
 export * from "./Sidenav/sgds-sidenav-item";
 export * from "./Sidenav/sgds-sidenav-link";
 export * from "./Skeleton/sgds-skeleton";
 export * from "./Spinner/sgds-spinner";
 export * from "./Stepper/sgds-stepper";
+export * from "./Subnav/sgds-subnav";
 export * from "./Switch/sgds-switch";
 export * from "./Tab/sgds-tab";
 export * from "./Tab/sgds-tab-group";

package/components/index.js

@@ -34,12 +34,14 @@ export { SgdsProgressBar } from './ProgressBar/sgds-progress-bar.js';
 export { SgdsQuantityToggle } from './QuantityToggle/sgds-quantity-toggle.js';
 export { SgdsRadio } from './Radio/sgds-radio.js';
 export { SgdsRadioGroup } from './Radio/sgds-radio-group.js';
+export { SgdsSelect } from './Select/sgds-select.js';
 export { SgdsSidenav } from './Sidenav/sgds-sidenav.js';
 export { SgdsSidenavItem } from './Sidenav/sgds-sidenav-item.js';
 export { SgdsSidenavLink } from './Sidenav/sgds-sidenav-link.js';
 export { SgdsSkeleton } from './Skeleton/sgds-skeleton.js';
 export { SgdsSpinner } from './Spinner/sgds-spinner.js';
 export { SgdsStepper } from './Stepper/sgds-stepper.js';
+export { SgdsSubnav } from './Subnav/sgds-subnav.js';
 export { SgdsSwitch } from './Switch/sgds-switch.js';
 export { SgdsTab } from './Tab/sgds-tab.js';
 export { SgdsTabGroup } from './Tab/sgds-tab-group.js';

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}