@scouterna/ui-webc 0.2.9 → 1.0.0

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-BKWL7m90.js';
-export { s as setNonce } from './index-BKWL7m90.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-DByXnE9g.js';
+export { s as setNonce } from './index-DByXnE9g.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["scout-bottom-bar",[[257,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[257,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[257,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]]], options);
+  return bootstrapLazy([["scout-bottom-bar",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card",[[273,"scout-card"]]],["scout-field",[[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",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKWL7m90.js';
+import { r as registerInstance, c as createEvent, h } from './index-DByXnE9g.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}
 
@@ -39,8 +39,9 @@ const ScoutBottomBarItem = class {
                 href: this.href,
             }
             : {};
-        return (h(Tag, { key: 'c36c7b65c03f5dd3188466b7bbaf1e08d3ae1071', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '79196c1d8b2c7bfc18eb5f4235d0c0d2cd335a00', class: "icon", innerHTML: this.icon }), h("span", { key: '8d6cd8fe36de135ce41880e8db3870bd33d3c0d8', class: "label" }, this.label)));
+        return (h(Tag, { key: 'da439bd71733883dd610eb24b9ffffb9bb2369e1', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: 'e3267d4487d643265984555155760cbdb242ef81', class: "icon", innerHTML: this.icon }), h("span", { key: '02ade513642f237b24ef25856bf4b56e386b7b2a', class: "label" }, this.label)));
     }
+    static get delegatesFocus() { return true; }
 };
 ScoutBottomBarItem.style = bottomBarItemCss;
 

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

@@ -1 +1 @@
-{"version":3,"file":"scout-bottom-bar-item.entry.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: true,\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()\n  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":[],"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;;MCc3f,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;AAGd,IAAA,UAAU;IAEV,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,QACE,CAAA,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,EAET,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAC3C,CAAM,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.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":[],"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,QACE,CAAA,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,EAET,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAC3C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CACnC;;;;;;;;","x_google_ignoreList":[0]}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BKWL7m90.js';
+import { r as registerInstance, h } from './index-DByXnE9g.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)}";
 
@@ -7,8 +7,9 @@ const ScoutBottomBar = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("nav", { key: '68384cb3993fa3ca4a70fdf55f691f728c5cfb2b', class: "container" }, h("slot", { key: '5dd9a017d0d7c3d3f0adb516ba66118f73c27841' })));
+        return (h("nav", { key: '0904c3ec8b60ca5fe9a2ed4d68ea2b6fcb55f0dc', class: "container" }, h("slot", { key: '18223004272416c7ced4ff31a160adbb451a7367' })));
     }
+    static get delegatesFocus() { return true; }
 };
 ScoutBottomBar.style = bottomBarCss;
 

package/dist/esm/scout-bottom-bar.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-bottom-bar.entry.js","sources":["src/components/bottom-bar/bottom-bar.css?tag=scout-bottom-bar&encapsulation=shadow","src/components/bottom-bar/bottom-bar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.container {\n  display: flex;\n  flex: 1;\n  height: var(--spacing-14);\n  border-top: 1px solid var(--color-neutral-100);\n}","import { Component, h } from \"@stencil/core\";\n\n/**\n * The bottom bar component is used in the Jamboree26 app to provide\n * navigation at the bottom of the screen.\n */\n@Component({\n  tag: \"scout-bottom-bar\",\n  styleUrl: \"bottom-bar.css\",\n  shadow: true,\n})\nexport class ScoutBottomBar {\n  render() {\n    return (\n      <nav class=\"container\">\n        <slot />\n      </nav>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,sIAAsI;;MCW9I,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;"}
+{"version":3,"file":"scout-bottom-bar.entry.js","sources":["src/components/bottom-bar/bottom-bar.css?tag=scout-bottom-bar&encapsulation=shadow","src/components/bottom-bar/bottom-bar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.container {\n  display: flex;\n  flex: 1;\n  height: var(--spacing-14);\n  border-top: 1px solid var(--color-neutral-100);\n}","import { Component, h } from \"@stencil/core\";\n\n/**\n * The bottom bar component is used in the Jamboree26 app to provide\n * navigation at the bottom of the screen.\n */\n@Component({\n  tag: \"scout-bottom-bar\",\n  styleUrl: \"bottom-bar.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutBottomBar {\n  render() {\n    return (\n      <nav class=\"container\">\n        <slot />\n      </nav>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,sIAAsI;;MCa9I,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKWL7m90.js';
+import { r as registerInstance, c as createEvent, h } from './index-DByXnE9g.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)}";
 
@@ -18,8 +18,9 @@ const ScoutButton = class {
     icon;
     scoutClick;
     render() {
-        return (h("button", { key: '1c6f55bf05f4d705f9a06ab55b51269c82753662', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, h("slot", { key: '5cd3412caf13b6d99da517ae7e6f5877234e65d7' }), this.icon && h("span", { key: '192d381457cde85ace465db047664b63d2fdeeed', class: "icon", innerHTML: this.icon })));
+        return (h("button", { key: '7c5b9b8b4dbb40537b923585af17c81dc6ee1644', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, h("slot", { key: 'a89b795dbbd004cd8d9123bacf338cb87cca4953' }), this.icon && h("span", { key: '12ac9a0668ebd4d84fd02e5065f1c9802d188171', class: "icon", innerHTML: this.icon })));
     }
+    static get delegatesFocus() { return true; }
 };
 ScoutButton.style = buttonCss;
 

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

@@ -1 +1 @@
-{"version":3,"file":"scout-button.entry.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: true,\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()\n  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":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,kvDAAkvD;;MCYvvD,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAAkC,QAAQ;AAEtD;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;AAGZ,IAAA,UAAU;IAEV,MAAM,GAAA;AACJ,QAAA,QACE,CACE,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,EAErC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CAAC,IAAI,IAAI,CAAM,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.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":[],"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,QACE,CACE,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,EAErC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAClD;;;;;;;;"}

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

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-DByXnE9g.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)}";
+
+const ScoutCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return h("slot", { key: 'bde708b7482da31d53fbc29581bed3f068e26279' });
+    }
+    static get delegatesFocus() { return true; }
+};
+ScoutCard.style = cardCss;
+
+export { ScoutCard as scout_card };
+//# sourceMappingURL=scout-card.entry.js.map

package/dist/esm/scout-card.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-card.entry.js","sources":["src/components/card/card.css?tag=scout-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n  display: block;\n  border-radius: var(--spacing-2);\n  border: 1px solid var(--color-gray-100);\n  padding: var(--spacing-2);\n  /* TODO: We don't have tokens for shadows yet */\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n}","import { Component, h } from \"@stencil/core\";\n\n/**\n * A general surface to hold various types of content.\n */\n@Component({\n  tag: \"scout-card\",\n  styleUrl: \"card.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutCard {\n  render() {\n    return <slot />;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,kMAAkM;;MCYrM,SAAS,GAAA,MAAA;;;;IACpB,MAAM,GAAA;QACJ,OAAO,8DAAQ;;;;;;;;"}

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, a as getElement, h } from './index-DByXnE9g.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}";
+
+const ScoutField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Label shown above the field.
+     */
+    label;
+    /**
+     * Help text shown below the field.
+     */
+    helpText;
+    inputId;
+    errorText = null;
+    errorHidden = false;
+    get hostElement() { return getElement(this); }
+    catchFieldId(event) {
+        event.stopPropagation();
+        this.inputId = event.detail;
+    }
+    handleInputChange(event) {
+        const { element } = event.detail;
+        this.errorHidden = true;
+        if (element.validity.valid) {
+            this.errorText = null;
+        }
+        else {
+            this.errorText = element.validationMessage;
+        }
+    }
+    handleValidationBlur() {
+        this.errorHidden = false;
+    }
+    render() {
+        return (h("div", { key: 'bcd308f7ff69063860281b7f4f48ef2baa608308', class: "field" }, h("label", { key: '756d4a97399ed94970b3d39850dd5c4d0e155a99', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '3700f8aba58c90b14224e0d35a147f1a11ba7f98' }), h("p", { key: '60a70a27e3b7811accc657bbe49405306d342d9d', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '44f8377005f43ca1a332d6c4d8aec48e5aafb3c4', class: "help-text" }, this.helpText)));
+    }
+};
+ScoutField.style = fieldCss;
+
+export { ScoutField as scout_field };
+//# sourceMappingURL=scout-field.entry.js.map

package/dist/esm/scout-field.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-field.entry.js","sources":["src/components/field/field.css?tag=scout-field&encapsulation=scoped","src/components/field/field.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n}\n\n.label {\n  font: var(--type-label-sm);\n  font-weight: 600;\n  color: var(--color-text-base);\n}\n\n.error-text {\n  font: var(--type-label-sm);\n  color: var(--color-text-danger-base);\n  margin: var(--spacing-1) 0 0 0;\n}\n\n.error-text:empty {\n  margin: 0;\n}\n\n.help-text {\n  font: var(--type-label-sm);\n  color: var(--color-gray-600);\n  margin: var(--spacing-1) 0 0 0;\n}","import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\ntype ValidatableElement =\n  | HTMLButtonElement\n  | HTMLFieldSetElement\n  | HTMLInputElement\n  | HTMLOutputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\n@Component({\n  tag: \"scout-field\",\n  styleUrl: \"field.css\",\n  scoped: true,\n})\nexport class ScoutField {\n  /**\n   * Label shown above the field.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Help text shown below the field.\n   */\n  @Prop() helpText?: string;\n\n  @State() inputId: string;\n  @State() errorText: string | null = null;\n  @State() errorHidden: boolean = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @Listen(\"_fieldId\")\n  catchFieldId(event: CustomEvent<string>) {\n    event.stopPropagation();\n    this.inputId = event.detail;\n  }\n\n  @Listen(\"scoutInputChange\")\n  handleInputChange(\n    event: CustomEvent<{\n      value: string;\n      element: ValidatableElement;\n    }>,\n  ) {\n    const { element } = event.detail;\n\n    this.errorHidden = true;\n    if (element.validity.valid) {\n      this.errorText = null;\n    } else {\n      this.errorText = element.validationMessage;\n    }\n  }\n\n  @Listen(\"scoutBlur\")\n  handleValidationBlur() {\n    this.errorHidden = false;\n  }\n\n  render() {\n    return (\n      <div class=\"field\">\n        <label htmlFor={this.inputId} class=\"label\">\n          {this.label}\n        </label>\n        <slot />\n        <p class=\"error-text\" aria-live=\"polite\">\n          {!this.errorHidden && this.errorText}\n        </p>\n        {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCe3a,UAAU,GAAA,MAAA;;;;AACrB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,QAAQ;AAEP,IAAA,OAAO;IACP,SAAS,GAAkB,IAAI;IAC/B,WAAW,GAAY,KAAK;;AAKrC,IAAA,YAAY,CAAC,KAA0B,EAAA;QACrC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;;AAI7B,IAAA,iBAAiB,CACf,KAGE,EAAA;AAEF,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;AAEhC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;aAChB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB;;;IAK9C,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;IAG1B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,EAAA,EACxC,IAAI,CAAC,KAAK,CACL,EACR,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,WAAA,EAAW,QAAQ,EACrC,EAAA,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC,EACH,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAK,CACtD;;;;;;;"}

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

@@ -0,0 +1,70 @@
+import { r as registerInstance, c as createEvent, h } from './index-DByXnE9g.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}";
+
+const ScoutInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.scoutInputChange = createEvent(this, "scoutInputChange");
+        this.scoutBlur = createEvent(this, "scoutBlur");
+        this._fieldId = createEvent(this, "_fieldId");
+    }
+    /**
+     * Type of input element. If you need a number input, read the accessibility
+     * section of this MDN article first:
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility
+     */
+    type = "text";
+    /**
+     * Input mode hints for devices with dynamic keyboards.
+     */
+    inputmode;
+    /**
+     * Regex pattern for input validation.
+     */
+    pattern;
+    /**
+     * Value of the input element, in case you want to control it yourself.
+     */
+    value = "";
+    /**
+     * Whether the input is disabled. Disabled inputs are not editable, excluded
+     * from tab order and are not validated.
+     */
+    disabled = false;
+    /**
+     * Custom validation function run on top of the implicit validation performed
+     * by the browser. Return a string with the validation message to mark the
+     * input as invalid, or null to mark it as valid.
+     */
+    validate;
+    scoutInputChange;
+    scoutBlur;
+    /**
+     * Internal event used for form field association.
+     */
+    _fieldId;
+    ariaId;
+    componentWillLoad() {
+        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
+        this._fieldId.emit(this.ariaId);
+    }
+    onInput(event) {
+        const input = event.target;
+        if (this.validate) {
+            const validationMessage = this.validate(input.value);
+            input.setCustomValidity(validationMessage ?? "");
+        }
+        this.scoutInputChange.emit({
+            value: input.value,
+            element: input,
+        });
+    }
+    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() }));
+    }
+};
+ScoutInput.style = inputCss;
+
+export { ScoutInput as scout_input };
+//# sourceMappingURL=scout-input.entry.js.map

package/dist/esm/scout-input.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-input.entry.js","sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[".input {\n  height: var(--spacing-10);\n  padding: var(--spacing-2);\n  font: var(--type-body-base);\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--spacing-2);\n  background-color: var(--color-white);\n  color: var(--color-text-base);\n}\n\n.input:disabled {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n  cursor: not-allowed;\n}","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"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;MCqCrW,UAAU,GAAA,MAAA;;;;;;;AACrB;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEjC;;;;AAIG;AACK,IAAA,QAAQ;AAEP,IAAA,gBAAgB;AAIhB,IAAA,SAAS;AAElB;;AAEG;AACM,IAAA,QAAQ;AAER,IAAA,MAAM;IAEf,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAiB,EAAA;AACvB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAE9C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;AACpD,YAAA,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC;;AAGlD,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,KAAK,CAAC,KAAK;AAClB,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/B,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAA,CACnC;;;;;;;"}

package/dist/esm/ui-webc.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-BKWL7m90.js';
-export { s as setNonce } from './index-BKWL7m90.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DByXnE9g.js';
+export { s as setNonce } from './index-DByXnE9g.js';
 
 /*
  Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["scout-bottom-bar",[[257,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[257,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[257,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]]], options);
+  return bootstrapLazy([["scout-bottom-bar",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card",[[273,"scout-card"]]],["scout-field",[[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",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]]], options);
 });
 //# sourceMappingURL=ui-webc.js.map

package/dist/types/components/card/card.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A general surface to hold various types of content.
+ */
+export declare class ScoutCard {
+    render(): any;
+}

package/dist/types/components/field/field.d.ts

@@ -0,0 +1,23 @@
+type ValidatableElement = HTMLButtonElement | HTMLFieldSetElement | HTMLInputElement | HTMLOutputElement | HTMLSelectElement | HTMLTextAreaElement;
+export declare class ScoutField {
+    /**
+     * Label shown above the field.
+     */
+    label: string;
+    /**
+     * Help text shown below the field.
+     */
+    helpText?: string;
+    inputId: string;
+    errorText: string | null;
+    errorHidden: boolean;
+    hostElement: HTMLElement;
+    catchFieldId(event: CustomEvent<string>): void;
+    handleInputChange(event: CustomEvent<{
+        value: string;
+        element: ValidatableElement;
+    }>): void;
+    handleValidationBlur(): void;
+    render(): any;
+}
+export {};

package/dist/types/components/input/input.d.ts

@@ -0,0 +1,47 @@
+import { type ComponentInterface, type EventEmitter } from "../../stencil-public-runtime";
+export type InputType = "text" | "password" | "email" | "number" | "tel" | "url" | (string & {});
+export type InputMode = "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url" | (string & {});
+export declare class ScoutInput implements ComponentInterface {
+    /**
+     * Type of input element. If you need a number input, read the accessibility
+     * section of this MDN article first:
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility
+     */
+    type: InputType;
+    /**
+     * Input mode hints for devices with dynamic keyboards.
+     */
+    inputmode?: InputMode;
+    /**
+     * Regex pattern for input validation.
+     */
+    pattern?: string;
+    /**
+     * Value of the input element, in case you want to control it yourself.
+     */
+    value: string;
+    /**
+     * Whether the input is disabled. Disabled inputs are not editable, excluded
+     * from tab order and are not validated.
+     */
+    disabled: boolean;
+    /**
+     * Custom validation function run on top of the implicit validation performed
+     * by the browser. Return a string with the validation message to mark the
+     * input as invalid, or null to mark it as valid.
+     */
+    validate?: (value: string) => string | null;
+    scoutInputChange: EventEmitter<{
+        value: string;
+        element: HTMLInputElement;
+    }>;
+    scoutBlur: EventEmitter<void>;
+    /**
+     * Internal event used for form field association.
+     */
+    _fieldId: EventEmitter<string>;
+    ariaId: string;
+    componentWillLoad(): Promise<void> | void;
+    onInput(event: InputEvent): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -7,8 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ItemType } from "./components/bottom-bar-item/bottom-bar-item";
 import { Variant } from "./components/button/button";
+import { InputMode, InputType } from "./components/input/input";
 export { ItemType } from "./components/bottom-bar-item/bottom-bar-item";
 export { Variant } from "./components/button/button";
+export { InputMode, InputType } from "./components/input/input";
 export namespace Components {
     /**
      * The bottom bar component is used in the Jamboree26 app to provide
@@ -61,6 +63,50 @@ export namespace Components {
          */
         "variant": Variant;
     }
+    /**
+     * A general surface to hold various types of content.
+     */
+    interface ScoutCard {
+    }
+    interface ScoutField {
+        /**
+          * Help text shown below the field.
+         */
+        "helpText"?: string;
+        /**
+          * Label shown above the field.
+         */
+        "label": string;
+    }
+    interface ScoutInput {
+        /**
+          * Whether the input is disabled. Disabled inputs are not editable, excluded from tab order and are not validated.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Input mode hints for devices with dynamic keyboards.
+         */
+        "inputmode"?: InputMode;
+        /**
+          * Regex pattern for input validation.
+         */
+        "pattern"?: string;
+        /**
+          * Type of input element. If you need a number input, read the accessibility section of this MDN article first: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility
+          * @default "text"
+         */
+        "type": InputType;
+        /**
+          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+         */
+        "validate"?: (value: string) => string | null;
+        /**
+          * Value of the input element, in case you want to control it yourself.
+          * @default ""
+         */
+        "value": string;
+    }
 }
 export interface ScoutBottomBarItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -70,6 +116,10 @@ export interface ScoutButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLScoutButtonElement;
 }
+export interface ScoutInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLScoutInputElement;
+}
 declare global {
     /**
      * The bottom bar component is used in the Jamboree26 app to provide
@@ -122,10 +172,50 @@ declare global {
         prototype: HTMLScoutButtonElement;
         new (): HTMLScoutButtonElement;
     };
+    /**
+     * A general surface to hold various types of content.
+     */
+    interface HTMLScoutCardElement extends Components.ScoutCard, HTMLStencilElement {
+    }
+    var HTMLScoutCardElement: {
+        prototype: HTMLScoutCardElement;
+        new (): HTMLScoutCardElement;
+    };
+    interface HTMLScoutFieldElement extends Components.ScoutField, HTMLStencilElement {
+    }
+    var HTMLScoutFieldElement: {
+        prototype: HTMLScoutFieldElement;
+        new (): HTMLScoutFieldElement;
+    };
+    interface HTMLScoutInputElementEventMap {
+        "scoutInputChange": {
+    value: string;
+    element: HTMLInputElement;
+  };
+        "scoutBlur": void;
+        "_fieldId": string;
+    }
+    interface HTMLScoutInputElement extends Components.ScoutInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLScoutInputElementEventMap>(type: K, listener: (this: HTMLScoutInputElement, ev: ScoutInputCustomEvent<HTMLScoutInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLScoutInputElementEventMap>(type: K, listener: (this: HTMLScoutInputElement, ev: ScoutInputCustomEvent<HTMLScoutInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLScoutInputElement: {
+        prototype: HTMLScoutInputElement;
+        new (): HTMLScoutInputElement;
+    };
     interface HTMLElementTagNameMap {
         "scout-bottom-bar": HTMLScoutBottomBarElement;
         "scout-bottom-bar-item": HTMLScoutBottomBarItemElement;
         "scout-button": HTMLScoutButtonElement;
+        "scout-card": HTMLScoutCardElement;
+        "scout-field": HTMLScoutFieldElement;
+        "scout-input": HTMLScoutInputElement;
     }
 }
 declare namespace LocalJSX {
@@ -182,10 +272,66 @@ declare namespace LocalJSX {
          */
         "variant"?: Variant;
     }
+    /**
+     * A general surface to hold various types of content.
+     */
+    interface ScoutCard {
+    }
+    interface ScoutField {
+        /**
+          * Help text shown below the field.
+         */
+        "helpText"?: string;
+        /**
+          * Label shown above the field.
+         */
+        "label": string;
+    }
+    interface ScoutInput {
+        /**
+          * Whether the input is disabled. Disabled inputs are not editable, excluded from tab order and are not validated.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Input mode hints for devices with dynamic keyboards.
+         */
+        "inputmode"?: InputMode;
+        "onScoutBlur"?: (event: ScoutInputCustomEvent<void>) => void;
+        "onScoutInputChange"?: (event: ScoutInputCustomEvent<{
+    value: string;
+    element: HTMLInputElement;
+  }>) => void;
+        /**
+          * Internal event used for form field association.
+         */
+        "on_fieldId"?: (event: ScoutInputCustomEvent<string>) => void;
+        /**
+          * Regex pattern for input validation.
+         */
+        "pattern"?: string;
+        /**
+          * Type of input element. If you need a number input, read the accessibility section of this MDN article first: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility
+          * @default "text"
+         */
+        "type"?: InputType;
+        /**
+          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+         */
+        "validate"?: (value: string) => string | null;
+        /**
+          * Value of the input element, in case you want to control it yourself.
+          * @default ""
+         */
+        "value"?: string;
+    }
     interface IntrinsicElements {
         "scout-bottom-bar": ScoutBottomBar;
         "scout-bottom-bar-item": ScoutBottomBarItem;
         "scout-button": ScoutButton;
+        "scout-card": ScoutCard;
+        "scout-field": ScoutField;
+        "scout-input": ScoutInput;
     }
 }
 export { LocalJSX as JSX };
@@ -206,6 +352,12 @@ declare module "@stencil/core" {
              * A simple button component.
              */
             "scout-button": LocalJSX.ScoutButton & JSXBase.HTMLAttributes<HTMLScoutButtonElement>;
+            /**
+             * A general surface to hold various types of content.
+             */
+            "scout-card": LocalJSX.ScoutCard & JSXBase.HTMLAttributes<HTMLScoutCardElement>;
+            "scout-field": LocalJSX.ScoutField & JSXBase.HTMLAttributes<HTMLScoutFieldElement>;
+            "scout-input": LocalJSX.ScoutInput & JSXBase.HTMLAttributes<HTMLScoutInputElement>;
         }
     }
 }

package/dist/ui-webc/p-383736c1.entry.js

@@ -0,0 +1,2 @@
+import{r,h as s}from"./p-DByXnE9g.js";const a=":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)}";const o=class{constructor(s){r(this,s)}render(){return s("slot",{key:"bde708b7482da31d53fbc29581bed3f068e26279"})}static get delegatesFocus(){return true}};o.style=a;export{o as scout_card};
+//# sourceMappingURL=p-383736c1.entry.js.map

package/dist/ui-webc/p-383736c1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["registerInstance","h","cardCss","ScoutCard","constructor","hostRef","this","render","key","delegatesFocus","style"],"sources":["0"],"mappings":"OAAcA,OAAkBC,MAAS,kBAEzC,MAAMC,EAAU,mMAEhB,MAAMC,EAAY,MACd,WAAAC,CAAYC,GACRL,EAAiBM,KAAMD,EAC3B,CACA,MAAAE,GACI,OAAON,EAAE,OAAQ,CAAEO,IAAK,4CAC5B,CACA,yBAAWC,GAAmB,OAAO,IAAM,GAE/CN,EAAUO,MAAQR,SAETC","ignoreList":[]}

package/dist/ui-webc/{p-5a234307.entry.js → p-99329c64.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as r,h as a}from"./p-BKWL7m90.js";const n=":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 t=class{constructor(a){o(this,a);this.scoutClick=r(this,"scoutClick")}type="button";variant="outlined";icon;scoutClick;render(){return a("button",{key:"1c6f55bf05f4d705f9a06ab55b51269c82753662",type:this.type,class:this.variant,onClick:()=>this.scoutClick.emit()},a("slot",{key:"5cd3412caf13b6d99da517ae7e6f5877234e65d7"}),this.icon&&a("span",{key:"192d381457cde85ace465db047664b63d2fdeeed",class:"icon",innerHTML:this.icon}))}};t.style=n;export{t as scout_button};
-//# sourceMappingURL=p-5a234307.entry.js.map
+import{r as o,c as r,h as a}from"./p-DByXnE9g.js";const t=":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 c=class{constructor(a){o(this,a);this.scoutClick=r(this,"scoutClick")}type="button";variant="outlined";icon;scoutClick;render(){return a("button",{key:"7c5b9b8b4dbb40537b923585af17c81dc6ee1644",type:this.type,class:this.variant,onClick:()=>this.scoutClick.emit()},a("slot",{key:"a89b795dbbd004cd8d9123bacf338cb87cca4953"}),this.icon&&a("span",{key:"12ac9a0668ebd4d84fd02e5065f1c9802d188171",class:"icon",innerHTML:this.icon}))}static get delegatesFocus(){return true}};c.style=t;export{c as scout_button};
+//# sourceMappingURL=p-99329c64.entry.js.map

package/dist/ui-webc/p-99329c64.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["registerInstance","createEvent","h","buttonCss","ScoutButton","constructor","hostRef","this","scoutClick","type","variant","icon","render","key","class","onClick","emit","innerHTML","delegatesFocus","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAY,mvDAElB,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,WAAaP,EAAYM,KAAM,aACxC,CACAE,KAAO,SAIPC,QAAU,WAIVC,KACAH,WACA,MAAAI,GACI,OAAQV,EAAE,SAAU,CAAEW,IAAK,2CAA4CJ,KAAMF,KAAKE,KAAMK,MAAOP,KAAKG,QAASK,QAAS,IAAMR,KAAKC,WAAWQ,QAAUd,EAAE,OAAQ,CAAEW,IAAK,6CAA+CN,KAAKI,MAAQT,EAAE,OAAQ,CAAEW,IAAK,2CAA4CC,MAAO,OAAQG,UAAWV,KAAKI,OACnU,CACA,yBAAWO,GAAmB,OAAO,IAAM,GAE/Cd,EAAYe,MAAQhB,SAEXC","ignoreList":[]}

package/dist/ui-webc/p-9b7c270d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as o}from"./p-DByXnE9g.js";const i=".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}";const a=class{constructor(o){t(this,o);this.scoutInputChange=s(this,"scoutInputChange");this.scoutBlur=s(this,"scoutBlur");this._fieldId=s(this,"_fieldId")}type="text";inputmode;pattern;value="";disabled=false;validate;scoutInputChange;scoutBlur;_fieldId;ariaId;componentWillLoad(){this.ariaId=`_${Math.random().toString(36).substring(2,9)}`;this._fieldId.emit(this.ariaId)}onInput(t){const s=t.target;if(this.validate){const t=this.validate(s.value);s.setCustomValidity(t??"")}this.scoutInputChange.emit({value:s.value,element:s})}render(){return o("input",{key:"7bc05d32826cd3173b6a6e4620acfb501fae4edc",id:this.ariaId,type:this.type,inputMode:this.inputmode,pattern:this.pattern,class:"input",value:this.value,disabled:this.disabled,onInput:t=>this.onInput(t),onBlur:()=>this.scoutBlur.emit()})}};a.style=i;export{a as scout_input};
+//# sourceMappingURL=p-9b7c270d.entry.js.map