@govtechsg/sgds-web-component 3.20.0-rc.3 → 3.20.0

package/react/components/SystemBanner/system-banner-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
+var css_248z = lit.css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}::slotted(sgds-icon){align-self:center}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=system-banner-item.cjs.js.map

package/react/components/SystemBanner/system-banner-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
+var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}::slotted(sgds-icon){align-self:center}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=system-banner-item.js.map

package/react/styles/form-text-control.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-text-control.cjs.js.map

package/react/styles/form-text-control.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/styles/form-text-control.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/types/react.d.ts

@@ -1232,7 +1232,7 @@ export interface SgdsStepProps extends SgdsBaseProps {
   stepHeader?: string;
   /** Optional icon name to display instead of step number */
   iconName?: string | undefined;
-  /** Optional component to render for this step */
+  /** Optional component reference associated with this step. Retrievable via `sgds-stepper.getComponent()`. */
   component?: unknown;
   /** Whether this step is clickable */
   clickable?: boolean;