@six-group/ui-library 4.3.3 → 5.0.0-rc.1

package/dist/collection/components/six-icon-button/six-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"]}
+{"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"]}

package/dist/collection/components/six-input/six-input.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .form-control .form-control__label {
   display: none;
 }

package/dist/collection/components/six-input/six-input.js

@@ -42,6 +42,55 @@ export class SixInput {
         this.helpTextId = `input-help-text-${id}`;
         this.errorTextId = `input-error-text-${id}`;
         this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorSlot = false;
+        this.isPasswordVisible = false;
+        /** The input's type. */
+        this.type = 'text';
+        /** The input's size. */
+        this.size = 'medium';
+        /** The input's name attribute. */
+        this.name = '';
+        /** The input's value attribute. */
+        this.value = '';
+        /** Set to true to draw a pill-style input with rounded edges. */
+        this.pill = false;
+        /** The input's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** Set to true to disable the input. */
+        this.disabled = false;
+        /** Set to true to make the input readonly. */
+        this.readonly = false;
+        /**
+         * Internal: Styles the input for the dropdown filter search.
+         */
+        this.dropdownSearch = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The input's autocaptialize attribute. */
+        this.autocapitalize = 'off';
+        /** The input's autocorrect attribute. */
+        this.autocorrect = 'off';
+        /** The input's autocomplete attribute. */
+        this.autocomplete = 'off';
+        /** The input's autofocus attribute. */
+        this.autofocus = false;
+        /** Enables spell checking on the input. */
+        this.spellcheck = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
+        /** Set to true to add a password toggle button for password inputs. */
+        this.togglePassword = false;
+        /** Set to render as line */
+        this.line = false;
         this.handleChange = (event) => {
             event.stopPropagation();
             if (this.nativeInput != null) {
@@ -92,41 +141,6 @@ export class SixInput {
             this.hasLabelSlot = hasSlot(this.host, 'label');
             this.hasErrorSlot = hasSlot(this.host, 'error-text');
         };
-        this.hasFocus = false;
-        this.hasHelpTextSlot = false;
-        this.hasLabelSlot = false;
-        this.hasErrorSlot = false;
-        this.isPasswordVisible = false;
-        this.type = 'text';
-        this.size = 'medium';
-        this.name = '';
-        this.value = '';
-        this.pill = false;
-        this.helpText = '';
-        this.placeholder = undefined;
-        this.disabled = false;
-        this.readonly = false;
-        this.minlength = undefined;
-        this.maxlength = undefined;
-        this.min = undefined;
-        this.max = undefined;
-        this.step = undefined;
-        this.pattern = undefined;
-        this.dropdownSearch = false;
-        this.required = false;
-        this.autocapitalize = 'off';
-        this.autocorrect = 'off';
-        this.autocomplete = 'off';
-        this.autofocus = false;
-        this.spellcheck = false;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.clearable = false;
-        this.togglePassword = false;
-        this.inputmode = undefined;
-        this.line = false;
     }
     handleLabelChange() {
         this.handleSlotChange();
@@ -199,7 +213,7 @@ export class SixInput {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: '8db2b6cf7a3065d1fd4c958c1301ffa459e2ce37', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '4b2564db4347ab7bd6cb44c51f65770fcb6ea816', part: "base", class: {
+        return (h(FormControl, { key: 'b88afe1aa2622eee58a8d66257cc5a0983354b25', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'b07352c5f2d4480a4b2919854e154faeac2d9f0f', part: "base", class: {
                 input: true,
                 // Sizes
                 'input--small': this.size === 'small',
@@ -213,10 +227,10 @@ export class SixInput {
                 'input--focused': this.hasFocus,
                 'input--empty': this.getValue().length === 0,
                 'input--invalid': this.invalid,
-            } }, h("span", { key: '874d1edb40d14490dc100af7c85f618883c9cd63', part: "prefix", class: "input__prefix" }, h("slot", { key: 'eee751e03fe42da62100cc2fb18bcb46cbba76e1', name: "prefix" })), h("input", { key: 'b89a34876aae5f073c73495f79c4b0b47cdf10e3', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
+            } }, h("span", { key: '37acf6498894ed16984dc35615387a9d7cb634d3', part: "prefix", class: "input__prefix" }, h("slot", { key: '88e70802193d8925f03d58ea964a0bb9034a74ab', name: "prefix" })), h("input", { key: 'bdeabe4cc23fc68a3a9c25307cf37ca2d77d6a5f', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
                 input__control: true,
                 input__control__prefix: hasSlot(this.host, 'prefix'),
-            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && !this.disabled && (h("button", { key: '248251ba299d52bf44583e7acb9bbe823d51c724', part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { key: '2e353a833fd696a55de542d5df69a9cb33957b23', name: "clear-icon" }, h("six-icon", { key: 'ceac32b1b954c75e9b7fe9682a487e72967b4e46', size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { key: '74e7b5714fc20329a3f18321e552b21bcbd6d77a', part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: 'f179d2cdcbfd319b8cb1291df0219ba5d89c8b4c', part: "suffix", class: "input__suffix" }, h("slot", { key: 'bdea79b0fad36a1b34a70ce0a414a624febe68a5', name: "suffix" })))));
+            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && !this.disabled && (h("button", { key: 'e7f5713eec0bf5bd6b69335f60793071309770dc', part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { key: '9cef48b67afbb2a833a7dff0ffa3b8ce153c11b2', name: "clear-icon" }, h("six-icon", { key: 'fa08350fb58063c871ef9f64d3d3d5a9dd8fbdec', size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { key: 'aacef765fcbc09b9479737d620568a5f78a884e5', part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '0e8461e5897ab4380f67e207d1c1f3d9065b00b7', part: "suffix", class: "input__suffix" }, h("slot", { key: 'a7634ecf343884a7197b2edb82a55863af8faf5b', name: "suffix" })))));
     }
     static get is() { return "six-input"; }
     static get encapsulation() { return "shadow"; }
@@ -234,6 +248,7 @@ export class SixInput {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'",
@@ -246,12 +261,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's type."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'text'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -264,12 +281,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -282,12 +301,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's name attribute."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -300,12 +321,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's value attribute."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "''"
             },
             "pill": {
                 "type": "boolean",
+                "attribute": "pill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -318,12 +341,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Set to true to draw a pill-style input with rounded edges."
                 },
-                "attribute": "pill",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -336,12 +361,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's help text. Alternatively, you can use the help-text slot."
                 },
-                "attribute": "help-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -354,11 +381,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's placeholder text."
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -371,12 +400,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Set to true to disable the input."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -389,12 +420,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Set to true to make the input readonly."
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "minlength": {
                 "type": "number",
+                "attribute": "minlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -407,11 +440,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The minimum length of input that will be considered valid."
                 },
-                "attribute": "minlength",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "maxlength": {
                 "type": "number",
+                "attribute": "maxlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -424,11 +459,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The maximum length of input that will be considered valid."
                 },
-                "attribute": "maxlength",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -441,11 +478,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's minimum value."
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -458,11 +497,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's maximum value."
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -475,11 +516,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's step attribute."
                 },
-                "attribute": "step",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "pattern": {
                 "type": "string",
+                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -492,11 +535,13 @@ export class SixInput {
                     "tags": [],
                     "text": "A pattern to validate input against."
                 },
-                "attribute": "pattern",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "dropdownSearch": {
                 "type": "boolean",
+                "attribute": "dropdown-search",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -509,12 +554,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Internal: Styles the input for the dropdown filter search."
                 },
-                "attribute": "dropdown-search",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -527,12 +574,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "autocapitalize": {
                 "type": "string",
+                "attribute": "autocapitalize",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -545,12 +594,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's autocaptialize attribute."
                 },
-                "attribute": "autocapitalize",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autocorrect": {
                 "type": "string",
+                "attribute": "autocorrect",
                 "mutable": false,
                 "complexType": {
                     "original": "'on' | 'off'",
@@ -563,12 +614,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's autocorrect attribute."
                 },
-                "attribute": "autocorrect",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autocomplete": {
                 "type": "string",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -581,12 +634,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's autocomplete attribute."
                 },
-                "attribute": "autocomplete",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autofocus": {
                 "type": "boolean",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -599,12 +654,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's autofocus attribute."
                 },
-                "attribute": "autofocus",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "spellcheck": {
                 "type": "boolean",
+                "attribute": "spellcheck",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -617,12 +674,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Enables spell checking on the input."
                 },
-                "attribute": "spellcheck",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -635,12 +694,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The label text."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -653,12 +714,14 @@ export class SixInput {
                     "tags": [],
                     "text": "The error message shown, if `invalid` is set to true."
                 },
-                "attribute": "error-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -671,11 +734,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
                 },
-                "attribute": "error-text-count",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -688,12 +753,14 @@ export class SixInput {
                     "tags": [],
                     "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
                 },
-                "attribute": "invalid",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -706,12 +773,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Set to true to add a clear button when the input is populated."
                 },
-                "attribute": "clearable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "togglePassword": {
                 "type": "boolean",
+                "attribute": "toggle-password",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -724,12 +793,14 @@ export class SixInput {
                     "tags": [],
                     "text": "Set to true to add a password toggle button for password inputs."
                 },
-                "attribute": "toggle-password",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inputmode": {
                 "type": "string",
+                "attribute": "inputmode",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
@@ -742,11 +813,13 @@ export class SixInput {
                     "tags": [],
                     "text": "The input's inputmode attribute."
                 },
-                "attribute": "inputmode",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "line": {
                 "type": "boolean",
+                "attribute": "line",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -759,7 +832,8 @@ export class SixInput {
                     "tags": [],
                     "text": "Set to render as line"
                 },
-                "attribute": "line",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }