@six-group/ui-library 0.0.0-insider.03e5196

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

@@ -0,0 +1,103 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: inline-block;
+}
+
+.tag {
+  display: flex;
+  align-items: center;
+  border: solid 1px;
+  font-family: var(--six-font-family);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  cursor: default;
+}
+
+.tag__clear::part(base) {
+  color: inherit;
+  padding: 0;
+}
+
+.tag--info {
+  color: var(--six-color-white);
+  background-color: var(--six-color-web-rock-900);
+  border-color: var(--six-color-web-rock-900);
+}
+
+.tag--success {
+  color: var(--six-color-web-rock-900);
+  border-color: var(--six-color-success-500);
+  background-color: var(--six-color-success-500);
+}
+
+.tag--primary {
+  color: var(--six-color-web-rock-900);
+  border-color: var(--six-color-clay-50);
+  background-color: var(--six-color-clay-50);
+}
+
+.tag--warning {
+  color: var(--six-color-web-rock-900);
+  border-color: var(--six-color-warning-700);
+  background-color: var(--six-color-warning-700);
+}
+
+.tag--danger {
+  color: var(--six-color-white);
+  border-color: var(--six-color-danger-800);
+  background-color: var(--six-color-danger-800);
+}
+
+.tag--action {
+  color: var(--six-color-white);
+  border-color: var(--six-color-action-500);
+  background-color: var(--six-color-action-500);
+}
+
+.tag--small {
+  font-size: var(--six-button-font-size-small);
+  height: calc(var(--six-height-small) * 0.8);
+  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);
+  border-radius: var(--six-input-border-radius-small);
+  padding: 0 var(--six-spacing-x-small);
+}
+.tag--small .tag__clear {
+  margin-left: var(--six-spacing-xx-small);
+  margin-right: calc(-1 * var(--six-spacing-xxx-small));
+}
+
+.tag--medium {
+  font-size: var(--six-button-font-size-medium);
+  height: calc(var(--six-height-medium) * 0.8);
+  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);
+  border-radius: var(--six-input-border-radius-medium);
+  padding: 0 var(--six-spacing-small);
+}
+.tag--medium .tag__clear {
+  margin-left: var(--six-spacing-xx-small);
+  margin-right: calc(-1 * var(--six-spacing-xx-small));
+}
+
+.tag--large {
+  font-size: var(--six-button-font-size-large);
+  height: calc(var(--six-height-large) * 0.8);
+  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);
+  border-radius: var(--six-input-border-radius-large);
+  padding: 0 var(--six-spacing-medium);
+}
+.tag--large .tag__clear {
+  margin-left: var(--six-spacing-xx-small);
+  margin-right: calc(-1 * var(--six-spacing-x-small));
+}
+
+.tag--pill {
+  border-radius: var(--six-border-radius-pill);
+}

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

@@ -0,0 +1,159 @@
+import { h } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The tag's content.
+ *
+ * @part base - The component's base wrapper.
+ * @part content - The tag content.
+ * @part clear-button - The clear button.
+ */
+export class SixTag {
+  constructor() {
+    this.type = 'primary';
+    this.size = 'medium';
+    this.pill = false;
+    this.clearable = false;
+  }
+  connectedCallback() {
+    this.handleClearClick = this.handleClearClick.bind(this);
+  }
+  handleClearClick() {
+    this.sixClear.emit();
+  }
+  render() {
+    return (h("span", { ref: (el) => (this.tag = el), part: "base", class: {
+        tag: true,
+        // Types
+        'tag--primary': this.type === 'primary',
+        'tag--success': this.type === 'success',
+        'tag--info': this.type === 'info',
+        'tag--warning': this.type === 'warning',
+        'tag--danger': this.type === 'danger',
+        'tag--action': this.type === 'action',
+        'tag--text': this.type === 'text',
+        // Sizes
+        'tag--small': this.size === 'small',
+        'tag--medium': this.size === 'medium',
+        'tag--large': this.size === 'large',
+        // 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 }))));
+  }
+  static get is() { return "six-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-tag.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text'",
+          "resolved": "\"action\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"text\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The tag's type."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'primary'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The tag's size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      },
+      "pill": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw a pill-style tag with rounded edges."
+        },
+        "attribute": "pill",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to make the tag clearable."
+        },
+        "attribute": "clearable",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixClear",
+        "name": "six-tag-clear",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the clear button is activated."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }];
+  }
+}
+//# sourceMappingURL=six-tag.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,196 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+.form-control .form-control__label {
+  display: none;
+}
+.form-control .form-control__help-text {
+  display: none;
+}
+.form-control .form-control__error-text {
+  display: none;
+}
+
+.form-control--has-label .form-control__label {
+  display: inline-block;
+  color: var(--six-input-label-color);
+  font-weight: var(--six-font-weight-bold);
+  margin-bottom: var(--six-spacing-x-small);
+}
+.form-control--has-label .form-control__label__required::after {
+  color: var(--six-color-danger-800);
+  content: "*";
+}
+.form-control--has-label.form-control--small .form-control__label {
+  font-size: var(--six-input-label-font-size-small);
+}
+.form-control--has-label.form-control--medium .form-control__label {
+  font-size: var(--six-input-label-font-size-medium);
+}
+.form-control--has-label.form-control--large .form-control_label {
+  font-size: var(--six-input-label-font-size-large);
+}
+
+.form-control--has-help-text .form-control__help-text {
+  display: block;
+  color: var(--six-input-help-text-color);
+  margin-top: var(--six-spacing-x-small);
+}
+.form-control--has-help-text .form-control__help-text ::slotted(*) {
+  margin-top: var(--six-spacing-xxx-small);
+}
+.form-control--has-help-text.form-control--small .form-control__help-text {
+  font-size: var(--six-input-help-text-font-size-small);
+}
+.form-control--has-help-text.form-control--medium .form-control__help-text {
+  font-size: var(--six-input-help-text-font-size-medium);
+}
+.form-control--has-help-text.form-control--large .form-control__help-text {
+  font-size: var(--six-input-help-text-font-size-large);
+}
+
+.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(*) {
+  margin-top: var(--six-spacing-xxx-small);
+}
+.form-control--has-error-text.form-control--small .form-control__error-text {
+  font-size: var(--six-input-help-text-font-size-small);
+}
+.form-control--has-error-text.form-control--medium .form-control__error-text {
+  font-size: var(--six-input-help-text-font-size-medium);
+}
+.form-control--has-error-text.form-control--large .form-control__error-text {
+  font-size: var(--six-input-help-text-font-size-large);
+}
+
+.form-control--disabled .form-control__help-text {
+  color: var(--six-input-help-text-color-disabled);
+}
+.form-control--disabled .form-control__label {
+  color: var(--six-input-label-color-disabled);
+}
+
+.form-control--invalid:not(.form-control--disabled) .form-control__label {
+  color: var(--six-input-label-color);
+}
+
+:host {
+  display: block;
+}
+
+.textarea {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  font-family: var(--six-font-family);
+  font-weight: var(--six-input-font-weight);
+  line-height: var(--six-line-height-normal);
+  letter-spacing: var(--six-input-letter-spacing);
+  background-color: var(--six-input-background-color);
+  border: solid var(--six-border-width) var(--six-input-border-color);
+  vertical-align: middle;
+  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;
+  cursor: text;
+}
+.textarea:hover:not(.textarea--disabled) {
+  background-color: var(--six-input-background-color-hover);
+  border-color: var(--six-input-border-color-hover);
+}
+.textarea:hover:not(.textarea--disabled) .textarea__control {
+  color: var(--six-input-color-hover);
+}
+.textarea.textarea--focused:not(.textarea--disabled) {
+  background-color: var(--six-input-background-color-focus);
+  box-shadow: var(--six-input-focus-shadow);
+  border-color: var(--six-input-border-color-focus);
+  color: var(--six-input-color-focus);
+}
+.textarea.textarea--focused:not(.textarea--disabled) .textarea__control {
+  color: var(--six-input-color-focus);
+}
+.textarea.textarea--disabled {
+  background-color: var(--six-input-background-color-disabled);
+  border-color: var(--six-input-border-color-disabled);
+  cursor: not-allowed;
+}
+.textarea.textarea--disabled .textarea__control {
+  color: var(--six-input-color-disabled);
+}
+.textarea.textarea--disabled .textarea__control::placeholder {
+  color: var(--six-input-placeholder-color-disabled);
+}
+
+.textarea__control {
+  flex: 1 1 auto;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 1.4;
+  color: var(--sl-input-color);
+  border: none;
+  background: none;
+  box-shadow: none;
+  cursor: inherit;
+  -webkit-appearance: none;
+}
+.textarea__control::-webkit-search-decoration, .textarea__control::-webkit-search-cancel-button, .textarea__control::-webkit-search-results-button, .textarea__control::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+.textarea__control::placeholder {
+  color: var(--six-input-placeholder-color);
+  user-select: none;
+}
+.textarea__control:focus {
+  outline: none;
+}
+
+.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {
+  border-color: var(--six-input-border-color-danger);
+}
+
+.textarea--small {
+  border-radius: var(--six-input-border-radius-small);
+  font-size: var(--six-input-font-size-small);
+}
+.textarea--small .textarea__control {
+  padding: 0.5em var(--six-input-spacing-small);
+}
+
+.textarea--medium {
+  border-radius: var(--six-input-border-radius-medium);
+  font-size: var(--six-input-font-size-medium);
+}
+.textarea--medium .textarea__control {
+  padding: 0.5em var(--six-input-spacing-medium);
+}
+
+.textarea--large {
+  border-radius: var(--six-input-border-radius-large);
+  font-size: var(--six-input-font-size-large);
+}
+.textarea--large .textarea__control {
+  padding: 0.5em var(--six-input-spacing-large);
+}
+
+.textarea--resize-none .textarea__control {
+  resize: none;
+}
+
+.textarea--resize-vertical .textarea__control {
+  resize: vertical;
+}
+
+.textarea--resize-auto .textarea__control {
+  height: auto;
+  resize: none;
+}