@govtechsg/sgds-web-component 3.3.2 → 3.3.3-rc.0

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

@@ -1 +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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"}
+{"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 { HasSlotController } from \"../../utils/slot\";\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  private readonly hasSlotController = new HasSlotController(this, \"description\");\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    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\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/Link/link.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);justify-content:center;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
+var css_248z = lit.css`:host{display:inline-flex}.nav-link::slotted(a){color:var(--sgds-link-color-default);cursor:pointer;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=link.cjs.js.map

package/react/components/Link/link.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);justify-content:center;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
+var css_248z = css`:host{display:inline-flex}.nav-link::slotted(a){color:var(--sgds-link-color-default);cursor:pointer;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=link.js.map

package/react/components/Link/sgds-link.cjs.js

@@ -22,16 +22,41 @@ class SgdsLink extends sgdsElement["default"] {
         /** when true, sets the active stylings of the link */
         this.variant = "primary";
     }
-    _handleSlotChange() {
-        const anchor = this.querySelector("a");
-        if (anchor) {
-            if (anchor.hasAttribute("disabled")) {
-                anchor.setAttribute("href", "javascript:void(0)");
-                anchor.setAttribute("tabindex", "-1");
+    _processAnchor(anchor) {
+        if (anchor.hasAttribute("disabled")) {
+            anchor.setAttribute("href", "javascript:void(0)");
+            anchor.setAttribute("tabindex", "-1");
+        }
+        else {
+            anchor.setAttribute("tabindex", "0");
+        }
+    }
+    _processIcon(anchor) {
+        const icons = anchor.querySelectorAll("sgds-icon");
+        icons.forEach(icon => {
+            icon.classList.remove("icon-left", "icon-right");
+            if (!icon.previousElementSibling && !icon.previousSibling) {
+                icon.classList.add("icon-left");
             }
-            else {
-                anchor.setAttribute("tabindex", "0");
+            if (!icon.nextElementSibling && !icon.nextSibling) {
+                icon.classList.add("icon-right");
             }
+        });
+    }
+    _handleSlotChange(e) {
+        const anchor = e.target
+            .assignedElements()
+            .find(el => el.tagName.toLowerCase() === "a");
+        if (anchor) {
+            this._processAnchor(anchor);
+            this._processIcon(anchor);
+        }
+    }
+    firstUpdated() {
+        const anchor = this.querySelector("a");
+        if (anchor) {
+            this._processAnchor(anchor);
+            this._processIcon(anchor);
         }
     }
     render() {

package/react/components/Link/sgds-link.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-link.cjs.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n  private _handleSlotChange() {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      if (anchor.hasAttribute(\"disabled\")) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        anchor.setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":";;;;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQA,sBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;KAkB1E;IAhBS,iBAAiB,GAAA;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACvC;iBAAM;AACL,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACtC;SACF;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAOC,QAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,eAAU,CAArC,CAAuC;AAGpDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvCD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-link.cjs.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n  private _processAnchor(anchor: HTMLAnchorElement) {\n    if (anchor.hasAttribute(\"disabled\")) {\n      anchor.setAttribute(\"href\", \"javascript:void(0)\");\n      anchor.setAttribute(\"tabindex\", \"-1\");\n    } else {\n      anchor.setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  private _processIcon(anchor: HTMLAnchorElement) {\n    const icons = anchor.querySelectorAll(\"sgds-icon\");\n\n    icons.forEach(icon => {\n      icon.classList.remove(\"icon-left\", \"icon-right\");\n\n      if (!icon.previousElementSibling && !icon.previousSibling) {\n        icon.classList.add(\"icon-left\");\n      }\n\n      if (!icon.nextElementSibling && !icon.nextSibling) {\n        icon.classList.add(\"icon-right\");\n      }\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const anchor = (e.target as HTMLSlotElement)\n      .assignedElements()\n      .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n    if (anchor) {\n      this._processAnchor(anchor);\n      this._processIcon(anchor);\n    }\n  }\n\n  firstUpdated() {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      this._processAnchor(anchor);\n      this._processIcon(anchor);\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":";;;;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQA,sBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;KAkD1E;AAhDS,IAAA,cAAc,CAAC,MAAyB,EAAA;AAC9C,QAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,YAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACvC;aAAM;AACL,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACtC;KACF;AAEO,IAAA,YAAY,CAAC,MAAyB,EAAA;QAC5C,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAEnD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;YACnB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAEjD,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACjC;YAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aAClC;AACH,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,MAAM,GAAI,CAAC,CAAC,MAA0B;AACzC,aAAA,gBAAgB,EAAE;AAClB,aAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CAAsB,CAAC;QAErE,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,YAAY,GAAA;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAOC,QAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvDM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,eAAU,CAArC,CAAuC;AAGpDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvCD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Link/sgds-link.js

@@ -18,16 +18,41 @@ class SgdsLink extends SgdsElement {
         /** when true, sets the active stylings of the link */
         this.variant = "primary";
     }
-    _handleSlotChange() {
-        const anchor = this.querySelector("a");
-        if (anchor) {
-            if (anchor.hasAttribute("disabled")) {
-                anchor.setAttribute("href", "javascript:void(0)");
-                anchor.setAttribute("tabindex", "-1");
+    _processAnchor(anchor) {
+        if (anchor.hasAttribute("disabled")) {
+            anchor.setAttribute("href", "javascript:void(0)");
+            anchor.setAttribute("tabindex", "-1");
+        }
+        else {
+            anchor.setAttribute("tabindex", "0");
+        }
+    }
+    _processIcon(anchor) {
+        const icons = anchor.querySelectorAll("sgds-icon");
+        icons.forEach(icon => {
+            icon.classList.remove("icon-left", "icon-right");
+            if (!icon.previousElementSibling && !icon.previousSibling) {
+                icon.classList.add("icon-left");
             }
-            else {
-                anchor.setAttribute("tabindex", "0");
+            if (!icon.nextElementSibling && !icon.nextSibling) {
+                icon.classList.add("icon-right");
             }
+        });
+    }
+    _handleSlotChange(e) {
+        const anchor = e.target
+            .assignedElements()
+            .find(el => el.tagName.toLowerCase() === "a");
+        if (anchor) {
+            this._processAnchor(anchor);
+            this._processIcon(anchor);
+        }
+    }
+    firstUpdated() {
+        const anchor = this.querySelector("a");
+        if (anchor) {
+            this._processAnchor(anchor);
+            this._processIcon(anchor);
         }
     }
     render() {

package/react/components/Link/sgds-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-link.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n  private _handleSlotChange() {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      if (anchor.hasAttribute(\"disabled\")) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        anchor.setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;KAkB1E;IAhBS,iBAAiB,GAAA;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACvC;iBAAM;AACL,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACtC;SACF;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-link.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n  private _processAnchor(anchor: HTMLAnchorElement) {\n    if (anchor.hasAttribute(\"disabled\")) {\n      anchor.setAttribute(\"href\", \"javascript:void(0)\");\n      anchor.setAttribute(\"tabindex\", \"-1\");\n    } else {\n      anchor.setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  private _processIcon(anchor: HTMLAnchorElement) {\n    const icons = anchor.querySelectorAll(\"sgds-icon\");\n\n    icons.forEach(icon => {\n      icon.classList.remove(\"icon-left\", \"icon-right\");\n\n      if (!icon.previousElementSibling && !icon.previousSibling) {\n        icon.classList.add(\"icon-left\");\n      }\n\n      if (!icon.nextElementSibling && !icon.nextSibling) {\n        icon.classList.add(\"icon-right\");\n      }\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const anchor = (e.target as HTMLSlotElement)\n      .assignedElements()\n      .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n    if (anchor) {\n      this._processAnchor(anchor);\n      this._processIcon(anchor);\n    }\n  }\n\n  firstUpdated() {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      this._processAnchor(anchor);\n      this._processIcon(anchor);\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;KAkD1E;AAhDS,IAAA,cAAc,CAAC,MAAyB,EAAA;AAC9C,QAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,YAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACvC;aAAM;AACL,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACtC;KACF;AAEO,IAAA,YAAY,CAAC,MAAyB,EAAA;QAC5C,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAEnD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;YACnB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAEjD,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACjC;YAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aAClC;AACH,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,MAAM,GAAI,CAAC,CAAC,MAA0B;AACzC,aAAA,gBAAgB,EAAE;AAClB,aAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CAAsB,CAAC;QAErE,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,YAAY,GAAA;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvDM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Masthead/masthead.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:16px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;padding:0!important;width:16px}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.75rem;line-height:1rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:16px;width:16px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{outline:0}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+var css_248z = lit.css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm)!important}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.75rem;line-height:1rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:16px;width:16px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{outline:0}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=masthead.cjs.js.map

package/react/components/Masthead/masthead.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:16px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;padding:0!important;width:16px}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.75rem;line-height:1rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:16px;width:16px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{outline:0}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm)!important}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.75rem;line-height:1rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .25rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:16px;width:16px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{outline:0}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=masthead.js.map

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host(:not([disabled])[active]:not([active=false])) ::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));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}: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),::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)}@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(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
+var css_248z = lit.css`:host(:not([disabled])[active]:not([active=false])) ::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:inline-block;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}::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'%3E%3Cpath fill-rule='evenodd' clip-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-.035Zm2.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-.5Z' fill='%230E0E0E'/%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'%3E%3Cpath fill-rule='evenodd' clip-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-.035Zm2.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-.5Z' fill='%230E0E0E'/%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),::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)}@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(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=subnav-item.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host(:not([disabled])[active]:not([active=false])) ::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));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}: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),::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)}@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(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
+var css_248z = css`:host(:not([disabled])[active]:not([active=false])) ::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:inline-block;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}::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'%3E%3Cpath fill-rule='evenodd' clip-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-.035Zm2.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-.5Z' fill='%230E0E0E'/%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'%3E%3Cpath fill-rule='evenodd' clip-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-.035Zm2.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-.5Z' fill='%230E0E0E'/%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),::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)}@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(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=subnav-item.js.map

package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js

@@ -9,6 +9,7 @@ var staticHtml_js = require('lit/static-html.js');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var cardElement = require('../../base/card-element.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 var thumbnailCard = require('./thumbnail-card.cjs.js');
 
 /**
@@ -27,6 +28,7 @@ class SgdsThumbnailCard extends cardElement.CardElement {
         super(...arguments);
         /** Removes the card's internal padding when set to true.  */
         this.noPadding = false;
+        this.hasSlotController = new slot.HasSlotController(this, "description");
     }
     firstUpdated() {
         if (this._thumbnailNode.length === 0) {
@@ -44,6 +46,7 @@ class SgdsThumbnailCard extends cardElement.CardElement {
     render() {
         const tag = this.stretchedLink ? staticHtml_js.literal `a` : staticHtml_js.literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        const hasDescriptionSlot = this.hasSlotController.test("description");
         return staticHtml_js.html `
       <${tag} 
         class="card ${classMap_js.classMap({
@@ -67,9 +70,11 @@ class SgdsThumbnailCard extends cardElement.CardElement {
             </div>
             <slot></slot>
           </div>
-          <p class="card-text">
-            <slot name="description"></slot>
-          </p>
+          ${hasDescriptionSlot
+            ? staticHtml_js.html `<p class="card-text">
+                  <slot name="description"></slot>
+                </p>`
+            : lit.nothing}
           <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>

package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-thumbnail-card.cjs.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-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 thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail 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 thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\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 SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"thumbnail\", flatten: true })\n  _thumbnailNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  protected firstUpdated() {\n    if (this._thumbnailNode.length === 0) {\n      const thumbnail = this.shadowRoot.querySelector(\".card-thumbnail\") as HTMLDivElement;\n      thumbnail.style.display = \"none\";\n\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\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-media\">\n\t\t\t\t\t<div class=\"card-thumbnail\">\n            <slot name=\"thumbnail\"></slot>\n          </div>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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 SgdsThumbnailCard;\n"],"names":["CardElement","literal","html","classMap","nothing","thumbnailCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}
+{"version":3,"file":"sgds-thumbnail-card.cjs.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-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 { HasSlotController } from \"../../utils/slot\";\nimport thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail 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 thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\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 SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"thumbnail\", flatten: true })\n  _thumbnailNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._thumbnailNode.length === 0) {\n      const thumbnail = this.shadowRoot.querySelector(\".card-thumbnail\") as HTMLDivElement;\n      thumbnail.style.display = \"none\";\n\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\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-media\">\n\t\t\t\t\t<div class=\"card-thumbnail\">\n            <slot name=\"thumbnail\"></slot>\n          </div>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsThumbnailCard;\n"],"names":["CardElement","HasSlotController","literal","html","classMap","nothing","thumbnailCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}

package/react/components/ThumbnailCard/sgds-thumbnail-card.js

@@ -5,6 +5,7 @@ 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 { HasSlotController } from '../../utils/slot.js';
 import css_248z from './thumbnail-card.js';
 
 /**
@@ -23,6 +24,7 @@ class SgdsThumbnailCard extends CardElement {
         super(...arguments);
         /** Removes the card's internal padding when set to true.  */
         this.noPadding = false;
+        this.hasSlotController = new HasSlotController(this, "description");
     }
     firstUpdated() {
         if (this._thumbnailNode.length === 0) {
@@ -40,6 +42,7 @@ class SgdsThumbnailCard extends CardElement {
     render() {
         const tag = this.stretchedLink ? literal `a` : literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        const hasDescriptionSlot = this.hasSlotController.test("description");
         return html `
       <${tag} 
         class="card ${classMap({
@@ -63,9 +66,11 @@ class SgdsThumbnailCard extends CardElement {
             </div>
             <slot></slot>
           </div>
-          <p class="card-text">
-            <slot name="description"></slot>
-          </p>
+          ${hasDescriptionSlot
+            ? html `<p class="card-text">
+                  <slot name="description"></slot>
+                </p>`
+            : nothing}
           <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>

package/react/components/ThumbnailCard/sgds-thumbnail-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-thumbnail-card.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-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 thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail 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 thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\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 SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"thumbnail\", flatten: true })\n  _thumbnailNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  protected firstUpdated() {\n    if (this._thumbnailNode.length === 0) {\n      const thumbnail = this.shadowRoot.querySelector(\".card-thumbnail\") as HTMLDivElement;\n      thumbnail.style.display = \"none\";\n\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\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-media\">\n\t\t\t\t\t<div class=\"card-thumbnail\">\n            <slot name=\"thumbnail\"></slot>\n          </div>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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 SgdsThumbnailCard;\n"],"names":["thumbnailCardStyle"],"mappings":";;;;;;;;;AAOA;;;;;;;;;;AAUG;AACG,MAAO,iBAAkB,SAAQ,WAAW,CAAA;AAAlD,IAAA,WAAA,GAAA;;;QAW8C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;KAqD/D;IAnDW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YACpC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAmB,CAAC;AACrF,YAAA,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAEjC,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE;gBAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,gBAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;gBAC3E,IAAI,IAAI,CAAC,SAAS;AAAE,oBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;aAChD;SACF;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAA,GAAG,GAAG,OAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEnE,QAAA,OAAO,IAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAA,QAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA;;AAErB,QAAA,EAAA,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA,CAAA,kCAAA,CAAoC,GAAG,OAAO,CAAA;;;;;AAKtF,KAAA,EAAA,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;AAG5E,KAAA,EAAA,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;;AAIf,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AA9DM,iBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAI5D,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG7B,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-thumbnail-card.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-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 { HasSlotController } from \"../../utils/slot\";\nimport thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail 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 thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\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 SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"thumbnail\", flatten: true })\n  _thumbnailNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._thumbnailNode.length === 0) {\n      const thumbnail = this.shadowRoot.querySelector(\".card-thumbnail\") as HTMLDivElement;\n      thumbnail.style.display = \"none\";\n\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\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-media\">\n\t\t\t\t\t<div class=\"card-thumbnail\">\n            <slot name=\"thumbnail\"></slot>\n          </div>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsThumbnailCard;\n"],"names":["thumbnailCardStyle"],"mappings":";;;;;;;;;;AAQA;;;;;;;;;;AAUG;AACG,MAAO,iBAAkB,SAAQ,WAAW,CAAA;AAAlD,IAAA,WAAA,GAAA;;;QAW8C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAE7C,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;KA0DjF;IAxDW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YACpC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAmB,CAAC;AACrF,YAAA,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAEjC,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE;gBAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,gBAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;gBAC3E,IAAI,IAAI,CAAC,SAAS;AAAE,oBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;aAChD;SACF;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAA,GAAG,GAAG,OAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QACnE,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AAEtE,QAAA,OAAO,IAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAA,QAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA;;AAErB,QAAA,EAAA,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA,CAAA,kCAAA,CAAoC,GAAG,OAAO,CAAA;;;;;AAKtF,KAAA,EAAA,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;AAG5E,KAAA,EAAA,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;;AAIf,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;YAKpF,kBAAkB;cACd,IAAI,CAAA,CAAA;;AAEC,oBAAA,CAAA;AACP,cAAE,OACN,CAAA;;AAEgC,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AArEM,iBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAI5D,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG7B,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}