@scouterna/ui-webc 2.2.4 → 2.2.6

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-B3fXatmo.js');
-var inputMixin = require('./inputMixin-CkYXihTB.js');
+var index = require('./index-DpSUh0CA.js');
+var inputMixin = require('./inputMixin-BEUFwoun.js');
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1kb3duIgo+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgOWw2IDZsNiAtNiIgLz4KPC9zdmc+';
 
-const selectCss = ".select-wrapper.sc-scout-select{position:relative;display:inline-flex;width:100%}.select.sc-scout-select{width:100%;height:var(--spacing-10);padding:var(--spacing-2);padding-right:var(--spacing-8);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);-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.select.sc-scout-select:hover:not(:disabled){border-color:var(--color-gray-400)}.select.sc-scout-select:focus{outline:2px solid var(--color-background-brand-base);outline-offset:1px}.select.sc-scout-select:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}.select-icon.sc-scout-select{position:absolute;right:var(--spacing-2);top:50%;transform:translateY(-50%);width:var(--spacing-5);height:var(--spacing-5);background-color:var(--color-text-base);-webkit-mask-image:var(--icon-chevron);mask-image:var(--icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.select.sc-scout-select:disabled+.select-icon.sc-scout-select{background-color:var(--color-gray-500)}";
+const selectCss = () => `.select-wrapper.sc-scout-select{position:relative;display:inline-flex;width:100%}.select.sc-scout-select{width:100%;height:var(--spacing-10);padding:var(--spacing-2);padding-right:var(--spacing-8);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);-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.select.sc-scout-select:hover:not(:disabled){border-color:var(--color-gray-400)}.select.sc-scout-select:focus{outline:2px solid var(--color-background-brand-base);outline-offset:1px}.select.sc-scout-select:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}.select-icon.sc-scout-select{position:absolute;right:var(--spacing-2);top:50%;transform:translateY(-50%);width:var(--spacing-5);height:var(--spacing-5);background-color:var(--color-text-base);-webkit-mask-image:var(--icon-chevron);mask-image:var(--icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.select.sc-scout-select:disabled+.select-icon.sc-scout-select{background-color:var(--color-gray-500)}`;
 
 const ScoutSelect = class extends index.Mixin(inputMixin.inputMixin) {
     constructor(hostRef) {
@@ -28,10 +28,9 @@ 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;
+ScoutSelect.style = selectCss();
 
 exports.scout_select = ScoutSelect;
-//# sourceMappingURL=scout-select.entry.cjs.js.map

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-B3fXatmo.js');
+var index = require('./index-DpSUh0CA.js');
 
-const stackCss = ":host{display:flex;width:100%;flex-direction:var(--stack-flex-direction);gap:var(--stack-gap-spacing)}";
+const stackCss = () => `:host{display:flex;width:100%;flex-direction:var(--stack-flex-direction);gap:var(--stack-gap-spacing)}`;
 
 var GapSizeValues;
 (function (GapSizeValues) {
@@ -26,14 +26,13 @@ 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; }
 };
-ScoutStack.style = stackCss;
+ScoutStack.style = stackCss();
 
 exports.scout_stack = ScoutStack;
-//# sourceMappingURL=scout-stack.entry.cjs.js.map

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-B3fXatmo.js');
-var inputMixin = require('./inputMixin-CkYXihTB.js');
+var index = require('./index-DpSUh0CA.js');
+var inputMixin = require('./inputMixin-BEUFwoun.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)}";
+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)}`;
 
 const ScoutSwitch = class extends index.Mixin(inputMixin.inputMixin) {
     constructor(hostRef) {
@@ -36,14 +36,13 @@ 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() })));
     }
     static get delegatesFocus() { return true; }
 };
-ScoutSwitch.style = switchCss;
+ScoutSwitch.style = switchCss();
 
 exports.scout_switch = ScoutSwitch;
-//# sourceMappingURL=scout-switch.entry.cjs.js.map

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-B3fXatmo.js');
+var index = require('./index-DpSUh0CA.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.41.1 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -18,8 +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",[[529,"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",[[529,"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],"size":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[17,"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",[[514,"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",[[529,"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",[[529,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[513,"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",[[529,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[514,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[514,"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;
-//# sourceMappingURL=ui-webc.cjs.js.map

package/dist/collection/collection-manifest.json

@@ -21,8 +21,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.38.3",
-    "typescriptVersion": "5.9.3"
+    "version": "4.41.1",
+    "typescriptVersion": "5.8.3"
   },
   "collections": [],
   "bundles": []

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 {

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

@@ -46,4 +46,3 @@ export class ScoutAppBar {
         };
     }
 }
-//# sourceMappingURL=app-bar.js.map

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

@@ -21,4 +21,3 @@ export class ScoutBottomBar {
         };
     }
 }
-//# sourceMappingURL=bottom-bar.js.map

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

@@ -219,4 +219,3 @@ export class ScoutBottomBarItem {
             }];
     }
 }
-//# sourceMappingURL=bottom-bar-item.js.map

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

@@ -1,118 +1,107 @@
-:host {
+scout-button {
   display: inline-block;
-}
-
-.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 {
-  width: var(--spacing-5);
-  height: var(--spacing-5);
-  margin: 0 calc(var(--spacing-1) * -1);
-}
-
-.icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.button.icon-only {
-  aspect-ratio: 1 / 1;
-  justify-content: center;
-  padding: 0;
-}
-
-.button.icon-only .icon {
-  margin: 0;
-}
-
-.button.icon-only .content {
-  /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.button.primary {
-  background-color: var(--color-background-brand-base);
-  color: var(--color-text-brand-inverse);
 }
-
-.button.primary:hover {
-    background-color: var(--color-background-brand-hovered);
+scout-button[data-size="large"] {
+    height: var(--spacing-12);
+    font: var(--type-body-lg);
   }
-
-.button.primary:active {
-    background-color: var(--color-background-brand-pressed);
+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;
   }
-
-.button.outlined {
-  background-color: transparent;
-  border-color: var(--color-background-brand-subtle-base);
-  color: var(--color-text-brand-base);
-}
-
-.button.outlined:hover {
-    background-color: var(--color-background-brand-subtle-hovered);
+scout-button[data-size="large"] .button {
+    padding: 0 var(--spacing-5);
   }
-
-.button.outlined:active {
-    background-color: var(--color-background-brand-subtle-pressed);
+scout-button .icon {
+    width: var(--spacing-5);
+    height: var(--spacing-5);
+    margin: 0 calc(var(--spacing-1) * -1);
   }
-
-.button.text {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--color-text-brand-base);
-}
-
-.button.text:hover {
-    background-color: var(--color-background-brand-subtle-hovered);
+scout-button .icon svg {
+    width: 100%;
+    height: 100%;
   }
-
-.button.text:active {
-    background-color: var(--color-background-brand-subtle-pressed);
+scout-button[data-icon-only] .button {
+    aspect-ratio: 1 / 1;
+    justify-content: center;
+    padding: 0;
   }
-
-.button.caution {
-  background-color: var(--color-background-caution-bold-base);
-  color: var(--color-text-caution-bold-base);
-}
-
-.button.caution:hover {
-    background-color: var(--color-background-caution-bold-hovered);
+scout-button[data-icon-only] .icon {
+    margin: 0;
   }
-
-.button.caution:active {
-    background-color: var(--color-background-caution-bold-pressed);
+scout-button[data-icon-only] .content {
+    /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
-
-.button.danger {
-  background-color: var(--color-background-danger-bold-base);
-  color: var(--color-text-danger-bold-base);
-}
-
-.button.danger:hover {
-    background-color: var(--color-background-danger-bold-hovered);
+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);
   }
-
-.button.danger:active {
-    background-color: var(--color-background-danger-bold-pressed);
+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);
+    }

package/dist/collection/components/button/button.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 /**
  * A button component that can be used either as a normal button or as a link.
  * Will render a `<button>` element when the `type` is set to "button",
@@ -9,6 +9,10 @@ export class ScoutButton {
     href;
     target;
     rel;
+    /**
+     * Size of the button.
+     */
+    size = "medium";
     /**
      * The variant primarily affects the color of the button.
      */
@@ -33,11 +37,13 @@ export class ScoutButton {
             : {
                 type: this.type,
             };
-        const icon = this.icon && h("span", { key: '8f27b9e6a50427afef8d323212742f031f70db94', class: "icon", innerHTML: this.icon });
-        return (h(Tag, { key: '8f59580f38d9eafc86ac2ce9a0243cf94e1e87e0', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: 'c6a68e20086b2da562324d4a15a973ba24fca90d', class: "content" }, h("slot", { key: '4d52b30c5addf5389494c994d91ab7f35a51d734' })), this.iconPosition === "after" && icon));
+        const icon = this.icon && h("span", { key: '9a16653774acda8b34ff428fbe21cca1e481c9e4', class: "icon", innerHTML: this.icon });
+        return (h(Host
+        // Using data- attributes instead of classes because React fights and
+        // removes them sometimes. Hopefully we can find a proper fix later.
+        , { key: '05da4122d7e1b6e80c5230b43c42de366c2a570a', "data-size": this.size, "data-icon-only": this.iconOnly }, h(Tag, { key: 'd95abeb01118b1c00439aa66b308302bcded9871', class: `button ${this.variant}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: '623acd0ca7b801027515f52e5ff984769ccee5d8', class: "content" }, h("slot", { key: '17ba121fdc0522f7a7857d7d8abd937fe51d105b' })), this.iconPosition === "after" && icon)));
     }
     static get is() { return "scout-button"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["button.css"]
@@ -127,6 +133,32 @@ export class ScoutButton {
                 "reflect": false,
                 "attribute": "rel"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Size",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {
+                        "Size": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/button/button.tsx",
+                            "id": "src/components/button/button.tsx::Size"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"medium\""
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -233,4 +265,3 @@ export class ScoutButton {
             }];
     }
 }
-//# sourceMappingURL=button.js.map

package/dist/collection/components/card/card.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ScoutCard {
     render() {
-        return (h("div", { key: 'ffeed5909a251bf61e750ebb575b278e90490945', class: "card" }, h("slot", { key: 'a8d457f36995146e722c2d53ddfb03f36848f6d1' })));
+        return (h("div", { key: '1ea5b0a2ea2a8f342e0153d9e90565cc69e2f336', class: "card" }, h("slot", { key: '328519393a7ad17aa158dea8835f16ebdc0cc7bc' })));
     }
     static get is() { return "scout-card"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +20,3 @@ export class ScoutCard {
         };
     }
 }
-//# sourceMappingURL=card.js.map

package/dist/collection/components/checkbox/checkbox.js

@@ -30,7 +30,7 @@ export class ScoutCheckbox extends Mixin(inputMixin) {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: '156e87e7a0d74f3cbc84b9c14a4ecce5b97e2912' }, 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(${checkIcon})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
+        return (h(Tag, { key: '67b42b2b686fffecf891da832236fde663b740dc' }, 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(${checkIcon})` }, "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));
@@ -191,4 +191,3 @@ export class ScoutCheckbox extends Mixin(inputMixin) {
             }];
     }
 }
-//# sourceMappingURL=checkbox.js.map

package/dist/collection/components/divider/divider.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ScoutDivider {
     render() {
-        return h(Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
+        return h(Host, { key: '6a4d3d0bed1689875ec867b16f0c77f391662fc8' });
     }
     static get is() { return "scout-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -17,4 +17,3 @@ export class ScoutDivider {
         };
     }
 }
-//# sourceMappingURL=divider.js.map

package/dist/collection/components/field/field.js

@@ -35,7 +35,7 @@ export class ScoutField {
         this.errorHidden = false;
     }
     render() {
-        return (h("div", { key: '9205b4607dc3805cb2df4434abf6fa3adc5ce63a', class: "field" }, h("label", { key: 'ac4a5e25d0e7742244a2e50c9627b77cedaf456a', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: 'f1ec47e560f3ed6e528cefef95a21d3ca28232bb' }), h("p", { key: '2b6de5c916264287019f1cbd5c73966eff4a9bbd', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '7cb1582085194921f8dde1ecc138fa048cc6fd75', class: "help-text" }, this.helpText)));
+        return (h("div", { key: 'e7539abfb11fac14a5ffd87cfb1a70dd9c41cca7', class: "field" }, h("label", { key: 'c4501be15aafbb2d6e3c447c5893aa2510e20b89', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '5806c8d41926245074fb395b08226272a2432d96' }), h("p", { key: 'f1a36881c2ce2f8485d31e8faac452c9c2423d74', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '0d9ea374551b527d085ef33595fdee27e80d08fb', class: "help-text" }, this.helpText)));
     }
     static get is() { return "scout-field"; }
     static get encapsulation() { return "scoped"; }
@@ -127,4 +127,3 @@ export class ScoutField {
             }];
     }
 }
-//# sourceMappingURL=field.js.map

package/dist/collection/components/input/input.css

@@ -1,9 +1,24 @@
-.input {
+:host {
+  display: flex;
   height: var(--spacing-10);
-  padding: var(--spacing-2);
-  font: var(--type-body-base);
+  --scout-input-padding: var(--spacing-2);
+  --scout-input-border-radius: var(--spacing-2);
+  --scout-input-type: var(--type-body-base);
+}
+
+:host(.large) {
+  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 {
+  flex: 1;
+  padding: var(--scout-input-padding);
+  font: var(--scout-input-type);
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--spacing-2);
+  border-radius: var(--scout-input-border-radius);
   background-color: var(--color-white);
   color: var(--color-text-base);
 }
@@ -13,3 +28,10 @@
   color: var(--color-gray-700);
   cursor: not-allowed;
 }
+
+:host(.elevated) .input {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  border-color: transparent;
+}