@scouterna/ui-webc 0.2.2 → 0.2.7

package/dist/cjs/index.cjs.js

@@ -0,0 +1,8 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+exports.format = format;
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"],"names":[],"mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAI,CAAA,EAAA,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF;;;;"}

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-M8pbc2b8.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[257,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[257,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[257,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var index = require('./index-M8pbc2b8.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}
+
+const bottomBarItemCss = ":host{display:flex;flex:1}.button{display:flex;flex-direction:column;flex:1;justify-content:center;align-items:center;background-color:transparent;border:none;color:var(--color-text-base);cursor:pointer}.button:hover{background-color:var(--color-neutral-50)}.button.active{background-color:var(--color-blue-50);color:var(--color-blue-500)}.button .icon{width:var(--spacing-6);height:var(--spacing-6)}.button .label{font:var(--type-label-sm)}a{-webkit-text-decoration:none;text-decoration:none}";
+
+const ScoutBottomBarItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scoutClick = index.createEvent(this, "scoutClick");
+    }
+    /**
+     * The type of the bottom bar item, either a button or a link.
+     */
+    type = "button";
+    /**
+     * An optional link to navigate to when the item is clicked. Only used when
+     * `type` is set to "link".
+     */
+    href;
+    /**
+     * An icon to display above the label. Must be an SVG string.
+     */
+    icon;
+    /**
+     * The label to display below the icon.
+     */
+    label;
+    /**
+     * Whether the item is currently active. Should be set to true when the item
+     * represents the current page.
+     */
+    active;
+    scoutClick;
+    render() {
+        const Tag = this.type === "link" ? "a" : "button";
+        const props = this.type === "link"
+            ? {
+                href: this.href,
+            }
+            : {};
+        return (index.h(Tag, { key: 'c36c7b65c03f5dd3188466b7bbaf1e08d3ae1071', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, index.h("span", { key: '79196c1d8b2c7bfc18eb5f4235d0c0d2cd335a00', class: "icon", innerHTML: this.icon }), index.h("span", { key: '8d6cd8fe36de135ce41880e8db3870bd33d3c0d8', class: "label" }, this.label)));
+    }
+};
+ScoutBottomBarItem.style = bottomBarItemCss;
+
+exports.scout_bottom_bar_item = ScoutBottomBarItem;
+//# sourceMappingURL=scout-bottom-bar-item.entry.cjs.js.map

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

@@ -0,0 +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: 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":["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;;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,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

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-M8pbc2b8.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)}";
+
+const ScoutBottomBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("nav", { key: '68384cb3993fa3ca4a70fdf55f691f728c5cfb2b', class: "container" }, index.h("slot", { key: '5dd9a017d0d7c3d3f0adb516ba66118f73c27841' })));
+    }
+};
+ScoutBottomBar.style = bottomBarCss;
+
+exports.scout_bottom_bar = ScoutBottomBar;
+//# sourceMappingURL=scout-bottom-bar.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scout-bottom-bar.entry.cjs.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":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,sIAAsI;;MCW9I,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;"}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var index = require('./index-M8pbc2b8.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 ScoutButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scoutClick = index.createEvent(this, "scoutClick");
+    }
+    type = "button";
+    /**
+     * The variant primarily affects the color of the button.
+     */
+    variant = "outlined";
+    /**
+     * An optional icon to display alongside the button text. Must be an SVG string.
+     */
+    icon;
+    scoutClick;
+    render() {
+        return (index.h("button", { key: '1c6f55bf05f4d705f9a06ab55b51269c82753662', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, index.h("slot", { key: '5cd3412caf13b6d99da517ae7e6f5877234e65d7' }), this.icon && index.h("span", { key: '192d381457cde85ace465db047664b63d2fdeeed', class: "icon", innerHTML: this.icon })));
+    }
+};
+ScoutButton.style = buttonCss;
+
+exports.scout_button = ScoutButton;
+//# sourceMappingURL=scout-button.entry.cjs.js.map

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

@@ -0,0 +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: 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":["h"],"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,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;;;;;;;"}

package/dist/cjs/ui-webc.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-M8pbc2b8.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('ui-webc.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[257,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[257,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[257,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+//# sourceMappingURL=ui-webc.cjs.js.map

package/dist/cjs/ui-webc.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-webc.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.38.1/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,gQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,14 @@
+{
+  "entries": [
+    "components/bottom-bar-item/bottom-bar-item.js",
+    "components/button/button.js",
+    "components/bottom-bar/bottom-bar.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.38.1",
+    "typescriptVersion": "5.9.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  height: var(--spacing-14);
+  border-top: 1px solid var(--color-neutral-100);
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * The bottom bar component is used in the Jamboree26 app to provide
+ * navigation at the bottom of the screen.
+ */
+export class ScoutBottomBar {
+    render() {
+        return (h("nav", { key: '68384cb3993fa3ca4a70fdf55f691f728c5cfb2b', class: "container" }, h("slot", { key: '5dd9a017d0d7c3d3f0adb516ba66118f73c27841' })));
+    }
+    static get is() { return "scout-bottom-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bottom-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bottom-bar.css"]
+        };
+    }
+}
+//# sourceMappingURL=bottom-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-bar.js","sourceRoot":"","sources":["../../../src/components/bottom-bar/bottom-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;GAGG;AAMH,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,39 @@
+:host {
+  display: flex;
+  flex: 1;
+}
+
+.button {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  color: var(--color-text-base);
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: var(--color-neutral-50);
+}
+
+.button.active {
+  background-color: var(--color-blue-50);
+  color: var(--color-blue-500);
+}
+
+.button .icon {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+}
+
+.button .label {
+  font: var(--type-label-sm);
+}
+
+a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}

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

@@ -0,0 +1,177 @@
+import { h } from "@stencil/core";
+import clsx from "clsx";
+/**
+ * A bottom bar item used within the bottom bar for navigation. Should not be
+ * used outside of a bottom bar.
+ */
+export class ScoutBottomBarItem {
+    /**
+     * The type of the bottom bar item, either a button or a link.
+     */
+    type = "button";
+    /**
+     * An optional link to navigate to when the item is clicked. Only used when
+     * `type` is set to "link".
+     */
+    href;
+    /**
+     * An icon to display above the label. Must be an SVG string.
+     */
+    icon;
+    /**
+     * The label to display below the icon.
+     */
+    label;
+    /**
+     * Whether the item is currently active. Should be set to true when the item
+     * represents the current page.
+     */
+    active;
+    scoutClick;
+    render() {
+        const Tag = this.type === "link" ? "a" : "button";
+        const props = this.type === "link"
+            ? {
+                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)));
+    }
+    static get is() { return "scout-bottom-bar-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bottom-bar-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bottom-bar-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemType",
+                    "resolved": "\"button\" | \"link\"",
+                    "references": {
+                        "ItemType": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-web-components/j26-web-components/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.tsx",
+                            "id": "src/components/bottom-bar-item/bottom-bar-item.tsx::ItemType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the bottom bar item, either a button or a link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"button\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional link to navigate to when the item is clicked. Only used when\n`type` is set to \"link\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An icon to display above the label. Must be an SVG string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to display below the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently active. Should be set to true when the item\nrepresents the current page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutClick",
+                "name": "scoutClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bottom-bar-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-bar-item.js","sourceRoot":"","sources":["../../../src/components/bottom-bar-item/bottom-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;GAGG;AAMH,MAAM,OAAO,kBAAkB;IAC7B;;OAEG;IACK,IAAI,GAAa,QAAQ,CAAC;IAElC;;;OAGG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,MAAM,CAAW;IAGzB,UAAU,CAAqB;IAE/B,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;YAC3C,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\nimport clsx from \"clsx\";\n\nexport type ItemType = \"button\" | \"link\";\n\n/**\n * A bottom bar item used within the bottom bar for navigation. Should not be\n * used outside of a bottom bar.\n */\n@Component({\n  tag: \"scout-bottom-bar-item\",\n  styleUrl: \"bottom-bar-item.css\",\n  shadow: 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"]}

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

@@ -0,0 +1,94 @@
+: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);
+  }