@govtechsg/sgds-web-component 3.4.0-rc.0 → 3.4.0-rc.2

package/components/index.umd.js

@@ -4383,7 +4383,7 @@
       });
   }
 
-  var css_248z$1f = 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}}`;
+  var css_248z$1f = 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{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;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}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -13558,7 +13558,7 @@
       property({ type: Boolean, reflect: true })
   ], SgdsButton.prototype, "fullWidth", void 0);
 
-  var css_248z$Y = 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-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-subtle);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)}`;
+  var css_248z$Y = css`:host([disabled]){cursor:not-allowed}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}: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-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);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-subtle);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(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}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=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),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=footer]::slotted(a:focus),slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
   var css_248z$X = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
 
@@ -13573,7 +13573,8 @@
   class CardElement extends SgdsElement {
       constructor() {
           super(...arguments);
-          /** Extends the link passed in slot[name="link"] to the entire card */
+          /** Extends the link passed in the `link` slot to the entire card. Prefer using the `footer` slot for links going forward. The `link` slot is still supported for backward compatibility, but is **deprecated** and will be removed in a future release.
+           */
           this.stretchedLink = false;
           /** Disables the card  */
           this.disabled = false;
@@ -13597,14 +13598,6 @@
           if (childNodes.length > 1) {
               return console.error("Multiple elements passed into SgdsCard's link slot");
           }
-          if (!this.stretchedLink)
-              return;
-          if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
-              const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
-              this.card.setAttribute("href", hyperlink.href);
-              const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
-              linkSlot.style.display = "none";
-          }
       }
   }
   CardElement.styles = [...SgdsElement.styles, css_248z$X, css_248z$W, css_248z$V, css_248z$U, css_248z$T, css_248z$Y];
@@ -13640,7 +13633,9 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsCard extends CardElement {
       constructor() {
@@ -13649,21 +13644,45 @@
           this.imagePosition = "before";
           /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
           this.imageAdjustment = "default";
-          this.hasSlotController = new HasSlotController(this, "image", "icon", "menu", "description");
+          this.hasSlotController = new HasSlotController(this, "image", "icon", "menu");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
+      }
+      firstUpdated() {
+          var _a, _b;
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       handleImgSlotChange(e) {
           const childNodes = e.target.assignedNodes({ flatten: true });
           if (childNodes.length > 1) {
               console.error("Multiple elements passed into SgdsCard's image slot");
           }
-          if (this.hasSlotController.test("icon") && this.hasSlotController.test("icon")) {
+          if (this.hasSlotController.test("icon") && this.hasSlotController.test("image")) {
               console.error("Both image and icon slots cannot be used together in SgdsCard");
           }
       }
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           const hasImageSlot = this.hasSlotController.test("image");
           const hasIconSlot = this.hasSlotController.test("icon");
           const hasMenuSlot = this.hasSlotController.test("menu");
@@ -13678,7 +13697,10 @@
         <div class="card-tinted-bg"></div>
         
         ${hasMenuSlot ? html ` <slot name="menu"></slot> ` : nothing}
-        <div class=${classMap({ "card-image": hasImageSlot, "card-media": hasIconSlot || hasUpperSlot })}>
+        <div class=${classMap({
+            "card-image": hasImageSlot,
+            "card-media": hasIconSlot || hasUpperSlot
+        })}>
           <slot name="upper">
           ${hasImageSlot ? html ` <slot name="image" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}
           ${hasIconSlot ? html ` <slot name="icon"></slot> ` : nothing}
@@ -13693,19 +13715,23 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
       }
   }
   SgdsCard.styles = [...CardElement.styles, css_248z$S];
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsCard.prototype, "imagePosition", void 0);
@@ -14817,7 +14843,10 @@
    * @slot icon - slot for form control icon to be displayed on the right of the input box.
    *
    * @event sgds-select - Emitted when the combo box's selected value changes.
+   * @event sgds-change - Emitted when the combo box's value changes.
    * @event sgds-input -  Emitted when user input is received and its value changes.
+   * @event sgds-focus -  Emitted when user input is focused.
+   * @event sgds-blur -  Emitted when user input is blurred.
    */
   class SgdsComboBox extends SelectElement {
       constructor() {
@@ -14954,8 +14983,12 @@
               }
           }
       }
+      _handleFocus() {
+          this.emit("sgds-focus");
+      }
       async _handleInputBlur(e) {
           e.preventDefault();
+          this.emit("sgds-blur");
           if (this.multiSelect) {
               const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);
               if (displayValueMatchedSelectedItems.length <= 0) {
@@ -15057,6 +15090,7 @@
             .value=${this.displayValue}
             @input=${this._handleInputChange}
             @blur=${this._handleInputBlur}
+            @focus=${this._handleFocus}
             aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
             aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
             ? `${this._controlId}-invalid`
@@ -26277,13 +26311,7 @@
       }
   }
 
-  const LG_BREAKPOINT = 1024;
-  const MD_BREAKPOINT = 768;
-  const SM_BREAKPOINT = 512;
-  const XL_BREAKPOINT = 1280;
-  const XXL_BREAKPOINT = 1440;
-
-  var css_248z$z = css`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);overflow:auto;padding:var(--sgds-padding-lg);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:90%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:90%}.drawer-bottom .drawer-panel{bottom:0;height:90%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:90%}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-font-size-7:var(--sgds-font-size-4);color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-6,var(--sgds-font-size-4));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,var(--sgds-margin-none))}slot[name=footer]::slotted(*){box-shadow:0 -2px 2px 0 hsla(0,0%,5%,.08);margin:var(--sgds-margin-none) calc(var(--sgds-margin-xs)*-1);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}sgds-close-button{position:absolute;right:8px;top:8px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}@media screen and (min-width:512px){.drawer-panel{padding:var(--sgds-padding-2-xl)}slot[name=footer]::slotted(*){margin:var(--sgds-margin-none) calc(var(--sgds-margin-md)*-1);padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}}`;
+  var css_248z$z = css`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);overflow:auto;padding:var(--sgds-padding-lg);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-font-size-7:var(--sgds-font-size-4);color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-6,var(--sgds-font-size-4));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,var(--sgds-margin-none))}slot[name=footer]::slotted(*){box-shadow:0 -2px 2px 0 hsla(0,0%,5%,.08);margin:var(--sgds-margin-none) calc(var(--sgds-margin-xs)*-1);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}sgds-close-button{position:absolute;right:8px;top:8px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}@media screen and (min-width:512px){.drawer-panel{padding:var(--sgds-padding-2-xl)}slot[name=footer]::slotted(*){margin:var(--sgds-margin-none) calc(var(--sgds-margin-md)*-1);padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}}`;
 
   /**
    * @summary Drawers slide in from a container to expose additional options and information.
@@ -26327,10 +26355,6 @@
            * its parent element, set this attribute and add `position: relative` to the parent.
            */
           this.contained = false;
-          this._handleResize = async () => {
-              const replacePlacement = this.drawerPlacement === "top" ? "top" : "bottom";
-              this.placement = window.innerWidth < SM_BREAKPOINT ? replacePlacement : this.drawerPlacement;
-          };
           this.handleDocumentKeyDown = (event) => {
               if (this.open && !this.contained && event.key === "Escape") {
                   event.stopPropagation();
@@ -26339,24 +26363,16 @@
           };
       }
       firstUpdated() {
-          this.drawer.hidden = !this.open;
           if (this.open) {
               this.addOpenListeners();
               if (!this.contained) {
                   lockBodyScrolling(this);
               }
           }
-          this._handleResize();
-      }
-      connectedCallback() {
-          super.connectedCallback();
-          this.drawerPlacement = this.placement;
-          window.addEventListener("resize", this._handleResize);
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           unlockBodyScrolling(this);
-          window.removeEventListener("resize", this._handleResize);
       }
       uppercaseFirstLetter(string) {
           return string.charAt(0).toUpperCase() + string.slice(1);
@@ -26484,11 +26500,12 @@
           return waitForEvent(this, "sgds-after-hide");
       }
       render() {
+          const isHydrated = this.hasUpdated;
+          const shouldHide = !this.open && !isHydrated;
           return html$1 `
       <div
         class=${classMap({
             drawer: true,
-            "drawer-open": this.open,
             "drawer-top": this.placement === "top",
             "drawer-end": this.placement === "end",
             "drawer-bottom": this.placement === "bottom",
@@ -26496,6 +26513,7 @@
             "drawer-contained": this.contained,
             "drawer-fixed": !this.contained
         })}
+        ?hidden=${shouldHide}
       >
         <div class="drawer-overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
 
@@ -26548,9 +26566,6 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsDrawer.prototype, "contained", void 0);
-  __decorate([
-      state()
-  ], SgdsDrawer.prototype, "drawerPlacement", void 0);
   __decorate([
       watch("open", { waitUntilFirstUpdate: true })
   ], SgdsDrawer.prototype, "handleOpenChange", null);
@@ -26978,16 +26993,30 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsIconCard extends CardElement {
       constructor() {
           super(...arguments);
           /** Removes the card's internal padding when set to true.  */
           this.noPadding = false;
-          this.hasSlotController = new HasSlotController(this, "description");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
       }
       firstUpdated() {
+          var _a, _b;
           if (this._iconNode.length === 0) {
               if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
                   const media = this.shadowRoot.querySelector(".card-media");
@@ -26997,14 +27026,24 @@
                       body.style.padding = "0px";
               }
           }
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           return html `
       <${tag} 
-        class="card ${classMap({
+        class="${classMap({
+            card: true,
             disabled: this.disabled
         })}"
         tabindex=${cardTabIndex}
@@ -27023,13 +27062,11 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
@@ -27042,6 +27079,12 @@
   __decorate([
       queryAssignedNodes({ slot: "upper", flatten: true })
   ], SgdsIconCard.prototype, "_upperNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsIconCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsIconCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsIconCard.prototype, "noPadding", void 0);
@@ -27090,7 +27133,9 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsImageCard extends CardElement {
       constructor() {
@@ -27101,9 +27146,21 @@
           this.imagePosition = "before";
           /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
           this.imageAdjustment = "default";
-          this.hasSlotController = new HasSlotController(this, "description");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
       }
       firstUpdated() {
+          var _a, _b;
           if (this._imageNode.length === 0) {
               const image = this.shadowRoot.querySelector(".card-image");
               const body = this.shadowRoot.querySelector(".card-body");
@@ -27111,6 +27168,16 @@
               if (this.noPadding)
                   body.style.padding = "0px";
           }
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       handleImgSlotChange(e) {
           const childNodes = e.target.assignedNodes({ flatten: true });
@@ -27121,7 +27188,6 @@
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           return html `
       <${tag} 
         class="card ${classMap({
@@ -27144,13 +27210,11 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
@@ -27160,6 +27224,12 @@
   __decorate([
       queryAssignedNodes({ slot: "image", flatten: true })
   ], SgdsImageCard.prototype, "_imageNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsImageCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsImageCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsImageCard.prototype, "noPadding", void 0);
@@ -27653,7 +27723,14 @@
       });
   }
 
-  const MainnavContext = createContext("mainnav-context");
+  const LG_BREAKPOINT = 1024;
+  const MD_BREAKPOINT = 768;
+  const SM_BREAKPOINT = 512;
+  const XL_BREAKPOINT = 1280;
+  const XXL_BREAKPOINT = 1440;
+
+  const MainnavBreakpointContext = createContext("mainnav-context");
+  const MainnavExpandedContext = createContext("mainnav-expanded-context");
 
   var css_248z$t = css`:host{z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{outline:0}.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);bottom:0;box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:768px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
@@ -27684,6 +27761,10 @@
       constructor() {
           super();
           this._breakpointReached = false;
+          /** Indicates if mobile menu is open or closed */
+          this.expanded = false;
+          /** Denotes the transition state of mobile mainnav menu opening  */
+          this.expanding = false;
           /** The href link for brand logo */
           this.brandHref = "";
           this.collapseId = genId("mainnav", "collapse");
@@ -27691,8 +27772,6 @@
           this.expand = "lg";
           /** @internal */
           this.breakpointReached = false;
-          /** @internal */
-          this.expanded = false;
           window.addEventListener("resize", () => {
               const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
               if (newBreakpointReachedValue !== this.breakpointReached) {
@@ -27700,7 +27779,8 @@
               }
               else {
                   this.body ? (this.body.hidden = true) : null;
-                  this.expanded = false;
+                  // this.expanded = false;
+                  this.expanding = false;
               }
               if (newBreakpointReachedValue) {
                   this._handleMobileNav();
@@ -27774,6 +27854,7 @@
       async _animateToShow() {
           const sgdsShow = this.emit("sgds-show", { cancelable: true });
           if (sgdsShow.defaultPrevented) {
+              this.expanding = false;
               this.expanded = false;
               return;
           }
@@ -27787,6 +27868,7 @@
       async _animateToHide() {
           const slHide = this.emit("sgds-hide", { cancelable: true });
           if (slHide.defaultPrevented) {
+              this.expanding = false;
               this.expanded = true;
               return;
           }
@@ -27798,14 +27880,16 @@
           this.emit("sgds-after-hide");
       }
       async handleOpenChange() {
-          if (this.expanded) {
+          if (this.expanding) {
               // Show
-              this._animateToShow();
+              await this._animateToShow();
+              this.expanded = true;
           }
           else {
               this.header.focus();
               // Hide
-              this._animateToHide();
+              await this._animateToHide();
+              this.expanded = false;
           }
       }
       /** Shows the menu. For when mainnav is in the collapsed form */
@@ -27813,7 +27897,7 @@
           if (this.expanded) {
               return;
           }
-          this.expanded = true;
+          this.expanding = true;
           return waitForEvent(this, "sgds-after-show");
       }
       /** Hide the menu. For when mainnav is in the collapsed form */
@@ -27821,7 +27905,7 @@
           if (!this.expanded) {
               return;
           }
-          this.expanded = false;
+          this.expanding = false;
           document.querySelector("body").style.removeProperty("overflow");
           return waitForEvent(this, "sgds-after-hide");
       }
@@ -27882,9 +27966,16 @@
       "sgds-icon-button": SgdsIconButton
   };
   __decorate([
-      provide({ context: MainnavContext }),
+      provide({ context: MainnavBreakpointContext }),
       state()
   ], SgdsMainnav.prototype, "_breakpointReached", void 0);
+  __decorate([
+      provide({ context: MainnavExpandedContext }),
+      state()
+  ], SgdsMainnav.prototype, "expanded", void 0);
+  __decorate([
+      state()
+  ], SgdsMainnav.prototype, "expanding", void 0);
   __decorate([
       query("nav")
   ], SgdsMainnav.prototype, "nav", void 0);
@@ -27912,9 +28003,6 @@
   __decorate([
       state()
   ], SgdsMainnav.prototype, "breakpointReached", void 0);
-  __decorate([
-      state()
-  ], SgdsMainnav.prototype, "expanded", void 0);
   __decorate([
       queryAssignedElements()
   ], SgdsMainnav.prototype, "defaultNodes", void 0);
@@ -27922,7 +28010,7 @@
       queryAssignedElements({ slot: "end" })
   ], SgdsMainnav.prototype, "endNodes", void 0);
   __decorate([
-      watch("expanded", { waitUntilFirstUpdate: true })
+      watch("expanding", { waitUntilFirstUpdate: true })
   ], SgdsMainnav.prototype, "handleOpenChange", null);
   setDefaultAnimation("mainnav.show", {
       keyframes: [
@@ -27951,6 +28039,7 @@
   class SgdsMainnavDropdown extends SgdsElement {
       constructor() {
           super(...arguments);
+          this._breakpointReached = true;
           /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
           this.togglerId = genId("dropdown", "button");
           /** When true,  applies active styles on the dropdown button */
@@ -27962,34 +28051,6 @@
       get defaultSlotItems() {
           return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
       }
-      connectedCallback() {
-          super.connectedCallback();
-          document.addEventListener("sgds-after-hide", (e) => {
-              const target = e.target;
-              const mainnav = target.closest("sgds-mainnav");
-              if (mainnav) {
-                  this._resetDropdownMenu();
-                  this._hideDropdownMenuItems();
-              }
-          });
-      }
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          // Clean up the event listener when the element is removed from the DOM
-          document.removeEventListener("sgds-after-hide", () => {
-              this._resetDropdownMenu();
-              this._hideDropdownMenuItems();
-          });
-      }
-      willUpdate(changedProperties) {
-          super.willUpdate(changedProperties);
-          if (!this.shadowRoot) {
-              return;
-          }
-          if (this._breakpointReached) {
-              this.shadowRoot.adoptedStyleSheets = [css_248z$14.styleSheet, css_248z$s.styleSheet];
-          }
-      }
       updated() {
           if (this._breakpointReached) {
               this._copyTextToMenu();
@@ -28133,12 +28194,9 @@
           }
       }
       _closeMenu() {
-          // 200ms delay as the transform transition is set to this timing
           this._resetDropdownMenu();
-          setTimeout(() => {
-              this._hideDropdownMenuItems();
-              this.navLink.focus();
-          }, 200);
+          this._hideDropdownMenuItems();
+          this.navLink.focus();
       }
       render() {
           const mobileView = html$1 `
@@ -28204,9 +28262,13 @@
       "sgds-icon": SgdsIcon
   };
   __decorate([
-      consume({ context: MainnavContext, subscribe: true }),
+      consume({ context: MainnavBreakpointContext, subscribe: true }),
       state()
   ], SgdsMainnavDropdown.prototype, "_breakpointReached", void 0);
+  __decorate([
+      consume({ context: MainnavExpandedContext, subscribe: true }),
+      state()
+  ], SgdsMainnavDropdown.prototype, "expanded", void 0);
   __decorate([
       query(".nav-link")
   ], SgdsMainnavDropdown.prototype, "navLink", void 0);
@@ -28632,7 +28694,7 @@
       }
   }
 
-  var css_248z$o = css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:var(--sgds-margin-sm) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-sm) - var(--sgds-margin-sm));position:relative;width:100%}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-sm)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-md);max-height:calc(100% - var(--sgds-margin-md) - var(--sgds-margin-md))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));max-width:var(--sgds-dimension-896)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1176)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1320)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+  var css_248z$o = css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:var(--sgds-margin-sm) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-sm) - var(--sgds-margin-sm));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0}.modal-header__close{position:relative;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-sm)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-md);max-height:calc(100% - var(--sgds-margin-md) - var(--sgds-margin-md))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));max-width:var(--sgds-dimension-896)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1176)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1320)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 
   /**
    * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
@@ -30089,6 +30151,10 @@
    * @summary Select is used to make one selection from a list through keyboard or mouse actions
    *
    * @event sgds-select - Emitted when an option is selected and the value of select is updated
+   * @event sgds-change - Emitted when the select value changes.
+   * @event sgds-focus -  Emitted when user input is focused.
+   * @event sgds-blur -  Emitted when user input is blurred.
+   *
    */
   class SgdsSelect extends SelectElement {
       connectedCallback() {
@@ -30113,6 +30179,8 @@
           }
       }
       async _handleValueChange() {
+          // when value change, always emit a change event
+          this.emit("sgds-change");
           if (this.value) {
               this.emit("sgds-select");
           }
@@ -30137,8 +30205,12 @@
           this.displayValue = this.selectedItems[0].label;
           this.hideMenu();
       }
+      _handleFocus() {
+          this.emit("sgds-focus");
+      }
       async _handleInputBlur(e) {
           e.preventDefault();
+          this.emit("sgds-blur");
           if (this.selectedItems.length > 0) {
               this.displayValue = this.selectedItems[0].label;
           }
@@ -30196,6 +30268,7 @@
             ?required=${this.required}
             .value=${this.displayValue}
             @blur=${this._handleInputBlur}
+            @focus=${this._handleFocus}
             aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
             aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
             ? `${this._controlId}-invalid`
@@ -31922,7 +31995,7 @@
       watch("value", { waitUntilFirstUpdate: true })
   ], SgdsTextarea.prototype, "_handleValueChange", null);
 
-  var css_248z$2 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:64px;max-width:128px;min-width:64px;object-fit:contain;object-position:left}`;
+  var css_248z$2 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:64px!important;max-width:128px!important;min-width:64px!important;object-fit:contain;object-position:left;width:100%}`;
 
   /**
    * @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
@@ -31933,16 +32006,30 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsThumbnailCard extends CardElement {
       constructor() {
           super(...arguments);
           /** Removes the card's internal padding when set to true.  */
           this.noPadding = false;
-          this.hasSlotController = new HasSlotController(this, "description");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
       }
       firstUpdated() {
+          var _a, _b;
           if (this._thumbnailNode.length === 0) {
               if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
                   const media = this.shadowRoot.querySelector(".card-media");
@@ -31952,11 +32039,20 @@
                       body.style.padding = "0px";
               }
           }
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           return html `
       <${tag} 
         class="card ${classMap({
@@ -31978,13 +32074,11 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
@@ -31997,6 +32091,12 @@
   __decorate([
       queryAssignedNodes({ slot: "upper", flatten: true })
   ], SgdsThumbnailCard.prototype, "_upperNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsThumbnailCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsThumbnailCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsThumbnailCard.prototype, "noPadding", void 0);