@scouterna/ui-webc 2.0.0 → 2.1.0

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-checkbox.cjs",[[258,"scout-checkbox",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-field.cjs",[[262,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_fieldId","catchFieldId"],[0,"scoutInputChange","handleInputChange"],[0,"scoutBlur","handleValidationBlur"]]]]],["scout-input.cjs",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]],["scout-switch.cjs",[[273,"scout-switch",{"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]]], options);
+  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[785,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-checkbox.cjs",[[770,"scout-checkbox",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_fieldId","catchFieldId"],[0,"scoutInputChange","handleInputChange"],[0,"scoutBlur","handleValidationBlur"]]]]],["scout-input.cjs",[[770,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view"]]],["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/scout-bottom-bar-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -20,6 +20,8 @@ const ScoutBottomBarItem = class {
      * `type` is set to "link".
      */
     href;
+    target;
+    rel;
     /**
      * An icon to display above the label. Must be an SVG string.
      */
@@ -39,9 +41,13 @@ const ScoutBottomBarItem = class {
         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 (index.h(Tag, { key: 'da439bd71733883dd610eb24b9ffffb9bb2369e1', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, index.h("span", { key: 'e3267d4487d643265984555155760cbdb242ef81', class: "icon", innerHTML: this.icon }), index.h("span", { key: '02ade513642f237b24ef25856bf4b56e386b7b2a', class: "label" }, this.label)));
+        return (index.h(Tag, { key: 'd6accb2a7bb0af55f33dba3299749b7ec5ba68a4', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, index.h("span", { key: '419edd0be8ff7a4f91aeb1641afffb9d949efba2', class: "icon", innerHTML: this.icon }), index.h("span", { key: 'e1e40f9a192ffe8a0152a1d0333fbedf174e7bea', class: "label" }, this.label)));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/cjs/scout-bottom-bar-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-bottom-bar-item.entry.cjs.js","sources":["../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","src/components/bottom-bar-item/bottom-bar-item.css?tag=scout-bottom-bar-item&encapsulation=shadow","src/components/bottom-bar-item/bottom-bar-item.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;",":host {\n  display: flex;\n  flex: 1;\n}\n\n.button {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  color: var(--color-text-base);\n  cursor: pointer;\n}\n\n.button:hover {\n  background-color: var(--color-neutral-50);\n}\n\n.button.active {\n  background-color: var(--color-blue-50);\n  color: var(--color-blue-500);\n}\n\n.button .icon {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n}\n\n.button .label {\n  font: var(--type-label-sm);\n}\n\na {\n  text-decoration: none;\n}","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"],"names":["h"],"mappings":";;;;AAAA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAQ,SAAS,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;;ACA/W,MAAM,gBAAgB,GAAG,+eAA+e;;MCgB3f,kBAAkB,GAAA,MAAA;;;;;AAC7B;;AAEG;IACK,IAAI,GAAa,QAAQ;AAEjC;;;AAGG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,KAAK;AAEb;;;AAGG;AACK,IAAA,MAAM;AAEL,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;AAChB;cACD,EAAE;AAER,QAAA,QACEA,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAETA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAC3CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CACnC;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"scout-bottom-bar-item.entry.cjs.js","sources":["../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","src/components/bottom-bar-item/bottom-bar-item.css?tag=scout-bottom-bar-item&encapsulation=shadow","src/components/bottom-bar-item/bottom-bar-item.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;",":host {\n  display: flex;\n  flex: 1;\n}\n\n.button {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  color: var(--color-text-base);\n  cursor: pointer;\n}\n\n.button:hover {\n  background-color: var(--color-neutral-50);\n}\n\n.button.active {\n  background-color: var(--color-blue-50);\n  color: var(--color-blue-500);\n}\n\n.button .icon {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n}\n\n.button .label {\n  font: var(--type-label-sm);\n}\n\na {\n  text-decoration: none;\n}","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"],"names":["h"],"mappings":";;;;AAAA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAQ,SAAS,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;;ACA/W,MAAM,gBAAgB,GAAG,+eAA+e;;MCgB3f,kBAAkB,GAAA,MAAA;;;;;AAC7B;;AAEG;IACK,IAAI,GAAa,QAAQ;AAEjC;;;AAGG;AACK,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,KAAK;AAEb;;;AAGG;AACK,IAAA,MAAM;AAEL,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;cACD,EAAE;AAER,QAAA,QACEA,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAETA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAC3CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CACnC;;;;;;;;","x_google_ignoreList":[0]}

package/dist/cjs/scout-bottom-bar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
 const bottomBarCss = ":host{display:flex;width:100%}.container{display:flex;flex:1;height:var(--spacing-14);border-top:1px solid var(--color-neutral-100)}";
 
@@ -9,7 +9,7 @@ const ScoutBottomBar = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("nav", { key: '0904c3ec8b60ca5fe9a2ed4d68ea2b6fcb55f0dc', class: "container" }, index.h("slot", { key: '18223004272416c7ced4ff31a160adbb451a7367' })));
+        return (index.h("nav", { key: '9bee87231edda78b5d5b52cbba60c4686f98307b', class: "container" }, index.h("slot", { key: 'f6d625aa11702ee7382384aa32f8a8d8e5bf55f8' })));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/cjs/scout-button.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
-const buttonCss = ":host{display:inline-flex}button{display:inline-flex;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);border:1px solid transparent;cursor:pointer}.icon{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon svg{width:100%;height:100%}button.primary{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}button.primary:hover{background-color:var(--color-background-brand-hovered)}button.primary:active{background-color:var(--color-background-brand-pressed)}button.outlined{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}button.outlined:hover{background-color:var(--color-background-brand-subtle-hovered)}button.outlined:active{background-color:var(--color-background-brand-subtle-pressed)}button.text{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}button.text:hover{background-color:var(--color-background-brand-subtle-hovered)}button.text:active{background-color:var(--color-background-brand-subtle-pressed)}button.caution{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}button.caution:hover{background-color:var(--color-background-caution-bold-hovered)}button.caution:active{background-color:var(--color-background-caution-bold-pressed)}button.danger{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}button.danger:hover{background-color:var(--color-background-danger-bold-hovered)}button.danger:active{background-color:var(--color-background-danger-bold-pressed)}";
+const buttonCss = ":host{display:inline-flex}.button{display:inline-flex;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);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon svg{width:100%;height:100%}.button.primary{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary:hover{background-color:var(--color-background-brand-hovered)}.button.primary:active{background-color:var(--color-background-brand-pressed)}.button.outlined{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger:active{background-color:var(--color-background-danger-bold-pressed)}";
 
 const ScoutButton = class {
     constructor(hostRef) {
@@ -10,6 +10,9 @@ const ScoutButton = class {
         this.scoutClick = index.createEvent(this, "scoutClick");
     }
     type = "button";
+    href;
+    target;
+    rel;
     /**
      * The variant primarily affects the color of the button.
      */
@@ -20,7 +23,19 @@ const ScoutButton = class {
     icon;
     scoutClick;
     render() {
-        return (index.h("button", { key: '7c5b9b8b4dbb40537b923585af17c81dc6ee1644', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, index.h("slot", { key: 'a89b795dbbd004cd8d9123bacf338cb87cca4953' }), this.icon && index.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 (index.h(Tag, { key: 'fc7b2867c649782e166b7a363c5e3b43955a8011', class: `button ${this.variant}`, onClick: () => this.scoutClick.emit(), ...props }, index.h("slot", { key: '60d6e548ddf0da4bca40f1daea0fb656da8fb733' }), this.icon && index.h("span", { key: 'aef054b5de8cc20f5f26a9e2e82b76f43a9d3f32', class: "icon", innerHTML: this.icon })));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/cjs/scout-button.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-3);\n  height: var(--spacing-10);\n  padding: 0 var(--spacing-4);\n  font: var(--type-body-base);\n  border-radius: var(--spacing-2);\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n\n.icon {\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n  width: 100%;\n  height: 100%;\n}\n\nbutton.primary {\n  background-color: var(--color-background-brand-base);\n  color: var(--color-text-brand-inverse);\n\n  &:hover {\n    background-color: var(--color-background-brand-hovered);\n  }\n  &:active {\n    background-color: var(--color-background-brand-pressed);\n  }\n}\n\nbutton.outlined {\n  background-color: transparent;\n  border-color: var(--color-background-brand-subtle-base);\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\nbutton.text {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\nbutton.caution {\n  background-color: var(--color-background-caution-bold-base);\n  color: var(--color-text-caution-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-caution-bold-hovered);\n  }\n  &:active {\n    background-color: var(--color-background-caution-bold-pressed);\n  }\n}\n\nbutton.danger {\n  background-color: var(--color-background-danger-bold-base);\n  color: var(--color-text-danger-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-danger-bold-hovered);\n  }\n  &:active {\n    background-color: var(--color-background-danger-bold-pressed);\n  }\n}\n","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,kvDAAkvD;;MCcvvD,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAAkC,QAAQ;AAEtD;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;AAEH,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,QACEA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAErCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CAAC,IAAI,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAClD;;;;;;;;"}
+{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-3);\n  height: var(--spacing-10);\n  padding: 0 var(--spacing-4);\n  font: var(--type-body-base);\n  border-radius: var(--spacing-2);\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.icon {\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.button.primary {\n  background-color: var(--color-background-brand-base);\n  color: var(--color-text-brand-inverse);\n\n  &:hover {\n    background-color: var(--color-background-brand-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-pressed);\n  }\n}\n\n.button.outlined {\n  background-color: transparent;\n  border-color: var(--color-background-brand-subtle-base);\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\n.button.text {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\n.button.caution {\n  background-color: var(--color-background-caution-bold-base);\n  color: var(--color-text-caution-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-caution-bold-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-caution-bold-pressed);\n  }\n}\n\n.button.danger {\n  background-color: var(--color-background-danger-bold-base);\n  color: var(--color-text-danger-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-danger-bold-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-danger-bold-pressed);\n  }\n}","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,ozDAAozD;;MCczzD,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;AAEH,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;AAEP,QAAA,QACEA,OAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAE,CAAA,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,GACjC,KAAK,EAAA,EAETA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CAAC,IAAI,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CACrD;;;;;;;;"}

package/dist/cjs/scout-card.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
 const cardCss = ":host{display:block;border-radius:var(--spacing-2);border:1px solid var(--color-gray-100);padding:var(--spacing-2);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)}";
 
@@ -9,7 +9,7 @@ const ScoutCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: 'bde708b7482da31d53fbc29581bed3f068e26279' });
+        return index.h("slot", { key: '44e84e98fac4b83c20fdec40a532c752f41dffd7' });
     }
     static get delegatesFocus() { return true; }
 };

package/dist/cjs/scout-checkbox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
 const checkSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=';
 
@@ -44,7 +44,7 @@ const ScoutCheckbox = class {
     */
     render() {
         const Tag = this.label && this.label.length ? "label" : "div";
-        return (index.h(Tag, { key: '2d97627d29b09521936eeef81419673d70fc75f1' }, this.label, index.h("span", { key: 'f62b4e360f03b4b6fb6e8fee326756552a5a631d', class: "inlineDivider" }), index.h("input", { key: '7ca6b74e12c369fc937d1b8c85e70c52fd9aa25c', class: "checkbox", onChange: (event) => this.onClick(event), style: { "--icon-checkbox": `url(${checkSvg})` }, type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked })));
+        return (index.h(Tag, { key: '39d7814c3af4261c7b60423464d5b3167ad96003' }, this.label, index.h("span", { key: '10375644d673913047c66460c2c0395f0110b644', class: "inlineDivider" }), index.h("input", { key: '3e5c5fa2571874e75325a7a3161a15e00332cd36', class: "checkbox", onChange: (event) => this.onClick(event), style: { "--icon-checkbox": `url(${checkSvg})` }, type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked })));
     }
 };
 ScoutCheckbox.style = checkboxCss;

package/dist/cjs/scout-divider.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = require('./index-5z4HClQY.js');
+
+const dividerCss = ":host{display:block;height:1px;background-color:var(--color-gray-200)}";
+
+const ScoutDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return index.h(index.Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
+    }
+    static get delegatesFocus() { return true; }
+};
+ScoutDivider.style = dividerCss;
+
+exports.scout_divider = ScoutDivider;
+//# sourceMappingURL=scout-divider.entry.cjs.js.map

package/dist/cjs/scout-divider.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-divider.entry.cjs.js","sources":["src/components/divider/divider.css?tag=scout-divider&encapsulation=shadow","src/components/divider/divider.tsx"],"sourcesContent":[":host {\n  display: block;\n  height: 1px;\n  background-color: var(--color-gray-200);\n}","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,wEAAwE;;MCS9E,YAAY,GAAA,MAAA;;;;IACvB,MAAM,GAAA;QACJ,OAAOA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAG;;;;;;;;"}

package/dist/cjs/scout-field.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
 const fieldCss = ".field.sc-scout-field{display:flex;flex-direction:column}.label.sc-scout-field{font:var(--type-label-sm);font-weight:600;color:var(--color-text-base)}.error-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-text-danger-base);margin:var(--spacing-1) 0 0 0}.error-text.sc-scout-field:empty{margin:0}.help-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-gray-600);margin:var(--spacing-1) 0 0 0}";
 
@@ -38,7 +38,7 @@ const ScoutField = class {
         this.errorHidden = false;
     }
     render() {
-        return (index.h("div", { key: '0ba5919cf10618bf4617e1ced85485a6d136f668', class: "field" }, index.h("label", { key: '55cac1b4eb9c0d58ea1e4045b9c85c30a384d99b', htmlFor: this.inputId, class: "label" }, this.label), index.h("slot", { key: 'b5931e88ad82e693ff1dc24acd99db393f048fab' }), index.h("p", { key: '6354b6187ba63158bdd5c784787f1612eb641db4', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && index.h("p", { key: 'ba9e47977b682fbe28afd61c6a00832506860e56', class: "help-text" }, this.helpText)));
+        return (index.h("div", { key: 'e38499f35a268b15962a31a2dc45361fb803a8e3', class: "field" }, index.h("label", { key: '3e6ba58b91285a082964bd01336fd4c7d8260835', htmlFor: this.inputId, class: "label" }, this.label), index.h("slot", { key: '75de87617caef28b9d90d0e112870a5cf2b08bfc' }), index.h("p", { key: 'f152609ade3a840a4bfd6bfef5f5aadf8060fab2', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && index.h("p", { key: '86069ef5f19840e44e79a274152742070b51e7a8', class: "help-text" }, this.helpText)));
     }
 };
 ScoutField.style = fieldCss;

package/dist/cjs/scout-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-5z4HClQY.js');
 
 const inputCss = ".input.sc-scout-input{height:var(--spacing-10);padding:var(--spacing-2);font:var(--type-body-base);border:1px solid var(--color-gray-300);border-radius:var(--spacing-2);background-color:var(--color-white);color:var(--color-text-base)}.input.sc-scout-input:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}";
 

package/dist/cjs/scout-link.cjs.entry.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var index = require('./index-5z4HClQY.js');
+
+const linkCss = ":host{display:inline}a,button{color:var(--color-text-brand-base);-webkit-text-decoration:none;text-decoration:none}a:hover,button:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--color-background-brand-hover)}a:active,button:active{color:var(--color-background-brand-pressed)}button{display:inline;background:none;border:none;padding:0;cursor:pointer}";
+
+const ScoutLink = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scoutLinkClick = index.createEvent(this, "scoutLinkClick");
+    }
+    /**
+     * The URL that the link points to. Required when type is set to link
+     */
+    href;
+    /**
+     * Text to be displayed for the link
+     */
+    label;
+    rel;
+    /**
+     * If the label property is not sufficient to describe its use, add an aria-label describing what happens
+     * when pressing the button or where the user navigates if it is a link.
+     */
+    linkAriaLabel;
+    /**
+     * There are two types. If you intend to use it as a button with onclick, a button is rendered, however if you want to you it
+     * as a normal link, a link with href is rendered.
+     */
+    type = "link";
+    /**
+     * _blank	Opens the linked document in a new window or tab
+     *
+     * _self	Opens the linked document in the same frame as it was clicked (this is default)
+     *
+     * _parent	Opens the linked document in the parent frame
+     *
+     * _top	Opens the linked document in the full body of the window
+     *
+     * _framename	Opens the linked document in the named iframe
+     */
+    target = "_self";
+    /**
+     * Only sent if the link is a button.
+     */
+    scoutLinkClick;
+    render() {
+        if (this.type === "button") {
+            return (index.h("button", { type: "button", "aria-label": this.linkAriaLabel || "", onClick: () => this.scoutLinkClick.emit() }, this.label));
+        }
+        if (!this.href) {
+            throw new Error("Href is requied when type is set to link");
+        }
+        return (index.h("a", { href: this.href, target: this.target, "aria-label": this.linkAriaLabel || "", rel: 
+            // This might not be our job, but better safe than sorry.
+            this.rel ??
+                (this.target === "_blank" ? "noopener noreferrer" : undefined) }, this.label));
+    }
+    static get delegatesFocus() { return true; }
+};
+ScoutLink.style = linkCss;
+
+exports.scout_link = ScoutLink;
+//# sourceMappingURL=scout-link.entry.cjs.js.map

package/dist/cjs/scout-link.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-link.entry.cjs.js","sources":["src/components/link/link.css?tag=scout-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":[":host {\n  display: inline;\n}\n\na,\nbutton {\n  color: var(--color-text-brand-base);\n  text-decoration: none;\n}\na:hover,\nbutton:hover {\n  text-decoration: underline;\n  color: var(--color-background-brand-hover);\n}\na:active,\nbutton:active {\n  color: var(--color-background-brand-pressed);\n}\n\nbutton {\n  display: inline;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-link\",\n  styleUrl: \"link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutLink {\n  /**\n   * The URL that the link points to. Required when type is set to link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Text to be displayed for the link\n   */\n  @Prop() label: string;\n\n  @Prop() rel?: string;\n\n  /**\n   * If the label property is not sufficient to describe its use, add an aria-label describing what happens\n   * when pressing the button or where the user navigates if it is a link.\n   */\n  @Prop() linkAriaLabel?: string;\n\n  /**\n   * There are two types. If you intend to use it as a button with onclick, a button is rendered, however if you want to you it\n   * as a normal link, a link with href is rendered.\n   */\n  @Prop() type: \"link\" | \"button\" = \"link\";\n\n  /**\n   * _blank\tOpens the linked document in a new window or tab\n   *\n   * _self\tOpens the linked document in the same frame as it was clicked (this is default)\n   *\n   * _parent\tOpens the linked document in the parent frame\n   *\n   * _top\tOpens the linked document in the full body of the window\n   *\n   * _framename\tOpens the linked document in the named iframe\n   */\n  @Prop() target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\" | \"framename\" =\n    \"_self\";\n\n  /**\n   * Only sent if the link is a button.\n   */\n  @Event() scoutLinkClick: EventEmitter<HTMLButtonElement>;\n\n  render() {\n    if (this.type === \"button\") {\n      return (\n        <button\n          type=\"button\"\n          aria-label={this.linkAriaLabel || \"\"}\n          onClick={() => this.scoutLinkClick.emit()}\n        >\n          {this.label}\n        </button>\n      );\n    }\n\n    if (!this.href) {\n      throw new Error(\"Href is requied when type is set to link\");\n    }\n\n    return (\n      <a\n        href={this.href}\n        target={this.target}\n        aria-label={this.linkAriaLabel || \"\"}\n        rel={\n          // This might not be our job, but better safe than sorry.\n          this.rel ??\n          (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined)\n        }\n      >\n        {this.label}\n      </a>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,8XAA8X;;MCSjY,SAAS,GAAA,MAAA;;;;;AACpB;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,KAAK;AAEL,IAAA,GAAG;AAEX;;;AAGG;AACK,IAAA,aAAa;AAErB;;;AAGG;IACK,IAAI,GAAsB,MAAM;AAExC;;;;;;;;;;AAUG;IACK,MAAM,GACZ,OAAO;AAET;;AAEG;AACM,IAAA,cAAc;IAEvB,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC1B,YAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,IAAI,CAAC,aAAa,IAAI,EAAE,EACpC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,EAAA,EAExC,IAAI,CAAC,KAAK,CACJ;;AAIb,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC;;QAG7D,QACEA,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,gBACP,IAAI,CAAC,aAAa,IAAI,EAAE,EACpC,GAAG;;AAED,YAAA,IAAI,CAAC,GAAG;iBACP,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,EAG/D,EAAA,IAAI,CAAC,KAAK,CACT;;;;;;;;"}

package/dist/cjs/scout-list-view-item.cjs.entry.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var index = require('./index-5z4HClQY.js');
+
+const listViewItemCss = ":host{display:flex}.button{flex:1;display:flex;align-items:center;text-align:inherit;min-height:var(--spacing-12);color:var(--color-text-base);padding:var(--spacing-2) var(--spacing-4);cursor:pointer;border:none;background-color:transparent;-webkit-text-decoration:none;text-decoration:none}.button:hover{background-color:var(--color-background-brand-subtle-hovered)}.prefix-icon,.suffix-icon{display:flex;align-items:center;height:var(--spacing-6);color:var(--color-neutral-700)}.prefix-icon svg,.suffix-icon svg,.prefix-icon .icon,.suffix-icon .icon{width:var(--spacing-6);height:var(--spacing-6)}.prefix-icon{justify-content:flex-start;width:var(--spacing-14)}.suffix-icon{justify-content:flex-end;width:var(--spacing-8)}.suffix-icon .icon{background-color:currentColor;-webkit-mask-image:var(--icon);mask-image:var(--icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.content{flex:1;display:flex;flex-direction:column;justify-content:center}.primary{font:var(--type-body-base)}.secondary{font:var(--type-body-sm);color:var(--color-neutral-700)}";
+
+const ScoutListViewItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scoutClick = index.createEvent(this, "scoutClick");
+    }
+    icon;
+    primary;
+    secondary;
+    type = "button";
+    href;
+    target;
+    rel;
+    scoutClick;
+    render() {
+        const Tag = this.type === "link" ? "a" : "button";
+        const linkProps = 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 (
+        // biome-ignore lint/a11y/useSemanticElements: We can't use <li> because we're using shadow DOM.
+        index.h(index.Host, { key: '075b28cf90ce6487ba7c7212c209c2fafff80c8f', role: "listitem" }, index.h(Tag, { key: '30bc35454f69979ade277e4e376346ef5cc01c3b', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+    }
+    getPrefix() {
+        if (!this.icon) {
+            return null;
+        }
+        return index.h("div", { class: "prefix-icon", innerHTML: this.icon });
+    }
+    getContent() {
+        return (index.h("div", { class: "content" }, this.primary && index.h("div", { class: "primary" }, this.primary), this.secondary && index.h("div", { class: "secondary" }, this.secondary)));
+    }
+    getSuffix() {
+        // if (this.type === "link") {
+        //   return (
+        //     <div class="suffix-icon">
+        //       <span
+        //         class="icon"
+        //         style={{
+        //           "--icon": `url(${ChevronRightIcon})`,
+        //         }}
+        //       />
+        //     </div>
+        //   );
+        // }
+        return null;
+    }
+    static get delegatesFocus() { return true; }
+};
+ScoutListViewItem.style = listViewItemCss;
+
+exports.scout_list_view_item = ScoutListViewItem;
+//# sourceMappingURL=scout-list-view-item.entry.cjs.js.map

package/dist/cjs/scout-list-view-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-list-view-item.entry.cjs.js","sources":["src/components/list-view-item/list-view-item.css?tag=scout-list-view-item&encapsulation=shadow","src/components/list-view-item/list-view-item.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n.button {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  text-align: unset;\n  min-height: var(--spacing-12);\n  color: var(--color-text-base);\n  padding: var(--spacing-2) var(--spacing-4);\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n  text-decoration: none;\n}\n\n.button:hover {\n\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.prefix-icon,\n.suffix-icon {\n  display: flex;\n  align-items: center;\n  height: var(--spacing-6);\n  color: var(--color-neutral-700);\n\n  svg,\n  .icon {\n    width: var(--spacing-6);\n    height: var(--spacing-6);\n  }\n}\n\n.prefix-icon {\n  justify-content: flex-start;\n  width: var(--spacing-14);\n}\n\n.suffix-icon {\n  justify-content: flex-end;\n  width: var(--spacing-8);\n\n  .icon {\n    background-color: currentColor;\n    mask-image: var(--icon);\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  }\n}\n\n.content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.primary {\n  font: var(--type-body-base);\n}\n\n.secondary {\n  font: var(--type-body-sm);\n  color: var(--color-neutral-700);\n}","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,klCAAklC;;MCkB7lC,iBAAiB,GAAA,MAAA;;;;;AACpB,IAAA,IAAI;AACJ,IAAA,OAAO;AACP,IAAA,SAAS;IACT,IAAI,GAAa,QAAQ;AAEzB,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEF,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;cACD,EAAE;QAER;;QAEEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAC,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,GACV,SAAS,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAEpC,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD;;IAIH,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,IAAI;;AAGb,QAAA,OAAOA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI;;IAGlD,UAAU,GAAA;QAChB,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,IAAIA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,OAAO,CAAO,EACzD,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,CAC5D;;IAIF,SAAS,GAAA;;;;;;;;;;;;;AAcf,QAAA,OAAO,IAAI;;;;;;;;"}

package/dist/cjs/scout-list-view.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var index = require('./index-5z4HClQY.js');
+
+const listViewCss = ":host{display:flex;flex-direction:column;padding:var(--spacing-2) 0}";
+
+const ScoutListView = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (
+        // biome-ignore lint/a11y/useSemanticElements: We can't use <ul> because we're using shadow DOM.
+        index.h(index.Host, { key: '162a45f1de284bc6f737769753837c29ca51155a', role: "list" }, index.h("slot", { key: '6a66f07a8082b94330dc33a183a7a915139d1e39' })));
+    }
+    static get delegatesFocus() { return true; }
+};
+ScoutListView.style = listViewCss;
+
+exports.scout_list_view = ScoutListView;
+//# sourceMappingURL=scout-list-view.entry.cjs.js.map

package/dist/cjs/scout-list-view.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-list-view.entry.cjs.js","sources":["src/components/list-view/list-view.css?tag=scout-list-view&encapsulation=shadow","src/components/list-view/list-view.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  padding: var(--spacing-2) 0;\n}","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,sEAAsE;;MCS7E,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ;;QAEEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,MAAM,EAAA,EACfD,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;"}