@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.9eaaa42

package/dist/collection/components/six-tab-panel/six-tab-panel.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 let id = 0;
 /**
  * @since 1.0
@@ -18,7 +18,7 @@ export class SixTabPanel {
   }
   render() {
     return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
     h(Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", null))));
   }
   static get is() { return "six-tab-panel"; }

package/dist/collection/components/six-tab-panel/six-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-tab-panel.js","sourceRoot":"","sources":["../../../src/components/six-tab-panel/six-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;GASG;AAOH,MAAM,OAAO,WAAW;;IACtB,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;gBAKnB,EAAE;kBAGiB,KAAK;;EAEvC,MAAM;IACJ,OAAO;IACL,sGAAsG;IACtG,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;MAC5F,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;QAE3C,eAAQ,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\n\nlet id = 0;\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 * @slot - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab-panel',\n  styleUrl: 'six-tab-panel.scss',\n  shadow: true,\n})\nexport class SixTabPanel {\n  componentId = `tab-panel-${++id}`;\n\n  @Element() host: HTMLSixTabPanelElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab panel will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n        <div\n          part=\"base\"\n          class=\"tab-panel\"\n          role=\"tabpanel\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-hidden={this.active ? 'false' : 'true'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-tab-panel.js","sourceRoot":"","sources":["../../../src/components/six-tab-panel/six-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;GASG;AAOH,MAAM,OAAO,WAAW;;IACd,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;gBAK3B,EAAE;kBAGiB,KAAK;;EAEvC,MAAM;IACJ,OAAO;IACL,uGAAuG;IACvG,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;MAC5F,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;QAE3C,eAAQ,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\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 * @slot - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab-panel',\n  styleUrl: 'six-tab-panel.scss',\n  shadow: true,\n})\nexport class SixTabPanel {\n  private componentId = `tab-panel-${++id}`;\n\n  @Element() host!: HTMLSixTabPanelElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab panel will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n        <div\n          part=\"base\"\n          class=\"tab-panel\"\n          role=\"tabpanel\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-hidden={this.active ? 'false' : 'true'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-tab-panel/test/six-tab-panel.spec.js

@@ -0,0 +1,20 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixTabPanel } from "../six-tab-panel";
+describe('six-tab-panel', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixTabPanel],
+      html: `<six-tab-panel></six-tab-panel>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-tab-panel id="tab-panel-1" style="display: none;">
+        <mock:shadow-root>
+          <div aria-hidden="true" aria-selected="false" class="tab-panel" part="base" role="tabpanel">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-tab-panel>
+    `);
+  });
+});
+//# sourceMappingURL=six-tab-panel.spec.js.map

package/dist/collection/components/six-tab-panel/test/six-tab-panel.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-tab-panel.spec.js","sourceRoot":"","sources":["../../../../src/components/six-tab-panel/test/six-tab-panel.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTabPanel } from '../six-tab-panel';\n\ndescribe('six-tab-panel', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixTabPanel],\n      html: `<six-tab-panel></six-tab-panel>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-tab-panel id=\"tab-panel-1\" style=\"display: none;\">\n        <mock:shadow-root>\n          <div aria-hidden=\"true\" aria-selected=\"false\" class=\"tab-panel\" part=\"base\" role=\"tabpanel\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-tab-panel>\n    `);\n  });\n});\n"]}

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

@@ -8,6 +8,7 @@
 
 :host {
   display: inline-block;
+  overflow: hidden;
 }
 
 .tag {
@@ -21,6 +22,11 @@
   cursor: default;
 }
 
+.tag__content {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .tag__clear::part(base) {
   color: inherit;
   padding: 0;

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

@@ -1,4 +1,6 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
+import { getTextContent } from "../../utils/slot";
+import { debounce } from "../../utils/execution-control";
 /**
  * @since 1.0
  * @status stable
@@ -13,19 +15,36 @@ import { h } from '@stencil/core';
  */
 export class SixTag {
   constructor() {
+    this.resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));
+    this.updateTooltip = () => {
+      if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {
+        this.tooltipElement.content = getTextContent(this.contentSlotElement);
+        this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);
+      }
+    };
+    this.handleClearClick = () => {
+      this.sixClear.emit();
+    };
     this.type = 'primary';
     this.size = 'medium';
     this.pill = false;
     this.clearable = false;
   }
   connectedCallback() {
-    this.handleClearClick = this.handleClearClick.bind(this);
+    if (this.contentElement != null) {
+      this.resizeObserver.observe(this.contentElement);
+    }
+  }
+  componentDidLoad() {
+    if (this.contentElement != null) {
+      this.resizeObserver.observe(this.contentElement);
+    }
   }
-  handleClearClick() {
-    this.sixClear.emit();
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
   }
   render() {
-    return (h("span", { ref: (el) => (this.tag = el), part: "base", class: {
+    return (h("span", { part: "base", class: {
         tag: true,
         // Types
         'tag--primary': this.type === 'primary',
@@ -42,7 +61,7 @@ export class SixTag {
         // Modifers
         'tag--pill': this.pill,
         'tag--clear': this.clearable,
-      } }, h("span", { part: "content", class: "tag__content" }, h("slot", null)), this.clearable && (h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+      } }, h("six-tooltip", { ref: (el) => (this.tooltipElement = el) }, h("span", { ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
   }
   static get is() { return "six-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -149,7 +168,8 @@ export class SixTag {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }

package/dist/collection/components/six-tag/six-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-tag.js","sourceRoot":"","sources":["../../../src/components/six-tag/six-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAGxE;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,MAAM;;gBAI0F,SAAS;gBAGtD,QAAQ;gBAGtC,KAAK;qBAGA,KAAK;;EAK1C,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3D,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;QAET,QAAQ;QACR,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QAEjC,QAAQ;QACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAEnC,WAAW;QACX,WAAW,EAAE,IAAI,CAAC,IAAI;QACtB,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B;MAED,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc;QACvC,eAAQ,CACH;MAEN,IAAI,CAAC,SAAS,IAAI,CACjB,uBACE,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, EventEmitter, Event } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  tag: HTMLElement;\n\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleClearClick = this.handleClearClick.bind(this);\n  }\n\n  handleClearClick() {\n    this.sixClear.emit();\n  }\n\n  render() {\n    return (\n      <span\n        ref={(el) => (this.tag = el)}\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <span part=\"content\" class=\"tag__content\">\n          <slot />\n        </span>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-tag.js","sourceRoot":"","sources":["../../../src/components/six-tag/six-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\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 * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  private contentSlotElement: HTMLSlotElement | undefined;\n  private tooltipElement: HTMLSixTooltipElement | undefined;\n  private contentElement: HTMLElement | undefined;\n  private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n  connectedCallback() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  private updateTooltip = () => {\n    if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n      this.tooltipElement.content = getTextContent(this.contentSlotElement);\n      this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n    }\n  };\n\n  private handleClearClick = () => {\n    this.sixClear.emit();\n  };\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n          <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n            <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n          </span>\n        </six-tooltip>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-tag/test/six-tag.spec.js

@@ -0,0 +1,54 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixTag } from "../six-tag";
+describe('six-tag', () => {
+  beforeEach(async () => {
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixTag],
+      html: `<six-tag size="small">label</six-tag>`,
+    });
+    expect(page.root).toEqualHtml(`
+
+      <six-tag size="small" type="primary">
+        <mock:shadow-root>
+          <span class="tag tag--primary tag--small" part="base">
+          <six-tooltip>
+            <span class="tag__content" part="content">
+              <slot></slot>
+            </span>
+            </six-tooltip>
+          </span>
+        </mock:shadow-root>
+        label
+      </six-tag>
+    `);
+  });
+  it('renders clearable', async () => {
+    const page = await newSpecPage({
+      components: [SixTag],
+      html: `<six-tag size="medium" clearable>label</six-tag>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-tag clearable="" size="medium" type="primary">
+        <mock:shadow-root>
+          <span class="tag tag--clear tag--medium tag--primary" part="base">
+          <six-tooltip>
+            <span class="tag__content" part="content">
+              <slot></slot>
+            </span>
+          </six-tooltip>
+            <six-icon-button class="tag__clear" exportparts="base:clear-button" name="clear" size="xSmall"></six-icon-button>
+          </span>
+        </mock:shadow-root>
+        label
+      </six-tag>
+    `);
+  });
+});
+//# sourceMappingURL=six-tag.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-tag.spec.js","sourceRoot":"","sources":["../../../../src/components/six-tag/test/six-tag.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,UAAU,CAAC,KAAK,IAAI,EAAE;IACpB,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC;MAC1D,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;MAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;MACpB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;KACtB,CAAC,CAAC,CAAC;EACN,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,uCAAuC;KAC9C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,kDAAkD;KACzD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTag } from '../six-tag';\n\ndescribe('six-tag', () => {\n  beforeEach(async () => {\n    global.ResizeObserver = jest.fn().mockImplementation(() => ({\n      observe: jest.fn(),\n      unobserve: jest.fn(),\n      disconnect: jest.fn(),\n    }));\n  });\n\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixTag],\n      html: `<six-tag size=\"small\">label</six-tag>`,\n    });\n    expect(page.root).toEqualHtml(`\n\n      <six-tag size=\"small\" type=\"primary\">\n        <mock:shadow-root>\n          <span class=\"tag tag--primary tag--small\" part=\"base\">\n          <six-tooltip>\n            <span class=\"tag__content\" part=\"content\">\n              <slot></slot>\n            </span>\n            </six-tooltip>\n          </span>\n        </mock:shadow-root>\n        label\n      </six-tag>\n    `);\n  });\n\n  it('renders clearable', async () => {\n    const page = await newSpecPage({\n      components: [SixTag],\n      html: `<six-tag size=\"medium\" clearable>label</six-tag>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-tag clearable=\"\" size=\"medium\" type=\"primary\">\n        <mock:shadow-root>\n          <span class=\"tag tag--clear tag--medium tag--primary\" part=\"base\">\n          <six-tooltip>\n            <span class=\"tag__content\" part=\"content\">\n              <slot></slot>\n            </span>\n          </six-tooltip>\n            <six-icon-button class=\"tag__clear\" exportparts=\"base:clear-button\" name=\"clear\" size=\"xSmall\"></six-icon-button>\n          </span>\n        </mock:shadow-root>\n        label\n      </six-tag>\n    `);\n  });\n});\n"]}

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

@@ -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(*) {