@scouterna/ui-webc 2.2.0 → 2.2.2

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtwQwhfH.js');
+var index = require('./index-B3fXatmo.js');
 
 const listViewCss = ":host{display:flex;flex-direction:column;padding:var(--spacing-2) 0}";
 
@@ -29,7 +29,7 @@ const ScoutListView = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b20a3a6e3ba31b390e99a31b144bf522057ca55c', role: "list" }, index.h("slot", { key: 'fb58eb9e354415f9ed01120206d5cb2b1be28ad0' })));
+        return (index.h(index.Host, { key: '4364bb39e10f23da20440461fea6a8d7a3274bcc', role: "list" }, index.h("slot", { key: '34f7de708ef874254477b8b82e54cad78db0da6c' })));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtwQwhfH.js');
+var index = require('./index-B3fXatmo.js');
 
 const adventurerSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjU2IgogICBoZWlnaHQ9IjI1NiIKICAgdmlld0JveD0iMCAwIDI1NiAyNTYiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzEiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczEiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDMuNzc5NTA2NSwwLDAsMy43Nzk1MDY1LC0zMDkuODc3MDcsLTM3OS41OTg3MSkiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvciIKICAgICAgIGQ9Im0gOTYuNzE5NTg3LDE2NS42NTE2OSBjIDAuMDMyMSwtMC4wNzU4IDAuMDgwMiwtMC4yNTQ5OCAwLjEwNjgzLC0wLjM5ODIyIDAuMDI5NSwtMC4xNTg4MiAyLjUwNjA1LC00LjAwNjA1IDYuMzQ2NjkzLC05Ljg1OTQ2IDYuMDQ0NTgsLTkuMjEyMzggNi4zMDc4MSwtOS41OTkwNiA2LjUzNTI0LC05LjYwMDI4IDAuMjE5NzksLTAuMDAxIDAuMzQ0MzUsMC4xNDcwMyAxLjcxODYxLDIuMDQ0OSAwLjgxNDksMS4xMjUzOSAxLjUwNjkxLDIuMDYxNzkgMS41Mzc4MSwyLjA4MDg4IDAuMDMwOSwwLjAxOTEgMC42Nzc5NSwtMS40NTk2NiAxLjQzNzkxLC0zLjI4NjEzIDEuMzY3NjYsLTMuMjg3MDEgMS4zODQwNSwtMy4zMjA4NSAxLjYwODUzLC0zLjMyMDg1IDAuMjIzMzQsMCAwLjIzNDg5LDAuMDIyOCAwLjc1NzMsMS40OTU4MyAyLjEwMjI0LDUuOTI3NjEgMi41NDAxMiw3LjEyMDgyIDIuNTkzNTcsNy4wNjczNCAwLjA4MzgsLTAuMDgzOSAzLjA2MDEsLTUuNzEyMDIgMy4wNjAxLC01Ljc4NjY2IDAsLTAuMDMzMiAwLjEwNTIsLTAuMDYwNCAwLjIzMzc5LC0wLjA2MDQgMC4yMDIzOCwwIDAuMjg1NDEsMC4wNzY3IDAuNjE4MTUsMC41NzA3OCAwLjIxMTQxLDAuMzEzOTMgMi45MTA0NSw0LjYwOTU1IDUuOTk3ODgsOS41NDU4MSA0LjMxNTgsNi45MDAyMSA1LjYyNjAyLDkuMDUyMzggNS42Njc2Myw5LjMwOTYzIGwgMC4wNTQxLDAuMzM0NTkgaCAtMTkuMTY2MjkgYyAtMTguMjIzMzczLDAgLTE5LjE2MzQxMywtMC4wMDcgLTE5LjEwNzg3MywtMC4xMzc3NyB6IG0gMjIuNzI5NDkzLC0yMC41ODc0NiBjIC0wLjE3ODY5LC0wLjIyMTM4IC0wLjkzODA0LC0xLjgzNDQ4IC0yLjE0MDk2LC00LjU0ODA4IC0wLjcwMDI0LC0xLjU3OTYzIC0xLjMwMTE1LC0yLjkwMDU4IC0xLjMzNTM2LC0yLjkzNTQzIC0wLjA5ODksLTAuMTAwOCAtMS4yMzMzOCwyLjUxOTEzIC0yLjU1ODY2LDUuOTA4OTQgLTAuNzE3MTMsMS44MzQyOSAtMC41NzMwMiwxLjg1MjYgLTIuMjk5NDUsLTAuMjkyMTcgLTAuNzMwNiwtMC45MDc2NCAtMS4zNTE1LC0xLjY1MTYyIC0xLjM3OTc5LC0xLjY1MzMgLTAuMDI4MywtMC4wMDIgLTAuNTI0MjcsMC42NTIyNiAtMS4xMDIxOSwxLjQ1MzE5IC0xLjM0OTQzLDEuODcwMTQgLTEuMzMwMDEsMS44NjQ3OSAtMS43ODQ5MywwLjQ5MjI4IC0wLjU1NzU2LC0xLjY4MjIxIC0wLjY2NDUyLC0yLjM4NjgzIC0wLjYxODQ0LC00LjA3NDE5IDAuMDMxNSwtMS4xNTE1NyAwLjA5MTgsLTEuNzUzMTMgMC4yODg0NiwtMi44NzM1OCAwLjI4Nzg1LC0xLjY0MDM0IDAuMzMzMjIsLTIuODg3MjQgMC4xMzc2MywtMy43ODI2MiAtMC4wODQ2LC0wLjM4NzMzIC0wLjM1NjQzLC0xLjAxNyAtMC45MDA2NSwtMi4wODYzIC0wLjgzMDQxLC0xLjYzMTYyIC0xLjI1MTA4LC0yLjc2MDUyIC0xLjUwOTQ5LC00LjA1MDg1IC0wLjg0MzQxLC00LjIxMTM2IC0wLjAwNiwtOS45ODc0MyAyLjA1MTU4LC0xNC4xNDMzMSAxLjYxNTM2LC0zLjI2MzQgNC4wMzYyNywtNS45NzY5NiA3LjE4OTY5LC04LjA1ODgxIDEuMjQxMTYsLTAuODE5NCAyLjM2NTI2LC0xLjQwMTYxIDIuODM0MjIsLTEuNDY3OTUgMC4yMTY1LC0wLjAzMDYgMC40OTYzMywtMC4wODEgMC42MjE4NCwtMC4xMTE4OCAwLjE2MjUsLTAuMDQgMC4yMTIxNiwtMC4wMzAyIDAuMTcyNDksMC4wMzQgLTAuMDMxNiwwLjA1MTIgLTAuMDA4LDAuMDkwMSAwLjA1MzgsMC4wOTAxIDAuMDg4MywwIDAuMDY1NiwwLjIyNTM1IC0wLjExNjY1LDEuMTYxMjQgLTAuMzUzMzIsMS44MTQxNiAtMC45MDE2Nyw1LjEyNTAzIC0xLjA4NTQ5LDYuNTU0MTQgLTAuMzUyNjcsMi43NDE4NiAtMC4yOTM4MiwzLjk0NDM0IDAuMjc2NDcsNS42NDg3OSAwLjI4NTc2LDAuODU0MDkgMC45OTE3LDIuMzMzODcgMS4zODg1NSwyLjkxMDY3IGwgMC4yMzczNywwLjM0NSAxLjUwMTQ1LC0zLjExMzg1IGMgMS43Mzc0MiwtMy42MDMyMyAxLjYzNTAyLC0zLjQ4MzY3IDIuMjExODMsLTIuNTgyNDQgMS44OTkyOCwyLjk2NzUgNC4yOTMwMSw3LjM2NDQ3IDUuMjM5NjUsOS42MjQ1NCAxLjE1MzcyLDIuNzU0NDkgMS45NDkzMSw1LjIwNDg3IDIuMzQ4MjksNy4yMzI2OCAwLjE5NzgsMS4wMDUzMiAwLjIxMTM1LDEuMjEyNTIgMC4yMTQyMywzLjI3NzU1IDAuMDAzLDIuMTEzMzggLTAuMDA2LDIuMjQ1ODYgLTAuMjEyOTgsMy4yMDg2NSAtMC40OTA1MywyLjI3OTk4IC0xLjQyMTU4LDQuNDM1NDQgLTIuOTA1MDMsNi43MjU0IC0wLjcwNTgxLDEuMDg5NTQgLTAuNjA1NzgsMS4xNDMwNyAtMi4yMzA0NSwtMS4xOTM3OCAtMC43MzYxMSwtMS4wNTg3OSAtMS4zNTk2NSwtMS45MjYyNCAtMS4zODU2NCwtMS45Mjc2NyAtMC4wMjYsLTAuMDAxIC0wLjQ2NjI3LDAuNjc5MzkgLTAuOTc4NDEsMS41MTI5MiAtMS42MjE0MSwyLjYzODk1IC0xLjc0MzM1LDIuODE0NTQgLTEuOTU0NiwyLjgxNDU0IC0wLjEwMzkyLDAgLTAuMjI0NywtMC4wNDQzIC0wLjI2ODM4LC0wLjA5ODQgeiBtIC0wLjczNDEyLC0xMi4xNTIwNiBjIDEuMDk5NywtMS41Mzg3OCAxLjcxNDU0LC0yLjc3NTE4IDIuMDkxMzEsLTQuMjA1NDcgMC4yMTYzNiwtMC44MjEzNSAwLjU0NjY2LC0yLjcwMTA4IDAuNjMyNTksLTMuNjAwMSAwLjA1MjgsLTAuNTUyNzYgMC4wNjEyLC0wLjU3MDc4IDAuMjY1MjMsLTAuNTcwNzggMC4zMDIzLDAgMS42MjkwNCwxLjI2Nzk5IDIuNTgwODgsMi40NjY2IDAuNDE4NDcsMC41MjY5NCAwLjgwODY5LDEuMDEwNDMgMC44NjcxOCwxLjA3NDQxIDAuMTExOTQsMC4xMjI0NSAtMC4yOTMyOCwtMC45NTg2NyAtMC44OTAyLC0yLjM3NTAyIC0wLjQxNTMzLC0wLjk4NTQ5IC0xLjE2MTA0LC0yLjMxMjE0IC0yLjIyNjM5LC0zLjk2MDg1IC0xLjE0NzUsLTEuNzc1ODMgLTEuMzAxODMsLTIuMDA0NjEgLTEuMzUzMjQsLTIuMDA2MTUgLTAuMDI2LC03LjhlLTQgLTAuNTQxODEsMS4yMTE5OCAtMS4xNDYzNCwyLjY5NTAzIC0xLjM0MDc0LDMuMjg5MTggLTEuMjM4NDksMy4xOTMxNiAtMi4wMTY4OSwxLjg5Mzk2IC0xLjYxMjM4LC0yLjY5MTE1IC0zLjE4MTIzLC01LjYwNzU2IC0zLjUyNzc1LC02LjU1Nzg3IC0wLjQ2MjQ1LC0xLjI2ODI5IC0xLjA4NTI3LC00LjAzOTIxIC0xLjM0MzAyLC01Ljk3NTA5IC0wLjA1MjUsLTAuMzk0NjYgLTAuMTIxMDMsLTAuNzE3NTYgLTAuMTUyMTgsLTAuNzE3NTYgLTAuMDg3NywwIC0wLjgyNTUyLDAuODI5MzIgLTEuNDM1OTUsMS42MTM5MyAtMS44NzY0NiwyLjQxMTg5IC0zLjI3MzE2LDUuMjM4NSAtMy43NTM3NCw3LjU5Njc1IC0wLjM0ODk1LDEuNzEyMzUgLTAuMzYyMjQsMy45OTkxNiAtMC4wMzM1LDUuNzY3NDEgMC4xNTE4LDAuODE2NDkgMC41MTI1NiwyLjE4NDcgMC41NzYwMywyLjE4NDYyIDAuMDI2MywtNGUtNSAwLjE4MjgzLC0wLjY5OTc0IDAuMzQ3ODIsLTEuNTU0ODkgMC4zNzA3NCwtMS45MjE1NCAwLjYyMjczLC0yLjY5MzA5IDEuMzA1NzUsLTMuOTk4MDIgMC40ODM1NCwtMC45MjM4MyAwLjU1NjA4LC0xLjAyMzA0IDAuNzYzMzEsLTEuMDQzOTIgMC4yMjc2NSwtMC4wMjI5IDAuMjM5NjMsLTAuMDAyIDIuMDM5NzQsMy42MTYwNiAxLjg0OTI5LDMuNzE2NiAyLjExMzg4LDQuMTY1NzIgMy4xOTUsNS40MjMzNiAwLjU4NTc2LDAuNjgxNCAyLjY2NzksMi44MzI4OCAyLjczOTc0LDIuODMwOTggMC4wMjY3LC03LjFlLTQgMC4yNDAzMiwtMC4yNjk1MyAwLjQ3NDYzLC0wLjU5NzM5IHoiCiAgICAgICBpZD0icGF0aDUiIC8+CiAgPC9nPgo8L3N2Zz4K';
 
@@ -36,7 +36,7 @@ const ScoutLoader = class {
         this.showElement(this.symbolElements[0]);
     }
     render() {
-        return (index.h(index.Host, { key: 'b9271e02a57961fde6499c9e1cf2b32727631056', class: this.size === "base" ? "" : this.size }, index.h("div", { key: 'c0758b7d7b47bf97a5358d2df48d7518b899cb71', class: "frame" }, this.getSymbols()), this.text && index.h("div", { key: '9bcdf6093442c1a284a8b4de759b0b92f4df39d0', class: "text" }, this.text)));
+        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)));
     }
     showElement(el) {
         el.classList.remove("animate-out");

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

@@ -1,17 +1,21 @@
 'use strict';
 
-var index = require('./index-CtwQwhfH.js');
+var index = require('./index-B3fXatmo.js');
+var inputMixin = require('./inputMixin-CkYXihTB.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 ScoutSelect = class {
+const ScoutSelect = class extends index.Mixin(inputMixin.inputMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.scoutInputChange = index.createEvent(this, "scoutInputChange");
         this.scoutBlur = index.createEvent(this, "scoutBlur");
-        this._fieldId = index.createEvent(this, "_fieldId");
+        this._scoutValidate = index.createEvent(this, "_scoutValidate");
+        this._scoutInvalid = index.createEvent(this, "_scoutInvalid");
+        this._scoutFieldId = index.createEvent(this, "_scoutFieldId");
     }
     /**
      * Value of the select element, in case you want to control it yourself.
@@ -23,36 +27,8 @@ const ScoutSelect = class {
      */
     disabled = false;
     name;
-    /**
-     * Custom validation function run on top of the implicit validation performed
-     * by the browser. Return a string with the validation message to mark the
-     * select as invalid, or null to mark it as valid.
-     */
-    validate;
-    scoutInputChange;
-    scoutBlur;
-    /**
-     * Internal event used for form field association.
-     */
-    _fieldId;
-    ariaId;
-    componentWillLoad() {
-        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
-        this._fieldId.emit(this.ariaId);
-    }
-    onChange(event) {
-        const select = event.target;
-        if (this.validate) {
-            const validationMessage = this.validate(select.value);
-            select.setCustomValidity(validationMessage ?? "");
-        }
-        this.scoutInputChange.emit({
-            value: select.value,
-            element: select,
-        });
-    }
     render() {
-        return (index.h("div", { key: '5bba54c38010733ba9ef287c593fa4066205bffb', class: "select-wrapper" }, index.h("select", { key: '7511046af718d6ab2ff55cdccfbb9e218aa5fb10', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: (e) => this.onChange(e), onBlur: () => this.scoutBlur.emit() }, index.h("slot", { key: '51010cc2a853b5f4b85bcf474578460f16566819' })), index.h("span", { key: 'd424bbcf3fc441849534b861520843148eb0e478', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
+        return (index.h("div", { key: 'df8da542b4f1b6a90c1899ae2ebe3f1c24328d82', class: "select-wrapper" }, index.h("select", { key: 'ece339ed62a6395c282766f534a0290a25e10f03', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, index.h("slot", { key: '53baa52177e1a72c4b0f40ceda8f5de227958c38' })), index.h("span", { key: 'b19185c3f2152e3ee4abcab0e61c1a9f17fa2442', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
     }
 };
 ScoutSelect.style = selectCss;

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

@@ -1 +1 @@
-{"version":3,"file":"scout-select.entry.cjs.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n}\n\n.select {\n  width: 100%;\n  height: var(--spacing-10);\n  padding: var(--spacing-2);\n  padding-right: var(--spacing-8);\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  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n  border-color: var(--color-gray-400);\n}\n\n.select:focus {\n  outline: 2px solid var(--color-background-brand-base);\n  outline-offset: 1px;\n}\n\n.select:disabled {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n  cursor: not-allowed;\n}\n\n.select-icon {\n  position: absolute;\n  right: var(--spacing-2);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  background-color: var(--color-text-base);\n  mask-image: var(--icon-chevron);\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-size: contain;\n  pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n  background-color: var(--color-gray-500);\n}\n","import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\n\n@Component({\n  tag: \"scout-select\",\n  styleUrl: \"select.css\",\n  scoped: true,\n})\nexport class ScoutSelect implements ComponentInterface {\n  /**\n   * Value of the select element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  /**\n   * Whether the select is disabled. Disabled selects are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  @Prop() name: string;\n\n  /**\n   * Custom validation function run on top of the implicit validation performed\n   * by the browser. Return a string with the validation message to mark the\n   * select 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: HTMLSelectElement;\n  }>;\n  @Event() scoutBlur: EventEmitter<void>;\n\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  @State() ariaId: string;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onChange(event: Event) {\n    const select = event.target as HTMLSelectElement;\n\n    if (this.validate) {\n      const validationMessage = this.validate(select.value);\n      select.setCustomValidity(validationMessage ?? \"\");\n    }\n\n    this.scoutInputChange.emit({\n      value: select.value,\n      element: select,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"select-wrapper\">\n        <select\n          id={this.ariaId}\n          name={this.name}\n          class=\"select\"\n          disabled={this.disabled}\n          onChange={(e) => this.onChange(e)}\n          onBlur={() => this.scoutBlur.emit()}\n        >\n          <slot />\n        </select>\n        <span\n          class=\"select-icon\"\n          style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n          aria-hidden=\"true\"\n        />\n      </div>\n    );\n  }\n}\n"],"names":["h","chevronIcon"],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;MCgBxvC,WAAW,GAAA,MAAA;;;;;;;AACtB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;AAEZ;;;;AAIG;AACK,IAAA,QAAQ;AAEP,IAAA,gBAAgB;AAIhB,IAAA,SAAS;AAElB;;AAEG;AACM,IAAA,QAAQ;AAER,IAAA,MAAM;IAEf,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B;AAEhD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;AACrD,YAAA,MAAM,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC;;AAGnD,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,MAAM,CAAC,KAAK;AACnB,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EACjC,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAA,EAEnCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACTA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAC,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"scout-select.entry.cjs.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n}\n\n.select {\n  width: 100%;\n  height: var(--spacing-10);\n  padding: var(--spacing-2);\n  padding-right: var(--spacing-8);\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  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n  border-color: var(--color-gray-400);\n}\n\n.select:focus {\n  outline: 2px solid var(--color-background-brand-base);\n  outline-offset: 1px;\n}\n\n.select:disabled {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n  cursor: not-allowed;\n}\n\n.select-icon {\n  position: absolute;\n  right: var(--spacing-2);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  background-color: var(--color-text-base);\n  mask-image: var(--icon-chevron);\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-size: contain;\n  pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n  background-color: var(--color-gray-500);\n}\n","import {\n  Component,\n  type ComponentInterface,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n  tag: \"scout-select\",\n  styleUrl: \"select.css\",\n  scoped: true,\n})\nexport class ScoutSelect\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Value of the select element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  /**\n   * Whether the select is disabled. Disabled selects are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  @Prop() name: string;\n\n  render() {\n    return (\n      <div class=\"select-wrapper\">\n        <select\n          id={this.ariaId}\n          name={this.name}\n          class=\"select\"\n          disabled={this.disabled}\n          onChange={() => this.onInput()}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        >\n          <slot />\n        </select>\n        <span\n          class=\"select-icon\"\n          style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n          aria-hidden=\"true\"\n        />\n      </div>\n    );\n  }\n}\n"],"names":["Mixin","inputMixin","h","chevronIcon"],"mappings":";;;;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACexvC,MAAA,WACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACTA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAC,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;","x_google_ignoreList":[0]}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtwQwhfH.js');
+var index = require('./index-B3fXatmo.js');
 
 const stackCss = ":host{display:flex;width:100%;flex-direction:var(--stack-flex-direction);gap:var(--stack-gap-spacing)}";
 
@@ -26,10 +26,10 @@ const ScoutStack = class {
      */
     gapSize = "m";
     render() {
-        return (index.h(index.Host, { key: 'dabece4a23517d780be9002ec7387d986594d417', style: {
+        return (index.h(index.Host, { key: '46f8dfbf3721fe377297d936ea07595e85b933a3', style: {
                 "--stack-flex-direction": `${this.direction}`,
                 "--stack-gap-spacing": `var(--spacing-${GapSizeValues[this.gapSize]})`,
-            } }, index.h("slot", { key: 'b11e549495e7f04a8350fb6981c9fb32b940efdc' })));
+            } }, index.h("slot", { key: '9d0a64fbc02da0960e96293696e77a7688af7132' })));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,14 +1,20 @@
 'use strict';
 
-var index = require('./index-CtwQwhfH.js');
+var index = require('./index-B3fXatmo.js');
+var inputMixin = require('./inputMixin-CkYXihTB.js');
 
-const switchCss = ".switch{width:var(--spacing-12);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:1px 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-size:calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px)}.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;left:-1px;right:0;transition-duration:0.3s;transition-property:left, right}.switch:checked::before{content:\"\";background-color:var(--color-background-brand-base);left:calc(100% - (var(--spacing-6) - var(--spacing-1) / 2) + 1px);left:calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px)}.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 {
+const ScoutSwitch = class extends index.Mixin(inputMixin.inputMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
-        this.scoutSwitchToggled = index.createEvent(this, "scoutSwitchToggled");
-        this._fieldId = index.createEvent(this, "_fieldId");
+        this.scoutInputChange = index.createEvent(this, "scoutInputChange");
+        this.scoutBlur = index.createEvent(this, "scoutBlur");
+        this._scoutValidate = index.createEvent(this, "_scoutValidate");
+        this._scoutInvalid = index.createEvent(this, "_scoutInvalid");
+        this._scoutFieldId = index.createEvent(this, "_scoutFieldId");
+        this.scoutChecked = index.createEvent(this, "scoutChecked");
     }
     /**
      * Indicates whether the switch is toggled on or off.
@@ -20,26 +26,20 @@ const ScoutSwitch = class {
      */
     ariaLabelledby;
     label;
-    ariaId;
-    scoutSwitchToggled;
-    /**
-     * Internal event used for form field association.
-     */
-    _fieldId;
-    componentWillLoad() {
-        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
-        this._fieldId.emit(this.ariaId);
-    }
-    onClick(event) {
-        const switchElement = event.target;
-        this.scoutSwitchToggled.emit({
-            toggled: switchElement.checked,
-            element: switchElement,
+    scoutChecked;
+    onChange(event) {
+        const checkbox = event.target;
+        this.scoutChecked.emit({
+            checked: checkbox.checked,
+            element: checkbox,
         });
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (index.h(Tag, { key: 'faa6584a6fc9fb985a8c638dd6ea367e0d12b07e' }, this.label, index.h("span", { key: 'be4cef9603df7b632368d1ac916b4feb62cb4ab0', class: "inlineDivider" }), index.h("input", { key: '56ab1692bdf10e8767d8de3cd70949d2d55b8fe9', class: "switch", onChange: (event) => this.onClick(event), type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled })));
+        return (index.h(Tag, { key: '3df6f0be2cbb14fa4ad4ce777324960365ea5d68' }, this.label, index.h("span", { key: 'bbf999533051b967807f18f6d165a9b916a87252', class: "inlineDivider" }), index.h("input", { key: '8280933ed1b9038edcd8fb9bad39bef5745d4403', 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; }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"scout-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-12);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 1px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  left: -1px;\n  right: 0;\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,omDAAomD;;MCgBzmD,WAAW,GAAA,MAAA;;;;;;AACtB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,kBAAkB;AAI3B;;AAEG;AACM,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B;AAEtD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;AAC9B,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACEA,QAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnCA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;;"}
+{"version":3,"file":"scout-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-10);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-padding: calc(var(--spacing-1) / 4);\n  --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  top: var(--switch-ball-padding);\n  left: var(--switch-ball-padding);\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n\n  onChange(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"checkbox\"\n          class=\"switch\"\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n          onChange={(event) => {\n            this.onInput();\n            this.onChange(event);\n          }}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n      </Tag>\n    );\n  }\n}\n"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACkBvtD,MAAA,WACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,CAAC,CAAA;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACEC,QAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnCA,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,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtwQwhfH.js');
+var index = require('./index-B3fXatmo.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -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",[[785,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"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,"_fieldId","catchFieldId"],[0,"scoutInputChange","handleInputChange"],[0,"scoutBlur","handleValidationBlur"]]]]],["scout-input.cjs",[[770,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"validate":[16],"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",{"value":[1],"disabled":[4],"name":[1],"validate":[16],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"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]}]]],["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);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,10 +1,7 @@
-:host {
-  display: inline-flex;
-  height: var(--spacing-10);
-}
-
 .button {
+  flex: 1;
   display: inline-flex;
+  height: var(--spacing-10);
   align-items: center;
   justify-content: center;
   gap: var(--spacing-3);

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

@@ -15,6 +15,7 @@ export class ScoutButton {
      * An optional icon to display alongside the button text. Must be an SVG string.
      */
     icon;
+    iconPosition = "after";
     iconOnly = false;
     scoutClick;
     render() {
@@ -30,11 +31,11 @@ export class ScoutButton {
             : {
                 type: this.type,
             };
-        return (h(Tag, { key: 'e82f79602197488fbf8e013259203ae5862da824', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '1be7c7ccdb6f6570f08f06a81539174c76cbaa8c', class: "content" }, h("slot", { key: '556d6b6497cbcd437fbd4d77bff8b814511c844a' })), this.icon && h("span", { key: '9cf1e36f3cd767e2ac65dd0bdb1401759bf71e9e', class: "icon", innerHTML: this.icon })));
+        const icon = this.icon && h("span", { key: '4a3e7eb143e3cf53d6a6327163be00947d3cf370', class: "icon", innerHTML: this.icon });
+        return (h(Tag, { key: 'd7807c803a4032c6a48c9ffbc08ea1b4bb845058', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: 'f89787ee6e018587d87c1656d32c1b438263d8c9', class: "content" }, h("slot", { key: '31567811c1d3151aaa74546df5c50fc01a41d582' })), this.iconPosition === "after" && icon));
     }
     static get is() { return "scout-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["button.css"]
@@ -169,6 +170,26 @@ export class ScoutButton {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"before\" | \"after\"",
+                    "resolved": "\"after\" | \"before\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "\"after\""
+            },
             "iconOnly": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAQH,MAAM,OAAO,WAAW;IACd,IAAI,GAA2C,QAAQ,CAAC;IAExD,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IACd,QAAQ,GAAY,KAAK,CAAC;IAEzB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;QAER,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,SAAS;gBACnB,8DAAQ,CACH;YACN,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CACrD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"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() 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    return (\n      <Tag\n        class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <span class=\"content\">\n          <slot />\n        </span>\n        {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAMH,MAAM,OAAO,WAAW;IACd,IAAI,GAA2C,QAAQ,CAAC;IAExD,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IACd,YAAY,GAAuB,OAAO,CAAC;IAC3C,QAAQ,GAAY,KAAK,CAAC;IAEzB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;QAER,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEtE,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI;YACvC,6DAAM,KAAK,EAAC,SAAS;gBACnB,8DAAQ,CACH;YACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  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"]}

package/dist/collection/components/card/card.css

@@ -1,4 +1,8 @@
 :host {
+  display: contents;
+}
+
+.card {
   display: block;
   border-radius: var(--spacing-2);
   border: 1px solid var(--color-gray-100);

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ScoutCard {
     render() {
-        return h("slot", { key: '44e84e98fac4b83c20fdec40a532c752f41dffd7' });
+        return (h("div", { key: 'ffeed5909a251bf61e750ebb575b278e90490945', class: "card" }, h("slot", { key: 'a8d457f36995146e722c2d53ddfb03f36848f6d1' })));
     }
     static get is() { return "scout-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;GAEG;AAQH,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h } from \"@stencil/core\";\n\n/**\n * A general surface to hold various types of content.\n */\n@Component({\n  tag: \"scout-card\",\n  styleUrl: \"card.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutCard {\n  render() {\n    return <slot />;\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;GAEG;AAQH,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,MAAM;YACf,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h } from \"@stencil/core\";\n\n/**\n * A general surface to hold various types of content.\n */\n@Component({\n  tag: \"scout-card\",\n  styleUrl: \"card.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutCard {\n  render() {\n    return (\n      <div class=\"card\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,10 @@
-import { h, } from "@stencil/core";
+import { h, Mixin, } from "@stencil/core";
 import checkIcon from "@tabler/icons/outline/check.svg";
-export class ScoutCheckbox {
+import { inputMixin } from "../../mixins/inputMixin";
+export class ScoutCheckbox extends Mixin(inputMixin) {
+    constructor() {
+        super();
+    }
     checked = false;
     disabled = false;
     /**
@@ -10,16 +14,7 @@ export class ScoutCheckbox {
     label;
     value;
     name;
-    ariaId;
     scoutChecked;
-    /**
-     * Internal event used for form field association.
-     */
-    _fieldId;
-    componentWillLoad() {
-        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
-        this._fieldId.emit(this.ariaId);
-    }
     onChange(event) {
         const checkbox = event.target;
         this.scoutChecked.emit({
@@ -29,7 +24,10 @@ export class ScoutCheckbox {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: '088d1bbf053b0c9cf42851b9954030316c5ef01a' }, h("input", { key: 'd212a3f91e78d20270934e336c2356ee3474c129', 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.onChange(event) }), this.label));
+        return (h(Tag, { key: '6c0a45c9c34f6d2e7dd972186d4fa51b15bbe318' }, h("input", { key: '3649ab29a57824ff4b7f56bee0be1aa48dec8371', 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));
     }
     static get is() { return "scout-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -163,11 +161,6 @@ export class ScoutCheckbox {
             }
         };
     }
-    static get states() {
-        return {
-            "ariaId": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "scoutChecked",
@@ -189,21 +182,6 @@ export class ScoutCheckbox {
                         }
                     }
                 }
-            }, {
-                "method": "_fieldId",
-                "name": "_fieldId",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal event used for form field association."
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAOxD,MAAM,OAAO,aAAa;IAChB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,MAAM,CAAS;IAEf,YAAY,CAGlB;IACH;;OAEG;IACM,QAAQ,CAAuB;IAExC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,QAAQ,CAAC,KAAY;QACnB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAElD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACF,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GACzC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\n\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox {\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Prop() value: string;\n\n  @Prop() name: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onChange(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        <input\n          id={this.ariaId}\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          class=\"checkbox\"\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n          onChange={(event) => this.onChange(event)}\n        />\n        {this.label}\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAOrD,MAAM,OAAO,aACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGjB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,YAAY,CAGlB;IAEH,QAAQ,CAAC,KAAY;QACnB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAElD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACF,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Prop() value: string;\n\n  @Prop() name: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n\n  onChange(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          class=\"checkbox\"\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n          onChange={(event) => {\n            this.onInput();\n            this.onChange(event);\n          }}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n        {this.label}\n      </Tag>\n    );\n  }\n}\n"]}

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: 'e139694ee7eb8dd88235b420d987878af2c970ce' });
+        return h(Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
     }
     static get is() { return "scout-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class ScoutField {
         event.stopPropagation();
         this.inputId = event.detail;
     }
-    handleInputChange(event) {
+    handleValidation(event) {
         const { element } = event.detail;
         this.errorHidden = true;
         if (element.validity.valid) {
@@ -26,11 +26,11 @@ export class ScoutField {
             this.errorText = element.validationMessage;
         }
     }
-    handleValidationBlur() {
+    showError() {
         this.errorHidden = false;
     }
     render() {
-        return (h("div", { key: '3cffad1b9fda1ea4060cf4587420ea67d16a7cde', class: "field" }, h("label", { key: '2d065d94b9aa5a9f251366a6fd58559210b485c9', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '3bdc5d1426b0fca754ee4eface64514503758d3c' }), h("p", { key: '57cb158fec7e16cbb2eb78481939fb84e86f9836', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '50b05f88914cb9f0f4fc615b24cdd2d6ac525219', class: "help-text" }, this.helpText)));
+        return (h("div", { key: 'faca4ec5b46ef2e8f30ba1d83c9541454c6c42af', class: "field" }, h("label", { key: '38f84753a62d401c34aa5626dfecd7bbb80e24d8', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '328f3c36f3241eae23a0918ad8a1c8eaa7e27027' }), h("p", { key: 'b200a60b5e1948fca8b6922f5046ee3e898ebde6', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '09b0acb16e4faefb3eb681ea0eb5229f305a163c', class: "help-text" }, this.helpText)));
     }
     static get is() { return "scout-field"; }
     static get encapsulation() { return "scoped"; }
@@ -96,20 +96,26 @@ export class ScoutField {
     static get elementRef() { return "hostElement"; }
     static get listeners() {
         return [{
-                "name": "_fieldId",
+                "name": "_scoutFieldId",
                 "method": "catchFieldId",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "scoutInputChange",
-                "method": "handleInputChange",
+                "name": "_scoutValidate",
+                "method": "handleValidation",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "scoutBlur",
-                "method": "handleValidationBlur",
+                "method": "showError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "_scoutInvalid",
+                "method": "showError",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAe3E,MAAM,OAAO,UAAU;IACrB;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,QAAQ,CAAU;IAEjB,OAAO,CAAS;IAChB,SAAS,GAAkB,IAAI,CAAC;IAChC,WAAW,GAAY,KAAK,CAAC;IAE3B,WAAW,CAAe;IAGrC,YAAY,CAAC,KAA0B;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9B,CAAC;IAGD,iBAAiB,CACf,KAGE;QAEF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QAC7C,CAAC;IACH,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,OAAO;YAChB,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,IACxC,IAAI,CAAC,KAAK,CACL;YACR,8DAAQ;YACR,0DAAG,KAAK,EAAC,YAAY,eAAW,QAAQ,IACrC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC;YACH,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAK,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\ntype ValidatableElement =\n  | HTMLButtonElement\n  | HTMLFieldSetElement\n  | HTMLInputElement\n  | HTMLOutputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\n@Component({\n  tag: \"scout-field\",\n  styleUrl: \"field.css\",\n  scoped: true,\n})\nexport class ScoutField {\n  /**\n   * Label shown above the field.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Help text shown below the field.\n   */\n  @Prop() helpText?: string;\n\n  @State() inputId: string;\n  @State() errorText: string | null = null;\n  @State() errorHidden: boolean = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @Listen(\"_fieldId\")\n  catchFieldId(event: CustomEvent<string>) {\n    event.stopPropagation();\n    this.inputId = event.detail;\n  }\n\n  @Listen(\"scoutInputChange\")\n  handleInputChange(\n    event: CustomEvent<{\n      value: string;\n      element: ValidatableElement;\n    }>,\n  ) {\n    const { element } = event.detail;\n\n    this.errorHidden = true;\n    if (element.validity.valid) {\n      this.errorText = null;\n    } else {\n      this.errorText = element.validationMessage;\n    }\n  }\n\n  @Listen(\"scoutBlur\")\n  handleValidationBlur() {\n    this.errorHidden = false;\n  }\n\n  render() {\n    return (\n      <div class=\"field\">\n        <label htmlFor={this.inputId} class=\"label\">\n          {this.label}\n        </label>\n        <slot />\n        <p class=\"error-text\" aria-live=\"polite\">\n          {!this.errorHidden && this.errorText}\n        </p>\n        {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO3E,MAAM,OAAO,UAAU;IACrB;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,QAAQ,CAAU;IAEjB,OAAO,CAAS;IAChB,SAAS,GAAkB,IAAI,CAAC;IAChC,WAAW,GAAY,KAAK,CAAC;IAE3B,WAAW,CAAe;IAGrC,YAAY,CAAC,KAA0B;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9B,CAAC;IAGD,gBAAgB,CACd,KAOE;QAEF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QAC7C,CAAC;IACH,CAAC;IAID,SAAS;QACP,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,OAAO;YAChB,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,IACxC,IAAI,CAAC,KAAK,CACL;YACR,8DAAQ;YACR,0DAAG,KAAK,EAAC,YAAY,eAAW,QAAQ,IACrC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC;YACH,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAK,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-field\",\n  styleUrl: \"field.css\",\n  scoped: true,\n})\nexport class ScoutField {\n  /**\n   * Label shown above the field.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Help text shown below the field.\n   */\n  @Prop() helpText?: string;\n\n  @State() inputId: string;\n  @State() errorText: string | null = null;\n  @State() errorHidden: boolean = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @Listen(\"_scoutFieldId\")\n  catchFieldId(event: CustomEvent<string>) {\n    event.stopPropagation();\n    this.inputId = event.detail;\n  }\n\n  @Listen(\"_scoutValidate\")\n  handleValidation(\n    event: CustomEvent<{\n      element:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement;\n    }>,\n  ) {\n    const { element } = event.detail;\n\n    this.errorHidden = true;\n    if (element.validity.valid) {\n      this.errorText = null;\n    } else {\n      this.errorText = element.validationMessage;\n    }\n  }\n\n  @Listen(\"scoutBlur\")\n  @Listen(\"_scoutInvalid\")\n  showError() {\n    this.errorHidden = false;\n  }\n\n  render() {\n    return (\n      <div class=\"field\">\n        <label htmlFor={this.inputId} class=\"label\">\n          {this.label}\n        </label>\n        <slot />\n        <p class=\"error-text\" aria-live=\"polite\">\n          {!this.errorHidden && this.errorText}\n        </p>\n        {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n      </div>\n    );\n  }\n}\n"]}