@govtechsg/sgds-web-component 3.19.0-rc.0 → 3.19.0-rc.3

package/package.json

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

package/react/accordion/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsAccordionProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsAccordionProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

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

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsAccordionItemProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsAccordionItemProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/alert/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsAlertProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsAlertProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/alert-link/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsAlertLinkProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsAlertLinkProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/badge/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsBadgeProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsBadgeProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

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(: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([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([stretchedLink]) .card:after{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-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) 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:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-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-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}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-2-xs);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-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = lit.css`:host([disabled]){cursor:not-allowed}: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([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([stretchedLink]) .card:after{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-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) 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-40);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-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-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}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-2-xs);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-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-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(: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([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([stretchedLink]) .card:after{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-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) 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:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-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-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}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-2-xs);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-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}: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([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([stretchedLink]) .card:after{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-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) 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-40);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-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-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}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-2-xs);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-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=card.js.map

package/react/base/option.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`:host([active]) .dropdown-item{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-form-color-default);cursor:pointer;font-size:var(--sgds-font-size-label-md);height:100%;overflow-wrap:anywhere;padding:var(--sgds-padding-sm) var(--sgds-padding-md);text-align:inherit;white-space:normal}.dropdown-item.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-form-primary-color-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=option.cjs.js.map

package/react/base/option.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-form-color-default);cursor:pointer;font-size:var(--sgds-font-size-label-md);height:100%;overflow-wrap:anywhere;padding:var(--sgds-padding-sm) var(--sgds-padding-md);text-align:inherit;white-space:normal}.dropdown-item.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-form-primary-color-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=option.js.map

package/react/breadcrumb/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsBreadcrumbProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsBreadcrumbProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

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

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsBreadcrumbItemProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsBreadcrumbItemProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/button/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsButtonProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsButtonProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/card/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsCardProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsCardProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/checkbox/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsCheckboxProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsCheckboxProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

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

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsCheckboxGroupProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsCheckboxGroupProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/close-button/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsCloseButtonProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsCloseButtonProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/combo-box/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsComboBoxProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsComboBoxProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/combo-box-option/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsComboBoxOptionProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsComboBoxOptionProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

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-subtitle-sm);line-height:var(--sgds-line-height-2-xs);padding:var(--sgds-padding-md)}:host([density=compact]) .accordion-body{font-size:var(--sgds-font-size-body-sm);line-height:var(--sgds-line-height-2-xs)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-md) var(--sgds-padding-md)}:host([density=spacious]) .accordion-btn{font-size:var(--sgds-font-size-heading-sm);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-sm);padding:var(--sgds-padding-xl)}:host([density=spacious]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-xl) var(--sgds-padding-xl)}.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-subtitle-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-md);line-height:var(--sgds-line-height-xs);overflow-anchor:none;padding:var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.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);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=badge]::slotted(*){margin-left:auto}.accordion-header__trailing{display:flex;gap:var(--sgds-gap-md);margin-left:auto}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);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{color:var(--sgds-body-color-subtle);font-size:var(--sgds-font-size-body-md);line-height:var(--sgds-line-height-xs);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-subtitle-sm);line-height:var(--sgds-line-height-2-xs);padding:var(--sgds-padding-md)}:host([density=compact]) .accordion-body{font-size:var(--sgds-font-size-body-sm);line-height:var(--sgds-line-height-2-xs)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-md) var(--sgds-padding-md)}:host([density=spacious]) .accordion-btn{font-size:var(--sgds-font-size-heading-sm);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-sm);padding:var(--sgds-padding-xl)}:host([density=spacious]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-xl) var(--sgds-padding-xl)}.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-subtitle-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-md);line-height:var(--sgds-line-height-xs);overflow-anchor:none;padding:var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.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);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}slot[name=badge]::slotted(*){margin-left:auto}.accordion-header__trailing{display:flex;gap:var(--sgds-gap-md);margin-left:auto}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);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{color:var(--sgds-body-color-subtle);font-size:var(--sgds-font-size-body-md);line-height:var(--sgds-line-height-xs);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-subtitle-sm);line-height:var(--sgds-line-height-2-xs);padding:var(--sgds-padding-md)}:host([density=compact]) .accordion-body{font-size:var(--sgds-font-size-body-sm);line-height:var(--sgds-line-height-2-xs)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-md) var(--sgds-padding-md)}:host([density=spacious]) .accordion-btn{font-size:var(--sgds-font-size-heading-sm);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-sm);padding:var(--sgds-padding-xl)}:host([density=spacious]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-xl) var(--sgds-padding-xl)}.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-subtitle-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-md);line-height:var(--sgds-line-height-xs);overflow-anchor:none;padding:var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.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);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=badge]::slotted(*){margin-left:auto}.accordion-header__trailing{display:flex;gap:var(--sgds-gap-md);margin-left:auto}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);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{color:var(--sgds-body-color-subtle);font-size:var(--sgds-font-size-body-md);line-height:var(--sgds-line-height-xs);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-subtitle-sm);line-height:var(--sgds-line-height-2-xs);padding:var(--sgds-padding-md)}:host([density=compact]) .accordion-body{font-size:var(--sgds-font-size-body-sm);line-height:var(--sgds-line-height-2-xs)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-md) var(--sgds-padding-md)}:host([density=spacious]) .accordion-btn{font-size:var(--sgds-font-size-heading-sm);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-sm);padding:var(--sgds-padding-xl)}:host([density=spacious]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-xl) var(--sgds-padding-xl)}.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-subtitle-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-md);line-height:var(--sgds-line-height-xs);overflow-anchor:none;padding:var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.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);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}slot[name=badge]::slotted(*){margin-left:auto}.accordion-header__trailing{display:flex;gap:var(--sgds-gap-md);margin-left:auto}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);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{color:var(--sgds-body-color-subtle);font-size:var(--sgds-font-size-body-md);line-height:var(--sgds-line-height-xs);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/Checkbox/checkbox-group.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = lit.css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox-group.cjs.js.map

package/react/components/Checkbox/checkbox-group.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox-group.js.map

package/react/components/Checkbox/checkbox.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
+var css_248z = lit.css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1;font-size:var(--sgds-font-size-label-md)}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox.cjs.js.map

package/react/components/Checkbox/checkbox.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
+var css_248z = css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1;font-size:var(--sgds-font-size-label-md)}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox.js.map

package/react/components/Checkbox/sgds-checkbox-group.cjs.js

@@ -7,6 +7,7 @@ var tslib = require('tslib');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var live_js = require('lit/directives/live.js');
+var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var formControlElement = require('../../base/form-control-element.cjs.js');
 var defaultvalue = require('../../utils/defaultvalue.cjs.js');
 var validatorMixin = require('../../utils/validatorMixin.cjs.js');
@@ -193,12 +194,7 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
             ? lit.html `
               <div class="invalid-feedback-container">
                 <slot name="invalidIcon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                    <path
-                      d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
                 </slot>
                 <div id="checkbox-group-feedback" class="invalid-feedback">
                   ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
@@ -211,6 +207,10 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
     }
 }
 SgdsCheckboxGroup.styles = [...formControlElement["default"].styles, checkboxGroup["default"]];
+/**@internal */
+SgdsCheckboxGroup.dependencies = {
+    "sgds-icon": sgdsIcon.SgdsIcon
+};
 tslib.__decorate([
     decorators_js.property({ reflect: true })
 ], SgdsCheckboxGroup.prototype, "label", void 0);

package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  @defaultValue()\n  defaultValue = \"\";\n\n  @state()\n  private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n  @state()\n  private formEvent: FormEvent;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    /** Blurring when all checkboxes are blurred */\n    this.addEventListener(\"sgds-blur\", e => {\n      const checkbox = e.target as SgdsCheckbox;\n      this._blurredCheckboxes.add(checkbox);\n      if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n        this._isTouched = true;\n        this._blurredCheckboxes.clear();\n      }\n    });\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n\n    if (this.invalid) {\n      this._updateInvalid();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n      this.formEvent = null;\n      return;\n    }\n\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * checkbox requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private async _updateInputValue(eventName: FormEvent = \"change\") {\n    this.input.value = this.value;\n\n    this.input.dispatchEvent(new InputEvent(eventName));\n    this.formEvent = eventName;\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","live","nothing","checkboxGroupStyles","__decorate","property","state","defaultValue","queryAssignedElements","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  @defaultValue()\n  defaultValue = \"\";\n\n  @state()\n  private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n  @state()\n  private formEvent: FormEvent;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    /** Blurring when all checkboxes are blurred */\n    this.addEventListener(\"sgds-blur\", e => {\n      const checkbox = e.target as SgdsCheckbox;\n      this._blurredCheckboxes.add(checkbox);\n      if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n        this._isTouched = true;\n        this._blurredCheckboxes.clear();\n      }\n    });\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n\n    if (this.invalid) {\n      this._updateInvalid();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n      this.formEvent = null;\n      return;\n    }\n\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * checkbox requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private async _updateInputValue(eventName: FormEvent = \"change\") {\n    this.input.value = this.value;\n\n    this.input.dispatchEvent(new InputEvent(eventName));\n    this.formEvent = eventName;\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                </slot>\n                <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","live","nothing","checkboxGroupStyles","SgdsIcon","__decorate","property","state","defaultValue","queryAssignedElements","watch"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox-group.js

@@ -3,6 +3,7 @@ import { __decorate } from 'tslib';
 import { html, nothing } from 'lit';
 import { property, state, queryAssignedElements } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 import FormControlElement from '../../base/form-control-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
 import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
@@ -189,12 +190,7 @@ class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {
             ? html `
               <div class="invalid-feedback-container">
                 <slot name="invalidIcon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                    <path
-                      d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
                 </slot>
                 <div id="checkbox-group-feedback" class="invalid-feedback">
                   ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
@@ -207,6 +203,10 @@ class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {
     }
 }
 SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z];
+/**@internal */
+SgdsCheckboxGroup.dependencies = {
+    "sgds-icon": SgdsIcon
+};
 __decorate([
     property({ reflect: true })
 ], SgdsCheckboxGroup.prototype, "label", void 0);

package/react/components/Checkbox/sgds-checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  @defaultValue()\n  defaultValue = \"\";\n\n  @state()\n  private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n  @state()\n  private formEvent: FormEvent;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    /** Blurring when all checkboxes are blurred */\n    this.addEventListener(\"sgds-blur\", e => {\n      const checkbox = e.target as SgdsCheckbox;\n      this._blurredCheckboxes.add(checkbox);\n      if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n        this._isTouched = true;\n        this._blurredCheckboxes.clear();\n      }\n    });\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n\n    if (this.invalid) {\n      this._updateInvalid();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n      this.formEvent = null;\n      return;\n    }\n\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * checkbox requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private async _updateInputValue(eventName: FormEvent = \"change\") {\n    this.input.value = this.value;\n\n    this.input.dispatchEvent(new InputEvent(eventName));\n    this.formEvent = eventName;\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["checkboxGroupStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  @defaultValue()\n  defaultValue = \"\";\n\n  @state()\n  private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n  @state()\n  private formEvent: FormEvent;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    /** Blurring when all checkboxes are blurred */\n    this.addEventListener(\"sgds-blur\", e => {\n      const checkbox = e.target as SgdsCheckbox;\n      this._blurredCheckboxes.add(checkbox);\n      if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n        this._isTouched = true;\n        this._blurredCheckboxes.clear();\n      }\n    });\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n\n    if (this.invalid) {\n      this._updateInvalid();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n      this.formEvent = null;\n      return;\n    }\n\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * checkbox requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private async _updateInputValue(eventName: FormEvent = \"change\") {\n    this.input.value = this.value;\n\n    this.input.dispatchEvent(new InputEvent(eventName));\n    this.formEvent = eventName;\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                </slot>\n                <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["checkboxGroupStyles"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.cjs.js

@@ -9,6 +9,7 @@ var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
 var live_js = require('lit/directives/live.js');
+var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var formControlElement = require('../../base/form-control-element.cjs.js');
 var defaultvalue = require('../../utils/defaultvalue.cjs.js');
 var validatorMixin = require('../../utils/validatorMixin.cjs.js');
@@ -177,12 +178,7 @@ class SgdsCheckbox extends validatorMixin.SgdsFormValidatorMixin(formControlElem
             ? lit.html `
             <div class="invalid-feedback-container">
               <slot name="invalidIcon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <path
-                    d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
-                    fill="currentColor"
-                  />
-                </svg>
+                <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
               </slot>
               <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
                 ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
@@ -194,6 +190,10 @@ class SgdsCheckbox extends validatorMixin.SgdsFormValidatorMixin(formControlElem
     }
 }
 SgdsCheckbox.styles = [...formControlElement["default"].styles, formCheck["default"], checkbox["default"]];
+/**@internal */
+SgdsCheckbox.dependencies = {
+    "sgds-icon": sgdsIcon.SgdsIcon
+};
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsCheckbox.prototype, "value", void 0);