@scouterna/ui-webc 1.0.0 → 2.1.0

package/dist/collection/components/bottom-bar-item/bottom-bar-item.js

@@ -14,6 +14,8 @@ export class ScoutBottomBarItem {
      * `type` is set to "link".
      */
     href;
+    target;
+    rel;
     /**
      * An icon to display above the label. Must be an SVG string.
      */
@@ -33,9 +35,13 @@ export class ScoutBottomBarItem {
         const props = this.type === "link"
             ? {
                 href: this.href,
+                target: this.target,
+                // This might not be our job, but better safe than sorry.
+                rel: this.rel ??
+                    (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (h(Tag, { key: 'da439bd71733883dd610eb24b9ffffb9bb2369e1', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: 'e3267d4487d643265984555155760cbdb242ef81', class: "icon", innerHTML: this.icon }), h("span", { key: '02ade513642f237b24ef25856bf4b56e386b7b2a', class: "label" }, this.label)));
+        return (h(Tag, { key: 'd6accb2a7bb0af55f33dba3299749b7ec5ba68a4', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '419edd0be8ff7a4f91aeb1641afffb9d949efba2', class: "icon", innerHTML: this.icon }), h("span", { key: 'e1e40f9a192ffe8a0152a1d0333fbedf174e7bea', class: "label" }, this.label)));
     }
     static get is() { return "scout-bottom-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -61,7 +67,7 @@ export class ScoutBottomBarItem {
                     "references": {
                         "ItemType": {
                             "location": "local",
-                            "path": "/home/runner/work/j26-web-components/j26-web-components/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.tsx",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.tsx",
                             "id": "src/components/bottom-bar-item/bottom-bar-item.tsx::ItemType"
                         }
                     }
@@ -97,6 +103,44 @@ export class ScoutBottomBarItem {
                 "reflect": false,
                 "attribute": "href"
             },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/bottom-bar-item/bottom-bar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-bar-item.js","sourceRoot":"","sources":["../../../src/components/bottom-bar-item/bottom-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;GAGG;AAQH,MAAM,OAAO,kBAAkB;IAC7B;;OAEG;IACK,IAAI,GAAa,QAAQ,CAAC;IAElC;;;OAGG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,MAAM,CAAW;IAEhB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;YAC3C,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\nimport clsx from \"clsx\";\n\nexport type ItemType = \"button\" | \"link\";\n\n/**\n * A bottom bar item used within the bottom bar for navigation. Should not be\n * used outside of a bottom bar.\n */\n@Component({\n  tag: \"scout-bottom-bar-item\",\n  styleUrl: \"bottom-bar-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutBottomBarItem {\n  /**\n   * The type of the bottom bar item, either a button or a link.\n   */\n  @Prop() type: ItemType = \"button\";\n\n  /**\n   * An optional link to navigate to when the item is clicked. Only used when\n   * `type` is set to \"link\".\n   */\n  @Prop() href?: string;\n\n  /**\n   * An icon to display above the label. Must be an SVG string.\n   */\n  @Prop() icon!: string;\n\n  /**\n   * The label to display below the icon.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Whether the item is currently active. Should be set to true when the item\n   * represents the current page.\n   */\n  @Prop() active?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n          }\n        : {};\n\n    return (\n      <Tag\n        class={clsx(\"button\", this.active && \"active\")}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <span class=\"icon\" innerHTML={this.icon} />\n        <span class=\"label\">{this.label}</span>\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bottom-bar-item.js","sourceRoot":"","sources":["../../../src/components/bottom-bar-item/bottom-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;GAGG;AAQH,MAAM,OAAO,kBAAkB;IAC7B;;OAEG;IACK,IAAI,GAAa,QAAQ,CAAC;IAElC;;;OAGG;IACK,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,MAAM,CAAW;IAEhB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;YAC3C,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\nimport clsx from \"clsx\";\n\nexport type ItemType = \"button\" | \"link\";\n\n/**\n * A bottom bar item used within the bottom bar for navigation. Should not be\n * used outside of a bottom bar.\n */\n@Component({\n  tag: \"scout-bottom-bar-item\",\n  styleUrl: \"bottom-bar-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutBottomBarItem {\n  /**\n   * The type of the bottom bar item, either a button or a link.\n   */\n  @Prop() type: ItemType = \"button\";\n\n  /**\n   * An optional link to navigate to when the item is clicked. Only used when\n   * `type` is set to \"link\".\n   */\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * An icon to display above the label. Must be an SVG string.\n   */\n  @Prop() icon!: string;\n\n  /**\n   * The label to display below the icon.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Whether the item is currently active. Should be set to true when the item\n   * represents the current page.\n   */\n  @Prop() active?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {};\n\n    return (\n      <Tag\n        class={clsx(\"button\", this.active && \"active\")}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <span class=\"icon\" innerHTML={this.icon} />\n        <span class=\"label\">{this.label}</span>\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/button.css

@@ -2,7 +2,7 @@
   display: inline-flex;
 }
 
-button {
+.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -13,6 +13,8 @@ button {
   border-radius: var(--spacing-2);
   border: 1px solid transparent;
   cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .icon {
@@ -26,69 +28,69 @@ button {
   height: 100%;
 }
 
-button.primary {
+.button.primary {
   background-color: var(--color-background-brand-base);
   color: var(--color-text-brand-inverse);
 }
 
-button.primary:hover {
+.button.primary:hover {
     background-color: var(--color-background-brand-hovered);
   }
 
-button.primary:active {
+.button.primary:active {
     background-color: var(--color-background-brand-pressed);
   }
 
-button.outlined {
+.button.outlined {
   background-color: transparent;
   border-color: var(--color-background-brand-subtle-base);
   color: var(--color-text-brand-base);
 }
 
-button.outlined:hover {
+.button.outlined:hover {
     background-color: var(--color-background-brand-subtle-hovered);
   }
 
-button.outlined:active {
+.button.outlined:active {
     background-color: var(--color-background-brand-subtle-pressed);
   }
 
-button.text {
+.button.text {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-text-brand-base);
 }
 
-button.text:hover {
+.button.text:hover {
     background-color: var(--color-background-brand-subtle-hovered);
   }
 
-button.text:active {
+.button.text:active {
     background-color: var(--color-background-brand-subtle-pressed);
   }
 
-button.caution {
+.button.caution {
   background-color: var(--color-background-caution-bold-base);
   color: var(--color-text-caution-bold-base);
 }
 
-button.caution:hover {
+.button.caution:hover {
     background-color: var(--color-background-caution-bold-hovered);
   }
 
-button.caution:active {
+.button.caution:active {
     background-color: var(--color-background-caution-bold-pressed);
   }
 
-button.danger {
+.button.danger {
   background-color: var(--color-background-danger-bold-base);
   color: var(--color-text-danger-bold-base);
 }
 
-button.danger:hover {
+.button.danger:hover {
     background-color: var(--color-background-danger-bold-hovered);
   }
 
-button.danger:active {
+.button.danger:active {
     background-color: var(--color-background-danger-bold-pressed);
-  }
+  }

package/dist/collection/components/button/button.js

@@ -4,6 +4,9 @@ import { h } from "@stencil/core";
  */
 export class ScoutButton {
     type = "button";
+    href;
+    target;
+    rel;
     /**
      * The variant primarily affects the color of the button.
      */
@@ -14,7 +17,19 @@ export class ScoutButton {
     icon;
     scoutClick;
     render() {
-        return (h("button", { key: '7c5b9b8b4dbb40537b923585af17c81dc6ee1644', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, h("slot", { key: 'a89b795dbbd004cd8d9123bacf338cb87cca4953' }), this.icon && h("span", { key: '12ac9a0668ebd4d84fd02e5065f1c9802d188171', class: "icon", innerHTML: this.icon })));
+        const Tag = this.type === "link" ? "a" : "button";
+        const props = this.type === "link"
+            ? {
+                href: this.href,
+                target: this.target,
+                // This might not be our job, but better safe than sorry.
+                rel: this.rel ??
+                    (this.target === "_blank" ? "noopener noreferrer" : undefined),
+            }
+            : {
+                type: this.type,
+            };
+        return (h(Tag, { key: 'fc7b2867c649782e166b7a363c5e3b43955a8011', class: `button ${this.variant}`, onClick: () => this.scoutClick.emit(), ...props }, h("slot", { key: '60d6e548ddf0da4bca40f1daea0fb656da8fb733' }), this.icon && h("span", { key: 'aef054b5de8cc20f5f26a9e2e82b76f43a9d3f32', class: "icon", innerHTML: this.icon })));
     }
     static get is() { return "scout-button"; }
     static get encapsulation() { return "shadow"; }
@@ -35,8 +50,8 @@ export class ScoutButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"button\" | \"submit\" | \"reset\"",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "original": "\"button\" | \"submit\" | \"reset\" | \"link\"",
+                    "resolved": "\"button\" | \"link\" | \"reset\" | \"submit\"",
                     "references": {}
                 },
                 "required": false,
@@ -51,6 +66,63 @@ export class ScoutButton {
                 "attribute": "type",
                 "defaultValue": "\"button\""
             },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -60,7 +132,7 @@ export class ScoutButton {
                     "references": {
                         "Variant": {
                             "location": "local",
-                            "path": "/home/runner/work/j26-web-components/j26-web-components/packages/ui-webc/src/components/button/button.tsx",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/button/button.tsx",
                             "id": "src/components/button/button.tsx::Variant"
                         }
                     }

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAQH,MAAM,OAAO,WAAW;IACd,IAAI,GAAkC,QAAQ,CAAC;IAEvD;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IAEb,UAAU,CAAqB;IAExC,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAErC,8DAAQ;YACP,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAClD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <button\n        type={this.type}\n        class={this.variant}\n        onClick={() => this.scoutClick.emit()}\n      >\n        <slot />\n        {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAQH,MAAM,OAAO,WAAW;IACd,IAAI,GAA2C,QAAQ,CAAC;IAExD,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IAEb,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;QAER,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,EAAE,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,8DAAQ;YACP,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CACrD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {\n            type: this.type,\n          };\n\n    return (\n      <Tag\n        class={`button ${this.variant}`}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <slot />\n        {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/card.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ScoutCard {
     render() {
-        return h("slot", { key: 'bde708b7482da31d53fbc29581bed3f068e26279' });
+        return h("slot", { key: '44e84e98fac4b83c20fdec40a532c752f41dffd7' });
     }
     static get is() { return "scout-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.css

@@ -0,0 +1,81 @@
+.checkbox {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  border-radius: 3px;
+  background-color: var(--color-text-brand-inverse);
+  border: 2px solid var(--color-gray-300);
+  position: relative;
+}
+
+.checkbox:hover {
+  border: 2px solid var(--color-gray-400);
+  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);
+  cursor: pointer;
+}
+
+.checkbox:active {
+  background-color: var(--color-background-brand-subtle-pressed);
+}
+
+.checkbox:checked:hover {
+  background-color: var(--color-background-brand-hovered);
+  border: 2px solid var(--color-background-brand-hovered);
+  box-shadow: none;
+}
+
+.checkbox:checked {
+  background-color: var(--color-background-brand-base);
+  border-color: var(--color-background-brand-base);
+}
+
+.checkbox::after {
+  content: "";
+  position: absolute;
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.checkbox:checked::before {
+  content: "";
+  background-color: var(--color-text-brand-inverse);
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  position: absolute;
+  /* Needed because of the border */
+  top: 50%;
+  left: 50%;
+  right: 0;
+  bottom: 0;
+  transform: translate(-50%, -50%);
+  -webkit-mask-image: var(--icon-checkbox);
+          mask-image: var(--icon-checkbox);
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+
+.checkbox:disabled {
+  pointer-events: none;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-100);
+}
+
+label {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  font: var(--type-label-base);
+  color: var(--color-text-base);
+}
+
+.inlineDivider {
+  width: var(--spacing-2);
+}

package/dist/collection/components/checkbox/checkbox.js

@@ -0,0 +1,176 @@
+import { h, } from "@stencil/core";
+import checkIcon from "@tabler/icons/outline/check.svg";
+export class ScoutCheckbox {
+    checked = false;
+    disabled = false;
+    /**
+     * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
+     */
+    ariaLabelledby;
+    label;
+    ariaId;
+    scoutCheckboxChecked;
+    /**
+     * Internal event used for form field association.
+     */
+    _fieldId;
+    componentWillLoad() {
+        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
+        this._fieldId.emit(this.ariaId);
+    }
+    onClick(event) {
+        const checkbox = event.target;
+        console.log("checkbox", checkbox.checked);
+        this.scoutCheckboxChecked.emit({
+            checked: checkbox.checked,
+            element: checkbox,
+        });
+    }
+    /*
+    todo:
+    - Wrap checkbox with label if used.
+    - make sure it works with field nicely with label.
+    */
+    render() {
+        const Tag = this.label && this.label.length ? "label" : "div";
+        return (h(Tag, { key: '39d7814c3af4261c7b60423464d5b3167ad96003' }, this.label, h("span", { key: '10375644d673913047c66460c2c0395f0110b644', class: "inlineDivider" }), h("input", { key: '3e5c5fa2571874e75325a7a3161a15e00332cd36', class: "checkbox", onChange: (event) => this.onClick(event), style: { "--icon-checkbox": `url(${checkIcon})` }, type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked })));
+    }
+    static get is() { return "scout-checkbox"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop if you need to connect your checkbox with another element describing its use, other than the property label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelledby"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutCheckboxChecked",
+                "name": "scoutCheckboxChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    checked: boolean;\n    element: HTMLInputElement;\n  }",
+                    "resolved": "{ checked: boolean; element: HTMLInputElement; }",
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "_fieldId",
+                "name": "_fieldId",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal event used for form field association."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/collection/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAOxD,MAAM,OAAO,aAAa;IAChB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEb,MAAM,CAAS;IAEf,oBAAoB,CAG1B;IACH;;OAEG;IACM,QAAQ,CAAuB;IAExC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,CAAC,KAAY;QAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;QAE1C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;YAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IACD;;;;MAIE;IAEF,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9D,OAAO,CACL,EAAC,GAAG;YACD,IAAI,CAAC,KAAK;YACX,6DAAM,KAAK,EAAC,eAAe,GAAQ;YACnC,8DACE,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,EACjD,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,qBACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\n\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox {\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutCheckboxChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n    console.log(\"checkbox\", checkbox.checked);\n\n    this.scoutCheckboxChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n  /*\n  todo:\n  - Wrap checkbox with label if used.\n  - make sure it works with field nicely with label.\n  */\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"checkbox\"\n          onChange={(event) => this.onClick(event)}\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n        />\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/divider/divider.css

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  height: 1px;
+  background-color: var(--color-gray-200);
+}

package/dist/collection/components/divider/divider.js

@@ -0,0 +1,20 @@
+import { Host, h } from "@stencil/core";
+export class ScoutDivider {
+    render() {
+        return h(Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
+    }
+    static get is() { return "scout-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+}
+//# sourceMappingURL=divider.js.map

package/dist/collection/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;IAClB,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-divider\",\n  styleUrl: \"divider.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutDivider {\n  render() {\n    return <Host />;\n  }\n}\n"]}

package/dist/collection/components/field/field.js

@@ -30,7 +30,7 @@ export class ScoutField {
         this.errorHidden = false;
     }
     render() {
-        return (h("div", { key: 'bcd308f7ff69063860281b7f4f48ef2baa608308', class: "field" }, h("label", { key: '756d4a97399ed94970b3d39850dd5c4d0e155a99', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '3700f8aba58c90b14224e0d35a147f1a11ba7f98' }), h("p", { key: '60a70a27e3b7811accc657bbe49405306d342d9d', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '44f8377005f43ca1a332d6c4d8aec48e5aafb3c4', class: "help-text" }, this.helpText)));
+        return (h("div", { key: 'e38499f35a268b15962a31a2dc45361fb803a8e3', class: "field" }, h("label", { key: '3e6ba58b91285a082964bd01336fd4c7d8260835', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '75de87617caef28b9d90d0e112870a5cf2b08bfc' }), h("p", { key: 'f152609ade3a840a4bfd6bfef5f5aadf8060fab2', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '86069ef5f19840e44e79a274152742070b51e7a8', class: "help-text" }, this.helpText)));
     }
     static get is() { return "scout-field"; }
     static get encapsulation() { return "scoped"; }