@govtechsg/sgds-web-component 3.3.1-rc.1 → 3.3.1-rc.2

package/internals/CloseButton/close-button.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.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-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.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)}`;
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.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-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);outline:0}.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-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)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=close-button.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.3.1-rc.1",
+  "version": "3.3.1-rc.2",
   "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-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}: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=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);min-width:var(--sgds-dimension-112);padding:0 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-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.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-body);min-width:var(--sgds-dimension-96);padding:0 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-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = lit.css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}: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=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);min-width:var(--sgds-dimension-112);padding:0 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-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.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-body);min-width:var(--sgds-dimension-96);padding:0 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-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;outline:0}.btn:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.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-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}: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=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);min-width:var(--sgds-dimension-112);padding:0 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-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.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-body);min-width:var(--sgds-dimension-96);padding:0 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-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}: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=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);min-width:var(--sgds-dimension-112);padding:0 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-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.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-body);min-width:var(--sgds-dimension-96);padding:0 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-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;outline:0}.btn:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=button.js.map

package/react/base/card.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+var css_248z = lit.css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=card.cjs.js.map

package/react/base/card.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=card.js.map

package/react/base/sgds-element.cjs2.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+var css_248z = lit.css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sgds-element.cjs2.js.map

package/react/base/sgds-element2.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+var css_248z = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sgds-element2.js.map

package/react/components/Accordion/accordion-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-heading);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
+var css_248z = lit.css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-heading);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0;z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=accordion-item.cjs.js.map

package/react/components/Accordion/accordion-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-heading);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
+var css_248z = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-heading);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0;z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=accordion-item.js.map

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+var css_248z = lit.css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{outline:0}.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=alert-link.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+var css_248z = css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{outline:0}.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=alert-link.js.map

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

@@ -113,7 +113,9 @@ class SgdsBadge extends sgdsElement["default"] {
     render() {
         return (this.dismissible && this.show) || !this.dismissible
             ? this.truncated
-                ? lit.html `<sgds-tooltip content=${this.text}>${this._renderBadge()}</sgds-tooltip>`
+                ? lit.html `<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}
+            >${this._renderBadge()}</sgds-tooltip
+          >`
                 : this._renderBadge()
             : lit.nothing;
     }

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 = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\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  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\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    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=${this.outlined ? \"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}>${this._renderBadge()}</sgds-tooltip>`\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 \"../../internals/CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\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  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\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    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=${this.outlined ? \"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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"}

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

@@ -109,7 +109,9 @@ class SgdsBadge extends SgdsElement {
     render() {
         return (this.dismissible && this.show) || !this.dismissible
             ? this.truncated
-                ? html `<sgds-tooltip content=${this.text}>${this._renderBadge()}</sgds-tooltip>`
+                ? html `<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}
+            >${this._renderBadge()}</sgds-tooltip
+          >`
                 : this._renderBadge()
             : nothing;
     }

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 = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\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  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\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    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=${this.outlined ? \"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}>${this._renderBadge()}</sgds-tooltip>`\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 \"../../internals/CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\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  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\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    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=${this.outlined ? \"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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"}

package/react/components/Datepicker/datepicker-calendar.cjs2.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus,button.year:focus,td[data-day]:focus{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
+var css_248z = lit.css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=datepicker-calendar.cjs2.js.map

package/react/components/Datepicker/datepicker-calendar2.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus,button.year:focus,td[data-day]:focus{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
+var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=datepicker-calendar2.js.map

package/react/components/Footer/footer-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a[target=_blank]){align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+var css_248z = lit.css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){outline:0}.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=footer-item.cjs.js.map

package/react/components/Footer/footer-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a[target=_blank]){align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){outline:0}.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=footer-item.js.map

package/react/components/Footer/footer.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
+var css_248z = lit.css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{outline:0}.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis);outline:0}slot[name=social-media]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=footer.cjs.js.map

package/react/components/Footer/footer.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
+var css_248z = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{outline:0}.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis);outline:0}slot[name=social-media]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=footer.js.map

package/react/components/Footer/sgds-footer.cjs.js

@@ -91,9 +91,9 @@ class SgdsFooter extends sgdsElement["default"] {
               <li><a href=${this.feedbackHref}>Feedback</a></li>
               <li><a href=${this.faqHref}>FAQ</a></li>
               <li>
-                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
-                  Report Vulnerability
-                </a>
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
+                  >Report Vulnerability</a
+                >
               </li>
               <li><a href=${this.privacyHref}>Privacy Statement</a></li>
               <li><a href=${this.termsOfUseHref}>Terms of use</a></li>

package/react/components/Footer/sgds-footer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"social-media\", \"title\", \"description\", \"items\");\n\n  render() {\n    const hasSocialMediaSlot = this.hasSlotController.test(\"social-media\");\n    const hasTitleSlot = this.hasSlotController.test(\"title\");\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    const hasItemsSlot = this.hasSlotController.test(\"items\");\n\n    const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;\n    const displayFooterItems = hasItemsSlot;\n    const displaySocialMedia = hasSocialMediaSlot;\n    const displayFooterTop = displayFooterHeader || displayFooterItems;\n\n    return html`\n      <footer class=\"footer\">\n        ${displayFooterTop\n          ? html` <section class=\"footer-top\">\n              ${displayFooterHeader\n                ? html`\n                    <div class=\"footer-header\">\n                      <slot name=\"title\"></slot>\n                      <slot name=\"description\"></slot>\n                    </div>\n                  `\n                : nothing}\n              ${displayFooterItems\n                ? html` <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>`\n                : nothing}\n            </section>`\n          : nothing}\n\n        <section class=\"footer-bottom\">\n          ${displaySocialMedia\n            ? html`\n                <div class=\"social-media\">\n                  <slot name=\"social-media\"></slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","HasSlotController","html","nothing","footerStyle","__decorate","property"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"social-media\", \"title\", \"description\", \"items\");\n\n  render() {\n    const hasSocialMediaSlot = this.hasSlotController.test(\"social-media\");\n    const hasTitleSlot = this.hasSlotController.test(\"title\");\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    const hasItemsSlot = this.hasSlotController.test(\"items\");\n\n    const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;\n    const displayFooterItems = hasItemsSlot;\n    const displaySocialMedia = hasSocialMediaSlot;\n    const displayFooterTop = displayFooterHeader || displayFooterItems;\n\n    return html`\n      <footer class=\"footer\">\n        ${displayFooterTop\n          ? html` <section class=\"footer-top\">\n              ${displayFooterHeader\n                ? html`\n                    <div class=\"footer-header\">\n                      <slot name=\"title\"></slot>\n                      <slot name=\"description\"></slot>\n                    </div>\n                  `\n                : nothing}\n              ${displayFooterItems\n                ? html` <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>`\n                : nothing}\n            </section>`\n          : nothing}\n\n        <section class=\"footer-bottom\">\n          ${displaySocialMedia\n            ? html`\n                <div class=\"social-media\">\n                  <slot name=\"social-media\"></slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                  >Report Vulnerability</a\n                >\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","HasSlotController","html","nothing","footerStyle","__decorate","property"],"mappings":"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"}

package/react/components/Footer/sgds-footer.js

@@ -87,9 +87,9 @@ class SgdsFooter extends SgdsElement {
               <li><a href=${this.feedbackHref}>Feedback</a></li>
               <li><a href=${this.faqHref}>FAQ</a></li>
               <li>
-                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
-                  Report Vulnerability
-                </a>
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
+                  >Report Vulnerability</a
+                >
               </li>
               <li><a href=${this.privacyHref}>Privacy Statement</a></li>
               <li><a href=${this.termsOfUseHref}>Terms of use</a></li>