@six-group/ui-library 0.0.0-insider.e148618 → 0.0.0-insider.e3144bf

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

@@ -9,138 +9,138 @@ import { focusVisible } from "../../utils/focus-visible";
  * @part base - The component's base wrapper.
  */
 export class SixIconButton {
-  constructor() {
-    this.handleClickEvent = (event) => {
-      if (this.disabled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-    this.name = undefined;
-    this.size = 'medium';
-    this.label = undefined;
-    this.disabled = false;
-    this.html = undefined;
-  }
-  componentDidLoad() {
-    if (this.button != null) {
-      focusVisible.observe(this.button);
+    constructor() {
+        this.handleClickEvent = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.name = undefined;
+        this.size = 'medium';
+        this.label = undefined;
+        this.disabled = false;
+        this.html = undefined;
     }
-  }
-  disconnectedCallback() {
-    if (this.button != null) {
-      focusVisible.unobserve(this.button);
+    componentDidLoad() {
+        if (this.button != null) {
+            focusVisible.observe(this.button);
+        }
+    }
+    disconnectedCallback() {
+        if (this.button != null) {
+            focusVisible.unobserve(this.button);
+        }
+    }
+    render() {
+        const html = this.html && h("span", { key: 'bfb9af923285a1777c5a5d8778e272f20ca40598', innerHTML: this.html });
+        return (h("div", { key: 'a3f095fc9301d35108ce5d63fc441acadbdb0471', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { key: '303ab00da89e28557367f1b4e6593efb2b115388', ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+                'icon-button': true,
+                'icon-button--disabled': this.disabled,
+            }, type: "button", "aria-label": this.label }, h("six-icon", { key: 'cbc8dfda4a2d1ee148521c30d4694fd83c49fa40', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: 'fda137701d73e4429ccca013e52a08b06bbca748' }), html)));
+    }
+    static get is() { return "six-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-icon-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to draw."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\nalways include a label that describes what the icon button does."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the button."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "html": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML symbol code or entity."
+                },
+                "attribute": "html",
+                "reflect": true
+            }
+        };
     }
-  }
-  render() {
-    const html = this.html && h("span", { innerHTML: this.html });
-    return (h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
-        'icon-button': true,
-        'icon-button--disabled': this.disabled,
-      }, type: "button", "aria-label": this.label }, h("six-icon", { "aria-hidden": "true", size: this.size }, this.name), h("slot", null), html)));
-  }
-  static get is() { return "six-icon-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-icon-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-icon-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the icon to draw."
-        },
-        "attribute": "name",
-        "reflect": true
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The icon's size."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'medium'"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\nalways include a label that describes what the icon button does."
-        },
-        "attribute": "label",
-        "reflect": true
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the button."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "html": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "HTML symbol code or entity."
-        },
-        "attribute": "html",
-        "reflect": true
-      }
-    };
-  }
 }
 //# sourceMappingURL=six-icon-button.js.map

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":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;IA2DhB,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;MAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;IACH,CAAC,CAAC;;gBAzD2G,QAAQ;;oBASjF,KAAK;;;EAKzC,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAEzD,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;MAC5F,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;SACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;QAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;QACX,eAAQ;QACP,IAAI,CACE,CACL,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","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;\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  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 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={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\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":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;QA2DhB,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;;oBAzD2G,QAAQ;;wBASjF,KAAK;;;IAKzC,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;YACxB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,6DAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEzD,OAAO,CACL,4DAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC5F,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;iBACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;gBAEtB,gFAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;gBACX,8DAAQ;gBACP,IAAI,CACE,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","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;\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  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 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={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\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-icon-button/test/six-icon-button.spec.js

@@ -1,12 +1,12 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixIconButton } from "../six-icon-button";
 describe('six-icon-button', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [SixIconButton],
-      html: `<six-icon-button></six-icon-button>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixIconButton],
+            html: `<six-icon-button></six-icon-button>`,
+        });
+        expect(page.root).toEqualHtml(`
       <six-icon-button size="medium">
         <mock:shadow-root>
          <div>
@@ -18,6 +18,6 @@ describe('six-icon-button', () => {
         </mock:shadow-root>
       </six-icon-button>
     `);
-  });
+    });
 });
 //# sourceMappingURL=six-icon-button.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-icon-button.spec.js","sourceRoot":"","sources":["../../../../src/components/six-icon-button/test/six-icon-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;MAC3B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixIconButton } from '../six-icon-button';\n\ndescribe('six-icon-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixIconButton],\n      html: `<six-icon-button></six-icon-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-icon-button size=\"medium\">\n        <mock:shadow-root>\n         <div>\n          <button class=\"icon-button\" part=\"base\" type=\"button\">\n            <six-icon aria-hidden=\"true\" size=\"medium\"></six-icon>\n            <slot></slot>\n          </button>\n         </div>\n        </mock:shadow-root>\n      </six-icon-button>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"six-icon-button.spec.js","sourceRoot":"","sources":["../../../../src/components/six-icon-button/test/six-icon-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixIconButton } from '../six-icon-button';\n\ndescribe('six-icon-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixIconButton],\n      html: `<six-icon-button></six-icon-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-icon-button size=\"medium\">\n        <mock:shadow-root>\n         <div>\n          <button class=\"icon-button\" part=\"base\" type=\"button\">\n            <six-icon aria-hidden=\"true\" size=\"medium\"></six-icon>\n            <slot></slot>\n          </button>\n         </div>\n        </mock:shadow-root>\n      </six-icon-button>\n    `);\n  });\n});\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 .form-control .form-control__label {
@@ -14,6 +14,7 @@
 }
 .form-control .form-control__error-text {
   display: none;
+  text-align: left;
 }
 
 .form-control--has-label .form-control__label {
@@ -25,6 +26,9 @@
 .form-control--has-label .form-control__label__required::after {
   color: var(--six-color-danger-800);
   content: "*";
+  transform: scale(1.1);
+  margin-left: var(--six-spacing-xxx-small);
+  position: absolute;
 }
 .form-control--has-label.form-control--small .form-control__label {
   font-size: var(--six-input-label-font-size-small);
@@ -56,7 +60,6 @@
 
 .form-control--has-error-text .form-control__error-text {
   display: block;
-  color: var(--six-color-danger-800);
   margin-top: var(--six-spacing-xxx-small);
 }
 .form-control--has-error-text .form-control__error-text ::slotted(*) {
@@ -114,6 +117,15 @@
 .input:hover:not(.input--disabled) .input__control {
   color: var(--six-input-color-hover);
 }
+.input:hover.input--dropdown-search {
+  border-color: transparent;
+}
+.input--dropdown-search {
+  border-color: transparent;
+}
+.input--dropdown-search.input--focused {
+  border-color: var(--six-input-border-color);
+}
 .input.input--focused:not(.input--disabled) {
   background-color: var(--six-input-background-color-focus);
   border-bottom-color: var(--six-input-border-color-focus);
@@ -147,7 +159,7 @@
 .input__control {
   flex: 1 1 auto;
   font-family: inherit;
-  font-size: var(--six-input-font-size-medium);
+  font-size: inherit;
   font-weight: inherit;
   min-width: 0;
   color: var(--six-input-color);