@scouterna/ui-webc 2.1.0 → 2.2.1

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

@@ -36,4 +36,4 @@
 a {
   -webkit-text-decoration: none;
   text-decoration: none;
-}
+}

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

@@ -41,7 +41,7 @@ export class ScoutBottomBarItem {
                     (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        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)));
+        return (h(Tag, { key: '96f414836614c63073d7d4250e5d51e9b4f0fe18', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '9a6715eb90b616aa62bd4120ff49aeb687d43d27', class: "icon", innerHTML: this.icon }), h("span", { key: 'b66e620d12e0da541e4b6366a2eb373383dff4b8', class: "label" }, this.label)));
     }
     static get is() { return "scout-bottom-bar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 :host {
   display: inline-flex;
+  height: var(--spacing-10);
 }
 
 .button {
@@ -7,7 +8,6 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-3);
-  height: var(--spacing-10);
   padding: 0 var(--spacing-4);
   font: var(--type-body-base);
   border-radius: var(--spacing-2);
@@ -28,6 +28,27 @@
   height: 100%;
 }
 
+.button.icon-only {
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+  padding: 0;
+}
+
+.button.icon-only .icon {
+  margin: 0;
+}
+
+.button.icon-only .content {
+  /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .button.primary {
   background-color: var(--color-background-brand-base);
   color: var(--color-text-brand-inverse);
@@ -93,4 +114,4 @@
 
 .button.danger:active {
     background-color: var(--color-background-danger-bold-pressed);
-  }
+  }

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

@@ -15,6 +15,7 @@ export class ScoutButton {
      * An optional icon to display alongside the button text. Must be an SVG string.
      */
     icon;
+    iconOnly = false;
     scoutClick;
     render() {
         const Tag = this.type === "link" ? "a" : "button";
@@ -29,7 +30,7 @@ export class ScoutButton {
             : {
                 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 })));
+        return (h(Tag, { key: 'e82f79602197488fbf8e013259203ae5862da824', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '1be7c7ccdb6f6570f08f06a81539174c76cbaa8c', class: "content" }, h("slot", { key: '556d6b6497cbcd437fbd4d77bff8b814511c844a' })), this.icon && h("span", { key: '9cf1e36f3cd767e2ac65dd0bdb1401759bf71e9e', class: "icon", innerHTML: this.icon })));
     }
     static get is() { return "scout-button"; }
     static get encapsulation() { return "shadow"; }
@@ -167,6 +168,26 @@ export class ScoutButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
             }
         };
     }

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,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"]}
+{"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;IACd,QAAQ,GAAY,KAAK,CAAC;IAEzB,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,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,SAAS;gBACnB,8DAAQ,CACH;YACN,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  @Prop() iconOnly: boolean = false;\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} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <span class=\"content\">\n          <slot />\n        </span>\n        {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/card.css

@@ -4,5 +4,7 @@
   border: 1px solid var(--color-gray-100);
   padding: var(--spacing-2);
   /* TODO: We don't have tokens for shadows yet */
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-}
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+}

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

@@ -25,7 +25,7 @@
 
 .checkbox:checked:hover {
   background-color: var(--color-background-brand-hovered);
-  border: 2px solid var(--color-background-brand-hovered);
+  border-color: var(--color-background-brand-hovered);
   box-shadow: none;
 }
 
@@ -70,12 +70,8 @@
 
 label {
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
+  gap: var(--spacing-2);
   font: var(--type-label-base);
   color: var(--color-text-base);
 }
-
-.inlineDivider {
-  width: var(--spacing-2);
-}

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

@@ -8,8 +8,10 @@ export class ScoutCheckbox {
      */
     ariaLabelledby;
     label;
+    value;
+    name;
     ariaId;
-    scoutCheckboxChecked;
+    scoutChecked;
     /**
      * Internal event used for form field association.
      */
@@ -18,22 +20,16 @@ export class ScoutCheckbox {
         this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
         this._fieldId.emit(this.ariaId);
     }
-    onClick(event) {
+    onChange(event) {
         const checkbox = event.target;
-        console.log("checkbox", checkbox.checked);
-        this.scoutCheckboxChecked.emit({
+        this.scoutChecked.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 })));
+        const Tag = this.label?.length ? "label" : "div";
+        return (h(Tag, { key: '088d1bbf053b0c9cf42851b9954030316c5ef01a' }, h("input", { key: 'd212a3f91e78d20270934e336c2356ee3474c129', id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkIcon})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => this.onChange(event) }), this.label));
     }
     static get is() { return "scout-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -126,6 +122,44 @@ export class ScoutCheckbox {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             }
         };
     }
@@ -136,8 +170,8 @@ export class ScoutCheckbox {
     }
     static get events() {
         return [{
-                "method": "scoutCheckboxChecked",
-                "name": "scoutCheckboxChecked",
+                "method": "scoutChecked",
+                "name": "scoutChecked",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1 +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"]}
+{"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;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,MAAM,CAAS;IAEf,YAAY,CAGlB;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,QAAQ,CAAC,KAAY;QACnB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAElD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACF,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GACzC;YACD,IAAI,CAAC,KAAK,CACP,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  @Prop() value: string;\n\n  @Prop() name: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutChecked: 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  onChange(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        <input\n          id={this.ariaId}\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          class=\"checkbox\"\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n          onChange={(event) => this.onChange(event)}\n        />\n        {this.label}\n      </Tag>\n    );\n  }\n}\n"]}

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

@@ -2,4 +2,4 @@
   display: block;
   height: 1px;
   background-color: var(--color-gray-200);
-}
+}

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ScoutDivider {
     render() {
-        return h(Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
+        return h(Host, { key: 'e139694ee7eb8dd88235b420d987878af2c970ce' });
     }
     static get is() { return "scout-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field/field.css

@@ -23,4 +23,4 @@
   font: var(--type-label-sm);
   color: var(--color-gray-600);
   margin: var(--spacing-1) 0 0 0;
-}
+}

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

@@ -30,7 +30,7 @@ export class ScoutField {
         this.errorHidden = false;
     }
     render() {
-        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)));
+        return (h("div", { key: '3cffad1b9fda1ea4060cf4587420ea67d16a7cde', class: "field" }, h("label", { key: '2d065d94b9aa5a9f251366a6fd58559210b485c9', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '3bdc5d1426b0fca754ee4eface64514503758d3c' }), h("p", { key: '57cb158fec7e16cbb2eb78481939fb84e86f9836', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '50b05f88914cb9f0f4fc615b24cdd2d6ac525219', class: "help-text" }, this.helpText)));
     }
     static get is() { return "scout-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -12,4 +12,4 @@
   background-color: var(--color-gray-100);
   color: var(--color-gray-700);
   cursor: not-allowed;
-}
+}

package/dist/collection/components/input/input.js

@@ -18,6 +18,7 @@ export class ScoutInput {
      * Value of the input element, in case you want to control it yourself.
      */
     value = "";
+    name;
     /**
      * Whether the input is disabled. Disabled inputs are not editable, excluded
      * from tab order and are not validated.
@@ -52,7 +53,7 @@ export class ScoutInput {
         });
     }
     render() {
-        return (h("input", { key: '7bc05d32826cd3173b6a6e4620acfb501fae4edc', id: this.ariaId, type: this.type, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: (e) => this.onInput(e), onBlur: () => this.scoutBlur.emit() }));
+        return (h("input", { key: '63ad729182147b6a8490f4b88becc3207bfcfa49', id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: (e) => this.onInput(e), onBlur: () => this.scoutBlur.emit() }));
     }
     static get is() { return "scout-input"; }
     static get encapsulation() { return "scoped"; }
@@ -158,6 +159,25 @@ export class ScoutInput {
                 "attribute": "value",
                 "defaultValue": "\"\""
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AA6BvB,MAAM,OAAO,UAAU;IACrB;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAE3B;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;;;OAIG;IACK,QAAQ,CAAoC;IAE3C,gBAAgB,CAGtB;IACM,SAAS,CAAqB;IAEvC;;OAEG;IACM,QAAQ,CAAuB;IAE/B,MAAM,CAAS;IAExB,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,KAAiB;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAE/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACrD,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,GACnC,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput implements ComponentInterface {\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Custom validation function run on top of the implicit validation performed\n   * by the browser. Return a string with the validation message to mark the\n   * input as invalid, or null to mark it as valid.\n   */\n  @Prop() validate?: (value: string) => string | null;\n\n  @Event() scoutInputChange: EventEmitter<{\n    value: string;\n    element: HTMLInputElement;\n  }>;\n  @Event() scoutBlur: EventEmitter<void>;\n\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  @State() ariaId: 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  onInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n\n    if (this.validate) {\n      const validationMessage = this.validate(input.value);\n      input.setCustomValidity(validationMessage ?? \"\");\n    }\n\n    this.scoutInputChange.emit({\n      value: input.value,\n      element: input,\n    });\n  }\n\n  render() {\n    return (\n      <input\n        id={this.ariaId}\n        type={this.type}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={(e) => this.onInput(e)}\n        onBlur={() => this.scoutBlur.emit()}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AA6BvB,MAAM,OAAO,UAAU;IACrB;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAEnB,IAAI,CAAS;IAErB;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;;;OAIG;IACK,QAAQ,CAAoC;IAE3C,gBAAgB,CAGtB;IACM,SAAS,CAAqB;IAEvC;;OAEG;IACM,QAAQ,CAAuB;IAE/B,MAAM,CAAS;IAExB,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,KAAiB;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAE/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACrD,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,GACnC,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput implements ComponentInterface {\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Custom validation function run on top of the implicit validation performed\n   * by the browser. Return a string with the validation message to mark the\n   * input as invalid, or null to mark it as valid.\n   */\n  @Prop() validate?: (value: string) => string | null;\n\n  @Event() scoutInputChange: EventEmitter<{\n    value: string;\n    element: HTMLInputElement;\n  }>;\n  @Event() scoutBlur: EventEmitter<void>;\n\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  @State() ariaId: 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  onInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n\n    if (this.validate) {\n      const validationMessage = this.validate(input.value);\n      input.setCustomValidity(validationMessage ?? \"\");\n    }\n\n    this.scoutInputChange.emit({\n      value: input.value,\n      element: input,\n    });\n  }\n\n  render() {\n    return (\n      <input\n        id={this.ariaId}\n        type={this.type}\n        name={this.name}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={(e) => this.onInput(e)}\n        onBlur={() => this.scoutBlur.emit()}\n      />\n    );\n  }\n}\n"]}

package/dist/collection/components/list-view/list-view.css

@@ -2,4 +2,4 @@
   display: flex;
   flex-direction: column;
   padding: var(--spacing-2) 0;
-}
+}

package/dist/collection/components/list-view/list-view.js

@@ -1,9 +1,27 @@
 import { Host, h } from "@stencil/core";
 export class ScoutListView {
+    el;
+    onScoutChecked(event) {
+        const { checked, element } = event.detail;
+        if (element.type !== "radio" || !element.name || !checked) {
+            return;
+        }
+        const listItems = this.el.querySelectorAll("scout-list-view-item");
+        const otherRadios = [];
+        listItems.forEach((item) => {
+            const radios = item.shadowRoot.querySelectorAll(`input[type="radio"][name="${CSS.escape(element.name)}"]`);
+            radios.forEach((r) => {
+                if (r !== element) {
+                    otherRadios.push(r);
+                }
+            });
+        });
+        for (const radio of otherRadios) {
+            radio.checked = false;
+        }
+    }
     render() {
-        return (
-        // biome-ignore lint/a11y/useSemanticElements: We can't use <ul> because we're using shadow DOM.
-        h(Host, { key: '162a45f1de284bc6f737769753837c29ca51155a', role: "list" }, h("slot", { key: '6a66f07a8082b94330dc33a183a7a915139d1e39' })));
+        return (h(Host, { key: 'b20a3a6e3ba31b390e99a31b144bf522057ca55c', role: "list" }, h("slot", { key: 'fb58eb9e354415f9ed01120206d5cb2b1be28ad0' })));
     }
     static get is() { return "scout-list-view"; }
     static get encapsulation() { return "shadow"; }
@@ -18,5 +36,15 @@ export class ScoutListView {
             "$": ["list-view.css"]
         };
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "scoutChecked",
+                "method": "onScoutChecked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=list-view.js.map

package/dist/collection/components/list-view/list-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-view.js","sourceRoot":"","sources":["../../../src/components/list-view/list-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO;QACL,gGAAgG;QAChG,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-list-view\",\n  styleUrl: \"list-view.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListView {\n  render() {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: We can't use <ul> because we're using shadow DOM.\n      <Host role=\"list\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"list-view.js","sourceRoot":"","sources":["../../../src/components/list-view/list-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AASpE,MAAM,OAAO,aAAa;IACb,EAAE,CAAc;IAG3B,cAAc,CACZ,KAAmE;QAEnE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAE1C,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC1D,OAAO;QACT,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;QAEnE,MAAM,WAAW,GAAuB,EAAE,CAAC;QAE3C,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC7C,6BAA6B,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAC1D,CAAC;YAEF,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACnB,IAAI,CAAC,KAAK,OAAO,EAAE,CAAC;oBAClB,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,KAAK,MAAM,KAAK,IAAI,WAAW,EAAE,CAAC;YAChC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Listen } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-list-view\",\n  styleUrl: \"list-view.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListView {\n  @Element() el: HTMLElement;\n\n  @Listen(\"scoutChecked\")\n  onScoutChecked(\n    event: CustomEvent<{ checked: boolean; element: HTMLInputElement }>,\n  ) {\n    const { checked, element } = event.detail;\n\n    if (element.type !== \"radio\" || !element.name || !checked) {\n      return;\n    }\n\n    const listItems = this.el.querySelectorAll(\"scout-list-view-item\");\n\n    const otherRadios: HTMLInputElement[] = [];\n\n    listItems.forEach((item) => {\n      const radios = item.shadowRoot.querySelectorAll<HTMLInputElement>(\n        `input[type=\"radio\"][name=\"${CSS.escape(element.name)}\"]`,\n      );\n\n      radios.forEach((r) => {\n        if (r !== element) {\n          otherRadios.push(r);\n        }\n      });\n    });\n\n    for (const radio of otherRadios) {\n      radio.checked = false;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"list\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list-view-item/list-view-item.css

@@ -18,7 +18,6 @@
 }
 
 .button:hover {
-
   background-color: var(--color-background-brand-subtle-hovered);
 }
 
@@ -69,4 +68,4 @@
 .secondary {
   font: var(--type-body-sm);
   color: var(--color-neutral-700);
-}
+}

package/dist/collection/components/list-view-item/list-view-item.js

@@ -7,9 +7,16 @@ export class ScoutListViewItem {
     href;
     target;
     rel;
+    name;
+    value;
+    checked;
     scoutClick;
     render() {
-        const Tag = this.type === "link" ? "a" : "button";
+        const Tag = this.type === "link"
+            ? "a"
+            : this.type === "radio" || this.type === "checkbox"
+                ? "label"
+                : "button";
         const linkProps = this.type === "link"
             ? {
                 href: this.href,
@@ -19,9 +26,7 @@ export class ScoutListViewItem {
                     (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (
-        // biome-ignore lint/a11y/useSemanticElements: We can't use <li> because we're using shadow DOM.
-        h(Host, { key: '075b28cf90ce6487ba7c7212c209c2fafff80c8f', role: "listitem" }, h(Tag, { key: '30bc35454f69979ade277e4e376346ef5cc01c3b', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+        return (h(Host, { key: '9b9ac94836164ad6a375ee17086e39dec344509d', role: "listitem" }, h(Tag, { key: '302cd52b48fec498897cce4d681ef77592038ba4', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
     }
     getPrefix() {
         if (!this.icon) {
@@ -33,18 +38,12 @@ export class ScoutListViewItem {
         return (h("div", { class: "content" }, this.primary && h("div", { class: "primary" }, this.primary), this.secondary && h("div", { class: "secondary" }, this.secondary)));
     }
     getSuffix() {
-        // if (this.type === "link") {
-        //   return (
-        //     <div class="suffix-icon">
-        //       <span
-        //         class="icon"
-        //         style={{
-        //           "--icon": `url(${ChevronRightIcon})`,
-        //         }}
-        //       />
-        //     </div>
-        //   );
-        // }
+        if (this.type === "radio") {
+            return (h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked }));
+        }
+        if (this.type === "checkbox") {
+            return (h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked }));
+        }
         return null;
     }
     static get is() { return "scout-list-view-item"; }
@@ -124,7 +123,7 @@ export class ScoutListViewItem {
                 "mutable": false,
                 "complexType": {
                     "original": "ItemType",
-                    "resolved": "\"button\" | \"link\"",
+                    "resolved": "\"button\" | \"checkbox\" | \"link\" | \"radio\"",
                     "references": {
                         "ItemType": {
                             "location": "local",
@@ -201,6 +200,63 @@ export class ScoutListViewItem {
                 "setter": false,
                 "reflect": false,
                 "attribute": "rel"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked"
             }
         };
     }

package/dist/collection/components/list-view-item/list-view-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-view-item.js","sourceRoot":"","sources":["../../../src/components/list-view-item/list-view-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAWvB,MAAM,OAAO,iBAAiB;IACpB,IAAI,CAAU;IACd,OAAO,CAAU;IACjB,SAAS,CAAU;IACnB,IAAI,GAAa,QAAQ,CAAC;IAE1B,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAEZ,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,SAAS,GACb,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;QACL,gGAAgG;QAChG,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,EAAC,GAAG,qDACF,KAAK,EAAC,QAAQ,KACV,SAAS,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;gBAEpC,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD,CACR,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,WAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAC3D,CAAC;IAEO,UAAU;QAChB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YACjB,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO;YACzD,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,SAAS,CAAO,CAC5D,CACP,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,8BAA8B;QAC9B,aAAa;QACb,gCAAgC;QAChC,cAAc;QACd,uBAAuB;QACvB,mBAAmB;QACnB,kDAAkD;QAClD,aAAa;QACb,WAAW;QACX,aAAa;QACb,OAAO;QACP,IAAI;QAEJ,OAAO,IAAI,CAAC;IACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" | \"link\";\n\n@Component({\n  tag: \"scout-list-view-item\",\n  styleUrl: \"list-view-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewItem {\n  @Prop() icon?: string;\n  @Prop() primary?: string;\n  @Prop() secondary?: string;\n  @Prop() type: ItemType = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const linkProps =\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      // biome-ignore lint/a11y/useSemanticElements: We can't use <li> because we're using shadow DOM.\n      <Host role=\"listitem\">\n        <Tag\n          class=\"button\"\n          {...linkProps}\n          onClick={() => this.scoutClick.emit()}\n        >\n          {this.getPrefix()}\n          {this.getContent()}\n          {this.getSuffix()}\n        </Tag>\n      </Host>\n    );\n  }\n\n  private getPrefix() {\n    if (!this.icon) {\n      return null;\n    }\n\n    return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n  }\n\n  private getContent() {\n    return (\n      <div class=\"content\">\n        {this.primary && <div class=\"primary\">{this.primary}</div>}\n        {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n      </div>\n    );\n  }\n\n  private getSuffix() {\n    // if (this.type === \"link\") {\n    //   return (\n    //     <div class=\"suffix-icon\">\n    //       <span\n    //         class=\"icon\"\n    //         style={{\n    //           \"--icon\": `url(${ChevronRightIcon})`,\n    //         }}\n    //       />\n    //     </div>\n    //   );\n    // }\n\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"list-view-item.js","sourceRoot":"","sources":["../../../src/components/list-view-item/list-view-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAWvB,MAAM,OAAO,iBAAiB;IACpB,IAAI,CAAU;IACd,OAAO,CAAU;IACjB,SAAS,CAAU;IACnB,IAAI,GAAa,QAAQ,CAAC;IAE1B,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAEb,IAAI,CAAU;IACd,KAAK,CAAU;IACf,OAAO,CAAW;IAEjB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;gBACjD,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,QAAQ,CAAC;QAEjB,MAAM,SAAS,GACb,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,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,EAAC,GAAG,qDACF,KAAK,EAAC,QAAQ,KACV,SAAS,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;gBAEpC,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD,CACR,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,WAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAC3D,CAAC;IAEO,UAAU;QAChB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YACjB,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO;YACzD,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,SAAS,CAAO,CAC5D,CACP,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,OAAO,CACL,0BACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,OAAO,CACL,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" | \"link\" | \"radio\" | \"checkbox\";\n\n@Component({\n  tag: \"scout-list-view-item\",\n  styleUrl: \"list-view-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewItem {\n  @Prop() icon?: string;\n  @Prop() primary?: string;\n  @Prop() secondary?: string;\n  @Prop() type: ItemType = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  @Prop() name?: string;\n  @Prop() value?: string;\n  @Prop() checked?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag =\n      this.type === \"link\"\n        ? \"a\"\n        : this.type === \"radio\" || this.type === \"checkbox\"\n          ? \"label\"\n          : \"button\";\n\n    const linkProps =\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      <Host role=\"listitem\">\n        <Tag\n          class=\"button\"\n          {...linkProps}\n          onClick={() => this.scoutClick.emit()}\n        >\n          {this.getPrefix()}\n          {this.getContent()}\n          {this.getSuffix()}\n        </Tag>\n      </Host>\n    );\n  }\n\n  private getPrefix() {\n    if (!this.icon) {\n      return null;\n    }\n\n    return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n  }\n\n  private getContent() {\n    return (\n      <div class=\"content\">\n        {this.primary && <div class=\"primary\">{this.primary}</div>}\n        {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n      </div>\n    );\n  }\n\n  private getSuffix() {\n    if (this.type === \"radio\") {\n      return (\n        <scout-radio-button\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    if (this.type === \"checkbox\") {\n      return (\n        <scout-checkbox\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    return null;\n  }\n}\n"]}