@govtechsg/sgds-web-component 3.24.0-rc.1 → 3.24.1-rc.0

package/components/Switch/switch.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-14)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-20)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
+var css_248z = css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);flex-shrink:0;height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-14)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-20)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=switch.js.map

package/components/Tab/index.umd.min.js

@@ -68,7 +68,7 @@ const Dt=1;class It{constructor(t){}get _$isConnected(){return this._$parent._$i
    * @license
    * Copyright 2018 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */const Wt=(jt=class extends It{constructor(t){if(super(t),t.type!==Dt||"class"!==t.name||t.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter(e=>t[e]).join(" ")+" "}update(t,[e]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==t.strings&&(this._staticClasses=new Set(t.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in e)e[t]&&!this._staticClasses?.has(t)&&this._previousClasses.add(t);return this.render(e)}const s=t.element.classList;for(const t of this._previousClasses)t in e||(s.remove(t),this._previousClasses.delete(t));for(const t in e){const i=!!e[t];i===this._previousClasses.has(t)||this._staticClasses?.has(t)||(i?(s.add(t),this._previousClasses.add(t)):(s.remove(t),this._previousClasses.delete(t)))}return et}},(...t)=>({_$litDirective$:jt,values:t}));var jt,qt=o`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;let Ht=0;class Bt extends Nt{constructor(){super(...arguments),this.attrId=++Ht,this.componentId=`sgds-tab-panel-${this.attrId}`,this.name="",this.active=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel")}_handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true"),this.inert=!this.active}render(){return Q`
+   */const Wt=(jt=class extends It{constructor(t){if(super(t),t.type!==Dt||"class"!==t.name||t.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter(e=>t[e]).join(" ")+" "}update(t,[e]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==t.strings&&(this._staticClasses=new Set(t.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in e)e[t]&&!this._staticClasses?.has(t)&&this._previousClasses.add(t);return this.render(e)}const s=t.element.classList;for(const t of this._previousClasses)t in e||(s.remove(t),this._previousClasses.delete(t));for(const t in e){const i=!!e[t];i===this._previousClasses.has(t)||this._staticClasses?.has(t)||(i?(s.add(t),this._previousClasses.add(t)):(s.remove(t),this._previousClasses.delete(t)))}return et}},(...t)=>({_$litDirective$:jt,values:t}));var jt,qt=o`:host(:not([active])){display:none}.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;let Ht=0;class Bt extends Nt{constructor(){super(...arguments),this.attrId=++Ht,this.componentId=`sgds-tab-panel-${this.attrId}`,this.name="",this.active=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel")}_handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true"),this.inert=!this.active}render(){return Q`
       <slot
         class=${Wt({"tab-panel":!0,"tab-panel--active":this.active})}
       ></slot>