@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1,74 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/**
+ * @prop --size: The size of the avatar.
+ */
+:host {
+  display: inline-block;
+  --size: 2rem;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  background-color: var(--six-avatar-background-color);
+  font-family: var(--six-font-sans);
+  font-size: calc(var(--size) * 0.5);
+  font-weight: var(--six-font-weight-normal);
+  color: var(--six-avatar-color);
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
+}
+.avatar:hover {
+  box-shadow: var(--six-shadow-medium);
+}
+
+.avatar--circle {
+  border-radius: var(--six-border-radius-circle);
+}
+
+.avatar--rounded {
+  border-radius: var(--six-border-radius-medium);
+}
+
+.avatar--square {
+  border-radius: 0;
+}
+
+.avatar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar__initials {
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.avatar__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,128 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot icon - The default icon to use when no image or initials are present.
+ *
+ * @part base - The component's base wrapper.
+ * @part icon - The container that wraps the avatar icon.
+ * @part initials - The container that wraps the avatar initials.
+ * @part image - The avatar image.
+ */
+export class SixAvatar {
+    constructor() {
+        this.handleImageError = () => {
+            this.hasError = true;
+        };
+        this.hasError = false;
+        this.image = '';
+        this.alt = '';
+        this.initials = '';
+        this.shape = 'circle';
+    }
+    render() {
+        return (h("div", { part: "base", class: {
+                avatar: true,
+                'avatar--circle': this.shape === 'circle',
+                'avatar--rounded': this.shape === 'rounded',
+                'avatar--square': this.shape === 'square',
+            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (h("div", { part: "icon", class: "avatar__icon" }, h("slot", { name: "icon" }, h("six-icon", null, "person")))), this.initials && (h("div", { part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+    }
+    static get is() { return "six-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image source to use for the avatar."
+                },
+                "attribute": "image",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image."
+                },
+                "attribute": "alt",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initials to use as a fallback when no image is available (1-2 characters max recommended)."
+                },
+                "attribute": "initials",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square' | 'rounded'",
+                    "resolved": "\"circle\" | \"rounded\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape of the avatar."
+                },
+                "attribute": "shape",
+                "reflect": false,
+                "defaultValue": "'circle'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasError": {}
+        };
+    }
+}
+//# sourceMappingURL=six-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-avatar.js","sourceRoot":"","sources":["../../../src/components/six-avatar/six-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,SAAS;;QAeZ,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;wBAhBkB,KAAK;qBAGT,EAAE;mBAGJ,EAAE;wBAGG,EAAE;qBAG4B,QAAQ;;IAMzD,MAAM;QACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC;YAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,CACvB,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;gBACnC,YAAM,IAAI,EAAC,MAAM;oBACf,6BAA2B,CACtB,CACH,CACP;YAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP;YAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\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 icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  private handleImageError = () => {\n    this.hasError = true;\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {this.initials === '' && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixAvatar } from "../six-avatar";
+describe('six-avatar', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixAvatar],
+            html: `<six-avatar></six-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-avatar>
+        <mock:shadow-root>
+          <div aria-label="" class="avatar avatar--circle" part="base" role="image" tabindex="0">
+          <div class="avatar__icon" part="icon">
+            <slot name="icon">
+              <six-icon>
+                person
+              </six-icon>
+            </slot>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-avatar>
+    `);
+    });
+});
+//# sourceMappingURL=six-avatar.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-avatar.spec.js","sourceRoot":"","sources":["../../../../src/components/six-avatar/test/six-avatar.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixAvatar } from '../six-avatar';\n\ndescribe('six-avatar', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixAvatar],\n      html: `<six-avatar></six-avatar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-avatar>\n        <mock:shadow-root>\n          <div aria-label=\"\" class=\"avatar avatar--circle\" part=\"base\" role=\"image\" tabindex=\"0\">\n          <div class=\"avatar__icon\" part=\"icon\">\n            <slot name=\"icon\">\n              <six-icon>\n                person\n              </six-icon>\n            </slot>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-avatar>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,101 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-flex;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--six-font-family);
+  font-size: var(--six-font-size-x-small);
+  font-weight: var(--six-font-weight-semibold);
+  letter-spacing: var(--six-letter-spacing-normal);
+  line-height: 1;
+  border-radius: var(--six-border-radius-small);
+  white-space: nowrap;
+  padding: 3px 6px;
+  user-select: none;
+  cursor: inherit;
+}
+
+.badge--info {
+  background-color: var(--six-color-web-rock-900);
+  color: var(--six-color-white);
+}
+
+.badge--success {
+  background-color: var(--six-color-success-500);
+  color: var(--six-color-web-rock-900);
+}
+
+.badge--warning {
+  background-color: var(--six-color-warning-700);
+  color: var(--six-color-web-rock-900);
+}
+
+.badge--danger {
+  background-color: var(--six-color-danger-800);
+  color: var(--six-color-white);
+}
+
+.badge--action {
+  background-color: var(--six-color-action-500);
+  color: var(--six-color-white);
+}
+
+.badge--primary {
+  background-color: var(--six-color-clay-50);
+  color: var(--six-color-black);
+}
+
+.badge--pill {
+  border-radius: var(--six-border-radius-pill);
+}
+
+.badge--pulse {
+  animation: pulse 1.5s infinite;
+}
+
+.badge--pulse.badge--info {
+  --pulse-color: var(--six-color-web-rock-900);
+}
+
+.badge--pulse.badge--success {
+  --pulse-color: var(--six-color-success-500);
+}
+
+.badge--pulse.badge--warning {
+  --pulse-color: var(--six-color-warning-700);
+}
+
+.badge--pulse.badge--danger {
+  --pulse-color: var(--six-color-danger-800);
+}
+
+.badge--pulse.badge--action {
+  --pulse-color: var(--six-color-action-500);
+}
+
+.badge--pulse.badge--primary {
+  --pulse-color: var(--six-color-clay-50);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 var(--pulse-color);
+  }
+  70% {
+    box-shadow: 0 0 0 0.5rem transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}

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

@@ -0,0 +1,104 @@
+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 badge's content.
+ *
+ * @part base - The base wrapper
+ */
+export class SixBadge {
+    constructor() {
+        this.type = 'primary';
+        this.pill = false;
+        this.pulse = false;
+    }
+    render() {
+        return (h("span", { part: "base", class: {
+                badge: true,
+                // Types
+                'badge--primary': this.type === 'primary',
+                'badge--secondary': this.type === 'secondary',
+                'badge--success': this.type === 'success',
+                'badge--warning': this.type === 'warning',
+                'badge--danger': this.type === 'danger',
+                'badge--action': this.type === 'action',
+                'badge--info': this.type === 'info',
+                'badge--pill': this.pill,
+                'badge--pulse': this.pulse,
+            }, role: "status" }, h("slot", null)));
+    }
+    static get is() { return "six-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'",
+                    "resolved": "\"action\" | \"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The badge's type."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "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 badge with rounded edges."
+                },
+                "attribute": "pill",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to make the badge pulsate to draw attention."
+                },
+                "attribute": "pulse",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-badge.js","sourceRoot":"","sources":["../../../src/components/six-badge/six-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;;oBAE4E,SAAS;oBAGzF,KAAK;qBAGJ,KAAK;;IAErB,MAAM;QACJ,OAAO,CACL,YACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBAEX,QAAQ;gBACR,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;gBAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;aAC3B,EACD,IAAI,EAAC,QAAQ;YAEb,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\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 badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixBadge } from "../six-badge";
+describe('six-badge', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixBadge],
+            html: `<six-badge></six-badge>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-badge>
+        <mock:shadow-root>
+          <span class="badge badge--primary" part="base" role="status">
+            <slot></slot>
+          </span>
+         </mock:shadow-root>
+      </six-badge>
+    `);
+    });
+});
+//# sourceMappingURL=six-badge.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-badge.spec.js","sourceRoot":"","sources":["../../../../src/components/six-badge/test/six-badge.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixBadge } from '../six-badge';\n\ndescribe('six-badge', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixBadge],\n      html: `<six-badge></six-badge>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-badge>\n        <mock:shadow-root>\n          <span class=\"badge badge--primary\" part=\"base\" role=\"status\">\n            <slot></slot>\n          </span>\n         </mock:shadow-root>\n      </six-badge>\n    `);\n  });\n});\n"]}