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

package/components/Dropdown/sgds-dropdown-item.d.ts

@@ -15,6 +15,8 @@ export declare class SgdsDropdownItem extends SgdsElement {
     active: boolean;
     /** Disables the SgdsMainnavItem */
     disabled: boolean;
+    /** Forwards aria-label to the inner clickable element for accessibility */
+    ariaLabel: string;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Dropdown/sgds-dropdown-item.js

@@ -2,6 +2,7 @@ import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { SgdsIcon } from '../Icon/sgds-icon.js';
 import css_248z$1 from './dropdown-item.js';
@@ -18,6 +19,8 @@ class SgdsDropdownItem extends SgdsElement {
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
+        /** Forwards aria-label to the inner clickable element for accessibility */
+        this.ariaLabel = "";
     }
     connectedCallback() {
         super.connectedCallback();
@@ -37,6 +40,7 @@ class SgdsDropdownItem extends SgdsElement {
             active: this.active
         })}"
         tabindex=${this.disabled ? "-1" : "0"}
+        aria-label=${ifDefined(this.ariaLabel || undefined)}
       >
         <slot></slot>
       </div>
@@ -56,6 +60,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDropdownItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SgdsDropdownItem.prototype, "ariaLabel", void 0);
 
 export { SgdsDropdownItem, SgdsDropdownItem as default };
 //# sourceMappingURL=sgds-dropdown-item.js.map

package/components/Dropdown/sgds-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown-item.js","sources":["../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;AAOA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KA0BlB;IAxBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;KAIxC,CAAC;KACH;;AAvCM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-dropdown-item.js","sources":["../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Forwards aria-label to the inner clickable element for accessibility */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;KA2BhB;IAzBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AACxB,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAA;;;;KAItD,CAAC;KACH;;AA5CM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

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

@@ -105,7 +105,7 @@ function Le(e){return(t,l)=>ke(t,l,{async get(){return await this.updateComplete
       <button class="btn-close" aria-label="Close button" ?disabled=${this.disabled} @click=${this._handleClick}>
         <sgds-icon name="cross" size="sm"></sgds-icon>
       </button>
-    `}}Mt.styles=[...gt.styles,_t],e([Se({type:String,reflect:!0})],Mt.prototype,"size",void 0),e([Se({type:String,reflect:!0})],Mt.prototype,"tone",void 0),e([Se({type:Boolean,reflect:!0})],Mt.prototype,"disabled",void 0);var Vt=o`.file-upload-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.file-upload-list{display:flex;flex-direction:column;gap:var(--sgds-form-gap-xl);list-style-type:none;margin-top:0}.file-upload-list.has-files{margin-top:var(--sgds-margin-xl)}.filesize{color:var(--sgds-form-color-subtle)}@keyframes fileUploadEnter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes fileUploadExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.file-upload-list-item-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);max-height:500px;overflow:hidden;transition:max-height var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard),opacity var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.file-upload-list-item-container.file-upload-exit{max-height:0;opacity:0}.file-upload-list-item{align-items:center;animation:fileUploadEnter var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter);background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-lg);padding:var(--sgds-form-padding-y) calc(var(--sgds-form-padding-x) + var(--sgds-padding-2-xl)) var(--sgds-form-padding-y) var(--sgds-form-padding-x);position:relative;transition:transform var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.file-upload-list-item.file-upload-error{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.file-upload-list-item.file-upload-exit{animation:fileUploadExit var(--sgds-motion-duration-standard) var(--sgds-motion-easing-exit)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}.file-upload-item-error{align-items:flex-start;display:flex;gap:var(--sgds-form-gap-lg)}.file-upload-item-error sgds-icon{color:var(--sgds-color-muted);flex-shrink:0;margin-top:2px}.file-upload-item-error-message{color:var(--sgds-form-danger-color-default);font-size:var(--sgds-font-size-12);line-height:var(--sgds-line-height-16)}ul{margin:0;padding:0}input{display:none}sgds-button{cursor:pointer;width:fit-content}sgds-close-button{position:absolute;right:8px;top:8px}sgds-icon.valid{color:var(--sgds-form-success-color-default)}sgds-icon.invalid{color:var(--sgds-color-muted)}.drag-drop-zone{align-items:center;background-color:var(--sgds-surface-raised);border:var(--sgds-border-width-1) dashed var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-md);justify-content:center;padding:var(--sgds-padding-2-xl)}.drag-drop-text{font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.drag-drop-zone:focus,.drag-drop-zone:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}:host([disabled]) .file-upload-container>:not(sgds-button):not(.invalid-feedback-container){opacity:var(--sgds-opacity-50)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .drag-drop-zone:focus,:host([disabled]) .drag-drop-zone:focus-visible{outline:none}:host([invalid]:not([disabled])) .drag-drop-zone{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}:host([invalid]:not([disabled])) .drag-drop-zone:focus,:host([invalid]:not([disabled])) .drag-drop-zone:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}:host(:not([disabled]):not([invalid])) .drag-drop-zone:hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}`,Ht=o`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,$t=o`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,St=o`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,Bt=o`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-24)}`;function kt(e="",t=""){return`id-${Math.random().toString().substring(2,6)}-sgds-${e}-${t}`}class At extends gt{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=kt("input"),this._labelId=kt("label")}setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}}At.styles=[...gt.styles,Ht,$t,St,Bt],e([Se({reflect:!0})],At.prototype,"label",void 0),e([Se({reflect:!0})],At.prototype,"hintText",void 0),e([Se({reflect:!0})],At.prototype,"name",void 0),e([Se({type:Boolean,reflect:!0})],At.prototype,"disabled",void 0),e([Se({type:Boolean,reflect:!0})],At.prototype,"invalid",void 0);class Lt{constructor(e,t){(this.host=e).addController(this),this._internals=e._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},t)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,l){return this._internals.setValidity(e,t,l)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const l in t)t[l]&&(this.validationError=l.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const Et=t=>{class l extends t{constructor(...e){super(...e),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var e;super.connectedCallback(),this._mixinShouldSkipSgdsValidation()||null!==(e=this.inputValidationController)&&void 0!==e||(this.inputValidationController=new Lt(this))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this._mixinShouldSkipSgdsValidation()||(this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this.inputValidationController.validateInput(e),this._isTouched&&(this._isTouched=!1))}_mixinValidate(e){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinSetFormValue(){const e=this.value;this._internals.setFormValue(e)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(e,t,l){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(e,t,l)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return l.formAssociated=!0,e([Le("sgds-input")],l.prototype,"sgdsInput",void 0),e([Le("sgds-datepicker-input")],l.prototype,"sgdsDatepickerInput",void 0),l};function Pt(e,t){const l=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const s=e;t.update=function(e){if(e.has(s)){const t=e.get(s),a=this[s];t!==a&&(l.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}var zt=ee`
+    `}}Mt.styles=[...gt.styles,_t],e([Se({type:String,reflect:!0})],Mt.prototype,"size",void 0),e([Se({type:String,reflect:!0})],Mt.prototype,"tone",void 0),e([Se({type:Boolean,reflect:!0})],Mt.prototype,"disabled",void 0);var Vt=o`.file-upload-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.file-upload-list{display:flex;flex-direction:column;gap:var(--sgds-form-gap-xl);list-style-type:none;margin-top:0}.file-upload-list.has-files{margin-top:var(--sgds-margin-xl)}.filesize{color:var(--sgds-form-color-subtle)}@keyframes fileUploadEnter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes fileUploadExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.file-upload-list-item-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);max-height:500px;overflow:hidden;transition:max-height var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard),opacity var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.file-upload-list-item-container.file-upload-exit{max-height:0;opacity:0}.file-upload-list-item{align-items:center;animation:fileUploadEnter var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter);background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-lg);padding:var(--sgds-form-padding-y) calc(var(--sgds-form-padding-x) + var(--sgds-padding-2-xl)) var(--sgds-form-padding-y) var(--sgds-form-padding-x);position:relative;transition:transform var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.file-upload-list-item.file-upload-error{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.file-upload-list-item.file-upload-exit{animation:fileUploadExit var(--sgds-motion-duration-standard) var(--sgds-motion-easing-exit)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}.file-upload-item-error{align-items:flex-start;display:flex;gap:var(--sgds-form-gap-lg)}.file-upload-item-error sgds-icon{color:var(--sgds-color-muted);flex-shrink:0;margin-top:2px}.file-upload-item-error-message{color:var(--sgds-form-danger-color-default);font-size:var(--sgds-font-size-12);line-height:var(--sgds-line-height-16)}ul{margin:0;padding:0}input{display:none}sgds-button{cursor:pointer;width:fit-content}sgds-close-button{position:absolute;right:8px;top:8px}sgds-icon.valid{color:var(--sgds-form-success-color-default)}sgds-icon.invalid{color:var(--sgds-color-muted)}.drag-drop-zone{align-items:center;background-color:var(--sgds-surface-raised);border:var(--sgds-border-width-1) dashed var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-md);justify-content:center;padding:var(--sgds-padding-2-xl)}.drag-drop-text{font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.drag-drop-zone:focus,.drag-drop-zone:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}:host([disabled]) .file-upload-container>:not(sgds-button):not(.invalid-feedback-container){opacity:var(--sgds-opacity-50)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .drag-drop-zone:focus,:host([disabled]) .drag-drop-zone:focus-visible{outline:none}:host([invalid]:not([disabled])) .drag-drop-zone{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}:host([invalid]:not([disabled])) .drag-drop-zone:focus,:host([invalid]:not([disabled])) .drag-drop-zone:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}:host(:not([disabled]):not([invalid])) .drag-drop-zone:hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}`,Ht=o`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,$t=o`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,St=o`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,Bt=o`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-24)}`;function kt(e="",t=""){return`id-${Math.random().toString().substring(2,6)}-sgds-${e}-${t}`}class At extends gt{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=kt("input"),this._labelId=kt("label")}setInvalid(e){this.invalid=e,e?this.emit("sgds-invalid"):this.emit("sgds-valid")}}At.styles=[...gt.styles,Ht,$t,St,Bt],e([Se({reflect:!0})],At.prototype,"label",void 0),e([Se({reflect:!0})],At.prototype,"hintText",void 0),e([Se({reflect:!0})],At.prototype,"name",void 0),e([Se({type:Boolean,reflect:!0})],At.prototype,"disabled",void 0),e([Se({type:Boolean,reflect:!0})],At.prototype,"invalid",void 0);class Lt{constructor(e,t){(this.host=e).addController(this),this._internals=e._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},t)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,l){return this._internals.setValidity(e,t,l)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const l in t)t[l]&&(this.validationError=l.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const Et=t=>{class l extends t{constructor(...e){super(...e),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var e;super.connectedCallback(),null!==(e=this.inputValidationController)&&void 0!==e||(this.inputValidationController=new Lt(this))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this._isTouched&&(this._isTouched=!1),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinValidate(e){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinSetFormValue(){const e=this.value;this._internals.setFormValue(e)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(e,t,l){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(e,t,l)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return l.formAssociated=!0,e([Le("sgds-input")],l.prototype,"sgdsInput",void 0),e([Le("sgds-datepicker-input")],l.prototype,"sgdsDatepickerInput",void 0),l};function Pt(e,t){const l=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const s=e;t.update=function(e){if(e.has(s)){const t=e.get(s),a=this[s];t!==a&&(l.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}var zt=ee`
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
     <path
       fill="currentColor"