@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/ontario-design-system-components/p-ffe78c79.entry.js

@@ -0,0 +1,98 @@
+import { r as i, h as o } from './p-14fa9399.js';
+import { a as t, I as s, l as e } from './p-314395de.js';
+import { C as a } from './p-55c48d50.js';
+const n =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+const l = n;
+const r = class {
+	constructor(o) {
+		i(this, o);
+		this.iconWidth = 24;
+		this.iconWidthState = undefined;
+		this.colour = 'black';
+		this.iconColourState = undefined;
+		this.iconCustomColourState = undefined;
+	}
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const i = new a();
+			i.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-vote-like> ')
+				.addRegularText(
+					`${
+						isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'
+					}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+	validateColour() {
+		const i = t(this.colour, s);
+		if (i) {
+			this.iconColourState = this.colour;
+		} else {
+			if (e(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const i = new a();
+		i.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-vote-like> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return o(
+			'div',
+			{
+				key: '34023d06dcaceaaa5fe13d65e50f4e8ca6e01280',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			o(
+				'svg',
+				{
+					key: '8d3a264140470f7f7f447120b2541154f2ae196c',
+					class: 'svg-icon',
+					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+					role: 'img',
+					xmlns: 'http://www.w3.org/2000/svg',
+					viewBox: '0 0 24 24',
+					id: 'vote-like',
+				},
+				o('path', {
+					key: '64f7692463c331db2e5ca6b8071f261739fa46c1',
+					d: 'M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.3l.95-4.57.03-.32c0-.4-.17-.8-.44-1.06L14.17 1 7.6 7.6c-.37.36-.6.86-.6 1.4v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.1-.23.14-.47.14-.73v-2z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+r.style = l;
+export { r as ontario_icon_vote_like };
+//# sourceMappingURL=p-ffe78c79.entry.js.map

package/dist/ontario-design-system-components/p-ffe78c79.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconVoteLikeStyle0","OntarioIconVoteLike","validateWidth","isNaN","this","iconWidth","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","iconWidthState","validateColour","isValid","validateValueAgainstArray","colour","IconColours","iconColourState","validateColor","iconCustomColourState","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-vote-like&encapsulation=shadow","src/components/ontario-icon/ontario-icon-vote-like.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-vote-like',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconVoteLike implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-vote-like> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-vote-like> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"vote-like\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.3l.95-4.57.03-.32c0-.4-.17-.8-.44-1.06L14.17 1 7.6 7.6c-.37.36-.6.86-.6 1.4v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.1-.23.14-.47.14-.73v-2z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"mappings":"iIAAA,MAAMA,EAAiB,0ZACvB,MAAAC,EAAeD,E,MCYFE,EAAmB,M,wCAKD,G,0CAsCD,Q,oEAzB7B,aAAAC,GACC,GAAIC,MAAMC,KAAKC,aAAgBF,MAAMC,KAAKC,YAAcD,KAAKC,WAAa,EAAI,CAC7E,MAAMC,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,8BACjBC,eACA,GACCP,MAAMC,KAAKC,WAAa,iCAAmC,0FAG5DI,iBAAiB,UACjBC,eAAe,gBACfC,eACFP,KAAKQ,eAAiB,E,KAChB,CACNR,KAAKQ,eAAiBR,KAAKC,S,EA2B7B,cAAAQ,GACC,MAAMC,EAAUC,EAA0BX,KAAKY,OAAQC,GACvD,GAAIH,EAAS,CACZV,KAAKc,gBAAkBd,KAAKY,M,KACtB,CACN,GAAIG,EAAcf,KAAKY,QAAS,CAC/BZ,KAAKgB,sBAAwBhB,KAAKY,M,KAC5B,CACNZ,KAAKc,gBAAkBd,KAAKiB,mB,GASvB,iBAAAA,GACP,MAAMf,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,8BACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAW,GACClB,KAAKS,iBACLT,KAAKF,e,CAMN,MAAAqB,GACC,OACCC,EAAA,OAAAC,IAAA,2CACCC,MAAO,8BAA8BtB,KAAKc,uCAAuCd,KAAKQ,iBACtFe,MAAO,CAAEC,MAAO,GAAGxB,KAAKQ,qBAExBY,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGzB,KAAKgB,wBAAyBU,OAAQ,GAAG1B,KAAKgB,yBAChEW,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,aAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,uM"}

package/dist/types/components/ontario-accordion/accordion.interface.d.ts

@@ -0,0 +1,25 @@
+import { Base } from '../../utils/common/common.interface';
+export interface Accordion extends Base {
+	/**
+	 * The label for the individual accordion button.
+	 */
+	label: string;
+	/**
+	 * The content type of the accordion.
+	 * If no prop is passed, it will default to a string.
+	 * If the accordion requires multiple lines or HTML, the `accordionContentType` prop should be set to `html`.
+	 */
+	accordionContentType: 'string' | 'html';
+	/**
+	 * The content that is passed into each accordion.
+	 */
+	content: string;
+	/**
+	 * A boolean to track whether the accordion is expanded or collapsed.
+	 */
+	isOpen: boolean;
+	/**
+	 * Custom Aria Label text for the section.
+	 */
+	ariaLabelText: string;
+}

package/dist/types/components/ontario-accordion/expandCollapseButtonDetails.interface.d.ts

@@ -0,0 +1,42 @@
+export interface ExpandCollapseButtonDetails {
+	/**
+	 * The label for the 'Expand all' button.
+	 *
+	 * @example
+	 *  <ontario-accordion
+	 *		name="My Accordion"
+	 *		expand-collapse-button='{
+	 *			expandAllSectionsLabel="Expand All",
+	 *			collapseAllSectionsLabel="Collapse All"
+	 *		}'
+	 *		accordion-data='[
+	 *			{"label": "Accordion 1", "content": ["Item 1", "Item 2", "Item 3"]},
+	 *			{"label": "Accordion 2", "content": ["Item A", "Item B", "Item C"]}
+	 *		]'
+	 *	></ontario-accordion>
+	 *
+	 */
+	expandAllSectionsLabel: string;
+	/**
+	 * The label for the 'Collapse all' button.
+	 *
+	 * @example
+	 *  <ontario-accordion
+	 *		name="My Accordion"
+	 *		expand-collapse-button='{
+	 *			expandAllSectionsLabel="Expand All",
+	 *			collapseAllSectionsLabel="Collapse All"
+	 *		}'
+	 *		accordion-data='[
+	 *			{"label": "Accordion 1", "content": ["Item 1", "Item 2", "Item 3"]},
+	 *			{"label": "Accordion 2", "content": ["Item A", "Item B", "Item C"]}
+	 *		]'
+	 *	></ontario-accordion>
+	 *
+	 */
+	collapseAllSectionsLabel: string;
+	/**
+	 * The alt text for the expand/close button.
+	 */
+	ariaLabelText: string;
+}

package/dist/types/components/ontario-accordion/ontario-accordion.d.ts

@@ -0,0 +1,103 @@
+import { Accordion } from './accordion.interface';
+import { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';
+import { Language } from '../../utils/common/language-types';
+export declare class OntarioAccordion {
+	host: HTMLElement;
+	/**
+	 * The name of the accordion component.
+	 *
+	 * This is not optional.
+	 */
+	name: string;
+	/**
+	 * Custom Expand/Collapse button text.
+	 *
+	 * @example
+	 *  <ontario-accordion
+	 *		name="My Accordion"
+	 *		expand-collapse-button='{
+	 *			"expandAllSectionsLabel": "Expand All",
+	 *			"collapseAllSectionsLabel": "Collapse All"
+	 *		}'
+	 *		accordion-data='[
+	 *			{"label": "Accordion 1", "content": ["Item 1", "Item 2", "Item 3"]},
+	 *			{"label": "Accordion 2", "content": ["Item A", "Item B", "Item C"]}
+	 *		]'
+	 *	></ontario-accordion>
+	 */
+	expandCollapseButton?: string | ExpandCollapseButtonDetails;
+	/**
+	 * Used to include individual accordion data for the accordion component.
+	 * This is passed in as an array of objects with key-value pairs.
+	 *
+	 * The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.
+	 *
+	 * @example
+	 * 	<ontario-accordion
+	 *		name="My Accordion"
+	 *		accordion-data='[
+	 *			{"label": "Accordion 1", "content": "This is a string"},
+	 *			{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}
+	 *		]'
+	 *	></ontario-accordion>
+	 */
+	accordionData: string | Accordion[];
+	/**
+	 * Used to show whether the accordion is opened or closed.
+	 */
+	isOpen: boolean;
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
+	 */
+	language?: Language;
+	/**
+	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 */
+	handleSetAppLanguage(event: CustomEvent<Language>): void;
+	/**
+	 * Handle the language being toggled from the `<ontario-header>`.
+	 * @param event Event object passed when the event is fired.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Store the translation dictionary for use within the component.
+	 */
+	translations: any;
+	/**
+	 * The label for the expand/collapse button.
+	 * This is internal and udpdated dynamically.
+	 */
+	private expandCollapseLabel;
+	/**
+	 * Internal state of the expand/collapse label information.
+	 */
+	private internalExpandCollapseLabelDetails;
+	/**
+	 * Internal state containing the parsed Accordion Data
+	 */
+	private internalAccordionData;
+	/**
+	 * This state tracks which accordions are open.
+	 */
+	private openAccordionIndexes;
+	/**
+	 * Parse Accordion data, this is used to handle JSON strings from HTML.
+	 */
+	private parseAccordionData;
+	/**
+	 * Parse Expand/Collapse Button Details, this is used to handle JSON strings from HTML.
+	 */
+	private parseExpandCollapseButtonDetails;
+	private toggleAccordion;
+	/**
+	 * Toggle all accordions open/close
+	 */
+	private toggleAll;
+	/**
+	 * Update the label based on the current accordion state
+	 */
+	private updateLabel;
+	componentWillLoad(): void;
+	render(): any;
+}

package/dist/types/components/ontario-aside/ontario-aside.d.ts

@@ -0,0 +1,65 @@
+import {
+	CalloutAside,
+	HeadingLevelOptions,
+	HeadingContentType,
+	HighlightColourOptions,
+} from '../../utils/components/callout-aside/callout-aside.interface';
+export declare class OntarioAside implements CalloutAside {
+	/**
+	 * The heading level of the aside heading.
+	 */
+	headingType: HeadingLevelOptions;
+	/**
+	 * The type of the heading content. If no prop is passed, it will default to string.
+	 */
+	headingContentType: HeadingContentType;
+	/**
+	 * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.
+	 */
+	headingContent: string;
+	/**
+	 * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.
+	 *
+	 * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.
+	 *
+	 * @example
+	 * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>
+	 */
+	content?: string;
+	/**
+	 * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.
+	 */
+	highlightColour?: HighlightColourOptions;
+	/**
+	 * Watch for changes to the `headingType` prop.
+	 *
+	 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
+	 */
+	validateHeadingType(): void | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	/**
+	 * Watch for changes in the `headingContentType` prop for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).
+	 * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.
+	 */
+	validateHeadingContentType(): string;
+	/**
+	 * Watch for changes in the `headingContent` prop for validation purposes.
+	 *
+	 * If no `headingContent` value is provided, a warning message will be printed.
+	 */
+	validateHeadingContent(): void;
+	/**
+	 * Watch for changes to the `highlightColour` prop.
+	 *
+	 * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.
+	 */
+	validateHighlightColour(): 'teal' | 'gold' | 'yellow' | 'taupe' | 'green' | 'lime' | 'sky' | 'blue' | 'purple';
+	/**
+	 * Print the invalid `type` warning message.
+	 * @returns default type ('string')
+	 */
+	private warnDefaultType;
+	componentWillLoad(): void;
+	render(): any;
+}

package/dist/types/components/ontario-back-to-top/ontario-back-to-top.d.ts

@@ -0,0 +1,27 @@
+import { Language } from '../../utils/common/language-types';
+export declare class OntarioBackToTop {
+	element: HTMLElement;
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.
+	 */
+	language?: Language;
+	translations: any;
+	private displayBackToTop;
+	private scrollYValue;
+	/**
+	 * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.
+	 */
+	showBackToTopButton(): void;
+	/**
+	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 */
+	handleSetAppLanguage(event: CustomEvent<Language>): void;
+	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Scroll to top functionality when the Back to Top button is clicked
+	 */
+	private scrollToTop;
+	componentWillLoad(): void;
+	render(): any;
+}

package/dist/types/components/ontario-back-to-top/test/mock-page-content.d.ts

@@ -0,0 +1,2 @@
+export declare const mockBTTContent =
+	'\n        <main>\n            <div class="ontario-row">\n                <div class="ontario-columns ontario-small-12">\n                    <h1>Back To Top component test page content</h1>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n                    \n                    <ontario-back-to-top><ontario-back-to-top>\n                </div>\n            </div>\n        </main>\n';

package/dist/types/components/ontario-blockquote/blockquote.interface.d.ts

@@ -0,0 +1,15 @@
+import { Base } from '../../utils/common/common.interface';
+export interface Blockquote extends Base {
+	/**
+	 * Text to be displayed as the quote. Note that wrapping the quotes in quotations is not needed - this is handled through the component styles.
+	 */
+	quote: string;
+	/**
+	 * Optional text to be displayed as the attribution (the author) of the quote.
+	 */
+	attribution?: string;
+	/**
+	 * Optional text to be displayed for additional information about the attribution/author.
+	 */
+	byline?: string | undefined;
+}

package/dist/types/components/ontario-blockquote/ontario-blockquote.d.ts

@@ -0,0 +1,32 @@
+import { Blockquote } from './blockquote.interface';
+export declare class OntarioBlockquote implements Blockquote {
+	host: HTMLElement;
+	/**
+	 * Text to be displayed as the quote.
+	 *
+	 * Note that wrapping the quotes in quotations is not needed - this is handled through the component styles
+	 */
+	quote: string;
+	/**
+	 * Optional text to be displayed as the attribution (the author) of the quote.
+	 */
+	attribution?: string;
+	/**
+	 * Optional text to be displayed for additional information about the attribution/author.
+	 */
+	byline?: string;
+	shortQuoteLength: number;
+	shortQuote: boolean;
+	private quoteState;
+	validateQuote(): void;
+	/**
+	 * Print the missing `quote` prop warning message
+	 */
+	validateQuoteContent(newValue: string): void;
+	componentWillLoad(): void;
+	/**
+	 * This helper is used to help load translations for any slots + text content passed in by the user.
+	 */
+	componentDidLoad(): void;
+	render(): any;
+}

package/dist/types/components/ontario-button/button.interface.d.ts

@@ -0,0 +1,38 @@
+import { Base } from '../../utils/common/common.interface';
+import { ButtonType, HtmlType } from './ontario-button.types';
+export interface Button extends Base {
+	/**
+	 * The type of button to render.
+	 *
+	 * If no type is passed, it will default to 'secondary'.
+	 */
+	type: ButtonType;
+	/**
+	 * The native HTML button type the button should use.
+	 *
+	 * If no htmlType is passed, it will default to 'button'.
+	 */
+	htmlType: HtmlType;
+	/**
+	 * Text to be displayed within the button. This will override the text provided through the host element textContent.
+	 *
+	 * @example
+	 * <ontario-button label="Label Text">Text</ontario-button>
+	 *
+	 * The resulting button will have the label `"Label Text"`.
+	 */
+	label?: string;
+	/**
+	 * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.
+	 *
+	 *  This is optional.
+	 *
+	 * @example
+	 * <ontario-button aria-label-text="Click button to open map">Open</ontario button>
+	 */
+	ariaLabelText?: string;
+	/**
+	 * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.
+	 */
+	elementId?: string;
+}

package/dist/types/components/ontario-button/ontario-button.d.ts

@@ -0,0 +1,95 @@
+import { Button } from './button.interface';
+import { ButtonType, HtmlType } from './ontario-button.types';
+export declare class OntarioButton implements Button {
+	host: HTMLElement;
+	internals: ElementInternals;
+	/**
+	 * The type of button to render.
+	 *
+	 * If no type is passed, it will default to 'secondary'.
+	 */
+	type: ButtonType;
+	/**
+	 * The native HTML button type the button should use.
+	 *
+	 * If no htmlType is passed, it will default to 'button'.
+	 */
+	htmlType: HtmlType;
+	/**
+	 * Text to be displayed within the button. This will override the text provided through the host element textContent.
+	 *
+	 * @example
+	 * <ontario-button label="Label Text">Text</ontario-button>
+	 *
+	 * The resulting button will have the label `"Label Text"`.
+	 */
+	label?: string;
+	/**
+	 * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.
+	 *
+	 *  This is optional.
+	 *
+	 * @example
+	 * <ontario-button aria-label-text="Click button to open map">Open</ontario button>
+	 */
+	ariaLabelText?: string;
+	/**
+	 * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.
+	 */
+	elementId?: string;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the button's type depending on validation result.
+	 */
+	private typeState;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the native HTML button type depending on validation result.
+	 */
+	private htmlTypeState;
+	private labelState;
+	/**
+	 * A reference to the internal button element.
+	 */
+	private buttonRef;
+	private updateLabelContent;
+	/**
+	 * Watch for changes to the `type` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).
+	 * If a match is found in one of the array values then `type` will be set to the matching array key value.
+	 */
+	validateType(): void;
+	/**
+	 *  Watch for changes to the `htmlType` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).
+	 * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.
+	 */
+	validateHtmlType(): void;
+	/**
+	 * Print the missing `label` prop warning message
+	 */
+	validateLabelContent(newValue: string): void;
+	/**
+	 * Print the invalid `type` prop warning message
+	 * @returns default type (secondary)
+	 */
+	private warnDefaultType;
+	/**
+	 * Print the invalid `htmlType` warning message
+	 * @returns default htmlType (button)
+	 */
+	private warnDefaultHtmlType;
+	/**
+	 * @returns the classes of the button based of the button's `type`.
+	 */
+	private getClass;
+	getId(): string;
+	/**
+	 * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.
+	 */
+	componentWillLoad(): void;
+	componentDidLoad(): void;
+	render(): any;
+}

package/dist/types/components/ontario-button/ontario-button.types.d.ts

@@ -0,0 +1,4 @@
+export declare const ButtonTypes: readonly ['primary', 'secondary', 'tertiary', 'internalThemeDark'];
+export declare const HtmlTypes: readonly ['button', 'reset', 'submit'];
+export type ButtonType = (typeof ButtonTypes)[number];
+export type HtmlType = (typeof HtmlTypes)[number];