@uh-design-system/component-library 0.1.0 → 0.2.0-alpha.0

package/dist/esm/index.js

@@ -1,7 +1 @@
-function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
 
-export { format };
-
-//# sourceMappingURL=index.js.map

package/dist/esm/loader.js

@@ -1,13 +1,11 @@
-import { b as bootstrapLazy } from './index-1586ada2.js';
-export { s as setNonce } from './index-1586ada2.js';
+import { b as bootstrapLazy } from './index-1d0a6586.js';
+export { s as setNonce } from './index-1d0a6586.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ds-icon",[[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]]], options);
+  return bootstrapLazy([["ds-accordion_2",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"id":[1],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
 };
 
 export { defineCustomElements };
-
-//# sourceMappingURL=loader.js.map

package/dist/esm/uh-component-library.js

@@ -1,9 +1,9 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-1586ada2.js';
-export { s as setNonce } from './index-1586ada2.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-1d0a6586.js';
+export { s as setNonce } from './index-1d0a6586.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
- Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.23.0 | MIT Licensed | https://stenciljs.com
  */
 var patchBrowser = () => {
   const importMeta = import.meta.url;
@@ -16,7 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ds-icon",[[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]]], options);
+  return bootstrapLazy([["ds-accordion_2",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"id":[1],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
 });
-
-//# sourceMappingURL=uh-component-library.js.map

package/dist/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../cjs/loader.cjs.js');

package/dist/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../cjs/loader.cjs.js');

package/{loader → dist/loader}/index.d.ts

@@ -1,4 +1,4 @@
-export * from '../dist/types/components';
+export * from '../types/components';
 export interface CustomElementsDefineOptions {
   exclude?: string[];
   resourcesUrl?: string;

package/dist/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../esm/loader.js';

package/{loader → dist/loader}/index.js

@@ -1,2 +1,2 @@
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
-export * from '../dist/esm/loader.js';
+export * from '../esm/loader.js';

package/dist/types/components/00-foundations/breakpoints/breakpoints.stories.d.ts

@@ -0,0 +1,6 @@
+import './_breakpoints.scss';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Breakpoints: () => HTMLDivElement;

package/dist/types/components/00-foundations/colours/colours.stories.d.ts

@@ -1,6 +1,7 @@
-import './_colours.scss';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Colours: () => HTMLDivElement;
+export declare const Palette: () => HTMLDivElement;
+export declare const Opaque: () => HTMLDivElement;
+export declare const SemanticColours: () => HTMLDivElement;

package/dist/types/components/00-foundations/icons/categories/actions.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/arrows.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/custom.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/information.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/media.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/navigation.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/notifications.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/text.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/icons/categories/users.d.ts

@@ -0,0 +1,5 @@
+export declare const icons: {
+    name: string;
+    component: string;
+    category: string;
+}[];

package/dist/types/components/00-foundations/typography/typography.stories.d.ts

@@ -1,6 +1,7 @@
 import './_typography.scss';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Typography: () => HTMLDivElement;
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Headings: StoryObj;
+export declare const Text: StoryObj;
+export declare const Typography: StoryObj;

package/dist/types/components/01-base-components/ds-accordion/ds-accordion.d.ts

@@ -0,0 +1,17 @@
+export declare class DsAccordion {
+    variant: 'default' | 'compact';
+    borderAligned: boolean;
+    openByDefault: boolean;
+    accordionId: string;
+    headingLevel: number;
+    useCloseButton: boolean;
+    closeButtonLabel: string;
+    isExpanded: boolean;
+    host: HTMLElement;
+    private headerButtonRef?;
+    private shouldMoveFocus;
+    watchHandler(isExpanded: boolean): void;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.d.ts

@@ -0,0 +1,9 @@
+/** src/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsAccordion } from '../ds-accordion';
+declare const meta: Meta<typeof DsAccordion.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const WithLinkInBody: Story;
+export declare const WithInputInBody: Story;
+export declare const MultipleAccordions: Story;

package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.d.ts

@@ -0,0 +1,13 @@
+/** src/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsAccordion } from '../ds-accordion';
+declare const meta: Meta<typeof DsAccordion.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const VariantDefault: Story;
+export declare const VariantCompact: Story;
+export declare const BorderAligned: Story;
+export declare const WithCloseButton: Story;
+export declare const OpenByDefault: Story;
+export declare const CustomIdForAccordion: Story;
+export declare const HeadingLevel: Story;

package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.stories.d.ts

@@ -0,0 +1,8 @@
+/** src/components/01-base-components/ds-accordion/stories/ds-accordion.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsAccordion } from '../ds-accordion';
+declare const meta: Meta<typeof DsAccordion.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-button/ds-button.d.ts

@@ -0,0 +1,33 @@
+export declare class DsButton {
+    private inheritedAttributes;
+    private buttonEl;
+    private pressedKeys;
+    el: HTMLElement;
+    /**
+     * Button text content.
+     *
+     * Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
+     *
+     * @example
+     *
+     * <ds-button value="button"></ds-button> // Do this
+     * <ds-button>button</ds-button> // Instead of this
+     *
+     * @see {@link https://stackoverflow.com/a/52445966}
+     * @see {@link https://github.com/ionic-team/stencil/issues/399}
+     */
+    value: string;
+    variant: 'primary' | 'secondary' | 'supplementary';
+    colour: 'blue' | 'black' | 'white';
+    size: 'small' | 'medium';
+    fontWeight: string;
+    icon: string;
+    iconPosition: 'start' | 'end';
+    type: 'button' | 'submit' | 'reset';
+    disabled: boolean;
+    ariaDisabled: string;
+    componentWillLoad(): void;
+    private handleKeyDown;
+    private handleKeyUp;
+    render(): any;
+}

package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsButton } from '../ds-button';
+declare const meta: Meta<typeof DsButton.prototype>;
+export default meta;
+export declare const ButtonGroup: StoryObj;
+export declare const ResetAndSubmitButton: StoryObj;

package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts

@@ -0,0 +1,17 @@
+/** src/components/01-base-components/ds-button/ds-button.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsButton } from '../ds-button';
+declare const meta: Meta<typeof DsButton.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Supplementary: Story;
+export declare const Blue: Story;
+export declare const Black: Story;
+export declare const White: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const Disabled: Story;
+export declare const IconStart: Story;
+export declare const IconEnd: Story;

package/dist/types/components/01-base-components/ds-button/stories/ds-button.stories.d.ts

@@ -0,0 +1,8 @@
+/** src/components/01-base-components/ds-button/ds-button.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsButton } from '../ds-button';
+declare const meta: Meta<typeof DsButton.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.d.ts

@@ -0,0 +1,46 @@
+import { TextInputType } from './utils';
+export declare class DsTextInput {
+    private suffixButtonElement;
+    private inputElement;
+    private readonly assistiveTextId;
+    private readonly visuallyHiddenAssistiveTextId;
+    private readonly successTextId;
+    private readonly errorTextId;
+    label?: string;
+    placeholder?: string;
+    id?: string;
+    name: string;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    value?: string;
+    min?: number;
+    max?: number;
+    maxlength?: number;
+    pattern?: string;
+    autocomplete?: string;
+    errorText?: string;
+    successText?: string;
+    assistiveText?: string;
+    actionButtonAriaLabel?: string;
+    hiddenAssistiveText?: string;
+    prefixText?: string;
+    suffixText?: string;
+    icon: string;
+    type: TextInputType;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedby?: string;
+    hasFocus: boolean;
+    clearButtonVisible: boolean;
+    passwordInputVisible: boolean;
+    inputActive: boolean;
+    togglePasswordVisibility(): Promise<boolean>;
+    clearInput(): Promise<void>;
+    private onActionButtonClicked;
+    private renderValidityMessage;
+    private renderPrefixContent;
+    private renderSuffixContent;
+    private handleInputContainerClick;
+    render(): any;
+}

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.examples.stories.d.ts

@@ -0,0 +1,8 @@
+/** src/components/01-base-components/ds-text-input/ds-text-input.examples.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsTextInput } from './ds-text-input';
+declare const meta: Meta<typeof DsTextInput.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const CustomWidth: Story;
+export declare const UsingSlots: Story;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.features.stories.d.ts

@@ -0,0 +1,18 @@
+/** src/components/01-base-components/ds-text-input/ds-text-input.features.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsTextInput } from './ds-text-input';
+declare const meta: Meta<typeof DsTextInput.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const WithPlaceholder: Story;
+export declare const WithAssistiveText: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Required: Story;
+export declare const Valid: Story;
+export declare const Invalid: Story;
+export declare const WithIcon: Story;
+export declare const PasswordInput: Story;
+export declare const SearchInput: Story;
+export declare const PrefixText: Story;
+export declare const SuffixText: Story;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.stories.d.ts

@@ -0,0 +1,8 @@
+/** src/components/01-base-components/ds-text-input/ds-text-input.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsTextInput } from './ds-text-input';
+declare const meta: Meta<typeof DsTextInput.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-text-input/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const textInputTypes: readonly ["text", "password", "search", "loading", "tel", "email", "url", "number"];
+export type TextInputType = typeof textInputTypes[number];
+export declare function idGenerator(id: string): Generator<string, void, unknown>;

package/dist/types/components/01-base-components/ds-visually-hidden/ds-visually-hidden.d.ts

@@ -0,0 +1,3 @@
+export declare class DsVisuallyHidden {
+    render(): any;
+}

package/dist/types/components/01-base-components/ds-visually-hidden/ds-visually-hidden.stories.d.ts

@@ -0,0 +1,7 @@
+/** src/components/01-base-components/ds-input/ds-input.stories.ts */
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsVisuallyHidden } from './ds-visually-hidden';
+declare const meta: Meta<typeof DsVisuallyHidden.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/types/components.d.ts

@@ -5,7 +5,36 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { TextInputType } from "./components/01-base-components/ds-text-input/utils";
+export { TextInputType } from "./components/01-base-components/ds-text-input/utils";
 export namespace Components {
+    interface DsAccordion {
+        "accordionId": string;
+        "borderAligned": boolean;
+        "closeButtonLabel": string;
+        "headingLevel": number;
+        "openByDefault": boolean;
+        "useCloseButton": boolean;
+        "variant": 'default' | 'compact';
+    }
+    interface DsButton {
+        "ariaDisabled": string;
+        "colour": 'blue' | 'black' | 'white';
+        "disabled": boolean;
+        "fontWeight": string;
+        "icon": string;
+        "iconPosition": 'start' | 'end';
+        "size": 'small' | 'medium';
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * Button text content.  Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
+          * @example <ds-button value="button"></ds-button> // Do this <ds-button>button</ds-button> // Instead of this
+          * @see {@link https://stackoverflow.com/a/52445966}
+          * @see {@link https://github.com/ionic-team/stencil/issues/399}
+         */
+        "value": string;
+        "variant": 'primary' | 'secondary' | 'supplementary';
+    }
     interface DsIcon {
         "colour": string;
         "hidden": boolean;
@@ -14,19 +43,105 @@ export namespace Components {
         "size": string;
         "title": string;
     }
+    interface DsTextInput {
+        "actionButtonAriaLabel"?: string;
+        "ariaDescribedby"?: string;
+        "ariaLabel"?: string;
+        "ariaLabelledBy"?: string;
+        "assistiveText"?: string;
+        "autocomplete"?: string;
+        "clearInput": () => Promise<void>;
+        "disabled"?: boolean;
+        "errorText"?: string;
+        "hiddenAssistiveText"?: string;
+        "icon": string;
+        "id"?: string;
+        "label"?: string;
+        "max"?: number;
+        "maxlength"?: number;
+        "min"?: number;
+        "name": string;
+        "pattern"?: string;
+        "placeholder"?: string;
+        "prefixText"?: string;
+        "readonly"?: boolean;
+        "required"?: boolean;
+        "successText"?: string;
+        "suffixText"?: string;
+        "togglePasswordVisibility": () => Promise<boolean>;
+        "type": TextInputType;
+        "value"?: string;
+    }
+    interface DsVisuallyHidden {
+    }
 }
 declare global {
+    interface HTMLDsAccordionElement extends Components.DsAccordion, HTMLStencilElement {
+    }
+    var HTMLDsAccordionElement: {
+        prototype: HTMLDsAccordionElement;
+        new (): HTMLDsAccordionElement;
+    };
+    interface HTMLDsButtonElement extends Components.DsButton, HTMLStencilElement {
+    }
+    var HTMLDsButtonElement: {
+        prototype: HTMLDsButtonElement;
+        new (): HTMLDsButtonElement;
+    };
     interface HTMLDsIconElement extends Components.DsIcon, HTMLStencilElement {
     }
     var HTMLDsIconElement: {
         prototype: HTMLDsIconElement;
         new (): HTMLDsIconElement;
     };
+    interface HTMLDsTextInputElement extends Components.DsTextInput, HTMLStencilElement {
+    }
+    var HTMLDsTextInputElement: {
+        prototype: HTMLDsTextInputElement;
+        new (): HTMLDsTextInputElement;
+    };
+    interface HTMLDsVisuallyHiddenElement extends Components.DsVisuallyHidden, HTMLStencilElement {
+    }
+    var HTMLDsVisuallyHiddenElement: {
+        prototype: HTMLDsVisuallyHiddenElement;
+        new (): HTMLDsVisuallyHiddenElement;
+    };
     interface HTMLElementTagNameMap {
+        "ds-accordion": HTMLDsAccordionElement;
+        "ds-button": HTMLDsButtonElement;
         "ds-icon": HTMLDsIconElement;
+        "ds-text-input": HTMLDsTextInputElement;
+        "ds-visually-hidden": HTMLDsVisuallyHiddenElement;
     }
 }
 declare namespace LocalJSX {
+    interface DsAccordion {
+        "accordionId"?: string;
+        "borderAligned"?: boolean;
+        "closeButtonLabel"?: string;
+        "headingLevel"?: number;
+        "openByDefault"?: boolean;
+        "useCloseButton"?: boolean;
+        "variant"?: 'default' | 'compact';
+    }
+    interface DsButton {
+        "ariaDisabled"?: string;
+        "colour"?: 'blue' | 'black' | 'white';
+        "disabled"?: boolean;
+        "fontWeight"?: string;
+        "icon"?: string;
+        "iconPosition"?: 'start' | 'end';
+        "size"?: 'small' | 'medium';
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Button text content.  Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
+          * @example <ds-button value="button"></ds-button> // Do this <ds-button>button</ds-button> // Instead of this
+          * @see {@link https://stackoverflow.com/a/52445966}
+          * @see {@link https://github.com/ionic-team/stencil/issues/399}
+         */
+        "value"?: string;
+        "variant"?: 'primary' | 'secondary' | 'supplementary';
+    }
     interface DsIcon {
         "colour"?: string;
         "hidden"?: boolean;
@@ -35,15 +150,52 @@ declare namespace LocalJSX {
         "size"?: string;
         "title"?: string;
     }
+    interface DsTextInput {
+        "actionButtonAriaLabel"?: string;
+        "ariaDescribedby"?: string;
+        "ariaLabel"?: string;
+        "ariaLabelledBy"?: string;
+        "assistiveText"?: string;
+        "autocomplete"?: string;
+        "disabled"?: boolean;
+        "errorText"?: string;
+        "hiddenAssistiveText"?: string;
+        "icon"?: string;
+        "id"?: string;
+        "label"?: string;
+        "max"?: number;
+        "maxlength"?: number;
+        "min"?: number;
+        "name"?: string;
+        "pattern"?: string;
+        "placeholder"?: string;
+        "prefixText"?: string;
+        "readonly"?: boolean;
+        "required"?: boolean;
+        "successText"?: string;
+        "suffixText"?: string;
+        "type"?: TextInputType;
+        "value"?: string;
+    }
+    interface DsVisuallyHidden {
+    }
     interface IntrinsicElements {
+        "ds-accordion": DsAccordion;
+        "ds-button": DsButton;
         "ds-icon": DsIcon;
+        "ds-text-input": DsTextInput;
+        "ds-visually-hidden": DsVisuallyHidden;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "ds-accordion": LocalJSX.DsAccordion & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
+            "ds-button": LocalJSX.DsButton & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
             "ds-icon": LocalJSX.DsIcon & JSXBase.HTMLAttributes<HTMLDsIconElement>;
+            "ds-text-input": LocalJSX.DsTextInput & JSXBase.HTMLAttributes<HTMLDsTextInputElement>;
+            "ds-visually-hidden": LocalJSX.DsVisuallyHidden & JSXBase.HTMLAttributes<HTMLDsVisuallyHiddenElement>;
         }
     }
 }

package/dist/types/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '!!raw-loader!*' {
+  const content: string;
+  export default content;
+}

package/dist/types/index.d.ts

@@ -7,5 +7,4 @@
  * DO NOT use this file to export your components. Instead, use the recommended approaches
  * to consume components of this package as outlined in the `README.md`.
  */
-export { format } from './utils/utils';
 export type * from './components.d.ts';