@govtechsg/sgds-web-component 3.12.0 → 3.13.0-rc.0

package/react/components/SystemBanner/sgds-system-banner-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-system-banner-item.cjs.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\", \"icon\", \"badge\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n    if (this.hasSlotController.test(\"icon\") && this.hasSlotController.test(\"badge\")) {\n      console.error(\n        \"Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.\"\n      );\n    }\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <slot name=\"badge\"></slot>\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["SgdsElement","HasSlotController","html","classMap","nothing","alertBannerItemStyles","__decorate","property","consume","NoClampActionContext","state","SystemBannerChildCountContext"],"mappings":"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"}
+{"version":3,"file":"sgds-system-banner-item.cjs.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["SgdsElement","HasSlotController","html","classMap","nothing","alertBannerItemStyles","__decorate","property","consume","NoClampActionContext","state","SystemBannerChildCountContext"],"mappings":"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"}

package/react/components/SystemBanner/sgds-system-banner-item.js

@@ -10,10 +10,9 @@ import { NoClampActionContext, SystemBannerChildCountContext } from './system-ba
 import { consume } from '@lit/context';
 
 /**
- * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.
+ * @slot icon - The slot to pass in an icon element.
  * @slot action - The slot to pass in an action element such as a button or link
  * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
- * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.
  *
  * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
  */
@@ -26,7 +25,7 @@ class SgdsSystemBannerItem extends SgdsElement {
         this.noClampAction = false;
         this.clamped = false;
         this.siblingsCount = 0;
-        this.hasSlotController = new HasSlotController(this, "action", "icon", "badge");
+        this.hasSlotController = new HasSlotController(this, "action");
     }
     async firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -44,9 +43,6 @@ class SgdsSystemBannerItem extends SgdsElement {
     updated() {
         if (!this.hasActionSlot)
             this.hasActionSlot = this.hasSlotController.test("action");
-        if (this.hasSlotController.test("icon") && this.hasSlotController.test("badge")) {
-            console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.");
-        }
     }
     _clampCheck() {
         const textEl = this.shadowRoot.querySelector(".message");
@@ -62,7 +58,6 @@ class SgdsSystemBannerItem extends SgdsElement {
       <div class="banner-item">
         <slot name="icon"></slot>
         <div class="banner-item__message_and__action">
-          <slot name="badge"></slot>
           <div class="clamped-container">
             <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
               <slot></slot>

package/react/components/SystemBanner/sgds-system-banner-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-system-banner-item.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\", \"icon\", \"badge\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n    if (this.hasSlotController.test(\"icon\") && this.hasSlotController.test(\"badge\")) {\n      console.error(\n        \"Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.\"\n      );\n    }\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <slot name=\"badge\"></slot>\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["alertBannerItemStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-system-banner-item.js","sources":["../../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["alertBannerItemStyles"],"mappings":"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"}

package/react/components/SystemBanner/system-banner-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
+var css_248z = lit.css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=system-banner-item.cjs.js.map

package/react/components/SystemBanner/system-banner-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
+var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=system-banner-item.js.map

package/react/components/SystemBanner/system-banner.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:1024px){.pagination,sgds-close-button{position:static}.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}:host([fluid]) .banner{max-width:none}}`;
+var css_248z = lit.css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-mainnav-mobile-padding-x));position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:512px){.pagination,sgds-close-button{position:static}.banner{padding-left:var(--sgds-mainnav-mobile-padding-x);padding-right:var(--sgds-mainnav-mobile-padding-x)}}@media (min-width:1440px){.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}}:host([fluid]) .banner{max-width:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=system-banner.cjs.js.map

package/react/components/SystemBanner/system-banner.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:1024px){.pagination,sgds-close-button{position:static}.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}:host([fluid]) .banner{max-width:none}}`;
+var css_248z = css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-mainnav-mobile-padding-x));position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:512px){.pagination,sgds-close-button{position:static}.banner{padding-left:var(--sgds-mainnav-mobile-padding-x);padding-right:var(--sgds-mainnav-mobile-padding-x)}}@media (min-width:1440px){.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}}:host([fluid]) .banner{max-width:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=system-banner.js.map

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
+var css_248z = lit.css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=thumbnail-card.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
+var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;
 
 export { css_248z as default };
 //# sourceMappingURL=thumbnail-card.js.map

package/react/index.cjs.js

@@ -8,12 +8,12 @@ var index$1 = require('./accordion/index.cjs.js');
 var index$2 = require('./alert-link/index.cjs.js');
 var index$3 = require('./alert/index.cjs.js');
 var index$4 = require('./badge/index.cjs.js');
-var index$5 = require('./breadcrumb-item/index.cjs.js');
-var index$6 = require('./breadcrumb/index.cjs.js');
-var index$7 = require('./button/index.cjs.js');
-var index$8 = require('./card/index.cjs.js');
-var index$9 = require('./checkbox-group/index.cjs.js');
-var index$a = require('./checkbox/index.cjs.js');
+var index$5 = require('./button/index.cjs.js');
+var index$6 = require('./card/index.cjs.js');
+var index$7 = require('./checkbox-group/index.cjs.js');
+var index$8 = require('./checkbox/index.cjs.js');
+var index$9 = require('./breadcrumb-item/index.cjs.js');
+var index$a = require('./breadcrumb/index.cjs.js');
 var index$b = require('./close-button/index.cjs.js');
 var index$c = require('./combo-box-option/index.cjs.js');
 var index$d = require('./combo-box/index.cjs.js');
@@ -47,30 +47,34 @@ var index$E = require('./radio-group/index.cjs.js');
 var index$F = require('./radio/index.cjs.js');
 var index$G = require('./select-option/index.cjs.js');
 var index$H = require('./select/index.cjs.js');
-var index$I = require('./sidenav-item/index.cjs.js');
-var index$J = require('./sidenav-link/index.cjs.js');
-var index$K = require('./sidenav/index.cjs.js');
-var index$L = require('./skeleton/index.cjs.js');
-var index$M = require('./spinner/index.cjs.js');
-var index$N = require('./stepper/index.cjs.js');
-var index$O = require('./subnav-item/index.cjs.js');
-var index$P = require('./subnav/index.cjs.js');
-var index$Q = require('./switch/index.cjs.js');
-var index$R = require('./system-banner-item/index.cjs.js');
-var index$S = require('./system-banner/index.cjs.js');
-var index$T = require('./tab-group/index.cjs.js');
-var index$U = require('./tab-panel/index.cjs.js');
-var index$V = require('./tab/index.cjs.js');
-var index$W = require('./table-cell/index.cjs.js');
-var index$X = require('./table-head/index.cjs.js');
-var index$Y = require('./table-row/index.cjs.js');
-var index$Z = require('./table/index.cjs.js');
-var index$_ = require('./table-of-contents/index.cjs.js');
-var index$$ = require('./textarea/index.cjs.js');
-var index$10 = require('./thumbnail-card/index.cjs.js');
-var index$11 = require('./toast-container/index.cjs.js');
-var index$12 = require('./toast/index.cjs.js');
-var index$13 = require('./tooltip/index.cjs.js');
+var index$I = require('./sidebar-group/index.cjs.js');
+var index$J = require('./sidebar-item/index.cjs.js');
+var index$K = require('./sidebar-section/index.cjs.js');
+var index$L = require('./sidebar/index.cjs.js');
+var index$M = require('./sidenav-item/index.cjs.js');
+var index$N = require('./sidenav-link/index.cjs.js');
+var index$O = require('./sidenav/index.cjs.js');
+var index$P = require('./skeleton/index.cjs.js');
+var index$Q = require('./spinner/index.cjs.js');
+var index$R = require('./stepper/index.cjs.js');
+var index$S = require('./subnav-item/index.cjs.js');
+var index$T = require('./subnav/index.cjs.js');
+var index$U = require('./switch/index.cjs.js');
+var index$V = require('./system-banner-item/index.cjs.js');
+var index$W = require('./system-banner/index.cjs.js');
+var index$X = require('./tab-group/index.cjs.js');
+var index$Y = require('./tab-panel/index.cjs.js');
+var index$Z = require('./tab/index.cjs.js');
+var index$_ = require('./table-cell/index.cjs.js');
+var index$$ = require('./table-head/index.cjs.js');
+var index$10 = require('./table-row/index.cjs.js');
+var index$11 = require('./table/index.cjs.js');
+var index$12 = require('./table-of-contents/index.cjs.js');
+var index$13 = require('./textarea/index.cjs.js');
+var index$14 = require('./thumbnail-card/index.cjs.js');
+var index$15 = require('./toast-container/index.cjs.js');
+var index$16 = require('./toast/index.cjs.js');
+var index$17 = require('./tooltip/index.cjs.js');
 
 
 
@@ -79,12 +83,12 @@ exports.SgdsAccordion = index$1["default"];
 exports.SgdsAlertLink = index$2["default"];
 exports.SgdsAlert = index$3["default"];
 exports.SgdsBadge = index$4["default"];
-exports.SgdsBreadcrumbItem = index$5["default"];
-exports.SgdsBreadcrumb = index$6["default"];
-exports.SgdsButton = index$7["default"];
-exports.SgdsCard = index$8["default"];
-exports.SgdsCheckboxGroup = index$9["default"];
-exports.SgdsCheckbox = index$a["default"];
+exports.SgdsButton = index$5["default"];
+exports.SgdsCard = index$6["default"];
+exports.SgdsCheckboxGroup = index$7["default"];
+exports.SgdsCheckbox = index$8["default"];
+exports.SgdsBreadcrumbItem = index$9["default"];
+exports.SgdsBreadcrumb = index$a["default"];
 exports.SgdsCloseButton = index$b["default"];
 exports.SgdsComboBoxOption = index$c["default"];
 exports.SgdsComboBox = index$d["default"];
@@ -118,28 +122,32 @@ exports.SgdsRadioGroup = index$E["default"];
 exports.SgdsRadio = index$F["default"];
 exports.SgdsSelectOption = index$G["default"];
 exports.SgdsSelect = index$H["default"];
-exports.SgdsSidenavItem = index$I["default"];
-exports.SgdsSidenavLink = index$J["default"];
-exports.SgdsSidenav = index$K["default"];
-exports.SgdsSkeleton = index$L["default"];
-exports.SgdsSpinner = index$M["default"];
-exports.SgdsStepper = index$N["default"];
-exports.SgdsSubnavItem = index$O["default"];
-exports.SgdsSubnav = index$P["default"];
-exports.SgdsSwitch = index$Q["default"];
-exports.SgdsSystemBannerItem = index$R["default"];
-exports.SgdsSystemBanner = index$S["default"];
-exports.SgdsTabGroup = index$T["default"];
-exports.SgdsTabPanel = index$U["default"];
-exports.SgdsTab = index$V["default"];
-exports.SgdsTableCell = index$W["default"];
-exports.SgdsTableHead = index$X["default"];
-exports.SgdsTableRow = index$Y["default"];
-exports.SgdsTable = index$Z["default"];
-exports.SgdsTableOfContents = index$_["default"];
-exports.SgdsTextarea = index$$["default"];
-exports.SgdsThumbnailCard = index$10["default"];
-exports.SgdsToastContainer = index$11["default"];
-exports.SgdsToast = index$12["default"];
-exports.SgdsTooltip = index$13["default"];
+exports.SgdsSidebarGroup = index$I["default"];
+exports.SgdsSidebarItem = index$J["default"];
+exports.SgdsSidebarSection = index$K["default"];
+exports.SgdsSidebar = index$L["default"];
+exports.SgdsSidenavItem = index$M["default"];
+exports.SgdsSidenavLink = index$N["default"];
+exports.SgdsSidenav = index$O["default"];
+exports.SgdsSkeleton = index$P["default"];
+exports.SgdsSpinner = index$Q["default"];
+exports.SgdsStepper = index$R["default"];
+exports.SgdsSubnavItem = index$S["default"];
+exports.SgdsSubnav = index$T["default"];
+exports.SgdsSwitch = index$U["default"];
+exports.SgdsSystemBannerItem = index$V["default"];
+exports.SgdsSystemBanner = index$W["default"];
+exports.SgdsTabGroup = index$X["default"];
+exports.SgdsTabPanel = index$Y["default"];
+exports.SgdsTab = index$Z["default"];
+exports.SgdsTableCell = index$_["default"];
+exports.SgdsTableHead = index$$["default"];
+exports.SgdsTableRow = index$10["default"];
+exports.SgdsTable = index$11["default"];
+exports.SgdsTableOfContents = index$12["default"];
+exports.SgdsTextarea = index$13["default"];
+exports.SgdsThumbnailCard = index$14["default"];
+exports.SgdsToastContainer = index$15["default"];
+exports.SgdsToast = index$16["default"];
+exports.SgdsTooltip = index$17["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

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

package/react/index.d.ts

@@ -3,12 +3,12 @@ export { default as SgdsAccordion } from './accordion';
 export { default as SgdsAlertLink } from './alert-link';
 export { default as SgdsAlert } from './alert';
 export { default as SgdsBadge } from './badge';
-export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
-export { default as SgdsBreadcrumb } from './breadcrumb';
 export { default as SgdsButton } from './button';
 export { default as SgdsCard } from './card';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';
+export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
+export { default as SgdsBreadcrumb } from './breadcrumb';
 export { default as SgdsCloseButton } from './close-button';
 export { default as SgdsComboBoxOption } from './combo-box-option';
 export { default as SgdsComboBox } from './combo-box';
@@ -42,6 +42,10 @@ export { default as SgdsRadioGroup } from './radio-group';
 export { default as SgdsRadio } from './radio';
 export { default as SgdsSelectOption } from './select-option';
 export { default as SgdsSelect } from './select';
+export { default as SgdsSidebarGroup } from './sidebar-group';
+export { default as SgdsSidebarItem } from './sidebar-item';
+export { default as SgdsSidebarSection } from './sidebar-section';
+export { default as SgdsSidebar } from './sidebar';
 export { default as SgdsSidenavItem } from './sidenav-item';
 export { default as SgdsSidenavLink } from './sidenav-link';
 export { default as SgdsSidenav } from './sidenav';

package/react/index.js

@@ -4,12 +4,12 @@ export { default as SgdsAccordion } from './accordion/index.js';
 export { default as SgdsAlertLink } from './alert-link/index.js';
 export { default as SgdsAlert } from './alert/index.js';
 export { default as SgdsBadge } from './badge/index.js';
-export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
-export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
 export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCard } from './card/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
+export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
+export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';
 export { default as SgdsComboBoxOption } from './combo-box-option/index.js';
 export { default as SgdsComboBox } from './combo-box/index.js';
@@ -43,6 +43,10 @@ export { default as SgdsRadioGroup } from './radio-group/index.js';
 export { default as SgdsRadio } from './radio/index.js';
 export { default as SgdsSelectOption } from './select-option/index.js';
 export { default as SgdsSelect } from './select/index.js';
+export { default as SgdsSidebarGroup } from './sidebar-group/index.js';
+export { default as SgdsSidebarItem } from './sidebar-item/index.js';
+export { default as SgdsSidebarSection } from './sidebar-section/index.js';
+export { default as SgdsSidebar } from './sidebar/index.js';
 export { default as SgdsSidenavItem } from './sidenav-item/index.js';
 export { default as SgdsSidenavLink } from './sidenav-link/index.js';
 export { default as SgdsSidenav } from './sidenav/index.js';

package/react/index.js.map

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

package/react/sidebar/index.cjs.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@lit/react');
+var sgdsSidebar = require('../components/Sidebar/sgds-sidebar.cjs.js');
+var ceRegistry = require('../utils/ce-registry.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+ceRegistry.register("sgds-sidebar", sgdsSidebar.SgdsSidebar);
+var index = react.createComponent({
+    react: React__namespace,
+    tagName: "sgds-sidebar",
+    elementClass: sgdsSidebar.SgdsSidebar,
+    events: {}
+});
+
+exports["default"] = index;
+//# sourceMappingURL=index.cjs.js.map

package/react/sidebar/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/sidebar/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,cAAc,EAAEC,uBAAS,CAAC,CAAC;AAEpC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAEF,uBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: React.ForwardRefExoticComponent<any>;
+export default _default;

package/react/sidebar/index.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { SgdsSidebar } from '../components/Sidebar/sgds-sidebar.js';
+import { register } from '../utils/ce-registry.js';
+
+register("sgds-sidebar", SgdsSidebar);
+var index = createComponent({
+    react: React,
+    tagName: "sgds-sidebar",
+    elementClass: SgdsSidebar,
+    events: {}
+});
+
+export { index as default };
+//# sourceMappingURL=index.js.map

package/react/sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/sidebar/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,cAAc,EAAEA,WAAS,CAAC,CAAC;AAEpC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAEA,WAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/sidebar-group/index.cjs.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@lit/react');
+var sgdsSidebarGroup = require('../components/Sidebar/sgds-sidebar-group.cjs.js');
+var ceRegistry = require('../utils/ce-registry.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+ceRegistry.register("sgds-sidebar-group", sgdsSidebarGroup.SgdsSidebarGroup);
+var index = react.createComponent({
+    react: React__namespace,
+    tagName: "sgds-sidebar-group",
+    elementClass: sgdsSidebarGroup.SgdsSidebarGroup,
+    events: {}
+});
+
+exports["default"] = index;
+//# sourceMappingURL=index.cjs.js.map

package/react/sidebar-group/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/sidebar-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar-group\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,oBAAoB,EAAEC,iCAAS,CAAC,CAAC;AAE1C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAEF,iCAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/sidebar-group/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: React.ForwardRefExoticComponent<any>;
+export default _default;

package/react/sidebar-group/index.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { SgdsSidebarGroup } from '../components/Sidebar/sgds-sidebar-group.js';
+import { register } from '../utils/ce-registry.js';
+
+register("sgds-sidebar-group", SgdsSidebarGroup);
+var index = createComponent({
+    react: React,
+    tagName: "sgds-sidebar-group",
+    elementClass: SgdsSidebarGroup,
+    events: {}
+});
+
+export { index as default };
+//# sourceMappingURL=index.js.map

package/react/sidebar-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/sidebar-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar-group\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,oBAAoB,EAAEA,gBAAS,CAAC,CAAC;AAE1C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAEA,gBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/sidebar-item/index.cjs.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@lit/react');
+var sgdsSidebarItem = require('../components/Sidebar/sgds-sidebar-item.cjs.js');
+var ceRegistry = require('../utils/ce-registry.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+ceRegistry.register("sgds-sidebar-item", sgdsSidebarItem.SgdsSidebarItem);
+var index = react.createComponent({
+    react: React__namespace,
+    tagName: "sgds-sidebar-item",
+    elementClass: sgdsSidebarItem.SgdsSidebarItem,
+    events: {}
+});
+
+exports["default"] = index;
+//# sourceMappingURL=index.cjs.js.map

package/react/sidebar-item/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/sidebar-item/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar-item\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar-item\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar-item\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,mBAAmB,EAAEC,+BAAS,CAAC,CAAC;AAEzC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,YAAY,EAAEF,+BAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/sidebar-item/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: React.ForwardRefExoticComponent<any>;
+export default _default;