@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-footer/index.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-footer.css';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-footer
+ *
+ */
+let NileFooter = class NileFooter extends LitElement {
+    /**
+     * The styles for Footer
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<slot> </slot>
+			`;
+    }
+};
+NileFooter = __decorate([
+    customElement('nile-footer')
+], NileFooter);
+export { NileFooter };
+export default NileFooter;
+//# sourceMappingURL=index.js.map

package/dist/src/nile-footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-footer/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAEzC;;;;;GAKG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAEzC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;IAET,CAAC;IACJ,CAAC;CAGD,CAAA;AAzBY,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyBtB;;AAED,eAAe,UAAU,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-footer.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-footer\n *\n */\n@customElement('nile-footer')\nexport class NileFooter extends LitElement {\n\n\t/**\n\t * The styles for Footer\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot> </slot>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFooter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-footer': NileFooter;\n  }\n}"]}

package/dist/src/nile-footer/nile-footer.css.js

@@ -0,0 +1,19 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * Footer CSS
+ */
+export const styles = css `
+	:host {
+	-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-footer.css.js.map

package/dist/src/nile-footer/nile-footer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-footer.css.js","sourceRoot":"","sources":["../../../src/nile-footer/nile-footer.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;CAMxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Footer CSS\n */\nexport const styles = css`\n\t:host {\n\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-form-error-message/index.js

@@ -0,0 +1,2 @@
+export { NileFormErrorMessage } from './nile-form-error-message';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-form-error-message/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { NileFormErrorMessage } from './nile-form-error-message';\n"]}

package/dist/src/nile-form-error-message/nile-form-error-message.css.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * FormErrorMessage CSS
+ */
+export const styles = css `
+  :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .nile-form-error-message {
+    display: flex;
+    align-items: center;
+    color: var(--nile-form-error-text-color, var(--ng-colors-text-error-primary-600));
+    font-family: var(--nile-font-family-serif,var(--ng-font-family-body));
+    font-size: var(--nile-form-error-text-font-size, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-form-error-text-line-height,  var(--ng-line-height-text-md));
+    letter-spacing: 0.2px;
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .nile-form-error-message__icon {
+    display: var(--nile-display-inline-block, var(--ng-display-none));
+    margin-right: var(--nile-spacing-sm, var(--ng-spacing-none));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-form-error-message.css.js.map

package/dist/src/nile-form-error-message/nile-form-error-message.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-form-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * FormErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-form-error-message {\n    display: flex;\n    align-items: center;\n    color: var(--nile-form-error-text-color, var(--ng-colors-text-error-primary-600));\n    font-family: var(--nile-font-family-serif,var(--ng-font-family-body));\n    font-size: var(--nile-form-error-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-form-error-text-line-height,  var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .nile-form-error-message__icon {\n    display: var(--nile-display-inline-block, var(--ng-display-none));\n    margin-right: var(--nile-spacing-sm, var(--ng-spacing-none));\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-form-error-message/nile-form-error-message.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-form-error-message.css';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-form-error-message
+ *
+ */
+let NileFormErrorMessage = class NileFormErrorMessage extends LitElement {
+    /**
+     * The styles for FormErrorMessage
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+      <div class="nile-form-error-message">
+       <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
+        </div>
+			`;
+    }
+};
+NileFormErrorMessage = __decorate([
+    customElement('nile-form-error-message')
+], NileFormErrorMessage);
+export { NileFormErrorMessage };
+export default NileFormErrorMessage;
+//# sourceMappingURL=nile-form-error-message.js.map

package/dist/src/nile-form-error-message/nile-form-error-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-form-error-message.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAEnD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA2BhC;;AAED,eAAe,oBAAoB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-form-error-message.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-error-message\n *\n */\n@customElement('nile-form-error-message')\nexport class NileFormErrorMessage extends LitElement {\n\n\t/**\n\t * The styles for FormErrorMessage\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n      <div class=\"nile-form-error-message\">\n       <nile-icon name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\" class=\"nile-form-error-message__icon\" color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))\"> </nile-icon> <slot> </slot>\n        </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFormErrorMessage;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-error-message': NileFormErrorMessage;\n  }\n}\n"]}

package/dist/src/nile-form-group/index.js

@@ -0,0 +1,2 @@
+export { NileFormGroup } from './nile-form-group';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-form-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-form-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC","sourcesContent":["export {NileFormGroup} from './nile-form-group';"]}

package/dist/src/nile-form-group/nile-form-group.css.js

@@ -0,0 +1,92 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * FormGroup CSS
+ */
+export const styles = css `
+  :host {
+    --min-width: 288px;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .form__base {
+    display: flex;
+    flex-direction: column;
+    min-width: var(--min-width);
+    width: max-content;
+    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));
+    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+  }
+
+  .form__header {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+  }
+
+  .form__divider {
+    width: 100%;
+  }
+
+  .form__divider::part(divider) {
+    width: 100%;
+    height: 1px;
+    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+  }
+
+  .form__title-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));
+    justify-content:center;
+  }
+
+  .form__title {
+    display: block;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));
+    letter-spacing: 0.2px;
+  }
+
+  .form__subtitle {
+    display: block;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+  }
+
+  .form__body {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-form-group.css.js.map

package/dist/src/nile-form-group/nile-form-group.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-form-group.css.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ExB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * FormGroup CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 288px;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .form__header {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n\n  .form__divider {\n    width: 100%;\n  }\n\n  .form__divider::part(divider) {\n    width: 100%;\n    height: 1px;\n    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));\n    justify-content:center;\n  }\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));\n  }\n`;\nexport default [styles];\n"]}

package/dist/src/nile-form-group/nile-form-group.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement, query, property } from 'lit/decorators.js';
+import { styles } from './nile-form-group.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile Form Group component.
+ *
+ * @tag nile-form-group
+ *
+ */
+let NileFormGroup = class NileFormGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The Form Title . If you need to display HTML, use the `title` slot instead. */
+        this.title = '';
+        /** The Form subtitle . If you need to display HTML, use the `subtitle` slot instead. */
+        this.subtitle = '';
+        /* #endregion */
+    }
+    /**
+     * The styles for FormGroup
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+      <div part="base" class="form__base">
+        ${this.title
+            ? html ` <div part="header" class="form__header">
+              <div part="content" class="form__title-content">
+                <slot name="title" class="form__title"> ${this.title} </slot>
+                ${this.subtitle
+                ? html `
+                      <slot name="subtitle" class="form__subtitle">
+                        ${this.subtitle}
+                      </slot>
+                    `
+                : ``}
+              </div>
+
+              <slot name="action" class="form__action"></slot>
+            </div>
+            <nile-divider part="divider" class="form__divider"></nile-divider>
+            `
+            : ``}
+        <div part="body" class="form__body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    query('.form__body')
+], NileFormGroup.prototype, "nileformgroup", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileFormGroup.prototype, "title", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileFormGroup.prototype, "subtitle", void 0);
+NileFormGroup = __decorate([
+    customElement('nile-form-group')
+], NileFormGroup);
+export { NileFormGroup };
+export default NileFormGroup;
+//# sourceMappingURL=nile-form-group.js.map

package/dist/src/nile-form-group/nile-form-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-form-group.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QAWL,kFAAkF;QACvC,UAAK,GAAG,EAAE,CAAC;QAEtD,wFAAwF;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAuCzD,gBAAgB;IAClB,CAAC;IApDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAQD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEI,MAAM;QACX,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;0DAE0C,IAAI,CAAC,KAAK;kBAClD,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;0BAEE,IAAI,CAAC,QAAQ;;qBAElB;gBACH,CAAC,CAAC,EAAE;;;;;;aAMT;YACH,CAAC,CAAC,EAAE;;;;;KAKT,CAAC;IACJ,CAAC;CAGF,CAAA;AAtDuB;IAArB,KAAK,CAAC,aAAa,CAAC;oDAAiC;AAWX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAY;AAGX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAe;AAf9C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuDzB;;AAED,eAAe,aAAa,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-form-group.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile Form Group component.\n *\n * @tag nile-form-group\n *\n */\n@customElement('nile-form-group')\nexport class NileFormGroup extends NileElement {\n  @query('.form__body') nileformgroup: HTMLInputElement;\n\n  /**\n   * The styles for FormGroup\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** The Form Title . If you need to display HTML, use the `title` slot instead. */\n  @property({ type: String, reflect: true }) title = '';\n\n  /** The Form subtitle . If you need to display HTML, use the `subtitle` slot instead. */\n  @property({ type: String, reflect: true }) subtitle = '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"form__base\">\n        ${this.title\n          ? html` <div part=\"header\" class=\"form__header\">\n              <div part=\"content\" class=\"form__title-content\">\n                <slot name=\"title\" class=\"form__title\"> ${this.title} </slot>\n                ${this.subtitle\n                  ? html`\n                      <slot name=\"subtitle\" class=\"form__subtitle\">\n                        ${this.subtitle}\n                      </slot>\n                    `\n                  : ``}\n              </div>\n\n              <slot name=\"action\" class=\"form__action\"></slot>\n            </div>\n            <nile-divider part=\"divider\" class=\"form__divider\"></nile-divider>\n            `\n          : ``}\n        <div part=\"body\" class=\"form__body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileFormGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-group': NileFormGroup;\n  }\n}\n"]}

package/dist/src/nile-form-group/nile-form-group.test.js

@@ -0,0 +1,55 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import './nile-form-group'; // Make sure to import the component to be tested
+describe('NileFormGroup', () => {
+    it('should have default properties', async () => {
+        const el = await fixture(html `<nile-form-group></nile-form-group>`);
+        expect(el.title).to.equal('');
+        expect(el.subtitle).to.equal('');
+    });
+    it('should render title when set', async () => {
+        const el = await fixture(html `<nile-form-group title="Test Title"></nile-form-group>`);
+        const titleSlot = el.shadowRoot.querySelector('slot[name="title"]');
+        expect(titleSlot).to.exist;
+        expect(titleSlot?.textContent?.trim()).to.equal('Test Title');
+    });
+    it('should render subtitle when set', async () => {
+        const el = await fixture(html `<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+        const subtitleSlot = el.shadowRoot.querySelector('slot[name="subtitle"]');
+        expect(subtitleSlot).to.exist;
+        expect(subtitleSlot?.textContent?.trim()).to.equal('Test Subtitle');
+    });
+    it('should not render title and subtitle if not set', async () => {
+        const el = await fixture(html `<nile-form-group></nile-form-group>`);
+        const titleSlot = el.shadowRoot.querySelector('slot[name="title"]');
+        const subtitleSlot = el.shadowRoot.querySelector('slot[name="subtitle"]');
+        expect(titleSlot).to.not.exist;
+        expect(subtitleSlot).to.not.exist;
+    });
+    it('should render content inside the form body slot', async () => {
+        const el = await fixture(html `<nile-form-group><p>Form Content</p></nile-form-group>`);
+        const bodySlot = el.shadowRoot.querySelector('.form__body slot');
+        const assignedNodes = bodySlot?.assignedNodes() ?? [];
+        expect(assignedNodes.length).to.equal(1);
+        expect(assignedNodes[0].textContent.trim()).to.equal('Form Content');
+    });
+    it('should reflect title and subtitle attributes', async () => {
+        const el = await fixture(html `<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+        expect(el.getAttribute('title')).to.equal('Test Title');
+        expect(el.getAttribute('subtitle')).to.equal('Test Subtitle');
+    });
+    it('should update the title dynamically', async () => {
+        const el = await fixture(html `<nile-form-group title="Initial Title"></nile-form-group>`);
+        el.title = 'Updated Title';
+        await el.updateComplete;
+        const titleSlot = el.shadowRoot.querySelector('slot[name="title"]') ?? {};
+        expect(titleSlot.textContent.trim()).to.equal('Updated Title');
+    });
+    it('should update the subtitle dynamically', async () => {
+        const el = await fixture(html `<nile-form-group title="Test Title" subtitle="Initial Subtitle"></nile-form-group>`);
+        el.subtitle = 'Updated Subtitle';
+        await el.updateComplete;
+        const subtitleSlot = el.shadowRoot.querySelector('slot[name="subtitle"]') ?? {};
+        expect(subtitleSlot.textContent.trim()).to.equal('Updated Subtitle');
+    });
+});
+//# sourceMappingURL=nile-form-group.test.js.map

package/dist/src/nile-form-group/nile-form-group.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-form-group.test.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,mBAAmB,CAAC,CAAC,iDAAiD;AAG7E,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,qCAAqC,CAAC,CAAC;QACnF,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC9B,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,wDAAwD,CAAC,CAAC;QACtG,MAAM,SAAS,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACrE,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,iFAAiF,CAAC,CAAC;QAC/H,MAAM,YAAY,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC3E,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9B,MAAM,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,qCAAqC,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACrE,MAAM,YAAY,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC3E,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,wDAAwD,CAAC,CAAC;QACtG,MAAM,QAAQ,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAkB,kBAAkB,CAAC,CAAC;QACnF,MAAM,aAAa,GAAG,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAS,CAAC;QAC7D,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACzC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,iFAAiF,CAAC,CAAC;QAC/H,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QACxD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,2DAA2D,CAAC,CAAC;QACzG,EAAE,CAAC,KAAK,GAAG,eAAe,CAAC;QAC3B,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,SAAS,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,IAAG,EAAS,CAAC;QACjF,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,oFAAoF,CAAC,CAAC;QAClI,EAAE,CAAC,QAAQ,GAAG,kBAAkB,CAAC;QACjC,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,YAAY,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,IAAI,EAAS,CAAC;QACxF,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, html, expect } from '@open-wc/testing';\nimport './nile-form-group'; // Make sure to import the component to be tested\nimport NileFormGroup from './nile-form-group';\n\ndescribe('NileFormGroup', () => {\n  it('should have default properties', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);\n    expect(el.title).to.equal('');\n    expect(el.subtitle).to.equal('');\n  });\n\n  it('should render title when set', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group title=\"Test Title\"></nile-form-group>`);\n    const titleSlot = el.shadowRoot!.querySelector('slot[name=\"title\"]');\n    expect(titleSlot).to.exist;\n    expect(titleSlot?.textContent?.trim()).to.equal('Test Title');\n  });\n\n  it('should render subtitle when set', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group title=\"Test Title\" subtitle=\"Test Subtitle\"></nile-form-group>`);\n    const subtitleSlot = el.shadowRoot!.querySelector('slot[name=\"subtitle\"]');\n    expect(subtitleSlot).to.exist;\n    expect(subtitleSlot?.textContent?.trim()).to.equal('Test Subtitle');\n  });\n\n  it('should not render title and subtitle if not set', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);\n    const titleSlot = el.shadowRoot!.querySelector('slot[name=\"title\"]');\n    const subtitleSlot = el.shadowRoot!.querySelector('slot[name=\"subtitle\"]');\n    expect(titleSlot).to.not.exist;\n    expect(subtitleSlot).to.not.exist;\n  });\n\n  it('should render content inside the form body slot', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group><p>Form Content</p></nile-form-group>`);\n    const bodySlot = el.shadowRoot!.querySelector<HTMLSlotElement>('.form__body slot');\n    const assignedNodes = bodySlot?.assignedNodes() ?? [] as any;\n    expect(assignedNodes.length).to.equal(1);\n    expect(assignedNodes[0].textContent.trim()).to.equal('Form Content');\n  });\n\n  it('should reflect title and subtitle attributes', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group title=\"Test Title\" subtitle=\"Test Subtitle\"></nile-form-group>`);\n    expect(el.getAttribute('title')).to.equal('Test Title');\n    expect(el.getAttribute('subtitle')).to.equal('Test Subtitle');\n  });\n\n  it('should update the title dynamically', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group title=\"Initial Title\"></nile-form-group>`);\n    el.title = 'Updated Title';\n    await el.updateComplete;\n    const titleSlot = el.shadowRoot!.querySelector('slot[name=\"title\"]')?? {} as any;\n    expect(titleSlot.textContent.trim()).to.equal('Updated Title');\n  });\n\n  it('should update the subtitle dynamically', async () => {\n    const el = await fixture<NileFormGroup>(html`<nile-form-group title=\"Test Title\" subtitle=\"Initial Subtitle\"></nile-form-group>`);\n    el.subtitle = 'Updated Subtitle';\n    await el.updateComplete;\n    const subtitleSlot = el.shadowRoot!.querySelector('slot[name=\"subtitle\"]') ?? {} as any;\n    expect(subtitleSlot.textContent.trim()).to.equal('Updated Subtitle');\n  });\n});\n"]}

package/dist/src/nile-form-help-text/index.js

@@ -0,0 +1,2 @@
+export { NileFormHelpText } from './nile-form-help-text';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-form-help-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { NileFormHelpText } from './nile-form-help-text';\n"]}

package/dist/src/nile-form-help-text/nile-form-help-text.css.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * FormHelpText CSS
+ */
+export const styles = css `
+  :host {
+    width:100%;
+    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));
+    font-style: normal;
+    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .nile-form-help-text {
+    display:flex;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    letter-spacing: 0.2px;
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    width: auto;
+  }
+
+
+  .nile-form-help-text--expanded{
+    display:block;
+  }
+
+  .nile-form-help-text__more-button {
+    display: inline-flex;
+    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));
+    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));
+    cursor: pointer;
+    white-space: nowrap;
+    align-items: center;
+  }
+
+  .help__text__full{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display:inline;
+  }
+
+  .help__text__full--expanded{
+    white-space: wrap;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-form-help-text.css.js.map

package/dist/src/nile-form-help-text/nile-form-help-text.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * FormHelpText CSS\n */\nexport const styles = css`\n  :host {\n    width:100%;\n    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-form-help-text {\n    display:flex;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    width: auto;\n  }\n\n\n  .nile-form-help-text--expanded{\n    display:block;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n\n  .help__text__full{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:inline;\n  }\n\n  .help__text__full--expanded{\n    white-space: wrap;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-form-help-text/nile-form-help-text.js

@@ -0,0 +1,111 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, query, property, state } from 'lit/decorators.js';
+import { styles } from './nile-form-help-text.css';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-form-help-text
+ *
+ */
+let NileFormHelpText = class NileFormHelpText extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isExpanded = false;
+        this.showButton = false;
+    }
+    /**
+     * The styles for FormHelpText
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    firstUpdated(_changedProperties) {
+        this.resizeObserver = this.observeWidthChange(this.textContainer);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';
+        return html `
+    <div 
+      class="${classMap({
+            'nile-form-help-text': true,
+            "nile-form-help-text--expanded": this.isExpanded
+        })}" 
+      part="container"
+    >
+      <span
+        class="${classMap({
+            "help__text__full": true,
+            "help__text__full--expanded": this.isExpanded
+        })}"
+        >
+        <slot @slotchange="${this.decideToToggleShowButton}"></slot>
+      </span>
+      ${this.showButton ? html `
+        <span
+          class="nile-form-help-text__more-button"
+          part="toggle-button"
+          @click=${this.toggleExpanded}
+        >${this.isExpanded ? 'View Less' : 'View More'}
+          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+        </span>
+      ` : nothing}
+    </div>
+  `;
+    }
+    toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
+    }
+    decideToToggleShowButton() {
+        if (!this.textContainer)
+            return;
+        this.showButton = this.textContainer.clientWidth < this.textContainer.scrollWidth;
+    }
+    /**
+     * Logs whenever the width of an element changes.
+     * @param {HTMLElement} element - The element to observe for width changes.
+     */
+    observeWidthChange(element) {
+        const resizeObserver = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                const newWidth = entry.contentRect.width;
+                if (newWidth)
+                    this.decideToToggleShowButton();
+            }
+        });
+        resizeObserver.observe(element);
+        return resizeObserver; // Return observer to allow disconnection if needed
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileFormHelpText.prototype, "isExpanded", void 0);
+__decorate([
+    state()
+], NileFormHelpText.prototype, "showButton", void 0);
+__decorate([
+    query('.help__text__full')
+], NileFormHelpText.prototype, "textContainer", void 0);
+NileFormHelpText = __decorate([
+    customElement('nile-form-help-text')
+], NileFormHelpText);
+export { NileFormHelpText };
+export default NileFormHelpText;
+//# sourceMappingURL=nile-form-help-text.js.map