npm - @govtechsg/sgds-web-component - Versions diffs - 3.3.0 → 3.3.1 - Mend

@govtechsg/sgds-web-component 3.3.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (588) hide show

package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-breadcrumb.cjs.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"~~../../internals/~~OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/*\n @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n \n @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n \n /\nexport class SgdsBreadcrumb extends SgdsElement {\n static styles = [...SgdsElement.styles, breadcrumbStyle];\n static dependencies = {\n \"sgds-overflow-menu\": SgdsOverflowMenu\n };\n /** The aria-label of nav element within breadcrumb component. /\n @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n /@internal /\n @query(\"slot\") defaultSlot: HTMLSlotElement;\n /*\n creates `<sgds-breadcrumb-item>\n * <sgds-overflow-menu>\n * <sgds-dropdown-item></sgds-dropdown-item>\n * ...\n * </sgds-overflow-menu>\n * <sgds-breadcrumb-item>`\n */\n private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n overflowMenu.setAttribute(\"size\", \"sm\");\n const mapItems = items.filter((item, index) => {\n if (index > 0 && index < items.length - 2) {\n const clonedAnchor = item.querySelector(\"a\");\n const clonedAnchorNode = clonedAnchor.cloneNode(true);\n const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n dropdownItem.appendChild(clonedAnchorNode);\n overflowMenu.appendChild(dropdownItem);\n return;\n } else {\n return item;\n }\n });\n breadcrumbItem.appendChild(overflowMenu);\n mapItems.splice(1, 0, breadcrumbItem);\n\n this.defaultSlot.replaceWith(...mapItems);\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(\n (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n ) as SgdsBreadcrumbItem[];\n items.forEach((item, index) => {\n if (index === items.length - 1) {\n item.setAttribute(\"aria-current\", \"page\");\n item.active = true;\n } else {\n item.removeAttribute(\"aria-current\");\n }\n });\n\n if (items.length >= 5) {\n this._replaceExcessItemsWithDropdown(items);\n }\n }\n\n render() {\n return html`\n <div aria-label=${ifDefined(this.ariaLabel)}>\n <div class=\"breadcrumb\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsBreadcrumb;\n"],"names":["SgdsElement","html","ifDefined","breadcrumbStyle","SgdsOverflowMenu","__decorate","property","query"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-breadcrumb.cjs.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/*\n @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n \n @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n \n /\nexport class SgdsBreadcrumb extends SgdsElement {\n static styles = [...SgdsElement.styles, breadcrumbStyle];\n static dependencies = {\n \"sgds-overflow-menu\": SgdsOverflowMenu\n };\n /** The aria-label of nav element within breadcrumb component. /\n @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n /@internal /\n @query(\"slot\") defaultSlot: HTMLSlotElement;\n /*\n creates `<sgds-breadcrumb-item>\n * <sgds-overflow-menu>\n * <sgds-dropdown-item></sgds-dropdown-item>\n * ...\n * </sgds-overflow-menu>\n * <sgds-breadcrumb-item>`\n */\n private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n overflowMenu.setAttribute(\"size\", \"sm\");\n const mapItems = items.filter((item, index) => {\n if (index > 0 && index < items.length - 2) {\n const clonedAnchor = item.querySelector(\"a\");\n const clonedAnchorNode = clonedAnchor.cloneNode(true);\n const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n dropdownItem.appendChild(clonedAnchorNode);\n overflowMenu.appendChild(dropdownItem);\n return;\n } else {\n return item;\n }\n });\n breadcrumbItem.appendChild(overflowMenu);\n mapItems.splice(1, 0, breadcrumbItem);\n\n this.defaultSlot.replaceWith(...mapItems);\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(\n (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n ) as SgdsBreadcrumbItem[];\n items.forEach((item, index) => {\n if (index === items.length - 1) {\n item.setAttribute(\"aria-current\", \"page\");\n item.active = true;\n } else {\n item.removeAttribute(\"aria-current\");\n }\n });\n\n if (items.length >= 5) {\n this._replaceExcessItemsWithDropdown(items);\n }\n }\n\n render() {\n return html`\n <div aria-label=${ifDefined(this.ariaLabel)}>\n <div class=\"breadcrumb\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsBreadcrumb;\n"],"names":["SgdsElement","html","ifDefined","breadcrumbStyle","SgdsOverflowMenu","__decorate","property","query"],"mappings":";;;;;;;;;;;;;AAOA;;;;;AAKG;AACG,MAAO,cAAe,SAAQA,sBAAW,CAAA;AAA/C,IAAA,WAAA,GAAA;;;QAM8B,IAAS,CAAA,SAAA,GAAG,YAAY,CAAC;KAgEtD;AA5DC;;;;;;;AAOG;AACK,IAAA,+BAA+B,CAAC,KAA2B,EAAA;QACjE,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACtE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAClE,QAAA,YAAY,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACnD,QAAA,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACxC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5C,YAAA,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzC,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;gBAC7C,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACtD,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAClE,gBAAA,YAAY,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;AAC3C,gBAAA,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;gBACvC,OAAO;aACR;iBAAM;AACL,gBAAA,OAAO,IAAI,CAAC;aACb;AACH,SAAC,CAAC,CAAC;AACH,QAAA,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACzC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,CAAC;QAEtC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC;KAC3C;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,KAAK,GAAI,CAAC,CAAC,MAA0B;AACxC,aAAA,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnC,aAAA,MAAM,CACL,CAAC,IAAwB,KAAK,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,sBAAsB,CAC5D,CAAC;QAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YAC5B,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9B,gBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AAC1C,gBAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;iBAAM;AACL,gBAAA,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;aACtC;AACH,SAAC,CAAC,CAAC;AAEH,QAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,kBAAI,CAAA,CAAA;AACS,sBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;AAEnB,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAG/C,CAAC;KACH;;AApEM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,qBAAe,CAA1C,CAA4C;AAClD,cAAA,CAAA,YAAY,GAAG;AACpB,IAAA,oBAAoB,EAAEC,iCAAgB;AACvC,CAFkB,CAEjB;AAE0BC,gBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA0B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtCD,gBAAA,CAAA;IAAdE,mBAAK,CAAC,MAAM,CAAC;AAA8B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Breadcrumb/sgds-breadcrumb.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit/static-html.js';
 import SgdsElement from '../../base/sgds-element.js';
-import { SgdsOverflowMenu } from '../../internals/OverflowMenu/sgds-overflow-menu.js';
+import { SgdsOverflowMenu } from '../OverflowMenu/sgds-overflow-menu.js';
 import css_248z from './breadcrumb.js';
 /**

package/react/components/Breadcrumb/sgds-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-breadcrumb.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"~~../../internals/~~OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/*\n @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n \n @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n \n /\nexport class SgdsBreadcrumb extends SgdsElement {\n static styles = [...SgdsElement.styles, breadcrumbStyle];\n static dependencies = {\n \"sgds-overflow-menu\": SgdsOverflowMenu\n };\n /** The aria-label of nav element within breadcrumb component. /\n @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n /@internal /\n @query(\"slot\") defaultSlot: HTMLSlotElement;\n /*\n creates `<sgds-breadcrumb-item>\n * <sgds-overflow-menu>\n * <sgds-dropdown-item></sgds-dropdown-item>\n * ...\n * </sgds-overflow-menu>\n * <sgds-breadcrumb-item>`\n */\n private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n overflowMenu.setAttribute(\"size\", \"sm\");\n const mapItems = items.filter((item, index) => {\n if (index > 0 && index < items.length - 2) {\n const clonedAnchor = item.querySelector(\"a\");\n const clonedAnchorNode = clonedAnchor.cloneNode(true);\n const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n dropdownItem.appendChild(clonedAnchorNode);\n overflowMenu.appendChild(dropdownItem);\n return;\n } else {\n return item;\n }\n });\n breadcrumbItem.appendChild(overflowMenu);\n mapItems.splice(1, 0, breadcrumbItem);\n\n this.defaultSlot.replaceWith(...mapItems);\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(\n (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n ) as SgdsBreadcrumbItem[];\n items.forEach((item, index) => {\n if (index === items.length - 1) {\n item.setAttribute(\"aria-current\", \"page\");\n item.active = true;\n } else {\n item.removeAttribute(\"aria-current\");\n }\n });\n\n if (items.length >= 5) {\n this._replaceExcessItemsWithDropdown(items);\n }\n }\n\n render() {\n return html`\n <div aria-label=${ifDefined(this.ariaLabel)}>\n <div class=\"breadcrumb\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsBreadcrumb;\n"],"names":["breadcrumbStyle"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-breadcrumb.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/*\n @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n \n @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n \n /\nexport class SgdsBreadcrumb extends SgdsElement {\n static styles = [...SgdsElement.styles, breadcrumbStyle];\n static dependencies = {\n \"sgds-overflow-menu\": SgdsOverflowMenu\n };\n /** The aria-label of nav element within breadcrumb component. /\n @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n /@internal /\n @query(\"slot\") defaultSlot: HTMLSlotElement;\n /*\n creates `<sgds-breadcrumb-item>\n * <sgds-overflow-menu>\n * <sgds-dropdown-item></sgds-dropdown-item>\n * ...\n * </sgds-overflow-menu>\n * <sgds-breadcrumb-item>`\n */\n private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n overflowMenu.setAttribute(\"size\", \"sm\");\n const mapItems = items.filter((item, index) => {\n if (index > 0 && index < items.length - 2) {\n const clonedAnchor = item.querySelector(\"a\");\n const clonedAnchorNode = clonedAnchor.cloneNode(true);\n const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n dropdownItem.appendChild(clonedAnchorNode);\n overflowMenu.appendChild(dropdownItem);\n return;\n } else {\n return item;\n }\n });\n breadcrumbItem.appendChild(overflowMenu);\n mapItems.splice(1, 0, breadcrumbItem);\n\n this.defaultSlot.replaceWith(...mapItems);\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement)\n .assignedElements({ flatten: true })\n .filter(\n (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n ) as SgdsBreadcrumbItem[];\n items.forEach((item, index) => {\n if (index === items.length - 1) {\n item.setAttribute(\"aria-current\", \"page\");\n item.active = true;\n } else {\n item.removeAttribute(\"aria-current\");\n }\n });\n\n if (items.length >= 5) {\n this._replaceExcessItemsWithDropdown(items);\n }\n }\n\n render() {\n return html`\n <div aria-label=${ifDefined(this.ariaLabel)}>\n <div class=\"breadcrumb\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsBreadcrumb;\n"],"names":["breadcrumbStyle"],"mappings":"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"}

package/react/components/Card/card.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host([orientation=horizontal]) .card-icon{padding:var(--sgds-padding-xl) 0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.card-icon{line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}`;
+var css_248z = lit.css`:host([tinted]) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}slot[name=menu]::slotted(*){position:absolute;right:20px;top:20px;z-index:10}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=card.cjs.js.map

package/react/components/Card/card.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host([orientation=horizontal]) .card-icon{padding:var(--sgds-padding-xl) 0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.card-icon{line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}`;
+var css_248z = css`:host([tinted]) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}slot[name=menu]::slotted(*){position:absolute;right:20px;top:20px;z-index:10}`;
 export { css_248z as default };
 //# sourceMappingURL=card.js.map

package/react/components/Card/sgds-card.cjs.js CHANGED Viewed

@@ -8,27 +8,23 @@ 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 sgdsLink = require('../Link/sgds-link.cjs.js');
 var card = require('./card.cjs.js');
 /**
  * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
+ * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
  * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
  * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
  * @slot subtitle - The subtitle of the card
  * @slot title - The title of the card
  * @slot description - The paragrapher text of the card
+ * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
  * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
  */
 class SgdsCard extends cardElement.CardElement {
     constructor() {
         super(...arguments);
-        /** Extends the link passed in slot[name="link"] to the entire card */
-        this.stretchedLink = false;
-        /** Disables the card  */
-        this.disabled = false;
-        /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
-        this.orientation = "vertical";
         /** Sets the image position of the card. Available options: `before`, `after` */
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
@@ -40,35 +36,8 @@ class SgdsCard extends cardElement.CardElement {
             icon.style.display = "none";
         }
         if (this._iconNode.length === 0) {
-            const icon = this.shadowRoot.querySelector(".card-icon");
-            icon.style.display = "none";
-        }
-        if (this.disabled && this._linkNode.length > 0) {
-            const hyperlink = this._linkNode[0].querySelector("a");
-            hyperlink.setAttribute("disabled", "true");
-            hyperlink.removeAttribute("href");
-        }
-    }
-    handleTitleSlotChange(e) {
-        const childNodes = e.target.assignedNodes({ flatten: true });
-        if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
-            const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
-            hyperlink.removeAttribute("href");
-        }
-        return;
-    }
-    handleLinkSlotChange(e) {
-        const childNodes = e.target.assignedNodes({ flatten: true });
-        if (childNodes.length > 1) {
-            return console.error("Multiple elements passed into SgdsCard's link slot");
-        }
-        if (!this.stretchedLink)
-            return;
-        if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof sgdsLink.SgdsLink) {
-            const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
-            this.card.setAttribute("href", hyperlink.href);
-            const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
-            linkSlot.style.display = "none";
+            const media = this.shadowRoot.querySelector(".card-media");
+            media.style.display = "none";
         }
     }
     handleImgSlotChange(e) {
@@ -87,20 +56,26 @@ class SgdsCard extends cardElement.CardElement {
         })}"
         tabindex=${cardTabIndex}
       >
+        <div class="card-tinted-bg"></div>
+        <slot name="menu"></slot>
         <div class="card-image">
           <slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
         </div>
-        <div class="card-icon">
+        <div class="card-media">
           <slot name="icon"></slot>
         </div>
         <div class="card-body">
-          <div class="card-header">
-            <slot name="subtitle"></slot>
-            <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+          <div class="card-header-container">
+            <div class="card-header">
+              <slot name="subtitle"></slot>
+              <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+            </div>
+            <slot></slot>
           </div>
           <p class="card-text">
             <slot name="description"></slot>
           </p>
+          <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>
       </${tag}>
@@ -108,27 +83,12 @@ class SgdsCard extends cardElement.CardElement {
     }
 }
 SgdsCard.styles = [...cardElement.CardElement.styles, card["default"]];
-tslib.__decorate([
-    decorators_js.query("a.card")
-], SgdsCard.prototype, "card", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedNodes({ slot: "image", flatten: true })
 ], SgdsCard.prototype, "_imageNode", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedNodes({ slot: "icon", flatten: true })
 ], SgdsCard.prototype, "_iconNode", void 0);
-tslib.__decorate([
-    decorators_js.queryAssignedNodes({ slot: "link", flatten: true })
-], SgdsCard.prototype, "_linkNode", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsCard.prototype, "stretchedLink", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsCard.prototype, "disabled", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsCard.prototype, "orientation", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsCard.prototype, "imagePosition", void 0);

package/react/components/Card/sgds-card.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, ~~query,~~ queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport ~~SgdsLink~~ from \"~~../Link/sgds-link~~\";\nimport cardStyle from \"./card.css\";\n\~~nexport~~ ~~type~~ ~~CardImageAdjustment~~ = \"default\" \| ~~\"padding~~ ~~around\"~~ \| ~~\"aspect~~ ~~ratio\";\nexport~~ ~~type~~ ~~CardImagePosition~~ = ~~\"before\"~~ \| ~~\"after\";\nexport~~ ~~type~~ ~~CardOrientation~~ = ~~\"vertical\"~~ \| ~~\"horizontal\";\~~n~~\n/*\n~~ @~~summary~~ ~~Cards~~ ~~can~~ be ~~used~~ for ~~headers~~ ~~and~~ ~~footers~~, a ~~wide~~ ~~variety~~ of ~~content,~~ ~~contain~~ ~~contextual~~ ~~background~~ ~~colors~~ ~~and~~ ~~images~~.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\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 link - Accepts an anchor element. Only a single element is allowed to be passed in.\n /\nexport class SgdsCard extends CardElement {\n static styles = [...CardElement.styles, cardStyle];\n\n /* @internal /\n @~~query(\"a.card\") card: HTMLAnchorElement;\n\n /* @internal /\n @~~queryAssignedNodes({ slot: \"image\", flatten: true })\n _imageNode!: Array<Node>;\n /* @internal /\n @queryAssignedNodes({ slot: \"icon\", flatten: true })\n _iconNode!: Array<Node>;\n ~~/* @internal /\n @queryAssignedNodes({ slot:~~ \~~"link\", flatten: true })\~~n ~~_linkNode!: Array<Node>;\n\n~~ /* Extends the link passed in slot[name=\"link\"] to the entire card /\n @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n /* Disables the card /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Sets the ~~orientation of the card. Available options: `vertical`, `horizontal` /\n @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\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 icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n icon.style.display = \"none\";\n }\n if (this._iconNode.length === 0) {\n const ~~icon~~ = this.shadowRoot.querySelector(\".card-~~icon~~\") as HTMLDivElement;\n ~~icon~~.style.display = \"none\";\n }\n if (this.disabled && this._linkNode.length > 0) {\n const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n hyperlink.setAttribute(\"disabled\", \"true\");\n hyperlink.removeAttribute(\"href\");\n }\n }\n\n handleTitleSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n const hyperlink = childNodes[0].querySelector(\"a\") \|\| childNodes[0];\n hyperlink.removeAttribute(\"href\");\n }\n return;\n }\n\n handleLinkSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n \| Array<HTMLLinkElement>\n \| Array<HTMLAnchorElement>\n \| Array<SgdsLink>;\n\n if (childNodes.length > 1) {\n return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n }\n\n if (!this.stretchedLink) return;\n\n if (childNodes[0] instanceof HTMLAnchorElement \|\| childNodes[0] instanceof SgdsLink) {\n const hyperlink = (childNodes[0].querySelector(\"a\") \|\| childNodes[0]) as HTMLAnchorElement;\n this.card.setAttribute(\"href\", hyperlink.href);\n const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n linkSlot.style.display = \"none\";\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 <div class=\"card-image\">\n <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n </div>\n <div class=\"card-~~icon~~\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"card-body\">\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 <p class=\"card-text\">\n <slot name=\"description\"></slot>\n </p>\n <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n </div>\n </${tag}>\n `;\n }\n}\n\nexport default SgdsCard;\n"],"names":["CardElement","~~SgdsLink","~~literal","html","classMap","cardStyle","__decorate","~~query","~~queryAssignedNodes","property"],"mappings":"~~;;;;;;;;;;;;;AAWA;;;;;;;;AAQG~~;AACG,MAAO,QAAS,SAAQA,uBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;~~QAiB8C~~,IAAa,CAAA,aAAA,~~GAAG,KAAK,CAAC;;QAGtB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGlB,IAAW,CAAA,WAAA,GAAoB,UAAU,CAAC;;QAG1C,IAAa,CAAA,aAAA,~~GAAsB,QAAQ,CAAC;;QAG5C,IAAe,CAAA,eAAA,GAAwB,SAAS,CAAC;~~KAsF7F~~;~~IApFW~~,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC5E,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC7B;QACD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,MAAM,~~IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;AAC3E,YAAA,IAAI,CAAC,~~KAAK,~~CAAC,OAAO,~~GAAG,~~MAAM,CAAC;SAC7B;AACD,QAAA,~~IAAI,~~IAAI,~~CAAC,~~QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9C,YAAA,MAAM,SAAS,GAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAqB,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAC5E,YAAA,SAAS,CAAC,YAAY,CAAC,~~UAAU,~~EAAE,MAAM,~~CAAC,~~CAAC;AAC3C,YAAA,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SACnC;KACF;AAED,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AAC5B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,~~aAAa,CAAC,~~EAAE,OAAO,EAAE,IAAI,EAAE,CAAuB,CAAC;QAExG,IAAI,IAAI,CAAC,~~aAAa,~~IAAI~~,~~UAAU,~~CAAC~~,CAAC,CAAC,YAAY,iBAAiB,EAAE~~;~~AACpE~~,YAAA,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AACpE,YAAA,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SACnC;QACD,OAAO;KACR;AAED,IAAA,oBAAoB,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAG7D,CAAC;AAEpB,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;SAC5E;QAED,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;AAEhC,QAAA,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,iBAAiB,IAAI,UAAU,CAAC,CAAC,CAAC,YAAYC,iBAAQ,EAAE;AACnF,YAAA,MAAM,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAsB,CAAC;YAC3F,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;YAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAoB,CAAC;AACvF,YAAA,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;~~SACjC~~;KACF;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAElH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SAC7E;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAGC,qBAAO,CAAA,GAAG,GAAGA,qBAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEnE,QAAA,OAAOC,kBAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAAC,oBAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA~~;;;AAGY~~,yCAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA~~;;;;;;;;AAQC~~,~~kEAAA~~,EAAA,IAAI,CAAC,qBAAqB,CAAA~~;;;;;AAKpD~~,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;~~AAjHM~~,QAAM,CAAA,MAAA,GAAG,CAAC,~~GAAGJ~~,uBAAW,CAAC,MAAM,~~EAAEK~~,eAAS,CAApC,CAAsC;~~AAGlCC~~,gBAAA,CAAA;~~IAAhBC~~,~~mBAAK,CAAC,QAAQ,CAAC;AAAyB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIzCD,gBAAA,CAAA;IADCE,~~gCAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;~~AAGzBF~~,gBAAA,CAAA;~~IADCE~~,gCAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;~~AAGxBF~~,gBAAA,CAAA;~~IADCE~~,~~gCAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGoBF,gBAAA,CAAA;IAA3CG,~~sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtBH,gBAAA,CAAA;IAA3CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBH,gBAAA,CAAA;IAA1CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;~~AAA2C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG1CH,gBAAA,CAAA;IAA1CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;~~AAA6C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;~~AAG5CH~~,gBAAA,CAAA;~~IAA1CG~~,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkD,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
1	+ {"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { 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 \"./types\";\nimport cardStyle from \"./card.css\";\n\n/*\n @summary 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 menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\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 SgdsCard extends CardElement {\n static styles = [...CardElement.styles, cardStyle];\n\n /* @internal /\n @queryAssignedNodes({ slot: \"image\", flatten: true })\n _imageNode!: Array<Node>;\n /* @internal /\n @queryAssignedNodes({ slot: \"icon\", flatten: true })\n _iconNode!: Array<Node>;\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 icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n icon.style.display = \"none\";\n }\n if (this._iconNode.length === 0) {\n const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n media.style.display = \"none\";\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 <div class=\"card-tinted-bg\"></div>\n <slot name=\"menu\"></slot>\n <div class=\"card-image\">\n <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n </div>\n <div class=\"card-media\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"card-body\">\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 SgdsCard;\n"],"names":["CardElement","literal","html","classMap","cardStyle","__decorate","queryAssignedNodes","property"],"mappings":";;;;;;;;;;;;AAOA;;;;;;;;;;;AAWG;AACG,MAAO,QAAS,SAAQA,uBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAW6C,IAAa,CAAA,aAAA,GAAsB,QAAQ,CAAC;;QAG5C,IAAe,CAAA,eAAA,GAAwB,SAAS,CAAC;KAyD7F;IAvDW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC5E,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC7B;QACD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,YAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC9B;KACF;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAElH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SAC7E;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAGC,qBAAO,CAAA,GAAG,GAAGA,qBAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEnE,QAAA,OAAOC,kBAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAAC,oBAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA;;;;;AAKY,yCAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;;;;;;;;;AASG,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AArEM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGH,uBAAW,CAAC,MAAM,EAAEI,eAAS,CAApC,CAAsC;AAInDC,gBAAA,CAAA;IADCC,gCAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGzBD,gBAAA,CAAA;IADCC,gCAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmBD,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5CF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkD,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Card/sgds-card.js CHANGED Viewed

@@ -1,30 +1,26 @@
 'use client';
 import { __decorate } from 'tslib';
 import { literal, html } from 'lit/static-html.js';
-import { query, queryAssignedNodes, property } from 'lit/decorators.js';
+import { queryAssignedNodes, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CardElement } from '../../base/card-element.js';
-import { SgdsLink } from '../Link/sgds-link.js';
 import css_248z from './card.js';
 /**
  * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
+ * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
  * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
  * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
  * @slot subtitle - The subtitle of the card
  * @slot title - The title of the card
  * @slot description - The paragrapher text of the card
+ * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
  * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
  */
 class SgdsCard extends CardElement {
     constructor() {
         super(...arguments);
-        /** Extends the link passed in slot[name="link"] to the entire card */
-        this.stretchedLink = false;
-        /** Disables the card  */
-        this.disabled = false;
-        /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
-        this.orientation = "vertical";
         /** Sets the image position of the card. Available options: `before`, `after` */
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
@@ -36,35 +32,8 @@ class SgdsCard extends CardElement {
             icon.style.display = "none";
         }
         if (this._iconNode.length === 0) {
-            const icon = this.shadowRoot.querySelector(".card-icon");
-            icon.style.display = "none";
-        }
-        if (this.disabled && this._linkNode.length > 0) {
-            const hyperlink = this._linkNode[0].querySelector("a");
-            hyperlink.setAttribute("disabled", "true");
-            hyperlink.removeAttribute("href");
-        }
-    }
-    handleTitleSlotChange(e) {
-        const childNodes = e.target.assignedNodes({ flatten: true });
-        if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
-            const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
-            hyperlink.removeAttribute("href");
-        }
-        return;
-    }
-    handleLinkSlotChange(e) {
-        const childNodes = e.target.assignedNodes({ flatten: true });
-        if (childNodes.length > 1) {
-            return console.error("Multiple elements passed into SgdsCard's link slot");
-        }
-        if (!this.stretchedLink)
-            return;
-        if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
-            const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
-            this.card.setAttribute("href", hyperlink.href);
-            const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
-            linkSlot.style.display = "none";
+            const media = this.shadowRoot.querySelector(".card-media");
+            media.style.display = "none";
         }
     }
     handleImgSlotChange(e) {
@@ -83,20 +52,26 @@ class SgdsCard extends CardElement {
         })}"
         tabindex=${cardTabIndex}
       >
+        <div class="card-tinted-bg"></div>
+        <slot name="menu"></slot>
         <div class="card-image">
           <slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
         </div>
-        <div class="card-icon">
+        <div class="card-media">
           <slot name="icon"></slot>
         </div>
         <div class="card-body">
-          <div class="card-header">
-            <slot name="subtitle"></slot>
-            <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+          <div class="card-header-container">
+            <div class="card-header">
+              <slot name="subtitle"></slot>
+              <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+            </div>
+            <slot></slot>
           </div>
           <p class="card-text">
             <slot name="description"></slot>
           </p>
+          <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>
       </${tag}>
@@ -104,27 +79,12 @@ class SgdsCard extends CardElement {
     }
 }
 SgdsCard.styles = [...CardElement.styles, css_248z];
-__decorate([
-    query("a.card")
-], SgdsCard.prototype, "card", void 0);
 __decorate([
     queryAssignedNodes({ slot: "image", flatten: true })
 ], SgdsCard.prototype, "_imageNode", void 0);
 __decorate([
     queryAssignedNodes({ slot: "icon", flatten: true })
 ], SgdsCard.prototype, "_iconNode", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "link", flatten: true })
-], SgdsCard.prototype, "_linkNode", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsCard.prototype, "stretchedLink", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsCard.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SgdsCard.prototype, "orientation", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsCard.prototype, "imagePosition", void 0);

package/react/components/Card/sgds-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, ~~query,~~ queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport ~~SgdsLink~~ from \"~~../Link/sgds-link~~\";\nimport cardStyle from \"./card.css\";\n\~~nexport~~ ~~type~~ ~~CardImageAdjustment~~ = \"default\" \| ~~\"padding~~ ~~around\"~~ \| ~~\"aspect~~ ~~ratio\";\nexport~~ ~~type~~ ~~CardImagePosition~~ = ~~\"before\"~~ \| ~~\"after\";\nexport~~ ~~type~~ ~~CardOrientation~~ = ~~\"vertical\"~~ \| ~~\"horizontal\";\~~n~~\n/*\n~~ @~~summary~~ ~~Cards~~ ~~can~~ be ~~used~~ for ~~headers~~ ~~and~~ ~~footers~~, a ~~wide~~ ~~variety~~ of ~~content,~~ ~~contain~~ ~~contextual~~ ~~background~~ ~~colors~~ ~~and~~ ~~images~~.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\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 link - Accepts an anchor element. Only a single element is allowed to be passed in.\n /\nexport class SgdsCard extends CardElement {\n static styles = [...CardElement.styles, cardStyle];\n\n /* @internal /\n @~~query(\"a.card\") card: HTMLAnchorElement;\n\n /* @internal /\n @~~queryAssignedNodes({ slot: \"image\", flatten: true })\n _imageNode!: Array<Node>;\n /* @internal /\n @queryAssignedNodes({ slot: \"icon\", flatten: true })\n _iconNode!: Array<Node>;\n ~~/* @internal /\n @queryAssignedNodes({ slot:~~ \~~"link\", flatten: true })\~~n ~~_linkNode!: Array<Node>;\n\n~~ /* Extends the link passed in slot[name=\"link\"] to the entire card /\n @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n /* Disables the card /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Sets the ~~orientation of the card. Available options: `vertical`, `horizontal` /\n @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\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 icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n icon.style.display = \"none\";\n }\n if (this._iconNode.length === 0) {\n const ~~icon~~ = this.shadowRoot.querySelector(\".card-~~icon~~\") as HTMLDivElement;\n ~~icon~~.style.display = \"none\";\n }\n if (this.disabled && this._linkNode.length > 0) {\n const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n hyperlink.setAttribute(\"disabled\", \"true\");\n hyperlink.removeAttribute(\"href\");\n }\n }\n\n handleTitleSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n const hyperlink = childNodes[0].querySelector(\"a\") \|\| childNodes[0];\n hyperlink.removeAttribute(\"href\");\n }\n return;\n }\n\n handleLinkSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n \| Array<HTMLLinkElement>\n \| Array<HTMLAnchorElement>\n \| Array<SgdsLink>;\n\n if (childNodes.length > 1) {\n return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n }\n\n if (!this.stretchedLink) return;\n\n if (childNodes[0] instanceof HTMLAnchorElement \|\| childNodes[0] instanceof SgdsLink) {\n const hyperlink = (childNodes[0].querySelector(\"a\") \|\| childNodes[0]) as HTMLAnchorElement;\n this.card.setAttribute(\"href\", hyperlink.href);\n const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n linkSlot.style.display = \"none\";\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 <div class=\"card-image\">\n <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n </div>\n <div class=\"card-~~icon~~\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"card-body\">\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 <p class=\"card-text\">\n <slot name=\"description\"></slot>\n </p>\n <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n </div>\n </${tag}>\n `;\n }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"~~;;;;;;;;;AAWA~~;;;;;;;;~~AAQG~~;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;~~QAiB8C~~,IAAa,CAAA,aAAA,~~GAAG,KAAK,CAAC;;QAGtB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGlB,IAAW,CAAA,WAAA,GAAoB,UAAU,CAAC;;QAG1C,IAAa,CAAA,aAAA,~~GAAsB,QAAQ,CAAC;;QAG5C,IAAe,CAAA,eAAA,GAAwB,SAAS,CAAC;~~KAsF7F~~;~~IApFW~~,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC5E,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC7B;QACD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,MAAM,~~IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;AAC3E,YAAA,IAAI,CAAC,~~KAAK,~~CAAC,OAAO,~~GAAG,~~MAAM,CAAC;SAC7B;AACD,QAAA,~~IAAI,~~IAAI,~~CAAC,~~QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9C,YAAA,MAAM,SAAS,GAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAqB,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAC5E,YAAA,SAAS,CAAC,YAAY,CAAC,~~UAAU,~~EAAE,MAAM,~~CAAC,~~CAAC;AAC3C,YAAA,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SACnC;KACF;AAED,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AAC5B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,~~aAAa,CAAC,~~EAAE,OAAO,EAAE,IAAI,EAAE,CAAuB,CAAC;QAExG,IAAI,IAAI,CAAC,~~aAAa,~~IAAI~~,~~UAAU,~~CAAC~~,CAAC,CAAC,YAAY,iBAAiB,EAAE~~;~~AACpE~~,YAAA,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AACpE,YAAA,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SACnC;QACD,OAAO;KACR;AAED,IAAA,oBAAoB,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAG7D,CAAC;AAEpB,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;SAC5E;QAED,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;AAEhC,QAAA,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,iBAAiB,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,QAAQ,EAAE;AACnF,YAAA,MAAM,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAsB,CAAC;YAC3F,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;YAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAoB,CAAC;AACvF,YAAA,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;~~SACjC~~;KACF;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAElH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SAC7E;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~~;;;AAGY~~,yCAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA~~;;;;;;;;AAQC~~,~~kEAAA~~,EAAA,IAAI,CAAC,qBAAqB,CAAA~~;;;;;AAKpD~~,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;~~AAjHM~~,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,CAApC,CAAsC;~~AAGlC~~,UAAA,CAAA;~~IAAhB,KAAK,CAAC,QAAQ,CAAC;AAAyB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIzC,UAAA,CAAA;~~IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGzB,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;~~AAGxB~~,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGoB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;~~AAA2C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG1C,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;~~AAA6C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5C,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkD,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { 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 \"./types\";\nimport cardStyle from \"./card.css\";\n\n/*\n @summary 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 menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\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 SgdsCard extends CardElement {\n static styles = [...CardElement.styles, cardStyle];\n\n /* @internal /\n @queryAssignedNodes({ slot: \"image\", flatten: true })\n _imageNode!: Array<Node>;\n /* @internal /\n @queryAssignedNodes({ slot: \"icon\", flatten: true })\n _iconNode!: Array<Node>;\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 icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n icon.style.display = \"none\";\n }\n if (this._iconNode.length === 0) {\n const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n media.style.display = \"none\";\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 <div class=\"card-tinted-bg\"></div>\n <slot name=\"menu\"></slot>\n <div class=\"card-image\">\n <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n </div>\n <div class=\"card-media\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"card-body\">\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 SgdsCard;\n"],"names":["cardStyle"],"mappings":";;;;;;;;AAOA;;;;;;;;;;;AAWG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAW6C,IAAa,CAAA,aAAA,GAAsB,QAAQ,CAAC;;QAG5C,IAAe,CAAA,eAAA,GAAwB,SAAS,CAAC;KAyD7F;IAvDW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC5E,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC7B;QACD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,YAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC9B;KACF;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAElH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SAC7E;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;;;;;AAKY,yCAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;;;;;;;;;AASG,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AArEM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,CAApC,CAAsC;AAInD,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGzB,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5C,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkD,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/ComboBox/combo-box.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.combobox .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
+var css_248z = lit.css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.dropdown{display:flex;height:100%}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=combo-box.cjs.js.map

package/react/components/ComboBox/combo-box.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.combobox .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
+var css_248z = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.dropdown{display:flex;height:100%}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
 export { css_248z as default };
 //# sourceMappingURL=combo-box.js.map

package/react/components/Datepicker/sgds-datepicker.cjs.js CHANGED Viewed

@@ -35,7 +35,7 @@ var defaultvalue = require('../../utils/defaultvalue.cjs.js');
  */
 class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownElement.DropdownElement) {
     constructor() {
-        super(...arguments);
+        super();
         /** When true, adds required attribute to input element */
         this.required = false;
         /** When true, adds disabled attribute to input and button element */
@@ -46,10 +46,10 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
          */
         this.value = "";
         /**
-         * @deprecated since v3.1.1 in favour of `value`.
+         * Deprecated since v3.3.0 in favour of `value`.
          * The initial value of DatePicker on first load for single &
          * range mode as array of string. eg.'["22/12/2023"]' for single &
-         * '["22/12/2023","25/12/2023"]' for range respectively
+         * '["22/12/2023","25/12/2023"]' for range respectively @deprecated
          * */
         this.initialValue = [];
         this.dateFormat = "DD/MM/YYYY";
@@ -105,6 +105,18 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
             months: "Choose month",
             years: "Choose year"
         };
+        this.modifierOpt = [
+            {
+                name: "offset",
+                options: {
+                    /**
+                     * size of calendar `--sgds-dimension-320` offset with
+                     *  size of icon button `--sgds-dimension-48`
+                     */
+                    offset: [-320 + 48, 8]
+                }
+            }
+        ];
     }
     isValueEmpty() {
         return this.value === "" || this.value === "DD/MM/YYYY" || this.value === "DD/MM/YYYY - DD/MM/YYYY";
@@ -136,14 +148,6 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
     }
     async connectedCallback() {
         super.connectedCallback();
-        this.modifierOpt = [
-            {
-                name: "offset",
-                options: {
-                    offset: [0, 8]
-                }
-            }
-        ];
         this.addEventListener("sgds-view", this._handleViewChanged);
         this.addEventListener("sgds-change-calendar", this._handleDateChanged);
         this.addEventListener("sgds-update-focus", this._handleFocusDateChanged);