@govtechsg/sgds-web-component 2.0.1 → 2.1.1

package/react/components/Footer/sgds-footer.js

@@ -0,0 +1,155 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './footer.js';
+
+/**
+ * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
+ *
+ * @csspart footer-top - The component's footer-top section container.
+ * @csspart footer-bottom - The component's footer-bottom section container.
+ *
+ * @cssproperty footer-top - The component's footer-top section container.
+ * @cssproperty footer-bottom - The component's footer-bottom section container.
+ */
+class SgdsFooter extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 	Sets title of SgdsFooter
+         */
+        this.title = "";
+        /**
+         * 	Sets description of SgdsFooter
+         */
+        this.description = "";
+        /**
+         * 	Sets copyrightLiner of SgdsFooter
+         */
+        this.copyrightLiner = "Government of Singapore";
+        /**
+         * Array of type
+         *
+         * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`
+         */
+        this.links = [];
+        /**
+         * String date for last updated date
+         */
+        this.lastUpdatedDate = "";
+        /**
+         * 	href link for contacts
+         */
+        this.contactHref = "#";
+        /**
+         * 	href link for feedback
+         */
+        this.feedbackHref = "#";
+        /**
+         * 	href link for privacy statement
+         */
+        this.privacyHref = "#";
+        /**
+         * 	href link for terms of use
+         */
+        this.termsOfUseHref = "#";
+    }
+    render() {
+        // if description is defined
+        const hasDescription = html ` <div class="description">${this.description}</div>`;
+        return html `
+      <footer class="sgds footer">
+        <section class="footer-top" part="footer-top">
+          <div class="container-fluid">
+            <div class="row footer-header">
+              <div class="col col-lg-6 col-md-12">
+                <div class="title">${this.title ? this.title : "Footer title"}</div>
+                ${this.description ? hasDescription : undefined}
+              </div>
+            </div>
+            <div class="row footer-items">
+              ${this.links.map((item) => html `
+                    <div class="col-xxl-2 col-md-4 mb-3">
+                      <div class="title">${item.title}</div>
+                      <ul class="links">
+                        ${item.links.map((link) => html ` <li><a href=${link.href}>${link.label}</a></li> `)}
+                      </ul>
+                    </div>
+                  `)}
+            </div>
+            <div class="row footer-contact-links">
+              <div class="col">
+                <div class="d-flex justify-content-lg-end">
+                  <ul>
+                    <li><a href=${this.contactHref}>Contact</a></li>
+                    <li><a href=${this.feedbackHref}>Feedback</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="footer-bottom" part="footer-bottom">
+          <div class="container-fluid">
+            <div class="row footer-mandatory-links">
+              <div class="col">
+                <ul>
+                  <li>
+                    <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
+                      >Report Vulnerability</a
+                    >
+                  </li>
+                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>
+                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="row footer-copyrights">
+              <div class="col">
+                <div class="d-flex justify-content-lg-end text-end">
+                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />
+                  Last Updated ${this.lastUpdatedDate}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </footer>
+    `;
+    }
+}
+SgdsFooter.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "copyrightLiner", void 0);
+__decorate([
+    property({
+        type: Array
+    })
+], SgdsFooter.prototype, "links", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "lastUpdatedDate", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "contactHref", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "feedbackHref", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "privacyHref", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "termsOfUseHref", void 0);
+
+export { SgdsFooter, SgdsFooter as default };
+//# sourceMappingURL=sgds-footer.js.map

package/react/components/Footer/sgds-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\nexport interface ColumnLinks {\n  title: string;\n  links: Links[];\n}\nexport interface Links {\n  href: string;\n  label: string;\n}\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @csspart footer-top - The component's footer-top section container.\n * @csspart footer-bottom - The component's footer-bottom section container.\n *\n * @cssproperty footer-top - The component's footer-top section container.\n * @cssproperty footer-bottom - The component's footer-bottom section container.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets title of SgdsFooter\n   */\n  @property({ type: String })\n  title = \"\";\n\n  /**\n   * \tSets description of SgdsFooter\n   */\n  @property({ type: String })\n  description = \"\";\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * Array of type\n   *\n   * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`\n   */\n  @property({\n    type: Array\n  })\n  links: ColumnLinks[] = [];\n\n  /**\n   * String date for last updated date\n   */\n  @property({ type: String })\n  lastUpdatedDate = \"\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  render() {\n    // if description is defined\n    const hasDescription = html` <div class=\"description\">${this.description}</div>`;\n\n    return html`\n      <footer class=\"sgds footer\">\n        <section class=\"footer-top\" part=\"footer-top\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-header\">\n              <div class=\"col col-lg-6 col-md-12\">\n                <div class=\"title\">${this.title ? this.title : \"Footer title\"}</div>\n                ${this.description ? hasDescription : undefined}\n              </div>\n            </div>\n            <div class=\"row footer-items\">\n              ${this.links.map(\n                (item: ColumnLinks) =>\n                  html`\n                    <div class=\"col-xxl-2 col-md-4 mb-3\">\n                      <div class=\"title\">${item.title}</div>\n                      <ul class=\"links\">\n                        ${item.links.map((link: Links) => html` <li><a href=${link.href}>${link.label}</a></li> `)}\n                      </ul>\n                    </div>\n                  `\n              )}\n            </div>\n            <div class=\"row footer-contact-links\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end\">\n                  <ul>\n                    <li><a href=${this.contactHref}>Contact</a></li>\n                    <li><a href=${this.feedbackHref}>Feedback</a></li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n        <section class=\"footer-bottom\" part=\"footer-bottom\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-mandatory-links\">\n              <div class=\"col\">\n                <ul>\n                  <li>\n                    <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                      >Report Vulnerability</a\n                    >\n                  </li>\n                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"row footer-copyrights\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end text-end\">\n                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />\n                  Last Updated ${this.lastUpdatedDate}\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":";;;;;;;AAaA;;;;;;;;AAQG;AACG,MAAO,UAAW,SAAQ,WAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;AAGE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AAEX;;AAEG;QAEH,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;AAEjB;;AAEG;QAEH,IAAc,CAAA,cAAA,GAAG,yBAAyB,CAAC;AAE3C;;;;AAIG;QAIH,IAAK,CAAA,KAAA,GAAkB,EAAE,CAAC;AAE1B;;AAEG;QAEH,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;AAErB;;AAEG;QAEH,IAAW,CAAA,WAAA,GAAG,GAAG,CAAC;AAElB;;AAEG;QAEH,IAAY,CAAA,YAAA,GAAG,GAAG,CAAC;AAEnB;;AAEG;QAEH,IAAW,CAAA,WAAA,GAAG,GAAG,CAAC;AAElB;;AAEG;QAEH,IAAc,CAAA,cAAA,GAAG,GAAG,CAAC;KAqEtB;IAnEC,MAAM,GAAA;;QAEJ,MAAM,cAAc,GAAG,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,CAAA,MAAA,CAAQ,CAAC;AAEjF,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;qCAMsB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,cAAc,CAAA;kBAC3D,IAAI,CAAC,WAAW,GAAG,cAAc,GAAG,SAAS,CAAA;;;;gBAI/C,IAAI,CAAC,KAAK,CAAC,GAAG,CACd,CAAC,IAAiB,KAChB,IAAI,CAAA,CAAA;;AAEqB,yCAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;0BAE3B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAW,KAAK,IAAI,CAAA,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAA,UAAA,CAAY,CAAC,CAAA;;;mBAG/F,CACJ,CAAA;;;;;;AAMmB,gCAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AAChB,gCAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;;;;;;;;;;;;;;;;AAiBnB,8BAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AAChB,8BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;;;;;;;sBAO7B,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACpC,+BAAA,EAAA,IAAI,CAAC,eAAe,CAAA;;;;;;;KAOhD,CAAC;KACH;;AA9HM,UAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAW,CAAtC,CAAwC;AAMrD,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAChB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMX,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACV,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACgB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAU3C,UAAA,CAAA;AAHC,IAAA,QAAQ,CAAC;AACR,QAAA,IAAI,EAAE,KAAK;KACZ,CAAC;AACwB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM1B,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACN,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMrB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACT,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMlB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACR,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMnB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACT,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMlB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACN,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/{components → react/components}/Input/input.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Input/input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"input.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Input/input.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-body-bg);border:var(--sgds-form-border-width) solid var(--sgds-form-border-color);border-radius:var(--sgds-border-radius);color:var(--sgds-body-color);display:block;font-size:var(--sgds-body-font-size);font-weight:var(--sgds-body-font-weight);line-height:var(--sgds-body-line-height);padding:var(--sgds-input-btn-padding-y) var(--sgds-input-btn-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{background-color:var(--sgds-body-bg);border:var(--sgds-form-border-width) solid var(--sgds-link);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-control::placeholder{color:var(--sgds-gray-400);opacity:1}.form-control:disabled{background-color:var(--sgds-disabled-bg);color:var(--sgds-disabled-color);opacity:1}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.sgds.form-control-group .form-control-icon{align-items:center;display:flex;font-size:1rem;height:3rem;justify-content:center;position:absolute;width:3rem;z-index:4}.sgds.form-control-group>.form-control{padding-left:3rem}.sgds.form-control-group>.form-control:focus{z-index:3}.form-control.is-invalid{border-color:var(--sgds-form-invalid-color)}.form-control.is-invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-control-container{display:flex;flex-direction:column}`;
+
+export { css_248z as default };
+//# sourceMappingURL=input.js.map

package/react/components/Input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Input/sgds-input.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/Input/sgds-input.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-input.cjs.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport inputStyle from \"./input.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, inputStyle];\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement */\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  protected labelId: string = genId(\"label\");\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        min=${ifDefined(this.min)}\n        max=${ifDefined(this.max)}\n        step=${ifDefined(this.step as number)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}\n        aria-labelledby=\"${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback\n          ? `${this.inputId}-invalid`\n          : \"\"}\"\n      />\n      ${this._renderFeedback()} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\n        id=${this.labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"form-control-container\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","unsafeSVG","feedbackStyles","formHintStyles","formLabelStyles","inputStyle","__decorate","query","property","defaultValue","watch"],"mappings":"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"}

package/react/components/Input/sgds-input.js

@@ -0,0 +1,262 @@
+'use client';
+import { __decorate } from 'tslib';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { html } from 'lit/static-html.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { defaultValue } from '../../utils/defaultvalue.js';
+import { FormSubmitController } from '../../utils/form.js';
+import genId from '../../utils/generateId.js';
+import { watch } from '../../utils/watch.js';
+import css_248z$3 from './input.js';
+import css_248z from '../../styles/feedback.js';
+import css_248z$1 from '../../styles/form-hint.js';
+import css_248z$2 from '../../styles/form-label.js';
+
+/**
+ * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
+ *
+ * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event sgds-input - Emitted when the control receives input and its value changes.
+ * @event sgds-focus - Emitted when input is in focus.
+ * @event sgds-blur - Emitted when input is not in focus.
+ *
+ */
+class SgdsInput extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**@internal */
+        this.formSubmitController = new FormSubmitController(this);
+        /** The type of input which works the same as HTMLInputElement */
+        this.type = "text";
+        /** The input's label  */
+        this.label = "";
+        /** The input's hint text below the label */
+        this.hintText = "";
+        /**The input's placeholder text. */
+        this.placeholder = "placeholder";
+        /**Autofocus the input */
+        this.autofocus = false;
+        /**Disables the input. */
+        this.disabled = false;
+        /**Makes the input a required field. */
+        this.required = false;
+        /**Makes the input readonly. */
+        this.readonly = false;
+        /**The input's value attribute. */
+        this.value = "";
+        /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+        this.defaultValue = "";
+        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+        this.hasFeedback = false;
+        /**Feedback text for error state when validated */
+        this.invalidFeedback = "";
+        /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+        this.invalid = false;
+        /**@internal */
+        this.inputId = genId("input", this.type);
+        this.labelId = genId("label");
+    }
+    /** Sets focus on the input. */
+    focus(options) {
+        this.input.focus(options);
+    }
+    /** Sets blur on the input. */
+    blur() {
+        this.input.blur();
+    }
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity() {
+        return this.input.reportValidity();
+    }
+    setCustomValidity(err) {
+        return this.input.setCustomValidity(err);
+    }
+    setInvalid(bool) {
+        this.invalid = bool;
+    }
+    _handleChange(event) {
+        this.value = this.input.value;
+        this.emit(event);
+    }
+    _handleFocus() {
+        this.emit("sgds-focus");
+    }
+    _handleBlur() {
+        this.emit("sgds-blur");
+    }
+    _handleKeyDown(event) {
+        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+        // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
+        // submitting to allow users to cancel the keydown event if they need to
+        if (event.key === "Enter" && !hasModifier) {
+            setTimeout(() => {
+                // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing
+                if (!event.defaultPrevented && !event.isComposing) {
+                    this.formSubmitController.submit();
+                }
+            });
+        }
+    }
+    _handleDisabledChange() {
+        // Disabled form controls are always valid, so we need to recheck validity when the state changes
+        this.input.disabled = this.disabled;
+        this.invalid = !this.input.checkValidity();
+    }
+    _handleValueChange() {
+        this.invalid = !this.input.checkValidity();
+    }
+    _renderInput() {
+        return html `<input
+        class=${classMap({
+            "form-control": true,
+            "is-invalid": this.hasFeedback && this.invalid
+        })}
+        type=${this.type}
+        id=${this.inputId}
+        name=${ifDefined(this.name)}
+        placeholder=${ifDefined(this.placeholder)}
+        aria-invalid=${this.invalid ? "true" : "false"}
+        pattern=${ifDefined(this.pattern)}
+        ?autofocus=${this.autofocus}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        .value=${live(this.value)}
+        minlength=${ifDefined(this.minlength)}
+        maxlength=${ifDefined(this.maxlength)}
+        min=${ifDefined(this.min)}
+        max=${ifDefined(this.max)}
+        step=${ifDefined(this.step)}
+        @input=${() => this._handleChange("sgds-input")}
+        @change=${() => this._handleChange("sgds-change")}
+        @keydown=${this._handleKeyDown}
+        @invalid=${() => this.setInvalid(true)}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+        aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}
+        aria-labelledby="${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback
+            ? `${this.inputId}-invalid`
+            : ""}"
+      />
+      ${this._renderFeedback()} `;
+    }
+    _renderFeedback() {
+        return this.hasFeedback
+            ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
+            : "";
+    }
+    _renderLabel() {
+        const labelTemplate = html `
+      <label
+        for=${this.inputId}
+        id=${this.labelId}
+        class=${classMap({
+            "form-label": true,
+            required: this.required
+        })}
+        >${this.label}</label
+      >
+    `;
+        return this.label && labelTemplate;
+    }
+    _renderHintText() {
+        const hintTextTemplate = html ` <small id="${this.inputId}Help" class="form-text">${this.hintText}</small> `;
+        return this.hintText && hintTextTemplate;
+    }
+    render() {
+        const input = html `${this._renderInput()}`;
+        // if iconName is defined
+        const inputWithIcon = html `
+      <div class="sgds form-control-group">
+        <span class="form-control-icon"> ${unsafeSVG(this.icon)} </span>
+        ${input}
+      </div>
+    `;
+        // if hintText is defined
+        return html `
+      <div class="form-control-container">
+        ${html `${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}
+      </div>
+    `;
+    }
+}
+SgdsInput.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2, css_248z$3];
+__decorate([
+    query("input.form-control")
+], SgdsInput.prototype, "input", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsInput.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsInput.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsInput.prototype, "hintText", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], SgdsInput.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsInput.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsInput.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], SgdsInput.prototype, "pattern", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "readonly", void 0);
+__decorate([
+    property()
+], SgdsInput.prototype, "min", void 0);
+__decorate([
+    property()
+], SgdsInput.prototype, "max", void 0);
+__decorate([
+    property()
+], SgdsInput.prototype, "step", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsInput.prototype, "value", void 0);
+__decorate([
+    defaultValue()
+], SgdsInput.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "hasFeedback", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsInput.prototype, "invalidFeedback", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "invalid", void 0);
+__decorate([
+    watch("disabled", { waitUntilFirstUpdate: true })
+], SgdsInput.prototype, "_handleDisabledChange", null);
+__decorate([
+    watch("value", { waitUntilFirstUpdate: true })
+], SgdsInput.prototype, "_handleValueChange", null);
+
+export { SgdsInput, SgdsInput as default };
+//# sourceMappingURL=sgds-input.js.map

package/react/components/Input/sgds-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-input.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport inputStyle from \"./input.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, inputStyle];\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement */\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  protected labelId: string = genId(\"label\");\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        min=${ifDefined(this.min)}\n        max=${ifDefined(this.max)}\n        step=${ifDefined(this.step as number)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}\n        aria-labelledby=\"${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback\n          ? `${this.inputId}-invalid`\n          : \"\"}\"\n      />\n      ${this._renderFeedback()} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\n        id=${this.labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"form-control-container\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["feedbackStyles","formHintStyles","formLabelStyles","inputStyle"],"mappings":"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"}

package/{components → react/components}/Mainnav/mainnav-dropdown.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Mainnav/mainnav-dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav-dropdown.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"mainnav-dropdown.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Mainnav/mainnav-dropdown.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.dropdown-menu{background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:0 0 5px 5px;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);margin-top:0}.nav-link.show{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}.sgds.dropdown.nav-item{height:100%}a.nav-link{align-items:center;border-bottom:.125rem solid transparent;color:var(--sgds-body-color);cursor:pointer;display:flex;min-height:100%;padding:0;text-decoration:none;&.active,&:hover{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}&:focus-visible{box-shadow:0 0 0 .25rem rgba(89,66,219,.25);outline:0}}.nav-link.disabled{cursor:default;opacity:var(--mainnav-disabled-opacity);pointer-events:none}`;
+
+export { css_248z as default };
+//# sourceMappingURL=mainnav-dropdown.js.map

package/react/components/Mainnav/mainnav-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mainnav-dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Mainnav/mainnav-item.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Mainnav/mainnav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav-item.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"mainnav-item.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Mainnav/mainnav-item.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--mainnav-item-border-bottom-width:0.125rem}li{height:100%}a.nav-link{align-items:center;border-bottom:var(--mainnav-item-border-bottom-width) solid transparent;color:var(--sgds-body-color);cursor:pointer;display:flex;min-height:100%;padding:0;text-decoration:none;&.active,&:hover{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}&:focus-visible{box-shadow:0 0 0 .25rem rgba(89,66,219,.25);outline:0}}.nav-link.disabled{cursor:default;opacity:var(--sgds-disabled-opacity);pointer-events:none}`;
+
+export { css_248z as default };
+//# sourceMappingURL=mainnav-item.js.map

package/react/components/Mainnav/mainnav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mainnav-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Mainnav/mainnav.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Mainnav/mainnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"mainnav.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Mainnav/mainnav.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--mainnav-bg:transparent;--mainnav-padding-x:var(--sgds-spacer-5);--mainnav-padding-y:var(--sgds-spacer-0);--mainnav-mobile-padding-x:var(--sgds-spacer-2);--mainnav-mobile-padding-y:var(--sgds-spacer-0);--mainnav-border-bottom-width:1px;--mainnav-border-bottom-color:var(--sgds-gray-400);--mainnav-theme-color:var(--sgds-primary)}.navbar{align-items:stretch;background-color:var(--mainnav-bg);border-bottom:var(--mainnav-border-bottom-width) solid var(--mainnav-border-bottom-color);display:flex;flex-wrap:wrap;justify-content:space-between;min-height:80px;padding:var(--mainnav-padding-y) var(--mainnav-padding-x);position:relative;@media (max-width:768px){padding:var(--mainnav-mobile-padding-y) var(--mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;font-size:1.25rem;margin-right:var(--sgds-spacer-4);padding-bottom:.125rem;padding-top:.125rem;text-decoration:none;white-space:nowrap}.navbar-brand,.navbar-brand:focus,.navbar-brand:hover{color:rgba(var(--sgds-emphasis-color-rgb),.9)}.navbar-nav{display:flex;flex-direction:column;gap:var(--sgds-spacer-4);height:100%;list-style:none;margin-bottom:0;margin-top:0;padding-left:0;padding-right:var(--sgds-spacer-4);width:100%}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{background-color:transparent;border:none;cursor:pointer;font-size:1.25rem;line-height:1;padding:var(--sgds-spacer-1) .75rem}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{box-shadow:none;outline:0;text-decoration:none}.navbar-toggler-icon{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:100%;display:inline-block;height:1.5em;vertical-align:middle;width:1.5em}.navbar-nav-scroll{max-height:75vh;overflow-y:auto;padding-right:.5rem}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.order-first{order:-1!important}.order-1{order:1!important}.order-2{order:2!important}.order-last{order:6!important}slot[name=non-collapsible]{align-items:center}.slot-end,slot[name=non-collapsible]{display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+
+export { css_248z as default };
+//# sourceMappingURL=mainnav.js.map

package/react/components/Mainnav/mainnav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mainnav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{components → react/components}/Mainnav/sgds-mainnav-dropdown.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });