@scouterna/ui-webc 3.2.0 → 4.0.0

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-CBq_WkdR.js';
-export { s as setNonce } from './index-CBq_WkdR.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-BtN0bCWb.js';
+export { s as setNonce } from './index-BtN0bCWb.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["scout-list-view-item",[[529,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"action":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4],"disabled":[4]}]]],["scout-app-bar",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[529,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"size":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card",[[273,"scout-card"]]],["scout-divider",[[17,"scout-divider"]]],["scout-field",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidityChanged","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input",[[514,"scout-input",{"validity":[1],"size":[1],"variant":[1],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"placeholder":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-link",[[529,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader",[[529,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader",[[513,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select",[[774,"scout-select",{"validity":[1],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-stack",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch",[[529,"scout-switch",{"validity":[1],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-tabs",[[785,"scout-tabs",{"value":[2],"widths":[32],"lefts":[32]},[[2,"click","handleClick"]],{"value":[{"updateChildrenClasses":0},{"calculateIndicatorSizes":0}]}]]],["scout-tabs-tab",[[273,"scout-tabs-tab"]]],["scout-checkbox_2",[[514,"scout-checkbox",{"validity":[1],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}],[514,"scout-radio-button",{"validity":[1],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]]], options);
+  return bootstrapLazy([["scout-list-view-item",[[529,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"action":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4],"disabled":[4]}]]],["scout-app-bar",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-avatar",[[529,"scout-avatar",{"imageSrc":[1,"image-src"],"alt":[1]}]]],["scout-bottom-bar",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[529,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"size":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card",[[273,"scout-card"]]],["scout-divider",[[17,"scout-divider"]]],["scout-drawer",[[785,"scout-drawer",{"open":[4],"heading":[1],"showBackButton":[4,"show-back-button"],"backButtonLabel":[1,"back-button-label"],"showExitButton":[4,"show-exit-button"],"exitButtonLabel":[1,"exit-button-label"],"disableBackdrop":[4,"disable-backdrop"],"disableContentPadding":[4,"disable-content-padding"],"drawerState":[32],"focusedNode":[32]},null,{"open":[{"setDrawerOpenState":0}]}]]],["scout-field",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidityChanged","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input",[[514,"scout-input",{"validity":[1],"size":[1],"variant":[1],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"placeholder":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-link",[[529,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader",[[529,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader",[[513,"scout-loader",{"text":[1],"size":[1]}]]],["scout-segmented-control",[[785,"scout-segmented-control",{"size":[1],"value":[2],"widths":[32],"lefts":[32],"enableAnimations":[32]},[[2,"click","handleClick"]],{"value":[{"updateChildrenAttributes":0},{"calculateIndicatorSizes":0}]}]]],["scout-select",[[774,"scout-select",{"validity":[1],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-stack",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch",[[529,"scout-switch",{"validity":[1],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-tabs",[[785,"scout-tabs",{"value":[2],"widths":[32],"lefts":[32]},[[2,"click","handleClick"]],{"value":[{"updateChildrenClasses":0},{"calculateIndicatorSizes":0}]}]]],["scout-tabs-tab",[[273,"scout-tabs-tab"]]],["scout-checkbox_2",[[514,"scout-checkbox",{"validity":[1],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}],[514,"scout-radio-button",{"validity":[1],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CBq_WkdR.js';
+import { r as registerInstance, h } from './index-BtN0bCWb.js';
 
-const appBarCss = () => `:host{display:flex;width:100%}::slotted(scout-button){height:100% !important}.container{display:flex;flex:1;height:var(--spacing-14);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-100);color:var(--color-text-brand-base);padding:var(--spacing-1)}.title{flex:1;display:flex;align-items:center;font:var(--type-body-lg);font-weight:500;padding:0 var(--spacing-2)}`;
+const appBarCss = () => `:host{display:flex;width:100%}::slotted(scout-button){height:100% !important}.container{display:flex;flex:1;height:var(--spacing-14);background-color:var(--color-white);border-bottom:1px solid var(--color-gray-100);color:var(--color-text-brand-base);padding:var(--spacing-1);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1),     0 1px 2px -1px rgba(0, 0, 0, 0.1)}.title{flex:1;display:flex;align-items:center;font:var(--type-body-lg);font-weight:500;padding:0 var(--spacing-2)}`;
 
 const ScoutAppBar = class {
     constructor(hostRef) {

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

@@ -0,0 +1,37 @@
+import { r as registerInstance, h, a as getAssetPath } from './index-BtN0bCWb.js';
+
+const avatarCss = () => `:host{display:flex;aspect-ratio:1 / 1}img{border-radius:50%}`;
+
+const ScoutAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The source URL of the user image.
+     */
+    imageSrc = "";
+    /**
+     * The name of the user.
+     */
+    alt = "";
+    render() {
+        const getImagePath = () => {
+            if (this.imageSrc) {
+                return this.imageSrc;
+            }
+            try {
+                return getAssetPath("assets/fallbackImage.png");
+            }
+            catch (_e) {
+                console.info("In storybook, rendering from storybook asset");
+                return "fallbackImage.png";
+            }
+        };
+        return h("img", { src: getImagePath(), alt: this.alt });
+    }
+    static get delegatesFocus() { return true; }
+    static get assetsDirs() { return ["assets"]; }
+};
+ScoutAvatar.style = avatarCss();
+
+export { ScoutAvatar as scout_avatar };

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h } from './index-CBq_WkdR.js';
+import { r as registerInstance, c as createEvent, h } from './index-BtN0bCWb.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}@media (hover: hover){.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 bottomBarItemCss = () => `:host{display:flex;flex:1}.button{position:relative;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;z-index:0}@media (hover: hover){.button:hover::after{background-color:var(--color-neutral-50)}}.button.active{color:var(--color-blue-500)}.button.active::after{content:"";position:absolute;top:var(--spacing-2);bottom:var(--spacing-2);right:var(--spacing-2);left:var(--spacing-2);background-color:var(--color-blue-50);border-radius:var(--spacing-4);z-index:-1}.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) {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CBq_WkdR.js';
+import { r as registerInstance, h } from './index-BtN0bCWb.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 bottomBarCss = () => `:host{display:flex;width:100%}.container{display:flex;flex:1;height:var(--spacing-18);border-top:1px solid var(--color-gray-100);background-color:var(--color-white);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1),     0 1px 2px -1px rgba(0, 0, 0, 0.1)}`;
 
 const ScoutBottomBar = class {
     constructor(hostRef) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CBq_WkdR.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BtN0bCWb.js';
 
 const buttonCss = () => `scout-button{display:inline-block;height:var(--spacing-10);font:var(--type-body-base)}scout-button[data-size="large"]{height:var(--spacing-12);font:var(--type-body-lg)}scout-button .button{flex:1;display:inline-flex;width:100%;height:100%;align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box}scout-button[data-size="large"] .button{padding:0 var(--spacing-5)}scout-button .icon{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}scout-button .icon svg{width:100%;height:100%}scout-button[data-icon-only] .button{aspect-ratio:1 / 1;justify-content:center;padding:0}scout-button[data-icon-only] .icon{margin:0}scout-button[data-icon-only] .content{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}scout-button .button.primary{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}@media (hover: hover){scout-button .button.primary:hover{background-color:var(--color-background-brand-hovered)}}scout-button .button.primary:active{background-color:var(--color-background-brand-pressed)}scout-button .button.outlined{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}@media (hover: hover){scout-button .button.outlined:hover{background-color:var(--color-background-brand-subtle-hovered)}}scout-button .button.outlined:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.text{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}@media (hover: hover){scout-button .button.text:hover{background-color:var(--color-background-brand-subtle-hovered)}}scout-button .button.text:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.caution{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}@media (hover: hover){scout-button .button.caution:hover{background-color:var(--color-background-caution-bold-hovered)}}scout-button .button.caution:active{background-color:var(--color-background-caution-bold-pressed)}scout-button .button.danger{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}@media (hover: hover){scout-button .button.danger:hover{background-color:var(--color-background-danger-bold-hovered)}}scout-button .button.danger:active{background-color:var(--color-background-danger-bold-pressed)}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CBq_WkdR.js';
+import { r as registerInstance, h } from './index-BtN0bCWb.js';
 
 const cardCss = () => `:host{display:contents}.card{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)}`;
 

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

@@ -1,5 +1,5 @@
-import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-CBq_WkdR.js';
-import { i as inputMixin } from './inputMixin-CArDsEiI.js';
+import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-BtN0bCWb.js';
+import { i as inputMixin } from './inputMixin-DC4hF1Lp.js';
 
 const checkSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=';
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CBq_WkdR.js';
+import { r as registerInstance, h, H as Host } from './index-BtN0bCWb.js';
 
 const dividerCss = () => `:host{display:block;height:1px;background-color:var(--color-gray-200)}`;