@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.6.0-rc.2",
+  "version": "3.6.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/base/button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-16);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-24);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = lit.css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-0);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-16);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-24);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=button.cjs.js.map

package/react/base/button.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-16);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-24);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-0);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-16);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-24);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=button.js.map

package/react/close-button/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 sgdsCloseButton = require('../components/CloseButton/sgds-close-button.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-close-button", sgdsCloseButton.SgdsCloseButton);
+var index = react.createComponent({
+    react: React__namespace,
+    tagName: "sgds-close-button",
+    elementClass: sgdsCloseButton.SgdsCloseButton,
+    events: {}
+});
+
+exports["default"] = index;
+//# sourceMappingURL=index.cjs.js.map

package/react/close-button/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/close-button/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/CloseButton/sgds-close-button\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-close-button\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-close-button\",\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/close-button/index.d.ts

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

package/react/close-button/index.js

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

package/react/close-button/index.js.map

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

package/react/components/Alert/sgds-alert.cjs.js

@@ -10,7 +10,7 @@ var classMap_js = require('lit/directives/class-map.js');
 var staticHtml_js = require('lit/static-html.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
-var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs.js');
+var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
 var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var alert = require('./alert.cjs.js');
 
@@ -66,7 +66,7 @@ class SgdsAlert extends sgdsElement["default"] {
                 ? staticHtml_js.html `<sgds-close-button
                   aria-label="close the alert"
                   @click=${this.close}
-                  variant=${this.outlined ? "dark" : "light"}
+                  tone=${this.outlined ? "fixed-dark" : "fixed-light"}
                 ></sgds-close-button>`
                 : lit.nothing}
           </div>

package/react/components/Alert/sgds-alert.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-alert.cjs.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["SgdsElement","html","classMap","nothing","alertStyle","SgdsCloseButton","SgdsIcon","__decorate","property","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-alert.cjs.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=${this.outlined ? \"fixed-dark\" : \"fixed-light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["SgdsElement","html","classMap","nothing","alertStyle","SgdsCloseButton","SgdsIcon","__decorate","property","watch"],"mappings":"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"}

package/react/components/Alert/sgds-alert.js

@@ -6,7 +6,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit/static-html.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { watch } from '../../utils/watch.js';
-import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
 import { SgdsIcon } from '../Icon/sgds-icon.js';
 import css_248z from './alert.js';
 
@@ -62,7 +62,7 @@ class SgdsAlert extends SgdsElement {
                 ? html `<sgds-close-button
                   aria-label="close the alert"
                   @click=${this.close}
-                  variant=${this.outlined ? "dark" : "light"}
+                  tone=${this.outlined ? "fixed-dark" : "fixed-light"}
                 ></sgds-close-button>`
                 : nothing}
           </div>

package/react/components/Alert/sgds-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-alert.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["alertStyle"],"mappings":";;;;;;;;;;;;AAWA;;;;;;;;;AASG;AACG,MAAO,SAAU,SAAQ,WAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;QAQ8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGb,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGrB,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAG9B,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KA4C9D;;IAtCQ,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvD,IAAI,CAAA,CAAA;;AAES,mBAAA,EAAA,QAAQ,CAAC;AAChB,gBAAA,KAAK,EAAE,IAAI;gBACX,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;gBACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;;;AAItC,cAAA,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,CAA4B,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA,MAAA,CAAQ,GAAG,OAAO,CAAA;;;AAG3E,YAAA,EAAA,IAAI,CAAC,WAAW;kBACd,IAAI,CAAA,CAAA;;AAEO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAE,OAAO,CAAA;;AAEd,QAAA,CAAA;cACD,OAAO,CAAC;KACb;;AA3DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AACpD;AACO,SAAA,CAAA,YAAY,GAAG;AACpB,IAAA,mBAAmB,EAAE,eAAe;AACpC,IAAA,WAAW,EAAE,QAAQ;AACtB,CAHkB,CAGjB;AAE0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG9B,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,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;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzD,UAAA,CAAA;IADC,KAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-alert.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=${this.outlined ? \"fixed-dark\" : \"fixed-light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["alertStyle"],"mappings":"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"}

package/react/components/Badge/sgds-badge.cjs.js

@@ -11,7 +11,7 @@ var watch = require('../../utils/watch.cjs.js');
 var badge = require('./badge.cjs.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var sgdsTooltip = require('../Tooltip/sgds-tooltip.cjs.js');
-var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs.js');
+var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
 var slot = require('../../utils/slot.cjs.js');
 
 /**
@@ -111,7 +111,7 @@ class SgdsBadge extends sgdsElement["default"] {
             size="sm"
             aria-label="close the badge"
             @click=${this.close}
-            variant=${isDarkCloseButton ? "dark" : "light"}
+            tone=${isDarkCloseButton ? "fixed-dark" : "fixed-light"}
           ></sgds-close-button>`
             : lit.nothing}
     </div>`;

package/react/components/Badge/sgds-badge.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\")\n  _handleTruncation() {\n    // checking of text height if its exceeding parent, it needs to be truncated\n    const badge = this.shadowRoot.querySelector(\".badge\");\n    const badgeLabel = this.shadowRoot.querySelector(\".badge-label\");\n\n    if (badge && badgeLabel) {\n      const labelHeight = badgeLabel.getBoundingClientRect().height;\n      const badgeHeight = badge.getBoundingClientRect().height;\n\n      this.truncated = labelHeight > badgeHeight;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    const isDarkCloseButton = this.outlined || this.variant === \"warning\" || this.variant === \"white\";\n\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        truncated: this.truncated,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            variant=${isDarkCloseButton ? \"dark\" : \"light\"}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["SgdsElement","getTextContent","html","classMap","nothing","badgeStyle","SgdsCloseButton","SgdsTooltip","__decorate","property","state","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\")\n  _handleTruncation() {\n    // checking of text height if its exceeding parent, it needs to be truncated\n    const badge = this.shadowRoot.querySelector(\".badge\");\n    const badgeLabel = this.shadowRoot.querySelector(\".badge-label\");\n\n    if (badge && badgeLabel) {\n      const labelHeight = badgeLabel.getBoundingClientRect().height;\n      const badgeHeight = badge.getBoundingClientRect().height;\n\n      this.truncated = labelHeight > badgeHeight;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    const isDarkCloseButton = this.outlined || this.variant === \"warning\" || this.variant === \"white\";\n\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        truncated: this.truncated,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${isDarkCloseButton ? \"fixed-dark\" : \"fixed-light\"}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["SgdsElement","getTextContent","html","classMap","nothing","badgeStyle","SgdsCloseButton","SgdsTooltip","__decorate","property","state","watch"],"mappings":"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"}

package/react/components/Badge/sgds-badge.js

@@ -7,7 +7,7 @@ import { watch } from '../../utils/watch.js';
 import css_248z from './badge.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { SgdsTooltip } from '../Tooltip/sgds-tooltip.js';
-import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
 import { getTextContent } from '../../utils/slot.js';
 
 /**
@@ -107,7 +107,7 @@ class SgdsBadge extends SgdsElement {
             size="sm"
             aria-label="close the badge"
             @click=${this.close}
-            variant=${isDarkCloseButton ? "dark" : "light"}
+            tone=${isDarkCloseButton ? "fixed-dark" : "fixed-light"}
           ></sgds-close-button>`
             : nothing}
     </div>`;

package/react/components/Badge/sgds-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\")\n  _handleTruncation() {\n    // checking of text height if its exceeding parent, it needs to be truncated\n    const badge = this.shadowRoot.querySelector(\".badge\");\n    const badgeLabel = this.shadowRoot.querySelector(\".badge-label\");\n\n    if (badge && badgeLabel) {\n      const labelHeight = badgeLabel.getBoundingClientRect().height;\n      const badgeHeight = badge.getBoundingClientRect().height;\n\n      this.truncated = labelHeight > badgeHeight;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    const isDarkCloseButton = this.outlined || this.variant === \"warning\" || this.variant === \"white\";\n\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        truncated: this.truncated,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            variant=${isDarkCloseButton ? \"dark\" : \"light\"}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\")\n  _handleTruncation() {\n    // checking of text height if its exceeding parent, it needs to be truncated\n    const badge = this.shadowRoot.querySelector(\".badge\");\n    const badgeLabel = this.shadowRoot.querySelector(\".badge-label\");\n\n    if (badge && badgeLabel) {\n      const labelHeight = badgeLabel.getBoundingClientRect().height;\n      const badgeHeight = badge.getBoundingClientRect().height;\n\n      this.truncated = labelHeight > badgeHeight;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    const isDarkCloseButton = this.outlined || this.variant === \"warning\" || this.variant === \"white\";\n\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        truncated: this.truncated,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${isDarkCloseButton ? \"fixed-dark\" : \"fixed-light\"}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":"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"}

package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js

@@ -23,7 +23,7 @@ class SgdsBreadcrumbItem extends sgdsElement["default"] {
     }
     render() {
         return lit.html `
-      <slot class="nav-link"></slot>
+      <sgds-link><slot class="nav-link"></slot></sgds-link>
       <div class="separator">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
           <path
@@ -37,7 +37,10 @@ class SgdsBreadcrumbItem extends sgdsElement["default"] {
     `;
     }
 }
-SgdsBreadcrumbItem.styles = [...sgdsLink.SgdsLink.styles, breadcrumbItem["default"]];
+SgdsBreadcrumbItem.styles = [breadcrumbItem["default"]];
+SgdsBreadcrumbItem.dependencies = {
+    "sgds-link": sgdsLink.SgdsLink
+};
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsBreadcrumbItem.prototype, "active", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb-item.cjs.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport breadcrumbItemStyle from \"./breadcrumb-item.css\";\nimport SgdsElement from \"../../base/sgds-element\";\n/**\n * @summary Breadcrumb Item are navigational links used in Breadcrumb component\n *\n * @slot default - The link of the item. Pass in anchor tags into this slot\n */\nexport class SgdsBreadcrumbItem extends SgdsElement {\n  static styles = [...SgdsLink.styles, breadcrumbItemStyle];\n  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item  */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`\n      <slot class=\"nav-link\"></slot>\n      <div class=\"separator\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M4.90413 2.13558C4.947 2.0926 4.99793 2.0585 5.05399 2.03524C5.11006 2.01198 5.17016 2 5.23086 2C5.29157 2 5.35167 2.01198 5.40774 2.03524C5.4638 2.0585 5.51473 2.0926 5.55759 2.13558L11.0954 7.67339C11.1384 7.71626 11.1725 7.76718 11.1957 7.82325C11.219 7.87932 11.231 7.93942 11.231 8.00012C11.231 8.06082 11.219 8.12093 11.1957 8.17699C11.1725 8.23306 11.1384 8.28398 11.0954 8.32685L5.55759 13.8647C5.47094 13.9513 5.35341 14 5.23086 14C5.10832 14 4.99079 13.9513 4.90413 13.8647C4.81748 13.778 4.7688 13.6605 4.7688 13.5379C4.7688 13.4154 4.81748 13.2979 4.90413 13.2112L10.1161 8.00012L4.90413 2.78904C4.86116 2.74617 4.82706 2.69525 4.80379 2.63918C4.78053 2.58312 4.76855 2.52301 4.76855 2.46231C4.76855 2.40161 4.78053 2.3415 4.80379 2.28544C4.82706 2.22937 4.86116 2.17845 4.90413 2.13558Z\"\n            fill=\"#757575\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumbItem;\n"],"names":["SgdsElement","html","SgdsLink","breadcrumbItemStyle","__decorate","property"],"mappings":";;;;;;;;;;;;AAKA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,sBAAW,CAAA;AAAnD,IAAA,WAAA,GAAA;;;QAG8C,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAiB5D;IAfC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;;;;;;;;;KAYV,CAAC;KACH;;AAlBM,kBAAM,CAAA,MAAA,GAAG,CAAC,GAAGC,iBAAQ,CAAC,MAAM,EAAEC,yBAAmB,CAA3C,CAA6C;AAEdC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-breadcrumb-item.cjs.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport breadcrumbItemStyle from \"./breadcrumb-item.css\";\nimport SgdsElement from \"../../base/sgds-element\";\n/**\n * @summary Breadcrumb Item are navigational links used in Breadcrumb component\n *\n * @slot default - The link of the item. Pass in anchor tags into this slot\n */\nexport class SgdsBreadcrumbItem extends SgdsElement {\n  static styles = [breadcrumbItemStyle];\n  static dependencies: Record<string, typeof SgdsElement> = {\n    \"sgds-link\": SgdsLink\n  };\n  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item  */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`\n      <sgds-link><slot class=\"nav-link\"></slot></sgds-link>\n      <div class=\"separator\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M4.90413 2.13558C4.947 2.0926 4.99793 2.0585 5.05399 2.03524C5.11006 2.01198 5.17016 2 5.23086 2C5.29157 2 5.35167 2.01198 5.40774 2.03524C5.4638 2.0585 5.51473 2.0926 5.55759 2.13558L11.0954 7.67339C11.1384 7.71626 11.1725 7.76718 11.1957 7.82325C11.219 7.87932 11.231 7.93942 11.231 8.00012C11.231 8.06082 11.219 8.12093 11.1957 8.17699C11.1725 8.23306 11.1384 8.28398 11.0954 8.32685L5.55759 13.8647C5.47094 13.9513 5.35341 14 5.23086 14C5.10832 14 4.99079 13.9513 4.90413 13.8647C4.81748 13.778 4.7688 13.6605 4.7688 13.5379C4.7688 13.4154 4.81748 13.2979 4.90413 13.2112L10.1161 8.00012L4.90413 2.78904C4.86116 2.74617 4.82706 2.69525 4.80379 2.63918C4.78053 2.58312 4.76855 2.52301 4.76855 2.46231C4.76855 2.40161 4.78053 2.3415 4.80379 2.28544C4.82706 2.22937 4.86116 2.17845 4.90413 2.13558Z\"\n            fill=\"#757575\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumbItem;\n"],"names":["SgdsElement","html","breadcrumbItemStyle","SgdsLink","__decorate","property"],"mappings":";;;;;;;;;;;;AAKA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,sBAAW,CAAA;AAAnD,IAAA,WAAA,GAAA;;;QAM8C,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAiB5D;IAfC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;;;;;;;;;KAYV,CAAC;KACH;;AArBM,kBAAA,CAAA,MAAM,GAAG,CAACC,yBAAmB,CAAC,CAAC;AAC/B,kBAAA,CAAA,YAAY,GAAuC;AACxD,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB,CAEjB;AAE0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Breadcrumb/sgds-breadcrumb-item.js

@@ -19,7 +19,7 @@ class SgdsBreadcrumbItem extends SgdsElement {
     }
     render() {
         return html `
-      <slot class="nav-link"></slot>
+      <sgds-link><slot class="nav-link"></slot></sgds-link>
       <div class="separator">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
           <path
@@ -33,7 +33,10 @@ class SgdsBreadcrumbItem extends SgdsElement {
     `;
     }
 }
-SgdsBreadcrumbItem.styles = [...SgdsLink.styles, css_248z];
+SgdsBreadcrumbItem.styles = [css_248z];
+SgdsBreadcrumbItem.dependencies = {
+    "sgds-link": SgdsLink
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsBreadcrumbItem.prototype, "active", void 0);

package/react/components/Breadcrumb/sgds-breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb-item.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport breadcrumbItemStyle from \"./breadcrumb-item.css\";\nimport SgdsElement from \"../../base/sgds-element\";\n/**\n * @summary Breadcrumb Item are navigational links used in Breadcrumb component\n *\n * @slot default - The link of the item. Pass in anchor tags into this slot\n */\nexport class SgdsBreadcrumbItem extends SgdsElement {\n  static styles = [...SgdsLink.styles, breadcrumbItemStyle];\n  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item  */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`\n      <slot class=\"nav-link\"></slot>\n      <div class=\"separator\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M4.90413 2.13558C4.947 2.0926 4.99793 2.0585 5.05399 2.03524C5.11006 2.01198 5.17016 2 5.23086 2C5.29157 2 5.35167 2.01198 5.40774 2.03524C5.4638 2.0585 5.51473 2.0926 5.55759 2.13558L11.0954 7.67339C11.1384 7.71626 11.1725 7.76718 11.1957 7.82325C11.219 7.87932 11.231 7.93942 11.231 8.00012C11.231 8.06082 11.219 8.12093 11.1957 8.17699C11.1725 8.23306 11.1384 8.28398 11.0954 8.32685L5.55759 13.8647C5.47094 13.9513 5.35341 14 5.23086 14C5.10832 14 4.99079 13.9513 4.90413 13.8647C4.81748 13.778 4.7688 13.6605 4.7688 13.5379C4.7688 13.4154 4.81748 13.2979 4.90413 13.2112L10.1161 8.00012L4.90413 2.78904C4.86116 2.74617 4.82706 2.69525 4.80379 2.63918C4.78053 2.58312 4.76855 2.52301 4.76855 2.46231C4.76855 2.40161 4.78053 2.3415 4.80379 2.28544C4.82706 2.22937 4.86116 2.17845 4.90413 2.13558Z\"\n            fill=\"#757575\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumbItem;\n"],"names":["breadcrumbItemStyle"],"mappings":";;;;;;;;AAKA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,WAAW,CAAA;AAAnD,IAAA,WAAA,GAAA;;;QAG8C,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAiB5D;IAfC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;KAYV,CAAC;KACH;;AAlBM,kBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAEA,QAAmB,CAA3C,CAA6C;AAEd,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-breadcrumb-item.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport breadcrumbItemStyle from \"./breadcrumb-item.css\";\nimport SgdsElement from \"../../base/sgds-element\";\n/**\n * @summary Breadcrumb Item are navigational links used in Breadcrumb component\n *\n * @slot default - The link of the item. Pass in anchor tags into this slot\n */\nexport class SgdsBreadcrumbItem extends SgdsElement {\n  static styles = [breadcrumbItemStyle];\n  static dependencies: Record<string, typeof SgdsElement> = {\n    \"sgds-link\": SgdsLink\n  };\n  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item  */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`\n      <sgds-link><slot class=\"nav-link\"></slot></sgds-link>\n      <div class=\"separator\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M4.90413 2.13558C4.947 2.0926 4.99793 2.0585 5.05399 2.03524C5.11006 2.01198 5.17016 2 5.23086 2C5.29157 2 5.35167 2.01198 5.40774 2.03524C5.4638 2.0585 5.51473 2.0926 5.55759 2.13558L11.0954 7.67339C11.1384 7.71626 11.1725 7.76718 11.1957 7.82325C11.219 7.87932 11.231 7.93942 11.231 8.00012C11.231 8.06082 11.219 8.12093 11.1957 8.17699C11.1725 8.23306 11.1384 8.28398 11.0954 8.32685L5.55759 13.8647C5.47094 13.9513 5.35341 14 5.23086 14C5.10832 14 4.99079 13.9513 4.90413 13.8647C4.81748 13.778 4.7688 13.6605 4.7688 13.5379C4.7688 13.4154 4.81748 13.2979 4.90413 13.2112L10.1161 8.00012L4.90413 2.78904C4.86116 2.74617 4.82706 2.69525 4.80379 2.63918C4.78053 2.58312 4.76855 2.52301 4.76855 2.46231C4.76855 2.40161 4.78053 2.3415 4.80379 2.28544C4.82706 2.22937 4.86116 2.17845 4.90413 2.13558Z\"\n            fill=\"#757575\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumbItem;\n"],"names":["breadcrumbItemStyle"],"mappings":";;;;;;;;AAKA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,WAAW,CAAA;AAAnD,IAAA,WAAA,GAAA;;;QAM8C,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAiB5D;IAfC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;KAYV,CAAC;KACH;;AArBM,kBAAA,CAAA,MAAM,GAAG,CAACA,QAAmB,CAAC,CAAC;AAC/B,kBAAA,CAAA,YAAY,GAAuC;AACxD,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAE0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["CardElement","HasSlotController","literal","html","classMap","cardStyle","__decorate","queryAssignedElements","property"],"mappings":"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"}
+{"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport type SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["CardElement","HasSlotController","literal","html","classMap","cardStyle","__decorate","queryAssignedElements","property"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport type SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}

package/react/components/CloseButton/close-button.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=close-button.cjs.js.map