@govtechsg/sgds-web-component 3.1.2 → 3.2.0-rc.1

package/react/components/ImageCard/sgds-image-card.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-image-card.cjs.js","sources":["../../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { CardImageAdjustment, CardImagePosition } from \"../Card/types\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsImageCard extends CardElement {\n  static styles = [...CardElement.styles, imageCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n      image.style.display = \"none\";\n      if (this.noPadding) body.style.padding = \"0px\";\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <p class=\"card-text\">\n            <slot name=\"description\"></slot>\n          </p>\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsImageCard;\n"],"names":["CardElement","literal","html","classMap","nothing","imageCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}

package/react/components/ImageCard/sgds-image-card.js

@@ -0,0 +1,98 @@
+'use client';
+import { __decorate } from 'tslib';
+import { nothing } from 'lit';
+import { literal, html } from 'lit/static-html.js';
+import { queryAssignedNodes, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { CardElement } from '../../base/card-element.js';
+import css_248z from './image-card.js';
+
+/**
+ * @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
+ * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
+ * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.
+ * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.
+ * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
+ * @slot subtitle - The subtitle of the card
+ * @slot title - The title of the card
+ * @slot description - The paragrapher text of the card
+ * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
+ * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+ */
+class SgdsImageCard extends CardElement {
+    constructor() {
+        super(...arguments);
+        /** Removes the card's internal padding when set to true.  */
+        this.noPadding = false;
+        /** Sets the image position of the card. Available options: `before`, `after` */
+        this.imagePosition = "before";
+        /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
+        this.imageAdjustment = "default";
+    }
+    firstUpdated() {
+        if (this._imageNode.length === 0) {
+            const image = this.shadowRoot.querySelector(".card-image");
+            const body = this.shadowRoot.querySelector(".card-body");
+            image.style.display = "none";
+            if (this.noPadding)
+                body.style.padding = "0px";
+        }
+    }
+    handleImgSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (childNodes.length > 1) {
+            return console.error("Multiple elements passed into SgdsCard's image slot");
+        }
+    }
+    render() {
+        const tag = this.stretchedLink ? literal `a` : literal `div`;
+        const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        return html `
+      <${tag} 
+        class="card ${classMap({
+            disabled: this.disabled
+        })}"
+        tabindex=${cardTabIndex}
+      >
+        ${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
+        <div class="card-image">
+					<slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
+					<slot name="image-badge"></slot>
+					<slot name="image-action"></slot>
+        </div>
+        <div class="card-body">
+					<slot name="upper"></slot>
+          <div class="card-header-container">
+            <div class="card-header">
+              <slot name="subtitle"></slot>
+              <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+            </div>
+            <slot></slot>
+          </div>
+          <p class="card-text">
+            <slot name="description"></slot>
+          </p>
+          <slot name="lower"></slot>
+          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+        </div>
+      </${tag}>
+    `;
+    }
+}
+SgdsImageCard.styles = [...CardElement.styles, css_248z];
+__decorate([
+    queryAssignedNodes({ slot: "image", flatten: true })
+], SgdsImageCard.prototype, "_imageNode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsImageCard.prototype, "noPadding", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsImageCard.prototype, "imagePosition", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsImageCard.prototype, "imageAdjustment", void 0);
+
+export { SgdsImageCard, SgdsImageCard as default };
+//# sourceMappingURL=sgds-image-card.js.map

package/react/components/ImageCard/sgds-image-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-image-card.js","sources":["../../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { CardImageAdjustment, CardImagePosition } from \"../Card/types\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsImageCard extends CardElement {\n  static styles = [...CardElement.styles, imageCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n      image.style.display = \"none\";\n      if (this.noPadding) body.style.padding = \"0px\";\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <p class=\"card-text\">\n            <slot name=\"description\"></slot>\n          </p>\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsImageCard;\n"],"names":["imageCardStyle"],"mappings":"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"}

package/react/components/Input/input.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}`;
+var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=input.cjs.js.map

package/react/components/Input/input.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}`;
+var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}`;
 
 export { css_248z as default };
 //# sourceMappingURL=input.js.map

package/react/components/Mainnav/sgds-mainnav-item.cjs.js

@@ -17,7 +17,7 @@ var mainnavItem = require('./mainnav-item.cjs.js');
 class SgdsMainnavItem extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
-        /** when true, sets the active stylings of .nav-link */
+        /** when true, sets the active stylings of the navigation item */
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
@@ -60,7 +60,7 @@ class SgdsMainnavItem extends sgdsElement["default"] {
 }
 SgdsMainnavItem.styles = [...sgdsElement["default"].styles, mainnavItem["default"]];
 tslib.__decorate([
-    decorators_js.property({ type: Boolean })
+    decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsMainnavItem.prototype, "active", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })

package/react/components/Mainnav/sgds-mainnav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-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 mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\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-mainnav-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 SgdsMainnavItem;\n"],"names":["SgdsElement","html","mainnavItemStyle","__decorate","property","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-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 mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\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 SgdsMainnavItem */\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-mainnav-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 SgdsMainnavItem;\n"],"names":["SgdsElement","html","mainnavItemStyle","__decorate","property","watch"],"mappings":"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"}

package/react/components/Mainnav/sgds-mainnav-item.js

@@ -13,7 +13,7 @@ import css_248z from './mainnav-item.js';
 class SgdsMainnavItem extends SgdsElement {
     constructor() {
         super(...arguments);
-        /** when true, sets the active stylings of .nav-link */
+        /** when true, sets the active stylings of the navigation item */
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
@@ -56,7 +56,7 @@ class SgdsMainnavItem extends SgdsElement {
 }
 SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z];
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsMainnavItem.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/react/components/Mainnav/sgds-mainnav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-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 mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\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-mainnav-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 SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-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 mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\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 SgdsMainnavItem */\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-mainnav-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 SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":"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"}

package/react/{internals → components}/OverflowMenu/sgds-overflow-menu.cjs.js

@@ -8,9 +8,9 @@ var lit = require('lit');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var overflowMenu = require('./overflow-menu.cjs.js');
 var decorators_js = require('lit/decorators.js');
-var sgdsDropdown = require('../../components/Dropdown/sgds-dropdown.cjs.js');
-var sgdsDropdownItem = require('../../components/Dropdown/sgds-dropdown-item.cjs.js');
-var sgdsIcon = require('../../components/Icon/sgds-icon.cjs.js');
+var sgdsDropdown = require('../Dropdown/sgds-dropdown.cjs.js');
+var sgdsDropdownItem = require('../Dropdown/sgds-dropdown-item.cjs.js');
+var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 
 /**
  * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.

package/react/components/OverflowMenu/sgds-overflow-menu.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-overflow-menu.cjs.js","sources":["../../../../src/components/OverflowMenu/sgds-overflow-menu.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport overflowMenuStyles from \"./overflow-menu.css\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.\n * @slot default - The overflow menu items. Pass in sgds-dropdown-items in this slot\n */\nexport class SgdsOverflowMenu extends SgdsElement {\n  static styles = [...SgdsElement.styles, overflowMenuStyles];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  render() {\n    return html`\n      <sgds-dropdown>\n        <button slot=\"toggler\" class=\"overflow-btn\">\n          <sgds-icon name=\"three-dots\" size=${this.size}></sgds-icon>\n        </button>\n        <slot></slot>\n      </sgds-dropdown>\n    `;\n  }\n}\n\nexport default SgdsOverflowMenu;\n"],"names":["SgdsElement","html","overflowMenuStyles","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","property"],"mappings":";;;;;;;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAS6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;KAYrE;IAVC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAG+B,4CAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;;KAIlD,CAAC;KACH;;AAnBM,gBAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,uBAAkB,CAA7C,CAA+C;AAC5D;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,eAAe,EAAEC,yBAAY;AAC7B,IAAA,oBAAoB,EAAEC,iCAAgB;AACtC,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAJkB,CAIjB;AAEyCC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/{internals → components}/OverflowMenu/sgds-overflow-menu.js

@@ -4,9 +4,9 @@ import { html } from 'lit';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './overflow-menu.js';
 import { property } from 'lit/decorators.js';
-import { SgdsDropdown } from '../../components/Dropdown/sgds-dropdown.js';
-import { SgdsDropdownItem } from '../../components/Dropdown/sgds-dropdown-item.js';
-import { SgdsIcon } from '../../components/Icon/sgds-icon.js';
+import { SgdsDropdown } from '../Dropdown/sgds-dropdown.js';
+import { SgdsDropdownItem } from '../Dropdown/sgds-dropdown-item.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 
 /**
  * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.

package/react/components/OverflowMenu/sgds-overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-overflow-menu.js","sources":["../../../../src/components/OverflowMenu/sgds-overflow-menu.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport overflowMenuStyles from \"./overflow-menu.css\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.\n * @slot default - The overflow menu items. Pass in sgds-dropdown-items in this slot\n */\nexport class SgdsOverflowMenu extends SgdsElement {\n  static styles = [...SgdsElement.styles, overflowMenuStyles];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  render() {\n    return html`\n      <sgds-dropdown>\n        <button slot=\"toggler\" class=\"overflow-btn\">\n          <sgds-icon name=\"three-dots\" size=${this.size}></sgds-icon>\n        </button>\n        <slot></slot>\n      </sgds-dropdown>\n    `;\n  }\n}\n\nexport default SgdsOverflowMenu;\n"],"names":["overflowMenuStyles"],"mappings":";;;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAS6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;KAYrE;IAVC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAG+B,4CAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;;KAIlD,CAAC;KACH;;AAnBM,gBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAC5D;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,eAAe,EAAE,YAAY;AAC7B,IAAA,oBAAoB,EAAE,gBAAgB;AACtC,IAAA,WAAW,EAAE,QAAQ;AACtB,CAJkB,CAIjB;AAEyC,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Select/select-item.cjs2.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+var css_248z = lit.css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=select-item.cjs2.js.map

package/react/components/Select/select-item2.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
 
 export { css_248z as default };
 //# sourceMappingURL=select-item2.js.map

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

@@ -17,7 +17,7 @@ var subnavItem = require('./subnav-item.cjs.js');
 class SgdsSubnavItem extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
-        /** when true, sets the active stylings of .nav-link */
+        /** when true, sets the active stylings of the navigation item */
         this.active = false;
         /** Disables the SgdsSubnavItem */
         this.disabled = false;
@@ -60,7 +60,7 @@ class SgdsSubnavItem extends sgdsElement["default"] {
 }
 SgdsSubnavItem.styles = [...sgdsElement["default"].styles, subnavItem["default"]];
 tslib.__decorate([
-    decorators_js.property({ type: Boolean })
+    decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsSubnavItem.prototype, "active", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-subnav-item.cjs.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":["SgdsElement","html","subnavItemStyle","__decorate","property","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-subnav-item.cjs.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 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"],"names":["SgdsElement","html","subnavItemStyle","__decorate","property","watch"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ import css_248z from './subnav-item.js';
 class SgdsSubnavItem extends SgdsElement {
     constructor() {
         super(...arguments);
-        /** when true, sets the active stylings of .nav-link */
+        /** when true, sets the active stylings of the navigation item */
         this.active = false;
         /** Disables the SgdsSubnavItem */
         this.disabled = false;
@@ -56,7 +56,7 @@ class SgdsSubnavItem extends SgdsElement {
 }
 SgdsSubnavItem.styles = [...SgdsElement.styles, css_248z];
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsSubnavItem.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -1 +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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"}
+{"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 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"],"names":["subnavItemStyle"],"mappings":"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"}