@scouterna/ui-webc 2.2.4 → 2.2.5

package/dist/cjs/{inputMixin-CkYXihTB.js → inputMixin-D1D-VFiT.js}

@@ -39,6 +39,10 @@ const inputMixin = (Base) => {
         }
         onInput() {
             this.runValidation();
+            this.scoutInputChange.emit({
+                value: this.inputElement.value,
+                element: this.inputElement,
+            });
         }
         onBlur() {
             this.scoutBlur.emit();
@@ -62,6 +66,6 @@ const inputMixin = (Base) => {
 };
 
 exports.inputMixin = inputMixin;
-//# sourceMappingURL=inputMixin-CkYXihTB.js.map
+//# sourceMappingURL=inputMixin-D1D-VFiT.js.map
 
-//# sourceMappingURL=inputMixin-CkYXihTB.js.map
+//# sourceMappingURL=inputMixin-D1D-VFiT.js.map

package/dist/cjs/inputMixin-D1D-VFiT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputMixin-D1D-VFiT.js","sources":["src/mixins/inputMixin.ts"],"sourcesContent":["import {\n  Event,\n  type EventEmitter,\n  type MixedInCtor,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport const inputMixin = <B extends MixedInCtor>(Base: B) => {\n  class InputMixin extends Base {\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: HTMLElement;\n    }>;\n    @Event() scoutBlur: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutValidate: EventEmitter<{ element: HTMLElement }>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutInvalid: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field association.\n     */\n    @Event() _scoutFieldId: EventEmitter<string>;\n\n    @State() ariaId: string;\n\n    private inputElement:\n      | HTMLButtonElement\n      | HTMLInputElement\n      | HTMLOutputElement\n      | HTMLSelectElement\n      | HTMLTextAreaElement;\n\n    componentWillLoad() {\n      this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n      this._scoutFieldId.emit(this.ariaId);\n    }\n\n    componentDidLoad() {\n      this.runValidation();\n    }\n\n    onInput() {\n      this.runValidation();\n      this.scoutInputChange.emit({\n        value: this.inputElement.value,\n        element: this.inputElement,\n      });\n    }\n\n    onBlur() {\n      this.scoutBlur.emit();\n    }\n\n    onInvalid() {\n      this._scoutInvalid.emit();\n    }\n\n    runValidation() {\n      if (!this.validate) {\n        return;\n      }\n\n      const validationMessage = this.validate(this.inputElement.value);\n      this.inputElement.setCustomValidity(validationMessage ?? \"\");\n\n      this._scoutValidate.emit({ element: this.inputElement });\n    }\n\n    setInputRef(\n      el:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement,\n    ) {\n      this.inputElement = el;\n    }\n  }\n  return InputMixin;\n};\n"],"names":[],"mappings":";;;;AAQa,MAAA,UAAU,GAAG,CAAwB,IAAO,KAAI;UACrD,UAAW,GAAA,cAAQ,IAAI,CAAA;;;;;AAC3B;;;;AAIG;AACK,QAAA,QAAQ;AAEP,QAAA,gBAAgB;AAIhB,QAAA,SAAS;AAElB;;AAEG;AACM,QAAA,cAAc;AAEvB;;AAEG;AACM,QAAA,aAAa;AAEtB;;AAEG;AACM,QAAA,aAAa;AAEb,QAAA,MAAM;AAEP,QAAA,YAAY;QAOpB,iBAAiB,GAAA;YACf,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;YAC9D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;QAGtC,gBAAgB,GAAA;YACd,IAAI,CAAC,aAAa,EAAE;;QAGtB,OAAO,GAAA;YACL,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACzB,gBAAA,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK;gBAC9B,OAAO,EAAE,IAAI,CAAC,YAAY;AAC3B,aAAA,CAAC;;QAGJ,MAAM,GAAA;AACJ,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;QAGvB,SAAS,GAAA;AACP,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;QAG3B,aAAa,GAAA;AACX,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB;;AAGF,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAChE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC;AAE5D,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;AAG1D,QAAA,WAAW,CACT,EAKuB,EAAA;AAEvB,YAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;;AAG1B,IAAA,OAAO,UAAU;AACnB;;;;"}

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-B3fXatmo.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4]}]]],["scout-app-bar.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[774,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input.cjs",[[770,"scout-input",{"validate":[16],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[785,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
+  return index.bootstrapLazy([["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4],"disabled":[4]}]]],["scout-app-bar.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input.cjs",[[770,"scout-input",{"validate":[16],"size":[1],"variant":[1],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"placeholder":[1],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[785,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-B3fXatmo.js');
 
-const appBarCss = ":host{display:flex;width:100%}::slotted(scout-button){height:100%}.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-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 ScoutAppBar = class {
     constructor(hostRef) {

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

@@ -1 +1 @@
-{"version":3,"file":"scout-app-bar.entry.cjs.js","sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n::slotted(scout-button) {\n  height: 100%;\n}\n\n.container {\n  display: flex;\n  flex: 1;\n  height: var(--spacing-14);\n  background-color: var(--color-white);\n  border-bottom: 1px solid var(--color-neutral-100);\n  color: var(--color-text-brand-base);\n  padding: var(--spacing-1);\n}\n\n.title {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  font: var(--type-body-lg);\n  font-weight: 500;\n  padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n/**\n * The App Bar component is used at the top of a page to display a title and\n * optional prefix and suffix actions. It's typically used to provide a\n * native-like navigation experience.\n */\n@Component({\n  tag: \"scout-app-bar\",\n  styleUrl: \"app-bar.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutAppBar {\n  @Prop() titleText?: string;\n\n  render() {\n    return (\n      <header class=\"container\">\n        <slot name=\"prefix\" />\n        <div class=\"title\">{this.titleText}</div>\n        <slot name=\"suffix\" />\n      </header>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,+XAA+X;;MCcpY,WAAW,GAAA,MAAA;;;;AACd,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,WAAW,EAAA,EACvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACf;;;;;;;;"}
+{"version":3,"file":"scout-app-bar.entry.cjs.js","sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n::slotted(scout-button) {\n  /* biome-ignore lint/complexity/noImportantStyles: This is a cheeky override, so we're good with it */\n  height: 100% !important;\n}\n\n.container {\n  display: flex;\n  flex: 1;\n  height: var(--spacing-14);\n  background-color: var(--color-white);\n  border-bottom: 1px solid var(--color-neutral-100);\n  color: var(--color-text-brand-base);\n  padding: var(--spacing-1);\n}\n\n.title {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  font: var(--type-body-lg);\n  font-weight: 500;\n  padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n/**\n * The App Bar component is used at the top of a page to display a title and\n * optional prefix and suffix actions. It's typically used to provide a\n * native-like navigation experience.\n */\n@Component({\n  tag: \"scout-app-bar\",\n  styleUrl: \"app-bar.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutAppBar {\n  @Prop() titleText?: string;\n\n  render() {\n    return (\n      <header class=\"container\">\n        <slot name=\"prefix\" />\n        <div class=\"title\">{this.titleText}</div>\n        <slot name=\"suffix\" />\n      </header>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,0YAA0Y;;MCc/Y,WAAW,GAAA,MAAA;;;;AACd,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,WAAW,EAAA,EACvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACf;;;;;;;;"}

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-B3fXatmo.js');
 
-const buttonCss = ".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
+const buttonCss = "scout-button{display:inline-block;height:var(--spacing-10)}scout-button .button{flex:1;display:inline-flex;height:100%;align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box}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.icon-only .button{aspect-ratio:1 / 1;justify-content:center;padding:0}scout-button.icon-only .icon{margin:0}scout-button.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)}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)}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)}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)}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)}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)}";
 
 const ScoutButton = class {
     constructor(hostRef) {
@@ -37,8 +37,8 @@ const ScoutButton = class {
             : {
                 type: this.type,
             };
-        const icon = this.icon && index.h("span", { key: '8f27b9e6a50427afef8d323212742f031f70db94', class: "icon", innerHTML: this.icon });
-        return (index.h(Tag, { key: '8f59580f38d9eafc86ac2ce9a0243cf94e1e87e0', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, index.h("span", { key: 'c6a68e20086b2da562324d4a15a973ba24fca90d', class: "content" }, index.h("slot", { key: '4d52b30c5addf5389494c994d91ab7f35a51d734' })), this.iconPosition === "after" && icon));
+        const icon = this.icon && index.h("span", { key: '0f03bad87dbcaf10cc387fd20121bd6b3ecdf42d', class: "icon", innerHTML: this.icon });
+        return (index.h(index.Host, { key: '7a2f998327c5e3dc7139c11f3fcbbe827346c0ee', class: this.iconOnly ? "icon-only" : "" }, index.h(Tag, { key: 'cabe4acf010df2880a83d5b27f2e885bf326673c', class: `button ${this.variant}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, index.h("span", { key: '7388a6a872149b4cff84256017ee251196612e1a', class: "content" }, index.h("slot", { key: '0002a40443d7da3b386a708543185cbc572bb461' })), this.iconPosition === "after" && icon)));
     }
 };
 ScoutButton.style = buttonCss;

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

@@ -1 +1 @@
-{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.button {\n  flex: 1;\n  display: inline-flex;\n  height: var(--spacing-10);\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-3);\n  padding: 0 var(--spacing-4);\n  font: var(--type-body-base);\n  border-radius: var(--spacing-2);\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.icon {\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.button.icon-only {\n  aspect-ratio: 1 / 1;\n  justify-content: center;\n  padding: 0;\n}\n\n.button.icon-only .icon {\n  margin: 0;\n}\n\n.button.icon-only .content {\n  /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.button.primary {\n  background-color: var(--color-background-brand-base);\n  color: var(--color-text-brand-inverse);\n\n  &:hover {\n    background-color: var(--color-background-brand-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-pressed);\n  }\n}\n\n.button.outlined {\n  background-color: transparent;\n  border-color: var(--color-background-brand-subtle-base);\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\n.button.text {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\n.button.caution {\n  background-color: var(--color-background-caution-bold-base);\n  color: var(--color-text-caution-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-caution-bold-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-caution-bold-pressed);\n  }\n}\n\n.button.danger {\n  background-color: var(--color-background-danger-bold-base);\n  color: var(--color-text-danger-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-danger-bold-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-danger-bold-pressed);\n  }\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A button component that can be used either as a normal button or as a link.\n * Will render a `<button>` element when the `type` is set to \"button\",\n * \"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  scoped: true,\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n  @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n  @Prop() iconOnly: boolean = false;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {\n            type: this.type,\n          };\n\n    const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n    return (\n      <Tag\n        class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        {this.iconPosition === \"before\" && icon}\n        <span class=\"content\">\n          <slot />\n        </span>\n        {this.iconPosition === \"after\" && icon}\n      </Tag>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCcl8E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACEA,OAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;"}
+{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button","src/components/button/button.tsx"],"sourcesContent":["scout-button {\n  display: inline-block;\n  height: var(--spacing-10);\n\n  .button {\n    flex: 1;\n    display: inline-flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-3);\n    padding: 0 var(--spacing-4);\n    font: var(--type-body-base);\n    border-radius: var(--spacing-2);\n    border: 1px solid transparent;\n    cursor: pointer;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  .icon {\n    width: var(--spacing-5);\n    height: var(--spacing-5);\n    margin: 0 calc(var(--spacing-1) * -1);\n  }\n\n  .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.icon-only .button {\n    aspect-ratio: 1 / 1;\n    justify-content: center;\n    padding: 0;\n  }\n\n  &.icon-only .icon {\n    margin: 0;\n  }\n\n  &.icon-only .content {\n    /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  .button.primary {\n    background-color: var(--color-background-brand-base);\n    color: var(--color-text-brand-inverse);\n\n    &:hover {\n      background-color: var(--color-background-brand-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-brand-pressed);\n    }\n  }\n\n  .button.outlined {\n    background-color: transparent;\n    border-color: var(--color-background-brand-subtle-base);\n    color: var(--color-text-brand-base);\n\n    &:hover {\n      background-color: var(--color-background-brand-subtle-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-brand-subtle-pressed);\n    }\n  }\n\n  .button.text {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-text-brand-base);\n\n    &:hover {\n      background-color: var(--color-background-brand-subtle-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-brand-subtle-pressed);\n    }\n  }\n\n  .button.caution {\n    background-color: var(--color-background-caution-bold-base);\n    color: var(--color-text-caution-bold-base);\n\n    &:hover {\n      background-color: var(--color-background-caution-bold-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-caution-bold-pressed);\n    }\n  }\n\n  .button.danger {\n    background-color: var(--color-background-danger-bold-base);\n    color: var(--color-text-danger-bold-base);\n\n    &:hover {\n      background-color: var(--color-background-danger-bold-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-danger-bold-pressed);\n    }\n  }\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A button component that can be used either as a normal button or as a link.\n * Will render a `<button>` element when the `type` is set to \"button\",\n * \"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n  @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n  @Prop() iconOnly: boolean = false;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {\n            type: this.type,\n          };\n\n    const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n    return (\n      <Host class={this.iconOnly ? \"icon-only\" : \"\"}>\n        <Tag\n          class={`button ${this.variant}`}\n          onClick={() => this.scoutClick.emit()}\n          {...props}\n        >\n          {this.iconPosition === \"before\" && icon}\n          <span class=\"content\">\n            <slot />\n          </span>\n          {this.iconPosition === \"after\" && icon}\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,01EAA01E;;MCoB/1E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;QAErE,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAA,EAC3CD,OAAC,CAAA,GAAG,qDACF,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAE,CAAA,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,GACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC,CACD;;;;;;;"}

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

@@ -9,7 +9,7 @@ const ScoutCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'ffeed5909a251bf61e750ebb575b278e90490945', class: "card" }, index.h("slot", { key: 'a8d457f36995146e722c2d53ddfb03f36848f6d1' })));
+        return (index.h("div", { key: '1ea5b0a2ea2a8f342e0153d9e90565cc69e2f336', class: "card" }, index.h("slot", { key: '328519393a7ad17aa158dea8835f16ebdc0cc7bc' })));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-B3fXatmo.js');
-var inputMixin = require('./inputMixin-CkYXihTB.js');
+var inputMixin = require('./inputMixin-D1D-VFiT.js');
 
 const checkSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=';
 
@@ -37,7 +37,7 @@ const ScoutCheckbox = class extends index.Mixin(inputMixin.inputMixin) {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (index.h(Tag, { key: '156e87e7a0d74f3cbc84b9c14a4ecce5b97e2912' }, index.h("input", { key: '6c70374d9e1f2605d7a0ec3b2216f8b055175e41', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkSvg})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
+        return (index.h(Tag, { key: '67b42b2b686fffecf891da832236fde663b740dc' }, index.h("input", { key: '81821918d102e1ca809915c14a20aa0847f46e30', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkSvg})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
                 this.onInput();
                 this.onChange(event);
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
@@ -77,7 +77,7 @@ const ScoutRadioButton = class extends index.Mixin(inputMixin.inputMixin) {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (index.h(Tag, { key: '9d30a566a03bfa1b49411878fbaa6bc07d53d2f6' }, index.h("input", { key: 'e2f2c58a2ec00fce35d27860e6fa37e23d09d040', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
+        return (index.h(Tag, { key: '22df090dcbf2f2b4b14b7cad8d34500295045f70' }, index.h("input", { key: '3bcc5022fa6202fd1fe733c1a8430f7ed1a54cf4', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
                 this.onInput();
                 this.onChange(event);
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));

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

@@ -9,7 +9,7 @@ const ScoutDivider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h(index.Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
+        return index.h(index.Host, { key: '6a4d3d0bed1689875ec867b16f0c77f391662fc8' });
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -38,7 +38,7 @@ const ScoutField = class {
         this.errorHidden = false;
     }
     render() {
-        return (index.h("div", { key: '9205b4607dc3805cb2df4434abf6fa3adc5ce63a', class: "field" }, index.h("label", { key: 'ac4a5e25d0e7742244a2e50c9627b77cedaf456a', htmlFor: this.inputId, class: "label" }, this.label), index.h("slot", { key: 'f1ec47e560f3ed6e528cefef95a21d3ca28232bb' }), index.h("p", { key: '2b6de5c916264287019f1cbd5c73966eff4a9bbd', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && index.h("p", { key: '7cb1582085194921f8dde1ecc138fa048cc6fd75', class: "help-text" }, this.helpText)));
+        return (index.h("div", { key: 'e7539abfb11fac14a5ffd87cfb1a70dd9c41cca7', class: "field" }, index.h("label", { key: 'c4501be15aafbb2d6e3c447c5893aa2510e20b89', htmlFor: this.inputId, class: "label" }, this.label), index.h("slot", { key: '5806c8d41926245074fb395b08226272a2432d96' }), index.h("p", { key: 'f1a36881c2ce2f8485d31e8faac452c9c2423d74', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && index.h("p", { key: '0d9ea374551b527d085ef33595fdee27e80d08fb', class: "help-text" }, this.helpText)));
     }
 };
 ScoutField.style = fieldCss;

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-B3fXatmo.js');
-var inputMixin = require('./inputMixin-CkYXihTB.js');
+var inputMixin = require('./inputMixin-D1D-VFiT.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 inputCss = ".sc-scout-input-h{display:flex;height:var(--spacing-10);--scout-input-padding:var(--spacing-2);--scout-input-border-radius:var(--spacing-2);--scout-input-type:var(--type-body-base)}.large.sc-scout-input-h{height:var(--spacing-14);--scout-input-padding:var(--spacing-3);--scout-input-border-radius:var(--spacing-3);--scout-input-type:var(--type-body-lg)}.input.sc-scout-input{flex:1;padding:var(--scout-input-padding);font:var(--scout-input-type);border:1px solid var(--color-gray-300);border-radius:var(--scout-input-border-radius);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}.elevated.sc-scout-input-h .input.sc-scout-input{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -2px rgba(0, 0, 0, 0.1);border-color:transparent}";
 
 const ScoutInput = class extends index.Mixin(inputMixin.inputMixin) {
     constructor(hostRef) {
@@ -15,6 +15,18 @@ const ScoutInput = class extends index.Mixin(inputMixin.inputMixin) {
         this._scoutInvalid = index.createEvent(this, "_scoutInvalid");
         this._scoutFieldId = index.createEvent(this, "_scoutFieldId");
     }
+    /**
+     * Size of the input element. Large fields are typically used for prominent
+     * inputs, such as a top search field on a page, while medium fields are used
+     * for regular form inputs.
+     */
+    size = "medium";
+    /**
+     * Visual variant of the input element. Elevated inputs have a shadow to help
+     * them stand out from the background and should only be used when absolutely
+     * positioned above other content.
+     */
+    variant = "default";
     /**
      * Type of input element. If you need a number input, read the accessibility
      * section of this MDN article first:
@@ -39,8 +51,15 @@ const ScoutInput = class extends index.Mixin(inputMixin.inputMixin) {
      * from tab order and are not validated.
      */
     disabled = false;
+    /**
+     * Placeholder text should rarely be used as it poses a lot of accessibility
+     * issues.
+     */
+    placeholder;
     render() {
-        return (index.h("input", { key: '91a90ed63063ef5533308ff1cb61840aec0bb1d3', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }));
+        const sizeClass = this.size === "large" ? "large" : "";
+        const variantClass = this.variant === "elevated" ? "elevated" : "";
+        return (index.h(index.Host, { key: '769603f718f511a0a2202814a7621d60a2a9f34c', class: `${sizeClass} ${variantClass}` }, index.h("input", { key: '6a4e1ad8173dfe37ce5facf8627990fd797dfc60', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, placeholder: this.placeholder, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));
     }
 };
 ScoutInput.style = inputCss;

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

@@ -1 +1 @@
-{"version":3,"file":"scout-input.entry.cjs.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}\n","import {\n  Component,\n  type ComponentInterface,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\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/**\n * The input component is a basic text input field that can be used to capture\n * user input. It supports various types and input modes for different use\n * cases. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <input\n        ref={(el) => this.setInputRef(el)}\n        id={this.ariaId}\n        type={this.type}\n        name={this.name}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={() => this.onInput()}\n        onBlur={() => this.onBlur()}\n        onInvalid={() => this.onInvalid()}\n      />\n    );\n  }\n}\n"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;AC0CrW,MAAA,UACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAElB,IAAA,IAAI;AAEZ;;;AAGG;IACK,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACEC,oEACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA;;;;;;;"}
+{"version":3,"file":"scout-input.entry.cjs.js","sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[":host {\n  display: flex;\n  height: var(--spacing-10);\n  --scout-input-padding: var(--spacing-2);\n  --scout-input-border-radius: var(--spacing-2);\n  --scout-input-type: var(--type-body-base);\n}\n\n:host(.large) {\n  height: var(--spacing-14);\n  --scout-input-padding: var(--spacing-3);\n  --scout-input-border-radius: var(--spacing-3);\n  --scout-input-type: var(--type-body-lg);\n}\n\n.input {\n  flex: 1;\n  padding: var(--scout-input-padding);\n  font: var(--scout-input-type);\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--scout-input-border-radius);\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}\n\n:host(.elevated) .input {\n  box-shadow:\n    0 4px 6px -1px rgb(0 0 0 / 0.1),\n    0 2px 4px -2px rgb(0 0 0 / 0.1);\n  border-color: transparent;\n}\n","import {\n  Component,\n  type ComponentInterface,\n  Host,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\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/**\n * The input component is a basic text input field that can be used to capture\n * user input. It supports various types and input modes for different use\n * cases. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Size of the input element. Large fields are typically used for prominent\n   * inputs, such as a top search field on a page, while medium fields are used\n   * for regular form inputs.\n   */\n  @Prop() size: \"medium\" | \"large\" = \"medium\";\n\n  /**\n   * Visual variant of the input element. Elevated inputs have a shadow to help\n   * them stand out from the background and should only be used when absolutely\n   * positioned above other content.\n   */\n  @Prop() variant: \"default\" | \"elevated\" = \"default\";\n\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Placeholder text should rarely be used as it poses a lot of accessibility\n   * issues.\n   */\n  @Prop() placeholder?: string;\n\n  render() {\n    const sizeClass = this.size === \"large\" ? \"large\" : \"\";\n    const variantClass = this.variant === \"elevated\" ? \"elevated\" : \"\";\n\n    return (\n      <Host class={`${sizeClass} ${variantClass}`}>\n        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type={this.type}\n          name={this.name}\n          inputMode={this.inputmode}\n          pattern={this.pattern}\n          class=\"input\"\n          value={this.value}\n          disabled={this.disabled}\n          placeholder={this.placeholder}\n          onInput={() => this.onInput()}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n      </Host>\n    );\n  }\n}\n"],"names":["Mixin","inputMixin","h","Host"],"mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,22BAA22B;;AC2C/2B,MAAA,UACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;;;AAIG;IACK,IAAI,GAAuB,QAAQ;AAE3C;;;;AAIG;IACK,OAAO,GAA2B,SAAS;AAEnD;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAElB,IAAA,IAAI;AAEZ;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEjC;;;AAGG;AACK,IAAA,WAAW;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,OAAO,GAAG,EAAE;AACtD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,UAAU,GAAG,EAAE;AAElE,QAAA,QACEC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,YAAY,CAAE,CAAA,EAAA,EACzCD,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACG;;;;;;;"}

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

@@ -19,6 +19,7 @@ const ScoutListViewItem = class {
     name;
     value;
     checked;
+    disabled;
     scoutClick;
     render() {
         const Tag = this.type === "link"
@@ -35,7 +36,7 @@ const ScoutListViewItem = class {
                     (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (index.h(index.Host, { key: '413bfec2ce5b069cb065b25e6a388b87d9bf972d', role: "listitem" }, index.h(Tag, { key: '8bd4978a887d2769bf537d7cf74fc02772055144', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+        return (index.h(index.Host, { key: '329bcf60c9b9df6af329d833500b673f3de7e0ff', role: "listitem" }, index.h(Tag, { key: '864c0c388e72a544afac7b73dc715fc992f913aa', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
     }
     getPrefix() {
         if (!this.icon) {
@@ -48,10 +49,10 @@ const ScoutListViewItem = class {
     }
     getSuffix() {
         if (this.type === "radio") {
-            return (index.h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked }));
+            return (index.h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked, disabled: this.disabled }));
         }
         if (this.type === "checkbox") {
-            return (index.h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked }));
+            return (index.h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked, disabled: this.disabled }));
         }
         return null;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"scout-list-view-item.entry.cjs.js","sources":["src/components/list-view-item/list-view-item.css?tag=scout-list-view-item&encapsulation=shadow","src/components/list-view-item/list-view-item.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n.button {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  text-align: unset;\n  min-height: var(--spacing-12);\n  color: var(--color-text-base);\n  padding: var(--spacing-2) var(--spacing-4);\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n  text-decoration: none;\n}\n\n.button:hover {\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.prefix-icon,\n.suffix-icon {\n  display: flex;\n  align-items: center;\n  height: var(--spacing-6);\n  color: var(--color-neutral-700);\n\n  svg,\n  .icon {\n    width: var(--spacing-6);\n    height: var(--spacing-6);\n  }\n}\n\n.prefix-icon {\n  justify-content: flex-start;\n  width: var(--spacing-14);\n}\n\n.suffix-icon {\n  justify-content: flex-end;\n  width: var(--spacing-8);\n\n  .icon {\n    background-color: currentColor;\n    mask-image: var(--icon);\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  }\n}\n\n.content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.primary {\n  font: var(--type-body-base);\n}\n\n.secondary {\n  font: var(--type-body-sm);\n  color: var(--color-neutral-700);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" | \"link\" | \"radio\" | \"checkbox\";\n\n@Component({\n  tag: \"scout-list-view-item\",\n  styleUrl: \"list-view-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewItem {\n  @Prop() icon?: string;\n  @Prop() primary?: string;\n  @Prop() secondary?: string;\n  @Prop() type: ItemType = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  @Prop() name?: string;\n  @Prop() value?: string;\n  @Prop() checked?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag =\n      this.type === \"link\"\n        ? \"a\"\n        : this.type === \"radio\" || this.type === \"checkbox\"\n          ? \"label\"\n          : \"button\";\n\n    const linkProps =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {};\n\n    return (\n      <Host role=\"listitem\">\n        <Tag\n          class=\"button\"\n          {...linkProps}\n          onClick={() => this.scoutClick.emit()}\n        >\n          {this.getPrefix()}\n          {this.getContent()}\n          {this.getSuffix()}\n        </Tag>\n      </Host>\n    );\n  }\n\n  private getPrefix() {\n    if (!this.icon) {\n      return null;\n    }\n\n    return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n  }\n\n  private getContent() {\n    return (\n      <div class=\"content\">\n        {this.primary && <div class=\"primary\">{this.primary}</div>}\n        {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n      </div>\n    );\n  }\n\n  private getSuffix() {\n    if (this.type === \"radio\") {\n      return (\n        <scout-radio-button\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    if (this.type === \"checkbox\") {\n      return (\n        <scout-checkbox\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    return null;\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,klCAAklC;;MCkB7lC,iBAAiB,GAAA,MAAA;;;;;AACpB,IAAA,IAAI;AACJ,IAAA,OAAO;AACP,IAAA,SAAS;IACT,IAAI,GAAa,QAAQ;AAEzB,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEH,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,OAAO;AAEN,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;cACA,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK;AACvC,kBAAE;kBACA,QAAQ;AAEhB,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;cACD,EAAE;AAER,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAC,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,GACV,SAAS,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAEpC,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD;;IAIH,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,IAAI;;AAGb,QAAA,OAAOA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI;;IAGlD,UAAU,GAAA;QAChB,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,IAAIA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,OAAO,CAAO,EACzD,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,CAC5D;;IAIF,SAAS,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YACzB,QACEA,gCACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,CAAA;;AAIN,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YAC5B,QACEA,4BACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,CAAA;;AAIN,QAAA,OAAO,IAAI;;;;;;;;"}
+{"version":3,"file":"scout-list-view-item.entry.cjs.js","sources":["src/components/list-view-item/list-view-item.css?tag=scout-list-view-item&encapsulation=shadow","src/components/list-view-item/list-view-item.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n.button {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  text-align: unset;\n  min-height: var(--spacing-12);\n  color: var(--color-text-base);\n  padding: var(--spacing-2) var(--spacing-4);\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n  text-decoration: none;\n}\n\n.button:hover {\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.prefix-icon,\n.suffix-icon {\n  display: flex;\n  align-items: center;\n  height: var(--spacing-6);\n  color: var(--color-neutral-700);\n\n  svg,\n  .icon {\n    width: var(--spacing-6);\n    height: var(--spacing-6);\n  }\n}\n\n.prefix-icon {\n  justify-content: flex-start;\n  width: var(--spacing-14);\n}\n\n.suffix-icon {\n  justify-content: flex-end;\n  width: var(--spacing-8);\n\n  .icon {\n    background-color: currentColor;\n    mask-image: var(--icon);\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  }\n}\n\n.content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.primary {\n  font: var(--type-body-base);\n}\n\n.secondary {\n  font: var(--type-body-sm);\n  color: var(--color-neutral-700);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" | \"link\" | \"radio\" | \"checkbox\";\n\n@Component({\n  tag: \"scout-list-view-item\",\n  styleUrl: \"list-view-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewItem {\n  @Prop() icon?: string;\n  @Prop() primary?: string;\n  @Prop() secondary?: string;\n  @Prop() type: ItemType = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  @Prop() name?: string;\n  @Prop() value?: string;\n  @Prop() checked?: boolean;\n\n  @Prop() disabled?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag =\n      this.type === \"link\"\n        ? \"a\"\n        : this.type === \"radio\" || this.type === \"checkbox\"\n          ? \"label\"\n          : \"button\";\n\n    const linkProps =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {};\n\n    return (\n      <Host role=\"listitem\">\n        <Tag\n          class=\"button\"\n          {...linkProps}\n          onClick={() => this.scoutClick.emit()}\n        >\n          {this.getPrefix()}\n          {this.getContent()}\n          {this.getSuffix()}\n        </Tag>\n      </Host>\n    );\n  }\n\n  private getPrefix() {\n    if (!this.icon) {\n      return null;\n    }\n\n    return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n  }\n\n  private getContent() {\n    return (\n      <div class=\"content\">\n        {this.primary && <div class=\"primary\">{this.primary}</div>}\n        {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n      </div>\n    );\n  }\n\n  private getSuffix() {\n    if (this.type === \"radio\") {\n      return (\n        <scout-radio-button\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n      );\n    }\n\n    if (this.type === \"checkbox\") {\n      return (\n        <scout-checkbox\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n      );\n    }\n\n    return null;\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,klCAAklC;;MCkB7lC,iBAAiB,GAAA,MAAA;;;;;AACpB,IAAA,IAAI;AACJ,IAAA,OAAO;AACP,IAAA,SAAS;IACT,IAAI,GAAa,QAAQ;AAEzB,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEH,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,OAAO;AAEP,IAAA,QAAQ;AAEP,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;cACA,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK;AACvC,kBAAE;kBACA,QAAQ;AAEhB,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;cACD,EAAE;AAER,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAC,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,GACV,SAAS,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAEpC,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD;;IAIH,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,IAAI;;AAGb,QAAA,OAAOA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI;;IAGlD,UAAU,GAAA;QAChB,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,IAAIA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,OAAO,CAAO,EACzD,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,CAC5D;;IAIF,SAAS,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;AACzB,YAAA,QACEA,OACE,CAAA,oBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA;;AAIN,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC5B,YAAA,QACEA,OACE,CAAA,gBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA;;AAIN,QAAA,OAAO,IAAI;;;;;;;;"}

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-B3fXatmo.js');
 
-const listViewSubheaderCss = ":host{display:flex;align-items:center;justify-content:flex-start;padding:var(--spacing-2) var(--spacing-4) var(--spacing-1) !important;border:none !important;background-color:transparent}.heading{margin:0;padding:0;font:var(--type-body-sm);color:var(--color-text-base);font-weight:500}";
+const listViewSubheaderCss = ":host{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--spacing-4) !important;height:var(--spacing-12);border:none !important;background-color:transparent}.heading{margin:0;padding:0;font:var(--type-body-sm);color:var(--color-gray-800);font-weight:500}";
 
 const ScoutListViewSubheader = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const ScoutListViewSubheader = class {
     text;
     headingLevel = "h2";
     render() {
-        return (index.h(index.Host, { key: '5ff0f60b511992241c5dacc25bd2ede127180da5', role: "listitem" }, index.h(this.headingLevel, { key: 'e857ca6fd07f98e379ade3efab9b7638a69ef184', class: "heading" }, this.text)));
+        return (index.h(index.Host, { key: 'b93e8553a3b335f456e7bcbd32c3c635da58da00', role: "listitem" }, index.h(this.headingLevel, { key: 'e82ea8203aef696156a211c6aac9415fe488a56b', class: "heading" }, this.text)));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"scout-list-view-subheader.entry.cjs.js","sources":["src/components/list-view-subheader/list-view-subheader.css?tag=scout-list-view-subheader&encapsulation=shadow","src/components/list-view-subheader/list-view-subheader.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noImportantStyles: https://github.com/tailwindlabs/tailwindcss/discussions/18628#discussioncomment-13915195 */\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) !important;\n  border: none !important;\n  background-color: transparent;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font: var(--type-body-sm);\n  color: var(--color-text-base);\n  font-weight: 500;\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-list-view-subheader\",\n  styleUrl: \"list-view-subheader.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewSubheader {\n  @Prop() text: string;\n  @Prop() headingLevel: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <this.headingLevel class=\"heading\">{this.text}</this.headingLevel>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,+RAA+R;;MCS/S,sBAAsB,GAAA,MAAA;;;;AACzB,IAAA,IAAI;IACJ,YAAY,GAA4C,IAAI;IAEpE,MAAM,GAAA;AACJ,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAC,IAAI,CAAC,YAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,IAAI,CAAqB,CAC7D;;;;;;;;"}
+{"version":3,"file":"scout-list-view-subheader.entry.cjs.js","sources":["src/components/list-view-subheader/list-view-subheader.css?tag=scout-list-view-subheader&encapsulation=shadow","src/components/list-view-subheader/list-view-subheader.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noImportantStyles: https://github.com/tailwindlabs/tailwindcss/discussions/18628#discussioncomment-13915195 */\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 var(--spacing-4) !important;\n  height: var(--spacing-12);\n  border: none !important;\n  background-color: transparent;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font: var(--type-body-sm);\n  color: var(--color-gray-800);\n  font-weight: 500;\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-list-view-subheader\",\n  styleUrl: \"list-view-subheader.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewSubheader {\n  @Prop() text: string;\n  @Prop() headingLevel: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <this.headingLevel class=\"heading\">{this.text}</this.headingLevel>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,uRAAuR;;MCSvS,sBAAsB,GAAA,MAAA;;;;AACzB,IAAA,IAAI;IACJ,YAAY,GAA4C,IAAI;IAEpE,MAAM,GAAA;AACJ,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAC,IAAI,CAAC,YAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,IAAI,CAAqB,CAC7D;;;;;;;;"}

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

@@ -29,7 +29,7 @@ const ScoutListView = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4364bb39e10f23da20440461fea6a8d7a3274bcc', role: "list" }, index.h("slot", { key: '34f7de708ef874254477b8b82e54cad78db0da6c' })));
+        return (index.h(index.Host, { key: '68c7e8924c60ba15c6c8a64724eebeea1731909f', role: "list" }, index.h("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -36,7 +36,7 @@ const ScoutLoader = class {
         this.showElement(this.symbolElements[0]);
     }
     render() {
-        return (index.h(index.Host, { key: 'cb49f1cfa8fcf2b816da9442270724f90b5aa724', class: this.size === "base" ? "" : this.size }, index.h("div", { key: '9ce230b2839d37172359d3642dcd1ec87471d870', class: "frame" }, this.getSymbols()), this.text && index.h("div", { key: 'f79e4f64ad2ee471a39c49dc2237a8f7173bbeaf', class: "text" }, this.text)));
+        return (index.h(index.Host, { key: '4262ae621bb24ef73641363fff67a1587ea2c644', class: this.size === "base" ? "" : this.size }, index.h("div", { key: '54ff8ba284a22ab683a9403c803bff7999acce3f', class: "frame" }, this.getSymbols()), this.text && index.h("div", { key: '83368c83c87bf6e171b996c05dc6a5e4da91e26e', class: "text" }, this.text)));
     }
     showElement(el) {
         el.classList.remove("animate-out");

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-B3fXatmo.js');
-var inputMixin = require('./inputMixin-CkYXihTB.js');
+var inputMixin = require('./inputMixin-D1D-VFiT.js');
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1kb3duIgo+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgOWw2IDZsNiAtNiIgLz4KPC9zdmc+';
 
@@ -28,7 +28,7 @@ const ScoutSelect = class extends index.Mixin(inputMixin.inputMixin) {
     disabled = false;
     name;
     render() {
-        return (index.h("div", { key: '15e5237281f534b083659425bb6a0944e9b296eb', class: "select-wrapper" }, index.h("select", { key: '5f8ba02781864c041bfeaffbcdcf6fc4185c45f5', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, index.h("slot", { key: '0f593e02a74e59aef1a2c2647df42712a7558d96' })), index.h("span", { key: '37b45aa85cf7cc9a3dbbcc5b575ff824942875da', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
+        return (index.h("div", { key: '12bf95188935ab6b11101c829970800199b53e9a', class: "select-wrapper" }, index.h("select", { key: '1c373cc25f6de17b7139baab0af69fd23adf3b85', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, index.h("slot", { key: '99f4430d6433e96c95651acba4ff0068235d1cb8' })), index.h("span", { key: '4f36424bd7395db03ea9caf10751cd570fc06853', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
     }
 };
 ScoutSelect.style = selectCss;

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

@@ -26,10 +26,10 @@ const ScoutStack = class {
      */
     gapSize = "m";
     render() {
-        return (index.h(index.Host, { key: '46f8dfbf3721fe377297d936ea07595e85b933a3', style: {
+        return (index.h(index.Host, { key: '768d68ecb7184d322a181d5917f2eaee3d270c52', style: {
                 "--stack-flex-direction": `${this.direction}`,
                 "--stack-gap-spacing": `var(--spacing-${GapSizeValues[this.gapSize]})`,
-            } }, index.h("slot", { key: '9d0a64fbc02da0960e96293696e77a7688af7132' })));
+            } }, index.h("slot", { key: '01a68b251dcbc2b46a2902f922fe56c57daf840c' })));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-B3fXatmo.js');
-var inputMixin = require('./inputMixin-CkYXihTB.js');
+var inputMixin = require('./inputMixin-D1D-VFiT.js');
 
 const switchCss = ".switch{width:var(--spacing-10);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:var(--spacing-8);background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative;display:flex;align-content:center;justify-content:center;transition-property:border-color;transition-duration:0.3s;transition-timing-function:ease-in-out;cursor:pointer;--switch-ball-padding:calc(var(--spacing-1) / 4);--switch-ball-size:calc(var(--spacing-5) - var(--switch-ball-padding) * 2)}.switch:hover{transition-property:none;border-color:var(--color-gray-400);background-color:var(--color-background-brand-subtle-hovered)}.switch:active{background-color:var(--color-background-brand-subtle-pressed)}.switch:checked{border-color:var(--color-background-brand-base)}.switch:hover::before{background-color:var(--color-gray-400)}.switch::before{content:\"\";background-color:var(--color-gray-300);width:var(--switch-ball-size);height:var(--switch-ball-size);border-radius:50%;position:absolute;top:var(--switch-ball-padding);left:var(--switch-ball-padding);transition-duration:0.3s;transition-property:left, right}.switch:checked::before{content:\"\";background-color:var(--color-background-brand-base);left:calc(100% - (var(--switch-ball-size) + var(--switch-ball-padding)));left:calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)))}.switch:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}.switch:disabled::before{background-color:var(--color-gray-300)}label{display:flex;flex-direction:row-reverse;align-items:center;font:var(--type-label-base);color:var(--color-text-base)}.inlineDivider{width:var(--spacing-2)}";
 
@@ -36,7 +36,7 @@ const ScoutSwitch = class extends index.Mixin(inputMixin.inputMixin) {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (index.h(Tag, { key: '22aee29982e7bb00cf76c2a096c4cf40b53e51c4' }, this.label, index.h("span", { key: '5ce6c501344e3da675d371e4a62794104ec1e6f1', class: "inlineDivider" }), index.h("input", { key: '81c07b77cd2ccdc66b93067da4eb15b62c87d5fd', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", class: "switch", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled, onChange: (event) => {
+        return (index.h(Tag, { key: 'b577bb6c1a4bde37ea76ae1c14bbdad4e3c11200' }, this.label, index.h("span", { key: 'b93dc86e4fa270efb3e8983c957731015d9709b4', class: "inlineDivider" }), index.h("input", { key: 'ca377aea983a9702fe9f292908048746c31433b9', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", class: "switch", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled, onChange: (event) => {
                 this.onInput();
                 this.onChange(event);
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));

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

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4]}]]],["scout-app-bar.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[774,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input.cjs",[[770,"scout-input",{"validate":[16],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[785,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
+  return index.bootstrapLazy([["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4],"disabled":[4]}]]],["scout-app-bar.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input.cjs",[[770,"scout-input",{"validate":[16],"size":[1],"variant":[1],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"placeholder":[1],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[785,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -4,7 +4,8 @@
 }
 
 ::slotted(scout-button) {
-  height: 100%;
+  /* biome-ignore lint/complexity/noImportantStyles: This is a cheeky override, so we're good with it */
+  height: 100% !important;
 }
 
 .container {