@ongov/ontario-design-system-component-library 6.0.0-alpha.4 → 6.0.0-alpha.6

package/components/ontario-fieldset.js

@@ -0,0 +1,167 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as CaptionTypes } from './p-DMH_JI3w.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { v as validateValueAgainstArray, a as validatePropExists } from './p-CNqFEifG.js';
+import { F as FormGap } from './p-C-t5TNzY.js';
+
+const ontarioFieldsetCss =
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:rgb(25.5, 25.5, 25.5);margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid rgb(25.5, 25.5, 25.5)}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-fieldset__legend{color:rgb(25.5, 25.5, 25.5);font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label{cursor:pointer;color:rgb(25.5, 25.5, 25.5);font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-input{border:2px solid rgb(25.5, 25.5, 25.5);border-radius:4px;box-sizing:border-box;color:rgb(25.5, 25.5, 25.5);display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-fieldset--gap-40 ::slotted(ontario-input:not(:last-child)){margin-bottom:2.5rem;display:block}.ontario-fieldset--gap-40 ::slotted(ontario-checkboxes:not(:last-child)){margin-bottom:2.5rem;display:block}.ontario-fieldset--gap-40 ::slotted(ontario-dropdown-list:not(:last-child)){margin-bottom:2.5rem;display:block}.ontario-fieldset--gap-40 ::slotted(ontario-textarea:not(:last-child)){margin-bottom:2.5rem;display:block}.ontario-fieldset--gap-40 ::slotted(ontario-radio-buttons:not(:last-child)){margin-bottom:2.5rem;display:block}.ontario-fieldset--gap-40 ::slotted(ontario-button:not(:last-child)){margin-bottom:2.5rem;display:block}.ontario-fieldset--gap-40 ::slotted(ontario-date-input:not(:last-child)){margin-bottom:2.5rem;display:block}.ontario-fieldset--gap-16 ::slotted(ontario-input:not(:last-child)){margin-bottom:1rem;display:block}.ontario-fieldset--gap-16 ::slotted(ontario-checkboxes:not(:last-child)){margin-bottom:1rem;display:block}.ontario-fieldset--gap-16 ::slotted(ontario-dropdown-list:not(:last-child)){margin-bottom:1rem;display:block}.ontario-fieldset--gap-16 ::slotted(ontario-textarea:not(:last-child)){margin-bottom:1rem;display:block}.ontario-fieldset--gap-16 ::slotted(ontario-radio-buttons:not(:last-child)){margin-bottom:1rem;display:block}.ontario-fieldset--gap-16 ::slotted(ontario-button:not(:last-child)){margin-bottom:1rem;display:block}.ontario-fieldset--gap-16 ::slotted(ontario-date-input:not(:last-child)){margin-bottom:1rem;display:block}';
+
+const OntarioFieldset$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioFieldset extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The size of the fieldset legend. If no prop is passed, it will be `default`.
+			 */
+			this.legendSize = 'default';
+			/**
+			 * The following states are used to determine if the parent is a `ontario-form-container` component.
+			 * This is to help style the form children if they are contained within a fieldset.
+			 */
+			this.hasFormContainerParent = false;
+			/**
+			 * The spacing value applied to fieldset elements when inside an `ontario-form-container`.
+			 * This ensures consistent vertical spacing between form elements when they are grouped inside a fieldset.
+			 */
+			this.gapValue = FormGap.Default;
+		}
+		/**
+		 * Watch for changes to the legendSize prop.
+		 * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.
+		 */
+		validateLegendSize() {
+			const isValid = validateValueAgainstArray(this.legendSize, CaptionTypes);
+			if (isValid) {
+				return this.legendSize;
+			} else {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(` legendSize ${this.legendSize} `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-fieldset> ')
+					.addRegularText('is not a valid type. A default size will be applied.')
+					.printMessage();
+				return (this.legendSize = 'default'); // Ensure hydration matches server render for SSR compatibility
+			}
+		}
+		/*
+		 * Watch for changes in the `legend` prop for validation purposes.
+		 */
+		validateLegend() {
+			this.validateLegendText(this.legend);
+		}
+		/**
+		 * Print the legend warning message
+		 */
+		validateLegendText(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' legend ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-fieldset> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		componentWillLoad() {
+			this.validateLegend();
+			this.validateLegendSize();
+			this.initializeFormContainerSettings();
+		}
+		getLegendClass() {
+			switch (this.legendSize) {
+				case 'large':
+					return `ontario-fieldset__legend ontario-fieldset__legend--large`;
+				case 'heading':
+					return `ontario-fieldset__legend ontario-fieldset__legend--heading`;
+				case 'default':
+				default:
+					return `ontario-fieldset__legend`;
+			}
+		}
+		getFieldsetClass() {
+			let baseClass = 'ontario-fieldset';
+			if (this.hasFormContainerParent && (this.gapValue === FormGap.Condensed || this.gapValue === FormGap.Default)) {
+				baseClass += ` ontario-fieldset--gap-${this.gapValue}`;
+			}
+			return baseClass;
+		}
+		// Check if the direct or any ancestor parent is `ontario-form-container`
+		initializeFormContainerSettings() {
+			const formContainer = this.element.closest('ontario-form-container');
+			this.hasFormContainerParent = formContainer !== null;
+			if (formContainer) {
+				this.gapValue = formContainer.gap === 'condensed' ? FormGap.Condensed : FormGap.Default;
+			}
+		}
+		render() {
+			return h(
+				'fieldset',
+				{ key: 'e821bac4f541d9164478a6388684eedf32abf1a4', class: this.getFieldsetClass() },
+				h(
+					'legend',
+					{ key: '0b85ed08ca61cef0ef3296a1e85e2eb5b8d9ff94', class: this.getLegendClass() },
+					this.legendSize === 'heading' ? h('h1', null, this.legend) : this.legend,
+				),
+				h('slot', { key: '87adeed274c65c53b539df719aef667f54f20ffd' }),
+			);
+		}
+		get element() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				legendSize: ['validateLegendSize'],
+				legend: ['validateLegend'],
+			};
+		}
+		static get style() {
+			return ontarioFieldsetCss;
+		}
+	},
+	[
+		257,
+		'ontario-fieldset',
+		{
+			legend: [1025],
+			legendSize: [1025, 'legend-size'],
+			hasFormContainerParent: [32],
+			gapValue: [32],
+		},
+		undefined,
+		{
+			legendSize: ['validateLegendSize'],
+			legend: ['validateLegend'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-fieldset'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-fieldset':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioFieldset$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioFieldset = OntarioFieldset$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioFieldset, defineCustomElement };
+//# sourceMappingURL=ontario-fieldset.js.map
+
+//# sourceMappingURL=ontario-fieldset.js.map

package/components/ontario-fieldset.js.map

@@ -0,0 +1 @@
+{"file":"ontario-fieldset.js","mappings":"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","names":["OntarioFieldset","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-fieldset/ontario-fieldset.scss?tag=ontario-fieldset&encapsulation=shadow","src/components/ontario-fieldset/ontario-fieldset.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n@use '../../styles/fieldsets.scss';\n@use '../../styles/labels.scss';\n@use '../../styles/text-inputs.scss';\n\n@use '../../utils/common/common.form-elements.scss' as common-form-elements;\n\n// Note: If additional form elements need to be targeted for gaps, update the $form-elements list in the common.form-elements.scss file.\n\n/**\n * The following classes define the gap (bottom margin) between slotted form elements.\n * - `40`: For default form layouts (40px)\n * - `16`: For condensed form layouts (16px)\n *\n * This ensures consistent vertical gap between form elements when they are grouped inside a fieldset.\n */\n.ontario-fieldset {\n\t&--gap-40 {\n\t\t@each $element in common-form-elements.$form-elements {\n\t\t\t::slotted(#{$element}:not(:last-child)) {\n\t\t\t\tmargin-bottom: spacing.$spacing-7;\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--gap-16 {\n\t\t@each $element in common-form-elements.$form-elements {\n\t\t\t::slotted(#{$element}:not(:last-child)) {\n\t\t\t\tmargin-bottom: spacing.$spacing-4;\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Fieldset } from './ontario-fieldset.interface';\n\nimport { CaptionType, CaptionTypes } from '../../utils/common/input-caption/input-caption.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { OntarioFormContainer, FormGap } from '../../utils/components/form-container/form-container.interface';\n\n@Component({\n\ttag: 'ontario-fieldset',\n\tstyleUrl: 'ontario-fieldset.scss',\n\tshadow: true,\n})\nexport class OntarioFieldset implements Fieldset {\n\t@Element() element!: HTMLElement;\n\n\t/**\n\t * The text value used for the legend of the fieldset.\n\t */\n\t@Prop({ mutable: true }) legend: string;\n\n\t/**\n\t * The size of the fieldset legend. If no prop is passed, it will be `default`.\n\t */\n\t@Prop({ mutable: true }) legendSize: CaptionType = 'default';\n\n\t/**\n\t * The following states are used to determine if the parent is a `ontario-form-container` component.\n\t * This is to help style the form children if they are contained within a fieldset.\n\t */\n\t@State() hasFormContainerParent: boolean = false;\n\n\t/**\n\t * The spacing value applied to fieldset elements when inside an `ontario-form-container`.\n\t * This ensures consistent vertical spacing between form elements when they are grouped inside a fieldset.\n\t */\n\t@State() gapValue: FormGap = FormGap.Default;\n\n\t/**\n\t * Watch for changes to the legendSize prop.\n\t * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.\n\t */\n\t@Watch('legendSize')\n\tvalidateLegendSize() {\n\t\tconst isValid = validateValueAgainstArray(this.legendSize, CaptionTypes);\n\n\t\tif (isValid) {\n\t\t\treturn this.legendSize;\n\t\t} else {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` legendSize ${this.legendSize} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('is not a valid type. A default size will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.legendSize = 'default'); // Ensure hydration matches server render for SSR compatibility\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `legend` prop for validation purposes.\n\t */\n\t@Watch('legend')\n\tvalidateLegend() {\n\t\tthis.validateLegendText(this.legend);\n\t}\n\n\t/**\n\t * Print the legend warning message\n\t */\n\tvalidateLegendText(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' legend ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateLegend();\n\t\tthis.validateLegendSize();\n\t\tthis.initializeFormContainerSettings();\n\t}\n\n\tprivate getLegendClass() {\n\t\tswitch (this.legendSize) {\n\t\t\tcase 'large':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--large`;\n\t\t\tcase 'heading':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--heading`;\n\t\t\tcase 'default':\n\t\t\tdefault:\n\t\t\t\treturn `ontario-fieldset__legend`;\n\t\t}\n\t}\n\n\tprivate getFieldsetClass() {\n\t\tlet baseClass = 'ontario-fieldset';\n\t\tif (this.hasFormContainerParent && (this.gapValue === FormGap.Condensed || this.gapValue === FormGap.Default)) {\n\t\t\tbaseClass += ` ontario-fieldset--gap-${this.gapValue}`;\n\t\t}\n\t\treturn baseClass;\n\t}\n\n\t// Check if the direct or any ancestor parent is `ontario-form-container`\n\tprivate initializeFormContainerSettings(): void {\n\t\tconst formContainer = this.element.closest('ontario-form-container') as OntarioFormContainer | null;\n\n\t\tthis.hasFormContainerParent = formContainer !== null;\n\n\t\tif (formContainer) {\n\t\t\tthis.gapValue = formContainer.gap === 'condensed' ? FormGap.Condensed : FormGap.Default;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<fieldset class={this.getFieldsetClass()}>\n\t\t\t\t<legend class={this.getLegendClass()}>\n\t\t\t\t\t{this.legendSize === 'heading' ? <h1>{this.legend}</h1> : this.legend}\n\t\t\t\t</legend>\n\t\t\t\t<slot />\n\t\t\t</fieldset>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioFooter extends Components.OntarioFooter, HTMLElement {}
+export const OntarioFooter: {
+	prototype: OntarioFooter;
+	new (): OntarioFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;