@govtechsg/sgds-web-component 3.0.0-rc.1 → 3.0.0-rc.2

package/components/FileUpload/index.umd.js

@@ -1618,8 +1618,8 @@
    */
   const rawTextElement = /^(?:script|style|textarea|title)$/i;
   /** TemplateResult types */
-  const HTML_RESULT$1 = 1;
-  const SVG_RESULT$1 = 2;
+  const HTML_RESULT = 1;
+  const SVG_RESULT = 2;
   const MATHML_RESULT = 3;
   // TemplatePart types
   // IMPORTANT: these must match the values in PartType
@@ -1671,7 +1671,7 @@
    * if a template comes from the same expression as a previously rendered result,
    * it's efficiently updated instead of replaced.
    */
-  const html$1 = tag(HTML_RESULT$1);
+  const html$1 = tag(HTML_RESULT);
   /**
    * A sentinel value that signals that a value was handled by a directive and
    * should not be written to the DOM.
@@ -1760,7 +1760,7 @@
       // parts. ElementParts are also reflected in this array as undefined
       // rather than a string, to disambiguate from attribute bindings.
       const attrNames = [];
-      let html = type === SVG_RESULT$1 ? '<svg>' : type === MATHML_RESULT ? '<math>' : '';
+      let html = type === SVG_RESULT ? '<svg>' : type === MATHML_RESULT ? '<math>' : '';
       // When we're inside a raw text tag (not it's text content), the regex
       // will still be tagRegex so we can find attributes, but will switch to
       // this regex when the tag ends.
@@ -1886,7 +1886,7 @@
       }
       const htmlResult = html +
           (strings[l] || '<?>') +
-          (type === SVG_RESULT$1 ? '</svg>' : type === MATHML_RESULT ? '</math>' : '');
+          (type === SVG_RESULT ? '</svg>' : type === MATHML_RESULT ? '</math>' : '');
       // Returned as an array for terseness
       return [trustFromTemplateString(strings, htmlResult), attrNames];
   };
@@ -1905,7 +1905,7 @@
           this.el = Template.createElement(html, options);
           walker.currentNode = this.el.content;
           // Re-parent SVG or MathML nodes into template root
-          if (type === SVG_RESULT$1 || type === MATHML_RESULT) {
+          if (type === SVG_RESULT || type === MATHML_RESULT) {
               const wrapper = this.el.content.firstChild;
               wrapper.replaceWith(...wrapper.childNodes);
           }
@@ -4498,6 +4498,59 @@
       });
   }
 
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  // Note, in the future, we may extend this decorator to support the use case
+  // where the queried element may need to do work to become ready to interact
+  // with (e.g. load some implementation code). If so, we might elect to
+  // add a second argument defining a function that can be run to make the
+  // queried element loaded/updated/ready.
+  /**
+   * A property decorator that converts a class property into a getter that
+   * returns a promise that resolves to the result of a querySelector on the
+   * element's renderRoot done after the element's `updateComplete` promise
+   * resolves. When the queried property may change with element state, this
+   * decorator can be used instead of requiring users to await the
+   * `updateComplete` before accessing the property.
+   *
+   * @param selector A DOMString containing one or more selectors to match.
+   *
+   * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
+   *
+   * ```ts
+   * class MyElement {
+   *   @queryAsync('#first')
+   *   first: Promise<HTMLDivElement>;
+   *
+   *   render() {
+   *     return html`
+   *       <div id="first"></div>
+   *       <div id="second"></div>
+   *     `;
+   *   }
+   * }
+   *
+   * // external usage
+   * async doSomethingWithFirst() {
+   *  (await aMyElement.first).doSomething();
+   * }
+   * ```
+   * @category Decorator
+   */
+  function queryAsync(selector) {
+      return ((obj, name) => {
+          return desc(obj, name, {
+              async get() {
+                  await this.updateComplete;
+                  return this.renderRoot?.querySelector(selector) ?? null;
+              },
+          });
+      });
+  }
+
   /**
    * @license
    * Copyright 2020 Google LLC
@@ -4926,77 +4979,7 @@
    */
   const ref = directive(RefDirective);
 
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const HTML_RESULT = 1;
-  class UnsafeHTMLDirective extends Directive {
-      constructor(partInfo) {
-          super(partInfo);
-          this._value = nothing;
-          if (partInfo.type !== PartType.CHILD) {
-              throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
-          }
-      }
-      render(value) {
-          if (value === nothing || value == null) {
-              this._templateResult = undefined;
-              return (this._value = value);
-          }
-          if (value === noChange) {
-              return value;
-          }
-          if (typeof value != 'string') {
-              throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
-          }
-          if (value === this._value) {
-              return this._templateResult;
-          }
-          this._value = value;
-          const strings = [value];
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          strings.raw = strings;
-          // WARNING: impersonating a TemplateResult like this is extremely
-          // dangerous. Third-party directives should not do this.
-          return (this._templateResult = {
-              // Cast to a known set of integers that satisfy ResultType so that we
-              // don't have to export ResultType and possibly encourage this pattern.
-              // This property needs to remain unminified.
-              ['_$litType$']: this.constructor
-                  .resultType,
-              strings,
-              values: [],
-          });
-      }
-  }
-  UnsafeHTMLDirective.directiveName = 'unsafeHTML';
-  UnsafeHTMLDirective.resultType = HTML_RESULT;
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const SVG_RESULT = 2;
-  class UnsafeSVGDirective extends UnsafeHTMLDirective {
-  }
-  UnsafeSVGDirective.directiveName = 'unsafeSVG';
-  UnsafeSVGDirective.resultType = SVG_RESULT;
-  /**
-   * Renders the result as SVG, rather than text.
-   *
-   * The values `undefined`, `null`, and `nothing`, will all result in no content
-   * (empty string) being rendered.
-   *
-   * Note, this is unsafe to use with any user-provided input that hasn't been
-   * sanitized or escaped, as it may lead to cross-site-scripting
-   * vulnerabilities.
-   */
-  const unsafeSVG = directive(UnsafeSVGDirective);
-
-  var css_248z$6 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$9 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -5014,7 +4997,22 @@
           return event;
       }
   }
-  SgdsElement.styles = [css_248z$6];
+  SgdsElement.styles = [css_248z$9];
+
+  /**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  /**
+   * For AttributeParts, sets the attribute if the value is defined and removes
+   * the attribute if the value is undefined.
+   *
+   * For other part types, this directive is a no-op.
+   */
+  const ifDefined = (value) => value ?? nothing;
+
+  var css_248z$8 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-md);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-md)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
   /**
    * @license
@@ -5101,17 +5099,51 @@
   const classMap = directive(ClassMapDirective);
 
   /**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  /**
-   * For AttributeParts, sets the attribute if the value is defined and removes
-   * the attribute if the value is undefined.
+   * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
+   *
+   * @cssprop --sgds-close-btn-border-radius - The border radius of close button border
    *
-   * For other part types, this directive is a no-op.
    */
-  const ifDefined = (value) => value ?? nothing;
+  class SgdsCloseButton extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          this.ariaLabel = "Close button";
+          /** Specifies a large or small button */
+          this.size = "md";
+          this.variant = "default";
+          this._clickHandler = () => {
+              return;
+          };
+      }
+      _handleClick() {
+          this.removeEventListener("click", this._clickHandler);
+          this.addEventListener("click", this._clickHandler);
+      }
+      render() {
+          return html$1 `
+      <button
+        class=${classMap({
+            "btn-close": true,
+            [`btn-close-${this.size}`]: this.size,
+            "btn-close-light": this.variant === "light",
+            "btn-close-dark": this.variant === "dark"
+        })}
+        aria-label=${ifDefined(this.ariaLabel)}
+        @click=${this._handleClick}
+      ></button>
+    `;
+      }
+  }
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$8];
+  __decorate([
+      property({ type: String })
+  ], SgdsCloseButton.prototype, "ariaLabel", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCloseButton.prototype, "size", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCloseButton.prototype, "variant", void 0);
 
   /**
    * @license
@@ -5227,7 +5259,7 @@
    */
   const html = withStatic(html$1);
 
-  var css_248z$5 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}`;
+  var css_248z$7 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn slot::slotted(*){color:var(--sgds-btn-color)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {
@@ -5269,7 +5301,7 @@
           }
       }
   }
-  ButtonElement.styles = [...SgdsElement.styles, css_248z$5];
+  ButtonElement.styles = [...SgdsElement.styles, css_248z$7];
   __decorate([
       query(".btn")
   ], ButtonElement.prototype, "button", void 0);
@@ -5298,103 +5330,30 @@
       property({ type: String })
   ], ButtonElement.prototype, "ariaLabel", void 0);
 
-  var css_248z$4 = css`a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
+  var css_248z$6 = css`a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
 
-  const reportValidityOverloads = new WeakMap();
+  /**
+   * A controller to help with form submission
+   */
   class FormSubmitController {
       constructor(host, options) {
           (this.host = host).addController(this);
           this.options = Object.assign({ form: (input) => {
                   return input.closest("form");
-              }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
-                  return typeof input.reportValidity === "function" ? input.reportValidity() : true;
-              }, setValue: (input, value) => {
-                  input.value = value;
               } }, options);
-          this.handleFormData = this.handleFormData.bind(this);
-          this.handleFormSubmit = this.handleFormSubmit.bind(this);
-          this.handleFormReset = this.handleFormReset.bind(this);
-          this.reportFormValidity = this.reportFormValidity.bind(this);
       }
       hostConnected() {
           this.form = this.options.form(this.host);
-          if (this.form) {
-              this.form.addEventListener("formdata", this.handleFormData);
-              this.form.addEventListener("submit", this.handleFormSubmit);
-              this.form.addEventListener("reset", this.handleFormReset);
-              // Overload the form's reportValidity() method so it looks at Shoelace form controls
-              if (!reportValidityOverloads.has(this.form)) {
-                  reportValidityOverloads.set(this.form, this.form.reportValidity);
-                  this.form.reportValidity = () => this.reportFormValidity();
-              }
-          }
       }
       hostDisconnected() {
           if (this.form) {
-              this.form.removeEventListener("formdata", this.handleFormData);
-              this.form.removeEventListener("submit", this.handleFormSubmit);
-              this.form.removeEventListener("reset", this.handleFormReset);
-              // Remove the overload and restore the original method
-              if (reportValidityOverloads.has(this.form)) {
-                  this.form.reportValidity = reportValidityOverloads.get(this.form);
-                  reportValidityOverloads.delete(this.form);
-              }
               this.form = undefined;
           }
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
-          const value = this.options.value(this.host);
-          if (!disabled && typeof name === "string" && typeof value !== "undefined") {
-              if (Array.isArray(value)) {
-                  value.forEach(val => {
-                      event.formData.append(name, val.toString());
-                  });
-              }
-              else {
-                  event.formData.append(name, value.toString());
-              }
-          }
-      }
-      handleFormSubmit(event) {
-          const disabled = this.options.disabled(this.host);
-          const reportValidity = this.options.reportValidity;
-          if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
-              event.preventDefault();
-              event.stopImmediatePropagation();
-          }
-      }
-      handleFormReset() {
-          this.options.setValue(this.host, this.options.defaultValue(this.host));
-      }
-      reportFormValidity() {
-          //
-          // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
-          // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
-          // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
-          // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
-          //
-          // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
-          // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
-          // be necessary once we can use ElementInternals.
-          //
-          // Note that we're also honoring the form's novalidate attribute.
-          //
-          if (this.form && !this.form.noValidate) {
-              // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
-              // elements that support the constraint validation API.
-              const elements = this.form.querySelectorAll("*");
-              for (const element of elements) {
-                  if (typeof element.reportValidity === "function") {
-                      if (!element.reportValidity()) {
-                          return false;
-                      }
-                  }
-              }
-          }
-          return true;
-      }
+      /**
+       * Creates a temporary native HTML button that can participate in form and invoke form submits and reset
+       * Button is removed once action is performed
+       */
       doAction(type, invoker) {
           if (this.form) {
               const button = document.createElement("button");
@@ -5430,7 +5389,7 @@
       }
   }
 
-  var css_248z$3 = css`:host{display:inline-flex}.btn.full-width,:host([fullWidth]){max-width:var(--sgds-dimension-320);width:100%}.btn.full-width.has-left-icon{justify-content:flex-start}.btn.full-width.has-right-icon{justify-content:space-between}.btn.full-width.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
+  var css_248z$5 = css`:host{display:inline-flex}.btn.full-width,:host([fullWidth]){max-width:var(--sgds-dimension-320);width:100%}.btn.full-width.has-left-icon{justify-content:flex-start}.btn.full-width.has-right-icon{justify-content:space-between}.btn.full-width.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
 
   /**
    * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
@@ -5534,7 +5493,7 @@
     `;
       }
   }
-  SgdsButton.styles = [...ButtonElement.styles, css_248z$4, css_248z$3];
+  SgdsButton.styles = [...ButtonElement.styles, css_248z$6, css_248z$5];
   __decorate([
       state()
   ], SgdsButton.prototype, "_hasLeftIcon", void 0);
@@ -5563,64 +5522,383 @@
       property({ type: Boolean, reflect: true })
   ], SgdsButton.prototype, "fullWidth", void 0);
 
-  var css_248z$2 = css`:host{--file-upload-left-icon-color:var(--sgds-success);--file-upload-remove-icon-color:var(--sgds-body-color);--file-upload-remove-icon-hover-color: }.fileupload-list-item{display:flex;gap:var(--sgds-spacer-2)}.fileupload-list-item span:not(:first-of-type){cursor:pointer}.fileupload-list-item span:first-of-type svg{color:var(--file-upload-left-icon-color)}.fileupload-list-item span:last-of-type svg{color:var(--file-upload-remove-icon-color)}.fileupload-list-item span:last-of-type svg:hover{color:var(--file-upload-remove-icon-hover-color)}.file-upload-label{align-items:center;display:flex;gap:var(--sgds-spacer-2)}ul{margin:0;padding:0}.sgds.fileupload-list{display:flex;flex-direction:column;gap:var(--sgds-spacer-3);list-style-type:none}.sgds.fileupload-list .fileupload-list-item .filename{color:var(--sgds-link);text-decoration:underline;text-underline-offset:.25rem}input{display:none}label,sgds-button{cursor:pointer}.fileupload-container{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}`;
+  var css_248z$4 = css`:host{--file-upload-left-icon-color:var(--sgds-success);--file-upload-remove-icon-color:var(--sgds-body-color);--file-upload-remove-icon-hover-color: }.file-upload{display:flex;flex-direction:column;gap:var(--sgds-form-gap-2-xl)}.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}.file-upload-list-item{align-items:center;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-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) var(--sgds-form-padding-x)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}.file-upload-list-item span:first-of-type svg{color:var(--file-upload-left-icon-color)}.file-upload-list-item span:last-of-type svg{color:var(--file-upload-remove-icon-color)}.file-upload-list-item span:last-of-type svg:hover{color:var(--file-upload-remove-icon-hover-color)}ul{margin:0;padding:0}input{display:none}label,sgds-button{cursor:pointer}sgds-close-button{margin-left:auto}`;
+
+  var css_248z$3 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
+
+  var css_248z$2 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
+
+  var css_248z$1 = css`.form-label{color:var(--sgds-form-color);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
-  function genId (componentName = "", elementName = "") {
+  var css_248z = css`.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-heading)}`;
+
+  function generateId (componentName = "", elementName = "") {
       return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
   }
 
-  var css_248z$1 = css`svg{vertical-align:middle}`;
+  class FormControlElement extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** The input's label  */
+          this.label = "";
+          /** The input's hint text */
+          this.hintText = "";
+          /** Disables the input. */
+          this.disabled = false;
+          /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+          this.invalid = false;
+          this._controlId = generateId("input");
+          this._labelId = generateId("label");
+      }
+      /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+      setInvalid(bool) {
+          this.invalid = bool;
+          if (bool) {
+              this.emit("sgds-invalid");
+          }
+          else {
+              this.emit("sgds-valid");
+          }
+      }
+  }
+  FormControlElement.styles = [...SgdsElement.styles, css_248z$3, css_248z$2, css_248z$1, css_248z];
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "label", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "hintText", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "name", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "disabled", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "invalid", void 0);
+
+  /**
+   * SGDS custom form validation methods and behaviours
+   */
+  class InputValidationController {
+      constructor(host, options) {
+          (this.host = host).addController(this);
+          this._internals = this.host.attachInternals();
+          this.options = Object.assign({ setInvalid: (host, value) => {
+                  host.invalid = value;
+              }, value: (host) => {
+                  return host.value;
+              }, input: (host) => host.input }, options);
+      }
+      hostConnected() {
+          this.host.addEventListener("invalid", e => this.handleInvalid(e));
+      }
+      hostDisconnected() {
+          this.host.removeEventListener("invalid", e => this.handleInvalid(e));
+      }
+      /**
+       * Prevents the native browser error message pop up when reportValidity() called by
+       * associated form or the component's reportValidity during constraint validation
+       * Sets invalid reactive prop to true
+       */
+      handleInvalid(e) {
+          e.preventDefault();
+          this.options.setInvalid(this.host, true);
+      }
+      /**
+       * Sets invalid to false when invoked and
+       * Updates the ValidityState based on new value, but
+       * does not update invalid reactive prop
+       * @param e
+       */
+      handleInput(e) {
+          const input = e.target;
+          this.options.setInvalid(this.host, false);
+          this.validateInput(input);
+      }
+      /**
+       * Validate the input's new value after onChange and
+       * update invalid reactive prop
+       * @param e
+       */
+      handleChange(e) {
+          const input = e.target;
+          this.validateInput(input);
+          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;
+      }
+      /**
+       * Checks the validity and updates the invalid reactive prop of form components
+       */
+      updateInvalidState() {
+          this.options.setInvalid(this.host, !this.checkValidity());
+      }
+      /**
+       * Resets the ValidityState of the control
+       */
+      resetValidity() {
+          return this._internals.setValidity({});
+      }
+      /**
+       * Reports the validity
+       */
+      checkValidity() {
+          return this._internals.checkValidity();
+      }
+      /**
+       * Reports the validity with a error popup message
+       */
+      reportValidity() {
+          return this._internals.reportValidity();
+      }
+      /**
+       * Sets the form control value into FormData,
+       * making the value of control accessible via FormData
+       */
+      setFormValue() {
+          const value = this.options.value(this.host);
+          this._internals.setFormValue(value);
+      }
+      /**
+       * Updates the ValidityState of the input in form component at current state
+       */
+      validateInput(input) {
+          /** When the form control is disabled, its always valid */
+          if (this.options.input(this.host).disabled) {
+              return this._internals.setValidity({});
+          }
+          // get the validity of the internal <input>
+          const validState = input.validity;
+          // if the input is invalid, show the correct error
+          if (!validState.valid) {
+              // loop through the error reasons
+              for (const state in validState) {
+                  // if there is an error and corresponding attribute holding
+                  // the message
+                  if (validState[state]) {
+                      this.validationError = state.toString();
+                      // set the validity error reason and the corresponding
+                      // message
+                      this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);
+                  }
+              }
+          }
+          else {
+              this._internals.setValidity({});
+          }
+      }
+  }
+
+  /**
+   * @summary The FormValidationMixin used by the form components
+   * @param superClass
+   * @returns
+   */
+  const SgdsFormValidatorMixin = (superClass) => {
+      class ToBeValidatedElement extends superClass {
+          constructor() {
+              super(...arguments);
+              this._isTouched = false;
+          }
+          connectedCallback() {
+              super.connectedCallback();
+              this.inputValidationController = new InputValidationController(this);
+          }
+          async firstUpdated(changedProperties) {
+              super.firstUpdated(changedProperties);
+              /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */
+              this.input =
+                  this.shadowRoot.querySelector("input") || (await this.sgdsInput) || this.shadowRoot.querySelector("textarea");
+              this._mixinValidate(this.input);
+          }
+          /**
+           * Native lifecycle of Form-Associated Custom Element Callbacks
+           */
+          formResetCallback() {
+              if (this._mixinResetFormControl) {
+                  this._mixinResetFormControl();
+              }
+              else {
+                  this.value = this.defaultValue;
+                  this._mixinResetValidity(this.input);
+              }
+              this._mixinSetFormValue();
+          }
+          /**
+           *
+           * Methods use by classes using this mixin
+           */
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run change handler
+           */
+          _mixinHandleChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleChange(e);
+          }
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run input handler
+           */
+          _mixinHandleInputChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleInput(e);
+          }
+          /**
+           * During form resetting,
+           * 1. ValidityState is reset
+           * 2. invalid reactive prop is updated after the reset
+           * 3. Revalidates the ValidityState (but do not update invalid prop)
+           * to prepare for the next validity check
+           * 4. Reset touched state to false for a pristine form
+           */
+          _mixinResetValidity(input) {
+              this.inputValidationController.resetValidity();
+              this.inputValidationController.updateInvalidState();
+              this.inputValidationController.validateInput(input);
+              this._isTouched ? (this._isTouched = false) : null;
+          }
+          _mixinValidate(input) {
+              this.inputValidationController.validateInput(input);
+          }
+          _mixinSetFormValue() {
+              this.inputValidationController.setFormValue();
+          }
+          _mixinCheckValidity() {
+              return this.inputValidationController.checkValidity();
+          }
+          _mixinReportValidity() {
+              return this.inputValidationController.reportValidity();
+          }
+          _mixinGetValidity() {
+              return this.inputValidationController.validity;
+          }
+          _mixinGetValidationMessage() {
+              return this.inputValidationController.validationMessage;
+          }
+      }
+      ToBeValidatedElement.formAssociated = true;
+      __decorate([
+          queryAsync("sgds-input")
+      ], ToBeValidatedElement.prototype, "sgdsInput", void 0);
+      return ToBeValidatedElement;
+  };
 
-  var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  // @watch decorator
+  //
+  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
+  //
+  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+  //
+  // Usage:
+  //
+  //  @watch('propName')
+  //  handlePropChange(oldValue, newValue) {
+  //    ...
+  //  }
+  function watch(propName, options) {
+      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
+      return (proto, decoratedFnName) => {
+          // @ts-expect-error -- update is a protected property
+          const { update } = proto;
+          if (propName in proto) {
+              const propNameKey = propName;
+              // @ts-expect-error -- update is a protected property
+              proto.update = function (changedProps) {
+                  if (changedProps.has(propNameKey)) {
+                      const oldValue = changedProps.get(propNameKey);
+                      const newValue = this[propNameKey];
+                      if (oldValue !== newValue) {
+                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                              this[decoratedFnName](oldValue, newValue);
+                          }
+                      }
+                  }
+                  update.call(this, changedProps);
+              };
+          }
+      };
+  }
 
   /**
    * @summary Allows users to upload files of various sizes and formats
    * @slot default - Label for file upload button
    *
-   * @event sgds-files-selected - Emitted when files are selected for uploading
-   *
-   * @cssproperty --file-upload-file-icon-color - Left icon color
-   * @cssproperty --file-upload-remove-icon-color - Remove icon color
-   * @cssproperty --file-upload-remove-icon-hover-color - Remove icon hover color
+   * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail
    */
-  class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
+  class SgdsFileUpload extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
       constructor() {
           super(...arguments);
-          /** The button's variant. */
-          this.variant = "primary";
-          //** Disable the fileuploader button */
-          this.disabled = false;
           /** Allows multiple files to be listed for uploading */
           this.multiple = false;
           /** Specify the acceptable file type  */
           this.accept = "";
-          /** Customize the check icon with SVG */
-          this.checkedIcon = "";
-          /** Customize the cancel icon with SVG */
-          this.cancelIcon = "";
-          /** The input's hint text below the label */
-          this.hintText = "";
-          /** @internal */
+          // /** Customize the check icon with SVG */
+          // @property({ type: String }) checkedIcon = "";
+          /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+          this.hasFeedback = false;
+          /** Makes the input as a required field. */
+          this.required = false;
           this.selectedFiles = [];
-          // Create a ref to the input element
-          /** @internal */
           this.inputRef = createRef();
-          /**@internal */
-          this.inputId = genId("input", "file");
       }
       /**@internal */
       static get scopedElements() {
           return {
-              "sgds-button": SgdsButton
+              "sgds-button": SgdsButton,
+              "sgds-close-button": SgdsCloseButton
           };
       }
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * 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
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
+      }
+      /**
+       * Returns files selected for upload
+       */
+      get files() {
+          return this.selectedFiles;
+      }
       _setFileList(files) {
-          this.files = files;
-          this.emit("sgds-files-selected");
-          //Possible to pass in the files
+          this.emit("sgds-files-selected", { detail: files });
       }
-      /** @internal */
-      handleClick(event) {
+      _handleClick(event) {
           event.preventDefault();
           if (!this.disabled) {
               // Get a reference to the input element using the inputRef
@@ -5629,8 +5907,7 @@
               inputElement.click();
           }
       }
-      /** @internal */
-      handleInputChange(event) {
+      _handleChange(event) {
           const inputElement = event.target;
           const files = inputElement.files;
           if (files.length > 0) {
@@ -5639,6 +5916,7 @@
           // Trigger a re-render of the component to update the list of selected files
           this._setFileList(files);
           this.requestUpdate();
+          super._mixinHandleChange(event);
       }
       _removeFileHandler(index) {
           const inputElement = this.inputRef.value;
@@ -5655,19 +5933,56 @@
           this.selectedFiles = Array.from(fileBuffer.files);
           // Trigger a re-render of the component to update the list of selected files
           this.requestUpdate();
+          this._mixinValidate(this.input);
+      }
+      _clearAllFiles() {
+          const inputElement = this.inputRef.value;
+          const fileBuffer = new DataTransfer();
+          inputElement.files = fileBuffer.files;
+          this._setFileList(fileBuffer.files);
+          this.selectedFiles = Array.from(fileBuffer.files);
+      }
+      /**
+       * fileupload requries a custom _mixinResetFormControl for clearing files
+       */
+      _mixinResetFormControl() {
+          this._clearAllFiles();
+          this._mixinResetValidity(this.input);
+      }
+      _handleDisabledChange() {
+          // Disabled form controls are always valid, so we need to recheck validity when the state changes
+          this.setInvalid(false);
+      }
+      _renderLabel() {
+          const labelTemplate = html$1 `
+      <label for=${this._controlId} id=${this._labelId} class="form-label"> ${this.label} </label>
+    `;
+          return this.label && labelTemplate;
       }
       _renderHintText() {
-          const hintTextTemplate = html$1 ` <small id="${this.inputId}Help" class="form-text">${this.hintText}</small> `;
+          const hintTextTemplate = html$1 ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
-      _sanitizeVariant(variant) {
-          return variant.replace("outline-", "");
+      _renderFeedback() {
+          return html$1 `
+      <div class="invalid-feedback-container">
+        <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="#B90000"
+          />
+        </svg>
+        <div id="${this._controlId}-invalid" class="invalid-feedback">
+          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+        </div>
+      </div>
+    `;
       }
       render() {
-          const getCheckedIcon = (checkedIcon) => {
-              if (checkedIcon) {
-                  return html$1 `${unsafeSVG(checkedIcon)}`;
-              }
+          const getCheckedIcon = () => {
+              // if (checkedIcon) {
+              //   return html`${unsafeSVG(checkedIcon)}`;
+              // }
               return html$1 ` <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -5679,67 +5994,62 @@
         <path
           d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
         />
-      </svg>`;
-          };
-          const getCancelIcon = (cancelIcon) => {
-              if (cancelIcon) {
-                  return html$1 `${unsafeSVG(cancelIcon)}`;
-              }
-              return html$1 `<svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-x-circle"
-        viewBox="0 0 16 16"
-      >
-        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-        <path
-          d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-        />
       </svg>`;
           };
           const listItems = this.selectedFiles.map((file, index) => html$1 `
-        <li key=${index} class="fileupload-list-item">
-          <span>${getCheckedIcon(this.checkedIcon)}</span>
+        <li key=${index} class="file-upload-list-item">
+          <span>${getCheckedIcon()}</span>
           <span class="filename">${file.name}</span>
-          <span @click=${() => this._removeFileHandler(index)}>${getCancelIcon(this.cancelIcon)}</span>
+          <sgds-close-button
+            aria-label="remove the file"
+            @click=${() => this._removeFileHandler(index)}
+          ></sgds-close-button>
         </li>
       `);
           return html$1 `
-      <input
-        ${ref(this.inputRef)}
-        type="file"
-        @change=${this.handleInputChange}
-        ?multiple=${this.multiple}
-        accept=${this.accept}
-        id=${this.inputId}
-      />
-      <div class="fileupload-container">
-        <sgds-button
-          size=${this.size}
-          variant=${this._sanitizeVariant(this.variant)}
-          ?outlined=${this.variant.includes("outline")}
+      <div class="file-upload">
+        <input
+          ${ref(this.inputRef)}
+          type="file"
+          @change=${this._handleChange}
+          ?multiple=${this.multiple}
+          accept=${this.accept}
+          id=${this._controlId}
+          ?required=${this.required}
           ?disabled=${this.disabled}
-          @click=${this.handleClick}
-        >
-          <label for=${this.inputId} class="file-upload-label"><slot></slot></label>
-        </sgds-button>
-        ${this._renderHintText()}
-        <ul class="sgds fileupload-list">
+        />
+        <div class="file-upload-container">
+          ${this._renderLabel()}
+          <sgds-button variant="outline" ?disabled=${this.disabled} @click=${this._handleClick}>
+            <label for=${this._controlId}><slot></slot></label>
+            <svg
+              slot="rightIcon"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M3.5625 14.1943C3.71168 14.1943 3.85476 14.2535 3.96025 14.359C4.06574 14.4645 4.125 14.6076 4.125 14.7568V17.5693C4.125 17.8677 4.24353 18.1538 4.4545 18.3648C4.66548 18.5758 4.95163 18.6943 5.25 18.6943H18.75C19.0484 18.6943 19.3345 18.5758 19.5455 18.3648C19.7565 18.1538 19.875 17.8677 19.875 17.5693V14.7568C19.875 14.6076 19.9343 14.4645 20.0398 14.359C20.1452 14.2535 20.2883 14.1943 20.4375 14.1943C20.5867 14.1943 20.7298 14.2535 20.8352 14.359C20.9407 14.4645 21 14.6076 21 14.7568V17.5693C21 18.166 20.7629 18.7383 20.341 19.1603C19.919 19.5822 19.3467 19.8193 18.75 19.8193H5.25C4.65326 19.8193 4.08097 19.5822 3.65901 19.1603C3.23705 18.7383 3 18.166 3 17.5693V14.7568C3 14.6076 3.05926 14.4645 3.16475 14.359C3.27024 14.2535 3.41332 14.1943 3.5625 14.1943Z"
+                fill="currentColor"
+              />
+              <path
+                d="M11.6018 4.34604C11.654 4.29366 11.7161 4.2521 11.7844 4.22374C11.8528 4.19538 11.926 4.18079 12 4.18079C12.074 4.18079 12.1473 4.19538 12.2156 4.22374C12.2839 4.2521 12.346 4.29366 12.3983 4.34604L15.7733 7.72104C15.8789 7.82666 15.9382 7.96992 15.9382 8.11929C15.9382 8.26866 15.8789 8.41192 15.7733 8.51754C15.6676 8.62316 15.5244 8.6825 15.375 8.6825C15.2256 8.6825 15.0824 8.62316 14.9768 8.51754L12.5625 6.10217V15.9943C12.5625 16.1435 12.5032 16.2866 12.3978 16.392C12.2923 16.4975 12.1492 16.5568 12 16.5568C11.8508 16.5568 11.7077 16.4975 11.6023 16.392C11.4968 16.2866 11.4375 16.1435 11.4375 15.9943V6.10217L9.02326 8.51754C8.97096 8.56984 8.90887 8.61133 8.84054 8.63963C8.77221 8.66793 8.69897 8.6825 8.62501 8.6825C8.55105 8.6825 8.47781 8.66793 8.40948 8.63963C8.34114 8.61133 8.27906 8.56984 8.22676 8.51754C8.17446 8.46524 8.13297 8.40316 8.10467 8.33482C8.07636 8.26649 8.0618 8.19325 8.0618 8.11929C8.0618 8.04533 8.07636 7.97209 8.10467 7.90376C8.13297 7.83543 8.17446 7.77334 8.22676 7.72104L11.6018 4.34604Z"
+                fill="currentColor"
+              />
+            </svg>
+          </sgds-button>
+          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}
+        </div>
+        <ul class="file-upload-list">
           ${listItems}
         </ul>
       </div>
     `;
       }
   }
-  SgdsFileUpload.styles = [...SgdsElement.styles, css_248z$1, css_248z, css_248z$2];
-  __decorate([
-      property({ reflect: true })
-  ], SgdsFileUpload.prototype, "variant", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsFileUpload.prototype, "disabled", void 0);
+  SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$4];
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsFileUpload.prototype, "multiple", void 0);
@@ -5747,23 +6057,20 @@
       property({ type: String, reflect: true })
   ], SgdsFileUpload.prototype, "accept", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsFileUpload.prototype, "size", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFileUpload.prototype, "checkedIcon", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFileUpload.prototype, "cancelIcon", void 0);
+      property({ type: Boolean, reflect: true })
+  ], SgdsFileUpload.prototype, "hasFeedback", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsFileUpload.prototype, "hintText", void 0);
+      property({ type: String, reflect: true })
+  ], SgdsFileUpload.prototype, "invalidFeedback", void 0);
   __decorate([
-      property({ type: Object, state: true })
-  ], SgdsFileUpload.prototype, "files", void 0);
+      property({ type: Boolean, reflect: true })
+  ], SgdsFileUpload.prototype, "required", void 0);
   __decorate([
-      property({ type: Array })
+      state()
   ], SgdsFileUpload.prototype, "selectedFiles", void 0);
+  __decorate([
+      watch("disabled", { waitUntilFirstUpdate: true })
+  ], SgdsFileUpload.prototype, "_handleDisabledChange", null);
 
   customElements.define("sgds-file-upload", SgdsFileUpload);